keystone_ui-styles 0.17.0 → 0.19.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.
- checksums.yaml +4 -4
- data/app/assets/tailwind/keystone_ui_styles/engine.css +81 -14
- data/lib/keystone_ui/styles/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c7709c59bf0b5bc57ada0f6b9fde7c935ea31a2526683373eecc81f39bc7a337
|
|
4
|
+
data.tar.gz: ba17b7cb4e9d162c7b239c61964b02ddd07951d36d060b5fbc1d8ee21daa669d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c648425a7af9b49c73259627c44f05b5b5fe139d78e87043c49b022557471674873a97e31d329b2d0441dfe559c5fa66532a7ca7ecf70cd60a95b46ebaf05c9f
|
|
7
|
+
data.tar.gz: fcb4bd570bcf85d0e9fbb70a86625adbdda41b13528ee27a13f34a24e26b039429668650002ac8ce9b7c2a868fedc5dd9c3d06bf77851f976311d3118f2fcf6b
|
|
@@ -69,6 +69,9 @@
|
|
|
69
69
|
:root {
|
|
70
70
|
--ks-radius-control: var(--radius-lg);
|
|
71
71
|
--ks-font-body: inherit;
|
|
72
|
+
--ks-font-heading: var(--ks-font-body);
|
|
73
|
+
--ks-font-mono: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
|
74
|
+
--ks-letter-spacing: normal;
|
|
72
75
|
--ks-font-weight-strong: var(--font-weight-semibold);
|
|
73
76
|
--ks-border-width-control: 0px;
|
|
74
77
|
--ks-spacing: var(--spacing);
|
|
@@ -86,8 +89,16 @@
|
|
|
86
89
|
--ks-color-danger-dark: var(--color-red-600);
|
|
87
90
|
--ks-color-danger-hover-dark: var(--color-red-500);
|
|
88
91
|
--ks-color-on-fill-dark: var(--color-white);
|
|
92
|
+
--ks-color-on-danger: var(--ks-color-on-fill);
|
|
93
|
+
--ks-color-on-danger-dark: var(--ks-color-on-fill-dark);
|
|
94
|
+
--ks-color-on-neutral: var(--ks-color-on-fill);
|
|
95
|
+
--ks-color-on-neutral-dark: var(--ks-color-on-fill-dark);
|
|
96
|
+
--ks-color-on-accent: var(--ks-color-on-fill);
|
|
97
|
+
--ks-color-on-accent-dark: var(--ks-color-on-fill-dark);
|
|
89
98
|
--ks-color-surface: var(--color-white);
|
|
90
99
|
--ks-color-surface-dark: var(--color-surface-900);
|
|
100
|
+
--ks-color-on-surface: currentcolor;
|
|
101
|
+
--ks-color-on-surface-dark: currentcolor;
|
|
91
102
|
--ks-color-border: var(--color-surface-200);
|
|
92
103
|
--ks-color-border-dark: var(--color-surface-700);
|
|
93
104
|
--ks-color-border-control: var(--ks-color-border-strong);
|
|
@@ -135,6 +146,10 @@
|
|
|
135
146
|
--ks-color-backdrop: color-mix(in oklab, var(--color-black) 60%, transparent);
|
|
136
147
|
--ks-color-overlay: var(--color-white);
|
|
137
148
|
--ks-color-overlay-dark: var(--color-surface-800);
|
|
149
|
+
--ks-color-on-overlay: currentcolor;
|
|
150
|
+
--ks-color-on-overlay-dark: currentcolor;
|
|
151
|
+
--ks-color-on-overlay-muted: var(--ks-color-text-secondary);
|
|
152
|
+
--ks-color-on-overlay-muted-dark: var(--ks-color-text-secondary-dark);
|
|
138
153
|
--ks-color-text-heading: var(--ks-color-text);
|
|
139
154
|
--ks-color-text-heading-dark: var(--ks-color-text-dark);
|
|
140
155
|
--ks-color-close: var(--ks-color-icon);
|
|
@@ -144,6 +159,10 @@
|
|
|
144
159
|
--ks-color-ring-dark: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
145
160
|
--ks-color-hover: var(--color-surface-50);
|
|
146
161
|
--ks-color-hover-dark: var(--color-surface-800);
|
|
162
|
+
--ks-color-on-hover: var(--ks-color-text);
|
|
163
|
+
--ks-color-on-hover-dark: var(--ks-color-text-dark);
|
|
164
|
+
--ks-color-on-hover-muted: var(--ks-color-text-label);
|
|
165
|
+
--ks-color-on-hover-muted-dark: var(--ks-color-text-label-dark);
|
|
147
166
|
--ks-color-border-strong: var(--color-surface-300);
|
|
148
167
|
--ks-color-border-strong-dark: var(--color-surface-600);
|
|
149
168
|
--ks-color-focus: var(--color-accent-500);
|
|
@@ -263,6 +282,22 @@
|
|
|
263
282
|
--ks-color-link-strong-hover-dark: var(--color-accent-300);
|
|
264
283
|
--ks-color-badge-neutral: var(--color-gray-100);
|
|
265
284
|
--ks-color-badge-neutral-dark: var(--color-zinc-700);
|
|
285
|
+
--ks-color-page: transparent;
|
|
286
|
+
--ks-color-page-dark: transparent;
|
|
287
|
+
--ks-color-on-page: CanvasText;
|
|
288
|
+
--ks-color-on-page-dark: CanvasText;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
html {
|
|
292
|
+
@apply bg-(color:--ks-color-page) text-(color:--ks-color-on-page) dark:bg-(color:--ks-color-page-dark) dark:text-(color:--ks-color-on-page-dark);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
:where(body) {
|
|
296
|
+
@apply font-(family-name:--ks-font-body) tracking-(--ks-letter-spacing);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
:where(.ks-page-title, .ks-page-header-title, .ks-section-title, .ks-card-title, .ks-modal-title, .ks-navbar-title, .ks-heading) {
|
|
300
|
+
@apply font-(family-name:--ks-font-heading);
|
|
266
301
|
}
|
|
267
302
|
}
|
|
268
303
|
|
|
@@ -272,15 +307,15 @@
|
|
|
272
307
|
}
|
|
273
308
|
|
|
274
309
|
.ks-button-primary {
|
|
275
|
-
@apply bg-(color:--ks-color-accent) text-(color:--ks-color-on-
|
|
310
|
+
@apply bg-(color:--ks-color-accent) text-(color:--ks-color-on-accent) hover:bg-(color:--ks-color-accent-hover) dark:bg-(color:--ks-color-accent-dark) dark:text-(color:--ks-color-on-accent-dark) dark:hover:bg-(color:--ks-color-accent-hover-dark);
|
|
276
311
|
}
|
|
277
312
|
|
|
278
313
|
.ks-button-secondary {
|
|
279
|
-
@apply bg-(color:--ks-color-neutral) text-(color:--ks-color-on-
|
|
314
|
+
@apply bg-(color:--ks-color-neutral) text-(color:--ks-color-on-neutral) hover:bg-(color:--ks-color-neutral-hover) dark:bg-(color:--ks-color-neutral-dark) dark:text-(color:--ks-color-on-neutral-dark) dark:hover:bg-(color:--ks-color-neutral-hover-dark);
|
|
280
315
|
}
|
|
281
316
|
|
|
282
317
|
.ks-button-danger {
|
|
283
|
-
@apply bg-(color:--ks-color-danger) text-(color:--ks-color-on-
|
|
318
|
+
@apply bg-(color:--ks-color-danger) text-(color:--ks-color-on-danger) hover:bg-(color:--ks-color-danger-hover) dark:bg-(color:--ks-color-danger-dark) dark:text-(color:--ks-color-on-danger-dark) dark:hover:bg-(color:--ks-color-danger-hover-dark);
|
|
284
319
|
}
|
|
285
320
|
|
|
286
321
|
.ks-button-sm {
|
|
@@ -407,6 +442,38 @@
|
|
|
407
442
|
@apply text-sm text-(color:--ks-color-link) hover:text-(color:--ks-color-link-strong-hover) dark:text-(color:--ks-color-link-dark) dark:hover:text-(color:--ks-color-link-strong-hover-dark);
|
|
408
443
|
}
|
|
409
444
|
|
|
445
|
+
.ks-heading {
|
|
446
|
+
@apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.ks-heading-sm {
|
|
450
|
+
@apply text-lg;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.ks-heading-md {
|
|
454
|
+
@apply text-2xl;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.ks-heading-lg {
|
|
458
|
+
@apply text-4xl;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.ks-heading-row {
|
|
462
|
+
@apply flex items-baseline justify-between;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.ks-heading-note {
|
|
466
|
+
@apply text-sm text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.ks-caption {
|
|
470
|
+
@apply text-xs font-(weight:--ks-font-weight-strong) uppercase tracking-wider text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.ks-paragraph {
|
|
474
|
+
@apply leading-relaxed text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
|
|
475
|
+
}
|
|
476
|
+
|
|
410
477
|
.ks-card {
|
|
411
478
|
@apply overflow-hidden rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) dark:bg-(color:--ks-color-surface-dark) dark:border-(color:--ks-color-border-dark);
|
|
412
479
|
}
|
|
@@ -536,7 +603,7 @@
|
|
|
536
603
|
}
|
|
537
604
|
|
|
538
605
|
.ks-modal-panel {
|
|
539
|
-
@apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*6)] mx-[calc(var(--ks-spacing)*4)] dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark);
|
|
606
|
+
@apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) text-(color:--ks-color-on-overlay) p-[calc(var(--ks-spacing)*6)] mx-[calc(var(--ks-spacing)*4)] dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-on-overlay-dark);
|
|
540
607
|
}
|
|
541
608
|
|
|
542
609
|
.ks-modal-header {
|
|
@@ -552,7 +619,7 @@
|
|
|
552
619
|
}
|
|
553
620
|
|
|
554
621
|
.ks-action-menu {
|
|
555
|
-
@apply mt-[calc(var(--ks-spacing)*2)] rounded-[calc(var(--ks-radius-surface)*0.75)] bg-(color:--ks-color-overlay) py-[calc(var(--ks-spacing)*1)] shadow-(--ks-shadow-overlay) ring-(length:--ks-border-width) ring-(color:--ks-color-ring) dark:bg-(color:--ks-color-overlay-dark) dark:ring-(color:--ks-color-ring-dark);
|
|
622
|
+
@apply mt-[calc(var(--ks-spacing)*2)] rounded-[calc(var(--ks-radius-surface)*0.75)] bg-(color:--ks-color-overlay) text-(color:--ks-color-on-overlay) py-[calc(var(--ks-spacing)*1)] shadow-(--ks-shadow-overlay) ring-(length:--ks-border-width) ring-(color:--ks-color-ring) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-on-overlay-dark) dark:ring-(color:--ks-color-ring-dark);
|
|
556
623
|
}
|
|
557
624
|
|
|
558
625
|
.ks-action-menu-button {
|
|
@@ -560,7 +627,7 @@
|
|
|
560
627
|
}
|
|
561
628
|
|
|
562
629
|
.ks-menu {
|
|
563
|
-
@apply mt-[calc(var(--ks-spacing)*1)] rounded-[calc(var(--ks-radius-surface)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-surface-dark);
|
|
630
|
+
@apply mt-[calc(var(--ks-spacing)*1)] rounded-[calc(var(--ks-radius-surface)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) text-(color:--ks-color-on-surface) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-surface-dark) dark:text-(color:--ks-color-on-surface-dark);
|
|
564
631
|
}
|
|
565
632
|
|
|
566
633
|
.ks-menu-trigger {
|
|
@@ -568,7 +635,7 @@
|
|
|
568
635
|
}
|
|
569
636
|
|
|
570
637
|
.ks-menu-option {
|
|
571
|
-
@apply gap-[calc(var(--ks-spacing)*2)] px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-dark);
|
|
638
|
+
@apply gap-[calc(var(--ks-spacing)*2)] px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover) hover:text-(color:--ks-color-on-hover-muted) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-dark) dark:hover:text-(color:--ks-color-on-hover-muted-dark);
|
|
572
639
|
}
|
|
573
640
|
|
|
574
641
|
.ks-menu-option-hidden {
|
|
@@ -576,7 +643,7 @@
|
|
|
576
643
|
}
|
|
577
644
|
|
|
578
645
|
.ks-menu-move {
|
|
579
|
-
@apply px-[calc(var(--ks-spacing)*2)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark) hover:bg-(color:--ks-color-hover) dark:hover:bg-(color:--ks-color-hover-dark) disabled:opacity-40;
|
|
646
|
+
@apply px-[calc(var(--ks-spacing)*2)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark) hover:bg-(color:--ks-color-hover) hover:text-(color:--ks-color-on-hover-muted) dark:hover:bg-(color:--ks-color-hover-dark) dark:hover:text-(color:--ks-color-on-hover-muted-dark) disabled:opacity-40;
|
|
580
647
|
}
|
|
581
648
|
|
|
582
649
|
.ks-menu-checkbox {
|
|
@@ -584,7 +651,7 @@
|
|
|
584
651
|
}
|
|
585
652
|
|
|
586
653
|
.ks-copy-button {
|
|
587
|
-
@apply gap-[calc(var(--ks-spacing)*1.5)] rounded-[calc(var(--ks-radius-control)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border-strong) bg-(color:--ks-color-overlay) px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*1.5)] font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover-raised) dark:border-(color:--ks-color-border-strong-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-raised-dark);
|
|
654
|
+
@apply gap-[calc(var(--ks-spacing)*1.5)] rounded-[calc(var(--ks-radius-control)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border-strong) bg-(color:--ks-color-overlay) px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*1.5)] font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover-raised) hover:text-(color:--ks-color-on-hover-muted) dark:border-(color:--ks-color-border-strong-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-raised-dark) dark:hover:text-(color:--ks-color-on-hover-muted-dark);
|
|
588
655
|
}
|
|
589
656
|
|
|
590
657
|
.ks-theme-toggle-option {
|
|
@@ -624,7 +691,7 @@
|
|
|
624
691
|
}
|
|
625
692
|
|
|
626
693
|
.ks-radio-card-disclosure {
|
|
627
|
-
@apply mt-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-
|
|
694
|
+
@apply mt-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-on-overlay-muted) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-on-overlay-muted-dark) space-y-[calc(var(--ks-spacing)*1)];
|
|
628
695
|
}
|
|
629
696
|
|
|
630
697
|
.ks-radio-card-info {
|
|
@@ -704,7 +771,7 @@
|
|
|
704
771
|
}
|
|
705
772
|
|
|
706
773
|
.ks-color-picker-panel {
|
|
707
|
-
@apply mt-[calc(var(--ks-spacing)*2)] p-[calc(var(--ks-spacing)*3)] rounded-(--ks-radius-surface) shadow-(--ks-shadow-overlay) bg-(color:--ks-color-overlay) border-(length:--ks-border-width) border-(color:--ks-color-border) dark:bg-(color:--ks-color-overlay-dark) dark:border-(color:--ks-color-border-dark);
|
|
774
|
+
@apply mt-[calc(var(--ks-spacing)*2)] p-[calc(var(--ks-spacing)*3)] rounded-(--ks-radius-surface) shadow-(--ks-shadow-overlay) bg-(color:--ks-color-overlay) text-(color:--ks-color-on-overlay) border-(length:--ks-border-width) border-(color:--ks-color-border) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-on-overlay-dark) dark:border-(color:--ks-color-border-dark);
|
|
708
775
|
}
|
|
709
776
|
|
|
710
777
|
.ks-metric-card {
|
|
@@ -728,7 +795,7 @@
|
|
|
728
795
|
}
|
|
729
796
|
|
|
730
797
|
.ks-stat-card-disclosure {
|
|
731
|
-
@apply mt-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-
|
|
798
|
+
@apply mt-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-on-overlay-muted) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-on-overlay-muted-dark) space-y-[calc(var(--ks-spacing)*1)];
|
|
732
799
|
}
|
|
733
800
|
|
|
734
801
|
.ks-stat-card-emphasis {
|
|
@@ -980,7 +1047,7 @@
|
|
|
980
1047
|
}
|
|
981
1048
|
|
|
982
1049
|
.ks-tab {
|
|
983
|
-
@apply rounded-(--ks-radius-surface) px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*2)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-muted) hover:text-(color:--ks-color-
|
|
1050
|
+
@apply rounded-(--ks-radius-surface) px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*2)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-muted) hover:text-(color:--ks-color-on-hover) dark:text-(color:--ks-color-text-muted-dark) dark:hover:text-(color:--ks-color-on-hover-dark);
|
|
984
1051
|
}
|
|
985
1052
|
|
|
986
1053
|
.ks-tab-active {
|
|
@@ -1298,7 +1365,7 @@
|
|
|
1298
1365
|
}
|
|
1299
1366
|
|
|
1300
1367
|
.ks-settings-link {
|
|
1301
|
-
@apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-text-option) hover:bg-(color:--ks-color-hover-soft) dark:text-(color:--ks-color-text-option-dark) dark:hover:bg-(color:--ks-color-hover-soft-dark);
|
|
1368
|
+
@apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-text-option) hover:bg-(color:--ks-color-hover-soft) hover:text-(color:--ks-color-on-hover) dark:text-(color:--ks-color-text-option-dark) dark:hover:bg-(color:--ks-color-hover-soft-dark) dark:hover:text-(color:--ks-color-on-hover-dark);
|
|
1302
1369
|
}
|
|
1303
1370
|
|
|
1304
1371
|
.ks-settings-link-label {
|