@vc-shell/framework 1.1.0-alpha.3 → 1.1.0-alpha.4

package/tailwind.config.ts

@@ -1,126 +1,127 @@
-/** @type { import('tailwindcss').Config } */
-
-export const content = [
-  "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
-  "./ui/components/**/*.{vue,js,ts,jsx,tsx}",
-  "./shared/**/*.{vue,js,ts,jsx,tsx}",
-];
-
-export default {
-  prefix: "tw-",
-  theme: {
-    fontFamily: {
-      jakarta: ["Plus Jakarta Sans", "sans-serif"],
-    },
-    fontSize: {
-      xxs: [
-        "0.625rem", //10px
-        {
-          lineHeight: "0.75rem", //12px
-        },
-      ],
-      xs: [
-        "0.75rem", //12px
-        {
-          lineHeight: "0.875rem", //14px
-        },
-      ],
-      sm: [
-        "0.875rem", //14px
-        {
-          lineHeight: "1rem", //18px
-        },
-      ],
-      s: [
-        "0.875rem", //14px
-        {
-          lineHeight: "1rem", //18px
-        },
-      ],
-      base: [
-        "1rem", //16px
-        {
-          lineHeight: "1.25rem", //20px
-        },
-      ],
-      lg: [
-        "1.125rem", //18px
-        {
-          lineHeight: "1.375rem", //22px
-        },
-      ],
-      xl: [
-        "1.25rem", //20px
-        {
-          lineHeight: "1.75rem", //28px
-        },
-      ],
-      "2xl": [
-        "1.5rem", //24px
-        {
-          lineHeight: "2rem", //32px
-        },
-      ],
-      "3xl": [
-        "1.875rem", //30px
-        {
-          lineHeight: "2.25rem", //36px
-        },
-      ],
-      "4xl": [
-        "2.25rem", //36px
-        {
-          lineHeight: "2.5rem", //40px
-        },
-      ],
-      "5xl": [
-        "3rem", //48px
-        {
-          lineHeight: "3rem", //48px
-        },
-      ],
-      "6xl": [
-        "3.75rem", //60px
-        {
-          lineHeight: "3.75rem", //60px
-        },
-      ],
-      "7xl": [
-        "4.5rem", //72px
-        {
-          lineHeight: "4.5rem", //72px
-        },
-      ],
-      "8xl": [
-        "6rem", //96px
-        {
-          lineHeight: "6rem", //96px
-        },
-      ],
-    },
-    extend: {
-      keyframes: {
-        loadingMarker: {
-          "50%": { transform: "translateX(96px)" },
-        },
-        loadingMarkers: {
-          "50%": { transform: "translateX(-31px)" },
-        },
-        loadingProgress: {
-          from: {
-            "background-position": "0 0, left",
-          },
-          to: {
-            "background-position": "30px 0, left",
-          },
-        },
-      },
-      animation: {
-        loadingMarker: "loadingMarker 3s infinite",
-        loadingMarkers: "loadingMarkers 3s infinite",
-        loadingProgress: "loadingProgress 1s linear infinite",
-      },
-    },
-  },
-  content,
-};
+/** @type { import('tailwindcss').Config } */
+import type { Config } from "tailwindcss";
+
+export const content = [
+  "../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}",
+  "./ui/components/**/*.{vue,js,ts,jsx,tsx}",
+  "./shared/**/*.{vue,js,ts,jsx,tsx}",
+];
+
+export default {
+  prefix: "tw-",
+  theme: {
+    fontFamily: {
+      jakarta: ["Plus Jakarta Sans", "sans-serif"],
+    },
+    fontSize: {
+      xxs: [
+        "0.625rem", //10px
+        {
+          lineHeight: "0.75rem", //12px
+        },
+      ],
+      xs: [
+        "0.75rem", //12px
+        {
+          lineHeight: "0.875rem", //14px
+        },
+      ],
+      sm: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1.125rem", //18px
+        },
+      ],
+      s: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1.125rem", //18px
+        },
+      ],
+      base: [
+        "1rem", //16px
+        {
+          lineHeight: "1.25rem", //20px
+        },
+      ],
+      lg: [
+        "1.125rem", //18px
+        {
+          lineHeight: "1.375rem", //22px
+        },
+      ],
+      xl: [
+        "1.25rem", //20px
+        {
+          lineHeight: "1.75rem", //28px
+        },
+      ],
+      "2xl": [
+        "1.5rem", //24px
+        {
+          lineHeight: "2rem", //32px
+        },
+      ],
+      "3xl": [
+        "1.875rem", //30px
+        {
+          lineHeight: "2.25rem", //36px
+        },
+      ],
+      "4xl": [
+        "2.25rem", //36px
+        {
+          lineHeight: "2.5rem", //40px
+        },
+      ],
+      "5xl": [
+        "3rem", //48px
+        {
+          lineHeight: "3rem", //48px
+        },
+      ],
+      "6xl": [
+        "3.75rem", //60px
+        {
+          lineHeight: "3.75rem", //60px
+        },
+      ],
+      "7xl": [
+        "4.5rem", //72px
+        {
+          lineHeight: "4.5rem", //72px
+        },
+      ],
+      "8xl": [
+        "6rem", //96px
+        {
+          lineHeight: "6rem", //96px
+        },
+      ],
+    },
+    extend: {
+      keyframes: {
+        loadingMarker: {
+          "50%": { transform: "translateX(96px)" },
+        },
+        loadingMarkers: {
+          "50%": { transform: "translateX(-31px)" },
+        },
+        loadingProgress: {
+          from: {
+            "background-position": "0 0, left",
+          },
+          to: {
+            "background-position": "30px 0, left",
+          },
+        },
+      },
+      animation: {
+        loadingMarker: "loadingMarker 3s infinite",
+        loadingMarkers: "loadingMarkers 3s infinite",
+        loadingProgress: "loadingProgress 1s linear infinite",
+      },
+    },
+  },
+  content,
+} as Config;

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcButton } from "./";
 
