keystone_ui-styles 0.17.0 → 0.18.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 +49 -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: 3639101cbc5df01ebc872c744105063ddd84239f01fbfc2eef7fc1a29aa2be69
|
|
4
|
+
data.tar.gz: 3d49d2b52f4acdf732948db8acf8dae46f67d2a3e6b8fd8c48e163fdbb17bef4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7ca92cf6cf620c3bfc6865a56c6b43152941058815822045a346ccb17a19bca84bcbfebfdced436b738a08c1b2784d3002f145d71c688065172894557aed1972
|
|
7
|
+
data.tar.gz: 294737d2b0207ae2ba52c90337b982e4a0d829e2fda4c05cca8323865f58f4c5bbce742cfce5e6442a0c7b9b7cb01be509698cfadf906b75be4ee85c890ee3a8
|
|
@@ -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) {
|
|
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 {
|
|
@@ -536,7 +571,7 @@
|
|
|
536
571
|
}
|
|
537
572
|
|
|
538
573
|
.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);
|
|
574
|
+
@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
575
|
}
|
|
541
576
|
|
|
542
577
|
.ks-modal-header {
|
|
@@ -552,7 +587,7 @@
|
|
|
552
587
|
}
|
|
553
588
|
|
|
554
589
|
.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);
|
|
590
|
+
@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
591
|
}
|
|
557
592
|
|
|
558
593
|
.ks-action-menu-button {
|
|
@@ -560,7 +595,7 @@
|
|
|
560
595
|
}
|
|
561
596
|
|
|
562
597
|
.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);
|
|
598
|
+
@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
599
|
}
|
|
565
600
|
|
|
566
601
|
.ks-menu-trigger {
|
|
@@ -568,7 +603,7 @@
|
|
|
568
603
|
}
|
|
569
604
|
|
|
570
605
|
.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);
|
|
606
|
+
@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
607
|
}
|
|
573
608
|
|
|
574
609
|
.ks-menu-option-hidden {
|
|
@@ -576,7 +611,7 @@
|
|
|
576
611
|
}
|
|
577
612
|
|
|
578
613
|
.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;
|
|
614
|
+
@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
615
|
}
|
|
581
616
|
|
|
582
617
|
.ks-menu-checkbox {
|
|
@@ -584,7 +619,7 @@
|
|
|
584
619
|
}
|
|
585
620
|
|
|
586
621
|
.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);
|
|
622
|
+
@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
623
|
}
|
|
589
624
|
|
|
590
625
|
.ks-theme-toggle-option {
|
|
@@ -624,7 +659,7 @@
|
|
|
624
659
|
}
|
|
625
660
|
|
|
626
661
|
.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-
|
|
662
|
+
@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
663
|
}
|
|
629
664
|
|
|
630
665
|
.ks-radio-card-info {
|
|
@@ -704,7 +739,7 @@
|
|
|
704
739
|
}
|
|
705
740
|
|
|
706
741
|
.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);
|
|
742
|
+
@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
743
|
}
|
|
709
744
|
|
|
710
745
|
.ks-metric-card {
|
|
@@ -728,7 +763,7 @@
|
|
|
728
763
|
}
|
|
729
764
|
|
|
730
765
|
.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-
|
|
766
|
+
@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
767
|
}
|
|
733
768
|
|
|
734
769
|
.ks-stat-card-emphasis {
|
|
@@ -980,7 +1015,7 @@
|
|
|
980
1015
|
}
|
|
981
1016
|
|
|
982
1017
|
.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-
|
|
1018
|
+
@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
1019
|
}
|
|
985
1020
|
|
|
986
1021
|
.ks-tab-active {
|
|
@@ -1298,7 +1333,7 @@
|
|
|
1298
1333
|
}
|
|
1299
1334
|
|
|
1300
1335
|
.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);
|
|
1336
|
+
@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
1337
|
}
|
|
1303
1338
|
|
|
1304
1339
|
.ks-settings-link-label {
|