@seed-design/css 0.1.13 → 0.1.15

package/vars/color/bg.mjs

@@ -1,13 +1,15 @@
-export const disabled = "var(--seed-color-bg-disabled)";
 export const overlay = "var(--seed-color-bg-overlay)";
+export const disabled = "var(--seed-color-bg-disabled)";
+export const brandWeak = "var(--seed-color-bg-brand-weak)";
 export const brandSolid = "var(--seed-color-bg-brand-solid)";
 export const brandSolidPressed = "var(--seed-color-bg-brand-solid-pressed)";
-export const criticalSolid = "var(--seed-color-bg-critical-solid)";
+export const brandWeakPressed = "var(--seed-color-bg-brand-weak-pressed)";
 export const criticalWeak = "var(--seed-color-bg-critical-weak)";
+export const criticalSolid = "var(--seed-color-bg-critical-solid)";
 export const criticalSolidPressed = "var(--seed-color-bg-critical-solid-pressed)";
 export const criticalWeakPressed = "var(--seed-color-bg-critical-weak-pressed)";
-export const informativeSolid = "var(--seed-color-bg-informative-solid)";
 export const informativeWeak = "var(--seed-color-bg-informative-weak)";
+export const informativeSolid = "var(--seed-color-bg-informative-solid)";
 export const informativeSolidPressed = "var(--seed-color-bg-informative-solid-pressed)";
 export const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pressed)";
 export const layerBasement = "var(--seed-color-bg-layer-basement)";
@@ -17,18 +19,19 @@ export const layerFloating = "var(--seed-color-bg-layer-floating)";
 export const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
 export const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export const magicWeak = "var(--seed-color-bg-magic-weak)";
+export const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 export const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
 export const neutralSolid = "var(--seed-color-bg-neutral-solid)";
-export const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 export const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
 export const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
 export const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
 export const neutralWeakPressed = "var(--seed-color-bg-neutral-weak-pressed)";
 export const overlayMuted = "var(--seed-color-bg-overlay-muted)";
-export const positiveSolid = "var(--seed-color-bg-positive-solid)";
 export const positiveWeak = "var(--seed-color-bg-positive-weak)";
+export const positiveSolid = "var(--seed-color-bg-positive-solid)";
 export const positiveSolidPressed = "var(--seed-color-bg-positive-solid-pressed)";
 export const positiveWeakPressed = "var(--seed-color-bg-positive-weak-pressed)";
-export const warningSolid = "var(--seed-color-bg-warning-solid)";
 export const warningWeak = "var(--seed-color-bg-warning-weak)";
+export const warningSolid = "var(--seed-color-bg-warning-solid)";
+export const warningSolidPressed = "var(--seed-color-bg-warning-solid-pressed)";
 export const warningWeakPressed = "var(--seed-color-bg-warning-weak-pressed)";

package/vars/color/fg.d.ts

@@ -1,14 +1,16 @@
+export declare const neutral = "var(--seed-color-fg-neutral)";
 export declare const brand = "var(--seed-color-fg-brand)";
 export declare const critical = "var(--seed-color-fg-critical)";
-export declare const disabled = "var(--seed-color-fg-disabled)";
+export declare const positive = "var(--seed-color-fg-positive)";
+export declare const warning = "var(--seed-color-fg-warning)";
 export declare const informative = "var(--seed-color-fg-informative)";
-export declare const neutral = "var(--seed-color-fg-neutral)";
 export declare const placeholder = "var(--seed-color-fg-placeholder)";
-export declare const positive = "var(--seed-color-fg-positive)";
+export declare const disabled = "var(--seed-color-fg-disabled)";
+export declare const brandContrast = "var(--seed-color-fg-brand-contrast)";
 export declare const criticalContrast = "var(--seed-color-fg-critical-contrast)";
 export declare const informativeContrast = "var(--seed-color-fg-informative-contrast)";
-export declare const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export declare const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 export declare const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export declare const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export declare const positiveContrast = "var(--seed-color-fg-positive-contrast)";
 export declare const warningContrast = "var(--seed-color-fg-warning-contrast)";

package/vars/color/fg.mjs

@@ -1,14 +1,16 @@
+export const neutral = "var(--seed-color-fg-neutral)";
 export const brand = "var(--seed-color-fg-brand)";
 export const critical = "var(--seed-color-fg-critical)";
-export const disabled = "var(--seed-color-fg-disabled)";
+export const positive = "var(--seed-color-fg-positive)";
+export const warning = "var(--seed-color-fg-warning)";
 export const informative = "var(--seed-color-fg-informative)";
-export const neutral = "var(--seed-color-fg-neutral)";
 export const placeholder = "var(--seed-color-fg-placeholder)";
-export const positive = "var(--seed-color-fg-positive)";
+export const disabled = "var(--seed-color-fg-disabled)";
+export const brandContrast = "var(--seed-color-fg-brand-contrast)";
 export const criticalContrast = "var(--seed-color-fg-critical-contrast)";
 export const informativeContrast = "var(--seed-color-fg-informative-contrast)";
