Skip to content

Commit 0d47358

Browse files
thomasyuill-livekitthomasyuill-livekit
committed
refactor to shadcn tokens
1 parent 3848211 commit 0d47358

File tree

10 files changed

+56
-144
lines changed

10 files changed

+56
-144
lines changed

‎components/livekit/agent-control-bar/agent-control-bar.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function AgentControlBar({
107107
<div
108108
aria-label="Voice assistant controls"
109109
className={cn(
110-
'bg-background border-bg2 dark:border-separator1 flex flex-col rounded-[31px] border p-3 drop-shadow-md/3',
110+
'bg-background border-input/50 dark:border-muted flex flex-col rounded-[31px] border p-3 drop-shadow-md/3',
111111
className
112112
)}
113113
{...props}
@@ -123,6 +123,7 @@ export function AgentControlBar({
123123
{visibleControls.microphone && (
124124
<TrackSelector
125125
kind="audioinput"
126+
aria-label="Toggle microphone"
126127
source={Track.Source.Microphone}
127128
pressed={microphoneToggle.enabled}
128129
disabled={microphoneToggle.pending || !visibleControls.microphone}
@@ -137,8 +138,10 @@ export function AgentControlBar({
137138
{visibleControls.camera && (
138139
<TrackSelector
139140
kind="videoinput"
141+
aria-label="Toggle camera"
140142
source={Track.Source.Camera}
141143
pressed={cameraToggle.enabled}
144+
pending={cameraToggle.pending}
142145
disabled={cameraToggle.pending || !visibleControls.camera}
143146
onPressedChange={cameraToggle.toggle}
144147
onMediaDeviceError={handleCameraDeviceSelectError}
@@ -149,23 +152,24 @@ export function AgentControlBar({
149152
{/* Toggle Screen Share */}
150153
{visibleControls.screenShare && (
151154
<TrackToggle
155+
size="icon"
152156
variant="secondary"
157+
aria-label="Toggle screen share"
153158
source={Track.Source.ScreenShare}
154159
pressed={screenShareToggle.enabled}
155160
disabled={screenShareToggle.pending || !visibleControls.screenShare}
156161
onPressedChange={screenShareToggle.toggle}
157-
className="relative w-auto"
158162
/>
159163
)}
160164

161165
{/* Toggle Transcript */}
162166
<Toggle
167+
size="icon"
163168
variant="secondary"
164169
aria-label="Toggle transcript"
165170
pressed={chatOpen}
166171
onPressedChange={handleToggleTranscript}
167172
disabled={!isAgentAvailable || !visibleControls.chat}
168-
className="aspect-square h-full"
169173
>
170174
<ChatTextIcon weight="bold" />
171175
</Toggle>

‎components/livekit/agent-control-bar/chat-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function ChatInput({ chatOpen, disabled = false, onSend = () => {} }: Cha
6060
</Button>
6161
</form>
6262
</div>
63-
<hr className="border-bg2 my-3" />
63+
<hr className="border-input/50 my-3" />
6464
</div>
6565
);
6666
}

‎components/livekit/track-device-select.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,7 @@ type DeviceSelectProps = React.ComponentProps<typeof SelectTrigger> & {
2626
};
2727

2828
const selectVariants = cva(
29-
[
30-
'w-full rounded-full px-3 py-2 text-sm cursor-pointer',
31-
'disabled:not-allowed hover:bg-button-hover focus:bg-button-hover',
32-
],
29+
'w-full rounded-full px-3 py-2 text-sm cursor-pointer disabled:not-allowed',
3330
{
3431
variants: {
3532
size: {

‎components/livekit/track-selector.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface TrackSelectorProps {
1111
kind: MediaDeviceKind;
1212
source: Parameters<typeof useTrackToggle>[0]['source'];
1313
pressed?: boolean;
14+
pending?: boolean;
1415
disabled?: boolean;
1516
className?: string;
1617
audioVisualizerTrackRef?: TrackReferenceOrPlaceholder;
@@ -23,6 +24,7 @@ export function TrackSelector({
2324
kind,
2425
source,
2526
pressed,
27+
pending,
2628
disabled,
2729
className,
2830
audioVisualizerTrackRef,
@@ -33,31 +35,33 @@ export function TrackSelector({
3335
return (
3436
<div className={cn('flex items-center gap-0', className)}>
3537
<TrackToggle
38+
size="icon"
3639
variant="primary"
3740
source={source}
3841
pressed={pressed}
42+
pending={pending}
3943
disabled={disabled}
4044
onPressedChange={onPressedChange}
41-
className="peer/track group/track relative w-auto has-[~_button]:rounded-r-none has-[~_button]:pr-2"
45+
className="peer/track group/track has-[.audiovisualizer]:w-auto has-[.audiovisualizer]:pl-3 has-[~_button]:rounded-r-none has-[~_button]:pr-2"
4246
>
4347
{audioVisualizerTrackRef && (
4448
<BarVisualizer
4549
barCount={3}
4650
options={{ minHeight: 5 }}
4751
trackRef={audioVisualizerTrackRef}
48-
className="flex h-full w-auto items-center justify-center gap-0.5"
52+
className="audiovisualizer flex h-full w-auto items-center justify-center gap-0.5"
4953
>
5054
<span
5155
className={cn([
5256
'h-full w-0.5 origin-center rounded-2xl',
53-
'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
57+
'group-data-[state=on]/track:bg-foreground group-data-[state=off]/track:bg-destructive',
5458
'data-lk-muted:bg-muted',
5559
])}
5660
></span>
5761
</BarVisualizer>
5862
)}
5963
</TrackToggle>
60-
<hr className="bg-separator1 peer-data-[state=off]/track:bg-separatorSerious relative z-10 -mr-px hidden h-4 w-px has-[~_button]:block" />
64+
<hr className="bg-border peer-data-[state=off]/track:bg-destructive/20 relative z-10 -mr-px hidden h-4 w-px border-none has-[~_button]:block" />
6165
<TrackDeviceSelect
6266
size="sm"
6367
kind={kind}
@@ -66,9 +70,10 @@ export function TrackSelector({
6670
onActiveDeviceChange={onActiveDeviceChange}
6771
className={cn([
6872
'rounded-l-none pl-2',
69-
'peer-data-[state=off]/track:text-destructive-foreground',
70-
'hover:text-fg1 focus:text-fg1',
71-
'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
73+
'peer-data-[state=off]/track:text-destructive',
74+
'hover:text-foreground focus:text-foreground',
75+
'hover:peer-data-[state=off]/track:text-foreground',
76+
'focus:peer-data-[state=off]/track:text-destructive',
7277
])}
7378
/>
7479
</div>

‎components/ui/alert.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const alertVariants = cva(
1212
variant: {
1313
default: 'bg-card text-card-foreground',
1414
destructive: [
15-
'text-destructive-foreground bg-destructive border-destructive-border',
16-
'[&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/90',
15+
'text-destructive bg-destructive/10 border-destructive/20',
16+
'[&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
1717
],
1818
},
1919
},

‎components/ui/button.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ const buttonVariants = cva(
1515
{
1616
variants: {
1717
variant: {
18-
default: 'bg-button text-button-foreground hover:bg-muted focus:bg-muted',
18+
default: 'bg-muted text-foreground hover:bg-muted focus:bg-muted hover:bg-foreground/10',
1919
destructive: [
20-
'bg-destructive text-destructive-foreground',
21-
'hover:bg-destructive-hover focus:bg-destructive-hover focus-visible:ring-destructive-foreground/20',
22-
'dark:focus-visible:ring-destructive-foreground/40',
20+
'bg-destructive/10 text-destructive',
21+
'hover:bg-destructive/20 focus:bg-destructive/20 focus-visible:ring-destructive/20',
22+
'dark:focus-visible:ring-destructive/40',
2323
],
2424
outline: [
25-
'border bg-background',
25+
'border border-input bg-background',
2626
'hover:bg-accent hover:text-accent-foreground',
2727
'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
2828
],
29-
primary: 'bg-primary text-primary-foreground hover:bg-primary-hover focus:bg-primary-hover',
30-
secondary: 'bg-secondary text-secondary-foregroun hover:bg-secondary/80',
29+
primary: 'bg-primary text-primary-foreground hover:bg-primary/70 focus:bg-primary/70',
30+
secondary: 'bg-foreground/15 text-secondary-foreground hover:bg-foreground/20',
3131
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
3232
link: 'text-primary underline-offset-4 hover:underline',
3333
},

‎components/ui/select.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ function SelectTrigger({
3333
[
3434
'flex w-fit cursor-pointer items-center justify-between gap-2',
3535
'rounded-full px-3 py-2 text-sm whitespace-nowrap',
36-
'bg-button transition-[color,border,background-color]',
36+
'bg-muted transition-[color,border,background-color]',
3737
'disabled:cursor-not-allowed disabled:opacity-50',
38-
'hover:bg-muted focus:bg-muted hover:text-muted-foreground focus:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
38+
'focus-visible:border-ring focus-visible:ring-ring/50 hover:bg-foreground/10 focus:bg-foreground/10 outline-none focus-visible:ring-[3px]',
3939
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
4040
'data-[placeholder]:text-muted-foreground',
4141
'data-[size=default]:h-9 data-[size=sm]:h-8',

‎components/ui/toggle.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,30 @@ const toggleVariants = cva(
99
[
1010
'inline-flex items-center justify-center gap-2 rounded-full',
1111
'text-sm font-medium whitespace-nowrap',
12-
'cursor-pointer outline-none transition-[color,border,background-color]',
12+
'cursor-pointer outline-none transition-[color,box-shadow,background-color]',
13+
'hover:bg-muted hover:text-muted-foreground',
14+
'disabled:pointer-events-none disabled:opacity-50',
15+
'data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
1316
'focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring',
14-
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
15-
'disabled:pointer-events-none disabled:opacity-50 disabled:not-allowed',
16-
'data-[state=on]:bg-button-selected data-[state=on]:border-button-border-selected',
17+
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ',
1718
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
1819
],
1920
{
2021
variants: {
2122
variant: {
22-
default:
23-
'bg-button hover:bg-muted focus:bg-muted hover:text-muted-foreground focus:text-muted-foreground',
23+
default: 'bg-transparent',
2424
primary:
25-
'text-fg1 bg-button hover:bg-button-hover focus:bg-button-hover data-[state=off]:bg-button-primary hover:data-[state=off]:bg-button-hover data-[state=off]:text-button-primary-foreground',
25+
'bg-muted data-[state=on]:bg-muted hover:text-foreground text-destructive hover:text-foreground hover:bg-foreground/10 hover:data-[state=on]:bg-foreground/10',
2626
secondary:
27-
'text-fg1 bg-button hover:bg-button-hover focus:bg-button-hover data-[state=on]:bg-button-secondary hover:data-[state=on]:bg-button-secondary data-[state=on]:text-button-secondary-foreground',
28-
outline: [
29-
'border border-button-border bg-button text-button-foreground',
30-
'hover:bg-background focus:bg-background',
31-
],
27+
'bg-muted data-[state=on]:bg-muted hover:text-foreground hover:bg-foreground/10 hover:data-[state=on]:bg-foreground/10 data-[state=on]:bg-blue-500/20 data-[state=on]:hover:bg-blue-500/30 data-[state=on]:text-blue-700 dark:data-[state=on]:text-blue-300',
28+
outline:
29+
'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
3230
},
3331
size: {
34-
default: 'h-9 px-2 min-w-9',
35-
sm: 'h-8 px-1.5 min-w-8',
36-
lg: 'h-10 px-2.5 min-w-10',
32+
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
33+
sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
34+
lg: 'h-10 px-6 has-[>svg]:px-4',
35+
icon: 'size-9',
3736
},
3837
},
3938
defaultVariants: {

‎components/welcome.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const Welcome = ({
3333
<section className="bg-background flex flex-col items-center justify-center text-center">
3434
<WelcomeImage />
3535

36-
<p className="text-fg1 max-w-prose pt-1 leading-6 font-medium">
36+
<p className="text-foreground max-w-prose pt-1 leading-6 font-medium">
3737
Chat live with your voice AI agent
3838
</p>
3939

@@ -43,7 +43,7 @@ export const Welcome = ({
4343
</section>
4444

4545
<div className="fixed bottom-5 left-0 flex w-full items-center justify-center">
46-
<p className="text-fg1 max-w-prose pt-1 text-xs leading-5 font-normal text-pretty md:text-sm">
46+
<p className="text-muted-foreground max-w-prose pt-1 text-xs leading-5 font-normal text-pretty md:text-sm">
4747
Need help getting set up? Check out the{' '}
4848
<a
4949
target="_blank"

0 commit comments

Comments
 (0)