Skip to content

Commit a717ae2

Browse files
thomaskimurathomaskimura
committed
Update toolkit
1 parent 0115664 commit a717ae2

9 files changed

Lines changed: 224 additions & 180 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "keystone",
33
"type": "commonjs",
4-
"version": "1.1.0",
4+
"version": "1.3.0",
55
"scripts": {
66
"dev": "npm-run-all --parallel vite_dev shopify_dev",
77
"pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",

‎src/css/base/forms.css‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
textarea {
2222
@apply min-h-[44px];
2323
}
24-
24+
2525
/* basic inputs */
2626
input[type="text"],
2727
input[type="password"],
@@ -47,7 +47,7 @@
4747
@apply border__input--hover;
4848
}
4949
&:focus-visible {
50-
@apply border__input--focus color__bg-body;
50+
@apply border__input--focus color__bg-body color__text;
5151
}
5252
&:focus-visible::placeholder {
5353
@apply !color__text;
@@ -147,9 +147,24 @@
147147

148148
/* sliders */
149149
input[type="range"]::-webkit-slider-thumb {
150-
pointer-events: all;
151-
width: 24px;
152-
height: 24px;
153-
-webkit-appearance: none;
150+
height: 1.5rem;
151+
width: 1.5rem;
152+
border-radius: 50%;
153+
border: 3px solid var(--color__text-light);
154+
background: var(--color__background-body);
155+
pointer-events: auto;
156+
appearance: none;
157+
cursor: pointer;
158+
}
159+
160+
input[type="range"]::-moz-range-thumb {
161+
height: 1.5rem;
162+
width: 1.5rem;
163+
border-radius: 50%;
164+
border: 3px solid var(--color__text-light);
165+
background: var(--color__background-body);
166+
pointer-events: auto;
167+
-moz-appearance: none;
168+
cursor: pointer;
154169
}
155170
}

‎src/css/base/typography.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* ======= */
44

55
@layer base {
6-
76
/* body */
87
html,
98
body,
@@ -72,12 +71,12 @@
7271
@apply type__body text-[16px];
7372
}
7473
label {
75-
@apply cursor-pointer type__body type--small;
74+
@apply type__body type--small cursor-pointer;
7675
}
7776

