cps-ui-kit 20.5.0 → 21.0.0

package/styles/_colors-dark.scss

@@ -1,448 +0,0 @@
-// Dark theme color palette
-// Using color theory: warm reds with cool teal/cyan complements
-// Cool blue-gray backgrounds provide temperature balance with warm red accents
-
-[data-theme='dark'] {
-  // Main brand colors - slightly desaturated and lighter for dark backgrounds
-  --cps-color-energy: #f47721;
-  --cps-color-energy-highlighten: #faece5;
-  --cps-color-energy-lighten5: #ffff9f;
-  --cps-color-energy-lighten4: #ffe883;
-  --cps-color-energy-lighten3: #ffcb68;
-  --cps-color-energy-lighten2: #ffaf4d;
-  --cps-color-energy-lighten1: #ff9331;
-  --cps-color-energy-darken1: #de5d00;
-  --cps-color-energy-darken2: #be4300;
-  --cps-color-energy-darken3: #9f2800;
-  --cps-color-energy-darken4: #820100;
-
-  --cps-color-prepared: #fa551e;
-  --cps-color-prepared-highlighten: #f9e9e5;
-  --cps-color-prepared-lighten5: #ffe4a1;
-  --cps-color-prepared-lighten4: #ffc786;
-  --cps-color-prepared-lighten3: #ffaa6c;
-  --cps-color-prepared-lighten2: #ff8e52;
-  --cps-color-prepared-lighten1: #ff7138;
-  --cps-color-prepared-darken1: #d93700;
-  --cps-color-prepared-darken2: #b91000;
-  --cps-color-prepared-darken3: #990000;
-  --cps-color-prepared-darken4: #7c0000;
-
-  --cps-color-agile: #f52d28;
-  --cps-color-agile-highlighten: #f9e6e6;
-  --cps-color-agile-lighten5: #ffc8a6;
-  --cps-color-agile-lighten4: #ffaa8b;
-  --cps-color-agile-lighten3: #ff8d71;
-  --cps-color-agile-lighten2: #ff6f58;
-  --cps-color-agile-lighten1: #ff5040;
-  --cps-color-agile-darken1: #d40010;
-  --cps-color-agile-darken2: #b30000;
-  --cps-color-agile-darken3: #930000;
-  --cps-color-agile-darken4: #760000;
-
-  --cps-color-passion: #dc0032;
-  --cps-color-passion-highlighten: #f7e3e7;
-  --cps-color-passion-lighten5: #ffb3ae;
-  --cps-color-passion-lighten4: #ff9693;
-  --cps-color-passion-lighten3: #ff7879;
-  --cps-color-passion-lighten2: #ff5a61;
-  --cps-color-passion-lighten1: #fd3849;
-  --cps-color-passion-darken1: #bc001d;
-  --cps-color-passion-darken2: #9b0007;
-  --cps-color-passion-darken3: #7d0000;
-  --cps-color-passion-darken4: #600000;
-
-  --cps-color-warmth: #be0028;
-  --cps-color-warmth-highlighten: #f3e3e6;
-  --cps-color-warmth-lighten5: #ffa9a2;
-  --cps-color-warmth-lighten4: #ff8d87;
-  --cps-color-warmth-lighten3: #ff706e;
-  --cps-color-warmth-lighten2: #fe5255;
-  --cps-color-warmth-lighten1: #de333e;
-  --cps-color-warmth-darken1: #9e0013;
-  --cps-color-warmth-darken2: #800000;
-  --cps-color-warmth-darken3: #630000;
-  --cps-color-warmth-darken4: #4b0000;
-
-  --cps-color-human: #aa052d;
-  --cps-color-human-highlighten: #f1e3e6;
-  --cps-color-human-lighten5: #ffa4a7;
-  --cps-color-human-lighten4: #ff888d;
-  --cps-color-human-lighten3: #ff6c73;
-  --cps-color-human-lighten2: #e84f5a;
-  --cps-color-human-lighten1: #c93143;
-  --cps-color-human-darken1: #8b0019;
-  --cps-color-human-darken2: #6d0000;
-  --cps-color-human-darken3: #520000;
-  --cps-color-human-darken4: #400000;
-
-  --cps-color-grounded: #960528;
-  --cps-color-grounded-highlighten: #f0e3e6;
-  --cps-color-grounded-lighten5: #ff9ea1;
-  --cps-color-grounded-lighten4: #ff8286;
-  --cps-color-grounded-lighten3: #f2666d;
-  --cps-color-grounded-lighten2: #d34b55;
-  --cps-color-grounded-lighten1: #b42e3e;
-  --cps-color-grounded-darken1: #780014;
-  --cps-color-grounded-darken2: #5c0000;
-  --cps-color-grounded-darken3: #440000;
-  --cps-color-grounded-darken4: #390000;
-
-  --cps-color-care: #f05a78;
-  --cps-color-care-highlighten: #f8e9ed;
-  --cps-color-care-lighten5: #ffe9ff;
-  --cps-color-care-lighten4: #ffcce9;
-  --cps-color-care-lighten3: #ffafcd;
-  --cps-color-care-lighten2: #ff93b1;
-  --cps-color-care-lighten1: #ff7697;
-  --cps-color-care-darken1: #d13d64;
-  --cps-color-care-darken2: #b31a4c;
-  --cps-color-care-darken3: #950036;
-  --cps-color-care-darken4: #770021;
-
-  --cps-color-smile: #f0325a;
-  --cps-color-smile-highlighten: #f8e7e9;
-  --cps-color-smile-lighten5: #ffcbdd;
-  --cps-color-smile-lighten4: #ffadc1;
-  --cps-color-smile-lighten3: #ff90a6;
-  --cps-color-smile-lighten2: #ff728c;
-  --cps-color-smile-lighten1: #ff5472;
-  --cps-color-smile-darken1: #d00043;
-  --cps-color-smile-darken2: #b0002d;
-  --cps-color-smile-darken3: #910019;
-  --cps-color-smile-darken4: #720000;
-
-  --cps-color-surprise: #af144b;
-  --cps-color-surprise-highlighten: #f2e4e9;
-  --cps-color-surprise-lighten5: #ffaccb;
-  --cps-color-surprise-lighten4: #ff8fb0;
-  --cps-color-surprise-lighten3: #ff7395;
-  --cps-color-surprise-lighten2: #ec577b;
-  --cps-color-surprise-lighten1: #cd3963;
-  --cps-color-surprise-darken1: #910035;
-  --cps-color-surprise-darken2: #730020;
-  --cps-color-surprise-darken3: #560008;
-  --cps-color-surprise-darken4: #400000;
-
-  --cps-color-calm: #870a3c;
-  --cps-color-calm-highlighten: #efe4e7;
-  --cps-color-calm-lighten5: #ff9bb9;
-  --cps-color-calm-lighten4: #fd809e;
-  --cps-color-calm-lighten3: #df6584;
-  --cps-color-calm-lighten2: #c14a6b;
-  --cps-color-calm-lighten1: #a42e53;
-  --cps-color-calm-darken1: #6b0027;
-  --cps-color-calm-darken2: #4f0012;
-  --cps-color-calm-darken3: #390000;
-  --cps-color-calm-darken4: #300000;
-
-  --cps-color-luxury: #640032;
-  --cps-color-luxury-highlighten: #ebe3e6;
-  --cps-color-luxury-lighten5: #f28bad;
-  --cps-color-luxury-lighten4: #d57192;
-  --cps-color-luxury-lighten3: #b85779;
-  --cps-color-luxury-lighten2: #9b3d60;
-  --cps-color-luxury-lighten1: #7f2248;
-  --cps-color-luxury-darken1: #49001d;
-  --cps-color-luxury-darken2: #340002;
-  --cps-color-luxury-darken3: #290000;
-  --cps-color-luxury-darken4: #1c0000;
-
-  --cps-color-depth: #500a28;
-  --cps-color-depth-highlighten: #e9e3e6;
-  --cps-color-depth-lighten5: #d989a0;
-  --cps-color-depth-lighten4: #bc6f86;
-  --cps-color-depth-lighten3: #a0566d;
-  --cps-color-depth-lighten2: #853d55;
-  --cps-color-depth-lighten1: #6a253e;
-  --cps-color-depth-darken1: #370013;
-  --cps-color-depth-darken2: #290000;
-  --cps-color-depth-darken3: #1b0000;
-  --cps-color-depth-darken4: #000000;
-
-  //Darks
-  --cps-color-silver: #736464;
-  --cps-color-silver-highlighten: #edeaea;
-  --cps-color-silver-lighten5: #fbe9e9;
-  --cps-color-silver-lighten4: #decdcd;
-  --cps-color-silver-lighten3: #c2b2b1;
-  --cps-color-silver-lighten2: #a79797;
-  --cps-color-silver-lighten1: #8d7d7d;
-  --cps-color-silver-darken1: #5a4c4c;
-  --cps-color-silver-darken2: #433535;
-  --cps-color-silver-darken3: #2c2020;
-  --cps-color-silver-darken4: #190909;
-
-  --cps-color-platinum: #5a4b4b;
-  --cps-color-platinum-highlighten: #eae8e8;
-  --cps-color-platinum-lighten5: #decccc;
-  --cps-color-platinum-lighten4: #c2b0b0;
-  --cps-color-platinum-lighten3: #a79695;
-  --cps-color-platinum-lighten2: #8c7c7c;
-  --cps-color-platinum-lighten1: #736363;
-  --cps-color-platinum-darken1: #423434;
-  --cps-color-platinum-darken2: #2c1f1f;
-  --cps-color-platinum-darken3: #190707;
-  --cps-color-platinum-darken4: #000000;
-
-  --cps-color-graphite: #2d2323;
-  --cps-color-graphite-highlighten: #e7e5e5;
-  --cps-color-graphite-lighten5: #a79a9a;
-  --cps-color-graphite-lighten4: #8d8080;
-  --cps-color-graphite-lighten3: #736767;
-  --cps-color-graphite-lighten2: #5b4f4f;
-  --cps-color-graphite-lighten1: #433838;
-  --cps-color-graphite-darken1: #190d0d;
-  --cps-color-graphite-darken2: #000000;
-  --cps-color-graphite-darken3: #000000;
-  --cps-color-graphite-darken4: #000000;
-
-  //States
-  --cps-color-info: #099ef3;
-  --cps-color-info-highlighten: #e5eff8;
-  --cps-color-info-lighten5: #d0ffff;
-  --cps-color-info-lighten4: #b0ffff;
-  --cps-color-info-lighten3: #90f1ff;
-  --cps-color-info-lighten2: #6fd4ff;
-  --cps-color-info-lighten1: #49b9ff;
-  --cps-color-info-darken1: #0084d6;
-  --cps-color-info-darken2: #006bba;
-  --cps-color-info-darken3: #00539f;
-  --cps-color-info-darken4: #003d84;
-
-  --cps-color-success: #3bb719;
-  --cps-color-success-highlighten: #e8f2e6;
-  --cps-color-success-lighten5: #d5ffaa;
-  --cps-color-success-lighten4: #b7ff8e;
-  --cps-color-success-lighten3: #99ff72;
-  --cps-color-success-lighten2: #7bf057;
-  --cps-color-success-lighten1: #5dd33a;
-  --cps-color-success-darken1: #059b00;
-  --cps-color-success-darken2: #008100;
-  --cps-color-success-darken3: #006600;
-  --cps-color-success-darken4: #004d00;
-
-  --cps-color-warn: #ff9f00;
-  --cps-color-warn-highlighten: #faefe5;
-  --cps-color-warn-lighten5: #ffffa3;
-  --cps-color-warn-lighten4: #ffff87;
-  --cps-color-warn-lighten3: #fff26b;
-  --cps-color-warn-lighten2: #ffd64e;
-  --cps-color-warn-lighten1: #ffba30;
-  --cps-color-warn-darken1: #df8500;
-  --cps-color-warn-darken2: #c06b00;
-  --cps-color-warn-darken3: #a15300;
-  --cps-color-warn-darken4: #843b00;
-
-  --cps-color-error-highlighten: #f9e4e5;
-  --cps-color-error-lighten5: #f5d9d9;
-  --cps-color-error-lighten4: #f2cece;
-  --cps-color-error-lighten3: #e9a7a7;
-  --cps-color-error-lighten2: #df8080;
-  --cps-color-error-lighten1: #d55959;
-  --cps-color-error-darken1: #a32828;
-  --cps-color-error-darken2: #7a1e1e;
-  --cps-color-error-darken3: #511414;
-  --cps-color-error-darken4: #300c0c;
-
-  // States backgrounds
-  --cps-color-info-bg: rgba(73, 185, 255, 0.16);
-  --cps-color-success-bg: rgba(93, 211, 58, 0.16);
-  --cps-color-warn-bg: rgba(255, 186, 48, 0.16);
-  --cps-color-error-bg: rgba(255, 90, 103, 0.16);
-
-  // Highlights
-  --cps-color-highlight-hover: rgba(251, 251, 251, 0.06);
-  --cps-color-highlight-active: rgba(251, 251, 251, 0.1);
-  --cps-color-highlight-selected: rgba(244, 119, 33, 0.16);
-  --cps-color-highlight-selected-dark: rgba(244, 119, 33, 0.24);
-
-  //Backgrounds
-  --cps-color-bg-lightest: #2a2a31;
-  --cps-color-bg-light: #1f1f24;
-  --cps-color-bg-mid: #1b1b1e;
-  --cps-color-bg-dark: #151419;
-
-  //Lines
-  --cps-color-line-light: #3f3f46;
-  --cps-color-line-mid: #50505a;
-  --cps-color-line-dark: #666670;
-  --cps-color-line-darkest: #7a7a86;
-
-  //Text
-  --cps-color-text-lightest: #fbfbfb;
-  --cps-color-text-light: #d0d0d2;
-  --cps-color-text-mild: #a8a8ad;
-  --cps-color-text-dark: #878787;
-  --cps-color-text-darkest: #151419;
-
-  // Semantic design tokens (use these inside components)
-  --cps-accent-primary: var(--cps-color-energy);
-  --cps-accent-primary-contrast: #151419;
-  --cps-accent-secondary: #fbfbfb;
-  --cps-accent-secondary-contrast: #151419;
-  --cps-color-error: #b91c1c;
-  --cps-error-background: rgba(255, 90, 103, 0.16);
-
-  // Lines and borders
-  --cps-color-line: rgba(251, 251, 251, 0.12);
-  --cps-surface-body: #151419;
-  --cps-surface-highlight: #1b1b1e;
-  --cps-surface-muted: #202028;
-  --cps-surface-elevated: #262626;
-  --cps-surface-control: #262626;
-  --cps-surface-overlay: rgba(21, 20, 25, 0.85);
-  --cps-background-color: #151419;
-  --cps-background-disabled: rgba(
-    255,
-    255,
-    255,
-    0.05
-  ); // oklch(55.096% 0.02679 264.351 / 0.452);
-
-  // Tab component
-  --cps-tab-subtabs-background: var(--cps-surface-highlight);
-  --cps-tabs-subtabs-active-background: var(--cps-color-highlight-selected);
-  --cps-tabs-subtabs-background-hover: var(--cps-highlight-hover);
-  --cps-tabs-subtabs-text-hover: var(--cps-text-primary);
-
-  // Text
-  --cps-text-primary: #fbfbfb;
-  --cps-text-secondary: #d0d0d2;
-  --cps-text-muted: #878787;
-  --cps-text-inverse: var(--cps-color-depth-darken4);
-  --cps-text-on-accent: #151419;
-  --cps-text-disabled: #6f6f74;
-
-  --cps-border-color: #3a3a3a;
-  --cps-border-strong: #505050;
-  --cps-border-focus: var(--cps-accent-primary);
-
-  --cps-highlight-hover: rgba(251, 251, 251, 0.1);
-  --cps-highlight-active: rgba(251, 251, 251, 0.16);
-  --cps-highlight-selected: var(--cps-color-highlight-selected-dark);
-
-  --cps-state-info: #49b9ff;
-  --cps-state-info-contrast: #151419;
-  --cps-state-info-surface: rgba(73, 185, 255, 0.16);
-  --cps-state-success: #5dd33a;
-  --cps-state-success-contrast: #151419;
-  --cps-state-success-surface: rgba(93, 211, 58, 0.16);
-  --cps-state-warn: #ffba30;
-  --cps-state-warn-contrast: #151419;
-  --cps-state-warn-surface: rgba(255, 186, 48, 0.16);
-  --cps-state-error: var(--cps-color-error);
-  --cps-state-error-contrast: #ffffff;
-  --cps-state-error-surface: rgba(185, 28, 28, 0.28);
-
-  // Modern semantic surfaces
-  --cps-card-background: var(--cps-surface-highlight);
-  --cps-card-foreground: var(--cps-text-primary);
-  --cps-popover-background: var(--cps-surface-elevated);
-  --cps-popover-foreground: var(--cps-text-primary);
-  --cps-input-background: var(--cps-surface-highlight);
-  --cps-input-foreground: var(--cps-text-primary);
-  --cps-input-placeholder: var(--cps-text-muted);
-
-  // Focus ring and outlines
-  --cps-ring-color: var(--cps-border-focus);
-  --cps-ring-offset-color: var(--cps-surface-body);
-
-  // Radius scale
-  --cps-radius-xs: 2px;
-  --cps-radius-sm: 4px;
-  --cps-radius-md: 8px;
-  --cps-radius-lg: 12px;
-  --cps-radius-xl: 16px;
-  --cps-radius-full: 9999px;
-
-  // Backward compatible radius aliases
-  --cps-border-radius-small: var(--cps-radius-sm);
-  --cps-border-radius-medium: var(--cps-radius-md);
-  --cps-border-radius-large: var(--cps-radius-lg);
-  --cps-border-radius-round: var(--cps-radius-full);
-
-  // Elevation shadows
-  --cps-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --cps-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.34);
-  --cps-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.4);
-  --cps-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
-
-  // Motion tokens
-  --cps-motion-fast: 120ms;
-  --cps-motion-base: 180ms;
-  --cps-motion-slow: 260ms;
-  --cps-motion-easing: cubic-bezier(0.2, 0, 0, 1);
-}
-
-[data-theme='dark'][data-color-theme='neutral'] {
-  --cps-accent-primary: #e4e4e7;
-  --cps-accent-primary-contrast: #151419;
-  --cps-accent-secondary: #f4f4f5;
-  --cps-accent-secondary-contrast: #151419;
-  --cps-border-focus: #e4e4e7;
-  --cps-highlight-selected: rgba(228, 228, 231, 0.22);
-}
-
-[data-theme='dark'][data-color-theme='calm'] {
-  --cps-accent-primary: var(--cps-color-calm-lighten4);
-  --cps-accent-primary-contrast: #151419;
-  --cps-accent-secondary: var(--cps-color-care-lighten3);
-  --cps-accent-secondary-contrast: #151419;
-  --cps-border-focus: var(--cps-color-calm-lighten4);
-  --cps-highlight-selected: rgba(253, 128, 158, 0.28);
-}
-
-[data-theme='dark'][data-color-theme='energy'] {
-  --cps-accent-primary: var(--cps-color-energy);
-  --cps-accent-primary-contrast: #151419;
-  --cps-accent-secondary: var(--cps-color-prepared-lighten4);
-  --cps-accent-secondary-contrast: #151419;
-  --cps-border-focus: var(--cps-color-energy);
-  --cps-highlight-selected: var(--cps-color-highlight-selected-dark);
-}
-
-[data-theme='dark'][data-color-theme='passion'] {
-  --cps-accent-primary: var(--cps-color-passion-lighten3);
-  --cps-accent-primary-contrast: #151419;
-  --cps-accent-secondary: var(--cps-color-care-lighten4);
-  --cps-accent-secondary-contrast: #151419;
-  --cps-border-focus: var(--cps-color-passion-lighten3);
-  --cps-highlight-selected: rgba(255, 120, 121, 0.3);
-}
-
-[data-theme='dark'][data-base-theme='graphite'] {
-  --cps-surface-body: #121216;
-  --cps-surface-highlight: #191a20;
-  --cps-surface-muted: #1d1f26;
-  --cps-surface-elevated: #23252f;
-  --cps-surface-control: #23252f;
-  --cps-background-color: #121216;
-  --cps-border-color: #3f424d;
-  --cps-border-strong: #555968;
-  --cps-ring-offset-color: #121216;
-}
-
-[data-theme='dark'][data-base-theme='midnight'] {
-  --cps-surface-body: #0f1624;
-  --cps-surface-highlight: #172033;
-  --cps-surface-muted: #1b263c;
-  --cps-surface-elevated: #21304a;
-  --cps-surface-control: #21304a;
-  --cps-background-color: #0f1624;
-  --cps-border-color: #32445f;
-  --cps-border-strong: #4a6388;
-  --cps-ring-offset-color: #0f1624;
-}
-
-[data-theme='dark'][data-base-theme='aubergine'] {
-  --cps-surface-body: #1a1320;
-  --cps-surface-highlight: #231a2c;
-  --cps-surface-muted: #2b2136;
-  --cps-surface-elevated: #332943;
-  --cps-surface-control: #332943;
-  --cps-background-color: #1a1320;
-  --cps-border-color: #534363;
-  --cps-border-strong: #6d5683;
-  --cps-ring-offset-color: #1a1320;
-}