@slexkit/theme-shadcn 0.2.0 → 0.3.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.
@@ -1,19 +1,19 @@
1
- .slex-section-header {
2
- display: flex;
3
- flex-direction: column;
4
- gap: 0.5rem;
5
- min-width: 0;
6
- }
7
-
8
- .slex-section-eyebrow {
9
- color: var(--muted-foreground);
10
- font-size: 0.75rem;
11
- font-weight: 600;
12
- line-height: 1.25;
13
- letter-spacing: 0;
14
- text-transform: uppercase;
15
- }
16
-
1
+ .slex-section-header {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 0.5rem;
5
+ min-width: 0;
6
+ }
7
+
8
+ .slex-section-eyebrow {
9
+ color: var(--muted-foreground);
10
+ font-size: 0.75rem;
11
+ font-weight: 600;
12
+ line-height: 1.25;
13
+ letter-spacing: 0;
14
+ text-transform: uppercase;
15
+ }
16
+
17
17
  .slex-section-title {
18
18
  display: inline-flex;
19
19
  align-items: center;
@@ -21,161 +21,184 @@
21
21
  margin: 0;
22
22
  color: var(--foreground);
23
23
  font-weight: 700;
24
- line-height: 1.15;
25
- letter-spacing: 0;
26
- overflow-wrap: anywhere;
27
- font-size: 1.5rem;
28
- }
29
-
30
- .slex-section-subtitle {
31
- margin: 0;
32
- color: var(--muted-foreground);
33
- font-size: 0.9375rem;
34
- line-height: 1.7;
35
- overflow-wrap: anywhere;
36
- }
37
-
24
+ line-height: 1.15;
25
+ letter-spacing: 0;
26
+ overflow-wrap: anywhere;
27
+ font-size: 1.5rem;
28
+ }
29
+
30
+ .slex-section-subtitle {
31
+ margin: 0;
32
+ color: var(--muted-foreground);
33
+ font-size: 0.9375rem;
34
+ line-height: 1.7;
35
+ overflow-wrap: anywhere;
36
+ }
37
+
38
38
  .slex-link {
39
39
  display: inline-flex;
40
40
  width: fit-content;
41
41
  align-items: center;
42
42
  gap: 0.375rem;
43
43
  color: var(--primary);
44
- font-size: 0.875rem;
45
- font-weight: 500;
46
- text-decoration: none;
47
- transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
48
- }
49
-
50
- .slex-link:hover {
51
- color: color-mix(in oklab, var(--primary) 82%, var(--muted-foreground));
52
- }
53
-
54
- .slex-link:focus-visible {
55
- outline: none;
56
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 24%, transparent);
57
- }
58
-
59
- .slex-link[data-variant="muted"] {
60
- color: var(--muted-foreground);
61
- }
62
-
63
- .slex-link[data-variant="button"] {
64
- min-height: 2.25rem;
65
- justify-content: center;
66
- border: 1px solid var(--input);
67
- border-radius: calc(var(--radius) - 2px);
68
- background: var(--background);
69
- padding: 0 0.75rem;
70
- color: var(--foreground);
71
- box-shadow: var(--shadow-sm);
72
- }
73
-
74
- .slex-link[data-variant="button"]:hover {
75
- background: var(--accent);
76
- color: var(--accent-foreground);
77
- }
78
-
44
+ font-size: 0.875rem;
45
+ font-weight: 500;
46
+ text-decoration: none;
47
+ transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
48
+ }
49
+
50
+ .slex-link:hover {
51
+ color: color-mix(in oklab, var(--primary) 82%, var(--muted-foreground));
52
+ }
53
+
54
+ .slex-link:focus-visible {
55
+ outline: none;
56
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 24%, transparent);
57
+ }
58
+
59
+ .slex-link[data-variant="muted"] {
60
+ color: var(--muted-foreground);
61
+ }
62
+
63
+ .slex-link[data-variant="button"] {
64
+ min-height: 2.25rem;
65
+ justify-content: center;
66
+ border: 1px solid var(--input);
67
+ border-radius: calc(var(--radius) - 2px);
68
+ background: var(--background);
69
+ padding: 0 0.75rem;
70
+ color: var(--foreground);
71
+ box-shadow: var(--shadow-sm);
72
+ }
73
+
74
+ .slex-link[data-variant="button"]:hover {
75
+ background: var(--accent);
76
+ color: var(--accent-foreground);
77
+ }
78
+
79
79
  .slex-badge {
80
- display: inline-flex;
81
- width: fit-content;
82
- min-height: 1.5rem;
83
- align-items: center;
84
- gap: 0.25rem;
85
- border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
86
- border-radius: calc(var(--radius) - 2px);
87
- background: var(--secondary);
88
- color: var(--secondary-foreground);
89
- padding: 0.125rem 0.625rem;
90
- font-size: 0.75rem;
91
- font-weight: 600;
92
- line-height: 1.25;
93
- box-shadow: none;
94
- transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
80
+ display: inline-flex;
81
+ width: fit-content;
82
+ min-height: 1.5rem;
83
+ align-items: center;
84
+ align-self: start;
85
+ gap: 0.25rem;
86
+ border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
87
+ border-radius: calc(var(--radius) - 2px);
88
+ background: var(--secondary);
89
+ color: var(--secondary-foreground);
90
+ padding: 0.125rem 0.625rem;
91
+ font-size: 0.75rem;
92
+ font-weight: 600;
93
+ line-height: 1.25;
94
+ box-shadow: none;
95
+ transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
95
96
  }
