/*
* Xablu.Blazor Design Tokens — Shared Kernel
* Phase 163 v8.0: Two-File Split Architecture
*
* PURPOSE: Canonical --x-* token definitions shared by ALL projects.
* This file is the DDD Shared Kernel — the ubiquitous visual language.
*
* RULES:
* - Projects NEVER modify this file (OCP: closed for modification)
* - Projects override values in {project}-theme.css (OCP: open for extension)
* - Components consume tokens via var(--x-*) (DIP: depend on abstraction)
* - This file changes ONLY when the design system evolves (SRP)
*
* LOAD ORDER: tokens.css → {project}-theme.css → scoped component CSS
*
* CANONICAL NAMING (v8.0 decisions):
* Font sizes: --x-text-{xxs,xs,sm,base,lg,xl,2xl} (Tailwind mental model)
* Elevation: --x-elevation-{sm,md,lg,xl,card} (design-system standard)
* Spacing: --x-spacing-{0-20,xxs-xxl} (--x-space-* is DEAD)
* Font weight: --x-font-weight-{normal,medium,semibold,bold}
* Radius: --x-radius-{sm,md,lg,xl,card,button,full}
*/
/* ==========================================================================
CSS Cascade Contract (Phase 178)
Layer order declaration — determines priority regardless of order.
Unlayered CSS (Blazor scoped .razor.css) always wins over all layers.
========================================================================== */
@layer xablu-tokens, project-tokens, library-globals;
@layer xablu-tokens {
/* ==========================================================================
Canonical Typography Aliases (v8.0)
Shorter names aligned with Tailwind mental model
========================================================================== */
:root {
--x-text-xxs: 0.625rem; /* 10px */
--x-text-xs: 0.75rem; /* 12px */
--x-text-sm: 0.875rem; /* 14px */
--x-text-base: 1rem; /* 16px */
--x-text-lg: 1.125rem; /* 18px */
--x-text-xl: 1.25rem; /* 20px */
--x-text-2xl: 1.5rem; /* 24px */
--x-text-3xl: 1.875rem; /* 30px */
--x-text-4xl: 2.25rem; /* 36px */
/* Font families */
--x-font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
--x-font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace;
/* Font weights */
--x-font-weight-normal: 400;
--x-font-weight-medium: 500;
--x-font-weight-semibold: 600;
--x-font-weight-bold: 700;
/* Line heights */
--x-line-height-compact: 1.1;
--x-line-height-snug: 1.2;
--x-line-height-tight: 1.25;
--x-line-height-cozy: 1.3;
--x-line-height-settled: 1.4;
--x-line-height-normal: 1.5;
--x-line-height-relaxed: 1.75;
/* ==========================================================================
Canonical Spacing Scale (v8.0)
4px base unit, named scale + numeric aliases
========================================================================== */
--x-spacing-0: 0;
--x-spacing-0-5: 2px;
--x-spacing-1: 4px;
--x-spacing-1-5: 6px;
--x-spacing-2: 8px;
--x-spacing-2-5: 10px;
--x-spacing-3: 12px;
--x-spacing-3-5: 14px;
--x-spacing-4: 16px;
--x-spacing-4-5: 18px;
--x-spacing-5: 20px;
--x-spacing-6: 24px;
--x-spacing-7: 28px;
--x-spacing-8: 32px;
--x-spacing-9: 36px;
--x-spacing-10: 40px;
--x-spacing-11: 44px;
--x-spacing-12: 48px;
--x-spacing-14: 56px;
--x-spacing-16: 64px;
--x-spacing-20: 80px;
/* Named spacing aliases */
--x-spacing-xxs: 2px;
--x-spacing-xs: 4px;
--x-spacing-sm: 8px;
--x-spacing-md: 12px;
--x-spacing-lg: 16px;
--x-spacing-xl: 20px;
--x-spacing-xxl: 24px;
/* Semantic spacing */
--x-spacing-card-padding: 24px;
--x-spacing-card-gap: 16px;
--x-spacing-section: 32px;
--x-content-max-width: 1280px;
/* ==========================================================================
Canonical Border Radius (v8.0)
========================================================================== */
--x-radius-sm: 4px;
--x-radius-md: 6px;
--x-radius-lg: 8px;
--x-radius-xl: 12px;
--x-radius-2xl: 16px;
--x-radius-card: 12px;
--x-radius-button: 6px;
--x-radius-full: 9999px;
/* ==========================================================================
Canonical Elevation (v8.0)
--x-elevation-* is the standard; --x-shadow-* is deprecated alias
========================================================================== */
--x-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
--x-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--x-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
--x-elevation-xl: 0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);
--x-elevation-card: 0 2px 8px rgba(0, 0, 0, 0.08);
/* Phase 184: Deprecated shadow aliases REMOVED (--x-shadow-sm/md/lg)
— use --x-elevation-* directly */
/* ==========================================================================
Canonical Z-Index Scale (v8.0)
========================================================================== */
--x-z-dropdown: 1000;
--x-z-sticky: 1020;
--x-z-fixed: 1030;
--x-z-modal-backdrop: 1040;
--x-z-modal: 1050;
--x-z-popover: 1060;
--x-z-tooltip: 1070;
/* ==========================================================================
Canonical Transitions (v8.0)
========================================================================== */
/* Phase 184: Deprecated transition shorthands REMOVED
(--x-transition-fast/normal/slow/timing) — use --x-duration-* + --x-ease-* */
/* ==========================================================================
Canonical Color Ramps (Phase 106 — v11.0)
7 families × 10 stops (50..900). The -600 stop equals the semantic base.
Semantic aliases below reference these via var().
Projects override in {project}-theme.css for brand-specific palettes.
========================================================================== */
/* --- Primary ramp (neutral blue — GoToM8 overrides to teal) --- */
--x-color-primary-50: #EBF3FA;
--x-color-primary-100: #D2E0F1;
--x-color-primary-200: #A5C2E3;
--x-color-primary-300: #78A3D5;
--x-color-primary-400: #4B85C7;
--x-color-primary-500: #2272BD;
--x-color-primary-600: #1C6FB8;
--x-color-primary-700: #165193;
--x-color-primary-800: #113D6E;
--x-color-primary-900: #0B2847;
/* --- Secondary ramp (purple) --- */
--x-color-secondary-50: #F3ECF8;
--x-color-secondary-100: #E3D8EC;
--x-color-secondary-200: #C7B1D9;
--x-color-secondary-300: #AB8AC6;
--x-color-secondary-400: #8F63B3;
--x-color-secondary-500: #7D49A8;
--x-color-secondary-600: #733D9F;
--x-color-secondary-700: #5C317F;
--x-color-secondary-800: #45255F;
--x-color-secondary-900: #2E193F;
/* --- Destructive ramp (red) --- */
--x-color-destructive-50: #FDF2F2;
--x-color-destructive-100: #F4D5D5;
--x-color-destructive-200: #E9ABAB;
--x-color-destructive-300: #DE8181;
--x-color-destructive-400: #D35757;
--x-color-destructive-500: #C82D2D;
--x-color-destructive-600: #C82D2D;
--x-color-destructive-700: #950000;
--x-color-destructive-800: #620000;
--x-color-destructive-900: #3D0000;
/* --- Success ramp (green) --- */
--x-color-success-50: #F0F7EC;
--x-color-success-100: #D8E7CF;
--x-color-success-200: #B1CF9F;
--x-color-success-300: #8AB76F;
--x-color-success-400: #639F3F;
--x-color-success-500: #4A921A;
--x-color-success-600: #3C850E;
--x-color-success-700: #095200;
--x-color-success-800: #001F00;
--x-color-success-900: #001400;
/* --- Warning ramp (yellow/amber) --- */
--x-color-warning-50: #FFFDF0;
--x-color-warning-100: #FFF5D2;
--x-color-warning-200: #FFEBA5;
--x-color-warning-300: #FFE178;
--x-color-warning-400: #FFD74B;
--x-color-warning-500: #FFCD1E;
--x-color-warning-600: #FFCD1E;
--x-color-warning-700: #CCA418;
--x-color-warning-800: #997C12;
--x-color-warning-900: #66530C;
/* --- Info ramp (blue) --- */
--x-color-info-50: #EDF4FF;
--x-color-info-100: #CFE1FE;
--x-color-info-200: #9FC3FD;
--x-color-info-300: #6FA5FC;
--x-color-info-400: #3F87FB;
--x-color-info-500: #1068FA;
--x-color-info-600: #1068FA;
--x-color-info-700: #0D53C8;
--x-color-info-800: #0A3E96;
--x-color-info-900: #072964;
/* --- Grey ramp (neutral) --- */
--x-color-grey-50: #FAFBFC;
--x-color-grey-100: #F5F6F8;
--x-color-grey-200: #EAEDF1;
--x-color-grey-300: #D0D5DD;
--x-color-grey-400: #A0A7B1;
--x-color-grey-500: #7A7F85;
--x-color-grey-600: #555A60;
--x-color-grey-700: #3B3F44;
--x-color-grey-800: #292A2C;
--x-color-grey-900: #1A1A1A;
/* ==========================================================================
Elevation Glow (Phase 106 — v11.0)
Colored glow for interactive elements. Consumes ramp -400 stops.
========================================================================== */
--x-elevation-glow-primary: 0 0 10px var(--x-color-primary-400);
--x-elevation-glow-success: 0 0 10px var(--x-color-success-400);
--x-elevation-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
/* ==========================================================================
Gradient Tokens (Phase 106 — v11.0)
Named gradients consuming ramp tokens. Components use these, not raw values.
========================================================================== */
--x-gradient-primary-stripe: linear-gradient(90deg, var(--x-color-primary-500) 0%, var(--x-color-primary-600) 100%);
--x-gradient-hero-accent: linear-gradient(135deg, var(--x-color-primary-600) 0%, var(--x-color-secondary-600) 100%);
--x-gradient-text-primary: linear-gradient(90deg, var(--x-color-primary-500) 0%, var(--x-color-primary-700) 100%);
/* ==========================================================================
Semantic Color Aliases (v10.0 → v11.0 — Phase 106 repointed to ramps)
These are the ONLY tokens components may consume.
Projects override ramp values in {project}-theme.css.
========================================================================== */
/* --- Surface & Text --- */
--x-color-background: #ffffff;
--x-color-foreground: #292A2C;
--x-color-card: #ffffff;
--x-color-card-foreground: #292A2C;
--x-color-card-hover: #F5F6F8;
--x-color-muted: #FAFBFC;
--x-color-muted-foreground: #7A7F85;
--x-color-border: #EAEDF1;
--x-color-input: #F5F6F8;
--x-color-input-background: #ffffff;
--x-color-input-border: #E0E5EB;
--x-color-input-focus: #1C6FB8;
--x-color-ring: #113D6E;
--x-color-popover: #ffffff;
--x-color-popover-foreground: #292A2C;
--x-color-accent: #EAEDF1;
--x-color-accent-foreground: #292A2C;
--x-color-accent-gold: #FBAD50;
/* --- Grey (checkerboard / neutral patterns) --- */
--x-color-grey-t60: #cccccc;
/* --- Primary (Phase 106: repointed to ramps) --- */
--x-color-primary: var(--x-color-primary-600);
--x-color-primary-foreground: #ffffff;
--x-color-primary-hover: var(--x-color-primary-700);
--x-color-primary-active: var(--x-color-primary-800);
--x-color-primary-muted: var(--x-color-primary-100);
--x-color-primary-subtle: var(--x-color-primary-50);
/* --- Secondary (Phase 106: repointed to ramps) --- */
--x-color-secondary: var(--x-color-secondary-600);
--x-color-secondary-foreground: #ffffff;
--x-color-secondary-hover: var(--x-color-secondary-700);
--x-color-secondary-active: var(--x-color-secondary-800);
--x-color-secondary-muted: var(--x-color-secondary-100);
/* --- Destructive (Phase 106: repointed to ramps) --- */
--x-color-destructive: var(--x-color-destructive-500);
--x-color-destructive-foreground: #ffffff;
--x-color-destructive-hover: var(--x-color-destructive-700);
--x-color-destructive-active: var(--x-color-destructive-800);
--x-color-destructive-muted: var(--x-color-destructive-100);
/* --- Success (Phase 106: repointed to ramps) --- */
--x-color-success: var(--x-color-success-600);
--x-color-success-foreground: #ffffff;
--x-color-success-hover: var(--x-color-success-700);
--x-color-success-active: var(--x-color-success-800);
--x-color-success-muted: var(--x-color-success-100);
/* --- Warning (Phase 106: repointed to ramps) --- */
--x-color-warning: var(--x-color-warning-500);
--x-color-warning-foreground: #292A2C;
--x-color-warning-hover: var(--x-color-warning-700);
--x-color-warning-muted: var(--x-color-warning-100);
/* --- Info (Phase 106: repointed to ramps) --- */
--x-color-info: var(--x-color-info-500);
--x-color-info-foreground: #ffffff;
--x-color-info-hover: var(--x-color-info-700);
--x-color-info-muted: var(--x-color-info-100);
/* --- Sidebar --- */
--x-color-sidebar: #F5F6F8;
--x-color-sidebar-foreground: #292A2C;
--x-color-sidebar-primary: #1C6FB8;
--x-color-sidebar-primary-foreground: #ffffff;
--x-color-sidebar-accent: #EAEDF1;
--x-color-sidebar-accent-foreground: #292A2C;
--x-color-sidebar-border: #E0E5EB;
--x-color-sidebar-ring: #113D6E;
/* --- Chart palette --- */
--x-color-chart-1: #1C6FB8;
--x-color-chart-2: #733D9F;
--x-color-chart-3: #52DCCC;
--x-color-chart-4: #FBAD50;
--x-color-chart-5: #D40078;
/* Phase 184: Deprecated font-size and border-radius aliases REMOVED
(--x-font-size-*, --x-border-radius-*) — use --x-text-* and --x-radius-* */
/* ==========================================================================
Phase 166: MECE Token Completeness
Industry gaps identified against DTCG 2025.10, Tailwind v4, Material Design 3,
Fluent Design, Open Props, shadcn/ui, Radix UI, Chakra UI.
========================================================================== */
/* ==========================================================================
Letter Spacing (v9.0 — NEW)
Ref: Tailwind letter-spacing, Material Design typography
========================================================================== */
--x-letter-spacing-tighter: -0.05em;
--x-letter-spacing-tight: -0.025em;
--x-letter-spacing-normal: 0;
--x-letter-spacing-wide: 0.025em;
--x-letter-spacing-wider: 0.05em;
--x-letter-spacing-widest: 0.1em;
/* ==========================================================================
Duration (v9.0 — NEW)
Ref: DTCG "duration" type, Fluent "time" tokens, Tailwind v4 --duration-*
Primitive motion values — transitions reference these
========================================================================== */
--x-duration-instant: 0ms;
--x-duration-ultra-fast: 50ms;
--x-duration-faster: 100ms;
--x-duration-fast: 150ms;
--x-duration-normal: 200ms;
--x-duration-slow: 300ms;
--x-duration-slower: 500ms;
--x-duration-ultra-slow: 700ms;
--x-duration-glacial: 1000ms;
/* ==========================================================================
Easing (v9.0 — NEW)
Ref: DTCG "cubicBezier" type, Material Design motion, Open Props easings
========================================================================== */
--x-ease-linear: linear;
--x-ease-in: cubic-bezier(0.4, 0, 1, 1);
--x-ease-out: cubic-bezier(0, 0, 0.2, 1);
--x-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--x-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--x-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* ==========================================================================
Opacity (v9.0 — NEW)
Ref: Open Props, Tailwind opacity scale
========================================================================== */
--x-opacity-0: 0;
--x-opacity-5: 0.05;
--x-opacity-10: 0.1;
--x-opacity-20: 0.2;
--x-opacity-25: 0.25;
--x-opacity-30: 0.3;
--x-opacity-40: 0.4;
--x-opacity-50: 0.5;
--x-opacity-60: 0.6;
--x-opacity-70: 0.7;
--x-opacity-75: 0.75;
--x-opacity-80: 0.8;
--x-opacity-90: 0.9;
--x-opacity-95: 0.95;
--x-opacity-100: 1;
/* Semantic opacity aliases */
--x-opacity-disabled: 0.4;
--x-opacity-hover: 0.8;
--x-opacity-overlay: 0.5;
--x-opacity-overlay-heavy: 0.75;
/* ==========================================================================
Border Width (v9.0 — NEW)
Ref: DTCG "strokeWidth" type, Tailwind border-width
========================================================================== */
--x-border-width-0: 0;
--x-border-width-1: 1px;
--x-border-width-2: 2px;
--x-border-width-4: 4px;
--x-border-width-8: 8px;
/* ==========================================================================
Focus Ring (v9.0 — NEW)
Ref: Fluent "focus" tokens, shadcn --ring, WCAG 2.2 focus indicator
========================================================================== */
--x-focus-ring-width: 2px;
--x-focus-ring-offset: 2px;
--x-focus-ring-color: var(--x-color-ring);
--x-focus-ring-style: solid;
--x-focus-ring-shadow: 0 0 0 var(--x-focus-ring-offset) var(--x-color-background),
0 0 0 calc(var(--x-focus-ring-offset) + var(--x-focus-ring-width)) var(--x-focus-ring-color);
--x-focus-outline: var(--x-focus-ring-width) var(--x-focus-ring-style) var(--x-focus-ring-color);
/* ==========================================================================
Breakpoints (v9.0 — NEW)
Ref: Tailwind v4 --breakpoint-*, Bootstrap 5, Material Design
NOTE: CSS custom properties can't be used in @media queries directly,
but these define the canonical breakpoint values for JS/Blazor consumption
and documentation. Components use these via CascadingValue or JS interop.
========================================================================== */
--x-breakpoint-xs: 320px;
--x-breakpoint-sm: 640px;
--x-breakpoint-md: 768px;
--x-breakpoint-lg: 1024px;
--x-breakpoint-xl: 1280px;
--x-breakpoint-2xl: 1536px;
/* ==========================================================================
Icon Sizes (v9.0 — NEW)
Ref: Material Design icon scale, Fluent icon sizes
========================================================================== */
--x-icon-size-xs: 12px;
--x-icon-size-sm: 16px;
--x-icon-size-md: 20px;
--x-icon-size-base: 24px;
--x-icon-size-lg: 32px;
--x-icon-size-xl: 48px;
--x-icon-size-2xl: 64px;
/* ==========================================================================
Component Heights (v9.0 — NEW)
Ref: Fluent control heights, Material Design touch targets
Consistent heights ensure vertical alignment in forms and toolbars
========================================================================== */
--x-height-input-sm: 32px;
--x-height-input-md: 36px;
--x-height-input-lg: 40px;
--x-height-input-xl: 48px;
--x-height-button-sm: 28px;
--x-height-button-md: 36px;
--x-height-button-lg: 44px;
--x-height-toolbar: 48px;
--x-height-header: 56px;
--x-height-footer: 48px;
/* ==========================================================================
Elevation Inner (v9.0 — NEW)
Ref: Open Props --shadow-inner, Material Design inset shadow
========================================================================== */
--x-elevation-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
--x-elevation-none: none;
/* ==========================================================================
Aspect Ratios (v9.0 — NEW)
Ref: Open Props --ratio-*, common media aspect ratios
========================================================================== */
--x-aspect-ratio-square: 1 / 1;
--x-aspect-ratio-landscape: 4 / 3;
--x-aspect-ratio-widescreen: 16 / 9;
--x-aspect-ratio-ultrawide: 21 / 9;
--x-aspect-ratio-portrait: 3 / 4;
--x-aspect-ratio-golden: 1.618 / 1;
/* ==========================================================================
Container Max Widths (v9.0 — NEW)
Ref: Tailwind container, Bootstrap container breakpoints
========================================================================== */
--x-container-xs: 320px;
--x-container-sm: 640px;
--x-container-md: 768px;
--x-container-lg: 1024px;
--x-container-xl: 1280px;
--x-container-2xl: 1536px;
--x-container-prose: 65ch;
/* ==========================================================================
Tier Badge Colors (v10.0 — NEW)
Gamification tier colours — domain-specific but themeable
========================================================================== */
--x-color-tier-bronze: #CD7F32;
--x-color-tier-bronze-muted: rgba(205, 127, 50, 0.15);
--x-color-tier-silver: #808080;
--x-color-tier-silver-muted: rgba(192, 192, 192, 0.2);
--x-color-tier-gold: #B8860B;
--x-color-tier-gold-muted: rgba(255, 215, 0, 0.15);
--x-color-tier-platinum: #00CED1;
--x-color-tier-platinum-muted: rgba(0, 206, 209, 0.12);
--x-color-tier-diamond: #9B59B6;
--x-color-tier-diamond-muted: rgba(155, 89, 182, 0.12);
/* ==========================================================================
Avatar Sizes (v10.1 — NEW)
Ref: Material Design avatar, Fluent Persona, shadcn/ui Avatar
10-step scale from 24px (XXXS) to 184px (XXXXL)
========================================================================== */
--x-avatar-size-xxxs: 24px;
--x-avatar-size-xxs: 28px;
--x-avatar-size-xs: 32px;
--x-avatar-size-s: 40px;
--x-avatar-size-m: 48px;
--x-avatar-size-l: 56px;
--x-avatar-size-xl: 72px;
--x-avatar-size-xxl: 96px;
--x-avatar-size-xxxl: 128px;
--x-avatar-size-xxxxl: 184px;
/* ==========================================================================
Badge Sizes (v10.1 — NEW)
Ref: Fluent badge, Material Design chip
========================================================================== */
--x-badge-size-dot: 8px;
--x-badge-size-text: 20px;
/* ==========================================================================
Label Font Family (v10.1 — NEW)
Used by 15+ form components for consistent label typography
========================================================================== */
--x-label-font-family: var(--x-font-body);
/* ==========================================================================
Color Aliases (v10.1 — NEW)
Black alias for components that need pure #000
========================================================================== */
--x-color-black: #000000;
/* ==========================================================================
Icon Filter Tokens (v10.1 — NEW)
CSS filter() values for colorizing SVG icons via brightness/contrast.
Ref: CSS filter technique for recoloring SVGs loaded as ![]()
.
========================================================================== */
--x-icon-filter-black: brightness(0) saturate(100%);
--x-icon-filter-white: brightness(0) saturate(100%) invert(1);
--x-icon-filter-primary: brightness(0) saturate(100%) invert(33%) sepia(93%) saturate(500%) hue-rotate(190deg);
--x-icon-filter-primary-s20: brightness(0) saturate(100%) invert(33%) sepia(20%) saturate(500%) hue-rotate(190deg);
--x-icon-filter-primary-s40: brightness(0) saturate(100%) invert(33%) sepia(40%) saturate(500%) hue-rotate(190deg);
--x-icon-filter-grey-s20: brightness(0) saturate(100%) invert(50%) sepia(20%);
--x-icon-filter-grey-s30: brightness(0) saturate(100%) invert(50%) sepia(30%);
--x-icon-filter-secondary-s20: brightness(0) saturate(100%) invert(28%) sepia(20%) saturate(500%) hue-rotate(250deg);
--x-icon-filter-secondary-s40: brightness(0) saturate(100%) invert(28%) sepia(40%) saturate(500%) hue-rotate(250deg);
/* ==========================================================================
Overlay Aliases (v10.1)
========================================================================== */
--x-overlay-50: rgba(0, 0, 0, 0.5);
/* ==========================================================================
Overlay Colors (v9.0)
Ref: Material Design scrim, Fluent overlay, Radix overlay
========================================================================== */
--x-color-overlay: rgba(0, 0, 0, 0.5);
--x-color-overlay-light: rgba(0, 0, 0, 0.3);
--x-color-overlay-heavy: rgba(0, 0, 0, 0.75);
--x-color-scrim: rgba(0, 0, 0, 0.4);
/* ==========================================================================
Phase 184: DTCG Completeness — Missing Token Definitions
========================================================================== */
/* --- Typography gaps --- */
--x-text-md: 1rem; /* 16px — alias for --x-text-base, used by 9 components */
--x-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
--x-font-display: var(--x-font-body);
--x-font-heading: var(--x-font-body);
--x-font-weight-thin: 100;
--x-font-weight-light: 300;
--x-font-weight-extrabold: 800;
--x-font-weight-black: 900;
--x-line-height-none: 1;
--x-line-height-loose: 2;
/* --- Spacing gaps --- */
--x-margin-default: var(--x-spacing-4);
/* --- Color gaps --- */
--x-color-border-strong: #D0D5DD;
--x-color-warning-active: #997C12;
--x-color-info-active: #0A42A0;
/* --- Radius gaps --- */
--x-radius-xs: 2px;
--x-radius-default: var(--x-radius-md);
--x-radius-base: var(--x-radius-lg);
/* --- Icon filter gaps --- */
--x-icon-filter-danger: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(2000%) hue-rotate(345deg);
--x-icon-filter-success: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(1200%) hue-rotate(85deg);
--x-icon-filter-primary-s60: brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(500%) hue-rotate(190deg);
--x-icon-filter-secondary: brightness(0) saturate(100%) invert(28%) sepia(50%) saturate(500%) hue-rotate(250deg);
/* --- Semantic icon filters (theme-aware, flip in dark mode) --- */
--x-icon-filter-on-primary: var(--x-icon-filter-white);
--x-icon-filter-on-destructive: var(--x-icon-filter-white);
--x-icon-filter-on-success: var(--x-icon-filter-white);
--x-icon-filter-on-secondary: var(--x-icon-filter-black);
/* --- Overlay gaps --- */
--x-overlay-5: rgba(0, 0, 0, 0.05);
--x-overlay-10: rgba(0, 0, 0, 0.1);
/* --- Avatar group tokens --- */
--x-avatar-group-overlap: calc(-1 * var(--x-spacing-2));
/* --- Navigation component tokens --- */
--x-nav-icon-size: 16px;
--x-nav-item-height: 50px;
--x-nav-item-border-radius: var(--x-radius-lg);
--x-nav-item-margin-top: var(--x-spacing-1);
/* --- Z-index gap --- */
--x-z-toast: 9999;
/* --- Blur scale (DTCG completeness — Tailwind v4 pattern) --- */
--x-blur-none: 0;
--x-blur-sm: 4px;
--x-blur-md: 8px;
--x-blur-lg: 16px;
--x-blur-xl: 24px;
--x-blur-2xl: 40px;
--x-blur-3xl: 64px;
/* --- Gradient presets (DTCG completeness — Open Props pattern) --- */
--x-gradient-primary: linear-gradient(135deg, var(--x-color-primary) 0%, var(--x-color-secondary) 100%);
--x-gradient-surface: linear-gradient(180deg, var(--x-color-background) 0%, var(--x-color-muted) 100%);
--x-gradient-overlay: linear-gradient(180deg, transparent 0%, var(--x-color-overlay) 100%);
/* ==========================================================================
Phase 185: FigmaMake Token Gap Closure
========================================================================== */
/* ── Status presence tokens (v10.2 — Phase 185) ───────────────── */
--x-color-status-online: #22c55e;
--x-color-status-offline: #a3a3a3;
--x-color-status-busy: #f59e0b;
--x-color-status-error: #ef4444;
/* ── Surface variants (v10.2 — Phase 185) ──────────────────────── */
--x-color-surface-elevated: var(--x-color-card);
--x-color-surface-sunken: #f5f5f5;
/* ── Border variants (v10.2 — Phase 185) ───────────────────────── */
--x-color-border-subtle: #f0f0f0;
--x-color-border-interactive: var(--x-color-primary);
/* ── Typography extremes (v10.2 — Phase 185) ───────────────────── */
--x-text-3xs: 0.5625rem;
--x-line-height-code: 1.6;
/* ==========================================================================
Phase XBL-100: Component sizing & animation tokens
========================================================================== */
/* ── Modal/dialog width tokens ─────────────────────────────────── */
--x-width-modal-sm: 400px;
--x-width-modal-md: 520px;
--x-width-modal-lg: 720px;
--x-width-dialog: 480px;
/* ── Animation duration tokens (long-running) ──────────────────── */
--x-duration-spin: 1s;
--x-duration-shimmer: 1.5s;
--x-duration-pulse: 1.5s;
}
/* ==========================================================================
Dark Mode Semantic Overrides
Phase 175: Centralized dark mode — components inherit via var(--x-color-*)
instead of per-component [data-theme="dark"] blocks with legacy tokens.
RULES:
- This is the ONLY place dark mode colors are defined
- Components MUST NOT have their own [data-theme="dark"] overrides
- Projects may further override in {project}-theme.css dark section
========================================================================== */
[data-theme="dark"] {
/* ==========================================================================
Phase 106: Dark mode ramp counterparts (inverted luminance)
========================================================================== */
/* --- Primary ramp (dark) --- */
--x-color-primary-50: #0B2847;
--x-color-primary-100: #113D6E;
--x-color-primary-200: #165193;
--x-color-primary-300: #1C6FB8;
--x-color-primary-400: #3B8BD0;
--x-color-primary-500: #5AA7E8;
--x-color-primary-600: #79C3FF;
--x-color-primary-700: #9FD4FF;
--x-color-primary-800: #C5E5FF;
--x-color-primary-900: #EBF3FA;
/* --- Secondary ramp (dark) --- */
--x-color-secondary-50: #2E193F;
--x-color-secondary-100: #45255F;
--x-color-secondary-200: #5C317F;
--x-color-secondary-300: #733D9F;
--x-color-secondary-400: #8F63B3;
--x-color-secondary-500: #AB8AC6;
--x-color-secondary-600: #C7B1D9;
--x-color-secondary-700: #D5C5E3;
--x-color-secondary-800: #E3D8EC;
--x-color-secondary-900: #F3ECF8;
/* --- Destructive ramp (dark) --- */
--x-color-destructive-50: #3D0000;
--x-color-destructive-100: #620000;
--x-color-destructive-200: #950000;
--x-color-destructive-300: #C82D2D;
--x-color-destructive-400: #E05050;
--x-color-destructive-500: #F87171;
--x-color-destructive-600: #FCA5A5;
--x-color-destructive-700: #FECACA;
--x-color-destructive-800: #FEE2E2;
--x-color-destructive-900: #FDF2F2;
/* --- Success ramp (dark) --- */
--x-color-success-50: #001400;
--x-color-success-100: #001F00;
--x-color-success-200: #095200;
--x-color-success-300: #3C850E;
--x-color-success-400: #4ADE80;
--x-color-success-500: #6EE7A0;
--x-color-success-600: #86EFAC;
--x-color-success-700: #BBF7D0;
--x-color-success-800: #D8E7CF;
--x-color-success-900: #F0F7EC;
/* --- Warning ramp (dark) --- */
--x-color-warning-50: #66530C;
--x-color-warning-100: #997C12;
--x-color-warning-200: #CCA418;
--x-color-warning-300: #FFCD1E;
--x-color-warning-400: #FFD74B;
--x-color-warning-500: #FFE178;
--x-color-warning-600: #FFEBA5;
--x-color-warning-700: #FFF1C2;
--x-color-warning-800: #FFF5D2;
--x-color-warning-900: #FFFDF0;
/* --- Info ramp (dark) --- */
--x-color-info-50: #072964;
--x-color-info-100: #0A3E96;
--x-color-info-200: #0D53C8;
--x-color-info-300: #1068FA;
--x-color-info-400: #3F87FB;
--x-color-info-500: #6FA5FC;
--x-color-info-600: #9FC3FD;
--x-color-info-700: #BDD6FE;
--x-color-info-800: #CFE1FE;
--x-color-info-900: #EDF4FF;
/* --- Grey ramp (dark) --- */
--x-color-grey-50: #1A1A1A;
--x-color-grey-100: #292A2C;
--x-color-grey-200: #3B3F44;
--x-color-grey-300: #555A60;
--x-color-grey-400: #7A7F85;
--x-color-grey-500: #A0A7B1;
--x-color-grey-600: #D0D5DD;
--x-color-grey-700: #EAEDF1;
--x-color-grey-800: #F5F6F8;
--x-color-grey-900: #FAFBFC;
/* --- Phase 106: Dark elevation glow & gradient --- */
--x-elevation-glow-primary: 0 0 10px var(--x-color-primary-400);
--x-elevation-glow-success: 0 0 10px var(--x-color-success-400);
--x-elevation-card-hover: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
/* --- Surface & Text --- */
--x-color-background: #1a1a1a;
--x-color-foreground: #e5e7eb;
--x-color-card: #2a2a2a;
--x-color-card-foreground: #e5e7eb;
--x-color-card-hover: #333333;
--x-color-muted: #333333;
--x-color-muted-foreground: #9ca3af;
--x-color-border: #404040;
--x-color-input: #333333;
--x-color-input-background: #2a2a2a;
--x-color-input-border: #4a4a4a;
--x-color-input-focus: #60a5fa;
--x-color-ring: #60a5fa;
--x-color-popover: #2a2a2a;
--x-color-popover-foreground: #e5e7eb;
--x-color-accent: #404040;
--x-color-accent-foreground: #e5e7eb;
/* --- Grey (checkerboard / neutral patterns) --- */
--x-color-grey-t60: #555555;
/* --- Primary (lighter for dark bg contrast) --- */
--x-color-primary: #60a5fa;
--x-color-primary-foreground: #1a1a1a;
--x-color-primary-hover: #93bbfd;
--x-color-primary-active: #3b82f6;
--x-color-primary-muted: #1e3a5f;
--x-color-primary-subtle: #172554;
/* --- Secondary --- */
--x-color-secondary: #a78bfa;
--x-color-secondary-foreground: #1a1a1a;
--x-color-secondary-hover: #c4b5fd;
--x-color-secondary-active: #8b5cf6;
--x-color-secondary-muted: #2e1065;
/* --- Destructive --- */
--x-color-destructive: #f87171;
--x-color-destructive-foreground: #1a1a1a;
--x-color-destructive-hover: #fca5a5;
--x-color-destructive-active: #ef4444;
--x-color-destructive-muted: #450a0a;
/* --- Success --- */
--x-color-success: #4ade80;
--x-color-success-foreground: #1a1a1a;
--x-color-success-hover: #86efac;
--x-color-success-active: #22c55e;
--x-color-success-muted: #052e16;
/* --- Warning --- */
--x-color-warning: #fbbf24;
--x-color-warning-foreground: #1a1a1a;
--x-color-warning-hover: #fcd34d;
--x-color-warning-muted: #422006;
/* --- Info --- */
--x-color-info: #60a5fa;
--x-color-info-foreground: #1a1a1a;
--x-color-info-hover: #93bbfd;
--x-color-info-muted: #172554;
/* --- Sidebar --- */
--x-color-sidebar: #1f1f1f;
--x-color-sidebar-foreground: #e5e7eb;
--x-color-sidebar-primary: #60a5fa;
--x-color-sidebar-primary-foreground: #1a1a1a;
--x-color-sidebar-accent: #333333;
--x-color-sidebar-accent-foreground: #e5e7eb;
--x-color-sidebar-border: #404040;
--x-color-sidebar-ring: #60a5fa;
/* --- Chart palette (brighter for dark backgrounds) --- */
--x-color-chart-1: #60a5fa;
--x-color-chart-2: #a78bfa;
--x-color-chart-3: #67e8f9;
--x-color-chart-4: #fbbf24;
--x-color-chart-5: #f472b6;
/* --- Tier badge (gamification) --- */
--x-color-tier-bronze: #CD7F32;
--x-color-tier-bronze-muted: rgba(205, 127, 50, 0.25);
--x-color-tier-silver: #C0C0C0;
--x-color-tier-silver-muted: rgba(192, 192, 192, 0.2);
--x-color-tier-gold: #FFD700;
--x-color-tier-gold-muted: rgba(255, 215, 0, 0.2);
--x-color-tier-platinum: #00CED1;
--x-color-tier-platinum-muted: rgba(0, 206, 209, 0.2);
--x-color-tier-diamond: #9B59B6;
--x-color-tier-diamond-muted: rgba(155, 89, 182, 0.2);
/* --- Overlay (lighter scrim on dark) --- */
--x-color-overlay: rgba(0, 0, 0, 0.7);
--x-color-overlay-light: rgba(0, 0, 0, 0.5);
--x-color-overlay-heavy: rgba(0, 0, 0, 0.85);
--x-color-scrim: rgba(0, 0, 0, 0.6);
/* --- Elevation (stronger shadows on dark surfaces) --- */
--x-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--x-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
--x-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.2);
--x-elevation-xl: 0 16px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
--x-elevation-card: 0 2px 8px rgba(0, 0, 0, 0.3);
/* --- Phase 184: Dark mode additions --- */
--x-color-border-strong: #555555;
--x-color-warning-active: #fcd34d;
--x-color-info-active: #93bbfd;
/* --- Phase 185: FigmaMake token gap dark overrides --- */
--x-color-surface-sunken: #1a1a1a;
--x-color-border-subtle: #2a2a2a;
/* --- XBL100: Close CC-306 gap (8 tokens) --- */
--x-color-accent-gold: #d4a843; /* Lightened for dark bg */
--x-color-black: #000000; /* Absolute — same in dark */
--x-color-border-interactive: #4b5563; /* Lightened for dark bg */
--x-color-status-busy: #f59e0b; /* Brightened for visibility */
--x-color-status-error: #f87171; /* Brightened for visibility */
--x-color-status-offline: #9ca3af; /* Lightened for dark bg */
--x-color-status-online: #4ade80; /* Brightened for visibility */
--x-color-surface-elevated: #1e1e2e; /* Dark elevated surface */
/* --- Semantic icon filters (inverted for dark mode light-on-dark primaries) --- */
--x-icon-filter-on-primary: var(--x-icon-filter-black);
--x-icon-filter-on-destructive: var(--x-icon-filter-black);
--x-icon-filter-on-success: var(--x-icon-filter-black);
--x-icon-filter-on-secondary: var(--x-icon-filter-white);
}
/* ==========================================================================
Required field indicator — shared by XTextfield, XTextarea, XNumberInput,
XPasswordInput when Required="true".
========================================================================== */
.x-required-indicator {
color: var(--x-color-destructive);
font-weight: var(--x-font-weight-bold);
margin-left: var(--x-spacing-0-5);
}
/* ==========================================================================
Phase 184: Global @keyframes (DTCG completeness)
Components reference these directly: animation: spin 1s linear infinite;
========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
} /* end @layer xablu-tokens */