Variable themesConst

Type Declaration

• bloom: {
      borders: { width: "1px" };
      colors: {
          danger: { dark: "#fb7185"; light: "#e11d48" };
          info: { dark: "#7dd3fc"; light: "#0369a1" };
          neutral: { dark: "#b5aecf"; light: "#6b6485" };
          primary: { dark: "#c4b5fd"; light: "#7c3aed" };
          success: { dark: "#5eead4"; light: "#0f8a5f" };
          warning: { dark: "#fdba74"; light: "#c2410c" };
      };
      components: {
          Badge: { radius: "rounded" };
          Button: { radius: "rounded" };
          Combobox: { radius: "rounded" };
          Drawer: { size: "sm" };
          IconButton: { radius: "rounded" };
          Input: { radius: "rounded" };
          Select: { radius: "rounded" };
          ToggleGroup: { radius: "rounded" };
      };
      defaults: {
          color: "primary";
          density: "comfortable";
          errorColor: "danger";
          floatingShadow: "md";
          gap: "md";
          helperStyle: "caption";
          labelStyle: "label";
          modalSize: "md";
          padding: "lg";
          radius: "lg";
          size: "md";
          softVariant: "soft";
          textStyle: "body";
          variant: "solid";
      };
      density: {
          comfortable: {
              fontSize: "0.9375rem";
              paddingX: "1.25rem";
              paddingY: "0.875rem";
          };
          compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
      };
      focusRing: { color: "primary"; offset: "3px"; width: "3px" };
      modalSizes: {
          full: "100vw";
          lg: "48rem";
          md: "32rem";
          sm: "24rem";
          xl: "64rem";
      };
      motion: {
          base: "200ms";
          easing: "cubic-bezier(0.2, 0, 0, 1)";
          fast: "120ms";
      };
      neutrals: {
          bg: { dark: "#14111f"; light: "#f7f4ff" };
          border: { dark: "#342c4d"; light: "#e6dff7" };
          muted: { dark: "#aaa3c4"; light: "#6b6485" };
          surface: { dark: "#1f1a30"; light: "#ffffff" };
          text: { dark: "#efeafc"; light: "#2a2540" };
      };
      radii: {
          lg: "1.5rem";
          md: "1rem";
          rounded: "9999px";
          sm: "0.75rem";
          square: "0";
          xl: "2rem";
      };
      shadows: { lg: string; md: string; sm: string };
      sizes: {
          lg: {
              fontSize: "1.0625rem";
              height: "3.25rem";
              iconSize: "1.25rem";
              paddingX: "1.625rem";
          };
          md: {
              fontSize: "0.9375rem";
              height: "2.75rem";
              iconSize: "1.125rem";
              paddingX: "1.25rem";
          };
          sm: {
              fontSize: "0.875rem";
              height: "2.25rem";
              iconSize: "1rem";
              paddingX: "1rem";
          };
          xl: {
              fontSize: "1.1875rem";
              height: "3.75rem";
              iconSize: "1.5rem";
              paddingX: "2rem";
          };
          xs: {
              fontSize: "0.8125rem";
              height: "2rem";
              iconSize: "0.875rem";
              paddingX: "0.875rem";
          };
      };
      spacing: {
          lg: "1.75rem";
          md: "1.25rem";
          sm: "0.75rem";
          xl: "2.5rem";
          xs: "0.375rem";
      };
      typography: {
          families: {
              mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
              sans: "Nunito, \"SF Pro Rounded\", ui-rounded, \"Varela Round\", system-ui, sans-serif";
          };
          headings: {
              h1: "display";
              h2: "heading";
              h3: "heading";
              h4: "subheading";
              h5: "subheading";
              h6: "label";
          };
          styles: {
              body: { family: "sans"; lineHeight: 1.55; size: "1rem"; weight: 500 };
              caption: {
                  family: "sans";
                  lineHeight: 1.45;
                  size: "0.8125rem";
                  weight: 500;
              };
              code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
              display: {
                  family: "sans";
                  letterSpacing: "-0.02em";
                  lineHeight: 1.1;
                  size: "2.5rem";
                  weight: 800;
              };
              heading: {
                  family: "sans";
                  lineHeight: 1.2;
                  size: "1.625rem";
                  weight: 800;
              };
              label: {
                  family: "sans";
                  lineHeight: 1.4;
                  size: "0.9375rem";
                  weight: 700;
              };
              subheading: {
                  family: "sans";
                  lineHeight: 1.35;
                  size: "1.1875rem";
                  weight: 700;
              };
          };
      };
      variants: {
          ghost: { background: "none"; border: "none"; text: "color" };
          outline: { background: "none"; border: "color"; text: "color" };
          soft: { background: "tint"; border: "none"; text: "color" };
          solid: { background: "fill"; border: "color"; text: "on" };
      };
      zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
  }

  Friendly and airy: violet on lavender, pill-shaped controls, rounded cards, large targets, soft tinted shadows.

