@webority/theme 0.96.0 → 0.99.0

package/README.md

@@ -31,34 +31,6 @@ load-bearing**:
 Importing part of the core chain is a bug: skipping `wui-aliases` leaves every
 `--color-*` reference unresolved.
 
-### The primary as text: `--wui-primary-ink`
-
-A brand primary is chosen as a fill. A light one fails WCAG AA as text: an orange such as `#E8501E`
-measures 3.75:1 on white. So the theme keeps two colours:
-
-- `--wui-primary` (`--color-primary`): fills, borders, focus rings, the selected-day disc.
-- `--wui-primary-ink` (`--color-primary-ink`): every link, tab label, page number, selected option,
-  avatar initial and primary-coloured icon. It is `$primary` darkened in 2% steps until it clears
-  4.5:1 on white, the page, the muted and elevated fills and the brand's own soft tint, so it equals
-  `$primary` when the primary already clears AA. Orange `#E8501E` gets `#BA4018` (5.48:1 on white).
-- `--wui-primary-text` (`--color-primary-text`): the label ON a solid primary fill, white when white
-- `--color-primary-hover-text`: the label colour on a pressed or hovered primary button (white in light mode, near-black in dark mode).
-  clears 4.5:1 on the primary, near-black otherwise.
-
-All three derive from `$primary` at compile time, so setting `$primary` (or `wui-brand-primary`) is
-enough. A product can set `$wui-primary-ink` / `$wui-primary-text` before the theme's variables, or
-`--wui-primary-ink` / `--wui-primary-text` at runtime. A brand layer that re-points `--wui-primary` at
-runtime must set `--wui-primary-ink` and `--wui-primary-text` beside it.
-
-Dark mode uses one colour, `--wui-dark-primary`, for primary text, rings, focus borders and the fill
-under its near-black label. It is `$primary` mixed with white in 2% steps until it clears 4.5:1 on
-every dark surface, on its own avatar tint, on the brand's soft tint and under that label, so
-`wui-brand-primary` carries the brand into dark mode (a royal blue `#2F50E4` lifts to about `#8FA1F0`). Never
-set it to the light brand fill: a runtime `--wui-dark-primary` must clear the same floors.
-
-`check-contrast` proves both derivations for an orange, an amber, a sky and a royal blue test brand
-and fails any theme rule that colours text with `--color-primary`.
-
 ### Country flags are opt-in
 
 The 245 `.wui-flag-*` rules are about 187 KB raw (38 KB Brotli) of inlined SVG, so
@@ -129,36 +101,20 @@ The full `wui-components` chain stays the default and renders as before. Each on
 Caution: an on-demand partial loaded after the core sheet comes after the shared focus ring and pressed
 wash (`wui/interaction`, `wui/menu-motion`), so check its hover and press states in the showcase.
 
-## 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 pure black #000 with neutral
-grey surfaces and violet #A98BFF kept for accents, and the Webority Serif 600 face for page and result titles at 24px and above. 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.
-
 ## Runtime brand from a product's token file (opt-in)
 
 A product's look can be applied to the precompiled theme at runtime, which is how the hosted showcase shows
 every component in a product's design language.
 
-- `webority-theme-export <compiled.css>... --product <name> --out tokens.json` (a bin of this package) writes
-  the token file, format `webority-theme-tokens/1`: `{ format, product, light, dark, bootstrapDark }`, each a
-  map of custom property to value. It reads the product's compiled CSS, not its SCSS, because Bootstrap's rgb
-  triplets and subtle and emphasis mixes only exist after compilation. `light` is the top-level `:root`,
-  `dark` the theme's `:root[data-theme=dark]` rule, `bootstrapDark` Bootstrap's `[data-bs-theme=dark]` rule.
+- `webority brand` (the `webority` command of `@webority/tokens`) writes a product's token file, `webority-web.json`,
+  format `webority-theme-tokens/2`: `{ format, source, colors: { light, dark }, space, radius, text, fonts, shadow }`.
 - `dist/webority-runtime-brand.css` (export `@webority/theme/css/runtime-brand`, source
   `scss/_runtime-brand.scss`) re-points the few component rules Bootstrap compiles from `$primary` as literals
   (primary buttons, nav pills, pagination, list group, progress, range thumb, mouse focus border, `.link-primary`
   hover, `.table-primary`) at `--bs-primary`. It holds no colour of its own (check-theme-exports asserts it).
