/* ============================================================================ DESIGN TOKEN SYSTEM (layout-50 Pack 1) ---------------------------------------------------------------------------- The single source of truth for color, spacing, radius, typography, elevation, and motion. Tokens are layered so a theme can override the SEMANTIC roles without touching component CSS: 1. :root — the DEFAULT (light) theme + scales. Every value here matches the pre-token look exactly, so the default render is unchanged (back-compat). 2. html[data-theme="dark"] — dark theme: re-points the semantic color roles. 3. html[data-theme="high-contrast"] — reserved for a later a11y pack. 4. html[data-density="compact"] — re-points the density (spacing) tokens. The theme/density attributes are set SERVER-SIDE on in App.razor from a cookie + the per-user UserPreference store (see ThemeResolver), so the right theme is in the first paint with no interactive circuit (the LanguageSwitcher precedent). See docs/roadmap/design-tokens.md for the full catalogue. Token groups: --color-* semantic color ROLES (surface / text / border / brand / state) --space-* spacing scale (driven by --density-* so compact tightens it) --radius-* corner radii --font-* typography scale (family, sizes, weights, line-height) --shadow-* elevation --transition-* / --ease-* motion ============================================================================ */ :root { /* ── Brand (tenant accent overrides --color-primary at the layout level) ── */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-dark: #1e40af; /* ── Text roles ── */ --color-text: #1e293b; --color-text-dark: #0f172a; --color-text-muted: #64748b; --color-text-on-primary: #ffffff; /* ── Surface roles ── */ --color-bg: #f0f2f5; /* app canvas */ --color-bg-card: #ffffff; /* raised surface (cards, menus, modals) */ --color-bg-subtle: #f8fafc; /* zebra rows, hover wash, inset panels */ --color-table-header: #f8fafc; /* ── Border roles ── */ --color-border: #e2e8f0; --color-border-input: #d1d5db; --color-border-strong: #cbd5e1; /* ── State roles (status / priority / severity / feedback) ── */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-info: #2563eb; --color-info-bg: #dbeafe; /* ── Spacing scale (semantic steps map onto the density tokens below) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Density-driven steps — compact theme tightens these. Components that want to react to density use --density-gap / --density-pad-y / --density-cell. */ --density-gap: var(--space-3); --density-pad-y: 0.5rem; --density-cell: 0.75rem 1rem; /* table cell padding */ /* ── Radius scale ── */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-pill: 999px; /* ── Typography scale ── */ --font-family-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.75rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.5; /* ── Elevation ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); /* ── Motion ── */ --transition-fast: 0.15s ease; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Dark theme — re-points the semantic color roles only. Brand (--color-primary) stays tenant-driven; we lighten link/hover affordances at the component level. Spacing/radius/type are theme-agnostic, so they're inherited from :root. ── */ html[data-theme="dark"] { --color-text: #e2e8f0; --color-text-dark: #f1f5f9; --color-text-muted: #94a3b8; --color-text-on-primary: #ffffff; --color-bg: #0f172a; --color-bg-card: #1e293b; --color-bg-subtle: #273449; --color-table-header: #273449; --color-border: #334155; --color-border-input: #475569; --color-border-strong: #64748b; --color-success: #22c55e; --color-success-bg: #14532d; --color-warning: #f59e0b; --color-warning-bg: #78350f; --color-danger: #f87171; --color-danger-bg: #7f1d1d; --color-info: #60a5fa; --color-info-bg: #1e3a8a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.45); /* Keep Bootstrap's own component theming in step (form controls, dropdowns). */ color-scheme: dark; } /* ── Compact density — tightens the density-driven spacing tokens. Comfortable (default) is the :root values, so omitting the attribute keeps today's look. ── */ html[data-density="compact"] { --density-gap: var(--space-2); --density-pad-y: 0.3rem; --density-cell: 0.4rem 0.6rem; } html, body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); background-color: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a, .btn-link { color: var(--color-primary); } a:hover, .btn-link:hover { color: var(--color-primary-hover); } .btn-primary { color: #fff; background-color: var(--color-primary); border-color: var(--color-primary-hover); border-radius: var(--radius-md); font-weight: 500; transition: all var(--transition-fast); } .btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25); } .btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(108, 117, 125, 0.2); } .btn-outline-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); } .btn-outline-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.2); } .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.25); } .btn { border-radius: var(--radius-md); font-weight: 500; padding: 0.5rem 1rem; transition: all var(--transition-fast); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.25); } .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--color-border-input); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control:hover, .form-select:hover { border-color: #b0b8c4; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); } .card { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .card:hover { box-shadow: var(--shadow-md); } .table { border-radius: var(--radius-md); overflow: hidden; } .table thead th { background-color: var(--color-table-header); border-bottom: 2px solid var(--color-border); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .table tbody tr { transition: background-color 0.1s ease; } .table tbody tr:hover { background-color: var(--color-table-header); } /* Density exemplar — table cell padding follows the --density-cell token, so switching to compact tightens every .table on the page with no per-table CSS. Default value equals Bootstrap's 0.75rem 1rem (look unchanged). */ .table > :not(caption) > * > * { padding: var(--density-cell); } .content { padding-top: 1.5rem; } h1 { font-weight: 700; color: var(--color-text-dark); font-size: 1.75rem; } h1:focus { outline: none; } h2 { font-weight: 600; color: var(--color-text); } .valid.modified:not([type=checkbox]) { outline: 1px solid #22c55e; } .invalid { outline: 1px solid #ef4444; } .validation-message { color: var(--color-danger, #ef4444); font-size: 0.875rem; margin-top: 0.25rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: 0.5rem; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Badge styles */ .badge { font-weight: 500; border-radius: var(--radius-sm); padding: 0.35em 0.65em; transition: all var(--transition-fast); } /* Page header pattern */ .page-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .page-header h1 { margin-bottom: 0.25rem; } .page-header p { color: var(--color-text-muted); margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .btn:hover, .card:hover, .dashboard-card:hover { transform: none !important; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Rich-text body — sanitized HTML coming out of Quill on tickets and ticket comments. white-space: pre-wrap means legacy plain-text rows keep their newlines without needing migration. img tags from the attachment endpoint get a sensible max-width so a 4K screenshot doesn't blow out the ticket card. */ .ticket-rich-body { white-space: pre-wrap; } .ticket-rich-body p, .ticket-rich-body ul, .ticket-rich-body ol, .ticket-rich-body blockquote, .ticket-rich-body pre { margin: 0 0 0.6em 0; } .ticket-rich-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; } /* Quill toolbar tweaks — slimmer borders, less padding, so it fits inside our card layouts without dominating. */ .rich-text-editor-host { background: white; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 4px 4px; padding: 6px 10px; } .ql-toolbar.ql-snow { border-color: #e2e8f0; border-radius: 4px 4px 0 0; background: #f8fafc; } /* ============================================================================ DARK-THEME BRIDGE for Bootstrap surfaces (layout-50 Pack 1) ---------------------------------------------------------------------------- Bootstrap components hard-code light backgrounds/borders, so the semantic token re-point in html[data-theme="dark"] doesn't reach them on its own. This block re-skins the surfaces the SHELL relies on (card, table, form controls, dropdown, modal, list-group) using the SAME tokens, proving the cascade end-to-end. NOT a full page sweep — that's a later breadth pack; deeper bespoke page CSS may still show light spots under dark mode until then. ============================================================================ */ html[data-theme="dark"] .card { background-color: var(--color-bg-card); color: var(--color-text); } html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); color: var(--color-text); } html[data-theme="dark"] .table thead th { background-color: var(--color-table-header); border-bottom-color: var(--color-border); } html[data-theme="dark"] .table tbody tr:hover { background-color: var(--color-bg-subtle); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--color-bg-card); border-color: var(--color-border-input); color: var(--color-text); } html[data-theme="dark"] .form-control::placeholder { color: var(--color-text-muted); } html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas { background-color: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text); } html[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } html[data-theme="dark"] .rich-text-editor-host, html[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--color-bg-card); border-color: var(--color-border); } /* ============================================================================ SHARED FOUNDATION COMPONENTS (layout-50 Pack 1) — token-based, theme-aware PageHeader / EmptyState / Skeleton / Toast. Kept here (global, not scoped) so they read the cascading theme tokens directly. ============================================================================ */ /* ── PageHeader ── */ .tyit-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .tyit-page-header__titles { min-width: 0; } .tyit-page-header__title { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-dark); } .tyit-page-header__subtitle { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .tyit-page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ── EmptyState ── */ .tyit-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-6) var(--space-4); color: var(--color-text-muted); } .tyit-empty__icon { font-size: 2.5rem; color: var(--color-border-strong); margin-bottom: var(--space-3); line-height: 1; } .tyit-empty__message { font-size: var(--font-size-base); color: var(--color-text); margin-bottom: var(--space-4); max-width: 32rem; } .tyit-empty__actions { display: flex; gap: var(--space-2); } /* ── Skeleton ── */ .tyit-skeleton { display: block; background: linear-gradient( 90deg, var(--color-bg-subtle) 25%, var(--color-border) 37%, var(--color-bg-subtle) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: tyit-skeleton-shimmer 1.4s ease infinite; } @keyframes tyit-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .tyit-skeleton { animation: none; } } /* ── Toast host + toasts ── */ .tyit-toast-host { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 1080; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(360px, calc(100vw - 2 * var(--space-4))); pointer-events: none; } :global(html[dir="rtl"]) .tyit-toast-host { right: auto; left: var(--space-4); } .tyit-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-3); background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); } .tyit-toast--success { border-left-color: var(--color-success); } .tyit-toast--warning { border-left-color: var(--color-warning); } .tyit-toast--danger { border-left-color: var(--color-danger); } .tyit-toast--info { border-left-color: var(--color-info); } .tyit-toast__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; } .tyit-toast--success .tyit-toast__icon { color: var(--color-success); } .tyit-toast--warning .tyit-toast__icon { color: var(--color-warning); } .tyit-toast--danger .tyit-toast__icon { color: var(--color-danger); } .tyit-toast--info .tyit-toast__icon { color: var(--color-info); } .tyit-toast__body { flex: 1; min-width: 0; word-wrap: break-word; } .tyit-toast__close { flex-shrink: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0 var(--space-1); font-size: 1rem; line-height: 1.3; } .tyit-toast__close:hover { color: var(--color-text); }