@dataimago/tokens-neutral 0.1.0-alpha.6 → 0.1.0-alpha.7
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/README.md +2 -0
- package/dist/colors.json +134 -0
- package/dist/components.json +44 -0
- package/dist/effects.json +54 -0
- package/dist/frequent.json +51 -0
- package/dist/spacing.json +56 -0
- package/dist/theme-colors.json +112 -0
- package/dist/tokens.dtcg.json +644 -0
- package/dist/tokens.studio.json +497 -0
- package/dist/tokens.w3c.dtcg.json +617 -0
- package/dist/typography.json +168 -0
- package/package.json +9 -6
package/README.md
CHANGED
|
@@ -60,6 +60,8 @@ Emits:
|
|
|
60
60
|
- `dist/tokens.css` — CSS custom properties (light + dark theme variants)
|
|
61
61
|
- `dist/tokens.scss` — same, as SCSS
|
|
62
62
|
- `dist/index.{mjs,cjs,d.ts}` — typed JS modules
|
|
63
|
+
- `dist/tokens.dtcg.json` — additive DTCG-style export for tools and agents
|
|
64
|
+
- `dist/{spacing,effects,frequent,components}.json` — inherited non-identity token files copied from `@dataimago/tokens` so public subpath exports resolve from this package
|
|
63
65
|
|
|
64
66
|
## Related
|
|
65
67
|
|
package/dist/colors.json
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"palette": {
|
|
4
|
+
"ink": {
|
|
5
|
+
"50": {
|
|
6
|
+
"value": "#f5f5f4",
|
|
7
|
+
"description": "Ink scale — warmest near-white"
|
|
8
|
+
},
|
|
9
|
+
"100": {
|
|
10
|
+
"value": "#e7e5e4",
|
|
11
|
+
"description": "Ink scale — subtle neutral surface tint"
|
|
12
|
+
},
|
|
13
|
+
"200": {
|
|
14
|
+
"value": "#d6d3d1",
|
|
15
|
+
"description": "Ink scale — borders, dividers on light surfaces"
|
|
16
|
+
},
|
|
17
|
+
"300": {
|
|
18
|
+
"value": "#a8a29e",
|
|
19
|
+
"description": "Ink scale — muted text on dark surfaces"
|
|
20
|
+
},
|
|
21
|
+
"400": {
|
|
22
|
+
"value": "#78716c",
|
|
23
|
+
"description": "Ink scale — secondary text on dark surfaces"
|
|
24
|
+
},
|
|
25
|
+
"500": {
|
|
26
|
+
"value": "#57534e",
|
|
27
|
+
"description": "Ink scale — secondary text on light surfaces"
|
|
28
|
+
},
|
|
29
|
+
"600": {
|
|
30
|
+
"value": "#44403c",
|
|
31
|
+
"description": "Ink scale — primary text on mid surfaces"
|
|
32
|
+
},
|
|
33
|
+
"700": {
|
|
34
|
+
"value": "#292524",
|
|
35
|
+
"description": "Ink scale — primary text, high contrast; neutral interactive primary"
|
|
36
|
+
},
|
|
37
|
+
"800": {
|
|
38
|
+
"value": "#1c1917",
|
|
39
|
+
"description": "Ink scale — surfaces in dark mode"
|
|
40
|
+
},
|
|
41
|
+
"900": {
|
|
42
|
+
"value": "#0c0a09",
|
|
43
|
+
"description": "Ink scale — near-black; primary dark surface and text color"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"stone": {
|
|
47
|
+
"50": {
|
|
48
|
+
"value": "#f7f7f6",
|
|
49
|
+
"description": "Stone scale — lightest cool-neutral surface; cards/modals one step above page"
|
|
50
|
+
},
|
|
51
|
+
"100": {
|
|
52
|
+
"value": "#ededeb",
|
|
53
|
+
"description": "Stone scale — canonical page background (light mode)"
|
|
54
|
+
},
|
|
55
|
+
"200": {
|
|
56
|
+
"value": "#dcdcda",
|
|
57
|
+
"description": "Stone scale — borders, dividers"
|
|
58
|
+
},
|
|
59
|
+
"300": {
|
|
60
|
+
"value": "#c1c1bf",
|
|
61
|
+
"description": "Stone scale — pressed border / disabled chrome"
|
|
62
|
+
},
|
|
63
|
+
"400": {
|
|
64
|
+
"value": "#a0a0a0",
|
|
65
|
+
"description": "Stone scale — disabled text, muted icons"
|
|
66
|
+
},
|
|
67
|
+
"500": {
|
|
68
|
+
"value": "#7c7c7c",
|
|
69
|
+
"description": "Stone scale — secondary text"
|
|
70
|
+
},
|
|
71
|
+
"600": {
|
|
72
|
+
"value": "#5e5e5c",
|
|
73
|
+
"description": "Stone scale — caption / metadata text on light surfaces"
|
|
74
|
+
},
|
|
75
|
+
"700": {
|
|
76
|
+
"value": "#424240",
|
|
77
|
+
"description": "Stone scale — primary text on light surfaces"
|
|
78
|
+
},
|
|
79
|
+
"800": {
|
|
80
|
+
"value": "#292927",
|
|
81
|
+
"description": "Stone scale — high-contrast headings on light surfaces"
|
|
82
|
+
},
|
|
83
|
+
"900": {
|
|
84
|
+
"value": "#14140f",
|
|
85
|
+
"description": "Stone scale — body text on light surfaces"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
"paper": {
|
|
89
|
+
"50": {
|
|
90
|
+
"value": "#fefdfb",
|
|
91
|
+
"description": "Paper scale — lightest warm surface; elevated cards/modals when warm tint is desired"
|
|
92
|
+
},
|
|
93
|
+
"100": {
|
|
94
|
+
"value": "#fdf9f2",
|
|
95
|
+
"description": "Paper scale — warm page-background option"
|
|
96
|
+
},
|
|
97
|
+
"200": {
|
|
98
|
+
"value": "#faf2e3",
|
|
99
|
+
"description": "Paper scale — code-block and pull-quote background"
|
|
100
|
+
},
|
|
101
|
+
"300": {
|
|
102
|
+
"value": "#f5e8cf",
|
|
103
|
+
"description": "Paper scale — call-out / emphasised panel background"
|
|
104
|
+
},
|
|
105
|
+
"400": {
|
|
106
|
+
"value": "#edd9b3",
|
|
107
|
+
"description": "Paper scale — muted warm accent"
|
|
108
|
+
},
|
|
109
|
+
"500": {
|
|
110
|
+
"value": "#e0c088",
|
|
111
|
+
"description": "Paper scale — strong warm accent; wheat"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"functional": {
|
|
116
|
+
"success": {
|
|
117
|
+
"value": "#27AE60",
|
|
118
|
+
"description": "Success states and positive actions"
|
|
119
|
+
},
|
|
120
|
+
"warning": {
|
|
121
|
+
"value": "#F39C12",
|
|
122
|
+
"description": "Warning states and caution"
|
|
123
|
+
},
|
|
124
|
+
"error": {
|
|
125
|
+
"value": "#E74C3C",
|
|
126
|
+
"description": "Error states and critical issues"
|
|
127
|
+
},
|
|
128
|
+
"info": {
|
|
129
|
+
"value": "#3498DB",
|
|
130
|
+
"description": "Informational content"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"card": {
|
|
3
|
+
"background": "surface.elevated",
|
|
4
|
+
"padding": "spacing.component.padding",
|
|
5
|
+
"radius": "radius.component",
|
|
6
|
+
"shadow": "shadow.moderate",
|
|
7
|
+
"border": "border.subtle",
|
|
8
|
+
"description": "Card component tokens - references semantic tokens"
|
|
9
|
+
},
|
|
10
|
+
"button": {
|
|
11
|
+
"padding-x": "spacing.component.padding",
|
|
12
|
+
"padding-y": "spacing.micro.normal",
|
|
13
|
+
"radius": "radius.component",
|
|
14
|
+
"font-weight": "typography.weight.medium",
|
|
15
|
+
"primary": {
|
|
16
|
+
"background": "interactive.primary",
|
|
17
|
+
"text": "content.inverse",
|
|
18
|
+
"hover": "interactive.hover"
|
|
19
|
+
},
|
|
20
|
+
"secondary": {
|
|
21
|
+
"background": "surface.elevated",
|
|
22
|
+
"text": "content.primary",
|
|
23
|
+
"hover": "surface.page"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"navbar": {
|
|
27
|
+
"background": "surface.navbar",
|
|
28
|
+
"background-scrolled": "surface.navbar-scrolled",
|
|
29
|
+
"text": "content.secondary",
|
|
30
|
+
"text-hover": "interactive.accent",
|
|
31
|
+
"transition": "transition.smooth"
|
|
32
|
+
},
|
|
33
|
+
"navigation": {
|
|
34
|
+
"item-spacing": "spacing.micro.loose",
|
|
35
|
+
"hover-background": {
|
|
36
|
+
"light": "rgba(20, 20, 16, 0.05)",
|
|
37
|
+
"dark": "rgba(237, 237, 235, 0.05)"
|
|
38
|
+
},
|
|
39
|
+
"active-background": {
|
|
40
|
+
"light": "rgba(20, 20, 16, 0.1)",
|
|
41
|
+
"dark": "rgba(237, 237, 235, 0.1)"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
{
|
|
2
|
+
"shadow": {
|
|
3
|
+
"subtle": {
|
|
4
|
+
"light": "0 1px 2px 0 rgb(20 20 16 / 0.05)",
|
|
5
|
+
"dark": "0 1px 2px 0 rgb(237 237 235 / 0.03)",
|
|
6
|
+
"description": "Subtle elevation - barely perceptible"
|
|
7
|
+
},
|
|
8
|
+
"moderate": {
|
|
9
|
+
"light": "0 4px 6px -1px rgb(20 20 16 / 0.1)",
|
|
10
|
+
"dark": "0 4px 6px -1px rgb(237 237 235 / 0.05)",
|
|
11
|
+
"description": "Moderate elevation - cards, dropdowns"
|
|
12
|
+
},
|
|
13
|
+
"prominent": {
|
|
14
|
+
"light": "0 10px 15px -3px rgb(20 20 16 / 0.1)",
|
|
15
|
+
"dark": "0 10px 15px -3px rgb(237 237 235 / 0.4)",
|
|
16
|
+
"description": "Strong elevation - modals, floating elements"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"border": {
|
|
20
|
+
"subtle": {
|
|
21
|
+
"light": "rgba(20, 20, 16, 0.1)",
|
|
22
|
+
"dark": "rgba(237, 237, 235, 0.1)",
|
|
23
|
+
"description": "Subtle borders - element separation"
|
|
24
|
+
},
|
|
25
|
+
"moderate": {
|
|
26
|
+
"light": "rgba(20, 20, 16, 0.15)",
|
|
27
|
+
"dark": "rgba(237, 237, 235, 0.15)",
|
|
28
|
+
"description": "Moderate borders - defined boundaries"
|
|
29
|
+
},
|
|
30
|
+
"focus": {
|
|
31
|
+
"light": "#3498DB",
|
|
32
|
+
"dark": "#4FC3F7",
|
|
33
|
+
"description": "Focus indicators - accessibility"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"transition": {
|
|
37
|
+
"quick": {
|
|
38
|
+
"value": "0.15s ease",
|
|
39
|
+
"description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
|
|
40
|
+
},
|
|
41
|
+
"standard": {
|
|
42
|
+
"value": "0.25s ease-in-out",
|
|
43
|
+
"description": "Default for most state changes — toggles, button states, card hovers"
|
|
44
|
+
},
|
|
45
|
+
"smooth": {
|
|
46
|
+
"value": "0.35s ease",
|
|
47
|
+
"description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
|
|
48
|
+
},
|
|
49
|
+
"logo": {
|
|
50
|
+
"value": "0.3s",
|
|
51
|
+
"description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"spacing": {
|
|
3
|
+
"component": {
|
|
4
|
+
"padding": "1rem",
|
|
5
|
+
"margin": "1.5rem",
|
|
6
|
+
"gap": "0.75rem",
|
|
7
|
+
"description": "Most frequently adjusted spacing - component internals"
|
|
8
|
+
},
|
|
9
|
+
"layout": {
|
|
10
|
+
"section": "3rem",
|
|
11
|
+
"container": "2rem",
|
|
12
|
+
"comfortable": "1rem",
|
|
13
|
+
"description": "Layout-level spacing - between major elements"
|
|
14
|
+
},
|
|
15
|
+
"micro": {
|
|
16
|
+
"tight": "0.25rem",
|
|
17
|
+
"normal": "0.5rem",
|
|
18
|
+
"loose": "1rem",
|
|
19
|
+
"description": "Fine-tuning spacing - when things feel cramped or loose"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"radius": {
|
|
23
|
+
"component": "0.5rem",
|
|
24
|
+
"subtle": "0.25rem",
|
|
25
|
+
"prominent": "0.75rem",
|
|
26
|
+
"full": "9999px",
|
|
27
|
+
"description": "Border radius values - component rounding"
|
|
28
|
+
},
|
|
29
|
+
"contrast": {
|
|
30
|
+
"high": {
|
|
31
|
+
"light": "rgb(20, 20, 16)",
|
|
32
|
+
"dark": "rgb(237, 237, 235)",
|
|
33
|
+
"description": "Maximum contrast text - accessibility focus"
|
|
34
|
+
},
|
|
35
|
+
"readable": {
|
|
36
|
+
"light": "rgb(20, 20, 16)",
|
|
37
|
+
"dark": "rgb(237, 237, 235)",
|
|
38
|
+
"description": "Comfortable reading contrast - primary text"
|
|
39
|
+
},
|
|
40
|
+
"medium": {
|
|
41
|
+
"light": "#7c7c7c",
|
|
42
|
+
"dark": "#83838f",
|
|
43
|
+
"description": "Medium emphasis - secondary information"
|
|
44
|
+
},
|
|
45
|
+
"subtle": {
|
|
46
|
+
"light": "#7c7c7c",
|
|
47
|
+
"dark": "#83838f",
|
|
48
|
+
"description": "De-emphasized text - captions, meta info"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"spacing": {
|
|
3
|
+
"xs": {
|
|
4
|
+
"value": "0.25rem"
|
|
5
|
+
},
|
|
6
|
+
"sm": {
|
|
7
|
+
"value": "0.5rem"
|
|
8
|
+
},
|
|
9
|
+
"md": {
|
|
10
|
+
"value": "1rem"
|
|
11
|
+
},
|
|
12
|
+
"lg": {
|
|
13
|
+
"value": "1.5rem"
|
|
14
|
+
},
|
|
15
|
+
"xl": {
|
|
16
|
+
"value": "2rem"
|
|
17
|
+
},
|
|
18
|
+
"2xl": {
|
|
19
|
+
"value": "3rem"
|
|
20
|
+
},
|
|
21
|
+
"3xl": {
|
|
22
|
+
"value": "4rem"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"radius": {
|
|
26
|
+
"sm": {
|
|
27
|
+
"value": "0.25rem"
|
|
28
|
+
},
|
|
29
|
+
"md": {
|
|
30
|
+
"value": "0.5rem"
|
|
31
|
+
},
|
|
32
|
+
"lg": {
|
|
33
|
+
"value": "0.75rem"
|
|
34
|
+
},
|
|
35
|
+
"xl": {
|
|
36
|
+
"value": "1rem"
|
|
37
|
+
},
|
|
38
|
+
"full": {
|
|
39
|
+
"value": "9999px"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"shadow": {
|
|
43
|
+
"sm": {
|
|
44
|
+
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
|
|
45
|
+
},
|
|
46
|
+
"md": {
|
|
47
|
+
"value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
|
|
48
|
+
},
|
|
49
|
+
"lg": {
|
|
50
|
+
"value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
|
|
51
|
+
},
|
|
52
|
+
"xl": {
|
|
53
|
+
"value": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"surface": {
|
|
4
|
+
"page": {
|
|
5
|
+
"light": "#ededeb",
|
|
6
|
+
"dark": "#141410",
|
|
7
|
+
"description": "Main page background — stone-100 (light) / stone-900 (dark)"
|
|
8
|
+
},
|
|
9
|
+
"page-scrolled": {
|
|
10
|
+
"light": "#ededeb",
|
|
11
|
+
"dark": "#141410",
|
|
12
|
+
"description": "Page background when navbar shrinks — matches page"
|
|
13
|
+
},
|
|
14
|
+
"elevated": {
|
|
15
|
+
"light": "#f7f7f6",
|
|
16
|
+
"dark": "#1c1917",
|
|
17
|
+
"description": "Cards, modals, dropdowns — one step above page (stone-50 / ink-800)"
|
|
18
|
+
},
|
|
19
|
+
"sunken": {
|
|
20
|
+
"light": "#faf2e3",
|
|
21
|
+
"dark": "#0c0a09",
|
|
22
|
+
"description": "Input fields, code blocks — below page level (paper-200 light / ink-900 dark)"
|
|
23
|
+
},
|
|
24
|
+
"navbar": {
|
|
25
|
+
"light": "#ededeb",
|
|
26
|
+
"dark": "#141410",
|
|
27
|
+
"description": "Navbar background — matches page in both themes"
|
|
28
|
+
},
|
|
29
|
+
"navbar-scrolled": {
|
|
30
|
+
"light": "#ededeb",
|
|
31
|
+
"dark": "#141410",
|
|
32
|
+
"description": "Navbar when scrolled/shrunk — matches page-scrolled"
|
|
33
|
+
},
|
|
34
|
+
"code": {
|
|
35
|
+
"light": "#faf2e3",
|
|
36
|
+
"dark": "#1c1917",
|
|
37
|
+
"description": "Code block and inline code background"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"border": {
|
|
41
|
+
"subtle": {
|
|
42
|
+
"light": "rgba(12, 10, 9, 0.08)",
|
|
43
|
+
"dark": "rgba(253, 249, 242, 0.08)",
|
|
44
|
+
"description": "Subtle borders — element separation"
|
|
45
|
+
},
|
|
46
|
+
"moderate": {
|
|
47
|
+
"light": "rgba(12, 10, 9, 0.15)",
|
|
48
|
+
"dark": "rgba(253, 249, 242, 0.15)",
|
|
49
|
+
"description": "Moderate borders — defined boundaries"
|
|
50
|
+
},
|
|
51
|
+
"strong": {
|
|
52
|
+
"light": "rgba(12, 10, 9, 0.25)",
|
|
53
|
+
"dark": "rgba(253, 249, 242, 0.25)",
|
|
54
|
+
"description": "Strong borders — prominent separation"
|
|
55
|
+
},
|
|
56
|
+
"card": {
|
|
57
|
+
"light": "rgba(12, 10, 9, 0.15)",
|
|
58
|
+
"dark": "rgba(253, 249, 242, 0.15)",
|
|
59
|
+
"description": "Card border color with transparency for subtle definition"
|
|
60
|
+
},
|
|
61
|
+
"code": {
|
|
62
|
+
"light": "#d6d3d1",
|
|
63
|
+
"dark": "#292524",
|
|
64
|
+
"description": "Code block border"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"content": {
|
|
68
|
+
"primary": {
|
|
69
|
+
"light": "#14140f",
|
|
70
|
+
"dark": "#fdf9f2",
|
|
71
|
+
"description": "Primary text — stone-900 on stone-100 (light) / paper-100 on dark surface"
|
|
72
|
+
},
|
|
73
|
+
"secondary": {
|
|
74
|
+
"light": "#7c7c7c",
|
|
75
|
+
"dark": "#a8a29e",
|
|
76
|
+
"description": "Secondary text — stone-500 (light) / ink-300 (dark)"
|
|
77
|
+
},
|
|
78
|
+
"muted": {
|
|
79
|
+
"light": "#78716c",
|
|
80
|
+
"dark": "#78716c",
|
|
81
|
+
"description": "Muted text — captions, meta info"
|
|
82
|
+
},
|
|
83
|
+
"inverse": {
|
|
84
|
+
"light": "#fdf9f2",
|
|
85
|
+
"dark": "#0c0a09",
|
|
86
|
+
"description": "Inverse text — for contrasting backgrounds"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
"interactive": {
|
|
90
|
+
"primary": {
|
|
91
|
+
"light": "#292524",
|
|
92
|
+
"dark": "#d6d3d1",
|
|
93
|
+
"description": "Primary interactive — ink-700 on light (15:1 on stone-100, AAA) / ink-200 on dark (high contrast quiet voice). Neutral default; @dataimago/tokens uses forest-700/forest-300 for dataimago house identity. Owners customize by overriding."
|
|
94
|
+
},
|
|
95
|
+
"hover": {
|
|
96
|
+
"light": "#1c1917",
|
|
97
|
+
"dark": "#a8a29e",
|
|
98
|
+
"description": "Hover state — ink-800 on light (one step deeper) / ink-300 on dark"
|
|
99
|
+
},
|
|
100
|
+
"accent": {
|
|
101
|
+
"light": "#292524",
|
|
102
|
+
"dark": "#d6d3d1",
|
|
103
|
+
"description": "Accent — neutral default mirrors interactive.primary (ink-700 / ink-200). The neutral package intentionally ships without a brand-color accent role; consumers that want a sky-blue, copper, forest, or other distinctive accent override this token. @dataimago/tokens maps this role to mode-aware presentation-blue per iteration-2."
|
|
104
|
+
},
|
|
105
|
+
"focus": {
|
|
106
|
+
"light": "#292524",
|
|
107
|
+
"dark": "#d6d3d1",
|
|
108
|
+
"description": "Focus indicators — mirrors interactive.primary"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|