@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/semantics/attributes/_role-tooltip.css

@@ -4,11 +4,14 @@
   width: fit-content;
 }
 
-:not(a, button, dialog, input, [role=button])[aria-describedby] {
+/* TODO: reconsider using a declarative selector */
+/*
+:not(a, button, dialog, input, [role="button"])[aria-describedby] {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;
 }
+*/
 
 [role="tooltip"] {
   display: block;
@@ -18,9 +21,9 @@
   left: 50%;
   padding: 0.25rem 0.5rem;
   transform: translate(-50%, -0.25rem);
-  border-radius: var(--radius);
-  background: var(--tooltip-fill);
-  color: var(--tooltip-text);
+  border-radius: var(--border-radius);
+  background: var(--tooltip-background-color);
+  color: var(--tooltip-color);
   font-style: normal;
   font-weight: var(--font-weight);
   font-size: 0.875rem;
@@ -37,7 +40,7 @@
     top: 100%;
     left: 50%;
     transform: translate(-50%, 0);
-    border-top: 0.3rem solid var(--tooltip-fill);
+    border-top: 0.3rem solid var(--tooltip-background-color);
     border-right: 0.3rem solid transparent;
     border-left: 0.3rem solid transparent;
   }
@@ -52,7 +55,7 @@
       bottom: 100%;
       transform: translate(-50%, 0);
       border-top: none;
-      border-bottom: 0.3rem solid var(--tooltip-fill);
+      border-bottom: 0.3rem solid var(--tooltip-background-color);
     }
   }
 
@@ -69,7 +72,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-left: 0.3rem solid var(--tooltip-fill);
+      border-left: 0.3rem solid var(--tooltip-background-color);
       border-right: none;
     }
   }
@@ -87,7 +90,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-right: 0.3rem solid var(--tooltip-fill);
+      border-right: 0.3rem solid var(--tooltip-background-color);
       border-left: none;
     }
   }

package/src/semantics/elements/_address.css

@@ -1,7 +1,7 @@
 address {
   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);
 }

package/src/semantics/elements/_aside.css

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

package/src/semantics/elements/_blockquote.css

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

package/src/semantics/elements/_body.css

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

package/src/semantics/elements/_buttons.css

@@ -0,0 +1,100 @@
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type="submit"],
+[type="reset"],
+[type="button"],
+[type="file"]::file-selector-button,
+[role="button"] {
+  --_buttons-background-color-hover: var(--buttons-background-color-hover);
+  --_buttons-background-color: var(--buttons-background-color);
+  --_buttons-color-hover: var(--buttons-color-hover);
+  --_buttons-color: var(--buttons-color);
+  --_buttons-outline-color: var(--primary-outline-color);
+  --_buttons-padding-block: var(--buttons-padding-block);
+  --_buttons-padding-inline: var(--buttons-padding-inline);
+  --_buttons-border-color: var(--_buttons-background-color);
+  --_buttons-border-color-hover: var(--_buttons-background-color-hover);
+
+  padding-block: var(--_buttons-padding-block);
+  padding-inline: var(--_buttons-padding-inline);
+  border: var(--border-width) solid var(--_buttons-border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--_buttons-background-color);
+  color: var(--_buttons-color);
+  font-weight: var(--font-weight);
+  font-size: 1rem;
+  line-height: var(--line-height);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--transition),
+    border-color var(--transition),
+    color var(--transition);
+
+  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    color: var(--_buttons-color-hover);
+    border: var(--border-width) solid var(--_buttons-border-color-hover);
+    background-color: var(--_buttons-background-color-hover);
+  }
+
+  &:is(:active, :focus) {
+    outline: var(--outline-width) solid var(--_buttons-outline-color);
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--_buttons-outline-color);
+  }
+
+  &[aria-busy="true"] {
+    pointer-events: none;
+
+    &:before {
+      filter: brightness(0) invert(1);
+    }
+  }
+}
+
+[type="submit"] {
+  width: 100%;
+}
+
+[type="reset"],
+[type="file"]::file-selector-button {
+  --_buttons-background-color: var(--secondary-background-color);
+  --_buttons-background-color-hover: var(--secondary-background-color-hover);
+  --_buttons-outline-color: var(--secondary-outline-color);
+
+  cursor: pointer;
+}
+
+button,
+[type="submit"],
+[type="reset"],
+[type="button"] {
+  appearance: auto;
+}
+
+aside {
+  nav {
+    :where(
+      button,
+      [role="button"],
+      [type="button"],
+      input:not(
+        [type="checkbox"],
+        [type="radio"],
+        [type="range"],
+        [type="file"]
+      ),
+      select
+    ) {
+      display: block !important;
+      width: 100%;
+    }
+  }
+}

