@brightweblabs/ui 1.1.0 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -56,6 +56,7 @@
     "./table": "./src/components/table.tsx",
     "./table-pagination": "./src/components/table-pagination.tsx",
     "./theme-provider": "./src/components/theme-provider.tsx",
+    "./theme-controller": "./src/theme/theme-controller.ts",
     "./tooltip": "./src/components/tooltip.tsx"
   },
   "dependencies": {
@@ -75,7 +76,7 @@
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@brightweblabs/theme": "0.4.0"
+    "@brightweblabs/theme": "0.5.1"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",

package/src/components/action.tsx

@@ -4,7 +4,7 @@ import { buttonVariants } from "./button-variants";
 import { cn } from "../lib/utils";
 
 export const actionClassName =
-  buttonVariants({ variant: "brand", size: "sm", className: "gap-1.5 rounded-full px-3.5 text-ui-meta [&_svg]:size-3.5" });
+  buttonVariants({ variant: "brand", size: "sm", className: "gap-1.5 rounded-full px-3.5 text-meta [&_svg]:size-3.5" });
 
 export type ActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 

package/src/components/alert-dialog.tsx

@@ -84,7 +84,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-base font-semibold text-foreground", className)}
+      className={cn("text-body-lg font-semibold text-foreground", className)}
       {...props}
     />
   )
@@ -97,7 +97,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-sm text-foreground/70", className)}
+      className={cn("text-body text-foreground/70", className)}
       {...props}
     />
   )

package/src/components/avatar.tsx

@@ -30,7 +30,7 @@ function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Ava
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-body text-muted-foreground group-data-[size=sm]/avatar:text-meta",
         className,
       )}
       {...props}
@@ -69,7 +69,7 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-body text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className,
       )}
       {...props}

package/src/components/badge.tsx

@@ -21,8 +21,8 @@ const badgeVariants = cva(
         tint: "text-current [background-color:var(--surface-badge-tint)]",
       },
       size: {
-        default: "gap-1 px-2 py-0.5 text-xs font-semibold",
-        sm: "gap-1.5 px-xs py-0.5 text-[length:var(--text-ui-micro)] font-semibold leading-none",
+        default: "gap-1 px-2 py-0.5 text-meta font-semibold",
+        sm: "gap-1.5 px-xs py-0.5 text-micro font-semibold leading-none",
       },
     },
     defaultVariants: {

package/src/components/breadcrumb.tsx

@@ -15,7 +15,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-body break-words sm:gap-2.5",
         className
       )}
       {...props}

package/src/components/button-variants.ts

@@ -1,15 +1,15 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-ui-body !font-semibold transition-[color,background-color,border-color,box-shadow,transform,filter,text-decoration-color] motion-reduce:transition-none outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-current focus-visible:ring-[3px] focus-visible:ring-current aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-body !font-semibold transition-[color,background-color,border-color,box-shadow,transform,filter,text-decoration-color] motion-reduce:transition-none outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-current focus-visible:ring-[3px] focus-visible:ring-current aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         accent:
-          "relative isolate h-auto overflow-hidden !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-body)] leading-[var(--type-leading-160)] text-foreground [padding:var(--space-button-y)_var(--space-button-x)] hover:text-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2",
+          "relative isolate h-auto overflow-hidden !rounded-none px-0 py-0 font-display !font-bold text-body leading-[var(--type-leading-160)] text-foreground [padding:var(--space-button-y)_var(--space-button-x)] hover:text-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2",
         accentLink:
-          "h-auto min-h-0 gap-[var(--space-sm)] !rounded-none px-0 py-0 font-display !font-bold text-[length:var(--text-ui-subhead)] leading-[var(--type-leading-166)] text-[color:var(--foreground-accent-link)] no-underline hover:underline",
+          "h-auto min-h-0 gap-[var(--space-sm)] !rounded-none px-0 py-0 font-display !font-bold text-heading-4 leading-[var(--type-leading-166)] text-[color:var(--foreground-accent-link)] no-underline hover:underline",
         destructive:
           "bg-destructive text-destructive-foreground hover:brightness-[1.05]",
         brand:
