@webority/theme 0.23.1 → 0.25.0

package/README.md

@@ -81,6 +81,20 @@ colour — intentional shared semantics (see `_variables.scss`).
 `dist/webority-theme.css` is a precompiled default-brand **portal** build (no
 marketing partial). Prefer the SCSS chain above for brand-exact output.
 
+## Signal brand layer (opt-in)
+
+`dist/webority-brand-signal.css` (export `@webority/theme/css/brand-signal`, source `scss/_brand-signal.scss`)
+re-points the theme to the Webority company palette: violet #4A0FBF primary, ink #16093A headings, tint
+#F1EBFF, pink #B517C8 for unread counts only, muted text #6A6A6A, a dark set on #120830 with violet text
+#A98BFF, and the Webority Serif 600 face for page, card, modal and empty-state titles. It is never imported by
+the default theme (check-theme-exports asserts the default dist has no #4A0FBF).
+
+Load it once, after the theme: React `import "@webority/theme/css/brand-signal"`; Razor
+`_content/Webority.Ui.Razor/css/webority-brand-signal.css`; SCSS `@import "@webority/theme/scss/brand-signal"`
+after the components. Dark mode is emitted under `[data-theme=dark]`, `[data-bs-theme=dark]` and the
+`data-theme=auto` media query. Contrast of every brand text and surface pair is held at 4.5:1 by check-contrast.
+`_brand-signal.scss` owns brand values only; no component CSS.
+
 ## Dark mode
 
 The theme ships with two built-in dark-mode support patterns:
@@ -162,7 +176,7 @@ Three layers. Do not collapse product art direction into the shared package.
 - **Brand values** — `$primary` / `--wui-primary*` (and related) via pre-bootstrap variables or runtime CSS; use `wui-brand-primary` when setting primary once
 - **Marketing art direction** — heroes, section rhythm, marquee, scroll reveals, page entry fades, marketing-only button shapes (pill / ghost-dark), wide marketing canvas
 - **Screens and domain UI** — feature layouts, status→label maps, RoleBadge-style domain components
-- **App infrastructure** — routing, auth, i18n copy, charts, rich text, API
+- **App infrastructure**: routing, auth, i18n copy, rich text, API (line and bar charts are library components: `AppLineChart`, `AppBarChart`)
 
 ### Products must not own (deviation)
 
@@ -222,7 +236,7 @@ Keep shipping all of these; classify for **when to use**, not for removal:
 | Tier | Components | Library? | Notes |
 |---|---|---|---|
 | **Portal core** | Shell, DataTable, fields/selects, Modal, Confirm, Tabs, Card, Alert, Badge, StatusBadge, Stepper, File*, Date*, Phone, OTP, Toast, Empty/Skeleton/Spinner | **Yes — never product-fork** | Daily product UI |
-| **Portal display** | `AppKpiTile`, `AppInfoList`, `AppTimeline`, `AppSplash`, `AppBanner`, `AppBreadcrumbs`, `AppProgress`, `AppMeter` | **Yes** | Shared across portals |
+| **Portal display** | `AppKpiTile`, `AppInfoList`, `AppTimeline`, `AppSplash`, `AppBanner`, `AppBreadcrumbs`, `AppProgress`, `AppMeter`, `AppLineChart`, `AppBarChart` | **Yes** | Shared across portals |
 | **Commercial / plan UI** | `AppPricingCard`, `AppCompareTable`, `AppResourceCard` | **Yes — keep** | Pricing pages **and** in-app plan/billing. Editorial shape, not a second design system. Moving them to products would break React↔Razor parity. |
 | **CSS marketing only** | section-y, btn-pill, reveal, marquee, … | **Opt-in partial** | Not App*; see marketing import above |
 

package/dist/purge-safelist.json

@@ -101,6 +101,7 @@
         "badge-dot",
         "bg-primary",
         "bi",
+        "blockquote",
         "border",
         "border-bottom",
         "border-top",
@@ -159,6 +160,7 @@
         "choice-chip-lg",
         "choice-chip-sm",
         "col",
+        "collapse",
         "collapsed",
         "color-field",
         "color-field-hex",
@@ -169,6 +171,7 @@
         "compare-no",
         "compare-table",
         "compare-yes",
+        "container",
         "count",
         "country-code-text",
         "country-dropdown-item",
@@ -254,6 +257,7 @@
         "field-error",
         "field-float",
         "field-hint",
+        "figure",
         "file-input",
         "file-input-icon",
         "file-input-tall",
@@ -541,6 +545,7 @@
         "set-uploader-shell",
         "set-uploader-subtitle",
         "set-uploader-title",
+        "shadow",
         "show",
         "showing",
         "skeleton",
@@ -554,6 +559,7 @@
         "slider-thumb",
         "slider-track",
         "slider-value",
+        "small",
         "sort-icon",
         "sortable",
         "spinner-border",
@@ -695,7 +701,73 @@
         "wui-banner-body",
         "wui-banner-dismiss",
         "wui-banner-icon",
+        "wui-bar-chart-fill",
+        "wui-bar-chart-item",
+        "wui-bar-chart-label",
+        "wui-bar-chart-list",
+        "wui-bar-chart-track",
+        "wui-bar-chart-value",
+        "wui-calendar-fallback",
+        "wui-calendar-nav",
+        "wui-calendar-nav-btn",
+        "wui-calendar-status",
+        "wui-calendar-status-text",
+        "wui-calendar-surface",
+        "wui-calendar-title",
+        "wui-calendar-today-btn",
+        "wui-calendar-toolbar",
+        "wui-calendar-view-btn",
+        "wui-calendar-views",
         "wui-cell-end",
+        "wui-chart",
+        "wui-chart-band",
+        "wui-chart-band-label",
+        "wui-chart-canvas",
+        "wui-chart-card",
+        "wui-chart-card-legend-off",
+        "wui-chart-card-legend-tool",
+        "wui-chart-card-retry",
+        "wui-chart-card-tool",
+        "wui-chart-dot",
+        "wui-chart-grid",
+        "wui-chart-legend",
+        "wui-chart-legend-item",
+        "wui-chart-legend-label",
+        "wui-chart-legend-swatch",
+        "wui-chart-legend-swatch-line",
+        "wui-chart-line",
+        "wui-chart-num",
+        "wui-chart-plot",
+        "wui-chart-point",
+        "wui-chart-point-end",
+        "wui-chart-point-start",
+        "wui-chart-reference",
+        "wui-chart-reference-label",
+        "wui-chart-skeleton",
+        "wui-chart-state",
+        "wui-chart-state-text",
+        "wui-chart-surface",
+        "wui-chart-svg",
+        "wui-chart-table",
+        "wui-chart-table-note",
+        "wui-chart-table-wrap",
+        "wui-chart-tick",
+        "wui-chart-tip",
+        "wui-chart-tip-label",
+        "wui-chart-tip-value",
+        "wui-chart-title",
+        "wui-chart-tooltip",
+        "wui-chart-tooltip-body",
+        "wui-chart-tooltip-foot",
+        "wui-chart-tooltip-label",
+        "wui-chart-tooltip-row",
+        "wui-chart-tooltip-swatch",
+        "wui-chart-tooltip-swatch-line",
+        "wui-chart-tooltip-title",
+        "wui-chart-tooltip-value",
+        "wui-chart-xaxis",
+        "wui-chart-xlabel",
+        "wui-chart-xlabel-minor",
         "wui-check",
         "wui-cmd-card",
         "wui-cmd-empty",
@@ -736,6 +808,17 @@
         "wui-consent-banner-save",
         "wui-consent-banner-settings",
         "wui-consent-banner-settings-toggle",
+        "wui-context-menu-panel",
+        "wui-crop-controls",
+        "wui-crop-frame",
+        "wui-crop-frame--round",
+        "wui-crop-handle",
+        "wui-crop-img",
+        "wui-crop-stage",
+        "wui-crop-zoom",
+        "wui-crop-zoombtn",
+        "wui-dashboard-cell",
+        "wui-dashboard-grid",
         "wui-drawer-close",
         "wui-dropdown-trigger",
         "wui-error-summary",
@@ -794,6 +877,7 @@
         "wui-file-viewer-view-end",
         "wui-file-viewer-volume",
         "wui-file-viewer-zoom",
+        "wui-filter-bar",
         "wui-flag",
         "wui-form-compact",
         "wui-form-labels-start",
@@ -832,6 +916,20 @@
         "wui-radio-group",
         "wui-radio-group-inline",
         "wui-rb-dialog",
+        "wui-rich-text-button",
+        "wui-rich-text-content",
+        "wui-rich-text-empty",
+        "wui-rich-text-glyph",
+        "wui-rich-text-group",
+        "wui-rich-text-link-apply",
+        "wui-rich-text-link-cancel",
+        "wui-rich-text-link-error",
+        "wui-rich-text-link-input",
+        "wui-rich-text-link-remove",
+        "wui-rich-text-linkbar",
+        "wui-rich-text-prose",
+        "wui-rich-text-shell",
+        "wui-rich-text-toolbar",
         "wui-row-expanded",
         "wui-row-link",
         "wui-scroll",
@@ -839,6 +937,14 @@
         "wui-segmented-xl",
         "wui-select-cell",
         "wui-sort-lead",
+        "wui-sortable-active",
+        "wui-sortable-body",
+        "wui-sortable-dragging",
+        "wui-sortable-ghost",
+        "wui-sortable-handle",
+        "wui-sortable-item",
+        "wui-sortable-live",
+        "wui-sparkline",
         "wui-spin",
         "wui-struct-card-lg",
         "wui-struct-card-no-check",
@@ -873,7 +979,19 @@
         "wui-toast-track",
         "wui-toast-track-fill",
         "wui-toast-track-pct",
-        "wui-tooltip"
+        "wui-tooltip",
+        "wui-tree",
+        "wui-tree-badge",
+        "wui-tree-check",
+        "wui-tree-group",
+        "wui-tree-icon",
+        "wui-tree-item",
+        "wui-tree-label",
+        "wui-tree-row",
+        "wui-tree-row-error",
+        "wui-tree-row-selected",
+        "wui-tree-spinner",
+        "wui-tree-toggle"
     ],
     "patterns": [
         "^alert-",
@@ -905,13 +1023,19 @@
         "^workspace-switcher-",
         "^wui-",
         "^wui-banner-",
+        "^wui-bar-chart-",
+        "^wui-calendar-event-",
+        "^wui-chart-",
+        "^wui-chart-band-",
         "^wui-consent-",
+        "^wui-dashboard-cell-",
         "^wui-file-viewer-",
         "^wui-file-viewer-player-",
         "^wui-flag-",
         "^wui-progress-",
         "^wui-select-",
         "^wui-step-tone-",
-        "^wui-table-"
+        "^wui-table-",
+        "^wui-tree-"
     ]
 }

