@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/palettes/slate.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Slate
-  Overrides primary color variables for the slate palette
-*/
+:root,
+:host {
+  /* --color-slate-950: #0e1118; */
+  /* --color-slate-900: #181c25; */
+  /* --color-slate-850: #202632; */
+  /* --color-slate-800: #2a3140; */
+  /* --color-slate-750: #333c4e; */
+  /* --color-slate-700: #3d475c; */
+  /* --color-slate-650: #48536b; */
+  --color-slate-600: #525f7a;
+  --color-slate-550: #5d6b89;
+  /* --color-slate-500: #687899; */
+  /* --color-slate-450: #7385a9; */
+  /* --color-slate-400: #8191b5; */
+  --color-slate-350: #909ebe;
+  /* --color-slate-300: #a0acc7; */
+  /* --color-slate-250: #b0b9d0; */
+  /* --color-slate-200: #bfc7d9; */
+  /* --color-slate-150: #cfd5e2; */
+  /* --color-slate-100: #dfe3eb; */
+  /* --color-slate-50: #eff1f4; */
+  /* --color-slate: var(--color-slate-550); */
 
-/* Light theme - Slate */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(130, 146, 170, 0.25);
-  --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);
-  --color-primary-hover: #383f54;
-  --color-primary-hover-bg: #383f54;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(130, 146, 170, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Slate */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(159, 176, 200, 0.1875);
-    --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);
-    --color-primary-hover: #bdcce0;
-    --color-primary-hover-bg: #525f7a;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(159, 176, 200, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-slate-550), var(--color-slate-350));
+  --color-primary-fill: var(--color-slate-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(159, 176, 200, 0.1875);
-  --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);
-  --color-primary-hover: #bdcce0;
-  --color-primary-hover-bg: #525f7a;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(159, 176, 200, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/violet.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Violet
-  Overrides primary color variables for the violet palette
-*/
+:root,
+:host {
+  /* --color-violet-950: #190928; */
+  /* --color-violet-900: #251140; */
+  /* --color-violet-850: #321856; */
+  /* --color-violet-800: #3f1e6d; */
+  /* --color-violet-750: #4d2585; */
+  /* --color-violet-700: #5b2d9c; */
+  /* --color-violet-650: #6935b3; */
+  --color-violet-600: #7540bf;
+  --color-violet-550: #8352c5;
+  /* --color-violet-500: #9062ca; */
+  /* --color-violet-450: #9b71cf; */
+  /* --color-violet-400: #a780d4; */
+  --color-violet-350: #b290d9;
+  /* --color-violet-300: #bd9fdf; */
+  /* --color-violet-250: #c9afe4; */
+  /* --color-violet-200: #d3bfe8; */
+  /* --color-violet-150: #decfed; */
+  /* --color-violet-100: #e8dff2; */
+  /* --color-violet-50: #f3eff7; */
+  /* --color-violet: var(--color-violet-550); */
 
-/* Light theme - Violet */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(167, 128, 212, 0.25);
-  --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);
-  --color-primary-hover: #6935b3;
-  --color-primary-hover-bg: #6935b3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(167, 128, 212, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Violet */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(189, 159, 223, 0.1875);
-    --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);
-    --color-primary-hover: #d3bfe8;
-    --color-primary-hover-bg: #8352c5;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(189, 159, 223, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-violet-550), var(--color-violet-350));
+  --color-primary-fill: var(--color-violet-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(189, 159, 223, 0.1875);
-  --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);
-  --color-primary-hover: #d3bfe8;
-  --color-primary-hover-bg: #8352c5;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(189, 159, 223, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/yellow.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Yellow
-  Overrides primary color variables for the yellow palette
-*/
+:root,
+:host {
+  /* --color-yellow-950: #141103; */
+  /* --color-yellow-900: #1f1c02; */
+  /* --color-yellow-850: #2b2600; */
+  /* --color-yellow-800: #363100; */
+  /* --color-yellow-750: #423c00; */
+  /* --color-yellow-700: #4e4700; */
+  /* --color-yellow-650: #5b5300; */
+  /* --color-yellow-600: #685f00; */
+  --color-yellow-550: #756b00;
+  /* --color-yellow-500: #827800; */
+  /* --color-yellow-450: #908501; */
+  /* --color-yellow-400: #9e9200; */
+  --color-yellow-350: #ad9f00;
+  /* --color-yellow-300: #bbac00; */
+  /* --color-yellow-250: #caba01; */
+  /* --color-yellow-200: #d9c800; */
+  /* --color-yellow-150: #e8d600; */
+  --color-yellow-100: #f2df0d;
+  /* --color-yellow-50: #fdf1b4; */
+  /* --color-yellow: var(--color-yellow-550); */
 
-/* Light theme - Yellow */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(209, 188, 0, 0.25);
-  --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);
-  --color-primary-hover: #6b5f00;
-  --color-primary-hover-bg: #fdf2b4;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(209, 188, 0, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Yellow */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(233, 212, 0, 0.1875);
-    --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);
-    --color-primary-hover: #f7ec58;
-    --color-primary-hover-bg: #fcf4b6;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(233, 212, 0, 0.375);
-    --color-primary-inverse: #000;
-    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-yellow-550), var(--color-yellow-350));
+  --color-primary-fill: var(--color-yellow-100);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(233, 212, 0, 0.1875);
-  --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);
-  --color-primary-hover: #f7ec58;
-  --color-primary-hover-bg: #fcf4b6;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(233, 212, 0, 0.375);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
 }

