@oardi/css-utils 0.125.0 → 0.126.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/package.json +1 -1
- package/readme.md +2 -0
- package/scss/theme.scss +12 -0
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -104,6 +104,8 @@ All solid `.bg-*` utilities provide authored text colors and matching SVG fills.
|
|
|
104
104
|
|
|
105
105
|
When overriding theme colors, keep their `--on-*` tokens in sync. When changing surfaces, update their matching text tokens. Gray fallbacks are calculated at Sass compilation time; runtime gray or black/white token overrides require checking foreground contrast and, where needed, an explicit `.text-*` utility. Explicit text utilities continue to override the automatic foreground.
|
|
106
106
|
|
|
107
|
+
Use `accent` for supplementary brand or category emphasis without status meaning. The `--accent`, `--accent-hover`, `--accent-active` and `--on-accent` tokens are available in both themes and can be overridden like other theme colors. The color also generates `.bg-accent`, `.text-accent`, `.text-underline-accent`, `.border-accent`, `.btn-accent`, `.chip-accent` and `.icon-btn-accent` variants. Keep `--on-accent` readable against all three accent shades when customizing them.
|
|
108
|
+
|
|
107
109
|
These versions define the support target, not a claim that every browser release is exercised in CI. Regression tests cover the compiled fallback and enhancement branches and default light/dark contrast; application integrations should also be checked in their target browsers. The SCSS package supplies no JavaScript: interactive behavior belongs to the consuming application.
|
|
108
110
|
|
|
109
111
|
## Customize the design
|
package/scss/theme.scss
CHANGED
|
@@ -16,6 +16,12 @@ $-colors: (
|
|
|
16
16
|
active: #394551,
|
|
17
17
|
on: #ffffff,
|
|
18
18
|
),
|
|
19
|
+
'accent': (
|
|
20
|
+
base: #b515a7,
|
|
21
|
+
hover: #9d128f,
|
|
22
|
+
active: #870c7a,
|
|
23
|
+
on: #ffffff,
|
|
24
|
+
),
|
|
19
25
|
'success': (
|
|
20
26
|
base: #087f5b,
|
|
21
27
|
hover: #06704f,
|
|
@@ -49,6 +55,12 @@ $-dark-colors: (
|
|
|
49
55
|
active: #d1d8e0,
|
|
50
56
|
on: #1a1a1a,
|
|
51
57
|
),
|
|
58
|
+
'accent': (
|
|
59
|
+
base: #f291dc,
|
|
60
|
+
hover: #f6b0e6,
|
|
61
|
+
active: #f9c9ee,
|
|
62
|
+
on: #1a1a1a,
|
|
63
|
+
),
|
|
52
64
|
'success': (
|
|
53
65
|
base: #58d3a1,
|
|
54
66
|
hover: #72ddb2,
|