Skip to content

Commit b60c892

Browse files
desiprisgdesiprisg
authored
feat(clerk-js): Rename colorAlphaShade to colorNeutral (clerk#2746)
1 parent 11fbfde commit b60c892

Some content is hidden

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

54 files changed

+127
-133
lines changed

‎.changeset/rare-ladybugs-mate.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const CalloutWithAction = (props: PropsWithChildren<CalloutWithActionProp
2121
return (
2222
<Flex
2323
sx={theme => ({
24-
background: theme.colors.$blackAlpha50,
24+
background: theme.colors.$neutralAlpha50,
2525
padding: `${theme.space.$2x5} ${theme.space.$4}`,
2626
justifyContent: 'space-between',
2727
alignItems: 'flex-start',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const StatusIcon = (props: { status: Exclude<VerificationStatus, 'loading'> }) =
9191
width: theme.sizes.$24,
9292
height: theme.sizes.$24,
9393
borderRadius: theme.radii.$circle,
94-
backgroundColor: theme.colors.$blackAlpha100,
94+
backgroundColor: theme.colors.$neutralAlpha100,
9595
color: statusToColor(theme, status),
9696
animation: `${animations.dropdownSlideInScaleAndFade} 500ms ease`,
9797
})}

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,10 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
157157
width: t.sizes.$16,
158158
height: t.sizes.$16,
159159
borderRadius: t.radii.$md,
160-
border: `${t.borders.$dashed} ${t.colors.$blackAlpha200}`,
161-
backgroundColor: t.colors.$blackAlpha50,
160+
border: `${t.borders.$dashed} ${t.colors.$neutralAlpha200}`,
161+
backgroundColor: t.colors.$neutralAlpha50,
162162
':hover': {
163-
backgroundColor: t.colors.$blackAlpha50,
163+
backgroundColor: t.colors.$neutralAlpha50,
164164
svg: {
165165
transform: 'scale(1.2)',
166166
},

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
146146
</Header.Root>
147147
<Col
148148
elementDescriptor={descriptors.main}
149-
sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
149+
sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}` })}
150150
>
151151
<PreviewListItems>
152152
<Actions role='menu'>
@@ -193,7 +193,7 @@ const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void
193193
onClick={handleCreateOrganizationClicked}
194194
sx={t => ({
195195
borderBottom: 'none',
196-
borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
196+
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
197197
padding: `${t.space.$5} ${t.space.$5}`,
198198
})}
199199
iconSx={t => ({

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const PreviewListItems = (props: PropsWithChildren) => {
2525

2626
const sharedStyles: ThemableCssProp = t => ({
2727
padding: `${t.space.$4} ${t.space.$5}`,
28-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
28+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
2929
});
3030

3131
export const sharedMainIdentifierSx: ThemableCssProp = t => ({

‎packages/clerk-js/src/ui/components/OrganizationProfile/BillingWidget.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ export const BillingWidget = ({
1313

1414
return (
1515
<Flex
16-
sx={theme => ({ background: theme.colors.$blackAlpha50, padding: theme.space.$4, borderRadius: theme.radii.$md })}
16+
sx={theme => ({
17+
background: theme.colors.$neutralAlpha50,
18+
padding: theme.space.$4,
19+
borderRadius: theme.radii.$md,
20+
})}
1721
>
1822
<AlertIcon
1923
variant='warning'

‎packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const RowContainer = (props: PropsOfComponent<typeof Tr>) => {
126126
return (
127127
<Tr
128128
{...props}
129-
sx={t => ({ ':hover': { backgroundColor: t.colors.$blackAlpha50 } })}
129+
sx={t => ({ ':hover': { backgroundColor: t.colors.$neutralAlpha50 } })}
130130
/>
131131
);
132132
};
@@ -171,10 +171,10 @@ export const RoleSelect = (props: {
171171
option={option}
172172
sx={theme => ({
173173
'&:hover': {
174-
backgroundColor: theme.colors.$blackAlpha100,
174+
backgroundColor: theme.colors.$neutralAlpha100,
175175
},
176176
'&[data-focused="true"]': {
177-
backgroundColor: theme.colors.$blackAlpha150,
177+
backgroundColor: theme.colors.$neutralAlpha150,
178178
},
179179
})}
180180
/>

‎packages/clerk-js/src/ui/components/OrganizationProfile/MembershipWidget.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const MembershipWidget = () => {
2525
return (
2626
<Flex
2727
sx={theme => ({
28-
background: theme.colors.$blackAlpha50,
28+
background: theme.colors.$neutralAlpha50,
2929
padding: theme.space.$2,
3030
borderRadius: theme.radii.$md,
3131
gap: theme.space.$4,

‎packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const OrganizationMembersTabInvitations = () => {
3030
width: '100%',
3131
gap: t.space.$8,
3232
paddingBottom: t.space.$4,
33-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
33+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
3434
[mqu.md]: {
3535
flexDirection: 'column',
3636
gap: t.space.$2,

‎packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const OrganizationMembersTabRequests = () => {
3030
width: '100%',
3131
gap: t.space.$8,
3232
paddingBottom: `${t.space.$4}`,
33-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
33+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
3434
[mqu.md]: {
3535
flexDirection: 'column',
3636
gap: t.space.$2,

‎packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
155155
/>
156156
<Actions
157157
role='menu'
158-
sx={t => ({ borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
158+
sx={t => ({ borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}` })}
159159
>
160160
<Flex
161161
justify='between'
@@ -173,7 +173,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
173173
sx={t => ({
174174
width: '100%',
175175
paddingRight: t.space.$5,
176-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
176+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
177177
})}
178178
>
179179
<OrganizationPreview
@@ -207,7 +207,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
207207
user={userWithoutIdentifiers}
208208
sx={t => ({
209209
padding: `${t.space.$4} ${t.space.$5}`,
210-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
210+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
211211
width: '100%',
212212
})}
213213
title={localizationKeys('organizationSwitcher.personalWorkspace')}

