@snksergio/design-system 0.1.0 → 0.4.0

package/README.md

@@ -80,9 +80,25 @@ tokens/brands/default/
 
 ---
 
+## Quick start (CLI)
+
+Para criar um projeto novo do zero já consumindo o DS, com tudo configurado (Vite + React 19 + Tailwind v4 + tema light/dark + exemplo funcional):
+
+```bash
+npm create @snksergio/design-system my-app
+cd my-app
+npm run dev
+```
+
+O CLI pergunta o nome do projeto, package manager, se quer instalar deps e iniciar git. Em ~30 segundos você tem um app rodando em `http://localhost:3200` com 4 componentes do DS demonstrados. Sem precisar configurar nada manualmente, sem gotcha do `@source` do Tailwind v4.
+
+Ver detalhes: [`cli/README.md`](cli/README.md).
+
+---
+
 ## Install in external apps
 
-O DS é publicado como pacote NPM público (`@snksergio/design-system`). Apps externos consomem via:
+Se você prefere adicionar o DS num projeto JÁ existente (ao invés de usar o CLI), é publicado como pacote NPM público (`@snksergio/design-system`):
 
 ```bash
 npm install @snksergio/design-system
@@ -92,6 +108,23 @@ npm install @snksergio/design-system
 - React 19+ (peer dep)
 - Tailwind CSS v4 instalado e configurado
 - Importar `@snksergio/design-system/theme.css` uma vez no entry CSS
+- **Adicionar `@source` apontando pro `dist-lib/` do package** (ver abaixo) — sem isso, as classes utility usadas DENTRO dos componentes não são geradas pelo Tailwind v4
+
+**Configuração mínima do CSS de entrada (`index.css` ou `globals.css`):**
+
+```css
+@import "tailwindcss";
+
+/* Necessário: Tailwind v4 ignora node_modules por default.
+   Isso instrui ele a escanear os bundles do DS pra gerar
+   classes utility usadas DENTRO dos componentes
+   (gap-gp-md, rounded-radius-base, min-h-form-lg, etc.) */
+@source "../node_modules/@snksergio/design-system/dist-lib/**/*.{mjs,cjs,js}";
+
+@import "@snksergio/design-system/theme.css";
+```
+
+⚠️ **Esse `@source` é obrigatório.** Sem ele, os componentes ficam sem estilo (cores aparecem via CSS vars, mas spacing/radius/shadow/sizing somem porque as classes utility ficam órfãs).
 
 **Uso:**
 

package/dist-lib/chunks/{app-shell-BNTvOETJ.mjs → app-shell-BdVam01i.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const chipGroup = require("./chip-group-CsKBBHW2.mjs");
+const chipGroup = require("./chip-group-2-f_Yo7Y.cjs");
 const lucideReact = require("lucide-react");
 const cmdk = require("cmdk");
 const SheetPrimitive = require("@radix-ui/react-dialog");
@@ -80,10 +80,10 @@ const breadcrumbItem = chipGroup.tv({
       true: "text-fg-default font-semibold",
       false: "text-fg-muted hover:text-fg-default cursor-pointer"
     },
-    /** Quando único item no breadcrumb (= título da página), font-size sobe pra 15px */
+    /** Quando único item no breadcrumb (= título da página), font-size sobe pra 16px */
     standalone: {
-      true: "text-[15px]",
-      false: "text-[13px]"
+      true: "text-body-lg",
+      false: "text-body-sm font-normal"
     }
   },
   defaultVariants: { current: false, standalone: false }
@@ -96,7 +96,7 @@ const searchFakeInput = chipGroup.tv({
     "inline-flex items-center gap-gp-md h-form-md w-[180px]",
     "px-pad-xl rounded-radius-md",
     "bg-bg-subtle border border-border-subtle cursor-pointer",
-    "text-fg-subtle text-[13px]",
+    "text-fg-subtle text-body-sm font-normal",
     "transition-colors duration-150",
     "hover:bg-bg-muted hover:border-border-default",
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
@@ -113,7 +113,7 @@ const searchFakeInputKbd = chipGroup.tv({
     "ml-auto inline-flex items-center justify-center",
     "h-[20px] px-pad-xs rounded-radius-xs",
     "bg-bg-canvas border border-border-subtle dark:bg-bg-muted",
-    "text-[10px] font-semibold text-fg-muted tabular-nums shrink-0"
+    "text-caption-xs font-semibold text-fg-muted tabular-nums shrink-0"
   ]
 });
 const hdWrap = chipGroup.tv({
@@ -140,13 +140,13 @@ const hdHeader = chipGroup.tv({
   base: "flex items-center justify-between"
 });
 const hdTitle = chipGroup.tv({
-  base: "flex items-center gap-gp-sm text-[15px] font-semibold text-fg-default"
+  base: "flex items-center gap-gp-sm text-body-lg font-semibold text-fg-default"
 });
 const hdTitleCount = chipGroup.tv({
   base: [
     "inline-flex items-center justify-center min-w-[20px] h-[20px] px-pad-xs",
     "rounded-radius-xs bg-bg-brand text-fg-on-brand",
-    "text-[11px] font-bold tabular-nums"
+    "text-caption-sm font-bold tabular-nums"
   ]
 });
 const hdHeaderActions = chipGroup.tv({
@@ -165,7 +165,7 @@ chipGroup.tv({
   base: "size-[14px] text-fg-muted shrink-0"
 });
 chipGroup.tv({
-  base: "flex-1 min-w-0 bg-transparent border-0 outline-none text-[13px] text-fg-default placeholder:text-fg-subtle"
+  base: "flex-1 min-w-0 bg-transparent border-0 outline-none text-body-sm font-normal text-fg-default placeholder:text-fg-subtle"
 });
 chipGroup.tv({
   base: "flex items-center gap-gp-2xs p-[3px] rounded-radius-lg bg-bg-muted"
@@ -174,7 +174,7 @@ chipGroup.tv({
   base: [
     "inline-flex items-center justify-center gap-gp-xs",
     "h-[28px] px-[10px] rounded-radius-sm",
-    "text-[12px] font-medium text-fg-muted cursor-pointer",
+    "text-body-xs font-medium text-fg-muted cursor-pointer",
     "bg-transparent border-0",
     "transition-colors duration-150",
     "hover:text-fg-default",
@@ -187,7 +187,7 @@ chipGroup.tv({
   }
 });
 chipGroup.tv({
-  base: "text-[10px] font-bold tabular-nums opacity-70"
+  base: "text-caption-xs font-bold tabular-nums opacity-70"
 });
 const hdBody = chipGroup.tv({
   base: "flex-1 overflow-y-auto p-pad-sm flex flex-col gap-px"
@@ -196,7 +196,7 @@ const hdEmpty = chipGroup.tv({
   base: "flex flex-col items-center justify-center gap-gp-md py-pad-7xl text-fg-subtle"
 });
 const hdEmptyText = chipGroup.tv({
-  base: "text-paragraph-sm"
+  base: "text-body-md"
 });
 const hdNotif = chipGroup.tv({
   base: [
@@ -214,13 +214,13 @@ const hdNotifBody = chipGroup.tv({
   base: "flex-1 min-w-0 flex flex-col gap-gp-2xs"
 });
 const hdNotifTitle = chipGroup.tv({
-  base: "text-[13px] font-semibold text-fg-default leading-tight"
+  base: "text-body-sm font-semibold text-fg-default leading-tight"
 });
 const hdNotifText = chipGroup.tv({
-  base: "text-[12px] text-fg-muted leading-snug line-clamp-2"
+  base: "text-body-xs font-normal text-fg-muted leading-snug line-clamp-2"
 });
 const hdNotifTime = chipGroup.tv({
-  base: "text-[11px] text-fg-subtle"
+  base: "text-caption-sm text-fg-subtle"
 });
 const hdNotifDot = chipGroup.tv({
   base: "shrink-0 mt-pad-xs w-[8px] h-[8px] rounded-full bg-bg-brand"
@@ -237,7 +237,7 @@ const hdMsg = chipGroup.tv({
 const hdMsgAvatar = chipGroup.tv({
   base: [
     "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
-    "text-white text-[11px] font-bold uppercase tracking-[0.02em] leading-none"
+    "text-white text-caption-sm font-bold uppercase tracking-[0.02em] leading-none"
   ]
 });
 const hdMsgBody = chipGroup.tv({
@@ -247,16 +247,16 @@ const hdMsgRow = chipGroup.tv({
   base: "flex items-center justify-between gap-gp-sm"
 });
 const hdMsgName = chipGroup.tv({
-  base: "text-[13px] font-semibold text-fg-default truncate"
+  base: "text-body-sm font-semibold text-fg-default truncate"
 });
 const hdMsgTime = chipGroup.tv({
-  base: "text-[11px] text-fg-subtle shrink-0"
+  base: "text-caption-sm text-fg-subtle shrink-0"
 });
 const hdMsgPreviewRow = chipGroup.tv({
   base: "flex items-center gap-gp-sm"
 });
 const hdMsgPreview = chipGroup.tv({
-  base: "flex-1 min-w-0 text-[12px] text-fg-muted truncate"
+  base: "flex-1 min-w-0 text-body-xs font-normal text-fg-muted truncate"
 });
 const hdMsgDot = chipGroup.tv({
   base: "shrink-0 w-[8px] h-[8px] rounded-full bg-bg-brand"
@@ -268,7 +268,7 @@ const hdFooterLink = chipGroup.tv({
   base: [
     "inline-flex items-center justify-center gap-gp-sm",
     "h-form-sm px-pad-lg rounded-radius-md w-full",
-    "text-[13px] font-medium text-fg-brand no-underline",
+    "text-body-sm font-medium text-fg-brand no-underline",
     "transition-colors duration-150",
     "hover:bg-bg-brand-subtle",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-brand"
@@ -374,7 +374,7 @@ const DialogContent = React__namespace.forwardRef(({ className, children, hideCl
     {
       ref,
       className: chipGroup.cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-gp-4xl rounded-radius-base bg-bg-surface p-pad-4xl text-paragraph-sm text-fg-default shadow-sh-xl outline-float duration-200 sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-gp-4xl rounded-radius-base bg-bg-surface p-pad-4xl text-body-md text-fg-default shadow-sh-xl outline-float duration-200 sm:max-w-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
       ...props,
@@ -405,7 +405,7 @@ const DialogDescription = React__namespace.forwardRef(({ className, ...props },
   SheetPrimitive__namespace.Description,
   {
     ref,
-    className: chipGroup.cn("text-paragraph-sm text-fg-muted", className),
+    className: chipGroup.cn("text-body-md text-fg-muted", className),
     ...props
   }
 ));
@@ -456,7 +456,7 @@ const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref)
           ref,
           className: chipGroup.cn(
             "flex-1 min-w-0 bg-transparent border-0 outline-none",
-            "text-[13px] text-fg-default placeholder:text-fg-muted",
+            "text-body-sm font-normal text-fg-default placeholder:text-fg-muted",
             "disabled:cursor-not-allowed disabled:opacity-50",
             className
           ),
@@ -483,7 +483,7 @@ const CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */
   cmdk.Command.Empty,
   {
     ref,
-    className: "py-pad-5xl text-center text-paragraph-sm text-fg-muted",
+    className: "py-pad-5xl text-center text-body-md text-fg-muted",
     ...props
   }
 ));
@@ -496,7 +496,7 @@ const CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref)
       "overflow-hidden text-fg-default",
       "[&_[cmdk-group-heading]]:flex [&_[cmdk-group-heading]]:items-center",
       "[&_[cmdk-group-heading]]:h-[28px] [&_[cmdk-group-heading]]:px-pad-xl",
-      "[&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-bold",
+      "[&_[cmdk-group-heading]]:text-caption-xs [&_[cmdk-group-heading]]:font-bold",
       "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider",
       "[&_[cmdk-group-heading]]:text-fg-subtle",
       className
@@ -521,7 +521,7 @@ const CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) =
     className: chipGroup.cn(
       "relative flex cursor-default select-none items-center gap-gp-md",
       "rounded-radius-lg px-pad-xl py-pad-md",
-      "text-[13px] font-medium text-fg-muted",
+      "text-body-sm font-medium text-fg-muted",
       "outline-none transition-colors",
       "data-[selected='true']:bg-bg-muted data-[selected='true']:text-fg-default data-[selected='true']:[&_svg]:text-fg-default",
       "data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
@@ -540,7 +540,7 @@ const CommandShortcut = ({
     "span",
     {
       className: chipGroup.cn(
-        "ml-auto text-[11px] tracking-wider text-fg-subtle",
+        "ml-auto text-caption-sm tracking-wider text-fg-subtle",
         className
       ),
       ...props
@@ -813,10 +813,10 @@ const inputGroupVariants = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        xxs: "min-h-form-xs px-pad-md gap-gp-xs rounded-radius-md text-[13px]",
-        xs: "min-h-form-sm px-pad-xl gap-gp-md rounded-radius-md text-[13px]",
-        sm: "min-h-form-md px-pad-xl gap-gp-md rounded-radius-lg text-[13px]",
-        md: "min-h-form-lg px-pad-xl gap-gp-md rounded-radius-lg text-[13px]"
+        xxs: "min-h-form-xs px-pad-md gap-gp-xs rounded-radius-md text-body-sm font-normal",
+        xs: "min-h-form-sm px-pad-xl gap-gp-md rounded-radius-md text-body-sm font-normal",
+        sm: "min-h-form-md px-pad-xl gap-gp-md rounded-radius-lg text-body-sm font-normal",
+        md: "min-h-form-lg px-pad-xl gap-gp-md rounded-radius-lg text-body-sm font-normal"
       },
       state: {
         default: "focus-within:border-border-brand          focus-within:shadow-sh-ring",
@@ -843,7 +843,7 @@ const InputGroup = React__namespace.forwardRef(
 InputGroup.displayName = "InputGroup";
 const inputGroupInputVariants = classVarianceAuthority.cva([
   "flex-1 min-w-0 bg-transparent border-0 outline-none",
-  "text-[13px] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "text-body-sm font-normal text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
   "disabled:cursor-not-allowed",
   "file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg-default"
 ]);
@@ -861,7 +861,7 @@ InputGroupInput.displayName = "InputGroupInput";
 const inputGroupTextareaVariants = classVarianceAuthority.cva([
   "flex-1 min-w-0 bg-transparent border-0 outline-none resize-y",
   "py-pad-md",
-  "text-[13px] leading-[1.5] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
+  "text-body-sm font-normal leading-[1.5] text-fg-default placeholder:text-fg-muted placeholder:opacity-70",
   "disabled:cursor-not-allowed"
 ]);
 const InputGroupTextarea = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -918,7 +918,7 @@ const InputGroupText = React__namespace.forwardRef(({ className, ...props }, ref
     ref,
     "data-slot": "input-group-text",
     className: chipGroup.cn(
-      "text-[12.5px] font-medium text-fg-muted whitespace-nowrap",
+      "text-body-xs text-fg-muted whitespace-nowrap",
       className
     ),
     ...props
@@ -936,9 +936,9 @@ const inputGroupButtonVariants = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        xs: "h-form-xs px-pad-md gap-gp-xs text-[12px]",
+        xs: "h-form-xs px-pad-md gap-gp-xs text-body-xs font-normal",
         "icon-xs": "size-form-xs",
-        sm: "h-form-sm px-pad-lg gap-gp-md text-[12.5px]",
+        sm: "h-form-sm px-pad-lg gap-gp-md text-body-xs font-normal",
         "icon-sm": "size-form-sm"
       },
       variant: {
@@ -1162,7 +1162,7 @@ const CONTAINER_CLASSES = [
 const ITEM_BASE = [
   "relative flex cursor-default select-none items-center",
   "gap-pad-lg px-pad-lg py-pad-md rounded-radius-sm",
-  "text-[13px] font-medium",
+  "text-body-sm font-medium",
   "outline-none transition-colors",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
   "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
@@ -1507,7 +1507,7 @@ const sidebarRailTooltip = chipGroup.tv({
     "pointer-events-none absolute left-full ml-[14px] top-1/2 -translate-y-1/2",
     "px-pad-md py-[5px] rounded-radius-sm",
     "bg-fg-default text-bg-sidebar",
-    "text-[11.5px] font-semibold tracking-[0.01em] whitespace-nowrap",
+    "text-caption-sm font-semibold tracking-[0.01em] whitespace-nowrap",
     "opacity-0 group-hover/rail-item:opacity-100",
     "transition-opacity duration-150 z-50",
     "shadow-sh-md"
@@ -1529,7 +1529,7 @@ const sidebarRailUserDefault = chipGroup.tv({
   base: [
     "grid place-items-center w-9 h-9 rounded-full",
     // tracking-[0.02em] preserva tracking original (preset usa +0.06em)
-    "bg-bg-brand text-fg-on-brand font-bold text-[11px] uppercase tracking-[0.02em]"
+    "bg-bg-brand text-fg-on-brand font-bold text-caption-sm uppercase tracking-[0.02em]"
   ]
 });
 const sidebarPanel = chipGroup.tv({
@@ -1556,7 +1556,7 @@ const sidebarPanelTitle = chipGroup.tv({
     "flex-1 min-w-0 inline-flex items-center gap-gp-sm",
     "py-pad-sm px-pad-md rounded-radius-md",
     "bg-transparent border-0 cursor-pointer text-left",
-    "font-bold text-fg-default text-[14.5px]",
+    "text-body-md font-medium font-bold text-fg-default",
     "transition-colors hover:bg-bg-sidebar-accent-hover",
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary"
   ]
@@ -1570,7 +1570,7 @@ const sidebarPanelGroup = chipGroup.tv({
 const sidebarItem = chipGroup.tv({
   base: [
     "flex items-center gap-[11px] h-form-lg w-full px-pad-xl rounded-radius-md",
-    "text-fg-default text-[13px] font-medium text-left no-underline cursor-pointer",
+    "text-fg-default text-body-sm font-medium text-left no-underline cursor-pointer",
     "bg-transparent border-0",
     "transition-colors duration-150",
     // Hover usa sidebar-accent-hover (mineral subtle no light, alpha-12 no dark) —
@@ -1588,7 +1588,7 @@ const sidebarItem = chipGroup.tv({
       ]
     },
     subitem: {
-      true: "h-form-sm px-pad-lg text-[12.5px] text-fg-muted hover:text-fg-default"
+      true: "h-form-sm px-pad-lg text-body-xs font-normal text-fg-muted hover:text-fg-default"
     }
   },
   compoundVariants: [
@@ -1618,7 +1618,7 @@ const sidebarPill = chipGroup.tv({
     "inline-flex items-center justify-center flex-none",
     "min-w-[22px] h-[22px] px-[7px] rounded-radius-sm",
     // tracking-[0.02em] e leading-none preservam visual original (preset usa +0.06em e lineHeight 14px)
-    "text-[11px] font-bold leading-none tracking-[0.02em] tabular-nums"
+    "text-caption-sm font-bold leading-none tracking-[0.02em] tabular-nums"
   ],
   variants: {
     kind: {
@@ -1667,7 +1667,7 @@ const sidebarSectionHeader = chipGroup.tv({
   base: [
     "flex items-center gap-gp-sm px-pad-lg pt-pad-sm pb-pad-md",
     "bg-transparent border-0 text-left cursor-pointer select-none w-full",
-    "text-[10px] font-bold uppercase tracking-[0.06em] text-fg-default",
+    "text-caption-xs font-bold uppercase tracking-[0.06em] text-fg-default",
     "transition-colors hover:text-fg-default",
     "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary rounded-radius-sm",
     // Dark: enfraquecer (mais sutil)
@@ -1685,7 +1685,7 @@ const sidebarSectionChev = chipGroup.tv({
 const sidebarSectionAdd = chipGroup.tv({
   base: [
     "ml-auto w-[18px] h-[18px] grid place-items-center rounded-radius-xs",
-    "text-fg-muted bg-transparent border-0 cursor-pointer text-[14px] leading-none",
+    "text-fg-muted bg-transparent border-0 cursor-pointer text-body-md leading-none",
     "transition-colors hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-secondary"
   ]
@@ -1707,7 +1707,7 @@ const sidebarSectionList = chipGroup.tv({
 const sidebarSectionItem = chipGroup.tv({
   base: [
     "flex items-center gap-[11px] h-form-sm w-full px-pad-lg rounded-radius-md",
-    "text-[12.5px] font-medium text-fg-muted no-underline cursor-pointer",
+    "text-body-xs font-medium text-fg-muted no-underline cursor-pointer",
     "bg-transparent border-0 text-left",
     "transition-colors duration-150",
     "hover:bg-bg-sidebar-accent-hover hover:text-fg-default",
@@ -1721,7 +1721,7 @@ const sidebarChatAvatar = chipGroup.tv({
   base: [
     "flex-none grid place-items-center w-icon-lg h-icon-lg rounded-full",
     // tracking-[0.02em] preserva o tracking original (preset usa +0.06em); leading-none mantém centralização vertical
-    "text-white text-[10px] font-bold uppercase tracking-[0.02em] leading-none"
+    "text-white text-caption-xs font-bold uppercase tracking-[0.02em] leading-none"
   ]
 });
 const sidebarChatStatus = chipGroup.tv({
@@ -2348,7 +2348,7 @@ const AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref
   {
     ref,
     className: chipGroup.cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-bg-muted text-fg-muted text-caption-md",
+      "flex h-full w-full items-center justify-center rounded-full bg-bg-muted text-fg-muted text-body-sm font-normal",
       className
     ),
     ...props
@@ -2383,7 +2383,7 @@ function UserMenu({
         "aria-label": `Menu do usuário (${user.name})`,
         className: [
           "grid place-items-center w-9 h-9 rounded-full shrink-0",
-          "bg-bg-brand text-fg-on-brand text-[11px] font-bold uppercase tracking-[0.02em]",
+          "bg-bg-brand text-fg-on-brand text-caption-sm font-bold uppercase tracking-[0.02em]",
           "cursor-pointer transition-opacity duration-150",
           "hover:opacity-90",
           "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
@@ -2412,13 +2412,13 @@ function UserMenu({
                 style: user.avatarColor ? { background: user.avatarColor } : void 0,
                 children: [
                   user.avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-bg-brand text-fg-on-brand text-[12px] font-bold uppercase", children: initials })
+                  /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-bg-brand text-fg-on-brand text-body-xs font-bold uppercase", children: initials })
                 ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-fg-default truncate", children: user.name }),
-              user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-fg-muted truncate", children: user.email })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-body-sm font-medium text-fg-default truncate", children: user.name }),
+              user.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption-sm text-fg-muted truncate", children: user.email })
             ] })
           ] }),
           hasGroups && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
@@ -2426,7 +2426,7 @@ function UserMenu({
             /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Layout" }),
-              currentLayoutLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-[11px] text-fg-subtle", children: currentLayoutLabel })
+              currentLayoutLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentLayoutLabel })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenuRadioGroup,
@@ -2447,7 +2447,7 @@ function UserMenu({
             /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, {}),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema" }),
-              currentThemeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-[11px] text-fg-subtle", children: currentThemeLabel })
+              currentThemeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentThemeLabel })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
               DropdownMenuRadioGroup,
@@ -2678,4 +2678,4 @@ exports.SidebarSubgroup = SidebarSubgroup;
 exports.UserMenu = UserMenu;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
-//# sourceMappingURL=app-shell-BNTvOETJ.mjs.map
+//# sourceMappingURL=app-shell-BdVam01i.cjs.map