-export const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 export const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export const positiveContrast = "var(--seed-color-fg-positive-contrast)";
 export const warningContrast = "var(--seed-color-fg-warning-contrast)";

package/vars/color/manner-temp/l1.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l1-bg)";
-export declare const text = "var(--seed-color-manner-temp-l1-text)";
+export declare const text = "var(--seed-color-manner-temp-l1-text)";
+export declare const bg = "var(--seed-color-manner-temp-l1-bg)";

package/vars/color/manner-temp/l1.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l1-bg)";
-export const text = "var(--seed-color-manner-temp-l1-text)";
+export const text = "var(--seed-color-manner-temp-l1-text)";
+export const bg = "var(--seed-color-manner-temp-l1-bg)";

package/vars/color/manner-temp/l2.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l2-bg)";
-export declare const text = "var(--seed-color-manner-temp-l2-text)";
+export declare const text = "var(--seed-color-manner-temp-l2-text)";
+export declare const bg = "var(--seed-color-manner-temp-l2-bg)";

package/vars/color/manner-temp/l2.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l2-bg)";
-export const text = "var(--seed-color-manner-temp-l2-text)";
+export const text = "var(--seed-color-manner-temp-l2-text)";
+export const bg = "var(--seed-color-manner-temp-l2-bg)";

package/vars/color/manner-temp/l3.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l3-bg)";
-export declare const text = "var(--seed-color-manner-temp-l3-text)";
+export declare const text = "var(--seed-color-manner-temp-l3-text)";
+export declare const bg = "var(--seed-color-manner-temp-l3-bg)";

package/vars/color/manner-temp/l3.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l3-bg)";
-export const text = "var(--seed-color-manner-temp-l3-text)";
+export const text = "var(--seed-color-manner-temp-l3-text)";
+export const bg = "var(--seed-color-manner-temp-l3-bg)";

package/vars/color/manner-temp/l4.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l4-bg)";
-export declare const text = "var(--seed-color-manner-temp-l4-text)";
+export declare const text = "var(--seed-color-manner-temp-l4-text)";
+export declare const bg = "var(--seed-color-manner-temp-l4-bg)";

package/vars/color/manner-temp/l4.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l4-bg)";
-export const text = "var(--seed-color-manner-temp-l4-text)";
+export const text = "var(--seed-color-manner-temp-l4-text)";
+export const bg = "var(--seed-color-manner-temp-l4-bg)";

package/vars/color/manner-temp/l5.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l5-bg)";
-export declare const text = "var(--seed-color-manner-temp-l5-text)";
+export declare const text = "var(--seed-color-manner-temp-l5-text)";
+export declare const bg = "var(--seed-color-manner-temp-l5-bg)";

package/vars/color/manner-temp/l5.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l5-bg)";
-export const text = "var(--seed-color-manner-temp-l5-text)";
+export const text = "var(--seed-color-manner-temp-l5-text)";
+export const bg = "var(--seed-color-manner-temp-l5-bg)";

package/vars/color/manner-temp/l6.d.ts

@@ -1,2 +1,2 @@
-export declare const bg = "var(--seed-color-manner-temp-l6-bg)";
-export declare const text = "var(--seed-color-manner-temp-l6-text)";
+export declare const text = "var(--seed-color-manner-temp-l6-text)";
+export declare const bg = "var(--seed-color-manner-temp-l6-bg)";

package/vars/color/manner-temp/l6.mjs

@@ -1,2 +1,2 @@
-export const bg = "var(--seed-color-manner-temp-l6-bg)";
-export const text = "var(--seed-color-manner-temp-l6-text)";
+export const text = "var(--seed-color-manner-temp-l6-text)";
+export const bg = "var(--seed-color-manner-temp-l6-bg)";

package/vars/color/stroke.d.ts

@@ -1,10 +1,11 @@
+export declare const neutral = "var(--seed-color-stroke-neutral)";
 export declare const brand = "var(--seed-color-stroke-brand)";
-export declare const control = "var(--seed-color-stroke-control)";
+export declare const positive = "var(--seed-color-stroke-positive)";
+export declare const informative = "var(--seed-color-stroke-informative)";
+export declare const warning = "var(--seed-color-stroke-warning)";
 export declare const critical = "var(--seed-color-stroke-critical)";
 export declare const field = "var(--seed-color-stroke-field)";
-export declare const informative = "var(--seed-color-stroke-informative)";
-export declare const neutral = "var(--seed-color-stroke-neutral)";
-export declare const positive = "var(--seed-color-stroke-positive)";
+export declare const control = "var(--seed-color-stroke-control)";
 export declare const fieldFocused = "var(--seed-color-stroke-field-focused)";
 export declare const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
 export declare const onImage = "var(--seed-color-stroke-on-image)";

package/vars/color/stroke.mjs

@@ -1,10 +1,11 @@
+export const neutral = "var(--seed-color-stroke-neutral)";
 export const brand = "var(--seed-color-stroke-brand)";
