Hello! We are migrating the design system for the Open edX platform to style-dictionary. One of the requirements for the Open edX platform is that it must support custom theming / overrides of the core design tokens. We are able to do this through by configuring style-dictionary to use include to import the core design tokens and source to import the custom tokens. The source tokens override the include tokens, as expected, which matches the documentation here:
My question lies in the expected order of precedence for the tokens option as it relates to include and source options. In the code, it looks like the inline tokens passed through tokens have the least priority, getting overridden by the include tokens and then the source tokens. The documentation doesn't entirely make it clear how tokens interacts with source tokens.
For additional context, we have a use case where we would like the tokens to take precedence over both include and source tokens, thus treating them similar to inline CSS styles where inline styles do indeed have precedence.
Also, per the above docs, it looks as if the source option is required even though in the source code, it's conditionally handled, and thus technically optional (same for tokens, really).
Through this issue, I'm hoping to:
Clarify the intent behind the current priority order of inline tokens < include tokens < source tokens (source code).
Understand whether its current priority order matches the above intent.
Understand whether this priority order should be customizable and/or fixed such that inline tokens take precedence over include and source tokens to more closely match the documentation's mention that include tokens as the "base collection of design tokens", implying tokens should overwrite include tokens.
Hello! We are migrating the design system for the Open edX platform to
style-dictionary. One of the requirements for the Open edX platform is that it must support custom theming / overrides of the core design tokens. We are able to do this through by configuringstyle-dictionaryto useincludeto import the core design tokens andsourceto import the custom tokens. Thesourcetokens override theincludetokens, as expected, which matches the documentation here:My question lies in the expected order of precedence for the
tokensoption as it relates toincludeandsourceoptions. In the code, it looks like the inline tokens passed throughtokenshave the least priority, getting overridden by theincludetokens and then thesourcetokens. The documentation doesn't entirely make it clear howtokensinteracts withsourcetokens.https://github.com/amzn/style-dictionary/blob/e1626a7d60e084bff18c4dc7f45e964c3ae00f54/lib/extend.js#L144
For additional context, we have a use case where we would like the
tokensto take precedence over bothincludeandsourcetokens, thus treating them similar to inline CSS styles where inline styles do indeed have precedence.Also, per the above docs, it looks as if the
sourceoption is required even though in the source code, it's conditionally handled, and thus technically optional (same fortokens, really).Through this issue, I'm hoping to:
inlinetokens <includetokens <sourcetokens (source code).includeandsourcetokens to more closely match the documentation's mention thatincludetokens as the "base collection of design tokens", implyingtokensshould overwriteincludetokens.Thanks!