yarcl
    Preparing search index...

    Function useConfig

    • The config components currently read their defaults from: the build-time config, or the theme passed to applyTheme. Re-renders the caller when the theme changes.

      Returns {
          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 };
      }