@seed-design/css 2.4.2 → 2.6.0

package/recipes/pagination-page-item.layered.css

@@ -0,0 +1,118 @@
+@layer seed-components {
+  .seed-pagination-page-item {
+    box-sizing: border-box;
+    cursor: pointer;
+    text-transform: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    width: var(--seed-dimension-x10);
+    height: var(--seed-dimension-x10);
+    border-radius: var(--seed-radius-r2);
+    isolation: isolate;
+    color: var(--seed-color-fg-neutral);
+    font-family: inherit;
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-bold);
+    background: none;
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-pagination-page-item:before {
+    content: "";
+    z-index: -1;
+    border-radius: inherit;
+    background-color: var(--seed-color-bg-transparent);
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-pagination-page-item > [data-pagination-page-item-label] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  .seed-pagination-page-item {
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-pagination-page-item {
+    scale: 1;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  .seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s97);
+  }
+
+  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
+    color: var(--seed-color-fg-neutral-inverted);
+  }
+
+  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
+    background-color: var(--seed-color-bg-neutral-inverted);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
+      background-color: var(--seed-color-bg-neutral-inverted-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
+      background-color: var(--seed-color-bg-neutral-inverted-pressed);
+    }
+  }
+
+  .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
+    background-color: var(--seed-color-bg-transparent);
+  }
+
+  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
+    background-color: var(--seed-color-bg-disabled);
+  }
+
+  .seed-pagination-page-item {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  }
+}

package/recipes/pagination-page-item.layered.mjs

@@ -0,0 +1,22 @@
+import './pagination-page-item.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const paginationPageItemVariantMap = {};
+
+export const paginationPageItemVariantKeys = Object.keys(paginationPageItemVariantMap);
+
+export function paginationPageItem(props) {
+  return createClassName(
+    "seed-pagination-page-item",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(paginationPageItem, { splitVariantProps: (props) => splitVariantProps(props, paginationPageItemVariantMap) });
+
+// @recipe(seed): pagination-page-item

package/recipes/pagination-page-item.mjs

@@ -0,0 +1,22 @@
+import './pagination-page-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const paginationPageItemVariantMap = {};
+
+export const paginationPageItemVariantKeys = Object.keys(paginationPageItemVariantMap);
+
+export function paginationPageItem(props) {
+  return createClassName(
+    "seed-pagination-page-item",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(paginationPageItem, { splitVariantProps: (props) => splitVariantProps(props, paginationPageItemVariantMap) });
+
+// @recipe(seed): pagination-page-item

package/recipes/pull-to-refresh.css

@@ -1,5 +1,5 @@
 .seed-pull-to-refresh__root {
-    --ptr-size: 44px;
+    --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
     --ptr-transition-duration: var(--seed-duration-d6);
     height: 100%;
 }

package/recipes/pull-to-refresh.layered.css

@@ -1,6 +1,6 @@
 @layer seed-components {
   .seed-pull-to-refresh__root {
-    --ptr-size: 44px;
+    --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
     --ptr-transition-duration: var(--seed-duration-d6);
     height: 100%;
   }

package/recipes/quantity-picker.css

@@ -19,7 +19,7 @@
     border: none;
     padding: 0;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }
@@ -27,6 +27,9 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);
@@ -91,7 +94,7 @@
     border: none;
     padding: 0;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }
@@ -99,6 +102,9 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/quantity-picker.layered.css

@@ -16,7 +16,7 @@
     box-sizing: border-box;
     cursor: pointer;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
     border: none;
@@ -32,6 +32,10 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
@@ -99,7 +103,7 @@
     box-sizing: border-box;
     cursor: pointer;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
     border: none;
@@ -115,6 +119,10 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/radiomark.css

@@ -10,7 +10,12 @@
     border-color: var(--seed-color-stroke-neutral-weak);
     border-radius: var(--seed-radius-full);
     margin-top: var(--radiomark-margin-top, 0);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
+}
+.seed-radiomark__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
     outline-offset: var(--seed-dimension-x0_5);
 }

package/recipes/radiomark.layered.css

@@ -6,9 +6,6 @@
     border-color: var(--seed-color-stroke-neutral-weak);
     border-radius: var(--seed-radius-full);
     margin-top: var(--radiomark-margin-top, 0);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
-    outline-offset: var(--seed-dimension-x0_5);
     flex: none;
     justify-content: center;
     align-items: center;
