@khipu/design-system 0.2.0-alpha.125 → 0.2.0-alpha.127
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-20T22:36:14.718Z
|
|
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.
|
|
727
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
|
+
}
|
|
728
862
|
|
|
729
|
-
/*
|
|
863
|
+
/* ========================================
|
|
864
|
+
Color Scheme (explicit opt-in to dark)
|
|
865
|
+
======================================== */
|
|
866
|
+
|
|
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);
|
|
@@ -4844,6 +5056,7 @@ dialog#surveyModal button.circle {
|
|
|
4844
5056
|
}
|
|
4845
5057
|
|
|
4846
5058
|
.kds-text-link {
|
|
5059
|
+
cursor: pointer;
|
|
4847
5060
|
font-family: var(--kds-font-family-primary, 'Public Sans', sans-serif);
|
|
4848
5061
|
font-size: inherit;
|
|
4849
5062
|
font-weight: var(--kds-font-weight-medium, 500);
|
|
@@ -4887,13 +5100,13 @@ dialog#surveyModal button.circle {
|
|
|
4887
5100
|
|
|
4888
5101
|
/* Color utilities (solo para casos específicos de demo) */
|
|
4889
5102
|
.kds-text-warning {
|
|
4890
|
-
color: #
|
|
5103
|
+
color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
|
|
4891
5104
|
}
|
|
4892
5105
|
|
|
4893
5106
|
.kds-list-warning {
|
|
4894
5107
|
margin: 0;
|
|
4895
5108
|
padding-left: var(--kds-spacing-5);
|
|
4896
|
-
color: #
|
|
5109
|
+
color: var(--kds-alert-warning-text); /* #663C00 light / #FFB74D dark */
|
|
4897
5110
|
}
|
|
4898
5111
|
|
|
4899
5112
|
/* ========================================
|
|
@@ -5069,6 +5282,30 @@ dialog#surveyModal button.circle {
|
|
|
5069
5282
|
color: var(--kds-color-primary-dark);
|
|
5070
5283
|
}
|
|
5071
5284
|
|
|
5285
|
+
/* Dark: semantic *-dark text is near-invisible on dark surfaces (and the
|
|
5286
|
+
*-container background tokens are not generated). Use the alert bg/text
|
|
5287
|
+
pairs, which are dark-aware; primary uses selected/light. */
|
|
5288
|
+
[data-theme="dark"] .kds-badge.success {
|
|
5289
|
+
background-color: var(--kds-alert-success-bg);
|
|
5290
|
+
color: var(--kds-alert-success-text);
|
|
5291
|
+
}
|
|
5292
|
+
[data-theme="dark"] .kds-badge.error {
|
|
5293
|
+
background-color: var(--kds-alert-error-bg);
|
|
5294
|
+
color: var(--kds-alert-error-text);
|
|
5295
|
+
}
|
|
5296
|
+
[data-theme="dark"] .kds-badge.warning {
|
|
5297
|
+
background-color: var(--kds-alert-warning-bg);
|
|
5298
|
+
color: var(--kds-alert-warning-text);
|
|
5299
|
+
}
|
|
5300
|
+
[data-theme="dark"] .kds-badge.info {
|
|
5301
|
+
background-color: var(--kds-alert-info-bg);
|
|
5302
|
+
color: var(--kds-alert-info-text);
|
|
5303
|
+
}
|
|
5304
|
+
[data-theme="dark"] .kds-badge.primary {
|
|
5305
|
+
background-color: var(--kds-color-primary-selected);
|
|
5306
|
+
color: var(--kds-color-primary-light);
|
|
5307
|
+
}
|
|
5308
|
+
|
|
5072
5309
|
/* ========================================
|
|
5073
5310
|
DIVIDER WITH TEXT
|
|
5074
5311
|
Separator with optional text
|
|
@@ -5558,6 +5795,26 @@ dialog#surveyModal button.circle {
|
|
|
5558
5795
|
background: var(--kds-color-hover-bg);
|
|
5559
5796
|
}
|
|
5560
5797
|
|
|
5798
|
+
/* BeerCSS forces `border-radius: .5rem !important` on button:active
|
|
5799
|
+
(:is(.button,button):not(.chip):active — specificity 0,3,0). Keep each
|
|
5800
|
+
row-button's own radius in the active state: doubled class matches that
|
|
5801
|
+
specificity and this file loads after beer.css, so these win. */
|
|
5802
|
+
.kds-bank-row.kds-bank-row:active {
|
|
5803
|
+
border-radius: var(--kds-radius-card) !important;
|
|
5804
|
+
}
|
|
5805
|
+
.kds-qr-row.kds-qr-row:active {
|
|
5806
|
+
border-radius: var(--kds-radius-card) !important;
|
|
5807
|
+
}
|
|
5808
|
+
.kds-copy-row.kds-copy-row:active {
|
|
5809
|
+
border-radius: var(--kds-radius-row) !important;
|
|
5810
|
+
}
|
|
5811
|
+
.kds-copyable-table-row.kds-copyable-table-row:active {
|
|
5812
|
+
border-radius: var(--kds-spacing-0-75) !important;
|
|
5813
|
+
}
|
|
5814
|
+
.kds-bank-item.kds-bank-item:active {
|
|
5815
|
+
border-radius: var(--kds-radius-lg) !important;
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5561
5818
|
.kds-bank-row-logo {
|
|
5562
5819
|
width: 40px;
|
|
5563
5820
|
height: 40px;
|
|
@@ -5615,7 +5872,7 @@ dialog#surveyModal button.circle {
|
|
|
5615
5872
|
display: flex;
|
|
5616
5873
|
gap: var(--kds-spacing-1-25);
|
|
5617
5874
|
padding: var(--kds-spacing-2);
|
|
5618
|
-
background: #
|
|
5875
|
+
background: var(--kds-color-background-default); /* #FFF light / #181818 dark */
|
|
5619
5876
|
border-top: 1px solid var(--kds-color-divider);
|
|
5620
5877
|
padding-bottom: calc(var(--kds-spacing-2) + env(safe-area-inset-bottom));
|
|
5621
5878
|
z-index: 100;
|
|
@@ -5665,14 +5922,17 @@ dialog#surveyModal button.circle {
|
|
|
5665
5922
|
background-color var(--kds-transition-shorter) ease;
|
|
5666
5923
|
}
|
|
5667
5924
|
|
|
5668
|
-
/* Keep the circle in EVERY interaction state.
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
button.kds-fab
|
|
5673
|
-
button.kds-fab:
|
|
5674
|
-
button.kds-fab:
|
|
5675
|
-
|
|
5925
|
+
/* Keep the circle in EVERY interaction state. BeerCSS forces
|
|
5926
|
+
`border-radius: .5rem !important` on button:active (specificity 0,3,0), so
|
|
5927
|
+
plain specificity is not enough — match it with a doubled class AND
|
|
5928
|
+
!important; this file loads after beer.css, so these win. */
|
|
5929
|
+
button.kds-fab.kds-fab,
|
|
5930
|
+
button.kds-fab.kds-fab:hover,
|
|
5931
|
+
button.kds-fab.kds-fab:active,
|
|
5932
|
+
button.kds-fab.kds-fab.active,
|
|
5933
|
+
button.kds-fab.kds-fab:focus,
|
|
5934
|
+
button.kds-fab.kds-fab:focus-visible {
|
|
5935
|
+
border-radius: var(--kds-radius-full) !important;
|
|
5676
5936
|
background: var(--kds-color-background-paper);
|
|
5677
5937
|
}
|
|
5678
5938
|
|
|
@@ -6823,6 +7083,17 @@ div.kds-invoice-header,
|
|
|
6823
7083
|
text-overflow: ellipsis;
|
|
6824
7084
|
}
|
|
6825
7085
|
|
|
7086
|
+
/* Dark: these primary-content texts use absolute gray-800/900 (near-black in
|
|
7087
|
+
both modes) — switch to the adaptive text token so they read on dark cards.
|
|
7088
|
+
Covers the invoice amount ($X.XXX), kv values (PAGO A / ASUNTO) and the
|
|
7089
|
+
other gray-800 body texts. */
|
|
7090
|
+
[data-theme="dark"] .kds-invoice-amount,
|
|
7091
|
+
[data-theme="dark"] .kds-kv dd,
|
|
7092
|
+
[data-theme="dark"] .kds-text-value,
|
|
7093
|
+
[data-theme="dark"] .kds-share-copy {
|
|
7094
|
+
color: var(--kds-color-text-primary);
|
|
7095
|
+
}
|
|
7096
|
+
|
|
6826
7097
|
/* -- Summary panel --
|
|
6827
7098
|
Recuadro de datos del pago en pantallas de resultado: contenido en columna
|
|
6828
7099
|
(gap spacing-2, típicamente pares kv) dentro de un borde sutil. */
|
|
@@ -7587,6 +7858,28 @@ svg[fill='none'] {
|
|
|
7587
7858
|
background: rgba(255, 255, 255, .08);
|
|
7588
7859
|
}
|
|
7589
7860
|
|
|
7861
|
+
/* Icon-only arrows: kill the BeerCSS button active/focus ring (stray halo). */
|
|
7862
|
+
.kds-proto-nav-arrow:active,
|
|
7863
|
+
.kds-proto-nav-arrow:focus,
|
|
7864
|
+
.kds-proto-nav-arrow:focus-visible {
|
|
7865
|
+
outline: none;
|
|
7866
|
+
border: 0;
|
|
7867
|
+
box-shadow: none;
|
|
7868
|
+
}
|
|
7869
|
+
|
|
7870
|
+
/* Dark: the pill inverts to a LIGHT surface (bg = text-primary = white), so
|
|
7871
|
+
its contents need dark ink — the white-alpha tokens above become invisible. */
|
|
7872
|
+
[data-theme="dark"] .kds-proto-nav-label {
|
|
7873
|
+
color: var(--kds-color-gray-500);
|
|
7874
|
+
}
|
|
7875
|
+
[data-theme="dark"] .kds-proto-nav-arrow {
|
|
7876
|
+
color: var(--kds-color-gray-600);
|
|
7877
|
+
}
|
|
7878
|
+
[data-theme="dark"] .kds-proto-nav-arrow:hover {
|
|
7879
|
+
color: var(--kds-color-gray-900);
|
|
7880
|
+
background: rgba(0, 0, 0, .08);
|
|
7881
|
+
}
|
|
7882
|
+
|
|
7590
7883
|
/* Tweaks panel — floating config panel */
|
|
7591
7884
|
.kds-proto-tweaks {
|
|
7592
7885
|
position: fixed;
|
|
@@ -7787,6 +8080,19 @@ svg[fill='none'] {
|
|
|
7787
8080
|
display: none;
|
|
7788
8081
|
}
|
|
7789
8082
|
|
|
8083
|
+
/* Icon-only close: kill the BeerCSS button active/focus ring (stray border). */
|
|
8084
|
+
.kds-bank-modal-close:active,
|
|
8085
|
+
.kds-bank-modal-close:focus,
|
|
8086
|
+
.kds-bank-modal-close:focus-visible {
|
|
8087
|
+
outline: none;
|
|
8088
|
+
border: 0;
|
|
8089
|
+
box-shadow: none;
|
|
8090
|
+
}
|
|
8091
|
+
|
|
8092
|
+
.kds-bank-modal-close:hover {
|
|
8093
|
+
background: var(--kds-color-action-hover);
|
|
8094
|
+
}
|
|
8095
|
+
|
|
7790
8096
|
/* Search field reutilizable (standalone o dentro del KdsBankModal). */
|
|
7791
8097
|
.kds-search-field {
|
|
7792
8098
|
width: 100%;
|
|
@@ -8117,6 +8423,13 @@ svg[fill='none'] {
|
|
|
8117
8423
|
opacity: 1;
|
|
8118
8424
|
}
|
|
8119
8425
|
|
|
8426
|
+
/* Dark: success-dark text is near-invisible on the dark translucent success
|
|
8427
|
+
surface — use the alert success text token (light green in dark). */
|
|
8428
|
+
[data-theme="dark"] .kds-copyable-table-row.copied .kds-value,
|
|
8429
|
+
[data-theme="dark"] .kds-copyable-table-row.copied .kds-value::after {
|
|
8430
|
+
color: var(--kds-alert-success-text);
|
|
8431
|
+
}
|
|
8432
|
+
|
|
8120
8433
|
/* `.settling`: estado de "recién copiado" — la row vuelve al normal sin
|
|
8121
8434
|
activar hover. Dura lo mismo que la transición (~300ms) y se aplica
|
|
8122
8435
|
desde React tras quitar `.copied`. */
|
|
@@ -8207,6 +8520,15 @@ a.kds-copy-all-btn.copied:hover {
|
|
|
8207
8520
|
border-color: var(--kds-color-success-border-light);
|
|
8208
8521
|
}
|
|
8209
8522
|
|
|
8523
|
+
/* Dark: lighten the "Datos copiados" text/border on the dark success surface. */
|
|
8524
|
+
[data-theme="dark"] button.kds-copy-all-btn.copied,
|
|
8525
|
+
[data-theme="dark"] button.kds-copy-all-btn.copied:hover,
|
|
8526
|
+
[data-theme="dark"] a.kds-copy-all-btn.copied,
|
|
8527
|
+
[data-theme="dark"] a.kds-copy-all-btn.copied:hover {
|
|
8528
|
+
color: var(--kds-alert-success-text);
|
|
8529
|
+
border-color: var(--kds-alert-success-border);
|
|
8530
|
+
}
|
|
8531
|
+
|
|
8210
8532
|
/* ========================================
|
|
8211
8533
|
SECTION NOTE (.kds-section-note)
|
|
8212
8534
|
Lightweight inline note for contextual caveats.
|
|
@@ -8241,6 +8563,17 @@ a.kds-copy-all-btn.copied:hover {
|
|
|
8241
8563
|
.kds-section-note.kds-error { color: var(--kds-color-error-dark); }
|
|
8242
8564
|
.kds-section-note.kds-error > i { color: var(--kds-color-error-dark); }
|
|
8243
8565
|
|
|
8566
|
+
/* Dark: the semantic *-dark shades are near-invisible on the dark page bg —
|
|
8567
|
+
use the alert *-text tokens (light shades in dark). Base note is warning. */
|
|
8568
|
+
[data-theme="dark"] .kds-section-note,
|
|
8569
|
+
[data-theme="dark"] .kds-section-note > i { color: var(--kds-alert-warning-text); }
|
|
8570
|
+
[data-theme="dark"] .kds-section-note.kds-info,
|
|
8571
|
+
[data-theme="dark"] .kds-section-note.kds-info > i { color: var(--kds-alert-info-text); }
|
|
8572
|
+
[data-theme="dark"] .kds-section-note.kds-success,
|
|
8573
|
+
[data-theme="dark"] .kds-section-note.kds-success > i { color: var(--kds-alert-success-text); }
|
|
8574
|
+
[data-theme="dark"] .kds-section-note.kds-error,
|
|
8575
|
+
[data-theme="dark"] .kds-section-note.kds-error > i { color: var(--kds-alert-error-text); }
|
|
8576
|
+
|
|
8244
8577
|
/* ========================================
|
|
8245
8578
|
INFO TOOLTIP (.kds-info-tip)
|
|
8246
8579
|
Inline info button with hover/click tooltip bubble.
|
|
@@ -8671,3 +9004,21 @@ a.kds-copy-all-btn.copied:hover {
|
|
|
8671
9004
|
padding-inline-start: var(--kds-spacing-2);
|
|
8672
9005
|
}
|
|
8673
9006
|
|
|
9007
|
+
/* === Display utilities ================================================ */
|
|
9008
|
+
|
|
9009
|
+
.kds-block {
|
|
9010
|
+
display: block;
|
|
9011
|
+
}
|
|
9012
|
+
|
|
9013
|
+
.kds-inline {
|
|
9014
|
+
display: inline;
|
|
9015
|
+
}
|
|
9016
|
+
|
|
9017
|
+
.kds-inline-block {
|
|
9018
|
+
display: inline-block;
|
|
9019
|
+
}
|
|
9020
|
+
|
|
9021
|
+
.kds-pre-wrap {
|
|
9022
|
+
white-space: pre-wrap;
|
|
9023
|
+
}
|
|
9024
|
+
|