@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/palettes/slate.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Slate
-  Overrides primary color variables for the slate palette
-*/
+:root,
+:host {
+  /* --color-slate-950: #0e1118; */
+  /* --color-slate-900: #181c25; */
+  /* --color-slate-850: #202632; */
+  /* --color-slate-800: #2a3140; */
+  /* --color-slate-750: #333c4e; */
+  /* --color-slate-700: #3d475c; */
+  /* --color-slate-650: #48536b; */
+  --color-slate-600: #525f7a;
+  --color-slate-550: #5d6b89;
+  /* --color-slate-500: #687899; */
+  /* --color-slate-450: #7385a9; */
+  /* --color-slate-400: #8191b5; */
+  --color-slate-350: #909ebe;
+  /* --color-slate-300: #a0acc7; */
+  /* --color-slate-250: #b0b9d0; */
+  /* --color-slate-200: #bfc7d9; */
+  /* --color-slate-150: #cfd5e2; */
+  /* --color-slate-100: #dfe3eb; */
+  /* --color-slate-50: #eff1f4; */
+  /* --color-slate: var(--color-slate-550); */
 
-/* Light theme - Slate */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(130, 146, 170, 0.25);
-  --color-primary-rgb: 72, 83, 107;
-  --color-primary-bg: #48536b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(72, 83, 107, 0.5);
-  --color-primary-hover: #383f54;
-  --color-primary-hover-bg: #383f54;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(130, 146, 170, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Slate */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(159, 176, 200, 0.1875);
-    --color-primary-rgb: 159, 176, 200;
-    --color-primary-bg: #48536b;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(159, 176, 200, 0.5);
-    --color-primary-hover: #bdcce0;
-    --color-primary-hover-bg: #525f7a;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(159, 176, 200, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-slate-550), var(--color-slate-350));
+  --color-primary-fill: var(--color-slate-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(159, 176, 200, 0.1875);
-  --color-primary-rgb: 159, 176, 200;
-  --color-primary-bg: #48536b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(159, 176, 200, 0.5);
-  --color-primary-hover: #bdcce0;
-  --color-primary-hover-bg: #525f7a;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(159, 176, 200, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/violet.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Violet
-  Overrides primary color variables for the violet palette
-*/
+:root,
+:host {
+  /* --color-violet-950: #190928; */
+  /* --color-violet-900: #251140; */
+  /* --color-violet-850: #321856; */
+  /* --color-violet-800: #3f1e6d; */
+  /* --color-violet-750: #4d2585; */
+  /* --color-violet-700: #5b2d9c; */
+  /* --color-violet-650: #6935b3; */
+  --color-violet-600: #7540bf;
+  --color-violet-550: #8352c5;
+  /* --color-violet-500: #9062ca; */
+  /* --color-violet-450: #9b71cf; */
+  /* --color-violet-400: #a780d4; */
+  --color-violet-350: #b290d9;
+  /* --color-violet-300: #bd9fdf; */
+  /* --color-violet-250: #c9afe4; */
+  /* --color-violet-200: #d3bfe8; */
+  /* --color-violet-150: #decfed; */
+  /* --color-violet-100: #e8dff2; */
+  /* --color-violet-50: #f3eff7; */
+  /* --color-violet: var(--color-violet-550); */
 
-/* Light theme - Violet */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(167, 128, 212, 0.25);
-  --color-primary-rgb: 117, 64, 191;
-  --color-primary-bg: #7540bf;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(117, 64, 191, 0.5);
-  --color-primary-hover: #6935b3;
-  --color-primary-hover-bg: #6935b3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(167, 128, 212, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Violet */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(189, 159, 223, 0.1875);
-    --color-primary-rgb: 189, 159, 223;
-    --color-primary-bg: #7540bf;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(189, 159, 223, 0.5);
-    --color-primary-hover: #d3bfe8;
-    --color-primary-hover-bg: #8352c5;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(189, 159, 223, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-violet-550), var(--color-violet-350));
+  --color-primary-fill: var(--color-violet-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(189, 159, 223, 0.1875);
-  --color-primary-rgb: 189, 159, 223;
-  --color-primary-bg: #7540bf;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(189, 159, 223, 0.5);
-  --color-primary-hover: #d3bfe8;
-  --color-primary-hover-bg: #8352c5;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(189, 159, 223, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/yellow.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Yellow
-  Overrides primary color variables for the yellow palette
-*/
+:root,
+:host {
+  /* --color-yellow-950: #141103; */
+  /* --color-yellow-900: #1f1c02; */
+  /* --color-yellow-850: #2b2600; */
+  /* --color-yellow-800: #363100; */
+  /* --color-yellow-750: #423c00; */
+  /* --color-yellow-700: #4e4700; */
+  /* --color-yellow-650: #5b5300; */
+  /* --color-yellow-600: #685f00; */
+  --color-yellow-550: #756b00;
+  /* --color-yellow-500: #827800; */
+  /* --color-yellow-450: #908501; */
+  /* --color-yellow-400: #9e9200; */
+  --color-yellow-350: #ad9f00;
+  /* --color-yellow-300: #bbac00; */
+  /* --color-yellow-250: #caba01; */
+  /* --color-yellow-200: #d9c800; */
+  /* --color-yellow-150: #e8d600; */
+  --color-yellow-100: #f2df0d;
+  /* --color-yellow-50: #fdf1b4; */
+  /* --color-yellow: var(--color-yellow-550); */
 
-/* Light theme - Yellow */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(209, 188, 0, 0.25);
-  --color-primary-rgb: 138, 122, 0;
-  --color-primary-bg: #fcf19c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(138, 122, 0, 0.5);
-  --color-primary-hover: #6b5f00;
-  --color-primary-hover-bg: #fdf2b4;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(209, 188, 0, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Yellow */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(233, 212, 0, 0.1875);
-    --color-primary-rgb: 233, 212, 0;
-    --color-primary-bg: #fcf19c;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(233, 212, 0, 0.5);
-    --color-primary-hover: #f7ec58;
-    --color-primary-hover-bg: #fcf4b6;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(233, 212, 0, 0.375);
-    --color-primary-inverse: #000;
-    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-yellow-550), var(--color-yellow-350));
+  --color-primary-fill: var(--color-yellow-100);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(233, 212, 0, 0.1875);
-  --color-primary-rgb: 233, 212, 0;
-  --color-primary-bg: #fcf19c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(233, 212, 0, 0.5);
-  --color-primary-hover: #f7ec58;
-  --color-primary-hover-bg: #fcf4b6;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(233, 212, 0, 0.375);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
 }

package/src/palettes/zinc.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Zinc
-  Overrides primary color variables for the zinc palette
-*/
+:root,
+:host {
+  /* --color-zinc-950: #0f1114; */
+  /* --color-zinc-900: #191c20; */
+  /* --color-zinc-850: #23262c; */
+  /* --color-zinc-800: #2d3138; */
+  /* --color-zinc-750: #373c44; */
+  /* --color-zinc-700: #424751; */
+  /* --color-zinc-650: #4d535e; */
+  /* --color-zinc-600: #5c6370; */
+  --color-zinc-550: #646b79;
+  /* --color-zinc-500: #6f7887; */
+  /* --color-zinc-450: #7b8495; */
+  /* --color-zinc-400: #8891a4; */
+  --color-zinc-350: #969eaf;
+  /* --color-zinc-300: #a4acba; */
+  /* --color-zinc-250: #b3b9c5; */
+  /* --color-zinc-200: #c2c7d0; */
+  /* --color-zinc-150: #d1d5db; */
+  /* --color-zinc-100: #e0e3e7; */
+  /* --color-zinc-50: #f0f1f3; */
+  /* --color-zinc: var(--color-zinc-550); */
 
-/* Light theme - Zinc */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(127, 139, 158, 0.25);
-  --color-primary-rgb: 82, 95, 122;
-  --color-primary-bg: #525f7a;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(82, 95, 122, 0.5);
-  --color-primary-hover: #424b61;
-  --color-primary-hover-bg: #424b61;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(127, 139, 158, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Zinc */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(155, 168, 189, 0.1875);
-    --color-primary-rgb: 155, 168, 189;
-    --color-primary-bg: #525f7a;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(155, 168, 189, 0.5);
-    --color-primary-hover: #bac5d4;
-    --color-primary-hover-bg: #5d6b89;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(155, 168, 189, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-zinc-550), var(--color-zinc-350));
+  --color-primary-fill: var(--color-zinc-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(155, 168, 189, 0.1875);
-  --color-primary-rgb: 155, 168, 189;
-  --color-primary-bg: #525f7a;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(155, 168, 189, 0.5);
-  --color-primary-hover: #bac5d4;
-  --color-primary-hover-bg: #5d6b89;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(155, 168, 189, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/semantics/{_aria-busy.css → attributes/_aria-busy.css}

@@ -1,6 +1,3 @@
-/**
- * Loading ([aria-busy=true])
- */
 [aria-busy=true]:not(input, select, textarea, html, form) {
   white-space: nowrap;
 

package/src/semantics/{_hidden.css → attributes/_hidden.css}

@@ -1,6 +1,3 @@
-/**
- * Hidden elements
- */
 [hidden],
 template {
   display: none !important;

package/src/semantics/attributes/_popover.css

@@ -0,0 +1,13 @@
+[popover] {
+  overflow: auto;
+  border: 0;
+  padding: 0;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  height: unset;
+  margin: unset;
+
+  &:popover-open {
+    display: block !important;
+  }
+}

package/src/semantics/attributes/_role-group-search.css

@@ -0,0 +1,137 @@
+[role="search"],
+[role="group"] {
+    border-radius: var(--radius);
+    box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    display: inline-flex;
+    gap: 0;
+    margin-bottom: var(--spacing);
+    position: relative;
+    transition: box-shadow var(--transition);
+    vertical-align: middle;
+    width: 100%;
+
+    & > *:not(details),
+    & input:not([type="checkbox"], [type="radio"]),
+    & select {
+        position: relative;
+        flex: 1 1 auto;
+        margin-bottom: 0;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-size) * -1);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:focus {
+            z-index: 2;
+        }
+    }
+
+    & button,
+    & [type="submit"],
+    & [type="reset"],
+    & [type="button"],
+    & [role="button"] {
+        width: auto;
+    }
+
+    /* Details dropdown inside group */
+    & > details {
+        position: relative;
+        margin-bottom: 0;
+        /* Constrain details height to just the button, not the dropdown menu */
+        height: calc(
+            1rem * var(--line-height) + var(--input-spacing-vertical) *
+                2 + var(--border-size) * 2
+        );
+        overflow: visible;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-size) * -1);
+
+            & > summary {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        &:not(:last-child) > summary {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        & > summary:focus {
+            z-index: 2;
+        }
+
+        /* Ensure consistent height with other form elements in the group */
+        & > summary[role="button"] {
+            display: flex;
+            align-items: center;
+            height: 100%;
+
+            &::after {
+                height: calc(1rem * var(--line-height, 1.5));
+            }
+        }
+    }
+}
+
+@supports selector(:has(*)) {
+    [role="search"],
+    [role="group"] {
+        &:has(
+            button:focus,
+            [type="submit"]:focus,
+            [type="button"]:focus,
+            [role="button"]:focus
+        ) {
+            --group-shadow: var(--group-shadow-focus-button);
+
+            & input:not([type="checkbox"], [type="radio"]),
+            & select {
+                border-color: transparent;
+            }
+        }
+
+        &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+            --group-shadow: var(--group-shadow-focus-input);
+
+            & button,
+            & [type="submit"],
+            & [type="button"],
+            & [role="button"] {
+                --button-shadow: 0 0 0 var(--border-size)
+                    var(--color-primary-fill);
+                --button-shadow-hover: 0 0 0 var(--border-size)
+                    var(--color-primary-fill-hover);
+            }
+        }
+
+        & button:focus,
+        & [type="submit"]:focus,
+        & [type="reset"]:focus,
+        & [type="button"]:focus,
+        & [role="button"]:focus {
+            box-shadow: none;
+        }
+    }
+}
+
+[role="search"] {
+    & > :first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+    }
+
+    & > :last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+    }
+}

package/src/semantics/{_role-toolbar.css → attributes/_role-toolbar.css}

@@ -1,9 +1,6 @@
-/**
- * Minimal grid system with auto-layout columns
- */
 [role="toolbar"] {
-  grid-column-gap: var(--grid-column-gap);
-  grid-row-gap: var(--grid-row-gap);
+  grid-column-gap: var(--spacing);
+  grid-row-gap: var(--spacing);
   display: grid;
   grid-template-columns: 1fr;
 

package/src/semantics/{_role-tooltip.css → attributes/_role-tooltip.css}

@@ -1,6 +1,3 @@
-/**
- * Tooltip ([role="tooltip"])
- */
 :has(> [role="tooltip"]) {
   position: relative;
   display: inline-block;
@@ -21,8 +18,8 @@
   left: 50%;
   padding: 0.25rem 0.5rem;
   transform: translate(-50%, -0.25rem);
-  border-radius: var(--border-radius);
-  background: var(--tooltip-bg);
+  border-radius: var(--radius);
+  background: var(--tooltip-fill);
   color: var(--tooltip-text);
   font-style: normal;
   font-weight: var(--font-weight);
@@ -40,7 +37,7 @@
     top: 100%;
     left: 50%;
     transform: translate(-50%, 0);
-    border-top: 0.3rem solid var(--tooltip-bg);
+    border-top: 0.3rem solid var(--tooltip-fill);
     border-right: 0.3rem solid transparent;
     border-left: 0.3rem solid transparent;
   }
@@ -55,7 +52,7 @@
       bottom: 100%;
       transform: translate(-50%, 0);
       border-top: none;
-      border-bottom: 0.3rem solid var(--tooltip-bg);
+      border-bottom: 0.3rem solid var(--tooltip-fill);
     }
   }
 