96
97
 
97
98
  .slex-badge-label {
98
99
  min-width: 0;
99
100
  }
100
-
101
- .slex-badge[data-tone="neutral"],
102
- .slex-badge[data-tone="muted"] {
103
- border-color: color-mix(in oklab, var(--muted-foreground) 18%, var(--border));
104
- background: color-mix(in oklab, var(--muted-foreground) 8%, var(--background));
105
- color: var(--muted-foreground);
106
- }
107
-
108
- .slex-badge[data-tone="primary"] {
109
- border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
110
- background: color-mix(in oklab, var(--primary) 8%, var(--background));
111
- color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
112
- }
113
-
114
- .slex-badge[data-tone="info"] {
115
- border-color: color-mix(in oklab, var(--info) 24%, var(--border));
116
- background: color-mix(in oklab, var(--info) 10%, var(--background));
117
- color: color-mix(in oklab, var(--info) 86%, var(--foreground));
118
- }
119
-
120
- .slex-badge[data-tone="success"] {
121
- border-color: color-mix(in oklab, var(--success) 24%, var(--border));
122
- background: color-mix(in oklab, var(--success) 10%, var(--background));
123
- color: color-mix(in oklab, var(--success) 86%, var(--foreground));
124
- }
125
-
126
- .slex-badge[data-tone="warning"] {
127
- border-color: color-mix(in oklab, var(--warning) 26%, var(--border));
128
- background: color-mix(in oklab, var(--warning) 12%, var(--background));
129
- color: color-mix(in oklab, var(--warning) 82%, var(--foreground));
130
- }
131
-
132
- .slex-badge[data-tone="danger"],
133
- .slex-badge[data-tone="error"],
134
- .slex-badge[data-tone="destructive"] {
135
- border-color: color-mix(in oklab, var(--destructive) 24%, var(--border));
136
- background: color-mix(in oklab, var(--destructive) 10%, var(--background));
137
- color: color-mix(in oklab, var(--destructive) 86%, var(--foreground));
138
- }
139
-
140
- .slex-divider {
141
- width: 100%;
142
- height: 0;
143
- border: 0;
144
- border-top: 1px solid var(--border);
145
- margin: 1rem 0;
146
- }
147
-
148
- .slex-divider--labeled {
149
- display: flex;
150
- height: auto;
151
- align-items: center;
152
- gap: 0.75rem;
153
- border: 0;
154
- }
155
-
156
- .slex-divider--labeled::before,
157
- .slex-divider--labeled::after {
158
- content: "";
159
- flex: 1 1 0;
160
- border-top: 1px solid var(--border);
161
- }
162
-
101
+
102
+ .slex-badge[data-tone="neutral"],
103
+ .slex-badge[data-tone="muted"] {
104
+ border-color: color-mix(in oklab, var(--muted-foreground) 18%, var(--border));
105
+ background: color-mix(in oklab, var(--muted-foreground) 8%, var(--background));
106
+ color: var(--muted-foreground);
107
+ }
108
+
109
+ .slex-badge[data-tone="primary"] {
110
+ border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
111
+ background: color-mix(in oklab, var(--primary) 8%, var(--background));
112
+ color: color-mix(in oklab, var(--primary) 88%, var(--foreground));
113
+ }
114
+
115
+ .slex-badge[data-tone="info"] {
116
+ border-color: color-mix(in oklab, var(--info) 24%, var(--border));
117
+ background: color-mix(in oklab, var(--info) 10%, var(--background));
118
+ color: color-mix(in oklab, var(--info) 86%, var(--foreground));
119
+ }
120
+
121
+ .slex-badge[data-tone="success"] {
122
+ border-color: color-mix(in oklab, var(--success) 24%, var(--border));
123
+ background: color-mix(in oklab, var(--success) 10%, var(--background));
124
+ color: color-mix(in oklab, var(--success) 86%, var(--foreground));
125
+ }
126
+
127
+ .slex-badge[data-tone="warning"] {
128
+ border-color: color-mix(in oklab, var(--warning) 26%, var(--border));
129
+ background: color-mix(in oklab, var(--warning) 12%, var(--background));
130
+ color: color-mix(in oklab, var(--warning) 82%, var(--foreground));
131
+ }
132
+
133
+ .slex-badge[data-tone="danger"],
134
+ .slex-badge[data-tone="error"],
135
+ .slex-badge[data-tone="destructive"] {
136
+ border-color: color-mix(in oklab, var(--destructive) 24%, var(--border));
137
+ background: color-mix(in oklab, var(--destructive) 10%, var(--background));
138
+ color: color-mix(in oklab, var(--destructive) 86%, var(--foreground));
139
+ }
140
+
141
+ .slex-divider {
142
+ width: 100%;
143
+ height: 0;
144
+ border: 0;
145
+ border-top: 1px solid var(--border);
146
+ margin: 1rem 0;
147
+ }
148
+
149
+ .slex-divider--labeled {
150
+ display: flex;
151
+ height: auto;
152
+ align-items: center;
153
+ gap: 0.75rem;
154
+ border: 0;
155
+ }
156
+
157
+ .slex-divider--labeled::before,
158
+ .slex-divider--labeled::after {
159
+ content: "";
160
+ flex: 1 1 0;
161
+ border-top: 1px solid var(--border);
162
+ }
163
+
163
164
  .slex-divider-label {
164
165
  display: inline-flex;
165
166
  align-items: center;
166
167
  gap: 0.375rem;
167
168
  min-width: 0;
168
169
  color: var(--muted-foreground);
169
- font-size: 0.75rem;
170
- font-weight: 500;
171
- }
172
-
170
+ font-size: 0.75rem;
171
+ font-weight: 500;
172
+ }
173
+
174
+ .slex-formula {
175
+ box-sizing: border-box;
176
+ width: 100%;
177
+ max-width: 100%;
178
+ overflow-x: auto;
179
+ color: var(--foreground);
180
+ }
181
+
182
+ .slex-formula[data-display="block"] {
183
+ display: block;
184
+ margin: 0.25rem 0;
185
+ }
186
+
187
+ .slex-formula[data-display="inline"] {
188
+ display: inline-block;
189
+ width: fit-content;
190
+ max-width: 100%;
191
+ vertical-align: middle;
192
+ }
193
+
173
194
  .slex-callout {
195
+ box-sizing: border-box;
174
196
  display: grid;
175
197
  grid-template-columns: 0.25rem minmax(0, 1fr);
176
198
  align-items: stretch;
177
199
  gap: 0.75rem;
178
200
  width: 100%;
201
+ max-width: none;
179
202
  min-height: 4rem;
180
203
  border: 1px solid var(--border);
181
204
  border-radius: var(--radius);
@@ -266,7 +289,7 @@
266
289
  .slex-callout-body:empty {
267
290
  display: none;
268
291
  }
269
-
292
+
270
293
  .slex-code-block {
271
294
  --slex-code-keyword: color-mix(in oklab, var(--info) 78%, var(--foreground));
272
295
  --slex-code-string: color-mix(in oklab, var(--success) 78%, var(--foreground));
@@ -277,19 +300,19 @@
277
300
  border: 1px solid var(--border);
278
301
  border-radius: var(--radius);
279
302
  background: var(--muted);
280
- color: var(--foreground);
281
- }
282
-
303
+ color: var(--foreground);
304
+ }
305
+
283
306
  .slex-code-block-header {
284
- display: flex;
285
- align-items: center;
286
- justify-content: space-between;
287
- gap: 1rem;
288
- border-bottom: 1px solid var(--border);
289
- padding: 0.5rem 0.75rem;
290
- color: var(--muted-foreground);
291
- font-size: 0.75rem;
292
- font-weight: 600;
307
+ display: flex;
308
+ align-items: center;
309
+ justify-content: space-between;
310
+ gap: 1rem;
311
+ border-bottom: 1px solid var(--border);
312
+ padding: 0.5rem 0.75rem;
313
+ color: var(--muted-foreground);
314
+ font-size: 0.75rem;
315
+ font-weight: 600;
293
316
  }
