Variable config

Type Declaration

• Readonlyborders: { width: "1px" }

• Readonlycolors: {
      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" };
  }

• Readonlycomponents: { Drawer: { size: "sm" } }

• Readonlydefaults: {
      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";
  }

• Readonlydensity: {
      comfortable: {
          fontSize: "0.875rem";
          paddingX: "0.75rem";
          paddingY: "0.625rem";
      };
      compact: { fontSize: "0.8125rem"; paddingX: "0.5rem"; paddingY: "0.25rem" };
  }

• ReadonlyfocusRing: { color: "primary"; offset: "2px"; width: "2px" }

• ReadonlymodalSizes: { full: "100vw"; lg: "48rem"; md: "32rem"; sm: "24rem"; xl: "64rem" }

• Readonlymotion: { base: "200ms"; easing: "cubic-bezier(0.2, 0, 0, 1)"; fast: "120ms" }

• Readonlyneutrals: {
      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" };
  }

• Readonlyradii: {
      lg: "0.5rem";
      md: "0.375rem";
      rounded: "9999px";
      sm: "0.25rem";
      square: "0";
      xl: "0.75rem";
  }

• Readonlyshadows: {
      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))";
  }

• Readonlysizes: {
      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";
      };
  }

• Readonlyspacing: { lg: "1.5rem"; md: "1rem"; sm: "0.5rem"; xl: "2rem"; xs: "0.25rem" }

• Readonlytypography: {
      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;
          };
      };
  }

• Readonlyvariants: {
      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" };
  }

• ReadonlyzIndex: { dialog: 1200; dropdown: 1000; toast: 1300; tooltip: 1100 }