@slexkit/theme-shadcn 0.3.1 → 0.3.3

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.
Files changed (6) hide show
  1. package/base.css +0 -46
  2. package/components/input.css +85 -13
  3. package/components/slider.css +56 -13
  4. package/components/text-input.css +29 -0
  5. package/package.json +1 -1
  6. package/style.css +85 -59
package/base.css CHANGED
@@ -133,52 +133,6 @@ color-scheme: dark;
133
133
  box-sizing: border-box;
134
134
  }
135
135
 
136
- body[data-mobile-nav-open] {
137
- overflow: hidden;
138
- overscroll-behavior: contain;
139
- }
140
-
141
- #mobileNav {
142
- --mobile-nav-backdrop-opacity: 0;
143
- --mobile-nav-panel-translate: -100%;
144
- pointer-events: none;
145
- }
146
-
147
- #mobileNav[data-open="true"] {
148
- --mobile-nav-backdrop-opacity: 1;
149
- --mobile-nav-panel-translate: 0px;
150
- pointer-events: auto;
151
- }
152
-
153
- #mobileNav [data-mobile-nav-backdrop] {
154
- opacity: var(--mobile-nav-backdrop-opacity);
155
- touch-action: pan-y;
156
- transition: opacity 180ms ease;
157
- }
158
-
159
- #mobileNav [data-mobile-nav-panel] {
160
- transform: translateX(var(--mobile-nav-panel-translate));
161
- touch-action: pan-y;
162
- transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
163
- will-change: transform;
164
- }
165
-
166
- #mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
167
- #mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
168
- transition: none;
169
- }
170
-
171
- @media (prefers-reduced-motion: reduce) {
172
- #mobileNav [data-mobile-nav-backdrop],
173
- #mobileNav [data-mobile-nav-panel] {
174
- transition: none;
175
- }
176
- }
177
-
178
- .slexkit-for-wrapper {
179
- display: contents;
180
- }
181
-
182
136
  .slexkit-source-toolbar {
183
137
  display: flex;
184
138
  align-items: center;
package/components/input.css CHANGED
@@ -161,22 +161,71 @@
161
161
  font-weight: 600;
162
162
  }
163
163
 
164
+ .slex-slider-control {
165
+ position: relative;
166
+ box-sizing: border-box;
167
+ width: 100%;
168
+ height: 1rem;
169
+ }
170
+
171
+ .slex-slider-track {
172
+ position: absolute;
173
+ inset-inline: 0;
174
+ top: 50%;
175
+ height: 0.5rem;
176
+ border-radius: 999px;
177
+ background: linear-gradient(
178
+ to right,
179
+ var(--primary) 0%,
180
+ var(--primary) var(--slex-slider-progress, 0%),
181
+ var(--secondary) var(--slex-slider-progress, 0%),
182
+ var(--secondary) 100%
183
+ );
184
+ pointer-events: none;
185
+ transform: translateY(-50%);
186
+ }
187
+
164
188
  .slex-slider {
189
+ position: relative;
190
+ z-index: 1;
165
191
  box-sizing: border-box;
192
+ display: block;
166
193
  width: 100%;
167
194
  height: 1rem;
195
+ margin: 0;
168
196
  padding: 0;
169
197
  border: 0;
170
198
  border-radius: 999px;
171
199
  -webkit-appearance: none;
172
200
  appearance: none;
173
201
  background: transparent;
202
+ color: transparent;
174
203
  accent-color: var(--primary);
175
204
  cursor: pointer;
176
205
  overflow: visible;
177
206
  transition: box-shadow 150ms ease, filter 150ms ease;
178
207
  }
179
208
 