-const COLORS = ["primary", "warning", "danger"];
+const COLORS = ["primary", "secondary"];
 
 const PROPERTY = ["disabled", "small", "outline", "selected", "text", "raised"];
 
@@ -61,21 +61,12 @@ export const Basic = Template.bind({});
 export const Disabled = Template.bind({});
 Disabled.args = { disabled: true };
 
-export const Small = Template.bind({});
-Small.args = { small: true };
-
-export const Outline = Template.bind({});
-Outline.args = { outline: true };
-
 export const Selected = Template.bind({});
 Selected.args = { selected: true };
 
 export const Text = Template.bind({});
 Text.args = { text: true };
 
-export const Raised = Template.bind({});
-Raised.args = { raised: true };
-
 export const Icon = Template.bind({});
 Icon.args = { icon: "fas fa-plus" };
 
@@ -85,12 +76,6 @@ IconClass.args = { icon: "fas fa-plus", iconClass: "tw-text-red" };
 export const IconSize = Template.bind({});
 IconSize.args = { icon: "fas fa-plus", iconSize: "l" };
 
-export const Warning = Template.bind({});
-Warning.args = { variant: "warning" };
-
-export const Danger = Template.bind({});
-Danger.args = { variant: "danger" };
-
 export const AllStates: StoryFn<typeof VcButton> = () => ({
   components: { VcButton },
   setup: () => ({ colors: COLORS, properties: PROPERTY }),

package/ui/components/atoms/vc-button/vc-button.vue

@@ -26,12 +26,25 @@ export interface Props {
   icon?: string | Component;
   iconClass?: string;
   iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
-  variant?: "primary" | "warning" | "danger";
+  variant?: "primary" | "secondary";
   disabled?: boolean;
+  size?: "xs" | "sm" | "base";
+  /**
+   * @deprecated Use `size` instead
+   * Whether the button is small
+   * */
   small?: boolean;
+  /**
+   * @deprecated Use `variant` instead
+   * Whether the button is outlined
+   * */
   outline?: boolean;
   selected?: boolean;
   text?: boolean;
+  /**
+   * @deprecated Use `variant` instead
+   * Whether the button is raised
+   * */
   raised?: boolean;
 }
 
@@ -45,6 +58,7 @@ export interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
   iconSize: "s",
+  size: "base",
 });
 
 const emit = defineEmits<Emits>();
@@ -58,11 +72,12 @@ const buttonClass = computed(() => {
     "vc-button",
     {
       [`vc-button-${props.variant}`]: props.variant,
+      [`vc-button_${props.size}`]: props.size,
       "vc-button_small": props.small,
-      "vc-button_outline": props.outline,
+      // "vc-button_outline": props.outline,
       "vc-button_selected": props.selected,
       "vc-button_text": props.text,
-      "vc-button_raised": props.raised,
+      // "vc-button_raised": props.raised,
     },
   ];
 });
