Skip to content

Commit

Permalink
chore: Sync tokens and update SD config to handle new changes (#115)
Browse files Browse the repository at this point in the history 
Sync Tokens Studio config and update SD config to handle new changes.

[category:Web Tokens]

Release Note:
`⚠️ BREAKING CHANGES:`
 - `color.bg.positive.soft` has been renamed to `color.bg.positive.softer` for consistency. 
 - Figma specific tokens: `typescale`, `level`, `shadow` has been excluded from base web tokens.
 - Depth token values has been updated from the base token reference to raw value.
 
Other Changes:
 - JSDoc has been updated to include the base token info

Co-authored-by: @RayRedGoose <[email protected]>
  • Loading branch information
@alanbsmith @RayRedGoose
alanbsmith and RayRedGoose authored May 3, 2024
1 parent 9657e20 commit 60fe169
Show file tree
Hide file tree
Showing 17 changed files with 368 additions and 164 deletions.
11 changes: 7 additions & 4 deletions packages/canvas-tokens/build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ const config = setConfig({
{
level: ['base'],
filterByLevel: true,
filter: filters.filterCodeTokens,
},
{
level: ['brand', 'sys'],
format: 'merge/refs',
combineWith: ['{platform}/composite', '{platform}/variables'],
combineWith: ['{platform}/composite', '{platform}/variables', '{platform}/shadow'],
options: {
outputReferences: true,
},
Expand All @@ -36,7 +37,7 @@ const config = setConfig({
'es6, common-js': {
buildPath: '../canvas-tokens-web/dist/',
transformGroup: 'js',
transforms: ['value/flatten-border', 'value/flatten-base-shadow', 'name/camel'],
transforms: ['value/flatten-border', 'value/shadow/flat-sys', 'name/camel'],
fileName: '{platform}/{level}/index',
extensions: ['js', 'd.ts'],
modifiers: [
Expand All @@ -45,12 +46,14 @@ const config = setConfig({
extensions: ['js'],
format: 'js/{platform}',
filterByLevel: true,
filter: filters.filterCodeTokens,
},
{
level: ['base'],
extensions: ['d.ts'],
format: 'ts/inline',
filterByLevel: true,
filter: filters.filterCodeTokens,
},
{
level: ['brand', 'sys'],
Expand Down Expand Up @@ -109,13 +112,13 @@ StyleDictionary.registerTransformGroup({
transforms: [
'name/cti/kebab',
'value/flatten-border',
'value/flatten-base-shadow',
'value/shadow/flat-sys',
'value/hex-to-rgba',
'value/wrapped-font-family',
'value/math',
'value/letter-spacing/px2rem',
'value/flatten-rgba',
'value/font-weight/lower-case',
'value/font-weight/numbers',
'value/line-height/px2rem',
],
});
Expand Down
233 changes: 119 additions & 114 deletions packages/canvas-tokens/tokens/base.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -934,140 +934,145 @@
"type": "number"
}
},
"level": {
"value": "2",
"type": "number",
"description": "Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading."
},
"shadow": {
"100": {
"value": [
{
"x": "0",
"y": "1",
"blur": "4",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"1": {
"100": {
"y": {
"value": "1",
"type": "number"
},
{
"x": "0",
"y": "2",
"blur": "8",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "4",
"type": "number"
}
],
"type": "boxShadow"
},
"200": {
"y": {
"value": "2",
"type": "number"
},
"blur": {
"value": "8",
"type": "number"
}
}
},
"200": {
"value": [
{
"x": "0",
"y": "2",
"blur": "8",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"2": {
"100": {
"y": {
"value": "2",
"type": "number"
},
{
"x": "0",
"y": "4",
"blur": "16",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "8",
"type": "number"
}
],
"type": "boxShadow",
"description": "Top navigation, Bottom navigation"
},
"200": {
"y": {
"value": "4",
"type": "number"
},
"blur": {
"value": "16",
"type": "number"
}
}
},
"300": {
"value": [
{
"x": "0",
"y": "3",
"blur": "12",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"3": {
"100": {
"y": {
"value": "3",
"type": "number"
},
"blur": {
"value": "12",
"type": "number"
}
},
"200": {
"y": {
"value": "6",
"type": "number"
},
{
"x": "0",
"y": "6",
"blur": "24",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "24",
"type": "number"
}
],
"type": "boxShadow"
}
},
"400": {
"value": [
{
"x": "0",
"y": "4",
"blur": "16",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"4": {
"100": {
"y": {
"value": "4",
"type": "number"
},
{
"x": "0",
"y": "8",
"blur": "32",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "16",
"type": "number"
}
],
"type": "boxShadow"
},
"200": {
"y": {
"value": "8",
"type": "number"
},
"blur": {
"value": "32",
"type": "number"
}
}
},
"500": {
"value": [
{
"x": "0",
"y": "5",
"blur": "20",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"5": {
"100": {
"y": {
"value": "5",
"type": "number"
},
"blur": {
"value": "20",
"type": "number"
}
},
"200": {
"y": {
"value": "10",
"type": "number"
},
{
"x": "0",
"y": "10",
"blur": "40",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "40",
"type": "number"
}
],
"type": "boxShadow"
}
},
"600": {
"value": [
{
"x": "0",
"y": "6",
"blur": "24",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.200})",
"type": "dropShadow"
"6": {
"100": {
"y": {
"value": "6",
"type": "number"
},
"blur": {
"value": "24",
"type": "number"
}
},
"200": {
"y": {
"value": "12",
"type": "number"
},
{
"x": "0",
"y": "12",
"blur": "48",
"spread": "0",
"color": "rgba({palette.licorice.600},{opacity.100})",
"type": "dropShadow"
"blur": {
"value": "48",
"type": "number"
}
],
"type": "boxShadow"
}
}
},
"level": {
"value": "2",
"type": "number",
"description": "Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading."
},
"extended": {
"palette": {
"dragon-fruit": {
Expand Down
Loading

0 comments on commit 60fe169

Please sign in to comment.