@seed-design/css 0.0.0-alpha-20260324091316

package/recipes/avatar.layered.css

@@ -0,0 +1,222 @@
+@layer seed-components {
+  .seed-avatar__root {
+    box-sizing: border-box;
+    vertical-align: top;
+    border-radius: var(--seed-radius-full);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-avatar__root:after {
+    content: "";
+    pointer-events: none;
+    border-radius: var(--seed-radius-full);
+    box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    -webkit-mask-composite: source-out;
+    -webkit-mask-repeat: no-repeat;
+    mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    position: absolute;
+    inset: 0;
+    transform: translateZ(0);
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+  }
+
+  .seed-avatar__image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    -webkit-mask-composite: source-out;
+    -webkit-mask-repeat: no-repeat;
+    mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    display: block;
+    overflow: hidden;
+    transform: translateZ(0);
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+  }
+
+  .seed-avatar__image:not([data-loading-state="loaded"]) {
+    display: none;
+  }
+
+  .seed-avatar__fallback {
+    object-fit: cover;
+    border-radius: var(--seed-radius-full);
+    width: 100%;
+    height: 100%;
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    -webkit-mask-composite: source-out;
+    -webkit-mask-repeat: no-repeat;
+    mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+    mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+    mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    overflow: hidden;
+    transform: translateZ(0);
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+  }
+
+  .seed-avatar__fallback[data-loading-state="loaded"] {
+    display: none;
+  }
+
+  .seed-avatar__badge {
+    box-sizing: border-box;
+    z-index: 1;
+    top: var(--badge-offset);
+    left: var(--badge-offset);
+    width: var(--badge-size);
+    height: var(--badge-size);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .seed-avatar__root--size_20 {
+    --avatar-size: 20px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 0px;
+    --badge-mask-offset: 0px;
+  }
+
+  .seed-avatar__badge--size_20 {
+    display: none;
+  }
+
+  .seed-avatar__root--size_24 {
+    --avatar-size: 24px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 12px;
+    --badge-mask-offset: 14px;
+  }
+
+  .seed-avatar__badge--size_24 {
+    --badge-size: 10px;
+    --badge-offset: 15px;
+  }
+
+  .seed-avatar__root--size_36 {
+    --avatar-size: 36px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 18px;
+    --badge-mask-offset: 20px;
+  }
+
+  .seed-avatar__badge--size_36 {
+    --badge-size: 14px;
+    --badge-offset: 22px;
+  }
+
+  .seed-avatar__root--size_42 {
+    --avatar-size: 42px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 20px;
+    --badge-mask-offset: 24px;
+  }
+
+  .seed-avatar__badge--size_42 {
+    --badge-size: 16px;
+    --badge-offset: 26px;
+  }
+
+  .seed-avatar__root--size_48 {
+    --avatar-size: 48px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 22px;
+    --badge-mask-offset: 28px;
+  }
+
+  .seed-avatar__badge--size_48 {
+    --badge-size: 18px;
+    --badge-offset: 30px;
+  }
+
+  .seed-avatar__root--size_64 {
+    --avatar-size: 64px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 26px;
+    --badge-mask-offset: 40px;
+  }
+
+  .seed-avatar__badge--size_64 {
+    --badge-size: 22px;
+    --badge-offset: 42px;
+  }
+
+  .seed-avatar__root--size_80 {
+    --avatar-size: 80px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 32px;
+    --badge-mask-offset: 52px;
+  }
+
+  .seed-avatar__badge--size_80 {
+    --badge-size: 28px;
+    --badge-offset: 54px;
+  }
+
+  .seed-avatar__root--size_96 {
+    --avatar-size: 96px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 38px;
+    --badge-mask-offset: 62px;
+  }
+
+  .seed-avatar__badge--size_96 {
+    --badge-size: 32px;
+    --badge-offset: 65px;
+  }
+
+  .seed-avatar__root--size_108 {
+    --avatar-size: 108px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 44px;
+    --badge-mask-offset: 70px;
+  }
+
+  .seed-avatar__badge--size_108 {
+    --badge-size: 36px;
+    --badge-offset: 74px;
+  }
+
+  .seed-avatar__root--badgeMask_none {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg />");
+  }
+
+  .seed-avatar__root--badgeMask_circle {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>");
+  }
+
+  .seed-avatar__badge--badgeMask_circle {
+    border-radius: 9999px;
+  }
+
+  .seed-avatar__root--badgeMask_flower {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path shape-rendering=\"crispEdges\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z\" fill=\"white\"/></svg>");
+  }
+
+  .seed-avatar__root--badgeMask_shield {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z\" fill=\"white\"/></svg>");
+  }
+}

