@semanticus/semanticus-css 2.2.0 → 3.0.0

package/src/semantics/elements/_dialog.css

@@ -4,26 +4,30 @@ body:has(dialog[open]) {
   pointer-events: none;
   touch-action: none;
 
-  & dialog[open],
-  & dialog:target {
+  dialog:is([open], :target) {
     pointer-events: auto;
     touch-action: auto;
   }
 }
 
 dialog {
+  --_dialog-border-color: var(--dialog-border-color);
+  --_dialog-background-color: var(--dialog-background-color);
+
   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: var(--border-size) solid var(--border-color);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--_dialog-border-color);
+  background: var(--_dialog-background-color);
+  box-shadow: var(--menu-box-shadow);
 
   /* 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;
+  transition:
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 
   @media (--breakpoint-sm) {
     max-width: 510px;
@@ -35,15 +39,17 @@ dialog {
 
   /* Hidden state */
   &:not([open]),
-  &[open=false] {
+  &[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;
+    background-color: var(--backdrop-background-color);
+    transition:
+      backdrop-filter 0.2s ease-in-out,
+      background-color 0.2s ease-in-out;
   }
 
   > header,
@@ -51,7 +57,7 @@ dialog {
     width: auto;
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
-    background-color: var(--dialog-section-fill);
+    background-color: var(--dialog-marginals-background-color);
     display: flex;
     gap: calc(var(--nav-link-gap) * 1.5);
     align-items: center;
@@ -60,18 +66,19 @@ dialog {
   /* 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);
+    border-bottom: var(--border-width) solid
+      var(--dialog-marginals-border-color);
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
     justify-content: space-between;
   }
 
   /* 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);
+    border-top: var(--border-width) solid var(--dialog-marginals-border-color);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
     justify-content: end;
   }
 

package/src/semantics/elements/_fieldset.css

@@ -0,0 +1,27 @@
+/* See _input.css for shared styles */
+
+fieldset {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+fieldset legend {
+  margin-bottom: calc(var(--spacing) * 0.5);
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: calc(var(--spacing) * 0.375);
+  color: var(--typography-color);
+  font-weight: var(--form-label-font-weight, var(--font-weight));
+}

package/src/semantics/elements/_figure.css

@@ -5,6 +5,6 @@ figure {
 
   & figcaption {
     padding: calc(var(--spacing) * 0.5) 0;
-    color: var(--color-text-muted);
+    color: var(--color-muted);
   }
 }

package/src/semantics/elements/_footer.css

@@ -1,5 +1,4 @@
 footer {
-  width: 100%;
   padding-block: var(--spacing);
   margin-top: var(--spacing);
 

package/src/semantics/elements/_header.css

@@ -1,5 +1,4 @@
 header {
-  width: 100%;
   padding-block: var(--spacing);
   margin-bottom: var(--spacing);
 

package/src/semantics/elements/_headings.css

@@ -4,21 +4,98 @@ h3,
 h4,
 h5,
 h6 {
+  --font-weight: var(--heading-font-weight);
+
   margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
+  margin-bottom: var(--typography-margin-block);
   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)); }
+h1 {
+  --font-size: var(--h1-font-size);
+  --line-height: var(--h1-line-height);
+  --heading-margin-top: var(--h1-margin-top);
+
+  color: var(--typography-color);
+}
+
+h2 {
+  --font-size: var(--h2-font-size);
+  --line-height: var(--h2-line-height);
+  --heading-margin-top: var(--h2-margin-top);
+
+  color: color-mix(
+    in srgb,
+    var(--typography-color) 90%,
+    light-dark(white, black)
+  );
+}
+
+h3 {
+  --font-size: var(--h3-font-size);
+  --line-height: var(--h3-line-height);
+  --heading-margin-top: var(--h3-margin-top);
+
+  color: color-mix(
+    in srgb,
+    var(--typography-color) 80%,
+    light-dark(white, black)
+  );
+}
+
+h4 {
+  --font-size: var(--h4-font-size);
+  --line-height: var(--h4-line-height);
+  --heading-margin-top: var(--h4-margin-top);
+
+  color: color-mix(
+    in srgb,
+    var(--typography-color) 70%,
+    light-dark(white, black)
+  );
+}
+
+h5 {
+  --font-size: var(--h5-font-size);
+  --line-height: var(--h5-line-height);
+  --heading-margin-top: var(--h5-margin-top);
+
+  color: color-mix(
+    in srgb,
+    var(--typography-color) 60%,
+    light-dark(white, black)
+  );
+}
+
+h6 {
+  --font-size: var(--h6-font-size);
+  --line-height: var(--h6-line-height);
+  --heading-margin-top: var(--h6-margin-top);
+
+  color: color-mix(
+    in srgb,
+    var(--typography-color) 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);
+:where(
+    article,
+    address,
+    blockquote,
+    dl,
+    figure,
+    form,
+    ol,
+    p,
+    pre,
+    table,
+    ul,
+    hr
+  )
+  ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--heading-margin-top);
 }

package/src/semantics/elements/_hgroup.css

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

package/src/semantics/elements/_hr.css

@@ -1,7 +1,7 @@
 hr {
   height: 0;
-  margin: var(--typography-spacing-vertical) 0;
+  margin: var(--typography-margin-block) 0;
   border: 0;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color);
   color: inherit;
 }

package/src/semantics/elements/_inputs.css

@@ -0,0 +1,14 @@
+@import "./inputs/_common.css";
+
+@import "./inputs/_checkbox-radio.css";
+@import "./inputs/_checkbox.css";
+@import "./inputs/_color.css";
+@import "./inputs/_date.css";
+@import "./inputs/_file.css";
+@import "./inputs/_input.css";
+@import "./inputs/_radio.css";
+@import "./inputs/_range.css";
+@import "./inputs/_search.css";
+@import "./inputs/_select.css";
+@import "./inputs/_switch.css";
+@import "./inputs/_textarea.css";

package/src/semantics/elements/_ins.css

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

package/src/semantics/elements/_label.css

@@ -0,0 +1,4 @@
+label:has([type="checkbox"], [type="radio"]) {
+  width: fit-content;
+  cursor: pointer;
+}

package/src/semantics/elements/_links.css

@@ -1,37 +1,47 @@
-:where(a:not([role=button])),
-[role=link] {
-  --color-background: transparent;
-  --border-color: transparent;
-  --color-text: var(--color-primary-text);
-  --shadow: transparent;
-  outline: none;
+:where(a:not([role="button"])),
+[role="link"] {
+  --_links-color: var(--links-color);
+  --_links-color-hover: var(--links-color-hover);
+  --_links-text-decoration: var(--links-text-decoration);
+  --_links-outline-color: var(--primary-outline-color);
+
   padding: 0;
-  background-color: var(--color-background);
-  color: var(--color-text);
-  text-decoration: var(--a-decoration);
-  text-decoration-color: oklch(from var(--color-text) l c h / 0.3);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--_links-color);
+  text-decoration: var(--_links-text-decoration);
+  text-decoration-color: oklch(from var(--_links-color) l c h / 0.3);
   text-underline-offset: 0.125em;
-  transition: background-color var(--transition), color var(--transition), text-decoration-color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
-
-  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
-    --color-background: transparent;
-    --border-color: transparent;
-    --color-text: var(--color-primary-text-hover);
-    --shadow: transparent;
-    text-decoration-color: oklch(from var(--color-text) l c h / 0.85);
+  transition:
+    background-color var(--transition),
+    color var(--transition),
+    text-decoration-color var(--transition),
+    text-decoration var(--transition);
+
+  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    background-color: transparent;
+    border-color: transparent;
+
+    color: var(--_links-color-hover);
+    text-decoration-color: var(--_links-color-hover);
   }
 
-  &:is([aria-current]:not([aria-current=false])) {
+  &: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-size) var(--color-primary-focus-ring);
+    border-radius: var(--border-radius);
+    outline: var(--outline-width) solid var(--_links-outline-color);
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--_links-outline-color);
+  }
+
+  &[aria-busy="true"] {
+    pointer-events: none;
   }
 }
 