-- Load order: the theme, then the runtime brand layer, then the token file's values on `:root`, under the dark
-  selectors for `dark`, and under `[data-bs-theme=dark]` for `bootstrapDark`.
+- Load order: the theme, then the runtime brand layer, then the token file's values: light on `:root`, dark under
+  `:root[data-theme=dark]` and `:root[data-bs-theme=dark]`, and the Bootstrap primary and link triplets under
+  `[data-bs-theme=dark]`.
 - Each product serves its file at `/theme/tokens.json` with `Access-Control-Allow-Origin` for the showcase host.
 - A font the token file names renders only when the page has its face: the theme's own families do.
 
@@ -167,10 +123,12 @@ every component in a product's design language.
 The classes `wui-force-hover`, `wui-force-focus` and `wui-force-active` make an element show its hover, focus or
 pressed look without a pointer.
 
-They exist in the compiled stylesheets, `@webority/theme/css` and `@webority/theme/css/brand-signal`, not in a
+They exist in the compiled stylesheet `@webority/theme/css`, not in a
 product's own SCSS build. A product that builds the theme SCSS itself adds `forcedStatesPlugin()`, imported from
 `@webority/theme/postcss/forced-states`, to its PostCSS plugins to get the same classes.
 
+Code that sets the classes imports their names from `@webority/theme/runtime` as `FORCED_STATE_CLASSES` (`hover`, `focus`, `active`). The export has no dependencies, so it runs in a browser bundle or in Node.
+
 A class forces only the element that carries it, so a design tool sets it on a part's root and on its first
 focusable child. The purge safelist keeps these three classes.
 
