@semanticus/semanticus-css 0.7.0 → 0.9.0

package/src/palettes/pumpkin.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(232, 120, 62, 0.25);
-  --color-primary: #9e3806;
+  --color-primary-rgb: 158, 56, 6;
   --color-primary-bg: #f4a37d;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(158, 56, 6, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(243, 153, 111, 0.1875);
-    --color-primary: #f3996f;
+    --color-primary-rgb: 243, 153, 111;
     --color-primary-bg: #f4a37d;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(243, 153, 111, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(243, 153, 111, 0.1875);
-  --color-primary: #f3996f;
+  --color-primary-rgb: 243, 153, 111;
   --color-primary-bg: #f4a37d;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(243, 153, 111, 0.5);

package/src/palettes/purple.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(205, 104, 224, 0.25);
-  --color-primary: #9236a4;
+  --color-primary-rgb: 146, 54, 164;
   --color-primary-bg: #9236a4;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(146, 54, 164, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(219, 144, 232, 0.1875);
-    --color-primary: #db90e8;
+    --color-primary-rgb: 219, 144, 232;
     --color-primary-bg: #9236a4;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(219, 144, 232, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(219, 144, 232, 0.1875);
-  --color-primary: #db90e8;
+  --color-primary-rgb: 219, 144, 232;
   --color-primary-bg: #9236a4;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(219, 144, 232, 0.5);

package/src/palettes/red.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(240, 96, 72, 0.25);
-  --color-primary: #c52f21;
+  --color-primary-rgb: 197, 47, 33;
   --color-primary-bg: #c52f21;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(197, 47, 33, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(243, 143, 121, 0.1875);
-    --color-primary: #f38f79;
+    --color-primary-rgb: 243, 143, 121;
     --color-primary-bg: #c52f21;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(243, 143, 121, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(243, 143, 121, 0.1875);
-  --color-primary: #f38f79;
+  --color-primary-rgb: 243, 143, 121;
   --color-primary-bg: #c52f21;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(243, 143, 121, 0.5);

package/src/palettes/sand.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(181, 157, 119, 0.25);
-  --color-primary: #6b5733;
+  --color-primary-rgb: 107, 87, 51;
   --color-primary-bg: #e6d5b8;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(107, 87, 51, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(201, 178, 140, 0.1875);
-    --color-primary: #c9b28c;
+    --color-primary-rgb: 201, 178, 140;
     --color-primary-bg: #e6d5b8;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(201, 178, 140, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(201, 178, 140, 0.1875);
-  --color-primary: #c9b28c;
+  --color-primary-rgb: 201, 178, 140;
   --color-primary-bg: #e6d5b8;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(201, 178, 140, 0.5);

package/src/palettes/slate.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(130, 146, 170, 0.25);
-  --color-primary: #48536b;
+  --color-primary-rgb: 72, 83, 107;
   --color-primary-bg: #48536b;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(72, 83, 107, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(159, 176, 200, 0.1875);
-    --color-primary: #9fb0c8;
+    --color-primary-rgb: 159, 176, 200;
     --color-primary-bg: #48536b;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(159, 176, 200, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(159, 176, 200, 0.1875);
-  --color-primary: #9fb0c8;
+  --color-primary-rgb: 159, 176, 200;
   --color-primary-bg: #48536b;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(159, 176, 200, 0.5);

package/src/palettes/violet.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(167, 128, 212, 0.25);
-  --color-primary: #7540bf;
+  --color-primary-rgb: 117, 64, 191;
   --color-primary-bg: #7540bf;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(117, 64, 191, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(189, 159, 223, 0.1875);
-    --color-primary: #bd9fdf;
+    --color-primary-rgb: 189, 159, 223;
     --color-primary-bg: #7540bf;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(189, 159, 223, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(189, 159, 223, 0.1875);
-  --color-primary: #bd9fdf;
+  --color-primary-rgb: 189, 159, 223;
   --color-primary-bg: #7540bf;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(189, 159, 223, 0.5);

package/src/palettes/yellow.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(209, 188, 0, 0.25);
-  --color-primary: #8a7a00;
+  --color-primary-rgb: 138, 122, 0;
   --color-primary-bg: #fcf19c;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(138, 122, 0, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(233, 212, 0, 0.1875);
