@jablonowski/dsb-tokens 1.0.2 → 1.0.4

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 (10) hide show
  1. package/dist/css/variables.css +3 -3
  2. package/dist/js/tokens.js +18 -18
  3. package/dist/json/tokens.json +18 -18
  4. package/dist/scss/_variables.scss +3 -3
  5. package/dist/ts/tokens.ts +18 -18
  6. package/package.json +6 -2
  7. package/scripts/validate-json.js +31 -0
  8. package/scripts/validate-schema.js +137 -0
  9. package/test/tokens.test.js +179 -0
  10. package/tokens/tokens.json +3 -3
package/dist/css/variables.css CHANGED
@@ -15,7 +15,7 @@
15
15
  --ds-color-options-neutral-450: #bbbbbb;
16
16
  --ds-color-options-neutral-500: #aaaaaa;
17
17
  --ds-color-options-neutral-550: #999999;
18
- --ds-color-options-neutral-600: #888888;
18
+ --ds-color-options-neutral-600: #6f6f6f;
19
19
  --ds-color-options-neutral-650: #666666;
20
20
  --ds-color-options-neutral-700: #555555;
21
21
  --ds-color-options-neutral-800: #333333;
@@ -28,7 +28,7 @@
28
28
  --ds-color-options-red-600: #c5221f;
29
29
  --ds-color-options-red-700: #b0261e;
30
30
  --ds-color-options-green-50: #e6f4ea;
31
- --ds-color-options-green-700: #1a7f3c;
31
+ --ds-color-options-green-700: #1a7c3c;
32
32
  --ds-color-options-yellow-50: #fef3cd;
33
33
  --ds-color-options-yellow-700: #92600a;
34
34
  --ds-color-options-blue-50: #e8f0fe;
@@ -73,7 +73,7 @@
73
73
  --ds-decisions-color-text-secondary: var(--ds-color-options-neutral-700); /** De-emphasised text — ghost button, captions */
74
74
  --ds-decisions-color-text-muted: var(--ds-color-options-neutral-650); /** Quiet text — links, descriptions */
75
75
  --ds-decisions-color-text-subtle: var(--ds-color-options-neutral-600); /** Placeholder-level text — hints, metadata */
76
- --ds-decisions-color-text-placeholder: var(--ds-color-options-neutral-500); /** Input placeholder, empty states */
76
+ --ds-decisions-color-text-placeholder: var(--ds-color-options-neutral-600); /** Input placeholder, empty states */
77
77
  --ds-decisions-color-text-disabled: var(--ds-color-options-neutral-550); /** Disabled control text */
78
78
  --ds-decisions-color-text-inverse: var(--ds-color-options-neutral-0); /** Text on dark/filled backgrounds */
79
79
  --ds-decisions-color-surface-base: var(--ds-color-options-neutral-0); /** Default control and card background */
package/dist/js/tokens.js CHANGED
@@ -14,7 +14,7 @@ export const ColorOptionsNeutral400 = "#c0c0c0";
14
14
  export const ColorOptionsNeutral450 = "#bbbbbb";
15
15
  export const ColorOptionsNeutral500 = "#aaaaaa";
16
16
  export const ColorOptionsNeutral550 = "#999999";
17
- export const ColorOptionsNeutral600 = "#888888";
17
+ export const ColorOptionsNeutral600 = "#6f6f6f";
18
18
  export const ColorOptionsNeutral650 = "#666666";
19
19
  export const ColorOptionsNeutral700 = "#555555";
20
20
  export const ColorOptionsNeutral800 = "#333333";
@@ -27,7 +27,7 @@ export const ColorOptionsRed500 = "#d93025";
27
27
  export const ColorOptionsRed600 = "#c5221f";
28
28
  export const ColorOptionsRed700 = "#b0261e";
29
29
  export const ColorOptionsGreen50 = "#e6f4ea";
30
- export const ColorOptionsGreen700 = "#1a7f3c";
30
+ export const ColorOptionsGreen700 = "#1a7c3c";
31
31
  export const ColorOptionsYellow50 = "#fef3cd";
32
32
  export const ColorOptionsYellow700 = "#92600a";
33
33
  export const ColorOptionsBlue50 = "#e8f0fe";
@@ -70,8 +70,8 @@ export const DecisionsColorTextPrimary = "#111111"; // Primary body text, labels
70
70
  export const DecisionsColorTextBody = "#333333"; // Secondary body text, table cells
71
71
  export const DecisionsColorTextSecondary = "#555555"; // De-emphasised text — ghost button, captions
72
72
  export const DecisionsColorTextMuted = "#666666"; // Quiet text — links, descriptions
73
- export const DecisionsColorTextSubtle = "#888888"; // Placeholder-level text — hints, metadata
74
- export const DecisionsColorTextPlaceholder = "#aaaaaa"; // Input placeholder, empty states
73
+ export const DecisionsColorTextSubtle = "#6f6f6f"; // Placeholder-level text — hints, metadata
74
+ export const DecisionsColorTextPlaceholder = "#6f6f6f"; // Input placeholder, empty states
75
75
  export const DecisionsColorTextDisabled = "#999999"; // Disabled control text
76
76
  export const DecisionsColorTextInverse = "#ffffff"; // Text on dark/filled backgrounds
77
77
  export const DecisionsColorSurfaceBase = "#ffffff"; // Default control and card background
@@ -92,7 +92,7 @@ export const DecisionsColorFeedbackErrorIconHover = "#b0261e"; // Error border o
92
92
  export const DecisionsColorFeedbackErrorSurface = "#fce8e6"; // Error tinted background
93
93
  export const DecisionsColorFeedbackErrorSurfaceHover = "#fef2f2"; // Error surface on hover
94
94
  export const DecisionsColorFeedbackErrorBorder = "#f0a9a4"; // Soft error border — danger button default
95
- export const DecisionsColorFeedbackSuccessText = "#1a7f3c"; // Success text and icon
95
+ export const DecisionsColorFeedbackSuccessText = "#1a7c3c"; // Success text and icon
96
96
  export const DecisionsColorFeedbackSuccessSurface = "#e6f4ea"; // Success tinted background
