@seed-design/css 0.1.13 → 0.1.15

package/vars/component/page-banner.mjs

@@ -0,0 +1,309 @@
+export 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)"
+      }
+    }
+  }
+}

package/vars/component/snackbar.d.ts

@@ -11,6 +11,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
+        "maxWidth": "560px",
         "paddingX": "var(--seed-dimension-x4)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x2)",

package/vars/component/snackbar.mjs

@@ -11,6 +11,7 @@ export const vars = {
         "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r2)",
         "minHeight": "44px",
+        "maxWidth": "560px",
         "paddingX": "var(--seed-dimension-x4)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x2)",

package/vars/font-size.d.ts

@@ -8,6 +8,13 @@ export declare const t7 = "var(--seed-font-size-t7)";
 export declare const t8 = "var(--seed-font-size-t8)";
 export declare const t9 = "var(--seed-font-size-t9)";
 export declare const t10 = "var(--seed-font-size-t10)";
+export declare const t1Static = "var(--seed-font-size-t1-static)";
 export declare const t2Static = "var(--seed-font-size-t2-static)";
+export declare const t3Static = "var(--seed-font-size-t3-static)";
+export declare const t4Static = "var(--seed-font-size-t4-static)";
 export declare const t5Static = "var(--seed-font-size-t5-static)";
-export declare const t6Static = "var(--seed-font-size-t6-static)";
+export declare const t6Static = "var(--seed-font-size-t6-static)";
+export declare const t7Static = "var(--seed-font-size-t7-static)";
+export declare const t8Static = "var(--seed-font-size-t8-static)";
+export declare const t9Static = "var(--seed-font-size-t9-static)";
+export declare const t10Static = "var(--seed-font-size-t10-static)";

package/vars/font-size.mjs

@@ -8,6 +8,13 @@ export const t7 = "var(--seed-font-size-t7)";
 export const t8 = "var(--seed-font-size-t8)";
 export const t9 = "var(--seed-font-size-t9)";
 export const t10 = "var(--seed-font-size-t10)";
+export const t1Static = "var(--seed-font-size-t1-static)";
 export const t2Static = "var(--seed-font-size-t2-static)";
+export const t3Static = "var(--seed-font-size-t3-static)";
+export const t4Static = "var(--seed-font-size-t4-static)";
 export const t5Static = "var(--seed-font-size-t5-static)";
-export const t6Static = "var(--seed-font-size-t6-static)";
+export const t6Static = "var(--seed-font-size-t6-static)";
+export const t7Static = "var(--seed-font-size-t7-static)";
+export const t8Static = "var(--seed-font-size-t8-static)";
+export const t9Static = "var(--seed-font-size-t9-static)";
+export const t10Static = "var(--seed-font-size-t10-static)";

package/vars/gradient.d.ts

@@ -1,8 +1,8 @@
 export declare const fadeLayerFloating = "var(--seed-gradient-fade-layer-floating)";
 export declare const fadeLayerDefault = "var(--seed-gradient-fade-layer-default)";
 export declare const glowMagic = "var(--seed-gradient-glow-magic)";
-export declare const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
 export declare const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
 export declare const shimmerNeutral = "var(--seed-gradient-shimmer-neutral)";
-export declare const highlightMagic = "var(--seed-gradient-highlight-magic)";
-export declare const highlightMagicPressed = "var(--seed-gradient-highlight-magic-pressed)";
+export declare const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
+export declare const highlightMagicPressed = "var(--seed-gradient-highlight-magic-pressed)";
+export declare const highlightMagic = "var(--seed-gradient-highlight-magic)";

package/vars/gradient.mjs

@@ -1,8 +1,8 @@
 export const fadeLayerFloating = "var(--seed-gradient-fade-layer-floating)";
 export const fadeLayerDefault = "var(--seed-gradient-fade-layer-default)";
 export const glowMagic = "var(--seed-gradient-glow-magic)";
-export const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
 export const glowMagicPressed = "var(--seed-gradient-glow-magic-pressed)";
 export const shimmerNeutral = "var(--seed-gradient-shimmer-neutral)";
-export const highlightMagic = "var(--seed-gradient-highlight-magic)";
-export const highlightMagicPressed = "var(--seed-gradient-highlight-magic-pressed)";
+export const shimmerMagic = "var(--seed-gradient-shimmer-magic)";
+export const highlightMagicPressed = "var(--seed-gradient-highlight-magic-pressed)";
+export const highlightMagic = "var(--seed-gradient-highlight-magic)";

package/vars/line-height.d.ts

@@ -7,4 +7,14 @@ export declare const t6 = "var(--seed-line-height-t6)";
 export declare const t7 = "var(--seed-line-height-t7)";
 export declare const t8 = "var(--seed-line-height-t8)";
 export declare const t9 = "var(--seed-line-height-t9)";
-export declare const t10 = "var(--seed-line-height-t10)";
+export declare const t10 = "var(--seed-line-height-t10)";
+export declare const t1Static = "var(--seed-line-height-t1-static)";
+export declare const t2Static = "var(--seed-line-height-t2-static)";
+export declare const t3Static = "var(--seed-line-height-t3-static)";
+export declare const t4Static = "var(--seed-line-height-t4-static)";
+export declare const t5Static = "var(--seed-line-height-t5-static)";
+export declare const t6Static = "var(--seed-line-height-t6-static)";
+export declare const t7Static = "var(--seed-line-height-t7-static)";
+export declare const t8Static = "var(--seed-line-height-t8-static)";
+export declare const t9Static = "var(--seed-line-height-t9-static)";
+export declare const t10Static = "var(--seed-line-height-t10-static)";

package/vars/line-height.mjs

@@ -7,4 +7,14 @@ export const t6 = "var(--seed-line-height-t6)";
 export const t7 = "var(--seed-line-height-t7)";
 export const t8 = "var(--seed-line-height-t8)";
 export const t9 = "var(--seed-line-height-t9)";
-export const t10 = "var(--seed-line-height-t10)";
+export const t10 = "var(--seed-line-height-t10)";
+export const t1Static = "var(--seed-line-height-t1-static)";
+export const t2Static = "var(--seed-line-height-t2-static)";
+export const t3Static = "var(--seed-line-height-t3-static)";
+export const t4Static = "var(--seed-line-height-t4-static)";
+export const t5Static = "var(--seed-line-height-t5-static)";
+export const t6Static = "var(--seed-line-height-t6-static)";
+export const t7Static = "var(--seed-line-height-t7-static)";
+export const t8Static = "var(--seed-line-height-t8-static)";
+export const t9Static = "var(--seed-line-height-t9-static)";
+export const t10Static = "var(--seed-line-height-t10-static)";