openedx / openedx/paragon

color tokens without `actions`?

Open
#3,962 1 comment 1 reaction 1 assignee View on GitHub

@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 called primary:

{
  "$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

https://github.com/openedx/paragon/blob/a6b6b0ed84807eb2f3c92c5e6171624ceb491bc3/tokens/style-dictionary.js#L291

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.