@mdigital_ui/ui 0.5.1 → 0.5.2
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 +12 -2
- package/package.json +1 -1
- package/styles/global.css +2 -2
package/README.md
CHANGED
|
@@ -142,9 +142,13 @@ Available: `corporate`, `vibrant`, `minimal`. Mix with dark/light freely.
|
|
|
142
142
|
|
|
143
143
|
## Custom Tokens
|
|
144
144
|
|
|
145
|
-
Override after our import:
|
|
145
|
+
Override after our import — no `!important` needed:
|
|
146
146
|
|
|
147
147
|
```css
|
|
148
|
+
@import "tailwindcss";
|
|
149
|
+
@import "@mdigital_ui/ui/styles/global.css";
|
|
150
|
+
|
|
151
|
+
/* Your overrides — just plain :root, wins by source order */
|
|
148
152
|
:root {
|
|
149
153
|
--color-primary: oklch(0.55 0.22 270);
|
|
150
154
|
--color-primary-hover: oklch(0.50 0.24 270);
|
|
@@ -153,9 +157,15 @@ Override after our import:
|
|
|
153
157
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
154
158
|
--button-height-md: 2.5rem;
|
|
155
159
|
}
|
|
160
|
+
|
|
161
|
+
/* Optional: different dark mode values */
|
|
162
|
+
.dark {
|
|
163
|
+
--color-primary: oklch(0.65 0.22 270);
|
|
164
|
+
--color-background: oklch(0.12 0.01 270);
|
|
165
|
+
}
|
|
156
166
|
```
|
|
157
167
|
|
|
158
|
-
Every token is a CSS variable. Change one, it propagates everywhere.
|
|
168
|
+
Every token is a CSS variable. Change one, it propagates everywhere. Dark mode selectors use `:where()` to keep specificity flat — your overrides always win by source order.
|
|
159
169
|
|
|
160
170
|
---
|
|
161
171
|
|
package/package.json
CHANGED
package/styles/global.css
CHANGED
|
@@ -326,9 +326,9 @@
|
|
|
326
326
|
/* ============================================
|
|
327
327
|
DARK MODE
|
|
328
328
|
============================================ */
|
|
329
|
-
:root.dark,
|
|
329
|
+
:root:where(.dark),
|
|
330
330
|
.dark,
|
|
331
|
-
:root[data-mode='dark'],
|
|
331
|
+
:root:where([data-mode='dark']),
|
|
332
332
|
[data-mode='dark'] {
|
|
333
333
|
--color-primary: oklch(62% 0.17 239);
|
|
334
334
|
--color-primary-hover: oklch(67% 0.19 239);
|