add styles for warning message

oddbird · Jan 24, 2025 · bf7d3eb · bf7d3eb
1 parent d4dccb8
commit bf7d3eb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
@@ -36,7 +36,11 @@
       <span class="result-ratio-number">{displayRatio}:1</span>
     </h3>
     {#if alphaWarning}
-      <p class="result-warning"><Icon name="warning" />{alphaWarning}</p>
+      <div class="result-warning-info">
+        <p data-color-info="warning" class="result-warning">
+          <Icon name="warning" />{alphaWarning}
+        </p>
+      </div>
     {/if}
 
     <p class="result-intro">
@@ -116,20 +120,26 @@
   }
 
   .contrast-info {
+    column-gap: var(--shim);
     display: grid;
     grid-area: contrastinfo;
+    // fixed row height to prevent layout shift when warning appears
     grid-template:
       'heading heading' min-content
-      'number warning' var(--ratio-warning-height) / auto auto;
+      'number warning' var(--ratio-warning-height) / auto 1fr;
+    margin-block-end: var(--contrast-info-block-end, var(--gutter));
 
     @include config.between('sm-column-break', 'lg-page-break') {
+      --contrast-info-block-end: 0;
       gap: var(--shim) var(--gutter);
       // fixed width column to prevent layout shift as the ratio number changes
       // fixed row height to prevent layout shift when warning appears
       grid-template:
         'heading number' min-content
-        'heading warning' var(--ratio-warning-height)
-        'intro   intro' 1fr / auto var(--ratio-width);
+        'intro warning' var(--ratio-warning-height) / auto minmax(
+          var(--ratio-width),
+          1fr
+        );
     }
 
     @include config.above('lg-page-break') {
@@ -160,19 +170,30 @@
   }
 
   .result-ratio {
-    align-items: start;
+    align-items: var(--result-ratio-align, center);
     display: inline-flex;
     grid-area: number;
     line-height: 0.7; // weird number alignment
 
     @include config.between('sm-column-break', 'lg-page-break') {
+      --result-ratio-align: start;
       justify-content: flex-end;
     }
   }
-
-  .result-warning {
+  .result-warning-info {
+    align-items: center;
+    display: flex;
     grid-area: warning;
   }
+  .result-warning {
+    --warning-bg: var(--bg);
+    --warning-padding-block: var(--shim);
+    --warning-padding-inline: var(--shim);
+    --warning-size: border: var(--border-width) solid var(--border);
+    border-radius: var(--border-radius);
+    display: flex;
+    gap: var(--half-shim);
+  }
 
   .result-ratio-number {
     background-color: var(--status-result-bg, var(--bgcolor));

diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
@@ -73,6 +73,7 @@ strong {
   font-size: var(--color-info-size, var(--warning-size));
   margin-bottom: var(--warning-margin-bottom);
   padding-block: var(--warning-padding-block);
+  padding-inline: var(--warning-padding-inline);
   text-align: var(--warning-align, left);
 
   main > & {