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/
Elm Orus UI is a UI toolkit for elm, modeled after the Material Design system.
It renders to Elm-UI elements but could probably be extended to generate HTML ones.
This small piece of code show how to create a simple 'OK' button
import Element exposing (Element)
import OUI.Button as Button
import OUI.Material as Material
import OUI.Material.Color
import OUI.Material.Theme
theme =
OUI.Material.Theme.defaultTheme
|> OUI.Material.Theme.withColorscheme OUI.Material.Color.defaultDarkTheme
view : Element msg
view =
Button.new "OK"
|> Button.onClick OnBtnClick
|> Material.button theme [ {- any Element.Attribute -} ]A fully custom color scheme is possible, but the simplest is to build schemes based a a few key colors.
import OUI.Material.Color as Color
darkScheme : Color.Scheme
darkScheme =
Color.darkFromKeyColors
{ primary = Color.rgb255 0x67 0x50 0xA4
, secondary = Color.rgb255 0x62 0x5B 0x71
, tertiary = Color.rgb255 0x7D 0x52 0x60
, error = Color.rgb255 0xB3 0x26 0x1E
, neutral = Color.rgb255 0x40 0x40 0x40
, neutralVariant = Color.rgb255 0x40 0x40 0x40
}Each component has a restricted set of possible customization.
For example, here is how to make buttons higher and more square:
import OUI.Material.Theme as Theme
customTheme =
let
buttonTheme =
Theme.button Theme.defaultTheme
in
Theme.defaultTheme
|> Theme.withButton
{ buttonTheme
| common =
{ containerHeight = 50
, containerRadius = 4
, iconSize = buttonTheme.common.iconSize
, leftRightPadding = buttonTheme.common.leftRightPadding
, leftPaddingWithIcon = buttonTheme.common.leftPaddingWithIcon
, rightPaddingWithIcon = buttonTheme.common.rightPaddingWithIcon
, paddingBetweenElements = buttonTheme.common.paddingBetweenElements
, textSize = buttonTheme.common.textSize
, textType = buttonTheme.common.textType
}
, icon =
{ iconSize = buttonTheme.icon.iconSize
, containerSize = buttonTheme.icon.containerSize
}
}Contributions are very welcome! Please read the modest Developer Guide, it will give you some precious indications.