From 7b2ac62f1e53f83c38897356777ac18d3b69f1e2 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Tue, 6 Aug 2024 11:11:39 -0500
Subject: [PATCH] fix(css): updated order

---
 packages/sage-assets/lib/stylesheets/components/_card.scss    | 4 ++--
 .../sage-assets/lib/stylesheets/components/_stat_box.scss     | 2 +-
 packages/sage-assets/lib/stylesheets/components/_switch.scss  | 2 +-
 .../lib/stylesheets/components/_transaction_card.scss         | 4 ++--
 packages/sage-assets/lib/stylesheets/layout/_frame.scss       | 2 +-
 packages/sage-assets/lib/stylesheets/tokens/_shadow.scss      | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index 94c3935f4b..bdf618bdbc 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -11,10 +11,10 @@ $-sage-card-background: transparent;
 .sage-card {
   @include sage-card();
 
-  background-color: sage-color(white);
-  box-shadow: sage-shadow(md);
   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/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
index 12868c15fc..ba35c08783 100644
--- a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -9,10 +9,10 @@ $-stat-box-image-max-width: rem(48px);
 .sage-stat-box {
   // Styles here
   @include sage-card($grid: false);
-  background-color: sage-color(white);
   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
index e1d4eb1bcd..4cb8d7168e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -39,11 +39,11 @@ $-switch-toggle-size: rem(16px);
 
   &.sage-switch--has-border {
     align-items: center;
-    background-color: sage-color(white);
     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
index 510b996c81..993c524f2d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -11,10 +11,10 @@ $-transaction-card-price-max-width: rem(100px);
 .sage-transaction-card {
   @include sage-card;
 
-  background-color: sage-color(white);
-  box-shadow: sage-shadow(md);
   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
index 7157c8adf5..7b4df58a4e 100644
--- a/packages/sage-assets/lib/stylesheets/layout/_frame.scss
+++ b/packages/sage-assets/lib/stylesheets/layout/_frame.scss
@@ -163,8 +163,8 @@ $-sage-frame-wrap: none;
 
 // Root element
 .sage-frame {
-  background-color: $-sage-frame-background;
   display: flex;
+  background-color: $-sage-frame-background;
 
   // Add default settings
   &:not([class*="sage-frame--align-"]) {
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
index c8b12b7dce..feb1b76fe0 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_shadow.scss
@@ -9,7 +9,7 @@
 /// Sage shadows token
 ///
 $sage-shadows: (
-  sm: (0 1px 2px rgba(sage-color(grey, 95), 0.06), 0 1px 3px rgba(sage-color(grey, 95), 0.10)),
+  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)),