@seed-design/css 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -62,6 +62,10 @@
       "types": "./breakpoints/index.d.ts",
       "import": "./breakpoints/index.mjs"
     },
+    "./scale-feedback": {
+      "types": "./scale-feedback/index.d.ts",
+      "import": "./scale-feedback/index.mjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -70,6 +74,7 @@
     "vars",
     "theming",
     "breakpoints",
+    "scale-feedback",
     "utils",
     "*.css",
     "LICENSE",

package/recipes/accordion.css

@@ -129,7 +129,7 @@
     }
 }
 .seed-accordion__item--variant_separated {
-    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);
     border-radius: var(--seed-radius-r3);
     overflow: hidden;
 }

package/recipes/accordion.layered.css

@@ -147,7 +147,7 @@
   }
 
   .seed-accordion__item--variant_separated {
-    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);
     border-radius: var(--seed-radius-r3);
     overflow: hidden;
   }

package/recipes/action-button.css

@@ -64,8 +64,10 @@
 .seed-action-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
+.seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-action-button {
-    scale: 1;
     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);
 }
 .seed-action-button--variant_brandSolid {
@@ -297,9 +299,6 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x3_5);
 }
-.seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s95);
-}
 .seed-action-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-r2);
@@ -309,9 +308,6 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x4);
 }
-.seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s97);
-}
 .seed-action-button--size_medium {
     height: var(--seed-dimension-x10);
     border-radius: var(--seed-radius-r2);
@@ -321,9 +317,6 @@
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-icon-size: 18px;
 }
-.seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s97);
-}
 .seed-action-button--size_large {
     height: var(--seed-dimension-x13);
     border-radius: var(--seed-radius-r3);
@@ -333,9 +326,6 @@
     --seed-suffix-icon-size: 22px;
     --seed-icon-size: 22px;
 }
-.seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s98);
-}
 .seed-action-button--layout_withText {}
 .seed-action-button--layout_iconOnly {}
 .seed-action-button--size_xsmall-layout_withText {

package/recipes/action-button.layered.css

@@ -68,9 +68,12 @@
     cursor: not-allowed;
   }
 
+  .seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-action-button {
     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);
-    scale: 1;
   }
 
   .seed-action-button--variant_brandSolid {
@@ -338,10 +341,6 @@
     --seed-icon-size: var(--seed-dimension-x3_5);
   }
 
-  .seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s95);
-  }
-
   .seed-action-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-r2);
@@ -352,10 +351,6 @@
     --seed-icon-size: var(--seed-dimension-x4);
   }
 
-  .seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s97);
-  }
-
   .seed-action-button--size_medium {
     height: var(--seed-dimension-x10);
     border-radius: var(--seed-radius-r2);
@@ -366,10 +361,6 @@
     --seed-icon-size: 18px;
   }
 
-  .seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s97);
-  }
-
   .seed-action-button--size_large {
     height: var(--seed-dimension-x13);
     border-radius: var(--seed-radius-r3);
@@ -380,10 +371,6 @@
     --seed-icon-size: 22px;
   }
 
-  .seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
-    scale: var(--seed-scale-s98);
-  }
-
   .seed-action-button--size_xsmall-layout_withText {
     gap: var(--seed-dimension-x1);
     --seed-box-padding-left: var(--seed-dimension-x3_5);

package/recipes/attachment-input-item.css

@@ -7,6 +7,7 @@
     gap: var(--seed-dimension-x2_5);
     height: 80px;
     border-radius: var(--seed-radius-r3);
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
     --remove-button-mask-size: var(--seed-dimension-x6);
     --remove-button-mask-offset: var(--seed-dimension-x1_5);
     outline: var(--seed-dimension-x0_5) solid transparent;
@@ -38,6 +39,7 @@
     cursor: grab;
 }
 .seed-attachment-input-item__root[aria-grabbed=true] {
+    scale: var(--seed-feedback-scale);
     --remove-button-mask-size: 0px;
     --remove-button-mask-offset: 0px;
 }
@@ -124,7 +126,12 @@
     background: transparent;
     cursor: pointer;
     border-radius: inherit;
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-attachment-input-item__actionButton {
+    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);
 }
@@ -153,7 +160,12 @@
     background-color: var(--seed-color-bg-layer-default);
     border-radius: var(--seed-radius-full);
     cursor: pointer;
-    transition: background-color 0.2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-attachment-input-item__removeButton {
+    transition: background-color 0.2s, 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);
 }
@@ -220,7 +232,7 @@
 }
 .seed-attachment-input-item__root--type_image {
     width: 80px;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
 }
 .seed-attachment-input-item__root--type_image::before {
     z-index: 1;

package/recipes/attachment-input-item.layered.css

@@ -5,11 +5,12 @@
     align-items: center;
     gap: var(--seed-dimension-x2_5);
     border-radius: var(--seed-radius-r3);
+    height: 80px;
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
     --remove-button-mask-size: var(--seed-dimension-x6);
     --remove-button-mask-offset: var(--seed-dimension-x1_5);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
-    height: 80px;
     display: flex;
     position: relative;
   }