‎packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const Preview = (
109109
sx={t => ({
110110
justifyContent: 'space-between',
111111
padding: `${t.space.$4} ${t.space.$5}`,
112-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
112+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
113113
})}
114114
>
115115
<OrganizationPreview

‎packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const _SignInAccountSwitcher = () => {
3333
<Col
3434
elementDescriptor={descriptors.main}
3535
gap={8}
36-
sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}` })}
36+
sx={t => ({ borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}` })}
3737
>
3838
<Actions role='menu'>
3939
{activeSessions.map(s => (
@@ -44,7 +44,7 @@ const _SignInAccountSwitcher = () => {
4444
height: theme.sizes.$16,
4545
justifyContent: 'flex-start',
4646
borderRadius: 0,
47-
borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}`,
47+
borderBottom: `${theme.borders.$normal} ${theme.colors.$neutralAlpha100}`,
4848
})}
4949
icon={SwitchArrowRight}
5050
>

‎packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
3030
label={localizationKeys('userButton.action__manageAccount')}
3131
onClick={handleManageAccountClicked}
3232
sx={t => ({
33-
borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
33+
borderTop: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
3434
padding: `${t.space.$4} ${t.space.$5}`,
3535
})}
3636
/>
@@ -82,7 +82,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
8282
elementDescriptor={descriptors.userButtonPopoverActions}
8383
elementId={descriptors.userButtonPopoverActions.setId('multiSession')}
8484
sx={t => ({
85-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
85+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
8686
})}
8787
>
8888
<Flex
@@ -161,7 +161,7 @@ export const SignOutAllActions = (props: SignOutAllActionsProps) => {
161161
role='menu'
162162
sx={t => ({
163163
padding: t.space.$2,
164-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha200}`,
164+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha200}`,
165165
})}
166166
>
167167
<Action

‎packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const DeviceItem = ({ session }: { session: SessionWithActivitiesResource }) =>
5757
alignItems: 'flex-start',
5858
padding: `${t.space.$2} ${t.space.$4}`,
5959
borderRadius: t.radii.$md,
60-
':hover': { backgroundColor: t.colors.$blackAlpha50 },
60+
':hover': { backgroundColor: t.colors.$neutralAlpha50 },
6161
})}
6262
>
6363
{status.isLoading && <FullHeightLoader />}

‎packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const MfaBackupCodeAccordion = () => {
1313
icon={
1414
<Icon
1515
icon={DotCircle}
16-
sx={theme => ({ color: theme.colors.$blackAlpha700 })}
16+
sx={theme => ({ color: theme.colors.$neutralAlpha700 })}
1717
/>
1818
}
1919
title={t(localizationKeys('userProfile.start.mfaSection.backupCodes.headerTitle'))}

‎packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
5757
</Col>
5858
<Box
5959
sx={t => ({
60-
border: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
60+
border: `${t.borders.$normal} ${t.colors.$neutralAlpha100}`,
6161
borderRadius: t.radii.$lg,
6262
})}
6363
>
@@ -78,13 +78,13 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
7878

7979
<Grid
8080
sx={t => ({
81-
borderTop: `1px solid ${t.colors.$blackAlpha100}`,
81+
borderTop: `1px solid ${t.colors.$neutralAlpha100}`,
8282
gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
8383
'>:not([hidden])~:not([hidden])': {
8484
borderRightWidth: '0px',
8585
borderLeftWidth: '1px',
8686
borderStyle: 'solid',
87-
borderColor: t.colors.$blackAlpha100,
87+
borderColor: t.colors.$neutralAlpha100,
8888
},
8989
'>:first-child': {
9090
borderBottomLeftRadius: t.radii.$lg,

‎packages/clerk-js/src/ui/components/UserProfile/MfaSection.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const MfaSection = () => {
4949
<Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
5050
<Icon
5151
icon={AuthApp}
52-
sx={theme => ({ color: theme.colors.$blackAlpha700 })}
52+
sx={theme => ({ color: theme.colors.$neutralAlpha700 })}
5353
/>
5454

5555
<Text localizationKey={localizationKeys('userProfile.start.mfaSection.totp.headerTitle')} />
@@ -77,7 +77,7 @@ export const MfaSection = () => {
7777
<Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
7878
<Icon
7979
icon={Mobile}
80-
sx={theme => ({ color: theme.colors.$blackAlpha700 })}
80+
sx={theme => ({ color: theme.colors.$neutralAlpha700 })}
8181
/>
8282
<Text>
8383
SMS Code <FormattedPhoneNumberText value={phone.phoneNumber} />
@@ -106,7 +106,7 @@ export const MfaSection = () => {
106106
<Flex sx={t => ({ gap: t.space.$2, alignItems: 'center' })}>
107107
<Icon
108108
icon={DotCircle}
109-
sx={theme => ({ color: theme.colors.$blackAlpha700 })}
109+
sx={theme => ({ color: theme.colors.$neutralAlpha700 })}
110110
/>
111111

112112
<Text localizationKey={localizationKeys('userProfile.start.mfaSection.backupCodes.headerTitle')} />

‎packages/clerk-js/src/ui/customizables/parseVariables.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const createColorScales = (theme: Theme) => {
2727
...colorOptionToHslaAlphaScale(variables.colorSuccess, 'successAlpha'),
2828
...colorOptionToHslaLightnessScale(variables.colorWarning, 'warning'),
2929
...colorOptionToHslaAlphaScale(variables.colorWarning, 'warningAlpha'),
30-
...colorOptionToHslaAlphaScale(variables.colorAlphaShade, 'blackAlpha'),
30+
...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
3131
colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
3232
colorText: toHSLA(variables.colorText),
3333
colorTextSecondary,

‎packages/clerk-js/src/ui/elements/Accordion.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
7373
})}
7474
badge={badge}
7575
sx={t => ({
76-
backgroundColor: isOpen ? t.colors.$blackAlpha50 : undefined,
76+
backgroundColor: isOpen ? t.colors.$neutralAlpha50 : undefined,
7777
padding: `${t.space.$3} ${t.space.$4}`,
7878
minHeight: t.sizes.$10,
7979
justifyContent: 'start',

‎packages/clerk-js/src/ui/elements/Action/ActionCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const styles = (t: InternalTheme) => ({
1212
backgroundColor: t.colors.$colorBackground,
1313
},
1414
destructive: {
15-
backgroundColor: t.colors.$blackAlpha50,
15+
backgroundColor: t.colors.$neutralAlpha50,
1616
},
1717
});
1818

@@ -28,7 +28,7 @@ export const ActionCard = (props: ActionCardProps) => {
2828
borderRadius: t.radii.$lg,
2929
padding: `${t.space.$4} ${t.space.$5}`,
3030
border: t.borders.$normal,
31-
borderColor: t.colors.$blackAlpha150,
31+
borderColor: t.colors.$neutralAlpha150,
3232
...styles(t)[variant],
3333
}),
3434
sx,

‎packages/clerk-js/src/ui/elements/Actions.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const Actions = (props: PropsOfComponent<typeof Flex>) => {
1414
sx={[
1515
t => ({
1616
'> button:not(:last-of-type)': {
17-
borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100} `,
17+
borderBottom: `${t.borders.$normal} ${t.colors.$neutralAlpha100} `,
1818
},
1919
}),
2020
sx,