• brutalist: {
      borders: { width: "2px" };
      colors: {
          danger: { dark: "#ff5ca1"; light: "#c2005a" };
          info: { dark: "#7aa2ff"; light: "#2f6bff" };
          neutral: { dark: "#f5f5f5"; light: "#1a1a1a" };
          primary: { dark: "#ff5a4d"; light: "#ff3d2e" };
          success: { dark: "#3dfc9a"; light: "#00b862" };
          warning: { dark: "#ffb14a"; light: "#ff8a00" };
      };
      components: { Drawer: { size: "sm" } };
      defaults: {
          color: "primary";
          density: "comfortable";
          errorColor: "danger";
          floatingShadow: "md";
          gap: "md";
          helperStyle: "caption";
          labelStyle: "label";
          modalSize: "md";
          padding: "lg";
          radius: "md";
          size: "md";
          softVariant: "soft";
          textStyle: "body";
          variant: "solid";
      };
      density: {
          comfortable: {
              fontSize: "0.875rem";
              paddingX: "0.75rem";
              paddingY: "0.625rem";
          };
          compact: {
              fontSize: "0.8125rem";
              paddingX: "0.5rem";
              paddingY: "0.25rem";
          };
      };
      focusRing: {
          color: "neutral";
          offset: "3px";
          style: "dashed";
          width: "3px";
      };
      modalSizes: {
          full: "100vw";
          lg: "48rem";
          md: "32rem";
          sm: "24rem";
          xl: "64rem";
      };
      motion: {
          base: "200ms";
          easing: "cubic-bezier(0.2, 0, 0, 1)";
          fast: "120ms";
      };
      neutrals: {
          bg: { dark: "#0f0f0f"; light: "#fffdf2" };
          border: { dark: "#ffffff"; light: "#000000" };
          muted: { dark: "#cfcfcf"; light: "#3d3d3d" };
          surface: { dark: "#1a1a1a"; light: "#ffffff" };
          text: { dark: "#ffffff"; light: "#000000" };
      };
      radii: {
          lg: "0";
          md: "0";
          rounded: "9999px";
          sm: "0";
          square: "0";
          xl: "0";
      };
      shadows: {
          lg: "8px 8px 0 0 light-dark(#000000, #ffffff)";
          md: "5px 5px 0 0 light-dark(#000000, #ffffff)";
          sm: "3px 3px 0 0 light-dark(#000000, #ffffff)";
      };
      sizes: {
          lg: {
              fontSize: "1rem";
              height: "3rem";
              iconSize: "1.25rem";
              paddingX: "1.25rem";
          };
          md: {
              fontSize: "0.875rem";
              height: "2.5rem";
              iconSize: "1rem";
              paddingX: "1rem";
          };
          sm: {
              fontSize: "0.8125rem";
              height: "2rem";
              iconSize: "0.875rem";
              paddingX: "0.75rem";
          };
          xl: {
              fontSize: "1.125rem";
              height: "3.5rem";
              iconSize: "1.5rem";
              paddingX: "1.5rem";
          };
          xs: {
              fontSize: "0.75rem";
              height: "1.75rem";
              iconSize: "0.75rem";
              paddingX: "0.625rem";
          };
      };
      spacing: {
          lg: "1.5rem";
          md: "1rem";
          sm: "0.5rem";
          xl: "2rem";
          xs: "0.25rem";
      };
      typography: {
          families: {
              mono: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
              sans: "\"JetBrains Mono\", \"SF Mono\", ui-monospace, Menlo, Consolas, monospace";
          };
          headings: {
              h1: "display";
              h2: "heading";
              h3: "heading";
              h4: "subheading";
              h5: "subheading";
              h6: "label";
          };
          styles: {
              body: {
                  family: "sans";
                  lineHeight: 1.55;
                  size: "0.875rem";
                  weight: 400;
              };
              caption: {
                  family: "sans";
                  lineHeight: 1.45;
                  size: "0.75rem";
                  weight: 400;
              };
              code: { family: "mono"; lineHeight: 1.5; size: "0.8125rem"; weight: 400 };
              display: {
                  family: "sans";
                  letterSpacing: "-0.04em";
                  lineHeight: 1;
                  size: "2.5rem";
                  weight: 800;
              };
              heading: {
                  family: "sans";
                  letterSpacing: "-0.02em";
                  lineHeight: 1.15;
                  size: "1.5rem";
                  weight: 800;
              };
              label: {
                  family: "sans";
                  letterSpacing: "0.04em";
                  lineHeight: 1.4;
                  size: "0.8125rem";
                  weight: 700;
              };
              subheading: {
                  family: "sans";
                  lineHeight: 1.3;
                  size: "1.125rem";
                  weight: 700;
              };
          };
      };
      variants: {
          ghost: { background: "none"; border: "none"; text: "neutral" };
          outline: { background: "none"; border: "neutral"; text: "neutral" };
          soft: { background: "tint"; border: "neutral"; text: "neutral" };
          solid: { background: "fill"; border: "neutral"; text: "on" };
      };
      zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
  }

  Loud and flat: red on black and white, square corners, thick borders, hard offset shadows, monospace type.