294
317
 
295
318
  .slex-code-block-title {
@@ -298,12 +321,12 @@
298
321
  gap: 0.375rem;
299
322
  min-width: 0;
300
323
  }
301
-
302
- .slex-code-block-language {
303
- color: var(--muted-foreground);
304
- font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
305
- }
306
-
324
+
325
+ .slex-code-block-language {
326
+ color: var(--muted-foreground);
327
+ font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
328
+ }
329
+
307
330
  .slex-code-block .slex-code-block-pre {
308
331
  overflow: auto;
309
332
  margin: 0;
@@ -316,7 +339,7 @@
316
339
  font-size: 0.8125rem;
317
340
  line-height: 1.65;
318
341
  }
319
-
342
+
320
343
  .slex-code-block code {
321
344
  white-space: pre;
322
345
  }
@@ -379,34 +402,34 @@
379
402
  }
380
403
 
381
404
  .slex-table-wrap {
382
- width: 100%;
383
- overflow-x: auto;
384
- border: 1px solid var(--border);
385
- border-radius: var(--radius);
386
- background: var(--card);
387
- }
388
-
389
- .slex-table {
390
- width: 100%;
391
- min-width: 100%;
392
- border-collapse: collapse;
393
- color: var(--foreground);
394
- font-size: 0.875rem;
395
- }
396
-
397
- .slex-table th,
398
- .slex-table td {
399
- border-bottom: 1px solid var(--border);
400
- padding: 0.625rem 0.75rem;
401
- text-align: left;
402
- vertical-align: top;
403
- }
404
-
405
+ width: 100%;
406
+ overflow-x: auto;
407
+ border: 1px solid var(--border);
408
+ border-radius: var(--radius);
409
+ background: var(--card);
410
+ }
411
+
412
+ .slex-table {
413
+ width: 100%;
414
+ min-width: 100%;
415
+ border-collapse: collapse;
416
+ color: var(--foreground);
417
+ font-size: 0.875rem;
418
+ }
419
+
420
+ .slex-table th,
421
+ .slex-table td {
422
+ border-bottom: 1px solid var(--border);
423
+ padding: 0.625rem 0.75rem;
424
+ text-align: left;
425
+ vertical-align: top;
426
+ }
427
+
405
428
  .slex-table th {
406
- background: var(--muted);
407
- color: var(--muted-foreground);
408
- font-size: 0.75rem;
409
- font-weight: 650;
429
+ background: var(--muted);
430
+ color: var(--muted-foreground);
431
+ font-size: 0.75rem;
432
+ font-weight: 650;
410
433
  }