97
97
  export const DecisionsColorFeedbackWarningText = "#92600a"; // Warning text and icon
98
98
  export const DecisionsColorFeedbackWarningSurface = "#fef3cd"; // Warning tinted background
@@ -152,7 +152,7 @@ export const ComponentButtonDangerBorder = "#f0a9a4";
152
152
  export const ComponentButtonDangerBorderHover = "#d93025";
153
153
  export const ComponentInputBackground = "#ffffff";
154
154
  export const ComponentInputText = "#111111";
155
- export const ComponentInputPlaceholder = "#aaaaaa";
155
+ export const ComponentInputPlaceholder = "#6f6f6f";
156
156
  export const ComponentInputBorder = "#d4d4d4";
157
157
  export const ComponentInputBorderFocus = "#111111";
158
158
  export const ComponentInputBorderRadius = "6px";
@@ -181,7 +181,7 @@ export const ComponentRadioFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
181
181
  export const ComponentRadioErrorBorder = "#d93025";
182
182
  export const ComponentDropdownBackground = "#ffffff";
183
183
  export const ComponentDropdownText = "#111111";
184
- export const ComponentDropdownPlaceholder = "#aaaaaa";
184
+ export const ComponentDropdownPlaceholder = "#6f6f6f";
185
185
  export const ComponentDropdownBorder = "#d4d4d4";
186
186
  export const ComponentDropdownBorderOpen = "#111111";
187
187
  export const ComponentDropdownBorderHover = "#111111";
@@ -191,7 +191,7 @@ export const ComponentDropdownFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
191
191
  export const ComponentDropdownMenuShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
192
192
  export const ComponentDropdownMenuOptionHover = "#f5f5f5";
193
193
  export const ComponentDropdownMenuOptionSelected = "#f0f0f0";
194
- export const ComponentDropdownMenuOptionDisabled = "#aaaaaa";
194
+ export const ComponentDropdownMenuOptionDisabled = "#6f6f6f";
195
195
  export const ComponentDropdownErrorBorder = "#d93025";
196
196
  export const ComponentDropdownErrorBorderHover = "#b0261e";
197
197
  export const ComponentTagBorderRadius = "4px";
@@ -200,7 +200,7 @@ export const ComponentTagDefaultText = "#555555";
200
200
  export const ComponentTagPrimaryBackground = "#111111";
201
201
  export const ComponentTagPrimaryText = "#ffffff";
202
202
  export const ComponentTagSuccessBackground = "#e6f4ea";
203
- export const ComponentTagSuccessText = "#1a7f3c";
203
+ export const ComponentTagSuccessText = "#1a7c3c";
204
204
  export const ComponentTagWarningBackground = "#fef3cd";
205
205
  export const ComponentTagWarningText = "#92600a";
206
206
  export const ComponentTagDangerBackground = "#fce8e6";
@@ -220,7 +220,7 @@ export const ComponentModalTitleFontSize = "16px";
220
220
  export const ComponentModalTitleFontWeight = "600";
221
221
  export const ComponentModalBodyText = "#333333";
222
222
  export const ComponentModalBodyFontSize = "14px";
223
- export const ComponentModalCloseButtonText = "#888888";
223
+ export const ComponentModalCloseButtonText = "#6f6f6f";
224
224
  export const ComponentModalCloseButtonTextHover = "#111111";
225
225
  export const ComponentModalCloseButtonBackgroundHover = "#f0f0f0";
226
226
  export const ComponentModalCloseButtonBorderRadius = "5px";
@@ -229,22 +229,22 @@ export const ComponentTableBackground = "#ffffff";
229
229
  export const ComponentTableBorder = "#ebebeb";
230
230
  export const ComponentTableBorderRadius = "8px";
231
231
  export const ComponentTableHeaderBackground = "#fafafa";
232
- export const ComponentTableHeaderText = "#888888";
232
+ export const ComponentTableHeaderText = "#6f6f6f";
233
233
  export const ComponentTableHeaderBorder = "#ebebeb";
234
234
  export const ComponentTableCellText = "#333333";
235
235
  export const ComponentTableCellBorderBottom = "#f0f0f0";
236
236
  export const ComponentTableRowHoverBackground = "#f7f7f7";
237
237
  export const ComponentTableRowStripedBackground = "#fafafa";
238
- export const ComponentTableEmptyText = "#aaaaaa";
238
+ export const ComponentTableEmptyText = "#6f6f6f";
239
239
  export const ComponentListDivider = "#f0f0f0";
240
240
  export const ComponentListBorder = "#ebebeb";
241
241
  export const ComponentListBorderRadius = "8px";
242
242
  export const ComponentListItemText = "#111111";
243
243
  export const ComponentListItemDescription = "#666666";
244
- export const ComponentListItemMeta = "#aaaaaa";
244
+ export const ComponentListItemMeta = "#6f6f6f";
245
245
  export const ComponentListIndicatorDefault = "#d4d4d4";
246
246
  export const ComponentListIndicatorInfo = "#1a56db";
247
- export const ComponentListIndicatorSuccess = "#1a7f3c";
247
+ export const ComponentListIndicatorSuccess = "#1a7c3c";
248
248
  export const ComponentListIndicatorWarning = "#92600a";
249
249
  export const ComponentListIndicatorError = "#c5221f";
250
250
  export const ComponentAccordionBorder = "#f0f0f0";
@@ -253,7 +253,7 @@ export const ComponentAccordionTitleFontSize = "14px";
253
253
  export const ComponentAccordionTitleFontWeight = "500";
254
254
  export const ComponentAccordionBodyText = "#555555";
255
255
  export const ComponentAccordionBodyFontSize = "14px";
256
- export const ComponentAccordionChevronColor = "#888888";
256
+ export const ComponentAccordionChevronColor = "#6f6f6f";
257
257
  export const ComponentAccordionChevronDuration = "0.2s";
258
258
  export const ComponentAccordionFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
259
259
  export const ComponentAccordionDisabledOpacity = "0.42";
@@ -283,7 +283,7 @@ export const ComponentFooterBorder = "#ebebeb";
283
283
  export const ComponentFooterBrandText = "#111111";
