@kwtv/tokens 0.1.0 → 0.1.2

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.
Files changed (6) hide show
  1. package/README.md +1 -2
  2. package/package.json +7 -4
  3. package/tokens/tokens.css +12 -0
  4. package/tokens/tokens.json +16 -0
  5. package/tokens/tokens.ts +4 -0
  6. package/tokens/utilities.css +6 -0
package/README.md CHANGED
@@ -62,5 +62,4 @@ npm run tokens:build
62
62
  npm run tokens:check
63
63
  ```
64
64
 
65
- The checks validate sanctioned colour pairings and generated CSS. Browse the
66
- [explorer](https://kwtv-explorer.vercel.app) for components and colour examples.
65
+ The checks validate sanctioned colour pairings and generated CSS.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwtv/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "KWTV design tokens. Colour, type, space, shape and motion. Light and dark.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -9,9 +9,12 @@
9
9
  "url": "git+https://github.com/KWTV-willebroek/design-system.git",
10
10
  "directory": "packages/tokens"
11
11
  },
12
- "homepage": "https://kwtv-explorer.vercel.app/colour/",
13
- "publishConfig": { "access": "public" },
14
- "files": ["tokens"],
12
+ "publishConfig": {
13
+ "access": "public"
14
+ },
15
+ "files": [
16
+ "tokens"
17
+ ],
15
18
  "exports": {
16
19
  "./tokens.css": "./tokens/tokens.css",
17
20
  "./utilities.css": "./tokens/utilities.css",
package/tokens/tokens.css CHANGED
@@ -49,6 +49,8 @@
49
49
  --surface-accent-light: var(--sage-light);
50
50
  --surface-accent-fg-light: var(--sage-xdark);
51
51
  --surface-accent-muted-light: var(--sage-dark);
52
+ --surface-accent-subtle-light: var(--sage-xlight);
53
+ --surface-accent-subtle-fg-light: var(--charcoal-xdark);
52
54
  --border-light: var(--ivory-dark);
53
55
  --border-strong-light: var(--sage-text);
54
56
  --focus-light: var(--charcoal-light);
@@ -77,6 +79,8 @@
77
79
  --surface-accent-dark: var(--sage-text);
78
80
  --surface-accent-fg-dark: var(--ivory-light);
79
81
  --surface-accent-muted-dark: var(--ivory-base);
82
+ --surface-accent-subtle-dark: var(--sage-light);
83
+ --surface-accent-subtle-fg-dark: var(--sage-xdark);
80
84
  --border-dark: var(--sage-dark);
81
85
  --border-strong-dark: var(--sage-base);
82
86
  --focus-dark: var(--ivory-light);
@@ -106,6 +110,8 @@
106
110
  --surface-accent: var(--surface-accent-light);
107
111
  --surface-accent-fg: var(--surface-accent-fg-light);
108
112
  --surface-accent-muted: var(--surface-accent-muted-light);
113
+ --surface-accent-subtle: var(--surface-accent-subtle-light);
114
+ --surface-accent-subtle-fg: var(--surface-accent-subtle-fg-light);
109
115
  --border: var(--border-light);
110
116
  --border-strong: var(--border-strong-light);
111
117
  --focus: var(--focus-light);
@@ -154,6 +160,8 @@
154
160
  --surface-accent: var(--surface-accent-dark);
155
161
  --surface-accent-fg: var(--surface-accent-fg-dark);
156
162
  --surface-accent-muted: var(--surface-accent-muted-dark);
163
+ --surface-accent-subtle: var(--surface-accent-subtle-dark);
164
+ --surface-accent-subtle-fg: var(--surface-accent-subtle-fg-dark);
157
165
  --border: var(--border-dark);
158
166
  --border-strong: var(--border-strong-dark);
159
167
  --focus: var(--focus-dark);
@@ -191,6 +199,8 @@
191
199
  --surface-accent: var(--surface-accent-dark);
192
200
  --surface-accent-fg: var(--surface-accent-fg-dark);
193
201
  --surface-accent-muted: var(--surface-accent-muted-dark);
202
+ --surface-accent-subtle: var(--surface-accent-subtle-dark);
203
+ --surface-accent-subtle-fg: var(--surface-accent-subtle-fg-dark);
194
204
  --border: var(--border-dark);
195
205
  --border-strong: var(--border-strong-dark);
196
206
  --focus: var(--focus-dark);
@@ -239,6 +249,8 @@
239
249
  --surface-accent: light-dark(var(--surface-accent-light), var(--surface-accent-dark));
240
250
  --surface-accent-fg: light-dark(var(--surface-accent-fg-light), var(--surface-accent-fg-dark));
241
251
  --surface-accent-muted: light-dark(var(--surface-accent-muted-light), var(--surface-accent-muted-dark));
252
+ --surface-accent-subtle: light-dark(var(--surface-accent-subtle-light), var(--surface-accent-subtle-dark));
253
+ --surface-accent-subtle-fg: light-dark(var(--surface-accent-subtle-fg-light), var(--surface-accent-subtle-fg-dark));
242
254
  --border: light-dark(var(--border-light), var(--border-dark));
243
255
  --border-strong: light-dark(var(--border-strong-light), var(--border-strong-dark));
244
256
  --focus: light-dark(var(--focus-light), var(--focus-dark));
package/tokens/tokens.json CHANGED
@@ -223,6 +223,14 @@
223
223
  "$value": "#364A42",
224
224
  "$type": "color"
225
225
  },
226
+ "surface-accent-subtle": {
227
+ "$value": "#DCF1E8",
228
+ "$type": "color"
229
+ },
230
+ "surface-accent-subtle-fg": {
231
+ "$value": "#171B1D",
232
+ "$type": "color"
233
+ },
226
234
  "border": {
227
235
  "$value": "#C9C2B1",
228
236
  "$type": "color"
@@ -333,6 +341,14 @@
333
341
  "$value": "#E9E2D2",
334
342
  "$type": "color"
335
343
  },
344
+ "surface-accent-subtle": {
345
+ "$value": "#B1C9BF",
346
+ "$type": "color"
347
+ },
348
+ "surface-accent-subtle-fg": {
349
+ "$value": "#162620",
350
+ "$type": "color"
351
+ },
336
352
  "border": {
337
353
  "$value": "#364A42",
338
354
  "$type": "color"
package/tokens/tokens.ts CHANGED
@@ -48,6 +48,8 @@ export const semanticLight = {
48
48
  "surface-accent": "#B1C9BF",
49
49
  "surface-accent-fg": "#162620",
50
50
  "surface-accent-muted": "#364A42",
51
+ "surface-accent-subtle": "#DCF1E8",
52
+ "surface-accent-subtle-fg": "#171B1D",
51
53
  "border": "#C9C2B1",
52
54
  "border-strong": "#496158",
53
55
  "focus": "#5A6164",
@@ -78,6 +80,8 @@ export const semanticDark = {
78
80
  "surface-accent": "#496158",
79
81
  "surface-accent-fg": "#F1EBDC",
80
82
  "surface-accent-muted": "#E9E2D2",
83
+ "surface-accent-subtle": "#B1C9BF",
84
+ "surface-accent-subtle-fg": "#162620",
81
85
  "border": "#364A42",
82
86
  "border-strong": "#7D938A",
83
87
  "focus": "#F1EBDC",
package/tokens/utilities.css CHANGED
@@ -108,6 +108,8 @@
108
108
  .bg-surface-accent { background-color: var(--surface-accent); }
109
109
  .bg-surface-accent-fg { background-color: var(--surface-accent-fg); }
110
110
  .bg-surface-accent-muted { background-color: var(--surface-accent-muted); }
111
+ .bg-surface-accent-subtle { background-color: var(--surface-accent-subtle); }
112
+ .bg-surface-accent-subtle-fg { background-color: var(--surface-accent-subtle-fg); }
111
113
  .bg-border { background-color: var(--border); }
112
114
  .bg-border-strong { background-color: var(--border-strong); }
113
115
  .bg-focus { background-color: var(--focus); }
@@ -135,6 +137,8 @@
135
137
  .text-surface-accent { color: var(--surface-accent); }
136
138
  .text-surface-accent-fg { color: var(--surface-accent-fg); }
137
139
  .text-surface-accent-muted { color: var(--surface-accent-muted); }
140
+ .text-surface-accent-subtle { color: var(--surface-accent-subtle); }
141
+ .text-surface-accent-subtle-fg { color: var(--surface-accent-subtle-fg); }
138
142
  .text-border { color: var(--border); }
139
143
  .text-border-strong { color: var(--border-strong); }
140
144
  .text-focus { color: var(--focus); }
@@ -162,6 +166,8 @@
162
166
  .border-surface-accent { border-color: var(--surface-accent); }
163
167
  .border-surface-accent-fg { border-color: var(--surface-accent-fg); }
164
168
  .border-surface-accent-muted { border-color: var(--surface-accent-muted); }
169
+ .border-surface-accent-subtle { border-color: var(--surface-accent-subtle); }
170
+ .border-surface-accent-subtle-fg { border-color: var(--surface-accent-subtle-fg); }
165
171
  .border-border { border-color: var(--border); }
166
172
  .border-border-strong { border-color: var(--border-strong); }
167
173
  .border-focus { border-color: var(--focus); }