Skip to content

Commit 81b1994

Browse files
alexcarpentertmilewski
alexcarpenter
authored and
tmilewski
committed
wip
1 parent 360e50b commit 81b1994

File tree

9 files changed

+18
-56
lines changed

9 files changed

+18
-56
lines changed

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { LockDottedCircle } from '@/ui/icons';
1414
import { Textarea } from '@/ui/primitives';
1515
import type { ThemableCssProp } from '@/ui/styledSystem';
1616
import { common } from '@/ui/styledSystem';
17-
import * as utils from '@/ui/utils';
1817

1918
export function OAuthConsentInternal() {
2019
const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
@@ -121,10 +120,7 @@ export function OAuthConsentInternal() {
121120
<Box
122121
sx={t => ({
123122
padding: t.space.$3,
124-
background: common.mergedColorsBackground(
125-
utils.colors.setAlpha(t.colors.$colorBackground, 1),
126-
t.colors.$neutralAlpha50,
127-
),
123+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
128124
})}
129125
>
130126
<Text
@@ -333,10 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
333329
<Box
334330
sx={t => [
335331
{
336-
background: common.mergedColorsBackground(
337-
utils.colors.setAlpha(t.colors.$colorBackground, 1),
338-
t.colors.$neutralAlpha50,
339-
),
332+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
340333
borderRadius: t.radii.$circle,
341334
borderWidth: t.borderWidths.$normal,
342335
borderStyle: t.borderStyles.$solid,

‎packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
} from '../../customizables';
2424
import { Check, Plus } from '../../icons';
2525
import { common, InternalThemeProvider } from '../../styledSystem';
26-
import { colors, getClosestProfileScrollBox } from '../../utils';
26+
import { getClosestProfileScrollBox } from '../../utils';
2727

2828
interface PricingTableDefaultProps {
2929
plans?: CommercePlanResource[] | null;
@@ -167,10 +167,7 @@ function Card(props: CardProps) {
167167
gap: 0,
168168
gridTemplateRows: 'subgrid',
169169
gridRow: 'span 5',
170-
background: common.mergedColorsBackground(
171-
colors.setAlpha(t.colors.$colorBackground, 1),
172-
t.colors.$neutralAlpha50,
173-
),
170+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
174171
borderWidth: t.borderWidths.$normal,
175172
borderStyle: t.borderStyles.$solid,
176173
borderColor: t.colors.$neutralAlpha100,

‎packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
import { usePrefersReducedMotion } from '../../hooks';
2323
import { Check, InformationCircle } from '../../icons';
2424
import { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';
25-
import { colors } from '../../utils';
2625

2726
interface PricingTableMatrixProps {
2827
plans: CommercePlanResource[] | undefined;
@@ -55,7 +54,7 @@ export function PricingTableMatrix({
5554
});
5655

5756
const highlightBackgroundColor: ThemableCssProp = t => ({
58-
background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),
57+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha25),
5958
});
6059

6160
const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../
55
import { useDevMode } from '../../hooks/useDevMode';
66
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
77
import { common, mqu } from '../../styledSystem';
8-
import { colors } from '../../utils';
98
import { Card } from '.';
109

1110
type CardFooterProps = PropsOfComponent<typeof Flex> & {
@@ -50,10 +49,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
5049
t => ({
5150
marginTop: `-${t.space.$2}`,
5251
paddingTop: t.space.$2,
53-
background: common.mergedColorsBackground(
54-
colors.setAlpha(t.colors.$colorBackground, 1),
55-
t.colors.$neutralAlpha50,
56-
),
52+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
5753
'&:empty': {
5854
padding: 0,
5955
marginTop: 0,

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { usePrefersReducedMotion } from '../hooks';
66
import { ChevronDown } from '../icons';
77
import type { ThemableCssProp } from '../styledSystem';
88
import { common } from '../styledSystem';
9-
import { colors } from '../utils';
109

1110
/* -------------------------------------------------------------------------------------------------
1211
* Disclosure Context
@@ -168,10 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
168167
borderWidth: t.borderWidths.$normal,
169168
borderStyle: t.borderStyles.$solid,
170169
borderColor: t.colors.$neutralAlpha100,
171-
background: common.mergedColorsBackground(
172-
colors.setAlpha(t.colors.$colorBackground, 1),
173-
t.colors.$neutralAlpha50,
174-
),
170+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
175171
})}
176172
>
177173
{children}

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

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
2020
import { Close as CloseIcon } from '../icons';
2121
import type { ThemableCssProp } from '../styledSystem';
2222
import { common } from '../styledSystem';
23-
import { colors } from '../utils';
23+
import { transparentize } from '../utils/colorMix';
2424
import { IconButton } from './IconButton';
2525

2626
type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
@@ -151,7 +151,7 @@ export const FloatingOverlay = React.forwardRef(function FloatingOverlay(
151151
sx={[
152152
t => ({
153153
inset: 0,
154-
backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),
154+
backgroundColor: transparentize(t.colors.$colorBackground, '28%'),
155155
}),
156156
props.sx,
157157
]}
@@ -298,10 +298,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
298298
sx={[
299299
t => ({
300300
display: 'flex',
301-
background: common.mergedColorsBackground(
302-
colors.setAlpha(t.colors.$colorBackground, 1),
303-
t.colors.$neutralAlpha50,
304-
),
301+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
305302
borderBlockEndWidth: t.borderWidths.$normal,
306303
borderBlockEndStyle: t.borderStyles.$solid,
307304
borderBlockEndColor: t.colors.$neutralAlpha100,
@@ -378,10 +375,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
378375
t => ({
379376
display: 'flex',
380377
flexDirection: 'column',
381-
background: common.mergedColorsBackground(
382-
colors.setAlpha(t.colors.$colorBackground, 1),
383-
t.colors.$neutralAlpha50,
384-
),
378+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
385379
borderBlockStartWidth: t.borderWidths.$normal,
386380
borderBlockStartStyle: t.borderStyles.$solid,
387381
borderBlockStartColor: t.colors.$neutralAlpha100,
@@ -496,7 +490,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
496490
sx={t => ({
497491
position: 'absolute',
498492
inset: 0,
499-
backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,
493+
backgroundImage: `linear-gradient(to bottom, ${transparentize(t.colors.$colorBackground, '28%')}, ${t.colors.$colorBackground})`,
500494
})}
501495
/>
502496

@@ -521,10 +515,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
521515
bottom: 0,
522516
left: 0,
523517
right: 0,
524-
background: common.mergedColorsBackground(
525-
colors.setAlpha(t.colors.$colorBackground, 1),
526-
t.colors.$neutralAlpha50,
527-
),
518+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
528519
padding: t.space.$4,
529520
borderStartStartRadius: t.radii.$md,
530521
borderStartEndRadius: t.radii.$md,

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,7 @@ const NavbarContainer = (
146146
width: t.sizes.$57,
147147
position: 'relative',
148148
maxWidth: t.space.$57,
149-
background: common.mergedColorsBackground(
150-
colors.setAlpha(t.colors.$colorBackground, 1),
151-
t.colors.$neutralAlpha50,
152-
),
149+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
153150
padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
154151
marginRight: `-${t.space.$2}`,
155152
color: t.colors.$colorText,
@@ -319,10 +316,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
319316
elementDescriptor={descriptors.navbarMobileMenuRow}
320317
sx={t => ({
321318
display: 'none',
322-
background: common.mergedColorsBackground(
323-
colors.setAlpha(t.colors.$colorBackground, 1),
324-
t.colors.$neutralAlpha50,
325-
),
319+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
326320
padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
327321
marginBottom: `-${t.space.$2}`,
328322
[mqu.md]: {

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
55
import type { ElementDescriptor } from '../customizables/elementDescriptors';
66
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
77
import { animations, common } from '../styledSystem';
8-
import { colors } from '../utils';
98
import { Card } from './Card';
109

1110
const PopoverCardRoot = React.forwardRef<
@@ -81,10 +80,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
8180
justify='between'
8281
sx={[
8382
t => ({
84-
background: common.mergedColorsBackground(
85-
colors.setAlpha(t.colors.$colorBackground, 1),
86-
t.colors.$neutralAlpha50,
87-
),
83+
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
8884
marginTop: `-${t.space.$2}`,
8985
paddingTop: t.space.$2,
9086
'&:empty': {

‎packages/clerk-js/src/ui/primitives/Th.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import type { PrimitiveProps, StyleVariants } from '../styledSystem';
44
import { createVariants } from '../styledSystem';
5-
import { colors } from '../utils';
5+
import { transparentize } from '../utils/colorMix';
66
import type { BoxProps } from './Box';
77
import { Box } from './Box';
88

@@ -11,7 +11,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
1111
textAlign: 'left',
1212
fontSize: theme.fontSizes.$sm,
1313
fontWeight: theme.fontWeights.$normal,
14-
color: colors.setAlpha(theme.colors.$colorText, 0.62),
14+
color: transparentize(theme.colors.$colorText, '62%'),
1515
padding: `${theme.space.$2} ${theme.space.$4}`,
1616
},
1717
variants: {},

0 commit comments

Comments
 (0)