-    --color-primary: #e9d400;
+    --color-primary-rgb: 233, 212, 0;
     --color-primary-bg: #fcf19c;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(233, 212, 0, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(233, 212, 0, 0.1875);
-  --color-primary: #e9d400;
+  --color-primary-rgb: 233, 212, 0;
   --color-primary-bg: #fcf19c;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(233, 212, 0, 0.5);

package/src/palettes/zinc.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(127, 139, 158, 0.25);
-  --color-primary: #525f7a;
+  --color-primary-rgb: 82, 95, 122;
   --color-primary-bg: #525f7a;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(82, 95, 122, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(155, 168, 189, 0.1875);
-    --color-primary: #9ba8bd;
+    --color-primary-rgb: 155, 168, 189;
     --color-primary-bg: #525f7a;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(155, 168, 189, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(155, 168, 189, 0.1875);
-  --color-primary: #9ba8bd;
+  --color-primary-rgb: 155, 168, 189;
   --color-primary-bg: #525f7a;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(155, 168, 189, 0.5);

package/src/semantics/_misc.css

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

package/src/semantics/attributes/_popover.css

@@ -0,0 +1,13 @@
+[popover] {
+  overflow: auto;
+  border: 0;
+  padding: 0;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  height: unset;
+  margin: unset;
+
+  &:popover-open {
+    display: block !important;
+  }
+}

package/src/semantics/attributes/_role-group-search.css

@@ -0,0 +1,140 @@
+/**
+ * Group ([role="group"], [role="search"])
+ */
+[role="search"],
+[role="group"] {
+    border-radius: var(--border-radius);
+    box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    display: inline-flex;
+    gap: 0;
+    margin-bottom: var(--spacing);
+    position: relative;
+    transition: box-shadow var(--transition);
+    vertical-align: middle;
+    width: 100%;
+
+    & > *:not(details),
+    & input:not([type="checkbox"], [type="radio"]),
+    & select {
+        position: relative;
+        flex: 1 1 auto;
+        margin-bottom: 0;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-width) * -1);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:focus {
+            z-index: 2;
+        }
+    }
+
+    & button,
+    & [type="submit"],
+    & [type="reset"],
+    & [type="button"],
+    & [role="button"] {
+        width: auto;
+    }
+
+    /* Details dropdown inside group */
+    & > details {
+        position: relative;
+        margin-bottom: 0;
+        /* Constrain details height to just the button, not the dropdown menu */
+        height: calc(
+            1rem * var(--line-height) + var(--form-element-spacing-vertical) *
+                2 + var(--border-width) * 2
+        );
+        overflow: visible;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-width) * -1);
+
+            & > summary {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        &:not(:last-child) > summary {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        & > summary:focus {
+            z-index: 2;
+        }
+
+        /* Ensure consistent height with other form elements in the group */
+        & > summary[role="button"] {
+            display: flex;
+            align-items: center;
+            height: 100%;
+
+            &::after {
+                height: calc(1rem * var(--line-height, 1.5));
+            }
+        }
+    }
+}
+
+@supports selector(:has(*)) {
+    [role="search"],
+    [role="group"] {
+        &:has(
+            button:focus,
+            [type="submit"]:focus,
+            [type="button"]:focus,
+            [role="button"]:focus
+        ) {
+            --group-shadow: var(--group-shadow-focus-with-button);
+
+            & input:not([type="checkbox"], [type="radio"]),
+            & select {
+                border-color: transparent;
+            }
+        }
+
+        &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+            --group-shadow: var(--group-shadow-focus-with-input);
+
+            & button,
+            & [type="submit"],
+            & [type="button"],
+            & [role="button"] {
+                --button-shadow: 0 0 0 var(--border-width)
+                    var(--color-primary-border);
+                --button-shadow-hover: 0 0 0 var(--border-width)
+                    var(--color-primary-hover-border);
+            }
+        }
+
+        & button:focus,
+        & [type="submit"]:focus,
+        & [type="reset"]:focus,
+        & [type="button"]:focus,
+        & [role="button"]:focus {
+            box-shadow: none;
+        }
+    }
+}
+
+[role="search"] {
+    & > :first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+    }
+
+    & > :last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+    }
+}

