@arun-dev/tokens 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/tokens",
-  "version": "0.18.0",
+  "version": "0.20.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/combobox.css

@@ -50,6 +50,10 @@
   --combobox-group-label-font-size: var(--text-xs);
   --combobox-group-label-font-weight: var(--font-weight-semibold);
 
+  /* Separator — a line between items or groups, as an <hr> in a <select> */
+  --combobox-separator-color: var(--color-border-subtle);
+  --combobox-separator-margin-block: var(--space-3xs);
+
   /* Empty and Status */
   --combobox-message-color: var(--color-text-muted);
 }

package/src/components/field.css

@@ -0,0 +1,11 @@
+/* Field component tokens — a label, a description and an error around one control. */
+:root {
+  --field-gap: var(--space-3xs);
+  --field-label-color: var(--color-text-primary);
+  --field-label-font-size: var(--text-sm);
+  --field-label-font-weight: var(--font-weight-medium);
+  --field-message-font-size: var(--text-xs);
+  --field-description-color: var(--color-text-muted);
+  --field-error-color: var(--color-status-error);
+  --field-disabled-opacity: 0.5;
+}

package/src/components/link.css

@@ -0,0 +1,9 @@
+/* Link component tokens — an <a href> in running text or on its own. */
+:root {
+  --link-color: var(--color-text-accent);
+  --link-color-hover: var(--color-text-primary);
+  --link-underline-color: var(--color-border-accent);
+  --link-underline-thickness: var(--space-px);
+  --link-underline-offset: 0.2em;
+  --link-focus-color: var(--color-text-accent);
+}

package/src/components/meter.css

@@ -0,0 +1,10 @@
+/* Meter component tokens — a native <meter>: how much of a known range. Its three regions,
+   from low, high and optimum, map onto the status tokens. */
+:root {
+  --meter-height: var(--space-2xs);
+  --meter-radius: var(--radius-full);
+  --meter-track-color: var(--color-bg-secondary);
+  --meter-optimum-color: var(--color-status-success);
+  --meter-suboptimum-color: var(--color-status-warning);
+  --meter-poor-color: var(--color-status-error);
+}

package/src/components/progress.css

@@ -0,0 +1,8 @@
+/* Progress component tokens — a native <progress>: how far along. */
+:root {
+  --progress-height: var(--space-2xs);
+  --progress-radius: var(--radius-full);
+  --progress-track-color: var(--color-bg-secondary);
+  --progress-bar-color: var(--color-text-accent);
+  --progress-duration: var(--duration-normal);
+}

package/src/components/separator.css

@@ -0,0 +1,6 @@
+/* Separator component tokens — an <hr>, across or upright. It draws the line only:
+   the space around it is the layout's gap, not a margin a reset could zero. */
+:root {
+  --separator-color: var(--color-border-default);
+  --separator-thickness: var(--space-px);
+}

package/src/components/slider.css

@@ -0,0 +1,6 @@
+/* Slider component tokens — a native <input type="range">, coloured with accent-color. */
+:root {
+  --slider-accent-color: var(--color-text-accent);
+  --slider-focus-color: var(--color-text-accent);
+  --slider-disabled-opacity: 0.5;
+}

package/src/components.css

@@ -17,3 +17,9 @@
 @import './components/tabs.css';
 @import './components/textarea.css';
 @import './components/tooltip.css';
+@import './components/field.css';
+@import './components/link.css';
+@import './components/meter.css';
+@import './components/progress.css';
+@import './components/separator.css';
+@import './components/slider.css';