@kiva/kv-tokens 2.13.0 → 2.14.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 +22 -0
  2. package/build/build.cjs +14 -0
  3. package/configs/kivaColors.cjs +16 -4
  4. package/configs/kivaHeadingUnderline.cjs +7 -5
  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,28 @@
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.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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * color updates for default theme and KvButton ([e27b124](https://github.com/kiva/kv-ui-elements/commit/e27b1243e797322c95cf52f505787e6c9b5eceac))
12
+ * ecosystem theme color updates ([facf24f](https://github.com/kiva/kv-ui-elements/commit/facf24f15453e8255db967cd6f878a30b443650a))
13
+ * more wip for ecosystem themes ([3fd83ab](https://github.com/kiva/kv-ui-elements/commit/3fd83ab38e0e9463c375a94fc84012fa38948cdb))
14
+ * more wip work for new ecosystem themes ([90447d4](https://github.com/kiva/kv-ui-elements/commit/90447d471178b410637d8ba50d535180c8b03718))
15
+
16
+
17
+ ### Features
18
+
19
+ * add old default colors to kiva classic themes ([f75ea58](https://github.com/kiva/kv-ui-elements/commit/f75ea586c9d232abf987ba3ae8efd97b1be93324))
20
+ * use external file for heading underline svg MP-544 MP-545 ([fad8f16](https://github.com/kiva/kv-ui-elements/commit/fad8f16b5555916624c26a24828ff39dcbc5edbf))
21
+ * use green-3 and stone-3 for bg-secondary in dark themes ([d13d63e](https://github.com/kiva/kv-ui-elements/commit/d13d63e08346b936a1bb2bc61c4d3fc6c5a4e8d0))
22
+ * wip initial pass at ecosystem themes ([680dbbc](https://github.com/kiva/kv-ui-elements/commit/680dbbc7aab575f9db43d7b10bdcba9003fd589e))
23
+
24
+
25
+
26
+
27
+
6
28
  # [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
29
 
8
30
 
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/assets';
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('/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
@@ -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.14.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": "081b5ca9ae74b85b3db13f40043252381f0ab822"
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": {