284
284
  export const ComponentFooterBrandFontSize = "15px";
285
285
  export const ComponentFooterBrandFontWeight = "600";
286
- export const ComponentFooterTaglineText = "#888888";
286
+ export const ComponentFooterTaglineText = "#6f6f6f";
287
287
  export const ComponentFooterTaglineFontSize = "13px";
288
288
  export const ComponentFooterColumnHeadingText = "#111111";
289
289
  export const ComponentFooterColumnHeadingFontSize = "12px";
@@ -291,9 +291,9 @@ export const ComponentFooterColumnHeadingFontWeight = "600";
291
291
  export const ComponentFooterColumnLinkText = "#666666";
292
292
  export const ComponentFooterColumnLinkTextHover = "#111111";
293
293
  export const ComponentFooterColumnLinkFontSize = "13px";
294
- export const ComponentFooterLegalText = "#aaaaaa";
294
+ export const ComponentFooterLegalText = "#6f6f6f";
295
295
  export const ComponentFooterLegalTextHover = "#555555";
296
296
  export const ComponentFooterLegalFontSize = "12px";
297
- export const ComponentFooterCopyrightText = "#aaaaaa";
297
+ export const ComponentFooterCopyrightText = "#6f6f6f";
298
298
  export const ComponentFooterCopyrightFontSize = "12px";
299
299
  export const ComponentFooterDivider = "#f0f0f0";
package/dist/json/tokens.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "450": "#bbbbbb",
17
17
  "500": "#aaaaaa",
18
18
  "550": "#999999",
19
- "600": "#888888",
19
+ "600": "#6f6f6f",
20
20
  "650": "#666666",
21
21
  "700": "#555555",
22
22
  "800": "#333333",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "green": {
35
35
  "50": "#e6f4ea",
36
- "700": "#1a7f3c"
36
+ "700": "#1a7c3c"
37
37
  },
38
38
  "yellow": {
39
39
  "50": "#fef3cd",
@@ -138,8 +138,8 @@
138
138
  "body": "#333333",
139
139
  "secondary": "#555555",
140
140
  "muted": "#666666",
141
- "subtle": "#888888",
142
- "placeholder": "#aaaaaa",
141
+ "subtle": "#6f6f6f",
142
+ "placeholder": "#6f6f6f",
143
143
  "disabled": "#999999",
144
144
  "inverse": "#ffffff"
145
145
  },
@@ -171,7 +171,7 @@
171
171
  "border": "#f0a9a4"
172
172
  },
173
173
  "success": {
174
- "text": "#1a7f3c",
174
+ "text": "#1a7c3c",
175
175
  "surface": "#e6f4ea"
176
176
  },
177
177
  "warning": {
@@ -278,7 +278,7 @@
278
278
  "input": {
279
279
  "background": "#ffffff",
280
280
  "text": "#111111",
281
- "placeholder": "#aaaaaa",
281
+ "placeholder": "#6f6f6f",
282
282
  "border": "#d4d4d4",
283
283
  "borderFocus": "#111111",
284
284
  "borderRadius": "6px",
@@ -322,7 +322,7 @@
322
322
  "dropdown": {
323
323
  "background": "#ffffff",
324
324
  "text": "#111111",
325
- "placeholder": "#aaaaaa",
325
+ "placeholder": "#6f6f6f",
326
326
  "border": "#d4d4d4",
327
327
  "borderOpen": "#111111",
328
328
  "borderHover": "#111111",
@@ -333,7 +333,7 @@
333
333
  "shadow": "0 4px 12px rgba(0, 0, 0, 0.08)",
334
334
  "optionHover": "#f5f5f5",
335
335
  "optionSelected": "#f0f0f0",
336
- "optionDisabled": "#aaaaaa"
336
+ "optionDisabled": "#6f6f6f"
337
337
  },
338
338
  "error": {
339
339
  "border": "#d93025",
@@ -352,7 +352,7 @@
352
352
  },
353
353
  "success": {
354
354
  "background": "#e6f4ea",
355
- "text": "#1a7f3c"
355
+ "text": "#1a7c3c"
356
356
  },
357
357
  "warning": {
358
358
  "background": "#fef3cd",
@@ -390,7 +390,7 @@
390
390
  "fontSize": "14px"
391
391
  },
392
392
  "closeButton": {
393
- "text": "#888888",
393
+ "text": "#6f6f6f",
394
394
  "textHover": "#111111",
395
395
  "backgroundHover": "#f0f0f0",
396
396
  "borderRadius": "5px"
@@ -403,7 +403,7 @@
403
403
  "borderRadius": "8px",
404
404
  "header": {
405
405
  "background": "#fafafa",
406
- "text": "#888888",
406
+ "text": "#6f6f6f",
407
407
  "border": "#ebebeb"
408
408
  },
409
409
  "cell": {
@@ -415,7 +415,7 @@
415
415
  "stripedBackground": "#fafafa"
416
416
  },
417
417
  "empty": {
418
- "text": "#aaaaaa"
418
+ "text": "#6f6f6f"
419
419
  }
420
420
  },
421
421
  "list": {
@@ -425,12 +425,12 @@
425
425
  "item": {
426
426
  "text": "#111111",
427
427
  "description": "#666666",
428
- "meta": "#aaaaaa"
428
+ "meta": "#6f6f6f"
429
429
  },
430
430
  "indicator": {
431
431
  "default": "#d4d4d4",
432
432
  "info": "#1a56db",
433
- "success": "#1a7f3c",
433
+ "success": "#1a7c3c",
434
434
  "warning": "#92600a",
435
435
  "error": "#c5221f"
436
436
  }
@@ -447,7 +447,7 @@
447
447
  "fontSize": "14px"
448
448
  },
449
449
  "chevron": {
450
- "color": "#888888",
450
+ "color": "#6f6f6f",
451
451
  "duration": "0.2s"
452
452
  },
453
453
  "focusRing": "0 0 0 3px rgba(0, 0, 0, 0.06)",
@@ -501,7 +501,7 @@
501
501
  "fontWeight": "600"
502
502
  },
503
503
  "tagline": {
504
- "text": "#888888",
504
+ "text": "#6f6f6f",
505
505
  "fontSize": "13px"
506
506
  },
507
507
  "column": {
@@ -517,12 +517,12 @@
517
517
  }
518
518
  },
