Skip to content

[07-C] [Project Solar / Phase 1 / Engineering Follow-ups] Improve validation for $modes #3397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: project-solar/phase-1/HDS-5202-5203-5204/dry-run-foundations
Choose a base branch
from
+21 −61
Open

[07-C] [Project Solar / Phase 1 / Engineering Follow-ups] Improve validation for $modes #3397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5dc44c
added `chalk` as devDependency
didoo Dec 2, 2025
ce89515
updated `build.ts` script for design tokens, to have validation of ex…
didoo Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@types/tinycolor2": "^1.4.6",
"@typescript-eslint/eslint-plugin": "^8.18.1",
"@typescript-eslint/parser": "^8.18.1",
"chalk": "^5.4.1",
"eslint": "^8.57.1",
"fs-extra": "^11.2.0",
"lodash-es": "^4.17.21",
Expand Down
9 changes: 7 additions & 2 deletions packages/tokens/scripts/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import StyleDictionary from 'style-dictionary';
import type { DesignToken, PlatformConfig } from 'style-dictionary/types';

import tinycolor from 'tinycolor2';
import chalk from 'chalk';

import fs from 'fs-extra';
import path from 'path';
Expand Down Expand Up @@ -42,10 +43,14 @@ for (const mode of modes) {
function replaceModes(slice: DesignToken) {
if (slice.$modes) {
if (mode in slice.$modes) {
// extra validation to catch instances where the `default` mode value is different from the `$value`
Copy link
Contributor

@KristinLBradley KristinLBradley Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using file: packages/tokens/src/products/shared/typography.json

On line 158, I tested changing the font-weight regular $value to "900" so that it no longer matched the $modes default value of "400" then ran pnpm build.

I saw a warning as expected, but it was repeated twice:

Processing mode "default"...
⚠️ WARNING - Found themed 'default' token with value different than '$value' (`400` instead of the expected `900`) - File: src/products/shared/typography.json
⚠️ WARNING - Found themed 'default' token with value different than '$value' (`400` instead of the expected `900`) - File: src/products/shared/typography.json

I tested again, changing another value and was also seeing a duplicated warning.

if (mode === 'default' && slice.$modes[mode] !== slice.$value) {
console.warn(`⚠️ ${chalk.yellow.bold('WARNING')} - Found themed 'default' token with value different than '$value' (\`${slice.$modes[mode]}\` instead of the expected \`${slice.$value}\`) - File: ${slice.filePath}`);
}
slice.$value = slice.$modes[mode];
} else {
// TODO! decide if we want to throw here (and test if it works, by removing a value from one of the test files) - see: https://hashicorp.atlassian.net/browse/HDS-5668
console.error(`❌ ERROR - Found themed token without '${mode}' value:`, JSON.stringify(slice, null, 2));
// we want to interrupt the execution of the script if one of the expected modes is missing
throw new Error(`❌ ${chalk.red.bold('ERROR')} - Found themed token without '${mode}' value - ${JSON.stringify(slice, null, 2)}`);
Copy link
Contributor

@KristinLBradley KristinLBradley Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using file: packages/tokens/src/products/shared/typography.json

I tried deleting one of the $modes entries and ran pnpm build and received an error as expected.

Processing mode "cds-g0"...
/Users/kristinbradley/dev/design-system/packages/tokens/scripts/build.ts:53
            throw new Error(`❌ ${chalk.red.bold('ERROR')} - Found themed token without '${mode}' value - ${JSON.stringify(slice, null, 2)}`);
                  ^

Error: ❌ ERROR - Found themed token without 'cds-g0' value - {
  "$type": "font-family",
  "$value": "{typography.font-stack.monospace.code.combined}",
  "$modes": {
    "default": "{typography.font-stack.monospace.code.combined}",
    "cds-g10": "{carbon.typography.font-family.mono}",
    "cds-g90": "{carbon.typography.font-family.mono}",
    "cds-g100": "{carbon.typography.font-family.mono}"
  },

}
} else {
Object.values(slice).forEach((value) => {
Expand Down
72 changes: 13 additions & 59 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.