@khipu/design-system 0.3.1 → 0.3.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.
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
*
|
|
14
14
|
* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
|
|
15
15
|
* Source: design-system/src/tokens/tokens.json
|
|
16
|
-
* Generated: 2026-08-
|
|
16
|
+
* Generated: 2026-08-12T19:58:58.122Z
|
|
17
17
|
*
|
|
18
18
|
* To regenerate:
|
|
19
19
|
* cd design-system && npm run tokens:generate
|
|
@@ -397,9 +397,13 @@
|
|
|
397
397
|
/* ============================================================================
|
|
398
398
|
DARK MODE COLOR TOKENS
|
|
399
399
|
Override only color variables; everything else inherits from :root.
|
|
400
|
-
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper
|
|
400
|
+
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper —
|
|
401
|
+
or via the BeerCSS-style body.dark class. Both selectors are emitted so
|
|
402
|
+
a body.dark app gets the FULL dark theme (core + extended tokens); a
|
|
403
|
+
single source flipping only partially is how mixed light/dark bugs arise.
|
|
401
404
|
============================================================================ */
|
|
402
405
|
|
|
406
|
+
body.dark,
|
|
403
407
|
[data-theme="dark"] {
|
|
404
408
|
|
|
405
409
|
/* Primary palette - Khipu brand */
|
|
@@ -878,13 +882,26 @@ body.dark,
|
|
|
878
882
|
Color Scheme (explicit opt-in to dark)
|
|
879
883
|
======================================== */
|
|
880
884
|
|
|
881
|
-
/* Default to light regardless of OS preference.
|
|
882
|
-
|
|
883
|
-
|
|
885
|
+
/* Default to light regardless of OS preference. The `only` keyword is the
|
|
886
|
+
opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
|
|
887
|
+
OS-dark device heuristically darkens SOME elements of a light page (mixed
|
|
888
|
+
light/dark rendering in production apps). Dark is reached only by an
|
|
889
|
+
explicit [data-theme="dark"] / body.dark opt-in. */
|
|
884
890
|
:root,
|
|
885
891
|
html,
|
|
886
892
|
body {
|
|
887
|
-
color-scheme: light;
|
|
893
|
+
color-scheme: light only;
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
/* Defensive: re-assert the opt-out under an OS-dark preference (the auto-dark
|
|
897
|
+
heuristics probe this media query; the explicit dark rule below still wins
|
|
898
|
+
on themed pages because it comes later with matching specificity). */
|
|
899
|
+
@media (prefers-color-scheme: dark) {
|
|
900
|
+
:root,
|
|
901
|
+
html,
|
|
902
|
+
body {
|
|
903
|
+
color-scheme: light only;
|
|
904
|
+
}
|
|
888
905
|
}
|
|
889
906
|
|
|
890
907
|
/* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
|