From 94c86a41064b37816b8ca6f3d864bda9b13a0c09 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Thu, 8 Dec 2022 09:41:55 -0700
Subject: [PATCH] Dupe tertiary styles to quaternary

---
 src/Nri/Ui/ClickableSvg/V2.elm           | 23 +++++++++++++++++++++--
 styleguide-app/Examples/ClickableSvg.elm |  3 ++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/Nri/Ui/ClickableSvg/V2.elm b/src/Nri/Ui/ClickableSvg/V2.elm
index 6a4ecb1d..8b73cdea 100644
--- a/src/Nri/Ui/ClickableSvg/V2.elm
+++ b/src/Nri/Ui/ClickableSvg/V2.elm
@@ -6,7 +6,7 @@ module Nri.Ui.ClickableSvg.V2 exposing
     , exactSize, exactWidth, exactHeight
     , disabled
     , withBorder
-    , primary, secondary, tertiary, danger, dangerSecondary
+    , primary, secondary, tertiary, quaternary, danger, dangerSecondary
     , custom, nriDescription, testId, id
     , css, notMobileCss, mobileCss, quizEngineMobileCss
     , iconForMobile, iconForQuizEngineMobile, iconForNarrowMobile
@@ -48,7 +48,7 @@ module Nri.Ui.ClickableSvg.V2 exposing
 ## Customization
 
 @docs withBorder
-@docs primary, secondary, tertiary, danger, dangerSecondary
+@docs primary, secondary, tertiary, quaternary, danger, dangerSecondary
 
 @docs custom, nriDescription, testId, id
 
@@ -270,6 +270,7 @@ type Theme
     = Primary
     | Secondary
     | Tertiary
+    | Quaternary
     | Danger
     | DangerSecondary
 
@@ -335,6 +336,17 @@ applyTheme theme =
             , borderHover = Colors.azure
             }
 
+        Quaternary ->
+            { main_ = Colors.gray45
+            , mainHovered = Colors.azure
+            , background = Colors.gray96
+            , backgroundHovered = Colors.glacier
+            , includeBorder = True
+            , borderColor = Colors.gray92
+            , borderBottom = Colors.gray92
+            , borderHover = Colors.azure
+            }
+
         Danger ->
             { main_ = Colors.white
             , mainHovered = Colors.white
@@ -380,6 +392,13 @@ tertiary =
     set (\attributes -> { attributes | theme = Tertiary })
 
 
+{-| Used to de-emphasize elements when not hovered.
+-}
+quaternary : Attribute msg
+quaternary =
+    set (\attributes -> { attributes | theme = Quaternary })
+
+
 {-| White/transparent icon on a red background.
 -}
 danger : Attribute msg
diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm
index acbc3cf1..ca1c1b44 100644
--- a/styleguide-app/Examples/ClickableSvg.elm
+++ b/styleguide-app/Examples/ClickableSvg.elm
@@ -188,8 +188,9 @@ viewExampleTable { label, icon, attributes } =
             List.indexedMap viewExampleRow
                 [ ( "primary", ClickableSvg.primary )
                 , ( "secondary", ClickableSvg.secondary )
-                , ( "danger", ClickableSvg.danger )
                 , ( "tertiary", ClickableSvg.tertiary )
+                , ( "quaternary", ClickableSvg.quaternary )
+                , ( "danger", ClickableSvg.danger )
                 , ( "dangerSecondary", ClickableSvg.dangerSecondary )
                 ]
         , Html.tfoot []