@@ -16,6 +13,16 @@
     position: relative;
   }
 
+  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
+  }
+
+  .seed-radiomark__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/reaction-button.css

@@ -21,8 +21,11 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     background: var(--seed-color-bg-transparent);
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);

package/recipes/reaction-button.layered.css

@@ -24,8 +24,12 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     background: var(--seed-color-bg-transparent);
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);

package/recipes/select-box.css

@@ -5,7 +5,7 @@
     flex-direction: column;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     overflow: hidden;
 }
@@ -36,10 +36,10 @@
 }
 .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
 .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
 }
 .seed-select-box__root {
     outline: var(--seed-dimension-x0_5) solid transparent;

package/recipes/select-box.layered.css

@@ -3,7 +3,7 @@
     cursor: pointer;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     flex-direction: column;
     display: flex;
@@ -40,11 +40,11 @@
 
   .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
   }
 
   .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
   }
 
   .seed-select-box__root {

package/recipes/select.css

@@ -38,7 +38,7 @@
 }
 .seed-select__scrollArea {
     overflow-y: auto;
-    max-height: min(480px, var(--seed-select-available-height, 480px));
+    max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     display: flex;

package/recipes/select.layered.css

@@ -44,7 +44,7 @@
   }
 
   .seed-select__scrollArea {
-    max-height: min(480px, var(--seed-select-available-height, 480px));
+    max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     gap: var(--seed-dimension-x2);

package/recipes/side-panel.css

@@ -230,7 +230,12 @@
     padding: calc((52px - 22px) / 2);
     margin: calc((22px - 52px) / 2);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-side-panel__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-side-panel__closeButton {
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
     outline: var(--seed-dimension-x0_5) solid transparent;

package/recipes/side-panel.layered.css

@@ -249,11 +249,6 @@
     top: calc(28px + var(--seed-safe-area-top));
     border-radius: var(--seed-radius-r3);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    --seed-icon-size: 22px;
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     justify-content: center;
     align-items: center;
@@ -264,6 +259,18 @@
     right: 24px;
   }
 
+  .seed-side-panel__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-side-panel__closeButton {
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    --seed-icon-size: 22px;
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);

package/recipes/snackbar.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    max-width: 560px;
+    max-width: 464px;
     background: var(--seed-color-bg-neutral-inverted);
     border-radius: var(--seed-radius-r2);
     padding-inline: var(--seed-dimension-x2_5);
@@ -76,6 +76,12 @@
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-bold);
 }
+.seed-snackbar__actionButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-snackbar__actionButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+}
 .seed-snackbar__actionButton:after {
     content: '';
     position: absolute;

package/recipes/snackbar.layered.css

@@ -4,7 +4,7 @@
     background: var(--seed-color-bg-neutral-inverted);
     border-radius: var(--seed-radius-r2);
     width: 100%;
-    max-width: 560px;
+    max-width: 464px;
     padding-inline: var(--seed-dimension-x2_5);
     padding-block: var(--seed-dimension-x2_5);
     min-height: 44px;
@@ -85,6 +85,14 @@
     position: relative;
   }
 
+  .seed-snackbar__actionButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-snackbar__actionButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+  }
+
   .seed-snackbar__actionButton:after {
     content: "";
     top: 50%;

package/recipes/switchmark.css

@@ -5,7 +5,10 @@
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-palette-gray-600);
     margin: var(--switchmark-margin-top, 0) 0;
-    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
 }
 .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.38;

package/recipes/switchmark.layered.css

@@ -4,11 +4,15 @@
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-palette-gray-600);
     margin: var(--switchmark-margin-top, 0) 0;
-    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     display: block;
     position: relative;
   }
 
+  .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
+  }
+
   .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
     opacity: .38;
   }

package/recipes/tabs.css

@@ -83,8 +83,11 @@
     height: 2px;
     background-color: var(--seed-color-fg-neutral);
 }
+.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-tabs__trigger {
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }

package/recipes/tabs.layered.css

@@ -95,8 +95,12 @@
     bottom: 0;
   }
 
+  .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-tabs__trigger {
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }

package/recipes/toggle-button.css

@@ -24,8 +24,11 @@
 .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
+.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-toggle-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
 }
 .seed-toggle-button--variant_brandSolid {

package/recipes/toggle-button.layered.css

@@ -28,8 +28,12 @@
     cursor: not-allowed;
   }
 
+  .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-toggle-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
   }