Skip to content

Commit fedf717

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

File tree

8 files changed

+28
-24
lines changed

8 files changed

+28
-24
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
1313
import { LockDottedCircle } from '@/ui/icons';
1414
import { Textarea } from '@/ui/primitives';
1515
import type { ThemableCssProp } from '@/ui/styledSystem';
16-
import { common } from '@/ui/styledSystem';
16+
import { colorMix } from '@/ui/utils/colorMix';
1717

1818
export function OAuthConsentInternal() {
1919
const { scopes, oAuthApplicationName, oAuthApplicationLogoUrl, redirectUrl, onDeny, onAllow } =
@@ -120,7 +120,7 @@ export function OAuthConsentInternal() {
120120
<Box
121121
sx={t => ({
122122
padding: t.space.$3,
123-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
123+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
124124
})}
125125
>
126126
<Text
@@ -329,7 +329,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
329329
<Box
330330
sx={t => [
331331
{
332-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
332+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
333333
borderRadius: t.radii.$circle,
334334
borderWidth: t.borderWidths.$normal,
335335
borderStyle: t.borderStyles.$solid,

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as React from 'react';
44

55
import { Switch } from '@/ui/elements/Switch';
66
import { Tooltip } from '@/ui/elements/Tooltip';
7+
import { colorMix } from '@/ui/utils/colorMix';
78

89
import { useProtect } from '../../common';
910
import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts';
@@ -22,7 +23,7 @@ import {
2223
Text,
2324
} from '../../customizables';
2425
import { Check, Plus } from '../../icons';
25-
import { common, InternalThemeProvider } from '../../styledSystem';
26+
import { InternalThemeProvider } from '../../styledSystem';
2627
import { getClosestProfileScrollBox } from '../../utils';
2728

2829
interface PricingTableDefaultProps {
@@ -167,7 +168,7 @@ function Card(props: CardProps) {
167168
gap: 0,
168169
gridTemplateRows: 'subgrid',
169170
gridRow: 'span 5',
170-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
171+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
171172
borderWidth: t.borderWidths.$normal,
172173
borderStyle: t.borderStyles.$solid,
173174
borderColor: t.colors.$neutralAlpha100,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
22

3+
import { colorMix } from '@/ui/utils/colorMix';
4+
35
import { useEnvironment } from '../../contexts';
46
import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
57
import { useDevMode } from '../../hooks/useDevMode';
68
import type { InternalTheme, PropsOfComponent } from '../../styledSystem';
7-
import { common, mqu } from '../../styledSystem';
9+
import { mqu } from '../../styledSystem';
810
import { Card } from '.';
911

1012
type CardFooterProps = PropsOfComponent<typeof Flex> & {
@@ -49,7 +51,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
4951
t => ({
5052
marginTop: `-${t.space.$2}`,
5153
paddingTop: t.space.$2,
52-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
54+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
5355
'&:empty': {
5456
padding: 0,
5557
marginTop: 0,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../cu
55
import { usePrefersReducedMotion } from '../hooks';
66
import { ChevronDown } from '../icons';
77
import type { ThemableCssProp } from '../styledSystem';
8-
import { common } from '../styledSystem';
8+
import { colorMix } from '../utils/colorMix';
99

1010
/* -------------------------------------------------------------------------------------------------
1111
* Disclosure Context
@@ -167,7 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
167167
borderWidth: t.borderWidths.$normal,
168168
borderStyle: t.borderStyles.$solid,
169169
borderColor: t.colors.$neutralAlpha100,
170-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
170+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
171171
})}
172172
>
173173
{children}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../c
1919
import { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';
2020
import { Close as CloseIcon } from '../icons';
2121
import type { ThemableCssProp } from '../styledSystem';
22-
import { common } from '../styledSystem';
23-
import { transparentize } from '../utils/colorMix';
22+
import { colorMix, transparentize } from '../utils/colorMix';
2423
import { IconButton } from './IconButton';
2524

2625
type FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;
@@ -298,7 +297,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
298297
sx={[
299298
t => ({
300299
display: 'flex',
301-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
300+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
302301
borderBlockEndWidth: t.borderWidths.$normal,
303302
borderBlockEndStyle: t.borderStyles.$solid,
304303
borderBlockEndColor: t.colors.$neutralAlpha100,
@@ -375,7 +374,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
375374
t => ({
376375
display: 'flex',
377376
flexDirection: 'column',
378-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
377+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
379378
borderBlockStartWidth: t.borderWidths.$normal,
380379
borderBlockStartStyle: t.borderStyles.$solid,
381380
borderBlockStartColor: t.colors.$neutralAlpha100,
@@ -515,7 +514,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
515514
bottom: 0,
516515
left: 0,
517516
right: 0,
518-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
517+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
519518
padding: t.space.$4,
520519
borderStartStartRadius: t.radii.$md,
521520
borderStartEndRadius: t.radii.$md,

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ import { useNavigateToFlowStart, usePopover } from '../hooks';
88
import { Menu } from '../icons';
99
import { useRouter } from '../router';
1010
import type { PropsOfComponent } from '../styledSystem';
11-
import { animations, common, mqu } from '../styledSystem';
11+
import { animations, mqu } from '../styledSystem';
1212
import { colors } from '../utils';
13+
import { colorMix } from '../utils/colorMix';
1314
import { Card } from './Card';
1415
import { withFloatingTree } from './contexts';
1516
import { DevModeOverlay } from './DevModeNotice';
@@ -146,7 +147,7 @@ const NavbarContainer = (
146147
width: t.sizes.$57,
147148
position: 'relative',
148149
maxWidth: t.space.$57,
149-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
150+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
150151
padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
151152
marginRight: `-${t.space.$2}`,
152153
color: t.colors.$colorText,
@@ -316,7 +317,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
316317
elementDescriptor={descriptors.navbarMobileMenuRow}
317318
sx={t => ({
318319
display: 'none',
319-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
320+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
320321
padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
321322
marginBottom: `-${t.space.$2}`,
322323
[mqu.md]: {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { useEnvironment } from '../contexts';
44
import { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';
55
import type { ElementDescriptor } from '../customizables/elementDescriptors';
66
import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
7-
import { animations, common } from '../styledSystem';
7+
import { animations } from '../styledSystem';
8+
import { colorMix } from '../utils/colorMix';
89
import { Card } from './Card';
910

1011
const PopoverCardRoot = React.forwardRef<
@@ -80,7 +81,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
8081
justify='between'
8182
sx={[
8283
t => ({
83-
background: common.mergedColorsBackground(t.colors.$colorBackground, t.colors.$neutralAlpha50),
84+
backgroundColor: colorMix(t.colors.$colorBackground, t.colors.$neutralAlpha50),
8485
marginTop: `-${t.space.$2}`,
8586
paddingTop: t.space.$2,
8687
'&:empty': {

‎packages/clerk-js/src/ui/utils/colorMix.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ type Percentage = `${number}%`;
1111
* @param colorTint - The color to mix the color with
1212
* @returns The mixed color
1313
*/
14-
export function colorMix(color: string, percentage: Percentage, colorTint: string) {
15-
return `color-mix(in oklch, ${color} ${percentage}, ${colorTint})`;
14+
export function colorMix(colorOne: string, colorTwo: string) {
15+
return `color-mix(in oklch, ${colorOne}, ${colorTwo})`;
1616
}
1717

1818
/**
@@ -22,7 +22,7 @@ export function colorMix(color: string, percentage: Percentage, colorTint: strin
2222
* @returns The transparentized color
2323
*/
2424
export function transparentize(color: string, percentage: Percentage) {
25-
return colorMix(color, percentage, 'transparent');
25+
return colorMix(`${color} ${percentage}`, 'transparent');
2626
}
2727

2828
/**
@@ -32,7 +32,7 @@ export function transparentize(color: string, percentage: Percentage) {
3232
* @returns The lightened color
3333
*/
3434
export function lighten(color: string, percentage: Percentage) {
35-
return colorMix(color, percentage, 'white');
35+
return colorMix(`${color} ${percentage}`, 'white');
3636
}
3737

3838
/**
@@ -42,7 +42,7 @@ export function lighten(color: string, percentage: Percentage) {
4242
* @returns The darkened color
4343
*/
4444
export function darken(color: string, percentage: Percentage) {
45-
return colorMix(color, percentage, 'black');
45+
return colorMix(`${color} ${percentage}`, 'black');
4646
}
4747

4848
/**

0 commit comments

Comments
 (0)