;
*/
export const Primary: Story = {
args: {
- primary: true,
- label: 'Button',
+ type: 'primary',
+ label: {
+ text: 'Button'
+ },
},
};
-export const Secondary: Story = {
+export const Destructive: Story = {
args: {
- primary: false,
- label: 'Button',
+ type: 'destructive',
+ label: {
+ text: 'Button'
+ },
},
};
+
export const Large: Story = {
args: {
- label: 'Button',
+ label: {
+ text: 'Button'
+ },
size: 'large',
},
};
export const Small: Story = {
args: {
- label: 'Button',
+ label: {
+ text: 'Button'
+ },
size: 'small',
},
};
+
diff --git a/src/stories/Button.vue b/src/stories/Button.vue
index 29e980d..54a4cd1 100644
--- a/src/stories/Button.vue
+++ b/src/stories/Button.vue
@@ -1,29 +1,56 @@
-
+
-
diff --git a/src/stories/Header.vue b/src/stories/Header.vue
index b716db0..377f299 100644
--- a/src/stories/Header.vue
+++ b/src/stories/Header.vue
@@ -13,9 +13,9 @@
Welcome, {{ user.name }}!
-
-
-
+
+
+
diff --git a/src/stories/button.css b/src/stories/button.css
index dc91dc7..56670fb 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -1,21 +1,177 @@
-.storybook-button {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+/* Verifier la font family roboto au global */
+
+button {
+ display: flex;
+ gap: .25rem;
+ align-items: center;
font-weight: 700;
- border: 0;
- border-radius: 3em;
cursor: pointer;
- display: inline-block;
- line-height: 1;
+ transition:box-shadow 200ms ease-in-out;
+ padding: 12px 24px;
+ border-radius: 24px;
+ font-size: 16px;
+}
+
+/*BUTTON TYPES*/
+
+/*PRIMARY CONTAINED*/
+
+
+.storybook-button--primary-contained{
+ background-color:var(--color-button-background-primary-contained);
+ border: 1px solid var(--color-button-border-primary-contained);
+ color: var(--color-button-text-primary-contained);
+}
+
+.storybook-button--primary-contained:hover {
+ background-color: var(--color-button-background-primary-contained-hover);
+ border-color: var(--color-button-border-primary-contained-hover);
+ box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-primary-contained) r g b / 30%);
+}
+
+.storybook-button--primary-contained:active {
+ background-color:var(--color-button-border-primary-contained-active);
+ box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-primary-contained-active) r g b / 60%);
+}
+
+.storybook-button--primary-contained[disabled] {
+ background-color: var(--color-button-background-primary-contained-disabled);
+ border: 1px solid var(--color-button-border-primary-contained-disabled);
+ color: var(--color-button-text-primary-contained-disabled);
+}
+
+.storybook-button--primary-contained:hover[disabled] {
+ box-shadow: none;
+}
+
+.storybook-button--primary-contained:active[disabled] {
+ box-shadow: none;
+}
+
+/*PRIMARY OUTLINED*/
+
+
+.storybook-button--primary-outlined {
+ color: var(--color-button-text-primary-outlined);
+ background-color: var(--color-button-background-primary-outlined);
+ border: 1px solid var(--color-button-border-primary-outlined);
+}
+
+.storybook-button--primary-outlined:hover {
+ border: 2px solid var(--color-button-border-primary-outlined-hover);
+ background-color: var(--color-button-background-primary-outlined-hover);
+ box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-primary-outlined) r g b / 30%);
+ color:var(--color-button-text-primary-outlined-hover);
+}
+
+.storybook-button--primary-outlined:active {
+ color: var(--color-button-text-primary-outlined);
+ background-color: var(--color-button-background-primary-outlined-active);
+ border: 2px solid var(--color-button-border-primary-outlined-active);
+ box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-primary-outlined-active) r g b / 60%);
+}
+
+.storybook-button--primary-outlined[disabled] {
+ background-color: var(--color-button-background-primary-outlined-disabled);
+ border: 1px solid var(--color-button-border-primary-outlined-disabled);
+ color: var(--color-button-text-primary-outlined-disabled);
+}
+
+.storybook-button--primary-outlined:hover[disabled] {
+ box-shadow: none;
+}
+
+.storybook-button--primary-outlined:active[disabled] {
+ box-shadow: none;
+}
+
+/*PRIMARY SUBTLE*/
+
+.storybook-button--primary-subtle {
+ color: var(--color-button-text-primary-subtle);
+ background-color: transparent;
+ border: none;
}
-.storybook-button--primary {
- color: white;
- background-color: #1ea7fd;
+
+.storybook-button--primary-subtle:hover {
+ color: var(--color-button-text-primary-subtle-hover);
+ background-color:var(--color-button-background-primary-subtle-hover);
+ border: none;
}
-.storybook-button--secondary {
- color: #333;
+
+.storybook-button--primary-subtle:active {
+ color: var(--color-button-text-primary-subtle-active);
+ background-color:var(--color-button-background-primary-subtle-active);
+ border: 1px solid var(--color-button-border-primary-subtle-active);
+}
+
+.storybook-button--primary-subtle[disabled] {
+ background-color: transparent;
+ border: none;
+ color: var(--color-button-text-primary-subtle-disabled);
+}
+
+.storybook-button--primary-subtle:hover[disabled] {
+ box-shadow: none;
+}
+
+.storybook-button--primary-subtle:active[disabled] {
+ box-shadow: none;
+}
+
+
+/* DESTRUCTIVE CONTAINED */
+.storybook-button--destructive-contained {
+ background-color:var(--color-button-background-destructive-contained);
+ border: 1px solid var(--color-button-border-destructive-contained);
+ color: var(--color-button-text-destructive-contained);
+}
+
+.storybook-button--destructive-contained:hover {
+ background-color: var(--color-button-background-destructive-contained);
+ border-color: var(--color-button-shadow-destructive-contained);
+ box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-destructive-contained) r g b / 30%);
+}
+
+.storybook-button--destructive-contained:active {
+ box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-destructive-contained-active) r g b / 60%);
+}
+
+/* DESTRUCTIVE SUBTLE */
+
+.storybook-button--destructive-subtle {
+ color: var(--color-button-text-destructive-subtle);
background-color: transparent;
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+ border: none;
}
+
+.storybook-button--destructive-subtle:hover {
+ color: var(--color-button-text-destructive-subtle-hover);
+ background-color:var(--color-button-background-destructive-subtle-hover);
+ border: none;
+}
+
+.storybook-button--destructive-subtle:active {
+ color: var(--color-button-text-destructive-subtle-active);
+ background-color:var(--color-button-background-destructive-subtle-active);
+}
+
+.storybook-button--destructive-subtle[disabled] {
+ background-color: transparent;
+ border: none;
+ color: var(--color-button-text-destructive-subtle-disabled);
+}
+
+.storybook-button--destructive-subtle:hover[disabled] {
+ box-shadow: none;
+}
+
+.storybook-button--destructive-subtle:active[disabled] {
+ box-shadow: none;
+}
+
+/* BUTTON SIZES*/
+
.storybook-button--small {
font-size: 12px;
padding: 10px 16px;
@@ -28,3 +184,11 @@
font-size: 16px;
padding: 12px 24px;
}
+
+.storybook-button-icon--left{
+ flex-direction: row-reverse;
+}
+
+.storybook-button-icon--right{
+ flex-direction: row;
+}
diff --git a/src/tokens/colors.css b/src/tokens/colors.css
new file mode 100644
index 0000000..96ca65d
--- /dev/null
+++ b/src/tokens/colors.css
@@ -0,0 +1,113 @@
+
+: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;
+
+
+ /*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;
+
+ /* WHITE */
+ --color-white-050: #F5F5F5;
+ --color-white-100: #E2E4E7;
+ --color-white-200: #A7AFB8;
+ --color-white-300: #8995A1;
+ --color-white-500: #414952;
+ --color-white-900: #16181B;
+
+ /*TOKENS*/
+
+ --color-button-text-primary-contained: white;
+ --color-button-background-primary-contained: var(--color-navy-500);
+ --color-button-border-primary-contained: var(--color-navy-500);
+ --color-button-shadow-primary-contained: var(--color-blue-500);
+ --color-button-background-primary-contained-hover: var(--color-navy-700);
+ --color-button-border-primary-contained-hover:var(--color-navy-700);
+ --color-button-border-primary-contained-active: var(--color-navy-500);
+ --color-button-shadow-primary-contained-active: var(--color-navy-500);
+ --color-button-background-primary-contained-disabled: var(--color-white-100);
+ --color-button-border-primary-contained-disabled: var(--color-white-100);
+ --color-button-text-primary-contained-disabled: var(--color-white-300);
+
+ --color-button-text-primary-outlined:var(--color-navy-500);
+ --color-button-background-primary-outlined: var(--color-white-050);
+ --color-button-border-primary-outlined:var(--color-navy-500);
+ --color-button-shadow-primary-outlined: var(--color-blue-500);
+ --color-button-text-primary-outlined-hover:var(--color-navy-700);
+ --color-button-background-primary-outlined-hover: var(--color-white-050);
+ --color-button-border-primary-outlined-hover:var(--color-navy-700);
+ --color-button-background-primary-outlined-active: var(--color-white-050);
+ --color-button-border-primary-outlined-active:var(--color-navy-500);
+ --color-button-shadow-primary-outlined-active: var(--color-navy-500);
+ --color-button-background-primary-outlined-disabled: var(--color-white-050);
+ --color-button-border-primary-outlined-disabled: var(--color-white-200);
+ --color-button-text-primary-outlined-disabled: var(--color-white-300);
+
+ --color-button-text-primary-subtle:var(--color-navy-500);
+ --color-button-text-primary-subtle-hover:var(--color-navy-700);
+ --color-button-background-primary-subtle-hover:var(--color-navy-050);
+ --color-button-text-primary-subtle-active: white;
+ --color-button-background-primary-subtle-active:var(--color-navy-500);
+ --color-button-border-primary-subtle-active:var(--color-navy-500);
+ --color-button-text-primary-subtle-disabled: var(--color-white-300);
+
+ --color-button-text-destructive-contained: white;
+ --color-button-background-destructive-contained:var(--color-red-600);
+ --color-button-border-destructive-contained:var(--color-red-500);
+ --color-button-shadow-destructive-contained:var(--color-red-500);
+ --color-button-shadow-destructive-contained-active:var(--color-red-200);
+
+ --color-button-text-destructive-subtle:var(--color-white-500);
+ --color-button-text-destructive-subtle-hover:var(--color-blue-800);
+ --color-button-background-destructive-subtle-hover:var(--color-navy-050);
+ --color-button-text-destructive-subtle-active: white;
+ --color-button-background-destructive-subtle-active:var(--color-white-900);
+ --color-button-text-destructive-subtle-disabled: var(--color-white-300);
+
+}
+
+
+
+