From cfe6167dcf39645e6f8c4ef113eb341eee1cf967 Mon Sep 17 00:00:00 2001 From: Lucas Payr Date: Thu, 3 Jun 2021 22:38:14 +0200 Subject: [PATCH] More improvements on the grays #63 --- explorer/src/Page/Button.elm | 59 +++------------------------- explorer/src/UIExplorer/Story.elm | 19 ++++++--- explorer/src/UIExplorer/Tile.elm | 8 ++-- src/Internal/Material/AppBar.elm | 6 +-- src/Internal/Material/Button.elm | 33 ++++++++-------- src/Internal/Material/Item.elm | 64 +++++++++++++++---------------- src/Internal/Material/List.elm | 29 ++++---------- src/Internal/Material/Palette.elm | 21 +++++++++- src/Internal/Material/Switch.elm | 7 ++-- src/Internal/Material/Tab.elm | 6 +-- src/Widget/Material.elm | 23 ++++++++--- 11 files changed, 128 insertions(+), 147 deletions(-) diff --git a/explorer/src/Page/Button.elm b/explorer/src/Page/Button.elm index 7f441be..b0b35a2 100644 --- a/explorer/src/Page/Button.elm +++ b/explorer/src/Page/Button.elm @@ -41,7 +41,6 @@ book = |> Story.addTile viewButton |> Story.addTile viewTextButton |> Story.addTile viewIconButton - |> Story.addTile viewSelectButton --|> Story.addTile viewButtonSource ) |> Story.addStory @@ -88,7 +87,7 @@ viewLabel = viewButton palette button text icon onPress _ _ = - { title = Nothing + { title = Just "Button" , position = Tile.LeftColumnTile , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ] , body = @@ -97,8 +96,7 @@ viewButton palette button text icon onPress _ _ = , Element.centerY , Element.Font.color <| MaterialColor.fromColor palette.on.surface ] - [ viewLabel "button" - , Widget.button + [ Widget.button (button palette |> Customize.elementButton [ Element.alignLeft @@ -114,7 +112,7 @@ viewButton palette button text icon onPress _ _ = viewTextButton palette button text icon onPress _ _ = - { title = Nothing + { title = Just "Text Button" , position = Tile.LeftColumnTile , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ] , body = @@ -123,8 +121,7 @@ viewTextButton palette button text icon onPress _ _ = , Element.centerY , Element.Font.color <| MaterialColor.fromColor palette.on.surface ] - [ viewLabel "textButton" - , Widget.textButton + [ Widget.textButton (button palette |> Customize.elementButton [ Element.alignLeft @@ -139,7 +136,7 @@ viewTextButton palette button text icon onPress _ _ = viewIconButton palette button text icon onPress _ _ = - { title = Nothing + { title = Just "Icon Button" , position = Tile.LeftColumnTile , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ] , body = @@ -148,8 +145,7 @@ viewIconButton palette button text icon onPress _ _ = , Element.centerY , Element.Font.color <| MaterialColor.fromColor palette.on.surface ] - [ viewLabel "textButton" - , Widget.iconButton + [ Widget.iconButton (button palette |> Customize.elementButton [ Element.alignLeft @@ -164,49 +160,6 @@ viewIconButton palette button text icon onPress _ _ = } -viewSelectButton palette button text icon onPress _ _ = - { title = Nothing - , position = Tile.LeftColumnTile - , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ] - , body = - Element.row - [ Element.width Element.fill - , Element.centerY - , Element.Font.color <| MaterialColor.fromColor palette.on.surface - ] - [ viewLabel "select button" - , Element.column [ Element.width Element.fill, Element.spacing 8 ] - [ Widget.selectButton - (button palette - |> Customize.elementButton - [ Element.centerY - , Element.alignLeft - ] - ) - ( False - , { text = text - , icon = icon - , onPress = onPress - } - ) - , Widget.selectButton - (button palette - |> Customize.elementButton - [ Element.centerY - , Element.alignLeft - ] - ) - ( True - , { text = text - , icon = icon - , onPress = onPress - } - ) - ] - ] - } - - viewButtonSource palette text icon onPress size _ _ = { title = Just "source code" , position = Tile.FullWidthTile diff --git a/explorer/src/UIExplorer/Story.elm b/explorer/src/UIExplorer/Story.elm index 5fa80ab..60aa3f0 100644 --- a/explorer/src/UIExplorer/Story.elm +++ b/explorer/src/UIExplorer/Story.elm @@ -7,6 +7,7 @@ import SelectList exposing (SelectList) import UIExplorer.Tile as Tile exposing (Context) import Widget import Widget.Material as Material +import Widget.Material.Typography as Typography type StoryInfo @@ -319,7 +320,13 @@ storyView context model = case model of RangeStoryModel label { unit, min, max, value } -> Element.column [ Element.spacing 8 ] - [ Element.text <| label ++ " (" ++ String.fromInt value ++ unit ++ ")" + [ label + ++ " (" + ++ String.fromInt value + ++ unit + ++ ")" + |> Element.text + |> Element.el Typography.caption , Input.slider [] { onChange = round >> String.fromInt >> StorySelect label , label = Input.labelHidden label @@ -333,7 +340,7 @@ storyView context model = TextStoryModel label value -> Element.column [ Element.spacing 8 ] - [ Element.text label + [ Element.text label |> Element.el Typography.caption , Widget.textInput (Material.textInput context.palette) { chips = [] , onChange = StorySelect label @@ -345,7 +352,7 @@ storyView context model = OptionListStoryModel label options -> Element.column [ Element.spacing 8 ] - [ Element.text label + [ Element.text label |> Element.el Typography.caption , { selected = Just <| SelectList.index options , options = @@ -374,8 +381,9 @@ storyView context model = ] BoolStoryModel label value -> - Element.row [ Element.spacing 8 ] - [ Widget.switch (Material.switch context.palette) + Element.row [ Element.spaceEvenly, Element.width Element.fill ] + [ Element.text label |> Element.el Typography.caption + , Widget.switch (Material.switch context.palette) { description = label , onPress = Just <| @@ -387,7 +395,6 @@ storyView context model = "t" , active = value } - , Element.text label ] diff --git a/explorer/src/UIExplorer/Tile.elm b/explorer/src/UIExplorer/Tile.elm index 4d071af..7d01c93 100644 --- a/explorer/src/UIExplorer/Tile.elm +++ b/explorer/src/UIExplorer/Tile.elm @@ -9,7 +9,7 @@ import SelectList exposing (SelectList) import UIExplorer exposing (Page, PageSize) import Widget exposing (Item) import Widget.Customize as Customize -import Widget.Material as Material +import Widget.Material as Material exposing (Palette) import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography @@ -411,12 +411,12 @@ withTitle title tile = } -canvas : Element msg -> Element msg -canvas view = +canvas : Palette -> Element msg -> Element msg +canvas palette view = Element.el [ Element.padding 30 , Element.width Element.fill - , Background.color <| MaterialColor.fromColor <| MaterialColor.gray + , Background.color <| MaterialColor.fromColor <| Material.gray palette ] <| Element.el diff --git a/src/Internal/Material/AppBar.elm b/src/Internal/Material/AppBar.elm index af35447..081aafa 100644 --- a/src/Internal/Material/AppBar.elm +++ b/src/Internal/Material/AppBar.elm @@ -8,7 +8,7 @@ import Internal.AppBar exposing (AppBarStyle) import Internal.Button exposing (ButtonStyle) import Internal.Material.Button as Button import Internal.Material.Icon as Icon -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Internal.Material.TextInput as TextInput import Widget.Customize as Customize import Widget.Icon as Icon exposing (Icon) @@ -52,7 +52,7 @@ menuTabButton palette = ] , ifDisabled = (Button.baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -84,7 +84,7 @@ menuTabButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 diff --git a/src/Internal/Material/Button.elm b/src/Internal/Material/Button.elm index 587c003..69d951a 100644 --- a/src/Internal/Material/Button.elm +++ b/src/Internal/Material/Button.elm @@ -6,13 +6,13 @@ import Element.Border as Border import Element.Font as Font import Html.Attributes as Attributes import Internal.Button exposing (ButtonStyle) -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography baseButton : Palette -> ButtonStyle msg -baseButton _ = +baseButton palette = { elementButton = Typography.button ++ [ Element.height <| Element.px 36 @@ -35,15 +35,15 @@ baseButton _ = , icon = { ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , ifActive = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } } } @@ -82,11 +82,11 @@ containedButton palette = ] , ifDisabled = (baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity |> MaterialColor.fromColor |> Background.color - , Font.color <| MaterialColor.fromColor <| MaterialColor.gray + , Font.color <| MaterialColor.fromColor <| Palette.gray palette , Border.shadow <| MaterialColor.shadow 0 , Element.mouseDown [] , Element.mouseOver [] @@ -126,7 +126,8 @@ containedButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = + Palette.gray palette } , otherwise = { size = 18 @@ -174,7 +175,7 @@ outlinedButton palette = ] , ifDisabled = (baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -212,7 +213,7 @@ outlinedButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 @@ -252,7 +253,7 @@ textButton palette = ] , ifDisabled = (baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -278,7 +279,7 @@ textButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 @@ -342,7 +343,7 @@ toggleButton palette = |> MaterialColor.scaleOpacity 0.14 |> MaterialColor.fromColor |> Border.color - , MaterialColor.gray + , Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -401,7 +402,7 @@ toggleButton palette = } , ifDisabled = { size = 24 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 24 @@ -450,7 +451,7 @@ iconButton palette = ] , ifDisabled = (baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -481,7 +482,7 @@ iconButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 diff --git a/src/Internal/Material/Item.elm b/src/Internal/Material/Item.elm index 17b65d2..e02da24 100644 --- a/src/Internal/Material/Item.elm +++ b/src/Internal/Material/Item.elm @@ -22,13 +22,13 @@ import Internal.Button exposing (ButtonStyle) import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, InsetItemStyle, ItemStyle, MultiLineItemStyle) import Internal.Material.Button as Button import Internal.Material.Icon as Icon -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg -fullBleedDivider _ = +fullBleedDivider palette = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 @@ -39,7 +39,7 @@ fullBleedDivider _ = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 - , MaterialColor.gray + , Palette.lightGray palette |> MaterialColor.fromColor |> Background.color ] @@ -48,7 +48,7 @@ fullBleedDivider _ = insetDivider : Palette -> ItemStyle (DividerStyle msg) msg -insetDivider _ = +insetDivider palette = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 @@ -64,7 +64,7 @@ insetDivider _ = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 - , MaterialColor.gray + , Palette.lightGray palette |> MaterialColor.fromColor |> Background.color ] @@ -73,7 +73,7 @@ insetDivider _ = middleDivider : Palette -> ItemStyle (DividerStyle msg) msg -middleDivider _ = +middleDivider palette = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 @@ -89,7 +89,7 @@ middleDivider _ = { element = [ Element.width <| Element.fill , Element.height <| Element.px 1 - , MaterialColor.gray + , Palette.lightGray palette |> MaterialColor.fromColor |> Background.color ] @@ -120,8 +120,8 @@ insetHeader palette = insetDivider palette |> .content , title = - Typography.body2 - ++ [ MaterialColor.gray + Typography.caption + ++ [ Palette.textGray palette |> MaterialColor.fromColor |> Font.color ] @@ -151,11 +151,11 @@ fullBleedHeader palette = , content = { divider = { element = [] } , title = - Typography.caption - ++ [ MaterialColor.gray + Typography.subtitle2 + ++ [ Palette.textGray palette |> MaterialColor.fromColor |> Font.color - , Element.paddingXY 16 0 + , Element.paddingXY 16 8 ] } } @@ -185,7 +185,7 @@ fullBleedItem palette = insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg -insetItem _ = +insetItem palette = { element = [ Element.padding 0 ] , content = { elementButton = @@ -200,19 +200,19 @@ insetItem _ = ] , otherwise = [ Element.mouseDown <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity |> MaterialColor.fromColor |> Background.color ] , Element.focused <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity |> MaterialColor.fromColor |> Background.color ] , Element.mouseOver <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity |> MaterialColor.fromColor |> Background.color @@ -229,12 +229,12 @@ insetItem _ = ] , content = { size = 24 - , color = MaterialColor.gray + , color = Palette.gray palette } } , content = { size = 24 - , color = MaterialColor.gray + , color = Palette.gray palette } } } @@ -243,7 +243,7 @@ insetItem _ = multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg -multiLineItem _ = +multiLineItem palette = { element = [ Element.padding 0 ] , content = { elementButton = @@ -258,19 +258,19 @@ multiLineItem _ = ] , otherwise = [ Element.mouseDown <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity |> MaterialColor.fromColor |> Background.color ] , Element.focused <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity |> MaterialColor.fromColor |> Background.color ] , Element.mouseOver <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity |> MaterialColor.fromColor |> Background.color @@ -289,7 +289,7 @@ multiLineItem _ = , text = { elementText = Typography.body2 - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color ] @@ -303,12 +303,12 @@ multiLineItem _ = ] , content = { size = 24 - , color = MaterialColor.gray + , color = Palette.textGray palette } } , content = { size = 24 - , color = MaterialColor.gray + , color = Palette.textGray palette } } } @@ -317,7 +317,7 @@ multiLineItem _ = imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg -imageItem _ = +imageItem palette = { element = [ Element.padding 0 ] , content = { elementButton = @@ -332,19 +332,19 @@ imageItem _ = ] , otherwise = [ Element.mouseDown <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity |> MaterialColor.fromColor |> Background.color ] , Element.focused <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity |> MaterialColor.fromColor |> Background.color ] , Element.mouseOver <| - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity |> MaterialColor.fromColor |> Background.color @@ -366,7 +366,7 @@ imageItem _ = } , content = { size = 24 - , color = MaterialColor.gray + , color = Palette.gray palette } } } @@ -419,7 +419,7 @@ selectItem palette = ] , ifDisabled = (Button.baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -454,7 +454,7 @@ selectItem palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 diff --git a/src/Internal/Material/List.elm b/src/Internal/Material/List.elm index 5bdf1bb..261a4f4 100644 --- a/src/Internal/Material/List.elm +++ b/src/Internal/Material/List.elm @@ -13,7 +13,7 @@ import Element.Background as Background import Element.Border as Border import Element.Font as Font import Internal.List exposing (ColumnStyle, RowStyle) -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Widget.Material.Color as MaterialColor @@ -88,6 +88,11 @@ cardColumn palette = [ Border.shadow <| MaterialColor.shadow 4 ] , Element.alignTop , Border.rounded 4 + , Border.width 1 + , palette.on.surface + |> MaterialColor.scaleOpacity 0.14 + |> MaterialColor.fromColor + |> Border.color ] , content = { element = @@ -119,12 +124,6 @@ cardColumn palette = , bottomLeft = 0 , bottomRight = 0 } - , Border.widthEach - { top = 1 - , left = 1 - , right = 1 - , bottom = 0 - } ] , ifLast = [ Border.roundEach @@ -133,21 +132,9 @@ cardColumn palette = , bottomLeft = 4 , bottomRight = 4 } - , Border.widthEach - { top = 0 - , left = 1 - , right = 1 - , bottom = 1 - } ] , otherwise = [ Border.rounded 0 - , Border.widthEach - { top = 0 - , left = 1 - , right = 1 - , bottom = 0 - } ] } } @@ -160,14 +147,14 @@ sideSheet palette = ++ [ Element.width <| Element.maximum 360 <| Element.fill , Element.height <| Element.fill , Element.paddingXY 0 8 - , MaterialColor.gray + , Palette.gray palette |> MaterialColor.fromColor |> Border.color ] , content = { element = [ Element.width <| Element.fill - , MaterialColor.gray + , Palette.gray palette |> MaterialColor.fromColor |> Border.color ] diff --git a/src/Internal/Material/Palette.elm b/src/Internal/Material/Palette.elm index cf9be2a..2e8d181 100644 --- a/src/Internal/Material/Palette.elm +++ b/src/Internal/Material/Palette.elm @@ -1,6 +1,7 @@ -module Internal.Material.Palette exposing (Palette, darkPalette, defaultPalette) +module Internal.Material.Palette exposing (Palette, darkPalette, defaultPalette, gray, lightGray, textGray) import Color exposing (Color) +import Widget.Material.Color as MaterialColor type alias Palette = @@ -51,3 +52,21 @@ darkPalette = , error = Color.rgb255 0x00 0x00 0x00 } } + + +gray : Palette -> Color +gray palette = + palette.surface + |> MaterialColor.withShade palette.on.surface 0.5 + + +lightGray : Palette -> Color +lightGray palette = + palette.surface + |> MaterialColor.withShade palette.on.surface 0.14 + + +textGray : Palette -> Color +textGray palette = + palette.surface + |> MaterialColor.withShade palette.on.surface 0.77 diff --git a/src/Internal/Material/Switch.elm b/src/Internal/Material/Switch.elm index d9cd75c..9ef52ae 100644 --- a/src/Internal/Material/Switch.elm +++ b/src/Internal/Material/Switch.elm @@ -5,7 +5,7 @@ import Element import Element.Background as Background import Element.Border as Border import Html.Attributes as Attributes -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Internal.Switch exposing (SwitchStyle) import Widget.Material.Color as MaterialColor @@ -30,7 +30,8 @@ switch palette = , ifDisabled = [ Element.htmlAttribute <| Attributes.style "cursor" "not-allowed" , palette.surface - |> MaterialColor.withShade MaterialColor.gray (0.5 * MaterialColor.buttonDisabledOpacity) + |> MaterialColor.withShade (Palette.gray palette) + (0.5 * MaterialColor.buttonDisabledOpacity) |> MaterialColor.fromColor |> Background.color ] @@ -41,7 +42,7 @@ switch palette = |> Background.color ] , otherwise = - [ MaterialColor.gray + [ Palette.gray palette |> MaterialColor.scaleOpacity 0.5 |> MaterialColor.fromColor |> Background.color diff --git a/src/Internal/Material/Tab.elm b/src/Internal/Material/Tab.elm index 6358261..b29db85 100644 --- a/src/Internal/Material/Tab.elm +++ b/src/Internal/Material/Tab.elm @@ -6,7 +6,7 @@ import Element.Border as Border import Element.Font as Font import Internal.Button exposing (ButtonStyle) import Internal.Material.Button as Button -import Internal.Material.Palette exposing (Palette) +import Internal.Material.Palette as Palette exposing (Palette) import Internal.Tab exposing (TabStyle) import Widget.Material.Color as MaterialColor import Widget.Material.Typography as Typography @@ -44,7 +44,7 @@ tabButton palette = ] , ifDisabled = (Button.baseButton palette |> .ifDisabled) - ++ [ MaterialColor.gray + ++ [ Palette.gray palette |> MaterialColor.fromColor |> Font.color , Element.mouseDown [] @@ -77,7 +77,7 @@ tabButton palette = } , ifDisabled = { size = 18 - , color = MaterialColor.gray + , color = Palette.gray palette } , otherwise = { size = 18 diff --git a/src/Widget/Material.elm b/src/Widget/Material.elm index d87bc45..ba1205c 100644 --- a/src/Widget/Material.elm +++ b/src/Widget/Material.elm @@ -16,6 +16,7 @@ module Widget.Material exposing , sortTable , snackbar , tab, tabButton + , textGray ) {-| This module implements a Material design theme for all widgets. @@ -157,7 +158,6 @@ import Internal.Switch exposing (SwitchStyle) import Internal.Tab exposing (TabStyle) import Internal.TextInput exposing (TextInputStyle) import Widget.Icon exposing (Icon) -import Widget.Material.Color as MaterialColor import Widget.Snackbar exposing (SnackbarStyle) @@ -214,12 +214,25 @@ darkPalette = Palette.darkPalette -{-| generates a "grayish" color that matches the on-surface color. +{-| generates a "grayish 50%" color that matches the on-surface color. -} gray : Palette -> Color -gray palette = - palette.on.surface - |> MaterialColor.scaleOpacity 0.14 +gray = + Palette.gray + + +{-| generates a "grayish 14%" color that matches the on-surface color. +-} +lightGray : Palette -> Color +lightGray = + Palette.lightGray + + +{-| generates a grayer text color +-} +textGray : Palette -> Color +textGray = + Palette.textGray