@rovula/ui 0.0.19 → 0.0.21

package/src/theme/main-preset.js

@@ -1,6 +1,5 @@
 const { fontFamily } = require("tailwindcss/defaultTheme");
 
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
   theme: {
@@ -14,157 +13,222 @@ module.exports = {
     extend: {
       fontSize: {
         h1: [
-          "64px",
+          "var(--h1-size, 64px)",
           {
-            lineHeight: "80px",
-            fontWeight: "700",
+            lineHeight: "var(--h1-line-height, 80px)",
+            fontWeight: "var(--h1-weight, 700)",
+            fontFamily: "var(--h1-family, 'Poppins')",
           },
         ],
         h2: [
-          "48px",
+          "var(--h2-size, 48px)",
           {
-            lineHeight: "60px",
-            fontWeight: "700",
+            lineHeight: "var(--h2-line-height, 60px)",
+            fontWeight: "var(--h2-weight, 700)",
+            fontFamily: "var(--h2-family, 'Poppins')",
           },
         ],
         h3: [
-          "32px",
+          "var(--h3-size, 32px)",
           {
-            lineHeight: "48px",
-            fontWeight: "700",
+            lineHeight: "var(--h3-line-height, 48px)",
+            fontWeight: "var(--h3-weight, 700)",
+            fontFamily: "var(--h3-family, 'Poppins')",
           },
         ],
         h4: [
-          "24px",
+          "var(--h4-size, 24px)",
           {
-            lineHeight: "32px",
-            fontWeight: "700",
+            lineHeight: "var(--h4-line-height, 32px)",
+            fontWeight: "var(--h4-weight, 700)",
+            fontFamily: "var(--h4-family, 'Poppins')",
           },
         ],
         h5: [
-          "20px",
+          "var(--h5-size, 20px)",
           {
-            lineHeight: "28px",
-            fontWeight: "700",
+            lineHeight: "var(--h5-line-height, 28px)",
+            fontWeight: "var(--h5-weight, 700)",
+            fontFamily: "var(--h5-family, 'Poppins')",
           },
         ],
         h6: [
-          "18px",
+          "var(--h6-size, 18px)",
           {
-            lineHeight: "24px",
-            fontWeight: "700",
+            lineHeight: "var(--h6-line-height, 24px)",
+            fontWeight: "var(--h6-weight, 700)",
+            fontFamily: "var(--h6-family, 'Poppins')",
           },
         ],
         subtitile1: [
-          "16px",
+          "var(--subtitle1-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "400",
+            lineHeight: "var(--subtitle1-line-height, 24px)",
+            fontWeight: "var(--subtitle1-weight, 400)",
+            fontFamily: "var(--subtitle1-family, 'Poppins')",
           },
         ],
         subtitile2: [
-          "16px",
+          "var(--subtitle2-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "500",
+            lineHeight: "var(--subtitle2-line-height, 24px)",
+            fontWeight: "var(--subtitle2-weight, 500)",
+            fontFamily: "var(--subtitle2-family, 'Poppins')",
           },
         ],
         subtitile3: [
-          "16px",
+          "var(--subtitle3-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "600",
+            lineHeight: "var(--subtitle3-line-height, 24px)",
+            fontWeight: "var(--subtitle3-weight, 600)",
+            fontFamily: "var(--subtitle3-family, 'Poppins')",
           },
         ],
         subtitile4: [
-          "14px",
+          "var(--subtitle4-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "400",
+            lineHeight: "var(--subtitle4-line-height, 22px)",
+            fontWeight: "var(--subtitle4-weight, 400)",
+            fontFamily: "var(--subtitle4-family, 'Poppins')",
           },
         ],
         subtitile5: [
-          "14px",
+          "var(--subtitle5-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "500",
+            lineHeight: "var(--subtitle5-line-height, 22px)",
+            fontWeight: "var(--subtitle5-weight, 500)",
+            fontFamily: "var(--subtitle5-family, 'Poppins')",
           },
         ],
         subtitile6: [
-          "14px",
+          "var(--subtitle6-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "600",
+            lineHeight: "var(--subtitle6-line-height, 22px)",
+            fontWeight: "var(--subtitle6-weight, 600)",
+            fontFamily: "var(--subtitle6-family, 'Poppins')",
           },
         ],
         body1: [
-          "16px",
+          "var(--body1-size, 16px)",
           {
-            lineHeight: "20px",
-            fontWeight: "400",
+            lineHeight: "var(--body1-line-height, 20px)",
+            fontWeight: "var(--body1-weight, 400)",
+            fontFamily: "var(--body1-family, 'Poppins')",
           },
         ],
         body2: [
-          "16px",
+          "var(--body2-size, 16px)",
           {
-            lineHeight: "20px",
-            fontWeight: "500",
+            lineHeight: "var(--body2-line-height, 20px)",
+            fontWeight: "var(--body2-weight, 500)",
+            fontFamily: "var(--body2-family, 'Poppins')",
           },
         ],
         body3: [
-          "14px",
+          "var(--body3-size, 14px)",
           {
-            lineHeight: "18px",
-            fontWeight: "400",
+            lineHeight: "var(--body3-line-height, 18px)",
+            fontWeight: "var(--body3-weight, 400)",
+            fontFamily: "var(--body3-family, 'Poppins')",
           },
         ],
         body4: [
-          "14px",
+          "var(--body4-size, 14px)",
           {
-            lineHeight: "18px",
-            fontWeight: "500",
+            lineHeight: "var(--body4-line-height, 18px)",
+            fontWeight: "var(--body4-weight, 500)",
+            fontFamily: "var(--body4-family, 'Poppins')",
           },
         ],
         small1: [
-          "12px",
+          "var(--small1-size, 12px)",
           {
-            lineHeight: "14px",
-            fontWeight: "400",
+            lineHeight: "var(--small1-line-height, 14px)",
+            fontWeight: "var(--small1-weight, 400)",
+            fontFamily: "var(--small1-family, 'Poppins')",
           },
         ],
         small2: [
-          "12px",
+          "var(--small2-size, 12px)",
           {
-            lineHeight: "14px",
-            fontWeight: "500",
+            lineHeight: "var(--small2-line-height, 14px)",
+            fontWeight: "var(--small2-weight, 500)",
+            fontFamily: "var(--small2-family, 'Poppins')",
           },
         ],
         small3: [
-          "10px",
+          "var(--small3-size, 12px)",
           {
-            lineHeight: "12px",
-            fontWeight: "400",
+            lineHeight: "var(--small3-line-height, 14px)",
+            fontWeight: "var(--small3-weight, 600)",
+            fontFamily: "var(--small3-family, 'Poppins')",
+          },
+        ],
+        small4: [
+          "var(--small4-size, 10px)",
+          {
+            lineHeight: "var(--small4-line-height, 12px)",
+            fontWeight: "var(--small4-weight, 400)",
+            fontFamily: "var(--small4-family, 'Poppins')",
+          },
+        ],
+        small5: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small5-line-height, 12px)",
+            fontWeight: "var(--small5-weight, 500)",
+            fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
         label1: [
-          "12px",
+          "var(--label-label1-size, 12px)",
           {
-            lineHeight: "12px",
-            fontWeight: "400",
+            lineHeight: "var(--label-label1-line-height, 12px)",
+            fontWeight: "var(--label-label1-weight, 400)",
+            fontFamily: "var(--label-label1-family, 'Poppins')",
           },
         ],
         label2: [
-          "10px",
+          "var(--label-label2-size, 10px)",
           {
-            lineHeight: "10px",
-            fontWeight: "400",
+            lineHeight: "var(--label-label2-line-height, 10px)",
+            fontWeight: "var(--label-label2-weight, 400)",
+            fontFamily: "var(--label-label2-family, 'Poppins')",
+          },
+        ],
+        buttonL: [
+          "var(--button-button-l-size, 16px)",
+          {
+            lineHeight: "var(--button-button-l-line-height, 24px)",
+            fontWeight: "var(--button-button-l-weight, 700)",
+            fontFamily: "var(--button-button-l-family, 'Poppins')",
+          },
+        ],
+        buttonMS: [
+          "var(--button-button-ms-size, 14px)",
+          {
+            lineHeight: "var(--button-button-ms-line-height, 22px)",
+            fontWeight: "var(--button-button-ms-weight, 700)",
+            fontFamily: "var(--button-button-ms-family, 'Poppins')",
           },
         ],
       },
       borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