• compact: {
      borders: { width: "1px" };
      colors: {
          danger: { dark: "#f87171"; light: "#b91c1c" };
          info: { dark: "#60a5fa"; light: "#1d4ed8" };
          neutral: { dark: "#9aa5b1"; light: "#52606d" };
          primary: { dark: "#2dd4bf"; light: "#0f766e" };
          success: { dark: "#4ade80"; light: "#15803d" };
          warning: { dark: "#facc15"; light: "#a16207" };
      };
      components: { Drawer: { size: "sm" } };
      defaults: {
          color: "primary";
          density: "compact";
          errorColor: "danger";
          floatingShadow: "md";
          gap: "md";
          helperStyle: "caption";
          labelStyle: "label";
          modalSize: "md";
          padding: "lg";
          radius: "sm";
          size: "md";
          softVariant: "soft";
          textStyle: "body";
          variant: "solid";
      };
      density: {
          comfortable: {
              fontSize: "0.8125rem";
              paddingX: "0.625rem";
              paddingY: "0.375rem";
          };
          compact: { fontSize: "0.75rem"; paddingX: "0.5rem"; paddingY: "0.25rem" };
      };
      focusRing: { color: "info"; offset: "1px"; width: "2px" };
      modalSizes: {
          full: "100vw";
          lg: "48rem";
          md: "32rem";
          sm: "24rem";
          xl: "64rem";
      };
      motion: {
          base: "200ms";
          easing: "cubic-bezier(0.2, 0, 0, 1)";
          fast: "120ms";
      };
      neutrals: {
          bg: { dark: "#0b0f14"; light: "#eef1f4" };
          border: { dark: "#2a333d"; light: "#cbd2d9" };
          muted: { dark: "#9aa5b1"; light: "#52606d" };
          surface: { dark: "#141a21"; light: "#ffffff" };
          text: { dark: "#e4e7eb"; light: "#1f2933" };
      };
      radii: {
          lg: "4px";
          md: "3px";
          rounded: "9999px";
          sm: "2px";
          square: "0";
          xl: "6px";
      };
      shadows: {
          lg: "0 8px 24px light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.6))";
          md: "0 2px 8px light-dark(rgb(15 23 42 / 0.14), rgb(0 0 0 / 0.55))";
          sm: "0 1px 0 light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4))";
      };
      sizes: {
          lg: {
              fontSize: "0.875rem";
              height: "2.25rem";
              iconSize: "1rem";
              paddingX: "0.875rem";
          };
          md: {
              fontSize: "0.8125rem";
              height: "1.75rem";
              iconSize: "0.875rem";
              paddingX: "0.625rem";
          };
          sm: {
              fontSize: "0.75rem";
              height: "1.5rem";
              iconSize: "0.75rem";
              paddingX: "0.5rem";
          };
          xl: {
              fontSize: "1rem";
              height: "2.75rem";
              iconSize: "1.125rem";
              paddingX: "1rem";
          };
          xs: {
              fontSize: "0.6875rem";
              height: "1.25rem";
              iconSize: "0.75rem";
              paddingX: "0.375rem";
          };
      };
      spacing: {
          lg: "0.75rem";
          md: "0.5rem";
          sm: "0.25rem";
          xl: "1rem";
          xs: "0.125rem";
      };
      typography: {
          families: {
              mono: "\"IBM Plex Mono\", ui-monospace, Menlo, Consolas, monospace";
              sans: "\"IBM Plex Sans\", \"Segoe UI\", system-ui, -apple-system, sans-serif";
          };
          headings: {
              h1: "display";
              h2: "heading";
              h3: "heading";
              h4: "subheading";
              h5: "subheading";
              h6: "label";
          };
          styles: {
              body: {
                  family: "sans";
                  lineHeight: 1.45;
                  size: "0.8125rem";
                  weight: 400;
              };
              caption: {
                  family: "sans";
                  lineHeight: 1.4;
                  size: "0.75rem";
                  weight: 400;
              };
              code: { family: "mono"; lineHeight: 1.45; size: "0.75rem"; weight: 400 };
              display: {
                  family: "sans";
                  lineHeight: 1.25;
                  size: "1.5rem";
                  weight: 600;
              };
              heading: {
                  family: "sans";
                  lineHeight: 1.3;
                  size: "1.125rem";
                  weight: 600;
              };
              label: {
                  family: "sans";
                  letterSpacing: "0.02em";
                  lineHeight: 1.35;
                  size: "0.75rem";
                  weight: 600;
              };
              subheading: {
                  family: "sans";
                  lineHeight: 1.35;
                  size: "0.9375rem";
                  weight: 600;
              };
          };
      };
      variants: {
          ghost: { background: "none"; border: "none"; text: "color" };
          outline: { background: "none"; border: "neutral"; text: "neutral" };
          soft: { background: "tint"; border: "none"; text: "color" };
          solid: { background: "fill"; border: "color"; text: "on" };
      };
      zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
  }

  Dense and businesslike: teal on cool gray, small 28px controls, tight spacing, 13px text, compact tables, nearly flat.