-[role=link] {
+[role="link"] {
   cursor: pointer;
 
   &button {
@@ -39,13 +49,14 @@
   }
 }
 
-a[role=button] {
+a[role="button"] {
   display: inline-block;
 }
 
 aside {
   nav {
-    a:not([role=button]), [role=link] {
+    a:not([role="button"]),
+    [role="link"] {
       display: block !important;
       width: 100%;
     }
@@ -53,9 +64,10 @@ aside {
 }
 
 nav {
-  a:not([role=button]), [role=link] {
+  a:not([role="button"]),
+  [role="link"] {
     &:not(:hover) {
-      --a-decoration: none;
+      --_links-text-decoration: none;
     }
   }
 }

package/src/semantics/elements/_lists.css

@@ -1,22 +1,24 @@
 dl,
 ol,
 ul {
+  --_lists-marker-color: var(--lists-marker-color);
+
   margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
+  margin-bottom: var(--typography-margin-block);
+  color: var(--typography-color);
   font-style: normal;
   font-weight: var(--font-weight);
 }
 
 :where(ol, ul) li {
-  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
+  margin-bottom: calc(var(--typography-margin-block) * 0.25);
+
+  &::marker {
+    color: var(--_lists-marker-color);
+  }
 }
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
   margin: 0;
-  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
-}
-
-ul li {
-  list-style: square;
+  margin-top: calc(var(--typography-margin-block) * 0.25);
 }

package/src/semantics/elements/_mark.css

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

package/src/semantics/elements/_nav.css

@@ -1,6 +1,6 @@
 nav {
-  --typography-spacing-vertical: 0;
-  --heading-gap-top: 0;
+  --typography-margin-block: 0;
+  --heading-margin-top: 0;
 
   display: flex;
   gap: calc(var(--nav-link-gap) * 1.5);
@@ -16,7 +16,26 @@ nav {
     }
   }
 
-  &[aria-label=breadcrumb] {
+  :is(
+    button,
+    [role="button"],
+    [type="button"],
+    select,
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])
+  ) {
+    --inputs-padding-block: calc(var(--nav-link-gap) - var(--border-width) * 2);
+    --inputs-padding-inline: var(--nav-link-gap);
+    --_buttons-padding-block: var(--inputs-padding-block);
+    --_buttons-padding-inline: var(--inputs-padding-inline);
+
+    width: auto;
+    height: auto;
+    margin-right: inherit;
+    margin-bottom: 0;
+    margin-left: inherit;
+  }
+
+  &[aria-label="breadcrumb"] {
     align-items: center;
     justify-content: start;
 
@@ -30,14 +49,18 @@ nav {
         position: absolute;
         width: calc(var(--nav-link-gap) * 3);
         content: var(--nav-breadcrumb-divider);
-        color: var(--color-text-muted);
+        color: var(--color-muted);
         text-align: center;
         text-decoration: none;
         white-space: nowrap;
       }
     }
 
-    & :where(a[aria-current]:not([aria-current=false]), [role=link][aria-current]:not([aria-current=false])) {
+    &
+      :where(
+        a[aria-current]:not([aria-current="false"]),
+        [role="link"][aria-current]:not([aria-current="false"])
+      ) {
       background-color: transparent;
       color: inherit;
       text-decoration: none;
@@ -45,7 +68,8 @@ nav {
     }
   }
 
-  ul, ol {
+  ul,
+  ol {
     align-items: center;
     display: flex;
     gap: calc(var(--nav-link-gap) * 1.5);
@@ -68,7 +92,7 @@ nav {
   }
 }
 
-[dir=rtl] :where(nav[aria-label=breadcrumb]) ul li:not(:last-child)::after {
+[dir="rtl"] :where(nav[aria-label="breadcrumb"]) ul li:not(:last-child)::after {
   content: "\\";
 }
 

package/src/semantics/elements/_p.css

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

package/src/semantics/elements/_progress.css

@@ -1,6 +1,7 @@
 progress {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  --_progress-accent-color: var(--progress-accent-color);
+  --_progress-track-background-color: var(--progress-track-background-color);
+
   display: inline-block;
   appearance: none;
   width: 100%;
@@ -8,30 +9,36 @@ progress {
   margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
   border: 0;
-  border-radius: var(--radius);
-  background-color: var(--progress-track-fill);
-  color: var(--progress-fill);
+  border-radius: var(--border-radius);
+  background-color: var(--_progress-track-background-color);
+  color: var(--_progress-accent-color);
   vertical-align: baseline;
-  accent-color: var(--color-primary-fill);
+  accent-color: var(--_progress-accent-color);
 
   &::-webkit-progress-bar {
-    border-radius: var(--radius);
+    border-radius: var(--border-radius);
     background: none;
   }
 
   &[value]::-webkit-progress-value {
-    background-color: var(--progress-fill);
+    background-color: var(--_progress-accent-color);
     transition: inline-size var(--transition);
   }
 
   &::-moz-progress-bar {
-    background-color: var(--progress-fill);
+    background-color: var(--_progress-accent-color);
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
   progress:indeterminate {
-    background: var(--progress-track-fill) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-track-fill) 30%) top left/150% 150% no-repeat;
+    background: var(--_progress-track-background-color)
+      linear-gradient(
+        to right,
+        var(--_progress-accent-color) 30%,
+        var(--_progress-track-background-color) 30%
+      )
+      top left/150% 150% no-repeat;
     animation: progress-indeterminate 1s linear infinite;
 
     &[value]::-webkit-progress-value {
@@ -43,7 +50,7 @@ progress {
     }
   }
 
-  [dir=rtl] progress:indeterminate {
+  [dir="rtl"] progress:indeterminate {
     animation-direction: reverse;
   }
 }

package/src/semantics/elements/{_document.css → _root.css}

@@ -1,9 +1,13 @@
+/* modern-normalize */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
 
-
-:where(:root),
-:where(:host) {
-  background-color: var(--color-background);
-  color: var(--color-text);
+:where(:root, :host) {
+  background-color: var(--background-color);
+  color: var(--typography-color);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
   line-height: var(--line-height);
@@ -14,11 +18,10 @@
   tab-size: 4;
 }
 
-/* modern-normalize */
-*, ::before, ::after {
-  box-sizing: border-box;
+::selection {
+  background-color: var(--selection-background-color);
 }
 
 html {
-  -webkit-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%;
 }

package/src/semantics/elements/_section.css

@@ -1,4 +1,3 @@
 section {
-  width: 100%;
   margin-bottom: var(--spacing);
 }

package/src/semantics/elements/_small.css

@@ -1,3 +1,30 @@
 small {
+  --font-size: var(--small-font-size);
+
   font-size: var(--font-size);
+
+  :where(input, select, textarea, fieldset) + & {
+    display: block;
+    width: 100%;
+    margin-bottom: var(--spacing);
+    color: var(--color-muted);
+  }
+
+  :where(
+      input:not([type="checkbox"], [type="radio"], [role="switch"]),
+      select,
+      textarea,
+      fieldset
+    )
+    + & {
+    margin-top: calc(var(--spacing) * -0.75);
+  }
+
+  :where(input, select, textarea, fieldset)[aria-invalid="false"] + & {
+    color: var(--success-color);
+  }
+
+  :where(input, select, textarea, fieldset)[aria-invalid="true"] + & {
+    color: var(--danger-color);
+  }
 }