+        xl: "var(--radius-radius-xl)",
+        lg: "var(--radius-radius-l)",
+        md: "var(--radius-radius-m)",
+        sm: "var(--radius-radius-s)",
+        xs: "var(--radius-radius-xs)",
+      },
+      spacing: {
+        xxs: "var(--spacing-spacing-xxs)",
+        xs: "var(--spacing-spacing-xs)",
+        sm: "var(--spacing-spacing-s)",
+        md: "var(--spacing-spacing-m)",
+        lg: "var(--spacing-spacing-l)",
+        xl: "var(--spacing-spacing-xl)",
+        xxl: "var(--spacing-spacing-xxl)",
+        xxxl: "var(--spacing-spacing-xxxl)",
       },
       keyframes: {
         "accordion-down": {

package/src/theme/plugins/utilities/typography.js

@@ -59,11 +59,23 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small3": {
       "@apply text-small3": {},
     },
+    ".typography-small4": {
+      "@apply text-small4": {},
+    },
+    ".typography-small5": {
+      "@apply text-small5": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },
     ".typography-label2": {
       "@apply text-label2": {},
     },
+    ".typography-buttonL": {
+      "@apply text-buttonL": {},
+    },
+    ".typography-buttonMS": {
+      "@apply text-buttonMS": {},
+    },
   });
 });

