Merge pull request #62 from Orasund/unstable

Streamline Pages in Explorer

explorer/src/Main.elm

@@ -1,12 +1,17 @@
 module Main exposing (main)
 
 import Element
-import Pages.Button
+import Page.Button
+import Page.PasswordInput
 import UIExplorer
 
 
 pages =
-    UIExplorer.firstPage "Button" Pages.Button.page
+    UIExplorer.firstPage "Button" Page.Button.page
+
+
+
+--|> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
 
 
 main =

explorer/src/Page.elm

@@ -0,0 +1,61 @@
+module Page exposing (create, viewTile)
+
+import Element exposing (Element)
+import UIExplorer exposing (Page)
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Group, Tile, TileMsg)
+import Widget.Material as Material exposing (Palette)
+import Widget.Material.Typography as Typography
+
+
+{-| Creates a Page.
+
+  - `title` - Should match the name of the Page
+  - `description` - Should match the first paragraph of the documentation.
+
+-}
+create :
+    { title : String
+    , description : String
+    , book : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+    , demo : Tile model msg ()
+    }
+    -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
+create { title, description, book, demo } =
+    Tile.static []
+        (\_ _ ->
+            [ title |> Element.text |> Element.el Typography.h3
+            , description |> Element.text |> Element.el []
+            ]
+                |> Element.column [ Element.spacing 32 ]
+        )
+        |> Tile.first
+        |> Tile.nextGroup book
+        |> Tile.next demo
+        |> Tile.page
+
+
+viewTile :
+    String
+    -> Element msg
+    ->
+        { attributes : List (Element.Attribute msg)
+        , body : Element msg
+        , position : Tile.Position
+        , title : Maybe String
+        }
+viewTile title content =
+    { title = Nothing
+    , position = Tile.LeftColumnTile
+    , attributes = []
+    , body =
+        Element.column
+            [ Element.width Element.fill
+            , Element.spacing 8
+            ]
+            [ title
+                |> Element.text
+                |> Element.el Typography.caption
+            , content
+            ]
+    }

explorer/src/Page/Button.elm

@@ -1,14 +1,18 @@
-module Pages.Button exposing (page)
+module Page.Button exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
 
 import Element exposing (Element)
 import Element.Background as Background
 import Element.Font
 import Material.Icons as MaterialIcons exposing (offline_bolt)
 import Material.Icons.Types exposing (Coloring(..))
+import Page
 import UIExplorer
-import UIExplorer.Story as Story
-import UIExplorer.Tile as Tile
-import Widget
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg)
+import Widget exposing (ButtonStyle)
 import Widget.Customize as Customize
 import Widget.Icon as Icon exposing (Icon)
 import Widget.Material as Material