package/src/palettes/zinc.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Zinc
-  Overrides primary color variables for the zinc palette
-*/
+:root,
+:host {
+  /* --color-zinc-950: #0f1114; */
+  /* --color-zinc-900: #191c20; */
+  /* --color-zinc-850: #23262c; */
+  /* --color-zinc-800: #2d3138; */
+  /* --color-zinc-750: #373c44; */
+  /* --color-zinc-700: #424751; */
+  /* --color-zinc-650: #4d535e; */
+  /* --color-zinc-600: #5c6370; */
+  --color-zinc-550: #646b79;
+  /* --color-zinc-500: #6f7887; */
+  /* --color-zinc-450: #7b8495; */
+  /* --color-zinc-400: #8891a4; */
+  --color-zinc-350: #969eaf;
+  /* --color-zinc-300: #a4acba; */
+  /* --color-zinc-250: #b3b9c5; */
+  /* --color-zinc-200: #c2c7d0; */
+  /* --color-zinc-150: #d1d5db; */
+  /* --color-zinc-100: #e0e3e7; */
+  /* --color-zinc-50: #f0f1f3; */
+  /* --color-zinc: var(--color-zinc-550); */
 
-/* Light theme - Zinc */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(127, 139, 158, 0.25);
-  --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);
-  --color-primary-hover: #424b61;
-  --color-primary-hover-bg: #424b61;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(127, 139, 158, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Zinc */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(155, 168, 189, 0.1875);
-    --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);
-    --color-primary-hover: #bac5d4;
-    --color-primary-hover-bg: #5d6b89;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(155, 168, 189, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-zinc-550), var(--color-zinc-350));
+  --color-primary-fill: var(--color-zinc-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(155, 168, 189, 0.1875);
-  --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);
-  --color-primary-hover: #bac5d4;
-  --color-primary-hover-bg: #5d6b89;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(155, 168, 189, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/semantics/attributes/_aria-busy.css

@@ -1,6 +1,3 @@
-/**
- * Loading ([aria-busy=true])
- */
 [aria-busy=true]:not(input, select, textarea, html, form) {
   white-space: nowrap;
 

package/src/semantics/attributes/_aria-disabled.css

@@ -0,0 +1,25 @@
+/* Buttons and button-like elements */
+:is(button, [type=submit], [type=button], [type=reset], [role=button])[aria-disabled=true],
+fieldset[aria-disabled=true] :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Links */
+a[aria-disabled=true],
+[role=link][aria-disabled=true] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Form controls */
+:is(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-disabled=true],
+fieldset[aria-disabled=true] :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
+  opacity: var(--input-opacity-disabled);
+  pointer-events: none;
+}
+
+/* Switch color adjustment */
+[type=checkbox][role=switch][aria-disabled=true] {
+  --color-background: var(--border-color);
+}

package/src/semantics/attributes/_hidden.css

