Skip to content

Commit fdd3ed1

Browse files
joe-belljoe-bell
authored
refactor(ui): Use current accent color, switch to system font, address font inconsistencies (clerk#3820)
1 parent fb302bb commit fdd3ed1

9 files changed

Lines changed: 46 additions & 26 deletions

File tree

‎.changeset/lemon-chairs-confess.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎.changeset/sharp-ads-sit.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -570,10 +570,13 @@ export function SignInComponentLoaded() {
570570
resend
571571
// eslint-disable-next-line react/no-unstable-nested-components
572572
fallback={({ resendableAfter }) => (
573-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
573+
<LinkButton
574+
type='button'
575+
disabled
576+
>
574577
{t('signIn.emailCode.resendButton')} (
575578
<span className='tabular-nums'>{resendableAfter}</span>)
576-
</p>
579+
</LinkButton>
577580
)}
578581
>
579582
<LinkButton type='button'>{t('signIn.emailCode.resendButton')}</LinkButton>
@@ -655,10 +658,13 @@ export function SignInComponentLoaded() {
655658
resend
656659
// eslint-disable-next-line react/no-unstable-nested-components
657660
fallback={({ resendableAfter }) => (
658-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
661+
<LinkButton
662+
type='button'
663+
disabled
664+
>
659665
{t('signIn.phoneCode.resendButton')} (
660666
<span className='tabular-nums'>{resendableAfter}</span>)
661-
</p>
667+
</LinkButton>
662668
)}
663669
>
664670
<LinkButton type='button'>{t('signIn.phoneCode.resendButton')}</LinkButton>
@@ -737,10 +743,13 @@ export function SignInComponentLoaded() {
737743
resend
738744
// eslint-disable-next-line react/no-unstable-nested-components
739745
fallback={({ resendableAfter }) => (
740-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
746+
<LinkButton
747+
type='button'
748+
disabled
749+
>
741750
{t('signIn.emailLink.resendButton')} (
742751
<span className='tabular-nums'>{resendableAfter}</span>)
743-
</p>
752+
</LinkButton>
744753
)}
745754
>
746755
<LinkButton type='button'>{t('signIn.emailLink.resendButton')}</LinkButton>
@@ -777,10 +786,13 @@ export function SignInComponentLoaded() {
777786
resend
778787
// eslint-disable-next-line react/no-unstable-nested-components
779788
fallback={({ resendableAfter }) => (
780-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
789+
<LinkButton
790+
type='button'
791+
disabled
792+
>
781793
{t('signIn.phoneCode.resendButton')} (
782794
<span className='tabular-nums'>{resendableAfter}</span>)
783-
</p>
795+
</LinkButton>
784796
)}
785797
>
786798
<LinkButton type='button'>{t('signIn.phoneCode.resendButton')}</LinkButton>

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -214,18 +214,19 @@ function SignUpComponentLoaded() {
214214
</Common.GlobalError>
215215
<OTPField
216216
disabled={isGlobalLoading}
217-
// TODO:
218-
// 1. Replace `button` with consolidated styles (tackled later)
219217
resend={
220218
<SignUp.Action
221219
asChild
222220
resend
223221
// eslint-disable-next-line react/no-unstable-nested-components
224222
fallback={({ resendableAfter }) => (
225-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
223+
<LinkButton
224+
type='button'
225+
disabled
226+
>
226227
{t('signUp.phoneCode.resendButton')} (
227228
<span className='tabular-nums'>{resendableAfter}</span>)
228-
</p>
229+
</LinkButton>
229230
)}
230231
>
231232
<LinkButton type='button'>{t('signUp.phoneCode.resendButton')}</LinkButton>
@@ -290,10 +291,13 @@ function SignUpComponentLoaded() {
290291
resend
291292
// eslint-disable-next-line react/no-unstable-nested-components
292293
fallback={({ resendableAfter }) => (
293-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
294+
<LinkButton
295+
type='button'
296+
disabled
297+
>
294298
{t('signUp.emailCode.resendButton')} (
295299
<span className='tabular-nums'>{resendableAfter}</span>)
296-
</p>
300+
</LinkButton>
297301
)}
298302
>
299303
<LinkButton type='button'>{t('signUp.emailCode.resendButton')}</LinkButton>
@@ -360,10 +364,13 @@ function SignUpComponentLoaded() {
360364
// eslint-disable-next-line react/no-unstable-nested-components
361365
fallback={({ resendableAfter }) => {
362366
return (
363-
<p className='text-gray-11 border border-transparent px-2.5 py-1.5 text-center text-base font-medium'>
367+
<LinkButton
368+
type='button'
369+
disabled
370+
>
364371
{t('signUp.emailLink.resendButton')} (
365372
<span className='tabular-nums'>{resendableAfter}</span>)
366-
</p>
373+
</LinkButton>
367374
);
368375
}}
369376
>

‎packages/ui/src/global.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
}
1919

2020
:where(:root) {
21-
--cl-font-family: inherit;
21+
--cl-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
22+
Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
2223
--cl-color-danger: 0 84% 60%;
2324
--cl-color-success: 142 71% 45%;
2425
--cl-color-warning: 25 95% 53%;

‎packages/ui/src/primitives/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const Footer = React.forwardRef(function Footer(
174174
{children}
175175
{branded ? (
176176
<div className='grid place-content-center px-6 py-4'>
177-
<p className='text-gray-a11 inline-flex items-center gap-x-1 text-sm'>
177+
<p className='text-gray-a11 inline-flex items-center gap-x-1 text-sm font-medium'>
178178
Secured by{' '}
179179
<a
180180
aria-label='Clerk logo'

‎packages/ui/src/primitives/separator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
88
ref={forwardedRef}
99
{...props}
1010
className={cx(
11-
'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-3 text-base before:h-px before:flex-1 after:h-px after:flex-1',
11+
'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
1212
className,
1313
)}
1414
>

‎packages/ui/theme-builder/app/layout.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,10 @@ import './globals.css';
22
import '../../dist/styles.css';
33

44
import { ClerkProvider } from '@clerk/nextjs';
5-
import { cx } from 'cva';
65
import type { Metadata } from 'next';
7-
import { Inter } from 'next/font/google';
86

97
import { ThemeBuilder } from './theme-builder';
108

11-
const inter = Inter({ subsets: ['latin'] });
12-
139
export const metadata: Metadata = {
1410
title: 'Create Next App',
1511
description: 'Generated by create next app',
@@ -26,7 +22,7 @@ export default function RootLayout({
2622
lang='en'
2723
className='h-full'
2824
>
29-
<body className={cx(inter.className, 'flex min-h-full flex-col')}>
25+
<body className='flex min-h-full flex-col'>
3026
<ThemeBuilder>{children}</ThemeBuilder>
3127
</body>
3228
</html>

‎packages/ui/theme-builder/app/theme-builder.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { generateColors, getPreviewStyles } from './generate-colors';
88
import { ThemeDialog } from './theme-dialog';
99
import { ToggleGroup } from './toggle-group';
1010

11-
const lightAccentDefault = '#2F3037';
11+
const lightAccentDefault = '#6C47FF';
1212
const lightGrayDefault = '#2f3037';
1313
const lightBackgroundDefault = '#fff';
1414

15-
const darkAccentDefault = '#2F3037';
15+
const darkAccentDefault = '#6C47FF';
1616
const darkGrayDefault = '#2f3037';
1717
const darkBackgroundDefault = '#111';
1818

0 commit comments

Comments
 (0)