@khipu/design-system 0.2.0-alpha.125 → 0.2.0-alpha.126
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.
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*
|
|
12
12
|
* AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
|
|
13
13
|
* Source: design-system/src/tokens/tokens.json
|
|
14
|
-
* Generated: 2026-07-
|
|
14
|
+
* Generated: 2026-07-20T20:37:26.336Z
|
|
15
15
|
*
|
|
16
16
|
* To regenerate:
|
|
17
17
|
* cd design-system && npm run tokens:generate
|
|
@@ -394,6 +394,112 @@
|
|
|
394
394
|
|
|
395
395
|
}
|
|
396
396
|
|
|
397
|
+
/* ============================================================================
|
|
398
|
+
DARK MODE COLOR TOKENS
|
|
399
|
+
Override only color variables; everything else inherits from :root.
|
|
400
|
+
Activated via [data-theme="dark"] on <html>, <body>, or a wrapper.
|
|
401
|
+
============================================================================ */
|
|
402
|
+
|
|
403
|
+
[data-theme="dark"] {
|
|
404
|
+
|
|
405
|
+
/* Primary palette - Khipu brand */
|
|
406
|
+
--kds-color-primary-main: #E3B5FF;
|
|
407
|
+
--kds-color-primary-light: #F1D6FF;
|
|
408
|
+
--kds-color-primary-dark: #4C0676;
|
|
409
|
+
--kds-color-primary-contrast: rgba(76, 6, 118, 0.87);
|
|
410
|
+
--kds-color-primary-hover: rgba(227, 181, 255, 0.08);
|
|
411
|
+
--kds-color-primary-selected: rgba(227, 181, 255, 0.16);
|
|
412
|
+
--kds-color-primary-focus: rgba(227, 181, 255, 0.24);
|
|
413
|
+
--kds-color-primary-focus-visible: rgba(227, 181, 255, 0.40);
|
|
414
|
+
--kds-color-primary-outlined-border: rgba(227, 181, 255, 0.50);
|
|
415
|
+
|
|
416
|
+
/* Secondary palette */
|
|
417
|
+
--kds-color-secondary-main: #B5EAFF;
|
|
418
|
+
--kds-color-secondary-light: #D6F3FF;
|
|
419
|
+
--kds-color-secondary-dark: #065676;
|
|
420
|
+
--kds-color-secondary-contrast: rgba(6, 86, 118, 0.87);
|
|
421
|
+
|
|
422
|
+
/* Semantic colors */
|
|
423
|
+
--kds-color-success-main: #2E7D32;
|
|
424
|
+
--kds-color-success-light: #4CAF50;
|
|
425
|
+
--kds-color-success-dark: #1B5E20;
|
|
426
|
+
--kds-color-success-contrast: #FFFFFF;
|
|
427
|
+
--kds-color-warning-main: #EF6C00;
|
|
428
|
+
--kds-color-warning-light: #FF9800;
|
|
429
|
+
--kds-color-warning-dark: #E65100;
|
|
430
|
+
--kds-color-warning-contrast: #FFFFFF;
|
|
431
|
+
--kds-color-warning-warm: #8A6D1A;
|
|
432
|
+
--kds-color-error-main: #D32F2F;
|
|
433
|
+
--kds-color-error-light: #EF5350;
|
|
434
|
+
--kds-color-error-dark: #C62828;
|
|
435
|
+
--kds-color-error-contrast: #FFFFFF;
|
|
436
|
+
--kds-color-info-main: #0288D1;
|
|
437
|
+
--kds-color-info-light: #03A9F4;
|
|
438
|
+
--kds-color-info-dark: #01579B;
|
|
439
|
+
--kds-color-info-contrast: #FFFFFF;
|
|
440
|
+
--kds-color-info-blue: #5A5FE0;
|
|
441
|
+
|
|
442
|
+
/* Text colors */
|
|
443
|
+
--kds-color-text-primary: rgba(255, 255, 255, 1);
|
|
444
|
+
--kds-color-text-secondary: rgba(255, 255, 255, 0.70);
|
|
445
|
+
--kds-color-text-disabled: rgba(255, 255, 255, 0.38);
|
|
446
|
+
--kds-color-text-hint: rgba(255, 255, 255, 0.38);
|
|
447
|
+
|
|
448
|
+
/* Background colors */
|
|
449
|
+
--kds-color-background-default: #181818;
|
|
450
|
+
--kds-color-background-paper: #121212;
|
|
451
|
+
--kds-color-background-elevated: #2C2C2C;
|
|
452
|
+
--kds-color-background-muted: #1E1E1E;
|
|
453
|
+
--kds-color-background-brand-subtle: #1E1030;
|
|
454
|
+
|
|
455
|
+
/* Action colors */
|
|
456
|
+
--kds-color-action-active: rgba(255, 255, 255, 0.56);
|
|
457
|
+
--kds-color-action-hover: rgba(255, 255, 255, 0.08);
|
|
458
|
+
--kds-color-action-selected: rgba(255, 255, 255, 0.16);
|
|
459
|
+
--kds-color-action-disabled: rgba(255, 255, 255, 0.38);
|
|
460
|
+
--kds-color-action-disabled-bg: rgba(255, 255, 255, 0.12);
|
|
461
|
+
--kds-color-action-focus: rgba(255, 255, 255, 0.12);
|
|
462
|
+
|
|
463
|
+
/* Divider */
|
|
464
|
+
--kds-color-divider: rgba(255, 255, 255, 0.12);
|
|
465
|
+
|
|
466
|
+
/* Gray palette - Neutral colors */
|
|
467
|
+
--kds-color-gray-50: #F9FAFB;
|
|
468
|
+
--kds-color-gray-100: #F3F4F6;
|
|
469
|
+
--kds-color-gray-200: #E5E7EB;
|
|
470
|
+
--kds-color-gray-300: #D1D5DB;
|
|
471
|
+
--kds-color-gray-400: #9CA3AF;
|
|
472
|
+
--kds-color-gray-500: #6B7280;
|
|
473
|
+
--kds-color-gray-600: #4B5563;
|
|
474
|
+
--kds-color-gray-700: #374151;
|
|
475
|
+
--kds-color-gray-800: #1F2937;
|
|
476
|
+
--kds-color-gray-900: #111827;
|
|
477
|
+
|
|
478
|
+
/* Input borders */
|
|
479
|
+
--kds-color-input-enabled-border: rgba(255, 255, 255, 0.23);
|
|
480
|
+
--kds-color-input-hover-border: rgba(255, 255, 255, 1);
|
|
481
|
+
|
|
482
|
+
/* Snackbar backgrounds */
|
|
483
|
+
--kds-snackbar-success-bg: rgba(76, 175, 80, 0.16);
|
|
484
|
+
--kds-snackbar-warning-bg: rgba(255, 152, 0, 0.16);
|
|
485
|
+
--kds-snackbar-error-bg: rgba(239, 83, 80, 0.16);
|
|
486
|
+
--kds-snackbar-info-bg: rgba(3, 169, 244, 0.16);
|
|
487
|
+
|
|
488
|
+
/* Alert backgrounds */
|
|
489
|
+
--kds-alert-info-bg: rgba(2, 136, 209, 0.12);
|
|
490
|
+
--kds-alert-warning-bg: rgba(239, 108, 0, 0.12);
|
|
491
|
+
--kds-alert-success-bg: rgba(46, 125, 50, 0.12);
|
|
492
|
+
--kds-alert-error-bg: rgba(211, 47, 47, 0.12);
|
|
493
|
+
--kds-alert-success-text: #6AE079;
|
|
494
|
+
--kds-alert-warning-text: #FFB74D;
|
|
495
|
+
--kds-alert-error-text: #EF9A9A;
|
|
496
|
+
--kds-alert-info-text: #4FC3F7;
|
|
497
|
+
--kds-alert-success-border: #4CAF50;
|
|
498
|
+
--kds-alert-warning-border: #FF9800;
|
|
499
|
+
--kds-alert-error-border: #EF5350;
|
|
500
|
+
--kds-alert-info-border: #03A9F4;
|
|
501
|
+
}
|
|
502
|
+
|
|
397
503
|
/* ============================================================================
|
|
398
504
|
RESPONSIVE TOKENS (Mobile-First)
|
|
399
505
|
============================================================================ */
|
|
@@ -522,7 +628,8 @@
|
|
|
522
628
|
/* Import core design tokens (auto-generated) */
|
|
523
629
|
:root,
|
|
524
630
|
body.light,
|
|
525
|
-
body.dark
|
|
631
|
+
body.dark,
|
|
632
|
+
[data-theme="dark"] {
|
|
526
633
|
/* ========================================
|
|
527
634
|
Map core tokens to BeerCSS-specific names
|
|
528
635
|
(BeerCSS may use different naming conventions)
|
|
@@ -723,23 +830,53 @@ body.dark {
|
|
|
723
830
|
}
|
|
724
831
|
|
|
725
832
|
/* ========================================
|
|
726
|
-
|
|
833
|
+
Dark mode overrides — extended payment-flow tokens
|
|
834
|
+
These were authored as light-only literals in the group above (subtle
|
|
835
|
+
surfaces, soft backgrounds, borders, hovers, shell). Give them dark-aware
|
|
836
|
+
values so selected states / rows / hovers adapt. Additive: the light
|
|
837
|
+
:root / body.light values above are unchanged. Tokens already defined as
|
|
838
|
+
var() refs (warning-soft, danger-soft) adapt on their own and are omitted.
|
|
839
|
+
body.dark is included on purpose: the light group above also matches
|
|
840
|
+
body.dark (specificity 0,1,1), so a bare [data-theme] override (0,1,0)
|
|
841
|
+
would lose on a body that carries the transitional dark class.
|
|
842
|
+
======================================== */
|
|
843
|
+
body.dark,
|
|
844
|
+
[data-theme="dark"] {
|
|
845
|
+
--kds-color-primary-faint: #1E1030; /* dark brand-tinted subtle surface (selected rows/cards) */
|
|
846
|
+
--kds-color-info-soft: var(--kds-alert-info-bg); /* dark translucent blue */
|
|
847
|
+
--kds-color-success-soft: var(--kds-alert-success-bg); /* dark translucent green */
|
|
848
|
+
--kds-color-border-subtle: rgba(255, 255, 255, 0.08); /* subtle divider on dark */
|
|
849
|
+
--kds-color-border-default: rgba(255, 255, 255, 0.16); /* standard border on dark */
|
|
850
|
+
--kds-color-hover-bg: rgba(255, 255, 255, 0.04); /* subtle row hover on dark */
|
|
851
|
+
--kds-color-shell: var(--kds-color-background-default); /* neutral page background */
|
|
852
|
+
|
|
853
|
+
/* QR featured row — dark mirror of the light purple→blue gradient (the
|
|
854
|
+
light literals painted a light surface under adaptive white text). */
|
|
855
|
+
--kds-qr-bg-gradient: linear-gradient(135deg, #1E1030 0%, #101C2C 100%);
|
|
856
|
+
--kds-qr-border: rgba(227, 181, 255, 0.28); /* dark primary @ same alpha as light */
|
|
857
|
+
--kds-qr-focus-ring: rgba(227, 181, 255, 0.35);
|
|
858
|
+
--kds-qr-avatar-bg: var(--kds-color-background-elevated);
|
|
859
|
+
--kds-qr-avatar-border: rgba(227, 181, 255, 0.3);
|
|
860
|
+
--kds-qr-badge-text: var(--kds-color-primary-contrast); /* dark text on the lavender badge */
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
/* ========================================
|
|
864
|
+
Color Scheme (explicit opt-in to dark)
|
|
727
865
|
======================================== */
|
|
728
866
|
|
|
729
|
-
/*
|
|
867
|
+
/* Default to light regardless of OS preference. Because we use `light` (not
|
|
868
|
+
`light dark`), the system dark-mode preference never auto-applies — dark is
|
|
869
|
+
reached only by an explicit [data-theme="dark"] / body.dark opt-in. */
|
|
730
870
|
:root,
|
|
731
871
|
html,
|
|
732
872
|
body {
|
|
733
|
-
color-scheme: light
|
|
873
|
+
color-scheme: light;
|
|
734
874
|
}
|
|
735
875
|
|
|
736
|
-
/*
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
body {
|
|
741
|
-
color-scheme: light only;
|
|
742
|
-
}
|
|
876
|
+
/* Explicit dark theme: let native UI (form controls, scrollbars) render dark. */
|
|
877
|
+
[data-theme="dark"],
|
|
878
|
+
body.dark {
|
|
879
|
+
color-scheme: dark;
|
|
743
880
|
}
|
|
744
881
|
|
|
745
882
|
/* ========================================
|
|
@@ -892,7 +1029,7 @@ a.kds-btn:disabled {
|
|
|
892
1029
|
button.kds-btn-primary,
|
|
893
1030
|
a.kds-btn-primary {
|
|
894
1031
|
background: var(--kds-color-primary-main); /* #8347AD */
|
|
895
|
-
color:
|
|
1032
|
+
color: var(--kds-color-primary-contrast); /* #FFF light / dark-purple on dark (lavender bg) */
|
|
896
1033
|
border: none;
|
|
897
1034
|
box-shadow: 0 1px 2px rgba(131, 71, 173, .25);
|
|
898
1035
|
}
|
|
@@ -913,6 +1050,18 @@ a.kds-btn-primary:focus-visible:not(:disabled) {
|
|
|
913
1050
|
outline-offset: 2px;
|
|
914
1051
|
}
|
|
915
1052
|
|
|
1053
|
+
/* Dark mode: the button is a light lavender with dark text, so hover/active must
|
|
1054
|
+
LIGHTEN (not darken) — else primary-dark bg + dark contrast text = invisible.
|
|
1055
|
+
Additive override; the light-mode rules above stay unchanged. */
|
|
1056
|
+
[data-theme="dark"] button.kds-btn-primary:hover:not(:disabled),
|
|
1057
|
+
[data-theme="dark"] a.kds-btn-primary:hover:not(:disabled),
|
|
1058
|
+
[data-theme="dark"] button.kds-btn-primary:active:not(:disabled),
|
|
1059
|
+
[data-theme="dark"] button.kds-btn-primary:focus-visible:not(:disabled),
|
|
1060
|
+
[data-theme="dark"] a.kds-btn-primary:active:not(:disabled),
|
|
1061
|
+
[data-theme="dark"] a.kds-btn-primary:focus-visible:not(:disabled) {
|
|
1062
|
+
background: var(--kds-color-primary-light);
|
|
1063
|
+
}
|
|
1064
|
+
|
|
916
1065
|
/* Override disabled para primary */
|
|
917
1066
|
button.kds-btn-primary:disabled,
|
|
918
1067
|
a.kds-btn-primary:disabled {
|
|
@@ -1001,6 +1150,12 @@ a.kds-btn-text:hover:not(:disabled) {
|
|
|
1001
1150
|
color: var(--kds-color-primary-dark);
|
|
1002
1151
|
}
|
|
1003
1152
|
|
|
1153
|
+
/* Dark: hover must lighten — primary-dark text is near-invisible on dark bg. */
|
|
1154
|
+
[data-theme="dark"] button.kds-btn-text:hover:not(:disabled),
|
|
1155
|
+
[data-theme="dark"] a.kds-btn-text:hover:not(:disabled) {
|
|
1156
|
+
color: var(--kds-color-primary-light);
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1004
1159
|
button.kds-btn-text:disabled,
|
|
1005
1160
|
a.kds-btn-text:disabled {
|
|
1006
1161
|
background: transparent;
|
|
@@ -1254,7 +1409,7 @@ a.kds-btn.kds-btn-md {
|
|
|
1254
1409
|
align-self: flex-start;
|
|
1255
1410
|
padding: var(--kds-spacing-0-5) var(--kds-spacing-1-5);
|
|
1256
1411
|
background: var(--primary);
|
|
1257
|
-
color:
|
|
1412
|
+
color: var(--kds-color-primary-contrast); /* contrast adapts: #FFF light / dark on dark */
|
|
1258
1413
|
font-size: var(--kds-font-size-xs);
|
|
1259
1414
|
font-weight: var(--kds-font-weight-semibold);
|
|
1260
1415
|
line-height: 1;
|
|
@@ -1889,33 +2044,35 @@ a.kds-btn.kds-btn-md {
|
|
|
1889
2044
|
opacity: 1 !important;
|
|
1890
2045
|
}
|
|
1891
2046
|
|
|
1892
|
-
/* Snackbar semantic variants
|
|
1893
|
-
|
|
2047
|
+
/* Snackbar semantic variants — white text on solid semantic backgrounds.
|
|
2048
|
+
Use each semantic's own *-contrast token (always #FFFFFF, both modes) rather
|
|
2049
|
+
than --kds-color-primary-contrast, which flips to dark purple in dark mode
|
|
2050
|
+
and made the text illegible on the colored surface. */
|
|
1894
2051
|
.snackbar.error {
|
|
1895
2052
|
background-color: var(--kds-color-error-main) !important;
|
|
1896
|
-
color: var(--kds-color-
|
|
2053
|
+
color: var(--kds-color-error-contrast) !important;
|
|
1897
2054
|
}
|
|
1898
2055
|
|
|
1899
2056
|
.snackbar.error i {
|
|
1900
|
-
color: var(--kds-color-
|
|
2057
|
+
color: var(--kds-color-error-contrast) !important;
|
|
1901
2058
|
}
|
|
1902
2059
|
|
|
1903
2060
|
.snackbar.info {
|
|
1904
2061
|
background-color: var(--kds-color-info-main) !important;
|
|
1905
|
-
color: var(--kds-color-
|
|
2062
|
+
color: var(--kds-color-info-contrast) !important;
|
|
1906
2063
|
}
|
|
1907
2064
|
|
|
1908
2065
|
.snackbar.info i {
|
|
1909
|
-
color: var(--kds-color-
|
|
2066
|
+
color: var(--kds-color-info-contrast) !important;
|
|
1910
2067
|
}
|
|
1911
2068
|
|
|
1912
2069
|
.snackbar.success {
|
|
1913
2070
|
background-color: var(--kds-color-success-main) !important;
|
|
1914
|
-
color: var(--kds-color-
|
|
2071
|
+
color: var(--kds-color-success-contrast) !important;
|
|
1915
2072
|
}
|
|
1916
2073
|
|
|
1917
2074
|
.snackbar.success i {
|
|
1918
|
-
color: var(--kds-color-
|
|
2075
|
+
color: var(--kds-color-success-contrast) !important;
|
|
1919
2076
|
}
|
|
1920
2077
|
|
|
1921
2078
|
/* Snackbar progress bar — animated timer for auto-dismiss */
|
|
@@ -2347,6 +2504,17 @@ a.kds-btn-google:disabled {
|
|
|
2347
2504
|
flex-shrink: 0;
|
|
2348
2505
|
}
|
|
2349
2506
|
|
|
2507
|
+
/* Dark mode: info-dark text is near-invisible on the dark translucent chip.
|
|
2508
|
+
Use the alert info text token (light blue in dark), same pattern as KdsAlert;
|
|
2509
|
+
the copied state already uses alert-success-text and adapts on its own. */
|
|
2510
|
+
[data-theme="dark"] .kds-copy-button {
|
|
2511
|
+
color: var(--kds-alert-info-text);
|
|
2512
|
+
}
|
|
2513
|
+
|
|
2514
|
+
[data-theme="dark"] .kds-copy-button .material-symbols-outlined {
|
|
2515
|
+
color: var(--kds-alert-info-text);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2350
2518
|
.kds-copy-button.copied {
|
|
2351
2519
|
background: var(--kds-alert-success-bg);
|
|
2352
2520
|
color: var(--kds-alert-success-text);
|
|
@@ -2402,20 +2570,37 @@ a.kds-btn-google:disabled {
|
|
|
2402
2570
|
text-decoration: underline;
|
|
2403
2571
|
}
|
|
2404
2572
|
|
|
2573
|
+
/* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
|
|
2574
|
+
[data-theme="dark"] .kds-link:hover {
|
|
2575
|
+
color: var(--kds-color-primary-light);
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2405
2578
|
/* Contextual links inside cards and stage forms */
|
|
2406
2579
|
.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]),
|
|
2407
|
-
.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"])
|
|
2580
|
+
.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]),
|
|
2581
|
+
label.checkbox a:not(.kds-btn):not([class*="kds-btn"]),
|
|
2582
|
+
label.radio a:not(.kds-btn):not([class*="kds-btn"]) {
|
|
2408
2583
|
color: var(--kds-color-primary-main);
|
|
2409
2584
|
text-decoration: none;
|
|
2410
2585
|
transition: color var(--kds-transition-shorter) var(--kds-easing-standard);
|
|
2411
2586
|
}
|
|
2412
2587
|
|
|
2413
2588
|
.kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2414
|
-
.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover
|
|
2589
|
+
.kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2590
|
+
label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2591
|
+
label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
|
|
2415
2592
|
color: var(--kds-color-primary-dark);
|
|
2416
2593
|
text-decoration: underline;
|
|
2417
2594
|
}
|
|
2418
2595
|
|
|
2596
|
+
/* Dark: hover must lighten (primary-dark is near-invisible on a dark surface). */
|
|
2597
|
+
[data-theme="dark"] .kds-card-body a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2598
|
+
[data-theme="dark"] .kds-stage-content a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2599
|
+
[data-theme="dark"] label.checkbox a:not(.kds-btn):not([class*="kds-btn"]):hover,
|
|
2600
|
+
[data-theme="dark"] label.radio a:not(.kds-btn):not([class*="kds-btn"]):hover {
|
|
2601
|
+
color: var(--kds-color-primary-light);
|
|
2602
|
+
}
|
|
2603
|
+
|
|
2419
2604
|
/* ========================================
|
|
2420
2605
|
Flex Layout System (Body + Container + Sidebar)
|
|
2421
2606
|
======================================== */
|
|
@@ -2510,7 +2695,8 @@ footer.primary a:hover {
|
|
|
2510
2695
|
/* === VARIABLES GLOBALES === */
|
|
2511
2696
|
:root,
|
|
2512
2697
|
body.light,
|
|
2513
|
-
body.dark
|
|
2698
|
+
body.dark,
|
|
2699
|
+
[data-theme="dark"] {
|
|
2514
2700
|
--primary: var(--kds-color-primary-main); /* Purple Khipu - Focus */
|
|
2515
2701
|
--outline: var(--kds-color-input-enabled-border); /* Gris normal - Unfocused */
|
|
2516
2702
|
--error: var(--kds-color-error-main); /* Rojo - Invalid */
|
|
@@ -2694,9 +2880,9 @@ body.dark {
|
|
|
2694
2880
|
color: var(--kds-color-text-secondary);
|
|
2695
2881
|
}
|
|
2696
2882
|
|
|
2697
|
-
/* Hover SIN focus:
|
|
2883
|
+
/* Hover SIN focus: máxima emphasis (adapta a blanco en dark) */
|
|
2698
2884
|
.field.label:hover:not(:focus-within) > label {
|
|
2699
|
-
color:
|
|
2885
|
+
color: var(--kds-color-text-primary);
|
|
2700
2886
|
}
|
|
2701
2887
|
|
|
2702
2888
|
/* Focus: primary purple (BeerCSS ya lo hace, pero aseguramos) */
|
|
@@ -3229,7 +3415,7 @@ dialog.modal .field.border:focus-within {
|
|
|
3229
3415
|
background: var(--kds-accordion-bg-open);
|
|
3230
3416
|
font-size: var(--kds-font-size-sm);
|
|
3231
3417
|
line-height: 1.6;
|
|
3232
|
-
color:
|
|
3418
|
+
color: var(--kds-color-text-primary);
|
|
3233
3419
|
}
|
|
3234
3420
|
|
|
3235
3421
|
.kds-contract-accordion-content h4 {
|
|
@@ -3626,6 +3812,27 @@ footer > .kds-container-center {
|
|
|
3626
3812
|
color: var(--kds-color-error-dark);
|
|
3627
3813
|
}
|
|
3628
3814
|
|
|
3815
|
+
/* Dark mode: the semantic *-dark shades used for text/icons above are too dark
|
|
3816
|
+
on the dark translucent alert surfaces (poor visibility). Use the alert
|
|
3817
|
+
*-text tokens (light shades in dark) so title, description and icon stay
|
|
3818
|
+
legible. Title/description inherit this color. Additive — light unchanged. */
|
|
3819
|
+
[data-theme="dark"] .kds-alert.kds-info,
|
|
3820
|
+
[data-theme="dark"] .kds-alert.kds-info .kds-alert-icon {
|
|
3821
|
+
color: var(--kds-alert-info-text);
|
|
3822
|
+
}
|
|
3823
|
+
[data-theme="dark"] .kds-alert.kds-success,
|
|
3824
|
+
[data-theme="dark"] .kds-alert.kds-success .kds-alert-icon {
|
|
3825
|
+
color: var(--kds-alert-success-text);
|
|
3826
|
+
}
|
|
3827
|
+
[data-theme="dark"] .kds-alert.kds-warning,
|
|
3828
|
+
[data-theme="dark"] .kds-alert.kds-warning .kds-alert-icon {
|
|
3829
|
+
color: var(--kds-alert-warning-text);
|
|
3830
|
+
}
|
|
3831
|
+
[data-theme="dark"] .kds-alert.kds-error,
|
|
3832
|
+
[data-theme="dark"] .kds-alert.kds-error .kds-alert-icon {
|
|
3833
|
+
color: var(--kds-alert-error-text);
|
|
3834
|
+
}
|
|
3835
|
+
|
|
3629
3836
|
/* Close button — icon-only, discreto, no usa kds-btn para no romper el flex layout del alert */
|
|
3630
3837
|
.kds-alert-close {
|
|
3631
3838
|
flex-shrink: 0;
|
|
@@ -4254,6 +4461,11 @@ footer > .kds-container-center {
|
|
|
4254
4461
|
color: var(--kds-color-primary-dark);
|
|
4255
4462
|
}
|
|
4256
4463
|
|
|
4464
|
+
/* Dark: hover lightens (primary-dark is near-invisible on dark surfaces). */
|
|
4465
|
+
[data-theme="dark"] .page-card-link:hover {
|
|
4466
|
+
color: var(--kds-color-primary-light);
|
|
4467
|
+
}
|
|
4468
|
+
|
|
4257
4469
|
.page-card-link i {
|
|
4258
4470
|
font-size: var(--kds-font-size-xl);
|
|
4259
4471
|
transition: transform var(--kds-transition-shorter) var(--kds-easing-standard);
|
|
@@ -4887,13 +5099,13 @@ dialog#surveyModal button.circle {
|
|
|
4887
5099
|
|
|
4888
5100
|
/* Color utilities (solo para casos específicos de demo) */
|
|
4889
5101
|
.kds-text-warning {
|
|
4890
|
-
color: #
|
|
5102
|
+
color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
|
|
4891
5103
|
}
|
|
4892
5104
|
|
|
4893
5105
|
.kds-list-warning {
|
|
4894
5106
|
margin: 0;
|
|
4895
5107
|
padding-left: var(--kds-spacing-5);
|
|
4896
|
-
color: #
|
|
5108
|
+
color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
|
|
4897
5109
|
}
|
|
4898
5110
|
|
|
4899
5111
|
/* ========================================
|
|
@@ -5069,6 +5281,30 @@ dialog#surveyModal button.circle {
|
|
|
5069
5281
|
color: var(--kds-color-primary-dark);
|
|
5070
5282
|
}
|
|
5071
5283
|
|
|
5284
|
+
/* Dark: semantic *-dark text is near-invisible on dark surfaces (and the
|
|
5285
|
+
*-container background tokens are not generated). Use the alert bg/text
|
|
5286
|
+
pairs, which are dark-aware; primary uses selected/light. */
|
|
5287
|
+
[data-theme="dark"] .kds-badge.success {
|
|
5288
|
+
background-color: var(--kds-alert-success-bg);
|
|
5289
|
+
color: var(--kds-alert-success-text);
|
|
5290
|
+
}
|
|
5291
|
+
[data-theme="dark"] .kds-badge.error {
|
|
5292
|
+
background-color: var(--kds-alert-error-bg);
|
|
5293
|
+
color: var(--kds-alert-error-text);
|
|
5294
|
+
}
|
|
5295
|
+
[data-theme="dark"] .kds-badge.warning {
|
|
5296
|
+
background-color: var(--kds-alert-warning-bg);
|
|
5297
|
+
color: var(--kds-alert-warning-text);
|
|
5298
|
+
}
|
|
5299
|
+
[data-theme="dark"] .kds-badge.info {
|
|
5300
|
+
background-color: var(--kds-alert-info-bg);
|
|
5301
|
+
color: var(--kds-alert-info-text);
|
|
5302
|
+
}
|
|
5303
|
+
[data-theme="dark"] .kds-badge.primary {
|
|
5304
|
+
background-color: var(--kds-color-primary-selected);
|
|
5305
|
+
color: var(--kds-color-primary-light);
|
|
5306
|
+
}
|
|
5307
|
+
|
|
5072
5308
|
/* ========================================
|
|
5073
5309
|
DIVIDER WITH TEXT
|
|
5074
5310
|
Separator with optional text
|
|
@@ -5558,6 +5794,26 @@ dialog#surveyModal button.circle {
|
|
|
5558
5794
|
background: var(--kds-color-hover-bg);
|
|
5559
5795
|
}
|
|
5560
5796
|
|
|
5797
|
+
/* BeerCSS forces `border-radius: .5rem !important` on button:active
|
|
5798
|
+
(:is(.button,button):not(.chip):active — specificity 0,3,0). Keep each
|
|
5799
|
+
row-button's own radius in the active state: doubled class matches that
|
|
5800
|
+
specificity and this file loads after beer.css, so these win. */
|
|
5801
|
+
.kds-bank-row.kds-bank-row:active {
|
|
5802
|
+
border-radius: var(--kds-radius-card) !important;
|
|
5803
|
+
}
|
|
5804
|
+
.kds-qr-row.kds-qr-row:active {
|
|
5805
|
+
border-radius: var(--kds-radius-card) !important;
|
|
5806
|
+
}
|
|
5807
|
+
.kds-copy-row.kds-copy-row:active {
|
|
5808
|
+
border-radius: var(--kds-radius-row) !important;
|
|
5809
|
+
}
|
|
5810
|
+
.kds-copyable-table-row.kds-copyable-table-row:active {
|
|
5811
|
+
border-radius: var(--kds-spacing-0-75) !important;
|
|
5812
|
+
}
|
|
5813
|
+
.kds-bank-item.kds-bank-item:active {
|
|
5814
|
+
border-radius: var(--kds-radius-lg) !important;
|
|
5815
|
+
}
|
|
5816
|
+
|
|
5561
5817
|
.kds-bank-row-logo {
|
|
5562
5818
|
width: 40px;
|
|
5563
5819
|
height: 40px;
|
|
@@ -5615,7 +5871,7 @@ dialog#surveyModal button.circle {
|
|
|
5615
5871
|
display: flex;
|
|
5616
5872
|
gap: var(--kds-spacing-1-25);
|
|
5617
5873
|
padding: var(--kds-spacing-2);
|
|
5618
|
-
background: #
|
|
5874
|
+
background: var(--kds-color-background-default); /* #FFF light / #181818 dark */
|
|
5619
5875
|
border-top: 1px solid var(--kds-color-divider);
|
|
5620
5876
|
padding-bottom: calc(var(--kds-spacing-2) + env(safe-area-inset-bottom));
|
|
5621
5877
|
z-index: 100;
|
|
@@ -5665,14 +5921,17 @@ dialog#surveyModal button.circle {
|
|
|
5665
5921
|
background-color var(--kds-transition-shorter) ease;
|
|
5666
5922
|
}
|
|
5667
5923
|
|
|
5668
|
-
/* Keep the circle in EVERY interaction state.
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
button.kds-fab
|
|
5673
|
-
button.kds-fab:
|
|
5674
|
-
button.kds-fab:
|
|
5675
|
-
|
|
5924
|
+
/* Keep the circle in EVERY interaction state. BeerCSS forces
|
|
5925
|
+
`border-radius: .5rem !important` on button:active (specificity 0,3,0), so
|
|
5926
|
+
plain specificity is not enough — match it with a doubled class AND
|
|
5927
|
+
!important; this file loads after beer.css, so these win. */
|
|
5928
|
+
button.kds-fab.kds-fab,
|
|
5929
|
+
button.kds-fab.kds-fab:hover,
|
|
5930
|
+
button.kds-fab.kds-fab:active,
|
|
5931
|
+
button.kds-fab.kds-fab.active,
|
|
5932
|
+
button.kds-fab.kds-fab:focus,
|
|
5933
|
+
button.kds-fab.kds-fab:focus-visible {
|
|
5934
|
+
border-radius: var(--kds-radius-full) !important;
|
|
5676
5935
|
background: var(--kds-color-background-paper);
|
|
5677
5936
|
}
|
|
5678
5937
|
|
|
@@ -6823,6 +7082,17 @@ div.kds-invoice-header,
|
|
|
6823
7082
|
text-overflow: ellipsis;
|
|
6824
7083
|
}
|
|
6825
7084
|
|
|
7085
|
+
/* Dark: these primary-content texts use absolute gray-800/900 (near-black in
|
|
7086
|
+
both modes) — switch to the adaptive text token so they read on dark cards.
|
|
7087
|
+
Covers the invoice amount ($X.XXX), kv values (PAGO A / ASUNTO) and the
|
|
7088
|
+
other gray-800 body texts. */
|
|
7089
|
+
[data-theme="dark"] .kds-invoice-amount,
|
|
7090
|
+
[data-theme="dark"] .kds-kv dd,
|
|
7091
|
+
[data-theme="dark"] .kds-text-value,
|
|
7092
|
+
[data-theme="dark"] .kds-share-copy {
|
|
7093
|
+
color: var(--kds-color-text-primary);
|
|
7094
|
+
}
|
|
7095
|
+
|
|
6826
7096
|
/* -- Summary panel --
|
|
6827
7097
|
Recuadro de datos del pago en pantallas de resultado: contenido en columna
|
|
6828
7098
|
(gap spacing-2, típicamente pares kv) dentro de un borde sutil. */
|
|
@@ -7587,6 +7857,28 @@ svg[fill='none'] {
|
|
|
7587
7857
|
background: rgba(255, 255, 255, .08);
|
|
7588
7858
|
}
|
|
7589
7859
|
|
|
7860
|
+
/* Icon-only arrows: kill the BeerCSS button active/focus ring (stray halo). */
|
|
7861
|
+
.kds-proto-nav-arrow:active,
|
|
7862
|
+
.kds-proto-nav-arrow:focus,
|
|
7863
|
+
.kds-proto-nav-arrow:focus-visible {
|
|
7864
|
+
outline: none;
|
|
7865
|
+
border: 0;
|
|
7866
|
+
box-shadow: none;
|
|
7867
|
+
}
|
|
7868
|
+
|
|
7869
|
+
/* Dark: the pill inverts to a LIGHT surface (bg = text-primary = white), so
|
|
7870
|
+
its contents need dark ink — the white-alpha tokens above become invisible. */
|
|
7871
|
+
[data-theme="dark"] .kds-proto-nav-label {
|
|
7872
|
+
color: var(--kds-color-gray-500);
|
|
7873
|
+
}
|
|
7874
|
+
[data-theme="dark"] .kds-proto-nav-arrow {
|
|
7875
|
+
color: var(--kds-color-gray-600);
|
|
7876
|
+
}
|
|
7877
|
+
[data-theme="dark"] .kds-proto-nav-arrow:hover {
|
|
7878
|
+
color: var(--kds-color-gray-900);
|
|
7879
|
+
background: rgba(0, 0, 0, .08);
|
|
7880
|
+
}
|
|
7881
|
+
|
|
7590
7882
|
/* Tweaks panel — floating config panel */
|
|
7591
7883
|
.kds-proto-tweaks {
|
|
7592
7884
|
position: fixed;
|
|
@@ -7787,6 +8079,19 @@ svg[fill='none'] {
|
|
|
7787
8079
|
display: none;
|
|
7788
8080
|
}
|
|
7789
8081
|
|
|
8082
|
+
/* Icon-only close: kill the BeerCSS button active/focus ring (stray border). */
|
|
8083
|
+
.kds-bank-modal-close:active,
|
|
8084
|
+
.kds-bank-modal-close:focus,
|
|
8085
|
+
.kds-bank-modal-close:focus-visible {
|
|
8086
|
+
outline: none;
|
|
8087
|
+
border: 0;
|
|
8088
|
+
box-shadow: none;
|
|
8089
|
+
}
|
|
8090
|
+
|
|
8091
|
+
.kds-bank-modal-close:hover {
|
|
8092
|
+
background: var(--kds-color-action-hover);
|
|
8093
|
+
}
|
|
8094
|
+
|
|
7790
8095
|
/* Search field reutilizable (standalone o dentro del KdsBankModal). */
|
|
7791
8096
|
.kds-search-field {
|
|
7792
8097
|
width: 100%;
|
|
@@ -8117,6 +8422,13 @@ svg[fill='none'] {
|
|
|
8117
8422
|
opacity: 1;
|
|
8118
8423
|
}
|
|
8119
8424
|
|
|
8425
|
+
/* Dark: success-dark text is near-invisible on the dark translucent success
|
|
8426
|
+
surface — use the alert success text token (light green in dark). */
|
|
8427
|
+
[data-theme="dark"] .kds-copyable-table-row.copied .kds-value,
|
|
8428
|
+
[data-theme="dark"] .kds-copyable-table-row.copied .kds-value::after {
|
|
8429
|
+
color: var(--kds-alert-success-text);
|
|
8430
|
+
}
|
|
8431
|
+
|
|
8120
8432
|
/* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
|
|
8121
8433
|
activar hover. Dura lo mismo que la transición (~300ms) y se aplica
|
|
8122
8434
|
desde React tras quitar `.copied`. */
|
|
@@ -8207,6 +8519,15 @@ a.kds-copy-all-btn.copied:hover {
|
|
|
8207
8519
|
border-color: var(--kds-color-success-border-light);
|
|
8208
8520
|
}
|
|
8209
8521
|
|
|
8522
|
+
/* Dark: lighten the "Datos copiados" text/border on the dark success surface. */
|
|
8523
|
+
[data-theme="dark"] button.kds-copy-all-btn.copied,
|
|
8524
|
+
[data-theme="dark"] button.kds-copy-all-btn.copied:hover,
|
|
8525
|
+
[data-theme="dark"] a.kds-copy-all-btn.copied,
|
|
8526
|
+
[data-theme="dark"] a.kds-copy-all-btn.copied:hover {
|
|
8527
|
+
color: var(--kds-alert-success-text);
|
|
8528
|
+
border-color: var(--kds-alert-success-border);
|
|
8529
|
+
}
|
|
8530
|
+
|
|
8210
8531
|
/* ========================================
|
|
8211
8532
|
SECTION NOTE (.kds-section-note)
|
|
8212
8533
|
Lightweight inline note for contextual caveats.
|
|
@@ -8241,6 +8562,17 @@ a.kds-copy-all-btn.copied:hover {
|
|
|
8241
8562
|
.kds-section-note.kds-error { color: var(--kds-color-error-dark); }
|
|
8242
8563
|
.kds-section-note.kds-error > i { color: var(--kds-color-error-dark); }
|
|
8243
8564
|
|
|
8565
|
+
/* Dark: the semantic *-dark shades are near-invisible on the dark page bg —
|
|
8566
|
+
use the alert *-text tokens (light shades in dark). Base note is warning. */
|
|
8567
|
+
[data-theme="dark"] .kds-section-note,
|
|
8568
|
+
[data-theme="dark"] .kds-section-note > i { color: var(--kds-alert-warning-text); }
|
|
8569
|
+
[data-theme="dark"] .kds-section-note.kds-info,
|
|
8570
|
+
[data-theme="dark"] .kds-section-note.kds-info > i { color: var(--kds-alert-info-text); }
|
|
8571
|
+
[data-theme="dark"] .kds-section-note.kds-success,
|
|
8572
|
+
[data-theme="dark"] .kds-section-note.kds-success > i { color: var(--kds-alert-success-text); }
|
|
8573
|
+
[data-theme="dark"] .kds-section-note.kds-error,
|
|
8574
|
+
[data-theme="dark"] .kds-section-note.kds-error > i { color: var(--kds-alert-error-text); }
|
|
8575
|
+
|
|
8244
8576
|
/* ========================================
|
|
8245
8577
|
INFO TOOLTIP (.kds-info-tip)
|
|
8246
8578
|
Inline info button with hover/click tooltip bubble.
|