package/dist/webority-brand-signal.css

@@ -0,0 +1 @@
+@font-face{font-family:"Webority Serif";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/serif/WeboritySerif-DemiBold.woff2") format("woff2")}:root{--wui-signal-violet: #4A0FBF;--wui-signal-violet-hover: #3D0CA0;--wui-signal-tint: #F1EBFF;--wui-signal-ink: #16093A;--wui-signal-heading: #4C1D95;--wui-signal-pink: #B517C8;--wui-signal-dark-fill: #5A22D6;--wui-signal-dark-fill-hover: #6B35E6;--bs-font-sans-serif: "Webority Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--bs-body-font-family: var(--bs-font-sans-serif);--wui-font-display: "Webority Serif", Georgia, "Times New Roman", serif;--wui-primary: #4A0FBF;--wui-primary-hover: #3D0CA0;--wui-primary-pressed: #340A88;--wui-primary-50: #8B66E6;--wui-primary-30: #B9A2F2;--wui-primary-20: #D9CBFA;--wui-primary-15: #E6DCFD;--wui-primary-10: #F1EBFF;--wui-primary-5: #F8F5FF;--wui-primary-text: #FFFFFF;--wui-accent-dark: #340A88;--wui-surface-soft: #F1EBFF;--wui-surface-violet: #E6DCFD;--wui-surface-violet-soft: #F8F5FF;--wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #8B66E6 0%, #4A0FBF 35%, #3D0CA0 75%, #16093A 100%);--wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #2B1150 0%, #16093A 60%, #0E0626 100%);--wui-text-heading: #16093A;--wui-text-1: #2B2B2B;--wui-text-2: #5A5A5A;--wui-text-3: #6A6A6A;--wui-text-4: #9A9A9A;--wui-text-5: #CFC9DE;--wui-ink: #16093A;--wui-bg-page: #F8F6FD;--wui-bg-light: #FFFFFF;--wui-bg-elevated: #FBFAFE;--wui-bg-muted: #F3EFFB;--wui-field-bg: #FBFAFE;--wui-border-light: #E8E4F2;--wui-border-soft: #F3F0FA;--wui-progress-track: #E8E4F2;--wui-neutral-border-dark: #E8E4F2;--wui-neutral-bg-dark: #F3EFFB;--wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);--wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);--wui-dark-bg-page: #120830;--wui-dark-bg-elevated: #0E0626;--wui-dark-bg-surface: #1A0F40;--wui-dark-bg-muted: #261853;--wui-dark-border: #35266B;--wui-dark-border-strong: #4B3A8A;--wui-dark-progress-track: #35266B;--wui-dark-text: #EDE9F8;--wui-dark-text-muted: #C2BADB;--wui-dark-text-subtle: #A59BC6;--wui-dark-primary: #A98BFF;--wui-dark-primary-hover: #BFA6FF;--bs-primary: #4A0FBF;--bs-primary-rgb: 74, 15, 191;--bs-link-color: #4A0FBF;--bs-link-color-rgb: 74, 15, 191;--bs-link-hover-color: #3D0CA0;--bs-link-hover-color-rgb: 61, 12, 160;--bs-focus-ring-color: rgba(74, 15, 191, 0.3)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #4A0FBF;--bs-btn-border-color: #4A0FBF;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #3D0CA0;--bs-btn-hover-border-color: #3D0CA0;--bs-btn-focus-shadow-rgb: 74, 15, 191;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #4A0FBF;--bs-btn-disabled-border-color: #4A0FBF}.btn-outline-primary{--bs-btn-color: var(--color-primary);--bs-btn-border-color: var(--color-primary);--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4A0FBF;--bs-btn-hover-border-color: #4A0FBF;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-focus-shadow-rgb: 74, 15, 191}.form-check-input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.page-title,.card-title,.wui-modal-title,.empty-state-title{font-family:var(--wui-font-display);font-weight:600;font-style:normal;letter-spacing:-0.01em;color:var(--color-text)}:root[data-theme=dark],:root[data-bs-theme=dark]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #A98BFF 20%, transparent);--color-primary-text: #16093A;--color-progress-label: #16093A;--bs-body-bg-rgb: 18, 8, 48;--bs-body-color-rgb: 237, 233, 248;--bs-emphasis-color-rgb: 237, 233, 248;--bs-secondary-color-rgb: 194, 186, 219;--bs-tertiary-color-rgb: 165, 155, 198;--bs-secondary-bg-rgb: 26, 15, 64;--bs-tertiary-bg-rgb: 38, 24, 83;--bs-border-color-rgb: 53, 38, 107;--bs-link-color: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-rgb: 191, 166, 255;--bs-focus-ring-color: rgba(169, 139, 255, 0.4)}:root[data-theme=dark] .btn-primary,:root[data-bs-theme=dark] .btn-primary{--bs-btn-bg: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=dark] .btn-outline-primary,:root[data-bs-theme=dark] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=dark] .form-check-input:checked,:root[data-bs-theme=dark] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=dark] :where(.stepper:not(.wizard-stepper)),:root[data-bs-theme=dark] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #16093A}@media(prefers-color-scheme: dark){:root[data-theme=auto]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #A98BFF 20%, transparent);--color-primary-text: #16093A;--color-progress-label: #16093A;--bs-body-bg-rgb: 18, 8, 48;--bs-body-color-rgb: 237, 233, 248;--bs-emphasis-color-rgb: 237, 233, 248;--bs-secondary-color-rgb: 194, 186, 219;--bs-tertiary-color-rgb: 165, 155, 198;--bs-secondary-bg-rgb: 26, 15, 64;--bs-tertiary-bg-rgb: 38, 24, 83;--bs-border-color-rgb: 53, 38, 107;--bs-link-color: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-rgb: 191, 166, 255;--bs-focus-ring-color: rgba(169, 139, 255, 0.4)}:root[data-theme=auto] .btn-primary{--bs-btn-bg: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=auto] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=auto] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=auto] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #16093A}}