/* * Specisoft design tokens — the Industry design system. * * Three tiers, and rules only ever reference the second and third: * * 1. INDUSTRY --color-accent-500, --space-4 … transcribed from the design system * 2. SEMANTIC --spec-ink, --spec-line … what a token is *for* in this app * 3. SCALES --text-sm, --control-h … type, control and layout sizing * * Tier 1 is a transcription of `industry.css` from the design project, plus the overrides the * Specisoft mockup layers on it (Greek-capable fonts, the status ramps, a 13px body). Keep it a * transcription: to retune the look, change these values to whatever the design system says and * do not invent steps it does not have. That is what makes a re-sync a diff rather than a * negotiation. * * AppTheme.cs carries the same palette and type scale for MudBlazor's runtime theme — MudBlazor * components read --mud-palette-*, which C# owns — so the two files change together. */ @layer spec.tokens { :root { /* —————————————————————————————————————————————— 1. Industry — colour A light technical ground, one steel accent, and neutral/accent ramps generated in OKLCH on a shared lightness scale, so the same step of any role has the same visual weight. Light steps (100–300) are tinted fills and hovers, 500 is the base, deep steps (700–900) are text on tints and pressed states. —————————————————————————————————————————————— */ --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; /* * Status. Not in the base design system — the Specisoft mockup adds it, because a close * either balances or it does not and a mono palette cannot say so. Each role carries a * base, a tint for fills (-t) and a border (-b), in OKLCH so they sit at the steel * ramp's lightness rather than shouting over it. */ --ok: oklch(0.50 0.075 158); --ok-t: oklch(0.955 0.022 158); --ok-b: oklch(0.80 0.055 158); --warn: oklch(0.55 0.105 68); --warn-t: oklch(0.958 0.032 68); --warn-b: oklch(0.80 0.075 68); --stop: oklch(0.50 0.125 27); --stop-t: oklch(0.955 0.028 27); --stop-b: oklch(0.80 0.085 27); /* A drawn hatch for "not applicable" cells, from the mockup. */ --hatch: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--color-text) 9%, transparent) 3px 4px); /* —————————————————————————————————————————————— 1. Industry — type Barlow ships no Greek subset (latin / latin-ext / vietnamese only) and this UI is Greek-only, so the mockup carries the pairing on Fira Sans Condensed over Fira Sans — the nearest technical grotesque with full Greek coverage — plus Fira Mono for figures. —————————————————————————————————————————————— */ --font-heading: "Fira Sans Condensed", "Barlow Condensed", system-ui, sans-serif; --font-body: "Fira Sans", Barlow, system-ui, sans-serif; --font-mono: "Fira Mono", "SFMono-Regular", Menlo, Consolas, ui-monospace, monospace; --font-ui: var(--font-body); /* —————————————————————————————————————————————— 1. Industry — space, shape, elevation The space scale is 3.4px-based (density 0.85x), not a round 4px grid. Use the steps. Radius exists in the scale but the blueprint layer squares every component off; only non-component surfaces may use it. —————————————————————————————————————————————— */ --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); /* —————————————————————————————————————————————— 2. Semantic —————————————————————————————————————————————— */ --spec-ink: var(--color-text); --spec-ink-soft: var(--color-neutral-700); --spec-ink-faint: var(--color-neutral-600); --spec-canvas: var(--color-bg); --spec-rail: var(--color-accent-900); /* deep blue; the rail draws light ink on it (see .spec-rail) */ --spec-surface: #ffffff; --spec-field: #ffffff; --spec-line: var(--color-divider); --spec-line-strong: var(--color-neutral-400); --spec-accent: var(--color-accent); --spec-accent-ink: var(--color-accent-700); --spec-accent-tint: var(--color-accent-100); --spec-on-accent: #ffffff; --spec-on-dark: #ffffff; --spec-on-dark-soft: color-mix(in srgb, #ffffff 78%, transparent); --spec-on-dark-muted: color-mix(in srgb, #ffffff 62%, transparent); /* Amounts outside a documented close tolerance, and negative balances. */ --spec-ink-attention: var(--stop); --spec-focus-ring: var(--color-accent); --spec-focus-ring-on-dark: #ffffff; --spec-focus-width: 2px; /* Hover and pressed washes, derived from the ink and the accent so a palette change carries the interaction states with it. */ --wash-ink-4: color-mix(in srgb, var(--color-text) 4%, transparent); --wash-ink-7: color-mix(in srgb, var(--color-text) 7%, transparent); --wash-ink-14: color-mix(in srgb, var(--color-text) 14%, transparent); --wash-accent-10: color-mix(in srgb, var(--color-accent) 10%, transparent); --wash-accent-18: color-mix(in srgb, var(--color-accent) 18%, transparent); /* —————————————————————————————————————————————— 3a. Space aliases. The --sp-* names read as a scale at call sites and resolve to the Industry steps, so there is still exactly one set of numbers. —————————————————————————————————————————————— */ --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-6: var(--space-6); --sp-8: var(--space-8); --sp-12: calc(var(--space-8) * 1.5); /* —————————————————————————————————————————————— 3b. Type. The mockup's interface sizes, which run below the design system's editorial scale because this is a dense accounting desk rather than a landing page. —————————————————————————————————————————————— */ --text-2xs: 9.5px; /* group labels, badges, role tags — always uppercase and tracked */ --text-xs: 10.5px; /* pills, ladder sub-lines */ --text-sm: 11.5px; /* table meta, secondary buttons, captions */ --text-base: 13px; /* body — the app's default */ --text-md: 15px; /* emphasised body */ --text-lg: 18px; /* study title */ --text-xl: 22px; /* section heading */ --text-2xl: 29px; /* page heading */ --text-3xl: 42px; /* reserved — the design system's h1 */ --leading-tight: 1.12; --leading-snug: 1.35; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --tracking-tight: -0.015em; --tracking-normal: normal; --tracking-wide: 0.06em; --tracking-caps: 0.1em; --tracking-brand: 0.16em; /* —————————————————————————————————————————————— 3c. Motion —————————————————————————————————————————————— */ --dur-fast: 0.12s; --dur-base: 0.15s; --dur-slow: 0.24s; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* —————————————————————————————————————————————— 3d. Layout —————————————————————————————————————————————— */ /* * 31px, not the design system's abstract 36px: the mockup overrides `.input` with * `padding: 7px 10px` and no min-height, and its buttons sit at the same height beside * the fields. The desk is dense on purpose. */ --control-h: 31px; --control-h-sm: 28px; /* pills, badges, ladder cells */ --tap-target: 44px; /* pointer:coarse minimum */ --rail-w: 236px; /* the sidebar; the mockup's grid is 236px 1fr */ --spec-study-select-max-width: 24rem; /* Page gutter. The mockup is drawn at 1600px with 26–30px margins; these step down as the board narrows so the desk keeps a margin without stealing table width. */ --gutter: var(--space-4); --gutter-y: var(--space-4); --z-desk-chrome: 2; --z-skip-link: 10000; --z-reconnect: 9999; /* * Scroll affordance. A strip or table that scrolls sideways gives no sign that it does. * Four background layers: two `local` covers that travel with the content and mask the * shadow at each end, and two `scroll` layers pinned to the frame that show through * only once there is more content in that direction. * * One recipe per ground it can sit on, rather than one recipe reading a caller-set * cover: a custom property is substituted where it is DECLARED, not where it is used, * so a cover variable read here would always resolve against :root. */ --scroll-shadow-ink: color-mix(in srgb, var(--color-text) 22%, transparent); --scroll-shadow-on-rail: linear-gradient(to right, var(--color-neutral-100) 55%, rgba(245, 245, 248, 0)) 0 0 / 2.5rem 100% no-repeat local, linear-gradient(to left, var(--color-neutral-100) 55%, rgba(245, 245, 248, 0)) 100% 0 / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 0 0 / 1rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 100% 0 / 1rem 100% no-repeat scroll; --scroll-shadow-on-canvas: linear-gradient(to right, var(--color-bg) 55%, rgba(242, 242, 243, 0)) 0 0 / 2.5rem 100% no-repeat local, linear-gradient(to left, var(--color-bg) 55%, rgba(242, 242, 243, 0)) 100% 0 / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 0 0 / 1rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 100% 0 / 1rem 100% no-repeat scroll; --scroll-shadow-on-surface: linear-gradient(to right, #ffffff 55%, rgba(255, 255, 255, 0)) 0 0 / 2.5rem 100% no-repeat local, linear-gradient(to left, #ffffff 55%, rgba(255, 255, 255, 0)) 100% 0 / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 0 0 / 1rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-ink), rgba(29, 31, 32, 0)) 100% 0 / 1rem 100% no-repeat scroll; } @media (min-width: 960px) { :root { --gutter: var(--space-6); --gutter-y: var(--space-6); } } @media (min-width: 1280px) { :root { --gutter: 26px; --gutter-y: 22px; } } /* Touch pointers get a comfortable control height without changing desktop density. */ @media (pointer: coarse) { :root { --control-h: 44px; --control-h-sm: 36px; } } }