@@ -24,46 +28,88 @@ import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
 
 
-page =
-    Tile.first (intro |> Tile.withTitle "Button")
-        |> Tile.nextGroup book
-        |> Tile.next demo
-        |> Tile.page
+{-| The title of this page
+-}
+title : String
+title =
+    "Button"
 
 
-intro =
-    Tile.markdown []
-        """ A simple button """
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Buttons allow users to take actions, and make choices, with a single tap."
 
 
-book =
-    Story.book (Just "options")
-        (Story.initStaticTiles
-            |> Story.addTile viewButton
-            |> Story.addTile viewTextButton
-            |> Story.addTile viewIconButton
-            |> Story.addTile viewSelectButton
-         --|> Story.addTile viewButtonSource
-        )
-        |> Story.addStory
-            (Story.optionListStory "Palette"
-                darkPalette
-                [ ( "dark", darkPalette )
-                , ( "default", defaultPalette )
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewButton button text icon onPress { palette } () =
+            Widget.button (button palette)
+                { text = text
+                , icon = icon
+                , onPress = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.button"
+
+        viewTextButton button text icon onPress { palette } () =
+            Widget.textButton
+                (button palette
+                    |> Customize.elementButton
+                        [ Element.alignLeft
+                        , Element.centerY
                         ]
                 )
+                { text = text
+                , onPress = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.textButton"
+
+        viewIconButton button text icon onPress { palette } () =
+            Widget.iconButton
+                (button palette
+                    |> Customize.elementButton
+                        [ Element.alignLeft
+                        , Element.centerY
+                        ]
+                )
+                { text = text
+                , icon = icon
+                , onPress = onPress
+                }
+                |> Page.viewTile "Widget.itemButton"
+    in
+    [ viewButton, viewTextButton, viewIconButton ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+book =
+    Story.book (Just "Options")
+        viewFunctions
+        --Adding a option for different styles.
         |> Story.addStory
-            (Story.optionListStory "Material button"
+            (Story.optionListStory "Style"
                 containedButton
                 [ ( "contained", containedButton )
                 , ( "outlined", outlinedButton )
                 , ( "text", textButton )
                 ]
             )
+        --Changing the text of the label
         |> Story.addStory
             (Story.textStory "Label"
                 "OK"
             )
+        --Change the Icon
         |> Story.addStory
             (Story.optionListStory "Icon"
                 (MaterialIcons.done
@@ -75,6 +121,7 @@ book =
                   )
                 ]
             )
+        --Should an event be triggered when pressing the button?
         |> Story.addStory
             (Story.boolStory "with event handler"
                 ( Just (), Nothing )
@@ -83,159 +130,11 @@ book =
         |> Story.build
 
 
-viewLabel : String -> Element msg
-viewLabel =
-    Element.el [ Element.width <| Element.px 250 ] << Element.text
 
-
-viewButton 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 "button"
-            , Widget.button
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , icon = icon
-                , onPress = onPress
-                }
-            ]
-    }
-
-
-viewTextButton 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 "textButton"
-            , Widget.textButton
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , onPress = onPress
-                }
-            ]
-    }
-
-
-viewIconButton 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 "textButton"
-            , Widget.iconButton
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , icon = icon
-                , onPress = 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
-    , attributes = []
-    , body =
-        Tile.sourceCode <|
-            """Widget.button
-    (Material.containedButton palette
-          |> Customize.elementButton [ Element.height <| Element.px """
-                ++ String.fromInt size
-                ++ """ ]
-    )
-    { text =\""""
-                ++ text
-                ++ """" 
-    , icon = MaterialIcons.done |> Icon.elmMaterialIcons Widget.Material.Types.Color
-    , onPress = """
-                ++ (case onPress of
-                        Nothing ->
-                            "Nothing"
-
-                        Just () ->
-                            "Just ()"
-                   )
-                ++ """
-    }
-    """
-    }
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+{- This section here is essentially just a normal Elm program. -}
 
 
 type alias Model =
@@ -253,14 +152,6 @@ type Msg
 --|> Story.addTile (Just "Interactive example") view
 
 
-demo =
-    { init = always init
-    , update = update
-    , view = view
-    , subscriptions = subscriptions
-    }
-
-
 init : ( Model, Cmd Msg )
 init =
     ( 0, Cmd.none )
@@ -297,11 +188,9 @@ subscriptions _ =
     Sub.none
 
 
-view _ model =
+view : Context -> Int -> { title : Maybe String, position : Position, attributes : List b, body : Element Msg }
+view { palette } model =
     let
-        palette =
-            Material.defaultPalette
-
         style =
             { containedButton = Material.containedButton palette
             , outlinedButton = Material.outlinedButton palette
@@ -397,3 +286,27 @@ view _ model =
                     |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
                 )
     }
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }

explorer/src/Page/PasswordInput.elm

