@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/semantics/elements/_del.css

@@ -1,3 +1,3 @@
 del {
-  color: rgb(var(--color-danger-rgb));
+  color: var(--color-danger-text);
 }

package/src/semantics/elements/_details.css

@@ -1,6 +1,7 @@
-/**
- * Accordion (<details>)
- */
+summary {
+  display: list-item; /* modern-normalize */
+}
+
 details {
   display: block;
   margin-bottom: var(--spacing);
@@ -12,7 +13,7 @@ details {
     transition: color var(--transition);
 
     &:not([role]) {
-      color: var(--accordion-closed-summary);
+      color: var(--details-summary-text);
     }
 
     &::-webkit-details-marker {
@@ -46,14 +47,14 @@ details {
       outline: none;
 
       &:not([role]) {
-        color: var(--accordion-active-summary);
+        color: var(--details-summary-text-hover);
       }
     }
 
     &:focus-visible:not([role]) {
-      outline: var(--outline-width) solid var(--color-primary-focus);
+      outline: var(--outline-size) solid var(--color-primary-focus-ring);
       outline-offset: calc(var(--spacing, 1rem) * 0.5);
-      color: rgb(var(--color-primary-rgb));
+      color: var(--color-primary-text);
     }
 
     &[role=button] {
@@ -61,7 +62,7 @@ details {
       text-align: left;
 
       &:focus-visible {
-        outline: var(--outline-width) solid var(--color-primary-focus);
+        outline: var(--outline-size) solid var(--color-primary-focus-ring);
         outline-offset: calc(var(--spacing, 1rem) * 0.5);
       }
 
@@ -76,7 +77,7 @@ details {
     margin-bottom: var(--spacing);
 
     &:not([role]):not(:focus) {
-      color: var(--accordion-open-summary);
+        color: var(--details-summary-text-open);
     }
 
     &::after {
@@ -119,18 +120,18 @@ details:has(> summary[aria-haspopup="menu"]) {
   }
 
   & summary:not([role="button"]) {
-    --outline-width: 0.0625rem;
+    --outline-size: 0.0625rem;
   }
 
   & > :where(summary:not([role])) {
     display: flex;
     align-items: center;
-    height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
-    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-    border: var(--border-width) solid var(--form-border-color);
-    border-radius: var(--border-radius);
-    background-color: var(--form-bg);
-    color: var(--form-placeholder-color);
+    height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
+    padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
+    border: var(--border-size) solid var(--input-border);
+    border-radius: var(--radius);
+    background-color: var(--input-fill);
+    color: var(--input-placeholder-text);
     line-height: inherit;
     cursor: pointer;
     user-select: none;
@@ -138,12 +139,12 @@ details:has(> summary[aria-haspopup="menu"]) {
   }
 
   & > :where(summary:not([role]):active, summary:not([role]):focus) {
-    border-color: var(--form-active-border);
-    background-color: var(--form-active-bg);
+    border-color: var(--input-border-focus);
+    background-color: var(--input-fill-active);
   }
 
   & > :where(summary:not([role]):focus) {
-    box-shadow: 0 0 0 var(--outline-width) var(--form-focus);
+    box-shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
   }
 
   & > :where(summary:not([role]):focus-visible) {
@@ -151,15 +152,13 @@ details:has(> summary[aria-haspopup="menu"]) {
   }
 
   & > :where(summary:not([role])[aria-invalid=false]) {
-    --form-border-color: var(--form-valid-border);
-    --form-active-border: var(--form-valid-focus);
-    --form-focus: var(--form-valid-focus);
+    --input-border: var(--color-success-fill);
+    --input-border-focus: var(--color-success-fill-hover);
   }
 
   & > :where(summary:not([role])[aria-invalid=true]) {
-    --form-border-color: var(--form-invalid-border);
-    --form-active-border: var(--form-invalid-focus);
-    --form-focus: var(--form-invalid-focus);
+    --input-border: var(--color-danger-fill);
+    --input-border-focus: var(--color-danger-fill-hover);
   }
 
   & > :where(summary + ul[role="menu"]) {
@@ -171,11 +170,11 @@ details:has(> summary[aria-haspopup="menu"]) {
     width: 100%;
     min-width: fit-content;
     margin: 0;
-    margin-top: var(--outline-width);
+    margin-top: var(--outline-size);
     padding: 0;
-    border: var(--border-width) solid var(--menu-border);
-    border-radius: var(--border-radius);
-    background-color: var(--menu-bg);
+    border: var(--border-size) solid var(--menu-border);
+    border-radius: var(--radius);
+    background-color: var(--menu-fill);
     box-shadow: var(--menu-shadow);
     color: var(--menu-text);
     white-space: nowrap;
@@ -191,21 +190,21 @@ details:has(> summary[aria-haspopup="menu"]) {
   & > summary + ul[role="menu"] li {
     width: 100%;
     margin-bottom: 0;
-    padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+    padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
     list-style: none;
 
     &:first-of-type {
-      margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
+      margin-top: calc(var(--input-spacing-vertical) * 0.5);
     }
 
     &:last-of-type {
-      margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
+      margin-bottom: calc(var(--input-spacing-vertical) * 0.5);
     }
 
     & a {
       display: block;
-      margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
-      padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+      margin: calc(var(--input-spacing-vertical) * -0.5) calc(var(--input-spacing-horizontal) * -1);
+      padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
       overflow: hidden;
       border-radius: 0;
       color: var(--menu-text);
@@ -217,7 +216,7 @@ details:has(> summary[aria-haspopup="menu"]) {
       &:active,
       &:focus-visible,
       &[aria-current]:not([aria-current=false]) {
-        background-color: var(--menu-hover-bg);
+        background-color: var(--menu-fill-hover);
       }
     }
 
@@ -226,7 +225,7 @@ details:has(> summary[aria-haspopup="menu"]) {
     }
 
     &:has(label):hover {
-      background-color: var(--menu-hover-bg);
+      background-color: var(--menu-fill-hover);
     }
   }
 
@@ -269,15 +268,15 @@ nav details:has(> summary[aria-haspopup="menu"]) {
     display: flex;
     align-items: center;
     height: auto;
-    padding: calc(var(--nav-link-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
+    padding: calc(var(--nav-link-gap) - var(--border-size) * 2) var(--nav-link-gap);
   }
 
   & > :where(summary:not([role]):focus-visible) {
-    box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
+    box-shadow: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
   }
 
   & summary:focus-visible {
-    --outline-width: 0.125rem;
+    --outline-size: 0.125rem;
   }
 
   /* Styles for dropdowns with role="button" inside nav */
@@ -286,6 +285,6 @@ nav details:has(> summary[aria-haspopup="menu"]) {
     align-items: center;
     width: auto;
     height: auto;
-    padding: calc(var(--nav-link-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
+    padding: calc(var(--nav-link-gap) - var(--border-size) * 2) var(--nav-link-gap);
   }
 }

package/src/semantics/elements/_dialog.css

@@ -1,7 +1,3 @@
-/**
- * Modal (<dialog>)
- */
-
 /* Prevent body scroll and interaction when modal is open */
 body:has(dialog[open]) {
   overflow: hidden;
@@ -20,9 +16,9 @@ dialog {
   margin: auto;
   overflow: auto;
   padding: var(--spacing);
-  border-radius: var(--border-radius);
-  background: var(--pane-bg);
-  box-shadow: var(--pane-shadow);
+  border-radius: var(--radius);
+  background: var(--dialog-fill);
+  box-shadow: var(--dialog-shadow);
   border: 0;
 
   /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
@@ -45,8 +41,8 @@ dialog {
 
   /* Backdrop overlay */
   &::backdrop {
-    backdrop-filter: var(--backdrop-overlay-filter);
-    background-color: var(--backdrop-overlay-bg);
+    backdrop-filter: blur(0.375rem);
+    background-color: var(--dialog-overlay);
     transition: backdrop-filter 0.2s ease-in-out, background-color 0.2s ease-in-out;
   }
 
@@ -55,26 +51,26 @@ dialog {
     width: auto;
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
-    background-color: var(--pane-section-bg);
+    background-color: var(--dialog-section-fill);
   }
 
   /* Header styling */
   > header {
     margin-top: calc(var(--spacing) * -1);
-    border-bottom: var(--border-width) solid var(--pane-section-border);
-    border-top-right-radius: var(--border-radius);
-    border-top-left-radius: var(--border-radius);
+    border-bottom: var(--border-size) solid var(--dialog-section-border);
+    border-top-right-radius: var(--radius);
+    border-top-left-radius: var(--radius);
   }
 
   /* Footer styling */
   > footer {
     margin-bottom: calc(var(--spacing) * -1);
-    border-top: var(--border-width) solid var(--pane-section-border);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
+    border-top: var(--border-size) solid var(--dialog-section-border);
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
     display: flex;
     justify-content: end;
-    gap: calc(var(--nav-link-spacing) * 1.5);
+    gap: calc(var(--nav-link-gap) * 1.5);
   }
 
   /* Close button styling */

package/src/semantics/elements/_document.css

@@ -1,7 +1,4 @@
-/**
- * Document
- * Semantic document-level styles (variables applied)
- */
+
 
 :where(:root),
 :where(:host) {
@@ -16,3 +13,12 @@
   overflow-wrap: break-word;
   tab-size: 4;
 }
+
+/* modern-normalize */
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%
+}

package/src/semantics/elements/_embedded.css

@@ -1,6 +1,3 @@
-/**
- * Embedded content
- */
 :where(audio, canvas, iframe, img, svg, video) {
   vertical-align: middle;
 }

package/src/semantics/elements/_figure.css

@@ -1,6 +1,3 @@
-/**
- * Figure
- */
 figure {
   display: block;
   margin: 0;

package/src/semantics/elements/_footer.css

@@ -1,6 +1,3 @@
-/**
- * Footer
- */
 footer {
   width: 100%;
   padding-block: var(--spacing);

package/src/semantics/elements/_header.css

@@ -1,6 +1,3 @@
-/**
- * Header
- */
 header {
   width: 100%;
   padding-block: var(--spacing);

package/src/semantics/elements/_headings.css

@@ -6,29 +6,19 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-family: var(--font-family);
 }
 
-/* Headings - progressive lightness using color-mix */
-h1 { --color-text: var(--color-heading-base); }
-h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
-h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
-h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
-h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
-h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
-
-/* Dark mode headings - base is lightest, mix in black for lower levels */
-[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
-[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
-[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
-[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
-[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
-[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
+h1 { color: var(--color-text); }
+h2 { color: color-mix(in srgb, var(--color-text) 90%, light-dark(white, black)); }
+h3 { color: color-mix(in srgb, var(--color-text) 80%, light-dark(white, black)); }
+h4 { color: color-mix(in srgb, var(--color-text) 70%, light-dark(white, black)); }
+h5 { color: color-mix(in srgb, var(--color-text) 60%, light-dark(white, black)); }
+h6 { color: color-mix(in srgb, var(--color-text) 65%, light-dark(white, black)); }
 
 :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: var(--typography-spacing-top);
+  margin-top: var(--heading-gap-top);
 }

package/src/semantics/elements/_hgroup.css

@@ -6,7 +6,7 @@ hgroup {
     margin-bottom: 0;
 
     &:not(:first-child):last-child {
-      color: color-mix(in srgb, var(--color-text), rgb(128, 128, 128) 70%);
+      color: var(--color-text-muted);
       --font-weight: unset;
       font-size: 1rem;
     }

package/src/semantics/elements/_hr.css

@@ -1,10 +1,7 @@
-/**
- * Horizontal Rule
- */
 hr {
   height: 0;
   margin: var(--typography-spacing-vertical) 0;
   border: 0;
-  border-top: 1px solid var(--color-border-muted);
+  border-top: 1px solid var(--color-border);
   color: inherit;
 }

package/src/semantics/elements/_input.css

@@ -1,6 +1,3 @@
-/**
- * Basics form elements
- */
 input,
 optgroup,
 select,
@@ -79,7 +76,7 @@ textarea {
 }
 
 input:not([type=checkbox], [type=radio], [type=range]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
 }
 
 fieldset {
@@ -112,21 +109,21 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea {
   appearance: none;
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
 }
 
 input,
 select,
 textarea {
-  --color-background: var(--form-bg);
-  --border-color: var(--form-border-color);
-  --color-text: var(--form-text-color);
-  --shadow-lg: none;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
+  --color-background: var(--input-fill);
+  --border-color: var(--input-border);
+  --color-text: var(--input-text);
+  --shadow: none;
+  border: var(--border-size) solid var(--border-color);
+  border-radius: var(--radius);
   outline: none;
   background-color: var(--color-background);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow);
   color: var(--color-text);
   font-weight: var(--font-weight);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
@@ -139,12 +136,12 @@ input:not([type=submit],
 [type=radio],
 [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --color-background: var(--form-active-bg);
+  --color-background: var(--input-fill-active);
 }
 
 input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --border-color: var(--form-active-border);
+  --border-color: var(--input-border-focus);
 }
 
 input:not([type=submit],
@@ -154,7 +151,7 @@ input:not([type=submit],
 [type=file],
 [readonly]):focus,
 :where(select, textarea):not([readonly]):focus {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
 }
 
 input:not([type=submit], [type=button], [type=reset])[disabled],
@@ -162,7 +159,7 @@ select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
 :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
-  opacity: var(--form-disabled-opacity);
+  opacity: var(--input-opacity-disabled);
   pointer-events: none;
 }
 
@@ -178,10 +175,10 @@ label[aria-disabled=true] input[disabled] {
  [type=time],
  [type=week],
  [type=range])[aria-invalid]) {
-  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-  padding-left: var(--form-element-spacing-horizontal);
-  padding-inline-start: var(--form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+  padding-left: var(--input-spacing-horizontal);
+  padding-inline-start: var(--input-spacing-horizontal);
+  padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
@@ -208,23 +205,23 @@ label[aria-disabled=true] input[disabled] {
 }
 
 :is(input, select, textarea)[aria-invalid=false] {
-  --border-color: var(--form-valid-border);
+  --border-color: var(--color-success-fill);
 }
 :is(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
-  --border-color: var(--form-valid-active-border);
+  --border-color: var(--color-success-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=false]:is(:active, :focus), select[aria-invalid=false]:is(:active, :focus), textarea[aria-invalid=false]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-valid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-success-fill);
 }
 
 :is(input, select, textarea)[aria-invalid=true] {
-  --border-color: var(--form-invalid-border);
+  --border-color: var(--color-danger-fill);
 }
 :is(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
-  --border-color: var(--form-invalid-active-border);
+  --border-color: var(--color-danger-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=true]:is(:active, :focus), select[aria-invalid=true]:is(:active, :focus), textarea[aria-invalid=true]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-invalid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-danger-fill);
 }
 
 :where([dir=rtl] :is(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false])) {
@@ -236,7 +233,7 @@ input::-webkit-input-placeholder,
 textarea::placeholder,
 textarea::-webkit-input-placeholder,
 select:invalid {
-  color: var(--form-placeholder-color);
+  color: var(--input-placeholder-text);
   opacity: 1;
 }
 
@@ -253,10 +250,10 @@ select {
   }
 
   &:not([multiple], [size]) {
-    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    padding-left: var(--form-element-spacing-horizontal);
-    padding-inline-start: var(--form-element-spacing-horizontal);
-    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+    padding-left: var(--input-spacing-horizontal);
+    padding-inline-start: var(--input-spacing-horizontal);
+    padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
     background-image: var(--icon-chevron);
     background-position: center right 0.75rem;
     background-size: 1rem auto;
@@ -264,8 +261,8 @@ select {
   }
 
   &[multiple] option:checked {
-    background: var(--form-selected-bg);
-    color: var(--form-text-color);
+    background: var(--input-fill-selected);
+    color: var(--input-text);
   }
 }
 
@@ -279,7 +276,7 @@ textarea {
 }
 
 :where(textarea[aria-invalid]) {
-  --icon-height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  --icon-height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
   background-position: top right 0.75rem;
   background-size: 1rem var(--icon-height);
 }
@@ -293,11 +290,11 @@ textarea {
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: rgb(var(--color-success-rgb));
+  color: var(--color-success-text);
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: rgb(var(--color-danger-rgb));
+  color: var(--color-danger-text);
 }
 
 label > :where(input, select, textarea) {

package/src/semantics/elements/_ins.css

@@ -1,4 +1,4 @@
 ins {
-  color: rgb(var(--color-success-rgb));
+  color: var(--color-success-text);
   text-decoration: none;
 }

package/src/semantics/elements/_links.css

@@ -1,37 +1,41 @@
-/**
- * Link
- */
 :where(a:not([role=button])),
 [role=link] {
   --color-background: transparent;
   --border-color: transparent;
-  --color-text: rgb(var(--color-primary-rgb));
-  --shadow-lg: transparent;
-  --underline: var(--color-primary-underline);
+  --color-text: var(--color-primary-text);
+  --shadow: transparent;
   outline: none;
   padding: 0;
   background-color: var(--color-background);
   color: var(--color-text);
-  text-decoration: var(--text-decoration);
-  text-decoration-color: var(--underline);
+  text-decoration: var(--a-decoration);
+  text-decoration-color: oklch(from var(--color-text) l c h / 0.3);
   text-underline-offset: 0.125em;
-  transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
+  transition: background-color var(--transition), color var(--transition), text-decoration-color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
 
-  &:is(:hover, :active, :focus) {
+  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
     --color-background: transparent;
     --border-color: transparent;
-    --color-text: rgb(var(--color-primary-rgb));
-    --shadow-lg: transparent;
+    --color-text: var(--color-primary-text-hover);
+    --shadow: transparent;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.85);
   }
 
-  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
-    --color-text: var(--color-primary-hover);
-    --underline: var(--color-primary-hover-underline);
-    --text-decoration: underline;
+  &:is([aria-current]:not([aria-current=false])) {
+    font-weight: 500;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.6);
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
+    box-shadow: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
+  }
+}
+
+[role=link] {
+  cursor: pointer;
+
+  &button {
+    display: inline-flex;
   }
 }
 
@@ -51,7 +55,7 @@ aside {
 nav {
   a:not([role=button]), [role=link] {
     &:not(:hover) {
-      text-decoration: none;
+      --a-decoration: none;
     }
   }
 }

package/src/semantics/elements/_main.css

@@ -1,7 +1,3 @@
-/**
- * Main fills up the available width, and has a height defined by its content.
- * Stacks its children vertically.
- */
 main {
   width: 100%;
 }

package/src/semantics/elements/_mark.css

@@ -1,6 +1,6 @@
 mark {
   padding: 0.125rem 0.25rem;
-  background-color: var(--color-mark-bg);
-  color: var(--color-mark-text);
+  background-color: var(--color-warning-fill);
+  color: var(--color-warning-on-fill);
   vertical-align: baseline;
 }