Deozza patch 1

CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+## Version 0.13.0
+
+### Breaking changes
+
+**For the components `button`, `input`, `pill`, `alert`, `container`, `form`, `navigation`, `taa` :**
+
+You must specify the design style in order to use the svelte component. In the 0.12 versions, the default style was Material Design. Now, Glassmorphism and Neumorphism are available : 
+
+```html
+<TanoshiButtonMaterial tanoshiButtonModel={primaryButton} />
+```
+
+```html
+<TanoshiButtonGlass tanoshiButtonModel={primaryButton} />
+```
+
+```html
+<TanoshiButtonNeumorphism tanoshiButtonModel={primaryButton} />
+```
+
+**For the component `navigation` :**
+
+In the previous version 0.12, there was a unique model for both the desktop view and the mobile view. Now you will need to build a different model for each view : 
+
+```html
+<script lang=ts>
+const primaryDesktopNavigationModel: TanoshiDesktopNavigationModel = new TanoshiDesktopNavigationModel()
+        .setTheme(THEMES.Primary)
+        .setItemsAtRight(navbarRightItemModels)
+        .setItemsAtCenter(logoNavbarModel)
+
+const primaryMobileNavigationModel: TanoshiMobileNavigationModel = new TanoshiMobileNavigationModel()
+    .setTheme(THEMES.Primary)
+    .setItemsWhenClosed(logoNavbarModel)
+    .setItemsWhenOpened(navbarRightItemModels);
+</script>
+
+<TanoshiNavigationMaterial tanoshiDesktopNavigationModel={primaryDesktopNavigationModel}  tanoshiMobileNavigationModel={primaryMobileNavigationModel} />
+
+``` 

README.md

@@ -35,26 +35,41 @@ Create a `app.css` file in the `/src/routes` folder with the following css varia
 
 ```css
 :root{
-    --primary: rgb(217, 119, 52);
-    --primary-dark: rgb(108, 68, 28);
-    --secondary: rgb(107 114 128);
-    --secondary-dark: rgb(75 85 99);
-    --success: rgb(34 197 94);
-    --success-dark: rgb(22 163 74);
-    --warning: rgb(234 179 8);
-    --warning-dark: rgb(202 138 4);
-    --danger: rgb(239 68 68);
-    --danger-dark: rgb(220 38 38);
-    --info: rgb(103 232 249);
-    --info-dark: rgb(34 211 238);
-    --white: rgb(255 255 255);
-    --white-dark: rgb(100 116 139);
-    --black: rgb(60, 59, 59);
-    --black-dark: rgb(4, 4, 4);
+    --primary: 217, 119, 52;
+    --primary-dark: 108, 68, 28;
+    --secondary: 107, 114, 128;
+    --secondary-dark: 75, 85, 99;
+    --success: 34, 197, 94;
+    --success-dark: 22, 163, 74;
+    --warning: 234, 179, 8;
+    --warning-dark: 202, 138, 4;
+    --danger: 239, 68, 68;
+    --danger-dark: 220 38, 38;
+    --info: 103, 232, 249;
+    --info-dark: 34, 211, 238;
+    --white: 255 255 255;
+    --white-dark: 100, 116, 139;
+    --black: 60, 59, 59;
+    --black-dark: 4, 4, 4;
 }
 ```
 
