diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..cea7427
--- /dev/null
+++ b/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
+
+```
+
+```html
+
+```
+
+```html
+
+```
+
+**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
+
+
+
+
+```
diff --git a/README.md b/README.md
index e389893..bc979a5 100644
--- a/README.md
+++ b/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.
\ No newline at end of file
+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.
diff --git a/package.json b/package.json
index a41c45d..5093bce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "tanoshi",
- "version": "0.13.5",
+ "version": "0.13.6",
"keywords": [
"svelte",
"sveltekit",
diff --git a/src/histoires/Configuration.story.md b/src/histoires/Configuration.story.md
index b9a903f..6ea3e60 100644
--- a/src/histoires/Configuration.story.md
+++ b/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`
\ No newline at end of file
+ * `--black-border-container`