@@ -47,6 +48,7 @@
   }
 
   .seed-attachment-input-item__root[aria-grabbed="true"] {
+    scale: var(--seed-feedback-scale);
     --remove-button-mask-size: 0px;
     --remove-button-mask-offset: 0px;
   }
@@ -141,9 +143,6 @@
     font: inherit;
     cursor: pointer;
     border-radius: inherit;
-    transition: 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);
     background: none;
     border: none;
     flex-direction: column;
@@ -153,6 +152,16 @@
     display: flex;
   }
 
+  .seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-attachment-input-item__actionButton {
+    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);
+  }
+
   .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -174,9 +183,6 @@
     background-color: var(--seed-color-bg-layer-default);
     border-radius: var(--seed-radius-full);
     cursor: pointer;
-    transition: background-color .2s, 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);
     border: none;
     justify-content: center;
     align-items: center;
@@ -185,6 +191,16 @@
     position: absolute;
   }
 
+  .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-attachment-input-item__removeButton {
+    transition: background-color .2s, 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);
+  }
+
   .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -249,7 +265,7 @@
 
   .seed-attachment-input-item__root--type_image {
     width: 80px;
-    transition: opacity .2s;
+    transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
   }
 
   .seed-attachment-input-item__root--type_image:before {

package/recipes/attachment-input-trigger.css

@@ -14,7 +14,12 @@
     cursor: pointer;
     background-color: transparent;
     border-radius: var(--seed-radius-r3);
-    transition: background-color 0.2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-attachment-input-trigger__root {
+    transition: background-color 0.2s, 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/attachment-input-trigger.layered.css

@@ -9,9 +9,6 @@
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     cursor: pointer;
     border-radius: var(--seed-radius-r3);
-    transition: background-color .2s, 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);
     background-color: #0000;
     border: none;
     flex-direction: column;
@@ -20,6 +17,16 @@
     display: flex;
   }
 
+  .seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-attachment-input-trigger__root {
+    transition: background-color .2s, 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);
+  }
+
   .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);

package/recipes/bottom-sheet.css

@@ -32,6 +32,7 @@
     word-break: break-all;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
+    max-width: 480px;
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
     padding-bottom: var(--seed-safe-area-bottom);
@@ -137,6 +138,12 @@
     width: 28px;
     height: 28px;
     cursor: pointer;
+}
+.seed-bottom-sheet__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-bottom-sheet__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
     --seed-icon-size: 14px;
     --seed-icon-color: var(--seed-color-fg-neutral);
 }

package/recipes/bottom-sheet.layered.css

@@ -32,6 +32,7 @@
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
+    max-width: 480px;
     padding-bottom: var(--seed-safe-area-bottom);
     touch-action: none;
     will-change: transform;
@@ -142,8 +143,6 @@
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-bg-neutral-weak);
     cursor: pointer;
-    --seed-icon-size: 14px;
-    --seed-icon-color: var(--seed-color-fg-neutral);
     border: none;
     justify-content: center;
     align-items: center;
@@ -153,6 +152,16 @@
     position: absolute;
   }
 
+  .seed-bottom-sheet__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-bottom-sheet__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+    --seed-icon-size: 14px;
+    --seed-icon-color: var(--seed-color-fg-neutral);
+  }
+
   .seed-bottom-sheet__closeButton:after {
     content: "";
     border-radius: var(--seed-radius-r1);

package/recipes/callout.css

@@ -20,7 +20,12 @@
 }
 .seed-callout__root:is(button, a) {
     cursor: pointer;
-    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);
+}
+.seed-callout__root:is(button, a):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-callout__root:is(button, a) {
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }
@@ -73,7 +78,7 @@
 }
 .seed-callout__closeButton {
     border: none;
-    background-color: transparent;
+    background-color: var(--seed-color-bg-transparent);
     padding: 0;
     cursor: pointer;
     flex-grow: 0;
@@ -84,8 +89,14 @@
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
     margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5);
-    border-radius: var(--seed-radius-r2_5);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    border-radius: var(--seed-radius-r2);
+    --seed-suffix-icon-size: var(--seed-dimension-x4);
+}
+.seed-callout__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-callout__closeButton {
+    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);
 }