519
519
  "legal": {
520
- "text": "#aaaaaa",
520
+ "text": "#6f6f6f",
521
521
  "textHover": "#555555",
522
522
  "fontSize": "12px"
523
523
  },
524
524
  "copyright": {
525
- "text": "#aaaaaa",
525
+ "text": "#6f6f6f",
526
526
  "fontSize": "12px"
527
527
  },
528
528
  "divider": "#f0f0f0"
package/dist/scss/_variables.scss CHANGED
@@ -13,7 +13,7 @@ $color-options-neutral-400: #c0c0c0;
13
13
  $color-options-neutral-450: #bbbbbb;
14
14
  $color-options-neutral-500: #aaaaaa;
15
15
  $color-options-neutral-550: #999999;
16
- $color-options-neutral-600: #888888;
16
+ $color-options-neutral-600: #6f6f6f;
17
17
  $color-options-neutral-650: #666666;
18
18
  $color-options-neutral-700: #555555;
19
19
  $color-options-neutral-800: #333333;
@@ -26,7 +26,7 @@ $color-options-red-500: #d93025;
26
26
  $color-options-red-600: #c5221f;
27
27
  $color-options-red-700: #b0261e;
28
28
  $color-options-green-50: #e6f4ea;
29
- $color-options-green-700: #1a7f3c;
29
+ $color-options-green-700: #1a7c3c;
30
30
  $color-options-yellow-50: #fef3cd;
31
31
  $color-options-yellow-700: #92600a;
32
32
  $color-options-blue-50: #e8f0fe;
@@ -71,7 +71,7 @@ $decisions-color-text-body: $color-options-neutral-800; // Secondary body text,
71
71
  $decisions-color-text-secondary: $color-options-neutral-700; // De-emphasised text — ghost button, captions
72
72
  $decisions-color-text-muted: $color-options-neutral-650; // Quiet text — links, descriptions
73
73
  $decisions-color-text-subtle: $color-options-neutral-600; // Placeholder-level text — hints, metadata
74
- $decisions-color-text-placeholder: $color-options-neutral-500; // Input placeholder, empty states
74
+ $decisions-color-text-placeholder: $color-options-neutral-600; // Input placeholder, empty states
75
75
  $decisions-color-text-disabled: $color-options-neutral-550; // Disabled control text
76
76
  $decisions-color-text-inverse: $color-options-neutral-0; // Text on dark/filled backgrounds
77
77
  $decisions-color-surface-base: $color-options-neutral-0; // Default control and card background
package/dist/ts/tokens.ts CHANGED
@@ -14,7 +14,7 @@ export const ColorOptionsNeutral400 = "#c0c0c0";
14
14
  export const ColorOptionsNeutral450 = "#bbbbbb";
15
15
  export const ColorOptionsNeutral500 = "#aaaaaa";
16
16
  export const ColorOptionsNeutral550 = "#999999";
17
- export const ColorOptionsNeutral600 = "#888888";
17
+ export const ColorOptionsNeutral600 = "#6f6f6f";
18
18
  export const ColorOptionsNeutral650 = "#666666";
19
19
  export const ColorOptionsNeutral700 = "#555555";
20
20
  export const ColorOptionsNeutral800 = "#333333";
@@ -27,7 +27,7 @@ export const ColorOptionsRed500 = "#d93025";
27
27
  export const ColorOptionsRed600 = "#c5221f";
28
28
  export const ColorOptionsRed700 = "#b0261e";
29
29
  export const ColorOptionsGreen50 = "#e6f4ea";
30
- export const ColorOptionsGreen700 = "#1a7f3c";
30
+ export const ColorOptionsGreen700 = "#1a7c3c";
31
31
  export const ColorOptionsYellow50 = "#fef3cd";
32
32
  export const ColorOptionsYellow700 = "#92600a";
33
33
  export const ColorOptionsBlue50 = "#e8f0fe";
@@ -70,8 +70,8 @@ export const DecisionsColorTextPrimary = "#111111"; // Primary body text, labels
70
70
  export const DecisionsColorTextBody = "#333333"; // Secondary body text, table cells
71
71
  export const DecisionsColorTextSecondary = "#555555"; // De-emphasised text — ghost button, captions
72
72
  export const DecisionsColorTextMuted = "#666666"; // Quiet text — links, descriptions
73
- export const DecisionsColorTextSubtle = "#888888"; // Placeholder-level text — hints, metadata
74
- export const DecisionsColorTextPlaceholder = "#aaaaaa"; // Input placeholder, empty states
73
+ export const DecisionsColorTextSubtle = "#6f6f6f"; // Placeholder-level text — hints, metadata
74
+ export const DecisionsColorTextPlaceholder = "#6f6f6f"; // Input placeholder, empty states
75
75
  export const DecisionsColorTextDisabled = "#999999"; // Disabled control text
76
76
  export const DecisionsColorTextInverse = "#ffffff"; // Text on dark/filled backgrounds
77
77
  export const DecisionsColorSurfaceBase = "#ffffff"; // Default control and card background
@@ -92,7 +92,7 @@ export const DecisionsColorFeedbackErrorIconHover = "#b0261e"; // Error border o
92
92
  export const DecisionsColorFeedbackErrorSurface = "#fce8e6"; // Error tinted background
93
93
  export const DecisionsColorFeedbackErrorSurfaceHover = "#fef2f2"; // Error surface on hover
94
94
  export const DecisionsColorFeedbackErrorBorder = "#f0a9a4"; // Soft error border — danger button default
95
- export const DecisionsColorFeedbackSuccessText = "#1a7f3c"; // Success text and icon
95
+ export const DecisionsColorFeedbackSuccessText = "#1a7c3c"; // Success text and icon
96
96
  export const DecisionsColorFeedbackSuccessSurface = "#e6f4ea"; // Success tinted background