-These are the mandatory CSS variables that will be used to style the components. To get the list of all the options available, check [this page](https://tanoshi.netlify.app/story/src-histoires-configuratiom-story-js)
+These are the mandatory CSS variables that will be used to style the components.
+
+If you are using Neumophormism elements, you also need to add `light` variations of your CSS variables : 
+
+```css
+:root{
+    --primary-light: 237, 139, 72
+    --primary: 217, 119, 52;
+    --primary-dark: 108, 68, 28;
+    --secondary-light: 127, 134, 148;
+    --secondary: 107, 114, 128;
+    --secondary-dark: 75, 85. 99;
+# and so on...
+```
+
+To get the list of all the options available, check [this page](https://tanoshi.netlify.app/story/src-histoires-configuratiom-story-js)
 
 Then import the CSS file in your `+layout.page` :
 
@@ -66,4 +81,4 @@ Then import the CSS file in your `+layout.page` :
 
 ## Start to build components
 
-Check the [documentation](https://tanoshi.netlify.app/story/src-histoires-home-story-js) to learn how to build components and add them to your pages.
+Check the [documentation](https://tanoshi.netlify.app/story/src-histoires-home-story-js) to learn how to build components and add them to your pages.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tanoshi",
-  "version": "0.13.5",
+  "version": "0.13.6",
   "keywords": [
     "svelte",
     "sveltekit",

src/histoires/Configuration.story.md

@@ -10,25 +10,38 @@ In order to use Tanoshi, you only need to create a CSS file in your `/src/routes
 
 ```css
 :root{
-    --primary: rgb(217, 119, 52);
-    --primary-dark: rgb(108, 68, 28);
-    --secondary: rgb(107 114 128);
-    --secondary-dark: rgb(75 85 99);
-    --success: rgb(34 197 94);
-    --success-dark: rgb(22 163 74);
-    --warning: rgb(234 179 8);
-    --warning-dark: rgb(202 138 4);
-    --danger: rgb(239 68 68);
-    --danger-dark: rgb(220 38 38);
-    --info: rgb(103 232 249);
-    --info-dark: rgb(34 211 238);
-    --white: rgb(255 255 255);
-    --white-dark: rgb(100 116 139);
-    --black: rgb(60, 59, 59);
-    --black-dark: rgb(4, 4, 4);
+    --primary: 217, 119, 52;
+    --primary-dark: 108, 68, 28;
+    --secondary: 107, 114, 128;
+    --secondary-dark: 75, 85, 99;
+    --success: 34, 197, 94;
+    --success-dark: 22, 163, 74;
+    --warning: 234, 179, 8;
+    --warning-dark: 202, 138, 4;
+    --danger: 239, 68, 68;
+    --danger-dark: 220 38, 38;
+    --info: 103, 232, 249;
+    --info-dark: 34, 211, 238;
+    --white: 255 255 255;
+    --white-dark: 100, 116, 139;
+    --black: 60, 59, 59;
+    --black-dark: 4, 4, 4;
 }
 ```
 
+If you are using Neumophormism elements, you also need to add `light` variations of your CSS variables : 
+
+```css
+:root{
+    --primary-light: 237, 139, 72
+    --primary: 217, 119, 52;
+    --primary-dark: 108, 68, 28;
+    --secondary-light: 127, 134, 148;
+    --secondary: 107, 114, 128;
+    --secondary-dark: 75, 85. 99;
+# and so on...
+```
+
 Then import the CSS file in your `+layout.page` :
 
 ```html
@@ -42,20 +55,28 @@ Then import the CSS file in your `+layout.page` :
 
 ### General :
 
+ * `--primary-light`
  * `--primary`
  * `--primary-dark`
+ * `--secondary-light`
  * `--secondary`
  * `--secondary-dark`
+ * `--success-light`
  * `--success`
  * `--success-dark`
+ * `--warning-light`
  * `--warning`
  * `--warning-dark`
+ * `--danger-light`
  * `--danger`
  * `--danger-dark`
+ * `--info-light`
  * `--info`
  * `--info-dark`
+ * `--white-light`
  * `--white`
  * `--white-dark`
+ * `--black-light`
  * `--black`
  * `--black-dark`
 
@@ -112,7 +133,30 @@ Then import the CSS file in your `+layout.page` :
 
 ### Input :
 
+ * `--primary-bg-input`
+ * `--primary-text-input`
+ * `--primary-border-input`
+ * `--secondary-bg-input`
+ * `--secondary-text-input`
+ * `--secondary-border-input`
+ * `--success-bg-input`
+ * `--success-text-input`
+ * `--success-border-input`
+ * `--warning-bg-input`
+ * `--warning-text-input`
+ * `--warning-border-input`
+ * `--danger-bg-input`
+ * `--danger-text-input`
+ * `--danger-border-input`
+ * `--info-bg-input`
+ * `--info-text-input`
+ * `--info-border-input`
+ * `--white-bg-input`
+ * `--white-text-input`
+ * `--white-border-input`
+ * `--black-bg-input`
  * `--black-text-input`
+ * `--black-border-input`
 
 ### Link :
 
@@ -188,4 +232,4 @@ Then import the CSS file in your `+layout.page` :
  * `--white-background-container`
  * `--white-border-container`
  * `--black-background-container`
- * `--black-border-container`
+ * `--black-border-container`