@webority/theme 0.99.0 → 0.101.0

package/scss/_variables.scss

@@ -183,15 +183,10 @@ $link-color: $wui-primary-ink !default;
 // ---- Body / text ----------------------------------------------------
 // $body-bg left at Bootstrap's $white — do not restate pure defaults here.
 $body-color: #252F4A; // text-1 from locked palette
-$body-secondary-color: #4B5675;
-$body-tertiary-color: #626A82; // matches --wui-text-3, AA on every neutral surface
-$body-secondary-bg: #F9FBFC;
-$body-tertiary-bg: #F5F6FA;
 
 
 // ---- Borders --------------------------------------------------------
 $border-color: #EBEDF3;
-$border-color-translucent: rgba(13, 24, 43, 0.08);
 
 // One ladder; every component derives from it (Bootstrap's own model). Set a
 // component's radius by pointing it at a rung, never by hardcoding a px value —
@@ -202,7 +197,6 @@ $border-radius: 0.5rem; // 8px — buttons, inputs, dropdowns (BS 0.375)
 $border-radius-sm: 0.375rem; // 6px (BS 0.25)
 $border-radius-lg: 0.75rem; // 12px — cards, toasts (BS 0.5)
 $border-radius-2xl: 1.5rem; // 24px (BS 2rem via $border-radius-xxl)
-$border-radius-pill: 9999px; // same visual as BS 50rem; explicit for token clarity
 
 
 // ---- Typography -----------------------------------------------------
@@ -213,15 +207,12 @@ $font-family-sans-serif: 'Webority Sans', 'Inter', -apple-system, BlinkMacSystem
 $font-family-display: 'Webority Serif', Cambria, Georgia, 'Times New Roman', 'Noto Serif', serif;
 $font-family-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-$line-height-base: 1.55; // leading.body (BS 1.5)
-$headings-line-height: 1.2; // leading.heading (BS 1.2)
 
 $headings-font-weight: 600; // BS 500
 $headings-letter-spacing: -0.02em;
 $headings-color: #071437;
 
 $display-font-weight: 500;
-$display-line-height: 1.05; // leading.display
 
 $h3-font-size: 1.5rem; // 24px (BS 1.75rem)
 $h4-font-size: 1.25rem; // 20px (BS 1.5rem)
