@kupola/kupola 1.7.8 → 1.9.0

package/css/colors-and-type.css

@@ -16,18 +16,6 @@
 /* @dark-only */
 /* @group-priority: brand-green, status, brand-blue, brand-purple, brand-yellow */
 
-:root {
-  --bg-base-default: #FFFFFF;
-  --bg-base-secondary: #F5F6F8;
-  --text-default: #0F1117;
-}
-
-[data-theme="dark"] {
-  --bg-base-default: #0C0C0D;
-  --bg-base-secondary: #1A1B1D;
-  --text-default: #E5E7EB;
-}
-
 :root {
   /* radius */
   --radius-2: 2px;
@@ -137,32 +125,95 @@
   --code-terminal-font-size: 12px;
   --code-terminal-font-weight: 450;
   --code-terminal-line-height: 18px;
-  --code-text: #E0E3EE;
-  --code-doc: #7F838C;
-  --code-link: #3C7EFF;
-  --code-number: #F48CCA;
-  --code-action: #B38CFF;
-  --code-instruction: #F0D8FF;
-  --code-function: #F29D79;
-  --code-constant: #80BBFF;
-  --code-parameter: #82D99F;
-  --code-attribute: #DED47E;
-  --code-tag: #F2858C;
+
+  /* font (generic fallback — used by a few preview sections) */
+  --font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
+  --font-size: 10px;
+  --font-weight: 400;
+  --line-height: 14px;
+
+  /* special */
+  --special-white: #FFFFFF;
+  --special-black: #000000;
+  --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
+
+  /* === Dark theme default values === */
+  /* These serve as fallbacks when no data-theme attribute is present */
+  /* [data-theme="light"] and [data-theme="dark"] selectors will override these */
 
   /* bg */
-  --bg-base-default: #1A1B1D;
-  --bg-base-secondary: #222427;
-  --bg-base-tertiary: #2A2D31;
-  --bg-overlay-l1: rgba(224, 226, 242, 0.04);
-  --bg-overlay-l2: rgba(224, 226, 242, 0.06);
-  --bg-overlay-l3: rgba(224, 226, 242, 0.08);
-  --bg-overlay-l4: rgba(224, 226, 242, 0.12);
-  --bg-menu: #202123;
+  --bg-base-default: #0C0C0D;
+  --bg-base-secondary: #1A1B1D;
+  --bg-base-tertiary: #222427;
+  --bg-overlay-l1: rgba(255, 255, 255, 0.04);
+  --bg-overlay-l2: rgba(255, 255, 255, 0.06);
+  --bg-overlay-l3: rgba(255, 255, 255, 0.08);
+  --bg-overlay-l4: rgba(255, 255, 255, 0.12);
+  --bg-menu: #1A1B1D;
   --bg-tooltip: #1A1B1D;
-  --bg-invert: #DADDE5;
-  --bg-invert-hover: #EDEFF2;
-  --bg-invert-active: #979AA4;
-  --bg-invert-disabled: rgba(224, 226, 242, 0.12);
+  --bg-invert: #FFFFFF;
+  --bg-invert-hover: #F5F5F5;
+  --bg-invert-active: #E5E5E5;
+  --bg-invert-disabled: rgba(255, 255, 255, 0.2);
+
+  /* text */
+  --text-default: #E5E7EB;
+  --text-default-hover: #FFFFFF;
+  --text-default-active: #FFFFFF;
+  --text-secondary: #B8BDCA;
+  --text-secondary-hover: #E5E7EB;
+  --text-secondary-active: #E5E7EB;
+  --text-tertiary: #9CA3AF;
+  --text-disabled: #8B93A1;
+  --text-onbrand: #FFFFFF;
+  --text-onaccent: #FFFFFF;
+
+  /* icon */
+  --icon-default: #E5E7EB;
+  --icon-default-hover: #FFFFFF;
+  --icon-default-active: #FFFFFF;
+  --icon-secondary: #B8BDCA;
+  --icon-secondary-hover: #E5E7EB;
+  --icon-secondary-active: #E5E7EB;
+  --icon-tertiary: #9CA3AF;
+  --icon-disabled: #8B93A1;
+  --icon-onbrand: #FFFFFF;
+  --icon-onaccent: #FFFFFF;
+
+  /* border */
+  --border-neutral-l1: rgba(255, 255, 255, 0.12);
+  --border-neutral-l2: rgba(255, 255, 255, 0.18);
+  --border-neutral-l3: rgba(255, 255, 255, 0.25);
+  --border-contrast: #0C0C0D;
+
+  /* bg-brand */
+  --bg-brand-popup: rgba(83, 81, 100, 0.15);
+
+  /* code colors */
+  --code-text: #D1D3DB;
+  --code-doc: #9599A6;
+  --code-link: #79B8FF;
+  --code-number: #FF9CA8;
+  --code-action: #D3ADF7;
+  --code-instruction: #B37FEB;
+  --code-function: #FFAD5B;
+  --code-constant: #61AFEF;
+  --code-parameter: #98C379;
+  --code-attribute: #E5C07B;
+  --code-tag: #E06C75;
+
+  /* accent */
+  --accent-teal: #32F08C;
+  --accent-coral: #FF9CA8;
+  --accent-amber: #FFAD5B;
+  --accent-lime: #A6EA39;
+  --accent-cyan: #78F2F2;
+  --accent-blue: #79B8FF;
+  --accent-magenta: #FB9DD7;
+  --accent-violet: #D3ADF7;
+  --accent-slate: #859EAD;
+
+  /* color aliases */
   --color-background: var(--bg-base-default);
   --color-surface: var(--bg-base-secondary);
   --color-surface-variant: var(--bg-base-tertiary);
@@ -173,34 +224,6 @@
   --color-card: var(--bg-base-secondary);
   --color-tooltip: var(--bg-tooltip);
   --color-menu: var(--bg-menu);
-
-  /* bg-brand */
-  --bg-brand: #535164;
-  --bg-brand-hover: #434154;
-  --bg-brand-disabled: rgba(83, 81, 100, 0.2);
-  --bg-brand-popup: rgba(83, 81, 100, 0.12);
-  
-  /* status colors */
-  --bg-error-default: #F87171;
-  --bg-warning-default: #FBBF24;
-  --bg-success-default: #34D399;
-  --color-primary: var(--bg-brand);
-  --color-primary-hover: var(--bg-brand-hover);
-  --color-primary-disabled: var(--bg-brand-disabled);
-  --color-primary-soft: var(--bg-brand-popup);
-  --color-accent: var(--bg-brand);
-
-  /* text */
-  --text-default: #D1D3DB;
-  --text-default-hover: #F5F9FE;
-  --text-default-active: #F5F9FE;
-  --text-secondary: #9599A6;
-  --text-secondary-hover: #D1D3DB;
-  --text-secondary-active: #D1D3DB;
-  --text-tertiary: #888D99;
-  --text-disabled: #888D99;
-  --text-onbrand: #0C0C0D;
-  --text-onaccent: #0C0C0D;
   --color-foreground: var(--text-default);
   --color-foreground-hover: var(--text-default-hover);
   --color-on-surface: var(--text-default);
@@ -208,245 +231,177 @@
   --color-muted-foreground: var(--text-secondary);
   --color-disabled-foreground: var(--text-disabled);
   --color-on-primary: var(--text-onbrand);
-
-  /* text-brand */
-  --text-brand: #535164;
-  --text-brand-hover: #434154;
-
-  /* icon */
-  --icon-default: #D1D3DB;
-  --icon-default-hover: #F5F9FE;
-  --icon-default-active: #F5F9FE;
-  --icon-secondary: #9599A6;
-  --icon-secondary-hover: #D1D3DB;
-  --icon-secondary-active: #D1D3DB;
-  --icon-tertiary: #888D99;
-  --icon-disabled: #888D99;
-  --icon-onbrand: #0C0C0D;
-  --icon-onaccent: #0C0C0D;
-
-  /* icon-brand */
-  --icon-brand: #535164;
-  --icon-brand-hover: #434154;
-
-  /* border */
-  --border-neutral-l1: rgba(224, 226, 242, 0.15);
-  --border-neutral-l2: rgba(224, 226, 242, 0.22);
-  --border-neutral-l3: rgba(224, 226, 242, 0.3);
-  --border-contrast: #FFFFFF;
-  --border-brand: #535164;
   --color-border: var(--border-neutral-l1);
   --color-border-strong: var(--border-neutral-l2);
   --color-border-stronger: var(--border-neutral-l3);
   --color-border-contrast: var(--border-contrast);
   --color-outline: var(--border-neutral-l1);
 
-  /* accent */
-  --accent-teal: #2DD288;
-  --accent-coral: #FF9392;
-  --accent-amber: #DCB364;
-  --accent-lime: #8ACB3A;
-  --accent-cyan: #04CBE5;
-  --accent-blue: #7BB8FF;
-  --accent-magenta: #EC93FF;
-  --accent-violet: #BFA5FF;
-  --accent-slate: #AFB9CF;
-
   /* status */
-  --status-primary-default: #387BFF;
-  --status-primary-hover: #4C88FF;
-  --status-primary-active: #1759DD;
-  --status-primary-surface-l1: rgba(53, 121, 255, 0.18);
-  --status-primary-surface-l2: rgba(53, 121, 255, 0.28);
-  --status-primary-surface-l3: rgba(53, 121, 255, 0.36);
-  --status-info-default: #33b9c1;
-  --status-info-hover: #47c5cc;
-  --status-info-active: #269fa6;
-  --status-info-surface-l1: rgba(51, 185, 193, 0.1);
-  --status-info-surface-l2: rgba(51, 185, 193, 0.15);
-  --status-info-surface-l3: rgba(51, 185, 193, 0.2);
-  --status-success-default: #33C192;
-  --status-success-hover: #5ED4AD;
-  --status-success-active: #27B082;
-  --status-success-surface-l1: rgba(0, 165, 110, 0.18);
-  --status-success-surface-l2: rgba(0, 165, 110, 0.28);
-  --status-success-surface-l3: rgba(0, 165, 110, 0.36);
-  --status-alert-default: #D29D00;
-  --status-alert-hover: #DFB949;
-  --status-alert-active: #AB8820;
-  --status-alert-surface-l1: rgba(210, 157, 0, 0.16);
-  --status-alert-surface-l2: rgba(210, 157, 0, 0.28);
-  --status-alert-surface-l3: rgba(210, 157, 0, 0.36);
-  --status-warning-default: #D27E24;
-  --status-warning-hover: #D78B28;
-  --status-warning-active: #B46510;
-  --status-warning-surface-l1: rgba(210, 126, 36, 0.16);
-  --status-warning-surface-l2: rgba(210, 126, 36, 0.28);
-  --status-warning-surface-l3: rgba(210, 126, 36, 0.36);
-  --status-error-default: #F65A5A;
-  --status-error-hover: #F86262;
-  --status-error-active: #B33636;
-  --status-error-surface-l1: rgba(246, 70, 70, 0.18);
-  --status-error-surface-l2: rgba(246, 70, 70, 0.28);
-  --status-error-surface-l3: rgba(246, 70, 70, 0.36);
-  --color-info: var(--status-primary-default);
-  --color-success: var(--status-success-default);
-  --color-warning: var(--status-warning-default);
-  --color-error: var(--status-error-default);
-  --color-error-soft: var(--status-error-surface-l1);
+  --status-primary-default: #79B8FF;
+  --status-primary-hover: #A3CFFF;
+  --status-primary-active: #4FA3E8;
+  --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
+  --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
+  --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
+  --status-info-default: #78F2F2;
+  --status-info-hover: #A5FFFF;
+  --status-info-active: #4FE5E5;
+  --status-info-surface-l1: rgba(120, 242, 242, 0.15);
+  --status-info-surface-l2: rgba(120, 242, 242, 0.22);
+  --status-info-surface-l3: rgba(120, 242, 242, 0.3);
+  --status-success-default: #32F08C;
+  --status-success-hover: #53F4A2;
+  --status-success-active: #22D678;
+  --status-success-surface-l1: rgba(50, 240, 140, 0.12);
+  --status-success-surface-l2: rgba(50, 240, 140, 0.18);
+  --status-success-surface-l3: rgba(50, 240, 140, 0.24);
+  --status-warning-default: #FFAD5B;
+  --status-warning-hover: #FFC080;
+  --status-warning-active: #E0954A;
+  --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
+  --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
+  --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
+  --status-error-default: #FF9CA8;
+  --status-error-hover: #FFB8C0;
+  --status-error-active: #E07E88;
+  --status-error-surface-l1: rgba(255, 156, 168, 0.12);
+  --status-error-surface-l2: rgba(255, 156, 168, 0.18);
+  --status-error-surface-l3: rgba(255, 156, 168, 0.24);
+  --status-alert-default: #FFAD5B;
+  --status-alert-hover: #FFC080;
+  --status-alert-active: #E0954A;
+  --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
+  --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
+  --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
 
   /* brand */
-  --brand-green-100: #E5FFF2;
-  --brand-green-200: #B4FDD9;
-  --brand-green-300: #85FABF;
-  --brand-green-400: #5CF5A8;
-  --brand-green-500: #535164;
-  --brand-green-600: #434154;
-  --brand-green-700: #0AB861;
-  --brand-green-800: #05994F;
-  --brand-green-900: #02743B;
-  --brand-green-1000: #004D26;
-  --brand-red-100: #FFE5E5;
-  --brand-red-200: #FFCCCC;
-  --brand-red-300: #FFB2B2;
-  --brand-red-400: #FF9999;
-  --brand-red-500: #FF8080;
-  --brand-red-600: #FF6464;
-  --brand-red-700: #E63737;
-  --brand-red-800: #CB1010;
-  --brand-red-900: #8F0505;
-  --brand-red-1000: #4D0000;
-  --brand-yellow-100: #FFF6E5;
-  --brand-yellow-200: #FFECCC;
-  --brand-yellow-300: #FFE3B2;
-  --brand-yellow-400: #FFDA99;
+  --brand-green-100: #0A3A22;
+  --brand-green-200: #0F5A32;
+  --brand-green-300: #147A42;
+  --brand-green-400: #199A52;
+  --brand-green-500: #32F08C;
+  --brand-green-600: #53F4A2;
+  --brand-green-700: #74F7B8;
+  --brand-green-800: #95FBCE;
+  --brand-green-900: #B6FFE4;
+  --brand-green-1000: #D7FFF9;
+  --brand-red-100: #4D0000;
+  --brand-red-200: #8F0505;
+  --brand-red-300: #CB1010;
+  --brand-red-400: #E63737;
+  --brand-red-500: #FF6464;
+  --brand-red-600: #FF8080;
+  --brand-red-700: #FF9999;
+  --brand-red-800: #FFB3B3;
+  --brand-red-900: #FFCCCC;
+  --brand-red-1000: #FFE6E6;
+  --brand-yellow-100: #4D3000;
+  --brand-yellow-200: #8F5C05;
+  --brand-yellow-300: #CB8710;
+  --brand-yellow-400: #E6A637;
   --brand-yellow-500: #FFD080;
-  --brand-yellow-600: #FFC864;
-  --brand-yellow-700: #E6A637;
-  --brand-yellow-800: #CB8710;
-  --brand-yellow-900: #8F5C05;
-  --brand-yellow-1000: #4D3000;
-  --brand-blue-100: #E5F3FF;
-  --brand-blue-200: #CCE6FF;
-  --brand-blue-300: #B2DAFF;
-  --brand-blue-400: #99CEFF;
-  --brand-blue-500: #80C1FF;
-  --brand-blue-600: #64B4FF;
-  --brand-blue-700: #3792E6;
-  --brand-blue-800: #1071CB;
-  --brand-blue-900: #054C8F;
-  --brand-blue-1000: #00284D;
-  --brand-purple-100: #E8E5FF;
-  --brand-purple-200: #D2CCFF;
-  --brand-purple-300: #BBB2FF;
-  --brand-purple-400: #A599FF;
-  --brand-purple-500: #8E80FF;
-  --brand-purple-600: #7864FF;
-  --brand-purple-700: #4C37E6;
-  --brand-purple-800: #2610CB;
-  --brand-purple-900: #15058F;
-  --brand-purple-1000: #09004D;
-  /* original source token: --brand-neutral grey-100 */
-  --brand-neutral-grey-100: #F2F2F2;
-  /* original source token: --brand-neutral grey-200 */
-  --brand-neutral-grey-200: #E3E3E3;
-  /* original source token: --brand-neutral grey-300 */
-  --brand-neutral-grey-300: #D6D6D6;
-  /* original source token: --brand-neutral grey-400 */
-  --brand-neutral-grey-400: #C7C7C7;
-  /* original source token: --brand-neutral grey-500 */
-  --brand-neutral-grey-500: #BABABA;
-  /* original source token: --brand-neutral grey-600 */
-  --brand-neutral-grey-600: #ABABAB;
-  /* original source token: --brand-neutral grey-700 */
-  --brand-neutral-grey-700: #8A8A8A;
-  /* original source token: --brand-neutral grey-800 */
-  --brand-neutral-grey-800: #686868;
-  /* original source token: --brand-neutral grey-900 */
-  --brand-neutral-grey-900: #474747;
-  /* original source token: --brand-neutral grey-1000 */
-  --brand-neutral-grey-1000: #262626;
-  /* original source token: --brand-blue grey-100 */
-  --brand-blue-grey-100: #F1EFF4;
-  /* original source token: --brand-blue grey-200 */
-  --brand-blue-grey-200: #E0E1E6;
-  /* original source token: --brand-blue grey-300 */
-  --brand-blue-grey-300: #CFD3D8;
-  /* original source token: --brand-blue grey-400 */
-  --brand-blue-grey-400: #BFC5CA;
-  /* original source token: --brand-blue grey-500 */
-  --brand-blue-grey-500: #B0B5BA;
-  /* original source token: --brand-blue grey-600 */
-  --brand-blue-grey-600: #A0A6AB;
-  /* original source token: --brand-blue grey-700 */
-  --brand-blue-grey-700: #80898E;
-  /* original source token: --brand-blue grey-800 */
-  --brand-blue-grey-800: #5E696E;
-  /* original source token: --brand-blue grey-900 */
-  --brand-blue-grey-900: #404A4F;
-  /* original source token: --brand-blue grey-1000 */
-  --brand-blue-grey-1000: #21262B;
-  /* original source token: --brand-green grey-100 */
-  --brand-green-grey-100: #F1F4F4;
-  /* original source token: --brand-green grey-200 */
-  --brand-green-grey-200: #E0E6E6;
-  /* original source token: --brand-green grey-300 */
-  --brand-green-grey-300: #CFD8D8;
-  /* original source token: --brand-green grey-400 */
-  --brand-green-grey-400: #BFCACA;
-  /* original source token: --brand-green grey-500 */
-  --brand-green-grey-500: #B0BABA;
-  /* original source token: --brand-green grey-600 */
-  --brand-green-grey-600: #A0ABAB;
-  /* original source token: --brand-green grey-700 */
-  --brand-green-grey-700: #808E8E;
-  /* original source token: --brand-green grey-800 */
-  --brand-green-grey-800: #5E6E6E;
-  /* original source token: --brand-green grey-900 */
-  --brand-green-grey-900: #404F4F;
-  /* original source token: --brand-green grey-1000 */
-  --brand-green-grey-1000: #212B2B;
-
-  /* font (generic fallback — used by a few preview sections) */
-  --font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-  --font-size: 10px;
-  --font-weight: 400;
-  --line-height: 14px;
+  --brand-yellow-600: #FFDA99;
+  --brand-yellow-700: #FFE3B2;
+  --brand-yellow-800: #FFECCC;
+  --brand-yellow-900: #FFF6E5;
+  --brand-yellow-1000: #FFFDF0;
+  --brand-blue-100: #00284D;
+  --brand-blue-200: #054C8F;
+  --brand-blue-300: #1071CB;
+  --brand-blue-400: #3792E6;
+  --brand-blue-500: #64B4FF;
+  --brand-blue-600: #80C1FF;
+  --brand-blue-700: #99CEFF;
+  --brand-blue-800: #B2DAFF;
+  --brand-blue-900: #CCE6FF;
+  --brand-blue-1000: #E5F3FF;
+  --brand-purple-100: #09004D;
+  --brand-purple-200: #15058F;
+  --brand-purple-300: #2610CB;
+  --brand-purple-400: #4C37E6;
+  --brand-purple-500: #7864FF;
+  --brand-purple-600: #8E80FF;
+  --brand-purple-700: #A599FF;
+  --brand-purple-800: #BBB2FF;
+  --brand-purple-900: #D2CCFF;
+  --brand-purple-1000: #E8E5FF;
+  --brand-gray-100: #030712;
+  --brand-gray-200: #111827;
+  --brand-gray-300: #1F2937;
+  --brand-gray-400: #374151;
+  --brand-gray-500: #4B5563;
+  --brand-gray-600: #6B7280;
+  --brand-gray-700: #9CA3AF;
+  --brand-gray-800: #D1D5DB;
+  --brand-gray-900: #E5E7EB;
+  --brand-gray-1000: #F3F4F6;
 
   /* viz */
-  --viz-series-coral: #F87454;
-  --viz-series-amber: #EDAA45;
-  --viz-series-mint: #1DC981;
-  --viz-series-teal: #78F2F2;
-  --viz-series-sky: #22A5F7;
-  --viz-series-violet: #B655FC;
-  --viz-series-magenta: #FB9DD7;
-  --viz-series-indigo: #B6A3FF;
-  --viz-series-lime: #A6EA39;
-  --viz-series-slate: #859EAD;
-  --viz-ui-bg-chart: #202123;
-  --viz-ui-bg-tooltip: #1A1B1D;
-  --viz-ui-chart-title: #D1D3DB;
-  --viz-ui-chart-subtitle: #9599A6;
-  --viz-ui-chart-axis: rgba(224, 226, 242, 0.16);
-  --viz-ui-chart-tick: #9599A6;
-  --viz-ui-legend-label: #9599A6;
-  --viz-ui-legend-value: #D1D3DB;
+  --viz-graph-bg: #1A1B1D;
+  --viz-graph-line: rgba(255, 255, 255, 0.08);
+  --viz-series-1: #32F08C;
+  --viz-series-2: #79B8FF;
+  --viz-series-3: #D3ADF7;
+  --viz-series-4: #FFAD5B;
+  --viz-series-5: #FB9DD7;
+  --viz-series-6: #78F2F2;
 
-  /* special */
-  --special-white: #FFFFFF;
-  --special-black: #000000;
-  --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
-  
-  /* icon filter for img tags */
+  /* border-brand */
+  --border-brand: rgba(83, 81, 100, 0.4);
+  --border-brand-hover: rgba(83, 81, 100, 0.6);
+  --border-brand-active: rgba(83, 81, 100, 0.8);
+
+  /* bg-brand */
+  --bg-brand: #535164;
+  --bg-brand-hover: #636174;
+  --bg-brand-disabled: rgba(83, 81, 100, 0.3);
+  --bg-brand-overlay: rgba(83, 81, 100, 0.12);
+
+  /* status colors */
+  --bg-error-default: #FF9CA8;
+  --bg-warning-default: #FFAD5B;
+  --bg-success-default: #32F08C;
+
+  /* text-brand */
+  --text-brand: #636174;
+  --text-brand-hover: #737184;
+  --text-brand-active: #838194;
+
+  /* icon-brand */
+  --icon-brand: #636174;
+  --icon-brand-hover: #737184;
+  --icon-brand-active: #838194;
+
+  /* progress */
+  --bg-progress-success: #32F08C;
+  --bg-progress-warning: #FFAD5B;
+  --bg-progress-error: #FF9CA8;
+  --bg-progress-info: #79B8FF;
+
+  /* slider */
+  --bg-slider-track: rgba(255, 255, 255, 0.06);
+  --bg-slider-fill: #32F08C;
+  --bg-slider-thumb: #32F08C;
+
+  /* calendar */
+  --bg-calendar-hover: rgba(255, 255, 255, 0.04);
+  --bg-calendar-selected: #32F08C;
+  --text-calendar-selected: #0C0C0D;
+
+  /* fileupload */
+  --bg-fileupload-border: rgba(255, 255, 255, 0.12);
+  --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
+  --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
+
+  /* timeline */
+  --bg-timeline-line: rgba(255, 255, 255, 0.12);
+  --bg-timeline-marker: #32F08C;
+
+  /* icon filter */
   --icon-filter: brightness(0) saturate(0) invert(0.9);
 
-  /* layout aliases (originally fallback in _preview.css) */
-  --brand-1: #32f08c;
-  --brand-2: #3ee1a3;
-  --brand-3: #60f2bd;
-  --brand-4: #a0fde7;
-  --site-canvas: #1A1B1D;
+  /* layout aliases */
   --bg-layout-1: var(--bg-base-secondary);
   --bg-layout-2: var(--bg-overlay-l1);
   --border-1: var(--border-neutral-l1);

package/css/scaffold.css

@@ -3,18 +3,24 @@
  * Provides the page chrome consumed by preview/component-*.html and
  * ui_kits/*.html. Component-specific styles live in components.css.
  */
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 html, body {
-  background: var(--bg-base-default);
-  color: var(--text-default);
+  background: var(--bg-base-default, #0C0C0D);
+  color: var(--text-default, #E5E7EB);
   font-family: var(--body-base-font-family);
   font-size: var(--body-base-font-size);
   line-height: var(--body-base-line-height);
   font-weight: var(--body-base-font-weight);
   min-height: 100%;
 }
+
+@media (prefers-color-scheme: light) {
+  html, body {
+    background: var(--bg-base-default, #FFFFFF);
+    color: var(--text-default, #0F1117);
+  }
+}
 html, body { overflow-x: hidden; max-width: 100%; }
 body { padding: 0; }
 img, svg, video, canvas { max-width: 100%; }

package/css/theme-dark.css

@@ -15,6 +15,8 @@
   --bg-invert-active: #E5E5E5;
   --bg-invert-disabled: rgba(255, 255, 255, 0.2);
 
+  --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
+
   --text-default: #E5E7EB;
   --text-default-hover: #FFFFFF;
   --text-default-active: #FFFFFF;

package/css/theme-light.css

@@ -15,6 +15,8 @@
   --bg-invert-active: #3A3E44;
   --bg-invert-disabled: rgba(0, 0, 0, 0.2);
 
+  --special-bgtabsoverlay: rgba(0, 0, 0, 0.03);
+
   --text-default: #0F1117;
   --text-default-hover: #000000;
   --text-default-active: #000000;