@charset "UTF-8"; /* =========================================================================== J2Web Design Tokens Copyright 2026 - Raul Herreros - Amtiri SpA Single source of truth for the J2Web / FX2Web design system. Loaded before j2w.css and fx2web.css; both consume these tokens. Theming: semantic colors use light-dark(). The page follows the OS preference by default; set data-theme="light" | "dark" on (HTML.setTheme) to force a theme. Fallback note: if support for pre-2024 browsers is ever required, replace each light-dark(a, b) with the duplicated-block pattern (@media (prefers-color-scheme: dark) + [data-theme] overrides). Token names stay stable, so the swap is contained to this file. =========================================================================== */ /* ========================================= THEME MECHANISM ========================================= */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ========================================= PRIMITIVES - Accent (blue) ========================================= */ --j2w-blue-50: #EFF6FF; --j2w-blue-100: #DBEAFE; --j2w-blue-200: #BFDBFE; --j2w-blue-300: #93C5FD; --j2w-blue-400: #60A5FA; --j2w-blue-500: #3B82F6; --j2w-blue-600: #2563EB; --j2w-blue-700: #1D4ED8; --j2w-blue-800: #1E40AF; --j2w-blue-900: #1E3A8A; /* ========================================= PRIMITIVES - Neutral (cool slate) ========================================= */ --j2w-gray-50: #F8FAFC; --j2w-gray-100: #F1F5F9; --j2w-gray-200: #E2E8F0; --j2w-gray-300: #CBD5E1; --j2w-gray-400: #94A3B8; --j2w-gray-500: #64748B; --j2w-gray-600: #475569; --j2w-gray-700: #334155; --j2w-gray-800: #1E293B; --j2w-gray-900: #0F172A; --j2w-gray-950: #020617; /* ========================================= PRIMITIVES - Danger (red) ========================================= */ --j2w-red-50: #FEF2F2; --j2w-red-500: #EF4444; --j2w-red-600: #DC2626; /* ========================================= PRIMITIVES - Radius ========================================= */ --j2w-radius-xs: 2px; --j2w-radius-sm: 4px; --j2w-radius-md: 6px; --j2w-radius-lg: 8px; --j2w-radius-xl: 12px; --j2w-radius-full: 999px; /* ========================================= PRIMITIVES - Controls One height for everything that can share a row: buttons, toggles and form fields. Left to intrinsic sizing each derives its own height from whatever it happens to contain - a line box, an icon, an input - so a toolbar mixing them comes out ragged, and a font-size override on one family silently desynchronises the rest. 30px is what the default text scale already produced, so declaring it changes nothing until an application retunes the token. ========================================= */ --j2w-control-height: 30px; /* ========================================= PRIMITIVES - Dialogs The floor a resizable dialog cannot be dragged below - small enough to shrink a dialog out of the way, large enough to keep its title and buttons reachable - and the ceiling no dialog grows past, so its grip stays on screen whatever preferred size a caller asks for. ========================================= */ --j2w-dialog-min-width: 240px; --j2w-dialog-min-height: 160px; --j2w-dialog-max-width: 90dvw; --j2w-dialog-max-height: 90dvh; /* ========================================= PRIMITIVES - Spacing (4px grid) ========================================= */ --j2w-space-1: 4px; --j2w-space-2: 8px; --j2w-space-3: 12px; --j2w-space-4: 16px; --j2w-space-6: 24px; --j2w-space-8: 32px; /* ========================================= PRIMITIVES - Typography ========================================= */ --j2w-font-sans: "Open Sans", system-ui, -apple-system, sans-serif; --j2w-text-xs: 0.75rem; --j2w-text-sm: 0.8125rem; --j2w-text-md: 0.875rem; --j2w-text-lg: 1rem; --j2w-text-xl: 1.25rem; --j2w-leading: 1.45; /* Controls are single-line and centred; the prose leading above would make their line box, not --j2w-control-height, decide how tall they are. */ --j2w-leading-control: 1.2; /* ========================================= PRIMITIVES - Elevation ========================================= */ --j2w-shadow-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.35)); --j2w-shadow-1: 0 1px 2px var(--j2w-shadow-color); --j2w-shadow-2: 0 1px 3px var(--j2w-shadow-color), 0 2px 8px var(--j2w-shadow-color); --j2w-shadow-3: 0 4px 12px var(--j2w-shadow-color), 0 1px 3px var(--j2w-shadow-color); --j2w-shadow-4: 0 8px 24px var(--j2w-shadow-color), 0 2px 6px var(--j2w-shadow-color); --j2w-shadow-5: 0 25px 50px -12px light-dark(rgb(15 23 42 / 0.25), rgb(0 0 0 / 0.6)); /* ========================================= PRIMITIVES - Motion ========================================= */ --j2w-duration-fast: 100ms; --j2w-duration-base: 150ms; --j2w-duration-overlay: 200ms; --j2w-duration-slow: 250ms; --j2w-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --j2w-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --j2w-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================= SEMANTIC - Surfaces ========================================= */ --j2w-bg: light-dark(var(--j2w-gray-50), var(--j2w-gray-950)); --j2w-surface: light-dark(#FFFFFF, var(--j2w-gray-900)); --j2w-surface-raised: light-dark(#FFFFFF, var(--j2w-gray-800)); --j2w-surface-overlay: light-dark(#FFFFFF, var(--j2w-gray-800)); --j2w-surface-sunken: light-dark(var(--j2w-gray-100), var(--j2w-gray-950)); /* ========================================= SEMANTIC - Text ========================================= */ --j2w-text: light-dark(var(--j2w-gray-900), var(--j2w-gray-100)); --j2w-text-secondary: light-dark(var(--j2w-gray-600), var(--j2w-gray-400)); --j2w-text-muted: light-dark(var(--j2w-gray-400), var(--j2w-gray-500)); --j2w-text-on-accent: #FFFFFF; /* ========================================= SEMANTIC - Borders ========================================= */ --j2w-border: light-dark(var(--j2w-gray-200), var(--j2w-gray-700)); --j2w-border-strong: light-dark(var(--j2w-gray-300), var(--j2w-gray-600)); /* ========================================= SEMANTIC - Accent ========================================= */ --j2w-accent: light-dark(var(--j2w-blue-600), var(--j2w-blue-500)); --j2w-accent-hover: light-dark(var(--j2w-blue-700), var(--j2w-blue-400)); --j2w-accent-active: light-dark(var(--j2w-blue-800), var(--j2w-blue-300)); --j2w-accent-subtle: light-dark(var(--j2w-blue-50), color-mix(in srgb, var(--j2w-blue-500) 15%, transparent)); --j2w-selection: light-dark(var(--j2w-blue-100), color-mix(in srgb, var(--j2w-blue-500) 30%, transparent)); --j2w-focus-ring: var(--j2w-blue-500); /* Inset: the layout containers clip with overflow: hidden, so a ring painted outside the control is sliced off wherever the control sits flush against a container edge. */ --j2w-focus-glow: inset 0 0 0 2px color-mix(in srgb, var(--j2w-accent) 35%, transparent); /* ========================================= SEMANTIC - State tints Derived from text color so they invert correctly in dark mode. ========================================= */ --j2w-hover-tint: color-mix(in srgb, var(--j2w-text) 6%, transparent); --j2w-active-tint: color-mix(in srgb, var(--j2w-text) 10%, transparent); /* ========================================= SEMANTIC - Danger ========================================= */ --j2w-danger: light-dark(var(--j2w-red-600), var(--j2w-red-500)); --j2w-danger-subtle: light-dark(var(--j2w-red-50), color-mix(in srgb, var(--j2w-red-500) 15%, transparent)); /* ========================================= SEMANTIC - Overlays & charts ========================================= */ --j2w-backdrop: light-dark(rgb(15 23 42 / 0.45), rgb(0 0 0 / 0.6)); --j2w-backdrop-blur: blur(6px); --j2w-chart-axis: var(--j2w-text-secondary); --j2w-chart-grid: var(--j2w-border); /* ========================================= LEGACY ALIASES - do not use in new code Kept for downstream stylesheets referencing the pre-redesign token names. The inset-shadow tokens degrade to flat tints. ========================================= */ --j2w-color-primary: var(--j2w-accent); --j2w-color-primary-transparent: var(--j2w-accent-subtle); --j2w-color-primary-hover: var(--j2w-accent-hover); --j2w-color-white: var(--j2w-surface); --j2w-color-white-transparent: var(--j2w-surface); --j2w-color-white-hover: var(--j2w-hover-tint); --j2w-color-black-overlay: var(--j2w-backdrop); --j2w-color-black-bg: var(--j2w-surface-sunken); --j2w-color-black-darker: var(--j2w-surface-sunken); --j2w-color-gray: var(--j2w-text-secondary); --j2w-color-gray-transparent: var(--j2w-border); --j2w-color-gray-medium: var(--j2w-border-strong); --j2w-color-gray-bg: var(--j2w-surface-sunken); --j2w-color-shadow: var(--j2w-shadow-color); --j2w-color-border: var(--j2w-border); --j2w-color-blue-light: var(--j2w-accent); --j2w-color-blue-file: var(--j2w-accent); --j2w-color-blue-file-bg: var(--j2w-accent-subtle); --j2w-spacing-xs: 2px; --j2w-spacing-sm: var(--j2w-space-1); --j2w-spacing-md: var(--j2w-space-2); --j2w-spacing-lg: var(--j2w-space-3); --j2w-spacing-em-sm: 0.333333em; --j2w-spacing-em-md: 0.666667em; --j2w-spacing-em-lg: 1.0em; --j2w-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--j2w-accent) 20%, transparent); --j2w-shadow-hover: inset 0 0 0 9999px var(--j2w-hover-tint); --j2w-shadow-disabled: inset 0 0 0 9999px var(--j2w-active-tint); --j2w-shadow-dialog: var(--j2w-shadow-5); --j2w-shadow-file-hover: inset 0 0 0 9999px var(--j2w-hover-tint); --j2w-animation-duration: var(--j2w-duration-overlay); --j2w-animation-easing: var(--j2w-ease-out); }