color tokens without `actions`?
@peterkulko is already working on this.
Since Dec 9, 2025.
- Dominant language
- JavaScript
- Stars
- 140
- Forks
- 100
- Avg merge
- 1h 3m
- Merged PRs (30d)
- 30
Description
Looking into https://discuss.openedx.org/t/friction-points-in-paragon/17442/
Error Messages
If you create a theme by any name other than
light, and define a colour design token calledprimary:{ "$type": "color", "color": { "primary": { "base": { "$value": "#15376D" } } } }the following error occurs on
npm run build-tokens:css ✔︎ ./paragon/build/core/variables.css ✔︎ ./paragon/build/core/custom-media-breakpoints.css An error occurred: TypeError: Cannot read properties of undefined (reading 'default')
One of the issues here is the lack of a helpful error, I made a PR to address that https://github.com/openedx/paragon/pull/3961
The call stack from that error led me to
Tracing the blame back this seems to have been added quite a while ago https://github.com/openedx/paragon/commit/927ff3bf2a58aff01b3240a4bc4669a3f2db87e1
In my debugging I found that in token.original.actions.default
token |
✅ |
original |
✅ |
actions |
❌ (undefined) |
@PKulkoRaccoonGang I'm hoping you can provide some more context on this. My main question is:
- What would happen if we added a nullish check for
actions? Would not having a default action set be a problem later on?
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index fb91c11f72..cdb27941a0 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -288,8 +288,11 @@ const initializeStyleDictionary = async ({ themes }) => {
// eslint-disable-next-line no-restricted-syntax
for (const token of tokens) {
// Get action token by reference
- const ref = sdUtils.getReferences(token.original.actions.default, dictionary.tokens)[0];
- token.actions = { default: `var(--${ref.name})` };
+ const defaultAction = token?.original?.actions?.default;
+ if (defaultAction) {
+ const ref = sdUtils.getReferences(defaultAction, dictionary.tokens)[0];
+ token.actions = { default: `var(--${ref.name})` };
+ }
// eslint-disable-next-line no-restricted-syntax
for (const funcName of utilityFunctionsToApply) {
utilityClasses += cssUtilities[funcName](token);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.