Skip to content

Commit 025e304

Browse files
alexcarpenteralexcarpenter
authored
feat(clerk-js,themes,types): Introduce Clerk CSS variables (#6275)
1 parent 43c02ba commit 025e304

File tree

105 files changed

+1153
-476
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+1153
-476
lines changed

‎.changeset/cuddly-heads-battle.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
'@clerk/clerk-js': minor
3+
'@clerk/themes': minor
4+
'@clerk/types': minor
5+
---
6+
7+
Expose Clerk CSS variables as an option for theming Clerk's components. This change introduces CSS custom properties that allow developers to customize Clerk's appearance using standard CSS variables, providing a more flexible theming approach.
8+
9+
10+
```css
11+
:root {
12+
--clerk-color-primary: #6D47FF;
13+
--clerk-color-primary-foreground: #FFFFFF;
14+
}
15+
```
16+
17+
## Deprecated variables
18+
19+
20+
| Deprecated | New |
21+
|--------|--------|
22+
| `colorText` | `colorForeground` |
23+
| `colorTextOnPrimaryBackground` | `colorPrimaryForeground` |
24+
| `colorTextSecondary` | `colorMutedForeground` |
25+
| `spacingUnit` | `spacing` |
26+
| `colorInputText` | `colorInputForeground` |
27+
| `colorInputBackground` | `colorInput` |
28+
29+
Deprecated variables will continue to work but will be removed in the next major version.
30+
31+
## New variables
32+
33+
- `colorRing` - The color of the ring when an interactive element is focused.
34+
- `colorMuted` - The background color for elements of lower importance, eg: a muted background.
35+
- `colorShadow` - The base shadow color used in the components.
36+
- `colorBorder` - The base border color used in the components.
37+
- `colorModalBackdrop` - The background color of the modal backdrop.

‎packages/clerk-js/bundlewatch.config.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"files": [
3-
{ "path": "./dist/clerk.js", "maxSize": "616kB" },
3+
{ "path": "./dist/clerk.js", "maxSize": "616.27KB" },
44
{ "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
5-
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
5+
{ "path": "./dist/clerk.legacy.browser.js", "maxSize": "115.08KB" },
66
{ "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
7-
{ "path": "./dist/ui-common*.js", "maxSize": "111KB" },
8-
{ "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115KB" },
7+
{ "path": "./dist/ui-common*.js", "maxSize": "111.52KB" },
8+
{ "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115.33KB" },
99
{ "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
1010
{ "path": "./dist/coinbase*.js", "maxSize": "38KB" },
1111
{ "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

‎packages/clerk-js/sandbox/app.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -156,16 +156,17 @@ function appearanceVariableOptions() {
156156
'colorPrimary',
157157
'colorNeutral',
158158
'colorBackground',
159-
'colorTextOnPrimaryBackground',
159+
'colorPrimaryForeground',
160+
'colorForeground',
160161
'colorDanger',
161162
'colorSuccess',
162163
'colorWarning',
163-
'colorText',
164-
'colorTextSecondary',
165-
'colorInputText',
166-
'colorInputBackground',
164+
'colorForeground',
165+
'colorMutedForeground',
166+
'colorInputForeground',
167+
'colorInput',
167168
'colorShimmer',
168-
'spacingUnit',
169+
'spacing',
169170
'borderRadius',
170171
] as const;
171172

‎packages/clerk-js/sandbox/template.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -216,11 +216,11 @@
216216
/>
217217
</label>
218218
<label class="flex items-center justify-between border-t border-gray-100 py-2">
219-
<span class="font-mono text-xs">colorTextOnPrimaryBackground</span>
219+
<span class="font-mono text-xs">colorPrimaryForeground</span>
220220
<input
221221
class="border border-gray-200"
222222
type="color"
223-
id="colorTextOnPrimaryBackground"
223+
id="colorPrimaryForeground"
224224
value="#ffffff"
225225
/>
226226
</label>
@@ -252,38 +252,38 @@
252252
/>
253253
</label>
254254
<label class="flex items-center justify-between border-t border-gray-100 py-2">
255-
<span class="font-mono text-xs">colorText</span>
255+
<span class="font-mono text-xs">colorForeground</span>
256256
<input
257257
class="border border-gray-200"
258258
type="color"
259-
id="colorText"
259+
id="colorForeground"
260260
value="#212126"
261261
/>
262262
</label>
263263
<label class="flex items-center justify-between border-t border-gray-100 py-2">
264-
<span class="font-mono text-xs">colorTextSecondary</span>
264+
<span class="font-mono text-xs">colorMutedForeground</span>
265265
<input
266266
class="border border-gray-200"
267267
type="color"
268-
id="colorTextSecondary"
268+
id="colorMutedForeground"
269269
value="#747686"
270270
/>
271271
</label>
272272
<label class="flex items-center justify-between border-t border-gray-100 py-2">
273-
<span class="font-mono text-xs">colorInputText</span>
273+
<span class="font-mono text-xs">colorInputForeground</span>
274274
<input
275275
class="border border-gray-200"
276276
type="color"
277-
id="colorInputText"
277+
id="colorInputForeground"
278278
value="#000000"
279279
/>
280280
</label>
281281
<label class="flex items-center justify-between border-t border-gray-100 py-2">
282-
<span class="font-mono text-xs">colorInputBackground</span>
282+
<span class="font-mono text-xs">colorInput</span>
283283
<input
284284
class="border border-gray-200"
285285
type="color"
286-
id="colorInputBackground"
286+
id="colorInput"
287287
value="#ffffff"
288288
/>
289289
</label>
@@ -297,10 +297,10 @@
297297
/>
298298
</label>
299299
<label class="flex items-center justify-between border-t border-gray-100 py-2">
300-
<span class="font-mono text-xs">spacingUnit</span>
300+
<span class="font-mono text-xs">spacing</span>
301301
<input
302302
type="text"
303-
id="spacingUnit"
303+
id="spacing"
304304
value="1rem"
305305
class="text-sm outline-none [field-sizing:content]"
306306
/>

‎packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const ProviderInitialIcon = (props: ProviderInitialIconProps) => {
2222
width: t.space.$4,
2323
height: t.space.$4,
2424
borderRadius: t.radii.$sm,
25-
color: t.colors.$colorTextOnPrimaryBackground,
25+
color: t.colors.$colorPrimaryForeground,
2626
backgroundColor: t.colors.$primary500,
2727
})}
2828
{...rest}

‎packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const SecretInputWithToggle = ({ apiKeyID }: { apiKeyID: string }) => {
9999
>
100100
<Icon
101101
icon={revealed ? EyeSlash : Eye}
102-
sx={t => ({ color: t.colors.$colorTextSecondary })}
102+
sx={t => ({ color: t.colors.$colorMutedForeground })}
103103
/>
104104
</Button>
105105
</Flex>

‎packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
110110
<SelectOptionList
111111
sx={t => ({
112112
paddingBlock: t.space.$1,
113-
color: t.colors.$colorText,
113+
color: t.colors.$colorForeground,
114114
})}
115115
/>
116116
</Select>
@@ -236,7 +236,7 @@ export const CreateApiKeyForm: React.FC<CreateApiKeyFormProps> = ({ onCreate, is
236236
sx={t => ({
237237
borderTopWidth: t.borderWidths.$normal,
238238
borderTopStyle: t.borderStyles.$solid,
239-
borderTopColor: t.colors.$neutralAlpha100,
239+
borderTopColor: t.colors.$borderAlpha100,
240240
paddingTop: t.space.$4,
241241
paddingBottom: t.space.$4,
242242
})}

‎packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export const CheckoutComplete = () => {
246246
borderRadius: t.radii.$circle,
247247
backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)`,
248248
boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',
249-
color: canHover ? t.colors.$success500 : t.colors.$colorText,
249+
color: canHover ? t.colors.$success500 : t.colors.$colorForeground,
250250
':before': {
251251
content: '""',
252252
position: 'absolute',
@@ -320,7 +320,7 @@ export const CheckoutComplete = () => {
320320
animationDuration: `${transitionDurationValues.slowest}ms`,
321321
animationTimingFunction: transitionTiming.bezier,
322322
animationFillMode: 'forwards',
323-
color: t.colors.$colorText,
323+
color: t.colors.$colorForeground,
324324
'@keyframes slideUp': {
325325
'0%': {
326326
transform: 'translateY(30px)',

‎packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const CheckoutForm = withCardStateProvider(() => {
4343
padding: t.space.$4,
4444
borderBottomWidth: t.borderWidths.$normal,
4545
borderBottomStyle: t.borderStyles.$solid,
46-
borderBottomColor: t.colors.$neutralAlpha100,
46+
borderBottomColor: t.colors.$borderAlpha100,
4747
})}
4848
>
4949
<LineItems.Root>
@@ -230,7 +230,7 @@ export const PayWithTestPaymentSource = () => {
230230
borderRadius: t.radii.$md,
231231
borderWidth: t.borderWidths.$normal,
232232
borderStyle: t.borderStyles.$solid,
233-
borderColor: t.colors.$neutralAlpha100,
233+
borderColor: t.colors.$borderAlpha100,
234234
display: 'flex',
235235
flexDirection: 'column',
236236
rowGap: t.space.$2,
@@ -375,7 +375,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
375375
<SelectOptionList
376376
sx={t => ({
377377
paddingBlock: t.space.$1,
378-
color: t.colors.$colorText,
378+
color: t.colors.$colorForeground,
379379
})}
380380
/>
381381
</Select>

‎packages/clerk-js/src/ui/components/Checkout/parts.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const InvalidPlanScreen = () => {
6464
padding: t.space.$4,
6565
borderBottomWidth: t.borderWidths.$normal,
6666
borderBottomStyle: t.borderStyles.$solid,
67-
borderBottomColor: t.colors.$neutralAlpha100,
67+
borderBottomColor: t.colors.$borderAlpha100,
6868
})}
6969
>
7070
<LineItems.Root>

0 commit comments

Comments
 (0)