@vc-shell/framework 1.0.290 → 1.0.291

package/tailwind.config.ts

@@ -1,26 +1,292 @@
 /** @type { import('tailwindcss').Config } */
+
+const primaryColors = {
+  DEFAULT: "rgb(from var(--primary-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--primary-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--primary-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--primary-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--primary-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--primary-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--primary-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--primary-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--primary-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--primary-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--primary-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--primary-950) r g b / <alpha-value>)",
+};
+
+const secondaryColors = {
+  DEFAULT: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--secondary-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--secondary-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--secondary-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--secondary-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--secondary-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--secondary-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--secondary-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--secondary-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--secondary-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--secondary-950) r g b / <alpha-value>)",
+};
+
+const infoColors = {
+  DEFAULT: "rgb(from var(--info-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--info-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--info-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--info-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--info-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--info-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--info-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--info-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--info-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--info-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--info-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--info-950) r g b / <alpha-value>)",
+};
+
+const successColors = {
+  DEFAULT: "rgb(from var(--success-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--success-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--success-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--success-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--success-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--success-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--success-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--success-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--success-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--success-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--success-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--success-950) r g b / <alpha-value>)",
+};
+
+const warningColors = {
+  DEFAULT: "rgb(from var(--warning-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--warning-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--warning-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--warning-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--warning-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--warning-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--warning-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--warning-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--warning-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--warning-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--warning-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--warning-950) r g b / <alpha-value>)",
+};
+
+const dangerColors = {
+  DEFAULT: "rgb(from var(--danger-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--danger-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--danger-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--danger-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--danger-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--danger-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--danger-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--danger-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--danger-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--danger-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--danger-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--danger-950) r g b / <alpha-value>)",
+};
+
+const neutralColors = {
+  DEFAULT: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--neutral-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--neutral-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--neutral-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--neutral-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--neutral-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--neutral-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--neutral-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--neutral-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--neutral-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--neutral-950) r g b / <alpha-value>)",
+};
+
+const accentColors = {
+  DEFAULT: "rgb(from var(--accent-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--accent-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--accent-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--accent-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--accent-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--accent-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--accent-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--accent-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--accent-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--accent-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--accent-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--accent-950) r g b / <alpha-value>)",
+};
+
+const additionalColors = {
+  50: "rgb(from var(--additional-50) r g b / <alpha-value>)",
+  950: "rgb(from var(--additional-950) r g b / <alpha-value>)",
+};
+
+const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+  inherit: "inherit",
+
+  primary: primaryColors,
+  secondary: secondaryColors,
+  info: infoColors,
+  success: successColors,
+  warning: warningColors,
+  danger: dangerColors,
+  neutral: neutralColors,
+  accent: accentColors,
+  additional: additionalColors,
+};
+
 export default {
   prefix: "tw-",
   theme: {
     fontFamily: {
       roboto: ["Roboto", "sans-serif"],
     },
+    // fontSize: {
+    //   xs: ["11px", "14px"],
+    //   sm: ["12px", "16px"],
+    //   base: ["13px", "18px"],
+    //   lg: ["14px", "19px"],
+    //   xl: ["16px", "22px"],
+    //   "2xl": ["23px", "28px"],
+    // },
+    // lineHeight: {
+    //   xs: "14px",
+    //   sm: "16px",
+    //   base: "18px",
+    //   lg: "19px",
+    //   xl: "22px",
+    //   "2xl": "28px",
+    //   header: "28px",
+    // },
+    // colors,
+
+    // backgroundColor: {
+    //   ...colors,
+    // },
+
+    // textColor: {
+    //   ...colors,
+    // },
+
+    // textDecorationColor: {
+    //   ...colors,
+    // },
+
+    // borderColor: {
+    //   ...colors,
+    //   DEFAULT: neutralColors[200],
+    // },
+
+    // divideColor: {
+    //   ...colors,
+    //   DEFAULT: neutralColors[200],
+    // },
+
+    // outlineColor: {
+    //   ...colors,
+    //   DEFAULT: primaryColors[100],
+    // },
+
+    // ringColor: {
+    //   ...colors,
+    //   DEFAULT: primaryColors[100],
+    // },
+
+    // boxShadowColor: {
+    //   ...colors,
+    // },
+
     fontSize: {
-      xs: ["11px", "14px"],
-      sm: ["12px", "16px"],
-      base: ["13px", "18px"],
-      lg: ["14px", "19px"],
-      xl: ["16px", "22px"],
-      "2xl": ["23px", "28px"],
-    },
-    lineHeight: {
-      xs: "14px",
-      sm: "16px",
-      base: "18px",
-      lg: "19px",
-      xl: "22px",
-      "2xl": "28px",
-      header: "28px",
+      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: {

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

@@ -7,19 +7,16 @@
       'vc-badge--medium': size === 'm',
     }"
   >
-    <div class="tw-flex tw-relative">
+    <div class="vc-badge__content">
       <slot name="default"></slot>
       <div
         v-if="typeof content !== 'undefined'"
         ref="badge"
-        class="vc-badge__badge tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-[var(--badge-border-radius)] tw-text-[13px] tw-leading-[13px] tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+        class="vc-badge__badge"
         :class="{
-          'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
-            active,
-          'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
-            clickable,
-          'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
-            disabled,
+          'vc-badge__badge--active': active,
+          'vc-badge__badge--clickable': clickable,
+          'vc-badge__badge--disabled': disabled,
         }"
         @click="onClick"
       >
@@ -64,25 +61,24 @@ function onClick(): void {
 
 <style lang="scss">
 :root {
-  --badge-background-color: #ffffff;
-  --badge-background-color-hover: #fafafa;
-  --badge-background-color-active: #fafafa;
-  --badge-background-color-disabled: #f2f2f2;
+  --badge-background-color: var(--additional-50);
+  --badge-background-color-hover: var(--neutrals-200);
+  --badge-background-color-active: var(--neutrals-200);
+  --badge-background-color-disabled: var(--neutrals-300);
 
-  --badge-text-color: #455668;
-  --badge-text-color-hover: #3b4959;
-  --badge-text-color-active: #3b4959;
-  --badge-text-color-disabled: #8296ab;
+  --badge-text-color: var(--neutrals-700);
+  --badge-text-color-hover: var(--neutrals-800);
+  --badge-text-color-active: var(--neutrals-800);
+  --badge-text-color-disabled: var(--neutrals-500);
 
   --badge-border-radius: 9999px;
 
-  --badge-border-color: #a1bfd4;
-  --badge-border-color-hover: #8fb3cc;
-  --badge-border-color-active: #8fb3cc;
-  --badge-border-color-disabled: #b2cbdc;
+  --badge-border-color: var(--primary-400);
+  --badge-border-color-hover: var(--primary-300);
+  --badge-border-color-active: var(--primary-300);
+  --badge-border-color-disabled: var(--primary-200);
 
   --badge-width-small: 18px;
-
   --badge-width-medium: 18px;
 
   --badge-padding-small: 0px 4px;
@@ -105,10 +101,29 @@ $sizes: small, medium;
         padding: var(--badge-padding-#{$size});
         top: var(--badge-distance-top-#{$size});
         right: var(--badge-distance-right-#{$size});
-        font-size: 0.75rem;
-        line-height: 1.35;
+        @apply tw-text-xs tw-leading-snug;
       }
     }
   }
 }
+
+.vc-badge__content {
+  @apply tw-flex tw-relative;
+}
+
+.vc-badge__badge {
+  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+}
+
+.vc-badge__badge--active {
+  @apply tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)];
+}
+
+.vc-badge__badge--clickable {
+  @apply tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-hover)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)];
+}
+
+.vc-badge__badge--disabled {
+  @apply tw-cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
+}
 </style>

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