209
+ .slexkit-root .slex-slider-control input.slex-slider {
210
+ position: relative;
211
+ z-index: 1;
212
+ box-sizing: border-box;
213
+ display: block;
214
+ width: 100%;
215
+ height: 1rem;
216
+ min-height: 0;
217
+ margin: 0;
218
+ padding: 0;
219
+ border: 0;
220
+ border-radius: 999px;
221
+ box-shadow: none;
222
+ background: transparent;
223
+ color: transparent;
224
+ -webkit-appearance: none;
225
+ appearance: none;
226
+ overflow: visible;
227
+ }
228
+
180
229
  .slex-slider:focus-visible {
181
230
  outline: 2px solid var(--ring);
182
231
  outline-offset: 4px;
@@ -186,7 +235,7 @@
186
235
  box-sizing: border-box;
187
236
  width: 1rem;
188
237
  height: 1rem;
189
- margin-top: -0.25rem;
238
+ margin-top: 0;
190
239
  border: 2px solid var(--primary);
191
240
  border-radius: 999px;
192
241
  background-color: var(--background);
@@ -200,16 +249,10 @@
200
249
  .slex-slider::-webkit-slider-runnable-track {
201
250
  box-sizing: border-box;
202
251
  width: 100%;
203
- height: 0.5rem;
252
+ height: 1rem;
204
253
  border: 0;
205
254
  border-radius: 999px;
206
- background: linear-gradient(
207
- to right,
208
- var(--primary) 0%,
209
- var(--primary) var(--slex-slider-progress, 0%),
210
- var(--secondary) var(--slex-slider-progress, 0%),
211
- var(--secondary) 100%
212
- );
255
+ background: transparent;
213
256
  }
214
257
 
215
258
  .slex-slider::-moz-range-thumb {
@@ -245,16 +288,16 @@
245
288
  }
246
289
 
247
290
  .slex-slider::-moz-range-track {
248
- height: 0.5rem;
291
+ height: 1rem;
249
292
  border: 0;
250
293
  border-radius: 999px;
251
- background: var(--secondary);
294
+ background: transparent;
252
295
  }
253
296
 
254
297
  .slex-slider::-moz-range-progress {
255
- height: 0.5rem;
298
+ height: 1rem;
256
299
  border-radius: 999px;
257
- background: var(--primary);
300
+ background: transparent;
258
301
  }
259
302
 
260
303
  .slex-slider-label-text {
@@ -441,11 +484,40 @@
441
484
  transition: border-color 150ms ease, box-shadow 150ms ease;
442
485
  }
443
486
 
487
+ .slexkit-root .slex-input-control input.slex-input {
488
+ box-sizing: border-box;
489
+ display: block;
490
+ flex: 1 1 auto;
491
+ width: 100%;
492
+ min-width: 0;
493
+ min-height: 2.5625rem;
494
+ height: auto;
495
+ margin: 0;
496
+ padding: 0.5rem 0.75rem;
497
+ border: 1px solid var(--input);
498
+ border-radius: var(--radius);
499
+ box-shadow: none;
500
+ background: var(--background);
501
+ background-clip: padding-box;
502
+ color: var(--foreground);
503
+ font-family: inherit;
504
+ font-size: 0.875rem;
505
+ line-height: 1.5;
506
+ outline: none;
507
+ -webkit-appearance: none;
508
+ appearance: none;
509
+ }
510
+
444
511
  .slex-input-control[data-has-unit="true"] .slex-input {
445
512
  border-top-right-radius: 0;
446
513
  border-bottom-right-radius: 0;
447
514
  }
448
515
 
516
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
517
+ border-top-right-radius: 0;
518
+ border-bottom-right-radius: 0;
519
+ }
520
+
449
521
  .slex-input-unit {
450
522
  box-sizing: border-box;
451
523
  display: inline-flex;
package/components/slider.css CHANGED
@@ -30,22 +30,71 @@
30
30
  font-weight: 600;
31
31
  }
32
32
 
33
+ .slex-slider-control {
34
+ position: relative;
35
+ box-sizing: border-box;
36
+ width: 100%;
37
+ height: 1rem;
38
+ }
39
+
40
+ .slex-slider-track {
41
+ position: absolute;
42
+ inset-inline: 0;
43
+ top: 50%;
44
+ height: 0.5rem;
45
+ border-radius: 999px;
46
+ background: linear-gradient(
47
+ to right,
48
+ var(--primary) 0%,
49
+ var(--primary) var(--slex-slider-progress, 0%),
50
+ var(--secondary) var(--slex-slider-progress, 0%),
51
+ var(--secondary) 100%
52
+ );
53
+ pointer-events: none;
54
+ transform: translateY(-50%);
55
+ }
56
+
33
57
  .slex-slider {
58
+ position: relative;
59
+ z-index: 1;
34
60
  box-sizing: border-box;
61
+ display: block;
35
62
  width: 100%;
36
63
  height: 1rem;
64
+ margin: 0;
37
65
  padding: 0;
38
66
  border: 0;
39
67
  border-radius: 999px;
40
68
  -webkit-appearance: none;
41
69
  appearance: none;
42
70
  background: transparent;
71
+ color: transparent;
43
72
  accent-color: var(--primary);
44
73
  cursor: pointer;
45
74
  overflow: visible;
46
75
  transition: box-shadow 150ms ease, filter 150ms ease;
47
76
  }
