@arun-dev/tokens 0.21.0 → 0.23.0

package/package.json

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

@@ -0,0 +1,10 @@
+/* Breadcrumb component tokens — where the page sits, as a trail of links. */
+:root {
+  --breadcrumb-gap: var(--space-2xs);
+  --breadcrumb-font-size: var(--text-sm);
+  --breadcrumb-link-color: var(--color-text-secondary);
+  --breadcrumb-link-color-hover: var(--color-text-primary);
+  --breadcrumb-current-color: var(--color-text-primary);
+  --breadcrumb-separator-color: var(--color-text-muted);
+  --breadcrumb-focus-color: var(--color-text-accent);
+}

package/src/components/kbd.css

@@ -0,0 +1,10 @@
+/* Kbd component tokens — a key on the keyboard. */
+:root {
+  --kbd-font-size: 0.8em;
+  --kbd-padding-inline: 0.4em;
+  --kbd-min-inline-size: 1.6em;
+  --kbd-radius: var(--radius-sm);
+  --kbd-bg: var(--color-bg-secondary);
+  --kbd-color: var(--color-text-primary);
+  --kbd-border-color: var(--color-border-default);
+}

package/src/components/pagination.css

@@ -0,0 +1,13 @@
+/* Pagination component tokens — page links or buttons in a row. */
+:root {
+  --pagination-gap: var(--space-3xs);
+  --pagination-item-size: 2.25rem;
+  --pagination-item-radius: var(--radius-md);
+  --pagination-font-size: var(--text-sm);
+  --pagination-color: var(--color-text-primary);
+  --pagination-bg-hover: var(--color-bg-secondary);
+  --pagination-current-bg: var(--color-text-accent);
+  --pagination-current-color: var(--color-text-on-accent);
+  --pagination-disabled-color: var(--color-text-muted);
+  --pagination-focus-color: var(--color-text-accent);
+}

package/src/components/table.css

@@ -0,0 +1,13 @@
+/* Table component tokens — a native table, ruled between rows. */
+:root {
+  --table-font-size: var(--text-sm);
+  --table-cell-padding-block: var(--space-2xs);
+  --table-cell-padding-inline: var(--space-sm);
+  --table-border-color: var(--color-border-default);
+  --table-head-color: var(--color-text-secondary);
+  --table-head-font-weight: var(--font-weight-semibold);
+  --table-head-bg: var(--color-bg-secondary);
+  --table-row-bg-hover: var(--color-bg-secondary);
+  --table-caption-color: var(--color-text-muted);
+  --table-radius: var(--radius-md);
+}

package/src/components/toast.css

@@ -0,0 +1,26 @@
+/* Toast component tokens — brief messages stacked in a corner, over the page. */
+:root {
+  --toast-viewport-inset: var(--space-md);
+  --toast-width: 22rem;
+  --toast-gap: var(--space-2xs);
+  --toast-padding: var(--space-sm);
+  --toast-radius: var(--radius-md);
+  --toast-bg: var(--color-bg-primary);
+  --toast-color: var(--color-text-primary);
+  --toast-description-color: var(--color-text-secondary);
+  --toast-border-color: var(--color-border-default);
+  --toast-shadow: var(--shadow-lg);
+  --toast-title-font-weight: var(--font-weight-semibold);
+  --toast-accent-width: var(--space-2px);
+  --toast-close-color: var(--color-text-secondary);
+  --toast-close-bg-hover: var(--color-bg-secondary);
+  --toast-focus-color: var(--color-text-accent);
+  --toast-duration: var(--duration-normal);
+
+  /* Types — the accent along the leading edge; no type keeps the border colour */
+  --toast-accent: var(--toast-border-color);
+  --toast-info-accent: var(--color-status-info);
+  --toast-success-accent: var(--color-status-success);
+  --toast-warning-accent: var(--color-status-warning);
+  --toast-error-accent: var(--color-status-error);
+}

package/src/components.css

@@ -27,3 +27,8 @@
 @import './components/alert.css';
 @import './components/skeleton.css';
 @import './components/spinner.css';
+@import './components/toast.css';
+@import './components/breadcrumb.css';
+@import './components/kbd.css';
+@import './components/pagination.css';
+@import './components/table.css';