Initial commit: HMDesignSystem baseline

packages/ui/src/theme/sheet.css

@@ -0,0 +1,87 @@
+/* Sheet mapping. ui-viz has no Sheet spec (the Dialog doc lists "side sheet" as out of scope), so these are current HM values built
+   from the HM Semantic tokens. Modal panel attached to a viewport edge; Radix keeps Portal, focus trap, Escape and focus return.
+   Position and slide animation stay the shadcn classes; the Overlay keeps the shadcn default. Values repeat Dialog's look in
+   meaning only: no --hm-dialog-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-sheet-background: var(--hm-sem-bg-surface);
+  --hm-sheet-text: var(--hm-sem-fg-primary);
+  --hm-sheet-border-width: 1px;
+  --hm-sheet-border-color: var(--hm-sem-stroke-input-default);
+  --hm-sheet-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  /* Left / right: fixed width, never wider than the viewport minus a strip of Overlay. Top / bottom: full width, height by content. */
+  --hm-sheet-width: 400px;
+  --hm-sheet-edge-gap: 48px;
+
+  --hm-sheet-padding: 24px;
+  --hm-sheet-header-gap: 8px;
+  --hm-sheet-footer-gap: 8px;
+  /* Space reserved at the Header end for the Close button (28px button + 8px gap). */
+  --hm-sheet-close-clearance: 36px;
+
+  --hm-sheet-title-font-size: 20px;
+  --hm-sheet-title-line-height: 28px;
+  --hm-sheet-title-font-weight: 700;
+  --hm-sheet-description-font-size: 14px;
+  --hm-sheet-description-line-height: 20px;
+  --hm-sheet-description-color: var(--hm-sem-fg-secondary);
+  --hm-sheet-body-font-size: 14px;
+  --hm-sheet-body-line-height: 20px;
+}
+
+[data-slot="sheet-content"] {
+  box-sizing: border-box;
+  background: var(--hm-sheet-background);
+  color: var(--hm-sheet-text);
+  box-shadow: var(--hm-sheet-shadow);
+  font-size: var(--hm-sheet-body-font-size);
+  line-height: var(--hm-sheet-body-line-height);
+  overflow-wrap: anywhere;
+}
+[data-slot="sheet-content"][data-side="right"],
+[data-slot="sheet-content"][data-side="left"] {
+  height: 100%;
+  width: min(var(--hm-sheet-width), calc(100vw - var(--hm-sheet-edge-gap)));
+}
+[data-slot="sheet-content"][data-side="top"],
+[data-slot="sheet-content"][data-side="bottom"] {
+  width: 100%;
+  max-height: calc(100dvh - var(--hm-sheet-edge-gap));
+}
+/* Border only on the edge that faces the page. */
+[data-slot="sheet-content"][data-side="right"] { border-left: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="left"] { border-right: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="top"] { border-bottom: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="bottom"] { border-top: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+
+[data-slot="sheet-header"] {
+  flex: none;
+  gap: var(--hm-sheet-header-gap);
+  padding: var(--hm-sheet-padding) calc(var(--hm-sheet-padding) + var(--hm-sheet-close-clearance)) 16px var(--hm-sheet-padding);
+}
+[data-slot="sheet-title"] {
+  font-size: var(--hm-sheet-title-font-size);
+  line-height: var(--hm-sheet-title-line-height);
+  font-weight: var(--hm-sheet-title-font-weight);
+  color: var(--hm-sheet-text);
+}
+[data-slot="sheet-description"] {
+  font-size: var(--hm-sheet-description-font-size);
+  line-height: var(--hm-sheet-description-line-height);
+  font-weight: 400;
+  color: var(--hm-sheet-description-color);
+}
+
+/* Body: the only region that scrolls; Header and Footer stay in view. */
+[data-slot="sheet-body"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 var(--hm-sheet-padding);
+}
+
+[data-slot="sheet-footer"] {
+  flex: none;
+  gap: var(--hm-sheet-footer-gap);
+  padding: 16px var(--hm-sheet-padding) var(--hm-sheet-padding);
+}