411
434
 
412
435
  .slex-table-column-label {
@@ -415,60 +438,60 @@
415
438
  gap: 0.375rem;
416
439
  min-width: 0;
417
440
  }
418
-
419
- .slex-table tr:last-child td {
420
- border-bottom: 0;
421
- }
422
-
423
- .slex-section {
424
- display: grid;
425
- gap: 1rem;
426
- min-width: 0;
427
- scroll-margin-top: 5rem;
428
- }
429
-
430
- .slex-section-body {
431
- display: grid;
432
- gap: 1rem;
433
- min-width: 0;
434
- }
435
-
436
- .slex-section-action {
437
- display: inline-flex;
438
- width: fit-content;
439
- min-height: 2.25rem;
440
- align-items: center;
441
- justify-content: center;
442
- border: 1px solid var(--input);
443
- border-radius: calc(var(--radius) - 2px);
444
- background: var(--background);
445
- color: var(--foreground);
446
- padding: 0 0.75rem;
447
- font-size: 0.875rem;
448
- font-weight: 600;
449
- text-decoration: none;
450
- box-shadow: var(--shadow-sm);
451
- transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
452
- }
453
-
454
- .slex-section-action:hover {
455
- background: var(--accent);
456
- color: var(--accent-foreground);
457
- }
458
-
459
- .slex-section-action:focus-visible {
460
- outline: 2px solid var(--ring);
461
- outline-offset: 2px;
462
- }
463
-
464
- .slexkit-secure-error {
465
- margin-top: 0.75rem;
466
- white-space: pre-wrap;
467
- border: 1px solid color-mix(in srgb, var(--destructive, #dc2626) 35%, transparent);
468
- border-radius: 0.5rem;
469
- background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
470
- color: var(--destructive, #b91c1c);
471
- font-size: 0.875rem;
472
- line-height: 1.5;
473
- padding: 0.75rem;
441
+
442
+ .slex-table tr:last-child td {
443
+ border-bottom: 0;
444
+ }
445
+
446
+ .slex-section {
447
+ display: grid;
448
+ gap: 1rem;
449
+ min-width: 0;
450
+ scroll-margin-top: 5rem;
451
+ }
452
+
453
+ .slex-section-body {
454
+ display: grid;
455
+ gap: 1rem;
456
+ min-width: 0;
457
+ }
458
+
459
+ .slex-section-action {
460
+ display: inline-flex;
461
+ width: fit-content;
462
+ min-height: 2.25rem;
463
+ align-items: center;
464
+ justify-content: center;
465
+ border: 1px solid var(--input);
466
+ border-radius: calc(var(--radius) - 2px);
467
+ background: var(--background);
468
+ color: var(--foreground);
469
+ padding: 0 0.75rem;
470
+ font-size: 0.875rem;
471
+ font-weight: 600;
472
+ text-decoration: none;
473
+ box-shadow: var(--shadow-sm);
474
+ transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
475
+ }
476
+
477
+ .slex-section-action:hover {
478
+ background: var(--accent);
479
+ color: var(--accent-foreground);
480
+ }
481
+
482
+ .slex-section-action:focus-visible {
483
+ outline: 2px solid var(--ring);
484
+ outline-offset: 2px;
485
+ }
486
+
487
+ .slexkit-secure-error {
488
+ margin-top: 0.75rem;
489
+ white-space: pre-wrap;
490
+ border: 1px solid color-mix(in srgb, var(--destructive, #dc2626) 35%, transparent);
491
+ border-radius: 0.5rem;
492
+ background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent);
493
+ color: var(--destructive, #b91c1c);
494
+ font-size: 0.875rem;
495
+ line-height: 1.5;
496
+ padding: 0.75rem;
474
497
  }