@seed-design/css 1.2.15 → 2.0.0

package/vars/color/bg.d.ts

@@ -29,8 +29,6 @@ export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
 /** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-/** @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다. */
-export declare const layerFill = "var(--seed-color-bg-layer-fill)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
@@ -66,6 +64,8 @@ export declare const positiveWeak = "var(--seed-color-bg-positive-weak)";
 export declare const positiveWeakPressed = "var(--seed-color-bg-positive-weak-pressed)";
 export declare const transparent = "var(--seed-color-bg-transparent)";
 export declare const transparentPressed = "var(--seed-color-bg-transparent-pressed)";
+export declare const transparentSelected = "var(--seed-color-bg-transparent-selected)";
+export declare const transparentSelectedPressed = "var(--seed-color-bg-transparent-selected-pressed)";
 /** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid) */
 export declare const warningSolid = "var(--seed-color-bg-warning-solid)";
 /** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed) */

package/vars/color/bg.mjs

@@ -14,7 +14,6 @@ export const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pres
 export const layerBasement = "var(--seed-color-bg-layer-basement)";
 export const layerDefault = "var(--seed-color-bg-layer-default)";
 export const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-export const layerFill = "var(--seed-color-bg-layer-fill)";
 export const layerFloating = "var(--seed-color-bg-layer-floating)";
 export const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export const magicWeak = "var(--seed-color-bg-magic-weak)";
@@ -35,6 +34,8 @@ export const positiveWeak = "var(--seed-color-bg-positive-weak)";
 export const positiveWeakPressed = "var(--seed-color-bg-positive-weak-pressed)";
 export const transparent = "var(--seed-color-bg-transparent)";
 export const transparentPressed = "var(--seed-color-bg-transparent-pressed)";
+export const transparentSelected = "var(--seed-color-bg-transparent-selected)";
+export const transparentSelectedPressed = "var(--seed-color-bg-transparent-selected-pressed)";
 export const warningSolid = "var(--seed-color-bg-warning-solid)";
 export const warningSolidPressed = "var(--seed-color-bg-warning-solid-pressed)";
 export const warningWeak = "var(--seed-color-bg-warning-weak)";

package/vars/color/stroke.d.ts

@@ -6,6 +6,7 @@ export declare const brandWeak = "var(--seed-color-stroke-brand-weak)";
 export declare const criticalSolid = "var(--seed-color-stroke-critical-solid)";
 /** 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak) */
 export declare const criticalWeak = "var(--seed-color-stroke-critical-weak)";
+export declare const focusRing = "var(--seed-color-stroke-focus-ring)";
 /** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid) */
 export declare const informativeSolid = "var(--seed-color-stroke-informative-solid)";
 /** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak) */
@@ -27,5 +28,4 @@ export declare const positiveWeak = "var(--seed-color-stroke-positive-weak)";
 /** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid) */
 export declare const warningSolid = "var(--seed-color-stroke-warning-solid)";
 /** 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak) */
-export declare const warningWeak = "var(--seed-color-stroke-warning-weak)";
-export declare const focusRing = "var(--seed-color-stroke-focus-ring)";
+export declare const warningWeak = "var(--seed-color-stroke-warning-weak)";

package/vars/color/stroke.mjs

@@ -2,6 +2,7 @@ export const brandSolid = "var(--seed-color-stroke-brand-solid)";
 export const brandWeak = "var(--seed-color-stroke-brand-weak)";
 export const criticalSolid = "var(--seed-color-stroke-critical-solid)";
 export const criticalWeak = "var(--seed-color-stroke-critical-weak)";
+export const focusRing = "var(--seed-color-stroke-focus-ring)";
 export const informativeSolid = "var(--seed-color-stroke-informative-solid)";
 export const informativeWeak = "var(--seed-color-stroke-informative-weak)";
 export const neutralContrast = "var(--seed-color-stroke-neutral-contrast)";
@@ -12,5 +13,4 @@ export const neutralWeak = "var(--seed-color-stroke-neutral-weak)";
 export const positiveSolid = "var(--seed-color-stroke-positive-solid)";
 export const positiveWeak = "var(--seed-color-stroke-positive-weak)";
 export const warningSolid = "var(--seed-color-stroke-warning-solid)";
