@raintonic/formaui 0.4.0 → 0.9.2

package/styles/generated/_tokens.scss

@@ -0,0 +1,906 @@
+// Do not edit directly, this file was auto-generated by Style Dictionary.
+
+@mixin fui-tokens-root {
+  --fui-radius-none: 0;
+  --fui-radius-xs: 4px;
+  --fui-radius-sm: 8px;
+  --fui-radius-md: 10px;
+  --fui-radius-lg: 16px;
+  --fui-radius-xl: 24px;
+  --fui-radius-pill: 9999px;
+  --fui-border-width-none: 0;
+  --fui-border-width-sm: 1px;
+  --fui-border-width-md: 2px;
+  --fui-border-width-lg: 4px;
+  --fui-z-base: 0;
+  --fui-z-dropdown: 100;
+  --fui-z-sticky: 200;
+  --fui-z-fixed: 300;
+  --fui-z-backdrop: 400;
+  --fui-z-modal: 500;
+  --fui-z-popover: 600;
+  --fui-z-toast: 700;
+  --fui-z-tooltip: 800;
+  --fui-bp-xs: 480px;
+  --fui-bp-sm: 640px;
+  --fui-bp-md: 768px;
+  --fui-bp-lg: 1024px;
+  --fui-bp-xl: 1280px;
+  --fui-bp-2xl: 1536px;
+  --fui-grid-columns: 12;
+  --fui-grid-gutter: var(--fui-spacing-7);
+  --fui-container-sm: 640px;
+  --fui-container-md: 768px;
+  --fui-container-lg: 1024px;
+  --fui-container-xl: 1280px;
+  --fui-container-2xl: 1536px;
+  --fui-tooltip-background: #334155;
+  --fui-tooltip-text: #f8fafc;
+  --fui-duration-instant: 0ms;
+  --fui-duration-fast: 100ms;
+  --fui-duration-base: 200ms;
+  --fui-duration-moderate: 300ms;
+  --fui-duration-slow: 500ms;
+  --fui-duration-deliberate: 750ms;
+  --fui-ease-linear: linear;
+  --fui-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --fui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --fui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --fui-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --fui-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --fui-icon-spin-duration: var(--fui-duration-base);
+  --fui-icon-spin-timing: linear;
+  --fui-icon-pulse-duration: var(--fui-duration-slow);
+  --fui-icon-pulse-timing: var(--fui-ease-emphasized);
+  --fui-transition-color: color var(--fui-duration-fast) var(--fui-ease-out);
+  --fui-transition-bg: background-color var(--fui-duration-fast) var(--fui-ease-out);
+  --fui-transition-transform: transform var(--fui-duration-base) var(--fui-ease-out);
+  --fui-transition-opacity: opacity var(--fui-duration-base) var(--fui-ease-out);
+  --fui-transition-shadow: box-shadow var(--fui-duration-base) var(--fui-ease-out);
+  --fui-button-height-sm: 1.75rem;
+  --fui-button-height-md: 2.25rem;
+  --fui-button-height-lg: 2.75rem;
+  --fui-button-height-xl: 3.25rem;
+  --fui-button-height-2xl: 4rem;
+  --fui-input-height: 2.25rem;
+  --fui-icon-xs: 0.75rem;
+  --fui-icon-sm: 1rem;
+  --fui-icon-md: 1.25rem;
+  --fui-icon-lg: 1.5rem;
+  --fui-icon-xl: 2rem;
+  --fui-icon-2xl: 3rem;
+  --fui-density-scale: 1;
+  --fui-control-h-xs: 1.5rem;
+  --fui-control-h-sm: 2rem;
+  --fui-control-h-md: 2.5rem;
+  --fui-control-h-lg: 3rem;
+  --fui-control-h-xl: 3.5rem;
+  --fui-control-padding-sm: calc(var(--fui-spacing-2) * var(--fui-density-scale));
+  --fui-control-padding-md: calc(var(--fui-spacing-4) * var(--fui-density-scale));
+  --fui-control-padding-lg: calc(var(--fui-spacing-6) * var(--fui-density-scale));
+  --fui-cell-padding-y: calc(var(--fui-spacing-4) * var(--fui-density-scale));
+  --fui-cell-padding-x: calc(var(--fui-spacing-6) * var(--fui-density-scale));
+  --fui-spacing-0: 0;
+  --fui-spacing-1: 0.125rem;
+  --fui-spacing-2: 0.25rem;
+  --fui-spacing-3: 0.375rem;
+  --fui-spacing-4: 0.5rem;
+  --fui-spacing-5: 0.625rem;
+  --fui-spacing-6: 0.75rem;
+  --fui-spacing-7: 1rem;
+  --fui-spacing-8: 1.25rem;
+  --fui-spacing-9: 1.5rem;
+  --fui-spacing-10: 1.75rem;
+  --fui-spacing-11: 2rem;
+  --fui-spacing-12: 2.5rem;
+  --fui-spacing-13: 3rem;
+  --fui-font-sans: 'Geist', sans-serif;
+  --fui-font-mono: 'DM Mono', monospace;
+  --fui-text-xs: 0.6875rem;
+  --fui-text-sm: 0.75rem;
+  --fui-text-base: 0.875rem;
+  --fui-text-md: 1rem;
+  --fui-text-lg: 1.125rem;
+  --fui-text-xl: 1.25rem;
+  --fui-text-2xl: 1.5rem;
+  --fui-text-3xl: 1.875rem;
+  --fui-text-4xl: 2.25rem;
+  --fui-text-5xl: 3rem;
+  --fui-text-6xl: 3.75rem;
+  --fui-text-7xl: 4.5rem;
+  --fui-weight-light: 300;
+  --fui-weight-regular: 400;
+  --fui-weight-medium: 500;
+  --fui-weight-semibold: 600;
+  --fui-weight-bold: 700;
+  --fui-leading-tight: 1.2;
+  --fui-leading-snug: 1.35;
+  --fui-leading-normal: 1.5;
+  --fui-leading-relaxed: 1.65;
+  --fui-leading-loose: 2;
+  --fui-tracking-tight: -0.02em;
+  --fui-tracking-normal: 0;
+  --fui-tracking-wide: 0.02em;
+}
+
+@mixin fui-light-theme {
+  --fui-primary-10: #E7E0F7;
+  --fui-primary-20: #CEC2ED;
+  --fui-primary-30: #B4A5E2;
+  --fui-primary-40: #9A89D6;
+  --fui-primary-50: #806FC8;
+  --fui-primary-60: #6657B8;
+  --fui-primary-70: #524898;
+  --fui-primary-80: #433E74;
+  --fui-primary-90: #333152;
+  --fui-primary-100: #222233;
+  --fui-primary-110: #101016;
+  --fui-accent-10: #F8F6F9;
+  --fui-accent-20: #F1ECF3;
+  --fui-accent-30: #E9DEED;
+  --fui-accent-40: #E0CFE7;
+  --fui-accent-50: #D8C0E2;
+  --fui-accent-60: #D1B0DD;
+  --fui-accent-70: #B883CE;
+  --fui-accent-80: #9D4CBD;
+  --fui-accent-90: #75328F;
+  --fui-accent-100: #492258;
+  --fui-accent-110: #23142A;
+  --fui-neutral-10: #FCFCFD;
+  --fui-neutral-20: #F5F7FB;
+  --fui-neutral-30: #ECEFF5;
+  --fui-neutral-40: #DDE3EC;
+  --fui-neutral-50: #C8D0DD;
+  --fui-neutral-60: #A6B1C2;
+  --fui-neutral-70: #7F8B9E;
+  --fui-neutral-80: #5F697C;
+  --fui-neutral-90: #444C5D;
+  --fui-neutral-100: #2A303B;
+  --fui-neutral-110: #11151B;
+  --fui-error-10: #FFFBFA;
+  --fui-error-20: #FED9D1;
+  --fui-error-30: #FDB5A9;
+  --fui-error-40: #FA9082;
+  --fui-error-50: #F56B5C;
+  --fui-error-60: #F04438;
+  --fui-error-70: #EA2716;
+  --fui-error-80: #C52414;
+  --fui-error-90: #9F2112;
+  --fui-error-100: #791C0F;
+  --fui-error-110: #55160C;
+  --fui-success-10: #F6FEF9;
+  --fui-success-20: #C0F8D7;
+  --fui-success-30: #8BF1B8;
+  --fui-success-40: #56EA9C;
+  --fui-success-50: #22E383;
+  --fui-success-60: #17B26A;
+  --fui-success-70: #13995D;
+  --fui-success-80: #0F804F;
+  --fui-success-90: #0B6740;
+  --fui-success-100: #084D31;
+  --fui-success-110: #053321;
+  --fui-warning-10: #FFFCF5;
+  --fui-warning-20: #FFECC5;
+  --fui-warning-30: #FED995;
+  --fui-warning-40: #FCC366;
+  --fui-warning-50: #FAAB37;
+  --fui-warning-60: #F79009;
+  --fui-warning-70: #D4710A;
+  --fui-warning-80: #B1570B;
+  --fui-warning-90: #8F400C;
+  --fui-warning-100: #6E2D0B;
+  --fui-warning-110: #4E1D09;
+  --fui-info-10: #F5F9FF;
+  --fui-info-20: #CCE1FF;
+  --fui-info-30: #A4CBFE;
+  --fui-info-40: #7CB6FD;
+  --fui-info-50: #55A2FC;
+  --fui-info-60: #2E90FA;
+  --fui-info-70: #1077F3;
+  --fui-info-80: #1062CF;
+  --fui-info-90: #124EA8;
+  --fui-info-100: #123C83;
+  --fui-info-110: #102C60;
+  --fui-pluvia-teal-10: #F9FCFC;
+  --fui-pluvia-teal-20: #D1E8E9;
+  --fui-pluvia-teal-30: #A8D5D6;
+  --fui-pluvia-teal-40: #7FC2C5;
+  --fui-pluvia-teal-50: #54AFB4;
+  --fui-pluvia-teal-60: #3D8A90;
+  --fui-pluvia-teal-70: #37757B;
+  --fui-pluvia-teal-80: #2F6066;
+  --fui-pluvia-teal-90: #284D52;
+  --fui-pluvia-teal-100: #203A3E;
+  --fui-pluvia-teal-110: #17282B;
+  --fui-nimbus-blue-10: #F9FBFC;
+  --fui-nimbus-blue-20: #D1E0E9;
+  --fui-nimbus-blue-30: #A8C3D6;
+  --fui-nimbus-blue-40: #7FA4C5;
+  --fui-nimbus-blue-50: #5482B4;
+  --fui-nimbus-blue-60: #3D6190;
+  --fui-nimbus-blue-70: #37537B;
+  --fui-nimbus-blue-80: #2F4566;
+  --fui-nimbus-blue-90: #283852;
+  --fui-nimbus-blue-100: #202B3E;
+  --fui-nimbus-blue-110: #171E2B;
+  --fui-gray-cool-10: #FCFCFD;
+  --fui-gray-cool-20: #DCDDE8;
+  --fui-gray-cool-30: #BDBFD4;
+  --fui-gray-cool-40: #9CA1C0;
+  --fui-gray-cool-50: #7B84AD;
+  --fui-gray-cool-60: #5D6A97;
+  --fui-gray-cool-70: #495682;
+  --fui-gray-cool-80: #37426C;
+  --fui-gray-cool-90: #263054;
+  --fui-gray-cool-100: #181F3A;
+  --fui-gray-cool-110: #0B0F1E;
+  --fui-gray-neutral-10: #FCFCFD;
+  --fui-gray-neutral-20: #DCDDE7;
+  --fui-gray-neutral-30: #BEC0CF;
+  --fui-gray-neutral-40: #A1A5B6;
+  --fui-gray-neutral-50: #858B9C;
+  --fui-gray-neutral-60: #6C727F;
+  --fui-gray-neutral-70: #535C70;
+  --fui-gray-neutral-80: #3D485F;
+  --fui-gray-neutral-90: #2A344B;
+  --fui-gray-neutral-100: #192234;
+  --fui-gray-neutral-110: #0B101B;
+  --fui-gray-iron-10: #FCFCFC;
+  --fui-gray-iron-20: #E1E1E1;
+  --fui-gray-iron-30: #C5C5C7;
+  --fui-gray-iron-40: #A9A9AE;
+  --fui-gray-iron-50: #8D8D95;
+  --fui-gray-iron-60: #71717B;
+  --fui-gray-iron-70: #5E5E67;
+  --fui-gray-iron-80: #4B4B53;
+  --fui-gray-iron-90: #38383F;
+  --fui-gray-iron-100: #25252B;
+  --fui-gray-iron-110: #131316;
+  --fui-gray-true-10: #FCFCFC;
+  --fui-gray-true-20: #E1E1E1;
+  --fui-gray-true-30: #C5C5C5;
+  --fui-gray-true-40: #AAAAAA;
+  --fui-gray-true-50: #8E8E8E;
+  --fui-gray-true-60: #737373;
+  --fui-gray-true-70: #5F5F5F;
+  --fui-gray-true-80: #4B4B4B;
+  --fui-gray-true-90: #373737;
+  --fui-gray-true-100: #232323;
+  --fui-gray-true-110: #0F0F0F;
+  --fui-moss-10: #FAFDF7;
+  --fui-moss-20: #DCF1C7;
+  --fui-moss-30: #BFE598;
+  --fui-moss-40: #A1D868;
+  --fui-moss-50: #84CB39;
+  --fui-moss-60: #669F2A;
+  --fui-moss-70: #578724;
+  --fui-moss-80: #486F1E;
+  --fui-moss-90: #385718;
+  --fui-moss-100: #294011;
+  --fui-moss-110: #1A280B;
+  --fui-green-light-10: #FAFEF5;
+  --fui-green-light-20: #E0F9C4;
+  --fui-green-light-30: #C4F294;
+  --fui-green-light-40: #A5EB64;
+  --fui-green-light-50: #85E336;
+  --fui-green-light-60: #66C61D;
+  --fui-green-light-70: #54A51B;
+  --fui-green-light-80: #448418;
+  --fui-green-light-90: #346514;
+  --fui-green-light-100: #244610;
+  --fui-green-light-110: #15290A;
+  --fui-green-10: #F6FEF9;
+  --fui-green-20: #C0F8D7;
+  --fui-green-30: #8AF3B8;
+  --fui-green-40: #53ED9C;
+  --fui-green-50: #1DE883;
+  --fui-green-60: #12B76A;
+  --fui-green-70: #0F9D5D;
+  --fui-green-80: #0D824F;
+  --fui-green-90: #0A6840;
+  --fui-green-100: #084D31;
+  --fui-green-110: #053321;
+  --fui-cyan-10: #F5FEFF;
+  --fui-cyan-20: #BDF7FF;
+  --fui-cyan-30: #86EEFE;
+  --fui-cyan-40: #4FE2FC;
+  --fui-cyan-50: #19D4FA;
+  --fui-cyan-60: #06AED4;
+  --fui-cyan-70: #0992B5;
+  --fui-cyan-80: #0C7797;
+  --fui-cyan-90: #0D5F7B;
+  --fui-cyan-100: #0C495F;
+  --fui-cyan-110: #0B3445;
+  --fui-blue-10: #F5FAFF;
+  --fui-blue-20: #CCE5FF;
+  --fui-blue-30: #A4D0FE;
+  --fui-blue-40: #7CBBFD;
+  --fui-blue-50: #55A6FC;
+  --fui-blue-60: #2E90FA;
+  --fui-blue-70: #1077F3;
+  --fui-blue-80: #1062CF;
+  --fui-blue-90: #124EA8;
+  --fui-blue-100: #123C83;
+  --fui-blue-110: #102C60;
+  --fui-blue-dark-10: #F5F8FF;
+  --fui-blue-dark-20: #CCDCFF;
+  --fui-blue-dark-30: #A3C0FF;
+  --fui-blue-dark-40: #7BA5FF;
+  --fui-blue-dark-50: #528AFF;
+  --fui-blue-dark-60: #2970FF;
+  --fui-blue-dark-70: #0256FF;
+  --fui-blue-dark-80: #0049DA;
+  --fui-blue-dark-90: #003CB4;
+  --fui-blue-dark-100: #002F8D;
+  --fui-blue-dark-110: #002266;
+  --fui-indigo-10: #F5F8FF;
+  --fui-indigo-20: #D6E0FE;
+  --fui-indigo-30: #B7C7FD;
+  --fui-indigo-40: #99ACFB;
+  --fui-indigo-50: #7D90F7;
+  --fui-indigo-60: #6172F3;
+  --fui-indigo-70: #4052E8;
+  --fui-indigo-80: #2436D8;
+  --fui-indigo-90: #2631AB;
+  --fui-indigo-100: #242B82;
+  --fui-indigo-110: #1F235B;
+  --fui-purple-10: #FAFAFF;
+  --fui-purple-20: #DAD9FF;
+  --fui-purple-30: #BEB8FE;
+  --fui-purple-40: #A598FC;
+  --fui-purple-50: #8E79FA;
+  --fui-purple-60: #7A5AF8;
+  --fui-purple-70: #5D33F0;
+  --fui-purple-80: #4717DF;
+  --fui-purple-90: #3F17AF;
+  --fui-purple-100: #341682;
+  --fui-purple-110: #271258;
+  --fui-fuchsia-10: #FEFAFF;
+  --fui-fuchsia-20: #F6D3FE;
+  --fui-fuchsia-30: #EEAEFD;
+  --fui-fuchsia-40: #E68AFA;
+  --fui-fuchsia-50: #DD66F6;
+  --fui-fuchsia-60: #D444F1;
+  --fui-fuchsia-70: #CB21E9;
+  --fui-fuchsia-80: #AE19C5;
+  --fui-fuchsia-90: #8C189B;
+  --fui-fuchsia-100: #691573;
+  --fui-fuchsia-110: #47104C;
+  --fui-pink-10: #FEF6FB;
+  --fui-pink-20: #FAD3EC;
+  --fui-pink-30: #F7B0DF;
+  --fui-pink-40: #F48DD2;
+  --fui-pink-50: #F16AC6;
+  --fui-pink-60: #EE46BC;
+  --fui-pink-70: #E721A6;
+  --fui-pink-80: #C41886;
+  --fui-pink-90: #9B1566;
+  --fui-pink-100: #731249;
+  --fui-pink-110: #4C0D2F;
+  --fui-rose-10: #FFF5F6;
+  --fui-rose-20: #FFCFD5;
+  --fui-rose-30: #FDA9B6;
+  --fui-rose-40: #FC859A;
+  --fui-rose-50: #F96080;
+  --fui-rose-60: #F63D68;
+  --fui-rose-70: #F0184F;
+  --fui-rose-80: #CD1046;
+  --fui-rose-90: #A2103D;
+  --fui-rose-100: #790E32;
+  --fui-rose-110: #510B24;
+  --fui-orange-dark-10: #FFF9F5;
+  --fui-orange-dark-20: #FFDAC5;
+  --fui-orange-dark-30: #FFB995;
+  --fui-orange-dark-40: #FF9565;
+  --fui-orange-dark-50: #FF6E35;
+  --fui-orange-dark-60: #FF4405;
+  --fui-orange-dark-70: #DE3605;
+  --fui-orange-dark-80: #BA2C08;
+  --fui-orange-dark-90: #97220A;
+  --fui-orange-dark-100: #751A0B;
+  --fui-orange-dark-110: #55130A;
+  --fui-orange-10: #FEFAF5;
+  --fui-orange-20: #FAE3CB;
+  --fui-orange-30: #F7CAA1;
+  --fui-orange-40: #F4AC77;
+  --fui-orange-50: #F18C4B;
+  --fui-orange-60: #EF6820;
+  --fui-orange-70: #D85314;
+  --fui-orange-80: #B54315;
+  --fui-orange-90: #923515;
+  --fui-orange-100: #722913;
+  --fui-orange-110: #521D10;
+  --fui-yellow-10: #FEFDF0;
+  --fui-yellow-20: #FBF5C0;
+  --fui-yellow-30: #F9E990;
+  --fui-yellow-40: #F8D95F;
+  --fui-yellow-50: #F7C62E;
+  --fui-yellow-60: #EAAA08;
+  --fui-yellow-70: #C9840A;
+  --fui-yellow-80: #A9640B;
+  --fui-yellow-90: #89490B;
+  --fui-yellow-100: #6B320B;
+  --fui-yellow-110: #4D2009;
+  --fui-alpha-0: #1A1A1A00;
+  --fui-alpha-20: #1A1A1A0F;
+  --fui-alpha-30: #1A1A1A1A;
+  --fui-alpha-40: #1A1A1A33;
+  --fui-alpha-50: #1A1A1A4D;
+  --fui-alpha-60: #1A1A1A66;
+  --fui-alpha-70: #1A1A1A80;
+  --fui-alpha-80: #1A1A1A99;
+  --fui-alpha-90: #1A1A1AB3;
+  --fui-alpha-100: #1A1A1AFF;
+  --fui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --fui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --fui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
+  --fui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --fui-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+  --fui-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
+  --fui-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  --fui-text-primary: var(--fui-neutral-110);
+  --fui-text-secondary: var(--fui-neutral-80);
+  --fui-text-disabled: var(--fui-neutral-60);
+  --fui-text-tertiary: var(--fui-neutral-70);
+  --fui-text-inverse: var(--fui-neutral-10);
+  --fui-text-link: var(--fui-primary-70);
+  --fui-text-link-hover: var(--fui-primary-80);
+  --fui-text-error: var(--fui-error-90);
+  --fui-text-success: var(--fui-success-90);
+  --fui-text-warning: var(--fui-warning-90);
+  --fui-text-info: var(--fui-info-90);
+  --fui-text-on-fill: #ffffff;
+  --fui-border-default: var(--fui-neutral-40);
+  --fui-border-strong: var(--fui-neutral-60);
+  --fui-border-primary: var(--fui-primary-60);
+  --fui-border-subtle: var(--fui-neutral-30);
+  --fui-border-disabled: var(--fui-neutral-30);
+  --fui-border-accent: var(--fui-accent-60);
+  --fui-border-error: var(--fui-error-40);
+  --fui-border-success: var(--fui-success-40);
+  --fui-border-warning: var(--fui-warning-40);
+  --fui-border-info: var(--fui-info-40);
+  --fui-bg-default: var(--fui-neutral-10);
+  --fui-bg-subtle: var(--fui-neutral-20);
+  --fui-bg-muted: var(--fui-neutral-30);
+  --fui-bg-inverse: var(--fui-neutral-110);
+  --fui-bg-primary: var(--fui-primary-10);
+  --fui-bg-error: var(--fui-error-20);
+  --fui-bg-success: var(--fui-success-20);
+  --fui-bg-warning: var(--fui-warning-20);
+  --fui-bg-info: var(--fui-info-20);
+  --fui-bg-disable: var(--fui-neutral-40);
+  --fui-fill-error: var(--fui-error-60);
+  --fui-fill-success: var(--fui-success-60);
+  --fui-fill-warning: var(--fui-warning-60);
+  --fui-fill-info: var(--fui-info-60);
+  --fui-fill-error-hover: var(--fui-error-70);
+  --fui-fill-success-hover: var(--fui-success-70);
+  --fui-fill-warning-hover: var(--fui-warning-70);
+  --fui-fill-info-hover: var(--fui-info-70);
+  --fui-primary-bg: var(--fui-primary-60);
+  --fui-primary-muted: var(--fui-primary-10);
+  --fui-primary-bg-hover: var(--fui-primary-70);
+  --fui-primary-bg-pressed: var(--fui-primary-80);
+  --fui-primary-bg-disabled: var(--fui-primary-30);
+  --fui-primary-bg-subtle: var(--fui-primary-20);
+  --fui-primary-fg: var(--fui-primary-70);
+  --fui-primary-fg-subtle: var(--fui-primary-80);
+  --fui-accent-bg: var(--fui-accent-60);
+  --fui-accent-hover: var(--fui-accent-80);
+  --fui-accent-pressed: var(--fui-accent-80);
+  --fui-accent-disabled: var(--fui-accent-30);
+  --fui-accent-subtle: var(--fui-accent-20);
+  --fui-accent-fg: var(--fui-accent-70);
+  --fui-accent-fg-subtle: var(--fui-accent-80);
+  --fui-state-focus-ring: var(--fui-primary-50);
+  --fui-state-selected-bg: var(--fui-primary-20);
+  --fui-state-selected-fg: var(--fui-primary-80);
+  --fui-state-overlay-hover: rgba(17, 21, 27, 0.06);
+  --fui-state-overlay-pressed: rgba(17, 21, 27, 0.12);
+  --fui-state-focus-ring-width: 2px;
+  --fui-state-focus-ring-offset: 2px;
+  --fui-state-disabled-opacity: 0.5;
+  --fui-field-bg: var(--fui-neutral-10);
+  --fui-field-bg-disabled: var(--fui-neutral-20);
+  --fui-field-border: var(--fui-neutral-40);
+  --fui-field-border-hover: var(--fui-neutral-60);
+  --fui-field-border-focus: var(--fui-primary-50);
+  --fui-field-border-error: var(--fui-error-60);
+  --fui-field-placeholder: var(--fui-neutral-70);
+  --fui-card-padding: var(--fui-spacing-7);
+  --fui-card-shadow: var(--fui-shadow-sm);
+  --fui-card-shadow-hover: var(--fui-shadow-lg);
+  --fui-card-border-radius: var(--fui-radius-xl);
+}
+
+@mixin fui-dark-theme {
+  --fui-primary-10: #100F17;
+  --fui-primary-20: #25223A;
+  --fui-primary-30: #383160;
+  --fui-primary-40: #4A3E89;
+  --fui-primary-50: #5B48B5;
+  --fui-primary-60: #7A68CB;
+  --fui-primary-70: #8876D4;
+  --fui-primary-80: #9685DC;
+  --fui-primary-90: #A494E3;
+  --fui-primary-100: #B3A4E9;
+  --fui-primary-110: #C2B5EF;
+  --fui-accent-10: #161018;
+  --fui-accent-20: #221726;
+  --fui-accent-30: #34213B;
+  --fui-accent-40: #4C2B59;
+  --fui-accent-50: #6C3582;
+  --fui-accent-60: #A34FC4;
+  --fui-accent-70: #B982CE;
+  --fui-accent-80: #CCAAD9;
+  --fui-accent-90: #DBCAE2;
+  --fui-accent-100: #E8E0EB;
+  --fui-accent-110: #F3F0F4;
+  --fui-neutral-10: #0C0F14;
+  --fui-neutral-20: #131923;
+  --fui-neutral-30: #1B2330;
+  --fui-neutral-40: #263041;
+  --fui-neutral-50: #364255;
+  --fui-neutral-60: #4D5B72;
+  --fui-neutral-70: #687891;
+  --fui-neutral-80: #8B9AB1;
+  --fui-neutral-90: #B0BCD0;
+  --fui-neutral-100: #D8DFEA;
+  --fui-neutral-110: #F4F7FB;
+  --fui-error-10: #55160C;
+  --fui-error-20: #841E10;
+  --fui-error-30: #B52412;
+  --fui-error-40: #E72612;
+  --fui-error-50: #F34839;
+  --fui-error-60: #F97066;
+  --fui-error-70: #FB8E83;
+  --fui-error-80: #FDABA0;
+  --fui-error-90: #FEC7BD;
+  --fui-error-100: #FFE2DB;
+  --fui-error-110: #FFFBFA;
+  --fui-success-10: #053321;
+  --fui-success-20: #0B5939;
+  --fui-success-30: #147C4E;
+  --fui-success-40: #1F9D63;
+  --fui-success-50: #2CBC76;
+  --fui-success-60: #47CD89;
+  --fui-success-70: #66DB9D;
+  --fui-success-80: #87E7B2;
+  --fui-success-90: #AAF1C8;
+  --fui-success-100: #CFF8DF;
+  --fui-success-110: #F6FEF9;
+  --fui-warning-10: #4E1D09;
+  --fui-warning-20: #74310B;
+  --fui-warning-30: #9C4A0B;
+  --fui-warning-40: #C5680A;
+  --fui-warning-50: #F08D07;
+  --fui-warning-60: #FDB022;
+  --fui-warning-70: #FEC14C;
+  --fui-warning-80: #FED176;
+  --fui-warning-90: #FFE0A0;
+  --fui-warning-100: #FFEFCA;
+  --fui-warning-110: #FFFCF5;
+  --fui-info-10: #102C60;
+  --fui-info-20: #12418B;
+  --fui-info-30: #1259B7;
+  --fui-info-40: #1075E7;
+  --fui-info-50: #2C94F7;
+  --fui-info-60: #53B1FD;
+  --fui-info-70: #73BBFE;
+  --fui-info-80: #93C8FE;
+  --fui-info-90: #B4D6FF;
+  --fui-info-100: #D4E7FF;
+  --fui-info-110: #F5F9FF;
+  --fui-pluvia-teal-10: #0A3733;
+  --fui-pluvia-teal-20: #105750;
+  --fui-pluvia-teal-30: #17776B;
+  --fui-pluvia-teal-40: #1E9686;
+  --fui-pluvia-teal-50: #25B59F;
+  --fui-pluvia-teal-60: #2ED3B7;
+  --fui-pluvia-teal-70: #53DEC5;
+  --fui-pluvia-teal-80: #7AE9D2;
+  --fui-pluvia-teal-90: #A2F1E0;
+  --fui-pluvia-teal-100: #CBF8EE;
+  --fui-pluvia-teal-110: #F6FEFC;
+  --fui-nimbus-blue-10: #040609;
+  --fui-nimbus-blue-20: #101824;
+  --fui-nimbus-blue-30: #1B2A3F;
+  --fui-nimbus-blue-40: #273C5A;
+  --fui-nimbus-blue-50: #324E75;
+  --fui-nimbus-blue-60: #3D6190;
+  --fui-nimbus-blue-70: #4879B6;
+  --fui-nimbus-blue-80: #6793C7;
+  --fui-nimbus-blue-90: #88ADD6;
+  --fui-nimbus-blue-100: #ABC7E4;
+  --fui-nimbus-blue-110: #CFE0F1;
+  --fui-gray-cool-10: #0B0F1E;
+  --fui-gray-cool-20: #1B2342;
+  --fui-gray-cool-30: #2D3963;
+  --fui-gray-cool-40: #425182;
+  --fui-gray-cool-50: #59699F;
+  --fui-gray-cool-60: #7D89AF;
+  --fui-gray-cool-70: #979FBE;
+  --fui-gray-cool-80: #B1B5CD;
+  --fui-gray-cool-90: #CACCDD;
+  --fui-gray-cool-100: #E3E4ED;
+  --fui-gray-cool-110: #FCFCFD;
+  --fui-gray-neutral-10: #0B101B;
+  --fui-gray-neutral-20: #1F2B41;
+  --fui-gray-neutral-30: #374764;
+  --fui-gray-neutral-40: #536583;
+  --fui-gray-neutral-50: #75849B;
+  --fui-gray-neutral-60: #9DA4AE;
+  --fui-gray-neutral-70: #AFB4BF;
+  --fui-gray-neutral-80: #C1C5D0;
+  --fui-gray-neutral-90: #D4D6E0;
+  --fui-gray-neutral-100: #E8E8EF;
+  --fui-gray-neutral-110: #FCFCFD;
+  --fui-gray-iron-10: #131316;
+  --fui-gray-iron-20: #2E2E35;
+  --fui-gray-iron-30: #494954;
+  --fui-gray-iron-40: #646473;
+  --fui-gray-iron-50: #818190;
+  --fui-gray-iron-60: #A0A0AB;
+  --fui-gray-iron-70: #B3B3BA;
+  --fui-gray-iron-80: #C6C6CA;
+  --fui-gray-iron-90: #D8D8DA;
+  --fui-gray-iron-100: #EAEAEB;
+  --fui-gray-iron-110: #FCFCFC;
+  --fui-gray-true-10: #0F0F0F;
+  --fui-gray-true-20: #2D2D2D;
+  --fui-gray-true-30: #4A4A4A;
+  --fui-gray-true-40: #686868;
+  --fui-gray-true-50: #858585;
+  --fui-gray-true-60: #A3A3A3;
+  --fui-gray-true-70: #B5B5B5;
+  --fui-gray-true-80: #C7C7C7;
+  --fui-gray-true-90: #D8D8D8;
+  --fui-gray-true-100: #EAEAEA;
+  --fui-gray-true-110: #FCFCFC;
+  --fui-moss-10: #1A280B;
+  --fui-moss-20: #304914;
+  --fui-moss-30: #456B1D;
+  --fui-moss-40: #5B8C26;
+  --fui-moss-50: #71AE2F;
+  --fui-moss-60: #86CB3C;
+  --fui-moss-70: #9DD561;
+  --fui-moss-80: #B4E086;
+  --fui-moss-90: #CBEAAC;
+  --fui-moss-100: #E2F3D1;
+  --fui-moss-110: #FAFDF7;
+  --fui-green-light-10: #15290A;
+  --fui-green-light-20: #295012;
+  --fui-green-light-30: #3E7719;
+  --fui-green-light-40: #54A01E;
+  --fui-green-light-50: #6BCA22;
+  --fui-green-light-60: #85E13A;
+  --fui-green-light-70: #9FE85E;
+  --fui-green-light-80: #B8EF83;
+  --fui-green-light-90: #CFF5A8;
+  --fui-green-light-100: #E5FACE;
+  --fui-green-light-110: #FAFEF5;
+  --fui-green-10: #053321;
+  --fui-green-20: #0A5737;
+  --fui-green-30: #117A4C;
+  --fui-green-40: #199B60;
+  --fui-green-50: #22BB72;
+  --fui-green-60: #32D583;
+  --fui-green-70: #57E097;
+  --fui-green-80: #7CE9AD;
+  --fui-green-90: #A4F2C5;
+  --fui-green-100: #CCF8DE;
+  --fui-green-110: #F6FEF9;
+  --fui-cyan-10: #0B3445;
+  --fui-cyan-20: #0F5068;
+  --fui-cyan-30: #116E8B;
+  --fui-cyan-40: #138EB0;
+  --fui-cyan-50: #14B1D6;
+  --fui-cyan-60: #22CCEE;
+  --fui-cyan-70: #4ADAF4;
+  --fui-cyan-80: #72E6F9;
+  --fui-cyan-90: #9DF0FC;
+  --fui-cyan-100: #C8F8FE;
+  --fui-cyan-110: #F5FEFF;
+  --fui-blue-10: #102C60;
+  --fui-blue-20: #12418B;
+  --fui-blue-30: #1259B7;
+  --fui-blue-40: #1075E7;
+  --fui-blue-50: #2C94F7;
+  --fui-blue-60: #53B1FD;
+  --fui-blue-70: #73BEFE;
+  --fui-blue-80: #93CCFE;
+  --fui-blue-90: #B4DBFF;
+  --fui-blue-100: #D4EAFF;
+  --fui-blue-110: #F5FAFF;
+  --fui-blue-dark-10: #002266;
+  --fui-blue-dark-20: #003295;
+  --fui-blue-dark-30: #0041C4;
+  --fui-blue-dark-40: #0050F3;
+  --fui-blue-dark-50: #236CFF;
+  --fui-blue-dark-60: #528BFF;
+  --fui-blue-dark-70: #73A0FF;
+  --fui-blue-dark-80: #93B5FF;
+  --fui-blue-dark-90: #B4CBFF;
+  --fui-blue-dark-100: #D4E1FF;
+  --fui-blue-dark-110: #F5F8FF;
+  --fui-indigo-10: #1F235B;
+  --fui-indigo-20: #252E88;
+  --fui-indigo-30: #2638BA;
+  --fui-indigo-40: #324CE1;
+  --fui-indigo-50: #5771EF;
+  --fui-indigo-60: #8098F9;
+  --fui-indigo-70: #97ADFB;
+  --fui-indigo-80: #ADC0FD;
+  --fui-indigo-90: #C5D4FE;
+  --fui-indigo-100: #DDE6FF;
+  --fui-indigo-110: #F5F8FF;
+  --fui-purple-10: #271258;
+  --fui-purple-20: #37178B;
+  --fui-purple-30: #4219C2;
+  --fui-purple-40: #5229EA;
+  --fui-purple-50: #7458F4;
+  --fui-purple-60: #9B8AFB;
+  --fui-purple-70: #ABA0FC;
+  --fui-purple-80: #BCB6FE;
+  --fui-purple-90: #CFCCFE;
+  --fui-purple-100: #E4E3FF;
+  --fui-purple-110: #FAFAFF;
+  --fui-fuchsia-10: #47104C;
+  --fui-fuchsia-20: #74167E;
+  --fui-fuchsia-30: #A118B3;
+  --fui-fuchsia-40: #CC1BE8;
+  --fui-fuchsia-50: #D948F3;
+  --fui-fuchsia-60: #E478FA;
+  --fui-fuchsia-70: #E991FC;
+  --fui-fuchsia-80: #EEABFD;
+  --fui-fuchsia-90: #F3C5FE;
+  --fui-fuchsia-100: #F9DFFF;
+  --fui-fuchsia-110: #FEFAFF;
+  --fui-pink-10: #4C0D2F;
+  --fui-pink-20: #7C124E;
+  --fui-pink-30: #AF166F;
+  --fui-pink-40: #E31893;
+  --fui-pink-50: #EF41AE;
+  --fui-pink-60: #F670C7;
+  --fui-pink-70: #F78CD1;
+  --fui-pink-80: #F8A7DB;
+  --fui-pink-90: #F9C2E5;
+  --fui-pink-100: #FBDCF0;
+  --fui-pink-110: #FEF6FB;
+  --fui-rose-10: #510B24;
+  --fui-rose-20: #840E35;
+  --fui-rose-30: #B91043;
+  --fui-rose-40: #F10E4C;
+  --fui-rose-50: #F83E6B;
+  --fui-rose-60: #FD6F8E;
+  --fui-rose-70: #FE8AA0;
+  --fui-rose-80: #FEA4B4;
+  --fui-rose-90: #FFBFC8;
+  --fui-rose-100: #FFDADE;
+  --fui-rose-110: #FFF5F6;
+  --fui-orange-dark-10: #55130A;
+  --fui-orange-dark-20: #7D1D0B;
+  --fui-orange-dark-30: #A6280B;
+  --fui-orange-dark-40: #D13509;
+  --fui-orange-dark-50: #FA460A;
+  --fui-orange-dark-60: #FF692E;
+  --fui-orange-dark-70: #FF8A56;
+  --fui-orange-dark-80: #FFA87E;
+  --fui-orange-dark-90: #FFC5A5;
+  --fui-orange-dark-100: #FFE0CD;
+  --fui-orange-dark-110: #FFF9F5;
+  --fui-orange-10: #521D10;
+  --fui-orange-20: #792C14;
+  --fui-orange-30: #A13C16;
+  --fui-orange-40: #CB4E17;
+  --fui-orange-50: #EB6721;
+  --fui-orange-60: #F38744;
+  --fui-orange-70: #F4A368;
+  --fui-orange-80: #F6BC8C;
+  --fui-orange-90: #F8D3B0;
+  --fui-orange-100: #FBE8D3;
+  --fui-orange-110: #FEFAF5;
+  --fui-yellow-10: #4D2009;
+  --fui-yellow-20: #70360B;
+  --fui-yellow-30: #95510B;
+  --fui-yellow-40: #BA730B;
+  --fui-yellow-50: #E19C09;
+  --fui-yellow-60: #FAC515;
+  --fui-yellow-70: #F9D542;
+  --fui-yellow-80: #F9E26F;
+  --fui-yellow-90: #FAED9B;
+  --fui-yellow-100: #FCF6C6;
+  --fui-yellow-110: #FEFDF0;
+  --fui-alpha-0: #FFFFFF00;
+  --fui-alpha-20: #FFFFFF0F;
+  --fui-alpha-30: #FFFFFF1A;
+  --fui-alpha-40: #FFFFFF33;
+  --fui-alpha-50: #FFFFFF4D;
+  --fui-alpha-60: #FFFFFF66;
+  --fui-alpha-70: #FFFFFF80;
+  --fui-alpha-80: #FFFFFF99;
+  --fui-alpha-90: #FFFFFFB3;
+  --fui-alpha-100: #FFFFFFFF;
+  --fui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --fui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --fui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --fui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.55), 0 4px 6px rgba(0, 0, 0, 0.35);
+  --fui-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.35);
+  --fui-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
+  --fui-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+  --fui-text-primary: var(--fui-neutral-110);
+  --fui-text-secondary: var(--fui-neutral-80);
+  --fui-text-disabled: var(--fui-neutral-60);
+  --fui-text-tertiary: var(--fui-neutral-70);
+  --fui-text-inverse: var(--fui-neutral-10);
+  --fui-text-link: var(--fui-primary-70);
+  --fui-text-link-hover: var(--fui-primary-80);
+  --fui-text-error: var(--fui-error-90);
+  --fui-text-success: var(--fui-success-90);
+  --fui-text-warning: var(--fui-warning-90);
+  --fui-text-info: var(--fui-info-90);
+  --fui-text-on-fill: #ffffff;
+  --fui-border-default: var(--fui-neutral-40);
+  --fui-border-strong: var(--fui-neutral-60);
+  --fui-border-primary: var(--fui-primary-60);
+  --fui-border-subtle: var(--fui-neutral-30);
+  --fui-border-disabled: var(--fui-neutral-30);
+  --fui-border-accent: var(--fui-accent-60);
+  --fui-border-error: var(--fui-error-40);
+  --fui-border-success: var(--fui-success-40);
+  --fui-border-warning: var(--fui-warning-40);
+  --fui-border-info: var(--fui-info-40);
+  --fui-bg-default: var(--fui-neutral-10);
+  --fui-bg-subtle: var(--fui-neutral-20);
+  --fui-bg-muted: var(--fui-neutral-30);
+  --fui-bg-inverse: var(--fui-neutral-110);
+  --fui-bg-primary: var(--fui-primary-10);
+  --fui-bg-error: var(--fui-error-20);
+  --fui-bg-success: var(--fui-success-20);
+  --fui-bg-warning: var(--fui-warning-20);
+  --fui-bg-info: var(--fui-info-20);
+  --fui-bg-disable: var(--fui-neutral-40);
+  --fui-fill-error: var(--fui-error-60);
+  --fui-fill-success: var(--fui-success-60);
+  --fui-fill-warning: var(--fui-warning-60);
+  --fui-fill-info: var(--fui-info-60);
+  --fui-fill-error-hover: var(--fui-error-70);
+  --fui-fill-success-hover: var(--fui-success-70);
+  --fui-fill-warning-hover: var(--fui-warning-70);
+  --fui-fill-info-hover: var(--fui-info-70);
+  --fui-primary-bg: var(--fui-primary-60);
+  --fui-primary-muted: var(--fui-primary-10);
+  --fui-primary-bg-hover: var(--fui-primary-70);
+  --fui-primary-bg-pressed: var(--fui-primary-80);
+  --fui-primary-bg-disabled: var(--fui-primary-30);
+  --fui-primary-bg-subtle: var(--fui-primary-20);
+  --fui-primary-fg: var(--fui-primary-70);
+  --fui-primary-fg-subtle: var(--fui-primary-80);
+  --fui-accent-bg: var(--fui-accent-60);
+  --fui-accent-hover: var(--fui-accent-80);
+  --fui-accent-pressed: var(--fui-accent-80);
+  --fui-accent-disabled: var(--fui-accent-30);
+  --fui-accent-subtle: var(--fui-accent-20);
+  --fui-accent-fg: var(--fui-accent-70);
+  --fui-accent-fg-subtle: var(--fui-accent-80);
+  --fui-state-focus-ring: var(--fui-primary-50);
+  --fui-state-selected-bg: var(--fui-primary-20);
+  --fui-state-selected-fg: var(--fui-primary-80);
+  --fui-state-overlay-hover: rgba(244, 247, 251, 0.08);
+  --fui-state-overlay-pressed: rgba(244, 247, 251, 0.16);
+  --fui-state-focus-ring-width: 2px;
+  --fui-state-focus-ring-offset: 2px;
+  --fui-state-disabled-opacity: 0.5;
+  --fui-field-bg: var(--fui-neutral-10);
+  --fui-field-bg-disabled: var(--fui-neutral-20);
+  --fui-field-border: var(--fui-neutral-40);
+  --fui-field-border-hover: var(--fui-neutral-60);
+  --fui-field-border-focus: var(--fui-primary-60);
+  --fui-field-border-error: var(--fui-error-60);
+  --fui-field-placeholder: var(--fui-neutral-70);
+  --fui-card-padding: var(--fui-spacing-9);
+  --fui-card-shadow: var(--fui-shadow-sm);
+  --fui-card-shadow-hover: var(--fui-shadow-lg);
+  --fui-card-border-radius: var(--fui-radius-md);
+}