Initial commit: HMDesignSystem baseline

packages/ui/src/theme/toggle.css

@@ -0,0 +1,77 @@
+/* Toggle mapping. ui-viz has no Toggle spec, so these are current HM values built from the HM Semantic / Primitive tokens.
+   Toggle is a persistent pressed-state control, not an action button: it has its own look and does not reference any
+   --hm-button-* token or the Button roles. States use the Radix attributes ([data-state="on"|"off"], :disabled) and :hover.
+   The default look is in `@layer components` so a consumer's utility classes (width, height, rounded, layout) still win. */
+:root, [data-hm-theme] {
+  --hm-toggle-height-sm: 28px;
+  --hm-toggle-height-md: 34px;
+  --hm-toggle-height-lg: 42px;
+  --hm-toggle-padding-x-sm: 8px;
+  --hm-toggle-padding-x-md: 12px;
+  --hm-toggle-padding-x-lg: 16px;
+  --hm-toggle-radius: var(--hm-radius-control-md);
+  --hm-toggle-gap: 8px;
+  --hm-toggle-font-size: 14px;
+  --hm-toggle-line-height: 20px;
+  --hm-toggle-font-weight: 500;
+
+  --hm-toggle-off-background: transparent;
+  --hm-toggle-off-text: var(--hm-sem-fg-primary);
+  --hm-toggle-hover-background: var(--hm-sem-surface-highlight);
+  /* On = the persistent selected surface (full Accent), independent of Active and Focus. */
+  --hm-toggle-on-background: var(--accent);
+  --hm-toggle-on-text: var(--accent-foreground);
+
+  --hm-toggle-outline-border-width: 1px;
+  --hm-toggle-outline-border-color: var(--hm-sem-stroke-input-default);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-toggle-disabled-opacity: 0.6;
+}
+
+@layer components {
+  [data-slot="toggle"] {
+    --hm-toggle-height: var(--hm-toggle-height-md);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-md);
+    box-sizing: border-box;
+    gap: var(--hm-toggle-gap);
+    height: var(--hm-toggle-height);
+    min-width: var(--hm-toggle-height);
+    padding: 0 var(--hm-toggle-padding-x);
+    border: var(--hm-toggle-outline-border-width) solid transparent;
+    border-radius: var(--hm-toggle-radius);
+    background: var(--hm-toggle-off-background);
+    color: var(--hm-toggle-off-text);
+    font-size: var(--hm-toggle-font-size);
+    line-height: var(--hm-toggle-line-height);
+    font-weight: var(--hm-toggle-font-weight);
+    cursor: pointer;
+  }
+  [data-slot="toggle"][data-size="sm"] {
+    --hm-toggle-height: var(--hm-toggle-height-sm);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-sm);
+  }
+  [data-slot="toggle"][data-size="lg"] {
+    --hm-toggle-height: var(--hm-toggle-height-lg);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-lg);
+  }
+  /* Icon-only: a square of the control height. */
+  [data-slot="toggle"][data-icon-only]:has(> svg:only-child) {
+    padding: 0;
+  }
+  [data-slot="toggle"][data-variant="outline"] {
+    border-color: var(--hm-toggle-outline-border-color);
+  }
+  [data-slot="toggle"]:hover:not(:disabled) {
+    background: var(--hm-toggle-hover-background);
+  }
+  [data-slot="toggle"][data-state="on"],
+  [data-slot="toggle"][data-state="on"]:hover:not(:disabled) {
+    background: var(--hm-toggle-on-background);
+    color: var(--hm-toggle-on-text);
+  }
+  [data-slot="toggle"]:disabled {
+    opacity: var(--hm-toggle-disabled-opacity);
+    cursor: not-allowed;
+  }
+}