feat: expose --output-references CLI arg for building tokens, registers filters, and updates CSS vars format #3203

adamstankiewicz · 2024-08-31T18:52:37Z

Note: Amongst other changes, addresses some of my feedback on the related, base PR: #3186

Changes

CLI Enhancements

Exposes --output-references CLI argument for build-tokens command. Defaults to true. Ensures brand package output with the CLI includes references in build output out-of-the-box.

Token Management Improvements

Registers filter(s) isThemeVariant.{'light'}, handling future theme variants when implemented (e.g., isThemeVariant.dark).
Migrates createCustomCSSVariables to use formattedVariables to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of outputReferences. If a token has modifications via modify, the modified base reference is not included in the output.
Updates custom fileHeader implementation, including a relative path to design tokens documentation.
Fixes bug with line-height tokens, switching their $type from dimension to number to resolve typography style regressions.
Updates typography tokens related to font size, font weight, and line-height for more consistent naming structure when taking into account mobile.
Updates @mobile-type SCSS mixin to support level-specific customization of mobile typography styles for display 1-4.
Renames "description" field in tokens to "$description"" per the DTCG format.

Documentation Site Enhancements

Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example.
Updates to "Colors" page in docs site:
- Displays token name instead of CSS variable in the color swatch previews (see screenshot below).
- Include accent-a and accent-b alongside other color names, rather than manually rendering Swatch for the accents.
- Modifies the grid styles for color swatch preview to be more responsive.
Resolves NaNpx bug in MeasuredItem component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved.
Updates CodeBlock styles on docs site to add its border and background color only to the LivePreview, not the entire CodeBlock example.
Reduces whitespace on docs site homepage.
Simplifies columns on docs site header, ensuring SiteTitle is horizontally aligned in the center.

Informational Notes

[inform] Related to CSS calc defined within tokens, while we could use sd-transforms to register a transform ts/resolveMath (source), it does not wrap math calculations with calc(...), effectively not evaluating the operation in CSS. There's several related issues (example, example) in style-dictionary and sd-transforms about this issue, with no current resolution; only hacky workarounds.

Deploy Preview

N/A

Updates "Colors" page color swatch previews:

Note: screenshot depicts a local checkout@edx/elm-theme

Merge Checklist

If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
Does your change adhere to the documented style conventions?
Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
Were your changes tested in the example app?
Is there adequate test coverage for your changes?
Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

Verify your changes were released to NPM at the expected version.
If you'd like, share your contribution in #show-and-tell.
🎉 🙌 Celebrate! Thanks for your contribution.

codecov · 2024-08-31T19:02:54Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.76%. Comparing base (0e1ef04) to head (88a2504).
Report is 1 commits behind head on Peter_Kulko/style-dictionary-v4.

Additional details and impacted files

@@                         Coverage Diff                         @@
##           Peter_Kulko/style-dictionary-v4    #3203      +/-   ##
===================================================================
- Coverage                            93.76%   93.76%   -0.01%     
===================================================================
  Files                                  229      229              
  Lines                                 3787     3785       -2     
  Branches                               902      879      -23     
===================================================================
- Hits                                  3551     3549       -2     
- Misses                                 229      232       +3     
+ Partials                                 7        4       -3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

adamstankiewicz · 2024-08-31T18:55:22Z

bin/paragon-scripts.js

+      {
+        name: '--output-references',
+        description: 'Include references in the build output.',
+        defaultValue: true,
+      },


[inform] Currently, running build-tokens with the CLI for a brand package (e.g., @edx/elm-theme), the CSS build output does not include the references, i.e. CSS variables, instead hardcoding the raw value.

I believe we want to default to always including references, even for brand packages, to mitigate risk that updating a reference for a style property, won't change the actual style due to the missing use of the CSS variable.

However, I think it's also reasonable to not want this in some cases so having it be an option seems reasonable.

100% agree. Good call/addition!

adamstankiewicz · 2024-08-31T18:55:47Z

bin/paragon-scripts.js

+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,


[inform] Improves the utility of warning/error messages resulting from style-dictionary during build-tokens.

adamstankiewicz · 2024-08-31T18:56:42Z

lib/build-tokens.js

