cdevienne/elm-orus-ui/1.0.0

Renamed to orus-io/elm-orus-ui. It is published under that name, and new versions come out there.

Versions published as cdevienne/elm-orus-ui still install under that name. 1 version of 1 come from the new location (see their notes).

Rerouted (renamed, needs approval). The GitHub user or repository was renamed. The tag is still there, at the new name. The Lamdera package server serves a copy recovered from https://github.com/orus-io/elm-orus-ui.

What we checked: The repo moved to github.com/orus-io/elm-orus-ui and tag 1.0.0 is there; its commit ad645724a38d is from 2024-11-15 10:17 UTC, after the version was published (2024-11-15 09:57 UTC); elm.json differs from package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one and nothing else confirms its contents.

We could not verify this copy against what was published, so the Lamdera compiler asks before using it (y/n). Without a terminal, as in CI, it stops with an error unless approved:

  • lamdera make --auto-approve-package-rerouting approves rerouted versions for that run,
  • LAMDERA_AUTO_APPROVE_PACKAGE_REROUTING=1 does the same for every run in that environment,
  • LAMDERA_CACHE=off skips the Lamdera package server altogether: packages come from package.elm-lang.org and GitHub only, as with elm, and a rerouted version then fails to download.

Details · package.elm-lang.org's zip: https://github.com/cdevienne/elm-orus-ui/zipball/1.0.0/

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