@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/styles/themes/dbc/dark.css

@@ -1,82 +1,181 @@
-:root {
-  /* ===== Brand & UI Colors ===== */
-  --color-primary: #3b82f6;
-  --color-primary-hover: #2563eb;
-  --color-secondary: #9ca3af;
-  --color-secondary-hover: #6b7280;
-  --color-accent: #f472b6;
-  --color-accent-hover: #db2777;
-
-  --color-highlight: #60a5fa;
-  --color-hover: var(--opac-bg-dark);
-
-  --color-background: #111827;
-  --color-surface: #111827;
-  --color-surface-hover: var(--opac-bg-default);
-  --color-surface-pressed: var(--opac-bg-dark);
-  --color-surface-selected: var(--color-bg-selected);
-
-  /* Text */
-  --color-text: #f9fafb;
-  --color-text-secondary: #d1d5db;
-  --color-text-muted: #9ca3af;
-  --color-text-inverse: #111827;
-  --color-text-on-primary: var(--color-text-inverse);
-  --color-text-on-secondary: var(--color-text-inverse);
-  --color-text-on-highlight: var(--color-text-inverse);
-
-  /* Links */
-  --color-link: #93c5fd; /* lighter for contrast on dark */
+html[data-theme='dark'] {
+  /* Brand blues */
+  --dbc-blue-500: #3b82f6;
+  --dbc-blue-600: #2563eb;
+  --dbc-blue-400: #60a5fa;
+  --dbc-blue-300: #93c5fd; /* used for focus ring */
+  --dbc-blue-100: #0b1f3b;
+  --dbc-blue-150: #102a4d;
+
+  /* Neutrals */
+  --dbc-neutral-900: #f9fafb;
+  --dbc-neutral-700: #d1d5db;
+  --dbc-neutral-600: #9ca3af;
+  --dbc-neutral-200: #374151;
+  --dbc-neutral-100: #1f2937;
+
+  /* Accents */
+  --dbc-pink-500: #f472b6;
+  --dbc-pink-600: #db2777;
+
+  --dbc-gray-500: #9ca3af;
+  --dbc-gray-600: #6b7280;
+
+  /* Status colors */
+  --dbc-green-500: #22c55e;
+  --dbc-green-100: #052e1f;
+  --dbc-green-700: #86efac;
+  --dbc-green-300: #4ade80;
+
+  --dbc-amber-700: #f59e0b;
+  --dbc-amber-100: #2b1b00;
+  --dbc-amber-800: #fcd34d;
+  --dbc-amber-400: #fbbf24;
+
+  --dbc-red-600: #ef4444;
+  --dbc-red-100: #2b0b0b;
+  --dbc-red-800: #fecaca;
+  --dbc-red-300: #f87171;
+
+  --dbc-info-500: #0ea5e9;
+  --dbc-info-100: #042a3a;
+  --dbc-info-700: #bae6fd;
+  --dbc-info-300: #38bdf8;
+
+  /* ==========================================================================
+   * SEMANTIC COLORS (HUE-AGNOSTIC – COMPONENTS USE THESE)
+   * ======================================================================= */
+
+  /* === Brand & accents === */
+  --color-brand: var(--dbc-blue-500);
+  --color-brand-hover: var(--dbc-blue-600);
+  --color-brand-strong: var(--dbc-blue-600);
+
+  --color-accent-1: var(--dbc-pink-500);
+  --color-accent-2: var(--dbc-gray-500);
+  --color-accent-3: var(--dbc-info-500);
+
+  /* === Backgrounds & surfaces === */
+  --color-bg-page: #111827;
+  --color-bg-surface: #111827;
+  --color-bg-surface-subtle: rgba(255, 255, 255, 0.05);
+  --color-bg-surface-strong: #0f172a;
+
+  --color-bg-contextual: #0b1220;
+  --color-bg-contextual-subtle: #0f172a;
+
+  --color-bg-accent-1: rgba(244, 114, 182, 0.14);
+  --color-bg-accent-2: rgba(156, 163, 175, 0.1);
+
+  /* Interaction backgrounds */
+  --color-bg-hover-subtle: var(--opac-bg-light);
+  --color-bg-pressed-subtle: var(--opac-bg-default);
+
+  /* Selected */
+  --color-bg-selected: rgba(59, 130, 246, 0.22);
+  --color-bg-selected-hover: rgba(59, 130, 246, 0.3);
+
+  --color-neutral: var(--dbc-neutral-200);
+  --color-neutral-fg: var(--dbc-neutral-900);
+  --color-neutral-strong: var(--dbc-neutral-600);
+  --color-neutral-strong-fg: #111827;
+
+  /* === Borders === */
+  --color-border-subtle: #374151;
+  --color-border-default: #374151;
+  --color-border-strong: #4b5563;
+  --color-border-selected: var(--color-brand);
+
+  /* Border widths */
+  --border-width-hairline: 1px;
+  --border-width-thin: 1px;
+  --border-width-medium: 2px;
+  --border-width-thick: 4px;
+
+  /* === Text / foreground === */
+  --color-fg-default: var(--dbc-neutral-900);
+  --color-fg-muted: var(--dbc-neutral-700);
+  --color-fg-subtle: var(--dbc-neutral-600);
+
+  --color-fg-on-strong: #111827;
+  --color-fg-on-brand: #111827;
+  --color-fg-on-accent-1: var(--color-fg-default);
+  --color-fg-on-accent-2: var(--color-fg-default);
+
+  /* === Links === */
+  --color-link: #93c5fd;
   --color-link-hover: #bfdbfe;
   --color-link-visited: #a78bfa;
 
-  /* Borders */
-  --color-border: #374151;
-  --color-border-strong: #4b5563;
-  --border-width-thin: 1px;
-  --border-width-thick: 2px;
+  /* === Status / severity === */
+  --color-status-success: var(--dbc-green-500);
+  --color-status-success-bg: rgba(34, 197, 94, 0.14);
+  --color-status-success-border: var(--dbc-green-300);
+  --color-status-success-fg: var(--dbc-green-700);
+
+  --color-status-warning: var(--dbc-amber-700);
+  --color-status-warning-bg: rgba(251, 191, 36, 0.16);
+  --color-status-warning-border: var(--dbc-amber-400);
+  --color-status-warning-fg: var(--dbc-amber-800);
+
+  --color-status-error: var(--dbc-red-600);
+  --color-status-error-bg: rgba(248, 113, 113, 0.14);
+  --color-status-error-border: var(--dbc-red-300);
+  --color-status-error-fg: var(--dbc-red-800);
+
+  --color-status-info: var(--dbc-info-500);
+  --color-status-info-bg: rgba(56, 189, 248, 0.14);
+  --color-status-info-border: var(--dbc-info-300);
+  --color-status-info-fg: var(--dbc-info-700);
+
+  /* === Disabled === */
+  --color-disabled-bg: var(--dbc-neutral-100);
+  --color-disabled-fg: #6b7280;
+  --color-disabled-border: var(--dbc-neutral-200);
+
+  /* === Focus === */
+  --color-focus-ring: var(--dbc-blue-300);
+  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
+
+  /* ==========================================================================
+   * OPTIONAL COMPONENT-LEVEL TOKENS
+   * ======================================================================= */
+
+  /* Cards */
+  --card-bg-default: var(--color-bg-surface);
+  --card-bg-subtle: var(--color-bg-surface-subtle);
+  --card-bg-strong: var(--color-bg-surface-strong);
+  --card-bg-accent-1: var(--color-bg-accent-1);
+  --card-bg-accent-2: var(--color-bg-accent-2);
+
+  --card-fg-default: var(--color-fg-default);
+  --card-fg-on-strong: var(--color-fg-on-strong);
+  --card-fg-on-accent-1: var(--color-fg-on-accent-1);
+  --card-fg-on-accent-2: var(--color-fg-on-accent-2);
+
+  /* Buttons */
+  --button-bg-primary: var(--color-brand);
+  --button-bg-primary-hover: var(--color-brand-hover);
+  --button-fg-primary: var(--color-fg-on-brand);
+
+  --button-bg-secondary: var(--color-bg-surface);
+  --button-bg-secondary-hover: var(--color-bg-hover-subtle);
+  --button-border-secondary: var(--color-border-default);
+  --button-fg-secondary: var(--color-fg-default);
+
+  /* ==========================================================================
+   * NON-COLOR SYSTEM TOKENS
+   * ======================================================================= */
 
   /* Opacities (dark) */
   --opac-bg-light: rgba(255, 255, 255, 0.05);
   --opac-bg-default: rgba(255, 255, 255, 0.1);
   --opac-bg-dark: rgba(255, 255, 255, 0.15);
   --opac-bg-brand: rgba(59, 130, 246, 0.12);
-
-  /* Inverted (for light-on-dark inversions) */
   --opac-bg-light-invert: rgba(0, 0, 0, 0.05);
   --opac-bg-default-invert: rgba(0, 0, 0, 0.1);
   --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
 
-  /* Semantic (Status) */
-  --color-success: #22c55e;
-  --color-warning: #fbbf24;
-  --color-error: #f87171;
-  --color-info: #38bdf8;
-
-  --color-bg-success: rgba(34, 197, 94, 0.14);
-  --color-bg-warning: rgba(251, 191, 36, 0.16);
-  --color-bg-error: rgba(248, 113, 113, 0.14);
-  --color-bg-info: rgba(56, 189, 248, 0.14);
-
-  --color-text-success: #22c55e;
-  --color-text-warning: #fbbf24;
-  --color-text-error: #f87171;
-  --color-text-info: #38bdf8;
-
-  --color-border-success: #16a34a;
-  --color-border-warning: #d97706;
-  --color-border-error: #ef4444;
-  --color-border-info: #0284c7;
-
-  /* Disabled */
-  --color-disabled-bg: #1f2937;
-  --color-disabled-text: #6b7280;
-  --color-disabled-border: #374151;
-
-  /* Focus */
-  --focus-ring-color: rgba(147, 197, 253, 0.7);
-  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
-
   /* ===== Spacing & Layout ===== */
   --spacing-2xs: 2px;
   --spacing-xxs: 4px;
@@ -89,7 +188,6 @@
   --spacing-3xl: 64px;
   --spacing-4xl: 96px;
 
-  /* Gutters */
   --gutter-sm: 12px;
   --gutter-md: 16px;
   --gutter-lg: 24px;
@@ -108,12 +206,16 @@
   --container-xl: 1280px;
 
   /* ===== Sizing ===== */
-  --icon-size: 20px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+
   --component-size-xs: 20px;
   --component-size-sm: 30px;
-  --component-size-md: 40px;
-  --component-size-lg: 48px;
-  --component-size-xl: 64px;
+  --component-size-md: 36px;
+  --component-size-lg: 44px;
+  --component-size-xl: 435px;
+  --sidebar-width: 200px;
 
   /* Control paddings */
   --control-padding-x: 12px;
@@ -129,15 +231,17 @@
   --border-radius-lg: 0.5rem;
   --border-radius-xl: 0.75rem;
 
-  /* Density presets */
+  /* Density */
   --density-compact: -2px;
   --density-comfortable: 0px;
   --density-spacious: 4px;
 
-  /* ===== Typography ===== */
+  /* Typography */
+  --text-max-width: 65ch;
   --font-family:
     Roboto, Inter, ui-sans-serif, system-ui, 'Segoe UI', 'Helvetica Neue', Arial,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
 
   --font-size-xs: 12px;
@@ -147,7 +251,10 @@
   --font-size-xl: 24px;
   --font-size-2xl: 30px;
 
-  --font-weight-regular: 400;
+  --font-size-fluid-sm: clamp(14px, 1.2vw, 16px);
+  --font-size-fluid-lg: clamp(18px, 1.6vw, 22px);
+
+  --font-weight-default: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
@@ -161,12 +268,11 @@
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.02em;
 
-  /* Label transforms */
   --nav-link-transform: none;
   --breadcrumb-transform: none;
   --tab-label-transform: none;
 
-  /* ===== Motion ===== */
+  /* Motion */
   --transition-fast: 150ms;
   --transition-normal: 250ms;
   --transition-slow: 400ms;
@@ -176,17 +282,17 @@
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
 
-  /* ===== Elevation & Overlay ===== */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
+  /* Elevation & Overlay */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
 
-  --overlay-scrim: rgba(0, 0, 0, 0.6);
+  --overlay-scrim: rgba(0, 0, 0, 0.5);
   --backdrop-blur: 8px;
 
-  /* ===== Layers ===== */
+  /* Layers */
   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1100;
@@ -197,29 +303,29 @@
   --z-tooltip: 1400;
   --z-toast: 1500;
 
-  /* ===== Data Visualization ===== */
-  --viz-cat-1: #60a5fa;
-  --viz-cat-2: #22c55e;
+  /* Data viz */
+  --viz-cat-1: #2563eb;
+  --viz-cat-2: #16a34a;
   --viz-cat-3: #f59e0b;
-  --viz-cat-4: #f87171;
-  --viz-cat-5: #a78bfa;
+  --viz-cat-4: #ef4444;
+  --viz-cat-5: #8b5cf6;
   --viz-cat-6: #14b8a6;
 
-  --viz-seq-start: #0b1220;
-  --viz-seq-mid: #3b82f6;
-  --viz-seq-end: #93c5fd;
+  --viz-seq-start: #dbeafe;
+  --viz-seq-mid: #60a5fa;
+  --viz-seq-end: #1d4ed8;
 
-  /* ===== Components: Skeletons & Loaders ===== */
-  --skeleton-base: #1f2937;
-  --skeleton-pulse: #374151;
+  /* Skeletons & loaders */
+  --skeleton-base: #374151;
+  --skeleton-pulse: #4b5563;
   --spinner-size: 16px;
   --spinner-stroke: 2px;
 
-  /* ===== Directionality / Logical Spacing ===== */
+  /* Logical spacing */
   --space-inline-sm: 8px;
 }
 
-/* Reduced Motion (dark) */
+/* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root[data-theme='dark'] {
     --transition-fast: 1ms;
@@ -232,9 +338,10 @@
   }
 }
 
-/* High-Contrast (dark) */
+/* High-contrast variant */
 :root[data-theme='dark'][data-contrast='high'] {
-  --color-border: #9ca3af;
-  --color-border-strong: #e5e7eb;
+  --color-border-subtle: #9ca3af;
+  --color-border-default: #e5e7eb;
+  --color-border-strong: #f9fafb;
   --focus-ring: 0 0 0 3px #e5e7eb;
 }