@@ -52,24 +65,30 @@ async function buildTokensCommand(commandArgs) {
            destination: 'core/variables.css',
            filter: hasSourceTokensOnly ? 'isSource' : undefined,
            options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,


[inform] Now relies on the CLI option; outputReferences is now distinct from hasSourceTokensOnly.

adamstankiewicz · 2024-08-31T18:57:42Z

lib/build-tokens.js

+              formatting: {
+                fileHeaderTimestamp: true,
+              },


[inform] The custom formatters are updated to rely on the default style-dictionary util fileHeader, but rely on the optional formatting.fileHeaderTimestamp to still include the timestamp in the build output.

I don't feel we need the custom message, so long as the timestamp is included.

Good call! The default header looks like it covers everything we need, and I'm all for reducing complexity (even in small ways like this!)

/** * Do not edit directly, this file was auto-generated. * Generated on Tue, 03 Sep 2024 13:46:26 GMT */

adamstankiewicz · 2024-08-31T19:01:04Z

package.json

@@ -52,7 +52,8 @@
    "prepare": "husky || true",
    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
    "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
+    "cli:help": "./bin/paragon-scripts.js help"


[inform] Adds a way to run the CLI help command from Paragon root.

adamstankiewicz · 2024-08-31T19:03:18Z

styles/css/core/variables.css

-  --pgn-elevation-zindex-400: 400;
-  --pgn-elevation-zindex-200: 200;
-  --pgn-elevation-zindex-0: 0;
+  --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */


By relying on the formattedVariables helper function from style-dictionary/utils, we get inline comments from the token's description field, if any. Much of the other logic we had implemented is provided out-of-the-box (e.g., ordering of CSS variables).

adamstankiewicz · 2024-08-31T19:32:53Z

tokens/style-dictionary.js

-
-  return `${createCustomHeader(StyleDictionary, file).join('\n')}\n:root {\n${variables}\n}\n`;
+  const { outputReferences, formatting } = options;
+  const variables = formattedVariables({


[inform] Relies on helper function formattedVariables provided by style-dictionary/utils to format tokens as CSS variables instead of re-implementing much of its same logic here.

adamstankiewicz · 2024-08-31T21:54:31Z

src/Form/_FormText.scss

@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);


The token representing .small was refactored slightly to be named pgn-typography-font-size-sm.

var(--pgn-typography-font-size-sm)

We will also need to update the changed design tokens in the edx/elm-theme and ensure that in the consuming MFEs that have already switched to the design tokens in the test format, all tokens will be relevant.
Since we use only native CSS variables, consumers will not see an error/warning about a missing token. Such minor changes are unfortunately easy to miss.

I have described this issue before, maybe we should come back to it in the future. Please let me know your thoughts.

@PKulkoRaccoonGang I have a draft PR brewing to account for edx/elm-theme, based on the changes introduced in this PR and the broader v3 -> v4 upgrade (e.g., adopting the DTCG format).

Note: this linked PR also accounts for a few style bug fixes as well that I noticed while QA'ing elm-theme against the Paragon docs site locally.

I have described #3057 before, maybe we should come back to it in the future. Please let me know your thoughts.

100% agreed we should explore opportunities for linting and/or other validation of tokens, but as a future initiative.

adamstankiewicz · 2024-08-31T21:54:43Z

src/PageBanner/index.scss

@@ -4,12 +4,12 @@
  min-height: 36px;
  display: flex;
  flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);


The token representing .x-small was refactored slightly to be named pgn-typography-font-size-xs.

adamstankiewicz · 2024-08-31T21:56:37Z

styles/scss/core/_utilities.scss

+.font-size-normal {
+  font-size: $font-size-base !important;
 }


[inform] Adds a new CSS utility class, available to consumers, in place of the custom www-only .fs-16. This way, consumers have a way to override text back to normal/base font-size (e.g., when rendering text in a DataTable row that by default uses .small text).

adamstankiewicz · 2024-08-31T21:57:08Z

styles/scss/core/_variables.scss

@@ -738,14 +738,14 @@ $display4-weight: var(--pgn-typography-display-weight-4) !default;
 $display-line-height: var(--pgn-typography-display-line-height-base) !default;
 $display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default;

-$lead-font-size: var(--pgn-typography-font-size-lead) !default;
+$lead-font-size: var(--pgn-typography-font-size-lg) !default;


[inform] Renamed lead font size token to --pgn-typography-font-size-lg to be consistent with naming of other font size tokens.

adamstankiewicz · 2024-08-31T21:57:28Z

tokens/src/core/components/Alert.json

@@ -17,7 +17,7 @@
        "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
        "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
      },
