Merge pull request #866 from NoRedInk/bat/casts-a-shadow

Bat/casts a shadow

src/Nri/Ui/Balloon/V1.elm

@@ -10,6 +10,14 @@ module Nri.Ui.Balloon.V1 exposing
 {-| You propably want to use `Nri.Tooltip` not this.
 This is used to display a ballon-like container.
 
+
+# Changelog
+
+
+## Patch changes
+
+  - use `Shadows`
+
 @docs balloon
 
 
@@ -31,6 +39,7 @@ import Css exposing (..)
 import Html.Styled as Html exposing (Html, div, styled)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Shadows.V1 as Shadows
 
 
 
@@ -275,7 +284,7 @@ viewBalloon theme_ width_ padding contents =
             , Just (textAlign left)
             , Just (position relative)
             , Just (Css.borderRadius (px 8))
-            , Just (property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)")
+            , Just Shadows.high
             , Just padding
             , Just (balloonTheme theme_)
             , width_

src/Nri/Ui/Container/V2.elm

@@ -11,6 +11,11 @@ module Nri.Ui.Container.V2 exposing
 # Changelog
 
 
+## Patch changes
+
+  - use `Shadows`
+
+
 ## Changes from V1
 
   - removes fullHeight
@@ -54,6 +59,7 @@ import Nri.Ui
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.Shadows.V1 as Shadows
 
 
 {-| -}
@@ -152,7 +158,7 @@ defaultStyles : List Css.Style
 defaultStyles =
     [ borderRadius (px 8)
     , border3 (px 1) solid Colors.gray92
-    , property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);"
+    , Shadows.low
     , backgroundColor Colors.white
     ]
 
@@ -236,7 +242,7 @@ pillowStyles : List Style
 pillowStyles =
     [ borderRadius (px 20)
     , border3 (px 1) solid Colors.gray92
-    , property "box-shadow" "0 0.5px 0.7px hsl(0deg 0% 0% / 0.075), 0 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.075), 0 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.075), 5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.075);"
+    , Shadows.medium
     , backgroundColor Colors.white
     , withMedia [ mobile ]
         [ borderRadius (px 8)

src/Nri/Ui/Menu/V3.elm

@@ -8,7 +8,11 @@ module Nri.Ui.Menu.V3 exposing
     , Entry, group, entry
     )
 
-{-| Changes from V2:
+{-| Patch changes:
+
+  - Use `Shadows`
+
+Changes from V2:
 
   - Adpoted attribute pattern
   - Added option to customize the z-index
@@ -57,6 +61,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
 import Nri.Ui.Html.Attributes.V2 as AttributesExtra
 import Nri.Ui.Html.V3 exposing (viewJust)
+import Nri.Ui.Shadows.V1 as Shadows
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
 
@@ -757,7 +762,7 @@ styleContent contentVisible config =
         , zIndex (int <| config.zIndex + 1)
         , backgroundColor Colors.white
         , listStyle Css.none
-        , Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
+        , Shadows.high
         , before
             [ property "content" "\"\""
             , position absolute

src/Nri/Ui/Message/V3.elm

@@ -15,6 +15,7 @@ module Nri.Ui.Message.V3 exposing
 
   - adds `notMobileCss`, `mobileCss`, `quizEngineMobileCss`
   - adds `hideIconForMobile` and `hideIconFor`
+  - use `Shadows`
 
 Changes from V2:
 
@@ -75,6 +76,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 import Nri.Ui.MediaQuery.V1 as MediaQuery
+import Nri.Ui.Shadows.V1 as Shadows
 import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
 
@@ -176,7 +178,7 @@ view attributes_ =
                              borderRadius (px 8)
                            , padding (px 20)
                            , backgroundColor_
-                           , property "box-shadow" "0 0.8px 0.7px hsl(0deg 0% 0% / 0.1), 0 1px 1px -1.2px hsl(0deg 0% 0% / 0.1), 0 5px 2.5px -2.5px hsl(0deg 0% 0% / 0.1);"
+                           , Shadows.low
                            , Css.Media.withMedia
                                 [ Css.Media.all [ Css.Media.maxWidth (px 1000) ] ]
                                 [ padding (px 15)

src/Nri/Ui/Modal/V11.elm

@@ -16,6 +16,7 @@ module Nri.Ui.Modal.V11 exposing
 
   - adds `testId` helper
   - adds data-nri-descriptions to the header, content, and footer
+  - use `Shadows`
 
 
 # Changes from V10:
@@ -176,6 +177,7 @@ import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap)
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.Shadows.V1 as Shadows
 import Nri.Ui.SpriteSheet
 import Nri.Ui.Svg.V1
 import Task
@@ -419,7 +421,7 @@ modalStyles =
 
     -- Border
     , borderRadius (px 20)
-    , property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
+    , Shadows.high
     , Css.Media.withMedia [ mobile ]
         [ borderRadius zero
         ]

src/Nri/Ui/Tooltip/V2.elm

@@ -27,6 +27,7 @@ Post-release patches:
   - add containerCss
   - adds `nriDescription` and `testId`
   - fix <https://github.com/NoRedInk/noredink-ui/issues/766>
+  - use `Shadows`
 
 Changes from V1:
 
@@ -96,6 +97,7 @@ import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+import Nri.Ui.Shadows.V1 as Shadows
 import Nri.Ui.UiIcon.V1 as UiIcon
 import String.Extra
 
@@ -769,7 +771,7 @@ pointerBox tail direction alignment =
         , Css.fontSize (Css.px 16)
         , Css.fontWeight (Css.int 600)
         , Css.color Colors.white
-        , Css.property "box-shadow" "0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075)"
+        , Shadows.high
         , Global.descendants [ Global.a [ Css.textDecoration Css.underline ] ]
         , Global.descendants [ Global.a [ Css.color Colors.white ] ]
         ]

styleguide-app/Examples/Shadows.elm

@@ -79,15 +79,14 @@ viewShadow : ( String, Css.Style ) -> Html msg
 viewShadow ( usageGuidance, shadow ) =
     Html.div
         [ Attributes.css
-            [ Css.padding2 (Css.px 10) Css.zero
+            [ Css.margin2 (Css.px 20) (Css.px 4)
-            , Css.margin2 (Css.px 20) (Css.px 4)
-            , Css.borderRadius (Css.px 8)
-            , Css.height (Css.px 16)
-            , shadow
             ]
         ]
         [ Text.smallBodyGray
-            [ Text.css [ Css.textAlign Css.center ]
+            [ Text.css
+                [ Css.textAlign Css.center
+                , shadow
+                ]
             , Text.plaintext usageGuidance
             ]
         ]