97
97
  export const DecisionsColorFeedbackWarningText = "#92600a"; // Warning text and icon
98
98
  export const DecisionsColorFeedbackWarningSurface = "#fef3cd"; // Warning tinted background
@@ -152,7 +152,7 @@ export const ComponentButtonDangerBorder = "#f0a9a4";
152
152
  export const ComponentButtonDangerBorderHover = "#d93025";
153
153
  export const ComponentInputBackground = "#ffffff";
154
154
  export const ComponentInputText = "#111111";
155
- export const ComponentInputPlaceholder = "#aaaaaa";
155
+ export const ComponentInputPlaceholder = "#6f6f6f";
156
156
  export const ComponentInputBorder = "#d4d4d4";
157
157
  export const ComponentInputBorderFocus = "#111111";
158
158
  export const ComponentInputBorderRadius = "6px";
@@ -181,7 +181,7 @@ export const ComponentRadioFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
181
181
  export const ComponentRadioErrorBorder = "#d93025";
182
182
  export const ComponentDropdownBackground = "#ffffff";
183
183
  export const ComponentDropdownText = "#111111";
184
- export const ComponentDropdownPlaceholder = "#aaaaaa";
184
+ export const ComponentDropdownPlaceholder = "#6f6f6f";
185
185
  export const ComponentDropdownBorder = "#d4d4d4";
186
186
  export const ComponentDropdownBorderOpen = "#111111";
187
187
  export const ComponentDropdownBorderHover = "#111111";
@@ -191,7 +191,7 @@ export const ComponentDropdownFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
191
191
  export const ComponentDropdownMenuShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
192
192
  export const ComponentDropdownMenuOptionHover = "#f5f5f5";
193
193
  export const ComponentDropdownMenuOptionSelected = "#f0f0f0";
194
- export const ComponentDropdownMenuOptionDisabled = "#aaaaaa";
194
+ export const ComponentDropdownMenuOptionDisabled = "#6f6f6f";
195
195
  export const ComponentDropdownErrorBorder = "#d93025";
196
196
  export const ComponentDropdownErrorBorderHover = "#b0261e";
197
197
  export const ComponentTagBorderRadius = "4px";
@@ -200,7 +200,7 @@ export const ComponentTagDefaultText = "#555555";
200
200
  export const ComponentTagPrimaryBackground = "#111111";
201
201
  export const ComponentTagPrimaryText = "#ffffff";
202
202
  export const ComponentTagSuccessBackground = "#e6f4ea";
203
- export const ComponentTagSuccessText = "#1a7f3c";
203
+ export const ComponentTagSuccessText = "#1a7c3c";
204
204
  export const ComponentTagWarningBackground = "#fef3cd";
205
205
  export const ComponentTagWarningText = "#92600a";
206
206
  export const ComponentTagDangerBackground = "#fce8e6";
@@ -220,7 +220,7 @@ export const ComponentModalTitleFontSize = "16px";
220
220
  export const ComponentModalTitleFontWeight = "600";
221
221
  export const ComponentModalBodyText = "#333333";
222
222
  export const ComponentModalBodyFontSize = "14px";
223
- export const ComponentModalCloseButtonText = "#888888";
223
+ export const ComponentModalCloseButtonText = "#6f6f6f";
224
224
  export const ComponentModalCloseButtonTextHover = "#111111";
225
225
  export const ComponentModalCloseButtonBackgroundHover = "#f0f0f0";
226
226
  export const ComponentModalCloseButtonBorderRadius = "5px";
@@ -229,22 +229,22 @@ export const ComponentTableBackground = "#ffffff";
229
229
  export const ComponentTableBorder = "#ebebeb";
230
230
  export const ComponentTableBorderRadius = "8px";
231
231
  export const ComponentTableHeaderBackground = "#fafafa";
232
- export const ComponentTableHeaderText = "#888888";
232
+ export const ComponentTableHeaderText = "#6f6f6f";
233
233
  export const ComponentTableHeaderBorder = "#ebebeb";
234
234
  export const ComponentTableCellText = "#333333";
235
235
  export const ComponentTableCellBorderBottom = "#f0f0f0";
236
236
  export const ComponentTableRowHoverBackground = "#f7f7f7";
237
237
  export const ComponentTableRowStripedBackground = "#fafafa";
238
- export const ComponentTableEmptyText = "#aaaaaa";
238
+ export const ComponentTableEmptyText = "#6f6f6f";
239
239
  export const ComponentListDivider = "#f0f0f0";
240
240
  export const ComponentListBorder = "#ebebeb";
241
241
  export const ComponentListBorderRadius = "8px";
242
242
  export const ComponentListItemText = "#111111";
243
243
  export const ComponentListItemDescription = "#666666";
244
- export const ComponentListItemMeta = "#aaaaaa";
244
+ export const ComponentListItemMeta = "#6f6f6f";
245
245
  export const ComponentListIndicatorDefault = "#d4d4d4";
246
246
  export const ComponentListIndicatorInfo = "#1a56db";
247
- export const ComponentListIndicatorSuccess = "#1a7f3c";
247
+ export const ComponentListIndicatorSuccess = "#1a7c3c";
248
248
  export const ComponentListIndicatorWarning = "#92600a";
249
249
  export const ComponentListIndicatorError = "#c5221f";
250
250
  export const ComponentAccordionBorder = "#f0f0f0";
@@ -253,7 +253,7 @@ export const ComponentAccordionTitleFontSize = "14px";
253
253
  export const ComponentAccordionTitleFontWeight = "500";
254
254
  export const ComponentAccordionBodyText = "#555555";
255
255
  export const ComponentAccordionBodyFontSize = "14px";
256
- export const ComponentAccordionChevronColor = "#888888";
256
+ export const ComponentAccordionChevronColor = "#6f6f6f";
257
257
  export const ComponentAccordionChevronDuration = "0.2s";
258
258
  export const ComponentAccordionFocusRing = "0 0 0 3px rgba(0, 0, 0, 0.06)";
259
259
  export const ComponentAccordionDisabledOpacity = "0.42";