@@ -10,12 +10,12 @@
       :icon="icon"
       :size="small ? 'xs' : iconSize"
     ></VcIcon>
-    <span
+    <p
       v-if="$slots['default']"
       class="vc-button__title"
     >
       <slot></slot>
-    </span>
+    </p>
   </button>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
@@ -77,24 +77,24 @@ function onClick(e: Event): void {
 
 <style lang="scss">
 :root {
-  --button-primary-background-color: 65, 175, 230;
-  --button-primary-background-color-hover: 49, 158, 212;
-  --button-primary-background-color-disabled: 169, 221, 246;
-  --button-primary-text-color: 255, 255, 255;
+  --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: 248, 148, 6;
-  --button-warning-background-color-hover: 235, 139, 3;
-  --button-warning-background-color-disabled: 254, 212, 152;
-  --button-warning-text-color: 255, 255, 255;
+  --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: 255, 74, 74;
-  --button-danger-background-color-hover: 215, 58, 58;
-  --button-danger-background-color-disabled: 255, 94, 94;
-  --button-danger-text-color: 255, 255, 255;
+  --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);
 
@@ -106,6 +106,9 @@ function onClick(e: Event): void {
 
   --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%);
 }
 
 $variants: primary, warning, danger;
@@ -120,13 +123,13 @@ $variants: primary, warning, danger;
       @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)]
       tw-min-h-[var(--button-height)]
