/* ===================================================================== CSI design tokens + components — v2 bundle entry Consumer apps reference this single stylesheet: Slice 1J (Design System v2) replaced the legacy theme/_*.css scheme with a tokens-as-source-of-truth model: - tokens/tokens.css defines every design token once. - themes/{byui,byui-dark,high-contrast}.css override semantic aliases. - components/csi-*.css ship per-component styling. Theme switching: ThemeProvider.razor applies `theme-{name} mode-{light|dark}` to . The README's first-paint snippet shows how consumer apps apply the saved theme before Blazor bootstrap to avoid a flash of default styling. TODOs marked "TODO 1J:" point to component CSS files that haven't landed yet during slice 1J execution. Each one is uncommented when its component task lands. By slice close, no TODO 1J markers remain. ==================================================================== */ /* Web fonts — BYU-Idaho-approved (Open Sans replaces News Gothic; Merriweather replaces Minion). News Gothic + Minion themselves aren't web-licensed by the BYU-I brand portal. */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap'); /* Tokens — single source of truth */ @import url('tokens/tokens.css'); /* Themes — three only (sunrise/pine/slate/byui-deep/byui-blue dropped) */ @import url('themes/byui.css'); @import url('themes/byui-dark.css'); @import url('themes/high-contrast.css'); /* ─── Components — alphabetized ──────────────────────────────────── */ /* csi-alert: scoped via Components/Feedback/CsiAlert.razor.css */ /* csi-avatar: scoped via Components/Display/CsiAvatar.razor.css */ /* csi-badge: scoped via Components/Display/CsiBadge.razor.css */ /* csi-breadcrumbs: scoped via Components/Display/CsiBreadcrumbs.razor.css */ /* csi-button (new, slice 1J): scoped via Components/Buttons/CsiButton.razor.css */ @import url('components/csi-button.css'); /* legacy chrome; replaced in Milestone 10 */ /* csi-button-group: scoped via Components/Buttons/CsiButtonGroup.razor.css */ /* csi-card: scoped via Components/Display/CsiCard.razor.css */ /* csi-checkbox: scoped via Components/Forms/CsiCheckbox.razor.css */ /* csi-date-field: scoped via Components/Forms/CsiDateField.razor.css */ /* csi-date-picker: scoped via Components/DatePicker/CsiDatePicker.razor.css */ /* csi-dialog: scoped via Components/Overlays/CsiDialog.razor.css */ /* csi-drawer: scoped via Components/Overlays/CsiDrawer.razor.css */ /* csi-empty-state: scoped via Components/Feedback/CsiEmptyState.razor.css */ /* csi-form-field: scoped via Components/Forms/CsiFormField.razor.css */ /* csi-icon-button: scoped via Components/Buttons/CsiIconButton.razor.css */ /* csi-icon: scoped via Components/Display/CsiIcon.razor.css */ /* csi-image: scoped via Components/Display/CsiImage.razor.css */ /* csi-modal: scoped via Components/Overlays/CsiModal.razor.css */ /* csi-number-field: scoped via Components/Forms/CsiNumberField.razor.css */ /* csi-popover: scoped via Components/Overlays/CsiPopover.razor.css */ /* csi-radio-group: scoped via Components/Forms/CsiRadioGroup.razor.css */ /* csi-select: scoped via Components/Forms/CsiSelect.razor.css */ /* csi-skeleton: scoped via Components/Feedback/CsiSkeleton.razor.css */ /* csi-spinner: scoped via Components/Feedback/CsiSpinner.razor.css */ /* csi-table: scoped via Components/Tables/CsiTable.razor.css */ /* csi-tabs: scoped via Components/Display/CsiTabs.razor.css */ /* csi-text-area: scoped via Components/Forms/CsiTextArea.razor.css */ /* csi-text-field: scoped via Components/Forms/CsiTextField.razor.css */ /* csi-theme-picker: scoped via Components/ThemePicker.razor.css */ /* csi-toast: scoped via Components/Feedback/CsiToast.razor.css + CsiToastHost.razor.css */ /* csi-toggle: scoped via Components/Forms/CsiToggle.razor.css */ /* csi-tooltip: scoped via Components/Feedback/CsiTooltip.razor.css */ /* ─── Existing components (kept; chrome moved from themes/_*.css) ── */ @import url('components/csi-base.css'); /* legacy tokens + chrome; cleanup in Milestone 10 */ @import url('components/csi-page.css'); @import url('components/csi-auth.css'); @import url('components/csi-detail.css'); @import url('components/csi-external-link-icon.css'); @import url('components/csi-code-inline.css'); @import url('components/csi-person.css'); @import url('components/csi-pill.css'); @import url('components/csi-menu.css'); @import url('components/csi-pagination.css'); @import url('components/csi-search.css'); @import url('components/csi-filter-chips.css'); @import url('components/csi-filter-strip.css'); @import url('components/csi-user-card.css'); /* ─── Layout shells ──────────────────────────────────────────────── */ /* TODO 1J: components/csi-layout-full-app.css */ /* TODO 1J: components/csi-layout-pwa.css */ @import url('components/csi-layout-responsive.css'); /* Badges inside table cells: tighter vertical metrics so a badge row is no taller than a text row (2026-07-23 — the Sections-vs-Instructors row-height inconsistency). Lives here (global) because CellTemplate content carries the consuming page's CSS scope, not the table's, so a scoped rule in CsiTable.razor.css cannot reach it. */ .csi-table td { vertical-align: middle; } .csi-table td .csi-badge { padding-top: 0.05rem; padding-bottom: 0.05rem; line-height: 1.2; } /* Selection checkboxes inside table cells: the standalone CsiCheckbox reserves a 44px touch target (min-height: var(--csi-touch-target)), which inflates every selectable row from 38px to 61px — THE actual cause of the Sections-vs-Instructors height gap. The row itself is the touch target in a table, so drop the reservation here. Specificity (0,3,0) intentionally beats the scoped-CSS rule's (0,2,0). */ .csi-table td .csi-checkbox, .csi-table th .csi-checkbox { min-height: 0; } /* In the dedicated selection cell the checkbox is the only content, so take it out of inline flow entirely — as inline-flex it sits on the text baseline with its bottom edge as its own baseline, adding ~5px of phantom descent to the line box (43.5px rows). Specificity note: must exceed the scoped-CSS rule `.csi-checkbox[b-…]` (0,2,0) — the td/th type selector lifts this to (0,3,1). */ td.csi-table__select-cell .csi-checkbox, th.csi-table__select-cell .csi-checkbox { display: flex; }