@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/palettes/red.css

@@ -1,31 +1,27 @@
 :root,
 :host {
-  /* --color-red-950: #1c0d06; */
-  /* --color-red-900: #30130a; */
-  /* --color-red-850: #45150c; */
-  /* --color-red-800: #5c160d; */
-  /* --color-red-750: #72170f; */
-  /* --color-red-700: #861d13; */
-  /* --color-red-650: #9b2318; */
-  /* --color-red-600: #af291d; */
-  --color-red-550: #c52f21;
-  /* --color-red-500: #d93526; */
-  /* --color-red-450: #ee402e; */
-  /* --color-red-400: #f06048; */
-  --color-red-350: #f17961;
-  /* --color-red-300: #f38f79; */
-  /* --color-red-250: #f5a390; */
-  /* --color-red-200: #f5b7a8; */
-  /* --color-red-150: #f6cabf; */
-  /* --color-red-100: #f8dcd6; */
-  /* --color-red-50: #faeeeb; */
-  /* --color-red: var(--color-red-550); */
+  /* --_color-red-950: #1c0d06; */
+  /* --_color-red-900: #30130a; */
+  /* --_color-red-850: #45150c; */
+  /* --_color-red-800: #5c160d; */
+  /* --_color-red-750: #72170f; */
+  /* --_color-red-700: #861d13; */
+  /* --_color-red-650: #9b2318; */
+  /* --_color-red-600: #af291d; */
+  --_color-red-550: #c52f21;
+  /* --_color-red-500: #d93526; */
+  /* --_color-red-450: #ee402e; */
+  /* --_color-red-400: #f06048; */
+  --_color-red-350: #f17961;
+  /* --_color-red-300: #f38f79; */
+  /* --_color-red-250: #f5a390; */
+  /* --_color-red-200: #f5b7a8; */
+  /* --_color-red-150: #f6cabf; */
+  /* --_color-red-100: #f8dcd6; */
+  /* --_color-red-50: #faeeeb; */
+  /* --color-red: var(--_color-red-550); */
 
   /* System tokens */
-  --color-primary-text: light-dark(var(--color-red-550), var(--color-red-350));
-  --color-primary-fill: var(--color-red-550);
-  --color-primary-on-fill: white;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-red-550), var(--_color-red-350));
+  --primary-background-color: var(--_color-red-550);
 }

package/src/palettes/sand.css

@@ -1,31 +1,27 @@
 :root,
 :host {
-  /* --color-sand-950: #111110; */
-  /* --color-sand-900: #1c1b19; */
-  /* --color-sand-850: #272622; */
-  /* --color-sand-800: #32302b; */
-  /* --color-sand-750: #3d3b35; */
-  /* --color-sand-700: #49463f; */
-  /* --color-sand-650: #55524a; */
-  /* --color-sand-600: #615e55; */
-  --color-sand-550: #6e6a60;
-  /* --color-sand-500: #7b776b; */
-  /* --color-sand-450: #888377; */
-  /* --color-sand-400: #959082; */
-  --color-sand-350: #a39e8f;
-  /* --color-sand-300: #b0ab9b; */
-  /* --color-sand-250: #beb8a7; */
-  --color-sand-200: #ccc6b4;
-  /* --color-sand-150: #dad4c2; */
-  /* --color-sand-100: #e8e2d2; */
-  /* --color-sand-50: #f2f0ec; */
-  /* --color-sand: var(--color-sand-550); */
+  /* --_color-sand-950: #111110; */
+  /* --_color-sand-900: #1c1b19; */
+  /* --_color-sand-850: #272622; */
+  /* --_color-sand-800: #32302b; */
+  /* --_color-sand-750: #3d3b35; */
+  /* --_color-sand-700: #49463f; */
+  /* --_color-sand-650: #55524a; */
+  /* --_color-sand-600: #615e55; */
+  --_color-sand-550: #6e6a60;
+  /* --_color-sand-500: #7b776b; */
+  /* --_color-sand-450: #888377; */
+  /* --_color-sand-400: #959082; */
+  --_color-sand-350: #a39e8f;
+  /* --_color-sand-300: #b0ab9b; */
+  /* --_color-sand-250: #beb8a7; */
+  --_color-sand-200: #ccc6b4;
+  /* --_color-sand-150: #dad4c2; */
+  /* --_color-sand-100: #e8e2d2; */
+  /* --_color-sand-50: #f2f0ec; */
+  /* --color-sand: var(--_color-sand-550); */
 
   /* System tokens */
-  --color-primary-text: light-dark(var(--color-sand-550), var(--color-sand-350));
-  --color-primary-fill: var(--color-sand-200);
-  --color-primary-on-fill: black;
-
-  /* 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));
+  --primary-color: light-dark(var(--_color-sand-550), var(--_color-sand-350));
+  --primary-background-color: var(--_color-sand-200);
 }

package/src/palettes/slate.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-slate-550), var(--_color-slate-350));
+  --primary-background-color: var(--_color-slate-600);
 }

package/src/palettes/violet.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-violet-550), var(--_color-violet-350));
+  --primary-background-color: var(--_color-violet-600);
 }

package/src/palettes/yellow.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* 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));
+  --primary-color: light-dark(var(--_color-yellow-550), var(--_color-yellow-350));
+  --primary-background-color: var(--_color-yellow-100);
 }

package/src/palettes/zinc.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-zinc-550), var(--_color-zinc-350));
+  --primary-background-color: var(--_color-zinc-550);
 }

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

@@ -1,4 +1,4 @@
-[aria-busy=true]:not(input, select, textarea, html, form) {
+[aria-busy="true"]:not(input, select, textarea, html, form) {
   white-space: nowrap;
 
   &::before {
@@ -20,12 +20,3 @@
     text-align: center;
   }
 }
-
-button[aria-busy=true],
-[type=submit][aria-busy=true],
-[type=button][aria-busy=true],
-[type=reset][aria-busy=true],
-[role=button][aria-busy=true],
-a[aria-busy=true] {
-  pointer-events: none;
-}

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

@@ -1,25 +1,4 @@
-/* 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;
+[aria-disabled="true"] {
+  opacity: var(--opacity-disabled);
   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/_disabled.css

@@ -0,0 +1,3 @@
+[disabled] {
+  opacity: var(--opacity-disabled);
+}

package/src/semantics/attributes/_popover.css

@@ -2,8 +2,9 @@
   overflow: auto;
   border: 0;
   padding: 0;
-  color: var(--color-text);
-  background-color: var(--color-background);
+  color: var(--typography-color);
   height: unset;
-  margin: unset;
+  margin: 0;
+  inset: auto;
+  background-color: unset;
 }

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

@@ -0,0 +1,135 @@
+[role="search"],
+[role="group"] {
+  --_group-border-radius: var(--border-radius);
+  --_group-outline-color: var(--border-color);
+
+  border-radius: var(--_group-border-radius);
+  display: inline-flex;
+  gap: 0;
+  margin-bottom: var(--spacing);
+  position: relative;
+  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) {
+      /* Pico's attempt at preventing a double sized border between elements */
+      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;
+    }
+  }
+
+  :is(
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"]
+  ) {
+    /* Buttons inside search/group combos get wider horizontal padding */
+    --_buttons-padding-inline: var(--group-buttons-padding-inline);
+
+    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(--inputs-padding-block) * 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));
+      }
+    }
+  }
+
+  &:has(
+    button:focus,
+    [type="submit"]:focus,
+    [type="button"]:focus,
+    [type="reset"]:focus,
+    [role="button"]:focus
+  ) {
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--_group-outline-color);
+  }
+
+  /* when an input is focused, we set the button styling to "focus" also */
+  &:has(
+    input:not([type="submit"], [type="reset"], [type="button"]):focus,
+    summary:focus,
+    select:focus
+  ) {
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--_group-outline-color);
+
+    :is(
+      button,
+      [type="submit"],
+      [type="reset"],
+      [type="button"],
+      [role="button"]
+    ) {
+      outline: var(--outline-width) solid var(--buttons-background-color);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--buttons-background-color);
+    }
+  }
+}
+
+[role="search"] {
+  --_group-border-radius: var(--input-search-border-radius);
+
+  & > :first-child {
+    border-top-left-radius: var(--_group-border-radius);
+    border-bottom-left-radius: var(--_group-border-radius);
+  }
+
+  & > :last-child {
+    border-top-right-radius: var(--_group-border-radius);
+    border-bottom-right-radius: var(--_group-border-radius);
+  }
+}

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