48
77
 
78
+ .slexkit-root .slex-slider-control input.slex-slider {
79
+ position: relative;
80
+ z-index: 1;
81
+ box-sizing: border-box;
82
+ display: block;
83
+ width: 100%;
84
+ height: 1rem;
85
+ min-height: 0;
86
+ margin: 0;
87
+ padding: 0;
88
+ border: 0;
89
+ border-radius: 999px;
90
+ box-shadow: none;
91
+ background: transparent;
92
+ color: transparent;
93
+ -webkit-appearance: none;
94
+ appearance: none;
95
+ overflow: visible;
96
+ }
97
+
49
98
  .slex-slider:focus-visible {
50
99
  outline: 2px solid var(--ring);
51
100
  outline-offset: 4px;
@@ -55,7 +104,7 @@
55
104
  box-sizing: border-box;
56
105
  width: 1rem;
57
106
  height: 1rem;
58
- margin-top: -0.25rem;
107
+ margin-top: 0;
59
108
  border: 2px solid var(--primary);
60
109
  border-radius: 999px;
61
110
  background-color: var(--background);
@@ -69,16 +118,10 @@
69
118
  .slex-slider::-webkit-slider-runnable-track {
70
119
  box-sizing: border-box;
71
120
  width: 100%;
72
- height: 0.5rem;
121
+ height: 1rem;
73
122
  border: 0;
74
123
  border-radius: 999px;
75
- background: linear-gradient(
76
- to right,
77
- var(--primary) 0%,
78
- var(--primary) var(--slex-slider-progress, 0%),
79
- var(--secondary) var(--slex-slider-progress, 0%),
80
- var(--secondary) 100%
81
- );
124
+ background: transparent;
82
125
  }
83
126
 
84
127
  .slex-slider::-moz-range-thumb {
@@ -114,16 +157,16 @@
114
157
  }
115
158
 
116
159
  .slex-slider::-moz-range-track {
117
- height: 0.5rem;
160
+ height: 1rem;
118
161
  border: 0;
119
162
  border-radius: 999px;
120
- background: var(--secondary);
163
+ background: transparent;
121
164
  }
122
165
 
123
166
  .slex-slider::-moz-range-progress {
124
- height: 0.5rem;
167
+ height: 1rem;
125
168
  border-radius: 999px;
126
- background: var(--primary);
169
+ background: transparent;
127
170
  }
128
171
 
129
172
  .slex-slider-label-text {
package/components/text-input.css CHANGED
@@ -56,11 +56,40 @@
56
56
  transition: border-color 150ms ease, box-shadow 150ms ease;
57
57
  }
58
58
 
59
+ .slexkit-root .slex-input-control input.slex-input {
60
+ box-sizing: border-box;
61
+ display: block;
62
+ flex: 1 1 auto;
63
+ width: 100%;
64
+ min-width: 0;
65
+ min-height: 2.5625rem;
66
+ height: auto;
67
+ margin: 0;
68
+ padding: 0.5rem 0.75rem;
69
+ border: 1px solid var(--input);
70
+ border-radius: var(--radius);
71
+ box-shadow: none;
72
+ background: var(--background);
73
+ background-clip: padding-box;
74
+ color: var(--foreground);
75
+ font-family: inherit;
76
+ font-size: 0.875rem;
77
+ line-height: 1.5;
78
+ outline: none;
79
+ -webkit-appearance: none;
80
+ appearance: none;
81
+ }
82
+
59
83
  .slex-input-control[data-has-unit="true"] .slex-input {
60
84
  border-top-right-radius: 0;
61
85
  border-bottom-right-radius: 0;
62
86
  }
63
87
 
88
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
89
+ border-top-right-radius: 0;
90
+ border-bottom-right-radius: 0;
91
+ }
92
+
64
93
  .slex-input-unit {
65
94
  box-sizing: border-box;
66
95
  display: inline-flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slexkit/theme-shadcn",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Official shadcn-token theme CSS for SlexKit.",
5
5
  "author": "SlexKit contributors",
6
6
  "type": "module",
package/style.css CHANGED
@@ -904,52 +904,6 @@ color-scheme: dark;
904
904
  box-sizing: border-box;
905
905
  }
