Update to Style Dictionary v4 #203

c4rlosviteri · 2024-08-14T00:22:51Z

This PR includes an update to SD v4 and its several configurations.

Migration guideline: https://styledictionary.com/version-4/migration/

mhewson · 2024-08-14T19:49:08Z

dist/docsite/android/dimens.xml

  <dimen name="cdr_text_default_subheadline_line_spacing">20.00dp</dimen>
+  <dimen name="cdr_text_default_body1_size">15.00sp</dimen>


is size intended to be added to the output?

dist/rei-dot-com/scss/media-queries.scss

mhewson · 2024-08-14T21:22:39Z

package.json

@@ -1,6 +1,7 @@
 {
  "name": "@rei/cdr-tokens",
-  "version": "12.2.0",
+  "version": "12.3.0",


are we expecting any breaking changes with this update?
https://rei-coop.atlassian.net/wiki/spaces/TP/pages/31031923/Cedar+Release+Checklist

package.json

style-dictionary/actions/include-display-less.mjs

mhewson · 2024-08-14T22:03:55Z

style-dictionary/build.mjs

+import { colorCssTransitive } from './transforms/color/color-css-transitive.mjs'
+import { hex8AndroidTransitive } from './transforms/color/hex8-android-transitive.mjs'
+import { uiColorTransitive } from './transforms/color/uicolor-transitive.mjs'
+import { spTransitive } from './transforms/size/sp-transitive.mjs'


Is this new?

Yes, for now to support token.attribute.category

style-dictionary/build.mjs

mhewson · 2024-08-14T22:08:07Z

style-dictionary/build.mjs

+import { js as jsFormat } from './formats/js.mjs'
+import { site } from './formats/site.mjs'
+import { figma as figmaFormat } from './formats/figma.mjs'
+import { androidColors, androidDimens, androidFontDimens } from './formats/android.mjs'


where are these coming from?

From the SD v4 source code, just changing the code a bit to support token.attributes.category

https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js

Most of this code is gonna be removed when the tokens are updated

Are you planning to update the tokens as a follow on of as part of this PR?

… workflow

mhewson · 2024-08-20T16:23:34Z

README.md

-value           # *required* The token value (most token values should be referenced from options)
-category        # *required* The tokens category (used to transform values for their specific platform)
+$value           # *required* The token value (most token values should be referenced from options)
+$type            # *required* The tokens category (used to transform values for their specific platform)


"# required The tokens category"
to
"# required The tokens type"

mhewson · 2024-08-20T16:24:05Z

README.md

@@ -130,13 +130,13 @@ Token output of above:

 Categories define how style-dictionary should transform values between platforms.

-For example, a category of "size" will transform to 'rem' for SCSS/LESS but 'dp' for Android. A category of "font-size" will still transform values to 'rem' for SCSS/LESS but 'sp' for Android.
+For example, a category of "size" will transform to 'rem' for SCSS/LESS but 'dp' for Android. A category of "fontSize" will still transform values to 'rem' for SCSS/LESS but 'sp' for Android.


category to type

mhewson · 2024-08-20T16:26:55Z

README.md

@@ -185,19 +185,19 @@ docs: {

 Deprecated tokens should be moved to a seprate file (or into the existing file) which corresponds to the release cycle in which they will be deprecated.

-For example, if tokens will be considered deprecated in the "Winter 2019" release they would be moved into a file called `deprecated-2019-winter.json5` in whichever directory they currently reside. Structure for naming the file is : `deprecated-<year>-<release>`
+For example, if tokens will be considered deprecated in the "Winter 2019" release they would be moved into a file called `deprecated-2024-summer.json5` in whichever directory they currently reside. Structure for naming the file is : `deprecated-<year>-<release>`


"Q4 2024"
deprecated-2024-Q2.json

mhewson · 2024-08-20T16:27:43Z

README.md

-            'on-dark': {
-              value: '{options.color.heart-of-darkness}',
-            category: 'color',
+  'deprecated-2019-winter': {  // <-------- `deprecated-<year>-<release>`


"deprecated-2024-Q4"

mhewson · 2024-08-20T16:31:10Z

dist/docsite/css/cdr-tokens.css

  --cdr-text-heading-serif-strong-900-size: 3.6rem;
  --cdr-text-heading-serif-strong-900-height: 4.4rem;
  --cdr-text-heading-serif-strong-1000-family: Stuart, "Stuart fallback", Georgia, serif;
  --cdr-text-heading-serif-strong-1000-style: normal;
  --cdr-text-heading-serif-strong-1000-weight: 600;
-  --cdr-text-heading-serif-strong-1000-spacing: 0px;
+  --cdr-text-heading-serif-strong-1000-spacing: 0;


this makes me feel that there should just be a much smaller heading spacing token
--cdr-text-heading-spacing: 0;

mhewson · 2024-08-20T17:42:34Z

dist/docsite/figma/figma.json

+          "filePath": "tokens/web/text-heading.json5",
+          "$extensions": {
+            "studio.tokens": {
+              "originalType": "letterSpacing"


this allows it to map back?

mhewson · 2024-08-20T17:51:52Z

dist/docsite/figma/figma.json

          }
        },
        "note": {
-          "value": "#c4b03b",
-          "type": "color"
+          "$value": "hsl(51, 54%, 50%)",


why are these converting to HSL?

mhewson · 2024-08-20T17:55:23Z

grid.mjs

+  'background-colors': formattedTokens
+}
+
+console.log(`https://contrast-grid.eightshapes.com/?${queryString.stringify(urlData)}`)


It would be super helpful to

add documentation on confluence that informs design and product on how to access this chart

add a GHPages directory and publish this to it so that its always available

mhewson · 2024-08-20T17:58:37Z

dist/rei-dot-com/json/global.json

      }
    },
    {
-      "value": "rgba(3, 3, 1, 0.9)",
+      "$value": "rgba(3, 3, 1, 0.9)",
+      "$type": "color",
      "alpha": 0.9,


do these alpha nodes do anything at this point? it looks like the alpha is included in the rgba

mhewson · 2024-08-20T18:01:16Z

dist/rei-dot-com/json/global.json

-      "alpha": 0.75,
-      "category": "color",
+      "$value": "rgba(12, 11, 8, 0.75)",
+      "alpha": ".75,",


I dont think the alpha should be a string?

package.json

Carlos Viteri added 4 commits August 13, 2024 11:15

chore: update to sd v4

7134ce2

chore: update dependencies and fix android output

f08c1d2

chore: fix concat files

93297a6

chore: fix ios output

84dd48a

c4rlosviteri requested review from mhewson and caseycarroll August 14, 2024 00:22

chore: update package lock

6ddbba3

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from ab5e757 to 6ddbba3 Compare August 14, 2024 00:28

chore: update pipeline

744d062

mhewson reviewed Aug 14, 2024

View reviewed changes

bugfix: fix android output and add filepath to figma to implement new…

ab7d6b8

… workflow

mhewson approved these changes Aug 15, 2024

View reviewed changes

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch 4 times, most recently from 19ec846 to 6eb3850 Compare August 19, 2024 17:42

mhewson reviewed Aug 20, 2024

View reviewed changes

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from 6eb3850 to da8ac6c Compare August 20, 2024 20:36

mhewson approved these changes Aug 20, 2024

View reviewed changes

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from da8ac6c to c55dbd5 Compare August 21, 2024 00:32

c4rlosviteri requested a review from mhewson August 21, 2024 01:57

chore: migrate to dtcg

959c43c

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from c55dbd5 to 959c43c Compare August 21, 2024 03:06

c4rlosviteri requested a review from sikhote August 27, 2024 17:51

sikhote and others added 2 commits August 28, 2024 16:12

merge next

f6fe644

fix global name convention

1bd960b

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from 706f09e to 1bd960b Compare August 30, 2024 16:52

Carlos Viteri added 3 commits August 30, 2024 13:39

remove async actions

7672cde

debug validation

702ab25

fix async build

ab809a0

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch 5 times, most recently from 0bafb87 to c41383c Compare September 6, 2024 17:54

remove redundant config

39a3a0a

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch 2 times, most recently from c86c90e to dfa04ff Compare September 6, 2024 18:06

change validate function

35638fa

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch 2 times, most recently from 0674c47 to ebc3d8b Compare September 12, 2024 15:11

remove async from actions

02b2ddf

c4rlosviteri force-pushed the pr/update-to-sd-v4 branch from ebc3d8b to 02b2ddf Compare September 12, 2024 15:18

sikhote reviewed Sep 20, 2024

View reviewed changes

package.json Show resolved Hide resolved

sikhote assigned c4rlosviteri Sep 20, 2024

sikhote removed the request for review from caseycarroll September 20, 2024 20:58

sikhote approved these changes Sep 20, 2024

View reviewed changes

mhewson approved these changes Sep 20, 2024

View reviewed changes

sikhote merged commit 47749f5 into next Sep 20, 2024
1 check passed

sikhote deleted the pr/update-to-sd-v4 branch September 24, 2024 17:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Style Dictionary v4 #203

Update to Style Dictionary v4 #203

c4rlosviteri commented Aug 14, 2024 •

edited

Loading

mhewson Aug 14, 2024

mhewson Aug 14, 2024

mhewson Aug 14, 2024

c4rlosviteri Aug 15, 2024

mhewson Aug 14, 2024

c4rlosviteri Aug 15, 2024

c4rlosviteri Aug 15, 2024

mhewson Aug 15, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

c4rlosviteri Aug 21, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

mhewson Aug 20, 2024

		<dimen name="cdr_text_default_subheadline_line_spacing">20.00dp</dimen>
		<dimen name="cdr_text_default_body1_size">15.00sp</dimen>

Update to Style Dictionary v4 #203

Update to Style Dictionary v4 #203

Conversation

c4rlosviteri commented Aug 14, 2024 • edited Loading

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

c4rlosviteri commented Aug 14, 2024 •

edited

Loading