@kiva/kv-tokens 2.13.0 → 2.15.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/build/build.cjs +14 -0
  3. package/configs/kivaColors.cjs +16 -4
  4. package/configs/kivaHeadingUnderline.cjs +8 -6
  5. package/configs/kivaTypography.cjs +1 -1
  6. package/configs/tailwind.config.cjs +1 -0
  7. package/package.json +3 -3
  8. package/primitives.json +215 -29
package/CHANGELOG.md CHANGED
@@ -3,6 +3,39 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.15.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.14.0...@kiva/kv-tokens@2.15.0) (2024-11-18)
7
+
8
+
9
+ ### Features
10
+
11
+ * serve static assets from kvui directory MP-544 ([840f6de](https://github.com/kiva/kv-ui-elements/commit/840f6de89f213143218d28e82a7ef0be1de319b6))
12
+
13
+
14
+
15
+
16
+
17
+ # [2.14.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.13.0...@kiva/kv-tokens@2.14.0) (2024-11-15)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * color updates for default theme and KvButton ([e27b124](https://github.com/kiva/kv-ui-elements/commit/e27b1243e797322c95cf52f505787e6c9b5eceac))
23
+ * ecosystem theme color updates ([facf24f](https://github.com/kiva/kv-ui-elements/commit/facf24f15453e8255db967cd6f878a30b443650a))
24
+ * more wip for ecosystem themes ([3fd83ab](https://github.com/kiva/kv-ui-elements/commit/3fd83ab38e0e9463c375a94fc84012fa38948cdb))
25
+ * more wip work for new ecosystem themes ([90447d4](https://github.com/kiva/kv-ui-elements/commit/90447d471178b410637d8ba50d535180c8b03718))
26
+
27
+
28
+ ### Features
29
+
30
+ * add old default colors to kiva classic themes ([f75ea58](https://github.com/kiva/kv-ui-elements/commit/f75ea586c9d232abf987ba3ae8efd97b1be93324))
31
+ * use external file for heading underline svg MP-544 MP-545 ([fad8f16](https://github.com/kiva/kv-ui-elements/commit/fad8f16b5555916624c26a24828ff39dcbc5edbf))
32
+ * use green-3 and stone-3 for bg-secondary in dark themes ([d13d63e](https://github.com/kiva/kv-ui-elements/commit/d13d63e08346b936a1bb2bc61c4d3fc6c5a4e8d0))
33
+ * wip initial pass at ecosystem themes ([680dbbc](https://github.com/kiva/kv-ui-elements/commit/680dbbc7aab575f9db43d7b10bdcba9003fd589e))
34
+
35
+
36
+
37
+
38
+
6
39
  # [2.13.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@2.12.0...@kiva/kv-tokens@2.13.0) (2024-07-19)
7
40
 
8
41
 
package/build/build.cjs ADDED
@@ -0,0 +1,14 @@
1
+ const fs = require('node:fs');
2
+ const { generateExternalSVG } = require('../configs/kivaHeadingUnderline.cjs');
3
+
4
+ // Note: dir is relative to the root of the kv-tokens package
5
+ const dir = '../../dist/kvui';
6
+
7
+ // Create dist folder
8
+ if (!fs.existsSync(dir)) {
9
+ fs.mkdirSync(dir, { recursive: true });
10
+ }
11
+
12
+ // Generate Heading Underline SVG
13
+ const svg = generateExternalSVG();
14
+ fs.writeFileSync(`${dir}/heading-underline.svg`, svg);
package/configs/kivaColors.cjs CHANGED
@@ -1,9 +1,13 @@
1
1
  const { hexToRGB } = require('./util.cjs');
2
- const { generateInlineSVG } = require('./kivaHeadingUnderline.cjs');
3
2
  const designtokens = require('../primitives.json');
4
3
 
5
4
  const {
6
5
  DEFAULT: defaultThemeTokens,
6
+ 'green-light': greenLightThemeTokens,
7
+ 'green-dark': greenDarkThemeTokens,
8
+ 'marigold-light': marigoldLightThemeTokens,
9
+ 'stone-light': stoneLightThemeTokens,
10
+ 'stone-dark': stoneDarkThemeTokens,
7
11
  dark: darkThemeTokens,
8
12
  'dark-green': darkGreenThemeTokens,
9
13
  mint: mintThemeTokens,
@@ -29,9 +33,7 @@ const buildCSSVarsFromTokens = (theme) => {
29
33
  properties.forEach((property) => {
30
34
  const key = `--${twPrefix}-${property}`;
31
35
  if (category === 'heading-underline') {
32
- // TODO: use this when we have the themable heading-underline.svg file
33
- // customProperties[key] = `url('/heading-underline.svg${theme[category][property]}')`;
34
- customProperties[key] = generateInlineSVG();
36
+ customProperties[key] = `url('/kvui/heading-underline.svg${theme[category][property]}')`;
35
37
  } else {
36
38
  customProperties[key] = hexToRGB(theme[category][property]);
37
39
  }
@@ -41,6 +43,11 @@ const buildCSSVarsFromTokens = (theme) => {
41
43
  };
42
44
 
43
45
  const defaultTheme = buildCSSVarsFromTokens(defaultThemeTokens);
46
+ const greenLightTheme = buildCSSVarsFromTokens(greenLightThemeTokens);
47
+ const greenDarkTheme = buildCSSVarsFromTokens(greenDarkThemeTokens);
48
+ const marigoldLightTheme = buildCSSVarsFromTokens(marigoldLightThemeTokens);
49
+ const stoneLightTheme = buildCSSVarsFromTokens(stoneLightThemeTokens);
50
+ const stoneDarkTheme = buildCSSVarsFromTokens(stoneDarkThemeTokens);
44
51
  const darkTheme = buildCSSVarsFromTokens(darkThemeTokens);
45
52
  const mintTheme = buildCSSVarsFromTokens(mintThemeTokens);
46
53
  const darkGreenTheme = buildCSSVarsFromTokens(darkGreenThemeTokens);
@@ -93,6 +100,11 @@ const buildColorChoices = (themeProperty) => {
93
100
  module.exports = {
94
101
  buildColorChoices,
95
102
  defaultTheme,
103
+ greenLightTheme,
104
+ greenDarkTheme,
105
+ marigoldLightTheme,
106
+ stoneLightTheme,
107
+ stoneDarkTheme,
96
108
  darkTheme,
97
109
  darkGreenTheme,
98
110
  mintTheme,
package/configs/kivaHeadingUnderline.cjs CHANGED
@@ -10,7 +10,7 @@ const svgOpenTag = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 921 16"
10
10
  * achieved by creating one path for the brush stroke, and then using multiple <use> elements to
11
11
  * reference the path and fill it with the desired color (a sprite sheet technique from
12
12
  * https://css-tricks.com/svg-fragment-identifiers-work/). The SVG is then used as a background
13
- * image, and can be referenced by the color hex code, e.g. `url('/heading-underline.svg#2AA967')`.
13
+ * image, and can be referenced by the color hex code, e.g. `url('/kvui/heading-underline.svg#2AA967')`.
14
14
  * This allows us to use the same SVG for all themes, and change the color with CSS custom
15
15
  * properties, rather than having to generate a new SVG for each color.
16
16
  */
@@ -39,13 +39,15 @@ function generateExternalSVG() {
39
39
  }
40
40
 
41
41
  /*
42
- * Generates an inline-style SVG string for brush-stroke underlines, in the brand color only. This can be used as a background image in css.
42
+ * Generates an inline-style SVG string for brush-stroke underlines, in one color only, to be used as a background image in css.
43
+ *
44
+ * THIS SHOULD ONLY BE USED FOR DEMO PURPOSES.
45
+ *
46
+ * This will greatly increase the size of your css file if used in production with multiple colors.
43
47
  */
44
- function generateInlineSVG() {
45
- const { brand } = colors;
46
- const brandColor = brand.DEFAULT;
48
+ function generateInlineSVG(color) {
47
49
  const svg = `${svgOpenTag}
48
- <g fill="${brandColor}">
50
+ <g fill="${color}">
49
51
  ${underlinePath}
50
52
  </g>
51
53
  </svg>`;
package/configs/kivaTypography.cjs CHANGED
@@ -180,7 +180,7 @@ const textStyles = (() => {
180
180
 
181
181
  const textLink = {
182
182
  color: 'rgb(var(--text-action))',
183
- textDecoration: 'none',
183
+ textDecoration: 'underline',
184
184
  '&:hover, &:focus': {
185
185
  color: 'rgb(var(--text-action-highlight))',
186
186
  textDecoration: 'underline',
package/configs/tailwind.config.cjs CHANGED
@@ -105,6 +105,7 @@ module.exports = {
105
105
  },
106
106
  opacity: {
107
107
  0: '0',
108
+ 10: '0.1',
108
109
  low: `${opacity.low}`,
109
110
  full: '1',
110
111
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-tokens",
3
- "version": "2.13.0",
3
+ "version": "2.15.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -9,11 +9,11 @@
9
9
  "scripts": {
10
10
  "test": "echo No tests specified for @kiva/kv-tokens.",
11
11
  "lint": "eslint --ext .js ./",
12
- "build": "echo No build needed for @kiva/kv-tokens."
12
+ "build": "node ./build/build.cjs"
13
13
  },
14
14
  "dependencies": {
15
15
  "@tailwindcss/typography": "^0.5.1",
16
16
  "tailwindcss": "^3.4.3"
17
17
  },
18
- "gitHead": "d23ee2a3e2e76af14e08d58028252fe9fe26d864"
18
+ "gitHead": "fab4917b631c7c5491a23d7cd88ec2f65a5fa928"
19
19
  }
package/primitives.json CHANGED
@@ -40,7 +40,7 @@
40
40
  "1": "#F8F2E6",
41
41
  "2": "#F8CD69",
42
42
  "DEFAULT": "#F4B539",
43
- "3": "#AF741C",
43
+ "3": "#996210",
44
44
  "4": "#593207"
45
45
  },
46
46
  "desert-rose": {
@@ -54,7 +54,7 @@
54
54
  "1": "#F3F1EF",
55
55
  "2": "#AA9E8D",
56
56
  "DEFAULT": "#DFD0BC",
57
- "3": "#726554",
57
+ "3": "#635544",
58
58
  "4": "#2E271E"
59
59
  },
60
60
  "social": {
@@ -65,41 +65,168 @@
65
65
  "theme": {
66
66
  "DEFAULT": {
67
67
  "text": {
68
- "primary": "#212121",
69
- "primary-inverse": "#F5F5F5",
68
+ "primary": "#223829",
69
+ "primary-inverse": "#EDF4F1",
70
70
  "secondary": "#757575",
71
71
  "tertiary": "#9E9E9E",
72
- "action": "#2B7C5F",
73
- "action-highlight": "#277056",
74
- "danger": "#E42A2A",
75
- "danger-highlight": "#CE2626"
72
+ "action": "#276A43",
73
+ "action-highlight": "#223829",
74
+ "caution": "#593207",
75
+ "caution-highlight": "#996210",
76
+ "danger": "#5C2A22",
77
+ "danger-highlight": "#A24536"
76
78
  },
77
79
  "background": {
78
80
  "primary": "#FFFFFF",
79
- "primary-inverse": "#000000",
80
- "secondary": "#F5F5F5",
81
- "tertiary": "#E0E0E0",
82
- "action": "#2B7C5F",
83
- "action-highlight": "#277056",
84
- "danger": "#E42A2A",
85
- "danger-highlight": "#CE2626",
86
- "caution": "#E6CB55",
87
- "caution-highlight": "#D9BC3B"
81
+ "primary-inverse": "#223829",
82
+ "secondary": "#EDF4F1",
83
+ "tertiary": "#C4C4C4",
84
+ "action": "#276A43",
85
+ "action-highlight": "#223829",
86
+ "caution": "#F8CD69",
87
+ "caution-highlight": "#F8F2E6",
88
+ "danger": "#E0988D",
89
+ "danger-highlight": "#F9F0EF"
88
90
  },
89
91
  "border": {
90
- "primary": "#212121",
92
+ "primary": "#505050",
91
93
  "primary-inverse": "#FFFFFF",
92
94
  "secondary": "#757575",
93
95
  "tertiary": "#C4C4C4",
94
- "action": "#2B7C5F",
95
- "action-highlight": "#277056",
96
- "danger": "#E42A2A",
97
- "danger-highlight": "#CE2626"
96
+ "action": "#276A43",
97
+ "action-highlight": "#223829",
98
+ "caution": "#F8CD69",
99
+ "caution-highlight": "#F8F2E6",
100
+ "danger": "#E0988D",
101
+ "danger-highlight": "#F9F0EF"
98
102
  },
99
103
  "heading-underline": {
100
104
  "primary": "#2AA967"
101
105
  }
102
106
  },
107
+ "green-light": {
108
+ "background": {
109
+ "primary": "#EDF4F1",
110
+ "secondary": "#FFFFFF"
111
+ }
112
+ },
113
+ "green-dark": {
114
+ "text": {
115
+ "primary": "#EDF4F1",
116
+ "primary-inverse": "#223829",
117
+ "secondary": "#C4C4C4",
118
+ "tertiary": "#E0E0E0",
119
+ "action": "#78C79F",
120
+ "action-highlight": "#EDF4F1"
121
+ },
122
+ "background": {
123
+ "primary": "#223829",
124
+ "primary-inverse": "#FFFFFF",
125
+ "secondary": "#276A43",
126
+ "tertiary": "#C4C4C4",
127
+ "action": "#78C79F",
128
+ "action-highlight": "#EDF4F1",
129
+ "caution-highlight": "#F8F2E6",
130
+ "danger-highlight": "#F9F0EF"
131
+ },
132
+ "border": {
133
+ "primary": "#EDF4F1",
134
+ "primary-inverse": "#223829",
135
+ "secondary": "#276A43",
136
+ "action": "#78C79F",
137
+ "action-highlight": "#EDF4F1",
138
+ "caution-highlight": "#F8F2E6",
139
+ "danger-highlight": "#F9F0EF"
140
+ }
141
+ },
142
+ "marigold-light": {
143
+ "text": {
144
+ "primary": "#593207",
145
+ "primary-inverse": "#F8F2E6",
146
+ "action": "#996210",
147
+ "action-highlight": "#593207"
148
+ },
149
+ "background": {
150
+ "primary": "#F8F2E6",
151
+ "primary-inverse": "#593207",
152
+ "secondary": "#FFFFFF",
153
+ "tertiary": "#C4C4C4",
154
+ "action": "#996210",
155
+ "action-highlight": "#593207",
156
+ "caution-highlight": "#F8F2E6",
157
+ "danger-highlight": "#F9F0EF"
158
+ },
159
+ "border": {
160
+ "primary": "#996210",
161
+ "primary-inverse": "#F8F2E6",
162
+ "secondary": "#F8CD69",
163
+ "tertiary": "#FFFFFF",
164
+ "action": "#996210",
165
+ "action-highlight": "#593207",
166
+ "caution-highlight": "#F8F2E6",
167
+ "danger-highlight": "#F9F0EF"
168
+ },
169
+ "heading-underline": {
170
+ "primary": "#F8CD69"
171
+ }
172
+ },
173
+ "stone-light": {
174
+ "text": {
175
+ "primary": "#2E271E",
176
+ "primary-inverse": "#F3F1EF",
177
+ "action": "#635544",
178
+ "action-highlight": "#2E271E"
179
+ },
180
+ "background": {
181
+ "primary": "#F3F1EF",
182
+ "primary-inverse": "#2E271E",
183
+ "secondary": "#FFFFFF",
184
+ "action": "#635544",
185
+ "action-highlight": "#2E271E"
186
+ },
187
+ "border": {
188
+ "primary": "#635544",
189
+ "primary-inverse": "#F3F1EF",
190
+ "secondary": "#AA9E8D",
191
+ "tertiary": "#FFFFFF",
192
+ "action": "#635544",
193
+ "action-highlight": "#2E271E"
194
+ },
195
+ "heading-underline": {
196
+ "primary": "#AA9E8D"
197
+ }
198
+ },
199
+ "stone-dark": {
200
+ "text": {
201
+ "primary": "#F3F1EF",
202
+ "primary-inverse": "#2E271E",
203
+ "secondary": "#C4C4C4",
204
+ "tertiary": "#E0E0E0",
205
+ "action": "#DFD0BC",
206
+ "action-highlight": "#F3F1EF"
207
+ },
208
+ "background": {
209
+ "primary": "#2E271E",
210
+ "primary-inverse": "#F3F1EF",
211
+ "secondary": "#635544",
212
+ "action": "#DFD0BC",
213
+ "action-highlight": "#F3F1EF",
214
+ "caution-highlight": "#F8F2E6",
215
+ "danger-highlight": "#F9F0EF"
216
+ },
217
+ "border": {
218
+ "primary": "#F3F1EF",
219
+ "primary-inverse": "#2E271E",
220
+ "secondary": "#635544",
221
+ "action": "#DFD0BC",
222
+ "action-highlight": "#F3F1EF",
223
+ "caution-highlight": "#F8F2E6",
224
+ "danger-highlight": "#F9F0EF"
225
+ },
226
+ "heading-underline": {
227
+ "primary": "#AA9E8D"
228
+ }
229
+ },
103
230
  "dark": {
104
231
  "text": {
105
232
  "primary": "#F5F5F5",
@@ -136,35 +263,94 @@
136
263
  },
137
264
  "mint": {
138
265
  "text": {
266
+ "primary": "#212121",
267
+ "primary-inverse": "#F5F5F5",
139
268
  "secondary": "#228752",
140
- "tertiary": "#28A062"
269
+ "tertiary": "#28A062",
270
+ "action": "#2B7C5F",
271
+ "action-highlight": "#277056",
272
+ "danger": "#E42A2A",
273
+ "danger-highlight": "#CE2626"
141
274
  },
142
275
  "background": {
143
- "primary": "#95D4B3"
276
+ "primary": "#95D4B3",
277
+ "primary-inverse": "#000000",
278
+ "secondary": "#F5F5F5",
279
+ "tertiary": "#E0E0E0",
280
+ "action": "#2B7C5F",
281
+ "action-highlight": "#277056",
282
+ "danger": "#E42A2A",
283
+ "danger-highlight": "#CE2626",
284
+ "caution": "#E6CB55",
285
+ "caution-highlight": "#D9BC3B"
144
286
  },
145
287
  "border": {
146
- "tertiary": "#4AB67E"
288
+ "primary": "#212121",
289
+ "tertiary": "#4AB67E",
290
+ "action": "#2B7C5F",
291
+ "action-highlight": "#277056",
292
+ "danger": "#E42A2A",
293
+ "danger-highlight": "#CE2626"
147
294
  }
148
295
  },
149
296
  "dark-green": {
150
297
  "text": {
151
298
  "primary": "#F5F5F5",
152
299
  "primary-inverse": "#212121",
153
- "secondary": "#9E9E9E"
300
+ "secondary": "#9E9E9E",
301
+ "tertiary": "#9E9E9E",
302
+ "action": "#2B7C5F",
303
+ "action-highlight": "#277056",
304
+ "danger": "#E42A2A",
305
+ "danger-highlight": "#CE2626"
154
306
  },
155
307
  "background": {
156
308
  "primary": "#2AA967",
157
309
  "primary-inverse": "#F5F5F5",
158
- "secondary": "#228752"
310
+ "secondary": "#228752",
311
+ "tertiary": "#E0E0E0",
312
+ "action": "#2B7C5F",
313
+ "action-highlight": "#277056",
314
+ "danger": "#E42A2A",
315
+ "danger-highlight": "#CE2626",
316
+ "caution": "#E6CB55",
317
+ "caution-highlight": "#D9BC3B"
318
+ },
319
+ "border": {
320
+ "primary": "#212121",
321
+ "action": "#2B7C5F",
322
+ "action-highlight": "#277056",
323
+ "danger": "#E42A2A",
324
+ "danger-highlight": "#CE2626"
159
325
  }
160
326
  },
161
327
  "dark-mint": {
162
328
  "text": {
163
329
  "primary": "#FFFFFF",
164
- "action": "#95D4B3"
330
+ "primary-inverse": "#F5F5F5",
331
+ "action": "#95D4B3",
332
+ "action-highlight": "#277056",
333
+ "danger": "#E42A2A",
334
+ "danger-highlight": "#CE2626"
165
335
  },
166
336
  "background": {
167
- "primary": "#454545"
337
+ "primary": "#454545",
338
+ "primary-inverse": "#000000",
339
+ "secondary": "#F5F5F5",
340
+ "tertiary": "#E0E0E0",
341
+ "action": "#2B7C5F",
342
+ "action-highlight": "#277056",
343
+ "danger": "#E42A2A",
344
+ "danger-highlight": "#CE2626",
345
+ "caution": "#E6CB55",
346
+ "caution-highlight": "#D9BC3B"
347
+ },
348
+ "border": {
349
+ "primary": "#212121",
350
+ "action": "#2B7C5F",
351
+ "action-highlight": "#277056",
352
+ "danger": "#E42A2A",
353
+ "danger-highlight": "#CE2626"
168
354
  }
169
355
  },
170
356
  "dark-stone": {