PackagesReroutesAboutlamdera.com

orus-io/elm-orus-ui/1.0.1

Formerly cdevienne/elm-orus-ui. Search finds this package by either name.

READMEAboutVersionsSourceModules

OUI.Material.Theme

Constructor

type Theme ext

A material theme

Contains a color scheme, a typescale, and layouts for all the components

It can also carry a custom extension to store your own components theme, extra colors, or anything that makes sense in your application

The default Material 3 theme

Core properties

Typescale

type alias Typescale =
{ display :
{ small : Typography
, medium : Typography
, large : Typography
}
, headline :
{ small : Typography
, medium : Typography
, large : Typography
}
, title :
{ small : Typography
, medium : Typography
, large : Typography
}
, label :
{ small : Typography
, medium : Typography
, large : Typography
}
, body :
{ small : Typography
, medium : Typography
, large : Typography
}
}

A font typescale

type alias Typography =
{ font : String
, lineHeight : Int
, size : Int
, tracking : Float
, weight : Int
}

A font type

defaultTypescale : Typescale

The default Material 3 Typescale

typescale : Theme ext -> Typescale

get the typescale

withTypescale : Typescale -> Theme ext -> Theme ext

set the typescale

Color scheme

colorscheme : Theme ext -> Scheme

get the color Scheme

withColorscheme : Scheme -> Theme ext -> Theme ext

set the colorscheme

Extension

ext : Theme ext -> ext

get the theme extension

withExt : ext -> Theme ext1 -> Theme ext

set the theme extension

Component themes

Badge

type alias BadgeTheme =
{ small :
{ shape : Int
, size : Int
, pos : ( Int, Int )
}
, large :
{ shape : Int
, size : Int
, padding : Int
, textSize : Size
, textType : Type
, textColor : Color
, pos : ( Int, Int )
}
, color : Color
}

A badge theme

badge : Theme ext -> BadgeTheme

get the badge theme

withBadge : BadgeTheme -> Theme ext -> Theme ext

set the badge theme

Button

type alias ButtonTheme =
{ common : ButtonLayout
, fab :
{ small : ButtonFABLayout
, medium : ButtonFABLayout
, large : ButtonFABLayout
, extended : ButtonLayout
}
, icon : ButtonIconLayout
}

A Button theme

type alias ButtonLayout =
{ containerHeight : Int
, containerRadius : Int
, iconSize : Int
, leftRightPadding : Int
, leftPaddingWithIcon : Int
, rightPaddingWithIcon : Int
, paddingBetweenElements : Int
, textType : Type
, textSize : Size
}

A normal button layout

type alias ButtonFABLayout =
{ containerHeight : Int
, containerShape : Int
, containerWidth : Int
, iconSize : Int
}

A FAB button layout

type alias ButtonIconLayout =
{ iconSize : Int
, containerSize : Int
}

A Icon button layout

button : Theme ext -> ButtonTheme

get the button theme

withButton : ButtonTheme -> Theme ext -> Theme ext

set the button theme

Checkbox

type alias CheckboxTheme =
{ containerWidth : Int
, containerHeight : Int
, containerShape : Int
, iconSize : Int
, stateLayerSize : Int
}

A Checkbox theme

checkbox : Theme ext -> CheckboxTheme

get the checkbox theme

withCheckbox : CheckboxTheme -> Theme ext -> Theme ext

set the checkbox theme

Dialog

type alias DialogTheme =
{ containerShape : Int
, containerWidth :
{ min : Int
, max : Int
}
, iconSize : Int
, padding : Int
, paddingBetweenButtons : Int
, paddingBetweenIconAndTitle : Int
, paddingBetweenTitleAndBody : Int
, paddingBetweenBodyAndAction : Int
, fsCloseIcon : Icon
}

A Dialog theme

dialog : Theme ext -> DialogTheme

get the dialog theme

withDialog : DialogTheme -> Theme ext -> Theme ext

set the dialog theme

Divider

type alias DividerTheme =
{ thickness : Int }

A Divider theme

divider : Theme ext -> DividerTheme

get the divider theme

withDivider : DividerTheme -> Theme ext -> Theme ext

set the divider theme

withMenu : MenuTheme -> Theme ext -> Theme ext

set the menu theme

withNavigation : NavigationTheme -> Theme ext -> Theme ext

set the navigation theme

Progress

type alias ProgressTheme =
{ activeIndicator : { thickness : Int }
, trackIndicator : { thickness : Int }
, circularSize : Int
}

A Progress theme

progress : Theme ext -> ProgressTheme

get the progress theme

withProgress : ProgressTheme -> Theme ext -> Theme ext

set the switch theme

Radio button

type alias RadioButtonTheme =
{ containerWidth : Int
, containerHeight : Int
, containerShape : Int
, contentSize : Int
, stateLayerSize : Int
, borderWidth : Int
}

A RadioButton theme

radiobutton : Theme ext -> RadioButtonTheme

get the radiobutton theme

withRadiobutton : RadioButtonTheme -> Theme ext -> Theme ext

set the radiobutton theme

Slider

type alias SliderTheme =
{ trackHeight : Int
, labelContainerHeight : Int
, labelContainerWidth : Int
, handleHeight : Int
, handleWidth : Int
}

A Slider theme

slider : Theme ext -> SliderTheme

get the slider theme

withSlider : SliderTheme -> Theme ext -> Theme ext

set the slider theme

Switch

type alias SwitchTheme =
{ track :
{ height : Int
, width : Int
, outlineWidth : Int
, corner : Int
}
, thumb :
{ size :
{ unselected : Int
, withIcon : Int
, selected : Int
, pressed : Int
}
}
, stateLayer : { size : Int }
, icon :
{ sizeUnselected : Int
, sizeSelected : Int
}
}

A Switch theme

switch : Theme ext -> SwitchTheme

get the switch theme

withSwitch : SwitchTheme -> Theme ext -> Theme ext

set the switch theme

Tabs

type alias TabsTheme =
{ primary :
{ containerHeight : Int
, activeIndicatorHeight : Int
, activeIndicatorWidth : Int
}
, secondary :
{ containerHeight : Int
, activeIndicatorHeight : Int
}
, paddingBetweenIconAndText : Int
, paddingBetweenInlineIconAndText : Int
, paddingBetweenInlineTextAndBadge : Int
, text :
{ size : Size
, type_ : Type
}
, color : { selected : Color }
}

A Tabs theme

tabs : Theme ext -> TabsTheme

get the tabs theme

withTabs : TabsTheme -> Theme ext -> Theme ext

set the tabs theme

TextField

type alias TextFieldTheme =
{ height : Int
, leftRightPaddingWithoutIcon : Int
, leftRightPaddingWithIcon : Int
, paddingBetweenIconAndText : Int
, supportingTextTopPadding : Int
, paddingBetweenSupportingTextAndCharacterCounter : Int
, iconSize : Int
, filled : { topBottomPadding : Int }
, outlined :
{ labelLeftRightPadding : Int
, labelBottom : Int
, shape : Int
}
}

A TextField theme

textfield : Theme ext -> TextFieldTheme

get the textfield theme

withTextfield : TextFieldTheme -> Theme ext -> Theme ext

set the textfield theme

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera