@dictu/design-tokens 1.0.3 → 1.1.1
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/CHANGELOG.md +14 -0
- package/dist/card.css +6 -0
- package/dist/grid.css +1 -0
- package/dist/index.css +86 -86
- package/dist/navigation-bar.css +1 -1
- package/package.json +1 -1
- package/src/components/card.tokens.json +36 -0
- package/src/components/grid.tokens.json +4 -0
- package/src/components/navigation-bar.tokens.json +1 -1
- package/style-dictionary-build.mjs +22 -38
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @dictu/design-tokens
|
|
2
2
|
|
|
3
|
+
## 1.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 880beb9: unified SD config for core-token-references
|
|
8
|
+
|
|
9
|
+
## 1.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- b8671fe: replace mixin @use to index for better usage.
|
|
14
|
+
- 30ef651: Added new token for column width for grid component. Changed html
|
|
15
|
+
markup of the card component. Added grid component.
|
|
16
|
+
|
|
3
17
|
## 1.0.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/card.css
CHANGED
|
@@ -45,4 +45,10 @@
|
|
|
45
45
|
--govnl-card-accent-active-color: var(--govnl-document-inverse-color);
|
|
46
46
|
--govnl-card-accent-focus-background-color: var(--govnl-focus-background-color);
|
|
47
47
|
--govnl-card-accent-focus-color: var(--govnl-focus-color);
|
|
48
|
+
--govnl-card-accent-heading-color: var(--govnl-document-inverse-color);
|
|
49
|
+
--govnl-card-accent-heading-hover-color: var(--govnl-document-inverse-color);
|
|
50
|
+
--govnl-card-accent-heading-active-color: var(--govnl-document-inverse-color);
|
|
51
|
+
--govnl-card-accent-paragraph-color: var(--govnl-document-inverse-color);
|
|
52
|
+
--govnl-card-accent-paragraph-hover-color: var(--govnl-document-inverse-color);
|
|
53
|
+
--govnl-card-accent-paragraph-active-color: var(--govnl-document-inverse-color);
|
|
48
54
|
}
|
package/dist/grid.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
--govnl-grid-template-columns-col-3: repeat(3, 1fr);
|
|
9
9
|
--govnl-grid-template-columns-col-4: repeat(4, 1fr);
|
|
10
10
|
--govnl-grid-template-rows-auto: auto;
|
|
11
|
+
--govnl-grid-template-columns-width: var(--govnl-dimension-size-2000);
|
|
11
12
|
--govnl-grid-gap-row-min: var(--govnl-gap-content-min);
|
|
12
13
|
--govnl-grid-gap-row-max: var(--govnl-gap-content-max);
|
|
13
14
|
--govnl-grid-gap-column-min: var(--govnl-gap-content-min);
|
package/dist/index.css
CHANGED
|
@@ -3,8 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
.dictu-theme {
|
|
6
|
-
--govnl-form-control-read-only-border-color: hsla(0, 0%, 0%, 0);
|
|
7
|
-
--govnl-focus-outline-style: dashed;
|
|
8
6
|
--govnl-color-white: hsl(0, 0%, 100%);
|
|
9
7
|
--govnl-color-black: hsl(0, 0%, 0%);
|
|
10
8
|
--govnl-color-grijs-50: hsl(210, 40%, 98%);
|
|
@@ -180,88 +178,90 @@
|
|
|
180
178
|
--govnl-border-border-width-sm: 1px;
|
|
181
179
|
--govnl-border-border-width-md: 2px;
|
|
182
180
|
--govnl-border-border-width-lg: 4px;
|
|
183
|
-
--govnl-
|
|
184
|
-
--govnl-
|
|
185
|
-
--govnl-
|
|
186
|
-
--govnl-
|
|
187
|
-
--govnl-
|
|
188
|
-
--govnl-brand-primary-
|
|
189
|
-
--govnl-brand-primary-
|
|
190
|
-
--govnl-brand-primary-
|
|
191
|
-
--govnl-brand-primary-
|
|
192
|
-
--govnl-brand-
|
|
193
|
-
--govnl-brand-
|
|
194
|
-
--govnl-
|
|
195
|
-
--govnl-
|
|
196
|
-
--govnl-
|
|
197
|
-
--govnl-
|
|
198
|
-
--govnl-document-
|
|
199
|
-
--govnl-document-
|
|
200
|
-
--govnl-document-
|
|
201
|
-
--govnl-document-
|
|
202
|
-
--govnl-document-
|
|
203
|
-
--govnl-document-
|
|
204
|
-
--govnl-line-
|
|
205
|
-
--govnl-
|
|
206
|
-
--govnl-
|
|
207
|
-
--govnl-
|
|
208
|
-
--govnl-
|
|
209
|
-
--govnl-
|
|
210
|
-
--govnl-
|
|
211
|
-
--govnl-feedback-warning-background-color:
|
|
212
|
-
--govnl-feedback-warning-border-color:
|
|
213
|
-
--govnl-feedback-warning-color:
|
|
214
|
-
--govnl-feedback-informative-background-color:
|
|
215
|
-
--govnl-feedback-informative-border-color:
|
|
216
|
-
--govnl-feedback-informative-color:
|
|
217
|
-
--govnl-feedback-negative-background-color:
|
|
218
|
-
--govnl-feedback-negative-border-color:
|
|
219
|
-
--govnl-feedback-negative-color:
|
|
220
|
-
--govnl-feedback-positive-background-color:
|
|
221
|
-
--govnl-feedback-positive-border-color:
|
|
222
|
-
--govnl-feedback-positive-color:
|
|
223
|
-
--govnl-form-control-background-color:
|
|
224
|
-
--govnl-form-control-border-color:
|
|
225
|
-
--govnl-form-control-color:
|
|
226
|
-
--govnl-form-control-font-family:
|
|
227
|
-
--govnl-form-control-font-size:
|
|
228
|
-
--govnl-form-control-font-weight:
|
|
229
|
-
--govnl-form-control-line-height:
|
|
230
|
-
--govnl-form-control-disabled-background-color:
|
|
231
|
-
--govnl-form-control-disabled-border-color:
|
|
232
|
-
--govnl-form-control-disabled-color:
|
|
233
|
-
--govnl-form-control-hover-background-color:
|
|
234
|
-
--govnl-form-control-hover-border-color:
|
|
235
|
-
--govnl-form-control-hover-color:
|
|
236
|
-
--govnl-form-control-focus-background-color:
|
|
237
|
-
--govnl-form-control-focus-border-color:
|
|
238
|
-
--govnl-form-control-focus-color:
|
|
239
|
-
--govnl-form-control-invalid-background-color:
|
|
240
|
-
--govnl-form-control-
|
|
241
|
-
--govnl-form-control-
|
|
242
|
-
--govnl-form-control-
|
|
243
|
-
--govnl-
|
|
244
|
-
--govnl-
|
|
245
|
-
--govnl-
|
|
246
|
-
--govnl-
|
|
247
|
-
--govnl-
|
|
248
|
-
--govnl-
|
|
249
|
-
--govnl-
|
|
250
|
-
--govnl-
|
|
251
|
-
--govnl-
|
|
252
|
-
--govnl-
|
|
253
|
-
--govnl-
|
|
254
|
-
--govnl-
|
|
255
|
-
--govnl-
|
|
256
|
-
--govnl-
|
|
257
|
-
--govnl-
|
|
258
|
-
--govnl-space-
|
|
259
|
-
--govnl-space-
|
|
260
|
-
--govnl-space-
|
|
261
|
-
--govnl-space-
|
|
262
|
-
--govnl-
|
|
263
|
-
--govnl-
|
|
264
|
-
--govnl-
|
|
265
|
-
--govnl-
|
|
266
|
-
--govnl-
|
|
181
|
+
--govnl-heading-color: hsl(211, 69%, 27%);
|
|
182
|
+
--govnl-heading-font-family: RijksSans, Arial, Verdana, sans-serif;
|
|
183
|
+
--govnl-heading-font-weight: 700;
|
|
184
|
+
--govnl-heading-line-height: 1.25;
|
|
185
|
+
--govnl-root-background-color: hsl(210, 40%, 98%);
|
|
186
|
+
--govnl-brand-primary-50: hsl(210, 25%, 89%);
|
|
187
|
+
--govnl-brand-primary-100: hsl(211, 26%, 78%);
|
|
188
|
+
--govnl-brand-primary-200: hsl(212, 25%, 67%);
|
|
189
|
+
--govnl-brand-primary-300: hsl(211, 25%, 56%);
|
|
190
|
+
--govnl-brand-primary-400: hsl(211, 31%, 45%);
|
|
191
|
+
--govnl-brand-primary-500: hsl(211, 69%, 27%);
|
|
192
|
+
--govnl-brand-primary-active: hsl(211, 69%, 27%);
|
|
193
|
+
--govnl-brand-primary-hover: hsl(211, 69%, 27%);
|
|
194
|
+
--govnl-brand-accent-1-color: hsl(200, 65%, 73%);
|
|
195
|
+
--govnl-brand-accent-2-color: hsl(30, 100%, 44%);
|
|
196
|
+
--govnl-document-background-color: hsl(0, 0%, 100%);
|
|
197
|
+
--govnl-document-color: hsl(222, 47%, 11%);
|
|
198
|
+
--govnl-document-font-family: RijksSans, Arial, Verdana, sans-serif;
|
|
199
|
+
--govnl-document-font-size: 1.125rem;
|
|
200
|
+
--govnl-document-font-weight: 400;
|
|
201
|
+
--govnl-document-strong-font-weight: 550;
|
|
202
|
+
--govnl-document-line-height: 1.5;
|
|
203
|
+
--govnl-document-subtle-color: hsl(215, 19%, 35%);
|
|
204
|
+
--govnl-document-inverse-background-color: hsl(222, 47%, 11%);
|
|
205
|
+
--govnl-document-inverse-color: hsl(0, 0%, 100%);
|
|
206
|
+
--govnl-line-border-color: hsl(215, 16%, 47%);
|
|
207
|
+
--govnl-line-subtle-border-color: hsl(213, 27%, 84%);
|
|
208
|
+
--govnl-line-strong-border-color: hsl(215, 25%, 27%);
|
|
209
|
+
--govnl-feedback-warning-background-color: hsl(54, 94%, 86%);
|
|
210
|
+
--govnl-feedback-warning-border-color: hsl(45, 87%, 31%);
|
|
211
|
+
--govnl-feedback-warning-color: hsl(45, 87%, 31%);
|
|
212
|
+
--govnl-feedback-informative-background-color: hsl(204, 65%, 91%);
|
|
213
|
+
--govnl-feedback-informative-border-color: hsl(203, 100%, 39%);
|
|
214
|
+
--govnl-feedback-informative-color: hsl(203, 100%, 39%);
|
|
215
|
+
--govnl-feedback-negative-background-color: hsl(4, 70%, 92%);
|
|
216
|
+
--govnl-feedback-negative-border-color: hsl(4, 75%, 48%);
|
|
217
|
+
--govnl-feedback-negative-color: hsl(4, 75%, 48%);
|
|
218
|
+
--govnl-feedback-positive-background-color: hsl(98, 35%, 89%);
|
|
219
|
+
--govnl-feedback-positive-border-color: hsl(98, 84%, 29%);
|
|
220
|
+
--govnl-feedback-positive-color: hsl(98, 84%, 29%);
|
|
221
|
+
--govnl-form-control-background-color: hsl(0, 0%, 100%);
|
|
222
|
+
--govnl-form-control-border-color: hsl(215, 16%, 47%);
|
|
223
|
+
--govnl-form-control-color: hsl(222, 47%, 11%);
|
|
224
|
+
--govnl-form-control-font-family: RijksSans, Arial, Verdana, sans-serif;
|
|
225
|
+
--govnl-form-control-font-size: 1.125rem;
|
|
226
|
+
--govnl-form-control-font-weight: 400;
|
|
227
|
+
--govnl-form-control-line-height: 1.5;
|
|
228
|
+
--govnl-form-control-disabled-background-color: hsl(210, 40%, 98%);
|
|
229
|
+
--govnl-form-control-disabled-border-color: hsl(215, 16%, 47%);
|
|
230
|
+
--govnl-form-control-disabled-color: hsl(215, 16%, 47%);
|
|
231
|
+
--govnl-form-control-hover-background-color: hsl(210, 40%, 98%);
|
|
232
|
+
--govnl-form-control-hover-border-color: hsl(215, 25%, 27%);
|
|
233
|
+
--govnl-form-control-hover-color: hsl(222, 47%, 11%);
|
|
234
|
+
--govnl-form-control-focus-background-color: hsl(0, 0%, 100%);
|
|
235
|
+
--govnl-form-control-focus-border-color: hsl(0, 0%, 0%);
|
|
236
|
+
--govnl-form-control-focus-color: hsl(0, 0%, 0%);
|
|
237
|
+
--govnl-form-control-invalid-background-color: hsl(0, 0%, 100%);
|
|
238
|
+
--govnl-form-control-invalid-border-color: hsl(4, 75%, 48%);
|
|
239
|
+
--govnl-form-control-invalid-color: hsl(4, 75%, 48%);
|
|
240
|
+
--govnl-form-control-read-only-background-color: hsl(210, 40%, 98%);
|
|
241
|
+
--govnl-form-control-read-only-border-color: hsla(0, 0%, 0%, 0);
|
|
242
|
+
--govnl-form-control-read-only-color: hsl(222, 47%, 11%);
|
|
243
|
+
--govnl-form-control-placeholder-color: hsl(215, 19%, 35%);
|
|
244
|
+
--govnl-interaction-color: hsl(211, 69%, 27%);
|
|
245
|
+
--govnl-interaction-active-color: rgb(5.02% 15.8% 27.4%);
|
|
246
|
+
--govnl-interaction-hover-color: rgb(6.7% 21.1% 36.5%);
|
|
247
|
+
--govnl-focus-background-color: hsl(53, 95%, 55%);
|
|
248
|
+
--govnl-focus-color: hsl(0, 0%, 0%);
|
|
249
|
+
--govnl-focus-outline-color: hsl(326, 100%, 33%);
|
|
250
|
+
--govnl-focus-inverse-outline-color: hsl(0, 0%, 100%);
|
|
251
|
+
--govnl-focus-outline-offset: 0.125rem;
|
|
252
|
+
--govnl-focus-outline-style: dashed;
|
|
253
|
+
--govnl-focus-outline-width: 2px;
|
|
254
|
+
--govnl-gap-content-min: 1rem;
|
|
255
|
+
--govnl-gap-content-max: 1.5rem;
|
|
256
|
+
--govnl-space-4xs: 0.125rem;
|
|
257
|
+
--govnl-space-3xs: 0.25rem;
|
|
258
|
+
--govnl-space-2xs: 0.5rem;
|
|
259
|
+
--govnl-space-xs: 0.75rem;
|
|
260
|
+
--govnl-space-sm: 1rem;
|
|
261
|
+
--govnl-space-md: 1.5rem;
|
|
262
|
+
--govnl-space-lg: 2rem;
|
|
263
|
+
--govnl-space-xl: 2.5rem;
|
|
264
|
+
--govnl-space-2xl: 3rem;
|
|
265
|
+
--govnl-space-3xl: 4rem;
|
|
266
|
+
--govnl-space-4xl: 5rem;
|
|
267
267
|
}
|
package/dist/navigation-bar.css
CHANGED
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
.dictu-navigation-bar {
|
|
6
6
|
--govnl-nav-bar-max-inline-size: 1280px;
|
|
7
7
|
--govnl-nav-bar-container-inline-size: 100%;
|
|
8
|
+
--govnl-nav-bar-content-column-gap: 0px;
|
|
8
9
|
--govnl-nav-bar-icon-size: 1.5em;
|
|
9
10
|
--govnl-nav-bar-link-text-decoration: none;
|
|
10
11
|
--govnl-nav-bar-menu-label-background-color: none;
|
|
11
12
|
--govnl-nav-bar-mobile-max-inline-size: 100%;
|
|
12
13
|
--govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);
|
|
13
14
|
--govnl-nav-bar-padding-inline: var(--govnl-space-sm);
|
|
14
|
-
--govnl-nav-bar-content-column-gap: var(--govnl-gap-content-min);
|
|
15
15
|
--govnl-nav-bar-icon-color: var(--govnl-brand-primary-500);
|
|
16
16
|
--govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-500);
|
|
17
17
|
--govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-500);
|
package/package.json
CHANGED
|
@@ -213,6 +213,42 @@
|
|
|
213
213
|
"$type": "color",
|
|
214
214
|
"$value": "{govnl.focus.color}"
|
|
215
215
|
}
|
|
216
|
+
},
|
|
217
|
+
"heading": {
|
|
218
|
+
"color": {
|
|
219
|
+
"$type": "color",
|
|
220
|
+
"$value": "{govnl.document.inverse.color}"
|
|
221
|
+
},
|
|
222
|
+
"hover": {
|
|
223
|
+
"color": {
|
|
224
|
+
"$type": "color",
|
|
225
|
+
"$value": "{govnl.document.inverse.color}"
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
"active": {
|
|
229
|
+
"color": {
|
|
230
|
+
"$type": "color",
|
|
231
|
+
"$value": "{govnl.document.inverse.color}"
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
"paragraph": {
|
|
236
|
+
"color": {
|
|
237
|
+
"$type": "color",
|
|
238
|
+
"$value": "{govnl.document.inverse.color}"
|
|
239
|
+
},
|
|
240
|
+
"hover": {
|
|
241
|
+
"color": {
|
|
242
|
+
"$type": "color",
|
|
243
|
+
"$value": "{govnl.document.inverse.color}"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
"active": {
|
|
247
|
+
"color": {
|
|
248
|
+
"$type": "color",
|
|
249
|
+
"$value": "{govnl.document.inverse.color}"
|
|
250
|
+
}
|
|
251
|
+
}
|
|
216
252
|
}
|
|
217
253
|
}
|
|
218
254
|
}
|
|
@@ -11,9 +11,9 @@ register(StyleDictionary);
|
|
|
11
11
|
const baseTokens = ['./src/**/common.tokens.json', './src/**/core.tokens.json'];
|
|
12
12
|
const tokens = globSync('./src/**/*.tokens.json');
|
|
13
13
|
|
|
14
|
-
//
|
|
15
|
-
const
|
|
16
|
-
source:
|
|
14
|
+
// Unified SD config that handles both base tokens and component tokens in a single build.
|
|
15
|
+
const unified = new StyleDictionary({
|
|
16
|
+
source: tokens,
|
|
17
17
|
preprocessors: ['tokens-studio'],
|
|
18
18
|
platforms: {
|
|
19
19
|
css: {
|
|
@@ -21,50 +21,34 @@ const base = new StyleDictionary({
|
|
|
21
21
|
transforms: ['attribute/cti', 'name/kebab', 'color/hsl'],
|
|
22
22
|
buildPath: 'dist/',
|
|
23
23
|
files: [
|
|
24
|
+
// Base tokens file (core and common tokens)
|
|
24
25
|
{
|
|
25
26
|
destination: 'index.css',
|
|
26
27
|
format: 'css/variables',
|
|
28
|
+
filter: token =>
|
|
29
|
+
baseTokens.some(pattern =>
|
|
30
|
+
token.filePath.match(pattern.replace('./src/**/', '').replace('.tokens.json', ''))
|
|
31
|
+
),
|
|
27
32
|
options: {
|
|
28
33
|
selector: '.dictu-theme',
|
|
29
|
-
outputReferences:
|
|
34
|
+
outputReferences: false,
|
|
30
35
|
},
|
|
31
36
|
},
|
|
37
|
+
// Component-specific token files
|
|
38
|
+
...tokens
|
|
39
|
+
.filter(file => file.startsWith('src/components/'))
|
|
40
|
+
.map(file => ({
|
|
41
|
+
destination: `${path.parse(file).name.toLowerCase().replace('.tokens', '')}.css`,
|
|
42
|
+
format: 'css/variables',
|
|
43
|
+
filter: token => token.filePath === file,
|
|
44
|
+
options: {
|
|
45
|
+
selector: `.dictu-${path.parse(file).name.toLowerCase().replace('.tokens', '')}`,
|
|
46
|
+
outputReferences: true,
|
|
47
|
+
},
|
|
48
|
+
})),
|
|
32
49
|
],
|
|
33
50
|
},
|
|
34
51
|
},
|
|
35
52
|
});
|
|
36
53
|
|
|
37
|
-
|
|
38
|
-
const components = new StyleDictionary({
|
|
39
|
-
// Logging is set to silent, because the warning for filtered out token references
|
|
40
|
-
// is not relevant for the component tokens.
|
|
41
|
-
// It is only relevant for the base tokens, which are not filtered out.
|
|
42
|
-
// This is a workaround for the issue with the warning not being silenced.
|
|
43
|
-
//
|
|
44
|
-
log: {
|
|
45
|
-
verbosity: 'verbose',
|
|
46
|
-
},
|
|
47
|
-
source: [tokens],
|
|
48
|
-
preprocessors: ['tokens-studio'],
|
|
49
|
-
platforms: {
|
|
50
|
-
css: {
|
|
51
|
-
transformGroup: 'tokens-studio',
|
|
52
|
-
transforms: ['attribute/cti', 'name/kebab', 'color/hsl'],
|
|
53
|
-
buildPath: 'dist/',
|
|
54
|
-
files: tokens
|
|
55
|
-
.filter(file => file.startsWith('src/components/'))
|
|
56
|
-
.map(file => ({
|
|
57
|
-
destination: `${path.parse(file).name.toLowerCase().replace('.tokens', '')}.css`,
|
|
58
|
-
format: 'css/variables',
|
|
59
|
-
filter: token => token.filePath === file,
|
|
60
|
-
options: {
|
|
61
|
-
selector: `.dictu-${path.parse(file).name.toLowerCase().replace('.tokens', '')}`,
|
|
62
|
-
outputReferences: true,
|
|
63
|
-
},
|
|
64
|
-
})),
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
await base.buildAllPlatforms();
|
|
70
|
-
await components.buildAllPlatforms();
|
|
54
|
+
await unified.buildAllPlatforms();
|