@webority/theme 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,40 +1,29 @@
1
1
  # @webority/theme
2
2
 
3
- The single source of Webority brand chrome — Bootstrap 5.3 SCSS overrides, `--wui-*` design tokens, and shared component CSS. Consumed identically by React portals (`@webority/ui-react`) and Razor sites (`Webority.Ui.Razor`).
3
+ Webority's internal design system — Bootstrap 5.3 SCSS overrides, `--wui-*` tokens, and
4
+ shared component CSS. Consumed by `@webority/ui-react` and `Webority.Ui.Razor`.
4
5
 
5
- ## Consume (brand-exact — the primary path)
6
+ Published publicly so `npm install` needs no private registry. Built for Webority
7
+ products; no support commitment outside them.
6
8
 
7
- Compile the partials with your product's brand values, in the load-bearing order:
9
+ ## Use
10
+
11
+ Compile the partials with your brand values, in this order — **the order is
12
+ load-bearing**:
8
13
 
9
14
  ```scss
10
- // your-brand/_variables.scss provides $primary, fonts, etc. BEFORE bootstrap.
11
- @import "your-brand/variables";
12
- @import "@webority/theme/scss/variables"; // library defaults (yours win where set)
15
+ @import "your-brand/variables"; // your $primary, fonts, etc.
16
+ @import "@webority/theme/scss/variables"; // library defaults (yours win)
13
17
  @import "bootstrap/scss/bootstrap";
14
18
  @import "@webority/theme/scss/tokens"; // --wui-* tokens
15
- @import "@webority/theme/scss/wui-aliases"; // --color-*/--radius-*/--shadow-* aliases
16
- @import "@webority/theme/scss/components"; // shared components
17
- @import "@webority/theme/scss/wui-components"; // portal component layer
18
- @import "@webority/theme/scss/flags"; // country flags (needed by AppPhoneNumberInput)
19
- // map your product's legacy --<brand>-* names onto --wui-* here (alias layer)
19
+ @import "@webority/theme/scss/wui-aliases"; // --color-* / --radius-* aliases
20
+ @import "@webority/theme/scss/components";
21
+ @import "@webority/theme/scss/wui-components";
22
+ @import "@webority/theme/scss/flags"; // country flags (phone input)
20
23
  ```
21
24
 
22
- The order is load-bearing. Importing only part of the chain is a bug — e.g. skipping
23
- `wui-aliases` leaves every `--color-*` reference in the component layer unresolved, and
24
- skipping `flags` leaves the phone input's country flags blank.
25
-
26
- Both Razor (`sass`/`CompileScss`) and React (Vite) already compile SCSS, so this path gives full Bootstrap utility-class fidelity.
27
-
28
- ## Consume (zero-toolchain — the convenience path)
29
-
30
- `dist/webority-theme.css` is the precompiled default-brand build (also shipped inside the `Webority.Ui.Razor` RCL as a static asset). Good for ~80% of theming via runtime `--wui-*` / `--bs-*` overrides; not pixel-exact on every Bootstrap utility. Prefer the brand-exact path for marketing surfaces.
31
-
32
- ## Files
33
-
34
- | Partial | Loaded | Holds |
35
- |---|---|---|
36
- | `scss/_variables.scss` | BEFORE bootstrap | Bootstrap `$` overrides (brand palette, fonts, radius, spacing) |
37
- | `scss/_tokens.scss` | AFTER bootstrap | `--wui-*` CSS custom properties (ramps, surfaces, gradients, easings) |
38
- | `scss/_components.scss` | AFTER bootstrap + tokens | Shared component CSS that must render identically on both surfaces |
25
+ Importing part of the chain is a bug: skipping `wui-aliases` leaves every `--color-*`
26
+ reference unresolved, and skipping `flags` leaves the phone input's flags blank.
39
27
 
40
- > Tokens are neutralized to `--wui-*` with a neutral indigo default palette. Each consuming product supplies its own brand `$`-variables before this theme and (optionally) maps legacy token names onto `--wui-*` via a small alias layer — brand values are never re-declared here.
28
+ `dist/webority-theme.css` is a precompiled default-brand build for when there is no SCSS
29
+ toolchain. It is not pixel-exact on every Bootstrap utility — prefer the chain above.