From 40a7267f7d3ccac4fd3028cd40c7373736be4d19 Mon Sep 17 00:00:00 2001 From: Edenn Touitou Date: Wed, 11 Oct 2023 12:40:32 +0000 Subject: [PATCH 1/4] Update doc for neumorphism --- README.md | 51 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 18 deletions(-) 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. From 8efbb24ec7872dd5a13cd62b245f61c550ab8f0e Mon Sep 17 00:00:00 2001 From: Edenn Touitou Date: Wed, 11 Oct 2023 13:00:40 +0000 Subject: [PATCH 2/4] Update Configuration.story.md --- src/histoires/Configuration.story.md | 78 ++++++++++++++++++++++------ 1 file changed, 61 insertions(+), 17 deletions(-) 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` From a57a029463b01cbfda0ca9b65790050126a8eb7d Mon Sep 17 00:00:00 2001 From: Edenn Touitou Date: Wed, 11 Oct 2023 13:36:54 +0000 Subject: [PATCH 3/4] Create CHANGELOG.md --- CHANGELOG.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 CHANGELOG.md 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 + + + + +``` From d40cc324ce3f0d3eaf56767bd9ce6c9d5314755f Mon Sep 17 00:00:00 2001 From: Edenn Touitou Date: Wed, 11 Oct 2023 13:37:55 +0000 Subject: [PATCH 4/4] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",