@seed-design/vars 0.0.1-alpha-20250210081704

package/lib/component/index.mjs

@@ -0,0 +1,40 @@
+export { vars as actionButton } from "./action-button.mjs";
+export { vars as actionChip } from "./action-chip.mjs";
+export { vars as actionSheetCloseButton } from "./action-sheet-close-button.mjs";
+export { vars as actionSheetItem } from "./action-sheet-item.mjs";
+export { vars as actionSheet } from "./action-sheet.mjs";
+export { vars as avatarStack } from "./avatar-stack.mjs";
+export { vars as avatar } from "./avatar.mjs";
+export { vars as badge } from "./badge.mjs";
+export { vars as bottomSheet } from "./bottom-sheet.mjs";
+export { vars as callout } from "./callout.mjs";
+export { vars as checkbox } from "./checkbox.mjs";
+export { vars as chipTab } from "./chip-tab.mjs";
+export { vars as chipTablist } from "./chip-tablist.mjs";
+export { vars as controlChip } from "./control-chip.mjs";
+export { vars as dialog } from "./dialog.mjs";
+export { vars as extendedActionSheetCloseButton } from "./extended-action-sheet-close-button.mjs";
+export { vars as extendedActionSheetItem } from "./extended-action-sheet-item.mjs";
+export { vars as extendedActionSheet } from "./extended-action-sheet.mjs";
+export { vars as extendedFab } from "./extended-fab.mjs";
+export { vars as fab } from "./fab.mjs";
+export { vars as helpBubble } from "./help-bubble.mjs";
+export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
+export { vars as inlineBanner } from "./inline-banner.mjs";
+export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
+export { vars as progressCircle } from "./progress-circle.mjs";
+export { vars as radio } from "./radio.mjs";
+export { vars as reactionButton } from "./reaction-button.mjs";
+export { vars as segmentedControlItem } from "./segmented-control-item.mjs";
+export { vars as segmentedControl } from "./segmented-control.mjs";
+export { vars as selectBox } from "./select-box.mjs";
+export { vars as skeleton } from "./skeleton.mjs";
+export { vars as snackbar } from "./snackbar.mjs";
+export { vars as switch } from "./switch.mjs";
+export { vars as tab } from "./tab.mjs";
+export { vars as tablist } from "./tablist.mjs";
+export { vars as textButton } from "./text-button.mjs";
+export { vars as textField } from "./text-field.mjs";
+export { vars as toggleButton } from "./toggle-button.mjs";
+export { vars as topNavigation } from "./top-navigation.mjs";
+export { vars as typography } from "./typography.mjs";

package/lib/component/inline-banner.d.ts

@@ -0,0 +1,211 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-v3-dimension-s4)",
+        "paddingX": "var(--seed-v3-dimension-s4)"
+      },
+      "content": {
+        "fontSize": "var(--seed-v3-font-size-s4)",
+        "lineHeight": "var(--seed-v3-line-height-s4)",
+        "gap": "var(--seed-v3-dimension-s2)",
+        "paddingY": "var(--seed-v3-dimension-s2_5)",
+        "minHeight": "var(--seed-v3-dimension-s10)"
+      },
+      "icon": {
+        "size": "var(--seed-v3-dimension-s4)",
+        "marginY": "1.5px"
+      },
+      "title": {
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      },
+      "description": {
+        "fontWeight": "var(--seed-v3-font-weight-medium)"
+      },
+      "linkLabel": {
+        "height": "var(--seed-v3-dimension-s10)",
+        "fontSize": "var(--seed-v3-font-size-s2)",
+        "lineHeight": "var(--seed-v3-line-height-s2)",
+        "fontWeight": "var(--seed-v3-font-weight-regular)"
+      },
+      "dismissButton": {
+        "size": "var(--seed-v3-dimension-s10)"
+      },
+      "dismissIcon": {
+        "size": "var(--seed-v3-dimension-s4)"
+      },
+      "actionableIcon": {
+        "size": "var(--seed-v3-dimension-s4)"
+      }
+    }
+  },
+  "variantNeutralWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      }
+    }
+  },
+  "variantPositiveWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-positive-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "variantInformativeWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-informative-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "variantWarningWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-warning-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "variantWarningSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-warning-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      }
+    }
+  },
+  "variantCriticalWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-critical-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "variantCriticalSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-critical-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      }
+    }
+  }
+}

package/lib/component/inline-banner.mjs

