/* * Sloppy Labwork design tokens. * * Theme selection: data-theme attribute on . Default block applies when * no attribute is set (dark mode). * * (none) Dark * 1 Light * 2 Contrast Dark * 3 Contrast Light * * KeyChain (pmc) does NOT use this file. It defines its own tokens in * static/pmc/css/main.css and must remain untouched by changes here. */ /* ============================================================= * Default theme — Dark * ============================================================= */ :root { /* --- Color --- */ --color-bg: #0e0c14; --color-surface: #181522; --color-surface-raised: #221d2e; --color-text: #e8e6ee; --color-text-muted: #9690a3; --color-text-subtle: #6b667a; --color-border: #2e2839; --color-border-strong: #564c66; --color-primary: #8b5cf6; --color-primary-hover: #a78bfa; --color-accent: #22d3ee; --color-accent-hover: #67e8f9; --color-highlight: #f0abfc; --color-success: #5dd39e; --color-danger: #f87171; --color-overlay: rgba(8, 6, 14, 0.78); --color-on-primary: #ffffff; --color-on-accent: #0e0c14; --link-decoration: none; /* --- Spacing --- */ --space-0: 0; --space-1: 0.15625rem; --space-2: 0.3125rem; --space-3: 0.46875rem; --space-4: 0.625rem; --space-5: 0.9375rem; --space-6: 1.25rem; --space-7: 1.875rem; --space-8: 2.5rem; /* --- Radius --- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* --- Type --- */ --font-body: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 0 1px var(--color-accent), 0 0 16px -2px var(--color-accent); /* --- Transitions --- */ --transition-quick: 120ms ease-out; --transition-default: 200ms ease-out; /* --- Layout --- */ --container-max: 45rem; /* --- Z-index --- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* --- Legacy aliases (kept for one release; remove after per-app migration in PR 3) --- */ --color-bg-secondary: var(--color-surface); --color-nav-links: var(--color-text-muted); --color-text-normal: var(--color-text); --color-text-active: var(--color-text); --color-lines: var(--color-border); --color-lines-active: var(--color-border-strong); --color-primary-active: var(--color-primary-hover); --color-text-success: var(--color-success); --color-text-danger: var(--color-danger); --color-button-text: var(--color-text-muted); --color-button-text-hover: var(--color-text); --color-button-primary-text: var(--color-on-primary); --color-danger-active: var(--color-danger); } /* ============================================================= * Theme — Light (data-theme="1") * ============================================================= */ html[data-theme="1"] { --color-bg: #faf8fb; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-text: #1a1622; --color-text-muted: #6b667a; --color-text-subtle: #a39ea8; --color-border: #e6e0eb; --color-border-strong: #b8aec5; --color-primary: #7547d1; --color-primary-hover: #5e2db8; --color-accent: #0891b2; --color-accent-hover: #0e7490; --color-highlight: #c026d3; --color-success: #15803d; --color-danger: #dc2626; --color-overlay: rgba(26, 22, 34, 0.45); --color-on-primary: #ffffff; --color-on-accent: #ffffff; --link-decoration: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 0 1px var(--color-accent), 0 0 16px -2px var(--color-accent); } /* ============================================================= * Theme — Contrast Dark (data-theme="2") * ============================================================= */ html[data-theme="2"] { --color-bg: #000000; --color-surface: #0a0a0a; --color-surface-raised: #1a1a1a; --color-text: #ffffff; --color-text-muted: #cccccc; --color-text-subtle: #999999; --color-border: #666666; --color-border-strong: #aaaaaa; --color-primary: #c4a3ff; --color-primary-hover: #d9beff; --color-accent: #5eead4; --color-accent-hover: #99f6e4; --color-highlight: #f5d0fe; --color-success: #4ade80; --color-danger: #fca5a5; --color-overlay: rgba(0, 0, 0, 0.88); --color-on-primary: #000000; --color-on-accent: #000000; --link-decoration: underline; } /* ============================================================= * Theme — Contrast Light (data-theme="3") * ============================================================= */ html[data-theme="3"] { --color-bg: #ffffff; --color-surface: #f5f5f5; --color-surface-raised: #f5f5f5; --color-text: #000000; --color-text-muted: #555555; --color-text-subtle: #888888; --color-border: #999999; --color-border-strong: #666666; --color-primary: #5e2db8; --color-primary-hover: #4a1f99; --color-accent: #0e7490; --color-accent-hover: #155e75; --color-highlight: #86198f; --color-success: #166534; --color-danger: #991b1b; --color-overlay: rgba(0, 0, 0, 0.55); --color-on-primary: #ffffff; --color-on-accent: #ffffff; --link-decoration: underline; }