package/recipes/avatar.layered.mjs

@@ -0,0 +1,65 @@
+import './avatar.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48,
+  "badgeMask": "none"
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "64",
+    "80",
+    "96",
+    "108"
+  ],
+  "badgeMask": [
+    "none",
+    "circle",
+    "flower",
+    "shield"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
+
+// @recipe(seed): avatar

package/recipes/avatar.mjs

@@ -0,0 +1,65 @@
+import './avatar.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48,
+  "badgeMask": "none"
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "64",
+    "80",
+    "96",
+    "108"
+  ],
+  "badgeMask": [
+    "none",
+    "circle",
+    "flower",
+    "shield"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
+
+// @recipe(seed): avatar

package/recipes/badge.css

@@ -0,0 +1,118 @@
+.seed-badge__root {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    text-transform: none;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none
+}
+.seed-badge__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+.seed-badge__root--size_medium {
+    max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
+    min-height: var(--seed-dimension-x5);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5);
+    border-radius: var(--seed-radius-r1);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1)
+}
+.seed-badge__root--size_large {
+    max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
+    min-height: var(--seed-dimension-x6);
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    padding-top: var(--seed-dimension-x1);
+    padding-bottom: var(--seed-dimension-x1);
+    border-radius: var(--seed-radius-r1_5);
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-badge__root--variant_weak {
+    font-weight: var(--seed-font-weight-medium)
+}
+.seed-badge__root--variant_solid {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-badge__root--variant_outline {
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-badge__root--tone_neutral-variant_weak {
+    background-color: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral-muted)
+}
+.seed-badge__root--tone_neutral-variant_solid {
+    background-color: var(--seed-color-palette-gray-800);
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-badge__root--tone_neutral-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    color: var(--seed-color-fg-neutral-muted)
+}
+.seed-badge__root--tone_brand-variant_weak {
+    background-color: var(--seed-color-bg-brand-weak);
+    color: var(--seed-color-fg-brand-contrast)
+}
+.seed-badge__root--tone_brand-variant_solid {
+    background-color: var(--seed-color-bg-brand-solid);
+    color: var(--seed-color-palette-static-white)
+}
+.seed-badge__root--tone_brand-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    color: var(--seed-color-fg-brand)
+}
+.seed-badge__root--tone_informative-variant_weak {
+    background-color: var(--seed-color-bg-informative-weak);
+    color: var(--seed-color-fg-informative-contrast)
+}
+.seed-badge__root--tone_informative-variant_solid {
+    background-color: var(--seed-color-bg-informative-solid);
+    color: var(--seed-color-palette-static-white)
+}
+.seed-badge__root--tone_informative-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
+    color: var(--seed-color-fg-informative)
+}
+.seed-badge__root--tone_positive-variant_weak {
+    background-color: var(--seed-color-bg-positive-weak);
+    color: var(--seed-color-fg-positive-contrast)
+}
+.seed-badge__root--tone_positive-variant_solid {
+    background-color: var(--seed-color-bg-positive-solid);
+    color: var(--seed-color-palette-static-white)
+}
+.seed-badge__root--tone_positive-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
+    color: var(--seed-color-fg-positive)
+}
+.seed-badge__root--tone_warning-variant_weak {
+    background-color: var(--seed-color-bg-warning-weak);
+    color: var(--seed-color-fg-warning-contrast)
+}
+.seed-badge__root--tone_warning-variant_solid {
+    background-color: var(--seed-color-bg-warning-solid);
+    color: var(--seed-color-palette-static-black-alpha-900)
+}
+.seed-badge__root--tone_warning-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
+    color: var(--seed-color-fg-warning)
+}
+.seed-badge__root--tone_critical-variant_weak {
+    background-color: var(--seed-color-bg-critical-weak);
+    color: var(--seed-color-fg-critical-contrast)
+}
+.seed-badge__root--tone_critical-variant_solid {
+    background-color: var(--seed-color-bg-critical-solid);
+    color: var(--seed-color-palette-static-white)
+}
+.seed-badge__root--tone_critical-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
+    color: var(--seed-color-fg-critical)
+}

package/recipes/badge.d.ts