package/src/semantics/elements/_code.css

@@ -1,12 +1,23 @@
+pre,
+code,
+kbd,
+samp {
+  --font-family: var(--font-family-monospace);
+}
+
+kbd {
+  --font-weight: var(--kbd-font-weight);
+}
+
 pre,
 code,
 kbd,
 samp {
   font-size: 0.875em;
   font-family: var(--font-family);
-  border-radius: var(--radius);
-  background: var(--code-fill);
-  color: var(--code-text);
+  border-radius: var(--border-radius);
+  background: var(--code-background-color);
+  color: var(--code-color);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -19,12 +30,11 @@ samp {
 }
 
 pre {
-  -ms-overflow-style: scrollbar;
-  color: var(--color-text);
+  color: var(--typography-color);
   display: block;
   font-style: normal;
   font-weight: var(--font-weight);
-  margin-bottom: var(--typography-spacing-vertical);
+  margin-bottom: var(--typography-margin-block);
   margin-top: 0;
   overflow: auto;
 
@@ -44,7 +54,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--kbd-fill);
-  color: var(--kbd-text);
+  background-color: var(--kbd-background-color);
+  color: var(--kbd-color);
   vertical-align: baseline;
 }

package/src/semantics/elements/_del.css

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

package/src/semantics/elements/_details.css