• editorial: {
      borders: { width: "1px" };
      colors: {
          danger: { dark: "#fda4af"; light: "#9f1239" };
          info: { dark: "#93c5fd"; light: "#1e3a8a" };
          neutral: { dark: "#a8a29e"; light: "#57534e" };
          primary: { dark: "#fb923c"; light: "#9a3412" };
          success: { dark: "#a3e635"; light: "#3f6212" };
          warning: { dark: "#fcd34d"; light: "#a16207" };
      };
      components: { Drawer: { size: "sm" } };
      defaults: {
          color: "primary";
          density: "comfortable";
          errorColor: "danger";
          floatingShadow: "md";
          gap: "md";
          helperStyle: "caption";
          labelStyle: "label";
          modalSize: "md";
          padding: "lg";
          radius: "square";
          size: "md";
          softVariant: "soft";
          textStyle: "body";
          variant: "solid";
      };
      density: {
          comfortable: {
              fontSize: "0.875rem";
              paddingX: "0.75rem";
              paddingY: "0.625rem";
          };
          compact: {
              fontSize: "0.8125rem";
              paddingX: "0.5rem";
              paddingY: "0.25rem";
          };
      };
      focusRing: {
          color: "primary";
          offset: "3px";
          style: "double";
          width: "3px";
      };
      modalSizes: {
          full: "100vw";
          lg: "48rem";
          md: "32rem";
          sm: "24rem";
          xl: "64rem";
      };
      motion: {
          base: "200ms";
          easing: "cubic-bezier(0.2, 0, 0, 1)";
          fast: "120ms";
      };
      neutrals: {
          bg: { dark: "#1c1917"; light: "#f6f1e7" };
          border: { dark: "#48413b"; light: "#d6cdbd" };
          muted: { dark: "#aaa39b"; light: "#57534e" };
          surface: { dark: "#262220"; light: "#fffdf8" };
          text: { dark: "#f5efe3"; light: "#1c1917" };
      };
      radii: {
          lg: "3px";
          md: "2px";
          rounded: "9999px";
          sm: "1px";
          square: "0";
          xl: "4px";
      };
      shadows: {
          lg: "0 30px 60px -20px light-dark(rgb(68 44 20 / 0.4), rgb(0 0 0 / 0.8))";
          md: "0 18px 40px -18px light-dark(rgb(68 44 20 / 0.35), rgb(0 0 0 / 0.75))";
          sm: "none";
      };
      sizes: {
          lg: {
              fontSize: "1.0625rem";
              height: "3.25rem";
              iconSize: "1.25rem";
              paddingX: "1.75rem";
          };
          md: {
              fontSize: "1rem";
              height: "2.625rem";
              iconSize: "1rem";
              paddingX: "1.375rem";
          };
          sm: {
              fontSize: "0.875rem";
              height: "2rem";
              iconSize: "0.875rem";
              paddingX: "0.875rem";
          };
          xl: {
              fontSize: "1.1875rem";
              height: "3.875rem";
              iconSize: "1.375rem";
              paddingX: "2.125rem";
          };
          xs: {
              fontSize: "0.8125rem";
              height: "1.75rem";
              iconSize: "0.75rem";
              paddingX: "0.75rem";
          };
      };
      spacing: {
          lg: "2rem";
          md: "1.25rem";
          sm: "0.75rem";
          xl: "3rem";
          xs: "0.375rem";
      };
      typography: {
          families: {
              mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
              sans: "\"Helvetica Neue\", Helvetica, \"Inter\", \"Segoe UI\", Arial, sans-serif";
          };
          headings: {
              h1: "display";
              h2: "heading";
              h3: "heading";
              h4: "subheading";
              h5: "subheading";
              h6: "label";
          };
          styles: {
              body: { family: "sans"; lineHeight: 1.6; size: "1rem"; weight: 400 };
              caption: {
                  family: "sans";
                  lineHeight: 1.5;
                  size: "0.875rem";
                  weight: 400;
              };
              code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
              display: {
                  family: "sans";
                  letterSpacing: "-0.03em";
                  lineHeight: 1.05;
                  size: "2.75rem";
                  weight: 300;
              };
              heading: {
                  family: "sans";
                  letterSpacing: "-0.015em";
                  lineHeight: 1.2;
                  size: "1.75rem";
                  weight: 300;
              };
              label: {
                  family: "sans";
                  letterSpacing: "0.08em";
                  lineHeight: 1.4;
                  size: "0.8125rem";
                  weight: 700;
              };
              subheading: {
                  family: "sans";
                  lineHeight: 1.3;
                  size: "1.25rem";
                  weight: 600;
              };
          };
      };
      variants: {
          ghost: { background: "none"; border: "none"; text: "color" };
          outline: { background: "none"; border: "color"; text: "color" };
          soft: { background: "tint"; border: "none"; text: "color" };
          solid: { background: "fill"; border: "color"; text: "on" };
      };
      zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
  }

  Calm and considered: terracotta on cream, light grotesque type, square corners, flat surfaces, generous spacing.

