@ibis-design/css 0.5.0 → 0.7.0

package/dist/tailwind.theme.js

@@ -0,0 +1,310 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      spacing: {
+        0: "var(--spacing-0)",
+        1: "var(--spacing-1)",
+        2: "var(--spacing-2)",
+        3: "var(--spacing-3)",
+        4: "var(--spacing-4)",
+        5: "var(--spacing-5)",
+        6: "var(--spacing-6)",
+        7: "var(--spacing-7)",
+        8: "var(--spacing-8)",
+        9: "var(--spacing-9)",
+        10: "var(--spacing-10)",
+        12: "var(--spacing-12)",
+        14: "var(--spacing-14)",
+        16: "var(--spacing-16)",
+        20: "var(--spacing-20)",
+        24: "var(--spacing-24)"
+      },
+      textTransform: {
+        uppercase: "var(--text-transform-uppercase)",
+        lowercase: "var(--text-transform-lowercase)",
+        capitalize: "var(--text-transform-capitalize)"
+      },
+      lineHeight: {
+        tight: "var(--line-height-tight)",
+        normal: "var(--line-height-normal)",
+        relaxed: "var(--line-height-relaxed)",
+        loose: "var(--line-height-loose)"
+      },
+      letterSpacing: {
+        tighter: "var(--letter-spacing-tighter)",
+        tight: "var(--letter-spacing-tight)",
+        normal: "var(--letter-spacing-normal)",
+        wide: "var(--letter-spacing-wide)",
+        wider: "var(--letter-spacing-wider)"
+      },
+      zIndex: {
+        base: "var(--z-index-base)",
+        dropdown: "var(--z-index-dropdown)",
+        sticky: "var(--z-index-sticky)",
+        overlay: "var(--z-index-overlay)",
+        modal: "var(--z-index-modal)",
+        popover: "var(--z-index-popover)",
+        tooltip: "var(--z-index-tooltip)"
+      },
+      opacity: {
+        1: "var(--opacity-1)",
+        2: "var(--opacity-2)",
+        3: "var(--opacity-3)",
+        4: "var(--opacity-4)",
+        5: "var(--opacity-5)",
+        6: "var(--opacity-6)",
+        7: "var(--opacity-7)",
+        8: "var(--opacity-8)",
+        9: "var(--opacity-9)",
+        disabled: "var(--opacity-disabled)",
+        muted: "var(--opacity-muted)",
+        subtle: "var(--opacity-subtle)"
+      },
+      transition: {
+        duration: {
+          fast: "var(--transition-duration-fast)",
+          normal: "var(--transition-duration-normal)",
+          slow: "var(--transition-duration-slow)"
+        },
+        timing: {
+          DEFAULT: "var(--transition-timing-default)",
+          in: "var(--transition-timing-in)",
+          out: "var(--transition-timing-out)",
+          inOut: "var(--transition-timing-in-out)"
+        }
+      },
+      breakpoint: {
+    "2xs": "var(--breakpoint-2xs)",
+        xs: "var(--breakpoint-xs)",
+        sm: "var(--breakpoint-sm)",
+        md: "var(--breakpoint-md)",
+        lg: "var(--breakpoint-lg)",
+        xl: "var(--breakpoint-xl)",
+    "2xl": "var(--breakpoint-2xl)"
+      },
+      blur: {
+        none: "var(--blur-none)",
+        xs: "var(--blur-xs)",
+        sm: "var(--blur-sm)",
+        md: "var(--blur-md)",
+        lg: "var(--blur-lg)",
+        xl: "var(--blur-xl)",
+    "2xl": "var(--blur-2xl)",
+    "3xl": "var(--blur-3xl)"
+      },
+      size: {
+        xs: "var(--size-xs)",
+        sm: "var(--size-sm)",
+        md: "var(--size-md)",
+        lg: "var(--size-lg)",
+        xl: "var(--size-xl)",
+    "2xl": "var(--size-2xl)"
+      },
+      logo: {
+        square: {
+          sm: "var(--logo-square-sm)",
+          md: "var(--logo-square-md)",
+          lg: "var(--logo-square-lg)",
+          xl: "var(--logo-square-xl)",
+          main: "var(--logo-square-main)"
+        }
+      },
+      icons: {
+        xs: "var(--icons-xs)",
+        sm: "var(--icons-sm)",
+        md: "var(--icons-md)",
+        lg: "var(--icons-lg)",
+        xl: "var(--icons-xl)"
+      },
+      font: {
+        style: {
+          normal: "var(--font-style-normal)",
+          italic: "var(--font-style-italic)"
+        },
+        weight: {
+          thin: "var(--font-weight-thin)",
+          extralight: "var(--font-weight-extralight)",
+          light: "var(--font-weight-light)",
+          normal: "var(--font-weight-normal)",
+          medium: "var(--font-weight-medium)",
+          semibold: "var(--font-weight-semibold)",
+          bold: "var(--font-weight-bold)",
+          extrabold: "var(--font-weight-extrabold)",
+          black: "var(--font-weight-black)"
+        },
+        family: {
+          branding: "var(--font-family-branding)",
+          heading: "var(--font-family-heading)",
+          sans: "var(--font-family-sans)"
+        },
+        size: {
+          body: {
+            xs: "var(--font-size-body-xs)",
+            sm: "var(--font-size-body-sm)",
+            md: "var(--font-size-body-md)",
+            lg: "var(--font-size-body-lg)",
+            xl: "var(--font-size-body-xl)"
+          },
+          heading: {
+        "h1": "var(--font-size-heading-h1)",
+        "h2": "var(--font-size-heading-h2)",
+        "h3": "var(--font-size-heading-h3)",
+        "h4": "var(--font-size-heading-h4)",
+        "h5": "var(--font-size-heading-h5)"
+          }
+        }
+      },
+      border: {
+        width: {
+          none: "var(--border-width-none)",
+          hairline: "var(--border-width-hairline)",
+          thin: "var(--border-width-thin)",
+          default: "var(--border-width-default)",
+          medium: "var(--border-width-medium)",
+          thick: "var(--border-width-thick)"
+        },
+        radius: {
+          none: "var(--border-radius-none)",
+          xs: "var(--border-radius-xs)",
+          sm: "var(--border-radius-sm)",
+          md: "var(--border-radius-md)",
+          lg: "var(--border-radius-lg)",
+          xl: "var(--border-radius-xl)",
+      "2xl": "var(--border-radius-2xl)",
+          full: "var(--border-radius-full)"
+        },
+        color: {
+          default: "var(--border-color-default)",
+          focus: "var(--border-color-focus)",
+          button: "var(--border-color-button)"
+        }
+      },
+      shadowColor: {
+        black: {
+          soft: "var(--shadow-color-black-soft)",
+          medium: "var(--shadow-color-black-medium)",
+          strong: "var(--shadow-color-black-strong)"
+        },
+        brand: {
+          soft: "var(--shadow-color-brand-soft)",
+          medium: "var(--shadow-color-brand-medium)",
+          strong: "var(--shadow-color-brand-strong)"
+        },
+        white: {
+          soft: "var(--shadow-color-white-soft)",
+          medium: "var(--shadow-color-white-medium)",
+          strong: "var(--shadow-color-white-strong)"
+        },
+        checkbox: {
+          soft: "var(--shadow-color-checkbox-soft)",
+          medium: "var(--shadow-color-checkbox-medium)",
+          strong: "var(--shadow-color-checkbox-strong)"
+        }
+      },
+      shadow: {
+        elevation: {
+          none: "var(--shadow-elevation-none)",
+          sm: "var(--shadow-elevation-sm)",
+          md: "var(--shadow-elevation-md)"
+        },
+        focus: {
+          default: "var(--shadow-focus-default)",
+          primary: "var(--shadow-focus-primary)",
+          error: "var(--shadow-focus-error)"
+        }
+      },
+      color: {
+        primary: {
+          50: "var(--color-primary-50)",
+          100: "var(--color-primary-100)",
+          200: "var(--color-primary-200)",
+          300: "var(--color-primary-300)",
+          400: "var(--color-primary-400)",
+          500: "var(--color-primary-500)",
+          600: "var(--color-primary-600)",
+          700: "var(--color-primary-700)",
+          800: "var(--color-primary-800)",
+          900: "var(--color-primary-900)",
+          950: "var(--color-primary-950)"
+        },
+        neutral: {
+          50: "var(--color-neutral-50)",
+          100: "var(--color-neutral-100)",
+          200: "var(--color-neutral-200)",
+          300: "var(--color-neutral-300)",
+          400: "var(--color-neutral-400)",
+          500: "var(--color-neutral-500)",
+          600: "var(--color-neutral-600)",
+          700: "var(--color-neutral-700)",
+          800: "var(--color-neutral-800)",
+          900: "var(--color-neutral-900)",
+          950: "var(--color-neutral-950)"
+        },
+        white: "var(--color-white)",
+        black: "var(--color-black)",
+        green: "var(--color-green)",
+        red: "var(--color-red)",
+        orange: "var(--color-orange)",
+        text: {
+          primary: "var(--color-text-primary)",
+          inverse: "var(--color-text-inverse)"
+        },
+        toaster: {
+          default: "var(--color-toaster-default)",
+          success: "var(--color-toaster-success)",
+          error: "var(--color-toaster-error)",
+          accent: "var(--color-toaster-accent)"
+        },
+        status: {
+          success: "var(--color-status-success)",
+          error: "var(--color-status-error)",
+          warning: "var(--color-status-warning)"
+        },
+        gradients: {
+          main: {
+            start: "var(--color-gradients-main-start)",
+            end: "var(--color-gradients-main-end)"
+          },
+          purple: {
+            start: "var(--color-gradients-purple-start)",
+            end: "var(--color-gradients-purple-end)"
+          },
+          darkPurple: {
+            start: "var(--color-gradients-dark-purple-start)",
+            end: "var(--color-gradients-dark-purple-end)"
+          },
+          skeleton: {
+            start: "var(--color-gradients-skeleton-start)",
+            middle: "var(--color-gradients-skeleton-middle)",
+            end: "var(--color-gradients-skeleton-end)"
+          },
+          button: {
+            start: "var(--color-gradients-button-start)",
+            end: "var(--color-gradients-button-end)"
+          }
+        },
+        brand: {
+          primary: "var(--color-brand-primary)",
+          secondary: "var(--color-brand-secondary)",
+          neutral: "var(--color-brand-neutral)"
+        },
+        backgrounds: {
+          classic: {
+            light: "var(--color-backgrounds-classic-light)",
+            dark: "var(--color-backgrounds-classic-dark)"
+          }
+        }
+      },
+      gradient: {
+        brand: {
+          primary: "var(--gradient-brand-primary)"
+        },
+        skeleton: "var(--gradient-skeleton)",
+        button: "var(--gradient-button)"
+      }
+    },
+  },
+}