@@ -283,7 +283,7 @@ export const ComponentFooterBorder = "#ebebeb";
283
283
  export const ComponentFooterBrandText = "#111111";
284
284
  export const ComponentFooterBrandFontSize = "15px";
285
285
  export const ComponentFooterBrandFontWeight = "600";
286
- export const ComponentFooterTaglineText = "#888888";
286
+ export const ComponentFooterTaglineText = "#6f6f6f";
287
287
  export const ComponentFooterTaglineFontSize = "13px";
288
288
  export const ComponentFooterColumnHeadingText = "#111111";
289
289
  export const ComponentFooterColumnHeadingFontSize = "12px";
@@ -291,9 +291,9 @@ export const ComponentFooterColumnHeadingFontWeight = "600";
291
291
  export const ComponentFooterColumnLinkText = "#666666";
292
292
  export const ComponentFooterColumnLinkTextHover = "#111111";
293
293
  export const ComponentFooterColumnLinkFontSize = "13px";
294
- export const ComponentFooterLegalText = "#aaaaaa";
294
+ export const ComponentFooterLegalText = "#6f6f6f";
295
295
  export const ComponentFooterLegalTextHover = "#555555";
296
296
  export const ComponentFooterLegalFontSize = "12px";
297
- export const ComponentFooterCopyrightText = "#aaaaaa";
297
+ export const ComponentFooterCopyrightText = "#6f6f6f";
298
298
  export const ComponentFooterCopyrightFontSize = "12px";
299
299
  export const ComponentFooterDivider = "#f0f0f0";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jablonowski/dsb-tokens",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "author": "Mateusz Jablonowski",
@@ -9,7 +9,11 @@
9
9
  "scripts": {
10
10
  "build": "style-dictionary build --config config.js",
11
11
  "release": "npm run build && npm version patch && npm publish --access public",
12
- "test": "echo \"Error: no test specified\" && exit 1"
12
+ "lint:json": "node scripts/validate-json.js",
13
+ "lint:schema": "node scripts/validate-schema.js",
14
+ "lint": "npm run lint:json && npm run lint:schema",
15
+ "test": "node --test test/tokens.test.js",
16
+ "ci": "npm run lint && npm run build && npm test"
13
17
  },
