@arun-dev/tokens 0.19.0 → 0.21.0

package/package.json

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

@@ -0,0 +1,15 @@
+/* Accordion component tokens — native <details> items, one under another. */
+:root {
+  --accordion-border-color: var(--color-border-default);
+  --accordion-trigger-padding-block: var(--space-sm);
+  --accordion-trigger-padding-inline: var(--space-2xs);
+  --accordion-trigger-color: var(--color-text-primary);
+  --accordion-trigger-font-weight: var(--font-weight-medium);
+  --accordion-trigger-bg-hover: var(--color-bg-secondary);
+  --accordion-icon-color: var(--color-text-secondary);
+  --accordion-panel-padding-block-end: var(--space-sm);
+  --accordion-panel-color: var(--color-text-secondary);
+  --accordion-focus-color: var(--color-text-accent);
+  --accordion-radius: var(--radius-sm);
+  --accordion-duration: var(--duration-normal);
+}

package/src/components/alert.css

@@ -0,0 +1,24 @@
+/* Alert component tokens — a message box, toned on the semantic status tokens. */
+:root {
+  --alert-padding: var(--space-sm);
+  --alert-gap: var(--space-2xs);
+  --alert-radius: var(--radius-md);
+  --alert-border-width: var(--space-px);
+  --alert-title-font-weight: var(--font-weight-semibold);
+
+  /* Neutral — the default tone */
+  --alert-bg: var(--color-bg-secondary);
+  --alert-border-color: var(--color-border-default);
+  --alert-color: var(--color-text-primary);
+  --alert-icon-color: var(--color-text-secondary);
+
+  /* Tones */
+  --alert-info-bg: var(--color-status-info-bg);
+  --alert-info-accent: var(--color-status-info);
+  --alert-success-bg: var(--color-status-success-bg);
+  --alert-success-accent: var(--color-status-success);
+  --alert-warning-bg: var(--color-status-warning-bg);
+  --alert-warning-accent: var(--color-status-warning);
+  --alert-error-bg: var(--color-status-error-bg);
+  --alert-error-accent: var(--color-status-error);
+}

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/skeleton.css

@@ -0,0 +1,7 @@
+/* Skeleton component tokens — a placeholder shape while content loads. */
+:root {
+  --skeleton-bg: var(--color-border-default);
+  --skeleton-shine: var(--color-bg-primary);
+  --skeleton-radius: var(--radius-sm);
+  --skeleton-duration: 1.6s;
+}

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/spinner.css

@@ -0,0 +1,9 @@
+/* Spinner component tokens — an indeterminate <progress>, drawn as a turning ring. */
+:root {
+  --spinner-size: 1.25rem;
+  --spinner-thickness: var(--space-2px);
+  --spinner-track-color: var(--color-border-default);
+  --spinner-color: var(--color-text-accent);
+  --spinner-duration: 0.8s;
+  --spinner-duration-reduced: 2.4s;
+}

package/src/components.css

@@ -17,3 +17,13 @@
 @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';
+@import './components/accordion.css';
+@import './components/alert.css';
+@import './components/skeleton.css';
+@import './components/spinner.css';