-      tw-bg-[color:rgb(var(--button-#{$variant}-background-color))]
+      tw-bg-[color:var(--button-#{$variant}-background-color)]
       tw-flex tw-justify-center
-      tw-text-[color:rgb(var(--button-#{$variant}-text-color))]
-      hover:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-      focus:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+      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:rgb(var(--button-#{$variant}-background-color-disabled))];
+      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)];
 
       &.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;
@@ -137,44 +140,44 @@ $variants: primary, warning, danger;
       }
 
       &.vc-button_outline {
-        @apply tw-bg-transparent tw-border tw-border-[color:rgb(var(--button-#{$variant}-background-color))]
-        tw-text-[color:rgb(var(--button-#{$variant}-text-color-outlined))]
-        hover:tw-text-[color:rgb(var(--button-#{$variant}-text-color-hover))]
+        @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:rgb(var(--button-#{$variant}-background-color-hover))]
-        disabled:tw-text-[color:rgba(var(--button-#{$variant}-text-color-hover),0.5)]
-        disabled:tw-border-[color:rgba(var(--button-#{$variant}-background-color),0.5)]
+        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;
       }
 
       &.vc-button_text {
         @apply tw-border-none tw-bg-transparent tw-p-0 tw-min-h-0
-        tw-text-[color:rgb(var(--button-#{$variant}-background-color))]
-        hover:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-        focus:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-        disabled:tw-text-[color:rgba(var(--button-#{$variant}-background-color),0.5)];
+        tw-text-[color:var(--button-#{$variant}-background-color)]
+        hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+        focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
       }
 
       &.vc-button_raised {
-        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,1)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
+        @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:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+            @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)];
           }
         }
       }
 
       &.vc-button_selected {
-        @apply tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))];
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
-          @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)] tw-p-1;
+          @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:rgb(var(--button-#{$variant}-background-color-hover))]  tw-bg-transparent  #{!important};
+          @apply tw-border-[color:var(--button-#{$variant}-background-color-hover)]  tw-bg-transparent  #{!important};
         }
       }
     }

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

@@ -94,30 +94,36 @@ watch(
 
 <style lang="scss">
 :root {
-  --card-background: #ffffff;
+  --card-background: var(--additional-50);
   --card-border-radius: 6px;
-  --card-box-shadow: 1px 1px 7px rgba(126, 142, 157, 0.15);
-  --card-header-background: #f4f8fb;
-  --card-header-color: #83a3be;
+  --card-box-shadow-color: var(--secondary-600);
+  --card-box-shadow: 1px 1px 7px rgb(from var(--card-box-shadow-color) r g b / 15%);
+  --card-header-background: var(--secondary-50);
+  --card-header-color: var(--secondary-600);
 
-  --card-header-background-success: #e9f7df;
-  --card-header-background-danger: #ffe6e6;
+  --card-header-background-success: var(--success-100);
+  --card-header-background-danger: var(--danger-100);
 
-  --card-header-color-success: #99c17a;
-  --card-header-color-danger: #f34747;
+  --card-header-color-success: var(--success-600);
+  --card-header-color-danger: var(--danger-600);
+
+  --card-header-padding-hor: 16px;
+  --card-header-padding-vert: 12px;
+
+  --card-border-color: var(--base-border-color, var(--neutrals-200));
 }
 
 $variants: success, danger;
 
 .vc-card {
   @apply tw-bg-[color:var(--card-background)] tw-border
-  tw-border-[color:#eef0f2] tw-border-solid tw-box-border
+  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
   tw-shadow-[var(--card-box-shadow)]
   tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
   tw-flex-grow tw-flex tw-flex-col;
 
   &__header {
-    @apply tw-bg-[color:var(--card-header-background)] tw-px-4 tw-py-3 tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
   }
 
   &_collapsable &__header {
@@ -127,7 +133,7 @@ $variants: success, danger;
   &__title {
     @apply tw-uppercase tw-flex-grow
    tw-text-[color:var(--card-header-color)]
-   tw-text-base tw-font-bold;
+   tw-text-sm tw-font-bold;
   }
 
   &__icon {

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-col tw-flex tw-flex-col tw-min-w-0 tw-basis-0"
+    class="vc-col"
     :style="{ flexGrow: size }"
   >
     <slot></slot>
@@ -23,9 +23,7 @@ defineSlots<{
 </script>
 
 <style lang="scss">
-// .vc-col {
-//   .vc-app_mobile & {
-//     @apply tw-grow #{!important};
-//   }
-// }
+.vc-col {
+  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
+}
 </style>