@@ -277,9 +235,9 @@ Anti-over-correction checklist. When thinning the package (e.g. marketing extrac
 
 ### Tokens & system (`scss/_variables`, `_tokens`, `_wui-aliases`)
 
-- Theme colors + `wui-brand-primary`; body/text/surface/border ramps (incl. AA tertiary)
+- Theme colors + `wui-brand-primary`; body/text/surface/border ramps
 - Radius ladder that differs from Bootstrap; spacer map extensions (6+)
-- Status ramps: fills **and** `-text` / danger-strong for AA
+- Status ramps: fills **and** `-text` / danger-strong
 - Control heights (`--wui-control-height*`: sm 32, md 36, lg 44; md is 44 on phone-width and touch screens) and one disabled opacity (`--wui-disabled-opacity`); flat in-page elevation; overlay shadows only
 - Z-index scale (`--wui-z-*`); dark-mode `--bs-*` / RGB bridges
 - Focus: no input glow (`$input-focus-box-shadow: none`); fields keep a soft brand border and also draw the shared keyboard ring
@@ -324,7 +282,6 @@ Keep shipping all of these; classify for **when to use**, not for removal:
 `corner-shape: squircle` is applied on many controls (buttons, fields, chips, menus, shell) as **progressive enhancement**:
 
 - Supporting browsers get slightly smoother corners; others keep plain `border-radius`.
-- Not a cross-browser design contract; not a WCAG requirement.
 - Missing squircle is **not** a bug.
 
 **Policy:** keep on shared control surfaces for consistent geometry; do **not** strip globally. Optional `.rounded-squircle` remains an opt-in utility. Products that want pure arcs only override locally — do not fork App*.

package/dist/postcss/forced-states.mjs

@@ -1 +1 @@
-import e from"postcss";import t from"postcss-selector-parser";var n=Object.freeze({hover:`wui-force-hover`,focus:`wui-force-focus`,active:`wui-force-active`}),r=new Map([[`:hover`,n.hover],[`:focus`,n.focus],[`:focus-visible`,n.focus],[`:focus-within`,n.focus],[`:active`,n.active]]),i=new Set(Object.values(n)),a=t();function o(e){for(let t=e.parent;t;t=t.parent)if(t.type===`atrule`&&/keyframes$/i.test(t.name))return!0;return!1}function s(e,t){let n=e.parent?.parent;return n?.type!==`pseudo`||n.value.toLowerCase()!==`:is`?!1:n.nodes.some(e=>e.nodes.some(e=>e.type===`class`&&e.value===t))}function c(e){for(let t=e.prev();t&&t.type!==`combinator`;t=t.prev())if(t.type===`pseudo`&&t.value.startsWith(`::`))return!0;return!1}function l(e){let n=[];e.walkPseudos(e=>{let t=r.get(e.value.toLowerCase());t&&!s(e,t)&&!c(e)&&n.push({pseudo:e,cls:t})});for(let{pseudo:e,cls:r}of n){let n=t.selector({value:``});n.append(e.clone());let i=t.selector({value:``});i.append(t.className({value:r}));let a=t.pseudo({value:`:is`});a.append(n),a.append(i),e.replaceWith(a)}return n.length}function u(e){let t=!1;return e.walkClasses(e=>{t||=i.has(e.value)}),t}function d(e){let t=0,n=0;return e.walkRules(e=>{if(o(e))return;let r=a.astSync(e.selector),i=!1;for(let e of r.nodes)l(e)>0&&(t++,i=!0),u(e)&&n++;i&&(e.selector=r.toString())}),{rewritten:t,carrying:n}}function f(t){let n=e.parse(t);return d(n),n.toString()}function p(){return{postcssPlugin:`wui-forced-states`,OnceExit(e){d(e)}}}p.postcss=!0;export{n as FORCED_STATE_CLASSES,f as addForcedStates,p as forcedStatesPlugin,d as rewriteRoot};
+import{FORCED_STATE_CLASSES as e}from"../runtime.mjs";import t from"postcss";import n from"postcss-selector-parser";var r=new Map([[`:hover`,e.hover],[`:focus`,e.focus],[`:focus-visible`,e.focus],[`:focus-within`,e.focus],[`:active`,e.active]]),i=new Set(Object.values(e)),a=n();function o(e){for(let t=e.parent;t;t=t.parent)if(t.type===`atrule`&&/keyframes$/i.test(t.name))return!0;return!1}function s(e,t){let n=e.parent?.parent;return n?.type!==`pseudo`||n.value.toLowerCase()!==`:is`?!1:n.nodes.some(e=>e.nodes.some(e=>e.type===`class`&&e.value===t))}function c(e){for(let t=e.prev();t&&t.type!==`combinator`;t=t.prev())if(t.type===`pseudo`&&t.value.startsWith(`::`))return!0;return!1}function l(e){let t=[];e.walkPseudos(e=>{let n=r.get(e.value.toLowerCase());n&&!s(e,n)&&!c(e)&&t.push({pseudo:e,cls:n})});for(let{pseudo:e,cls:r}of t){let t=n.selector({value:``});t.append(e.clone());let i=n.selector({value:``});i.append(n.className({value:r}));let a=n.pseudo({value:`:is`});a.append(t),a.append(i),e.replaceWith(a)}return t.length}function u(e){let t=!1;return e.walkClasses(e=>{t||=i.has(e.value)}),t}function d(e){let t=0,n=0;return e.walkRules(e=>{if(o(e))return;let r=a.astSync(e.selector),i=!1;for(let e of r.nodes)l(e)>0&&(t++,i=!0),u(e)&&n++;i&&(e.selector=r.toString())}),{rewritten:t,carrying:n}}function f(e){let n=t.parse(e);return d(n),n.toString()}function p(){return{postcssPlugin:`wui-forced-states`,OnceExit(e){d(e)}}}p.postcss=!0;export{f as addForcedStates,p as forcedStatesPlugin,d as rewriteRoot};

package/dist/purge-safelist.json

@@ -1438,6 +1438,7 @@
         "wui-struct-card-no-check",
         "wui-struct-card-sm",
         "wui-struct-card-stacked",
+        "wui-tab-label",
         "wui-tabbar",
         "wui-tabbar-badge",
         "wui-tabbar-icon",

package/dist/runtime.mjs

@@ -0,0 +1 @@
+var e=Object.freeze({hover:`wui-force-hover`,focus:`wui-force-focus`,active:`wui-force-active`});export{e as FORCED_STATE_CLASSES};