@@ -256,7 +247,7 @@ $spacers: (
 // Elevation rule: in-page surfaces are FLAT (borders only).
 // Bootstrap utility ladder (.shadow / .shadow-sm / .shadow-lg) is zeroed so
 // products cannot reintroduce random depth. Floating UI (dropdown / modal /
-// toast) uses the overlay rungs — same values as --wui-shadow-overlay* in tokens.
+// toast) uses the overlay rungs — same values as --wui-shadow-popover in tokens.
 $wui-shadow-overlay: 0 8px 28px -6px rgba(7, 20, 55, 0.14);
 $wui-shadow-overlay-lg: 0 24px 60px -16px rgba(7, 20, 55, 0.28);
 
@@ -267,7 +258,7 @@ $box-shadow-lg: none;
 
 // ---- Buttons --------------------------------------------------------
 $btn-font-weight: 500;
-// Height comes from --wui-control-height (see _components.scss) so buttons line
+// Height comes from --wui-control-md (see _components.scss) so buttons line
 // up with inputs; the padding just needs to sit inside that.
 $btn-padding-y: 0.5rem;
 $btn-padding-x: 1.25rem;
@@ -292,7 +283,7 @@ $input-border-color: $border-color;
 // post-CSS focus uses var(--color-primary) so runtime rebrand tracks.
 $input-focus-box-shadow: none; // border IS the focus cue
 $input-focus-color: $body-color;
-$input-padding-y: 0.5rem; // filler inside --wui-control-height (36px at md)
+$input-padding-y: 0.5rem; // filler inside --wui-control-md (36px)
 $input-padding-x: 0.875rem; // 14px
 $input-border-radius: $border-radius;
 // Themed, so it flips in dark mode. The old fixed #99A1B7 was 2.58:1 on white and read as typed text on dark.
@@ -379,3 +370,7 @@ $zindex-toast: 1700;
 // `--bs-table-color` / `--bs-table-bg`; see the base `.table` rules.)
 $table-cell-padding-y: 0.75rem; // 12px
 $table-cell-padding-x: 0.75rem; // 12px
+
+// Bootstrap $ defaults generated from the token source. Every value is !default, so a brand $ set
+// before or after this file still wins.
+@import "bootstrap.generated";

package/scss/_wui-components.scss

@@ -10,7 +10,7 @@
 // selects, avatars, empty states, etc). App-screen / marketing / page-specific
 // rules were dropped. Custom-property references (--color-*, --radius-*,
 // --shadow-*, etc.) are left exactly as written — a separate aliases partial
-// (_wui-aliases.scss) resolves them onto --wui-* tokens.
+// (_tokens.generated.scss) resolves them onto --wui-* tokens.
 //
 // Plain CSS is valid SCSS; nothing here has been re-nested or renamed.
 // ============================================================================

package/scss/_wui-residual.scss

@@ -0,0 +1,8 @@
+// The theme names the token source does not generate. Every other name comes from _tokens.generated.scss.
+
+:root {
+    /// meaning: Weekday calendars start their week on, from 0 for Sunday to 6 for Saturday.
+    --wui-first-day: 1;
+    /// meaning: Offset that draws the focus ring inside a scrolling container.
+    --wui-focus-ring-inset: calc(-1 * var(--wui-focus-ring-width));
+}

package/scss/wui/_avatar-picker.scss

@@ -26,7 +26,7 @@
     border: 1px solid var(--color-border);
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font: inherit;
     cursor: pointer;
 }
