Initialize version two

MIGRATION.md

@@ -0,0 +1,28 @@
+# Migration guide
+
+
+The migration guide is a work in progress.
+
+
+## Removed classes
+- `.-dark-theme`: Set `html { color-sheme: dark; }` instead.
+- `.-no-light-theme`: Set `html { color-sheme: light; }` instead.
+- `.all:initial`
+- `.grid`: Use new helper, **TODO**
+- `.nested-list`: This utility class is now the default (nested `<ul>` and `<ol>` do not get extra spacing). To get the old behavior, add `.margin-block` to the nested `<ul>` or `<ol>`.
+
+## Renamed classes
+- `.f-row` -> `.flex-row`
+- `.f-col` -> `.flex-col`
+- `.f-switch` -> `.flex-switch`
+- `.primary-font` -> `.main-font`
+- `.big` -> `.<big>`
+
+## Removed variables
+- `--rhythm`: Set a value for the `line-height`{.token .attr-name} property on the `html` element instead.
+- `--grid-row-width`:
+- `--grid-col-width`:
+
+
+## Rename variables
+- `--f-switch-threshold` -> `--flex-switch-threshold`

src/aria.css

@@ -18,7 +18,7 @@
   &:is(button) {
     /* button-specific resets */
     font-size: 1em;
-    line-height: var(--rhythm, 1.4rem);
+    line-height: 1rlh;
     box-shadow: none;
     &:is(:hover, :focus-visible, :active, :disabled) {
       filter: none;
@@ -220,7 +220,7 @@ input[type=checkbox][role=switch] {
     margin-block-end: auto;
   }
   &:not(label > *) {
-    padding-block: calc(var(--gap) / 4 + (var(--rhythm, 1rlh) - 1em) / 2);
+    padding-block: calc(var(--gap) / 4 + (1rlh - 1em) / 2);
   }
 
   label:has(> &) {

src/colorways.css

@@ -46,30 +46,37 @@
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block\:none { border-block: none }
 .border-block {
   border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block-start\:none { border-block-start: none }
 .border-block-start {
   border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-block-end\:none { border-block-end: none }
 .border-block-end {
   border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline\:none { border-inline: none }
 .border-inline {
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline-start\:none { border-inline-start: none }
 .border-inline-start {
   border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }
 .border-inline-end\:none { border-inline-end: none }
 .border-inline-end {
   border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);
+  border-radius: var(--border-radius);
 }

src/components.css

@@ -107,7 +107,7 @@ details,
       --full-width: calc(100vi - var(--sidebar-width));
       --eff-line-length:
         min(
-          calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+          calc(var(--full-width) - 2rlh),
           var(--line-length)
         );
       padding-block-start: var(--gap);
@@ -131,7 +131,7 @@ details,
       --full-width: calc(100vi - var(--sidebar-width));
       --eff-line-length:
         min(
-          calc(var(--full-width) - (2 * var(--rhythm, 1rlh))),
+          calc(var(--full-width) - 2rlh),
           var(--line-length)
         );
       padding-block-start: var(--gap);
@@ -174,12 +174,12 @@ details,
   font-family: var(--secondary-font);
   border: var(--chip-border-width) var(--chip-border-style) var(--accent);
   background: var(--box-bg);
-  border-radius: calc(var(--rhythm, 1rlh) / 2);
-  padding-inline: calc(var(--rhythm, 1rlh) / 2);
+  border-radius: 0.5rlh;
+  padding-inline: 0.5rlh;
 }
 
 .navbar {
-  padding: var(--rhythm, 1rlh);
+  padding: 1rlh;
 
   font-family: var(--secondary-font);
 
@@ -223,7 +223,7 @@ details,
   & nav ul[role=list] {
     display: flex;
     flex-flow: row;
-    gap: var(--rhythm, 1rlh);
+    gap: 1rlh;
     padding-inline-start: 0;
 
     & * { flex-shrink: 0 }
@@ -277,7 +277,7 @@ details,
   color: currentcolor;
   padding: 0;
   box-shadow: none;
-  line-height: var(--rhythm, 1rlh);
+  line-height: 1rlh;
   font-size: var(--wcag-target-size-aa);
   inline-size: var(--wcag-target-size-aa);
   block-size: var(--wcag-target-size-aa);
@@ -306,7 +306,7 @@ details,
     color: var(--accent);
   }
 
-  &:is(.big, .\<big\>) {
+  &.\<big\> {
     font-size: var(--wcag-target-size-aaa);
     inline-size: var(--wcag-target-size-aaa);
     block-size: var(--wcag-target-size-aaa);
@@ -325,9 +325,9 @@ aside[role=note] {
     0px,
     calc(
       0px - min(
-        var(--gutter-width) - var(--rhythm, 1rlh),
-        var(--sidenote-width) + var(--rhythm, 1rlh)
-      ) + var(--rhythm, 1rlh) - 1ch
+        var(--gutter-width) - 1rlh,
+        var(--sidenote-width) + 1rlh
+      ) + 1rlh - 1ch
     )
   );
   --density: 0.5;

src/flex.css

@@ -1,24 +1,23 @@
 
-.flex-row, .f-row {
+.flex-row {
   display: flex;
   flex-direction: row;
   gap: var(--gap);
   & > * { margin: 0 }
 }
 
-.flex-column, .f-col {
+.flex-column {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   & > * { margin: 0 }
 }
 
-.flex-switch, .f-switch {
+.flex-switch {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
-  --f-switch-threshold: 55ch;  /* Deprecated name */
-  --flex-switch-threshold: var(--f-switch-threshold);
+  --flex-switch-threshold: 55ch;
 
   & > * {
     margin: 0;