@raintonic/formaui 0.3.1 → 0.9.0

package/styles/partials/themes/_dark.scss

@@ -1,268 +1,3 @@
-// Dark theme color tokens
-@use '../constants' as *;
-
-@mixin fui-dark-theme {
-  // Primary violet colors (Figma: Violet palette — dark)
-  --fui-primary-10: #0e0b13;
-  --fui-primary-20: #17131f;
-  --fui-primary-30: #251e32;
-  --fui-primary-40: #352752;
-  --fui-primary-50: #875ddf;
-  --fui-primary-60: #a07fe5;
-  --fui-primary-70: #beafde;
-  --fui-primary-80: #d3c8e8;
-  --fui-primary-90: #e5e0ef;
-  --fui-primary-100: #f0eef6;
-  --fui-primary-110: #f9f8fb;
-  --fui-primary: var(--fui-primary-50);
-  --fui-primary-rgb: 135, 93, 223;
-  --fui-primary-text-color: white;
-  --fui-primary-text: white;
-
-  // Secondary slate colors (Figma: Slate palette — dark)
-  --fui-secondary-10: #121113;
-  --fui-secondary-20: #1a191b;
-  --fui-secondary-30: #232225;
-  --fui-secondary-40: #2b292d;
-  --fui-secondary-50: #323035;
-  --fui-secondary-60: #3c393f;
-  --fui-secondary-70: #49474e;
-  --fui-secondary-80: #625f69;
-  --fui-secondary-90: #6f6d78;
-  --fui-secondary-100: #7c7a85;
-  --fui-secondary-110: #b5b2bc;
-  --fui-secondary-120: #eeeef0;
-  --fui-secondary: var(--fui-secondary-60);
-
-  // Danger color palette (Figma: Red-Danger — dark)
-  --fui-danger-10: #191111;
-  --fui-danger-20: #201314;
-  --fui-danger-30: #3b1219;
-  --fui-danger-40: #500f1c;
-  --fui-danger-50: #611623;
-  --fui-danger-60: #72232d;
-  --fui-danger-70: #8c333a;
-  --fui-danger-80: #b54548;
-  --fui-danger-90: #e5484d;
-  --fui-danger-100: #ff9592;
-  --fui-danger-110: #ffd1d9;
-  --fui-danger: var(--fui-danger-60);
-
-  // Success color palette (Figma: Green-success — dark)
-  --fui-success-10: #0d1512;
-  --fui-success-20: #121c18;
-  --fui-success-30: #0f2e22;
-  --fui-success-40: #0b3b2c;
-  --fui-success-50: #114837;
-  --fui-success-60: #1b5745;
-  --fui-success-70: #246854;
-  --fui-success-80: #2a7e68;
-  --fui-success-90: #29a383;
-  --fui-success-100: #1fd8a4;
-  --fui-success-110: #adf0d4;
-  --fui-success: var(--fui-success-60);
-
-  // Warning color palette (Figma: Yellow-warning — dark)
-  --fui-warning-10: #16120c;
-  --fui-warning-20: #1c1812;
-  --fui-warning-30: #302008;
-  --fui-warning-40: #3e2700;
-  --fui-warning-50: #4c3000;
-  --fui-warning-60: #5b3d06;
-  --fui-warning-70: #704f1a;
-  --fui-warning-80: #8f6424;
-  --fui-warning-90: #ffc53d;
-  --fui-warning-100: #ffd60a;
-  --fui-warning-110: #ffe7b3;
-  --fui-warning: var(--fui-warning-60);
-
-  // Info color palette (Figma: Blue-info — dark)
-  --fui-info-10: #0d1520;
-  --fui-info-20: #111927;
-  --fui-info-30: #0d2847;
-  --fui-info-40: #003362;
-  --fui-info-50: #004074;
-  --fui-info-60: #104d87;
-  --fui-info-70: #205d9e;
-  --fui-info-80: #2870bd;
-  --fui-info-90: #0090ff;
-  --fui-info-100: #70b8ff;
-  --fui-info-110: #c2e6ff;
-  --fui-info: var(--fui-info-60);
-
-  // Pink color palette (NEW — Figma: Pink — dark)
-  --fui-pink-10: #191117;
-  --fui-pink-20: #21121d;
-  --fui-pink-30: #37172f;
-  --fui-pink-40: #4b143d;
-  --fui-pink-50: #591c47;
-  --fui-pink-60: #692955;
-  --fui-pink-70: #833869;
-  --fui-pink-80: #a84885;
-  --fui-pink-90: #d6409f;
-  --fui-pink-100: #ff8dcc;
-  --fui-pink-110: #fdd1ea;
-
-  // Orange color palette (NEW — Figma: Orange — dark)
-  --fui-orange-10: #17120e;
-  --fui-orange-20: #1c1712;
-  --fui-orange-30: #331e0b;
-  --fui-orange-40: #462000;
-  --fui-orange-50: #562800;
-  --fui-orange-60: #66350e;
-  --fui-orange-70: #7e451e;
-  --fui-orange-80: #a35829;
-  --fui-orange-90: #f76b15;
-  --fui-orange-100: #ffa057;
-  --fui-orange-110: #ffe0c2;
-
-  // Tomato color palette (NEW — Figma: Tomato — dark)
-  --fui-tomato-10: #181111;
-  --fui-tomato-20: #1f1513;
-  --fui-tomato-30: #391714;
-  --fui-tomato-40: #4e1511;
-  --fui-tomato-50: #5e1c16;
-  --fui-tomato-60: #6e2920;
-  --fui-tomato-70: #853a2d;
-  --fui-tomato-80: #ac4d39;
-  --fui-tomato-90: #e54d2e;
-  --fui-tomato-100: #ec6142;
-  --fui-tomato-110: #ff977d;
-  --fui-tomato-120: #fbd3cb;
-
-  // Base colors (inverted for dark theme)
-  --fui-white: #000000;
-  --fui-black: #ffffff;
-
-  // Black opacity variants (inverted: white with alpha for dark theme)
-  --fui-black-5: rgba(255, 255, 255, 0.05);
-  --fui-black-10: rgba(255, 255, 255, 0.1);
-  --fui-black-15: rgba(255, 255, 255, 0.15);
-  --fui-black-20: rgba(255, 255, 255, 0.2);
-  --fui-black-30: rgba(255, 255, 255, 0.3);
-  --fui-black-40: rgba(255, 255, 255, 0.4);
-  --fui-black-50: rgba(255, 255, 255, 0.5);
-  --fui-black-60: rgba(255, 255, 255, 0.6);
-  --fui-black-70: rgba(255, 255, 255, 0.7);
-  --fui-black-80: rgba(255, 255, 255, 0.8);
-  --fui-black-90: rgba(255, 255, 255, 0.9);
-
-  // White opacity variants (inverted: black with alpha for dark theme)
-  --fui-white-5: rgba(0, 0, 0, 0.05);
-  --fui-white-10: rgba(0, 0, 0, 0.1);
-  --fui-white-15: rgba(0, 0, 0, 0.15);
-  --fui-white-20: rgba(0, 0, 0, 0.2);
-  --fui-white-30: rgba(0, 0, 0, 0.3);
-  --fui-white-40: rgba(0, 0, 0, 0.4);
-  --fui-white-50: rgba(0, 0, 0, 0.5);
-  --fui-white-60: rgba(0, 0, 0, 0.6);
-  --fui-white-70: rgba(0, 0, 0, 0.7);
-  --fui-white-80: rgba(0, 0, 0, 0.8);
-  --fui-white-90: rgba(0, 0, 0, 0.9);
-
-  // Text disabled
-  --fui-text-disabled: var(--fui-secondary-100);
-
-  // Border color
-  --fui-border-color: var(--fui-secondary-50);
-
-  // Surface tokens (Figma: forma-surface)
-  --fui-surface-bg: var(--fui-secondary-20);
-  --fui-surface-card: var(--fui-white);
-  --fui-surface-01: var(--fui-secondary-10);
-  --fui-surface-02: var(--fui-secondary-20);
-  --fui-surface-03: var(--fui-secondary-30);
-  --fui-surface-04: var(--fui-secondary-40);
-
-  // Backward-compatible surface aliases
-  --fui-surface-00: var(--fui-surface-card);
-  --fui-bg: var(--fui-surface-bg);
-  --fui-surface-05: var(--fui-secondary-50);
-
-  // Text colors
-  --fui-text-primary: var(--fui-secondary-120);
-  --fui-text-secondary: var(--fui-secondary-110);
-
-  // Primary component states (Figma: forma-primary semantic)
-  --fui-primary-default: var(--fui-primary-50);
-  --fui-primary-disable: var(--fui-primary-40);
-  --fui-primary-bg: var(--fui-primary-20);
-  --fui-primary-hover: var(--fui-primary-60);
-  --fui-primary-highlights: var(--fui-primary-30);
-
-  // Secondary component states (Figma: forma-secondary semantic)
-  --fui-secondary-default: var(--fui-secondary-60);
-  --fui-secondary-hover: var(--fui-secondary-90);
-  --fui-secondary-disable: var(--fui-secondary-30);
-  --fui-secondary-bg: var(--fui-secondary-20);
-  --fui-secondary-highlights: var(--fui-secondary-20);
-
-  // State colors - Error
-  --fui-state-error: var(--fui-danger-90);
-  --fui-state-error-bg: var(--fui-danger-30);
-  --fui-state-error-hover: var(--fui-danger-110);
-
-  // Destructive component states (button v2 — button only, not to be confused with
-  // state-error which is used by form fields / alerts / badges)
-  --fui-destructive-default: var(--fui-danger-90);
-  --fui-destructive-hover: var(--fui-danger-100);
-  --fui-destructive-text: white;
-
-  // Tertiary (neutral) component states
-  --fui-tertiary-text: var(--fui-text-primary);
-  --fui-tertiary-hover-bg: var(--fui-surface-03);
-
-  // Tertiary-violet component states
-  --fui-tertiary-violet-text: var(--fui-primary);
-  --fui-tertiary-violet-hover-bg: var(--fui-primary-bg);
-
-  // State colors - Success
-  --fui-state-success: var(--fui-success-110);
-  --fui-state-success-bg: var(--fui-success-30);
-  --fui-state-success-hover: var(--fui-success-110);
-
-  // State colors - Warning
-  --fui-state-warning: var(--fui-warning-110);
-  --fui-state-warning-bg: var(--fui-warning-30);
-  --fui-state-warning-hover: var(--fui-warning-110);
-
-  // State colors - Info
-  --fui-state-info: var(--fui-info-110);
-  --fui-state-info-bg: var(--fui-info-30);
-  --fui-state-info-hover: var(--fui-info-110);
-
-  // Border - strong variant (for hover emphasis)
-  --fui-border-color-strong: var(--fui-secondary-70);
-
-  // Border - active variant (for focus/active states)
-  --fui-border-color-active: var(--fui-primary-default);
-
-  // Form field semantic colors
-  --fui-field-background: var(--fui-surface-00);
-  --fui-field-background-hover: var(--fui-surface-01);
-  --fui-field-background-disabled: var(--fui-surface-02);
-  --fui-field-border-focus: var(--fui-primary-50);
-  --fui-field-border-error: var(--fui-state-error);
-
-  // Icon semantic colors
-  --fui-icon-primary: var(--fui-text-primary);
-  --fui-icon-secondary: var(--fui-text-secondary);
-  --fui-icon-tertiary: var(--fui-secondary-80);
-  --fui-icon-on-color-disabled: var(--fui-text-disabled);
-
-  // Background semantic aliases
-  --fui-background-primary: var(--fui-surface-00);
-  --fui-background-hover: var(--fui-surface-02);
-
-  // Text semantic aliases
-  --fui-text-primary-disabled: var(--fui-text-disabled);
-
-  // Error shorthand
-  --fui-error: var(--fui-state-error);
-
-  // Card component tokens
-  --fui-card-padding: var(--fui-spacing-06);
-  --fui-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
-  --fui-card-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
-  --fui-card-border-radius: var(--fui-border-radius-md);
-}
+// LEGACY ENTRY POINT — kept for backward compat.
+// All values now live in tokens/*.json (managed by Style Dictionary).
+@forward '../../generated/tokens' show fui-dark-theme;

