fix: add white background color to box-like elements

* fix(box-shadow): update box shadow token value * fix(box like components): add white background and md box shadow * fix(container): remove color and shadow from container * fix(css): updated order * fix(frame): update to fix background color with nested frames * fix(frame): add white background to bordered variant
Kajabi · Aug 8, 2024 · ee69286 · ee69286
1 parent b83dd7c
commit ee69286
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 5 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -13,6 +13,8 @@ $-sage-card-background: transparent;
 
   position: relative;
   width: 100%;
+  background-color: sage-color(white);
+  box-shadow: sage-shadow(md);
 }
 
 .sage-card--border-dashed {

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -41,8 +41,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   padding: sage-spacing();
   text-decoration: none;
   color: $-choice-color-default;
+  background-color: sage-color(white);
   border: sage-border();
   border-radius: sage-border(radius-large);
+  box-shadow: sage-shadow(md);
   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,6 +11,8 @@ $-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);
+  background-color: sage-color(white);
 
   &.sage-stat-box--raised {
     box-shadow: sage-shadow(sm);

diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -42,6 +42,8 @@ $-switch-toggle-size: rem(16px);
     padding: sage-spacing(card);
     border: sage-border();
     border-radius: sage-border(radius);
+    box-shadow: sage-shadow(md);
+    background-color: sage-color(white);
   }
 
   &.sage-switch--toggle-right {

diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -13,6 +13,8 @@ $-transaction-card-price-max-width: rem(100px);
 
   position: relative;
   width: 100%;
+  background-color: sage-color(white);
+  box-shadow: sage-shadow(md);
 
   > * {
     min-width: 0;

diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss
@@ -216,6 +216,7 @@ $-sage-frame-wrap: none;
 
 @each $-key, $-val in $-sage-frame-borders {
   .sage-frame--border-#{$-key} {
+    background-color: sage-color(white);
     border: #{$-val};
   }
 }
@@ -242,7 +243,7 @@ $-sage-frame-wrap: none;
   .sage-frame--gap-#{$-key} {
     gap: #{$-val};
   }
-  
+
   .sage-frame--padding-#{$-key} {
     padding: #{$_val};
   }

diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
@@ -9,10 +9,10 @@
 /// Sage shadows token
 ///
 $sage-shadows: (
-  sm: (0 2px 4px rgba(sage-color(black), 0.12), 0 0 2px rgba(sage-color(black), 0.08)),
-  md: (0 8px 14px rgba(sage-color(black), 0.16), 0 0 4px rgba(sage-color(black), 0.08)),
-  lg: (0 8px 40px rgba(sage-color(black), 0.24)),
-  modal: (0 8px 40px rgba(sage-color(black), 0.24), 0 0 4px rgba(sage-color(black), 0.1)),
+  sm: (0 1px 2px rgba(sage-color(grey, 95), 0.06), 0 1px 3px rgba(sage-color(grey, 95), 0.1)),
+  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)),
 );
 
 ///