package/dist/tokens/alc-dark.json

@@ -0,0 +1 @@
+{}

package/dist/tokens/alc-light.json

@@ -0,0 +1 @@
+{}

package/dist/tokens/ib-dark.json

@@ -0,0 +1 @@
+{}

package/dist/tokens/ib-light.json

@@ -0,0 +1 @@
+{}

package/package.json

@@ -1,28 +1,31 @@
 {
   "name": "@ibis-design/css",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
   "type": "module",
   "exports": {
-    ".": "./dist/ibis/ibis-design.css",
-    "./ibis-design.css": "./dist/ibis/ibis-design.css",
-    "./ibis-design.scss": "./dist/ibis/ibis-design.scss",
-    "./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
-    "./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
-    "./tailwind.preset": "./dist/ibis/tailwind.preset.js",
-    "./preset": "./dist/ibis/tailwind.preset.js",
-    "./ibis/tailwind.preset": "./dist/ibis/tailwind.preset.js",
-    "./alchemy/tailwind.preset": "./dist/alchemy/tailwind.preset.js"
+    ".": "./dist/design-tokens.css",
+    "./design-tokens.css": "./dist/design-tokens.css",
+    "./tailwind.preset": "./dist/tailwind.preset.js",
+    "./preset": "./dist/tailwind.preset.js",
+    "./ibis-design.css": "./dist/design-tokens.css",
+    "./alchemy-design.css": "./dist/design-tokens.css",
+    "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
+    "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
+    "./components/*": "./dist/components/*",
+    "./tailwind.theme": "./dist/tailwind.theme.js"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "node --experimental-strip-types src/scripts/build.ts",
+    "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts",
+    "validate": "tsx src/scripts/validate-themes.ts",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "sd-tailwindcss-transformer": "^2.2.1",
-    "style-dictionary": "^5.4.0"
+    "style-dictionary": "^5.4.1",
+    "tsx": "^4.22.3"
   }
 }