@@ -1,6 +1,3 @@
-/**
- * Hidden elements
- */
 [hidden],
 template {
   display: none !important;

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

@@ -1,9 +1,6 @@
-/**
- * Group ([role="group"], [role="search"])
- */
 [role="search"],
 [role="group"] {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius);
     box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
     display: inline-flex;
     gap: 0;
@@ -21,7 +18,7 @@
         margin-bottom: 0;
 
         &:not(:first-child) {
-            margin-left: calc(var(--border-width) * -1);
+            margin-left: calc(var(--border-size) * -1);
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
         }
@@ -50,13 +47,13 @@
         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
+            1rem * var(--line-height) + var(--input-spacing-vertical) *
+                2 + var(--border-size) * 2
         );
         overflow: visible;
 
         &:not(:first-child) {
-            margin-left: calc(var(--border-width) * -1);
+            margin-left: calc(var(--border-size) * -1);
 
             & > summary {
                 border-top-left-radius: 0;
@@ -95,7 +92,7 @@
             [type="button"]:focus,
             [role="button"]:focus
         ) {
-            --group-shadow: var(--group-shadow-focus-with-button);
+            --group-shadow: var(--group-shadow-focus-button);
 
             & input:not([type="checkbox"], [type="radio"]),
             & select {
@@ -104,16 +101,16 @@
         }
 
         &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-            --group-shadow: var(--group-shadow-focus-with-input);
+            --group-shadow: var(--group-shadow-focus-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-shadow: 0 0 0 var(--border-size)
+                    var(--color-primary-fill);
+                --button-shadow-hover: 0 0 0 var(--border-size)
+                    var(--color-primary-fill-hover);
             }
         }
 

package/src/semantics/attributes/_role-status-alert.css

@@ -0,0 +1,123 @@
+[role="status"],
+[role="alert"] {
+  --color-background: light-dark(
+    color-mix(in srgb, var(--color-slate-50) 25%, white),
+    color-mix(in srgb, var(--color-slate-50), transparent 95%)
+  );
+  --border-color: var(--dialog-border);
+  --alert-size: var(--border-size);
+
+  color: var(--color-text);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  border-radius: var(--radius);
+  border: var(--border-size) solid var(--border-color);
+  border-inline-start-width: var(--alert-size);
+  border-inline-start-color: var(--dialog-border);
+  background: var(--color-background);
+  position: relative;
+
+  &:is(.ghost, .subtle) {
+    --alert-size: calc(var(--border-size) * 4);
+  }
+
+  /* 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, top 0.2s ease-in-out, right 0.2s ease-in-out, left 0.2s ease-in-out, bottom 0.2s ease-in-out;
+
+  &[popover] {
+    display: none;
+    box-shadow: var(--shadow);
+    left: unset;
+    right: 0;
+    bottom: 0;
+    top: unset;
+    margin: var(--spacing);
+
+    &:popover-open {
+      display: flex;
+    }
+
+    &[data-placement="top-start"] {
+      left: 0;
+      right: unset;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-end"] {
+      right: 0;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="middle-start"] {
+      left: 0;
+      right: unset;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="middle-center"] {
+      right: 50%;
+      transform: translate(50%, 50%);
+      bottom: 50%;
+    }
+
+    &[data-placement="middle-end"] {
+      right: 0;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="bottom-start"] {
+      left: 0;
+      right: unset;
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-end"] {
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@starting-style {
+  :is([role="status"], [role="alert"]):popover-open {
+    opacity: 0;
+
+    &:not([data-placement]) {
+      right: -20px;
+    }
+
+    &[data-placement$="start"] {
+      left: -20px;
+    }
+
+    &[data-placement="top-center"] {
+      top: -20px;
+    }
+
+    &[data-placement="bottom-center"] {
+      bottom: -20px;
+    }
+
+    &[data-placement$="end"] {
+      right: -20px;
+    }
+  }
+}

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

@@ -1,9 +1,6 @@
-/**
- * Minimal grid system with auto-layout columns
- */
 [role="toolbar"] {
-  grid-column-gap: var(--grid-column-gap);
-  grid-row-gap: var(--grid-row-gap);
+  grid-column-gap: var(--spacing);
+  grid-row-gap: var(--spacing);
   display: grid;
   grid-template-columns: 1fr;
 

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

@@ -1,13 +1,10 @@
-/**
- * Tooltip ([role="tooltip"])
- */
 :has(> [role="tooltip"]) {
   position: relative;
   display: inline-block;
   width: fit-content;
 }
 
-:not(a, button, input, [role=button])[aria-describedby] {
+:not(a, button, dialog, input, [role=button])[aria-describedby] {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;
@@ -21,8 +18,8 @@
   left: 50%;
   padding: 0.25rem 0.5rem;
   transform: translate(-50%, -0.25rem);
-  border-radius: var(--border-radius);
-  background: var(--tooltip-bg);
+  border-radius: var(--radius);
+  background: var(--tooltip-fill);
   color: var(--tooltip-text);
   font-style: normal;
   font-weight: var(--font-weight);
@@ -40,7 +37,7 @@
     top: 100%;
     left: 50%;
     transform: translate(-50%, 0);
-    border-top: 0.3rem solid var(--tooltip-bg);
+    border-top: 0.3rem solid var(--tooltip-fill);
     border-right: 0.3rem solid transparent;
     border-left: 0.3rem solid transparent;
   }
@@ -55,7 +52,7 @@
       bottom: 100%;
       transform: translate(-50%, 0);
       border-top: none;
-      border-bottom: 0.3rem solid var(--tooltip-bg);
+      border-bottom: 0.3rem solid var(--tooltip-fill);
     }
   }
 
@@ -72,7 +69,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-left: 0.3rem solid var(--tooltip-bg);
+      border-left: 0.3rem solid var(--tooltip-fill);
       border-right: none;
     }
   }
@@ -90,7 +87,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-right: 0.3rem solid var(--tooltip-bg);
+      border-right: 0.3rem solid var(--tooltip-fill);
       border-left: none;
     }
   }

package/src/semantics/elements/_article.css

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

package/src/semantics/elements/_aside.css

@@ -1,11 +1,5 @@
-/**
- * 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 {
-  width: var(--sidebar-width) !important;
+  width: var(--sidebar-size) !important;
   padding: var(--spacing) !important;
 
   :where(ol, ul, li) {

package/src/semantics/elements/_blockquote.css

@@ -1,7 +1,7 @@
 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-inline-start: 0.25rem solid var(--color-border);
+  border-left: 0.25rem solid var(--color-border);
   border-right: none;
   color: var(--color-text);
   display: block;