@webority/theme 0.95.0 → 0.98.0

package/README.md

@@ -129,36 +129,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 +151,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.
 

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/published-theme.json

@@ -85,7 +85,7 @@
       "dark": "#2a2f3a"
     },
     "chart-label": {
-      "light": "#687088",
+      "light": "#626A82",
       "dark": "#8a90a0"
     },
     "chart-neutral": {
@@ -169,8 +169,8 @@
       "dark": "#4B5675"
     },
     "fg-4": {
-      "light": "#687088",
-      "dark": "#687088"
+      "light": "#626A82",
+      "dark": "#626A82"
     },
     "fg-5": {
       "light": "#C4CADA",
@@ -361,8 +361,8 @@
       "dark": "#4B5675"
     },
     "text-3": {
-      "light": "#687088",
-      "dark": "#687088"
+      "light": "#626A82",
+      "dark": "#626A82"
     },
     "text-4": {
       "light": "#99A1B7",

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};