@@ -3,16 +3,32 @@ summary {
 }
 
 details {
+  --_details-summary-background-color: var(--details-summary-background-color);
+  --_details-summary-color: var(--details-summary-color);
+  --_details-summary-color-focus: var(--primary-color-hover);
+  --_details-summary-color-open: var(--details-summary-color-open);
+  --_details-summary-outline-color: var(--primary-outline-color);
+
   display: block;
 
-  & summary {
+  > summary {
     line-height: 1rem;
     list-style-type: none;
     cursor: pointer;
     transition: color var(--transition);
 
+    color: var(--_details-summary-color);
+    background-color: var(--_details-summary-background-color);
+
     &:not([role]) {
-      color: var(--details-summary-text);
+      &:focus {
+        --_details-summary-color: var(--_details-summary-color-focus);
+
+        outline: var(--outline-width) solid
+          var(--_details-summary-outline-color);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+          var(--_details-summary-outline-color);
+      }
     }
 
     &::-webkit-details-marker {
@@ -31,52 +47,43 @@ details {
       display: block;
       width: 1rem;
       height: 1rem;
-      margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
       float: right;
       transform: rotate(-90deg);
+      content: "";
+      transition: transform var(--transition);
       background-image: var(--icon-chevron);
       background-position: right center;
-      background-size: 1rem auto;
       background-repeat: no-repeat;
-      content: "";
-      transition: transform var(--transition);
+      background-size: var(--icons-width) auto;
     }
 
-    &:focus {
-      outline: none;
-
-      &:not([role]) {
-        color: var(--details-summary-text-hover);
-      }
-    }
-
-    &:focus-visible:not([role]) {
-      outline: var(--outline-size) solid var(--color-primary-focus-ring);
-      outline-offset: calc(var(--spacing, 1rem) * 0.5);
-      color: var(--color-primary-text);
-    }
-
-    &[role=button] {
+    &[role="button"] {
       width: 100%;
       text-align: left;
 
-      &:focus-visible {
-        outline: var(--outline-size) solid var(--color-primary-focus-ring);
-        outline-offset: calc(var(--spacing, 1rem) * 0.5);
-      }
-
       &::after {
         height: calc(1rem * var(--line-height, 1.5));
         filter: brightness(0) invert(1);
       }
     }
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      text-align: right;
+
+      &::after {
+        float: left;
+        transform: rotate(90deg);
+        background-position: left center;
+      }
+    }
   }
 
   &[open] > summary {
     margin-bottom: var(--spacing);
 
     &:not([role]):not(:focus) {
-        color: var(--details-summary-text-open);
+      --_details-summary-color: var(--_details-summary-color-open);
     }
 
     &::after {
@@ -85,146 +92,133 @@ details {
   }
 }
 
-[dir=rtl] details summary {
-  text-align: right;
-
-  &::after {
-    float: left;
-    background-position: left center;
-  }
-}
-
 /**
  * Dropdown (details with summary[aria-haspopup="menu"])
  */
 details:has(> summary[aria-haspopup="menu"]) {
   position: relative;
-  border-bottom: none;
-
-  & > summary::after,
-  & > button::after,
-  & > a::after {
-    display: block;
-    width: 1rem;
-    height: calc(1rem * var(--line-height, 1.5));
-    margin-inline-start: 0.25rem;
-    margin-left: auto;
-    float: right;
-    transform: rotate(0deg) translateX(0.2rem);
-    background-image: var(--icon-chevron);
-    background-position: right center;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-    content: "";
-  }
-
-  & summary:not([role="button"]) {
-    --outline-size: 0.0625rem;
-  }
-
-  & > :where(summary:not([role])) {
-    display: flex;
-    align-items: center;
-    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;
-    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-  }
-
-  & > :where(summary:not([role]):active, summary:not([role]):focus) {
-    border-color: var(--input-border-focus);
-    background-color: var(--input-fill-active);
-  }
 
-  & > :where(summary:not([role]):focus) {
-    box-shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
-  }
+  > summary[aria-haspopup="menu"] {
+    --_details-dropdown-color: var(--details-dropdown-color);
+    --_details-dropdown-border-color: var(--details-dropdown-border-color);
+    --_details-dropdown-padding-block: var(
+      --details-dropdown-padding-block
+    );
+    --_details-dropdown-padding-inline: var(
+      --details-dropdown-padding-inline
+    );
+    --_details-summary-color: var(--_details-dropdown-color);
 
-  & > :where(summary:not([role]):focus-visible) {
-    outline: none;
-  }
+    &::after {
+      height: calc(1rem * var(--line-height, 1.5));
+      margin-inline-start: 0.25rem;
+      margin-left: auto;
+      transform: rotate(0deg) translateX(0.2rem);
+    }
 
-  & > :where(summary:not([role])[aria-invalid=false]) {
-    --input-border: var(--color-success-fill);
-    --input-border-focus: var(--color-success-fill-hover);
-  }
+    &:not([role]) {
+      border: var(--border-width) solid var(--_details-dropdown-border-color);
+      border-radius: var(--border-radius);
+      padding: var(--_details-dropdown-padding-block)
+        var(--_details-dropdown-padding-inline);
+      display: flex;
+      align-items: center;
+      height: calc(
+        1rem * var(--line-height) + var(--_details-dropdown-padding-block) *
+          2 + var(--border-width) * 2
+      );
+      line-height: inherit;
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background-color var(--transition),
+        border-color var(--transition),
+        color var(--transition);
+
+      &[aria-invalid="false"] {
+        --_details-dropdown-border-color: var(--success-background-color);
+        --_details-summary-outline-color: var(--success-outline-color);
+      }
 
-  & > :where(summary:not([role])[aria-invalid=true]) {
-    --input-border: var(--color-danger-fill);
-    --input-border-focus: var(--color-danger-fill-hover);
+      &[aria-invalid="true"] {
+        --_details-dropdown-border-color: var(--danger-background-color);
+        --_details-summary-outline-color: var(--danger-outline-color);
+      }
+    }
   }
 
   & > :where(summary + ul[role="menu"]) {
     display: flex;
     z-index: var(--max-z-index);
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     flex-direction: column;
     width: 100%;
     min-width: fit-content;
     margin: 0;
-    margin-top: var(--outline-size);
+    margin-top: var(--focus-ring-width);
     padding: 0;
-    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);
+    border: var(--border-width) solid var(--details-menu-border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--details-menu-background-color);
+    box-shadow: var(--menu-box-shadow);
+    color: var(--details-menu-color);
     white-space: nowrap;
     opacity: 0;
-    transition: opacity var(--transition), transform 0s ease-in-out 1s;
-  }
+    transition:
+      opacity var(--transition),
+      transform 0s ease-in-out 1s;
 
-  & > :where(summary + ul[role="menu"][dir=rtl]) {
-    right: 0;
-    left: auto;
-  }
+    [dir="rtl"] &[dir="rtl"] {
+      inset-inline-start: unset;
+      inset-inline-end: 0;
+      text-align: left;
+    }
 
-  & > summary + ul[role="menu"] li {
-    width: 100%;
-    margin-bottom: 0;
-    padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
-    list-style: none;
+    & > li {
+      width: 100%;
+      margin-bottom: 0;
+      padding: calc(var(--inputs-padding-block) * 0.5)
+        var(--inputs-padding-inline);
+      list-style: none;
 
-    &:first-of-type {
-      margin-top: calc(var(--input-spacing-vertical) * 0.5);
-    }
+      &:first-of-type {
+        margin-top: calc(var(--inputs-padding-block) * 0.5);
+      }
 
-    &:last-of-type {
-      margin-bottom: calc(var(--input-spacing-vertical) * 0.5);
-    }
+      &:last-of-type {
+        margin-bottom: calc(var(--inputs-padding-block) * 0.5);
+      }
 
-    & a {
-      display: block;
-      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);
-      text-decoration: none;
-      text-overflow: ellipsis;
-
-      &:hover,
-      &:focus,
-      &:active,
-      &:focus-visible,
-      &[aria-current]:not([aria-current=false]) {
-        background-color: var(--menu-fill-hover);
+      & a {
+        display: block;
+        margin: calc(var(--inputs-padding-block) * -0.5)
+          calc(var(--inputs-padding-inline) * -1);
+        padding: calc(var(--inputs-padding-block) * 0.5)
+          var(--inputs-padding-inline);
+        overflow: hidden;
+        border-radius: 0;
+        color: var(--details-menu-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        &:is(
+          [aria-current]:not([aria-current="false"]),
+          :hover,
+          :active,
+          :focus
+        ) {
+          background-color: var(--details-menu-background-color-hover);
+        }
       }
-    }
 
-    & label {
-      width: 100%;
-    }
+      & label {
+        width: 100%;
+      }
 
-    &:has(label):hover {
-      background-color: var(--menu-fill-hover);
+      &:has(label):hover {
+        background-color: var(--details-menu-background-color-hover);
+      }
     }
   }
 
@@ -235,7 +229,9 @@ details:has(> summary[aria-haspopup="menu"]) {
   &[open] > summary + ul[role="menu"] {
     transform: scaleY(1);
     opacity: 1;
-    transition: opacity var(--transition), transform 0s ease-in-out 0s;
+    transition:
+      opacity var(--transition),
+      transform 0s ease-in-out 0s;
   }
 
   &[open] > summary::before {
@@ -259,31 +255,20 @@ nav details:has(> summary[aria-haspopup="menu"]) {
   margin-bottom: 0;
   display: inline;
 
-  & > summary::after {
-    transform: rotate(0deg) translateX(0rem);
-  }
-
-  & > :where(summary:not([role])) {
-    display: flex;
-    align-items: center;
-    height: auto;
-    padding: calc(var(--nav-link-gap) - var(--border-size) * 2) var(--nav-link-gap);
-  }
+  > summary {
+    display: flex !important;
+    align-items: center !important;
+    height: auto !important;
+    padding: calc(var(--nav-link-gap) - var(--border-width) * 2)
+      var(--nav-link-gap) !important;
 
-  & > :where(summary:not([role]):focus-visible) {
-    box-shadow: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
-  }
-
-  & summary:focus-visible {
-    --outline-size: 0.125rem;
-  }
+    &::after {
+      transform: rotate(0deg) translateX(0rem);
+    }
 
-  /* Styles for dropdowns with role="button" inside nav */
-  & > summary[role="button"] {
-    display: flex;
-    align-items: center;
-    width: auto;
-    height: auto;
-    padding: calc(var(--nav-link-gap) - var(--border-size) * 2) var(--nav-link-gap);
+    /* Styles for dropdowns with role="button" inside nav */
+    &:is([role="button"]) {
+      width: auto;
+    }
   }
 }