yarcl
    Preparing search index...

    Variable bloomConst

    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.

    Type Declaration

    • Readonlyborders: { width: "1px" }
    • Readonlycolors: {
          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" };
      }
    • Readonlycomponents: {
          Badge: { radius: "rounded" };
          Button: { radius: "rounded" };
          Combobox: { radius: "rounded" };
          Drawer: { size: "sm" };
          IconButton: { radius: "rounded" };
          Input: { radius: "rounded" };
          Select: { radius: "rounded" };
          ToggleGroup: { radius: "rounded" };
      }
    • Readonlydefaults: {
          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";
      }
    • Readonlydensity: {
          comfortable: {
              fontSize: "0.9375rem";
              paddingX: "1.25rem";
              paddingY: "0.875rem";
          };
          compact: { fontSize: "0.875rem"; paddingX: "0.75rem"; paddingY: "0.5rem" };
      }
    • ReadonlyfocusRing: { color: "primary"; offset: "3px"; width: "3px" }
    • 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: "#14111f"; light: "#f7f4ff" };
          border: { dark: "#342c4d"; light: "#e6dff7" };
          muted: { dark: "#aaa3c4"; light: "#6b6485" };
          surface: { dark: "#1f1a30"; light: "#ffffff" };
          text: { dark: "#efeafc"; light: "#2a2540" };
      }
    • Readonlyradii: {
          lg: "1.5rem";
          md: "1rem";
          rounded: "9999px";
          sm: "0.75rem";
          square: "0";
          xl: "2rem";
      }
    • Readonlyshadows: { lg: string; md: string; sm: string }
    • Readonlysizes: {
          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";
          };
      }
    • Readonlyspacing: { lg: "1.75rem"; md: "1.25rem"; sm: "0.75rem"; xl: "2.5rem"; xs: "0.375rem" }
    • Readonlytypography: {
          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;
              };
          };
      }
    • 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 }