keystone_ui-styles 0.16.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 +59 -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);
|
|
@@ -213,6 +232,16 @@
|
|
|
213
232
|
--ks-color-funnel-violet: var(--color-violet-500);
|
|
214
233
|
--ks-color-funnel-amber: var(--color-amber-500);
|
|
215
234
|
--ks-color-funnel-rose: var(--color-rose-500);
|
|
235
|
+
--ks-color-chart-1: var(--color-accent-600);
|
|
236
|
+
--ks-color-chart-1-dark: var(--color-accent-400);
|
|
237
|
+
--ks-color-chart-2: #0d9488;
|
|
238
|
+
--ks-color-chart-2-dark: #2dd4bf;
|
|
239
|
+
--ks-color-chart-3: #d97706;
|
|
240
|
+
--ks-color-chart-3-dark: #fbbf24;
|
|
241
|
+
--ks-color-chart-4: #7c3aed;
|
|
242
|
+
--ks-color-chart-4-dark: #a78bfa;
|
|
243
|
+
--ks-color-chart-5: #e11d48;
|
|
244
|
+
--ks-color-chart-5-dark: #fb7185;
|
|
216
245
|
--ks-color-text-funnel-band-dark: var(--color-surface-900);
|
|
217
246
|
--ks-color-text-funnel-band: var(--color-white);
|
|
218
247
|
--ks-color-funnel-band-dark: var(--color-surface-100);
|
|
@@ -253,6 +282,22 @@
|
|
|
253
282
|
--ks-color-link-strong-hover-dark: var(--color-accent-300);
|
|
254
283
|
--ks-color-badge-neutral: var(--color-gray-100);
|
|
255
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);
|
|
256
301
|
}
|
|
257
302
|
}
|
|
258
303
|
|
|
@@ -262,15 +307,15 @@
|
|
|
262
307
|
}
|
|
263
308
|
|
|
264
309
|
.ks-button-primary {
|
|
265
|
-
@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);
|
|
266
311
|
}
|
|
267
312
|
|
|
268
313
|
.ks-button-secondary {
|
|
269
|
-
@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);
|
|
270
315
|
}
|
|
271
316
|
|
|
272
317
|
.ks-button-danger {
|
|
273
|
-
@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);
|
|
274
319
|
}
|
|
275
320
|
|
|
276
321
|
.ks-button-sm {
|
|
@@ -526,7 +571,7 @@
|
|
|
526
571
|
}
|
|
527
572
|
|
|
528
573
|
.ks-modal-panel {
|
|
529
|
-
@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);
|
|
530
575
|
}
|
|
531
576
|
|
|
532
577
|
.ks-modal-header {
|
|
@@ -542,7 +587,7 @@
|
|
|
542
587
|
}
|
|
543
588
|
|
|
544
589
|
.ks-action-menu {
|
|
545
|
-
@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);
|
|
546
591
|
}
|
|
547
592
|
|
|
548
593
|
.ks-action-menu-button {
|
|
@@ -550,7 +595,7 @@
|
|
|
550
595
|
}
|
|
551
596
|
|
|
552
597
|
.ks-menu {
|
|
553
|
-
@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);
|
|
554
599
|
}
|
|
555
600
|
|
|
556
601
|
.ks-menu-trigger {
|
|
@@ -558,7 +603,7 @@
|
|
|
558
603
|
}
|
|
559
604
|
|
|
560
605
|
.ks-menu-option {
|
|
561
|
-
@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);
|
|
562
607
|
}
|
|
563
608
|
|
|
564
609
|
.ks-menu-option-hidden {
|
|
@@ -566,7 +611,7 @@
|
|
|
566
611
|
}
|
|
567
612
|
|
|
568
613
|
.ks-menu-move {
|
|
569
|
-
@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;
|
|
570
615
|
}
|
|
571
616
|
|
|
572
617
|
.ks-menu-checkbox {
|
|
@@ -574,7 +619,7 @@
|
|
|
574
619
|
}
|
|
575
620
|
|
|
576
621
|
.ks-copy-button {
|
|
577
|
-
@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);
|
|
578
623
|
}
|
|
579
624
|
|
|
580
625
|
.ks-theme-toggle-option {
|
|
@@ -614,7 +659,7 @@
|
|
|
614
659
|
}
|
|
615
660
|
|
|
616
661
|
.ks-radio-card-disclosure {
|
|
617
|
-
@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)];
|
|
618
663
|
}
|
|
619
664
|
|
|
620
665
|
.ks-radio-card-info {
|
|
@@ -694,7 +739,7 @@
|
|
|
694
739
|
}
|
|
695
740
|
|
|
696
741
|
.ks-color-picker-panel {
|
|
697
|
-
@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);
|
|
698
743
|
}
|
|
699
744
|
|
|
700
745
|
.ks-metric-card {
|
|
@@ -718,7 +763,7 @@
|
|
|
718
763
|
}
|
|
719
764
|
|
|
720
765
|
.ks-stat-card-disclosure {
|
|
721
|
-
@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)];
|
|
722
767
|
}
|
|
723
768
|
|
|
724
769
|
.ks-stat-card-emphasis {
|
|
@@ -970,7 +1015,7 @@
|
|
|
970
1015
|
}
|
|
971
1016
|
|
|
972
1017
|
.ks-tab {
|
|
973
|
-
@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);
|
|
974
1019
|
}
|
|
975
1020
|
|
|
976
1021
|
.ks-tab-active {
|
|
@@ -1288,7 +1333,7 @@
|
|
|
1288
1333
|
}
|
|
1289
1334
|
|
|
1290
1335
|
.ks-settings-link {
|
|
1291
|
-
@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);
|
|
1292
1337
|
}
|
|
1293
1338
|
|
|
1294
1339
|
.ks-settings-link-label {
|