-export const control = "var(--seed-color-stroke-control)";
+export const positive = "var(--seed-color-stroke-positive)";
+export const informative = "var(--seed-color-stroke-informative)";
+export const warning = "var(--seed-color-stroke-warning)";
 export const critical = "var(--seed-color-stroke-critical)";
 export const field = "var(--seed-color-stroke-field)";
-export const informative = "var(--seed-color-stroke-informative)";
-export const neutral = "var(--seed-color-stroke-neutral)";
-export const positive = "var(--seed-color-stroke-positive)";
+export const control = "var(--seed-color-stroke-control)";
 export const fieldFocused = "var(--seed-color-stroke-field-focused)";
 export const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
 export const onImage = "var(--seed-color-stroke-on-image)";

package/vars/component/badge.d.ts

@@ -2,6 +2,7 @@ export declare const vars: {
   "sizeLarge": {
     "enabled": {
       "root": {
+        "maxWidth": "6.75rem",
         "minHeight": "var(--seed-dimension-x6)",
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x1)",
@@ -16,6 +17,7 @@ export declare const vars: {
   "sizeMedium": {
     "enabled": {
       "root": {
+        "maxWidth": "7.5rem",
         "minHeight": "var(--seed-dimension-x5)",
         "paddingX": "var(--seed-dimension-x1_5)",
         "paddingY": "var(--seed-dimension-x0_5)",
@@ -84,10 +86,10 @@ export declare const vars: {
   "toneBrandVariantWeak": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-palette-carrot-100)"
+        "color": "var(--seed-color-bg-brand-weak)"
       },
       "label": {
-        "color": "var(--seed-color-palette-carrot-900)"
+        "color": "var(--seed-color-fg-brand-contrast)"
       }
     }
   },
@@ -171,6 +173,36 @@ export declare const vars: {
       }
     }
   },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneWarningVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-warning)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning)"
+      }
+    }
+  },
   "toneCriticalVariantWeak": {
     "enabled": {
       "root": {

package/vars/component/badge.mjs

@@ -2,6 +2,7 @@ export const vars = {
   "sizeLarge": {
     "enabled": {
       "root": {
+        "maxWidth": "6.75rem",
         "minHeight": "var(--seed-dimension-x6)",
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x1)",
@@ -16,6 +17,7 @@ export const vars = {
   "sizeMedium": {
     "enabled": {
       "root": {
+        "maxWidth": "7.5rem",
         "minHeight": "var(--seed-dimension-x5)",
         "paddingX": "var(--seed-dimension-x1_5)",
         "paddingY": "var(--seed-dimension-x0_5)",
@@ -84,10 +86,10 @@ export const vars = {
   "toneBrandVariantWeak": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-palette-carrot-100)"
+        "color": "var(--seed-color-bg-brand-weak)"
       },
       "label": {
-        "color": "var(--seed-color-palette-carrot-900)"
+        "color": "var(--seed-color-fg-brand-contrast)"
       }
     }
   },
@@ -171,6 +173,36 @@ export const vars = {
       }
     }
   },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneWarningVariantOutline": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-warning)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-warning)"
+      }
+    }
+  },
   "toneCriticalVariantWeak": {
     "enabled": {
       "root": {

package/vars/component/index.d.ts

@@ -33,6 +33,7 @@ export { vars as menuSheetCloseButton } from "./menu-sheet-close-button";
 export { vars as menuSheetItem } from "./menu-sheet-item";
 export { vars as menuSheet } from "./menu-sheet";
 export { vars as notificationBadge } from "./notification-badge";
+export { vars as pageBanner } from "./page-banner";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as radio } from "./radio";
 export { vars as reactionButton } from "./reaction-button";

package/vars/component/index.mjs

@@ -33,6 +33,7 @@ export { vars as menuSheetCloseButton } from "./menu-sheet-close-button.mjs";
 export { vars as menuSheetItem } from "./menu-sheet-item.mjs";
 export { vars as menuSheet } from "./menu-sheet.mjs";
 export { vars as notificationBadge } from "./notification-badge.mjs";
+export { vars as pageBanner } from "./page-banner.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as radio } from "./radio.mjs";
 export { vars as reactionButton } from "./reaction-button.mjs";

package/vars/component/page-banner.d.ts

@@ -0,0 +1,309 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "minHeight": "var(--seed-dimension-x10)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "marginRight": "var(--seed-dimension-x2)"
+      },
+      "textContent": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "button": {
+        "targetHeight": "var(--seed-dimension-x10)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "targetSize": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)"
+      }
+    }
+  },
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    }
+  },
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-weak-pressed)"
+      }
+    }
+  },
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-positive-solid-pressed)"
+      }
+    }
+  },
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-weak-pressed)"
+      }
+    }
+  },
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-informative-solid-pressed)"
+      }
+    }
+  },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-weak-pressed)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-warning-solid-pressed)"
+      }
+    }
+  },
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "button": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-weak-pressed)"
+      }
+    }
+  },
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "button": {
+        "color": "var(--seed-color-palette-static-white)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-critical-solid-pressed)"
+      }
+    }
+  }
+}