• yarcl: {
      borders: { width: "1px" };
      colors: {
          danger: { dark: "#f87171"; light: "#dc2626" };
          info: { dark: "#38bdf8"; light: "#0369a1" };
          neutral: { dark: "#a3a9b8"; light: "#4b5263" };
          primary: { dark: "#8aa2ff"; light: "#2d4bb8" };
          success: { dark: "#4ade80"; light: "#15803d" };
          warning: { dark: "#fbbf24"; light: "#b45309" };
      };
      components: { Drawer: { size: "sm" } };
      defaults: {
          color: "primary";
          density: "comfortable";
          errorColor: "danger";
          floatingShadow: "md";
          gap: "md";
          helperStyle: "caption";
          labelStyle: "label";
          modalSize: "md";
          padding: "lg";
          radius: "md";
          size: "md";
          softVariant: "soft";
          textStyle: "body";
          variant: "solid";
      };
      density: {
          comfortable: {
              fontSize: "0.875rem";
              paddingX: "0.75rem";
              paddingY: "0.625rem";
          };
          compact: {
              fontSize: "0.8125rem";
              paddingX: "0.5rem";
              paddingY: "0.25rem";
          };
      };
      focusRing: { color: "primary"; offset: "2px"; width: "2px" };
      modalSizes: {
          full: "100vw";
          lg: "48rem";
          md: "32rem";
          sm: "24rem";
          xl: "64rem";
      };
      motion: {
          base: "200ms";
          easing: "cubic-bezier(0.2, 0, 0, 1)";
          fast: "120ms";
      };
      neutrals: {
          bg: { dark: "#0f1115"; light: "#f8f9fb" };
          border: { dark: "#2e333d"; light: "#d0d5dd" };
          muted: { dark: "#8b93a1"; light: "#667085" };
          surface: { dark: "#181b21"; light: "#ffffff" };
          text: { dark: "#e6e8ec"; light: "#101828" };
      };
      radii: {
          lg: "0.5rem";
          md: "0.375rem";
          rounded: "9999px";
          sm: "0.25rem";
          square: "0";
          xl: "0.75rem";
      };
      shadows: {
          lg: "0 12px 32px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.7))";
          md: "0 4px 12px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.6))";
          sm: "0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5))";
      };
      sizes: {
          lg: {
              fontSize: "1rem";
              height: "3rem";
              iconSize: "1.25rem";
              paddingX: "1.25rem";
          };
          md: {
              fontSize: "0.875rem";
              height: "2.5rem";
              iconSize: "1rem";
              paddingX: "1rem";
          };
          sm: {
              fontSize: "0.8125rem";
              height: "2rem";
              iconSize: "0.875rem";
              paddingX: "0.75rem";
          };
          xl: {
              fontSize: "1.125rem";
              height: "3.5rem";
              iconSize: "1.5rem";
              paddingX: "1.5rem";
          };
          xs: {
              fontSize: "0.75rem";
              height: "1.75rem";
              iconSize: "0.75rem";
              paddingX: "0.625rem";
          };
      };
      spacing: {
          lg: "1.5rem";
          md: "1rem";
          sm: "0.5rem";
          xl: "2rem";
          xs: "0.25rem";
      };
      typography: {
          families: {
              mono: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace";
              sans: "system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
          };
          headings: {
              h1: "display";
              h2: "heading";
              h3: "subheading";
              h4: "subheading";
              h5: "label";
              h6: "label";
          };
          styles: {
              body: { family: "sans"; lineHeight: 1.5; size: "1rem"; weight: 400 };
              caption: {
                  family: "sans";
                  lineHeight: 1.4;
                  size: "0.8125rem";
                  weight: 400;
              };
              code: { family: "mono"; lineHeight: 1.5; size: "0.875rem"; weight: 400 };
              display: {
                  family: "sans";
                  letterSpacing: "-0.02em";
                  lineHeight: 1.1;
                  size: "2.25rem";
                  weight: 800;
              };
              heading: {
                  family: "sans";
                  letterSpacing: "-0.01em";
                  lineHeight: 1.25;
                  size: "1.5rem";
                  weight: 700;
              };
              label: { family: "sans"; lineHeight: 1.4; size: "0.875rem"; weight: 500 };
              subheading: {
                  family: "sans";
                  lineHeight: 1.35;
                  size: "1.125rem";
                  weight: 600;
              };
          };
      };
      variants: {
          ghost: { background: "none"; border: "none"; text: "color" };
          outline: { background: "none"; border: "color"; text: "color" };
          soft: { background: "tint"; border: "none"; text: "color" };
          solid: { background: "fill"; border: "color"; text: "on" };
      };
      zIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 };
  }