@arun-dev/tokens 0.22.0 → 0.24.0

package/package.json

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

@@ -0,0 +1,8 @@
+/* Avatar component tokens — a person's picture, or their initials. */
+:root {
+  --avatar-size: 2.5rem;
+  --avatar-radius: var(--radius-full);
+  --avatar-bg: var(--color-border-default);
+  --avatar-color: var(--color-text-secondary);
+  --avatar-font-weight: var(--font-weight-medium);
+}

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

@@ -0,0 +1,18 @@
+/* Toggle component tokens — a button that stays pressed; also the items of a ToggleGroup and
+   a Toolbar. */
+:root {
+  --toggle-height: 2.25rem;
+  --toggle-padding-inline: var(--space-xs);
+  --toggle-radius: var(--radius-md);
+  --toggle-font-size: var(--text-sm);
+  --toggle-color: var(--color-text-secondary);
+  --toggle-bg-hover: var(--color-bg-secondary);
+  --toggle-pressed-bg: var(--color-bg-accent);
+  --toggle-pressed-color: var(--color-text-accent);
+  --toggle-focus-color: var(--color-text-accent);
+  --toggle-disabled-opacity: 0.5;
+  --toggle-group-gap: var(--space-3xs);
+  --toggle-group-padding: var(--space-3xs);
+  --toggle-group-border-color: var(--color-border-default);
+  --toggle-group-radius: var(--radius-md);
+}

package/src/components/toolbar.css

@@ -0,0 +1,10 @@
+/* Toolbar component tokens — a row of controls with one Tab stop. */
+:root {
+  --toolbar-gap: var(--space-3xs);
+  --toolbar-padding: var(--space-3xs);
+  --toolbar-radius: var(--radius-md);
+  --toolbar-border-color: var(--color-border-default);
+  --toolbar-bg: var(--color-bg-primary);
+  --toolbar-separator-color: var(--color-border-default);
+  --toolbar-input-inline-size: 4rem;
+}

package/src/components.css

@@ -28,3 +28,10 @@
 @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';
+@import './components/avatar.css';
+@import './components/toggle.css';
+@import './components/toolbar.css';