Skip to content

Commit c8f61e2

Browse files
alexcarpenteralexcarpenter
authored
chore(clerk-js,themes,types): Variable migration (#6282)
1 parent be27f20 commit c8f61e2

File tree

68 files changed

+388
-228
lines changed

Some content is hidden

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

68 files changed

+388
-228
lines changed

‎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: 1 addition & 1 deletion
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>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export const CheckoutComplete = () => {
245245
borderRadius: t.radii.$circle,
246246
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%)`,
247247
boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',
248-
color: canHover ? t.colors.$success500 : t.colors.$colorText,
248+
color: canHover ? t.colors.$success500 : t.colors.$colorForeground,
249249
':before': {
250250
content: '""',
251251
position: 'absolute',
@@ -319,7 +319,7 @@ export const CheckoutComplete = () => {
319319
animationDuration: `${transitionDurationValues.slowest}ms`,
320320
animationTimingFunction: transitionTiming.bezier,
321321
animationFillMode: 'forwards',
322-
color: t.colors.$colorText,
322+
color: t.colors.$colorForeground,
323323
'@keyframes slideUp': {
324324
'0%': {
325325
transform: 'translateY(30px)',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
383383
<SelectOptionList
384384
sx={t => ({
385385
paddingBlock: t.space.$1,
386-
color: t.colors.$colorText,
386+
color: t.colors.$colorForeground,
387387
})}
388388
/>
389389
</Select>

‎packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
162162
size='md'
163163
icon={Upload}
164164
sx={t => ({
165-
color: t.colors.$colorTextSecondary,
165+
color: t.colors.$colorMutedForeground,
166166
transitionDuration: t.transitionDuration.$controls,
167167
})}
168168
/>

‎packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export function OAuthConsentInternal() {
152152
display: 'inline-block',
153153
width: t.space.$1,
154154
height: t.space.$1,
155-
background: t.colors.$colorTextSecondary,
155+
background: t.colors.$colorMutedForeground,
156156
borderRadius: t.radii.$circle,
157157
transform: 'translateY(-0.1875rem)',
158158
marginRight: t.space.$2,
@@ -369,7 +369,7 @@ function ConnectionSeparator() {
369369
height={2}
370370
aria-hidden
371371
sx={t => ({
372-
color: t.colors.$colorTextSecondary,
372+
color: t.colors.$colorMutedForeground,
373373
})}
374374
>
375375
<path

‎packages/clerk-js/src/ui/components/OrganizationList/shared.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const sharedStyles: ThemableCssProp = t => ({
3333
});
3434

3535
export const sharedMainIdentifierSx: ThemableCssProp = t => ({
36-
color: t.colors.$colorText,
36+
color: t.colors.$colorForeground,
3737
':hover': {
38-
color: t.colors.$colorText,
38+
color: t.colors.$colorForeground,
3939
},
4040
});
4141

0 commit comments

Comments
 (0)