/* Theme tokens and theme variants. Set to switch palettes without editing component CSS. */ :root, body[data-ui-theme='identity'] { --pico-typography-spacing-vertical: 1rem; /* Core theme colors (defaults inherit Pico's palette). */ --theme-accent: var(--pico-primary); --theme-accent-contrast: var(--pico-primary-inverse); /* Component-level design tokens consumed by styles.css. */ --ui-accent-soft: color-mix(in oklab, var(--theme-accent) 14%, transparent); --ui-accent-soft-strong: color-mix(in oklab, var(--theme-accent) 24%, transparent); --ui-surface-subtle: color-mix(in oklab, var(--pico-card-background-color) 92%, var(--theme-accent) 8%); --ui-shadow-soft: 0 10px 22px -18px color-mix(in oklab, var(--theme-accent) 45%, #000 55%); --ui-shadow-lifted: 0 16px 28px -20px color-mix(in oklab, var(--theme-accent) 45%, #000 55%); --focus-ring: 2px solid color-mix(in oklab, var(--theme-accent) 78%, white 22%); --focus-ring-offset: 2px; /* Category accents. */ --category-accent-user-login-sso: #1f5aa8; --category-accent-application-api-security: #0d645e; --category-accent-security-enhancements: #8a4700; --category-accent-others: #6b4e9a; /* Icon style tokens. */ --ui-icon-color: currentColor; --ui-icon-active-color: var(--pico-primary-inverse); } /* Alternate theme 0: identity palette with outlined iconography. */ body[data-ui-theme='identity-outline'] { --ui-icon-color: color-mix(in oklab, var(--pico-color) 86%, var(--pico-primary) 14%); --ui-icon-active-color: var(--pico-primary-inverse); } /* Alternate theme 1: cooler enterprise palette. */ body[data-ui-theme='slate'] { --pico-primary: #2d6d89; --pico-primary-hover: #25596f; --pico-primary-focus: rgba(45, 109, 137, 0.3); --category-accent-user-login-sso: #27558f; --category-accent-application-api-security: #205f66; --category-accent-security-enhancements: #7a4e1d; } /* Alternate theme 2: security-forward palette. */ body[data-ui-theme='security'] { --pico-primary: #1e4f97; --pico-primary-hover: #1a4381; --pico-primary-focus: rgba(30, 79, 151, 0.3); --category-accent-user-login-sso: #1d4b8a; --category-accent-application-api-security: #0f6458; --category-accent-security-enhancements: #965100; }