@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/semantics/elements/_body.css

@@ -1,8 +1,5 @@
-/**
- * Body fills up the available width, and has the same height as the viewport.
- * Stacks its children vertically.
- */
 body {
   width: 100%;
   min-height: 100svh;
+  margin: 0; /* modern-normalize */
 }

package/src/semantics/elements/_button.css

@@ -1,6 +1,3 @@
-/**
- * Button
- */
 button {
   margin: 0;
   overflow: visible;
@@ -21,16 +18,16 @@ button,
 [type=button],
 [type=file]::file-selector-button,
 [role=button] {
-  --color-background: var(--color-primary-bg);
-  --border-color: var(--color-primary-border);
-  --color-text: var(--color-primary-inverse);
-  --shadow-lg: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
+  --color-background: var(--color-primary-fill);
+  --border-color: var(--color-primary-fill);
+  --color-text: var(--color-primary-on-fill);
+  --shadow: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
+  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);
   font-size: 1rem;
@@ -52,10 +49,10 @@ button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active,
 [type=file]::file-selector-button:is(:hover, :active, :focus),
 [role=button]:is([aria-current]:not([aria-current=false])),
 [role=button]:is(:hover, :active, :focus) {
-  --color-background: var(--color-primary-hover-bg);
-  --border-color: var(--color-primary-hover-border);
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
-  --color-text: var(--color-primary-inverse);
+  --color-background: var(--color-primary-fill-hover);
+  --border-color: var(--color-primary-fill-hover);
+  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
+  --color-text: var(--color-primary-on-fill);
 }
 
 button:focus, button:is([aria-current]:not([aria-current=false])):focus,
@@ -68,7 +65,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus,
 [role=button]:focus,
 [role=button]:is([aria-current]:not([aria-current=false])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-primary-focus);
+  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
 }
 
 [type=submit],
@@ -78,27 +75,24 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset],
-[type=file]::file-selector-button,
-[aria-label="Close"] {
-  --color-background: var(--color-secondary-bg);
-  --border-color: var(--color-secondary-border);
-  --color-text: var(--color-secondary-inverse);
+[type=file]::file-selector-button {
+  --color-background: var(--color-secondary-fill);
+  --border-color: var(--color-secondary-fill);
+  --color-text: var(--color-secondary-on-fill);
   cursor: pointer;
 }
 
 [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
-[type=file]::file-selector-button:is(:hover, :active, :focus),
-[aria-label="Close"]:is(:hover, :active, :focus) {
-  --color-background: var(--color-secondary-hover-bg);
-  --border-color: var(--color-secondary-hover-border);
-  --color-text: var(--color-secondary-inverse);
+[type=file]::file-selector-button:is(:hover, :active, :focus) {
+  --color-background: var(--color-secondary-fill-hover);
+  --border-color: var(--color-secondary-fill-hover);
+  --color-text: var(--color-secondary-on-fill);
 }
 
 [type=reset]:focus,
-[aria-label="Close"]:focus,
 [type=reset]:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
+  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
 }
 
 :is(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
@@ -118,13 +112,13 @@ aside {
 
 nav {
   :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
-    --form-element-spacing-vertical: calc(var(--nav-link-spacing) - var(--border-width) * 2);
-    --form-element-spacing-horizontal: var(--nav-link-spacing);
+    --input-spacing-vertical: calc(var(--nav-link-gap) - var(--border-size) * 2);
+    --input-spacing-horizontal: var(--nav-link-gap);
 
     height: auto;
     margin-right: inherit;
     margin-bottom: 0;
     margin-left: inherit;
-    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+    padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
   }
 }

package/src/semantics/elements/_code.css

@@ -1,15 +1,12 @@
-/**
- * Code
- */
 pre,
 code,
 kbd,
 samp {
   font-size: 0.875em;
   font-family: var(--font-family);
-  border-radius: var(--border-radius);
-  background: var(--code-bg);
-  color: var(--code-color);
+  border-radius: var(--radius);
+  background: var(--code-fill);
+  color: var(--code-text);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -47,7 +44,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--kbd-bg);
-  color: var(--kbd-color);
+  background-color: var(--kbd-fill);
+  color: var(--kbd-text);
   vertical-align: baseline;
 }

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,10 +16,10 @@ dialog {
   margin: auto;
   overflow: auto;
   padding: var(--spacing);
-  border-radius: var(--border-radius);
-  background: var(--pane-bg);
-  box-shadow: var(--pane-shadow);
-  border: 0;
+  border-radius: var(--radius);
+  background: var(--dialog-fill);
+  box-shadow: var(--dialog-shadow);
+  border: var(--border-size) solid var(--border-color);
 
   /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
   /* Gracefully degrades to instant appearance in unsupported browsers */
@@ -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,52 +51,32 @@ 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);
+    display: flex;
+    gap: calc(var(--nav-link-gap) * 1.5);
+    align-items: center;
   }
 
   /* 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);
+    justify-content: space-between;
   }
 
   /* 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);
-    display: flex;
+    border-top: var(--border-size) solid var(--dialog-section-border);
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
     justify-content: end;
-    gap: calc(var(--nav-link-spacing) * 1.5);
   }
 
-  /* Close button styling */
-  [rel=prev] {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    top: calc(var(--spacing) * .66);
-    right: var(--spacing);
-    border: none;
-    border-radius: 0;
-    background-image: var(--icon-close);
-    background-position: center;
-    background-size: auto 1rem;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    box-shadow: none;
-    opacity: 0.5;
-    transition: opacity var(--transition);
-
-    &:hover {
-      opacity: 1;
-    }
+  > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
+    margin-bottom: 0;
   }
 }
 

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;
 }