@seed-design/css 1.2.6 → 1.2.8

package/recipes/action-sheet.layered.css

@@ -2,7 +2,7 @@
   .seed-action-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -12,7 +12,7 @@
 
   .seed-action-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -41,7 +41,7 @@
   .seed-action-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);

package/recipes/app-bar.css

@@ -230,6 +230,99 @@
     opacity: 1;
     transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
 }
+[data-global-transition-state=enter-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-global-transition-state=exit-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-global-transition-state=enter-done] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none;
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+}
+[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none !important;
+    opacity: 1;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none !important;
+    opacity: 0;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none;
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+}
+[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none !important;
+    opacity: 0;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none !important;
+    opacity: 1;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
 [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     animation: seed-enter;
     animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);

package/recipes/app-bar.d.ts

@@ -23,7 +23,7 @@ declare type AppBarVariantMap = {
 
 export declare type AppBarVariantProps = Partial<AppBarVariant>;
 
-export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon";
+export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon" | "custom";
 
 export declare const appBarVariantMap: AppBarVariantMap;
 

package/recipes/app-bar.layered.css

@@ -242,6 +242,96 @@
     animation: none !important;
   }
 
+  [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
   [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 8vh;

package/recipes/app-bar.layered.mjs

@@ -21,6 +21,10 @@ const appBarSlotNames = [
   [
     "icon",
     "seed-app-bar__icon"
+  ],
+  [
+    "custom",
+    "seed-app-bar__custom"
   ]
 ];
 

package/recipes/app-bar.mjs

@@ -21,6 +21,10 @@ const appBarSlotNames = [
   [
     "icon",
     "seed-app-bar__icon"
+  ],
+  [
+    "custom",
+    "seed-app-bar__custom"
   ]
 ];
 

package/recipes/app-screen.layered.css

@@ -1,6 +1,6 @@
 @layer seed-components {
   .seed-app-screen__root {
-    --app-bar-offset: calc(var(--app-bar-height)  + var(--seed-safe-area-top));
+    --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
     width: 100%;
     height: 100%;
     position: absolute;
@@ -60,10 +60,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_slideFromRightIOS {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 2);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 7);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 2);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 7);
   }
 
   .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
@@ -208,10 +208,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 3);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 4);
   }
 
   .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
@@ -264,10 +264,10 @@
   }
 
   .seed-app-screen__root--transitionStyle_fadeIn {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
+    --z-index-dim: calc(var(--z-index-base) + 0);
+    --z-index-layer: calc(var(--z-index-base) + 3);
+    --z-index-edge: calc(var(--z-index-base) + 4);
+    --z-index-app-bar: calc(var(--z-index-base) + 4);
   }
 
   .seed-app-screen__dim--transitionStyle_fadeIn {

package/recipes/avatar-stack.css

@@ -43,6 +43,13 @@
     clip-path: inset(-2px);
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default)
 }
+.seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px
+}
+.seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default)
+}
 .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px
 }

package/recipes/avatar-stack.d.ts

@@ -2,7 +2,7 @@ declare interface AvatarStackVariant {
   /**
   * @default 48
   */
-  size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
 }
 
 declare type AvatarStackVariantMap = {

package/recipes/avatar-stack.layered.css

@@ -56,6 +56,15 @@
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
   }
 
+  .seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px;
+  }
+
+  .seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  }
+
   .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px;
   }

package/recipes/avatar-stack.layered.mjs

@@ -25,6 +25,7 @@ export const avatarStackVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar-stack.mjs

@@ -25,6 +25,7 @@ export const avatarStackVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar.css

@@ -137,6 +137,16 @@
     --badge-size: 18px;
     --badge-offset: 30px;
 }
+.seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+}
+.seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+}
 .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;

package/recipes/avatar.d.ts

@@ -2,7 +2,7 @@ declare interface AvatarVariant {
   /**
   * @default 48
   */
-  size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
 /**
   * @default "none"
   */

package/recipes/avatar.layered.css

@@ -152,6 +152,18 @@
     --badge-offset: 30px;
   }
 
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
   .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;

package/recipes/avatar.layered.mjs

@@ -34,6 +34,7 @@ export const avatarVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar.mjs

@@ -34,6 +34,7 @@ export const avatarVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/bottom-sheet-handle.css

@@ -10,12 +10,12 @@
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
     touch-action: pan-y;
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
         background-color: var(--seed-color-palette-gray-500);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
         background-color: var(--seed-color-palette-gray-500);
     }

package/recipes/bottom-sheet-handle.layered.css

@@ -12,13 +12,13 @@
     transform: translateX(-50%);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
       background-color: var(--seed-color-palette-gray-500);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
       background-color: var(--seed-color-palette-gray-500);
     }

package/recipes/bottom-sheet.layered.css

@@ -2,7 +2,7 @@
   .seed-bottom-sheet__positioner {
     overscroll-behavior-y: none;
     --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     justify-content: center;
     align-items: flex-end;
     display: flex;
@@ -12,7 +12,7 @@
 
   .seed-bottom-sheet__backdrop {
     background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     position: fixed;
     inset: 0;
   }
@@ -28,7 +28,7 @@
   .seed-bottom-sheet__content {
     box-sizing: border-box;
     word-break: break-all;
-    z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);

package/recipes/callout.css

@@ -100,12 +100,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -124,12 +124,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-informative-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-informative-weak-pressed);
     }
@@ -148,12 +148,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-positive-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-positive-weak-pressed);
     }
@@ -172,12 +172,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-warning-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-warning-weak-pressed);
     }
@@ -196,12 +196,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-critical-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
         background-color: var(--seed-color-bg-critical-weak-pressed);
     }
@@ -220,12 +220,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
         background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
         background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
     }