reduce space around switch button

oddbird · Feb 4, 2025 · 36800c6 · 36800c6
1 parent 92b09b5
commit 36800c6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
@@ -22,7 +22,7 @@
   <Sliders type="fg" color={fg} format={$format} />
 </form>
 
-<div data-layout="split">
+<div data-layout="color-formats">
   <Formats type="bg" color={$bg} format={$format} />
   <Formats type="fg" color={$fg} format={$format} />
 </div>
@@ -35,7 +35,7 @@
   }
 
   [data-layout] {
-    column-gap: var(--triple-gutter);
+    column-gap: var(--gutter);
   }
 
   [data-actions='swap-colors'] {

diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
@@ -17,3 +17,4 @@ $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
 $triangle-width: var(--shim);
 $triangle-height: var(--shim-plus);
+$switch-space: var(--double-gutter);
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
@@ -69,11 +69,19 @@ body {
   grid-template-columns: auto 1fr;
 }
 
-[data-layout~='split'] {
+[data-layout~='color-formats'] {
   display: grid;
 
   @include config.above('sm-page-break') {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr var(--switch-space) 1fr;
+  }
+}
+
+[data-content='formats'] {
+  @include config.above('sm-page-break') {
+    &:last-of-type {
+      grid-column: 3;
+    }
   }
 }
 
@@ -82,7 +90,7 @@ body {
     display: grid;
     grid-template:
       'bginput switch fginput' auto
-      'bgslide . fgslide' auto / 1fr min-content 1fr;
+      'bgslide . fgslide' auto / 1fr var(--switch-space) 1fr;
   }
 }