package/dist/alchemy/alchemy-design.css

@@ -1,154 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --color-primary-50: #eff6ff;
-  --color-primary-100: #daebff;
-  --color-primary-200: #bdddff;
-  --color-primary-300: #90c8ff;
-  --color-primary-400: #5ca9fe;
-  --color-primary-500: #3686fb;
-  --color-primary-600: #2066f0;
-  --color-primary-700: #1851dd;
-  --color-primary-800: #1a42b3;
-  --color-primary-900: #1b3c8d;
-  --color-primary-950: #152554;
-  --color-neutral-50: #f4f4f4;
-  --color-neutral-100: #dbdbdb;
-  --color-neutral-200: #dbdbdb;
-  --color-neutral-300: #c1c1c1;
-  --color-neutral-400: #a8a8a8;
-  --color-neutral-500: #6d6d6d;
-  --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4f4f4f;
-  --color-neutral-800: #666666;
-  --color-neutral-900: #4d4d4d;
-  --color-neutral-950: #000000;
-  --color-white: #ffffff;
-  --color-black: #000000;
-  --color-system-success: #009a08; /** Positive / completed state */
-  --color-system-failure: #b70c00; /** Error / destructive state */
-  --color-system-attention: #fa8900; /** Warning / needs attention */
-  --color-brand-blue: #31498f;
-  --color-brand-yellow: #ffc60d;
-  --color-brand-green: #43b249;
-  --color-alchemy-neutral-yellow: #fffbf0;
-  --color-alchemy-neutral-blue: #f0f4ff;
-  --color-alchemy-neutral-green: #f0fff1;
-  --color-gradient-primary-start: #244197;
-  --color-gradient-primary-end: #090f20;
-  --color-gradient-brand-start: #feca1f;
-  --color-gradient-brand-middle: #3da042;
-  --color-gradient-brand-end: #2f4688;
-  --color-backgrounds-classic-light: #fafafa;
-  --color-backgrounds-classic-dark: #0d0d0d;
-  --color-backgrounds-cardbg-purple: #920075;
-  --color-backgrounds-cardbg-dark-purple: #522398;
-  --color-button-start: #244197;
-  --color-button-end: #090f20;
-  --spacing-0: 0;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-16: 4rem;
-  --letter-spacing-tighter: -0.05em;
-  --letter-spacing-tight: -0.025em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.025em;
-  --letter-spacing-wider: 0.05em;
-  --line-height-tight: 1.25;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  --line-height-loose: 2;
-  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
-  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
-  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
-  --font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; /** Alchemy UI accent (optional) */
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --font-weight-black: 900;
-  --font-size-normal-text-xs: 0.75rem;
-  --font-size-normal-text-sm: 0.875rem;
-  --font-size-normal-text-default: 1rem;
-  --font-size-normal-text-lg: 1.125rem;
-  --font-size-normal-text-xl: 1.25rem;
-  --font-size-marketing-text-sm: 1rem;
-  --font-size-marketing-text-default: 1.333rem;
-  --font-size-marketing-text-lg: 1.771rem;
-  --font-size-marketing-text-xl: 2.375rem;
-  --border-radius-none: 0;
-  --border-radius-sm: 0.25rem;
-  --border-radius-default: 0.375rem;
-  --border-radius-md: 0.5rem;
-  --border-radius-lg: 0.75rem;
-  --border-radius-full: 9999px;
-  --border-width-none: 0;
-  --border-width-thin: 1px;
-  --border-width-default: 2px;
-  --border-width-thick: 4px;
-  --shadow-none: none;
-  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --logo-square-sm: 24px;
-  --logo-square-md: 32px;
-  --logo-square-lg: 40px;
-  --logo-square-xl: 48px;
-  --logo-square-main: 255px;
-  --icons-frame-circle-xs: 16px;
-  --icons-frame-circle-sm: 24px;
-  --icons-frame-circle-md: 32px;
-  --icons-frame-circle-lg: 48px;
-  --icons-frame-circle-xl: 56px;
-  --icons-size-xs: 12px;
-  --icons-size-sm: 18px;
-  --icons-size-md: 24px;
-  --icons-size-lg: 40px;
-  --icons-size-xl: 48px;
-  --z-index-base: 0;
-  --z-index-dropdown: 1000;
-  --z-index-sticky: 1100;
-  --z-index-overlay: 1200;
-  --z-index-modal: 1300;
-  --z-index-popover: 1400;
-  --z-index-tooltip: 1500;
-  --opacity-disabled: 0.5;
-  --opacity-muted: 0.75;
-  --opacity-subtle: 0.9;
-  --transition-duration-fast: 150ms;
-  --transition-duration-normal: 250ms;
-  --transition-duration-slow: 400ms;
-  --transition-timing-default: ease;
-  --transition-timing-in: ease-in;
-  --transition-timing-out: ease-out;
-  --transition-timing-in-out: ease-in-out;
-  --breakpoint-xs: 480px;
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
-  --blur-none: 0;
-  --blur-xs: 2px;
-  --blur-sm: 4px;
-  --blur-md: 6px;
-  --blur-lg: 8px;
-  --blur-xl: 12px;
-  --blur-2xl: 16px;
-}

