Add style for subtle & add disabled support

octo-technology · Sep 24, 2024 · b3153d6 · b3153d6
1 parent 1562af4
commit b3153d6
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 9 deletions.
diff --git a/src/stories/Button.vue b/src/stories/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" :class="classes" @click="onClick" >{{ label }} </button>
+  <button type="button" :class="classes" @click="onClick" :disabled="disabled">{{ label }} </button>
 </template>
 
 <script lang="ts" setup>
@@ -8,7 +8,6 @@ import { computed } from 'vue';
 import "@/tokens/colors.css";
 import "@/stories/button.css"
 
-
 type ButtonProps = {
   /**
    * The label of the button
@@ -29,6 +28,10 @@ type ButtonProps = {
    */
   size?: 'small' | 'medium' | 'large',
 
+  /**
+   * Button disabled state
+   */
+  disabled?: boolean
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -45,6 +48,7 @@ const classes = computed(() => ({
   'storybook-button': true,
   [`storybook-button--${props.type || 'primary'}-${props.variant || 'contained'}`]: true,
   [`storybook-button--${props.size || 'medium'}`]: true,
+
 }));
 
 const onClick = () => {

diff --git a/src/stories/button.css b/src/stories/button.css
@@ -11,7 +11,9 @@ button {
 
 /*BUTTON TYPES*/
 
-/*PRIMARY*/
+/*PRIMARY CONTAINED*/
+
+
 .storybook-button--primary-contained{
   background-color:var(--color-button-background-primary-contained);
   border: 1px solid var(--color-button-border-primary-contained);
@@ -29,24 +31,91 @@ button {
   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: transparent;
+  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-subtle:hover {
+  color: var(--color-button-text-primary-subtle-hover);
+  background-color:var(--color-button-background-primary-subtle-hover);
+  border: none;
+}
+
+.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*/
 .storybook-button--destructive-contained {

diff --git a/src/tokens/colors.css b/src/tokens/colors.css
@@ -49,24 +49,47 @@
     --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;
     /*TOKENS*/
 
     --color-button-text-primary-contained: white;
     --color-button-background-primary-contained: var(--color-navy-500);
-    --color-button-background-primary-contained-hover: var(--color-navy-700);
     --color-button-border-primary-contained: var(--color-navy-500);
-    --color-button-border-primary-contained-active: var(--color-navy-500);
-    --color-button-border-primary-contained-hover:var(--color-navy-700);
     --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-text-primary-outlined-hover:var(--color-navy-700);
+    --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: var(--color-blue-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: white;