-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[HOP-63] Generate Styled System Tokens from StyleDictionary (#83)
- Loading branch information
1 parent
3cb058c
commit c610b68
Showing
10 changed files
with
417 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
272 changes: 269 additions & 3 deletions
272
packages/styled-system/src/tokens/generated/light-tokens.ts
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
packages/tokens/src/style-dictionary/format/custom-ts-tokens.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import type { Dictionary, TransformedToken } from "style-dictionary"; | ||
| import { handleTypes } from "../helpers/index.ts"; | ||
|
|
||
| export const customTsTokens = function ({ dictionary }: { dictionary: Dictionary }) { | ||
| const types = handleTypes(dictionary.allTokens); | ||
|
|
||
| function getTokensByFamily(family: string) { | ||
| return dictionary.allTokens.filter(token => { | ||
| return token.filePath.includes(family); | ||
| }); | ||
| } | ||
|
|
||
| let tokens = ""; | ||
| if (types !== undefined) { | ||
| const coreTokens = getTokensByFamily("core"); | ||
| const semanticTokens = getTokensByFamily("semantic"); | ||
| const darkSemanticTokens = getTokensByFamily("dark"); | ||
|
|
||
| const isLightMode = darkSemanticTokens.length === 0; | ||
|
|
||
| if (isLightMode) { | ||
| tokens += [ | ||
| formatTokenFamily("CoreTokens", coreTokens, dictionary), | ||
| formatTokenFamily("SemanticTokens", semanticTokens, dictionary) | ||
| ].join("\n"); | ||
| } else { | ||
| tokens += formatTokenFamily("DarkSemanticTokens", darkSemanticTokens, dictionary); | ||
| } | ||
| } | ||
|
|
||
| return tokens; | ||
| }; | ||
|
|
||
|
|
||
| function formatTokenFamily(familyName: string, tokens: TransformedToken[], dictionary:Dictionary) { | ||
| const formattedTokens = tokens.map(token => { | ||
| const { name, value } = formatTypeScriptToken(token, dictionary); | ||
|
|
||
| return ` "${name}": "${value}"`; | ||
| }).join(",\n"); | ||
|
|
||
| return `export const ${familyName} = {\n${formattedTokens}\n};`; | ||
| } | ||
|
|
||
| function formatTypeScriptToken(token: TransformedToken, dictionary:Dictionary) { | ||
| let value = token.value; | ||
|
|
||
| if (dictionary.usesReference(token.original.value)) { | ||
| const refs = dictionary.getReferences(token.original.value); | ||
| refs.forEach(ref => { | ||
| value = token.value.replace(ref.value, () => `var(--${ref.name})`); | ||
| }); | ||
| } | ||
|
|
||
| return { | ||
| name: `--${token.name}`, | ||
| value | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export { cssDarkMode } from "./css-dark-mode.ts"; | ||
| export { customDoc } from "./custom-doc.ts"; | ||
| export { customJson } from "./custom-json.ts"; | ||
| export { customTsTokens } from "./custom-ts-tokens.ts"; | ||
| export { fontFace } from "./font-face.ts"; |
Oops, something went wrong.