@@ -73,7 +73,7 @@
     border: 2px solid var(--color-surface);
     border-radius: 50%;
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
 }
 .wui-avatar-picker-face:disabled:not([aria-busy="true"]) .wui-avatar-picker-badge {
     display: none;

package/scss/wui/_calendar.scss

@@ -3,7 +3,7 @@
 //
 // Part of the wui-components layer; see _wui-components.scss for the load order. The calendar
 // engine paints the grid from its own --fc-* custom properties, so the whole theme is those
-// variables set from tokens below, which the dark remap in _wui-aliases.scss flips with the rest
+// variables set from tokens below, which the dark remap in _tokens.generated.scss flips with the rest
 // of the portal: there is no theme watcher and no engine selector here. The toolbar, view switch
 // and status line are the element's own markup.
 
@@ -78,7 +78,7 @@ wui-calendar .fc .fc-day-other .fc-daygrid-day-number {
 .wui-calendar-nav-btn:hover {
     background: var(--color-primary-soft);
     border-color: var(--color-primary);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-calendar-today-btn:focus-visible,
 .wui-calendar-nav-btn:focus-visible,
@@ -124,12 +124,12 @@ wui-calendar .fc .fc-day-other .fc-daygrid-day-number {
         color 0.14s ease;
 }
 .wui-calendar-view-btn:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-calendar-view-btn[aria-pressed="true"] {
     background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
     box-shadow: inset 0 0 0 2px var(--color-primary);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // On a phone the title takes a row of its own between the two controls, and every control is a
@@ -230,7 +230,7 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
 .wui-calendar-event-primary {
     --fc-event-bg-color: var(--color-primary-soft);
     --fc-event-border-color: var(--color-primary);
-    --fc-event-text-color: var(--color-primary-ink);
+    --fc-event-text-color: var(--color-primary-text);
 }
 .wui-calendar-event-success {
     --fc-event-bg-color: var(--color-success-soft);
@@ -292,5 +292,5 @@ wui-calendar[data-view="month"] .wui-calendar-chip-title {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 :is(.wui-calendar-nav-btn, .wui-calendar-today-btn, .wui-calendar-view-btn):active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }

package/scss/wui/_card.scss

@@ -199,7 +199,7 @@
     cursor: pointer;
     transition:
         border-color 0.15s ease,
-        transform 0.2s var(--wui-ease-out-quart),
+        transform 0.2s var(--wui-ease-out),
         box-shadow 0.2s ease;
 }
 button.card-clickable {

package/scss/wui/_carousel.scss

@@ -79,7 +79,7 @@
         color 160ms var(--wui-ease-ui);
     &:hover {
         background: var(--color-primary-soft);
-        color: var(--color-primary-ink);
+        color: var(--color-primary-text);
     }
     &:focus-visible {
         outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -139,7 +139,7 @@
     border: 1px solid var(--color-primary);
     border-radius: 999px;
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font: inherit;
     font-weight: 600;
     cursor: pointer;

package/scss/wui/_chart-card.scss

@@ -7,7 +7,7 @@
 :where(.wui-sparkline) {
     display: inline-block;
     vertical-align: middle;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-sparkline polyline {
     stroke-width: 1.5;
@@ -31,7 +31,7 @@
 }
 .wui-chart-card-tool[aria-pressed="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // The legend toggle is useful only while the chart shows a legend: two or more series, in the
 // chart view. Before the element has drawn there is none, so the button waits for it.

package/scss/wui/_chart.scss

@@ -1,7 +1,7 @@
 // Charts: the <wui-chart> element behind AppChart.
 //
 // Part of the wui-components layer; see _wui-components.scss for the load order. The element draws
-// series in the --wui-chart-* colours. Every colour is a token the dark remap in _wui-aliases.scss
+// series in the --wui-chart-* colours. Every colour is a token the dark remap in _tokens.generated.scss
 // flips with the rest of the portal.
 
 // ============================================================================
@@ -36,14 +36,14 @@ wui-chart {
     min-height: 24px;
     padding: 2px 6px;
     border: 0;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     background: transparent;
     color: var(--color-text-muted);
     font: inherit;
     cursor: pointer;
     transition:
-        color 150ms var(--wui-ease-out-quart),
-        background-color 150ms var(--wui-ease-out-quart);
+        color 150ms var(--wui-ease-out),
+        background-color 150ms var(--wui-ease-out);
 }
 .wui-chart-legend-item:hover {
     background: var(--color-bg-muted);
@@ -58,7 +58,7 @@ wui-chart {
     width: 10px;
     height: 10px;
     border-radius: 3px;
-    transition: opacity 150ms var(--wui-ease-out-quart);
+    transition: opacity 150ms var(--wui-ease-out);
 }
 .wui-chart-legend-swatch-line {
     width: 14px;
@@ -79,8 +79,8 @@ wui-chart {
 .wui-chart-surface {
     position: relative;
     width: 100%;
-    border-radius: var(--radius-sm);
-    transition: opacity 200ms var(--wui-ease-out-quart);
+    border-radius: var(--wui-radius-sm);
+    transition: opacity 200ms var(--wui-ease-out);
 }
 .wui-chart-surface:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -173,7 +173,7 @@ wui-chart[aria-busy="true"] .wui-chart-surface {
 .wui-chart-table-wrap {
     overflow: auto;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .wui-chart-table {
     width: 100%;

package/scss/wui/_chat.scss

@@ -36,7 +36,7 @@ wui-chat[position="start"] .wui-chat-launcher {
     width: min(440px, 100%);
     background: var(--color-surface);
     border-inline-start: 1px solid var(--color-border);
-    box-shadow: var(--wui-shadow-overlay-lg);
+    box-shadow: var(--wui-shadow-modal);
 }
 wui-chat[position="start"] .wui-chat-panel {
     inset-inline-end: auto;
@@ -79,7 +79,7 @@ wui-chat[position="start"] .wui-chat-panel {
 // The question box starts one line tall, as tall as Send beside it, and grows with its text
 // up to a few lines. Its padding is equal top and bottom, so one line of text sits centred in it.
 .wui-chat-composer .form-control {
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
     max-height: 9rem;
     padding-block: 10px;
     resize: none;