Skip to content

Commit

Permalink
fix types & deprecated
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukasoppermann
lukasoppermann committed Oct 31, 2022
1 parent b006e88 commit 4762485
Show file tree
Hide file tree
Showing 5 changed files with 195 additions and 44 deletions.
108 changes: 64 additions & 44 deletions script/tempColorTokenBuild.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,63 +16,104 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
const themes: TokenBuildInput[] = [
{
filename: 'light',
source: [`tokens/functional/color/light/*.json5`, `./tokens/functional/shadow/shadow-light.json5`],
include: [`tokens/base/color/light/light.json5`, `./tokens/base/shadow/shadow.json5`]
source: [`tokens/functional/color/light/*.json5`, `tokens/functional/shadow/light.json5`],
include: [`tokens/base/color/light/light.json5`, `tokens/base/shadow/light.json5`]
},
{
filename: 'light-tritanopia',
source: [
`tokens/functional/color/light/*.json5`,
`tokens/functional/color/light/overrides/light.tritanopia.json5`
`tokens/functional/color/light/overrides/light.tritanopia.json5`,
`tokens/functional/shadow/light.json5`
],
include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.tritanopia.json5`]
include: [
`tokens/base/color/light/light.json5`,
`tokens/base/color/light/light.tritanopia.json5`,
`tokens/base/shadow/light.json5`
]
},
{
filename: 'light-colorblind',
source: [
`tokens/functional/color/light/*.json5`,
`tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`
`tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
`tokens/functional/shadow/light.json5`
],
include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.protanopia-deuteranopia.json5`]
include: [
`tokens/base/color/light/light.json5`,
`tokens/base/color/light/light.protanopia-deuteranopia.json5`,
`tokens/base/shadow/light.json5`
]
},
{
filename: 'light-high-contrast',
source: [
`tokens/functional/color/light/*.json5`,
`tokens/functional/color/light/overrides/light.high-contrast.json5`
`tokens/functional/color/light/overrides/light.high-contrast.json5`,
`tokens/functional/shadow/light.json5`
],
include: [`tokens/base/color/light/light.json5`, `tokens/base/color/light/light.high-contrast.json5`]
include: [
`tokens/base/color/light/light.json5`,
`tokens/base/color/light/light.high-contrast.json5`,
`tokens/base/shadow/light.json5`
]
},
{
filename: 'dark',
source: [`tokens/functional/color/dark/*.json5`],
include: [`tokens/base/color/dark/dark.json5`]
source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/shadow/dark.json5`],
include: [`tokens/base/color/dark/dark.json5`, `tokens/base/shadow/dark.json5`]
},
{
filename: 'dark-dimmed',
source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/color/dark/overrides/dark.dimmed.json5`],
include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.dimmed.json5`]
source: [
`tokens/functional/color/dark/*.json5`,
`tokens/functional/color/dark/overrides/dark.dimmed.json5`,
`tokens/functional/shadow/dark.json5`
],
include: [
`tokens/base/color/dark/dark.json5`,
`tokens/base/color/dark/dark.dimmed.json5`,
`tokens/base/shadow/dark.json5`
]
},
{
filename: 'dark-tritanopia',
source: [`tokens/functional/color/dark/*.json5`, `tokens/functional/color/dark/overrides/dark.tritanopia.json5`],
include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.tritanopia.json5`]
source: [
`tokens/functional/color/dark/*.json5`,
`tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
`tokens/functional/shadow/dark.json5`
],
include: [
`tokens/base/color/dark/dark.json5`,
`tokens/base/color/dark/dark.tritanopia.json5`,
`tokens/base/shadow/dark.json5`
]
},
{
filename: 'dark-colorblind',
source: [
`tokens/functional/color/dark/*.json5`,
`tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`
`tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
`tokens/functional/shadow/dark.json5`
],
include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.protanopia-deuteranopia.json5`]
include: [
`tokens/base/color/dark/dark.json5`,
`tokens/base/color/dark/dark.protanopia-deuteranopia.json5`,
`tokens/base/shadow/dark.json5`
]
},
{
filename: 'dark-high-contrast',
source: [
`tokens/functional/color/dark/*.json5`,
`tokens/functional/color/dark/overrides/dark.high-contrast.json5`
`tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
`tokens/functional/shadow/dark.json5`
],
include: [`tokens/base/color/dark/dark.json5`, `tokens/base/color/dark/dark.high-contrast.json5`]
include: [
`tokens/base/color/dark/dark.json5`,
`tokens/base/color/dark/dark.high-contrast.json5`,
`tokens/base/shadow/dark.json5`
]
}
]

Expand Down Expand Up @@ -117,37 +158,15 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
).buildAllPlatforms()
}

/**
* build shadow tokens
*/
PrimerStyleDictionary.extend(
getStyleDictionaryConfig(
`shadow/shadow`,
[`./tokens/functional/shadow/shadow.json5`, `./tokens/base/shadow/shadow.json5`],
[`./tokens/base/color/light/light.json5`, `./tokens/functional/color/shadow.json5`],
buildOptions
)
).buildAllPlatforms()

/**
* build deprecated.json
*/
const deprecatedBuilds: TokenBuildInput[] = [
{
// light mode
filename: 'color',
filename: 'theme',
source: [...themes[0].source, ...themes[0].include],
include: themes[0].include
},
{
// light mode
filename: 'shadow',
source: [`./tokens/functional/shadow/shadow.json`],
include: [
`./tokens/base/shadow/shadow.json`,
`./tokens/base/color/light.json`,
`./tokens/functional/color/shadow.json`
]
}
]
//
Expand All @@ -167,7 +186,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
const typeBuilds: TokenBuildInput[] = [
{
// light mode
filename: 'color',
filename: 'theme',
source: themes[0].source,
include: themes[0].include
}
Expand All @@ -185,9 +204,10 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>

// build types for base scale
PrimerStyleDictionary.extend({
source: themes[0].include,
source: [`tokens/functional/color/scales.json5`],
include: themes[0].include,
platforms: {
types: platformTypeDefinitions(`baseColor`, undefined, `${buildOptions.buildPath}/ts/types/`)
types: platformTypeDefinitions(`baseColor`, `base`, `${buildOptions.buildPath}/ts/types/`)
}
}).buildAllPlatforms()
}
Expand Down
0 tokens/base/shadow/shadow.json5 → tokens/base/shadow/dark.json5
View file
File renamed without changes.
74 changes: 74 additions & 0 deletions tokens/base/shadow/light.json5
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
{
"base": {
"shadow": {
"color": {
"small": {
"$value": "{base.color.scale.black}",
"alpha": 0.96,
"$type": "color"
},
"medium": {
"$value": "{base.color.scale.gray.4}",
"alpha": 0.85,
"$type": "color"
},
"large": {
"$value": "{base.color.scale.gray.4}",
"alpha": 0.8,
"$type": "color"
},
"extraLarge": {
"$value": "{base.color.scale.gray.4}",
"alpha": 0.7,
"$type": "color"
},
"highlight": {
"$value": "{base.color.scale.white}",
"alpha": 0.25,
"$type": "color"
},
"inset": {
"$value": "{base.color.scale.gray.2}",
"alpha": 0,
"$type": "color"
}
},
"small": {
"$value": {
"color": "{base.shadow.color.small}",
"x": "0px",
"y": "1px",
"blur": "0px"
},
"$type": "shadow"
},
"medium": {
"$value": {
"color": "{base.shadow.color.medium}",
"x": "0px",
"y": "3px",
"blur": "6px"
},
"$type": "shadow"
},
"large": {
"$value": {
"color": "{base.shadow.color.large}",
"x": "0px",
"y": "8px",
"blur": "24px"
},
"$type": "shadow"
},
"extraLarge": {
"$value": {
"color": "{base.shadow.color.extraLarge}",
"x": "0px",
"y": "12px",
"blur": "28px"
},
"$type": "shadow"
}
}
}
}
0 tokens/functional/shadow/shadow-light.json5 → tokens/functional/shadow/dark.json5
View file
File renamed without changes.
57 changes: 57 additions & 0 deletions tokens/functional/shadow/light.json5
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{
shadow: {
small: {
$value: '{base.shadow.small}',
$type: 'shadow'
},
medium: {
$value: '{base.shadow.medium}',
$type: 'shadow'
},
large: {
$value: '{base.shadow.large}',
$type: 'shadow'
},
extraLarge: {
$value: '{base.shadow.extraLarge}',
$type: 'shadow'
}
// "focus": {
// "$value": {
// "color": "{color.focus}",
// "x": "0px",
// "y": "0px",
// "blur": "0px",
// "spread": "3px"
// },
// "$type": "shadow"
// },
// "primer": {
// "shadow": {
// "highlight": {
// "$value": {
// "color": "{color.shadow.highlight}",
// "x": "0px",
// "y": "1px",
// "blur": "0px",
// "spread": "3px",
// "inset": true
// },
// "$type": "shadow"
// },
// "inset": {
// "$value": {
// "color": "{color.shadow.inset}",
// "x": "0px",
// "y": "1px",
// "blur": "0px",
// "spread": "3px",
// "inset": true
// },
// "$type": "shadow"
// },
// "focus": {"$value": "{shadow.focus}"}
// }
// }
}
}

0 comments on commit 4762485

Please sign in to comment.