906
906
 
907
- body[data-mobile-nav-open] {
908
- overflow: hidden;
909
- overscroll-behavior: contain;
910
- }
911
-
912
- #mobileNav {
913
- --mobile-nav-backdrop-opacity: 0;
914
- --mobile-nav-panel-translate: -100%;
915
- pointer-events: none;
916
- }
917
-
918
- #mobileNav[data-open="true"] {
919
- --mobile-nav-backdrop-opacity: 1;
920
- --mobile-nav-panel-translate: 0px;
921
- pointer-events: auto;
922
- }
923
-
924
- #mobileNav [data-mobile-nav-backdrop] {
925
- opacity: var(--mobile-nav-backdrop-opacity);
926
- touch-action: pan-y;
927
- transition: opacity 180ms ease;
928
- }
929
-
930
- #mobileNav [data-mobile-nav-panel] {
931
- transform: translateX(var(--mobile-nav-panel-translate));
932
- touch-action: pan-y;
933
- transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
934
- will-change: transform;
935
- }
936
-
937
- #mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
938
- #mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
939
- transition: none;
940
- }
941
-
942
- @media (prefers-reduced-motion: reduce) {
943
- #mobileNav [data-mobile-nav-backdrop],
944
- #mobileNav [data-mobile-nav-panel] {
945
- transition: none;
946
- }
947
- }
948
-
949
- .slexkit-for-wrapper {
950
- display: contents;
951
- }
952
-
953
907
  .slexkit-source-toolbar {
954
908
  display: flex;
955
909
  align-items: center;
@@ -3206,22 +3160,71 @@ body[data-mobile-nav-open] {
3206
3160
  font-weight: 600;
3207
3161
  }
3208
3162
 
3163
+ .slex-slider-control {
3164
+ position: relative;
3165
+ box-sizing: border-box;
3166
+ width: 100%;
3167
+ height: 1rem;
3168
+ }
3169
+
3170
+ .slex-slider-track {
3171
+ position: absolute;
3172
+ inset-inline: 0;
3173
+ top: 50%;
3174
+ height: 0.5rem;
3175
+ border-radius: 999px;
3176
+ background: linear-gradient(
3177
+ to right,
3178
+ var(--primary) 0%,
3179
+ var(--primary) var(--slex-slider-progress, 0%),
3180
+ var(--secondary) var(--slex-slider-progress, 0%),
3181
+ var(--secondary) 100%
3182
+ );
3183
+ pointer-events: none;
3184
+ transform: translateY(-50%);
3185
+ }
3186
+
3209
3187
  .slex-slider {
3188
+ position: relative;
3189
+ z-index: 1;
3210
3190
  box-sizing: border-box;
3191
+ display: block;
3211
3192
  width: 100%;
3212
3193
  height: 1rem;
3194
+ margin: 0;
3213
3195
  padding: 0;
3214
3196
  border: 0;
3215
3197
  border-radius: 999px;
3216
3198
  -webkit-appearance: none;
3217
3199
  appearance: none;
3218
3200
  background: transparent;
3201
+ color: transparent;
3219
3202
  accent-color: var(--primary);
3220
3203
  cursor: pointer;
3221
3204
  overflow: visible;
3222
3205
  transition: box-shadow 150ms ease, filter 150ms ease;
3223
3206
  }
3224
3207
 
3208
+ .slexkit-root .slex-slider-control input.slex-slider {
3209
+ position: relative;
3210
+ z-index: 1;
3211
+ box-sizing: border-box;
3212
+ display: block;
3213
+ width: 100%;
3214
+ height: 1rem;
3215
+ min-height: 0;
3216
+ margin: 0;
3217
+ padding: 0;
3218
+ border: 0;
3219
+ border-radius: 999px;
3220
+ box-shadow: none;
3221
+ background: transparent;
3222
+ color: transparent;
3223
+ -webkit-appearance: none;
3224
+ appearance: none;
3225
+ overflow: visible;
3226
+ }
3227
+
3225
3228
  .slex-slider:focus-visible {
3226
3229
  outline: 2px solid var(--ring);
3227
3230
  outline-offset: 4px;
@@ -3231,7 +3234,7 @@ body[data-mobile-nav-open] {
3231
3234
  box-sizing: border-box;
3232
3235
  width: 1rem;
3233
3236
  height: 1rem;
3234
- margin-top: -0.25rem;
3237
+ margin-top: 0;
3235
3238
  border: 2px solid var(--primary);
3236
3239
  border-radius: 999px;
3237
3240
  background-color: var(--background);
@@ -3245,16 +3248,10 @@ body[data-mobile-nav-open] {
3245
3248
  .slex-slider::-webkit-slider-runnable-track {
3246
3249
  box-sizing: border-box;
3247
3250
  width: 100%;
3248
- height: 0.5rem;
3251
+ height: 1rem;
3249
3252
  border: 0;
3250
3253
  border-radius: 999px;
3251
- background: linear-gradient(
3252
- to right,
3253
- var(--primary) 0%,
3254
- var(--primary) var(--slex-slider-progress, 0%),
3255
- var(--secondary) var(--slex-slider-progress, 0%),
3256
- var(--secondary) 100%
3257
- );
3254
+ background: transparent;
3258
3255
  }
3259
3256
 
3260
3257
  .slex-slider::-moz-range-thumb {
@@ -3290,16 +3287,16 @@ body[data-mobile-nav-open] {
3290
3287
  }
3291
3288
 
3292
3289
  .slex-slider::-moz-range-track {
3293
- height: 0.5rem;
3290
+ height: 1rem;
3294
3291
  border: 0;
3295
3292
  border-radius: 999px;
3296
- background: var(--secondary);
3293
+ background: transparent;
3297
3294
  }
3298
3295
 
3299
3296
  .slex-slider::-moz-range-progress {
3300
- height: 0.5rem;
3297
+ height: 1rem;
3301
3298
  border-radius: 999px;
3302
- background: var(--primary);
3299
+ background: transparent;
3303
3300
  }
3304
3301
 
3305
3302
  .slex-slider-label-text {
@@ -3486,11 +3483,40 @@ body[data-mobile-nav-open] {
3486
3483
  transition: border-color 150ms ease, box-shadow 150ms ease;
3487
3484
  }
3488
3485
 
3486
+ .slexkit-root .slex-input-control input.slex-input {
3487
+ box-sizing: border-box;
3488
+ display: block;
3489
+ flex: 1 1 auto;
3490
+ width: 100%;
3491
+ min-width: 0;
3492
+ min-height: 2.5625rem;
3493
+ height: auto;
3494
+ margin: 0;
3495
+ padding: 0.5rem 0.75rem;
3496
+ border: 1px solid var(--input);
3497
+ border-radius: var(--radius);
3498
+ box-shadow: none;
3499
+ background: var(--background);
3500
+ background-clip: padding-box;
3501
+ color: var(--foreground);
3502
+ font-family: inherit;
3503
+ font-size: 0.875rem;
3504
+ line-height: 1.5;
3505
+ outline: none;
3506
+ -webkit-appearance: none;
3507
+ appearance: none;
3508
+ }
3509
+
3489
3510
  .slex-input-control[data-has-unit="true"] .slex-input {
3490
3511
  border-top-right-radius: 0;
3491
3512
  border-bottom-right-radius: 0;
3492
3513
  }
3493
3514
 
3515
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
3516
+ border-top-right-radius: 0;
3517
+ border-bottom-right-radius: 0;
3518
+ }
3519
+
3494
3520
  .slex-input-unit {
3495
3521
  box-sizing: border-box;
3496
3522
  display: inline-flex;