useConfig () : { 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 } ; }
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 } ; }
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.