14
18
  "repository": {
15
19
  "type": "git",
package/scripts/validate-json.js ADDED
@@ -0,0 +1,31 @@
1
+ // @ts-check
2
+ 'use strict';
3
+
4
+ /**
5
+ * Layer 1 — JSON syntax validation
6
+ * Checks that tokens/tokens.json is well-formed JSON.
7
+ * Exits with code 1 and prints the parse error on failure.
8
+ */
9
+
10
+ const fs = require('fs');
11
+ const path = require('path');
12
+
13
+ const FILE = path.resolve(__dirname, '../tokens/tokens.json');
14
+
15
+ let raw;
16
+ try {
17
+ raw = fs.readFileSync(FILE, 'utf8');
18
+ } catch (err) {
19
+ console.error(`[validate-json] Cannot read file: ${FILE}`);
20
+ console.error(err.message);
21
+ process.exit(1);
22
+ }
23
+
24
+ try {
25
+ JSON.parse(raw);
26
+ console.log('[validate-json] ✓ tokens.json is valid JSON');
27
+ } catch (err) {
28
+ console.error('[validate-json] ✗ tokens.json is not valid JSON');
29
+ console.error(err.message);
30
+ process.exit(1);
31
+ }
package/scripts/validate-schema.js ADDED
@@ -0,0 +1,137 @@
1
+ // @ts-check
2
+ 'use strict';
3
+
4
+ /**
5
+ * Layer 2 — Token schema validation
6
+ *
7
+ * Recursively walks tokens.json and enforces the Style Dictionary
8
+ * three-tier token schema:
9
+ *
10
+ * Token leaf: { "value": string, "comment"?: string } — no other keys
11
+ * Group node: any key whose value is an object (not a leaf)
12
+ * Group comment: a "comment" string on a group node — allowed, skipped
13
+ *
14
+ * Additional format rules applied to leaf values:
15
+ * • References — must match {path.to.token} (curly-brace syntax)
16
+ * • Hex colors — must be #rrggbb (6-digit lowercase hex)
17
+ * • RGBA colors — must match rgba(r, g, b, a)
18
+ *
19
+ * Implements the validation step recommended by:
20
+ * https://martinfowler.com/articles/design-token-based-ui-architecture.html
21
+ */
22
+
23
+ const fs = require('fs');
24
+ const path = require('path');
25
+
26
+ const FILE = path.resolve(__dirname, '../tokens/tokens.json');
27
+
28
+ // ─── Regex patterns ───────────────────────────────────────────────────────────
29
+
30
+ const RE_REFERENCE = /^\{[\w./#-]+\}$/;
31
+ const RE_HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
32
+ const RE_RGBA = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/;
33
+
34
+ // ─── Recursive validator ──────────────────────────────────────────────────────
35
+
36
+ /**
37
+ * @param {unknown} node
38
+ * @param {string} nodePath Dot-notation path for error reporting
39
+ * @param {string[]} errors Accumulated error messages
40
+ */
41
+ function validateNode(node, nodePath, errors) {
42
+ if (typeof node !== 'object' || node === null || Array.isArray(node)) {
43
+ errors.push(`${nodePath}: expected an object node, got ${Array.isArray(node) ? 'array' : typeof node}`);
44
+ return;
45
+ }
46
+
47
+ const obj = /** @type {Record<string, unknown>} */ (node);
48
+
49
+ if ('value' in obj) {
50
+ validateLeaf(obj, nodePath, errors);
51
+ } else {
52
+ // Group node — recurse into every child except the optional 'comment' string
53
+ for (const [key, child] of Object.entries(obj)) {
54
+ if (key === 'comment') {
55
+ if (typeof child !== 'string') {
56
+ errors.push(`${nodePath}.comment: group comment must be a string`);
57
+ }
58
+ continue;
59
+ }
60
+ validateNode(child, nodePath ? `${nodePath}.${key}` : key, errors);
61
+ }
62
+ }
63
+ }
64
+
65
+ /**
66
+ * @param {Record<string, unknown>} token
67
+ * @param {string} tokenPath
68
+ * @param {string[]} errors
69
+ */
70
+ function validateLeaf(token, tokenPath, errors) {
71
+ // 1. Value must be a string (Style Dictionary uses string values for all types)
72
+ if (typeof token.value !== 'string') {
73
+ errors.push(`${tokenPath}: 'value' must be a string, got ${typeof token.value}`);
74
+ }
75
+
76
+ // 2. No unexpected keys — only 'value' and 'comment' are allowed on a leaf
77
+ const ALLOWED = new Set(['value', 'comment']);
78
+ for (const key of Object.keys(token)) {
79
+ if (!ALLOWED.has(key)) {
80
+ errors.push(`${tokenPath}: unexpected key '${key}' on token leaf (only 'value' and 'comment' are allowed)`);
81
+ }
82
+ }
83
+
84
+ if (typeof token.value !== 'string') return; // already reported above
85
+
86
+ const val = token.value;
87
+
88
+ // 3. Reference syntax: value is entirely a {path.to.token} reference
89
+ if (val.startsWith('{')) {
90
+ if (!RE_REFERENCE.test(val)) {
91
+ errors.push(`${tokenPath}: malformed reference '${val}' — expected format: {category.group.name}`);
92
+ }
93
+ return; // no further format checks on references
94
+ }
95
+
96
+ // 4. Hex color format
97
+ if (val.startsWith('#')) {
98
+ if (!RE_HEX_COLOR.test(val)) {
99
+ errors.push(`${tokenPath}: hex color '${val}' must be exactly 6 hex digits (e.g. #1a7f3c)`);
100
+ }
101
+ return;
102
+ }
103
+
104
+ // 5. RGBA color format
105
+ if (val.startsWith('rgba')) {
106
+ if (!RE_RGBA.test(val)) {
107
+ errors.push(`${tokenPath}: rgba value '${val}' is malformed`);
108
+ }
109
+ return;
110
+ }
111
+
112
+ // All other formats (px, %, s, plain numbers, keywords like 'ease', 'transparent') are valid as-is
113
+ }
114
+
115
+ // ─── Run ──────────────────────────────────────────────────────────────────────
116
+
117
+ let tokens;
118
+ try {
119
+ tokens = JSON.parse(fs.readFileSync(FILE, 'utf8'));
120
+ } catch (err) {
121
+ console.error(`[validate-schema] Cannot read/parse ${FILE}`);
122
+ console.error(err.message);
123
+ process.exit(1);
124
+ }
125
+
126
+ const errors = [];
127
+ validateNode(tokens, '', errors);
128
+
129
+ if (errors.length === 0) {
130
+ console.log(`[validate-schema] ✓ Token schema is valid`);
131
+ } else {
132
+ console.error(`[validate-schema] ✗ Found ${errors.length} schema error(s):\n`);
133
+ for (const e of errors) {
134
+ console.error(` • ${e}`);
135
+ }
136
+ process.exit(1);
137
+ }
package/test/tokens.test.js ADDED
@@ -0,0 +1,179 @@
1
+ 'use strict';
2
+
3
+ /**
4
+ * Layer 3 — Style Dictionary output tests
5
+ *
6
+ * Asserts that the built dist/css/variables.css contains the expected
7
+ * CSS custom property declarations. Requires `npm run build` to have
8
+ * run first (the CI workflow handles this ordering).
9
+ *
10
+ * Variable names are verified against the actual component CSS files in
11
+ * components/src/components/ — e.g. button.component.css uses
12
+ * var(--ds-component-button-border-radius) and var(--ds-decisions-font-weight-medium).
13
+ *
14
+ * Test selection covers:
15
+ * • A raw color option (tier 1)
16
+ * • A raw non-color option to verify unit conversion (border-radius full → 50%)
17
+ * • A decision alias resolved via var() (tier 2, with outputReferences: true)
18
+ * • A component float alias resolved via var() (tier 3)
19
+ * • A three-tier alias chain: component → decision → option
20
+ */
21
+
22
+ const { describe, it, before } = require('node:test');
23
+ const assert = require('node:assert/strict');
24
+ const fs = require('fs');
25
+ const path = require('path');
26
+
27
+ const CSS_FILE = path.resolve(__dirname, '../dist/css/variables.css');
28
+
29
+ let css = '';
30
+
31
+ describe('Style Dictionary output — dist/css/variables.css', () => {
32
+ before(() => {
33
+ assert.ok(
34
+ fs.existsSync(CSS_FILE),
35
+ `Build output not found at ${CSS_FILE}. Run 'npm run build' before running tests.`
36
+ );
37
+ css = fs.readFileSync(CSS_FILE, 'utf8');
38
+ assert.ok(css.length > 0, 'CSS output file must not be empty');
39
+ });
40
+
41
+ // ─── Tier 1 — Options: raw values ─────────────────────────────────────────
42
+
43
+ describe('Tier 1 — Options: raw values', () => {
44
+ it('exports neutral-900 as #111111 (darkest neutral)', () => {
45
+ assert.match(css, /--ds-color-options-neutral-900:\s*#111111/);
46
+ });
47
+
48
+ it('exports neutral-0 as #ffffff (white)', () => {
49
+ assert.match(css, /--ds-color-options-neutral-0:\s*#ffffff/);
50
+ });
51
+
52
+ it('exports error red-500 as #d93025', () => {
53
+ assert.match(css, /--ds-color-options-red-500:\s*#d93025/);
54
+ });
55
+
56
+ it('exports success green-700 as #1a7c3c', () => {
57
+ assert.match(css, /--ds-color-options-green-700:\s*#1a7c3c/);
58
+ });
59
+
60
+ it('exports rgba black overlay (a40) with correct alpha', () => {
61
+ // rgba(0, 0, 0, 0.4) — used for modal backdrop
62
+ assert.match(css, /--ds-color-options-black-a40:\s*rgba\(0,\s*0,\s*0,\s*0\.4\)/);
63
+ });
64
+
65
+ it('exports border-radius full as 50% (not 9999px)', () => {
66
+ assert.match(css, /--ds-border-radius-options-full:\s*50%/);
67
+ });
68
+
69
+ it('exports easing standard as "ease"', () => {
70
+ assert.match(css, /--ds-easing-options-standard:\s*ease/);
71
+ });
72
+ });
73
+
74
+ // ─── Tier 2 — Decisions: alias references via var() ───────────────────────
75
+
76
+ describe('Tier 2 — Decisions: var() alias references', () => {
77
+ it('color.text.primary references options neutral-900', () => {
78
+ // decisions.color.text.primary → {color.options.neutral.900}
79
+ assert.match(
80
+ css,
81
+ /--ds-decisions-color-text-primary:\s*var\(--ds-color-options-neutral-900\)/
82
+ );
83
+ });
84
+
85
+ it('color.text.inverse references options neutral-0', () => {
86
+ // decisions.color.text.inverse → {color.options.neutral.0}
87
+ assert.match(
88
+ css,
89
+ /--ds-decisions-color-text-inverse:\s*var\(--ds-color-options-neutral-0\)/
90
+ );
91
+ });
92
+
93
+ it('color.feedback.error.icon references options red-500', () => {
94
+ assert.match(
95
+ css,
96
+ /--ds-decisions-color-feedback-error-icon:\s*var\(--ds-color-options-red-500\)/
97
+ );
98
+ });
99
+
100
+ it('font.size.md references options font-size-14', () => {
101
+ // decisions.font.size.md → {font.size.options.14}
102
+ assert.match(
103
+ css,
104
+ /--ds-decisions-font-size-md:\s*var\(--ds-font-size-options-14\)/
105
+ );
106
+ });
107
+
108
+ it('font.weight.medium references options font-weight-medium', () => {
109
+ assert.match(
110
+ css,
111
+ /--ds-decisions-font-weight-medium:\s*var\(--ds-font-weight-options-medium\)/
112
+ );
113
+ });
114
+
115
+ it('border.radius.lg references options border-radius-6', () => {
116
+ // decisions.border.radius.lg → {border.radius.options.6}
117
+ assert.match(
118
+ css,
119
+ /--ds-decisions-border-radius-lg:\s*var\(--ds-border-radius-options-6\)/
120
+ );
121
+ });
122
+
123
+ it('border.radius.full references options border-radius-full', () => {
124
+ assert.match(
125
+ css,
126
+ /--ds-decisions-border-radius-full:\s*var\(--ds-border-radius-options-full\)/
127
+ );
128
+ });
129
+ });
130
+
131
+ // ─── Tier 3 — Components: three-tier alias chain ──────────────────────────
132
+
133
+ describe('Tier 3 — Components: three-tier var() chains', () => {
134
+ it('button.borderRadius references decisions border-radius-lg', () => {
135
+ // component.button.borderRadius → {decisions.border.radius.lg}
136
+ // camelCase borderRadius → kebab border-radius confirmed in button.component.css
137
+ assert.match(
138
+ css,
139
+ /--ds-component-button-border-radius:\s*var\(--ds-decisions-border-radius-lg\)/
140
+ );
141
+ });
142
+
143
+ it('button.primary.background references decisions color.text.primary', () => {
144
+ // component.button.primary.background → {decisions.color.text.primary}
145
+ assert.match(
146
+ css,
147
+ /--ds-component-button-primary-background:\s*var\(--ds-decisions-color-text-primary\)/
148
+ );
149
+ });
150
+
151
+ it('button.primary.text references decisions color.text.inverse', () => {
152
+ assert.match(
153
+ css,
154
+ /--ds-component-button-primary-text:\s*var\(--ds-decisions-color-text-inverse\)/
155
+ );
156
+ });
157
+
158
+ it('input.borderRadius references decisions border-radius-lg', () => {
159
+ assert.match(
160
+ css,
161
+ /--ds-component-input-border-radius:\s*var\(--ds-decisions-border-radius-lg\)/
162
+ );
163
+ });
164
+
165
+ it('modal.backdrop references decisions color.overlay.backdrop', () => {
166
+ assert.match(
167
+ css,
168
+ /--ds-component-modal-backdrop:\s*var\(--ds-decisions-color-overlay-backdrop\)/
169
+ );
170
+ });
171
+
172
+ it('tag.success.background references decisions feedback.success.surface', () => {
173
+ assert.match(
174
+ css,
175
+ /--ds-component-tag-success-background:\s*var\(--ds-decisions-color-feedback-success-surface\)/
176
+ );
177
+ });
178
+ });
179
+ });
package/tokens/tokens.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "450": { "value": "#bbbbbb" },
18
18
  "500": { "value": "#aaaaaa" },
19
19
  "550": { "value": "#999999" },
20
- "600": { "value": "#888888" },
20
+ "600": { "value": "#6f6f6f" },
21
21
  "650": { "value": "#666666" },
22
22
  "700": { "value": "#555555" },
23
23
  "800": { "value": "#333333" },
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "green": {
36
36
  "50": { "value": "#e6f4ea" },
37
- "700": { "value": "#1a7f3c" }
37
+ "700": { "value": "#1a7c3c" }
38
38
  },
39
39
  "yellow": {
40
40
  "50": { "value": "#fef3cd" },
@@ -149,7 +149,7 @@
149
149
  "secondary": { "value": "{color.options.neutral.700}", "comment": "De-emphasised text — ghost button, captions" },
150
150
  "muted": { "value": "{color.options.neutral.650}", "comment": "Quiet text — links, descriptions" },
151
151
  "subtle": { "value": "{color.options.neutral.600}", "comment": "Placeholder-level text — hints, metadata" },
152
- "placeholder": { "value": "{color.options.neutral.500}", "comment": "Input placeholder, empty states" },
152
+ "placeholder": { "value": "{color.options.neutral.600}", "comment": "Input placeholder, empty states" },
153
153
  "disabled": { "value": "{color.options.neutral.550}", "comment": "Disabled control text" },
154
154
  "inverse": { "value": "{color.options.neutral.0}", "comment": "Text on dark/filled backgrounds" }
155
155
  },