kaleido-ui 0.1.130 → 0.2.0
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/dist/css/brand.css +5 -5
- package/dist/css/kaleido-ui.css +4 -4
- package/dist/native/index.cjs +4 -4
- package/dist/native/index.js +4 -4
- package/dist/tailwind/index.cjs +6 -6
- package/dist/tailwind/index.d.ts +2 -2
- package/dist/tailwind/index.js +6 -6
- package/dist/tokens/index.cjs +6 -6
- package/dist/tokens/index.d.cts +2 -2
- package/dist/tokens/index.d.ts +2 -2
- package/dist/tokens/index.js +6 -6
- package/dist/web/index.cjs +2452 -2266
- package/dist/web/index.d.cts +53 -9
- package/dist/web/index.d.ts +53 -9
- package/dist/web/index.js +2523 -2337
- package/package.json +1 -1
package/dist/css/brand.css
CHANGED
|
@@ -13,19 +13,19 @@
|
|
|
13
13
|
*/
|
|
14
14
|
:root:not(.dark),
|
|
15
15
|
.light {
|
|
16
|
-
--primary: #
|
|
16
|
+
--primary: #007D49;
|
|
17
17
|
/* The deep brand green takes white text (5.3:1); the default light green takes dark ink. */
|
|
18
18
|
--primary-foreground: #FFFFFF;
|
|
19
19
|
/* …and its button gradient runs through the deep greens under that white text,
|
|
20
20
|
lightening toward the bottom-right like the default light fills. */
|
|
21
|
-
--gradient-primary: linear-gradient(135deg, #076A43 0%, #
|
|
22
|
-
--ring: #
|
|
21
|
+
--gradient-primary: linear-gradient(135deg, #076A43 0%, #007D49 50%, #0E8F5C 100%);
|
|
22
|
+
--ring: #007D49;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.light {
|
|
26
|
-
--app-primary:
|
|
26
|
+
--app-primary: 0 125 73;
|
|
27
27
|
--app-primary-foreground: 255 255 255;
|
|
28
|
-
--app-border-strong:
|
|
28
|
+
--app-border-strong: 0 125 73;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.dark {
|
package/dist/css/kaleido-ui.css
CHANGED
|
@@ -283,9 +283,9 @@
|
|
|
283
283
|
Light is the default (like --primary / --card above); .dark switches. ── */
|
|
284
284
|
:root,
|
|
285
285
|
.light {
|
|
286
|
-
--brand: #
|
|
286
|
+
--brand: #007D49;
|
|
287
287
|
--accent-send-fg: #6428F0;
|
|
288
|
-
--accent-recv-fg: #
|
|
288
|
+
--accent-recv-fg: #007D49;
|
|
289
289
|
--success-fg: #076A43;
|
|
290
290
|
--warning-fg: #92400E;
|
|
291
291
|
--danger-fg: #991B1B;
|
|
@@ -500,9 +500,9 @@
|
|
|
500
500
|
--color-scrollbar-thumb-active: #2BF5A8;
|
|
501
501
|
--color-scrollbar-track: transparent;
|
|
502
502
|
--spacing-scrollbar: 2px;
|
|
503
|
-
--spacing-scrollbar-hover:
|
|
503
|
+
--spacing-scrollbar-hover: 4px;
|
|
504
504
|
--spacing-scrollbar-thick: 6px;
|
|
505
|
-
--spacing-scrollbar-thick-hover:
|
|
505
|
+
--spacing-scrollbar-thick-hover: 8px;
|
|
506
506
|
--spacing-scrollbar-thumb-min: 24px;
|
|
507
507
|
|
|
508
508
|
/* Spacing unit — every padding, margin, gap and size step is a multiple of it */
|
package/dist/native/index.cjs
CHANGED
|
@@ -1626,11 +1626,11 @@ var brandMark = {
|
|
|
1626
1626
|
};
|
|
1627
1627
|
var themedForeground = {
|
|
1628
1628
|
light: {
|
|
1629
|
-
// Brand green
|
|
1630
|
-
// clears 4.5:1 on every light surface (4.
|
|
1631
|
-
brand: "#
|
|
1629
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
1630
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
1631
|
+
brand: "#007D49",
|
|
1632
1632
|
"accent-send-fg": "#6428F0",
|
|
1633
|
-
"accent-recv-fg": "#
|
|
1633
|
+
"accent-recv-fg": "#007D49",
|
|
1634
1634
|
"success-fg": "#076A43",
|
|
1635
1635
|
// a shade under brand: it also sits on a 14% mint tint
|
|
1636
1636
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|
package/dist/native/index.js
CHANGED
|
@@ -1563,11 +1563,11 @@ var brandMark = {
|
|
|
1563
1563
|
};
|
|
1564
1564
|
var themedForeground = {
|
|
1565
1565
|
light: {
|
|
1566
|
-
// Brand green
|
|
1567
|
-
// clears 4.5:1 on every light surface (4.
|
|
1568
|
-
brand: "#
|
|
1566
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
1567
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
1568
|
+
brand: "#007D49",
|
|
1569
1569
|
"accent-send-fg": "#6428F0",
|
|
1570
|
-
"accent-recv-fg": "#
|
|
1570
|
+
"accent-recv-fg": "#007D49",
|
|
1571
1571
|
"success-fg": "#076A43",
|
|
1572
1572
|
// a shade under brand: it also sits on a 14% mint tint
|
|
1573
1573
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|
package/dist/tailwind/index.cjs
CHANGED
|
@@ -314,11 +314,11 @@ var brandMark = {
|
|
|
314
314
|
};
|
|
315
315
|
var themedForeground = {
|
|
316
316
|
light: {
|
|
317
|
-
// Brand green
|
|
318
|
-
// clears 4.5:1 on every light surface (4.
|
|
319
|
-
brand: "#
|
|
317
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
318
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
319
|
+
brand: "#007D49",
|
|
320
320
|
"accent-send-fg": "#6428F0",
|
|
321
|
-
"accent-recv-fg": "#
|
|
321
|
+
"accent-recv-fg": "#007D49",
|
|
322
322
|
"success-fg": "#076A43",
|
|
323
323
|
// a shade under brand: it also sits on a 14% mint tint
|
|
324
324
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|
|
@@ -489,10 +489,10 @@ var shadowLight = {
|
|
|
489
489
|
var spacingUnit = "0.28125rem";
|
|
490
490
|
var sizing = {
|
|
491
491
|
scrollbar: "2px",
|
|
492
|
-
scrollbarHover: "
|
|
492
|
+
scrollbarHover: "4px",
|
|
493
493
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
494
494
|
scrollbarThick: "6px",
|
|
495
|
-
scrollbarThickHover: "
|
|
495
|
+
scrollbarThickHover: "8px",
|
|
496
496
|
scrollbarThumbMin: "24px"
|
|
497
497
|
};
|
|
498
498
|
|
package/dist/tailwind/index.d.ts
CHANGED
|
@@ -51,9 +51,9 @@ declare const preset: {
|
|
|
51
51
|
};
|
|
52
52
|
spacing: {
|
|
53
53
|
scrollbar: "2px";
|
|
54
|
-
'scrollbar-hover': "
|
|
54
|
+
'scrollbar-hover': "4px";
|
|
55
55
|
'scrollbar-thick': "6px";
|
|
56
|
-
'scrollbar-thick-hover': "
|
|
56
|
+
'scrollbar-thick-hover': "8px";
|
|
57
57
|
'scrollbar-thumb-min': "24px";
|
|
58
58
|
};
|
|
59
59
|
boxShadow: {
|
package/dist/tailwind/index.js
CHANGED
|
@@ -288,11 +288,11 @@ var brandMark = {
|
|
|
288
288
|
};
|
|
289
289
|
var themedForeground = {
|
|
290
290
|
light: {
|
|
291
|
-
// Brand green
|
|
292
|
-
// clears 4.5:1 on every light surface (4.
|
|
293
|
-
brand: "#
|
|
291
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
292
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
293
|
+
brand: "#007D49",
|
|
294
294
|
"accent-send-fg": "#6428F0",
|
|
295
|
-
"accent-recv-fg": "#
|
|
295
|
+
"accent-recv-fg": "#007D49",
|
|
296
296
|
"success-fg": "#076A43",
|
|
297
297
|
// a shade under brand: it also sits on a 14% mint tint
|
|
298
298
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|
|
@@ -463,10 +463,10 @@ var shadowLight = {
|
|
|
463
463
|
var spacingUnit = "0.28125rem";
|
|
464
464
|
var sizing = {
|
|
465
465
|
scrollbar: "2px",
|
|
466
|
-
scrollbarHover: "
|
|
466
|
+
scrollbarHover: "4px",
|
|
467
467
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
468
468
|
scrollbarThick: "6px",
|
|
469
|
-
scrollbarThickHover: "
|
|
469
|
+
scrollbarThickHover: "8px",
|
|
470
470
|
scrollbarThumbMin: "24px"
|
|
471
471
|
};
|
|
472
472
|
|
package/dist/tokens/index.cjs
CHANGED
|
@@ -438,10 +438,10 @@ var radius = {
|
|
|
438
438
|
var spacingUnit = "0.28125rem";
|
|
439
439
|
var sizing = {
|
|
440
440
|
scrollbar: "2px",
|
|
441
|
-
scrollbarHover: "
|
|
441
|
+
scrollbarHover: "4px",
|
|
442
442
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
443
443
|
scrollbarThick: "6px",
|
|
444
|
-
scrollbarThickHover: "
|
|
444
|
+
scrollbarThickHover: "8px",
|
|
445
445
|
scrollbarThumbMin: "24px"
|
|
446
446
|
};
|
|
447
447
|
|
|
@@ -606,11 +606,11 @@ var brandMark = {
|
|
|
606
606
|
};
|
|
607
607
|
var themedForeground = {
|
|
608
608
|
light: {
|
|
609
|
-
// Brand green
|
|
610
|
-
// clears 4.5:1 on every light surface (4.
|
|
611
|
-
brand: "#
|
|
609
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
610
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
611
|
+
brand: "#007D49",
|
|
612
612
|
"accent-send-fg": "#6428F0",
|
|
613
|
-
"accent-recv-fg": "#
|
|
613
|
+
"accent-recv-fg": "#007D49",
|
|
614
614
|
"success-fg": "#076A43",
|
|
615
615
|
// a shade under brand: it also sits on a 14% mint tint
|
|
616
616
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|
package/dist/tokens/index.d.cts
CHANGED
|
@@ -303,10 +303,10 @@ declare const radius: {
|
|
|
303
303
|
declare const spacingUnit = "0.28125rem";
|
|
304
304
|
declare const sizing: {
|
|
305
305
|
readonly scrollbar: "2px";
|
|
306
|
-
readonly scrollbarHover: "
|
|
306
|
+
readonly scrollbarHover: "4px";
|
|
307
307
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
308
308
|
readonly scrollbarThick: "6px";
|
|
309
|
-
readonly scrollbarThickHover: "
|
|
309
|
+
readonly scrollbarThickHover: "8px";
|
|
310
310
|
readonly scrollbarThumbMin: "24px";
|
|
311
311
|
};
|
|
312
312
|
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -303,10 +303,10 @@ declare const radius: {
|
|
|
303
303
|
declare const spacingUnit = "0.28125rem";
|
|
304
304
|
declare const sizing: {
|
|
305
305
|
readonly scrollbar: "2px";
|
|
306
|
-
readonly scrollbarHover: "
|
|
306
|
+
readonly scrollbarHover: "4px";
|
|
307
307
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
308
308
|
readonly scrollbarThick: "6px";
|
|
309
|
-
readonly scrollbarThickHover: "
|
|
309
|
+
readonly scrollbarThickHover: "8px";
|
|
310
310
|
readonly scrollbarThumbMin: "24px";
|
|
311
311
|
};
|
|
312
312
|
|
package/dist/tokens/index.js
CHANGED
|
@@ -377,10 +377,10 @@ var radius = {
|
|
|
377
377
|
var spacingUnit = "0.28125rem";
|
|
378
378
|
var sizing = {
|
|
379
379
|
scrollbar: "2px",
|
|
380
|
-
scrollbarHover: "
|
|
380
|
+
scrollbarHover: "4px",
|
|
381
381
|
/** The thick variant, for a whole page's scroller: easier to find and to grab. */
|
|
382
382
|
scrollbarThick: "6px",
|
|
383
|
-
scrollbarThickHover: "
|
|
383
|
+
scrollbarThickHover: "8px",
|
|
384
384
|
scrollbarThumbMin: "24px"
|
|
385
385
|
};
|
|
386
386
|
|
|
@@ -545,11 +545,11 @@ var brandMark = {
|
|
|
545
545
|
};
|
|
546
546
|
var themedForeground = {
|
|
547
547
|
light: {
|
|
548
|
-
// Brand green
|
|
549
|
-
// clears 4.5:1 on every light surface (4.
|
|
550
|
-
brand: "#
|
|
548
|
+
// Brand green at full saturation (no red), as light as it goes and still
|
|
549
|
+
// clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
|
|
550
|
+
brand: "#007D49",
|
|
551
551
|
"accent-send-fg": "#6428F0",
|
|
552
|
-
"accent-recv-fg": "#
|
|
552
|
+
"accent-recv-fg": "#007D49",
|
|
553
553
|
"success-fg": "#076A43",
|
|
554
554
|
// a shade under brand: it also sits on a 14% mint tint
|
|
555
555
|
// Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
|