@@ -0,0 +1,32 @@
+declare interface BadgeVariant {
+  /**
+  * @default "medium"
+  */
+  size: "medium" | "large";
+/**
+  * @default "solid"
+  */
+  variant: "weak" | "solid" | "outline";
+/**
+  * @default "neutral"
+  */
+  tone: "neutral" | "brand" | "informative" | "positive" | "warning" | "critical";
+}
+
+declare type BadgeVariantMap = {
+  [key in keyof BadgeVariant]: Array<BadgeVariant[key]>;
+};
+
+export declare type BadgeVariantProps = Partial<BadgeVariant>;
+
+export declare type BadgeSlotName = "root" | "label";
+
+export declare const badgeVariantMap: BadgeVariantMap;
+
+export declare const badge: ((
+  props?: BadgeVariantProps,
+) => Record<BadgeSlotName, string>) & {
+  splitVariantProps: <T extends BadgeVariantProps>(
+    props: T,
+  ) => [BadgeVariantProps, Omit<T, keyof BadgeVariantProps>];
+}

package/recipes/badge.layered.css

@@ -0,0 +1,140 @@
+@layer seed-components {
+  .seed-badge__root {
+    box-sizing: border-box;
+    text-transform: none;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .seed-badge__label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .seed-badge__root--size_medium {
+    max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
+    min-height: var(--seed-dimension-x5);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5);
+    border-radius: var(--seed-radius-r1);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+  }
+
+  .seed-badge__root--size_large {
+    max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
+    min-height: var(--seed-dimension-x6);
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2);
+    padding-top: var(--seed-dimension-x1);
+    padding-bottom: var(--seed-dimension-x1);
+    border-radius: var(--seed-radius-r1_5);
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+  }
+
+  .seed-badge__root--variant_weak {
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-badge__root--variant_solid, .seed-badge__root--variant_outline {
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-badge__root--tone_neutral-variant_weak {
+    background-color: var(--seed-color-bg-neutral-weak);
+    color: var(--seed-color-fg-neutral-muted);
+  }
+
+  .seed-badge__root--tone_neutral-variant_solid {
+    background-color: var(--seed-color-palette-gray-800);
+    color: var(--seed-color-fg-neutral-inverted);
+  }
+
+  .seed-badge__root--tone_neutral-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    color: var(--seed-color-fg-neutral-muted);
+  }
+
+  .seed-badge__root--tone_brand-variant_weak {
+    background-color: var(--seed-color-bg-brand-weak);
+    color: var(--seed-color-fg-brand-contrast);
+  }
+
+  .seed-badge__root--tone_brand-variant_solid {
+    background-color: var(--seed-color-bg-brand-solid);
+    color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-badge__root--tone_brand-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    color: var(--seed-color-fg-brand);
+  }
+
+  .seed-badge__root--tone_informative-variant_weak {
+    background-color: var(--seed-color-bg-informative-weak);
+    color: var(--seed-color-fg-informative-contrast);
+  }
+
+  .seed-badge__root--tone_informative-variant_solid {
+    background-color: var(--seed-color-bg-informative-solid);
+    color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-badge__root--tone_informative-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
+    color: var(--seed-color-fg-informative);
+  }
+
+  .seed-badge__root--tone_positive-variant_weak {
+    background-color: var(--seed-color-bg-positive-weak);
+    color: var(--seed-color-fg-positive-contrast);
+  }
+
+  .seed-badge__root--tone_positive-variant_solid {
+    background-color: var(--seed-color-bg-positive-solid);
+    color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-badge__root--tone_positive-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
+    color: var(--seed-color-fg-positive);
+  }
+
+  .seed-badge__root--tone_warning-variant_weak {
+    background-color: var(--seed-color-bg-warning-weak);
+    color: var(--seed-color-fg-warning-contrast);
+  }
+
+  .seed-badge__root--tone_warning-variant_solid {
+    background-color: var(--seed-color-bg-warning-solid);
+    color: var(--seed-color-palette-static-black-alpha-900);
+  }
+
+  .seed-badge__root--tone_warning-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
+    color: var(--seed-color-fg-warning);
+  }
+
+  .seed-badge__root--tone_critical-variant_weak {
+    background-color: var(--seed-color-bg-critical-weak);
+    color: var(--seed-color-fg-critical-contrast);
+  }
+
+  .seed-badge__root--tone_critical-variant_solid {
+    background-color: var(--seed-color-bg-critical-solid);
+    color: var(--seed-color-palette-static-white);
+  }
+
+  .seed-badge__root--tone_critical-variant_outline {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
+    color: var(--seed-color-fg-critical);
+  }
+}