package/styles/partials/themes/_light.scss

@@ -1,268 +1,4 @@
-// Light theme color tokens
-@use '../constants' as *;
-
-@mixin fui-light-theme {
-  // Primary violet colors (Figma: Violet palette)
-  --fui-primary-10: #fdfaff;
-  --fui-primary-20: #f9f5ff;
-  --fui-primary-30: #f1ebff;
-  --fui-primary-40: #e4d4ff;
-  --fui-primary-50: #7c4be0;
-  --fui-primary-60: #6833c8;
-  --fui-primary-70: #5522af;
-  --fui-primary-80: #421a8c;
-  --fui-primary-90: #2e1266;
-  --fui-primary-100: #1a0b3d;
-  --fui-primary-110: #120923;
-  --fui-primary: var(--fui-primary-50);
-  --fui-primary-rgb: 124, 75, 224;
-  --fui-primary-text-color: white;
-  --fui-primary-text: white;
-
-  // Secondary slate colors (Figma: Slate palette)
-  --fui-secondary-10: #fbfcfe;
-  --fui-secondary-20: #f8f9fd;
-  --fui-secondary-30: #eeeff5;
-  --fui-secondary-40: #e6e7ed;
-  --fui-secondary-50: #dfe0e6;
-  --fui-secondary-60: #d7d8de;
-  --fui-secondary-70: #ccced3;
-  --fui-secondary-80: #b9bbc0;
-  --fui-secondary-90: #8c8d92;
-  --fui-secondary-100: #818288;
-  --fui-secondary-110: #636469;
-  --fui-secondary-120: #1f2024;
-  --fui-secondary: var(--fui-secondary-60);
-
-  // Danger color palette (Figma: Red-Danger — unchanged)
-  --fui-danger-10: #fffcfc;
-  --fui-danger-20: #fff7f7;
-  --fui-danger-30: #feebec;
-  --fui-danger-40: #ffdbdc;
-  --fui-danger-50: #ffcdce;
-  --fui-danger-60: #fdbdbe;
-  --fui-danger-70: #f4a9aa;
-  --fui-danger-80: #eb8e90;
-  --fui-danger-90: #e5484d;
-  --fui-danger-100: #ce2c31;
-  --fui-danger-110: #821e2e;
-  --fui-danger: var(--fui-danger-60);
-
-  // Success color palette (Figma: Green-success — unchanged)
-  --fui-success-10: #fbfefd;
-  --fui-success-20: #f4fbf7;
-  --fui-success-30: #e6f7ed;
-  --fui-success-40: #d6f1e3;
-  --fui-success-50: #c3e9d7;
-  --fui-success-60: #acdec8;
-  --fui-success-70: #8bceb6;
-  --fui-success-80: #56ba9f;
-  --fui-success-90: #29a383;
-  --fui-success-100: #208368;
-  --fui-success-110: #1d3b31;
-  --fui-success: var(--fui-success-60);
-
-  // Warning color palette (Figma: Yellow-warning — unchanged)
-  --fui-warning-10: #fefdfb;
-  --fui-warning-20: #fefbe9;
-  --fui-warning-30: #fff7c2;
-  --fui-warning-40: #ffee9c;
-  --fui-warning-50: #fbe577;
-  --fui-warning-60: #f3d673;
-  --fui-warning-70: #e9c162;
-  --fui-warning-80: #ffc53d;
-  --fui-warning-90: #e2a336;
-  --fui-warning-100: #ab6400;
-  --fui-warning-110: #4f3422;
-  --fui-warning: var(--fui-warning-60);
-
-  // Info color palette (Figma: Blue-info — unchanged)
-  --fui-info-10: #fbfdff;
-  --fui-info-20: #f4faff;
-  --fui-info-30: #e6f4fe;
-  --fui-info-40: #d5efff;
-  --fui-info-50: #c2e5ff;
-  --fui-info-60: #acd8fc;
-  --fui-info-70: #8ec8f6;
-  --fui-info-80: #5eb1ef;
-  --fui-info-90: #0090ff;
-  --fui-info-100: #0d74ce;
-  --fui-info-110: #113264;
-  --fui-info: var(--fui-info-60);
-
-  // Pink color palette (NEW — Figma: Pink)
-  --fui-pink-10: #fffcfe;
-  --fui-pink-20: #fef7fb;
-  --fui-pink-30: #fee9f5;
-  --fui-pink-40: #fbdcef;
-  --fui-pink-50: #f6cee7;
-  --fui-pink-60: #efbfdd;
-  --fui-pink-70: #e7acd0;
-  --fui-pink-80: #dd93c2;
-  --fui-pink-90: #d6409f;
-  --fui-pink-100: #c2298a;
-  --fui-pink-110: #651249;
-
-  // Orange color palette (NEW — Figma: Orange)
-  --fui-orange-10: #fefcfb;
-  --fui-orange-20: #fff7ed;
-  --fui-orange-30: #ffefd6;
-  --fui-orange-40: #ffdfb5;
-  --fui-orange-50: #ffd19a;
-  --fui-orange-60: #ffc182;
-  --fui-orange-70: #f5ae73;
-  --fui-orange-80: #ec9455;
-  --fui-orange-90: #f76b15;
-  --fui-orange-100: #cc4e00;
-  --fui-orange-110: #582d1d;
-
-  // Tomato color palette (NEW — Figma: Tomato)
-  --fui-tomato-10: #fffcfc;
-  --fui-tomato-20: #fff8f7;
-  --fui-tomato-30: #feebe7;
-  --fui-tomato-40: #ffdcd3;
-  --fui-tomato-50: #ffcdc2;
-  --fui-tomato-60: #fdbdaf;
-  --fui-tomato-70: #f5a898;
-  --fui-tomato-80: #ec8e7b;
-  --fui-tomato-90: #e54d2e;
-  --fui-tomato-100: #dd4425;
-  --fui-tomato-110: #d13415;
-  --fui-tomato-120: #5c271f;
-
-  // Base colors
-  --fui-white: #ffffff;
-  --fui-black: #000000;
-
-  // Black opacity variants
-  --fui-black-5: rgba(0, 0, 0, 0.05);
-  --fui-black-10: rgba(0, 0, 0, 0.1);
-  --fui-black-15: rgba(0, 0, 0, 0.15);
-  --fui-black-20: rgba(0, 0, 0, 0.2);
-  --fui-black-30: rgba(0, 0, 0, 0.3);
-  --fui-black-40: rgba(0, 0, 0, 0.4);
-  --fui-black-50: rgba(0, 0, 0, 0.5);
-  --fui-black-60: rgba(0, 0, 0, 0.6);
-  --fui-black-70: rgba(0, 0, 0, 0.7);
-  --fui-black-80: rgba(0, 0, 0, 0.8);
-  --fui-black-90: rgba(0, 0, 0, 0.9);
-
-  // White opacity variants
-  --fui-white-5: rgba(255, 255, 255, 0.05);
-  --fui-white-10: rgba(255, 255, 255, 0.1);
-  --fui-white-15: rgba(255, 255, 255, 0.15);
-  --fui-white-20: rgba(255, 255, 255, 0.2);
-  --fui-white-30: rgba(255, 255, 255, 0.3);
-  --fui-white-40: rgba(255, 255, 255, 0.4);
-  --fui-white-50: rgba(255, 255, 255, 0.5);
-  --fui-white-60: rgba(255, 255, 255, 0.6);
-  --fui-white-70: rgba(255, 255, 255, 0.7);
-  --fui-white-80: rgba(255, 255, 255, 0.8);
-  --fui-white-90: rgba(255, 255, 255, 0.9);
-
-  // Text disabled
-  --fui-text-disabled: var(--fui-secondary-100);
-
-  // Border color
-  --fui-border-color: var(--fui-secondary-50);
-
-  // Surface tokens (Figma: forma-surface)
-  --fui-surface-bg: var(--fui-secondary-20);
-  --fui-surface-card: var(--fui-white);
-  --fui-surface-01: var(--fui-secondary-10);
-  --fui-surface-02: var(--fui-secondary-20);
-  --fui-surface-03: var(--fui-secondary-30);
-  --fui-surface-04: var(--fui-secondary-40);
-
-  // Backward-compatible surface aliases
-  --fui-surface-00: var(--fui-surface-card);
-  --fui-bg: var(--fui-surface-bg);
-  --fui-surface-05: var(--fui-secondary-50);
-
-  // Text colors
-  --fui-text-primary: var(--fui-secondary-120);
-  --fui-text-secondary: var(--fui-secondary-110);
-
-  // Primary component states (Figma: forma-primary semantic)
-  --fui-primary-default: var(--fui-primary-50);
-  --fui-primary-disable: var(--fui-primary-40);
-  --fui-primary-bg: var(--fui-primary-20);
-  --fui-primary-hover: var(--fui-primary-60);
-  --fui-primary-highlights: var(--fui-primary-30);
-
-  // Secondary component states (Figma: forma-secondary semantic)
-  --fui-secondary-default: var(--fui-secondary-60);
-  --fui-secondary-hover: var(--fui-secondary-90);
-  --fui-secondary-disable: var(--fui-secondary-30);
-  --fui-secondary-bg: var(--fui-secondary-20);
-  --fui-secondary-highlights: var(--fui-secondary-20);
-
-  // State colors - Error (Figma: forma-state)
-  --fui-state-error: var(--fui-danger-90);
-  --fui-state-error-bg: var(--fui-danger-30);
-  --fui-state-error-hover: var(--fui-danger-110);
-
-  // Destructive component states (button v2 — button only, not to be confused with
-  // state-error which is used by form fields / alerts / badges)
-  --fui-destructive-default: var(--fui-danger-90);
-  --fui-destructive-hover: var(--fui-danger-100);
-  --fui-destructive-text: white;
-
-  // Tertiary (neutral) component states
-  --fui-tertiary-text: var(--fui-text-primary);
-  --fui-tertiary-hover-bg: var(--fui-surface-03);
-
-  // Tertiary-violet component states
-  --fui-tertiary-violet-text: var(--fui-primary);
-  --fui-tertiary-violet-hover-bg: var(--fui-primary-bg);
-
-  // State colors - Success
-  --fui-state-success: var(--fui-success-110);
-  --fui-state-success-bg: var(--fui-success-30);
-  --fui-state-success-hover: var(--fui-success-110);
-
-  // State colors - Warning
-  --fui-state-warning: var(--fui-warning-110);
-  --fui-state-warning-bg: var(--fui-warning-30);
-  --fui-state-warning-hover: var(--fui-warning-110);
-
-  // State colors - Info
-  --fui-state-info: var(--fui-info-110);
-  --fui-state-info-bg: var(--fui-info-30);
-  --fui-state-info-hover: var(--fui-info-110);
-
-  // Border - strong variant (for hover emphasis)
-  --fui-border-color-strong: var(--fui-secondary-70);
-
-  // Border - active variant (for focus/active states)
-  --fui-border-color-active: var(--fui-primary-default);
-
-  // Form field semantic colors
-  --fui-field-background: var(--fui-surface-00);
-  --fui-field-background-hover: var(--fui-surface-01);
-  --fui-field-background-disabled: var(--fui-surface-02);
-  --fui-field-border-focus: var(--fui-primary-50);
-  --fui-field-border-error: var(--fui-state-error);
-
-  // Icon semantic colors
-  --fui-icon-primary: var(--fui-text-primary);
-  --fui-icon-secondary: var(--fui-text-secondary);
-  --fui-icon-tertiary: var(--fui-secondary-90);
-  --fui-icon-on-color-disabled: var(--fui-text-disabled);
-
-  // Background semantic aliases
-  --fui-background-primary: var(--fui-surface-00);
-  --fui-background-hover: var(--fui-surface-02);
-
-  // Text semantic aliases
-  --fui-text-primary-disabled: var(--fui-text-disabled);
-
-  // Error shorthand
-  --fui-error: var(--fui-state-error);
-
-  // Card component tokens
-  --fui-card-padding: var(--fui-spacing-06);
-  --fui-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  --fui-card-shadow-hover: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
-  --fui-card-border-radius: var(--fui-border-radius-md);
-}
+// LEGACY ENTRY POINT — kept for backward compat.
+// All values now live in tokens/*.json (managed by Style Dictionary).
+// This file is a pass-through; do not add token declarations here.
+@forward '../../generated/tokens' show fui-light-theme;