@seed-design/css 1.2.5 → 1.2.7

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
     "directory": "packages/css"
   },
   "scripts": {
-    "generate": "bun rootage:generate && qvism:generate",
+    "generate": "bun rootage:generate && bun qvism:generate",
     "rootage:generate": "bun rootage token-ts ./vars --prefix seed && rootage component-spec ./vars/component --prefix seed",
     "qvism:generate": "bun qvism ./ ./recipes",
     "lint:publish": "bun publint"

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/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/content-placeholder.css

@@ -0,0 +1,24 @@
+.seed-content-placeholder__root {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--seed-color-palette-gray-200)
+}
+.seed-content-placeholder__asset {
+    display: block;
+    height: calc(0.5 * 100%);
+    min-width: var(--seed-dimension-x4);
+    max-width: 64px;
+    width: auto;
+    aspect-ratio: 1 / 1;
+    color: var(--seed-color-palette-gray-400);
+    fill: currentColor;
+    stroke: currentColor;
+    object-fit: contain
+}

package/recipes/content-placeholder.d.ts

@@ -0,0 +1,24 @@
+declare interface ContentPlaceholderVariant {
+  /**
+  * @default "default"
+  */
+  type: "default" | "buySell" | "car" | "commerce" | "coupon" | "food" | "group" | "image" | "jobs" | "business" | "post" | "realty";
+}
+
+declare type ContentPlaceholderVariantMap = {
+  [key in keyof ContentPlaceholderVariant]: Array<ContentPlaceholderVariant[key]>;
+};
+
+export declare type ContentPlaceholderVariantProps = Partial<ContentPlaceholderVariant>;
+
+export declare type ContentPlaceholderSlotName = "root" | "asset";
+
+export declare const contentPlaceholderVariantMap: ContentPlaceholderVariantMap;
+
+export declare const contentPlaceholder: ((
+  props?: ContentPlaceholderVariantProps,
+) => Record<ContentPlaceholderSlotName, string>) & {
+  splitVariantProps: <T extends ContentPlaceholderVariantProps>(
+    props: T,
+  ) => [ContentPlaceholderVariantProps, Omit<T, keyof ContentPlaceholderVariantProps>];
+}

package/recipes/content-placeholder.layered.css

@@ -0,0 +1,27 @@
+@layer seed-components {
+  .seed-content-placeholder__root {
+    box-sizing: border-box;
+    vertical-align: top;
+    background-color: var(--seed-color-palette-gray-200);
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-content-placeholder__asset {
+    height: 50%;
+    min-width: var(--seed-dimension-x4);
+    aspect-ratio: 1;
+    width: auto;
+    max-width: 64px;
+    color: var(--seed-color-palette-gray-400);
+    fill: currentColor;
+    stroke: currentColor;
+    object-fit: contain;
+    display: block;
+  }
+}

package/recipes/content-placeholder.layered.mjs

@@ -0,0 +1,53 @@
+import './content-placeholder.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const contentPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-content-placeholder__root"
+  ],
+  [
+    "asset",
+    "seed-content-placeholder__asset"
+  ]
+];
+
+const defaultVariant = {
+  "type": "default"
+};
+
+const compoundVariants = [];
+
+export const contentPlaceholderVariantMap = {
+  "type": [
+    "default",
+    "buySell",
+    "car",
+    "commerce",
+    "coupon",
+    "food",
+    "group",
+    "image",
+    "jobs",
+    "business",
+    "post",
+    "realty"
+  ]
+};
+
+export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
+
+export function contentPlaceholder(props) {
+  return Object.fromEntries(
+    contentPlaceholderSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
+
+// @recipe(seed): content-placeholder

package/recipes/content-placeholder.mjs

@@ -0,0 +1,53 @@
+import './content-placeholder.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const contentPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-content-placeholder__root"
+  ],
+  [
+    "asset",
+    "seed-content-placeholder__asset"
+  ]
+];
+
+const defaultVariant = {
+  "type": "default"
+};
+
+const compoundVariants = [];
+
+export const contentPlaceholderVariantMap = {
+  "type": [
+    "default",
+    "buySell",
+    "car",
+    "commerce",
+    "coupon",
+    "food",
+    "group",
+    "image",
+    "jobs",
+    "business",
+    "post",
+    "realty"
+  ]
+};
+
+export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
+
+export function contentPlaceholder(props) {
+  return Object.fromEntries(
+    contentPlaceholderSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
+
+// @recipe(seed): content-placeholder

package/recipes/help-bubble.css

@@ -77,6 +77,7 @@
     margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);

package/recipes/help-bubble.layered.css

@@ -83,6 +83,7 @@
     margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);

package/recipes/image-frame-reaction-button.css

@@ -1,4 +1,4 @@
-.seed-image-frame-reaction-button {
+.seed-image-frame-reaction-button__root {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -10,10 +10,8 @@
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6);
     background: transparent;
-    --seed-icon-size: var(--seed-dimension-x6);
-    --seed-icon-color: var(--seed-color-palette-static-white);
 }
-.seed-image-frame-reaction-button::before {
+.seed-image-frame-reaction-button__root::before {
     content: '';
     position: absolute;
     top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -24,14 +22,31 @@
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
-.seed-image-frame-reaction-button:is(:focus, [data-focus]) {
+.seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
     outline: none;
 }
-.seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
+.seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
     border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }
-.seed-image-frame-reaction-button:is([aria-pressed=true], [data-pressed]) {
-    --seed-icon-color: var(--seed-color-bg-transparent);
+.seed-image-frame-reaction-button__fillIcon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
 }

package/recipes/image-frame-reaction-button.d.ts

@@ -8,11 +8,13 @@ declare type ImageFrameReactionButtonVariantMap = {
 
 export declare type ImageFrameReactionButtonVariantProps = Partial<ImageFrameReactionButtonVariant>;
 
+export declare type ImageFrameReactionButtonSlotName = "root" | "fillIcon" | "lineIcon";
+
 export declare const imageFrameReactionButtonVariantMap: ImageFrameReactionButtonVariantMap;
 
 export declare const imageFrameReactionButton: ((
   props?: ImageFrameReactionButtonVariantProps,
-) => string) & {
+) => Record<ImageFrameReactionButtonSlotName, string>) & {
   splitVariantProps: <T extends ImageFrameReactionButtonVariantProps>(
     props: T,
   ) => [ImageFrameReactionButtonVariantProps, Omit<T, keyof ImageFrameReactionButtonVariantProps>];