@techsio/ui-kit 0.44.1 → 0.46.0

package/src/tokens/components/atoms/_hotkeys.css

@@ -0,0 +1,36 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-hotkeys-surface: var(--color-surface);
+  --color-hotkeys-text: var(--color-fg-secondary);
+  --color-hotkeys-outline: var(--color-border-primary);
+
+  /* DERIVED COLORS */
+  --color-hotkeys-key-bg: var(--color-hotkeys-surface);
+  --color-hotkeys-key-fg: var(--color-hotkeys-text);
+  --color-hotkeys-key-border: var(--color-hotkeys-outline);
+  --color-hotkeys-separator-fg: var(--color-hotkeys-text);
+
+  /* SPACING */
+  --gap-hotkeys: var(--spacing-50);
+  --padding-hotkeys-key-x: var(--spacing-100);
+  --padding-hotkeys-key-y: var(--spacing-50);
+
+  /* TYPOGRAPHY */
+  --text-hotkeys-sm: var(--text-xs);
+  --font-weight-hotkeys: var(--font-weight-medium);
+
+  /* BORDERS & RADIUS */
+  --border-width-hotkeys-key: var(--border-width-sm);
+  --radius-hotkeys-key: var(--radius-sm);
+}
+
+@utility hotkeys-key-border-width {
+  border-width: var(--border-width-hotkeys-key);
+}
+
+@utility hotkeys-target-focus {
+  outline-style: var(--default-ring-style);
+  outline-width: var(--default-ring-width);
+  outline-color: var(--color-primary);
+  outline-offset: var(--default-ring-offset);
+}

package/src/tokens/components/components.css

@@ -5,6 +5,7 @@
 @import "./atoms/_button.css";
 @import "./atoms/_status-text.css";
 @import "./atoms/_checkbox.css";
+@import "./atoms/_hotkeys.css";
 @import "./atoms/_icon.css";
 @import "./atoms/_image.css";
 @import "./atoms/_input.css";
@@ -23,6 +24,7 @@
 @import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
+@import "./molecules/_command.css";
 @import "./molecules/_date-picker.css";
 @import "./molecules/_dialog.css";
 @import "./molecules/_drawer.css";
@@ -40,6 +42,7 @@
 @import "./molecules/_steps.css";
 @import "./molecules/_switch.css";
 @import "./molecules/_toast.css";
+@import "./molecules/_tour.css";
 @import "./molecules/_tree-view.css";
 
 @import "./organisms/_table.css";

package/src/tokens/components/molecules/_command.css

@@ -0,0 +1,43 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-command-surface: var(--color-popup-bg);
+  --color-command-foreground: var(--color-popup-item-fg);
+  --color-command-muted: var(--color-popup-item-fg-muted);
+  --color-command-highlight: var(--color-popup-item-bg-hover);
+
+  /* DERIVED COLORS */
+  --color-command-bg: var(--color-command-surface);
+  --color-command-fg: var(--color-command-foreground);
+  --color-command-border: var(--color-popup-border);
+  --color-command-group-label-fg: var(--color-command-muted);
+  --color-command-empty-fg: var(--color-command-muted);
+
+  /* STATE VARIATIONS */
+  --color-command-item-bg-highlighted: var(--color-command-highlight);
+
+  /* DISABLED STATES */
+  --color-command-item-fg-disabled: var(--color-popup-item-fg-disabled);
+
+  /* SPACING */
+  --spacing-command-gap: var(--spacing-100);
+  --spacing-command-item-gap: var(--spacing-popup-item-md);
+  --spacing-command-list-max: var(--container-xs);
+  --padding-command: var(--spacing-150);
+  --padding-command-list: var(--padding-popup-viewport);
+  --padding-command-item-x: var(--padding-popup-item-x-md);
+  --padding-command-item-y: var(--padding-popup-item-y-md);
+  --padding-command-empty: var(--spacing-300);
+
+  /* TYPOGRAPHY */
+  --text-command-md: var(--text-sm);
+  --font-weight-command-group-label: var(--font-weight-medium);
+
+  /* BORDERS & RADIUS */
+  --border-width-command: var(--border-width-popup);
+  --radius-command: var(--radius-popup);
+  --radius-command-item: var(--radius-popup-item);
+}
+
+@utility command-border-width {
+  border-width: var(--border-width-command);
+}

