From 21273262a3028fab3fad4b1b9f55d1f58080caf1 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 11 Jul 2025 13:22:59 -0400 Subject: [PATCH 1/2] feat(clerk-js,types): Add `colorRing` variable option --- packages/clerk-js/src/ui/customizables/parseVariables.ts | 1 + packages/clerk-js/src/ui/foundations/colors.ts | 1 + packages/clerk-js/src/ui/polishedAppearance.ts | 8 ++++---- packages/clerk-js/src/ui/styledSystem/common.ts | 2 +- packages/types/src/appearance.ts | 5 +++++ 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts index 6fe2163f2d9..d92ea510393 100644 --- a/packages/clerk-js/src/ui/customizables/parseVariables.ts +++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts @@ -55,6 +55,7 @@ export const createColorScales = (theme: Theme) => { : colors.toHslaString(variables.colorInputBackground), colorShimmer: colors.toHslaString(variables.colorShimmer), colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined, + colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined, }); }; diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts index 7c7a4369418..23670d0e655 100644 --- a/packages/clerk-js/src/ui/foundations/colors.ts +++ b/packages/clerk-js/src/ui/foundations/colors.ts @@ -86,6 +86,7 @@ const colors = Object.freeze({ colorForeground, colorMutedForeground, colorMuted: undefined, + colorRing: clerkCssVar('color-ring', neutralAlphaScale.neutralAlpha200), colorInputForeground: clerkCssVar('color-input-foreground', '#131316'), colorPrimaryForeground: clerkCssVar('color-primary-foreground', 'white'), colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'), diff --git a/packages/clerk-js/src/ui/polishedAppearance.ts b/packages/clerk-js/src/ui/polishedAppearance.ts index fca86438754..bf7c9ad6432 100644 --- a/packages/clerk-js/src/ui/polishedAppearance.ts +++ b/packages/clerk-js/src/ui/polishedAppearance.ts @@ -68,7 +68,7 @@ const inputStyles = (theme: InternalTheme) => ({ idle2: theme.colors.$neutralAlpha100, hover1: theme.colors.$neutralAlpha300, hover2: theme.colors.$neutralAlpha150, - focus: theme.colors.$neutralAlpha150, + focus: theme.colors.$colorRing, }), '&[data-feedback="error"]': inputShadowStyles(theme, { idle1: theme.colors.$dangerAlpha400, @@ -121,7 +121,7 @@ export const polishedAppearance: Appearance = { '&:focus': { boxShadow: [ BUTTON_SOLID_SHADOW(theme.colors.$primary500), - theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200), + theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing), ].toString(), }, }, @@ -141,7 +141,7 @@ export const polishedAppearance: Appearance = { '&:focus': { boxShadow: [ BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100), - theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200), + theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing), ].toString(), }, }, @@ -151,7 +151,7 @@ export const polishedAppearance: Appearance = { '&:focus': { boxShadow: [ BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100), - theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200), + theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing), ].toString(), }, }, diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts index c4daabeb3e8..3881662c1e1 100644 --- a/packages/clerk-js/src/ui/styledSystem/common.ts +++ b/packages/clerk-js/src/ui/styledSystem/common.ts @@ -137,7 +137,7 @@ const focusRingStyles = (t: InternalTheme) => { return { '&::-moz-focus-inner': { border: '0' }, WebkitTapHighlightColor: 'transparent', - boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$neutralAlpha200), + boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$colorRing), transitionProperty: t.transitionProperty.$common, transitionTimingFunction: t.transitionTiming.$common, transitionDuration: t.transitionDuration.$focusRing, diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index b3a4e777209..a9a8b7688f0 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -717,6 +717,11 @@ export type Variables = { * @default 'rgba(255, 255, 255, 0.36)' */ colorShimmer?: CssColor; + /** + * The color of the ring when and interactive element is focused. + * @default 'rgba(255, 255, 255, 0.36)' + */ + colorRing?: CssColor; /** * The default font that will be used in all components. * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont}) From eb223b2c4d0ca6cd1ff9503a25220b9619da3e08 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 11 Jul 2025 13:30:23 -0400 Subject: [PATCH 2/2] updates --- .../src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx | 2 +- packages/clerk-js/src/ui/components/Statements/Statement.tsx | 2 +- packages/clerk-js/src/ui/elements/LineItems.tsx | 2 +- packages/types/src/appearance.ts | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx index 9e853d65eb1..23f3c6f2d5f 100644 --- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx +++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx @@ -228,7 +228,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st borderRadius: t.radii.$sm, '&:focus-visible': { outline: '2px solid', - outlineColor: t.colors.$neutralAlpha200, + outlineColor: t.colors.$colorRing, }, })} focusRing={false} diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/clerk-js/src/ui/components/Statements/Statement.tsx index 52a91601b5f..2156bfba8f3 100644 --- a/packages/clerk-js/src/ui/components/Statements/Statement.tsx +++ b/packages/clerk-js/src/ui/components/Statements/Statement.tsx @@ -428,7 +428,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st borderRadius: t.radii.$sm, '&:focus-visible': { outline: '2px solid', - outlineColor: t.colors.$neutralAlpha200, + outlineColor: t.colors.$colorRing, }, })} focusRing={false} diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx index 8c9f3762ef2..1539907dcec 100644 --- a/packages/clerk-js/src/ui/elements/LineItems.tsx +++ b/packages/clerk-js/src/ui/elements/LineItems.tsx @@ -267,7 +267,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st borderRadius: t.radii.$sm, '&:focus-visible': { outline: '2px solid', - outlineColor: t.colors.$neutralAlpha200, + outlineColor: t.colors.$colorRing, }, })} focusRing={false} diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index a9a8b7688f0..60aecfc4867 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -718,8 +718,8 @@ export type Variables = { */ colorShimmer?: CssColor; /** - * The color of the ring when and interactive element is focused. - * @default 'rgba(255, 255, 255, 0.36)' + * The color of the ring when an interactive element is focused. + * @default {@link Variables.colorNeutral} at 15% opacity */ colorRing?: CssColor; /**