Update styles for grouped formats

oddbird · Nov 13, 2023 · 41aa529 · 41aa529
1 parent 4d60df1
commit 41aa529
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div data-content="format-group">
-  <h5>{formatGroup.name}</h5>
+  <h2 class="label section-heading">{formatGroup.name}</h2>
   {#if !isInGamut}
     <span data-color-info="warning"
       >Selected color is <ExternalLink
@@ -39,7 +39,12 @@
 </div>
 
 <style lang="scss">
-  [data-color-info='warning'] {
-    grid-area: message;
+  [data-content~='format-group'] {
+    --heading-transform: none;
+
+    column-gap: var(--gutter);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    margin-block-end: var(--double-gutter);
   }
 </style>
diff --git a/src/lib/components/colors/Formats.svelte b/src/lib/components/colors/Formats.svelte
@@ -30,18 +30,18 @@
 </script>
 
 <div data-content="formats" data-column="tool">
-  <h4 class="small-only label">{displayType} Color</h4>
+  <h2 class="small-only label">{displayType} Color</h2>
   {#each otherFormats as formatGroup}
     <FormatGroup {type} {color} {formatGroup} />
   {/each}
 </div>
 
 <style lang="scss">
   [data-content~='formats'] {
-    margin-bottom: var(--double-gutter);
+    margin-block-end: var(--double-gutter);
   }
 
-  .label {
-    --label-margin-bottom: var(--gutter);
+  .small-only {
+    margin-block-end: var(--gutter);
   }
 </style>
diff --git a/src/lib/components/colors/Output.svelte b/src/lib/components/colors/Output.svelte
@@ -28,15 +28,13 @@
 </ul>
 
 <style lang="scss">
+  [data-group~='output'] {
+    grid-column: 1 / -1;
+  }
+
   li {
     column-gap: 1ch;
     display: grid;
-    grid-template:
-      'copy color' auto
-      'copy message' 3ex / auto 1fr;
-  }
-
-  [data-color-info='value'] {
-    grid-area: color;
+    grid-template-columns: auto 1fr;
   }
 </style>
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
@@ -22,8 +22,7 @@
 
 h1,
 h2,
-h3,
-h4 {
+h3 {
   font-weight: normal;
   margin: 0;
 }
@@ -49,7 +48,7 @@ h4 {
 .section-heading {
   @include heading;
 
-  --label-margin-bottom: var(--gutter-plus);
+  --label-margin-bottom: var(--gutter);
 
   @include config.below('sm-page-break') {
     --heading-size: var(--medium);