@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/semantics/{_button.css → 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],
@@ -80,25 +77,25 @@ 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);
+  --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);
+  --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 +115,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-vertical) - var(--border-width) * 2);
-    --form-element-spacing-horizontal: var(--nav-link-spacing-horizontal);
+    --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/{_code.css → 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(--color-code-bg);
-  color: var(--color-code-text);
+  border-radius: var(--radius);
+  background: var(--code-fill);
+  color: var(--code-text);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -23,10 +20,13 @@ samp {
 
 pre {
   -ms-overflow-style: scrollbar;
-  overflow: auto;
+  color: var(--color-text);
   display: block;
-  margin-bottom: var(--spacing);
-  overflow-x: auto;
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
 
   & code,
   & samp {
@@ -44,7 +44,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--color-kbd-bg);
-  color: var(--color-kbd-text);
+  background-color: var(--kbd-fill);
+  color: var(--kbd-text);
   vertical-align: baseline;
 }

package/src/semantics/elements/_del.css

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

package/src/semantics/{_details.css → 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,13 +170,13 @@ 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(--dropdown-border);
-    border-radius: var(--border-radius);
-    background-color: var(--dropdown-bg);
-    box-shadow: var(--dropdown-shadow);
-    color: var(--dropdown-text);
+    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;
     opacity: 0;
     transition: opacity var(--transition), transform 0s ease-in-out 1s;
@@ -191,24 +190,24 @@ 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(--dropdown-text);
+      color: var(--menu-text);
       text-decoration: none;
       text-overflow: ellipsis;
 
@@ -217,7 +216,7 @@ details:has(> summary[aria-haspopup="menu"]) {
       &:active,
       &:focus-visible,
       &[aria-current]:not([aria-current=false]) {
-        background-color: var(--dropdown-hover-bg);
+        background-color: var(--menu-fill-hover);
       }
     }
 
@@ -226,7 +225,7 @@ details:has(> summary[aria-haspopup="menu"]) {
     }
 
     &:has(label):hover {
-      background-color: var(--dropdown-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-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+    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-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+    padding: calc(var(--nav-link-gap) - var(--border-size) * 2) var(--nav-link-gap);
   }
 }

package/src/semantics/elements/_dialog.css

@@ -0,0 +1,113 @@
+/* Prevent body scroll and interaction when modal is open */
+body:has(dialog[open]) {
+  overflow: hidden;
+  pointer-events: none;
+  touch-action: none;
+
+  & dialog[open],
+  & dialog:target {
+    pointer-events: auto;
+    touch-action: auto;
+  }
+}
+
+dialog {
+  max-height: calc(100vh - var(--spacing) * 2);
+  margin: auto;
+  overflow: auto;
+  padding: var(--spacing);
+  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+) */
+  /* Gracefully degrades to instant appearance in unsupported browsers */
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+
+  @media (--breakpoint-sm) {
+    max-width: 510px;
+  }
+
+  @media (--breakpoint-md) {
+    max-width: 700px;
+  }
+
+  /* Hidden state */
+  &:not([open]),
+  &[open=false] {
+    display: none;
+  }
+
+  /* Backdrop overlay */
+  &::backdrop {
+    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;
+  }
+
+  > header,
+  > footer {
+    width: auto;
+    margin-inline: calc(var(--spacing) * -1);
+    padding-inline: var(--spacing);
+    background-color: var(--dialog-section-fill);
+  }
+
+  /* Header styling */
+  > header {
+    margin-top: calc(var(--spacing) * -1);
+    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-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-gap) * 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;
+    }
+  }
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  dialog[open]::backdrop {
+    backdrop-filter: none;
+    background-color: transparent;
+  }
+}

package/src/semantics/{_document.css → 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/{_embedded.css → elements/_embedded.css}

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

package/src/semantics/{_figure.css → elements/_figure.css}

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

package/src/semantics/elements/_footer.css

@@ -0,0 +1,10 @@
+footer {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-top: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_header.css

@@ -0,0 +1,10 @@
+header {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_headings.css

@@ -0,0 +1,24 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  font-family: var(--font-family);
+}
+
+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(--heading-gap-top);
+}

package/src/semantics/elements/_hgroup.css

@@ -0,0 +1,14 @@
+hgroup {
+  margin-bottom: var(--typography-spacing-vertical);
+
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:not(:first-child):last-child {
+      color: var(--color-text-muted);
+      --font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+}

package/src/semantics/{_hr.css → elements/_hr.css}

@@ -1,10 +1,7 @@
-/**
- * Misc
- */
 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;
 }