‎packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
6060
gap: theme.space.$1,
6161
position: 'relative',
6262
justifyContent: 'center',
63-
borderColor: theme.colors.$blackAlpha100,
63+
borderColor: theme.colors.$neutralAlpha100,
6464
alignItems: 'center',
6565
'--arrow-opacity': '0',
6666
'--arrow-transform': `translateX(-${theme.space.$2});`,

‎packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const BlockWithTrailingComponent = (props: BlockWithTrailingComponentProp
3737
gap: theme.space.$4,
3838
position: 'relative',
3939
justifyContent: 'flex-start',
40-
borderColor: theme.colors.$blackAlpha200,
40+
borderColor: theme.colors.$neutralAlpha200,
4141
},
4242
props.sx,
4343
]}

‎packages/clerk-js/src/ui/elements/Card/CardFooter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
2424
'>:not(:first-of-type)': {
2525
padding: `${t.space.$4} ${t.space.$8}`,
2626
borderTop: t.borders.$normal,
27-
borderColor: t.colors.$blackAlpha100,
27+
borderColor: t.colors.$neutralAlpha100,
2828
},
2929
});
3030

@@ -44,7 +44,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
4444
paddingTop: t.space.$2,
4545
background: common.mergedColorsBackground(
4646
colors.setAlpha(t.colors.$colorBackground, 1),
47-
t.colors.$blackAlpha50,
47+
t.colors.$neutralAlpha50,
4848
),
4949
}),
5050
isProfileFooter ? profileCardFooterStyles : footerStyles,

‎packages/clerk-js/src/ui/elements/Divider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DividerLine = () => {
3434
sx={t => ({
3535
flex: '1',
3636
height: '1px',
37-
backgroundColor: t.colors.$blackAlpha100,
37+
backgroundColor: t.colors.$neutralAlpha100,
3838
})}
3939
/>
4040
);

‎packages/clerk-js/src/ui/elements/FieldControl.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const FieldLabelIcon = (props: { icon?: React.ComponentType }) => {
103103
icon={props.icon}
104104
sx={theme => ({
105105
marginLeft: theme.space.$0x5,
106-
color: theme.colors.$blackAlpha400,
106+
color: theme.colors.$neutralAlpha400,
107107
width: theme.sizes.$4,
108108
height: theme.sizes.$4,
109109
})}

‎packages/clerk-js/src/ui/elements/Form.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const RadioGroup = (
228228
<Flex
229229
key={value}
230230
sx={t => ({
231-
border: `1px solid ${t.colors.$blackAlpha100}`,
231+
border: `1px solid ${t.colors.$neutralAlpha100}`,
232232
borderRadius: t.radii.$md,
233233
padding: t.space.$2,
234234
})}

0 commit comments

Comments
 (0)