/* * Createrun shared design tokens — single source of truth for Editor/Store/IDM/Web.Base. ADR 2026-06-18. * * Self-contained, dependency-free, plain CSS. No CDN, no build step, no Tailwind, no @apply. * Four hosts (Editor, Store, IDM, Web.Base) import this file and consume the --cr-* custom * properties and .cr-* primitive classes instead of ad-hoc per-host palettes. * * Dark theme: set [data-cr-theme="dark"] on or any ancestor (the Editor toggles this). * Token names are part of the contract — other lanes reference them verbatim; do not rename. * * STORE COPY: this file is a verbatim copy of * Createrun/Framework/CRPortal/Createrun.Web/wwwcontent/design-tokens.css. * The Store serves its own static assets, so the shared sheet is duplicated here under * Main/wwwroot/css/ and linked from _Layout.cshtml. Keep in sync with the source. */ :root { /* Brand / accent */ --cr-brand: #2563EB; --cr-brand-600: #1D4ED8; --cr-brand-700: #1E40AF; --cr-accent: #FF6F1E; /* Web.Base management orange, preserved */ /* Surfaces / text */ --cr-bg: #F8FAFC; --cr-surface: #FFFFFF; --cr-border: #E2E8F0; --cr-text: #0F172A; --cr-text-muted: #64748B; /* Status */ --cr-success: #16A34A; --cr-warning: #D97706; --cr-danger: #DC2626; /* Typography */ --cr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --cr-fs-xs: 12px; --cr-fs-sm: 13px; --cr-fs-md: 14px; --cr-fs-lg: 16px; --cr-fs-xl: 20px; --cr-fs-2xl: 28px; /* Spacing / shape */ --cr-sp-1: 4px; --cr-sp-2: 8px; --cr-sp-3: 12px; --cr-sp-4: 16px; --cr-sp-5: 24px; --cr-sp-6: 32px; --cr-radius: 8px; --cr-radius-sm: 6px; --cr-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06); --cr-shadow-lg: 0 10px 25px rgba(15, 23, 42, .10); /* Derived / internal helpers (not part of the public token contract, but stable) */ --cr-focus-ring: 0 0 0 3px rgba(37, 99, 235, .35); } /* ------------------------------------------------------------------ * * Dark theme — overrides surface/text tokens only. Brand/status/shape * stay constant so component styling remains predictable across themes. * ------------------------------------------------------------------ */ [data-cr-theme="dark"] { --cr-bg: #0B1220; --cr-surface: #111827; --cr-border: #1F2937; --cr-text: #E5E7EB; --cr-text-muted: #94A3B8; --cr-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); --cr-shadow-lg: 0 10px 25px rgba(0, 0, 0, .50); --cr-focus-ring: 0 0 0 3px rgba(96, 165, 250, .45); } /* ================================================================== * * PRIMITIVE COMPONENT CLASSES (token-based, framework-agnostic) * ================================================================== */ /* --- Buttons ------------------------------------------------------ */ .cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cr-sp-2); font-family: var(--cr-font); font-size: var(--cr-fs-md); font-weight: 500; line-height: 1.2; padding: var(--cr-sp-2) var(--cr-sp-4); border: 1px solid transparent; border-radius: var(--cr-radius-sm); background: transparent; color: var(--cr-text); cursor: pointer; user-select: none; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .cr-btn:focus-visible { outline: 2px solid transparent; /* keep a transparent outline for forced-colors mode */ outline-offset: 2px; box-shadow: var(--cr-focus-ring); } .cr-btn:disabled, .cr-btn.is-disabled, .cr-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } .cr-btn-primary { background: var(--cr-brand); border-color: var(--cr-brand); color: #FFFFFF; } .cr-btn-primary:hover { background: var(--cr-brand-600); border-color: var(--cr-brand-600); } .cr-btn-primary:active { background: var(--cr-brand-700); border-color: var(--cr-brand-700); } .cr-btn-secondary { background: var(--cr-surface); border-color: var(--cr-border); color: var(--cr-text); } .cr-btn-secondary:hover { border-color: var(--cr-brand); color: var(--cr-brand-700); } .cr-btn-secondary:active { background: var(--cr-bg); } /* --- Form controls ------------------------------------------------ */ .cr-input, .cr-textarea, .cr-select { display: block; width: 100%; box-sizing: border-box; font-family: var(--cr-font); font-size: var(--cr-fs-md); line-height: 1.4; color: var(--cr-text); background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-sm); padding: var(--cr-sp-2) var(--cr-sp-3); transition: border-color .15s ease, box-shadow .15s ease; } .cr-textarea { min-height: calc(var(--cr-sp-6) * 2); resize: vertical; } .cr-select { appearance: none; -webkit-appearance: none; cursor: pointer; } .cr-input::placeholder, .cr-textarea::placeholder { color: var(--cr-text-muted); } .cr-input:focus, .cr-textarea:focus, .cr-select:focus, .cr-input:focus-visible, .cr-textarea:focus-visible, .cr-select:focus-visible { outline: none; border-color: var(--cr-brand); box-shadow: var(--cr-focus-ring); } .cr-input:disabled, .cr-textarea:disabled, .cr-select:disabled { opacity: .6; cursor: not-allowed; background: var(--cr-bg); } .cr-input.is-invalid, .cr-textarea.is-invalid, .cr-select.is-invalid { border-color: var(--cr-danger); } .cr-input.is-invalid:focus, .cr-textarea.is-invalid:focus, .cr-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .30); } .cr-input.is-valid, .cr-textarea.is-valid, .cr-select.is-valid { border-color: var(--cr-success); } .cr-input.is-valid:focus, .cr-textarea.is-valid:focus, .cr-select.is-valid:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .30); } /* --- Labels & field messages -------------------------------------- */ .cr-label { display: inline-block; font-family: var(--cr-font); font-size: var(--cr-fs-sm); font-weight: 600; color: var(--cr-text); margin-bottom: var(--cr-sp-1); } .cr-required::after { content: ' *'; color: var(--cr-danger); } .cr-field-hint { display: block; font-family: var(--cr-font); font-size: var(--cr-fs-xs); color: var(--cr-text-muted); margin-top: var(--cr-sp-1); } .cr-field-error { display: block; font-family: var(--cr-font); font-size: var(--cr-fs-xs); color: var(--cr-danger); margin-top: var(--cr-sp-1); } /* --- Card --------------------------------------------------------- */ .cr-card { background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: var(--cr-radius); box-shadow: var(--cr-shadow); padding: var(--cr-sp-5); color: var(--cr-text); } /* --- Empty state -------------------------------------------------- */ .cr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--cr-sp-3); padding: var(--cr-sp-6) var(--cr-sp-5); color: var(--cr-text-muted); font-family: var(--cr-font); } .cr-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--cr-sp-6); height: var(--cr-sp-6); color: var(--cr-text-muted); opacity: .8; } .cr-empty__title { font-size: var(--cr-fs-lg); font-weight: 600; color: var(--cr-text); } .cr-empty__text { font-size: var(--cr-fs-sm); color: var(--cr-text-muted); max-width: 40ch; } .cr-empty__cta { margin-top: var(--cr-sp-2); } /* --- Badges ------------------------------------------------------- */ .cr-badge { display: inline-flex; align-items: center; gap: var(--cr-sp-1); font-family: var(--cr-font); font-size: var(--cr-fs-xs); font-weight: 600; line-height: 1; padding: var(--cr-sp-1) var(--cr-sp-2); border-radius: 999px; border: 1px solid var(--cr-border); background: var(--cr-bg); color: var(--cr-text-muted); white-space: nowrap; } .cr-badge-success { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: var(--cr-success); } .cr-badge-warning { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .35); color: var(--cr-warning); } .cr-badge-danger { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .35); color: var(--cr-danger); } /* ================================================================== * * STORE-LOCAL EXTENSION — backbone color scopes (3-backbone wave * 2026-07-17, plan C8). NOT part of the verbatim shared copy above; * keep this block when re-syncing from CRPortal's design-tokens.css. * * The three Store backbones re-scope --cr-brand (and its hover/active * derivatives + focus ring) on any subtree carrying data-cr-backbone: * customer → blue (default brand, explicit for symmetry) * dev → green * admin → orange (the already-reserved --cr-accent hue family) * Only brand-family tokens are re-scoped: surface/text/status tokens * stay owned by the theme layer, so the [data-cr-theme="dark"] * overrides above compose with these scopes without conflict. * ================================================================== */ [data-cr-backbone="customer"] { --cr-brand: #2563EB; --cr-brand-600: #1D4ED8; --cr-brand-700: #1E40AF; --cr-focus-ring: 0 0 0 3px rgba(37, 99, 235, .35); } [data-cr-backbone="dev"] { --cr-brand: #0F9D58; --cr-brand-600: #0C8048; --cr-brand-700: #0A693C; --cr-focus-ring: 0 0 0 3px rgba(15, 157, 88, .35); } [data-cr-backbone="admin"] { --cr-brand: #FF6F1E; --cr-brand-600: #EA580C; --cr-brand-700: #C2410C; --cr-focus-ring: 0 0 0 3px rgba(255, 111, 30, .35); }