@@ -0,0 +1,173 @@
+module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
+
+import Browser
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Font
+import Element.Input as Input
+import Material.Icons as MaterialIcons exposing (offline_bolt)
+import Material.Icons.Types exposing (Coloring(..))
+import Set exposing (Set)
+import UIExplorer
+import UIExplorer.Story as Story
+import UIExplorer.Tile as Tile
+import Widget exposing (ColumnStyle, PasswordInputStyle)
+import Widget.Customize as Customize
+import Widget.Icon as Icon exposing (Icon)
+import Widget.Material as Material
+    exposing
+        ( Palette
+        , containedButton
+        , darkPalette
+        , defaultPalette
+        , outlinedButton
+        , textButton
+        )
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+
+
+page =
+    Tile.first (intro |> Tile.withTitle "Password Input")
+        |> Tile.nextGroup book
+        |> Tile.next demo
+        |> Tile.page
+
+
+intro =
+    Tile.markdown []
+        """ An input field for a password. """
+
+
+book =
+    Story.book (Just "options")
+        (Story.initStaticTiles
+            |> Story.addTile viewPassword
+        )
+        |> Story.addStory
+            (Story.optionListStory "Palette"
+                darkPalette
+                [ ( "dark", darkPalette )
+                , ( "default", defaultPalette )
+                ]
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "123456789"
+            )
+        |> Story.addStory
+            (Story.optionListStory "Placeholder"
+                Nothing
+                [ ( "Yes"
+                  , "password"
+                        |> Element.text
+                        |> Input.placeholder []
+                        |> Just
+                  )
+                , ( "No", Nothing )
+                ]
+            )
+        |> Story.addStory
+            (Story.textStory "Label"
+                "Password"
+            )
+        |> Story.build
+
+
+type alias Style style msg =
+    { style
+        | passwordInput : PasswordInputStyle msg
+        , column : ColumnStyle msg
+    }
+
+
+viewLabel : String -> Element msg
+viewLabel =
+    Element.el [ Element.width <| Element.px 250 ] << Element.text
+
+
+viewPassword palette text placeholder label _ _ =
+    { title = Nothing
+    , position = Tile.LeftColumnTile
+    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
+    , body =
+        Element.column
+            [ Element.width Element.fill
+            , Element.centerY
+            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
+            ]
+            [ viewLabel "Current Password"
+            , { text = text
+              , placeholder = placeholder
+              , label = label
+              , onChange = always ()
+              , show = False
+              }
+                |> Widget.currentPasswordInput (Material.passwordInput palette)
+            ]
+    }
+
+
+
+--------------------------------------------------------------------------------
+-- Example
+--------------------------------------------------------------------------------
+
+
+materialStyle : Style {} msg
+materialStyle =
+    { passwordInput = Material.passwordInput Material.defaultPalette
+    , column = Material.column
+    }
+
+
+type alias Model =
+    { passwordInput : String
+    }
+
+
+type Msg
+    = SetPasswordInput String
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( { passwordInput = ""
+      }
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        SetPasswordInput string ->
+            ( { model | passwordInput = string }, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+view _ model =
+    { title = Just "Interactive Demo"
+    , position = Tile.FullWidthTile
+    , attributes = []
+    , body =
+        { text = model.passwordInput
+        , placeholder = Nothing
+        , label = "Chips"
+        , onChange = SetPasswordInput
+        , show = False
+        }
+            |> Widget.currentPasswordInput (Material.passwordInput Material.defaultPalette)
+    }
+
+
+demo =
+    { init = always init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }

explorer/src/UIExplorer.elm

@@ -57,6 +57,7 @@ import Url.Builder
 import Url.Parser exposing ((</>))
 import Widget exposing (Item)
 import Widget.Material as Material
+import Widget.Material.Typography as Typography
 
 
 {-| The first page in your UI explorer. This is the default page if the user doesn't specify a url path.
@@ -587,21 +588,36 @@ updateSuccess (PageBuilder pages) config msg model =
             )
 
         PressedPageSizeOption pageSizeOption ->
-            ( { model | pageSizeOption = pageSizeOption
-            , expandPageSizeOptions = False }, Cmd.none )
+            ( { model
+                | pageSizeOption = pageSizeOption
+                , expandPageSizeOptions = False
+              }
+            , Cmd.none
+            )
 
         ToggledPageSizeGroup ->
-            ( { model | expandPageSizeOptions = not model.expandPageSizeOptions
+            ( { model
+                | expandPageSizeOptions = not model.expandPageSizeOptions
                 , expandColorBlindOptions = False
-             }, Cmd.none )
+              }
+            , Cmd.none
+            )
 
         PressedColorBlindOption colorBlindOption ->
-            ( { model | colorBlindOption = colorBlindOption 
-            , expandColorBlindOptions = False}, Cmd.none )
+            ( { model
+                | colorBlindOption = colorBlindOption
+                , expandColorBlindOptions = False
+              }
+            , Cmd.none
+            )
 
         ToggledColorBlindGroup ->
-            ( { model | expandColorBlindOptions = not model.expandColorBlindOptions
-            , expandPageSizeOptions = False }, Cmd.none )
+            ( { model
+                | expandColorBlindOptions = not model.expandColorBlindOptions
+                , expandPageSizeOptions = False
+              }
+            , Cmd.none
+            )
 
         ChangeDarkTheme enabled ->
             ( { model | darkThemeEnabled = enabled }, Cmd.none )
@@ -796,10 +812,19 @@ viewSidebar pages config model =
             )
 
     else
-        [ [ Element.row
-                [ Element.width Element.fill ]
-                [ config.sidebarTitle, minimizeSidebarButton ]
-                |> Widget.asItem
+        [ [ Widget.insetItem (Material.insetItem palette)
+                { text = ""
+                , onPress = Just PressedToggleSidebar
+                , icon =
+                    \_ ->
+                        config.sidebarTitle
+                            |> Element.el Typography.h6
+                , content =
+                    \{ size } ->
+                        Element.text "❮"
+                            |> Element.el [ Element.Font.size size ]
+                }
+          , Widget.divider (Material.fullBleedDivider palette)
           , Widget.fullBleedItem (Material.fullBleedItem palette)
                 { text = "Dark Theme"
                 , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled

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
                 ]
 
 

explorer/src/UIExplorer/Tile.elm

@@ -7,9 +7,9 @@ import Element.Font as Font
 import Markdown
 import SelectList exposing (SelectList)
 import UIExplorer exposing (Page, PageSize)
-import Widget
+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
 
@@ -41,7 +41,7 @@ mapView map view =
     { title = view.title
     , position = view.position
     , attributes = List.map (Element.mapAttribute map) view.attributes
-    , body = Element.map map view.body
+    , body = view.body |> Element.map map
     }
 
 
@@ -278,19 +278,17 @@ layoutAddTile view layout =
 
 
 layoutView : Material.Palette -> List (Attribute msg) -> View msg -> Element msg
-layoutView palette attributes view =
-    Widget.column
-        (Material.cardColumn palette
-            |> Customize.elementColumn attributes
-            |> Customize.mapContent (Customize.element <| Element.height Element.fill :: view.attributes)
-        )
-    <|
-        List.filterMap identity
-            [ view.title
-                |> Maybe.map Element.text
-                |> Maybe.map (Element.el Typography.h3)
-            , Just view.body
+layoutView palette _ view =
+    case view.title of
+        Just string ->
+            [ string
+                |> Widget.headerItem (Material.fullBleedHeader palette)
+            , view.body |> Widget.asItem
             ]
+                |> Widget.itemList (Material.cardColumn palette)
+
+        Nothing ->
+            view.body
 
 
 layoutRowView : Material.Palette -> LayoutRow msg -> List (Element msg)
@@ -304,12 +302,12 @@ layoutRowView palette row =
         TwoColumn left right ->
             Element.row
                 [ Element.width Element.fill
-                , Element.spacing 10
+                , Element.spacing 8
                 ]
                 [ Element.column
                     [ Element.width <| Element.fillPortion 2
                     , Element.height Element.fill
-                    , Element.spacing 10
+                    , Element.spacing 32
                     ]
                   <|
                     List.map
@@ -321,7 +319,7 @@ layoutRowView palette row =
                 , Element.column
                     [ Element.width <| Element.fillPortion 1
                     , Element.height Element.fill
-                    , Element.spacing 10
+                    , Element.spacing 8
                     ]
                   <|
                     List.map
@@ -357,8 +355,8 @@ page (Builder config) =
                 |> List.reverse
                 |> List.concatMap (layoutRowView palette)
                 |> Element.column
-                    ([ Element.padding 10
-                     , Element.spacing 10
+                    ([ Element.padding 16
+                     , Element.spacing 32
                      , Element.px 800 |> Element.width
                      , Element.centerX
                      , Font.family
@@ -413,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

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

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

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
                        ]
@@ -142,6 +142,9 @@ fullBleedHeader palette =
             , right = 0
             , top = 1
             }
+        , Palette.lightGray palette
+            |> MaterialColor.fromColor
+            |> Border.color
         ]
     , content =
         { elementColumn =
@@ -151,11 +154,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 +188,7 @@ fullBleedItem palette =
 
 
 insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg
-insetItem _ =
+insetItem palette =
     { element = [ Element.padding 0 ]
     , content =
         { elementButton =
@@ -200,19 +203,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 +232,12 @@ insetItem _ =
                         ]
                     , content =
                         { size = 24
-                        , color = MaterialColor.gray
+                        , color = Palette.gray palette
                         }
                     }
                 , content =
                     { size = 24
-                    , color = MaterialColor.gray
+                    , color = Palette.gray palette
                     }
                 }
             }
@@ -243,7 +246,7 @@ insetItem _ =
 
 
 multiLineItem : Palette -> ItemStyle (MultiLineItemStyle msg) msg
-multiLineItem _ =
+multiLineItem palette =
     { element = [ Element.padding 0 ]
     , content =
         { elementButton =
@@ -258,19 +261,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 +292,7 @@ multiLineItem _ =
                         , text =
                             { elementText =
                                 Typography.body2
-                                    ++ [ MaterialColor.gray
+                                    ++ [ Palette.gray palette
                                             |> MaterialColor.fromColor
                                             |> Font.color
                                        ]
@@ -303,12 +306,12 @@ multiLineItem _ =
                         ]
                     , content =
                         { size = 24
-                        , color = MaterialColor.gray
+                        , color = Palette.textGray palette
                         }
                     }
                 , content =
                     { size = 24
-                    , color = MaterialColor.gray
+                    , color = Palette.textGray palette
                     }
                 }
             }
@@ -317,7 +320,7 @@ multiLineItem _ =
 
 
 imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
-imageItem _ =
+imageItem palette =
     { element = [ Element.padding 0 ]
     , content =
         { elementButton =
@@ -332,19 +335,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 +369,7 @@ imageItem _ =
                     }
                 , content =
                     { size = 24
-                    , color = MaterialColor.gray
+                    , color = Palette.gray palette
                     }
                 }
             }
@@ -419,7 +422,7 @@ selectItem palette =
             ]
         , ifDisabled =
             (Button.baseButton palette |> .ifDisabled)
-                ++ [ MaterialColor.gray
+                ++ [ Palette.gray palette
                         |> MaterialColor.fromColor
                         |> Font.color
                    , Element.mouseDown []
@@ -454,7 +457,7 @@ selectItem palette =
                         }
                     , ifDisabled =
                         { size = 18
-                        , color = MaterialColor.gray
+                        , color = Palette.gray palette
                         }
                     , otherwise =
                         { size = 18

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
             ]

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

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

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

src/Widget/Material.elm

@@ -1,5 +1,5 @@
 module Widget.Material exposing
-    ( Palette, defaultPalette, darkPalette
+    ( Palette, defaultPalette, darkPalette, gray
     , containedButton, outlinedButton, textButton
     , iconButton, toggleButton, buttonRow
     , switch
@@ -16,6 +16,7 @@ module Widget.Material exposing
     , sortTable
     , snackbar
     , tab, tabButton
+    , textGray
     )
 
 {-| This module implements a Material design theme for all widgets.
@@ -33,7 +34,7 @@ If you have any suggestions or improvements, be sure to leave a [PR or a Issue](
 
 # Palette
 
-@docs Palette, defaultPalette, darkPalette
+@docs Palette, defaultPalette, darkPalette, gray
 
 
 # Button
@@ -213,6 +214,27 @@ darkPalette =
     Palette.darkPalette
 
 
+{-| generates a "grayish 50%" color that matches the on-surface color.
+-}
+gray : Palette -> Color
+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
+
+
 
 --------------------------------------------------------------------------------
 -- B U T T O N

src/Widget/Material/Color.elm

@@ -2,8 +2,9 @@ module Widget.Material.Color exposing
     ( buttonHoverOpacity, buttonFocusOpacity, buttonPressedOpacity, buttonDisabledOpacity, buttonSelectedOpacity
     , accessibleTextColor, accessibleWithTextColor
     , withShade, scaleOpacity
-    , dark, gray
+    , dark
     , toCIELCH, fromCIELCH, shadow, fromColor, textAndBackground
+    , gray
     )
 
 {-| This module contains functions to adapt color in various ways.
@@ -33,13 +34,18 @@ then the javascript material design implementation.
 
 ## Predefined Colors
 
-@docs dark, gray
+@docs dark
 
 
 ## Utility Functions
 
 @docs toCIELCH, fromCIELCH, shadow, fromColor, textAndBackground
 
+
+## DEPRECATED
+
+@docs gray
+
 -}
 
 import Color exposing (Color)
@@ -237,7 +243,7 @@ scaleOpacity opacity =
         >> Color.fromRgba
 
 
-{-| gray
+{-| DEPRECATED use Material.gray instead.
 -}
 gray : Color
 gray =