@webority/theme 0.0.9 → 0.2.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 +11 -4
- package/dist/webority-theme.css +1 -1
- package/package.json +2 -1
- package/scss/_components.scss +61 -82
- package/scss/_flags.scss +270 -0
- package/scss/_tokens.scss +37 -19
- package/scss/_variables.scss +27 -24
- package/scss/_wui-aliases.scss +3 -1
- package/scss/_wui-components.scss +468 -99
package/README.md
CHANGED
|
@@ -9,13 +9,20 @@ Compile the partials with your product's brand values, in the load-bearing order
|
|
|
9
9
|
```scss
|
|
10
10
|
// your-brand/_variables.scss provides $primary, fonts, etc. BEFORE bootstrap.
|
|
11
11
|
@import "your-brand/variables";
|
|
12
|
-
@import "@webority/theme/scss/variables";
|
|
12
|
+
@import "@webority/theme/scss/variables"; // library defaults (yours win where set)
|
|
13
13
|
@import "bootstrap/scss/bootstrap";
|
|
14
|
-
@import "@webority/theme/scss/tokens";
|
|
15
|
-
@import "@webority/theme/scss/
|
|
14
|
+
@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)
|
|
16
19
|
// map your product's legacy --<brand>-* names onto --wui-* here (alias layer)
|
|
17
20
|
```
|
|
18
21
|
|
|
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
|
+
|
|
19
26
|
Both Razor (`sass`/`CompileScss`) and React (Vite) already compile SCSS, so this path gives full Bootstrap utility-class fidelity.
|
|
20
27
|
|
|
21
28
|
## Consume (zero-toolchain — the convenience path)
|
|
@@ -30,4 +37,4 @@ Both Razor (`sass`/`CompileScss`) and React (Vite) already compile SCSS, so this
|
|
|
30
37
|
| `scss/_tokens.scss` | AFTER bootstrap | `--wui-*` CSS custom properties (ramps, surfaces, gradients, easings) |
|
|
31
38
|
| `scss/_components.scss` | AFTER bootstrap + tokens | Shared component CSS that must render identically on both surfaces |
|
|
32
39
|
|
|
33
|
-
>
|
|
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.
|