From 0cab56d4f3d61b6174dff838b9f4776e9c698165 Mon Sep 17 00:00:00 2001 From: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com> Date: Mon, 7 Oct 2024 13:57:20 -0600 Subject: [PATCH] fix(web): Fix type and breakpoints tokens (#124) This PR fixes system type and breakpoints tokens. [category:Web Tokens] Release Note: Type tokens have been fixed to refer to system font tokens instead of base. Breakpoints tokens have been fixed to have px value instead of rem. Co-authored-by: Raisa Primerova --- .eslintrc.js | 13 +-- packages/canvas-tokens/_refs.json | 1 + packages/canvas-tokens/build.ts | 1 + packages/canvas-tokens/tokens/web/sys.json | 96 +++++++++---------- packages/canvas-tokens/utils/filters/index.ts | 5 + .../canvas-tokens/utils/tokenStudioParser.ts | 33 +------ .../canvas-tokens/utils/transformers/index.ts | 10 ++ scripts/utils/generateRefs.ts | 48 ++++++++++ scripts/utils/sync-base-config.ts | 3 + scripts/utils/sync-brand-config.ts | 3 + scripts/utils/sync-sys-config.ts | 3 + tsconfig.json | 5 + 12 files changed, 136 insertions(+), 85 deletions(-) create mode 100644 packages/canvas-tokens/_refs.json create mode 100644 scripts/utils/generateRefs.ts diff --git a/.eslintrc.js b/.eslintrc.js index cb82139..045c18b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,15 +1,10 @@ module.exports = { root: true, parser: '@typescript-eslint/parser', - plugins: [ - '@typescript-eslint', - ], - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier', - ], + plugins: ['@typescript-eslint'], + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], rules: { - "@typescript-eslint/no-explicit-any": "off" + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/ban-ts-ignore': 'off', }, }; diff --git a/packages/canvas-tokens/_refs.json b/packages/canvas-tokens/_refs.json new file mode 100644 index 0000000..f45c9c2 --- /dev/null +++ b/packages/canvas-tokens/_refs.json @@ -0,0 +1 @@ +{"base":["palette.cinnamon.100","palette.cinnamon.100","palette.cinnamon.200","palette.cinnamon.200","palette.cinnamon.300","palette.cinnamon.300","palette.cinnamon.400","palette.cinnamon.400","palette.cinnamon.500","palette.cinnamon.500","palette.cinnamon.600","palette.cinnamon.600","palette.peach.100","palette.peach.100","palette.peach.200","palette.peach.200","palette.peach.300","palette.peach.300","palette.peach.400","palette.peach.400","palette.peach.500","palette.peach.500","palette.peach.600","palette.peach.600","palette.chili-mango.100","palette.chili-mango.100","palette.chili-mango.200","palette.chili-mango.200","palette.chili-mango.300","palette.chili-mango.300","palette.chili-mango.400","palette.chili-mango.400","palette.chili-mango.500","palette.chili-mango.500","palette.chili-mango.600","palette.chili-mango.600","palette.cantaloupe.100","palette.cantaloupe.100","palette.cantaloupe.200","palette.cantaloupe.200","palette.cantaloupe.300","palette.cantaloupe.300","palette.cantaloupe.400","palette.cantaloupe.400","palette.cantaloupe.500","palette.cantaloupe.500","palette.cantaloupe.600","palette.cantaloupe.600","palette.sour-lemon.100","palette.sour-lemon.100","palette.sour-lemon.200","palette.sour-lemon.200","palette.sour-lemon.300","palette.sour-lemon.300","palette.sour-lemon.400","palette.sour-lemon.400","palette.sour-lemon.500","palette.sour-lemon.500","palette.sour-lemon.600","palette.sour-lemon.600","palette.juicy-pear.100","palette.juicy-pear.100","palette.juicy-pear.200","palette.juicy-pear.200","palette.juicy-pear.300","palette.juicy-pear.300","palette.juicy-pear.400","palette.juicy-pear.400","palette.juicy-pear.500","palette.juicy-pear.500","palette.juicy-pear.600","palette.juicy-pear.600","palette.kiwi.100","palette.kiwi.100","palette.kiwi.200","palette.kiwi.200","palette.kiwi.300","palette.kiwi.300","palette.kiwi.400","palette.kiwi.400","palette.kiwi.500","palette.kiwi.500","palette.kiwi.600","palette.kiwi.600","palette.green-apple.100","palette.green-apple.100","palette.green-apple.200","palette.green-apple.200","palette.green-apple.300","palette.green-apple.300","palette.green-apple.400","palette.green-apple.400","palette.green-apple.500","palette.green-apple.500","palette.green-apple.600","palette.green-apple.600","palette.watermelon.100","palette.watermelon.100","palette.watermelon.200","palette.watermelon.200","palette.watermelon.300","palette.watermelon.300","palette.watermelon.400","palette.watermelon.400","palette.watermelon.500","palette.watermelon.500","palette.watermelon.600","palette.watermelon.600","palette.jewel.100","palette.jewel.100","palette.jewel.200","palette.jewel.200","palette.jewel.300","palette.jewel.300","palette.jewel.400","palette.jewel.400","palette.jewel.500","palette.jewel.500","palette.jewel.600","palette.jewel.600","palette.toothpaste.100","palette.toothpaste.100","palette.toothpaste.200","palette.toothpaste.200","palette.toothpaste.300","palette.toothpaste.300","palette.toothpaste.400","palette.toothpaste.400","palette.toothpaste.500","palette.toothpaste.500","palette.toothpaste.600","palette.toothpaste.600","palette.blueberry.100","palette.blueberry.100","palette.blueberry.200","palette.blueberry.200","palette.blueberry.300","palette.blueberry.300","palette.blueberry.400","palette.blueberry.400","palette.blueberry.500","palette.blueberry.500","palette.blueberry.600","palette.blueberry.600","palette.plum.100","palette.plum.100","palette.plum.200","palette.plum.200","palette.plum.300","palette.plum.300","palette.plum.400","palette.plum.400","palette.plum.500","palette.plum.500","palette.plum.600","palette.plum.600","palette.berry-smoothie.100","palette.berry-smoothie.100","palette.berry-smoothie.200","palette.berry-smoothie.200","palette.berry-smoothie.300","palette.berry-smoothie.300","palette.berry-smoothie.400","palette.berry-smoothie.400","palette.berry-smoothie.500","palette.berry-smoothie.500","palette.berry-smoothie.600","palette.berry-smoothie.600","palette.blackberry.100","palette.blackberry.100","palette.blackberry.200","palette.blackberry.200","palette.blackberry.300","palette.blackberry.300","palette.blackberry.400","palette.blackberry.400","palette.blackberry.500","palette.blackberry.500","palette.blackberry.600","palette.blackberry.600","palette.island-punch.100","palette.island-punch.100","palette.island-punch.200","palette.island-punch.200","palette.island-punch.300","palette.island-punch.300","palette.island-punch.400","palette.island-punch.400","palette.island-punch.500","palette.island-punch.500","palette.island-punch.600","palette.island-punch.600","palette.grape-soda.100","palette.grape-soda.100","palette.grape-soda.200","palette.grape-soda.200","palette.grape-soda.300","palette.grape-soda.300","palette.grape-soda.400","palette.grape-soda.400","palette.grape-soda.500","palette.grape-soda.500","palette.grape-soda.600","palette.grape-soda.600","palette.pomegranate.100","palette.pomegranate.100","palette.pomegranate.200","palette.pomegranate.200","palette.pomegranate.300","palette.pomegranate.300","palette.pomegranate.400","palette.pomegranate.400","palette.pomegranate.500","palette.pomegranate.500","palette.pomegranate.600","palette.pomegranate.600","palette.fruit-punch.100","palette.fruit-punch.100","palette.fruit-punch.200","palette.fruit-punch.200","palette.fruit-punch.300","palette.fruit-punch.300","palette.fruit-punch.400","palette.fruit-punch.400","palette.fruit-punch.500","palette.fruit-punch.500","palette.fruit-punch.600","palette.fruit-punch.600","palette.root-beer.100","palette.root-beer.100","palette.root-beer.200","palette.root-beer.200","palette.root-beer.300","palette.root-beer.300","palette.root-beer.400","palette.root-beer.400","palette.root-beer.500","palette.root-beer.500","palette.root-beer.600","palette.root-beer.600","palette.toasted-marshmallow.100","palette.toasted-marshmallow.100","palette.toasted-marshmallow.200","palette.toasted-marshmallow.200","palette.toasted-marshmallow.300","palette.toasted-marshmallow.300","palette.toasted-marshmallow.400","palette.toasted-marshmallow.400","palette.toasted-marshmallow.500","palette.toasted-marshmallow.500","palette.toasted-marshmallow.600","palette.toasted-marshmallow.600","palette.coconut.100","palette.coconut.100","palette.coconut.200","palette.coconut.200","palette.coconut.300","palette.coconut.300","palette.coconut.400","palette.coconut.400","palette.coconut.500","palette.coconut.500","palette.coconut.600","palette.coconut.600","palette.cappuccino.100","palette.cappuccino.100","palette.cappuccino.200","palette.cappuccino.200","palette.cappuccino.300","palette.cappuccino.300","palette.cappuccino.400","palette.cappuccino.400","palette.cappuccino.500","palette.cappuccino.500","palette.cappuccino.600","palette.cappuccino.600","palette.licorice.100","palette.licorice.100","palette.licorice.200","palette.licorice.200","palette.licorice.300","palette.licorice.300","palette.licorice.400","palette.licorice.400","palette.licorice.500","palette.licorice.500","palette.licorice.600","palette.licorice.600","palette.soap.100","palette.soap.100","palette.soap.200","palette.soap.200","palette.soap.300","palette.soap.300","palette.soap.400","palette.soap.400","palette.soap.500","palette.soap.500","palette.soap.600","palette.soap.600","palette.french-vanilla.100","palette.french-vanilla.100","palette.french-vanilla.200","palette.french-vanilla.200","palette.french-vanilla.300","palette.french-vanilla.300","palette.french-vanilla.400","palette.french-vanilla.400","palette.french-vanilla.500","palette.french-vanilla.500","palette.french-vanilla.600","palette.french-vanilla.600","palette.black-pepper.100","palette.black-pepper.100","palette.black-pepper.200","palette.black-pepper.200","palette.black-pepper.300","palette.black-pepper.300","palette.black-pepper.400","palette.black-pepper.400","palette.black-pepper.500","palette.black-pepper.500","palette.black-pepper.600","palette.black-pepper.600","opacity.100","opacity.100","opacity.200","opacity.200","opacity.300","opacity.300","opacity.400","opacity.400","opacity.500","opacity.500","font-size.25","font-size.25","font-size.50","font-size.50","font-size.75","font-size.75","font-size.100","font-size.100","font-size.125","font-size.125","font-size.150","font-size.150","font-size.200","font-size.200","font-size.250","font-size.250","font-size.300","font-size.300","font-size.400","font-size.400","font-size.500","font-size.500","font-size.600","font-size.600","font-size.750","font-size.750","font-size.900","font-size.900","font-size.1050","font-size.1050","line-height.50","line-height.50","line-height.100","line-height.100","line-height.150","line-height.150","line-height.200","line-height.200","line-height.250","line-height.250","line-height.300","line-height.300","line-height.350","line-height.350","line-height.400","line-height.400","line-height.500","line-height.500","line-height.600","line-height.600","line-height.750","line-height.750","line-height.900","line-height.900","line-height.1050","line-height.1050","typescale.size.default","typescale.size.default","typescale.size.heading","typescale.size.heading","typescale.size.title","typescale.size.title","typescale.size.display","typescale.size.display","typescale.height.default","typescale.height.default","typescale.height.title","typescale.height.title","typescale.height.display","typescale.height.display","font-family.50","font-family.50","font-family.50","font-family.100","font-family.100","font-family.200","font-family.200","font-weight.300","font-weight.300","font-weight.400","font-weight.400","font-weight.500","font-weight.500","font-weight.700","font-weight.700","letter-spacing.50","letter-spacing.50","letter-spacing.100","letter-spacing.100","letter-spacing.150","letter-spacing.150","letter-spacing.200","letter-spacing.200","level","level","level","shadow.1.100.y","shadow.1.100.y","shadow.1.100.blur","shadow.1.100.blur","shadow.1.200.y","shadow.1.200.y","shadow.1.200.blur","shadow.1.200.blur","shadow.2.100.y","shadow.2.100.y","shadow.2.100.blur","shadow.2.100.blur","shadow.2.200.y","shadow.2.200.y","shadow.2.200.blur","shadow.2.200.blur","shadow.3.100.y","shadow.3.100.y","shadow.3.100.blur","shadow.3.100.blur","shadow.3.200.y","shadow.3.200.y","shadow.3.200.blur","shadow.3.200.blur","shadow.4.100.y","shadow.4.100.y","shadow.4.100.blur","shadow.4.100.blur","shadow.4.200.y","shadow.4.200.y","shadow.4.200.blur","shadow.4.200.blur","shadow.5.100.y","shadow.5.100.y","shadow.5.100.blur","shadow.5.100.blur","shadow.5.200.y","shadow.5.200.y","shadow.5.200.blur","shadow.5.200.blur","shadow.6.100.y","shadow.6.100.y","shadow.6.100.blur","shadow.6.100.blur","shadow.6.200.y","shadow.6.200.y","shadow.6.200.blur","shadow.6.200.blur","extended.palette.dragon-fruit.100","extended.palette.dragon-fruit.100","extended.palette.dragon-fruit.200","extended.palette.dragon-fruit.200","extended.palette.dragon-fruit.300","extended.palette.dragon-fruit.300","extended.palette.dragon-fruit.400","extended.palette.dragon-fruit.400","extended.palette.dragon-fruit.500","extended.palette.dragon-fruit.500","extended.palette.dragon-fruit.600","extended.palette.dragon-fruit.600"],"brand":["primary.lightest","primary.lightest","primary.light","primary.light","primary.dark","primary.dark","primary.darkest","primary.darkest","primary.accent","primary.accent","alert.lightest","alert.lightest","alert.light","alert.light","alert.dark","alert.dark","alert.darkest","alert.darkest","alert.accent","alert.accent","error.lightest","error.lightest","error.light","error.light","error.dark","error.dark","error.darkest","error.darkest","error.accent","error.accent","success.lightest","success.lightest","success.light","success.light","success.dark","success.dark","success.darkest","success.darkest","success.accent","success.accent","neutral.lightest","neutral.lightest","neutral.light","neutral.light","neutral.dark","neutral.dark","neutral.darkest","neutral.darkest","neutral.accent","neutral.accent","common.focus-outline","common.focus-outline","common.error-inner","common.error-inner","common.alert-inner","common.alert-inner","gradient.primary","gradient.primary"],"sys":["color.bg.default","color.bg.default","color.bg.default","color.bg.transparent","color.bg.transparent","color.bg.transparent","color.bg.overlay","color.bg.overlay","color.bg.overlay","color.bg.translucent","color.bg.translucent","color.bg.translucent","color.bg.alt.default","color.bg.alt.default","color.bg.alt.default","color.bg.alt.soft","color.bg.alt.soft","color.bg.alt.soft","color.bg.alt.softer","color.bg.alt.softer","color.bg.alt.softer","color.bg.alt.strong","color.bg.alt.strong","color.bg.alt.strong","color.bg.alt.stronger","color.bg.alt.stronger","color.bg.alt.stronger","color.bg.muted.softer","color.bg.muted.softer","color.bg.muted.soft","color.bg.muted.soft","color.bg.muted.default","color.bg.muted.default","color.bg.muted.strong","color.bg.muted.strong","color.bg.contrast.default","color.bg.contrast.default","color.bg.contrast.default","color.bg.contrast.strong","color.bg.contrast.strong","color.bg.contrast.strong","color.bg.primary.default","color.bg.primary.default","color.bg.primary.default","color.bg.primary.soft","color.bg.primary.soft","color.bg.primary.soft","color.bg.primary.strong","color.bg.primary.strong","color.bg.primary.strong","color.bg.primary.stronger","color.bg.primary.stronger","color.bg.primary.stronger","color.bg.positive.default","color.bg.positive.default","color.bg.positive.default","color.bg.positive.softer","color.bg.positive.softer","color.bg.positive.softer","color.bg.positive.strong","color.bg.positive.strong","color.bg.positive.strong","color.bg.positive.stronger","color.bg.positive.stronger","color.bg.positive.stronger","color.bg.caution.default","color.bg.caution.default","color.bg.caution.default","color.bg.caution.softer","color.bg.caution.softer","color.bg.caution.softer","color.bg.caution.strong","color.bg.caution.strong","color.bg.caution.strong","color.bg.caution.stronger","color.bg.caution.stronger","color.bg.caution.stronger","color.bg.critical.default","color.bg.critical.default","color.bg.critical.default","color.bg.critical.softer","color.bg.critical.softer","color.bg.critical.softer","color.bg.critical.strong","color.bg.critical.strong","color.bg.critical.strong","color.bg.critical.stronger","color.bg.critical.stronger","color.bg.critical.stronger","color.text.default","color.text.default","color.text.default","color.text.disabled","color.text.disabled","color.text.disabled","color.text.hint","color.text.hint","color.text.hint","color.text.strong","color.text.strong","color.text.strong","color.text.stronger","color.text.stronger","color.text.stronger","color.text.inverse","color.text.inverse","color.text.inverse","color.text.critical.default","color.text.critical.default","color.text.critical.default","color.text.primary.default","color.text.primary.default","color.text.primary.default","color.text.primary.strong","color.text.primary.strong","color.text.primary.strong","color.text.primary.stronger","color.text.primary.stronger","color.text.primary.stronger","color.text.caution.default","color.text.caution.default","color.text.caution.default","color.text.caution.strong","color.text.caution.strong","color.text.caution.strong","color.icon.default","color.icon.default","color.icon.default","color.icon.soft","color.icon.soft","color.icon.soft","color.icon.strong","color.icon.strong","color.icon.strong","color.icon.inverse","color.icon.inverse","color.icon.inverse","color.icon.primary.default","color.icon.primary.default","color.icon.primary.default","color.icon.primary.strong","color.icon.primary.strong","color.icon.primary.strong","color.icon.positive.default","color.icon.positive.default","color.icon.positive.default","color.icon.critical.default","color.icon.critical.default","color.icon.critical.default","color.icon.caution.default","color.icon.caution.default","color.icon.caution.default","color.icon.caution.strong","color.icon.caution.strong","color.icon.caution.strong","color.fg.default","color.fg.default","color.fg.default","color.fg.strong","color.fg.strong","color.fg.strong","color.fg.stronger","color.fg.stronger","color.fg.stronger","color.fg.disabled","color.fg.disabled","color.fg.disabled","color.fg.inverse","color.fg.inverse","color.fg.inverse","color.fg.critical.default","color.fg.critical.default","color.fg.critical.default","color.fg.muted.soft","color.fg.muted.soft","color.fg.muted.soft","color.fg.muted.default","color.fg.muted.default","color.fg.muted.default","color.fg.muted.strong","color.fg.muted.strong","color.fg.muted.stronger","color.fg.muted.stronger","color.fg.primary.default","color.fg.primary.default","color.fg.primary.default","color.fg.primary.strong","color.fg.primary.strong","color.fg.primary.strong","color.fg.caution.default","color.fg.caution.default","color.fg.caution.default","color.fg.caution.strong","color.fg.caution.strong","color.fg.caution.strong","color.fg.contrast.default","color.fg.contrast.default","color.fg.contrast.default","color.fg.contrast.strong","color.fg.contrast.strong","color.fg.contrast.strong","color.border.input.disabled","color.border.input.disabled","color.border.input.disabled","color.border.input.default","color.border.input.default","color.border.input.default","color.border.input.strong","color.border.input.strong","color.border.input.strong","color.border.input.inverse","color.border.input.inverse","color.border.input.inverse","color.border.contrast.default","color.border.contrast.default","color.border.contrast.default","color.border.contrast.strong","color.border.contrast.strong","color.border.contrast.strong","color.border.primary.default","color.border.primary.default","color.border.primary.default","color.border.critical.default","color.border.critical.default","color.border.critical.default","color.border.caution.default","color.border.caution.default","color.border.caution.default","color.border.caution.strong","color.border.caution.strong","color.border.caution.strong","color.border.transparent","color.border.transparent","color.border.transparent","color.border.inverse","color.border.inverse","color.border.inverse","color.border.divider","color.border.divider","color.border.divider","color.border.container","color.border.container","color.border.container","color.shadow.1","color.shadow.1","color.shadow.1","color.shadow.1","color.shadow.2","color.shadow.2","color.shadow.2","color.shadow.2","color.shadow.default","color.shadow.default","color.shadow.default","color.shadow.default","color.static.blue.default","color.static.blue.default","color.static.blue.default","color.static.blue.soft","color.static.blue.soft","color.static.blue.soft","color.static.blue.strong","color.static.blue.strong","color.static.blue.strong","color.static.gold.stronger","color.static.gold.stronger","color.static.gold.stronger","color.static.green.default","color.static.green.default","color.static.green.default","color.static.green.soft","color.static.green.soft","color.static.green.soft","color.static.green.strong","color.static.green.strong","color.static.green.strong","color.static.red.default","color.static.red.default","color.static.red.default","color.static.red.soft","color.static.red.soft","color.static.red.soft","color.static.red.strong","color.static.red.strong","color.static.red.strong","color.static.orange.default","color.static.orange.default","color.static.orange.default","color.static.orange.soft","color.static.orange.soft","color.static.orange.soft","color.static.orange.strong","color.static.orange.strong","color.static.orange.strong","color.static.gray.default","color.static.gray.default","color.static.gray.default","color.static.gray.soft","color.static.gray.soft","color.static.gray.soft","color.static.gray.strong","color.static.gray.strong","color.static.gray.strong","color.static.gray.stronger","color.static.gray.stronger","color.static.gray.stronger","color.static.white","color.static.white","color.static.white","color.static.black","color.static.black","color.static.black","breakpoints.zero","breakpoints.zero","breakpoints.zero","breakpoints.s","breakpoints.s","breakpoints.s","breakpoints.m","breakpoints.m","breakpoints.m","breakpoints.l","breakpoints.l","breakpoints.l","breakpoints.xl","breakpoints.xl","breakpoints.xl","depth.1","depth.1","depth.1","depth.2","depth.2","depth.2","depth.3","depth.3","depth.3","depth.4","depth.4","depth.4","depth.5","depth.5","depth.5","depth.6","depth.6","depth.6","opacity.zero","opacity.zero","opacity.zero","opacity.disabled","opacity.disabled","opacity.disabled","opacity.overlay","opacity.overlay","opacity.overlay","opacity.contrast","opacity.contrast","opacity.contrast","opacity.full","opacity.full","opacity.full","opacity.shadow.first","opacity.shadow.first","opacity.shadow.first","opacity.shadow.second","opacity.shadow.second","opacity.shadow.second","shape.zero","shape.zero","shape.zero","shape.half","shape.half","shape.half","shape.x1","shape.x1","shape.x1","shape.x2","shape.x2","shape.x2","shape.round","shape.round","shape.round","space.zero","space.zero","space.zero","space.x1","space.x1","space.x1","space.x2","space.x2","space.x2","space.x3","space.x3","space.x3","space.x4","space.x4","space.x4","space.x6","space.x6","space.x6","space.x8","space.x8","space.x8","space.x10","space.x10","space.x10","space.x16","space.x16","space.x16","space.x20","space.x20","space.x20","font-family.default","font-family.default","font-family.mono","font-family.mono","font-family.global","font-family.global","font-size.subtext.small","font-size.subtext.small","font-size.subtext.medium","font-size.subtext.medium","font-size.subtext.large","font-size.subtext.large","font-size.body.small","font-size.body.small","font-size.body.medium","font-size.body.medium","font-size.body.large","font-size.body.large","font-size.heading.small","font-size.heading.small","font-size.heading.medium","font-size.heading.medium","font-size.heading.large","font-size.heading.large","font-size.title.small","font-size.title.small","font-size.title.medium","font-size.title.medium","font-size.title.large","font-size.title.large","line-height.subtext.small","line-height.subtext.small","line-height.subtext.medium","line-height.subtext.medium","line-height.subtext.large","line-height.subtext.large","line-height.body.small","line-height.body.small","line-height.body.medium","line-height.body.medium","line-height.body.large","line-height.body.large","line-height.heading.small","line-height.heading.small","line-height.heading.medium","line-height.heading.medium","line-height.heading.large","line-height.heading.large","line-height.title.small","line-height.title.small","line-height.title.medium","line-height.title.medium","line-height.title.large","line-height.title.large","font-weight.light","font-weight.light","font-weight.normal","font-weight.normal","font-weight.medium","font-weight.medium","font-weight.bold","font-weight.bold","type.subtext.small","type.subtext.small","type.subtext.medium","type.subtext.medium","type.subtext.large","type.subtext.large","type.body.small","type.body.small","type.body.medium","type.body.medium","type.body.large","type.body.large","type.heading.small","type.heading.small","type.heading.medium","type.heading.medium","type.heading.large","type.heading.large","type.title.small","type.title.small","type.title.medium","type.title.medium","type.title.large","type.title.large","More styles.Subtext.Subtext S - (500) Medium","More styles.Subtext.Subtext S - (500) Medium","More styles.Subtext.Subtext S - (500) Medium","More styles.Subtext.Subtext S - (700) Bold","More styles.Subtext.Subtext S - (700) Bold","More styles.Subtext.Subtext S - (700) Bold","More styles.Subtext.Subtext S Link - (400) Regular","More styles.Subtext.Subtext S Link - (400) Regular","More styles.Subtext.Subtext S Link - (400) Regular","More styles.Subtext.Subtext S Link - (500) Medium","More styles.Subtext.Subtext S Link - (500) Medium","More styles.Subtext.Subtext S Link - (500) Medium","More styles.Subtext.Subtext S Link - (700) Bold","More styles.Subtext.Subtext S Link - (700) Bold","More styles.Subtext.Subtext S Link - (700) Bold","More styles.Subtext.Subtext S Mono - (400) Regular","More styles.Subtext.Subtext S Mono - (400) Regular","More styles.Subtext.Subtext S Mono - (400) Regular","More styles.Subtext.Subtext S Mono - (500) Medium","More styles.Subtext.Subtext S Mono - (500) Medium","More styles.Subtext.Subtext S Mono - (500) Medium","More styles.Subtext.Subtext S Mono - (700) Bold","More styles.Subtext.Subtext S Mono - (700) Bold","More styles.Subtext.Subtext S Mono - (700) Bold","More styles.Subtext.Subtext M - (500) Medium","More styles.Subtext.Subtext M - (500) Medium","More styles.Subtext.Subtext M - (500) Medium","More styles.Subtext.Subtext M - (700) Bold","More styles.Subtext.Subtext M - (700) Bold","More styles.Subtext.Subtext M - (700) Bold","More styles.Subtext.Subtext M Link - (400) Regular","More styles.Subtext.Subtext M Link - (400) Regular","More styles.Subtext.Subtext M Link - (400) Regular","More styles.Subtext.Subtext M Link - (500) Medium","More styles.Subtext.Subtext M Link - (500) Medium","More styles.Subtext.Subtext M Link - (500) Medium","More styles.Subtext.Subtext M Link - (700) Bold","More styles.Subtext.Subtext M Link - (700) Bold","More styles.Subtext.Subtext M Link - (700) Bold","More styles.Subtext.Subtext M Mono - (400) Regular","More styles.Subtext.Subtext M Mono - (400) Regular","More styles.Subtext.Subtext M Mono - (400) Regular","More styles.Subtext.Subtext M Mono - (500) Medium","More styles.Subtext.Subtext M Mono - (500) Medium","More styles.Subtext.Subtext M Mono - (500) Medium","More styles.Subtext.Subtext M Mono - (700) Bold","More styles.Subtext.Subtext M Mono - (700) Bold","More styles.Subtext.Subtext M Mono - (700) Bold","More styles.Subtext.Subtext L - (500) Medium","More styles.Subtext.Subtext L - (500) Medium","More styles.Subtext.Subtext L - (500) Medium","More styles.Subtext.Subtext L - (700) Bold","More styles.Subtext.Subtext L - (700) Bold","More styles.Subtext.Subtext L - (700) Bold","More styles.Subtext.Subtext L Link - (400) Regular","More styles.Subtext.Subtext L Link - (400) Regular","More styles.Subtext.Subtext L Link - (400) Regular","More styles.Subtext.Subtext L Link - (500) Medium","More styles.Subtext.Subtext L Link - (500) Medium","More styles.Subtext.Subtext L Link - (500) Medium","More styles.Subtext.Subtext L Link - (700) Bold","More styles.Subtext.Subtext L Link - (700) Bold","More styles.Subtext.Subtext L Link - (700) Bold","More styles.Subtext.Subtext L Mono - (400) Regular","More styles.Subtext.Subtext L Mono - (400) Regular","More styles.Subtext.Subtext L Mono - (400) Regular","More styles.Subtext.Subtext L Mono - (500) Medium","More styles.Subtext.Subtext L Mono - (500) Medium","More styles.Subtext.Subtext L Mono - (500) Medium","More styles.Subtext.Subtext L Mono - (700) Bold","More styles.Subtext.Subtext L Mono - (700) Bold","More styles.Subtext.Subtext L Mono - (700) Bold","More styles.Body.Body S - (500) Medium","More styles.Body.Body S - (500) Medium","More styles.Body.Body S - (500) Medium","More styles.Body.Body S - (700) Bold","More styles.Body.Body S - (700) Bold","More styles.Body.Body S - (700) Bold","More styles.Body.Body S Link - (400) Regular","More styles.Body.Body S Link - (400) Regular","More styles.Body.Body S Link - (400) Regular","More styles.Body.Body S Link - (500) Medium","More styles.Body.Body S Link - (500) Medium","More styles.Body.Body S Link - (500) Medium","More styles.Body.Body S Link - (700) Bold","More styles.Body.Body S Link - (700) Bold","More styles.Body.Body S Link - (700) Bold","More styles.Body.Body S Mono - (400) Regular","More styles.Body.Body S Mono - (400) Regular","More styles.Body.Body S Mono - (400) Regular","More styles.Body.Body M - (500) Medium","More styles.Body.Body M - (500) Medium","More styles.Body.Body M - (500) Medium","More styles.Body.Body M - (700) Bold","More styles.Body.Body M - (700) Bold","More styles.Body.Body M - (700) Bold","More styles.Body.Body M Link - (400) Regular","More styles.Body.Body M Link - (400) Regular","More styles.Body.Body M Link - (400) Regular","More styles.Body.Body M Link - (500) Medium","More styles.Body.Body M Link - (500) Medium","More styles.Body.Body M Link - (500) Medium","More styles.Body.Body M Link - (700) Bold","More styles.Body.Body M Link - (700) Bold","More styles.Body.Body M Link - (700) Bold","More styles.Body.Body L - (500) Medium","More styles.Body.Body L - (500) Medium","More styles.Body.Body L - (500) Medium","More styles.Body.Body L - (700) Bold","More styles.Body.Body L - (700) Bold","More styles.Body.Body L - (700) Bold","More styles.Body.Body L Link - (400) Regular","More styles.Body.Body L Link - (400) Regular","More styles.Body.Body L Link - (400) Regular","More styles.Body.Body L Link - (500) Medium","More styles.Body.Body L Link - (500) Medium","More styles.Body.Body L Link - (500) Medium","More styles.Body.Body L Link - (700) Bold","More styles.Body.Body L Link - (700) Bold","More styles.Body.Body L Link - (700) Bold","More styles.Heading.Heading S - (500) Medium","More styles.Heading.Heading S - (500) Medium","More styles.Heading.Heading S - (500) Medium","More styles.Heading.Heading M - (500) Medium","More styles.Heading.Heading M - (500) Medium","More styles.Heading.Heading M - (500) Medium","More styles.Heading.Heading L - (500) Medium","More styles.Heading.Heading L - (500) Medium","More styles.Heading.Heading L - (500) Medium","More styles.Title.Title S - (300) Light","More styles.Title.Title S - (300) Light","More styles.Title.Title S - (300) Light","More styles.Title.Title S - (500) Medium","More styles.Title.Title S - (500) Medium","More styles.Title.Title S - (500) Medium","More styles.Title.Title M - (300) Light","More styles.Title.Title M - (300) Light","More styles.Title.Title M - (300) Light","More styles.Title.Title M - (500) Medium","More styles.Title.Title M - (500) Medium","More styles.Title.Title M - (500) Medium","More styles.Title.Title L - (300) Light","More styles.Title.Title L - (300) Light","More styles.Title.Title L - (300) Light","More styles.Title.Title L - (500) Medium","More styles.Title.Title L - (500) Medium","More styles.Title.Title L - (500) Medium"]} \ No newline at end of file diff --git a/packages/canvas-tokens/build.ts b/packages/canvas-tokens/build.ts index 31f5276..55126b9 100644 --- a/packages/canvas-tokens/build.ts +++ b/packages/canvas-tokens/build.ts @@ -113,6 +113,7 @@ StyleDictionary.registerTransformGroup({ 'name/cti/kebab', 'value/flatten-border', 'value/shadow/flat-sys', + 'value/breakpoints/px', 'value/hex-to-rgba', 'value/wrapped-font-family', 'value/math', diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json index d59101d..379ef9e 100644 --- a/packages/canvas-tokens/tokens/web/sys.json +++ b/packages/canvas-tokens/tokens/web/sys.json @@ -1047,30 +1047,30 @@ "subtext": { "small": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.50}", - "fontSize": "{font-size.25}", + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.subtext.small}", + "fontSize": "{font-size.subtext.small}", "letterSpacing": "{letter-spacing.50}" }, "type": "typography" }, "medium": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.50}", - "fontSize": "{font-size.50}", + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.subtext.medium}", + "fontSize": "{font-size.subtext.medium}", "letterSpacing": "{letter-spacing.100}" }, "type": "typography" }, "large": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.100}", - "fontSize": "{font-size.75}", + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.subtext.large}", + "fontSize": "{font-size.subtext.large}", "letterSpacing": "{letter-spacing.150}" }, "type": "typography" @@ -1079,29 +1079,29 @@ "body": { "small": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.150}", - "fontSize": "{font-size.100}", + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.body.small}", + "fontSize": "{font-size.body.small}", "letterSpacing": "{letter-spacing.200}" }, "type": "typography" }, "medium": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.200}", - "fontSize": "{font-size.125}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.body.medium}", + "fontSize": "{font-size.body.medium}" }, "type": "typography" }, "large": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.400}", - "lineHeight": "{line-height.200}", - "fontSize": "{font-size.150}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.normal}", + "lineHeight": "{line-height.body.large}", + "fontSize": "{font-size.body.large}" }, "type": "typography" } @@ -1109,28 +1109,28 @@ "heading": { "small": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.250}", - "fontSize": "{font-size.200}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.heading.small}", + "fontSize": "{font-size.heading.small}" }, "type": "typography" }, "medium": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.250}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.heading.medium}", + "fontSize": "{font-size.heading.medium}" }, "type": "typography" }, "large": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.350}", - "fontSize": "{font-size.300}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.heading.large}", + "fontSize": "{font-size.heading.large}" }, "type": "typography" } @@ -1138,28 +1138,28 @@ "title": { "small": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.400}", - "fontSize": "{font-size.400}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.title.small}", + "fontSize": "{font-size.title.small}" }, "type": "typography" }, "medium": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.500}", - "fontSize": "{font-size.500}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.title.medium}", + "fontSize": "{font-size.title.medium}" }, "type": "typography" }, "large": { "value": { - "fontFamily": "{font-family.50}", - "fontWeight": "{font-weight.700}", - "lineHeight": "{line-height.600}", - "fontSize": "{font-size.600}" + "fontFamily": "{font-family.default}", + "fontWeight": "{font-weight.bold}", + "lineHeight": "{line-height.title.large}", + "fontSize": "{font-size.title.large}" }, "type": "typography" } diff --git a/packages/canvas-tokens/utils/filters/index.ts b/packages/canvas-tokens/utils/filters/index.ts index c9d50f4..f74462b 100644 --- a/packages/canvas-tokens/utils/filters/index.ts +++ b/packages/canvas-tokens/utils/filters/index.ts @@ -53,6 +53,11 @@ export const isBaseOpacity: Matcher = token => { return level === 'base' && category === 'opacity' && parseFloat(token.value) > 1; }; +export const isBreakpoints: Matcher = token => { + const [level, category] = token.path; + return level === 'sys' && category === 'breakpoints'; +}; + export const filterCodeTokens: Matcher = token => { const excludedTokens = ['level', 'shadow', 'typescale']; return !excludedTokens.includes(token.path[1]); diff --git a/packages/canvas-tokens/utils/tokenStudioParser.ts b/packages/canvas-tokens/utils/tokenStudioParser.ts index 128c52a..1252c87 100644 --- a/packages/canvas-tokens/utils/tokenStudioParser.ts +++ b/packages/canvas-tokens/utils/tokenStudioParser.ts @@ -1,5 +1,6 @@ import {kebabCase} from 'case-anything'; import {DesignToken} from 'style-dictionary/types/DesignToken'; +import refsList from '../_refs.json'; export function resolveRef(ref: string, resolver: (full: string, ref: string) => string) { // comment explaining what this RegExp does. @@ -31,34 +32,10 @@ export const tokenStudioParser = ({contents}: any) => { return parsed; }; -const levelRefs = { - base: [ - 'palette', - 'opacity', - 'font-size', - 'line-height', - 'typescale', - 'font-family', - 'font-weight', - 'letter-spacing', - 'shadow', - 'level', - 'extended', - 'unit', - ], - brand: ['primary', 'alert', 'error', 'success', 'neutral', 'common', 'gradient'], - sys: ['color', 'breakpoints', 'depth', 'shape', 'space', 'type'], -}; - -const getLevel = (ref: string): string => { - const [key] = ref.split('.'); - - return Object.keys(levelRefs).reduce((acc: string, item: string) => { - if (levelRefs[item as 'base' | 'brand' | 'sys'].includes(key)) { - return item; - } - return acc; - }, ''); +const getLevel = (ref: string): string | void => { + return Object.keys(refsList).find((key: string) => + (refsList as any)[key].some((item: string) => item.startsWith(ref)) + ); }; const replaceDescriptionByComment = (token: DesignToken) => { diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts index 5b62522..76437ec 100644 --- a/packages/canvas-tokens/utils/transformers/index.ts +++ b/packages/canvas-tokens/utils/transformers/index.ts @@ -1,4 +1,5 @@ import {Transform} from 'style-dictionary'; +import * as math from 'mathjs'; import * as filter from '../filters'; import {flatShadow} from './flatShadow'; import {flatRGBAColor} from './flatRGBAColor'; @@ -47,6 +48,15 @@ export const transforms: Record = { matcher: filter.isBaseOpacity, transformer: ({value}) => `${value / 100}`, }, + 'value/breakpoints/px': { + type: 'value', + transitive: true, + matcher: filter.isBreakpoints, + transformer: ({value}) => { + const expr = value.replace('0.25rem', '4'); + return `${math.evaluate(expr)}px`; + }, + }, // transform function that changes a value to its CSS var name 'value/variables': { type: 'value', diff --git a/scripts/utils/generateRefs.ts b/scripts/utils/generateRefs.ts new file mode 100644 index 0000000..15bc13a --- /dev/null +++ b/scripts/utils/generateRefs.ts @@ -0,0 +1,48 @@ +import fs from 'fs'; +import {decodeJSONBufferString} from './parse-utils'; +import path from 'path'; + +type Transform = ( + tokens: Record, + parsed?: any, + level?: string +) => Record; + +const transformToRefs: Transform = (tokens, parsed = {}, level = '') => { + const keys = Object.keys(tokens); + + keys.forEach(key => { + const isHighestLevel = /base|brand|sys/.test(key); + if (isHighestLevel) { + parsed[key] = []; + } + + if (keys.includes('value')) { + parsed?.push(level); + return parsed; + } + + transformToRefs( + tokens[key], + isHighestLevel ? parsed[key] : parsed, + isHighestLevel ? '' : level ? `${level}.${key}` : key + ); + }); + + return parsed; +}; + +export const generateRefs = async (file: any) => { + const refsFileName = path.resolve(__dirname, '../../packages/canvas-tokens/_refs.json'); + + await fs.readFile(refsFileName, async (err, data) => { + const tokens = transformToRefs(file); + + if (err || !data) { + fs.writeFileSync(refsFileName, JSON.stringify(tokens)); + } else { + const content = decodeJSONBufferString(data as any); + fs.writeFileSync(refsFileName, JSON.stringify({...content, ...tokens})); + } + }); +}; diff --git a/scripts/utils/sync-base-config.ts b/scripts/utils/sync-base-config.ts index 11bc881..b58ec18 100644 --- a/scripts/utils/sync-base-config.ts +++ b/scripts/utils/sync-base-config.ts @@ -1,5 +1,6 @@ import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client'; import {ContentFile, getFileContent, updateFileContent} from './file-content'; +import {generateRefs} from './generateRefs'; import {decodeJSONBufferString, encodeJSONToString} from './parse-utils'; // Format the config object into the shape expected by the consumer @@ -45,6 +46,8 @@ export async function syncBaseConfig() { // Re-encode the formatted JSON object to a Buffer string const encodedConfig = encodeJSONToString(formattedConfig); + generateRefs(formattedConfig); + // Sync Canvas Tokens config file with the updated config updateFileContent({ owner: canvasTokensRepoParams.owner, diff --git a/scripts/utils/sync-brand-config.ts b/scripts/utils/sync-brand-config.ts index 7b32213..cd1bba7 100644 --- a/scripts/utils/sync-brand-config.ts +++ b/scripts/utils/sync-brand-config.ts @@ -1,5 +1,6 @@ import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client'; import {ContentFile, getFileContent, updateFileContent} from './file-content'; +import {generateRefs} from './generateRefs'; import {decodeJSONBufferString, encodeJSONToString} from './parse-utils'; // Format the config object into the shape expected by the consumer @@ -45,6 +46,8 @@ export async function syncBrandConfig() { // Re-encode the formatted JSON object to a Buffer string const encodedConfig = encodeJSONToString(formattedConfig); + generateRefs(formattedConfig); + // Sync Canvas Tokens config file with the updated config updateFileContent({ owner: canvasTokensRepoParams.owner, diff --git a/scripts/utils/sync-sys-config.ts b/scripts/utils/sync-sys-config.ts index 4886b1d..3449fad 100644 --- a/scripts/utils/sync-sys-config.ts +++ b/scripts/utils/sync-sys-config.ts @@ -1,5 +1,6 @@ import {tokensStudioRepoParams, canvasTokensRepoParams} from './api-client'; import {ContentFile, getFileContent, updateFileContent} from './file-content'; +import {generateRefs} from './generateRefs'; import {decodeJSONBufferString, encodeJSONToString} from './parse-utils'; /** @@ -80,6 +81,8 @@ export async function syncSystemConfig() { // Re-encode the formatted JSON object to a Buffer string const encodedConfig = encodeJSONToString(formattedConfig); + generateRefs(formattedConfig); + // Fetch system token config from canvas-tokens repo const canvasSystemTokensConfig = (await getFileContent({ owner: canvasTokensRepoParams.owner, diff --git a/tsconfig.json b/tsconfig.json index 165f3c0..17c7f9b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,11 +4,16 @@ "module": "commonjs", "jsx": "react", "esModuleInterop": true, + "resolveJsonModule": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, "composite": true }, + "include": [ + // ...other includes + "packages/**/*.json" + ], "ts-node": { "compilerOptions": { "module": "commonjs"