@arun-dev/tokens 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/tokens",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Pure-CSS design tokens with white-label brand generation — primitives, brand palettes, semantic layers, and the createBrand() generator",
   "license": "MIT",
   "type": "module",

package/src/components/dialog.css

@@ -0,0 +1,27 @@
+/* Dialog component tokens — map semantic tokens onto the modal panel and its backdrop.
+   Override any of these to restyle dialogs without moving other components. */
+:root {
+  /* Panel */
+  --dialog-width: 32rem;
+  --dialog-viewport-gap: var(--space-md);
+  --dialog-padding: var(--space-lg);
+  --dialog-radius: var(--radius-lg);
+  --dialog-bg: var(--color-bg-primary);
+  --dialog-color: var(--color-text-primary);
+  --dialog-border-width: var(--space-px);
+  --dialog-border-color: var(--color-border-subtle);
+  --dialog-shadow: var(--shadow-xl);
+
+  /* Title */
+  --dialog-title-font-size: var(--text-lg);
+  --dialog-title-font-weight: var(--font-weight-semibold);
+  --dialog-title-gap: var(--space-xs);
+
+  /* Backdrop — a neutral scrim, the same in every brand and mode, so it is a value
+     rather than a mapping: no semantic token describes it. */
+  --dialog-backdrop: rgb(0 0 0 / 0.5);
+
+  /* Motion */
+  --dialog-duration: var(--duration-normal);
+  --dialog-enter-offset: var(--space-xs);
+}

package/src/components/select.css

@@ -0,0 +1,29 @@
+/* Select component tokens — map semantic tokens onto the dropdown's styleable surfaces.
+   Values match Input's so fields sit together, but map from the semantic tier directly:
+   overriding --input-* moves only inputs, and these move only selects. */
+:root {
+  /* Box — the bordered frame that holds the control and its chevron */
+  --select-height: 2.25rem;
+  --select-padding-inline: var(--space-xs);
+  --select-padding-block-list: var(--space-2xs);
+  --select-radius: var(--radius-md);
+  --select-bg: var(--color-bg-primary);
+  --select-border-width: var(--space-px);
+  --select-border-color: var(--color-border-default);
+  --select-border-color-hover: var(--color-border-strong);
+  --select-border-color-focus: var(--color-text-accent);
+  --select-border-color-invalid: var(--color-status-error);
+
+  /* Text */
+  --select-font-size: var(--text-sm);
+  --select-color: var(--color-text-primary);
+  --select-placeholder-color: var(--color-text-muted);
+
+  /* Chevron */
+  --select-icon-size: 1rem;
+  --select-icon-gap: var(--space-2xs);
+  --select-icon-color: var(--color-text-secondary);
+
+  --select-disabled-opacity: 0.5;
+  --select-duration: var(--duration-fast);
+}

package/src/components.css

@@ -6,7 +6,9 @@
 @import './components/badge.css';
 @import './components/button.css';
 @import './components/checkbox.css';
+@import './components/dialog.css';
 @import './components/input.css';
 @import './components/radio-group.css';
+@import './components/select.css';
 @import './components/switch.css';
 @import './components/textarea.css';