@arun-dev/tokens 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -2
- package/src/base.css +3 -0
- package/src/components/badge.css +18 -0
- package/src/components/chip.css +21 -0
- package/src/components.css +6 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arun-dev/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Pure-CSS design tokens with white-label brand generation — primitives, brand palettes, semantic layers, and the createBrand() generator",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -29,6 +29,9 @@
|
|
|
29
29
|
"./brands/default": "./src/brands/default.css",
|
|
30
30
|
"./brands/default/palette": "./src/brands/default/palette.css",
|
|
31
31
|
"./brands/default/semantic": "./src/brands/default/semantic.css",
|
|
32
|
+
"./components": "./src/components.css",
|
|
33
|
+
"./components/chip": "./src/components/chip.css",
|
|
34
|
+
"./components/badge": "./src/components/badge.css",
|
|
32
35
|
"./primitives/typography": "./src/primitives/typography.css",
|
|
33
36
|
"./primitives/spacing": "./src/primitives/spacing.css",
|
|
34
37
|
"./primitives/radius": "./src/primitives/radius.css",
|
|
@@ -55,7 +58,7 @@
|
|
|
55
58
|
"eslint": "9.39.4",
|
|
56
59
|
"tsup": "8.5.1",
|
|
57
60
|
"typescript": "5.9.3",
|
|
58
|
-
"vitest": "3.2.
|
|
61
|
+
"vitest": "3.2.6",
|
|
59
62
|
"@arun-dev/config": "0.0.0"
|
|
60
63
|
},
|
|
61
64
|
"scripts": {
|
package/src/base.css
CHANGED
|
@@ -8,3 +8,6 @@
|
|
|
8
8
|
@import './primitives/motion.css';
|
|
9
9
|
@import './primitives/elevation.css';
|
|
10
10
|
@import './primitives/breakpoints.css';
|
|
11
|
+
/* Component tokens — remap semantic tokens onto per-component names.
|
|
12
|
+
Resolved at computed-value time, so loading before the brand layer is fine. */
|
|
13
|
+
@import './components.css';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* Badge component tokens — map semantic tokens onto the badge's styleable surfaces.
|
|
2
|
+
Badge borrows its shape from .chip; only colour is tokenised here.
|
|
3
|
+
Override any of these to restyle badges without moving other components. */
|
|
4
|
+
:root {
|
|
5
|
+
/* Neutral — the default tone */
|
|
6
|
+
--badge-bg: var(--color-bg-surface);
|
|
7
|
+
--badge-color: var(--color-text-secondary);
|
|
8
|
+
|
|
9
|
+
/* Tones — map onto the semantic status tokens, so a brand change moves them too */
|
|
10
|
+
--badge-success-bg: var(--color-status-success-bg);
|
|
11
|
+
--badge-success-color: var(--color-status-success);
|
|
12
|
+
--badge-warning-bg: var(--color-status-warning-bg);
|
|
13
|
+
--badge-warning-color: var(--color-status-warning);
|
|
14
|
+
--badge-error-bg: var(--color-status-error-bg);
|
|
15
|
+
--badge-error-color: var(--color-status-error);
|
|
16
|
+
--badge-info-bg: var(--color-status-info-bg);
|
|
17
|
+
--badge-info-color: var(--color-status-info);
|
|
18
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* Chip component tokens — map semantic tokens onto the chip's styleable surfaces.
|
|
2
|
+
Override any of these to restyle chips without moving other components. */
|
|
3
|
+
:root {
|
|
4
|
+
/* Shape */
|
|
5
|
+
--chip-font-size: var(--text-xs);
|
|
6
|
+
--chip-font-weight: var(--font-weight-medium);
|
|
7
|
+
--chip-padding-inline: 0.625rem; /* 10px — sits between space-2xs (8px) and space-xs (12px) */
|
|
8
|
+
--chip-padding-block: var(--space-3xs);
|
|
9
|
+
--chip-radius: var(--radius-full);
|
|
10
|
+
--chip-border-width: var(--space-px);
|
|
11
|
+
|
|
12
|
+
/* Default variant — neutral: tech tags, nav chips */
|
|
13
|
+
--chip-bg: var(--color-bg-surface);
|
|
14
|
+
--chip-color: var(--color-text-secondary);
|
|
15
|
+
--chip-border-color: var(--color-border-default);
|
|
16
|
+
|
|
17
|
+
/* Accent variant — featured, skills, labels */
|
|
18
|
+
--chip-accent-bg: var(--color-bg-accent);
|
|
19
|
+
--chip-accent-color: var(--color-text-accent);
|
|
20
|
+
--chip-accent-border-color: var(--color-border-accent);
|
|
21
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/* Component tokens — the mapping tier between semantic tokens and component CSS.
|
|
2
|
+
Brand-agnostic: these only remap semantic tokens onto per-component names, so a
|
|
3
|
+
consumer can restyle one component without moving the whole system.
|
|
4
|
+
Imported by base.css; also exported standalone as @arun-dev/tokens/components. */
|
|
5
|
+
@import './components/chip.css';
|
|
6
|
+
@import './components/badge.css';
|