7877
/* links */
7978
a {
80-
@apply underline animation-300;
79+
@apply animation-300 underline;
8180

8281
&:hover {
8382
@apply underline md:opacity-75;
@@ -90,13 +89,15 @@
9089

9190
/* spacing */
9291
.rte {
93-
@apply space-y-4;
92+
p:empty {
93+
@apply pt-4;
94+
}
9495
}
9596
ul {
96-
@apply pl-4 list-disc;
97+
@apply list-disc pl-4;
9798
}
9899
ol {
99-
@apply pl-4 list-decimal;
100+
@apply list-decimal pl-4;
100101
}
101102

102103
/* font weight */

‎src/css/components/buttons.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@layer components {
55
/* standard button */
66
.btn {
7-
@apply relative type__nav border__button--radius !color__button-primary border__button animation-500 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center animation-300 !no-underline h-[44px];
7+
@apply type__nav border__button--radius !color__button-primary border__button animation-500 animation-300 relative inline-flex h-[44px] w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center !no-underline;
88
text-transform: var(--type__button-capiliziation) !important;
99

1010
* {
@@ -13,7 +13,7 @@
1313
}
1414

1515
&__content {
16-
@apply flex items-center type__nav;
16+
@apply type__nav flex items-center;
1717
}
1818

1919
/* states */
@@ -27,24 +27,24 @@
2727
}
2828
&--disabled,
2929
&:disabled {
30-
@apply opacity-50 cursor-not-allowed;
30+
@apply cursor-not-allowed opacity-50;
3131
}
3232

3333
/* sizes */
3434
&--small {
35-
@apply h-auto px-4 type--small max-h-[44px];
35+
@apply type--small h-auto max-h-[44px] px-4;
3636
}
3737
&--small > * {
3838
@apply type--small;
3939
}
4040
&--smaller {
41-
@apply h-auto px-4 py-1 type--smaller max-h-[44px];
41+
@apply type--smaller h-auto max-h-[44px] px-4 py-1;
4242
}
4343
&--smaller > * {
4444
@apply type--smaller;
4545
}
4646
&--big {
47-
@apply py-3 type--big px-9;
47+
@apply type--big px-9 py-3;
4848
}
4949
&--big > * {
5050
@apply type--big;
@@ -66,7 +66,7 @@
6666
&--transparent {
6767
@apply !color__button-transparent;
6868
}
69-
&--diff{
69+
&--diff {
7070
background-color: #fff;
7171
border-color: #fff;
7272
color: #000;
@@ -77,37 +77,37 @@
7777

7878
&--outline {
7979
@apply border--button-width;
80-
background-color: transparent;
81-
color: var(--color__text-light);
82-
border-color: var(--color__text-light);
80+
background-color: transparent !important;
81+
color: var(--color__text-light) !important;
82+
border-color: var(--color__text-light) !important;
8383
&:hover {
84-
background-color: transparent;
85-
border-color: var(--color__text-light);
84+
background-color: transparent !important;
85+
border-color: var(--color__text-light) !important;
8686
@apply border--focus--underline;
8787
}
8888
* {
89-
color: var(--color__text-light);
89+
color: var(--color__text-light) !important;
9090
}
9191
}
9292
&--outline-alt {
9393
@apply border--button-width;
94-
background-color: transparent;
95-
color: var(--color__text-dark);
96-
border-color: var(--color__text-dark);
94+
background-color: transparent !important;
95+
color: var(--color__text-dark) !important;
96+
border-color: var(--color__text-dark) !important;
9797
&:hover {
98-
background-color: transparent;
99-
border-color: var(--color__text-dark);
98+
background-color: transparent !important;
99+
border-color: var(--color__text-dark) !important;
100100
@apply border--focus--underline;
101101
}
102102
* {
103-
color: var(--color__text-dark);
103+
color: var(--color__text-dark) !important;
104104
}
105105
}
106106

107107
&--minimal {
108108
background-color: transparent !important;
109109
color: var(--color__text-light) !important;
110-
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
110+
@apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
111111
&:hover {
112112
background-color: transparent !important;
113113
@apply border--focus--underline;
@@ -123,7 +123,7 @@
123123
&--minimal-alt {
124124
background-color: transparent !important;
125125
color: var(--color__text-dark) !important;
126-
@apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
126+
@apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
127127
&:hover {
128128
background-color: transparent !important;
129129
@apply border--focus--underline;
@@ -146,9 +146,9 @@
146146
}
147147
/* - make sure spinner is spinner */
148148
&__spinner {
149-
@apply absolute flex items-center justify-center invisible w-11/12 transform left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit;
149+
@apply invisible absolute left-2/4 top-2/4 flex w-11/12 -translate-x-2/4 -translate-y-2/4 transform items-center justify-center bg-inherit;
150150
svg {
151-
@apply m-0 m-auto animate-spinslow;
151+
@apply animate-spinslow m-auto;
152152
}
153153
}
154154
/* - when loading class used, hide content and show spinner */

‎src/css/utilities/colors.css‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
border-color: var(--color__background-shade-3);
8080
}
8181
}
82-
82+
8383
/* - primary */
8484
.color__bg-primary {
8585
background-color: var(--color__background-primary);
@@ -132,7 +132,9 @@
132132
* {
133133
color: var(--color__text-light);
134134
}
135-
*::placeholder, ::placeholder {
135+
*::placeholder,
136+
::placeholder {
137+
@apply opacity-50;
136138
color: var(--color__text-light);
137139
}
138140
}
@@ -143,7 +145,9 @@
143145
* {
144146
color: var(--color__text-light);
145147
}
146-
*::placeholder, ::placeholder {
148+
*::placeholder,
149+
::placeholder {
150+
@apply opacity-50;
147151
color: var(--color__text-light);
148152
}
149153
}
@@ -154,7 +158,9 @@
154158
* {
155159
color: var(--color__text-dark);
156160
}
157-
*::placeholder, ::placeholder {
161+
*::placeholder,
162+
::placeholder {
163+
@apply opacity-50;
158164
color: var(--color__text-dark);
159165
}
160166
}
@@ -165,18 +171,22 @@
165171
* {
166172
color: var(--color__text-link);
167173
}
168-
*::placeholder, ::placeholder {
174+
*::placeholder,
175+
::placeholder {
176+
@apply opacity-50;
169177
color: var(--color__text-link);
170178
}
171179
}
172-
180+
173181
/* - primary */
174182
.color__primary {
175183
color: var(--color__foreground-primary);
176184
* {
177185
color: var(--color__foreground-primary);
178186
}
179-
*::placeholder, ::placeholder {
187+
*::placeholder,
188+
::placeholder {
189+
@apply opacity-50;
180190
color: var(--color__foreground-primary);
181191
}
182192
}
@@ -187,7 +197,9 @@
187197
* {
188198
color: var(--color__foreground-secondary);
189199
}
190-
*::placeholder, ::placeholder {
200+
*::placeholder,
201+
::placeholder {
202+
@apply opacity-50;
191203
color: var(--color__foreground-secondary);
192204
}
193205
}
@@ -198,7 +210,9 @@
198210
* {
199211
color: var(--color__foreground-tertiary);
200212
}
201-
*::placeholder, ::placeholder {
213+
*::placeholder,
214+
::placeholder {
215+
@apply opacity-50;
202216
color: var(--color__foreground-tertiary);
203217
}
204218
}
@@ -209,7 +223,9 @@
209223
* {
210224
color: var(--color__foregound-neutral);
211225
}
212-
*::placeholder, ::placeholder {
226+
*::placeholder,
227+
::placeholder {
228+
@apply opacity-50;
213229
color: var(--color__foreground-neutral);
214230
}
215231
}
@@ -220,7 +236,9 @@
220236
* {
221237
color: transparent;
222238
}
223-
*::placeholder, ::placeholder {
239+
*::placeholder,
240+
::placeholder {
241+
@apply opacity-50;
224242
color: transparent;
225243
}
226244
}
@@ -231,7 +249,9 @@
231249
* {
232250
color: inherit;
233251
}
234-
*::placeholder, ::placeholder {
252+
*::placeholder,
253+
::placeholder {
254+
@apply opacity-50;
235255
color: inherit;
236256
}
237257
}
@@ -314,7 +334,7 @@
314334
.color__border-dark {
315335
border-color: var(--color__text-light);
316336
}
317-
337+
318338
/* - input */
319339
.color__border-input {
320340
border-color: var(--inputs__border);
@@ -349,7 +369,7 @@
349369
border-color: var(--color__shade-secondary);
350370
}
351371
* {
352-
color: var(--color__foreground-secondary) !important;;
372+
color: var(--color__foreground-secondary) !important;
353373
}
354374
}
355375

@@ -363,7 +383,7 @@
363383
border-color: var(--color__shade-tertiary);
364384
}
365385
* {
366-
color: var(--color__foreground-tertiary) !important;;
386+
color: var(--color__foreground-tertiary) !important;
367387
}
368388
}
369389

@@ -378,7 +398,7 @@
378398
}
379399
* {
380400
color: var(--color__foregound-neutral) !important;
381-
}
401+
}
382402
}
383403

384404
/* - plain */

0 commit comments

Comments
 (0)