@seed-design/css 0.1.12 → 0.1.14

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/avatar-stack.d.ts

@@ -86,5 +86,15 @@ export declare const vars: {
         "strokeWidth": "5px"
       }
     }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "gap": "-27px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
   }
 }

package/vars/component/avatar-stack.mjs

@@ -86,5 +86,15 @@ export const vars = {
         "strokeWidth": "5px"
       }
     }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "gap": "-27px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
   }
 }

package/vars/component/avatar.d.ts

@@ -126,5 +126,21 @@ export declare const vars: {
         "size": "32px"
       }
     }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "size": "108px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "70px",
+        "size": "44px"
+      },
+      "badge": {
+        "offset": "74px",
+        "size": "36px"
+      }
+    }
   }
 }

package/vars/component/avatar.mjs

@@ -126,5 +126,21 @@ export const vars = {
         "size": "32px"
       }
     }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "size": "108px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "70px",
+        "size": "44px"
+      },
+      "badge": {
+        "offset": "74px",
+        "size": "36px"
+      }
+    }
   }
 }

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)"
+      }
+    }
+  }
+}