Refactor typography and settings with new token structure

.vscode/settings.json

@@ -5,5 +5,8 @@
     "mcss",
     "tera"
   ],
-  "workbench.preferredDarkColorTheme": "GitHub Dark"
+  "workbench.preferredDarkColorTheme": "GitHub Dark",
+  "search.exclude": {
+    "**/dist": true
+  }
 }

dist/css/elements.form.css

@@ -48,9 +48,9 @@ datalist {
 }
 
 fieldset {
-  border: 1px solid var(--ui-border-color);
-  border-radius: var(--radius-lg);
-  padding: var(--sm3);
+  border: var(--fieldset-border-width) solid var(--fieldset-border-color);
+  border-radius: var(--fieldset-border-radius);
+  padding: var(--fieldset-padding);
 
   ul:has([type="checkbox"], [type="radio"]) {
     padding-inline-start: 0;
@@ -82,7 +82,7 @@ input {
     border-radius: var(--input-border-radius);
   }
   &:where(:not([type="file"])) {
-    border: 1px solid var(--ui-border-color);
+    border: var(--input-border-width) solid var(--input-border-color);
   }
   &[type="file"] {
     width: 100%;
@@ -96,7 +96,7 @@ input {
 label {
   display: block;
   &:has(+ :is(input, select, textarea)) {
-    margin-bottom: var(--xs1);
+    margin-bottom: var(--label-spacing);
   }
 }
 
@@ -113,46 +113,40 @@ legend {
 }
 
 meter {
-  --meter-height: var(--sm1);
-  --meter-radius: var(--radius-md);
-  --meter-color-track: var(--primary-100);
-  --meter-color-low: var(--no-400);
-  --meter-color-med: var(--maybe-400);
-  --meter-color-high: var(--yes-400);
   width: 100%;
-  background: var(--meter-color-track);
-  border-radius: var(--meter-radius);
+  background: var(--meter-track-color);
+  border-radius: var(--meter-border-radius);
   height: var(--meter-height);
   /* webkit */
   &::-webkit-meter-bar {
-    background: var(--meter-color-track);
+    background: var(--meter-track-color);
   }
   &::-webkit-meter-bar,
   &::-webkit-meter-optimum-value,
   &::-webkit-meter-suboptimum-value,
   &::-webkit-meter-even-less-good-value {
     height: var(--meter-height);
     border: none;
-    border-radius: var(--meter-radius);
+    border-radius: var(--meter-border-radius);
   }
   &::-webkit-meter-even-less-good-value {
-    background: var(--meter-color-low);
+    background: var(--meter-low-color);
   }
   &::-webkit-meter-suboptimum-value {
-    background: var(--meter-color-med);
+    background: var(--meter-medium-color);
   }
   &::-webkit-meter-optimum-value {
-    background: var(--meter-color-high);
+    background: var(--meter-high-color);
   }
   /* mozilla */
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: var(--meter-color-low);
+    background: var(--meter-low-color);
   }
   &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: var(--meter-color-med);
+    background: var(--meter-medium-color);
   }
   &:-moz-meter-optimum::-moz-meter-bar {
-    background: var(--meter-color-high);
+    background: var(--meter-high-color);
   }
 }
 
@@ -166,54 +160,50 @@ output {
 }
 
 progress {
-  --progress-height: var(--sm1);
-  --progress-color: var(--primary-500);
-  --progress-track-color: var(--primary-100);
-  --progress-radius: var(--radius-md);
   appearance: none;
   width: 100%;
   /* mozilla */
   height: var(--progress-height);
   background: var(--progress-track-color);
-  border-radius: var(--progress-radius);
+  border-radius: var(--progress-border-radius);
   border: none;
   &::-moz-progress-bar {
     background: var(--progress-color);
-    border-radius: var(--progress-radius);
+    border-radius: var(--progress-border-radius);
   }
   /* webkit */
   &::-webkit-progress-bar {
     width: 100%;
     background: var(--progress-track-color);
-    border-radius: var(--progress-radius);
+    border-radius: var(--progress-border-radius);
     height: var(--progress-height);
   }
   &::-webkit-progress-value {
     background: var(--progress-color);
-    border-radius: var(--progress-radius);
+    border-radius: var(--progress-border-radius);
   }
 }
 
 select {
-  --icon-size: 24px;
-  --split: calc(100% - var(--icon-size));
+  /* derived, stays local */
+  --split: calc(100% - var(--select-icon-size));
   display: flex;
   appearance: none;
   height: var(--input-height);
   padding: var(--xs1) calc(var(--input-padding) + var(--md1)) var(--xs1)
     var(--input-padding);
-  border: 1px solid var(--ui-border-color);
+  border: var(--input-border-width) solid var(--input-border-color);
   border-radius: var(--input-border-radius);
   background: linear-gradient(
     to right,
     var(--body-background-color) 0 var(--split),
     var(--text-color) var(--split) 100%
   );
   mask-image:
-    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E"),
+    var(--select-icon),
     linear-gradient(to right, transparent calc(var(--split) - 1px), red 0),
     linear-gradient(red 0 0);
-  mask-size: var(--icon-size), auto, auto;
+  mask-size: var(--select-icon-size), auto, auto;
   mask-position:
     calc(100% - var(--xs1)) center,
     0 0,
@@ -249,9 +239,9 @@ select {
 
 textarea {
   width: 100%;
-  padding: var(--xs3);
+  padding: var(--input-padding);
   border-radius: var(--input-border-radius);
-  border: 1px solid var(--ui-border-color);
+  border: var(--input-border-width) solid var(--input-border-color);
   resize: vertical;
   &:not([rows]) {
     min-height: 6em;

dist/css/elements.interactive.css

@@ -30,12 +30,12 @@ xxl: 1920px
 dialog {
   /* body scrolling is stopped by adding .body-is-locked on <dialog> */
   /* But it can be added to any element. See elements.sectioning.css > body { … }  */
-  min-width: var(--tera1);
-  max-width: var(--tera3);
-  padding: var(--lg1) var(--md1);
-  border: 1px solid light-dark(var(--base-200), var(--base-800));
-  background-color: light-dark(var(--base-50), var(--base-900));
-  border-radius: var(--radius-lg);
+  min-width: var(--dialog-min-width);
+  max-width: var(--dialog-max-width);
+  padding: var(--dialog-padding);
+  border: var(--dialog-border-width) solid var(--dialog-border-color);
+  background-color: var(--dialog-background-color);
+  border-radius: var(--dialog-border-radius);
 
   &::backdrop {
     background: var(--dialog-backdrop-color);
@@ -45,7 +45,9 @@ dialog {
   [aria-label="close pop-up"] {
     position: absolute;
     top: var(--xs3);
-    right: var(--xs3); /* deliberately physical: close button pinned to a visual corner */
+    right: var(
+      --xs3
+    ); /* deliberately physical: close button pinned to a visual corner */
     background: transparent;
     border: none;
     outline: none;
@@ -59,10 +61,10 @@ dialog {
 }
 
 details {
-  padding: var(--sm1) var(--sm1);
-  border: 1px solid light-dark(var(--base-200), var(--base-800));
-  background-color: light-dark(var(--base-50), var(--base-900));
-  border-radius: var(--radius-lg);
+  padding: var(--details-padding);
+  border: var(--details-border-width) solid var(--details-border-color);
+  background-color: var(--details-background-color);
+  border-radius: var(--details-border-radius);
   cursor: pointer;
 
   summary {
@@ -74,15 +76,21 @@ details {
     }
     &::after {
       content: "";
-      width: 24px;
-      height: 24px;
-      background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20id='chevron-down'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E") no-repeat;
-      transition: var(--transition);
+      width: var(--details-icon-size);
+      height: var(--details-icon-size);
+      /* icon as a mask painted with the text color, so it follows the
+         color scheme (an SVG in background-image can't see currentColor
+         and always renders black) */
+      background-color: currentColor;
+      mask-image: var(--details-icon);
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      transition: transform var(--transition);
     }
   }
 
   &[open] > summary {
-    margin-bottom: var(--xs3);
+    margin-bottom: var(--details-spacing);
     &::after {
       transform: rotate(180deg);
     }

dist/css/elements.media.css

@@ -70,18 +70,18 @@ figure {
   /* caption at bottom or top */
   &:has(* + figcaption) {
     figcaption {
-      margin-top: var(--xs2);
+      margin-top: var(--figcaption-spacing);
     }
   }
   &:has(figcaption + *) {
     figcaption {
-      margin-bottom: var(--xs2);
+      margin-bottom: var(--figcaption-spacing);
     }
   }
 }
 
 iframe {
-  border: 1px solid var(--ui-border-color);
+  border: var(--border-sm) solid var(--ui-border-color);
 }
 
 img {

dist/css/elements.sectioning.css

@@ -38,7 +38,7 @@ body {
   background-color: var(--body-background-color);
   color: var(--text-color);
   font-family: var(--text);
-  line-height: 1.5;
+  line-height: var(--body-line-height);
 
   /* for elements like dialog etc. that require scrolling turned off */
   &:has(.body-is-locked) {

dist/css/elements.table.css

@@ -29,7 +29,7 @@ xxl: 1920px
 
 caption {
   caption-side: bottom;
-  margin-top: var(--xs3);
+  margin-top: var(--table-caption-spacing);
   font-size: var(--text-sm);
 }
 
@@ -38,7 +38,7 @@ colgroup {
 
 table {
   border-spacing: 0;
-  border: 1px solid var(--table-border-color);
+  border: var(--table-border-width) solid var(--table-border-color);
   border-radius: var(--table-border-radius);
   background-color: var(--table-background-color);
 }
@@ -47,8 +47,8 @@ th,
 td {
   text-align: start;
   padding: var(--table-padding);
-  border-bottom: 1px solid var(--table-border-color);
-  border-inline-start: 1px solid var(--table-border-color);
+  border-bottom: var(--table-border-width) solid var(--table-border-color);
+  border-inline-start: var(--table-border-width) solid var(--table-border-color);
 }
 
 tr {
@@ -73,7 +73,7 @@ tbody {
 tfoot {
   th,
   td {
-    border-top: 1px solid var(--table-border-color);
+    border-top: var(--table-border-width) solid var(--table-border-color);
     border-bottom-width: 0;
   }
 }