/* Master import file - controls cascade order */
/* CRITICAL: Import order determines cascade priority. Later imports override earlier ones. */
/* ================================================================= */
/* Colors */
/* ================================================================= */
/* Layer 1: Primitives (lowest priority) */
/**
* Primitive Color Tokens
* Raw color values - DO NOT reference directly in components
* Use semantic tokens from base.css / soft.css instead
*/
:root {
/* Development */
--undefined: #FF00FF;
/* Base */
--white: #FFFFFF;
--black: #000000;
--black-22: #222222;
--black-27: #272727;
/* Blue Palette */
--blue-700: #0057A8;
--blue-650: #1A6FC2;
--blue-600: #0C70CC;
--blue-575: #2383DE;
--blue-550: #1f84e8;
--blue-500: #298BFA;
--blue-450: #3d98f2;
--blue-400: #1C9FFE;
--blue-100: #D4E8FE;
--blue-50: #E8F4FD;
--blue-44: #E9EBEF;
--blue-37: #EEF0F3;
--blue-25: #F5F8FA;
/* Gray Scale */
--gray-950: #001224;
--gray-900: #1A2634;
--gray-850: #334856;
--gray-800: #4C5862;
--gray-700: #6A707E;
--gray-500: #A2A7B0;
--gray-300: #D3D8DD;
--gray-125: #E3E3E3;
--gray-100: #ECECEC;
--gray-50: #EEEEEE;
--gray-37: #F1F1F1;
--gray-25: #F7F7F7;
/* Cream */
--cream-50: #F5F5F4;
/* Semantic Colors */
--yellow-50: #FFFBE1;
--green-500: #28B674;
--green-50: #ECFDF5;
--purple-600: #800080;
--purple-400: #B882E6;
--red-500: #E74C3C;
--red-50: #FDEDEC;
--amber-500: #F39C12;
--amber-300: #E8BA6A;
--amber-50: #FEF5E7;
/* Sage Green */
--sage-500: #6B9172;
--sage-400: #5A9966;
--sage-50: #EDF2EE;
--sage-75: #E0EBE3;
/* Neutral Gray Scale (dark themes) */
--neutral-950: #121212;
--neutral-925: #161616;
--neutral-900: #1a1a1a;
--neutral-890: #1b1b1b;
--neutral-875: #1e1e1e;
--neutral-860: #1f1f1f;
--neutral-850: #232323;
--neutral-825: #282828;
--neutral-800: #2d2d2d;
--neutral-750: #333333;
--neutral-700: #3c3c3c;
--neutral-650: #454545;
--neutral-600: #4f4f4f;
--neutral-500: #6e6e6e;
--neutral-400: #8f8f8f;
--neutral-300: #b0b0b0;
--neutral-200: #d4d4d4;
--neutral-100: #e8e8e8;
}
/* Layer 2: Base palette (includes light + dark schemes) */
/**
* Base Palette (Blue Theme) - FOUNDATION PALETTE
*
* This is the foundational palette that defines the complete semantic token vocabulary
* for the entire design system. All other palettes inherit from this and override only
* what differs from these defaults.
*
* Purpose: Professional, trustworthy color scheme optimized for authority and clarity
*
* Use Cases:
* - The safe default for users with no strong palette preference
* - Users who prefer professional, authoritative color schemes
*
* Color Philosophy:
* Blue conveys trust, reliability, and authority - the language of banks, government,
* and enterprise. High contrast ensures accessibility and clarity without ambiguity.
* Professional without being cold, serious without being rigid. This is the universal
* business baseline that works across contexts where other palettes might feel too
* playful, warm, or unconventional.
*
* Characteristics:
* - Color family: blue (trust & authority)
* - Saturation: moderate (professional, not playful)
* - Contrast: high (WCAG AA+ compliance)
* - Temperature: cool-neutral (universal appropriateness)
*
* Extending this palette:
* New semantic tokens should maintain professional, authoritative tone. Prioritize
* clarity over personality. Default to blue family for interactive elements. Use
* conventional semantic colors (red=danger, green=success, amber=warning). Ensure
* accessibility first - contrast over aesthetics. When in doubt, choose the safest,
* most professional option.
*
* Dark Scheme:
* Universal dark foundation that works across all color palettes. Cool-neutral
* grays recede visually and read as truly neutral - neither asserting warmth nor
* coldness - providing a professional backdrop that doesn't compete with accent
* colors. Whether blue, terracotta, or future hues, the accent defines personality
* while surfaces remain neutral. Inverted elevation hierarchy (darker = base,
* lighter = elevated). Other palettes inherit this and override only when their
* specific hue needs dark adjustments for contrast.
*/
/* =================================================================== */
/* LIGHT SCHEME - Base Blue Palette */
/* =================================================================== */
:root {
/* =================================================================== */
/* SURFACE HIERARCHY - Background colors for different UI layers */
/* =================================================================== */
/* Main page/app background */
--surface: var(--blue-50);
/* Primary reading surfaces, elevated above page background */
--surface-raised: var(--white);
/* Recessed/sunken areas - input fields, form controls */
--surface-sunken: var(--white);
/* Floating overlays like tooltips, dropdowns, popovers */
--surface-overlay: var(--white);
/* Inverted sections (dark backgrounds in light theme) */
--surface-inverse: var(--gray-950);
/* Table headers - column/row labels in data tables */
--surface-header: var(--blue-25);
/* Structural surface for grouping content blocks, alternates with --surface-raised in nested layouts */
--surface-container: var(--blue-44);
/* =================================================================== */
/* CONTENT HIERARCHY - Text and icon colors */
/* =================================================================== */
/* Primary text - headlines, body text, main content */
--content: var(--gray-950);
/* Secondary text - labels, descriptions, supporting info */
--content-secondary: var(--gray-700);
/* Tertiary text - hints, timestamps, least important info */
--content-tertiary: var(--gray-500);
/* Placeholder text in form inputs - hints before user input */
--content-placeholder: var(--gray-500);
/* Disabled text and icons */
--content-disabled: var(--gray-300);
/* Text on dark/inverted backgrounds (usually white in light theme) */
--content-inverse: var(--white);
/* Link text color */
--content-link: var(--blue-450);
/* Visited link color (optional, often same as link) */
--content-link-visited: var(--purple-600);
/* =================================================================== */
/* INTERACTIVE ELEMENTS - Buttons, controls, selections */
/* =================================================================== */
/* Primary brand color - main actions, primary buttons, active states */
--accent: var(--blue-500);
/* Hover state for primary actions */
--accent-hover: var(--blue-400);
/* Active/pressed state for primary actions */
--accent-active: var(--blue-600);
/* Background for selected items, highlighted rows, active tabs */
--accent-surface: var(--blue-50);
/* Subtle background hover for list items, table rows */
--accent-surface-hover: var(--blue-100);
/* =================================================================== */
/* BORDERS & DIVIDERS */
/* =================================================================== */
/* Default borders - cards, inputs, dividers */
--border: var(--gray-300);
/* Strong/emphasized borders - section dividers, active input borders */
--border-strong: var(--gray-500);
/* Subtle/faint borders - table rows, subtle separators */
--border-subtle: var(--gray-100);
/* Border for focused inputs and controls */
--border-focus: var(--blue-500);
/* =================================================================== */
/* SEMANTIC STATES - Status and feedback colors */
/* =================================================================== */
/* Error/danger states - error messages, destructive actions */
--critical: var(--red-500);
--critical-hover: var(--red-500);
--critical-surface: var(--red-50);
--critical-border: var(--red-500);
/* Warning states - warnings, cautions, things needing attention */
--warning: var(--amber-500);
--warning-hover: var(--amber-500);
--warning-surface: var(--amber-50);
--warning-border: var(--amber-500);
/* Success states - success messages, positive feedback */
--success: var(--green-500);
--success-hover: var(--green-500);
--success-surface: var(--green-50);
--success-border: var(--green-500);
/* Info states - informational messages, tips, help text */
--info: var(--blue-500);
--info-hover: var(--blue-400);
--info-surface: var(--yellow-50);
--info-border: var(--gray-300);
/* =================================================================== */
/* FOCUS & INTERACTION - Keyboard navigation and interaction states */
/* =================================================================== */
/* Focus ring color for keyboard navigation */
--focus-ring: var(--blue-500);
/* Focus ring width (not a color but often defined here) */
--focus-ring-width: 2px;
/* Focus ring offset from element */
--focus-ring-offset: 2px;
/* =================================================================== */
/* SHADOWS & OVERLAYS - Not colors but related to visual hierarchy */
/* =================================================================== */
/* Shadow color for dropdowns, modals (usually semi-transparent black) */
--shadow: rgba(0, 0, 0, 0.1);
/* Overlay backdrop for modals (semi-transparent) */
--overlay-backdrop: rgba(0, 0, 0, 0.5);
/* Scrim for image overlays with text on top */
--overlay-scrim: rgba(0, 0, 0, 0.6);
}
/* =================================================================== */
/* DARK SCHEME - Neutral inversions that work for most palettes */
/* =================================================================== */
html[data-color-scheme="dark"] {
/* =================================================================== */
/* SURFACE HIERARCHY - Dark backgrounds with lighter = elevated */
/* =================================================================== */
/* Main background - deepest layer */
--surface: var(--neutral-900);
/* Primary reading surfaces, elevated above page background */
--surface-raised: var(--neutral-825);
/* Recessed/sunken areas - input fields, form controls */
--surface-sunken: var(--neutral-875);
/* Floating overlays (tooltips, dropdowns, popovers) - most elevated */
--surface-overlay: var(--neutral-800);
/* Inverted sections (light backgrounds in dark theme) */
--surface-inverse: var(--white);
/* Table headers - slightly elevated from base */
--surface-header: var(--neutral-700);
/* Structural surface for grouping content blocks, alternates with --surface in nested layouts */
--surface-container: var(--neutral-860);
/* =================================================================== */
/* CONTENT HIERARCHY - Light text on dark backgrounds */
/* =================================================================== */
/* Primary text - highest contrast for readability */
--content: var(--neutral-200);
/* Secondary text - slightly dimmed but still clear */
--content-secondary: var(--neutral-300);
/* Tertiary text - de-emphasized, less important */
--content-tertiary: var(--neutral-500);
/* Placeholder text - dim hints in inputs (lighter for fancyplaceholder contrast) */
--content-placeholder: var(--neutral-500);
/* Disabled text - clearly non-interactive */
--content-disabled: var(--neutral-700);
/* Text on light/inverted backgrounds */
--content-inverse: var(--neutral-950);
/* Link text - brighter blue for contrast */
--content-link: var(--blue-400);
/* Visited link color */
--content-link-visited: var(--purple-400);
/* =================================================================== */
/* INTERACTIVE ELEMENTS - Bright accents for visibility */
/* =================================================================== */
/* Primary interactive color - buttons, active states (lighter for dark bg) */
--accent: var(--blue-400);
/* Hover state - brighter for feedback */
--accent-hover: var(--blue-450);
/* Active/pressed state - darker to show depth */
--accent-active: var(--blue-500);
/* Selection backgrounds - subtle neutral elevation */
--accent-surface: var(--neutral-850);
/* Hover for selection backgrounds */
--accent-surface-hover: var(--neutral-800);
/* =================================================================== */
/* BORDERS & DIVIDERS - Lighter than background for visibility */
/* =================================================================== */
/* Default borders - clearly visible separators */
--border: var(--neutral-750);
/* Strong borders - more prominent emphasis */
--border-strong: var(--neutral-650);
/* Subtle borders - barely visible separators */
--border-subtle: var(--neutral-825);
/* Focus borders - bright accent for clarity */
--border-focus: var(--blue-400);
/* =================================================================== */
/* SEMANTIC STATES - Bright semantic colors on dark backgrounds */
/* =================================================================== */
/* Error/danger states - keep existing red for visibility */
--critical: var(--red-500);
--critical-hover: var(--red-500);
--critical-surface: var(--neutral-900);
--critical-border: var(--red-500);
/* Warning states - amber works well in dark mode */
--warning: var(--amber-500);
--warning-hover: var(--amber-500);
--warning-surface: var(--neutral-900);
--warning-border: var(--amber-500);
/* Success states - keep existing green */
--success: var(--green-500);
--success-hover: var(--green-500);
--success-surface: var(--neutral-900);
--success-border: var(--green-500);
/* Info states - use brighter blue for contrast */
--info: var(--blue-400);
--info-hover: var(--blue-500);
--info-surface: var(--neutral-900);
--info-border: var(--blue-400);
/* =================================================================== */
/* FOCUS & INTERACTION - Keyboard navigation visibility */
/* =================================================================== */
/* Focus ring - bright blue for clear visibility */
--focus-ring: var(--blue-400);
/* Focus ring width and offset inherited from light mode */
/* =================================================================== */
/* SHADOWS & OVERLAYS - Depth and modal backgrounds */
/* =================================================================== */
/* Shadow for elevation - darker for depth perception */
--shadow: rgba(0, 0, 0, 0.5);
/* Modal backdrop - more opaque in dark mode */
--overlay-backdrop: rgba(0, 0, 0, 0.8);
/* Image overlay scrim - dark for text readability */
--overlay-scrim: rgba(0, 0, 0, 0.8);
}
/* Layer 3: Palette variations (override base palette as needed) */
/**
* Palette: Soft
* Purpose: Neutral, calm surfaces with professional blue accents for comfortable extended use
*
* Use Cases:
* - Users who want warm, comfortable interface without strong color personality
* - Data-intensive applications requiring readable tables and clear hierarchy
* - Extended work sessions where eye comfort matters
* - Users who prefer subtle warmth over clinical whites
*
* Color Philosophy:
* Creates calm, professional atmosphere through soft neutral tones with minimal saturation.
* Header belongs to "raised content" level — table headers live inside cards, so they
* should be visually close to raised (white). This ensures clean card interiors while
* page background provides contrast. Maintains professionalism without coldness.
*
* Characteristics:
* - Color family: cool neutral (blue-gray tint)
* - Saturation: very low (soft, clean)
* - Contrast: comfortable (light borders, flat surfaces)
* - Temperature: cool-neutral
*
* Surface Hierarchy:
* surface #EEF0F3 ← page background (cool blue-gray)
* container #E9EBEF ← inset zones within cards (well/grouping surfaces)
* header #F7F7F7 ← table headers (same as container level)
* raised #FFFFFF ← cards, modals, content surfaces (white)
*
* Extending this palette:
* New semantic tokens should maintain neutral, calm character. Keep saturation very low.
* Interactive elements use professional blue (same as base). Avoid warm browns or
* When in doubt, choose more neutral option.
*/
[data-color-palette="soft"] {
/* =================================================================== */
/* SURFACE HIERARCHY */
/* =================================================================== */
--surface: var(--white);
--surface-raised: var(--white);
--surface-sunken: var(--white);
--surface-overlay: var(--white);
--surface-header: var(--gray-25);
--surface-container: var(--gray-100);
/* =================================================================== */
/* CONTENT HIERARCHY */
/* =================================================================== */
--content: var(--gray-950);
--content-secondary: var(--gray-700);
--content-tertiary: var(--gray-500);
--content-placeholder: var(--gray-500);
--content-disabled: var(--gray-300);
/* =================================================================== */
/* INTERACTIVE ELEMENTS */
/* =================================================================== */
--accent: var(--blue-575);
--accent-hover: var(--blue-650);
--accent-active: var(--blue-700);
--accent-surface: var(--gray-25);
--accent-surface-hover: var(--gray-37);
--content-link: var(--blue-650);
--content-link-visited: var(--purple-600);
--border-focus: var(--blue-575);
--focus-ring: var(--blue-575);
/* =================================================================== */
/* BORDERS & DIVIDERS */
/* =================================================================== */
--border: rgba(0, 0, 0, 0.17);
--border-strong: rgba(0, 0, 0, 0.40);
--border-subtle: rgba(0, 0, 0, 0.04);
/* =================================================================== */
/* SEMANTIC STATES */
/* =================================================================== */
--critical: var(--red-500);
--critical-hover: var(--red-500);
--critical-surface: var(--red-50);
--critical-border: var(--red-500);
--warning: var(--amber-500);
--warning-hover: var(--amber-500);
--warning-surface: var(--amber-50);
--warning-border: var(--amber-500);
--success: var(--sage-400);
--success-hover: var(--sage-500);
--success-surface: var(--sage-75);
--success-border: var(--sage-400);
--info: var(--blue-575);
--info-hover: var(--blue-650);
--info-surface: var(--amber-50);
--info-border: var(--gray-300);
/* =================================================================== */
/* INVERSE SURFACES */
/* =================================================================== */
--surface-inverse: var(--gray-950);
--content-inverse: var(--white);
/* =================================================================== */
/* SHADOWS */
/* =================================================================== */
--shadow: rgba(0, 0, 0, 0.1);
--overlay-backdrop: rgba(0, 0, 0, 0.5);
--overlay-scrim: rgba(0, 0, 0, 0.6);
}
[data-color-palette="soft"][data-color-scheme="dark"] {
--accent: var(--blue-500);
--accent-hover: var(--blue-575);
--accent-active: var(--blue-650);
--border-focus: var(--blue-500);
}
/**
* Palette: Contrast
* Purpose: Enhanced contrast for improved readability and accessibility compliance
*
* Use Cases:
* - Users with low vision who need stronger color differentiation
* - Users working in bright environments where standard contrast is insufficient
* - Users requiring WCAG AAA compliance (7:1 contrast ratio)
* - Users who prefer sharper visual hierarchy and clearer element boundaries
*
* Color Philosophy:
* Maximizes visual distinction between all interface elements. Uses stronger borders,
* darker text, and higher-contrast interactive states. Prioritizes legibility and
* clarity over aesthetics. Thicker focus indicators aid keyboard navigation. All
* color choices meet or exceed WCAG AAA standards.
*
* Characteristics:
* - Color family: neutral (high contrast grays and blues)
* - Saturation: moderate (strong but not harsh)
* - Contrast: maximum (WCAG AAA compliant)
* - Temperature: neutral-cool (clarity focused)
*
* Extending this palette:
* New semantic tokens should maintain high contrast ratios. Prefer darker shades
* for text and borders, lighter shades for backgrounds. Interactive elements need
* stronger visual weight. Avoid subtle grays - use defined steps for clear hierarchy.
*/
/* Light scheme overrides - enhanced contrast from base */
[data-color-palette="contrast"] {
/* =================================================================== */
/* SURFACE HIERARCHY - High contrast backgrounds */
/* =================================================================== */
--surface: var(--white);
--surface-raised: var(--white);
--surface-sunken: var(--gray-100);
--surface-overlay: var(--white);
--surface-inverse: var(--gray-950);
--surface-header: var(--gray-100);
--surface-container: var(--gray-100);
/* =================================================================== */
/* CONTENT HIERARCHY - Maximum text contrast */
/* =================================================================== */
--content: var(--black);
--content-secondary: var(--gray-800);
--content-tertiary: var(--gray-700);
--content-placeholder: var(--gray-500);
--content-disabled: var(--gray-300);
--content-inverse: var(--white);
--content-link: var(--blue-600);
--content-link-visited: var(--purple-600);
/* =================================================================== */
/* INTERACTIVE ELEMENTS - Stronger accent for visibility */
/* =================================================================== */
--accent: var(--blue-600);
--accent-hover: var(--blue-500);
--accent-active: var(--blue-600);
--accent-surface: var(--blue-50);
--accent-surface-hover: var(--blue-100);
/* =================================================================== */
/* BORDERS & DIVIDERS - Stronger definition */
/* =================================================================== */
--border: var(--gray-500);
--border-strong: var(--gray-700);
--border-subtle: var(--gray-300);
--border-focus: var(--blue-600);
/* =================================================================== */
/* SEMANTIC STATES - High contrast feedback */
/* =================================================================== */
--critical: var(--red-500);
--critical-hover: var(--red-500);
--critical-surface: var(--red-50);
--critical-border: var(--red-500);
--warning: var(--amber-500);
--warning-hover: var(--amber-500);
--warning-surface: var(--amber-50);
--warning-border: var(--amber-500);
--success: var(--green-500);
--success-hover: var(--green-500);
--success-surface: var(--yellow-50);
--success-border: var(--green-500);
--info: var(--blue-600);
--info-hover: var(--blue-500);
--info-surface: var(--yellow-50);
--info-border: var(--blue-600);
/* =================================================================== */
/* FOCUS & INTERACTION - Enhanced keyboard navigation */
/* =================================================================== */
--focus-ring: var(--blue-600);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
/* =================================================================== */
/* SHADOWS & OVERLAYS - Stronger depth */
/* =================================================================== */
--shadow: rgba(0, 0, 0, 0.2);
--overlay-backdrop: rgba(0, 0, 0, 0.6);
--overlay-scrim: rgba(0, 0, 0, 0.75);
}
/* Dark scheme adjustments - maximum contrast on dark backgrounds */
[data-color-palette="contrast"][data-color-scheme="dark"] {
/* =================================================================== */
/* SURFACE HIERARCHY - True black for maximum separation */
/* =================================================================== */
--surface: var(--black);
--surface-raised: var(--gray-950);
--surface-sunken: var(--gray-950);
--surface-overlay: var(--gray-950);
--surface-inverse: var(--white);
--surface-header: var(--gray-900);
/* =================================================================== */
/* CONTENT HIERARCHY - Pure white for maximum contrast */
/* =================================================================== */
--content: var(--white);
--content-secondary: var(--gray-100);
--content-tertiary: var(--gray-300);
--content-placeholder: var(--gray-500);
--content-disabled: var(--gray-700);
--content-inverse: var(--black);
--content-link: var(--blue-400);
--content-link-visited: var(--purple-400);
/* =================================================================== */
/* INTERACTIVE ELEMENTS - Bright accent for dark backgrounds */
/* =================================================================== */
--accent: var(--blue-450);
--accent-hover: var(--blue-400);
--accent-active: var(--blue-500);
--accent-surface: var(--gray-800);
--accent-surface-hover: var(--gray-700);
/* =================================================================== */
/* BORDERS & DIVIDERS - Lighter for dark theme visibility */
/* =================================================================== */
--border: var(--gray-500);
--border-strong: var(--gray-300);
--border-subtle: var(--gray-700);
--border-focus: var(--blue-450);
/* =================================================================== */
/* SEMANTIC STATES - Bright colors for dark backgrounds */
/* =================================================================== */
--critical: var(--red-500);
--critical-hover: var(--red-500);
--critical-surface: var(--gray-900);
--critical-border: var(--red-500);
--warning: var(--amber-500);
--warning-hover: var(--amber-500);
--warning-surface: var(--gray-900);
--warning-border: var(--amber-500);
--success: var(--green-500);
--success-hover: var(--green-500);
--success-surface: var(--gray-900);
--success-border: var(--green-500);
--info: var(--blue-450);
--info-hover: var(--blue-400);
--info-surface: var(--gray-900);
--info-border: var(--blue-450);
/* =================================================================== */
/* FOCUS & INTERACTION - Bright indicators on dark */
/* =================================================================== */
--focus-ring: var(--blue-450);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
/* =================================================================== */
/* SHADOWS & OVERLAYS - Darker overlays for depth */
/* =================================================================== */
--shadow: rgba(0, 0, 0, 0.5);
--overlay-backdrop: rgba(0, 0, 0, 0.8);
--overlay-scrim: rgba(0, 0, 0, 0.85);
}
/* ================================================================= */
/* Boundary */
/* ================================================================= */
/**
* Boundary Tokens
* Visual separation strategy for containers: how blocks are distinguished from their surroundings.
* Combines border and shadow approaches depending on palette context.
*
* Colored palettes (base): shadow-based separation, no borders.
* Background contrast provides edge definition, shadows add perceived depth.
*
* White palettes (soft, contrast): border-based separation.
* White-on-white needs explicit edges. Soft adds light shadow for large blocks
* where border alone is insufficient (e.g. charts with internal grid lines).
*/
:root {
--border-block: 0.5px solid rgba(0, 0, 0, 0.10);
--shadow-sm: 0 3px 8px -1px rgba(0, 0, 0, 0.07), 0 2px 4px 0 rgba(0, 0, 0, 0.03);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-color-palette="soft"] {
--border-block: 1px solid rgba(0, 0, 0, 0.10);
--shadow-sm: 0 3px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-color-palette="contrast"] {
--border-block: 1px solid rgba(0, 0, 0, 0.25);
--shadow-sm: none;
--shadow-md: none;
}
[data-color-scheme="dark"] {
--border-block: 1px solid rgba(98, 98, 98, 0.2);
--shadow-sm: none;
--shadow-md: none;
}
/* ================================================================= */
/* Sizing */
/* ================================================================= */
/* Border radius tokens */
:root {
/* Top-level content containers: cards, panels, page sections */
--radius-block: 8px;
/* Nested cards within a parent card (e.g. issue-card inside kanban column) */
--radius-block-inset: 6px;
/* Interactive controls: buttons, inputs, selects, checkboxes */
--radius-control: 4px;
}
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--spacing-block: var(--space-6);
}
/* ================================================================= */
/* Typography */
/* ================================================================= */
/**
* Font Face Definitions
* Load custom fonts for the design system
*/
/* cyrillic */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/css/fonts/Inter/Inter-Variable-Cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/css/fonts/Inter/Inter-Variable-Latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**
* Primitive Typography Tokens
* Font stacks and base values - foundation for semantic typography tokens
*
* Font stacks based on: https://systemfontstack.com/
*/
:root {
/* ================================================================= */
/* Font Stacks */
/* ================================================================= */
/* System font stacks optimized for cross-platform consistency. */
/* Order: Apple → Windows → Linux → Android → Generic fallback */
/* ================================================================= */
--font-sans:
"Inter",
-apple-system,
BlinkMacSystemFont,
avenir next,
avenir,
segoe ui,
helvetica neue,
Adwaita Sans,
Cantarell,
Ubuntu,
roboto,
noto,
helvetica,
arial,
sans-serif;
--font-mono:
Menlo,
Consolas,
Monaco,
Adwaita Mono,
Liberation Mono,
Lucida Console,
monospace;
/* ================================================================= */
/* Semantic Font Mappings */
/* ================================================================= */
/* Components reference these tokens, not primitive stacks directly. */
/* Single-font approach: all UI text uses sans, only code uses mono. */
/* ================================================================= */
--font-body: var(--font-sans);
--font-code: var(--font-mono);
/* ================================================================= */
/* Type Scale */
/* ================================================================= */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
}
/*
Padding is intentionally not declared here — adopters set their own (table-cell padding, compact-card density,
inline-row tightness, etc.). For full-container blocks that want the conventional block padding, set
`padding: var(--spacing-block)` explicitly.
*/
.g-block {
background: var(--surface-raised);
border: var(--border-block);
border-radius: var(--radius-block);
box-shadow: var(--shadow-md);
}
/*
Canonical global hide utility. `!important` because adopters apply it on elements whose layout
(display: grid/flex/etc.) is set by a more specific selector, and `display: none` must win regardless.
*/
.g-hidden {
display: none !important;
}
.c-breadcrumbs {
margin-top: 16px;
margin-bottom: 16px;
font-size: 0.875rem;
font-weight: 400;
}
.c-breadcrumbs .crumb-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.c-breadcrumbs .crumb-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
}
.c-breadcrumbs .crumb-link {
color: var(--content-secondary);
text-decoration: none;
transition: color 200ms ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-breadcrumbs .crumb-link:hover {
color: var(--content);
}
.c-breadcrumbs .crumb-text {
color: var(--content-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-breadcrumbs .crumb-separator {
color: var(--content-tertiary);
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.c-breadcrumbs .crumb-separator svg {
width: 16px;
height: 16px;
}
.c-breadcrumbs .crumb-item.is-current {
color: var(--content-tertiary);
}
/*
Ui Decisions:
1. Fixed bottom positioning with high z-index
- Panel must overlay page content while user interacts with checkboxes
- z-index matches other fixed UI elements in the system
2. Panel hidden when no entities selected
- Visibility controlled by server-side rendering (element not present when count = 0)
- No JS-based show/hide needed
*/
.c-entity-inline-editor {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
background: var(--surface-raised);
border-top: 1px solid var(--border);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.c-entity-inline-editor .editor-count {
white-space: nowrap;
font-weight: 500;
color: var(--content-secondary);
}
.c-entity-inline-editor .editor-fields .form-node {
margin-bottom: 0;
}
.c-entity-inline-editor .editor-actions {
display: flex;
align-items: center;
gap: 8px;
}
.c-entity-inline-editor .editor-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: var(--radius-control);
background: transparent;
color: var(--content-secondary);
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.c-entity-inline-editor .editor-close:hover {
background: var(--accent-surface-hover);
color: var(--content);
}
/*
Ui Decisions:
1. No hover effects on rows
- Rows are large interactive areas; hover would create visual instability
- Per DesignRules: sustained-use calm over feedback density
2. No zebra striping
- Subtle row borders provide sufficient visual separation
- Keeps the table clean and calm for variable field counts
3. border-collapse: separate
- Required for per-cell border-bottom on rows (collapse merges cell borders)
- border-spacing: 0 eliminates gaps between cells
4. Frame (background, border, radius, shadow) delegated to shared .g-block utility
- .c-elist wraps the table with the standard raised-surface treatment
- Pagination footer (.elist-footer) sits inside the frame, alongside the table
*/
.c-elist {
/* Constrains child backgrounds to .g-block's corner --radius-block */
overflow: hidden;
}
/* Empty state: hide the table entirely */
.c-elist.is-empty .elist-table {
display: none;
}
/* ============== TABLE STRUCTURE ============== */
.c-elist .elist-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
color: var(--content);
}
/* ============== HEADER ============== */
.c-elist .elist-header th {
padding: 8px 12px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--content-secondary);
text-align: left;
background: var(--surface-header);
border-bottom: 2px solid var(--border-strong);
white-space: nowrap;
}
/* Shrink-fit empty header columns (e.g. checkbox) */
.c-elist .elist-header th:empty {
width: 0;
padding-left: 12px;
padding-right: 4px;
}
/* ============== DATA ROWS ============== */
.c-elist .elist-row td {
padding: 8px 12px;
vertical-align: middle;
border-bottom: 1px solid var(--border-subtle);
font-size: 0.875rem;
line-height: 1.5;
}
/* Scope to last tbody so multi-page append doesn't apply at each page boundary */
.c-elist .elist-page:last-of-type .elist-row:last-child td {
border-bottom: none;
}
/* ============== CHECKBOX CELLS ============== */
.c-elist .elist-table input[type="checkbox"] {
margin: 0;
accent-color: var(--accent);
}
/* Shrink-fit cells containing only a checkbox */
.c-elist .elist-row td:has(> input[type="checkbox"]:only-child) {
width: 0;
padding-left: 12px;
padding-right: 4px;
text-align: center;
}
/* ============== LINKS ============== */
.c-elist .elist-row td a {
color: var(--content-link);
text-decoration: none;
transition: color 0.15s ease;
}
.c-elist .elist-row td a:hover {
color: var(--accent-hover);
}
.c-elist .elist-row td a:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
border-radius: 3px;
}
/* ============== ISSUE ID (copy-to-clipboard) ============== */
.c-elist .elist-issue-id {
color: var(--content-secondary);
cursor: pointer;
white-space: nowrap;
user-select: none;
transition: color 0.15s ease;
}
.c-elist .elist-issue-id:hover {
color: var(--accent-hover);
}
.c-elist .elist-issue-id:active {
color: var(--accent);
}
.c-elist .elist-row td:has(> .elist-issue-id) {
width: 0;
padding-right: 4px;
}
.elist-empty {
padding: 48px 24px;
text-align: center;
}
.c-widget-error {
padding: 12px 16px;
background: var(--critical-surface);
border: 1px solid var(--critical-border);
border-radius: 5px;
color: var(--critical);
}
/*
Ui Decisions:
1. Show-more is a defined bordered button, not a bare link
- Reads as a distinct control balanced with the paginator below
- Full border and rounded corners match paginator page-link styling
*/
.c-paginator-show-next {
display: block;
width: 100%;
margin: 12px 0 0;
padding: 8px 32px;
background: none;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--content-secondary);
font: inherit;
cursor: pointer;
text-align: center;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-paginator-show-next:hover {
background: var(--accent-surface-hover);
border-color: var(--accent);
color: var(--accent);
}
.c-paginator-show-next:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.c-paginator {
display: flex;
justify-content: center;
margin-top: 24px;
margin-bottom: 24px;
}
.c-paginator .page-list {
display: flex;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.c-paginator .page-link {
display: block;
padding: 8px 12px;
color: var(--content-link);
text-decoration: none;
border-radius: 6px;
transition: background-color 0.15s ease, color 0.15s ease;
min-width: 40px;
text-align: center;
}
.c-paginator .page-link:hover {
background: var(--accent-surface-hover);
color: var(--accent);
}
.c-paginator .page-link:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.c-paginator .page-item.is-active .page-link {
background: var(--accent-surface);
color: var(--accent);
border: 1px solid var(--accent);
cursor: default;
font-weight: 500;
}
.c-paginator .page-item.is-active .page-link:hover {
background: var(--accent-surface);
color: var(--accent);
}
.c-paginator .page-item.is-nav-control .page-link {
color: var(--content-secondary);
}
.c-paginator .page-item.is-nav-control .page-link:hover {
color: var(--accent);
}
/* ==========================================================================
Preloader Widget
Корпоративный прелоадер с 3D анимацией вращающихся колец.
Usage:
Модификаторы размера:
.c-preloader.is-small - 60px
.c-preloader.is-medium - 120px (default)
.c-preloader.is-large - 180px
========================================================================== */
.c-preloader-overlay {
display: none;
position: absolute;
inset: 0;
z-index: 50;
background: color-mix(in srgb, var(--surface) 80%, transparent);
cursor: wait;
}
.c-preloader-overlay.is-active {
display: flex;
align-items: center;
justify-content: center;
}
.c-preloader {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
transform: rotateZ(45deg);
perspective: 1000px;
color: var(--accent);
}
.c-preloader.is-small {
width: 60px;
height: 60px;
}
.c-preloader.is-large {
width: 180px;
height: 180px;
}
.c-preloader::before,
.c-preloader::after {
content: '';
display: block;
position: absolute;
inset: 0;
border-radius: 50%;
animation: preloader-spin 1s linear infinite;
}
.c-preloader::before {
transform: rotateX(70deg);
}
.c-preloader::after {
transform: rotateY(70deg);
animation-delay: 0.4s;
}
@keyframes preloader-spin {
0%, 100% { box-shadow: 0.2em 0 0 0 currentcolor; }
12% { box-shadow: 0.2em 0.2em 0 0 currentcolor; }
25% { box-shadow: 0 0.2em 0 0 currentcolor; }
37% { box-shadow: -0.2em 0.2em 0 0 currentcolor; }
50% { box-shadow: -0.2em 0 0 0 currentcolor; }
62% { box-shadow: -0.2em -0.2em 0 0 currentcolor; }
75% { box-shadow: 0 -0.2em 0 0 currentcolor; }
87% { box-shadow: 0.2em -0.2em 0 0 currentcolor; }
}
/* Upload Button Widget */
.c-upload-button {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background: var(--overlay-backdrop);
animation: fade-in 0.15s ease-out;
/* Widget-local tokens for consistent spacing */
--modal-padding: 30px;
--modal-border-radius: 8px;
--modal-min-width: 600px;
--modal-max-width: 800px;
--modal-spacing: 15px;
--block-border-radius: 4px;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.c-upload-button .upload-modal-content {
margin: auto;
background: var(--surface-raised);
color: var(--content);
padding: var(--modal-padding);
border-radius: var(--modal-border-radius);
border: 1px solid var(--border);
position: relative;
min-width: var(--modal-min-width);
max-width: var(--modal-max-width);
max-height: 80vh;
overflow-y: visible;
animation: scale-in 0.2s ease-out;
box-shadow: 0 20px 25px -5px var(--shadow), 0 10px 10px -5px var(--shadow);
}
@media (max-width: 640px) {
.c-upload-button .upload-modal-content {
min-width: auto;
width: 90vw;
padding: 20px;
}
}
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.c-upload-button .modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--content-secondary);
width: 30px;
height: 30px;
padding: 0;
transition: color 0.2s;
}
.c-upload-button .modal-close-btn:hover {
color: var(--content);
}
.c-upload-button .modal-close-btn:focus {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.c-upload-button .upload-modal-title {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
color: var(--content);
}
.c-upload-button .upload-modal-body {
margin-bottom: 20px;
min-height: 100px;
}
.c-upload-button .upload-modal-body > div:only-child {
color: var(--content-secondary);
font-style: italic;
}
.c-upload-button .upload-message {
padding: 10px var(--modal-spacing);
margin-bottom: var(--modal-spacing);
background: var(--info-surface);
border: 1px solid var(--info-border);
color: var(--content);
border-radius: var(--block-border-radius);
}
.c-upload-button .upload-message.is-success {
background: var(--success-surface);
border-color: var(--success-border);
color: var(--content);
}
.c-upload-button .upload-message.is-error {
background: var(--critical-surface);
border-color: var(--critical-border);
color: var(--content);
}
.c-upload-button .upload-file-info {
margin-top: 8px;
color: var(--content-secondary);
font-size: 13px;
}
.c-upload-button .upload-info-block {
padding: var(--modal-spacing);
margin-bottom: var(--modal-spacing);
background: var(--info-surface);
border: 1px solid var(--info-border);
color: var(--content);
border-radius: var(--block-border-radius);
}
.c-upload-button .upload-info-block strong {
color: var(--info);
}
.c-upload-button .upload-info-block p {
margin: 5px 0 0 0;
}
.c-upload-button .upload-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
/* Base Form Component
Container class: .c-base-form
Provides shared visual primitives for form widgets.
*/
/* Label */
.c-base-form .base-form-label {
font-size: 14px;
font-weight: 500;
color: var(--content);
}
/* Required marker */
.c-base-form .base-form-required {
color: var(--critical);
margin-left: 2px;
}
/* Hint icon (?) */
.c-base-form .base-form-hint-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 10px;
font-weight: 600;
font-style: normal;
color: var(--content-tertiary);
background: var(--surface-overlay);
cursor: help;
flex-shrink: 0;
vertical-align: middle;
transition: all 150ms ease;
border: 1px solid var(--border-subtle);
}
.c-base-form .base-form-hint-icon:hover {
color: var(--content-inverse);
background: var(--accent);
}
/* Form controls */
.c-base-form input[type="text"],
.c-base-form input[type="number"],
.c-base-form select {
box-sizing: border-box;
height: 36px;
margin: 0;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-control);
font-family: inherit;
font-size: 14px;
color: var(--content);
background-color: var(--surface-sunken);
transition: border-color 150ms ease;
}
.c-base-form input[type="text"]:hover,
.c-base-form input[type="number"]:hover,
.c-base-form select:hover {
border-color: var(--border-strong);
}
.c-base-form input[type="text"]:focus,
.c-base-form input[type="number"]:focus,
.c-base-form select:focus {
border-color: var(--border-focus);
outline: none;
}
.c-base-form input::placeholder {
color: var(--content-placeholder);
}
/* Error note */
.c-base-form .error-note {
display: none;
font-size: 13px;
color: var(--critical);
padding-top: 3px;
}
.c-base-form .is-error .error-note {
display: block;
}
.c-base-form .error-note p {
margin: 0;
}
input[type="checkbox"].c-checkbox {
--checkbox-color: var(--accent);
position: relative;
width: 1rem;
height: 1rem;
flex-shrink: 0;
margin: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: 3px;
background-color: var(--surface-sunken);
cursor: pointer;
appearance: none;
transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"].c-checkbox:hover {
border-color: var(--border-strong);
}
input[type="checkbox"].c-checkbox:focus {
outline: none;
}
input[type="checkbox"].c-checkbox:checked {
border-color: var(--checkbox-color);
background-color: var(--checkbox-color);
}
input[type="checkbox"].c-checkbox:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0.625rem;
height: 0.5rem;
background-color: var(--white);
mask-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
transform: translate(-50%, -50%);
}
input[type="checkbox"].c-checkbox:disabled {
opacity: 0.6;
cursor: not-allowed;
}
input.c-radio {
position: relative;
width: 1rem;
height: 1rem;
flex-shrink: 0;
margin: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: 50%;
background-color: var(--surface-sunken);
cursor: pointer;
appearance: none;
transition: border-color 0.15s;
}
input.c-radio:hover {
border-color: var(--border-strong);
}
input.c-radio:focus {
outline: none;
}
input.c-radio:checked {
border-color: var(--accent);
background-color: color-mix(in oklch, var(--surface-raised) 90%, white 10%);
}
input.c-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--accent);
transform: translate(-50%, -50%);
}
input.c-radio:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.c-form-hint {
container-type: inline-size;
padding: 16px;
color: var(--content);
font-size: 0.9375rem;
line-height: 1.5;
}
.c-form-hint.is-empty {
color: var(--content-tertiary);
}
.c-form-hint .form-hint-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
row-gap: 8px;
}
.c-form-hint .form-hint-item {
display: flex;
gap: 6px;
line-height: 1.5;
}
.c-form-hint .form-hint-label {
color: color-mix(in srgb, var(--content-secondary) 60%, var(--content-tertiary));
}
.c-form-hint .form-hint-value {
color: var(--content);
}
@container (max-width: 900px) {
.c-form-hint .form-hint-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (max-width: 600px) {
.c-form-hint .form-hint-grid {
grid-template-columns: 1fr;
}
}
.c-editable-select {
display: block;
position: relative;
width: 100%;
}
.c-editable-select .select,
.c-editable-select .input {
box-sizing: border-box;
width: 100%;
height: 36px;
padding: 8px 12px;
padding-right: 36px;
border: 1px solid var(--border);
border-radius: 4px;
font-family: inherit;
font-size: 14px;
color: var(--content);
background-color: var(--surface-sunken);
text-overflow: ellipsis;
}
.c-editable-select .select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.c-editable-select::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 20px;
height: 20px;
background-color: var(--content-tertiary);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
pointer-events: none;
transition: background-color 200ms ease;
}
.c-editable-select:has(.select.is-hidden)::after {
display: none;
}
.c-editable-select .input::-webkit-inner-spin-button,
.c-editable-select .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.c-editable-select .input[type="number"] {
-moz-appearance: textfield;
}
.c-editable-select .input.is-hidden + .clear-btn {
display: none;
}
.c-editable-select .clear-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 2px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--content-secondary, #555);
cursor: pointer;
transition: color 0.2s, background-color 0.2s;
}
.c-editable-select .clear-btn svg {
width: 20px;
height: 20px;
}
.c-editable-select .clear-btn:hover {
color: var(--content, #333);
background-color: var(--surface-hover, rgba(0, 0, 0, 0.08));
}
.c-editable-select .select.is-hidden, .c-editable-select .input.is-hidden{
display: none;
}
.c-chip-tree {
--chip-bg: color-mix(in srgb, var(--surface-header) 50%, var(--border));
--chip-bg-hover: color-mix(in srgb, var(--surface-header) 18%, var(--border));
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
}
[data-color-scheme="dark"] .c-chip-tree {
--chip-bg: color-mix(in srgb, var(--surface-inverse) 12%, var(--border-subtle));
--chip-bg-hover: color-mix(in srgb, var(--surface-inverse) 5%, var(--accent-surface-hover));
}
.c-chip-tree .chip-list {
display: contents;
}
.c-chip-tree .chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--chip-bg);
border-radius: 4px;
line-height: 1.4;
cursor: pointer;
transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.c-chip-tree .chip:hover {
background: var(--chip-bg-hover);
}
.c-chip-tree .chip.is-editing {
background: var(--accent-surface);
box-shadow: 0 0 0 2px var(--accent);
}
.c-chip-tree .chip.is-dragging {
background: var(--accent-surface);
box-shadow: 0 10px 25px -5px var(--shadow);
transform: rotate(2deg) scale(1.02);
z-index: 100;
}
.c-chip-tree .chip.is-placeholder {
background: transparent;
border: 2px dashed var(--accent);
box-sizing: border-box;
}
.c-chip-tree .chip-drag-handle {
display: none;
color: var(--content-tertiary);
font-size: 10px;
margin-right: 2px;
}
.c-chip-tree.is-draggable .chip-drag-handle {
display: inline;
}
.c-chip-tree .chip-text {
color: var(--content);
}
.c-chip-tree .chip-icon {
margin-left: 4px;
line-height: 1;
}
.c-chip-tree .chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
margin-left: 2px;
border: none;
background: transparent;
color: var(--content-tertiary);
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: color 0.15s, background-color 0.15s;
}
.c-chip-tree .chip-remove:hover {
color: var(--critical);
background: var(--critical-surface);
}
.c-chip-tree .chip-separator {
color: var(--content-tertiary);
font-size: 14px;
user-select: none;
}
.c-chip-tree .chip-add-button {
padding: 4px 8px;
border: none;
background: transparent;
color: var(--accent);
cursor: pointer;
transition: color 0.15s;
}
.c-chip-tree .chip-add-button:hover {
color: var(--accent-hover);
}
/* Disabled state */
.c-chip-tree.disabled .chip {
cursor: not-allowed;
opacity: 0.6;
}
.c-chip-tree.disabled .chip:hover {
background: var(--chip-bg);
}
.c-chip-tree.disabled .chip-remove {
display: none;
}
.c-chip-tree.disabled .chip-add-button {
opacity: 0.6;
cursor: not-allowed;
}
.c-chip-tree.disabled .chip-add-button:hover {
color: var(--accent);
}
.c-chip-tree .chip-inputs,
.c-chip-tree .chip-dropdown,
.c-chip-tree .chip-add-button.is-hidden {
display: none;
}
.c-chip-tree .chip-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 100;
min-width: 320px;
width: max-content;
max-width: min(560px, 90vw);
margin-top: 4px;
background: var(--surface-overlay);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow);
}
.c-chip-tree .chip-dropdown.is-open {
display: block;
}
.c-chip-tree .dropdown-search {
display: block;
width: 100%;
margin: 0;
padding: 6px 8px;
border-radius: 8px;
outline: none;
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
border: none;
background-color: var(--surface-sunken);
}
.c-chip-tree .dropdown-search:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 10%, transparent);
}
.c-chip-tree .dropdown-options {
max-height: 360px;
overflow-y: auto;
border-top: 1px solid var(--border);
}
.c-chip-tree .dropdown-option {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
color: var(--content);
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s;
}
.c-chip-tree .dropdown-option.is-disabled {
color: var(--content-tertiary);
cursor: not-allowed;
}
.c-chip-tree .dropdown-option.is-disabled:hover {
background: transparent;
}
.c-chip-tree .dropdown-option.is-filter-hidden,
.c-chip-tree .dropdown-option.is-excluded {
display: none;
}
/* Native inputs in dropdown — state managed by JS */
.c-chip-tree .js-option-input {
pointer-events: none;
}
.c-chip-tree .c-checkbox:indeterminate {
border-color: var(--accent);
background-color: var(--accent);
}
.c-chip-tree .c-checkbox:indeterminate::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 2px;
background-color: var(--white);
transform: translate(-50%, -50%);
}
/* Non-selectable group nodes */
.c-chip-tree .dropdown-option.is-group {
font-weight: 600;
color: var(--content);
cursor: not-allowed;
}
.c-chip-tree .dropdown-option.is-group:hover {
background: transparent;
}
/* Option text and labels */
.c-chip-tree .option-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.c-chip-tree .dropdown-empty {
padding: 16px;
text-align: center;
color: var(--content-tertiary);
}
/*
Tree-select picker styles.
The dropdown is anchored to the outer .c-tree-select via absolute positioning so it stays
stable when the chip area wraps onto multiple lines (anchoring to a specific chip would
re-anchor mid-wrap and feel jumpy — same reason the legacy view wrapped the dropdown as a
sibling of the chip area inside the field root).
Row DOM is two layers: outer .tree-select-row owns layout (data-id, state classes, optional
.is-not-selectable), inner .tree-select-row-content owns the hover background and rounded
corners. Splitting them keeps the hover highlight clear of the indentation column where the
guide line lives. Selection state is rendered entirely through the native checkbox
(:checked / :indeterminate) — the row itself never carries a selection background.
Nesting is expressed naturally via .tree-select-children's margin-left + border-left, so each
level cumulatively indents and the vertical guide line for the level falls directly under the
ancestor row's chevron. No per-row depth marker is needed — CSS structural nesting carries it.
Children-container visibility is driven by the adjacent .tree-select-row's `is-collapsed`
class — JS owns the class toggle, CSS owns the hide/show.
*/
.c-tree-select {
position: relative;
font-size: 14px;
background: var(--surface-sunken);
}
.c-tree-select .tree-select-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 36px;
padding: 6px 36px 6px 8px;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: var(--radius-control);
cursor: pointer;
transition: border-color 150ms ease;
}
.c-tree-select .tree-select-chips::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 16px;
height: 12px;
background-color: var(--content-tertiary);
mask-image: url("data:image/svg+xml,");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px 12px;
pointer-events: none;
transition: background-color 200ms ease;
}
.c-tree-select .tree-select-chips:hover {
border-color: var(--border-strong);
}
.c-tree-select.is-open .tree-select-chips {
border-color: var(--border-focus);
}
/* Validation state. The engine's `.form-node.is-error` border rule only reaches a field's own
control (direct child of `.form-control`), and tree-select's control is the chips box — a div,
not an — so the widget paints the critical border here itself. Scoping it to the chips
box keeps the error affordance off the dropdown internals (filter, row checkboxes/radios). */
.c-form .form-node.is-error .tree-select-chips {
border-color: var(--critical-border);
}
.c-tree-select .tree-select-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
background: color-mix(in srgb, var(--surface-header) 50%, var(--border));
border-radius: 4px;
color: var(--content);
line-height: 1.4;
}
.c-tree-select .tree-select-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 2px;
border: none;
background: transparent;
color: var(--content-tertiary);
font-size: 16px;
line-height: 1.2;
cursor: pointer;
transition: color 150ms ease;
}
.c-tree-select .tree-select-chip-remove:hover {
color: var(--critical);
}
.c-tree-select .tree-select-inputs {
display: none;
}
/* === Dropdown === */
.c-tree-select .tree-select-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
min-width: 320px;
width: max-content;
max-width: min(560px, 90vw);
margin-top: 4px;
overflow: hidden;
background: var(--surface-overlay);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow);
}
.c-tree-select .tree-select-dropdown.is-open {
display: block;
}
/* Scroll lives on the tree, not the dropdown — so the filter input + empty-state stay anchored
at the top of the dropdown surface without needing position:sticky tricks. `overflow:hidden`
on the dropdown above keeps the rounded corners clipping the tree's scrollbar track. */
.c-tree-select .tree-select-tree {
padding: 4px;
max-height: 320px;
overflow-y: auto;
}
/* === Row === */
.c-tree-select .tree-select-row {
display: block;
color: var(--content);
white-space: nowrap;
}
.c-tree-select .tree-select-row-content {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
transition: background-color 150ms ease;
}
.c-tree-select .tree-select-row-content:hover {
background-color: color-mix(in srgb, var(--surface-overlay), var(--content-secondary) 10%);
}
/* Target the mode-agnostic hook class, not the type/c-checkbox combo: single-select mode swaps
the checkbox for a radio (c-radio), and a non-selectable parent must hide its control either way. */
.c-tree-select .tree-select-row.is-not-selectable input.tree-select-checkbox:disabled {
display:none;
}
/* Chevron container hosts a hover-revealed "button" background; the icon itself lives in the
::before pseudo via mask-image so the container's background-color doesn't double as the icon
color (mask-image uses background-color to paint the masked region). Cf. checkbox.css for the
mask-image-from-SVG-data-URL precedent. */
.c-tree-select .tree-select-chevron,
.c-tree-select .tree-select-chevron-spacer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.c-tree-select .tree-select-chevron {
border-radius: 50%;
cursor: pointer;
transition: background-color 150ms ease;
}
.c-tree-select .tree-select-row-content:hover .tree-select-chevron {
background-color: color-mix(in srgb, var(--surface-overlay), var(--content) 20%);
}
.c-tree-select .tree-select-row-content:hover .tree-select-chevron::before {
background-color: var(--content-secondary);
}
.c-tree-select .tree-select-chevron::before {
content: '';
display: block;
width: 12px;
height: 12px;
background-color: var(--content-tertiary);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4 L10 8 L6 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
transition: transform 150ms ease;
}
.c-tree-select .tree-select-row.is-expanded > .tree-select-row-content > .tree-select-chevron::before {
transform: rotate(90deg);
}
/* Indeterminate visual on the native checkbox: accent-filled background with a centered dash —
mirrors the chip-tree precedent (chip-tree.css L221-235). The base `.c-checkbox` rule already
handles :checked, so :indeterminate is the only extra state to teach here. */
.c-tree-select input.tree-select-checkbox{
margin-top:1px;
}
.c-tree-select .c-checkbox:indeterminate {
border-color: var(--accent);
background-color: var(--accent);
}
.c-tree-select .c-checkbox:indeterminate::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 2px;
background-color: var(--white);
transform: translate(-50%, -50%);
}
.c-tree-select .tree-select-title {
flex: 1;
min-width: 0;
white-space: normal;
}
.c-tree-select .tree-select-row:has(+ .tree-select-children) > .tree-select-row-content > .tree-select-title {
font-weight: 500;
}
/* === Children container — cumulative indent per nesting level ===
margin-left aligns nested rows under the parent chevron column; padding-left adds
breathing room before the content. Stacking these gives consistent depth visualization
without any per-row depth tracking from JS. */
.c-tree-select .tree-select-children {
margin-left: 24px;
}
.c-tree-select .tree-select-row.is-collapsed + .tree-select-children {
display: none;
}
/* === Filter ===
The filter input is rendered server-side only when useFilter === true. Once typed, the JS
adds `.is-filtering` to .tree-select-tree, which overrides the collapse-hides-children rule
above so a match inside a default-collapsed branch stays visible without resetting the user's
manual collapse toggles. Non-matching, non-ancestor rows get `.is-filter-hidden`.
Input + empty-state are static siblings above the scrollable tree (the tree owns its own
max-height + overflow), so no sticky positioning is needed — the filter naturally stays in
place while only the tree scrolls. */
.c-tree-select .tree-select-filter {
display: block;
width: 100%;
padding: 8px 12px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid var(--border);
background-color: var(--surface-overlay);
outline: none;
font-size: 14px;
}
.c-tree-select .tree-select-filter:focus {
background-color: var(--surface-sunken);
}
/* Action band stacks with the filter input above and the hint below — matching border-bottom
visually groups the three header bands into a single zone separated from the scrollable tree.
Buttons render as text-links (no fill, accent-colored, underline-on-hover) so the band reads
as utility actions rather than primary CTAs — same lightweight feel as the hint band. */
.c-tree-select .tree-select-actions {
display: flex;
gap: 12px;
padding: 6px 12px;
background: var(--surface-overlay);
border-bottom: 1px solid var(--border);
}
.c-tree-select .tree-select-action {
padding: 0;
border: none;
background: transparent;
color: var(--accent);
font-size: 13px;
cursor: pointer;
}
.c-tree-select .tree-select-action:hover {
text-decoration: underline;
}
.c-tree-select .tree-select-hint {
padding: 8px 12px;
color: var(--content-tertiary);
font-size: 13px;
background: var(--surface-overlay);
border-bottom: 1px solid var(--border);
}
.c-tree-select .tree-select-row.is-filter-hidden {
display: none;
}
.c-tree-select .tree-select-tree.is-filtering .tree-select-row.is-collapsed + .tree-select-children {
display: block;
}
.c-tree-select .tree-select-tree.is-filtering .tree-select-row.is-user-collapsed + .tree-select-children {
display: none;
}
/* Highlight via text color + weight rather than background — a background tint reads as a "spot"
on the row and makes the rest of the title harder to scan. Accent color + bold telegraphs the
hit without breaking the line's reading flow. */
.c-tree-select .tree-select-title mark {
padding: 0;
background: transparent;
color: var(--accent);
font-weight: 600;
}
/* === Readonly state ===
`is-readonly` is emitted by FormInputNode::tagStateClasses() when the field is readonly.
CSS suppresses interactive affordances; JS guards block open() and chip-remove clicks. */
.c-tree-select.is-readonly .tree-select-chips {
cursor: default;
}
.c-tree-select.is-readonly .tree-select-chips:hover {
border-color: var(--border);
}
.c-tree-select.is-readonly .tree-select-chip-remove {
display: none;
}
/*
Ui Decisions:
1. Side-by-side labels via CSS Grid + subgrid for consistent alignment
- The label column is fit-content(16rem): it sizes to the widest label's content but
never past 16rem, so an outlier label (e.g. the long "укажите рассылку" instruction
on the bill form) wraps within the cap instead of stretching the whole column and
pushing every input far to the right. fit-content (not minmax(auto,16rem)) because a
minmax track with a definite max gets eagerly filled to that max by the grid's
"Maximize Tracks" step, which starves the 1fr input track in a narrow column (e.g. a
two-column form's right side) — fit-content leaves the slack for the input track.
- Labels may wrap (no white-space:nowrap) — required for the cap to take effect,
since an auto/max-content track measures unwrapped width regardless
- UiSpec: "labels positioned consistently, inputs aligned"
2. Compact density targeting filter forms
- 8px row gap, 12px column gap, 36px input height
- Dense enough for rapid repeated use
3. Subform children establish their own independent grid context
- Non-inline: vertical layout with shared label column
- Inline: horizontal flex layout, each child has own label+input grid
- Inline children flex-grow equally so their combined width matches regular inputs
4. Form-actions use subgrid to align buttons with the input column
- Submit buttons start at the same horizontal position as inputs
*/
/* === Form Width === */
/*
The page layout (.c-base-layout) is fluid up to 1280px, so the form must cap its own readable width
rather than sprawl. Top-level form only (form.c-form) — embedded subforms render as div.c-form and
must fill their slot. Two-column forms get a wider cap so each column stays usable; :has() keys off
the .form-columns wrapper the two-column branch emits (same modern-CSS bar as the subgrid below).
*/
form.c-form {
max-width: 640px;
}
form.c-form:has(.form-columns) {
max-width: 1280px;
}
/* === Node Row === */
.c-form .form-node > .form-label {
grid-column: 1;
}
.c-form .form-node > :not(.form-label) {
grid-column: 2;
}
/*
`.form-control` is the wrapper around `$node->render()` (see row.blade.php) — gives downstream CSS
a real "control column" target for layout (multi-button rows, link groups, grouped inputs) instead
of selecting through siblings of `.form-label`. Inputs no longer fill their grid track directly;
they fill this wrapper via `width: 100%` on the input/select base style below.
`min-width: 0` moved here from the input rule: the wrapper is now the grid item, so it's the
wrapper's min-content that has to be overridable to let the 1fr track shrink — without it a long