@@ -0,0 +1,211 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-v3-dimension-s4)",
+        "paddingX": "var(--seed-v3-dimension-s4)"
+      },
+      "content": {
+        "fontSize": "var(--seed-v3-font-size-s4)",
+        "lineHeight": "var(--seed-v3-line-height-s4)",
+        "gap": "var(--seed-v3-dimension-s2)",
+        "paddingY": "var(--seed-v3-dimension-s2_5)",
+        "minHeight": "var(--seed-v3-dimension-s10)"
+      },
+      "icon": {
+        "size": "var(--seed-v3-dimension-s4)",
+        "marginY": "1.5px"
+      },
+      "title": {
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      },
+      "description": {
+        "fontWeight": "var(--seed-v3-font-weight-medium)"
+      },
+      "linkLabel": {
+        "height": "var(--seed-v3-dimension-s10)",
+        "fontSize": "var(--seed-v3-font-size-s2)",
+        "lineHeight": "var(--seed-v3-line-height-s2)",
+        "fontWeight": "var(--seed-v3-font-weight-regular)"
+      },
+      "dismissButton": {
+        "size": "var(--seed-v3-dimension-s10)"
+      },
+      "dismissIcon": {
+        "size": "var(--seed-v3-dimension-s4)"
+      },
+      "actionableIcon": {
+        "size": "var(--seed-v3-dimension-s4)"
+      }
+    }
+  },
+  "variantNeutralWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      }
+    }
+  },
+  "variantPositiveWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-positive-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "variantInformativeWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-informative-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "variantWarningWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-warning-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "variantWarningSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-warning-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "dismissIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      }
+    }
+  },
+  "variantCriticalWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-critical-weak)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "variantCriticalSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-critical-solid)"
+      },
+      "icon": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "title": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "description": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "linkLabel": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      },
+      "actionableIcon": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      }
+    }
+  }
+}

package/lib/component/manner-temp-badge.d.ts

@@ -0,0 +1,77 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "20px",
+        "paddingY": "var(--seed-v3-dimension-s0_5)",
+        "paddingX": "var(--seed-v3-dimension-s1_5)",
+        "cornerRadius": "var(--seed-v3-radius-full)"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s1)",
+        "lineHeight": "var(--seed-v3-line-height-s1)",
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      }
+    }
+  },
+  "levelL1": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l1-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l1-text)"
+      }
+    }
+  },
+  "levelL2": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l2-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l2-text)"
+      }
+    }
+  },
+  "levelL3": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l3-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l3-text)"
+      }
+    }
+  },
+  "levelL4": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l4-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l4-text)"
+      }
+    }
+  },
+  "levelL5": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l5-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l5-text)"
+      }
+    }
+  },
+  "levelL6": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l6-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l6-text)"
+      }
+    }
+  }
+}

package/lib/component/manner-temp-badge.mjs

@@ -0,0 +1,77 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "minHeight": "20px",
+        "paddingY": "var(--seed-v3-dimension-s0_5)",
+        "paddingX": "var(--seed-v3-dimension-s1_5)",
+        "cornerRadius": "var(--seed-v3-radius-full)"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s1)",
+        "lineHeight": "var(--seed-v3-line-height-s1)",
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      }
+    }
+  },
+  "levelL1": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l1-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l1-text)"
+      }
+    }
+  },
+  "levelL2": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l2-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l2-text)"
+      }
+    }
+  },
+  "levelL3": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l3-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l3-text)"
+      }
+    }
+  },
+  "levelL4": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l4-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l4-text)"
+      }
+    }
+  },
+  "levelL5": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l5-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l5-text)"
+      }
+    }
+  },
+  "levelL6": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-manner-temp-l6-bg)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-manner-temp-l6-text)"
+      }
+    }
+  }
+}

package/lib/component/progress-circle.d.ts

@@ -0,0 +1,67 @@
+export declare const vars: {
+  "size40": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-v3-dimension-s10)",
+        "thickness": "5px"
+      }
+    }
+  },
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-v3-dimension-s6)",
+        "thickness": "3px"
+      }
+    }
+  },
+  "indeterminateFalse": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "300ms",
+        "lengthTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
+      }
+    }
+  },
+  "indeterminateTrue": {
+    "enabled": {
+      "range": {
+        "lengthDuration": "1.2s",
+        "rotateDuration": "1.2s",
+        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
+        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
+        "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-v3-color-palette-gray-200)"
+      },
+      "range": {
+        "color": "var(--seed-v3-color-palette-gray-500)"
+      }
+    }
+  },
+  "toneBrand": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-v3-color-palette-carrot-200)"
+      },
+      "range": {
+        "color": "var(--seed-v3-color-bg-brand-solid)"
+      }
+    }
+  },
+  "toneStaticWhite": {
+    "enabled": {
+      "track": {
+        "color": "var(--seed-v3-color-palette-static-white-alpha-200)"
+      },
+      "range": {
+        "color": "var(--seed-v3-color-palette-static-white)"
+      }
+    }
+  }
+}