package/src/tokens/components/molecules/_tour.css

@@ -0,0 +1,121 @@
+/* Code-owned until the explicitly deferred component-to-figma handoff. */
+@theme static {
+  /* Reference layer */
+  --color-tour-surface: var(--color-fill-surface);
+  --color-tour-text: var(--color-fg-primary);
+  --color-tour-outline: var(--color-border-primary);
+  --color-tour-scrim: var(--color-bg-scrim);
+
+  /* Derived layer */
+  --color-tour-bg: var(--color-tour-surface);
+  --color-tour-fg: var(--color-tour-text);
+  --color-tour-description-fg: var(--color-tour-text);
+  --color-tour-progress-fg: var(--color-tour-text);
+  --color-tour-border: var(--color-tour-outline);
+  --color-tour-backdrop-bg: var(--color-tour-scrim);
+  --color-tour-arrow-bg: var(--color-tour-surface);
+  --color-tour-spotlight-border: var(--color-tour-text);
+  --border-width-tour: var(--border-width-sm);
+  --radius-tour: var(--radius-sm);
+  --shadow-tour: var(--shadow-primary);
+  --padding-tour: var(--dimension-20);
+  --padding-tour-actions: var(--dimension-6);
+  --spacing-tour-content: var(--dimension-10);
+  --spacing-tour-actions: var(--dimension-6);
+  --spacing-tour-close: var(--dimension-10);
+  --spacing-tour-title: var(--dimension-30);
+  --spacing-tour-arrow: var(--dimension-10);
+  --spacing-tour-viewport: var(--dimension-16);
+  --container-tour: var(--container-sm);
+  --text-tour-title-size: var(--text-lg);
+  --text-tour-body-size: var(--text-base);
+  --text-tour-progress-size: var(--text-base);
+  --font-weight-tour-title: var(--font-weight-semibold);
+
+  /* Runtime layer, not a Figma variable. */
+  --z-tour: 80;
+}
+
+@utility tour-layer {
+  /* Zag 1.43.3 derives the positioner's inline z-index from Content.
+   * Keep explicit backdrop/spotlight/content offsets for the ui-kit stack. */
+  z-index: calc(var(--z-tour) + var(--tour-layer, 2)) !important;
+}
+
+@utility tour-border {
+  border: var(--border-width-tour) solid var(--color-tour-border);
+}
+
+@utility tour-spotlight-border {
+  border: var(--border-width-tour) solid var(--color-tour-spotlight-border);
+}
+
+@utility tour-content {
+  width: var(--container-tour);
+  max-width: calc(100vw - var(--spacing-tour-viewport) * 2);
+  max-height: calc(100svh - var(--spacing-tour-viewport) * 2);
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+@utility tour-positioner {
+  &[data-type="dialog"] {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &[data-type="floating"] {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-tour-viewport);
+    pointer-events: none;
+
+    &[data-placement^="top"],
+    &[data-placement="left-start"],
+    &[data-placement="right-start"] {
+      align-items: flex-start;
+    }
+
+    &[data-placement^="bottom"],
+    &[data-placement="left-end"],
+    &[data-placement="right-end"] {
+      align-items: flex-end;
+    }
+
+    &[data-placement="top-start"],
+    &[data-placement="bottom-start"] {
+      justify-content: flex-start;
+    }
+
+    &[data-placement="top-end"],
+    &[data-placement="bottom-end"] {
+      justify-content: flex-end;
+    }
+
+    &[data-placement^="left"] {
+      justify-content: left;
+    }
+
+    &[data-placement^="right"] {
+      justify-content: right;
+    }
+  }
+
+  & > [data-scope="tour"][data-part="content"] {
+    pointer-events: auto;
+  }
+}
+
+@utility tour-arrow {
+  --arrow-size: var(--spacing-tour-arrow);
+  --arrow-background: var(--color-tour-arrow-bg);
+  z-index: calc(var(--z-tour) + 3);
+}