package/src/theme/presets/colors.js

@@ -1,228 +1,109 @@
-const { DEFAULTS } = require("@rollup/plugin-node-resolve");
-
 /** @type {import('tailwindcss').Config} */
+import {
+  generateColorConfig,
+  generateTransparentColorConfig,
+  withColorMixin,
+  generateButtonStyles,
+  generateActionButtonStyles,
+} from "../utils";
+
+const secondaryRange = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+];
+
 module.exports = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        ring: "hsl(var(--ring))",
-        background: "rgb(var(--background) / <alpha-value>)",
-        foreground: "rgb(var(--foreground) / <alpha-value>)",
-        // Palette colors
-        themes: {
-          50: "rgb(var(--themes-50) / <alpha-value>)",
-          100: "rgb(var(--themes-100) / <alpha-value>)",
-          200: "rgb(var(--themes-200) / <alpha-value>)",
-          300: "rgb(var(--themes-300) / <alpha-value>)",
-          400: "rgb(var(--themes-400) / <alpha-value>)",
-          500: "rgb(var(--themes-500) / <alpha-value>)",
-          600: "rgb(var(--themes-600) / <alpha-value>)",
-          700: "rgb(var(--themes-700) / <alpha-value>)",
-          800: "rgb(var(--themes-800) / <alpha-value>)",
-          900: "rgb(var(--themes-900) / <alpha-value>)",
-          DEFAULT: "rgb(var(--themes-default) / <alpha-value>)",
-          foreground: "rgb(var(--themes-foreground) / <alpha-value>)",
-        },
-        primary: {
-          5: "rgb(var(--primary-5) / <alpha-value>)",
-          10: "rgb(var(--primary-10) / <alpha-value>)",
-          20: "rgb(var(--primary-20) / <alpha-value>)",
-          30: "rgb(var(--primary-30) / <alpha-value>)",
-          40: "rgb(var(--primary-40) / <alpha-value>)",
-          50: "rgb(var(--primary-50) / <alpha-value>)",
-          60: "rgb(var(--primary-60) / <alpha-value>)",
-          70: "rgb(var(--primary-70) / <alpha-value>)",
-          80: "rgb(var(--primary-80) / <alpha-value>)",
-          90: "rgb(var(--primary-90) / <alpha-value>)",
-          100: "rgb(var(--primary-100) / <alpha-value>)",
-          110: "rgb(var(--primary-110) / <alpha-value>)",
-          120: "rgb(var(--primary-120) / <alpha-value>)",
-          130: "rgb(var(--primary-130) / <alpha-value>)",
-          140: "rgb(var(--primary-140) / <alpha-value>)",
-          150: "rgb(var(--primary-150) / <alpha-value>)",
-          DEFAULT: "rgb(var(--primary-default) / <alpha-value>)",
-          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
-        },
-        secondary: {
-          5: "rgb(var(--secondary-5) / <alpha-value>)",
-          10: "rgb(var(--secondary-10) / <alpha-value>)",
-          20: "rgb(var(--secondary-20) / <alpha-value>)",
-          30: "rgb(var(--secondary-30) / <alpha-value>)",
-          40: "rgb(var(--secondary-40) / <alpha-value>)",
-          50: "rgb(var(--secondary-50) / <alpha-value>)",
-          60: "rgb(var(--secondary-60) / <alpha-value>)",
-          70: "rgb(var(--secondary-70) / <alpha-value>)",
-          80: "rgb(var(--secondary-80) / <alpha-value>)",
-          90: "rgb(var(--secondary-90) / <alpha-value>)",
-          100: "rgb(var(--secondary-100) / <alpha-value>)",
-          110: "rgb(var(--secondary-110) / <alpha-value>)",
-          120: "rgb(var(--secondary-120) / <alpha-value>)",
-          130: "rgb(var(--secondary-130) / <alpha-value>)",
-          140: "rgb(var(--secondary-140) / <alpha-value>)",
-          150: "rgb(var(--secondary-150) / <alpha-value>)",
-          DEFAULT: "rgb(var(--secondary-default) / <alpha-value>)",
-          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
-        },
-        tertiary: {
-          5: "rgb(var(--tertiary-5) / <alpha-value>)",
-          10: "rgb(var(--tertiary-10) / <alpha-value>)",
-          20: "rgb(var(--tertiary-20) / <alpha-value>)",
-          30: "rgb(var(--tertiary-30) / <alpha-value>)",
-          40: "rgb(var(--tertiary-40) / <alpha-value>)",
-          50: "rgb(var(--tertiary-50) / <alpha-value>)",
-          60: "rgb(var(--tertiary-60) / <alpha-value>)",
-          70: "rgb(var(--tertiary-70) / <alpha-value>)",
-          80: "rgb(var(--tertiary-80) / <alpha-value>)",
-          90: "rgb(var(--tertiary-90) / <alpha-value>)",
-          100: "rgb(var(--tertiary-100) / <alpha-value>)",
-          110: "rgb(var(--tertiary-110) / <alpha-value>)",
-          120: "rgb(var(--tertiary-120) / <alpha-value>)",
-          130: "rgb(var(--tertiary-130) / <alpha-value>)",
-          140: "rgb(var(--tertiary-140) / <alpha-value>)",
-          150: "rgb(var(--tertiary-150) / <alpha-value>)",
-          DEFAULT: "rgb(var(--tertiary-default) / <alpha-value>)",
-          foreground: "rgb(var(--tertiary-foreground) / <alpha-value>)",
-        },
-        grey: {
-          5: "rgb(var(--grey-5) / <alpha-value>)",
-          10: "rgb(var(--grey-10) / <alpha-value>)",
-          20: "rgb(var(--grey-20) / <alpha-value>)",
-          30: "rgb(var(--grey-30) / <alpha-value>)",
-          40: "rgb(var(--grey-40) / <alpha-value>)",
-          50: "rgb(var(--grey-50) / <alpha-value>)",
-          60: "rgb(var(--grey-60) / <alpha-value>)",
-          70: "rgb(var(--grey-70) / <alpha-value>)",
-          80: "rgb(var(--grey-80) / <alpha-value>)",
-          90: "rgb(var(--grey-90) / <alpha-value>)",
-          100: "rgb(var(--grey-100) / <alpha-value>)",
-          110: "rgb(var(--grey-110) / <alpha-value>)",
-          120: "rgb(var(--grey-120) / <alpha-value>)",
-          130: "rgb(var(--grey-130) / <alpha-value>)",
-          140: "rgb(var(--grey-140) / <alpha-value>)",
-          150: "rgb(var(--grey-150) / <alpha-value>)",
-          DEFAULT: "rgb(var(--grey-default) / <alpha-value>)",
-          foreground: "rgb(var(--grey-foreground) / <alpha-value>)",
-        },
-        grey2: {
-          100: "rgb(var(--grey2-100) / <alpha-value>)",
-          200: "rgb(var(--grey2-200) / <alpha-value>)",
-          300: "rgb(var(--grey2-300) / <alpha-value>)",
-          400: "rgb(var(--grey2-400) / <alpha-value>)",
-          500: "rgb(var(--grey2-500) / <alpha-value>)",
-          600: "rgb(var(--grey2-600) / <alpha-value>)",
-          700: "rgb(var(--grey2-700) / <alpha-value>)",
-          800: "rgb(var(--grey2-800) / <alpha-value>)",
-          900: "rgb(var(--grey2-900) / <alpha-value>)",
-          DEFAULT: "rgb(var(--grey2-default) / <alpha-value>)",
-          foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
-        },
-        info: {
-          lighter: "rgb(var(--info-lighter)) / <alpha-value>)",
-          light: "rgb(var(--info-light)) / <alpha-value>)",
-          100: "rgb(var(--info-100)) / <alpha-value>)",
-          120: "rgb(var(--info-120)) / <alpha-value>)",
-          dark: "rgb(var(--info-dark)) / <alpha-value>)",
-          darker: "rgb(var(--info-darker)) / <alpha-value>)",
-          DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
-          foreground: "rgb(var(--info-foreground) / <alpha-value>)",
-        },
-        success: {
-          lighter: "rgb(var(--success-lighter)) / <alpha-value>)",
-          light: "rgb(var(--success-light)) / <alpha-value>)",
-          100: "rgb(var(--success-100)) / <alpha-value>)",
-          120: "rgb(var(--success-120)) / <alpha-value>)",
-          dark: "rgb(var(--success-dark)) / <alpha-value>)",
-          darker: "rgb(var(--success-darker)) / <alpha-value>)",
-          DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
-          foreground: "rgb(var(--success-foreground) / <alpha-value>)",
-        },
-        warning: {
-          lighter: "rgb(var(--warning-lighter)) / <alpha-value>)",
-          light: "rgb(var(--warning-light)) / <alpha-value>)",
-          100: "rgb(var(--warning-100) / <alpha-value>)",
-          120: "rgb(var(--warning-120) / <alpha-value>)",
-          dark: "rgb(var(--warning-dark)) / <alpha-value>)",
-          darker: "rgb(var(--warning-darker)) / <alpha-value>)",
-          DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
-          foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
-        },
-        error: {
-          lighter: "rgb(var(--error-lighter)) / <alpha-value>)",
-          light: "rgb(var(--error-light)) / <alpha-value>)",
-          100: "rgb(var(--error-100) / <alpha-value>)",
-          120: "rgb(var(--error-120) / <alpha-value>)",
-          dark: "rgb(var(--error-dark)) / <alpha-value>)",
-          darker: "rgb(var(--error-darker)) / <alpha-value>)",
-          DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
-          foreground: "rgb(var(--error-foreground) / <alpha-value>)",
-        },
-        main: {
-          transparent: {
-            primary: {
-              8: "rgb(var(--main-transparent-primary) / 0.8)",
-              12: "rgb(var(--main-transparent-primary) / 0.12)",
-              16: "rgb(var(--main-transparent-primary) / 0.16)",
-              24: "rgb(var(--main-transparent-primary) / 0.24)",
-              32: "rgb(var(--main-transparent-primary) / 0.32)",
-              48: "rgb(var(--main-transparent-primary) / 0.48)",
-            },
-            secondary: {
-              8: "rgb(var(--main-transparent-secondary) / 0.8)",
-              12: "rgb(var(--main-transparent-secondary) / 0.12)",
-              16: "rgb(var(--main-transparent-secondary) / 0.16)",
-              24: "rgb(var(--main-transparent-secondary) / 0.24)",
-              32: "rgb(var(--main-transparent-secondary) / 0.32)",
-              48: "rgb(var(--main-transparent-secondary) / 0.48)",
-            },
-            tertiary: {
-              8: "rgb(var(--main-transparent-tertiary) / 0.8)",
-              12: "rgb(var(--main-transparent-tertiary) / 0.12)",
-              16: "rgb(var(--main-transparent-tertiary) / 0.16)",
-              24: "rgb(var(--main-transparent-tertiary) / 0.24)",
-              32: "rgb(var(--main-transparent-tertiary) / 0.32)",
-              48: "rgb(var(--main-transparent-tertiary) / 0.48)",
-            },
-          },
-        },
-        // Component color
-        input: {
-          text: {
-            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
-            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
-            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
-          },
-          stroke: {
-            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
-            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
-            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
-          },
-          background: {
-            DEFAULT: "transparent",
-            active: "transparent",
-            disabled:
-              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
-          },
-          label: {
-            background:
-              "rgb(var(--input-label-background-color) / <alpha-value>)",
-          },
-        },
-        textcolor: {
-          dark: "rgb(var(--text-default-dark) / <alpha-value>)",
-          medium: "rgb(var(--text-default-medium) / <alpha-value>)",
-          light: "rgb(var(--text-default-light) / <alpha-value>)",
-          grey: {
-            dark: "rgb(var(--text-grey-dark) / <alpha-value>)",
-            medium: "rgb(var(--text-grey-medium) / <alpha-value>)",
-            light: "rgb(var(--text-grey-light) / <alpha-value>)",
-          },
-          white: "rgb(var(--text-white) / <alpha-value>)",
-        },
-        popup: {
-          background: "rgb(var(--popup-background) / <alpha-value>)",
-          overlay: "rgb(var(--popup-overlay) / var(--popup-overlay-alpha))",
-        },
+        "text-dark": withColorMixin("--text-dark"),
+        "text-medium": withColorMixin("--text-medium"),
+        "text-light": withColorMixin("--text-light"),
+        "text-grey-dark": withColorMixin("--text-grey-dark"),
+        "text-grey-medium": withColorMixin("--text-grey-medium"),
+        "text-grey-light": withColorMixin("--text-grey-light"),
+        "text-white": withColorMixin("--text-white"),
+
+        ...generateColorConfig("primary", "primary-ramps-primary"),
+        ...generateColorConfig("secondary", "secondary-ramps-secondary"),
+        ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
+        ...generateColorConfig("grey", "grey"),
+
+        ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
+        ...generateColorConfig("info", "info-info", secondaryRange),
+        ...generateColorConfig("success", "success-success", secondaryRange),
+        ...generateColorConfig("warning", "warning-warning", secondaryRange),
+        ...generateColorConfig("error", "error-error", secondaryRange),
+
+        ...generateTransparentColorConfig("primary", "main"),
+        ...generateTransparentColorConfig("secondary", "main"),
+        ...generateTransparentColorConfig("tertiary", "main"),
+        ...generateTransparentColorConfig("grey", "other"),
+        ...generateTransparentColorConfig("grey2", "other"),
+        ...generateTransparentColorConfig("info", "other"),
+        ...generateTransparentColorConfig("success", "other"),
+        ...generateTransparentColorConfig("warning", "other"),
+        ...generateTransparentColorConfig("error", "other"),
+        ...generateTransparentColorConfig("black", "other"),
+        ...generateTransparentColorConfig("white", "other"),
+
+        "state-disable-solid": withColorMixin("--state-color-disable-solid"),
+        "state-disable-outline": withColorMixin(
+          "--state-color-disable-outline"
+        ),
+
+        "input-default-text": withColorMixin("--input-color-default-text"),
+        "input-default-stroke": withColorMixin("--input-color-default-stroke"),
+        "input-filled-text": withColorMixin("--input-color-filled-text"),
+        "input-active-stroke": withColorMixin("--input-color-active-stroke"),
+        "input-disable-text": withColorMixin("--input-color-disable-text"),
+        "input-disable-stroke": withColorMixin("--input-color-disable-stroke"),
+        "input-disable-bg": withColorMixin("--input-color-disable-bg"),
+        "input-label-bg": withColorMixin("--input-color-label-bg"),
+        "input-error": withColorMixin("--input-color-error"),
+
+        "base-bg": withColorMixin("--base-color-bg"),
+        "base-bg2": withColorMixin("--base-color-bg2"),
+        "base-bg3": withColorMixin("--base-color-bg3"),
+        "base-popup": withColorMixin("--base-color-popup"),
+        "base-popup-highlight": withColorMixin("--base-color-popup-hightlight"),
+        "base-popup-curtain": withColorMixin("--base-color-popup-curtain"),
+        "base-popup-foreground": withColorMixin(
+          "--base-color-popup-foreground"
+        ),
+
+        "common-white": withColorMixin("--common-white"),
+        "common-black": withColorMixin("--common-black"),
+
+        surface: withColorMixin("--surface"),
+        "surface-foreground": withColorMixin("--surface-foreground"),
+        background: withColorMixin("--background"),
+        foreground: withColorMixin("--foreground"),
+      },
+      borderColor: {
+        ...generateButtonStyles("border"),
+        ...generateActionButtonStyles("border"),
+      },
+      backgroundColor: {
+        ...generateButtonStyles("bg"),
+        ...generateActionButtonStyles("bg"),
+      },
+      textColor: {
+        ...generateButtonStyles("text"),
+        ...generateActionButtonStyles("text"),
+      },
+      fill: {
+        ...generateButtonStyles("text"),
+        ...generateActionButtonStyles("text"),
       },
     },
   },