-export const warningWeak = "var(--seed-color-stroke-warning-weak)";
-export const focusRing = "var(--seed-color-stroke-focus-ring)";
+export const warningWeak = "var(--seed-color-stroke-warning-weak)";

package/vars/component/accordion-item.d.ts

@@ -0,0 +1,132 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "trigger": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "rotateDuration": "var(--seed-duration-d6)",
+        "rotateTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "content": {
+        "expandHeightDuration": "var(--seed-duration-d6)",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "disabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "pressed": {
+      "trigger": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "marginX": "var(--seed-dimension-x1_5)",
+        "cornerRadius": "var(--seed-dimension-x2_5)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "trigger": {
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)",
+        "paddingLeft": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "trigger": {
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x6)",
+        "paddingLeft": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  /**
+   * Accordion Item들이 하나의 연속된 목록처럼 표현됩니다. 밀접하게 관련된 항목들을 컴팩트하게 나열할 때 사용합니다.
+   */
+  "variantInline": {
+    "enabled": {
+      "root": {
+        "dividerColor": "var(--seed-color-stroke-neutral-subtle)",
+        "dividerPaddingX": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  /**
+   * 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+   */
+  "variantSeparated": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "cornerRadius": "var(--seed-radius-r3)"
+      }
+    }
+  }
+}

package/vars/component/accordion-item.mjs

@@ -0,0 +1,126 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "trigger": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "rotateDuration": "var(--seed-duration-d6)",
+        "rotateTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "content": {
+        "expandHeightDuration": "var(--seed-duration-d6)",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "disabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "pressed": {
+      "trigger": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "marginX": "var(--seed-dimension-x1_5)",
+        "cornerRadius": "var(--seed-dimension-x2_5)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "trigger": {
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)",
+        "paddingLeft": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "trigger": {
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "prefix": {
+        "paddingRight": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x6)",
+        "paddingLeft": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "variantInline": {
+    "enabled": {
+      "root": {
+        "dividerColor": "var(--seed-color-stroke-neutral-subtle)",
+        "dividerPaddingX": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "variantSeparated": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "cornerRadius": "var(--seed-radius-r3)"
+      }
+    }
+  }
+}

package/vars/component/accordion.d.ts

@@ -0,0 +1,22 @@
+export declare const vars: {
+  /**
+   * - `variant=separated`: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+   */
+  "variantSeparatedSizeMedium": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  /**
+   * - `variant=separated`: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
+   */
+  "variantSeparatedSizeLarge": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x4)"
+      }
+    }
+  }
+}

package/vars/component/accordion.mjs

@@ -0,0 +1,16 @@
+export const vars = {
+  "variantSeparatedSizeMedium": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "variantSeparatedSizeLarge": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x4)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-dropzone.d.ts

@@ -0,0 +1,32 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      /** 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다. */
+      "root": {
+        "height": "120px",
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-500)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-font-size-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "draggingOver": {
+      /** 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다. */
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-solid)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-dropzone.mjs

@@ -0,0 +1,30 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "120px",
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-palette-gray-500)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-font-size-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "draggingOver": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-solid)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-action-button.d.ts

@@ -0,0 +1,37 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-action-button.mjs

@@ -0,0 +1,37 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-remove-button.d.ts

@@ -0,0 +1,28 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-remove-button.mjs

@@ -0,0 +1,28 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item.d.ts

@@ -0,0 +1,103 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "80px",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "thumbnail": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "size": "var(--seed-dimension-x12)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x6)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      /** dragging 상태에서는 표시되지 않습니다. */
+      "removeButtonMask": {
+        "offset": "var(--seed-dimension-x1_5)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "root": {
+        "width": "160px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    },
+    "readonly": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "dragging": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "root": {
+        "width": "80px",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      },
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)"
+      },
+      "badge": {
+        "color": "var(--seed-color-bg-overlay)",
+        "height": "var(--seed-dimension-x6)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x1)"
+      },
+      "badgeLabel": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "readonly": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "dragging": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  }
+}