-      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "dimension" }
+      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }


[inform] Fixes line number typography regressions.

adamstankiewicz · 2024-08-31T22:03:21Z

www/src/scss/base.scss

@@ -27,7 +27,3 @@ body {
 .container-fluid {
  max-width: none;
 }
-
-.fs-16 {


[inform] removed in favor of new .font-size-normal CSS utility class.

adamstankiewicz · 2024-09-02T00:31:27Z

www/src/scss/edxorg-theme.scss

+@import url("https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/light.min.css");


[inform] At the moment, 2U has no intentions to migrate the existing @edx/brand-edx.org. Instead, MFEs will cutover directly to our new tokens-compatible theme @edx/elm-theme upon upgrade to a Paragon version that relies on tokens.

adamstankiewicz · 2024-09-03T14:01:38Z

lib/build-tokens.js

+            filter: hasSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,


[inform] Currently, the registered format css/custom-variables performs filtering within its own logic (i.e., filtering on dictionary.allTokens), rather than treating the filter as a legit style-dictionary filter here. New filters are now registered to filter tokens by the appropriate themeVariant file path within the filter property here versus within the definition of css/custom-variables.

Note that other custom filters (e.g., isSource) can automatically opt into having sub-filters created specific to individual theme variants (e.g., isSource.light).

Just trying to wrap my head around this change a little bit. Before this change if hasSourceTokensOnly was false we'd have filter as undefined - does that mean it used to apply to all variants?

Previously, hasSourceTokensOnly: false would rely on filtering implemented within the format function, instead of as a true style-dictionary filter implemented with .registerFilter. That is, formatters should assume any token filtering happens before the format is applied, which already limits the contents of dictionary.allTokens we previously filtered on explicitly.

There's some more detailed rationale about this change provided on my review of Peter's PR here, notably:

IMHO, having unfilteredTokens in the dictionary here suggests a possible code smell that we might want to be doing such filtering as a legit custom filter registered with style-dictionary (similar to how we seem to define an isSource filter today via registerFilter).

See the current implementation of createCustomCSSVariables (source).

Thanks for the added context! 100% agree that it's better to have

a true style-dictionary filter implemented with .registerFilter

than

filtering implemented within the format function

brian-smith-tcril

This looks great! I left quite a few comments but they're mostly just questions. Thank you so much for all of this!

brian-smith-tcril · 2024-09-03T15:07:04Z

bin/paragon-scripts.js

+      {
+        name: '--output-references',
+        description: 'Include references in the build output.',
+        defaultValue: true,
+      },


100% agree. Good call/addition!

brian-smith-tcril · 2024-09-03T15:11:32Z

lib/build-tokens.js

+              formatting: {
+                fileHeaderTimestamp: true,
+              },


Good call! The default header looks like it covers everything we need, and I'm all for reducing complexity (even in small ways like this!)

/** * Do not edit directly, this file was auto-generated. * Generated on Tue, 03 Sep 2024 13:46:26 GMT */

brian-smith-tcril · 2024-09-03T15:15:15Z

lib/build-tokens.js

+            filter: hasSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,


Just trying to wrap my head around this change a little bit. Before this change if hasSourceTokensOnly was false we'd have filter as undefined - does that mean it used to apply to all variants?

brian-smith-tcril · 2024-09-03T15:19:15Z

lib/build-tokens.js

+              formatting: {
+                fileHeaderTimestamp: true,
+              },


I see this block now exists in a couple spots in this file. It's only 3 lines so I'm not worried about the copypasta, but I am curious as to if there's a "built-in" way to have a "global" formatting setting. If there isn't a "built-in" way I'm thinking it might be cool to move this out to a const like we have with defaultParams so if anyone wants to change the formatting they can do it in one place.

@adamstankiewicz I think this is the last lingering question I have before giving this a ✔️!

Plan to investigate later this afternoon. I do recall seeing somewhere in the style-dictionary docs about global settings, so it might be possible. If the global approach isn't possible, I agree abstracting out a defaultParams or similar would be worthwhile to be more DRY. I'll share an update later :)

Just pushed up a commit to re-introduce a custom file header, and apply it globally across all files in the css platform.

/** * Do not edit directly, this file was auto-generated. while transforming design tokens. * See <root>/tokens/README.md for more details. */

package.json

brian-smith-tcril · 2024-09-03T15:25:11Z

styles/scss/core/_typography.scss

 @mixin mobile-type {
-  .display-1,
-  .display-2,
-  .display-3,
+  .display-1 {
+    font-size: $display1-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-2 {
+    font-size: $display2-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-3 {
+    font-size: $display3-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
  .display-4 {
-    font-size: $display-mobile-size;
+    font-size: $display4-mobile-size;
    line-height: $display-mobile-line-height;
  }


Looking at this it seems we used to use the same size and line height for .display-1 through .display-4, and this updates it so we have different sizes but not different line heights? Just curious as to the reasoning behind that.

Great question! So, the new 2U Paragon Elm Theme has distinct sizes for mobile .display-1 through .display-4, but Paragon alpha doesn't currently actually have the tokens/CSS support for level-specific mobile display font sizes. As such, this PR introduces tokens for distinct levels of display size for mobile.

Regarding why there's not currently level-specific mobile line heights is that the Elm Theme continues to rely on a single line height across all mobile display levels (i.e., line-height: 1), which also happens to be the non-mobile default line height as well.

Paragon base theme defines display-mobile-line-height: 3.5rem, and Elm Theme overrides this to be display-mobile-line-height: 1.

There is also only a single line height value configured for all non-mobile display levels, too.

Note that using line-height: 1 (i.e., without a unit like rem) defines the line height to be equal to the font-size which is distinct per level. Given this, line-height: 1 is technically still results in distinct computed line heights per mobile display level.

That sounds very reasonable! I do wonder if supporting different custom line heights for each is something we want to do. I'd lean towards thinking we should, but I could definitely be convinced otherwise.

Yeah, supporting that as a use case is how I'm leaning, FWIW. Though, maybe we roll with it as is for this PR and @PKulkoRaccoonGang's related PR(s) to do the style-dictionary upgrade to v4, and treat level-specific display line heights as a standalone fast follow to these PRs before master -> alpha, given it's not necessarily related to the v4 upgrade itself per se and would probably be a reasonably scoped individual contribution.

brian-smith-tcril · 2024-09-03T15:26:52Z

styles/scss/core/_utilities.scss

@@ -21,13 +21,17 @@
 $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;

 .x-small {
-  font-size: $x-small-font-size;
+  font-size: $x-small-font-size !important;


I'm always slightly wary of !important, could you explain why it's needed here? (Depending on the reasoning it might be nice to add that as a comment in the file itself)

CSS utility class definitions generally should always have !important. See list of other existing utility classes on the Paragon docs site to observe their inclusion of !important.

See example(s) of CSS utility class definitions from Bootstrap v4 (source) as a reference, too.

Ah yes, I was getting towards the end of the diff and missed the filename.

It looks like almost everything else in the file has !important (only .icon-spin doesn't) - is the lack of !important in .icon-spin intentional?

Hmm, in additional icon-spin, the font-weight: normal property on .micro doesn't include !important either, though I don't it should for font-weight (you could want micro-sized copy with font-weight-bold, etc.). IMHO, .micro shouldn't be defining font-weight at all.

Regarding .icon-spin specifically, it appears to only be used with the StatefulButton component across all of the openedx GitHub organization. I actually wonder whether we truly want to consider this a global utility class or not, given its specific to icons.

For example, alternatively, should the Icon component expose a spin prop that extends the rendered icon to add the icon-spin class conditionally?

E.g., proposed usage from StatefulButton:

icons: { pending: <Icon src={SpinnerSimple} spin />, },

I'm struggling to identify use cases for .icon-spin outside of the Icon component. With icon-spin as a global CS utility class, I could also see it getting abused to make things spin/animate on the page that shouldn't (e.g., non-icons).

My 2c recommendation:

Remove .icon-spin as a CSS utility class, implementing it instead of a class name specific to Icon component.

Expose optional spin prop on Icon component.

Update StatefulButton to pass spin prop on its pending icon.

My 2c recommendation:

Remove .icon-spin as a CSS utility class, implementing it instead of a class name specific to Icon component.

Expose optional spin prop on Icon component.

Update StatefulButton to pass spin prop on its pending icon.

This absolutely sounds like the right move to me!

IMHO, .micro shouldn't be defining font-weight at all.

Do we have a sense of what might break if it didn't?

That being said, I don't think either of those should be part of this PR. Just making a couple follow-up issues to address them seems like the right move to me.

IMHO, .micro shouldn't be defining font-weight at all.

Do we have a sense of what might break if it didn't?

It shouldn't break anything. The font-weight in .micro is font-weight: normal, which corresponds to font-weight 400, the default body font weight used elsewhere.

That being said, I don't think either of those should be part of this PR. Just making a couple follow-up issues to address them seems like the right move to me.

100% 😄

brian-smith-tcril

PKulkoRaccoonGang

This is pretty cool! LGTM!

…, and updates CSS vars format **CLI Enhancements** * Exposes `--output-references` CLI argument for `build-tokens` command. Defaults to `true`. Ensures brand package output with the CLI includes references in build output out-of-the-box. **Token Management Improvements** * Registers filter(s) `isThemeVariant.{'light'}`, handling future theme variants when implemented (e.g., `isThemeVariant.dark`). * Migrates `createCustomCSSVariables` to use `formattedVariables` to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences`. If a token has modifications via `modify`, the modified base reference is not included in the output. * Updates custom fileHeader implementation, including a relative path to design tokens documentation. * Fixes bug with line-height tokens, switching their `$type` from `dimension` to `number` to resolve typography style regressions. * Updates typography tokens related to font size, font weight, and line-height for more consistent naming structure when taking into account mobile. * Updates `@mobile-type` SCSS mixin to support level-specific customization of mobile typography styles for display 1-4. * Renames `"description"` field in tokens to `"$description""` per the DTCG format. **Documentation Site Enhancements** * Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example. * Updates to "Colors" page in docs site: * Displays token name instead of CSS variable in the color swatch previews (see screenshot below). * Include `accent-a` and `accent-b` alongside other color names, rather than manually rendering `Swatch` for the accents. * Modifies the grid styles for color swatch preview to be more responsive. * Resolves `NaNpx` bug in `MeasuredItem` component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved. * Updates `CodeBlock` styles on docs site to add its border and background color only to the `LivePreview`, not the entire `CodeBlock` example. * Reduces whitespace on docs site homepage. * Simplifies columns on docs site header, ensuring `SiteTitle` is horizontally aligned in the center.

…s format (#3203) * feat: --output-references CLI arg for build-tokens, registers filters, and updates CSS vars format * Exposes `--output-references` CLI argument for `build-tokens` command. Defaults to `true`. Ensures brand package output with the CLI includes references in build output out-of-the-box. * Registers filter(s) `isThemeVariant.{'light'}`, handling future theme variants when implemented (e.g., `isThemeVariant.dark`). * Migrates `createCustomCSSVariables` to use `formattedVariables` to rely on out-of-the-box CSS variable formatting. The formatter still supports token-specific overrides of `outputReferences`. If a token has modifications via `modify`, the modified base reference is not included in the output. * Updates custom fileHeader implementation, including a relative path to design tokens documentation. * Fixes bug with line-height tokens, switching their `$type` from `dimension` to `number` to resolve typography style regressions. * Updates typography tokens related to font size, font weight, and line-height for more consistent naming structure when taking into account mobile. * Updates `@mobile-type` SCSS mixin to support level-specific customization of mobile typography styles for display 1-4. * Renames `"description"` field in tokens to `"$description""` per the DTCG format. * Ensures the "Typography" foundations page properly previews the correct font size for regular "Body" text and includes the missing "HEADING LABEL" example. * Updates to "Colors" page in docs site: * Displays token name instead of CSS variable in the color swatch previews (see screenshot below). * Include `accent-a` and `accent-b` alongside other color names, rather than manually rendering `Swatch` for the accents. * Modifies the grid styles for color swatch preview to be more responsive. * Resolves `NaNpx` bug in `MeasuredItem` component on docs site, while computing the measurements to display for an element (e.g., font size). Instead, it renders an empty block while measurements are resolved. * Updates `CodeBlock` styles on docs site to add its border and background color only to the `LivePreview`, not the entire `CodeBlock` example. * Reduces whitespace on docs site homepage. * Simplifies columns on docs site header, ensuring `SiteTitle` is horizontally aligned in the center.

adamstankiewicz force-pushed the ags/tokens-updates branch from 51fc736 to 2293939 Compare August 31, 2024 19:28

adamstankiewicz commented Aug 31, 2024

View reviewed changes

adamstankiewicz force-pushed the ags/tokens-updates branch from 2293939 to 1d894fe Compare August 31, 2024 19:34

adamstankiewicz marked this pull request as ready for review August 31, 2024 19:37

adamstankiewicz commented Aug 31, 2024

View reviewed changes

adamstankiewicz force-pushed the ags/tokens-updates branch from 2d2ff2d to 24c4d7b Compare September 1, 2024 16:35

adamstankiewicz requested review from PKulkoRaccoonGang and brian-smith-tcril September 1, 2024 16:36

adamstankiewicz force-pushed the ags/tokens-updates branch 2 times, most recently from f85546b to 6a04c04 Compare September 1, 2024 17:24

adamstankiewicz mentioned this pull request Sep 1, 2024

fix: adopt DTCG format, fix color scales, add build:watch, update typography tokens edx/elm-theme#24

Draft

adamstankiewicz force-pushed the ags/tokens-updates branch 3 times, most recently from 31019cb to b52b968 Compare September 1, 2024 21:54

adamstankiewicz mentioned this pull request Sep 1, 2024

feat: updating to Style Dictionary v4 #3186

Open

10 tasks

adamstankiewicz force-pushed the ags/tokens-updates branch 2 times, most recently from 1d3eb5a to aa2548c Compare September 2, 2024 00:30

adamstankiewicz commented Sep 2, 2024

View reviewed changes

adamstankiewicz force-pushed the ags/tokens-updates branch 7 times, most recently from 95b9de0 to ec15f2a Compare September 3, 2024 13:48

adamstankiewicz commented Sep 3, 2024

View reviewed changes

PKulkoRaccoonGang closed this Sep 3, 2024

PKulkoRaccoonGang deleted the ags/tokens-updates branch September 3, 2024 14:33

PKulkoRaccoonGang restored the ags/tokens-updates branch September 3, 2024 14:36

PKulkoRaccoonGang reopened this Sep 3, 2024

brian-smith-tcril reviewed Sep 3, 2024

View reviewed changes

PKulkoRaccoonGang mentioned this pull request Sep 3, 2024

DRAFT: tokens update part 2 #3207

Closed

10 tasks

brian-smith-tcril approved these changes Sep 3, 2024

View reviewed changes

PKulkoRaccoonGang approved these changes Sep 3, 2024

View reviewed changes

adamstankiewicz force-pushed the ags/tokens-updates branch from 8234010 to 88a2504 Compare September 3, 2024 20:19

adamstankiewicz merged commit 63a61de into Peter_Kulko/style-dictionary-v4 Sep 3, 2024
6 checks passed

adamstankiewicz deleted the ags/tokens-updates branch September 3, 2024 20:37

adamstankiewicz restored the ags/tokens-updates branch September 7, 2024 21:55

		@import url("https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/core.min.css");
		@import url("https://cdn.jsdelivr.net/npm/@edx/[email protected]/dist/light.min.css");

feat: expose --output-references CLI arg for building tokens, registers filters, and updates CSS vars format #3203

feat: expose --output-references CLI arg for building tokens, registers filters, and updates CSS vars format #3203

Conversation

adamstankiewicz commented Aug 31, 2024 • edited Loading

Changes

CLI Enhancements

Token Management Improvements

Documentation Site Enhancements

Informational Notes

Deploy Preview

Merge Checklist

Post-merge Checklist

codecov bot commented Aug 31, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brian-smith-tcril Sep 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamstankiewicz Sep 3, 2024 • edited Loading

Choose a reason for hiding this comment

brian-smith-tcril left a comment

Choose a reason for hiding this comment

PKulkoRaccoonGang left a comment

Choose a reason for hiding this comment

adamstankiewicz commented Aug 31, 2024 •

edited

Loading

codecov bot commented Aug 31, 2024 •

edited

Loading

brian-smith-tcril Sep 3, 2024 •

edited

Loading

adamstankiewicz Sep 3, 2024 •

edited

Loading