/* ============================================================================ Scale Design System v0 — anchored on Microsoft Fluent 2 Scoped under [data-ds] so it never collides with custom.css (no !important). Tokens reuse the existing Scale palette; scales/taxonomy follow Fluent 2. Promotion path: widen the scope (e.g. data-ds on ) to go app-wide. Sources: fluent2.microsoft.design (type, layout, elevation), @fluentui/tokens (radius, stroke, durations, curves). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); [data-ds] { /* ---- Colour roles (Fluent semantic structure -> Scale palette) ---- */ --ds-bg-canvas: #fafaf8; --ds-bg-1: #ffffff; --ds-bg-2: #f5f5f2; --ds-bg-3: #eceae4; --ds-bg-disabled: #f1efe9; --ds-fg-1: #171715; --ds-fg-2: #3f3e3a; --ds-fg-3: #6b6a64; --ds-fg-disabled: #9b988f; --ds-fg-on-brand: #ffffff; --ds-stroke-1: #e5e2dc; --ds-stroke-2: #eceae4; --ds-stroke-strong: #d3d0c8; --ds-stroke-focus: #0a3458; --ds-brand: #0a3458; --ds-brand-hover: #062843; --ds-brand-pressed: #04203a; --ds-brand-soft: #eef5fb; --ds-accent: #008080; --ds-success: #1f8a4c; --ds-success-bg: #e8f5ec; --ds-warning: #9a6700; --ds-warning-bg: #fbf3e0; --ds-danger: #c0392b; --ds-danger-bg: #fbeceb; --ds-info: #1f6feb; --ds-info-bg: #eaf2fe; /* ---- Typography (Fluent 2 ramp mapped to Inter; rem = px / 16) ---- */ --ds-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ds-fs-caption2: 0.625rem; --ds-lh-caption2: 0.875rem; --ds-fs-caption1: 0.75rem; --ds-lh-caption1: 1rem; --ds-fs-body1: 0.875rem; --ds-lh-body1: 1.25rem; --ds-fs-subtitle2: 1rem; --ds-lh-subtitle2: 1.375rem; --ds-fs-subtitle1: 1.25rem; --ds-lh-subtitle1: 1.625rem; --ds-fs-title3: 1.5rem; --ds-lh-title3: 2rem; --ds-fs-title2: 1.75rem; --ds-lh-title2: 2.25rem; --ds-fs-title1: 2rem; --ds-lh-title1: 2.5rem; --ds-w-regular: 400; --ds-w-medium: 500; --ds-w-semibold: 600; --ds-w-bold: 700; /* ---- Spacing (Fluent 4px ramp, sizeNNN naming) ---- */ --ds-space-0: 0; --ds-space-20: 2px; --ds-space-40: 4px; --ds-space-60: 6px; --ds-space-80: 8px; --ds-space-100: 10px; --ds-space-120: 12px; --ds-space-160: 16px; --ds-space-200: 20px; --ds-space-240: 24px; --ds-space-280: 28px; --ds-space-320: 32px; --ds-space-360: 36px; --ds-space-400: 40px; --ds-space-480: 48px; --ds-space-520: 52px; --ds-space-560: 56px; /* ---- Radius (Fluent) ---- */ --ds-radius-none: 0; --ds-radius-sm: 2px; --ds-radius-md: 4px; --ds-radius-lg: 6px; --ds-radius-xl: 8px; --ds-radius-circular: 10000px; /* ---- Stroke widths (Fluent) ---- */ --ds-stroke-w-thin: 1px; --ds-stroke-w-thick: 2px; --ds-stroke-w-thicker: 3px; --ds-stroke-w-thickest: 4px; /* ---- Elevation (Fluent shadow ramp, light neutral) ---- */ --ds-shadow-2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14); --ds-shadow-4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14); --ds-shadow-8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14); --ds-shadow-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14); --ds-shadow-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14); --ds-shadow-64: 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14); /* ---- Motion (Fluent durations & curves) ---- */ --ds-dur-ultrafast: 50ms; --ds-dur-faster: 100ms; --ds-dur-fast: 150ms; --ds-dur-normal: 200ms; --ds-dur-gentle: 250ms; --ds-dur-slow: 300ms; --ds-dur-slower: 400ms; --ds-dur-ultraslow: 500ms; --ds-curve-easy: cubic-bezier(.33, 0, .67, 1); --ds-curve-easy-max: cubic-bezier(.8, 0, .2, 1); --ds-curve-decel-max: cubic-bezier(.1, .9, .2, 1); --ds-curve-decel-mid: cubic-bezier(0, 0, 0, 1); --ds-curve-decel-min: cubic-bezier(.33, 0, .1, 1); --ds-curve-accel-max: cubic-bezier(.9, .1, 1, .2); --ds-curve-accel-mid: cubic-bezier(1, 0, 1, 1); --ds-curve-accel-min: cubic-bezier(.8, 0, .78, 1); --ds-curve-linear: cubic-bezier(0, 0, 1, 1); /* ---- Z-index ladder ---- */ --ds-z-sticky: 20; --ds-z-sticky-top: 30; --ds-z-dropdown: 1000; --ds-z-drawer: 1080; --ds-z-modal: 2000; /* ---- Convenience composites ---- */ --ds-focus-ring: 0 0 0 var(--ds-stroke-w-thick) var(--ds-bg-1), 0 0 0 calc(var(--ds-stroke-w-thick) * 2) var(--ds-stroke-focus); --ds-transition: var(--ds-dur-fast) var(--ds-curve-easy); font-family: var(--ds-font); font-size: var(--ds-fs-body1); line-height: var(--ds-lh-body1); color: var(--ds-fg-1); } /* ---------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ [data-ds] *, [data-ds] *::before, [data-ds] *::after { box-sizing: border-box; } [data-ds] .ds-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Type utilities */ [data-ds] .ds-type-caption2 { font-size: var(--ds-fs-caption2); line-height: var(--ds-lh-caption2); } [data-ds] .ds-type-caption1 { font-size: var(--ds-fs-caption1); line-height: var(--ds-lh-caption1); } [data-ds] .ds-type-body1 { font-size: var(--ds-fs-body1); line-height: var(--ds-lh-body1); } [data-ds] .ds-type-subtitle2 { font-size: var(--ds-fs-subtitle2); line-height: var(--ds-lh-subtitle2); font-weight: var(--ds-w-semibold); } [data-ds] .ds-type-subtitle1 { font-size: var(--ds-fs-subtitle1); line-height: var(--ds-lh-subtitle1); font-weight: var(--ds-w-semibold); } [data-ds] .ds-type-title3 { font-size: var(--ds-fs-title3); line-height: var(--ds-lh-title3); font-weight: var(--ds-w-semibold); } [data-ds] .ds-label { font-size: var(--ds-fs-caption1); line-height: var(--ds-lh-caption1); font-weight: var(--ds-w-semibold); letter-spacing: .04em; text-transform: none; color: var(--ds-fg-3); } [data-ds] .ds-muted { color: var(--ds-fg-3); } /* No all-caps headers in DS workbench: neutralize Bootstrap's uppercase utility within scope */ [data-ds] .text-uppercase { text-transform: none !important; } /* ---------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ [data-ds] .ds-btn { --_bg: transparent; --_fg: var(--ds-fg-1); --_bd: var(--ds-stroke-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-80); min-height: 34px; padding: var(--ds-space-60) var(--ds-space-160); font-family: inherit; font-size: var(--ds-fs-body1); line-height: var(--ds-lh-body1); font-weight: var(--ds-w-semibold); color: var(--_fg); background: var(--_bg); border: var(--ds-stroke-w-thin) solid var(--_bd); border-radius: var(--ds-radius-md); cursor: pointer; text-decoration: none; transition: background var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition), box-shadow var(--ds-transition); white-space: nowrap; } [data-ds] .ds-btn:hover { background: var(--ds-bg-2); } [data-ds] .ds-btn:active { background: var(--ds-bg-3); } [data-ds] .ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); } [data-ds] .ds-btn:disabled, [data-ds] .ds-btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } [data-ds] .ds-btn--primary { --_bg: var(--ds-brand); --_fg: var(--ds-fg-on-brand); --_bd: var(--ds-brand); color: var(--ds-fg-on-brand); } [data-ds] .ds-btn--primary:hover, [data-ds] .ds-btn--primary:focus, [data-ds] .ds-btn--primary:visited { color: var(--ds-fg-on-brand); } [data-ds] .ds-btn--primary > i, [data-ds] .ds-btn--primary > span { color: inherit; } [data-ds] .ds-btn--primary:hover { --_bg: var(--ds-brand-hover); --_bd: var(--ds-brand-hover); background: var(--ds-brand-hover); } [data-ds] .ds-btn--primary:active { --_bg: var(--ds-brand-pressed); background: var(--ds-brand-pressed); } [data-ds] .ds-btn--secondary { --_bg: var(--ds-bg-1); --_fg: var(--ds-fg-1); --_bd: var(--ds-stroke-strong); } [data-ds] .ds-btn--outline { --_bg: transparent; --_fg: var(--ds-brand); --_bd: var(--ds-brand); } [data-ds] .ds-btn--outline:hover { background: var(--ds-brand-soft); } [data-ds] .ds-btn--ghost { --_bg: transparent; --_fg: var(--ds-fg-2); --_bd: transparent; } [data-ds] .ds-btn--danger { --_bg: transparent; --_fg: var(--ds-danger); --_bd: var(--ds-stroke-strong); } [data-ds] .ds-btn--danger:hover { background: var(--ds-danger-bg); border-color: var(--ds-danger); } [data-ds] .ds-btn--sm { min-height: 28px; padding: var(--ds-space-40) var(--ds-space-120); font-size: var(--ds-fs-caption1); } [data-ds] .ds-btn--icon { min-height: 34px; width: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--ds-fg-2); border-radius: var(--ds-radius-md); } [data-ds] .ds-btn--icon:hover { background: var(--ds-bg-2); color: var(--ds-fg-1); } [data-ds] .ds-btn--icon.ds-btn--danger:hover { background: var(--ds-danger-bg); color: var(--ds-danger); } /* Icon + primary: keep the brand fill + white glyph (the plain --icon rule above would otherwise strip it to transparent/dark, leaving a dark "+" on a dark/brand surface). */ [data-ds] .ds-btn--icon.ds-btn--primary { background: var(--ds-brand); color: var(--ds-fg-on-brand); border-color: var(--ds-brand); } [data-ds] .ds-btn--icon.ds-btn--primary:hover { background: var(--ds-brand-hover); color: var(--ds-fg-on-brand); border-color: var(--ds-brand-hover); } [data-ds] .ds-btn--icon.ds-btn--primary:active { background: var(--ds-brand-pressed); } /* The theme ships a global `a { color: rgb(10,52,88) !important }` that hijacks anchor-based buttons/segments (e.g. "+ New …", action icons, the Active/Archived toggle). Only !important can beat !important — restore DS colors here so it applies on every page. */ [data-ds] a.ds-btn { color: var(--_fg, var(--ds-fg-1)) !important; } [data-ds] a.ds-btn--primary, [data-ds] a.ds-btn--primary:hover, [data-ds] a.ds-btn--primary:focus, [data-ds] a.ds-btn--primary:visited, [data-ds] a.ds-btn--icon.ds-btn--primary { color: var(--ds-fg-on-brand) !important; } [data-ds] a.ds-btn--outline { color: var(--ds-brand) !important; } [data-ds] a.ds-btn--icon { color: var(--ds-fg-2) !important; } [data-ds] a.ds-btn--icon:hover { color: var(--ds-fg-1) !important; } [data-ds] a.ds-btn--icon.ds-btn--danger:hover { color: var(--ds-danger) !important; } [data-ds] .ds-segmented > a { color: var(--ds-fg-2) !important; } [data-ds] .ds-segmented > a:hover { color: var(--ds-fg-1) !important; } [data-ds] .ds-segmented > a.active { color: var(--ds-brand) !important; } /* Grid add-row dwell cue: a subtle progress fill on the commit (+) button counts down to the idle auto-commit. Transform-based (GPU-friendly). prefers-reduced-motion suppresses the fill — the auto-commit still fires; the cue is decoration, not the mechanism. */ [data-ds] .ds-btn.is-dwelling { position: relative; overflow: hidden; } [data-ds] .ds-btn.is-dwelling::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%; background: var(--ds-fg-on-brand); opacity: .9; transform-origin: left center; transform: scaleX(0); animation: ds-dwell-fill var(--ds-dwell-ms, 5000ms) linear forwards; } @keyframes ds-dwell-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { [data-ds] .ds-btn.is-dwelling::after { animation: none; transform: scaleX(0); } } /* ---------------------------------------------------------------------------- Inputs & selects -------------------------------------------------------------------------- */ [data-ds] .ds-input, [data-ds] .ds-select { width: 100%; height: 34px; min-height: 34px; line-height: 1.2; padding: var(--ds-space-60) var(--ds-space-120); font-family: inherit; font-size: var(--ds-fs-body1); line-height: var(--ds-lh-body1); color: var(--ds-fg-1); background: var(--ds-bg-1); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-strong); border-radius: var(--ds-radius-md); transition: border-color var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition); } [data-ds] .ds-input::placeholder { color: var(--ds-fg-disabled); } [data-ds] .ds-input:hover, [data-ds] .ds-select:hover { border-color: var(--ds-fg-3); } [data-ds] .ds-input:focus, [data-ds] .ds-select:focus { outline: none; border-color: var(--ds-stroke-focus); box-shadow: 0 0 0 var(--ds-stroke-w-thin) var(--ds-stroke-focus); } [data-ds] .ds-input:disabled, [data-ds] .ds-select:disabled { background-color: var(--ds-bg-disabled); color: var(--ds-fg-disabled); cursor: not-allowed; } [data-ds] .ds-input[readonly] { background: var(--ds-bg-2); color: var(--ds-fg-2); } [data-ds] .ds-input.ds-invalid, [data-ds] .ds-select.ds-invalid { border-color: var(--ds-danger); } /* Custom select chevron with proper padding from the box edge */ [data-ds] .ds-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-inline-end: var(--ds-space-400); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6a64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--ds-space-160) center; background-size: 12px; } [data-ds] .ds-select::-ms-expand { display: none; } [data-ds] .ds-field { display: flex; flex-direction: column; gap: var(--ds-space-40); } [data-ds] .ds-field > label { font-size: var(--ds-fs-caption1); font-weight: var(--ds-w-semibold); color: var(--ds-fg-2); } [data-ds] .ds-error-text { color: var(--ds-danger); font-size: var(--ds-fs-caption1); } /* ---------------------------------------------------------------------------- Checkboxes & radios (aligns native + Bootstrap .form-check-input to the DS) -------------------------------------------------------------------------- */ [data-ds] .form-check-input, [data-ds] input[type="checkbox"], [data-ds] input[type="radio"] { width: 1rem; height: 1rem; margin-top: 0.15rem; border: var(--ds-stroke-w-thin) solid var(--ds-stroke-strong); background-color: var(--ds-bg-1); cursor: pointer; transition: background-color var(--ds-transition), border-color var(--ds-transition), box-shadow var(--ds-transition); } [data-ds] .form-check-input:focus, [data-ds] input[type="checkbox"]:focus, [data-ds] input[type="radio"]:focus { outline: none; border-color: var(--ds-stroke-focus); box-shadow: 0 0 0 var(--ds-stroke-w-thin) var(--ds-stroke-focus); } [data-ds] .form-check-input:checked { background-color: var(--ds-brand); border-color: var(--ds-brand); } [data-ds] .form-check-input:disabled { opacity: .5; cursor: not-allowed; } [data-ds] .form-check-label { color: var(--ds-fg-1); cursor: pointer; } /* ---------------------------------------------------------------------------- Cards / surfaces -------------------------------------------------------------------------- */ [data-ds] .ds-card { background: var(--ds-bg-1); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-1); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-2); } [data-ds] .ds-card--flat { box-shadow: none; } /* ---------------------------------------------------------------------------- Badges / status pills / chips -------------------------------------------------------------------------- */ [data-ds] .ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-40); padding: 1px var(--ds-space-80); font-size: var(--ds-fs-caption1); font-weight: var(--ds-w-semibold); line-height: var(--ds-lh-caption1); border-radius: var(--ds-radius-circular); background: var(--ds-bg-3); color: var(--ds-fg-2); white-space: nowrap; } [data-ds] .ds-badge--brand { background: var(--ds-brand-soft); color: var(--ds-brand); } [data-ds] .ds-badge--success { background: var(--ds-success-bg); color: var(--ds-success); } [data-ds] .ds-badge--warning { background: var(--ds-warning-bg); color: var(--ds-warning); } [data-ds] .ds-badge--danger { background: var(--ds-danger-bg); color: var(--ds-danger); } [data-ds] .ds-badge--locked { background: var(--ds-bg-3); color: var(--ds-fg-3); } [data-ds] .ds-badge--subtle { background: var(--ds-bg-3); color: var(--ds-fg-3); } [data-ds] .ds-chip { display: inline-flex; align-items: center; gap: var(--ds-space-60); padding: var(--ds-space-60) var(--ds-space-120); font-size: var(--ds-fs-caption1); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-1); border-radius: var(--ds-radius-circular); background: var(--ds-bg-1); color: var(--ds-fg-2); } /* ---------------------------------------------------------------------------- Segmented control (e.g. Active / Archived) -------------------------------------------------------------------------- */ [data-ds] .ds-segmented { display: inline-flex; padding: var(--ds-space-20); gap: var(--ds-space-20); background: var(--ds-bg-2); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-1); border-radius: var(--ds-radius-md); } [data-ds] .ds-segmented > a, [data-ds] .ds-segmented > button, [data-ds] .ds-segmented > label { display: inline-flex; align-items: center; padding: var(--ds-space-40) var(--ds-space-160); font-size: var(--ds-fs-caption1); font-weight: var(--ds-w-semibold); color: var(--ds-fg-2); background: transparent; border: none; border-radius: var(--ds-radius-sm); text-decoration: none; cursor: pointer; user-select: none; transition: background var(--ds-transition), color var(--ds-transition); } [data-ds] .ds-segmented > a:hover, [data-ds] .ds-segmented > button:hover, [data-ds] .ds-segmented > label:hover { color: var(--ds-fg-1); } [data-ds] .ds-segmented > .active, [data-ds] .ds-segmented > label:has(input:checked) { background: var(--ds-bg-1); color: var(--ds-brand); box-shadow: var(--ds-shadow-2); } /* ---------------------------------------------------------------------------- Toolbar + search -------------------------------------------------------------------------- */ [data-ds] .ds-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-120); } /* Search field: icon + input are flex SIBLINGS inside one bordered box. The input is stripped of its own border/background/padding so it sits flush after the icon — no overlap math, so the theme's aggressive input rules can't reintroduce the overlap. */ [data-ds] .ds-search { display: flex; align-items: center; gap: var(--ds-space-80); flex: 1 1 220px; min-width: 0; height: 34px; padding: 0 var(--ds-space-120) !important; background: var(--ds-bg-1); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-strong); border-radius: var(--ds-radius-md); } [data-ds] .ds-search:focus-within { border-color: var(--ds-stroke-focus); box-shadow: var(--ds-focus-ring); } [data-ds] .ds-search > i { position: static; flex: 0 0 auto; display: flex; align-items: center; line-height: 1; color: var(--ds-fg-3); pointer-events: none; } [data-ds] .ds-search > input.ds-input { flex: 1 1 auto; min-width: 0; height: auto !important; min-height: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* ---------------------------------------------------------------------------- Data table (data-dense) -------------------------------------------------------------------------- */ [data-ds] .ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-body1); } [data-ds] .ds-table thead th { position: sticky; top: 0; z-index: var(--ds-z-sticky); text-align: start; /* DS standard: header padding matches the body row padding (6px vertical). !important defeats the theme's global `th { padding/background/color/font-weight !important }`. */ padding: var(--ds-space-60) var(--ds-space-120) !important; font-size: var(--ds-fs-caption1); line-height: var(--ds-lh-caption1); font-weight: var(--ds-w-semibold) !important; letter-spacing: .03em; text-transform: none; color: var(--ds-fg-3) !important; background: var(--ds-bg-2) !important; border-bottom: var(--ds-stroke-w-thin) solid var(--ds-stroke-strong); /* allow long labels to wrap (2+ lines) instead of forcing wide columns on many-column tables */ white-space: normal; vertical-align: bottom; } [data-ds] .ds-table tbody td { padding: var(--ds-space-60) var(--ds-space-120); border-bottom: var(--ds-stroke-w-thin) solid var(--ds-stroke-2); color: var(--ds-fg-1); vertical-align: middle; } [data-ds] .ds-table tbody tr { transition: background var(--ds-dur-faster) var(--ds-curve-easy); } [data-ds] .ds-table tbody tr:hover { background: var(--ds-bg-2); } [data-ds] .ds-table .ds-td-num { text-align: end; font-variant-numeric: tabular-nums; } [data-ds] .ds-table tr.ds-row-click { cursor: pointer; } /* ---------------------------------------------------------------------------- Expander (disclosure) -------------------------------------------------------------------------- */ [data-ds] .ds-expander { border: var(--ds-stroke-w-thin) solid var(--ds-stroke-1); border-radius: var(--ds-radius-lg); background: var(--ds-bg-1); overflow: hidden; } [data-ds] .ds-expander + .ds-expander { margin-top: var(--ds-space-80); } [data-ds] .ds-expander > summary { display: flex; align-items: center; gap: var(--ds-space-120); padding: var(--ds-space-120) var(--ds-space-160); cursor: pointer; list-style: none; font-weight: var(--ds-w-semibold); color: var(--ds-fg-1); user-select: none; } [data-ds] .ds-expander > summary::-webkit-details-marker { display: none; } [data-ds] .ds-expander > summary .ds-expander-caret { margin-inline-start: auto; color: var(--ds-fg-3); transition: transform var(--ds-dur-normal) var(--ds-curve-decel-max); } [data-ds] .ds-expander[open] > summary .ds-expander-caret { transform: rotate(90deg); } [data-ds] .ds-expander > .ds-expander-body { padding: var(--ds-space-40) var(--ds-space-160) var(--ds-space-160); border-top: var(--ds-stroke-w-thin) solid var(--ds-stroke-2); } /* ---------------------------------------------------------------------------- Tabs (top-anchored pill-underline) -------------------------------------------------------------------------- */ [data-ds] .ds-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-40); border-bottom: var(--ds-stroke-w-thin) solid var(--ds-stroke-1); } [data-ds] .ds-tab { display: inline-flex; align-items: center; gap: var(--ds-space-60); height: 34px; padding: 0 var(--ds-space-160); margin-bottom: -1px; font-family: inherit; font-size: var(--ds-fs-body1); font-weight: var(--ds-w-semibold); color: var(--ds-fg-3); background: transparent; border: none; border-bottom: var(--ds-stroke-w-thick) solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--ds-transition), border-color var(--ds-transition); } [data-ds] .ds-tab:hover { color: var(--ds-fg-1); } [data-ds] .ds-tab.active { color: var(--ds-brand); border-bottom-color: var(--ds-brand); } [data-ds] .ds-tab:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--ds-radius-sm); } [data-ds] .ds-tab:disabled, [data-ds] .ds-tab.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } [data-ds] .ds-tabpanel[hidden] { display: none; } /* ---------------------------------------------------------------------------- Toggle switch (binds a single checkbox; pair with a hidden false for forms) -------------------------------------------------------------------------- */ [data-ds] .ds-switch { display: inline-flex; align-items: center; gap: var(--ds-space-60); cursor: pointer; user-select: none; } [data-ds] .ds-switch > input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } [data-ds] .ds-switch .ds-switch-track { position: relative; flex: 0 0 auto; width: 30px; height: 16px; border-radius: var(--ds-radius-circular); background: var(--ds-bg-3); border: var(--ds-stroke-w-thin) solid var(--ds-stroke-strong); transition: background var(--ds-transition), border-color var(--ds-transition); } [data-ds] .ds-switch .ds-switch-track::after { content: ""; position: absolute; top: 1px; inset-inline-start: 1px; width: 12px; height: 12px; border-radius: var(--ds-radius-circular); background: var(--ds-bg-1); box-shadow: var(--ds-shadow-2); transition: transform var(--ds-transition); } [data-ds] .ds-switch > input:checked ~ .ds-switch-track { background: var(--ds-brand); border-color: var(--ds-brand); } [data-ds] .ds-switch > input:checked ~ .ds-switch-track::after { transform: translateX(14px); } [data-ds] .ds-switch > input:focus-visible ~ .ds-switch-track { box-shadow: var(--ds-focus-ring); } [data-ds] .ds-switch > input:disabled ~ .ds-switch-track { opacity: .5; } [data-ds] .ds-switch .ds-switch-label { font-size: var(--ds-fs-caption1); color: var(--ds-fg-1); } /* ---------------------------------------------------------------------------- Multi-value select (token chips + type-ahead). Backed by a hidden popup). Enhances a hidden