Initial commit: HMDesignSystem baseline

packages/ui/src/theme/tooltip.css

@@ -0,0 +1,30 @@
+/* Tooltip mapping. ui-viz has no Tooltip spec (inventory: behavior and design pending), so these are current HM values from the HM
+   Semantic tokens. Short, non-interactive text on the inverse (dark) face; the arrow shares the face color. */
+:root, [data-hm-theme] {
+  --hm-tooltip-background: var(--hm-sem-fg-primary);
+  --hm-tooltip-text: var(--hm-sem-on-action-primary);
+  --hm-tooltip-radius: var(--hm-radius-container);
+  --hm-tooltip-padding-x: 10px;
+  --hm-tooltip-padding-y: 6px;
+  --hm-tooltip-max-width: 240px;
+  --hm-tooltip-font-size: 12px;
+  --hm-tooltip-line-height: 18px;
+  --hm-tooltip-font-weight: 400;
+}
+
+[data-slot="tooltip-content"] {
+  box-sizing: border-box;
+  max-width: var(--hm-tooltip-max-width);
+  padding: var(--hm-tooltip-padding-y) var(--hm-tooltip-padding-x);
+  border-radius: var(--hm-tooltip-radius);
+  background: var(--hm-tooltip-background);
+  color: var(--hm-tooltip-text);
+  font-size: var(--hm-tooltip-font-size);
+  line-height: var(--hm-tooltip-line-height);
+  font-weight: var(--hm-tooltip-font-weight);
+  overflow-wrap: anywhere;
+}
+[data-slot="tooltip-arrow"] {
+  background: var(--hm-tooltip-background);
+  fill: var(--hm-tooltip-background);
+}