From fe300d30edba17cb746ffb1e1d895c1ac8a7610f Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Mon, 19 Aug 2024 12:30:09 -0500
Subject: [PATCH] fix: update box shadows (#1952)

* fix: update box shadows

* fix: add space after comma
---
 packages/sage-assets/lib/stylesheets/components/_card.scss | 2 +-
 .../sage-assets/lib/stylesheets/components/_choice.scss    | 2 +-
 .../sage-assets/lib/stylesheets/components/_stat_box.scss  | 2 +-
 .../sage-assets/lib/stylesheets/components/_switch.scss    | 2 +-
 .../lib/stylesheets/components/_transaction_card.scss      | 2 +-
 .../sage-assets/lib/stylesheets/core/mixins/_sage.scss     | 2 +-
 packages/sage-assets/lib/stylesheets/tokens/_shadow.scss   | 7 +++++++
 7 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index c0a3270c1e..f469d911f3 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -14,7 +14,7 @@ $-sage-card-background: transparent;
   position: relative;
   width: 100%;
   background-color: sage-color(white);
-  box-shadow: sage-shadow(md);
+  box-shadow: sage-shadow(100);
 
   .sage-card,
   .sage-panel & {
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index 489b0fdf2a..2e57cc1058 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -44,7 +44,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   background-color: sage-color(white);
   border: sage-border();
   border-radius: sage-border(radius-large);
-  box-shadow: sage-shadow(md);
+  box-shadow: sage-shadow(100);
   transition: map-get($sage-transitions, default);
   transition-property: color, background-color, border-color, box-shadow;
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
index e5bd2d53de..74e49f3134 100644
--- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -11,7 +11,7 @@ $-stat-box-image-max-width: rem(48px);
   @include sage-card($grid: false);
   padding: rem(18px) sage-spacing(sm);
   border-radius: sage-border(radius-large);
-  box-shadow: sage-shadow(md);
+  box-shadow: sage-shadow(100);
   background-color: sage-color(white);
 
   .sage-card &,
diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
index 79b2c63b6c..4066e34501 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -42,7 +42,7 @@ $-switch-toggle-size: rem(16px);
     padding: sage-spacing(card);
     border: sage-border();
     border-radius: sage-border(radius);
-    box-shadow: sage-shadow(md);
+    box-shadow: sage-shadow(100);
     background-color: sage-color(white);
 
     .sage-card &,
diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
index d3bff0080b..ad53bfb056 100644
--- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -19,7 +19,7 @@ $-transaction-card-price-max-width: rem(100px);
   position: relative;
   width: 100%;
   background-color: sage-color(white);
-  box-shadow: sage-shadow(md);
+  box-shadow: sage-shadow(100);
 
   > * {
     min-width: 0;
diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
index f22dd91f6b..cc5aa2ec6e 100644
--- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
+++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -658,7 +658,7 @@
   background-color: sage-color(white);
   border: sage-border();
   border-radius: sage-border(radius-large);
-  box-shadow: sage-shadow(md);
+  box-shadow: sage-shadow(100);
 }
 
 ///
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
index feb1b76fe0..0540f7fa4b 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
@@ -13,6 +13,13 @@ $sage-shadows: (
   md: (0 4px 6px -2px rgba(sage-color(grey, 95), 0.03), 0 12px 16px -4px rgba(sage-color(grey, 95), 0.08)),
   lg: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)),
   modal: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.24)),
+  050: (0 1px 2px 0 rgba(sage-color(grey, 95), 0.05)),
+  100: (0 1px 3px 0 rgba(sage-color(grey, 95), 0.1), 0 1px 2px 0 rgba(sage-color(grey, 95), 0.06)),
+  150: (0 4px 8px -2px rgba(sage-color(grey, 95), 0.1), 0 2px 4px -2px rgba(sage-color(grey, 95), 0.06)),
+  200: (0 12px 16px -4px rgba(sage-color(grey, 95), 0.08), 0 4px 6px -2px rgba(sage-color(grey, 95), 0.03)),
+  300: (0 20px 24px -4px rgba(sage-color(grey, 95), 0.08), 0 8px 8px -4px rgba(sage-color(grey, 95), 0.03)),
+  400: (0 24px 48px -12px rgba(sage-color(grey, 95), 0.18)),
+  500: (0 32px 64px -12px rgba(sage-color(grey, 95), 0.14)),
 );
 
 ///