fix: update box shadows (#1952)

* fix: update box shadows * fix: add space after comma
Kajabi · Aug 19, 2024 · 770907c · 770907c
1 parent c67cc99
commit 770907c
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)),
 );
 
 ///