♻️ Refactor tokens exports toolbar

frontend/src/app/main/ui/ds/colors.scss

@@ -84,6 +84,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-secondary: #{$blue-teal-700};
 
   --color-shadow: #{color.change($blue-teal-700, $alpha: 0.2)};
+  --color-shadow-dark: #{color.change($gray-200, $alpha: 0.6)};
   --color-overlay-default: #{$white-60};
   --color-overlay-onboarding: #{$white-90};
   --color-canvas: #{$grayish-red};
@@ -116,6 +117,7 @@ $grayish-red: #bfbfbf;
   --color-foreground-secondary: #{$grayish-blue-500};
 
   --color-shadow: #{color.change($black, $alpha: 0.6)};
+  --color-shadow-dark: #{color.change($black, $alpha: 0.6)};
   --color-overlay-default: #{$gray-950-60};
   --color-overlay-onboarding: #{$gray-950-90};
   --color-canvas: #{$grayish-red};

frontend/src/app/main/ui/ds/elevations.scss

@@ -5,8 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 $elevation-shadow: 0 0 10px 0 var(--color-shadow);
+$elevation-shadow-dark: 0 0 10px 0 var(--color-shadow-dark);
 
 :global(.light),
 :global(.default) {
   --elevation-shadow: #{$elevation-shadow};
+  --elevation-shadow-dark: #{$elevation-shadow-dark};
 }

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -356,5 +356,5 @@
              :on-pointer-down on-pointer-down-pages
              :on-lost-pointer-capture on-lost-pointer-capture-pages
              :on-pointer-move on-pointer-move-pages}]
-      [:& tokens-tab]
-      [:& import-export-button]]]))
+      [:& tokens-tab]]
+      [:& import-export-button]]))

frontend/src/app/main/ui/workspace/tokens/sidebar.scss

@@ -10,10 +10,10 @@
 
 .sidebar-wrapper {
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto 1fr auto;
   // Overflow on the bottom section can't be done without hardcoded values for the height
   // This has to be changed from the wrapping sidebar styles
-  height: calc(100vh - #{$s-84});
+  height: calc(100vh - #{$s-92});
   overflow: hidden;
 }
 
@@ -114,9 +114,14 @@
 }
 
 .import-export-button-wrapper {
-  position: absolute;
-  bottom: $s-12;
-  right: $s-12;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  justify-content: end;
+  padding: $s-16;
+  margin-top: $s-8;
+  background-color: var(--color-background-primary);
+  box-shadow: var(--elevation-shadow-dark);
 }
 
 .import-export-button {