From 2310761b0b1379ca81010e0006b8ccbce5541f84 Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Mon, 17 Jun 2024 16:31:45 +0200 Subject: [PATCH 1/7] add color tokens --- src/tokens/colors.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/tokens/colors.css diff --git a/src/tokens/colors.css b/src/tokens/colors.css new file mode 100644 index 0000000..1dd349c --- /dev/null +++ b/src/tokens/colors.css @@ -0,0 +1,42 @@ + +:root { + /*BLUE */ + --color-blue-900: #060C1DFF; + --color-blue-800: #0C173BFF; + --color-blue-700: #132358FF; + --color-blue-600: #192E76FF; + --color-blue-500: #1F3A93FF; + --color-blue-400: #4C61A9FF; + --color-blue-300: #7989BEFF; + --color-blue-200: #A5B0D4FF; + --color-blue-100: #D2D8E9FF; + --color-blue-050: #E9EBF4FF; + + /*CYAN*/ + --color-cyan-900: #06282CFF; + --color-cyan-800: #0D5059FF; + --color-cyan-700: #137985FF; + --color-cyan-600: #1AA1B2FF; + --color-cyan-500: #20C9DEFF; + --color-cyan-400: #4DD4E5FF; + --color-cyan-300: #79DFEBFF; + --color-cyan-200: #A6E9F2FF; + --color-cyan-100: #D2F4F8FF; + --color-cyan-050: #E9FAFCFF; + + /*NAVY*/ + --color-navy-900: #000018FF; + --color-navy-800: #000031FF; + --color-navy-700: #010149FF; + --color-navy-600: #010162FF; + --color-navy-500: #01017AFF; + --color-navy-400: #343495FF; + --color-navy-300: #6767AFFF; + --color-navy-200: #9999CAFF; + --color-navy-100: #CCCCE4FF; + --color-navy-050: #E6E6F2FF; +} + + + + From b4549ee1a50304b2e0ebe8464961612beece0ca8 Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Tue, 18 Jun 2024 16:18:34 +0200 Subject: [PATCH 2/7] rename color tokens and mode css in Button.css --- package-lock.json | 21 +++++------ src/assets/main.css | 1 + src/stories/Button.stories.ts | 5 ++- src/stories/Button.vue | 69 +++++++++-------------------------- src/stories/button.css | 30 ++++++++++++++- src/tokens/colors.css | 9 +++++ 6 files changed, 67 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb864cf..e5ac440 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,16 @@ { - "name": "design-system-marque-blanche", - "version": "0.0.0", + "name": "@octo-technology/dsocto", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "design-system-marque-blanche", - "version": "0.0.0", + "name": "@octo-technology/dsocto", + "version": "1.0.0", "dependencies": { + "@tsconfig/node20": "^20.1.2", + "@vitejs/plugin-vue": "^5.0.4", + "@vue/tsconfig": "^0.5.1", "vite-plugin-css-injected-by-js": "^3.4.0", "vue": "^3.4.21" }, @@ -21,14 +24,11 @@ "@storybook/test": "^8.0.0", "@storybook/vue3": "^8.0.0", "@storybook/vue3-vite": "^8.0.0", - "@tsconfig/node20": "^20.1.2", "@types/jsdom": "^21.1.6", "@types/node": "^20.11.25", - "@vitejs/plugin-vue": "^5.0.4", "@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-typescript": "^12.0.0", "@vue/test-utils": "^2.4.4", - "@vue/tsconfig": "^0.5.1", "eslint": "^8.49.0", "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-vue": "^9.17.0", @@ -4461,8 +4461,7 @@ "node_modules/@tsconfig/node20": { "version": "20.1.2", "resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.2.tgz", - "integrity": "sha512-madaWq2k+LYMEhmcp0fs+OGaLFk0OenpHa4gmI4VEmCKX4PJntQ6fnnGADVFrVkBj0wIdAlQnK/MrlYTHsa1gQ==", - "dev": true + "integrity": "sha512-madaWq2k+LYMEhmcp0fs+OGaLFk0OenpHa4gmI4VEmCKX4PJntQ6fnnGADVFrVkBj0wIdAlQnK/MrlYTHsa1gQ==" }, "node_modules/@types/aria-query": { "version": "5.0.4", @@ -5046,7 +5045,6 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz", "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==", - "dev": true, "engines": { "node": "^18.0.0 || >=20.0.0" }, @@ -5532,8 +5530,7 @@ "node_modules/@vue/tsconfig": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.5.1.tgz", - "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==", - "dev": true + "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==" }, "node_modules/@yarnpkg/esbuild-plugin-pnp": { "version": "3.0.0-rc.15", diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..d55014c 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,4 +1,5 @@ @import './base.css'; +@import '../tokens/colors.css'; #app { max-width: 1280px; diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index a69991a..8edd91c 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -10,6 +10,7 @@ const meta = { tags: ['autodocs'], argTypes: { size: { control: 'select', options: ['small', 'medium', 'large'] }, + type: { options: ['primary', 'seondary', 'destructive'] }, backgroundColor: { control: 'color' }, }, args: { @@ -28,14 +29,14 @@ type Story = StoryObj; */ export const Primary: Story = { args: { - primary: true, + type: 'primary', label: 'Button', }, }; export const Secondary: Story = { args: { - primary: false, + type: 'secondary', label: 'Button', }, }; diff --git a/src/stories/Button.vue b/src/stories/Button.vue index 29e980d..e635883 100644 --- a/src/stories/Button.vue +++ b/src/stories/Button.vue @@ -1,29 +1,35 @@ - - diff --git a/src/stories/button.css b/src/stories/button.css index dc91dc7..d811cfe 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -1,3 +1,23 @@ +button { + background-color:var(--color-button-background-primary); + color: #FFF; + padding: 12px 24px; + border-radius: 24px; + border: 1px solid var(--color-button-border-primary); + font-weight: 700; + font-size: 16px; +} + +button:hover { + background-color: var(--color-button-background-primary-hover); + border-color: var(--color-button-border-primary-hover); + box-shadow: 4px 8px 8px 2px #1F3A934D; +} + +button:active { + box-shadow: 0px 2px 3px 1px rgba(1, 1, 122, 0.6); +} + .storybook-button { font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; @@ -7,9 +27,15 @@ display: inline-block; line-height: 1; } + +/*BUTTON TYPES*/ + .storybook-button--primary { - color: white; - background-color: #1ea7fd; + color: #FFF; + padding: 12px 24px; + border-radius: 24px; + font-weight: 700; + font-size: 16px; } .storybook-button--secondary { color: #333; diff --git a/src/tokens/colors.css b/src/tokens/colors.css index 1dd349c..7f2dc4e 100644 --- a/src/tokens/colors.css +++ b/src/tokens/colors.css @@ -35,6 +35,15 @@ --color-navy-200: #9999CAFF; --color-navy-100: #CCCCE4FF; --color-navy-050: #E6E6F2FF; + + /*TOKENS*/ + + --color-button-background-primary: var(--color-navy-500); + --color-button-border-primary: var(--color-navy-500); + --color-button-background-primary-hover: var(--color-navy-700); + --color-button-border-primary-hover:var(--color-navy-700); + + } From 9085baa6bcc6aa2e0b303361072f611ad00fa547 Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Mon, 24 Jun 2024 14:43:53 +0200 Subject: [PATCH 3/7] refacto button.css --- src/assets/base.css | 6 ++--- src/stories/button.css | 53 +++++++++++++++++++++--------------------- src/tokens/colors.css | 2 ++ 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/assets/base.css b/src/assets/base.css index 8816868..1af5511 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -67,13 +67,13 @@ body { background-color 0.5s; line-height: 1.6; font-family: + Roboto, + Oxygen, + Ubuntu, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', diff --git a/src/stories/button.css b/src/stories/button.css index d811cfe..ed5bdf9 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -1,47 +1,48 @@ -button { - background-color:var(--color-button-background-primary); - color: #FFF; +/* Verifier la font family roboto au global */ + +.storybook-button { + font-weight: 700; + cursor: pointer; padding: 12px 24px; border-radius: 24px; - border: 1px solid var(--color-button-border-primary); - font-weight: 700; font-size: 16px; } -button:hover { +/*BUTTON TYPES*/ + +/*PRIMARY*/ +.storybook-button--primary { + background-color:var(--color-button-background-primary); + border: 1px solid var(--color-button-border-primary); + color: #FFF; +} + +.storybook-button--primary:hover { background-color: var(--color-button-background-primary-hover); border-color: var(--color-button-border-primary-hover); box-shadow: 4px 8px 8px 2px #1F3A934D; } -button:active { +.storybook-button--primary:active { box-shadow: 0px 2px 3px 1px rgba(1, 1, 122, 0.6); } -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} - -/*BUTTON TYPES*/ - -.storybook-button--primary { - color: #FFF; - padding: 12px 24px; - border-radius: 24px; - font-weight: 700; - font-size: 16px; -} +/*SECONDARY*/ .storybook-button--secondary { color: #333; background-color: transparent; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; + border: 1px solid var(--color-button-border-secondary); } + +.storybook-button--secondary:hover { + border: 4px solid var(--color-button-border-secondary-hover); + box-shadow: 4px 8px 8px 2px #1F3A934D; + +} + +/*DESTRUCTIVE*/ + .storybook-button--small { font-size: 12px; padding: 10px 16px; diff --git a/src/tokens/colors.css b/src/tokens/colors.css index 7f2dc4e..d48dafb 100644 --- a/src/tokens/colors.css +++ b/src/tokens/colors.css @@ -42,6 +42,8 @@ --color-button-border-primary: var(--color-navy-500); --color-button-background-primary-hover: var(--color-navy-700); --color-button-border-primary-hover:var(--color-navy-700); + --color-button-border-secondary:var(--color-navy-500); + --color-button-border-secondary-hover:var(--color-navy-700); } From 515ecf6e68b5f2576a507512901282d6d7f89988 Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Mon, 24 Jun 2024 15:45:33 +0200 Subject: [PATCH 4/7] create destructive button and css --- src/stories/Button.stories.ts | 9 +++++++++ src/stories/button.css | 14 ++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index 8edd91c..f65f282 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -41,6 +41,14 @@ export const Secondary: Story = { }, }; +export const Destructive: Story = { + args: { + type: 'destructive', + label: 'Button', + }, +}; + + export const Large: Story = { args: { label: 'Button', @@ -54,3 +62,4 @@ export const Small: Story = { size: 'small', }, }; + diff --git a/src/stories/button.css b/src/stories/button.css index ed5bdf9..7161711 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -42,6 +42,20 @@ } /*DESTRUCTIVE*/ +.storybook-button--destructive { + background-color:#AE1813; + border: 1px solid #D91E18; + color: #FFF; +} + +.storybook-button--destructive:hover { + background-color: #AE1813; + border-color: #AE1813; + box-shadow: 4px 8px 8px 2px #f1b0ae; + +} + +/* BUTTON SIZES*/ .storybook-button--small { font-size: 12px; From 01d9c9009cd9c81e37bbfd53dc7f878866d81f9a Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Wed, 26 Jun 2024 16:05:15 +0200 Subject: [PATCH 5/7] add color tokens and rename box-shadow property --- src/stories/button.css | 38 +++++++++++++++++++++++++------------- src/tokens/colors.css | 30 +++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 14 deletions(-) diff --git a/src/stories/button.css b/src/stories/button.css index 7161711..fd9dd23 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -1,8 +1,9 @@ /* Verifier la font family roboto au global */ -.storybook-button { +button { font-weight: 700; cursor: pointer; + transition:box-shadow 200ms ease-in-out; padding: 12px 24px; border-radius: 24px; font-size: 16px; @@ -14,45 +15,56 @@ .storybook-button--primary { background-color:var(--color-button-background-primary); border: 1px solid var(--color-button-border-primary); - color: #FFF; + color: var(--color-button-text-primary); } .storybook-button--primary:hover { background-color: var(--color-button-background-primary-hover); border-color: var(--color-button-border-primary-hover); - box-shadow: 4px 8px 8px 2px #1F3A934D; + box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-primary) r g b / 30%); } .storybook-button--primary:active { - box-shadow: 0px 2px 3px 1px rgba(1, 1, 122, 0.6); + background-color:var(--color-button-border-primary-active); + box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-primary-active) r g b / 60%); } /*SECONDARY*/ .storybook-button--secondary { - color: #333; + color: var(--color-button-text-secondary); background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; border: 1px solid var(--color-button-border-secondary); } .storybook-button--secondary:hover { - border: 4px solid var(--color-button-border-secondary-hover); - box-shadow: 4px 8px 8px 2px #1F3A934D; + border: 2px solid var(--color-button-border-secondary-hover); + box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-primary) r g b / 30%); + color:var(--color-button-text-secondary-hover); +} +.storybook-button--secondary:active { + color: var(--color-button-text-secondary); + border: 2px solid var(--color-button-border-secondary-active); + box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-secondary-active) r g b / 60%); } /*DESTRUCTIVE*/ .storybook-button--destructive { - background-color:#AE1813; - border: 1px solid #D91E18; + background-color:var(--color-button-background-destructive); + border: 1px solid var(--color-button-border-destructive); color: #FFF; } .storybook-button--destructive:hover { - background-color: #AE1813; - border-color: #AE1813; - box-shadow: 4px 8px 8px 2px #f1b0ae; + background-color: var(--color-button-background-destructive); + border-color: var(--color-button-background-destructive); + box-shadow: 2px 4px 7px 2px var(--color-button-shadow-destructive); + /*remplacer par des tokens de couleurs pour la shadow ou pas ?*/ +} +.storybook-button--destructive:active { + box-shadow: 0px 2px 3px 1px rgba(241, 176, 174); + /*remplacer par des tokens pour la shadow ou pas ?*/ } /* BUTTON SIZES*/ diff --git a/src/tokens/colors.css b/src/tokens/colors.css index d48dafb..faedefb 100644 --- a/src/tokens/colors.css +++ b/src/tokens/colors.css @@ -36,16 +36,44 @@ --color-navy-100: #CCCCE4FF; --color-navy-050: #E6E6F2FF; + + /*RED*/ + --color-red-900: #2B0605FF; + --color-red-800: #570C0AFF; + --color-red-700: #82120EFF; + --color-red-600: #AE1813FF; + --color-red-500: #D91E18FF; + --color-red-400: #E14B46FF; + --color-red-300: #E87874FF; + --color-red-200: #F0A5A3FF; + --color-red-100: #F7D2D1FF; + --color-red-050: #FBE9E8FF; + /*TOKENS*/ + --color-button-text-primary: white; --color-button-background-primary: var(--color-navy-500); - --color-button-border-primary: var(--color-navy-500); --color-button-background-primary-hover: var(--color-navy-700); + --color-button-border-primary: var(--color-navy-500); + --color-button-border-primary-active: var(--color-navy-500); --color-button-border-primary-hover:var(--color-navy-700); + --color-button-shadow-primary: var(--color-blue-500); + --color-button-shadow-primary-active: var(--color-navy-500); + + --color-button-text-secondary:var(--color-navy-500); + --color-button-text-secondary-hover:var(--color-navy-700); --color-button-border-secondary:var(--color-navy-500); --color-button-border-secondary-hover:var(--color-navy-700); + --color-button-border-secondary-active:var(--color-navy-500); + --color-button-shadow-secondary: var(--color-blue-500); + --color-button-shadow-secondary-active: var(--color-navy-500); + --color-button-text-destructive:#FFF; + --color-button-background-destructive:var(--color-red-600); + --color-button-border-destructive:var(--color-red-500); + --color-button-shadow-destructive:var(--color-red-200); +/*TODO* variablisier les couleurs primary*/ } From 0c8de53d5b3fd75c2732f3f7f21454d11253231d Mon Sep 17 00:00:00 2001 From: olyn-octo Date: Wed, 26 Jun 2024 16:59:09 +0200 Subject: [PATCH 6/7] MR review correction --- src/stories/Button.stories.ts | 4 +--- src/stories/Button.vue | 6 +++--- src/stories/button.css | 12 +++++------- src/tokens/colors.css | 5 +++-- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index f65f282..f4a8a82 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -10,11 +10,9 @@ const meta = { tags: ['autodocs'], argTypes: { size: { control: 'select', options: ['small', 'medium', 'large'] }, - type: { options: ['primary', 'seondary', 'destructive'] }, - backgroundColor: { control: 'color' }, + type: { options: ['primary', 'secondary', 'destructive'] }, }, args: { - primary: false, // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args onClick: fn(), }, diff --git a/src/stories/Button.vue b/src/stories/Button.vue index e635883..c4830c1 100644 --- a/src/stories/Button.vue +++ b/src/stories/Button.vue @@ -2,7 +2,7 @@ - +