@@ -93,6 +104,16 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+@media (hover: hover) and (pointer: fine) {
+    .seed-callout__closeButton:is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-callout__closeButton:is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-transparent-pressed);
+    }
+}
 .seed-callout__root--tone_neutral {
     background-color: var(--seed-color-bg-neutral-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -117,6 +138,9 @@
 .seed-callout__link--tone_neutral {
     color: var(--seed-color-fg-neutral);
 }
+.seed-callout__closeButton--tone_neutral {
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
 .seed-callout__root--tone_informative {
     background-color: var(--seed-color-bg-informative-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -141,6 +165,9 @@
 .seed-callout__link--tone_informative {
     color: var(--seed-color-fg-informative-contrast);
 }
+.seed-callout__closeButton--tone_informative {
+    --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
+}
 .seed-callout__root--tone_positive {
     background-color: var(--seed-color-bg-positive-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -165,6 +192,9 @@
 .seed-callout__link--tone_positive {
     color: var(--seed-color-fg-positive-contrast);
 }
+.seed-callout__closeButton--tone_positive {
+    --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
+}
 .seed-callout__root--tone_warning {
     background-color: var(--seed-color-bg-warning-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -189,6 +219,9 @@
 .seed-callout__link--tone_warning {
     color: var(--seed-color-fg-warning-contrast);
 }
+.seed-callout__closeButton--tone_warning {
+    --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
+}
 .seed-callout__root--tone_critical {
     background-color: var(--seed-color-bg-critical-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -213,6 +246,9 @@
 .seed-callout__link--tone_critical {
     color: var(--seed-color-fg-critical-contrast);
 }
+.seed-callout__closeButton--tone_critical {
+    --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
+}
 .seed-callout__root--tone_magic {
     background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -236,4 +272,7 @@
 }
 .seed-callout__link--tone_magic {
     color: var(--seed-color-fg-neutral);
+}
+.seed-callout__closeButton--tone_magic {
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }

package/recipes/callout.layered.css

@@ -22,7 +22,14 @@
 
   .seed-callout__root:is(button, a) {
     cursor: pointer;
-    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);
+  }
+
+  .seed-callout__root:is(button, a):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-callout__root:is(button, a) {
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
   }
@@ -83,15 +90,13 @@
   }
 
   .seed-callout__closeButton {
+    background-color: var(--seed-color-bg-transparent);
     cursor: pointer;
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
     margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
-    border-radius: var(--seed-radius-r2_5);
-    transition: 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);
-    background-color: #0000;
+    border-radius: var(--seed-radius-r2);
+    --seed-suffix-icon-size: var(--seed-dimension-x4);
     border: none;
     flex-grow: 0;
     flex-shrink: 0;
@@ -101,11 +106,33 @@
     display: flex;
   }
 
+  .seed-callout__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-callout__closeButton {
+    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);
+  }
+
   .seed-callout__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);
   }
 
+  @media (hover: hover) and (pointer: fine) {
+    .seed-callout__closeButton:is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .seed-callout__closeButton:is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
   .seed-callout__root--tone_neutral {
     background-color: var(--seed-color-bg-neutral-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -128,6 +155,10 @@
     color: var(--seed-color-fg-neutral);
   }
 
+  .seed-callout__closeButton--tone_neutral {
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
   .seed-callout__root--tone_informative {
     background-color: var(--seed-color-bg-informative-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -150,6 +181,10 @@
     color: var(--seed-color-fg-informative-contrast);
   }
 
+  .seed-callout__closeButton--tone_informative {
+    --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
+  }
+
   .seed-callout__root--tone_positive {
     background-color: var(--seed-color-bg-positive-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -172,6 +207,10 @@
     color: var(--seed-color-fg-positive-contrast);
   }
 
+  .seed-callout__closeButton--tone_positive {
+    --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
+  }
+
   .seed-callout__root--tone_warning {
     background-color: var(--seed-color-bg-warning-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -194,6 +233,10 @@
     color: var(--seed-color-fg-warning-contrast);
   }
 
+  .seed-callout__closeButton--tone_warning {
+    --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
+  }
+
   .seed-callout__root--tone_critical {
     background-color: var(--seed-color-bg-critical-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -216,6 +259,10 @@
     color: var(--seed-color-fg-critical-contrast);
   }
 
+  .seed-callout__closeButton--tone_critical {
+    --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
+  }
+
   .seed-callout__root--tone_magic {
     background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -237,4 +284,8 @@
   .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
     color: var(--seed-color-fg-neutral);
   }
+
+  .seed-callout__closeButton--tone_magic {
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
 }

package/recipes/checkmark.css

@@ -3,7 +3,12 @@
     box-sizing: border-box;
     flex: none;
     margin-top: var(--checkmark-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-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
+}
+.seed-checkmark__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/checkmark.layered.css

@@ -2,13 +2,20 @@
   .seed-checkmark__root {
     box-sizing: border-box;
     margin-top: var(--checkmark-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;
     position: relative;
   }
 
+  .seed-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
+  }
+
+  .seed-checkmark__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);
+  }
+
   .seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
     outline-offset: var(--seed-dimension-x0_5);