@rcarls/rc-theme-substrate 0.5.0 → 0.7.0

package/components/accordion.css

@@ -1,119 +1,18 @@
 @layer rc-theme-substrate.components {
+  /*
+   * Only the group box. Panels inside an accordion take the same
+   * `--rc-disclosure-*` mapping as a standalone disclosure, which disclosure.css
+   * sets for `rc-accordion` as well, so the panel recipe is not repeated here.
+   */
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion {
-    display: grid;
-    gap: 0.5rem;
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > details,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure > details {
-    border: var(--rc-border, 1px solid ButtonBorder);
-    border-radius: var(--substrate-radius-lg, 0.75rem);
-    background: var(--substrate-surface-raised, Canvas);
-    overflow: clip;
-    transition:
-      border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > details[open],
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-accordion
-    > rc-disclosure
-    > details[open] {
-    box-shadow: var(--substrate-shadow-sm, none);
-  }
+    --rc-accordion-gap: 0.5rem;
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary,
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure summary {
+    /* Laid out before the element upgrades; see disclosure.css. */
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 0.75rem;
-    align-items: center;
-    min-block-size: 2.75rem;
-    padding-block: 0.75rem;
-    padding-inline: 0.875rem;
-    cursor: pointer;
-    font-weight: 650;
-    transition:
-      background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary:hover {
-    background: color-mix(in srgb, var(--rc-accent, Highlight) 8%, transparent);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary::marker {
-    content: '';
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-accordion
-    summary::-webkit-details-marker {
-    display: none;
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion summary::after {
-    content: '';
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
-    border-block-start: 2px solid currentColor;
-    border-inline-end: 2px solid currentColor;
-    rotate: 45deg;
-    transition:
-      rotate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details[open] > summary::after {
-    rotate: 135deg;
-    translate: 0 -0.125rem;
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details > :not(summary) {
-    display: flow-root;
-    padding-inline: 0.875rem;
-    opacity: 1;
-    transition:
-      opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-  }
-
-  @supports selector(::details-content) {
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details {
-      interpolate-size: allow-keywords;
-    }
-
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion details::details-content {
-      block-size: 0;
-      content-visibility: hidden;
-      opacity: 0;
-      overflow: clip;
-      transition:
-        block-size var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease),
-        content-visibility var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease) allow-discrete,
-        opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-      transition-behavior: allow-discrete;
-    }
-
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-      rc-accordion
-      details[open]::details-content {
-      block-size: auto;
-      content-visibility: visible;
-      opacity: 1;
-    }
+    gap: var(--rc-accordion-gap, 0.5rem);
   }
 
-  @starting-style {
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-      rc-accordion
-      details[open]
-      > :not(summary) {
-      opacity: 0;
-      translate: 0 -0.25rem;
-    }
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-accordion > rc-disclosure {
+    display: block;
   }
 }

package/components/adaptive-menu.css

@@ -0,0 +1,98 @@
+@layer rc-theme-substrate.components {
+  /*
+   * Declared on the theme root rather than on rc-adaptive-menu so menus
+   * rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) {
+    --rc-adaptive-menu-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-adaptive-menu-icon-size: 1.25rem;
+
+    --rc-adaptive-menu-trigger-background: transparent;
+    --rc-adaptive-menu-trigger-border: 0;
+    --rc-adaptive-menu-trigger-color: var(--substrate-on-surface-muted, ButtonText);
+    --rc-adaptive-menu-trigger-block-size: 2.25rem;
+    --rc-adaptive-menu-trigger-inline-size: 2.25rem;
+    --rc-adaptive-menu-trigger-padding: 0.375rem;
+    --rc-adaptive-menu-trigger-radius: var(--substrate-radius-md, 0.5rem);
+    --rc-adaptive-menu-trigger-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 10%,
+      var(--substrate-surface, Canvas)
+    );
+
+    /*
+     * The trigger is drawn at 2.25rem for density, so the hit area is inflated
+     * separately to clear the 3rem touch minimum without widening the row.
+     */
+    --rc-adaptive-menu-touch-target-block-size: 3rem;
+    --rc-adaptive-menu-touch-target-inline-size: 3rem;
+    --rc-adaptive-menu-touch-target-overlap-inline-end: 0.375rem;
+
+    --rc-adaptive-menu-popup-min-inline-size: 12rem;
+
+    /*
+     * The sheet presentation exists because a finger is doing the pointing, so
+     * its rows take the larger list item height rather than the menu row height.
+     */
+    --rc-adaptive-menu-item-min-block-size: 3rem;
+    --rc-adaptive-menu-item-padding-block: var(--substrate-item-padding-block, 0.55rem);
+    --rc-adaptive-menu-item-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-adaptive-menu-item-gap: var(--substrate-item-gap, 0.5rem);
+  }
+}
+
+/*
+ * An action rc-adaptive-menu moves into its overflow renders as a menu row.
+ * rc-adaptive-menu maps the action's own tokens onto its item tokens in rc-base,
+ * which sits below every theme layer, so this layer repeats the mapping above the
+ * theme's button and menu-button variants (filled, tonal, icon-only sizes, and so
+ * on) that would otherwise restyle the row as a standalone control.
+ */
+@layer rc-theme-substrate.overrides {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-adaptive-menu
+    > rc-button[data-rc-action-overflowed] {
+    --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-icon-size: 100%;
+    --rc-button-touch-target-inline-size: 100%;
+    --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-button-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-button-radius: 0;
+    --rc-button-bg: transparent;
+    --rc-button-color: currentColor;
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: currentColor;
+    --rc-button-progress-color: currentColor;
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed] {
+    --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-icon-size: 100%;
+    --rc-menu-button-touch-target-inline-size: 100%;
+    --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-trigger-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-menu-button-trigger-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: currentColor;
+    --rc-menu-button-trigger-hover-color: currentColor;
+    --rc-menu-button-trigger-open-color: currentColor;
+  }
+}

package/components/app-bar.css

@@ -1,10 +1,6 @@
 @layer rc-theme-substrate.components {
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-app-bar {
-    --rc-app-bar-background: color-mix(
-      in srgb,
-      var(--substrate-surface, Canvas) 88%,
-      transparent
-    );
+    --rc-app-bar-bg: color-mix(in srgb, var(--substrate-surface, Canvas) 88%, transparent);
     --rc-app-bar-color: var(--rc-field-text, CanvasText);
     --rc-app-bar-scroll-divider: var(--rc-border, 1px solid ButtonBorder);
     --rc-app-bar-shadow: none;

package/components/bottom-sheet.css

@@ -55,7 +55,7 @@
     [data-rc-bottom-sheet-handle]::before {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
+    inset-block-start: var(--rc-bottom-sheet-handle-offset, 50%);
     inset-inline-start: 50%;
     inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
     block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);

package/components/carousel.css

@@ -0,0 +1,31 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-carousel {
+    --rc-carousel-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-gap: var(--substrate-control-gap, 0.5rem);
+
+    /*
+     * A slide is a raised card on the page surface, which is what separates it
+     * from the track behind it without needing a border.
+     */
+    --rc-carousel-item-background: var(--substrate-surface-raised, Canvas);
+    --rc-carousel-item-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-item-border-radius: var(--substrate-radius-lg, 0.75rem);
+
+    --rc-carousel-navigation-button-background: color-mix(
+      in srgb,
+      var(--substrate-surface, Canvas) 88%,
+      transparent
+    );
+    --rc-carousel-navigation-button-color: var(--substrate-on-surface, CanvasText);
+    --rc-carousel-navigation-button-size: 2.25rem;
+    --rc-carousel-navigation-inset: 0.5rem;
+
+    --rc-carousel-pagination-item-active-color: var(--rc-accent, Highlight);
+    --rc-carousel-pagination-item-color: color-mix(
+      in srgb,
+      var(--substrate-on-surface-muted, GrayText) 40%,
+      transparent
+    );
+    --rc-carousel-pagination-item-size: 0.5rem;
+  }
+}

package/components/chip-group.css

@@ -0,0 +1,21 @@
+@layer rc-theme-substrate.components {
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-chip-group {
+    --rc-chip-group-column-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-row-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-padding-block: 0.25rem;
+
+    /*
+     * A scrolling group is padded on the inline axis so a chip snapped to the
+     * start does not sit flush against the edge it scrolled from.
+     */
+    --rc-chip-group-scroll-padding-inline: var(--substrate-item-padding-inline, 0.75rem);
+    --rc-chip-group-scrollbar-width: none;
+
+    --rc-chip-group-toggle-gap: var(--substrate-control-gap, 0.5rem);
+    --rc-chip-group-toggle-icon-size: 1.125rem;
+    --rc-chip-group-toggle-separator-color: var(--substrate-border-color, ButtonBorder);
+    --rc-chip-group-toggle-separator-block-size: 1.5rem;
+    --rc-chip-group-toggle-separator-inline-size: 1px;
+    --rc-chip-group-toggle-separator-gap: var(--substrate-control-gap, 0.5rem);
+  }
+}

package/components/dialog.css

@@ -1,22 +1,28 @@
 @layer rc-theme-substrate.components {
+  /*
+   * Maps Substrate tokens onto the public rc-dialog properties. The surface and
+   * the fullscreen geometry are drawn by the component's own light-DOM base
+   * layer; what is left here is the mapping plus the open and close motion,
+   * which depends on state selectors a bounded property cannot express.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog {
+    --rc-dialog-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-dialog-radius: var(--substrate-radius-xl, 1rem);
+    --rc-dialog-background: var(--substrate-surface-raised, Canvas);
+    --rc-dialog-color: var(--rc-field-text, CanvasText);
+    --rc-dialog-shadow: var(--substrate-shadow-lg, none);
+  }
+
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog {
-    border: var(--rc-border, 1px solid ButtonBorder);
-    border-radius: var(--substrate-radius-xl, 1rem);
-    background: var(--substrate-surface-raised, Canvas);
-    color: var(--rc-field-text, CanvasText);
-    box-shadow: var(--substrate-shadow-lg, none);
     opacity: 1;
-    transform: translateY(0) scale(1);
     transition:
       display var(--substrate-motion-duration-slow, 240ms) allow-discrete,
       overlay var(--substrate-motion-duration-slow, 240ms) allow-discrete,
-      opacity var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease),
-      transform var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease);
+      opacity var(--substrate-motion-duration-slow, 240ms) var(--substrate-motion-easing, ease);
     transition-behavior: allow-discrete;
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog::backdrop {
-    background: var(--rc-dialog-scrim, color-mix(in srgb, CanvasText 32%, transparent));
     transition: opacity var(--substrate-motion-duration-slow, 240ms)
       var(--substrate-motion-easing, ease);
   }
@@ -24,12 +30,10 @@
   @starting-style {
     :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog[open] {
       opacity: 0;
-      transform: translateY(0.5rem) scale(0.98);
     }
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-dialog > dialog:not([open]) {
     opacity: 0;
-    transform: translateY(0.5rem) scale(0.98);
   }
 }

package/components/disclosure.css

@@ -1,53 +1,89 @@
 @layer rc-theme-substrate.components {
+  /*
+   * Maps Substrate tokens onto the public rc-disclosure properties, for both
+   * `rc-disclosure` and `rc-accordion`, since a panel reads the same properties
+   * either way. The boxes themselves are drawn by the component's own light-DOM
+   * base layer.
+   */
   :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure {
+    /*
+     * Layout stays in theme CSS so a disclosure is laid out before the element
+     * upgrades; only the property-driven drawing lives in the component's base
+     * layer, which needs JS to install.
+     */
     display: block;
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details {
-    border: var(--rc-border, 1px solid ButtonBorder);
-    border-radius: var(--substrate-radius-lg, 0.75rem);
-    background: var(--substrate-surface-raised, Canvas);
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) :is(rc-disclosure, rc-accordion) {
+    --rc-disclosure-border: var(--rc-border, 1px solid ButtonBorder);
+    --rc-disclosure-radius: var(--substrate-radius-lg, 0.75rem);
+    --rc-disclosure-background: var(--substrate-surface-raised, Canvas);
+    --rc-disclosure-color: var(--substrate-on-surface, CanvasText);
+    --rc-disclosure-open-shadow: var(--substrate-shadow-sm, none);
+
+    --rc-disclosure-summary-min-block-size: 2.75rem;
+    --rc-disclosure-summary-padding-block: 0.75rem;
+    --rc-disclosure-summary-padding-inline: 0.875rem;
+    --rc-disclosure-summary-gap: 0.75rem;
+    --rc-disclosure-summary-font: 650 var(--substrate-font-size, 0.95rem) /
+      var(--substrate-line-height, 1.45) var(--substrate-font-family, sans-serif);
+    --rc-disclosure-summary-hover-background: color-mix(
+      in srgb,
+      var(--rc-accent, Highlight) 8%,
+      transparent
+    );
+
+    --rc-disclosure-content-padding-block: 0 0.875rem;
+    --rc-disclosure-content-padding-inline: 0.875rem;
+    --rc-disclosure-content-color: var(--substrate-on-surface-muted, CanvasText);
+
+    --rc-disclosure-duration: var(--substrate-motion-spatial-duration-default, 240ms);
+    --rc-disclosure-easing: var(--substrate-motion-easing, ease);
+  }
+
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details {
     overflow: clip;
     transition:
       border-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
       box-shadow var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
   }
 
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details[open] {
-    box-shadow: var(--substrate-shadow-sm, none);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details > summary {
+  /*
+   * Substrate replaces the native marker with its own chevron, so it owns both
+   * halves of that swap: hiding `::marker` and drawing the affordance. Changing
+   * `display` here is safe precisely because this rule also supplies the
+   * replacement the lost `list-item` box would have drawn.
+   */
+  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: 0.75rem;
     align-items: center;
-    min-block-size: 2.75rem;
-    padding-block: 0.75rem;
-    padding-inline: 0.875rem;
-    cursor: pointer;
-    font-weight: 650;
     transition:
       background-color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
       color var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details
     > summary::marker {
     content: '';
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details
     > summary::-webkit-details-marker {
     display: none;
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details
     > summary::after {
     content: '';
@@ -62,7 +98,7 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details[open]
     > summary::after {
     rotate: 135deg;
@@ -70,61 +106,9 @@
   }
 
   :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
-    > details
-    > summary:hover {
-    background: color-mix(in srgb, var(--rc-accent, Highlight) 8%, transparent);
-  }
-
-  :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details
     > :not(summary) {
     display: flow-root;
-    padding-inline: 0.875rem;
-    opacity: 1;
-    transition:
-      opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease),
-      translate var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-  }
-
-  @supports selector(::details-content) {
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate)) rc-disclosure > details {
-      interpolate-size: allow-keywords;
-    }
-
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-      rc-disclosure
-      > details::details-content {
-      block-size: 0;
-      content-visibility: hidden;
-      opacity: 0;
-      overflow: clip;
-      transition:
-        block-size var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease),
-        content-visibility var(--substrate-motion-duration-slow, 240ms)
-          var(--substrate-motion-easing, ease) allow-discrete,
-        opacity var(--rc-motion-duration, 160ms) var(--substrate-motion-easing, ease);
-      transition-behavior: allow-discrete;
-    }
-
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-      rc-disclosure
-      > details[open]::details-content {
-      block-size: auto;
-      content-visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  @starting-style {
-    :where(.rc-theme-substrate, :host(.rc-theme-substrate))
-      rc-disclosure
-      > details[open]
-      > :not(summary) {
-      opacity: 0;
-      translate: 0 -0.25rem;
-    }
   }
 }

package/components/fab-menu.css

@@ -10,10 +10,10 @@
     --rc-fab-menu-bg-hover: var(--rc-fab-menu-bg);
     --rc-fab-menu-bg-open: var(--rc-fab-menu-bg-hover);
     --rc-fab-menu-color: var(--rc-on-accent, HighlightText);
-    --rc-fab-menu-shadow: var(--substrate-shadow-raised, var(--rc-shadow-level2, none));
-    --rc-fab-menu-shadow-hover: var(--substrate-shadow-overlay, var(--rc-shadow-level3, none));
+    --rc-fab-menu-shadow: var(--substrate-shadow-md, var(--rc-shadow-level2, none));
+    --rc-fab-menu-shadow-hover: var(--substrate-shadow-lg, var(--rc-shadow-level3, none));
     --rc-fab-menu-shadow-open: var(--rc-fab-menu-shadow-hover);
-    --rc-fab-menu-shadow-active: var(--substrate-shadow-raised, var(--rc-shadow-level2, none));
+    --rc-fab-menu-shadow-active: var(--substrate-shadow-md, var(--rc-shadow-level2, none));
     --rc-fab-menu-radius: var(--substrate-radius-lg, 1rem);
     --rc-fab-menu-font: inherit;
     --rc-fab-menu-font-family: inherit;