@khipu/design-system 0.3.1 → 0.3.3
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.
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*
|
|
16
16
|
* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
|
|
17
17
|
* Source: design-system/src/tokens/tokens.json
|
|
18
|
-
* Generated: 2026-08-
|
|
18
|
+
* Generated: 2026-08-12T20:53:27.253Z
|
|
19
19
|
*
|
|
20
20
|
* To regenerate:
|
|
21
21
|
* cd design-system && npm run tokens:generate
|
|
@@ -399,9 +399,13 @@
|
|
|
399
399
|
/* ============================================================================
|
|
400
400
|
DARK MODE COLOR TOKENS
|
|
401
401
|
Override only color variables; everything else inherits from :root.
|
|
402
|
-
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper
|
|
402
|
+
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper —
|
|
403
|
+
or via the BeerCSS-style body.dark class. Both selectors are emitted so
|
|
404
|
+
a body.dark app gets the FULL dark theme (core + extended tokens); a
|
|
405
|
+
single source flipping only partially is how mixed light/dark bugs arise.
|
|
403
406
|
============================================================================ */
|
|
404
407
|
|
|
408
|
+
.kds-theme-root.dark,
|
|
405
409
|
.kds-theme-root [data-theme="dark"] {
|
|
406
410
|
|
|
407
411
|
/* Primary palette - Khipu brand */
|
|
@@ -880,13 +884,26 @@
|
|
|
880
884
|
Color Scheme (explicit opt-in to dark)
|
|
881
885
|
======================================== */
|
|
882
886
|
|
|
883
|
-
/* Default to light regardless of OS preference.
|
|
884
|
-
|
|
885
|
-
|
|
887
|
+
/* Default to light regardless of OS preference. The `only` keyword is the
|
|
888
|
+
opt-out for Chrome/WebView "Auto Dark Theme" on Android: without it, an
|
|
889
|
+
OS-dark device heuristically darkens SOME elements of a light page (mixed
|
|
890
|
+
light/dark rendering in production apps). Dark is reached only by an
|
|
891
|
+
explicit [data-theme="dark"] / body.dark opt-in. */
|
|
886
892
|
.kds-theme-root,
|
|
887
893
|
.kds-theme-root,
|
|
888
894
|
.kds-theme-root {
|
|
889
|
-
color-scheme: light;
|
|
895
|
+
color-scheme: light only;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
/* Defensive: re-assert the opt-out under an OS-dark preference (the auto-dark
|
|
899
|
+
heuristics probe this media query; the explicit dark rule below still wins
|
|
900
|
+
on themed pages because it comes later with matching specificity). */
|
|
901
|
+
@media (prefers-color-scheme: dark) {
|
|
902
|
+
.kds-theme-root,
|
|
903
|
+
.kds-theme-root,
|
|
904
|
+
.kds-theme-root {
|
|
905
|
+
color-scheme: light only;
|
|
906
|
+
}
|
|
890
907
|
}
|
|
891
908
|
|
|
892
909
|
/* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
|
|
@@ -7814,13 +7831,16 @@
|
|
|
7814
7831
|
padding-bottom: 0;
|
|
7815
7832
|
}
|
|
7816
7833
|
|
|
7817
|
-
/* Body card:
|
|
7818
|
-
(loader/progress ↔ formulario). Solo la body card = hijo directo de `.kds-screen`
|
|
7834
|
+
/* Body card: crece con su contenido. Solo la body card = hijo directo de `.kds-screen`
|
|
7819
7835
|
(los headers van dentro de `.kds-invoice-sticky-wrap`, no la afecta).
|
|
7820
|
-
|
|
7821
|
-
|
|
7836
|
+
NO lleva alto mínimo: un valor fijo deja espacio muerto en las apps cuyo contenido es
|
|
7837
|
+
más bajo, y el DS lo sirve a todas por igual. Cuando el contenido es corto el footer
|
|
7838
|
+
interno (versión / secure footer) queda pegado a él en vez de al fondo: su padding
|
|
7839
|
+
da el respiro. Las apps que embeben el flujo en un iframe reciben la altura real por
|
|
7840
|
+
el mensaje RESIZE (KTUF-239), asi que tampoco dependen de un mínimo aca.
|
|
7841
|
+
Flex-column se mantiene: ordena el contenido y sostiene el `margin-top: auto` del
|
|
7842
|
+
footer cuando la card sí tiene alto de sobra. */
|
|
7822
7843
|
.kds-theme-root .kds-screen > .kds-card-elevated {
|
|
7823
|
-
min-height: 36rem;
|
|
7824
7844
|
display: flex;
|
|
7825
7845
|
flex-direction: column;
|
|
7826
7846
|
/* mismo radio que el header (invoice-sticky usa radius-card); el base card-elevated
|