[{"name":"W.Theme","comment":"\n\n\n# Setting Up\n\n@docs globalTheme\n\nTheme's are most commonly set globally. By using `globalTheme` the theme will be applied to the `body` element directly.\n\n@docs classTheme\n\nHowever, if you want to set up multiple themes in the same page, or if you don't want to use Elm Theme for your whole application but just for part of it, you can set `class` based themes.\n\n@docs themeComponents\n\n**When not using global themes**, you should add the styles for your theme components manually. These will enable features such as `W.Theme.Color.asPrimary` and `W.Theme.Color.asSolid`.\n\n\n# Dark Modes\n\nWhen applying a theme using any of the available methods, you can also provide a dark mode strategy.\n\nNot that the themes passed in for dark modes will only change color tokens. Other tokens will still be configured based on the main theme.\n\n@docs DarkMode, noDarkMode, darkModeFromClass, darkModeFromSystemPreferences\n\n\n# Creating Custom Themes\n\nYou should always start a new theme by extending one of the default themes:\n\n    W.Theme.lightTheme\n        |> W.Theme.withTextFont \"Roboto\"\n        |> W.Theme.withPrimaryColor myProductColor\n\n@docs Theme, lightTheme, darkTheme\n\n\n## Theme Id\n\n@docs withId\n\nThis setting can be useful for debugging theme inheritance.\n\n\n## Theme Fonts\n\n@docs withHeadingFont, withTextFont, withCodeFont\n\n\n## Theme Radius, Sizing & Spacing\n\n@docs withSpacing, withSizing, withRadius\n\n\n## Theme Colors\n\n@docs withColorPalette, withBaseColor, withPrimaryColor, withSecondaryColor, withSuccessColor, withWarningColor, withDangerColor\n\n\n# Styling Helpers\n\n@docs styleList, styleListIf\n\n\n# Extracting Theme Values\n\n@docs toId, toFontPalette, toColorPalette, toSpacingScale, toSizingScale, toRadiusScale, toExtraVariables\n\n","unions":[{"name":"DarkMode","comment":" ","args":[],"cases":[]},{"name":"Theme","comment":" ","args":[],"cases":[]}],"aliases":[],"values":[{"name":"classTheme","comment":" ","type":"{ theme : W.Theme.Theme, class : String.String, darkMode : W.Theme.DarkMode } -> Html.Html msg"},{"name":"darkModeFromClass","comment":" ","type":"String.String -> W.Theme.Theme -> W.Theme.DarkMode"},{"name":"darkModeFromSystemPreferences","comment":" ","type":"W.Theme.Theme -> W.Theme.DarkMode"},{"name":"darkTheme","comment":" ","type":"W.Theme.Theme"},{"name":"globalTheme","comment":" ","type":"{ theme : W.Theme.Theme, darkMode : W.Theme.DarkMode } -> Html.Html msg"},{"name":"lightTheme","comment":" ","type":"W.Theme.Theme"},{"name":"noDarkMode","comment":" ","type":"W.Theme.DarkMode"},{"name":"styleList","comment":" Set styles using CSS variables.\n\nThis is used to bypass a current limitation of Elm's `Html.Attribute.style` function, which ignores CSS variables.\n\n**You can't compose this function with other functions that also set the element's style! Unlike `Html.Attribute.class` this function does not compose with other similar functions.**\n\n    Html.input\n        [ W.Theme.styleList\n            [ ( \"background\", W.Theme.Color.bg )\n            , ( \"color\", W.Theme.Color.text )\n            ]\n        ]\n        []\n\n","type":"List.List ( String.String, String.String ) -> Html.Attribute msg"},{"name":"styleListIf","comment":" Conditionally set styles using CSS variables.\n\nThis is used to bypass a current limitation of Elm's `Html.Attribute.style` function, which ignores CSS variables.\n\n**You can't compose this function with other functions that also set the element's style! Unlike `Html.Attribute.class` this function does not compose with other similar functions.**\n\n    Html.input\n        [ Theme.styleListIf\n            [ ( \"background\", W.Theme.Color.background, True )\n            , ( \"color\", W.Theme.Color.text, True )\n            , ( \"border-color\", W.Theme.Color.dangerAccent, hasErrors )\n            ]\n        ]\n        []\n\n","type":"List.List ( String.String, String.String, Basics.Bool ) -> Html.Attribute msg"},{"name":"themeComponents","comment":" ","type":"Html.Html msg"},{"name":"toColorPalette","comment":" ","type":"W.Theme.Theme -> W.Theme.Color.ColorPalette"},{"name":"toExtraVariables","comment":" ","type":"W.Theme.Theme -> List.List ( String.String, String.String )"},{"name":"toFontPalette","comment":" ","type":"W.Theme.Theme -> W.Theme.Font.FontPalette"},{"name":"toId","comment":" ","type":"W.Theme.Theme -> String.String"},{"name":"toRadiusScale","comment":" ","type":"W.Theme.Theme -> W.Theme.Radius.RadiusScale"},{"name":"toSizingScale","comment":" ","type":"W.Theme.Theme -> W.Theme.Sizing.SizingScale"},{"name":"toSpacingScale","comment":" ","type":"W.Theme.Theme -> W.Theme.Spacing.SpacingScale"},{"name":"withBaseColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withCodeFont","comment":" ","type":"String.String -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withColorPalette","comment":" ","type":"W.Theme.Color.ColorPalette -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withDangerColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withHeadingFont","comment":" ","type":"String.String -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withId","comment":" ","type":"String.String -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withPrimaryColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withRadius","comment":" ","type":"W.Theme.Radius.RadiusScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withSecondaryColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withSizing","comment":" ","type":"W.Theme.Sizing.SizingScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withSpacing","comment":" ","type":"W.Theme.Spacing.SpacingScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withSuccessColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withTextFont","comment":" ","type":"String.String -> W.Theme.Theme -> W.Theme.Theme"},{"name":"withWarningColor","comment":" ","type":"W.Theme.Color.ColorScale -> W.Theme.Theme -> W.Theme.Theme"}],"binops":[]},{"name":"W.Theme.Color","comment":" A theme is defined of a color palette made of six semantic color scales. These scales are the \"variants\" of a theme and represent different things like a \"base\" or \"neutral\" color, a \"primary\" brand color, status-focused colors like \"success\", \"warning\" and \"danger\", and a \"secondary\" color used for increased expresiveness.\n\n@docs ColorPalette, ColorVariant, ColorScale\n\nA `ColorScale` is made of a number of color shades. But don't worry! There is dozens of handmade scales ready to be used through [elm-theme-colors](https://package.elm-lang.org/packages/georgesboris/elm-theme-colors/latest/).\n\n\n## The Color Scale\n\nInstead of using the common 100-900 scale found in systems like [TailwindCSS](https://tailwindcss.com/docs/customizing-colors) or [Material Design](https://m2.material.io/design/color/the-color-system.html#color-usage-and-palettes), we went for a more semantic approach based on what you would find on [Radix UI](https://www.radix-ui.com/colors). However, [W Theme](https://github.com/georgesboris/w-theme/) names colors directly instead of relying on a numeric scale. It also provides more variations than Radix, so no default use cases fall outside the provided scale.\n\n\n### Background\n\n  - **bg** — the main background of your ui\n  - **bg-subtle** — an alternate, slightly darker, color of your main background. useful for creating depth.\n\n\n### Tint\n\n  - **tint **— useful for subtle backgrounds of some UI elements.\n  - **tint-subtle **— subtler variation, useful for \"pressed\" states.\n  - **tint-strong **— stronger variation, useful for \"hovered\" states.\n\n\n### Accent\n\n  - **accent** — useful for dividers, borders and other small UI elements.\n  - **accent-subtle** — subtle variation, useful for \"pressed\" states.\n  - **accent-strong** — stronger variation, useful for \"hovered\" states.\n\nAccent colors are not made for background or text usage as they're not guaranteed to have proper contrast, they should be used for colored elements.\n\n\n### Solid\n\n  - **solid** — useful for solid elements such as buttons.\n  - **solid-subtle** — subtle variation, useful for \"pressed\" states.\n  - **solid-strong** — stronger variation, useful for \"hovered\" states.\n  - **solid-text** — contrasting color ensuring legibility of text over solid backgrounds\n\nSolid colors should use solid-text as their text color for proper accessibility.\n\n\n### Text\n\n  - **text** — the main text color of your application.\n  - **text-subtle** — subtler variation for secondary text.\n\nBoth text colors are guaranteed to be accessible over any background and tint colors.\n\n\n### Shadow\n\n  - **shadow** — a darker shade of the color, useful for coloring shadows.\n\nShadows are usually used with alpha values.\n\n\n# Using Color Variants\n\nYou should mostly use colors according to the current variant.\nThis will make your styles more dynamic. Each html element can easily set its own variant, like so:\n\n    Html.div\n        [ W.Theme.Color.asPrimary\n        , W.Theme.styleList\n            [ ( \"background\", W.Theme.Color.bg )\n            , ( \"border-color\", W.Theme.Color.accent )\n            , ( \"color\", W.Theme.Color.text )\n            ]\n        ]\n        [ ... ]\n\nHowever, if you wish to specify variant-specific colors regardless of context you can also access its values:\n\n    Html.button\n        [ W.Theme.styleList\n            [ ( \"background\", W.Theme.Color.dangerSolid )\n            , ( \"color\", W.Theme.Color.dangerText )\n            ]\n        ]\n        [ ... ]\n\n@docs asBase, asPrimary, asSecondary, asSuccess, asWarning, asDanger\n\n\n# Using Color Components\n\nThere are a few utility components that can be used to quickly apply some styles to your elements.\n\n@docs asTint, asSolid, asFocusable\n\n\n# Using Shadows\n\nShadow colors receive an alpha value as they're meant to be used with transparency.\n\n    Html.div\n        [ W.Theme.styleList\n            [ ( \"box-shadow\"\n              , \"0 0 8px \" ++ W.Theme.Color.shadow 0.1 )\n            ]\n        ]\n        [ ... ]\n\n\n# Variant Colors\n\nThese colors will be related to the currently available variant.\n\nBy default, the `base` variant is selected.\n\n@docs bg, bgSubtle, tint, tintSubtle, tintStrong, accent, accentSubtle, accentStrong, solid, solidSubtle, solidStrong, solidText, text, textSubtle, shadow\n\n\n# Base\n\n@docs baseBg, baseBgSubtle, baseTint, baseTintSubtle, baseTintStrong, baseAccent, baseAccentSubtle, baseAccentStrong, baseSolid, baseSolidSubtle, baseSolidStrong, baseSolidText, baseText, baseTextSubtle, baseShadow\n\n\n# Primary\n\n@docs primaryBg, primaryBgSubtle, primaryTint, primaryTintSubtle, primaryTintStrong, primaryAccent, primaryAccentSubtle, primaryAccentStrong, primarySolid, primarySolidSubtle, primarySolidStrong, primarySolidText, primaryText, primaryTextSubtle, primaryShadow\n\n\n# Secondary\n\n@docs secondaryBg, secondaryBgSubtle, secondaryTint, secondaryTintSubtle, secondaryTintStrong, secondaryAccent, secondaryAccentSubtle, secondaryAccentStrong, secondarySolid, secondarySolidSubtle, secondarySolidStrong, secondarySolidText, secondaryText, secondaryTextSubtle, secondaryShadow\n\n\n# Success\n\n@docs successBg, successBgSubtle, successTint, successTintSubtle, successTintStrong, successAccent, successAccentSubtle, successAccentStrong, successSolid, successSolidSubtle, successSolidStrong, successSolidText, successText, successTextSubtle, successShadow\n\n\n# Warning\n\n@docs warningBg, warningBgSubtle, warningTint, warningTintSubtle, warningTintStrong, warningAccent, warningAccentSubtle, warningAccentStrong, warningSolid, warningSolidSubtle, warningSolidStrong, warningSolidText, warningText, warningTextSubtle, warningShadow\n\n\n# Danger\n\n@docs dangerBg, dangerBgSubtle, dangerTint, dangerTintSubtle, dangerTintStrong, dangerAccent, dangerAccentSubtle, dangerAccentStrong, dangerSolid, dangerSolidSubtle, dangerSolidStrong, dangerSolidText, dangerText, dangerTextSubtle, dangerShadow\n\n","unions":[{"name":"ColorVariant","comment":" ","args":[],"cases":[["Base",[]],["Primary",[]],["Secondary",[]],["Success",[]],["Warning",[]],["Danger",[]]]}],"aliases":[{"name":"ColorPalette","comment":" ","args":[],"type":"{ base : W.Theme.Color.ColorScale, primary : W.Theme.Color.ColorScale, secondary : W.Theme.Color.ColorScale, success : W.Theme.Color.ColorScale, warning : W.Theme.Color.ColorScale, danger : W.Theme.Color.ColorScale }"},{"name":"ColorScale","comment":" ","args":[],"type":"{ bg : Color.Color, bgSubtle : Color.Color, tint : Color.Color, tintSubtle : Color.Color, tintStrong : Color.Color, accent : Color.Color, accentSubtle : Color.Color, accentStrong : Color.Color, solid : Color.Color, solidSubtle : Color.Color, solidStrong : Color.Color, solidText : Color.Color, textSubtle : Color.Color, text : Color.Color, shadow : Color.Color }"}],"values":[{"name":"accent","comment":" ","type":"String.String"},{"name":"accentStrong","comment":" ","type":"String.String"},{"name":"accentSubtle","comment":" ","type":"String.String"},{"name":"asBase","comment":" ","type":"Html.Attribute msg"},{"name":"asDanger","comment":" ","type":"Html.Attribute msg"},{"name":"asFocusable","comment":" ","type":"Html.Attribute msg"},{"name":"asPrimary","comment":" ","type":"Html.Attribute msg"},{"name":"asSecondary","comment":" ","type":"Html.Attribute msg"},{"name":"asSolid","comment":" ","type":"Html.Attribute msg"},{"name":"asSuccess","comment":" ","type":"Html.Attribute msg"},{"name":"asTint","comment":" ","type":"Html.Attribute msg"},{"name":"asWarning","comment":" ","type":"Html.Attribute msg"},{"name":"baseAccent","comment":" ","type":"String.String"},{"name":"baseAccentStrong","comment":" ","type":"String.String"},{"name":"baseAccentSubtle","comment":" ","type":"String.String"},{"name":"baseBg","comment":" ","type":"String.String"},{"name":"baseBgSubtle","comment":" ","type":"String.String"},{"name":"baseShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"baseSolid","comment":" ","type":"String.String"},{"name":"baseSolidStrong","comment":" ","type":"String.String"},{"name":"baseSolidSubtle","comment":" ","type":"String.String"},{"name":"baseSolidText","comment":" ","type":"String.String"},{"name":"baseText","comment":" ","type":"String.String"},{"name":"baseTextSubtle","comment":" ","type":"String.String"},{"name":"baseTint","comment":" ","type":"String.String"},{"name":"baseTintStrong","comment":" ","type":"String.String"},{"name":"baseTintSubtle","comment":" ","type":"String.String"},{"name":"bg","comment":" ","type":"String.String"},{"name":"bgSubtle","comment":" ","type":"String.String"},{"name":"dangerAccent","comment":" ","type":"String.String"},{"name":"dangerAccentStrong","comment":" ","type":"String.String"},{"name":"dangerAccentSubtle","comment":" ","type":"String.String"},{"name":"dangerBg","comment":" ","type":"String.String"},{"name":"dangerBgSubtle","comment":" ","type":"String.String"},{"name":"dangerShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"dangerSolid","comment":" ","type":"String.String"},{"name":"dangerSolidStrong","comment":" ","type":"String.String"},{"name":"dangerSolidSubtle","comment":" ","type":"String.String"},{"name":"dangerSolidText","comment":" ","type":"String.String"},{"name":"dangerText","comment":" ","type":"String.String"},{"name":"dangerTextSubtle","comment":" ","type":"String.String"},{"name":"dangerTint","comment":" ","type":"String.String"},{"name":"dangerTintStrong","comment":" ","type":"String.String"},{"name":"dangerTintSubtle","comment":" ","type":"String.String"},{"name":"primaryAccent","comment":" ","type":"String.String"},{"name":"primaryAccentStrong","comment":" ","type":"String.String"},{"name":"primaryAccentSubtle","comment":" ","type":"String.String"},{"name":"primaryBg","comment":" ","type":"String.String"},{"name":"primaryBgSubtle","comment":" ","type":"String.String"},{"name":"primaryShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"primarySolid","comment":" ","type":"String.String"},{"name":"primarySolidStrong","comment":" ","type":"String.String"},{"name":"primarySolidSubtle","comment":" ","type":"String.String"},{"name":"primarySolidText","comment":" ","type":"String.String"},{"name":"primaryText","comment":" ","type":"String.String"},{"name":"primaryTextSubtle","comment":" ","type":"String.String"},{"name":"primaryTint","comment":" ","type":"String.String"},{"name":"primaryTintStrong","comment":" ","type":"String.String"},{"name":"primaryTintSubtle","comment":" ","type":"String.String"},{"name":"secondaryAccent","comment":" ","type":"String.String"},{"name":"secondaryAccentStrong","comment":" ","type":"String.String"},{"name":"secondaryAccentSubtle","comment":" ","type":"String.String"},{"name":"secondaryBg","comment":" ","type":"String.String"},{"name":"secondaryBgSubtle","comment":" ","type":"String.String"},{"name":"secondaryShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"secondarySolid","comment":" ","type":"String.String"},{"name":"secondarySolidStrong","comment":" ","type":"String.String"},{"name":"secondarySolidSubtle","comment":" ","type":"String.String"},{"name":"secondarySolidText","comment":" ","type":"String.String"},{"name":"secondaryText","comment":" ","type":"String.String"},{"name":"secondaryTextSubtle","comment":" ","type":"String.String"},{"name":"secondaryTint","comment":" ","type":"String.String"},{"name":"secondaryTintStrong","comment":" ","type":"String.String"},{"name":"secondaryTintSubtle","comment":" ","type":"String.String"},{"name":"shadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"solid","comment":" ","type":"String.String"},{"name":"solidStrong","comment":" ","type":"String.String"},{"name":"solidSubtle","comment":" ","type":"String.String"},{"name":"solidText","comment":" ","type":"String.String"},{"name":"successAccent","comment":" ","type":"String.String"},{"name":"successAccentStrong","comment":" ","type":"String.String"},{"name":"successAccentSubtle","comment":" ","type":"String.String"},{"name":"successBg","comment":" ","type":"String.String"},{"name":"successBgSubtle","comment":" ","type":"String.String"},{"name":"successShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"successSolid","comment":" ","type":"String.String"},{"name":"successSolidStrong","comment":" ","type":"String.String"},{"name":"successSolidSubtle","comment":" ","type":"String.String"},{"name":"successSolidText","comment":" ","type":"String.String"},{"name":"successText","comment":" ","type":"String.String"},{"name":"successTextSubtle","comment":" ","type":"String.String"},{"name":"successTint","comment":" ","type":"String.String"},{"name":"successTintStrong","comment":" ","type":"String.String"},{"name":"successTintSubtle","comment":" ","type":"String.String"},{"name":"text","comment":" ","type":"String.String"},{"name":"textSubtle","comment":" ","type":"String.String"},{"name":"tint","comment":" ","type":"String.String"},{"name":"tintStrong","comment":" ","type":"String.String"},{"name":"tintSubtle","comment":" ","type":"String.String"},{"name":"warningAccent","comment":" ","type":"String.String"},{"name":"warningAccentStrong","comment":" ","type":"String.String"},{"name":"warningAccentSubtle","comment":" ","type":"String.String"},{"name":"warningBg","comment":" ","type":"String.String"},{"name":"warningBgSubtle","comment":" ","type":"String.String"},{"name":"warningShadow","comment":" ","type":"Basics.Float -> String.String"},{"name":"warningSolid","comment":" ","type":"String.String"},{"name":"warningSolidStrong","comment":" ","type":"String.String"},{"name":"warningSolidSubtle","comment":" ","type":"String.String"},{"name":"warningSolidText","comment":" ","type":"String.String"},{"name":"warningText","comment":" ","type":"String.String"},{"name":"warningTextSubtle","comment":" ","type":"String.String"},{"name":"warningTint","comment":" ","type":"String.String"},{"name":"warningTintStrong","comment":" ","type":"String.String"},{"name":"warningTintSubtle","comment":" ","type":"String.String"}],"binops":[]},{"name":"W.Theme.Font","comment":" The font palette of your theme defines the font families across your different elements.\n\n@docs FontPalette\n\n    pixelatedFonts : FontPalette\n    pixelatedFonts =\n        { heading = \"'Jacquard 24', system-ui\"\n        , text = \"'Tiny5', sans-serif\"\n        , code = \"monospace\"\n        }\n\n\n# Using Fonts\n\n**When setting up a theme you will automatically set up the default font families for some elements.** However, you can still set them up manually when it makes sense:\n\n    Html.h1\n        [ W.Theme.styleList\n            [ ( \"font-family\", W.Theme.Font.heading )\n            ]\n        ]\n        [ Html.text \"\" ]\n\n@docs code, heading, text\n\n\n# Importing custom fonts\n\nMake sure to import your fonts using the various approaches available. Here we're showcasing the simple approach of importing the font through CSS, though there are other approaches that are more optimized for performance.\n\n    Html.node \"style\"\n        []\n        [ Html.text \"@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&family=Tiny5&display=swap')\"\n        ]\n\n","unions":[],"aliases":[{"name":"FontPalette","comment":" ","args":[],"type":"{ heading : String.String, text : String.String, code : String.String }"}],"values":[{"name":"code","comment":" ","type":"String.String"},{"name":"heading","comment":" ","type":"String.String"},{"name":"text","comment":" ","type":"String.String"}],"binops":[]},{"name":"W.Theme.Radius","comment":" Radius sizes are used for rounding the borders of different components.\n\n**Defined in `rem` units**.\n\n@docs RadiusScale\n\nThe default radius scale matches the default spacing scale. So the `sm` spacing would look good with the `sm` radius. This match is not required though - feel free to mix them.\n\n\n# Radius\n\nUse `Radius` as an opaque type when creating a component that receives it as an argument.\nThat way you can make sure conflicting tokens like sizings or spacings are not being used in the wrong place:\n\n    W.Box.view\n        [ W.Box.radius W.Theme.Radius.sm ]\n        [ ... ]\n\nThe value can be transformed into a CSS value later:\n\n    Html.div\n        [ W.Theme.styleList\n            [ ( \"border-radius\"\n              , W.Theme.Radius.toCSS radiusValue\n              )\n            ]\n        ]\n\n@docs Radius\n@docs none, xs, sm, md, lg, xl, xl2, xl3, full, custom\n@docs toCSS\n\n","unions":[{"name":"Radius","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"RadiusScale","comment":" ","args":[],"type":"{ xs : Basics.Float, sm : Basics.Float, md : Basics.Float, lg : Basics.Float, xl : Basics.Float, xl2 : Basics.Float, xl3 : Basics.Float }"}],"values":[{"name":"custom","comment":" A custom value using `rem` as unit.\n\nAlthough discouraged in a design system, it is useful to provide visibility for custom values. That way you can quickly search for edge cases where your team is using values outside your default scale.\n\n","type":"Basics.Float -> W.Theme.Radius.Radius"},{"name":"full","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"lg","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"md","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"none","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"sm","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"toCSS","comment":" ","type":"W.Theme.Radius.Radius -> String.String"},{"name":"xl","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"xl2","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"xl3","comment":" ","type":"W.Theme.Radius.Radius"},{"name":"xs","comment":" ","type":"W.Theme.Radius.Radius"}],"binops":[]},{"name":"W.Theme.Sizing","comment":" Spacing sizes are used for sizing elements. This value is most commonly used for setting an element's `max-width` style.\n\n**Defined in `rem` units**.\n\n@docs SizingScale\n\n\n# Sizing\n\nUse `Sizing` as an opaque type when creating a component that receives it as an argument.\nThat way you can make sure conflicting tokens like radiuses or spacings are not being used in the wrong place:\n\n    W.Box.view\n        [ W.Box.maxWidth W.Theme.Sizing.lg ]\n        [ ... ]\n\nThe value can be transformed into a CSS value later:\n\n    Html.div\n        [ W.Theme.styleList\n            [ ( \"max-width\"\n              , W.Theme.Radius.toCSS maxWidthValue\n              )\n            ]\n        ]\n\n@docs Sizing\n@docs none, xs, sm, md, lg, xl, xl2, xl3, full, custom\n@docs toCSS\n\n","unions":[{"name":"Sizing","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"SizingScale","comment":" ","args":[],"type":"{ xs : Basics.Float, sm : Basics.Float, md : Basics.Float, lg : Basics.Float, xl : Basics.Float, xl2 : Basics.Float, xl3 : Basics.Float }"}],"values":[{"name":"custom","comment":" A custom value using `rem` as unit.\n\nAlthough discouraged in a design system, it is useful to provide visibility for custom values. That way you can quickly search for edge cases where your team is using values outside your default scale.\n\n","type":"Basics.Float -> W.Theme.Sizing.Sizing"},{"name":"full","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"lg","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"md","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"none","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"sm","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"toCSS","comment":" ","type":"W.Theme.Sizing.Sizing -> String.String"},{"name":"xl","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"xl2","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"xl3","comment":" ","type":"W.Theme.Sizing.Sizing"},{"name":"xs","comment":" ","type":"W.Theme.Sizing.Sizing"}],"binops":[]},{"name":"W.Theme.Spacing","comment":" Spacing sizes are used for spacing elements, not sizing them. These values are mainly used for setting the `gap`, `padding` and `margin` styles.\n\n**Defined in `rem` units**.\n\n@docs SpacingScale\n\n\n# Spacing\n\nUse `Spacing` as an opaque type when creating a component that receives it as an argument.\nThat way you can make sure conflicting tokens like radius or spacings are not being used in the wrong place:\n\n    W.Box.view\n        [ W.Box.padding W.Theme.Spacing.sm ]\n        [ ... ]\n\nThe value can be transformed into a CSS value later:\n\n    Html.div\n        [ W.Theme.styleList\n            [ ( \"padding\"\n              , W.Theme.Spacing.toCSS paddingValue\n              )\n            ]\n        ]\n\n@docs Spacing\n@docs none, xs, sm, md, lg, xl, xl2, xl3, custom\n@docs toCSS\n\n","unions":[{"name":"Spacing","comment":" ","args":[],"cases":[]}],"aliases":[{"name":"SpacingScale","comment":" ","args":[],"type":"{ xs : Basics.Float, sm : Basics.Float, md : Basics.Float, lg : Basics.Float, xl : Basics.Float, xl2 : Basics.Float, xl3 : Basics.Float }"}],"values":[{"name":"custom","comment":" A custom value using `rem` as unit.\n\nAlthough discouraged in a design system, it is useful to provide visibility for custom values. That way you can quickly search for edge cases where your team is using values outside your default scale.\n\n","type":"Basics.Float -> W.Theme.Spacing.Spacing"},{"name":"lg","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"md","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"none","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"sm","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"toCSS","comment":" ","type":"W.Theme.Spacing.Spacing -> String.String"},{"name":"xl","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"xl2","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"xl3","comment":" ","type":"W.Theme.Spacing.Spacing"},{"name":"xs","comment":" ","type":"W.Theme.Spacing.Spacing"}],"binops":[]}]