@@ -80,38 +95,38 @@ function onClick(e: Event): void {
   --button-primary-background-color: var(--primary-500);
   --button-primary-background-color-hover: var(--primary-600);
   --button-primary-background-color-disabled: var(--primary-300);
-  --button-primary-text-color: var(--neutrals-50);
-  --button-primary-text-color-outlined: var(--button-primary-background-color);
-  --button-primary-text-color-hover: var(--button-primary-background-color-hover);
-
-  --button-warning-background-color: var(--warning-500);
-  --button-warning-background-color-hover: var(--warning-600);
-  --button-warning-background-color-disabled: var(--warning-300);
-  --button-warning-text-color: var(--neutrals-50);
-  --button-warning-text-color-outlined: var(--button-warning-background-color);
-  --button-warning-text-color-hover: var(--button-warning-background-color-hover);
-
-  --button-danger-background-color: var(--danger-500);
-  --button-danger-background-color-hover: var(--danger-600);
-  --button-danger-background-color-disabled: var(--danger-300);
-  --button-danger-text-color: var(--neutrals-50);
-  --button-danger-text-color-outlined: var(--button-danger-background-color);
-  --button-danger-text-color-hover: var(--button-danger-background-color-hover);
-
-  --button-border-radius: 3px;
+  --button-primary-text-color: var(--additional-50);
+  --button-primary-text-color-disabled: var(--additional-50);
+  --button-primary-border-color: var(--primary-500);
+  --button-primary-border-color-hover: var(--primary-600);
+  --button-primary-border-color-disabled: var(--primary-300);
+
+  --button-secondary-background-color: var(--additional-50);
+  --button-secondary-background-color-hover: var(--primary-100);
+  --button-secondary-background-color-disabled: var(--additional-50);
+  --button-secondary-text-color: var(--neutrals-700);
+  --button-secondary-text-color-disabled: var(--neutrals-400);
+  --button-secondary-border-color: var(--secondary-300);
+  --button-secondary-border-color-hover: var(--secondary-400);
+  --button-secondary-border-color-disabled: var(--secondary-300);
+
+  --button-border-radius: 4px;
+
   --button-padding-hor: 14px;
-  --button-padding-hor-small: 14px;
   --button-padding-vert: 10px;
-  --button-padding-vert-small: 7px;
+
+  --button-padding-hor-small: 12px;
+  --button-padding-vert-small: 8px;
+
+  --button-padding-vert-extra-small: 5px;
+  --button-padding-hor-extra-small: 12px;
 
   --button-height: 36px;
   --button-height-small: 28px;
-
-  --button-raised-shadow-color: var(--secondary-200);
-  --button-raised-shadow: 1px 4px 10px rgb(from var(--button-raised-shadow-color) r g b / 100%);
+  --button-height-extra-small: 22px;
 }
 
-$variants: primary, warning, danger;
+$variants: primary, secondary;
 
 .vc-button {
   &__icon + &__title {
@@ -120,34 +135,29 @@ $variants: primary, warning, danger;
 
   @each $variant in $variants {
     &.vc-button-#{$variant} {
-      @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition tw-duration-200
-      tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)]
+      @apply tw-inline-flex tw-items-center tw-font-semibold tw-cursor-pointer tw-box-border tw-transition tw-duration-200
+      tw-rounded-[var(--button-border-radius)]
       tw-min-h-[var(--button-height)]
       tw-bg-[color:var(--button-#{$variant}-background-color)]
+      tw-border tw-border-[color:var(--button-#{$variant}-border-color)] tw-border-solid
       tw-flex tw-justify-center
-      tw-text-[color:var(--button-#{$variant}-text-color)]
-      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      disabled:tw-cursor-not-allowed
-      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)];
+      tw-text-[color:var(--button-#{$variant}-text-color)];
 
-      &.vc-button_small {
-        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-font-normal tw-text-xs;
+      &:hover {
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
+      }
 
-        .vc-button__icon + .vc-button__title {
-          @apply tw-ml-2;
-        }
+      &:focus {
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-border-[color:var(--button-#{$variant}-border-color-hover)];
+      }
+
+      &:disabled {
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-disabled)] tw-border-[color:var(--button-#{$variant}-border-color-disabled)] tw-cursor-not-allowed;
       }
 
-      &.vc-button_outline {
-        @apply tw-bg-transparent tw-border tw-border-[color:var(--button-#{$variant}-background-color)]
-        tw-text-[color:var(--button-#{$variant}-text-color-outlined)]
-        hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
-        hover:tw-bg-transparent
-        hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
-        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-text-color-hover)_r_g_b/50%)]
-        disabled:tw-border-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)]
-        disabled:tw-bg-transparent;
+      // TODO: remove this after the migration
+      &.vc-button_small {
+        @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs;
       }
 
       &.vc-button_text {
@@ -158,27 +168,28 @@ $variants: primary, warning, danger;
         disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
       }
 
-      &.vc-button_raised {
-        @apply [box-shadow:var(--button-raised-shadow)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
-
-        &.vc-button_text:not(:disabled) {
-          &:hover,
-          &:focus {
-            @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)];
-          }
-        }
-      }
-
       &.vc-button_selected {
         @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
           @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
         }
+      }
 
-        &.vc-button_outline {
-          @apply tw-border-[color:var(--button-#{$variant}-background-color-hover)]  tw-bg-transparent  #{!important};
-        }
+      &.vc-button_xs {
+        @apply tw-py-[var(--button-padding-vert-extra-small)] tw-min-h-[var(--button-height-extra-small)] tw-px-[var(--button-padding-hor-extra-small)] tw-text-xxs;
+      }
+
+      &.vc-button_sm {
+        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-text-xs;
+      }
+
+      &.vc-button_base {
+        @apply tw-py-[var(--button-padding-vert)] tw-min-h-[var(--button-height)] tw-px-[var(--button-padding-hor)] tw-text-sm tw-leading-4;
+      }
+
+      .vc-button__icon + .vc-button__title {
+        @apply tw-ml-2;
       }
     }
   }