@webority/theme 0.128.0 → 0.130.0

package/scss/wui/_typography.scss

@@ -6,6 +6,12 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
+// Bootstrap reads its text face from --bs-font-sans-serif (through --bs-body-font-family). Pointing it at the
+// theme token means a product that sets --wui-font-ui restyles Bootstrap-only controls too, with no sheet of its own.
+:root {
+    --bs-font-sans-serif: var(--wui-font-ui);
+}
+
 // ── Text-scale utilities (wui-text-*) ──
 .wui-text-xs {
     font-size: 12px;
@@ -15,6 +21,11 @@
     font-size: 13.5px;
     line-height: 1.5;
 }
+// Text a person typed: keep their line breaks and break a long unbroken run (a URL) instead of overflowing.
+.wui-prewrap {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
 .wui-text-base {
     font-size: 15px;
     line-height: 1.5;
@@ -351,7 +362,8 @@
 .search-select-multi {
     align-items: center;
     gap: 6px;
-    min-height: 40px;
+    // The md field height is the floor, so a one-row multi-select lines up with the inputs and buttons beside it.
+    min-height: var(--wui-control-md);
     height: auto;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -490,12 +502,6 @@ wui-multiselect[collapse-chips] .ms-chips {
 }
 // AppTagInput renders its input inside the chip row, after the chips, so the shared
 // `.ms-chips > .ms-input` rule above lets it wrap with them and fill the rest of the line.
-// Match AppInput's per-size heights: the shared `.search-select-multi` floor is lower than the md
-// control height, so raise it; sm and lg come from the size-specific `.search-select-{sm,lg}
-// .search-select-control` rules.
-wui-taginput .search-select-multi {
-    min-height: var(--wui-control-md);
-}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {
@@ -525,3 +531,15 @@ wui-taginput .search-select-multi {
     top: 8px;
     right: 8px;
 }
+
+// Line breaks in the text are kept and long lines still wrap. Used by multiline on app-value, app-description and AppDescriptions items.
+.wui-pre-line {
+    white-space: pre-line;
+}
+
+// Monospace text for codes and references. The control selectors give a field the same family as plain text.
+.wui-mono,
+.form-control.wui-mono,
+.input.wui-mono {
+    font-family: var(--bs-font-monospace);
+}

package/scss/wui/_utilities.scss

@@ -869,6 +869,7 @@
 // data-theme attribute and the auto media query alike, with no per-component dark rules.
 .alert-info {
     --bs-alert-bg: var(--color-info-soft);
+    --alert-tone: var(--color-info);
     --bs-alert-border-color: var(--color-info-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-info-active);
@@ -877,6 +878,7 @@
 }
 .alert-success {
     --bs-alert-bg: var(--color-success-soft);
+    --alert-tone: var(--color-success);
     --bs-alert-border-color: var(--color-success-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-success-active);
@@ -885,6 +887,7 @@
 }
 .alert-warning {
     --bs-alert-bg: var(--color-warning-soft);
+    --alert-tone: var(--color-warning);
     --bs-alert-border-color: var(--color-warning-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-warning-active);
@@ -893,6 +896,7 @@
 }
 .alert-danger {
     --bs-alert-bg: var(--color-danger-soft);
+    --alert-tone: var(--color-danger);
     --bs-alert-border-color: var(--color-danger-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-danger-active);
@@ -1000,6 +1004,33 @@
     align-items: center;
     gap: 8px;
 }
+// A tinted, outline, ghost or text button in the action slot takes the alert's tone instead of
+// the brand colour, so it reads as part of the alert. The label is the alert's AA-safe text
+// colour. Solid buttons (primary, danger, warning) keep their own fill, which carries meaning.
+.alert-action :is(.btn-soft-primary, .btn-outline-primary, .btn-ghost-primary, .btn-link-primary) {
+    --bs-btn-color: var(--alert-text);
+    --bs-btn-hover-color: var(--alert-text);
+    --bs-btn-active-color: var(--alert-text);
+    --bs-btn-disabled-color: var(--alert-text);
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--alert-tone) 40%, transparent);
+}
+.alert-action .btn-soft-primary {
+    --bs-btn-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 32%, transparent);
+}
+.alert-action .btn-outline-primary {
+    --bs-btn-border-color: var(--alert-tone);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-hover-border-color: var(--alert-tone);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+    --bs-btn-active-border-color: var(--alert-tone);
+    --bs-btn-disabled-border-color: var(--alert-tone);
+}
+.alert-action .btn-ghost-primary {
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+}
 @include media-breakpoint-up(md) {
     .alert-has-action {
         flex-wrap: nowrap;

package/token-meanings.json

@@ -39,6 +39,7 @@
     "--color-field-border-focus": "Border of a focused, open or active control such as an input or select.",
     "--color-field-border-hover": "Hover border of an input-like control.",
     "--color-focus-ring": "Colour of the keyboard focus ring drawn on focus-visible controls.",
+    "--color-focus-ring-soft": "Translucent step of the focus ring colour, for a soft halo around a focused field.",
     "--color-info": "Vivid info fill for badges and dots.",
     "--color-info-border": "Tinted info border of alerts and badges.",
     "--color-info-pressed": "Info fill while a control is pressed.",
@@ -64,6 +65,10 @@
     "--color-success-text": "Success colour as text on light surfaces.",
     "--color-success-text-on-soft": "Success text on a soft success tint, such as an alert heading.",
     "--color-surface": "Card and panel surface.",
+    "--color-surface-inverse-wash-12": "Medium translucent wash over an inverse band, for a selected or pressed tile or row.",
+    "--color-surface-inverse-wash-24": "Strong translucent wash over an inverse band, for a divider or a filled chip.",
+    "--color-surface-inverse-wash-4": "Faintest translucent wash over an inverse band, for a resting tile or row.",
+    "--color-surface-inverse-wash-8": "Light translucent wash over an inverse band, for a hovered tile or row.",
     "--color-text": "Main heading and body ink.",
     "--color-text-body": "Body copy on a tinted surface such as an alert body.",
     "--color-text-muted": "Secondary text for descriptions and muted copy.",
@@ -84,8 +89,11 @@
     "--wui-border-light": "Default hairline border of cards, tables and dividers.",
     "--wui-border-soft": "Softest border, for inner dividers.",
     "--wui-border-strong": "Strong border for emphasised separators, chart axes and unselected control outlines.",
+    "--wui-card-pad": "Padding inside a card and its header; a card class can set it to retune one card.",
     "--wui-card-shadow-lifted": "Shadow of a lifted card, none in this theme.",
     "--wui-card-shadow-lifted-hover": "Shadow of a lifted card while it is hovered, none in this theme.",
+    "--wui-card-title-fs": "Font size of a card title.",
+    "--wui-card-title-lh": "Line height of a card title.",
     "--wui-chart-1": "Colour of chart series 1, the brand primary.",
     "--wui-chart-2": "Colour of chart series 2 of the eight categorical series.",
     "--wui-chart-3": "Colour of chart series 3 of the eight categorical series.",
@@ -155,6 +163,7 @@
     "--wui-dark-text-muted": "Secondary text colour in dark mode.",
     "--wui-dark-text-subtle": "Tertiary text colour in dark mode, for hints and captions.",
     "--wui-disabled-opacity": "Opacity of a control that dims as a whole when disabled.",
+    "--wui-drawer-max": "Height of a bottom sheet drawer as a count of viewport height percent.",
     "--wui-ease-elastic": "Overshooting easing for the tab ink bar's spring into place.",
     "--wui-ease-out": "Easing curve matching the locked design's motion exports.",
     "--wui-ease-ui": "Easing curve for interface transitions.",
@@ -171,6 +180,7 @@
     "--wui-first-day": "Weekday calendars start their week on, from 0 for Sunday to 6 for Saturday.",
     "--wui-focus-ring-inset": "Offset that draws the focus ring inside a scrolling container.",
     "--wui-focus-ring-offset": "Gap between a control and its keyboard focus ring.",
+    "--wui-focus-ring-soft-shadow": "Soft halo drawn around a focused text field, in the translucent focus ring colour.",
     "--wui-focus-ring-width": "Width of the keyboard focus ring.",
     "--wui-font-display": "Display typeface for headings marked as display text.",
     "--wui-font-mono": "Monospace typeface for code, identifiers and figures that must line up.",
@@ -201,9 +211,12 @@
     "--wui-info-active": "Info ink for icons and active states on light surfaces.",
     "--wui-info-text": "Info colour as text on light surfaces.",
     "--wui-ink": "Pure black ink, the highest-contrast text colour.",
+    "--wui-kpi-value-size": "Font size of the main figure in a KPI tile.",
     "--wui-lh-body": "Line height of running text and of any text that is not a heading or display text.",
     "--wui-lh-display": "Line height of display-size text such as hero titles.",
     "--wui-lh-heading": "Line height of headings.",
+    "--wui-modal-max-width": "Maximum width of a modal dialog; each dialog sets it from its size.",
+    "--wui-nav-menu-current-bg": "Background of the current item in a navigation menu.",
     "--wui-neutral-bg-dark": "Muted background of table emphasis rows and mega-menu hover.",
     "--wui-neutral-bg-light": "Faint background for table emphasis and mega-menu hover.",
     "--wui-neutral-border-dark": "Border tone of table emphasis rows and dividers.",
@@ -232,6 +245,7 @@
     "--wui-scrollbar-active": "Scrollbar thumb colour while it is dragged.",
     "--wui-scrollbar-hover": "Scrollbar thumb colour while it is hovered.",
     "--wui-shadow-card": "Shadow under in-page cards, none in this theme so cards stay flat.",
+    "--wui-shadow-elevated": "Shadow of a surface lifted slightly above the page, such as a toast, a sticky bar or a floating action button.",
     "--wui-shadow-modal": "Larger overlay shadow, for the largest floating surfaces.",
     "--wui-shadow-popover": "Shadow of floating overlays such as menus and popovers.",
     "--wui-space-2xl": "Double extra-large step of the spacing scale.",
@@ -244,6 +258,7 @@
     "--wui-space-xl": "Extra-large step of the spacing scale.",
     "--wui-space-xs": "Extra-small step of the spacing scale.",
     "--wui-space-xxs": "Hairline step of the spacing scale.",
+    "--wui-step-tile-size": "Width and height of the numbered circle in a step tile.",
     "--wui-success": "Vivid success fill for badges, dots and success buttons.",
     "--wui-success-10": "Success tint 10, the soft background of success alerts and badges.",
     "--wui-success-20": "Success tint 20 for soft fills behind success alerts and badges.",

package/scss/wui/_chat.scss

@@ -1,156 +0,0 @@
-// ── Assistant chat ──
-// <wui-chat> / <app-chat>: a launcher pinned to a bottom corner and a side panel holding the
-// conversation and the question box. The header, buttons, form field and alerts inside are the
-// theme's own (.drawer-header, .btn, .form-control, .alert); only the placement and the two chat
-// shapes live here. A compact launcher is the shared .wui-floating-btn circle (_floating.scss).
-//
-// Part of the wui-components layer — see _wui-components.scss for load order.
-
-// The element is a plain host: its two parts are fixed to the viewport.
-wui-chat {
-    display: contents;
-}
-
-.wui-chat-launcher {
-    position: fixed;
-    // Rises above an open consent banner, which publishes its room on html.
-    bottom: var(--wui-consent-banner-block, 0px);
-    inset-inline-end: 0;
-    z-index: var(--wui-z-fixed);
-    margin: 1rem;
-}
-wui-chat[position="start"] .wui-chat-launcher {
-    inset-inline-end: auto;
-    inset-inline-start: 0;
-}
-
-// Above the shell chrome and below modals, like the drawer it stands in for.
-.wui-chat-panel {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    inset-inline-end: 0;
-    z-index: var(--wui-z-shell-drawer);
-    display: flex;
-    flex-direction: column;
-    width: min(440px, 100%);
-    background: var(--color-surface);
-    border-inline-start: 1px solid var(--color-border);
-    box-shadow: var(--wui-shadow-modal);
-}
-wui-chat[position="start"] .wui-chat-panel {
-    inset-inline-end: auto;
-    inset-inline-start: 0;
-    border-inline-start: 0;
-    border-inline-end: 1px solid var(--color-border);
-}
-// `hidden` is how the element closes the panel; display: flex above would otherwise win over it.
-.wui-chat-panel[hidden] {
-    display: none;
-}
-
-.wui-chat-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 20px;
-    overflow-y: auto;
-}
-.wui-chat-empty {
-    padding-block: 2rem;
-}
-.wui-chat-foot {
-    flex: none;
-    padding: 16px 20px;
-    border-top: 1px solid var(--color-border);
-}
-
-// The person's question, on the right; the answer is plain text on the panel.
-.wui-chat-question {
-    max-width: 85%;
-}
-.wui-chat-bubble {
-    padding: 10px 14px;
-    background: var(--color-bg-muted);
-    border-radius: var(--wui-radius-lg);
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
-
-// 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-md);
-    max-height: 9rem;
-    padding-block: 10px;
-    resize: none;
-}
-// A form reserves a line under each field for its error; the question box has none, and the
-// empty line pushed Send below the box.
-.wui-chat-composer .wui-field-message:empty {
-    display: none;
-}
-
-// Attachments wrap onto new rows as the composer or a sent question grows.
-.wui-chat-attachments {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--wui-space-xs);
-}
-.wui-chat-question-attachments {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--wui-space-xs);
-}
-
-// The banner that says a question is being edited, with its cancel control beside the text.
-.wui-chat-editing {
-    display: flex;
-    align-items: center;
-    gap: var(--wui-space-sm);
-    padding: var(--wui-space-sm) var(--wui-space-md);
-    background: var(--color-bg-muted);
-    border-radius: var(--wui-radius-md);
-    color: var(--color-text-muted);
-    font-size: var(--wui-fs-sm);
-}
-
-// Copy, edit, retry and the other actions under an answer; they wrap rather than overflow the panel.
-.wui-chat-turn-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--wui-space-xs);
-    margin-block-start: var(--wui-space-xs);
-}
-
-// Suggested follow-up questions under an answer, as wrapping chips.
-.wui-chat-suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--wui-space-xs);
-}
-
-// Past chats: a scrolling list in the body's padding, one row per chat.
-.wui-chat-past {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    gap: var(--wui-space-xs);
-    padding: var(--wui-space-lg);
-    overflow: auto;
-}
-// min-width 0 lets the title inside the row shrink and truncate instead of pushing the row wider.
-.wui-chat-past-row {
-    display: flex;
-    align-items: center;
-    gap: var(--wui-space-sm);
-    min-width: 0;
-}
-
-// Bootstrap's d-flex is !important, so hidden needs its own rule.
-.wui-chat-foot[hidden],
-.wui-chat-past[hidden],
-.wui-chat-suggestions[hidden] {
-    display: none !important;
-}