@progressio_resources/gravity-design-system 3.0.49 → 4.0.26

package/src/lib/styles/components/_offcanvas.scss

@@ -1,6 +1,7 @@
+@use 'sass:map';
 @use "../foundations/breakpoints/_breakpoints.scss" as br;
-@import "../foundations/elevation/hero.elevation";
-@import "../foundations/spacing/spacing";
+@use "../foundations/elevation/hero.elevation";
+@use "../foundations/spacing/spacing";
 
 $z-index: 1040;
 
@@ -9,7 +10,7 @@ $z-index: 1040;
 }
 
 .offcanvas-backdrop {
-  background-color: var(--backdrop-primary);
+  background-color: var(--surface-primary);
   height: 100vh;
   left: 0;
   position: fixed;
@@ -22,7 +23,7 @@ $z-index: 1040;
   }
 
   &.show {
-    opacity: var(--backdrop-opacity);
+    opacity: .5;
   }
 }
 
@@ -42,12 +43,12 @@ $z-index: 1040;
   transition: transform .3s ease-in-out;
   z-index: $z-index;
 
-  @media (min-width: map-get(br.$breakpoints, md) + 1) {
+  @media (min-width: map.get(br.$breakpoints, md) + 1) {
     background-color: var(--surface-secondary);
     width: 50% !important;
   }
 
-  @media (max-width: map-get(br.$breakpoints, md)) {
+  @media (max-width: map.get(br.$breakpoints, md)) {
     background-color: var(--surface-primary);
     width: 100% !important;
   }

package/src/lib/styles/components/_tables.scss

@@ -1,6 +1,6 @@
-@import "./link";
-@import "../foundations/border-radius/hero.border-radius";
-@import "../foundations/typography/hero.typography";
+@use "./link";
+@use "../foundations/border-radius/hero.border-radius" as bor;
+@use "../foundations/typography/hero.typography";
 
 .table-container.xl, .table-container.lg {
   table {
@@ -15,11 +15,11 @@
       color: var(--on-bg-highlight-neutro-secondary);
 
       th:first-of-type {
-        border-top-left-radius: $border-radius-sm;
+        border-top-left-radius: bor.$border-radius-sm;
       }
 
       th:last-of-type {
-        border-top-right-radius: $border-radius-sm;
+        border-top-right-radius: bor.$border-radius-sm;
       }
     }
 
@@ -141,7 +141,7 @@
 
     tr {
       background-color: var(--surface-primary);
-      border-radius: $border-radius-sm;
+      border-radius: bor.$border-radius-sm;
       color: var(--text-primary);
       margin-bottom: 1rem;
       padding: 0.75rem 1rem; //12px 16px
@@ -223,7 +223,7 @@
   .panel {
     background-color: var(--surface-secondary);
     border: 0.5px solid var(--divider-primary);
-    border-radius: $border-radius-sm;
+    border-radius: bor.$border-radius-sm;
     padding: 0.25rem 1rem;
     position: absolute;
     right: 0;