color tokens without `actions`?

[brian-smith-tcril]

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 #3961

The call stack from that error led me to

paragon/tokens/style-dictionary.js

Line 291 in a6b6b0e

const ref = sdUtils.getReferences(token.original.actions.default, dictionary.tokens)[0];

Tracing the blame back this seems to have been added quite a while ago 927ff3b

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);