package/src/semantics/elements/_abbr.css

@@ -0,0 +1,5 @@
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}

package/src/semantics/elements/_address.css

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

package/src/semantics/elements/_article.css

@@ -0,0 +1,6 @@
+/**
+ * Article
+ */
+article {
+  width: 100%;
+}

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

@@ -1,12 +1,12 @@
 /**
- * Aside its width changes according to breakpoints (see src/variables/_shared.css),
- * its height grows to fill the available space,
+ * Aside its width changes according to certain breakpoints,
+ * and its height grows to fill the available space,
  * and stacks its children in a column with space between them (like a <nav> would).
  * In case of a single child, this child will fill the entire height.
  */
 aside {
-  padding-inline: var(--block-spacing-horizontal);
   width: var(--sidebar-width) !important;
+  padding: var(--spacing) !important;
 
   :where(ol, ul, li) {
     align-items: stretch !important;

package/src/semantics/elements/_blockquote.css

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

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

@@ -118,8 +118,8 @@ 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);
+    --form-element-spacing-vertical: calc(var(--nav-link-spacing) - var(--border-width) * 2);
+    --form-element-spacing-horizontal: var(--nav-link-spacing);
 
     height: auto;
     margin-right: inherit;

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

@@ -8,8 +8,8 @@ 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);
+  background: var(--code-bg);
+  color: var(--code-color);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -23,10 +23,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 +47,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--color-kbd-bg);
-  color: var(--color-kbd-text);
+  background-color: var(--kbd-bg);
+  color: var(--kbd-color);
   vertical-align: baseline;
 }

package/src/semantics/elements/_del.css

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

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

@@ -53,7 +53,7 @@ details {
     &:focus-visible:not([role]) {
       outline: var(--outline-width) solid var(--color-primary-focus);
       outline-offset: calc(var(--spacing, 1rem) * 0.5);
-      color: var(--color-primary);
+      color: rgb(var(--color-primary-rgb));
     }
 
     &[role=button] {
@@ -173,11 +173,11 @@ details:has(> summary[aria-haspopup="menu"]) {
     margin: 0;
     margin-top: var(--outline-width);
     padding: 0;
-    border: var(--border-width) solid var(--dropdown-border);
+    border: var(--border-width) solid var(--menu-border);
     border-radius: var(--border-radius);
-    background-color: var(--dropdown-bg);
-    box-shadow: var(--dropdown-shadow);
-    color: var(--dropdown-text);
+    background-color: var(--menu-bg);
+    box-shadow: var(--menu-shadow);
+    color: var(--menu-text);
     white-space: nowrap;
     opacity: 0;
     transition: opacity var(--transition), transform 0s ease-in-out 1s;
@@ -208,7 +208,7 @@ details:has(> summary[aria-haspopup="menu"]) {
       padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
       overflow: hidden;
       border-radius: 0;
-      color: var(--dropdown-text);
+      color: var(--menu-text);
       text-decoration: none;
       text-overflow: ellipsis;
 
@@ -217,7 +217,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-hover-bg);
       }
     }
 
@@ -226,7 +226,7 @@ details:has(> summary[aria-haspopup="menu"]) {
     }
 
     &:has(label):hover {
-      background-color: var(--dropdown-hover-bg);
+      background-color: var(--menu-hover-bg);
     }
   }
 
@@ -269,7 +269,7 @@ 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-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
   }
 
   & > :where(summary:not([role]):focus-visible) {
@@ -286,6 +286,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-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
   }
 }

package/src/semantics/elements/_dialog.css

@@ -0,0 +1,117 @@
+/**
+ * Modal (<dialog>)
+ */
+
+/* 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(--border-radius);
+  background: var(--pane-bg);
+  box-shadow: var(--pane-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: var(--backdrop-overlay-filter);
+    background-color: var(--backdrop-overlay-bg);
+    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(--pane-section-bg);
+  }
+
+  /* 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);
+  }
+
+  /* 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;
+    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;
+    }
+  }
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  dialog[open]::backdrop {
+    backdrop-filter: none;
+    background-color: transparent;
+  }
+}