@@ -24,7 +24,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-[var(--radius-control)] px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        xs: "h-6 gap-1 rounded-[var(--radius-control)] px-2 text-meta has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-[var(--radius-control)] px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-[var(--radius-control)] px-6 has-[>svg]:px-4",
         icon: "size-9",

package/src/components/calendar.tsx

@@ -71,7 +71,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-semibold justify-center h-(--cell-size) gap-1.5",
+          "w-full flex items-center text-body font-semibold justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -85,14 +85,14 @@ function Calendar({
         caption_label: cn(
           "select-none font-semibold",
           captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            ? "text-body"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-body h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[length:var(--text-ui-calendar)] select-none",
+          "text-muted-foreground rounded-md flex-1 font-normal text-meta text-[length:var(--text-ui-calendar)] select-none",
           defaultClassNames.weekday
         ),
         week: cn("flex w-full mt-2", defaultClassNames.week),
@@ -101,7 +101,7 @@ function Calendar({
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[length:var(--text-ui-calendar)] select-none text-muted-foreground",
+          "text-meta text-[length:var(--text-ui-calendar)] select-none text-muted-foreground",
           defaultClassNames.week_number
         ),
         day: cn(
@@ -209,7 +209,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-meta [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/components/card.tsx

@@ -44,7 +44,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-body", className)} {...props} />;
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/chart.tsx

@@ -79,7 +79,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='var(--border)']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='var(--border)']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='var(--border)']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='var(--card)']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='var(--card)']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='var(--border)']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='var(--border)']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='var(--border)']]:stroke-border flex aspect-video justify-center text-meta [&_.recharts-dot[stroke='var(--card)']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='var(--card)']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -197,7 +197,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[var(--chart-tooltip-min-width)] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-[var(--chart-tooltip-min-width)] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-meta shadow-xl",
         className
       )}
     >

package/src/components/dropdown-menu.tsx

@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent/15 focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-foreground/70 focus:[&_svg:not([class*='text-'])]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent/15 focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-foreground/70 focus:[&_svg:not([class*='text-'])]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent/15 focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent/15 focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-body outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent/15 focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent/15 focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-body outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8",
+        "px-2 py-1.5 text-body font-semibold data-[inset]:pl-8",
         className
       )}
       {...props}
@@ -184,7 +184,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "text-muted-foreground ml-auto text-meta tracking-widest",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent/15 focus:text-foreground data-[state=open]:bg-accent/15 data-[state=open]:text-foreground [&_svg:not([class*='text-'])]:text-foreground/70 focus:[&_svg:not([class*='text-'])]:text-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent/15 focus:text-foreground data-[state=open]:bg-accent/15 data-[state=open]:text-foreground [&_svg:not([class*='text-'])]:text-foreground/70 focus:[&_svg:not([class*='text-'])]:text-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/empty-state.tsx