@@ -72,7 +69,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-left: 0.3rem solid var(--tooltip-bg);
+      border-left: 0.3rem solid var(--tooltip-fill);
       border-right: none;
     }
   }
@@ -90,7 +87,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-right: 0.3rem solid var(--tooltip-bg);
+      border-right: 0.3rem solid var(--tooltip-fill);
       border-left: none;
     }
   }

package/src/semantics/elements/_abbr.css

@@ -0,0 +1,5 @@
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}

package/src/semantics/elements/_address.css

@@ -0,0 +1,7 @@
+address {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+}

package/src/semantics/elements/_article.css

@@ -0,0 +1,3 @@
+article {
+  width: 100%;
+}

package/src/semantics/elements/_aside.css

@@ -0,0 +1,10 @@
+aside {
+  width: var(--sidebar-size) !important;
+  padding: var(--spacing) !important;
+
+  :where(ol, ul, li) {
+    align-items: stretch !important;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/src/semantics/elements/_blockquote.css

@@ -0,0 +1,18 @@
+blockquote {
+  border-inline-end: none;
+  border-inline-start: 0.25rem solid var(--color-border);
+  border-left: 0.25rem solid var(--color-border);
+  border-right: none;
+  color: var(--color-text);
+  display: block;
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+  padding: var(--spacing);
+
+  & footer {
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
+    color: var(--color-text-muted);
+  }
+}

package/src/semantics/elements/_body.css

@@ -0,0 +1,5 @@
+body {
+  width: 100%;
+  min-height: 100svh;
+  margin: 0; /* modern-normalize */
+}