/* The BSFT UI default theme. Built entirely on design tokens: applications re-skin by overriding the custom properties below (or by replacing this stylesheet), never by touching component behavior. Consumed via: */ :root { --bsft-color-text: #1f2933; --bsft-color-muted: #6b7280; --bsft-color-surface: #ffffff; --bsft-color-border: #d2d6dc; --bsft-color-primary: #2563eb; --bsft-color-primary-contrast: #ffffff; --bsft-color-danger: #b91c1c; --bsft-color-danger-surface: #fef2f2; --bsft-color-warning: #92400e; --bsft-color-warning-surface: #fffbeb; --bsft-color-success: #166534; --bsft-color-success-surface: #f0fdf4; --bsft-color-info: #1e40af; --bsft-color-info-surface: #eff6ff; --bsft-spacing: 0.5rem; --bsft-radius: 0.375rem; --bsft-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --- dark theme ---------------------------------------------------------- */ /* The standard three-state model: without an attribute the system preference decides (prefers-color-scheme), data-bsft-theme="light"|"dark" on overrides it in either direction. The dark palette lives once in the --bsft-dark-* tokens; the two activation rules below only map the public tokens onto it, so they cannot drift apart. Only the colors change — spacing, radius and typography are theme-independent. */ :root { --bsft-dark-color-text: #e5e7eb; --bsft-dark-color-muted: #9ca3af; --bsft-dark-color-surface: #111827; --bsft-dark-color-border: #374151; --bsft-dark-color-primary: #3b82f6; --bsft-dark-color-primary-contrast: #ffffff; --bsft-dark-color-danger: #f87171; --bsft-dark-color-danger-surface: #450a0a; --bsft-dark-color-warning: #fbbf24; --bsft-dark-color-warning-surface: #451a03; --bsft-dark-color-success: #4ade80; --bsft-dark-color-success-surface: #052e16; --bsft-dark-color-info: #93c5fd; --bsft-dark-color-info-surface: #172554; } @media (prefers-color-scheme: dark) { :root:not([data-bsft-theme="light"]) { --bsft-color-text: var(--bsft-dark-color-text); --bsft-color-muted: var(--bsft-dark-color-muted); --bsft-color-surface: var(--bsft-dark-color-surface); --bsft-color-border: var(--bsft-dark-color-border); --bsft-color-primary: var(--bsft-dark-color-primary); --bsft-color-primary-contrast: var(--bsft-dark-color-primary-contrast); --bsft-color-danger: var(--bsft-dark-color-danger); --bsft-color-danger-surface: var(--bsft-dark-color-danger-surface); --bsft-color-warning: var(--bsft-dark-color-warning); --bsft-color-warning-surface: var(--bsft-dark-color-warning-surface); --bsft-color-success: var(--bsft-dark-color-success); --bsft-color-success-surface: var(--bsft-dark-color-success-surface); --bsft-color-info: var(--bsft-dark-color-info); --bsft-color-info-surface: var(--bsft-dark-color-info-surface); } } :root[data-bsft-theme="dark"] { --bsft-color-text: var(--bsft-dark-color-text); --bsft-color-muted: var(--bsft-dark-color-muted); --bsft-color-surface: var(--bsft-dark-color-surface); --bsft-color-border: var(--bsft-dark-color-border); --bsft-color-primary: var(--bsft-dark-color-primary); --bsft-color-primary-contrast: var(--bsft-dark-color-primary-contrast); --bsft-color-danger: var(--bsft-dark-color-danger); --bsft-color-danger-surface: var(--bsft-dark-color-danger-surface); --bsft-color-warning: var(--bsft-dark-color-warning); --bsft-color-warning-surface: var(--bsft-dark-color-warning-surface); --bsft-color-success: var(--bsft-dark-color-success); --bsft-color-success-surface: var(--bsft-dark-color-success-surface); --bsft-color-info: var(--bsft-dark-color-info); --bsft-color-info-surface: var(--bsft-dark-color-info-surface); } /* --- shared ------------------------------------------------------------- */ .bsft-error { color: var(--bsft-color-danger); background: var(--bsft-color-danger-surface); border: 1px solid var(--bsft-color-danger); border-radius: var(--bsft-radius); padding: var(--bsft-spacing); font-family: var(--bsft-font); } .bsft-empty, .bsft-busy { color: var(--bsft-color-muted); font-family: var(--bsft-font); padding: var(--bsft-spacing); } .bsft-notice { color: var(--bsft-color-warning); background: var(--bsft-color-warning-surface); border: 1px solid var(--bsft-color-warning); border-radius: var(--bsft-radius); padding: var(--bsft-spacing); font-family: var(--bsft-font); } /* --- form --------------------------------------------------------------- */ .bsft-form { display: flex; flex-direction: column; gap: var(--bsft-spacing); font-family: var(--bsft-font); color: var(--bsft-color-text); } .bsft-form-field { display: flex; flex-direction: column; gap: calc(var(--bsft-spacing) / 2); } .bsft-form-field label { font-size: 0.875em; font-weight: 500; color: var(--bsft-color-text); } /* Text inputs, selects and textareas share the control chrome. Checkboxes and radios keep their native rendering — boxing them in the same border/padding would break their layout next to a label. */ .bsft-form-field input:not([type="checkbox"]):not([type="radio"]), .bsft-form-field select, .bsft-form-field textarea { font-family: var(--bsft-font); border: 1px solid var(--bsft-color-border); border-radius: var(--bsft-radius); padding: calc(var(--bsft-spacing) / 2) var(--bsft-spacing); background: var(--bsft-color-surface); color: var(--bsft-color-text); } .bsft-form-field input:not([type="checkbox"]):not([type="radio"]):focus-visible, .bsft-form-field select:focus-visible, .bsft-form-field textarea:focus-visible { border-color: var(--bsft-color-primary); outline: 2px solid var(--bsft-color-primary); outline-offset: 1px; } .bsft-form-field-errors { color: var(--bsft-color-danger); font-size: 0.875em; margin: 0; padding-left: 1.25em; } .bsft-form-actions { display: flex; gap: var(--bsft-spacing); } .bsft-button { font-family: var(--bsft-font); border: 1px solid var(--bsft-color-border); border-radius: var(--bsft-radius); background: var(--bsft-color-surface); color: var(--bsft-color-text); padding: calc(var(--bsft-spacing) / 2) var(--bsft-spacing); cursor: pointer; } /* One definition of the primary surface. The selected theme option is that same surface, so it joins the rule instead of restating its three declarations. */ .bsft-button-primary, .bsft-theme-option[aria-pressed="true"], .bsft-scope-option[aria-pressed="true"] { background: var(--bsft-color-primary); border-color: var(--bsft-color-primary); color: var(--bsft-color-primary-contrast); } .bsft-button:disabled { opacity: 0.6; cursor: default; } /* --- list --------------------------------------------------------------- */ .bsft-list { font-family: var(--bsft-font); color: var(--bsft-color-text); } .bsft-list table { width: 100%; border-collapse: collapse; } .bsft-list th, .bsft-list td { text-align: left; padding: var(--bsft-spacing); border-bottom: 1px solid var(--bsft-color-border); } .bsft-list th button { all: unset; cursor: pointer; font: inherit; } /* The sort glyphs live here, not in markup, so a theme override (or an RTL layout) re-skins them without touching the component. */ .bsft-list-sort-asc::after { content: " ▲"; } .bsft-list-sort-desc::after { content: " ▼"; } .bsft-list-pager { display: flex; align-items: center; gap: var(--bsft-spacing); padding-top: var(--bsft-spacing); } /* --- detail ------------------------------------------------------------- */ .bsft-detail { font-family: var(--bsft-font); color: var(--bsft-color-text); } /* --- dialog -------------------------------------------------------------- */ .bsft-dialog { background: var(--bsft-color-surface); color: var(--bsft-color-text); border: 1px solid var(--bsft-color-border); border-radius: var(--bsft-radius); padding: var(--bsft-spacing); font-family: var(--bsft-font); display: flex; flex-direction: column; gap: var(--bsft-spacing); } .bsft-button-danger { background: var(--bsft-color-danger); border-color: var(--bsft-color-danger); color: var(--bsft-color-primary-contrast); } /* --- theme switcher ------------------------------------------------------- */ /* The group is a segmented control: three buttons joined into one control, the active one marked by aria-pressed. Styling selects on that attribute rather than on the extra class, so a theme cannot style an option as active that assistive technology reads as inactive — the active surface itself is the shared .bsft-button-primary rule above. */ .bsft-theme-switcher { display: inline-flex; font-family: var(--bsft-font); } .bsft-theme-option { border-radius: 0; } .bsft-theme-option:first-child { border-start-start-radius: var(--bsft-radius); border-end-start-radius: var(--bsft-radius); } .bsft-theme-option:last-child { border-start-end-radius: var(--bsft-radius); border-end-end-radius: var(--bsft-radius); } .bsft-theme-option + .bsft-theme-option { border-inline-start: none; } .bsft-theme-option:focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } /* --- navigation ------------------------------------------------------------ */ .bsft-nav { display: flex; flex-wrap: wrap; gap: var(--bsft-spacing); font-family: var(--bsft-font); } .bsft-nav-item { color: var(--bsft-color-primary); text-decoration: none; padding: calc(var(--bsft-spacing) / 2) var(--bsft-spacing); border-radius: var(--bsft-radius); } .bsft-nav-item:focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } /* --- org scope -------------------------------------------------------------- */ .bsft-scope-switcher { display: inline-flex; align-items: center; gap: var(--bsft-spacing); font-family: var(--bsft-font); } .bsft-scope-option:focus-visible, .bsft-scope-leave:focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } /* --- toasts -------------------------------------------------------------- */ /* The stack is fixed to a corner so the host can live anywhere in the shell markup. Only the toasts themselves take pointer events — an empty stack never covers the screen it floats over. */ .bsft-toasts { position: fixed; inset-block-end: var(--bsft-spacing); inset-inline-end: var(--bsft-spacing); z-index: 1000; display: flex; flex-direction: column; gap: var(--bsft-spacing); pointer-events: none; font-family: var(--bsft-font); } .bsft-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--bsft-spacing); max-width: 24rem; padding: var(--bsft-spacing); border: 1px solid var(--bsft-color-border); border-radius: var(--bsft-radius); background: var(--bsft-color-surface); color: var(--bsft-color-text); } .bsft-toast-message { flex: 1; } .bsft-toast-dismiss { all: unset; cursor: pointer; line-height: 1; font-size: 1.25em; color: inherit; } /* `all: unset` drops the user agent's focus ring with everything else, so it is put back here: the dismiss button is reachable by keyboard and must show where the focus is. */ .bsft-toast-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .bsft-toast-info { color: var(--bsft-color-info); background: var(--bsft-color-info-surface); border-color: var(--bsft-color-info); } .bsft-toast-success { color: var(--bsft-color-success); background: var(--bsft-color-success-surface); border-color: var(--bsft-color-success); } .bsft-toast-warning { color: var(--bsft-color-warning); background: var(--bsft-color-warning-surface); border-color: var(--bsft-color-warning); } .bsft-toast-error { color: var(--bsft-color-danger); background: var(--bsft-color-danger-surface); border-color: var(--bsft-color-danger); } /* --- tabs ----------------------------------------------------------------- */ .bsft-tabs-list { display: flex; gap: var(--bsft-spacing); border-bottom: 1px solid var(--bsft-color-border); } .bsft-tab { all: unset; cursor: pointer; padding: var(--bsft-spacing) calc(var(--bsft-spacing) * 2); color: var(--bsft-color-muted); border-bottom: 2px solid transparent; font-family: var(--bsft-font); } .bsft-tab:focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } .bsft-tab-active { color: var(--bsft-color-text); border-bottom-color: var(--bsft-color-primary); } .bsft-tabs-panel { padding: calc(var(--bsft-spacing) * 2) 0; } /* --- dialog ----------------------------------------------------------------- */ .bsft-dialog-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--bsft-spacing); background: rgb(0 0 0 / 50%); font-family: var(--bsft-font); } .bsft-dialog-panel { max-width: 32rem; width: 100%; max-height: 100%; overflow: auto; padding: calc(var(--bsft-spacing) * 2); border-radius: var(--bsft-radius); background: var(--bsft-color-surface); color: var(--bsft-color-text); } /* --- toggle ----------------------------------------------------------------- */ .bsft-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; width: 2.5rem; height: 1.5rem; padding: 2px; border-radius: 999px; background: var(--bsft-color-border); transition: background-color 0.15s ease; } .bsft-toggle:focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } .bsft-toggle[disabled] { cursor: not-allowed; opacity: 0.5; } .bsft-toggle-on { background: var(--bsft-color-primary); } .bsft-toggle-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--bsft-color-surface); transition: transform 0.15s ease; } .bsft-toggle-on .bsft-toggle-thumb { transform: translateX(1rem); } /* --- wizard ----------------------------------------------------------------- */ .bsft-wizard-steps { display: flex; gap: calc(var(--bsft-spacing) * 2); list-style: none; padding: 0; margin: 0 0 calc(var(--bsft-spacing) * 2); font-family: var(--bsft-font); } .bsft-wizard-step { color: var(--bsft-color-muted); } .bsft-wizard-step-current { color: var(--bsft-color-text); font-weight: 600; } .bsft-wizard-content { margin-bottom: calc(var(--bsft-spacing) * 2); } /* --- badge ----------------------------------------------------------------- */ .bsft-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999px; font-family: var(--bsft-font); font-size: 0.75rem; line-height: 1; color: var(--bsft-color-text); background: var(--bsft-color-border); } .bsft-badge:empty { min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; } .bsft-badge-info { color: var(--bsft-color-info); background: var(--bsft-color-info-surface); } .bsft-badge-success { color: var(--bsft-color-success); background: var(--bsft-color-success-surface); } .bsft-badge-warning { color: var(--bsft-color-warning); background: var(--bsft-color-warning-surface); } .bsft-badge-danger { color: var(--bsft-color-danger); background: var(--bsft-color-danger-surface); } /* --- empty state ----------------------------------------------------------------- */ .bsft-empty-state { padding: calc(var(--bsft-spacing) * 4) var(--bsft-spacing); text-align: center; color: var(--bsft-color-muted); font-family: var(--bsft-font); } .bsft-empty-state-title { margin: 0; color: var(--bsft-color-text); font-weight: 600; } .bsft-empty-state-description { margin: calc(var(--bsft-spacing) / 2) 0 0; } .bsft-empty-state-actions { margin-top: calc(var(--bsft-spacing) * 2); }