/* ============================================================ REPROTECH.UI.BLAZOR — Design Tokens GENERATED from Reprotech UI design-tokens.json — DO NOT EDIT. Run `scripts/sync-tokens` (or `npm --prefix tokens run tokens:build`) to regenerate. Blazor consumes the SAME source of truth as Web and Android. Link this file BEFORE rt-theme.css; every --rt-* the theme uses resolves from a DS token below, so the Reprotech portal cannot drift from the brand. ============================================================ */ /* ── Layer 1: brand primitives (default = Reprotech) ── */ :root { /* ── Primary — "Eggplant" ── */ --rt-primary-800: #320C39; /* Eggplant 800 */ --rt-primary-800-tint: #63326D; /* Eggplant 800 Tint */ --rt-primary-400: #D68CE5; /* Eggplant 400 */ --rt-primary-400-tint: #DFA2ED; /* Eggplant 400 Tint */ --rt-primary-200: #F8D4FF; /* Eggplant 200 */ --rt-primary-200-tint: #F9E8F8; /* Eggplant 200 Tint */ /* ── Accent — "Lab Blue" ── */ --rt-accent-800: #005ED9; /* Lab Blue 900 */ --rt-accent-800-tint: #2D80EC; /* Lab Blue 900 Tint */ --rt-accent-400: #59A1FF; /* Lab Blue 400 */ --rt-accent-400-tint: #78B2FF; /* Lab Blue 400 Tint */ --rt-accent-200: #C3DDFF; /* Lab Blue 200 */ --rt-accent-200-tint: #DEECF8; /* Lab Blue 200 Tint */ /* ── Neutral ── */ --rt-neutral-50: #FAFBF1; /* Almost White */ --rt-neutral-200: #E6EAC8; /* Almond */ --rt-neutral-200-tint: #F5F7E7; /* Almond Tint */ --rt-neutral-800: #131310; /* Tech Black */ /* ── Secondary (grounding accent) ── */ --rt-secondary-400: #D68CE5; /* = Eggplant 400 (Reprotech has no separate secondary; confirm vs guide) */ /* ── Graphic (frosted art-direction overlay tint) ── */ --rt-graphic-tint: #63326D; /* reuses Eggplant 800 Tint; confirm vs Reprotech guide */ /* ── Chrome — deep persistent-nav surface (sidebar/kiosk) ── */ --rt-chrome-deep: #320C39; /* = primary-800 (Reprotech sidebar unchanged) */ } /* ── Layer 1: Matcher brand (opt-in via ) ── */ [data-brand="matcher"] { /* ── Primary — "Prussian Blue", own derived light ramp ── */ --rt-primary-800: #15258E; /* Prussian Blue */ --rt-primary-800-tint: #3F4CA2; /* derived — Prussian @ ~18% white */ --rt-primary-400: #858EC4; /* derived — Prussian @ ~48% white */ --rt-primary-400-tint: #9DA3D0; /* derived — Prussian @ ~58% white */ --rt-primary-200: #D0D3E8; /* derived — Prussian @ ~80% white */ --rt-primary-200-tint: #E3E5F1; /* derived — Prussian @ ~88% white */ /* ── Accent — "Lab Blue" (Reprotech ramp) ── */ --rt-accent-800: #005ED9; /* Lab Blue 900 — inherited Reprotech grounding tone, CONFIRMED keep (Matcher palette has no darker Lab Blue; anchors links/accent-strong) */ --rt-accent-800-tint: #2D80EC; /* Lab Blue 900 Tint */ --rt-accent-400: #59A1FF; /* Lab Blue 400 */ --rt-accent-400-tint: #78B2FF; /* Lab Blue 400 Tint (inherited; not in Matcher guide) */ --rt-accent-200: #C3DDFF; /* Lab Blue 200 */ --rt-accent-200-tint: #DEECF8; /* Lab Blue 200 Tint */ /* ── Neutral (Almost White / Tech Black brand-authored; mid is system-derived) ── */ --rt-neutral-50: #FAFBF1; /* Almost White */ --rt-neutral-200: #DDE3EC; /* cool grey — system-derived (guide has no mid neutral) */ --rt-neutral-200-tint: #EFF2F7; /* cool grey tint — system-derived */ --rt-neutral-800: #131310; /* Tech Black */ /* ── Secondary — "Eggplant 400" (grounding secondary, demoted from Reprotech primary) ── */ --rt-secondary-400: #D68CE5; /* Eggplant 400 (guide p.21, secondary) */ /* ── Graphic (frosted art-direction overlay tint) ── */ --rt-graphic-tint: #0D4BCD; /* Prussian Blue Tint (guide p.32, frosted graphics) */ /* ── Chrome — deep persistent-nav surface (sidebar/kiosk) ── */ --rt-chrome-deep: #111F76; /* deepened Prussian (sidebar surface) */ } /* ── Layer 2: semantic aliases (inlined verbatim from semantic.css) ── */ /* ============================================================ SEMANTIC TOKENS (Layer 2) ============================================================ Maps brand primitives (--rt-*) to intent-based aliases. Components reference these via Tailwind utility classes (e.g. bg-brand-primary, text-text-inverse). The @theme block in theme.css maps these to --color-* so Tailwind generates the utility classes. ============================================================ */ :root { /* ── Brand Interaction ── */ --rt-brand-primary: var(--rt-primary-800); --rt-brand-primary-hover: var(--rt-primary-400); --rt-brand-subtle: var(--rt-primary-200-tint); --rt-brand-muted: var(--rt-primary-400); --rt-brand-light: var(--rt-primary-200); --rt-brand-tint: var(--rt-primary-200-tint); --rt-brand-light-alpha: color-mix(in srgb, var(--rt-primary-200) 50%, transparent); /* derived: Eggplant 200 @ 50% */ --rt-brand-muted-tint: var(--rt-primary-400-tint); --rt-brand-secondary: var(--rt-secondary-400); --rt-brand-secondary-subtle: color-mix(in srgb, var(--rt-secondary-400) 20%, white); /* derived: Eggplant 400 @ 20%. Mixed with WHITE (opaque), not transparent like the -alpha tints above, because it's a solid pill/chip background that must read the same over any surface. */ /* ── Surface ── */ --rt-surface-primary: var(--rt-neutral-50); --rt-surface-secondary: #FFFFFF; --rt-surface-elevated: #FFFFFF; --rt-surface-tertiary: var(--rt-neutral-200); --rt-surface-sidebar: var(--rt-chrome-deep); --rt-surface-kiosk: var(--rt-chrome-deep); --rt-surface-subtle: var(--rt-neutral-200-tint); /* ── Text ── */ --rt-text-primary: var(--rt-primary-800); --rt-text-secondary: var(--rt-neutral-800); --rt-text-tertiary: var(--rt-primary-800-tint); --rt-text-inverse: var(--rt-neutral-50); --rt-text-link: var(--rt-accent-800); /* ── Border ── */ --rt-border-default: var(--rt-neutral-200); --rt-border-subtle: var(--rt-neutral-200); --rt-border-hover: var(--rt-primary-400); /* ── Focus ── */ --rt-focus-border: var(--rt-primary-400); --rt-focus-ring: var(--rt-primary-400); /* ── Accent (blue) — the single home for the accent colour ── */ --rt-accent-strong: var(--rt-accent-800); --rt-accent-hover: var(--rt-accent-400); --rt-accent-light: var(--rt-accent-200); --rt-accent-tint: var(--rt-accent-200-tint); --rt-accent-strong-tint: var(--rt-accent-800-tint); --rt-accent-hover-tint: var(--rt-accent-400-tint); --rt-accent-light-alpha: color-mix(in srgb, var(--rt-accent-200) 50%, transparent); /* derived: Lab Blue 200 @ 50% */ /* ── Stroke ── */ --rt-border-stroke: color-mix(in srgb, var(--rt-neutral-800) 25%, transparent); /* derived: Tech Black @ 25% */ /* ── Frosted art direction (brand "Frosted Gradient", Matcher guide pp.31–33) ── The overlay tint stays in the SAME colorway as the brand-primary ground, per the guide ("apply the tints to frosted overlays"). Consumed by FrostedSurface. */ --rt-frost-overlay: var(--rt-graphic-tint); /* ── Status (brand-independent — same across all brands) ── */ --rt-success: #1A7A3A; --rt-success-bg: #E8F5EC; --rt-success-light: #22A34D; --rt-warning: #9A6700; --rt-warning-bg: #FFF8E1; --rt-warning-display: #D4A017; --rt-error: #C41E3A; --rt-error-bg: #FDECEF; --rt-error-hover: #A8182F; --rt-error-light: #FF8A9E; --rt-info: var(--rt-accent-800); --rt-info-bg: var(--rt-accent-200); --rt-flash-highlight: color-mix(in srgb, var(--rt-primary-400) 20%, transparent); /* ── Icon Duo (for Font Awesome Duotone) ── */ --icon-duo-primary-default: var(--rt-primary-800); --icon-duo-secondary-default: var(--rt-primary-800); --icon-duo-secondary-opacity-default: 0.3; --icon-duo-primary-inverse: var(--rt-neutral-50); --icon-duo-secondary-inverse: var(--rt-neutral-50); --icon-duo-secondary-opacity-inverse: 0.35; } /* ── Layer 3: Reprotech.UI.Blazor aliases (--rt-* → DS tokens) ── */ :root { /* ── Brand / Primary ── */ --rt-plum: var(--rt-primary-800); /* was #3F0E48 — ≈ was; now exact Eggplant 800 */ --rt-orchid: var(--rt-primary-400); /* was #D68CE5 — unchanged — already Eggplant 400 */ --rt-brand-purple: var(--rt-primary-800-tint); /* was #7B4BBF — PROPOSED: interactive purple → Eggplant 800 tint */ --rt-brand-purple-hover: var(--rt-primary-800); /* was #6A3FAD — PROPOSED: hover → Eggplant 800 */ --rt-brand-purple-light: var(--rt-primary-200-tint); /* was #F3E8FF — PROPOSED: light fill → Eggplant 200 tint */ --rt-brand-purple-subtle: var(--rt-primary-200); /* was #EDE0FF — PROPOSED: subtle fill → Eggplant 200 */ /* ── Surfaces ── */ --rt-main-bg: var(--rt-surface-primary); /* was #F5F7F3 — app canvas → Almost White */ --rt-content-bg: var(--rt-surface-secondary); /* was #FFFFFF — unchanged — white cards */ --rt-page-header-bg: var(--rt-surface-subtle); /* was #F9FAF7 — PROPOSED: header band → Almond tint */ --rt-table-header-bg: var(--rt-surface-subtle); /* was #EEF2EA — PROPOSED: table header → Almond tint */ --rt-divider-color: var(--rt-border-default); /* was #E2E8DE — PROPOSED: dividers → DS default border */ /* ── Field accent ── */ --rt-field-border: var(--rt-border-default); /* was #D4A84B — DECISION: drops the warm-amber accent for the DS neutral border. Keep amber? then add it as a DS token instead. */ /* ── Danger ── */ --rt-danger: var(--rt-error); /* was #DC2626 — PROPOSED: → DS error */ --rt-danger-hover: var(--rt-error-hover); /* was #B91C1C — PROPOSED: → DS error hover */ /* ── Badges / pills (→ DS status + brand tones) ── */ --rt-badge-blue-bg: var(--rt-info-bg); /* was #DBEAFE — info */ --rt-badge-blue-text: var(--rt-info); /* was #2563EB — info */ --rt-badge-green-bg: var(--rt-success-bg); /* was #D1FAE5 — success */ --rt-badge-green-text: var(--rt-success); /* was #047857 — success */ --rt-badge-pink-bg: var(--rt-brand-secondary-subtle); /* was #FCE7F3 — PROPOSED: no DS pink — mapped to secondary (orchid) tone */ --rt-badge-pink-text: var(--rt-primary-800); /* was #BE185D — PROPOSED: secondary tone text */ --rt-badge-red-bg: var(--rt-error-bg); /* was #FEE2E2 — error */ --rt-badge-red-text: var(--rt-error); /* was #DC2626 — error */ --rt-badge-purple-bg: var(--rt-brand-subtle); /* was #EDE9FE — brand */ --rt-badge-purple-text: var(--rt-primary-800); /* was #6D28D9 — brand */ --rt-badge-orange-bg: var(--rt-warning-bg); /* was #FEF3C7 — warning */ --rt-badge-orange-text: var(--rt-warning); /* was #D97706 — warning */ }