@@ -0,0 +1,23 @@
+[role="list"] {
+  --_lists-marker-color: var(--lists-marker-color);
+
+  color: var(--typography-color);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  display: block;
+  list-style-type: disc;
+  margin-top: 0;
+  margin-inline: 0;
+  margin-bottom: var(--typography-margin-block);
+  padding-inline-start: 40px;
+
+  > * {
+    display: list-item;
+    text-align: match-parent;
+    margin-bottom: calc(var(--typography-margin-block) * 0.25);
+
+    &::marker {
+      color: var(--_lists-marker-color);
+    }
+  }
+}

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

@@ -1,17 +1,26 @@
-[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);
+:is([role="status"], [role="alert"]) {
+  --_alert-color: var(--alert-color);
+  --_alert-background-color: var(--alert-background-color);
+  --_alert-spacing: var(--alert-spacing);
+  --_alert-border-color: var(--alert-border-color);
+  --_alert-border-width: var(--alert-border-width);
+  --_alert-border-accent-width: var(--alert-border-accent-width);
+  --_alert-border-radius: var(--alert-border-radius);
+  --typography-color: var(--_alert-color);
+  --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
+
+  color: var(--_alert-color);
   display: grid;
   grid-template-columns: 1fr;
   gap: calc(var(--nav-link-gap) * 1.5);
   align-items: start;
+  padding: var(--_alert-spacing);
+  margin-bottom: var(--_alert-spacing);
+  border-radius: var(--_alert-border-radius);
+  border: var(--_alert-border-width) solid var(--_alert-border-color);
+  border-inline-start-width: var(--_alert-border-accent-width);
+  border-inline-start-color: var(--_alert-border-color);
+  background: var(--_alert-background-color);
 
   &:empty {
     display: none;
@@ -33,16 +42,8 @@
     }
   }
 
-  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);
-
   &:is(.ghost, .subtle) {
-    --alert-size: calc(var(--border-size) * 4);
+    --_alert-border-accent-width: calc(var(--_alert-border-width) * 4);
   }
 
   > * {
@@ -57,16 +58,21 @@
 
   /* 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;
+  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);
+    box-shadow: var(--menu-box-shadow);
     left: unset;
     right: 0;
     bottom: 0;
     top: unset;
-    margin: var(--spacing);
+    margin: var(--_alert-spacing);
 
     &:popover-open {
       display: grid;