@@ -17,8 +17,8 @@ export function EmptyState({ icon: Icon, title, hint, action, className, ...prop
         <Icon className="size-5 text-muted-foreground" aria-hidden="true" />
       </div>
       <div>
-        <p className="text-ui-body font-semibold text-foreground">{title}</p>
-        {hint ? <p className="mt-1 text-ui-meta text-muted-foreground">{hint}</p> : null}
+        <p className="text-body font-semibold text-foreground">{title}</p>
+        {hint ? <p className="mt-1 text-meta text-muted-foreground">{hint}</p> : null}
       </div>
       {action ? <div className="mt-1">{action}</div> : null}
     </div>

package/src/components/field.tsx

@@ -32,8 +32,8 @@ function FieldLegend({
       data-variant={variant}
       className={cn(
         "mb-3 font-semibold",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
+        "data-[variant=legend]:text-body-lg",
+        "data-[variant=label]:text-body",
         className
       )}
       {...props}
@@ -130,7 +130,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-semibold group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-body leading-snug font-semibold group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
@@ -143,7 +143,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-muted-foreground text-body leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
@@ -165,7 +165,7 @@ function FieldSeparator({
       data-slot="field-separator"
       data-content={!!children}
       className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        "relative -my-2 h-5 text-body group-data-[variant=outline]/field-group:-mb-2",
         className
       )}
       {...props}
@@ -226,7 +226,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-destructive text-body font-normal", className)}
       {...props}
     >
       {content}

package/src/components/initials-avatar.tsx

@@ -20,7 +20,7 @@ const toneClasses: Record<InitialsAvatarTone, string> = {
 export function InitialsAvatar({ label, fallback, tone = "active", className, ...props }: InitialsAvatarProps) {
   return (
     <Avatar className={cn("shrink-0", toneClasses[tone], className)} {...props}>
-      <AvatarFallback className="bg-transparent text-ui-meta font-bold uppercase text-current">
+      <AvatarFallback className="bg-transparent text-meta font-bold uppercase text-current">
         {getInitials(label, fallback)}
       </AvatarFallback>
     </Avatar>

package/src/components/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-foreground-muted-accessible selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-foreground-muted-accessible selection:bg-primary selection:text-primary-foreground h-11 w-full min-w-0 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-1 text-body-lg text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-input file:text-body file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-body",
         "focus:border-primary focus:ring-primary/40 focus:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,

package/src/components/kpi-breakdown-bar.tsx

@@ -56,7 +56,7 @@ export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBa
         {items.map((item) => {
           const token = toneTokens[item.tone];
           return (
-            <div key={`${item.tone}:${item.label}`} className="flex items-center justify-between gap-2 text-ui-meta">
+            <div key={`${item.tone}:${item.label}`} className="flex items-center justify-between gap-2 text-meta">
               <span className="flex min-w-0 items-center gap-2 text-muted-foreground">
                 <span className="size-1.5 shrink-0 rounded-[var(--radius-swatch)]" style={token ? tokenStyle(token) : undefined} />
                 <span className="truncate">{item.label}</span>

package/src/components/label.tsx

@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "flex items-center gap-2 text-body leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       )}
       {...props}

package/src/components/password-strength.tsx

@@ -79,7 +79,7 @@ export function PasswordStrength({ password, className }: PasswordStrengthProps)
         />
       </div>
 
-      <p className={cn("text-ui-meta !font-semibold transition-colors", config.textColor)}>
+      <p className={cn("text-meta !font-semibold transition-colors", config.textColor)}>
         Força: {config.label}
       </p>
     </div>

package/src/components/phone-input.tsx

@@ -119,13 +119,13 @@ export function PhoneInput({ value, onChange, defaultCountry = "pt", disabled =
             closePicker(true);
           }
         }}
-        className="flex h-7 items-center gap-1 border-0 bg-transparent pr-1.5 text-sm disabled:pointer-events-none disabled:opacity-100"
+        className="flex h-7 items-center gap-1 border-0 bg-transparent pr-1.5 text-body disabled:pointer-events-none disabled:opacity-100"
         aria-controls={countryListId}
         aria-expanded={open}
         aria-haspopup="listbox"
         aria-label="Choose country code"
       >
-        <span className="text-base leading-none">{flagEmoji(country.iso2)}</span>
+        <span className="text-body-lg leading-none">{flagEmoji(country.iso2)}</span>
         <svg className="size-2.5 text-foreground/40" viewBox="0 0 10 6" fill="none" aria-hidden>
           <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
@@ -149,7 +149,7 @@ export function PhoneInput({ value, onChange, defaultCountry = "pt", disabled =
               }}
               onKeyDown={handlePickerKeyDown}
               placeholder="Search…"
-              className="w-full border-0 bg-transparent text-ui-meta text-foreground outline-none placeholder:text-foreground-muted-accessible"
+              className="w-full border-0 bg-transparent text-meta text-foreground outline-none placeholder:text-foreground-muted-accessible"
             />
           </div>
           <div id={countryListId} role="listbox" aria-label="Country calling codes" className="max-h-48 overflow-y-auto rounded-b-[var(--radius-card)] p-1">
@@ -170,18 +170,18 @@ export function PhoneInput({ value, onChange, defaultCountry = "pt", disabled =
                   (country.iso2 === candidate.iso2 || activeIndex === index) && "bg-[color:var(--elevate-3)] text-[color:var(--brand-accent)]",
                 )}
               >
-                <span className="text-sm leading-none">{flagEmoji(candidate.iso2)}</span>
-                <span className="flex-1 truncate text-ui-label normal-case tracking-normal text-foreground">{candidate.name}</span>
-                <span className="shrink-0 text-ui-micro text-foreground-muted-accessible">+{candidate.dialCode}</span>
+                <span className="text-body leading-none">{flagEmoji(candidate.iso2)}</span>
+                <span className="flex-1 truncate text-label normal-case tracking-normal text-foreground">{candidate.name}</span>
+                <span className="shrink-0 text-micro text-foreground-muted-accessible">+{candidate.dialCode}</span>
               </button>
             ))}
-            {filteredCountries.length === 0 ? <p className="px-2 py-2 text-ui-meta text-foreground-muted-accessible">No results</p> : null}
+            {filteredCountries.length === 0 ? <p className="px-2 py-2 text-meta text-foreground-muted-accessible">No results</p> : null}
           </div>
         </div>
       ) : null}
 
       <span className="h-4 w-px shrink-0 bg-foreground/15" />
-      <input {...inputProps} ref={inputRef} value={inputValue} onChange={handlePhoneValueChange} disabled={disabled} placeholder={placeholder} type="tel" className="h-7 flex-1 border-0 bg-transparent pl-2 text-sm text-foreground outline-none placeholder:text-foreground-muted-accessible disabled:pointer-events-none disabled:opacity-100" />
+      <input {...inputProps} ref={inputRef} value={inputValue} onChange={handlePhoneValueChange} disabled={disabled} placeholder={placeholder} type="tel" className="h-7 flex-1 border-0 bg-transparent pl-2 text-body text-foreground outline-none placeholder:text-foreground-muted-accessible disabled:pointer-events-none disabled:opacity-100" />
     </div>
   );
 }

package/src/components/popover.tsx

@@ -49,7 +49,7 @@ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="popover-header"
-      className={cn("flex flex-col gap-1 text-sm", className)}
+      className={cn("flex flex-col gap-1 text-body", className)}
       {...props}
     />
   )

package/src/components/search-field.tsx

@@ -41,7 +41,7 @@ export function SearchField({
         aria-label={ariaLabel ?? placeholder}
         className={cn(
           size === "sm" ? "h-8" : "h-9",
-          "rounded-[var(--radius-card)] border-border bg-card pl-8 text-ui-meta text-foreground",
+          "rounded-[var(--radius-card)] border-border bg-card pl-8 text-meta text-foreground",
           showClear ? "pr-8" : null,
           inputClassName,
         )}

package/src/components/section-heading.tsx

@@ -18,8 +18,8 @@ export function SectionHeading({ icon: Icon, title, subtitle, action, className,
           <Icon className="size-3.5" />
         </span>
         <div className="min-w-0">
-          <h2 className="text-ui-panel-title">{title}</h2>
-          {subtitle ? <p className="mt-1 text-ui-body text-muted-foreground">{subtitle}</p> : null}
+          <h2 className="text-heading-3">{title}</h2>
+          {subtitle ? <p className="mt-1 text-body text-muted-foreground">{subtitle}</p> : null}
         </div>
       </div>
       {action ? <div className="shrink-0">{action}</div> : null}

package/src/components/sheet.tsx

@@ -154,7 +154,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-muted-foreground text-body", className)}
       {...props}
     />
   )

package/src/components/stat-tile.tsx

@@ -9,7 +9,7 @@ export type StatTileProps = HTMLAttributes<HTMLDivElement> & {
 export function StatTile({ label, children, className, ...props }: StatTileProps) {
   return (
     <div className={cn("stat-cell", className)} {...props}>
-      <p className="text-ui-label text-muted-foreground">{label}</p>
+      <p className="text-label text-muted-foreground">{label}</p>
       <div className="mt-3">{children}</div>
     </div>
   );
@@ -20,9 +20,9 @@ export type StatValueProps = HTMLAttributes<HTMLParagraphElement> & {
 };
 
 const statValueSizeClasses: Record<NonNullable<StatValueProps["size"]>, string> = {
-  normal: "text-ui-metric",
-  large: "text-ui-metric-xl",
-  display: "text-ui-metric-display",
+  normal: "text-metric",
+  large: "text-metric-lg",
+  display: "text-metric-display",
 };
 
 export function StatValue({ size = "normal", className, ...props }: StatValueProps) {

package/src/components/status-pill.tsx

@@ -12,8 +12,8 @@ export const STATUS_PILL_BASE_CLASS =
   "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold leading-none";
 
 export const STATUS_PILL_SIZE_CLASSES: Record<StatusPillSize, string> = {
-  small: "h-5 px-2 text-ui-micro",
-  normal: "h-7 px-3 text-ui-meta",
+  small: "h-5 px-2 text-micro",
+  normal: "h-7 px-3 text-meta",
 };
 
 export type StatusPillProps = Omit<ComponentProps<"span">, "children"> & {

package/src/components/table-pagination.tsx

@@ -39,7 +39,7 @@ export function TablePagination({
   return (
     <div className={cn("flex min-w-0 flex-col gap-2 border-t border-[color:var(--border)] px-4 py-2 md:flex-row md:items-center md:justify-between", className)}>
       {summary ? (
-        <p className="min-w-0 truncate portal-meta leading-tight text-[color:var(--muted-foreground)]">
+        <p className="min-w-0 truncate text-meta text-muted-foreground leading-tight text-[color:var(--muted-foreground)]">
           <span className="font-semibold text-[color:var(--foreground)]">{pageLabel(safePage, safeTotalPages)}</span>
           <span className="px-1.5 text-[color:var(--border)]">·</span>
           {summary}
@@ -73,7 +73,7 @@ export function TablePagination({
                   changePage(item);
                 }}
                 className={cn(
-                  "size-8 rounded-full text-[length:var(--text-ui-label)] font-semibold",
+                  "size-8 rounded-full text-label font-semibold",
                   item === safePage
                     ? "border-[color:var(--border-pagination-active)] bg-[color:var(--surface-pagination-active)] text-[color:var(--foreground)]"
                     : "text-[color:var(--muted-foreground)] hover:bg-[color:var(--muted)] hover:text-[color:var(--foreground)]",

package/src/components/table.tsx

@@ -8,7 +8,7 @@ const Table = React.forwardRef<
 >(
   ({ className, containerClassName, ...props }, ref) => (
     <div className={cn("w-full flex-1 overflow-auto", containerClassName)}>
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+      <table ref={ref} className={cn("w-full caption-bottom text-body", className)} {...props} />
     </div>
   ),
 );
@@ -67,7 +67,7 @@ TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
   ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+    <caption ref={ref} className={cn("mt-4 text-body text-muted-foreground", className)} {...props} />
   ),
 );
 TableCaption.displayName = "TableCaption";

package/src/components/theme-provider.tsx

@@ -1,130 +1,127 @@
 "use client";
 
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
 import type { ReactNode } from "react";
-
-type Theme = "light" | "dark" | "system";
-
-type ThemeProviderProps = {
+import {
+  applyResolvedTheme,
+  BW_THEME_MEDIA_QUERY,
+  BW_THEME_STORAGE_KEY,
+  getSystemTheme,
+  persistTheme,
+  readStoredTheme,
+  resolveTheme,
+  subscribeToSystemTheme,
+  THEME_MODES,
+  type ResolvedTheme,
+  type ThemeMode,
+} from "../theme/theme-controller";
+export type { Theme, ThemeMode, ResolvedTheme } from "../theme/theme-controller";
+
+export type ThemeProviderProps = {
   children: ReactNode;
-  defaultTheme?: Theme;
+  defaultTheme?: ThemeMode;
   enableSystem?: boolean;
   disableTransitionOnChange?: boolean;
 };
 
-type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (theme: string) => void;
-  resolvedTheme: "light" | "dark";
-  systemTheme: "light" | "dark";
-  themes: Theme[];
+export type ThemeContextValue = {
+  theme: ThemeMode;
+  setTheme: (theme: ThemeMode) => void;
+  resolvedTheme: ResolvedTheme;
+  systemTheme: ResolvedTheme;
+  themes: readonly ThemeMode[];
+  isThemeProviderMounted: boolean;
 };
 
-const STORAGE_KEY = "theme";
-const THEME_VALUES: Theme[] = ["light", "dark", "system"];
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-function getSystemTheme(): "light" | "dark" {
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
-function readStoredTheme(defaultTheme: Theme): Theme {
-  if (typeof window === "undefined") return defaultTheme;
-  try {
-    const stored = window.localStorage.getItem(STORAGE_KEY);
-    return stored === "light" || stored === "dark" || stored === "system" ? stored : defaultTheme;
-  } catch {
-    return defaultTheme;
-  }
-}
-
-function applyResolvedTheme(resolvedTheme: "light" | "dark", disableTransitionOnChange: boolean) {
-  const root = document.documentElement;
-  let cleanup: (() => void) | null = null;
+const FALLBACK_CONTEXT: ThemeContextValue = {
+  theme: "system",
+  setTheme: () => undefined,
+  resolvedTheme: "light",
+  systemTheme: "light",
+  themes: THEME_MODES,
+  isThemeProviderMounted: false,
+};
 
-  if (disableTransitionOnChange) {
-    const style = document.createElement("style");
-    style.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important;animation-duration:0s!important}"));
-    document.head.appendChild(style);
-    cleanup = () => {
-      window.getComputedStyle(document.body);
-      window.setTimeout(() => style.remove(), 1);
-    };
-  }
+const ThemeContext = createContext<ThemeContextValue | null>(null);
 
-  root.classList.remove("light", "dark");
-  root.classList.add(resolvedTheme);
-  root.dataset.theme = resolvedTheme;
-  root.style.colorScheme = resolvedTheme;
-  cleanup?.();
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style");
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{transition:none!important;animation-duration:0s!important}",
+    ),
+  );
+  document.head.appendChild(style);
+  window.getComputedStyle(document.body);
+  window.setTimeout(() => style.remove(), 1);
 }
 
 export function ThemeProvider({
   children,
-  defaultTheme = "light",
+  defaultTheme = "system",
   enableSystem = true,
   disableTransitionOnChange = false,
 }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(defaultTheme);
-  const [systemTheme, setSystemTheme] = useState<"light" | "dark">("light");
-  const resolvedTheme = theme === "system" && enableSystem ? systemTheme : theme === "dark" ? "dark" : "light";
+  const [theme, setThemeState] = useState<ThemeMode>(defaultTheme);
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>("light");
+  const [isReady, setIsReady] = useState(false);
+  const resolvedTheme = resolveTheme(theme, systemTheme, enableSystem);
 
   useLayoutEffect(() => {
-    applyResolvedTheme(resolvedTheme, disableTransitionOnChange);
-  }, [disableTransitionOnChange, resolvedTheme]);
-
-  useEffect(() => {
-    setThemeState(readStoredTheme(defaultTheme));
-    setSystemTheme(getSystemTheme());
+    const mediaQuery = window.matchMedia(BW_THEME_MEDIA_QUERY);
+    setThemeState(readStoredTheme(window.localStorage, defaultTheme));
+    setSystemTheme(getSystemTheme(mediaQuery));
+    setIsReady(true);
   }, [defaultTheme]);
 
+  useLayoutEffect(() => {
+    if (!isReady) return;
+    if (disableTransitionOnChange) disableTransitionsTemporarily();
+    applyResolvedTheme(document.documentElement, resolvedTheme);
+  }, [disableTransitionOnChange, isReady, resolvedTheme]);
+
   useEffect(() => {
     if (!enableSystem) return;
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => setSystemTheme(media.matches ? "dark" : "light");
-    handleChange();
-    media.addEventListener("change", handleChange);
-    return () => media.removeEventListener("change", handleChange);
+    return subscribeToSystemTheme(window.matchMedia(BW_THEME_MEDIA_QUERY), setSystemTheme);
   }, [enableSystem]);
 
   useEffect(() => {
     const handleStorage = (event: StorageEvent) => {
-      if (event.key === STORAGE_KEY) setThemeState(readStoredTheme(defaultTheme));
+      if (event.key !== BW_THEME_STORAGE_KEY) return;
+      setThemeState(readStoredTheme(window.localStorage, defaultTheme));
     };
     window.addEventListener("storage", handleStorage);
     return () => window.removeEventListener("storage", handleStorage);
   }, [defaultTheme]);
 
-  const setTheme = useCallback((nextTheme: string) => {
-    const normalizedTheme: Theme = nextTheme === "dark" || nextTheme === "light" || nextTheme === "system" ? nextTheme : defaultTheme;
-    setThemeState(normalizedTheme);
-    try {
-      window.localStorage.setItem(STORAGE_KEY, normalizedTheme);
-    } catch {
-      // In-memory theme state remains usable when storage is unavailable.
-    }
-  }, [defaultTheme]);
-
-  const value = useMemo<ThemeContextValue>(() => ({
-    theme,
-    setTheme,
-    resolvedTheme,
-    systemTheme,
-    themes: enableSystem ? THEME_VALUES : ["light", "dark"],
-  }), [enableSystem, resolvedTheme, setTheme, systemTheme, theme]);
+  const setTheme = useCallback((nextTheme: ThemeMode) => {
+    setThemeState(nextTheme);
+    persistTheme(window.localStorage, nextTheme);
+  }, []);
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      setTheme,
+      resolvedTheme,
+      systemTheme,
+      themes: enableSystem ? THEME_MODES : ["light", "dark"],
+      isThemeProviderMounted: true,
+    }),
+    [enableSystem, resolvedTheme, setTheme, systemTheme, theme],
+  );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 }
 
 export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext) ?? {
-    theme: "light",
-    setTheme: () => undefined,
-    resolvedTheme: "light",
-    systemTheme: "light",
-    themes: THEME_VALUES,
-  };
+  return useContext(ThemeContext) ?? FALLBACK_CONTEXT;
 }
-
-export type { Theme, ThemeContextValue, ThemeProviderProps };

package/src/components/tooltip.tsx

@@ -41,7 +41,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-[1300] overflow-hidden rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-[color:var(--surface-tooltip)] px-2.5 py-1.5 text-ui-meta !font-semibold text-popover-foreground shadow-[var(--shadow-tooltip)] backdrop-blur-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          "z-[1300] overflow-hidden rounded-[var(--radius-card)] border border-[color:var(--hairline-strong)] bg-[color:var(--surface-tooltip)] px-2.5 py-1.5 text-meta !font-semibold text-popover-foreground shadow-[var(--shadow-tooltip)] backdrop-blur-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
           className
         )}
         {...props}

package/src/index.ts

@@ -37,8 +37,29 @@ export * from "./components/popover";
 export * from "./components/sheet";
 export * from "./components/table";
 export { Toaster } from "./components/sonner";
-export { ThemeProvider, useTheme } from "./components/theme-provider";
-export type { Theme, ThemeContextValue, ThemeProviderProps } from "./components/theme-provider";
+export {
+  ThemeProvider,
+  useTheme,
+} from "./components/theme-provider";
+export {
+  applyResolvedTheme,
+  BW_THEME_MEDIA_QUERY,
+  BW_THEME_STORAGE_KEY,
+  getSystemTheme,
+  getThemeBootstrapScript,
+  isThemeMode,
+  persistTheme,
+  readStoredTheme,
+  resolveTheme,
+  subscribeToSystemTheme,
+  THEME_MODES,
+} from "./theme/theme-controller";
+export type {
+  Theme,
+  ThemeContextValue,
+  ThemeProviderProps,
+} from "./components/theme-provider";
+export type { ResolvedTheme, ThemeMode } from "./theme/theme-controller";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip";
 export { ActivityMessage } from "./components/activity-message";
 export * from "./components/action";

package/src/theme/theme-controller.ts

@@ -0,0 +1,70 @@
+export const BW_THEME_STORAGE_KEY = "bw-theme";
+export const BW_THEME_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export const THEME_MODES = ["light", "dark", "system"] as const;
+
+export type ThemeMode = (typeof THEME_MODES)[number];
+export type Theme = ThemeMode;
+export type ResolvedTheme = Exclude<ThemeMode, "system">;
+
+type ThemeStorage = Pick<Storage, "getItem" | "setItem">;
+type ThemeMediaQuery = Pick<MediaQueryList, "matches" | "addEventListener" | "removeEventListener">;
+
+export function isThemeMode(value: unknown): value is ThemeMode {
+  return typeof value === "string" && THEME_MODES.includes(value as ThemeMode);
+}
+
+export function resolveTheme(mode: ThemeMode, systemTheme: ResolvedTheme, enableSystem = true): ResolvedTheme {
+  if (mode === "system") return enableSystem ? systemTheme : "light";
+  return mode;
+}
+
+export function readStoredTheme(
+  storage: Pick<ThemeStorage, "getItem"> | null | undefined,
+  defaultTheme: ThemeMode = "system",
+): ThemeMode {
+  if (!storage) return defaultTheme;
+  try {
+    const storedTheme = storage.getItem(BW_THEME_STORAGE_KEY);
+    return isThemeMode(storedTheme) ? storedTheme : defaultTheme;
+  } catch {
+    return defaultTheme;
+  }
+}
+
+export function persistTheme(
+  storage: Pick<ThemeStorage, "setItem"> | null | undefined,
+  theme: ThemeMode,
+) {
+  if (!storage) return;
+  try {
+    storage.setItem(BW_THEME_STORAGE_KEY, theme);
+  } catch {
+    // Theme changes remain usable in memory when storage is unavailable.
+  }
+}
+
+export function getSystemTheme(mediaQuery: Pick<ThemeMediaQuery, "matches">): ResolvedTheme {
+  return mediaQuery.matches ? "dark" : "light";
+}
+
+export function subscribeToSystemTheme(
+  mediaQuery: ThemeMediaQuery,
+  onChange: (theme: ResolvedTheme) => void,
+) {
+  const handleChange = () => onChange(getSystemTheme(mediaQuery));
+  handleChange();
+  mediaQuery.addEventListener("change", handleChange);
+  return () => mediaQuery.removeEventListener("change", handleChange);
+}
+
+export function applyResolvedTheme(root: HTMLElement, theme: ResolvedTheme) {
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+  root.dataset.theme = theme;
+  root.style.colorScheme = theme;
+}
+
+export function getThemeBootstrapScript(defaultTheme: ThemeMode = "system") {
+  const safeDefaultTheme = isThemeMode(defaultTheme) ? defaultTheme : "system";
+  return `!function(){var r=document.documentElement,m="${safeDefaultTheme}";try{var s=localStorage.getItem("${BW_THEME_STORAGE_KEY}");m=s==="light"||s==="dark"||s==="system"?s:m}catch(e){}var t=m==="system"?(matchMedia("${BW_THEME_MEDIA_QUERY}").matches?"dark":"light"):m;r.classList.remove("light","dark");r.classList.add(t);r.setAttribute("data-theme",t);r.style.colorScheme=t}();`;
+}