package/dist/alchemy/alchemy-design.scss

@@ -1,151 +0,0 @@
-
-// Do not edit directly, this file was auto-generated.
-
-$color-primary-50: #eff6ff;
-$color-primary-100: #daebff;
-$color-primary-200: #bdddff;
-$color-primary-300: #90c8ff;
-$color-primary-400: #5ca9fe;
-$color-primary-500: #3686fb;
-$color-primary-600: #2066f0;
-$color-primary-700: #1851dd;
-$color-primary-800: #1a42b3;
-$color-primary-900: #1b3c8d;
-$color-primary-950: #152554;
-$color-neutral-50: #f4f4f4;
-$color-neutral-100: #dbdbdb;
-$color-neutral-200: #dbdbdb;
-$color-neutral-300: #c1c1c1;
-$color-neutral-400: #a8a8a8;
-$color-neutral-500: #6d6d6d;
-$color-neutral-600: #5d5d5d;
-$color-neutral-700: #4f4f4f;
-$color-neutral-800: #666666;
-$color-neutral-900: #4d4d4d;
-$color-neutral-950: #000000;
-$color-white: #ffffff;
-$color-black: #000000;
-$color-system-success: #009a08; // Positive / completed state
-$color-system-failure: #b70c00; // Error / destructive state
-$color-system-attention: #fa8900; // Warning / needs attention
-$color-brand-blue: #31498f;
-$color-brand-yellow: #ffc60d;
-$color-brand-green: #43b249;
-$color-alchemy-neutral-yellow: #fffbf0;
-$color-alchemy-neutral-blue: #f0f4ff;
-$color-alchemy-neutral-green: #f0fff1;
-$color-gradient-primary-start: #244197;
-$color-gradient-primary-end: #090f20;
-$color-gradient-brand-start: #feca1f;
-$color-gradient-brand-middle: #3da042;
-$color-gradient-brand-end: #2f4688;
-$color-backgrounds-classic-light: #fafafa;
-$color-backgrounds-classic-dark: #0d0d0d;
-$color-backgrounds-cardbg-purple: #920075;
-$color-backgrounds-cardbg-dark-purple: #522398;
-$color-button-start: #244197;
-$color-button-end: #090f20;
-$spacing-0: 0;
-$spacing-1: 0.25rem;
-$spacing-2: 0.5rem;
-$spacing-3: 0.75rem;
-$spacing-4: 1rem;
-$spacing-5: 1.25rem;
-$spacing-6: 1.5rem;
-$spacing-8: 2rem;
-$spacing-10: 2.5rem;
-$spacing-12: 3rem;
-$spacing-16: 4rem;
-$letter-spacing-tighter: -0.05em;
-$letter-spacing-tight: -0.025em;
-$letter-spacing-normal: 0;
-$letter-spacing-wide: 0.025em;
-$letter-spacing-wider: 0.05em;
-$line-height-tight: 1.25;
-$line-height-normal: 1.5;
-$line-height-relaxed: 1.75;
-$line-height-loose: 2;
-$font-family-branding: 'Beyond Infinity', cursive; // Logo and brand display
-$font-family-heading: Metrisch, Poppins, system-ui, sans-serif; // Headings and display text
-$font-family-sans: Inter, Verdana, system-ui, sans-serif; // Body and UI text
-$font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; // Alchemy UI accent (optional)
-$font-weight-thin: 100;
-$font-weight-extralight: 200;
-$font-weight-light: 300;
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-$font-weight-extrabold: 800;
-$font-weight-black: 900;
-$font-size-normal-text-xs: 0.75rem;
-$font-size-normal-text-sm: 0.875rem;
-$font-size-normal-text-default: 1rem;
-$font-size-normal-text-lg: 1.125rem;
-$font-size-normal-text-xl: 1.25rem;
-$font-size-marketing-text-sm: 1rem;
-$font-size-marketing-text-default: 1.333rem;
-$font-size-marketing-text-lg: 1.771rem;
-$font-size-marketing-text-xl: 2.375rem;
-$border-radius-none: 0;
-$border-radius-sm: 0.25rem;
-$border-radius-default: 0.375rem;
-$border-radius-md: 0.5rem;
-$border-radius-lg: 0.75rem;
-$border-radius-full: 9999px;
-$border-width-none: 0;
-$border-width-thin: 1px;
-$border-width-default: 2px;
-$border-width-thick: 4px;
-$shadow-none: none;
-$shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-$shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-$logo-square-sm: 24px;
-$logo-square-md: 32px;
-$logo-square-lg: 40px;
-$logo-square-xl: 48px;
-$logo-square-main: 255px;
-$icons-frame-circle-xs: 16px;
-$icons-frame-circle-sm: 24px;
-$icons-frame-circle-md: 32px;
-$icons-frame-circle-lg: 48px;
-$icons-frame-circle-xl: 56px;
-$icons-size-xs: 12px;
-$icons-size-sm: 18px;
-$icons-size-md: 24px;
-$icons-size-lg: 40px;
-$icons-size-xl: 48px;
-$z-index-base: 0;
-$z-index-dropdown: 1000;
-$z-index-sticky: 1100;
-$z-index-overlay: 1200;
-$z-index-modal: 1300;
-$z-index-popover: 1400;
-$z-index-tooltip: 1500;
-$opacity-disabled: 0.5;
-$opacity-muted: 0.75;
-$opacity-subtle: 0.9;
-$transition-duration-fast: 150ms;
-$transition-duration-normal: 250ms;
-$transition-duration-slow: 400ms;
-$transition-timing-default: ease;
-$transition-timing-in: ease-in;
-$transition-timing-out: ease-out;
-$transition-timing-in-out: ease-in-out;
-$breakpoint-xs: 480px;
-$breakpoint-sm: 640px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
-$breakpoint-2xl: 1536px;
-$blur-none: 0;
-$blur-xs: 2px;
-$blur-sm: 4px;
-$blur-md: 6px;
-$blur-lg: 8px;
-$blur-xl: 12px;
-$blur-2xl: 16px;