-
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.
Merge pull request #48 from gsoft-inc/feature/update_tokens
Update to the styled-system
- Loading branch information
Showing
12 changed files
with
8,947 additions
and
6,394 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| "@orbit-ui/transition-components": minor | ||
| --- | ||
|
|
||
| Added: | ||
| - fontFamily is now available on all components that use the style system | ||
| - Added a list of all available semantic values for the styled-system in the tokens page | ||
|
|
||
| Update: | ||
| - Tokens are now updated with their latest value. No breaking changes to be expected | ||
| - Semantic elevation tokens are now working correctly |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { | ||
| boxShadowRenderer, | ||
| backgroundRenderer, | ||
| borderRenderer, | ||
| textRenderer, | ||
| iconRenderer, | ||
| fontSizeRenderer, | ||
| fontWeightRenderer, | ||
| lineHeightRenderer, | ||
| radiiRenderer, | ||
| fontFamilyRenderer, | ||
| paddingRenderer, | ||
| marginRenderer, | ||
| sizingRenderer | ||
| } from "./TokenTable"; | ||
| import { | ||
| BackgroundColorMapping, | ||
| TextColorMapping, | ||
| IconColorMapping, | ||
| BoxShadowMapping, | ||
| BorderMapping, | ||
| BorderWidthAndStyle, | ||
| BoxShadowAliases, | ||
| IconColorAliases, | ||
| TextColorAliases, | ||
| BorderColorAliases, | ||
| BackgroundColorAliases, | ||
| FontSizeMapping, | ||
| FontSizeAliases, | ||
| FontWeightMapping, | ||
| FontWeightAliases, | ||
| LineHeightMapping, | ||
| LineHeightAliases, | ||
| BorderRadiusMapping, | ||
| BorderRadiusAliases, | ||
| FontFamilyMapping, | ||
| FontFamilyAliases, | ||
| SimplePaddingMapping, | ||
| ComplexPaddingMapping, | ||
| SemanticSimplePaddingSpace, | ||
| SemanticComplexPaddingSpace, | ||
| SemanticSimpleMarginSpace, | ||
| SimpleMarginMapping, | ||
| ComplexMarginMapping, | ||
| SemanticComplexMarginSpace, | ||
| SizingMapping | ||
| } from "@components/styling"; | ||
|
|
||
| function toTokenValue(key, value) { | ||
| return { | ||
| token: key, | ||
| variable: value.replace("var(", "").replace(")", "") | ||
| }; | ||
| } | ||
|
|
||
| function coreAndSemanticTokenSplitter(allMappings, semanticKeys, renderer, additionalTokenTransformationMethod = null) { | ||
| return Object.entries(allMappings).reduce((acc, [key, value]) => { | ||
| let collectionRef = acc.Semantic; | ||
| if (!semanticKeys.includes(key)) { | ||
| collectionRef = acc.Core; | ||
| } | ||
|
|
||
| let token = { | ||
| ...toTokenValue(key, value), | ||
| itemRenderer: renderer | ||
| }; | ||
|
|
||
| if (additionalTokenTransformationMethod) { | ||
| token = additionalTokenTransformationMethod(token); | ||
| } | ||
|
|
||
| collectionRef.push(token); | ||
|
|
||
| return acc; | ||
| }, { Core: [], Semantic: [] }); | ||
| } | ||
|
|
||
| export const BackgroundColors = coreAndSemanticTokenSplitter(BackgroundColorMapping, Object.keys(BackgroundColorAliases), backgroundRenderer); | ||
| export const BorderColors = coreAndSemanticTokenSplitter(BorderMapping, Object.keys(BorderColorAliases), borderRenderer, token => { | ||
| return { | ||
| ...token, | ||
| variable: token.variable.replace(BorderWidthAndStyle, "").trim() | ||
| }; | ||
| }); | ||
|
|
||
| export const TextColors = coreAndSemanticTokenSplitter(TextColorMapping, Object.keys(TextColorAliases), textRenderer); | ||
| export const IconColors = coreAndSemanticTokenSplitter(IconColorMapping, Object.keys(IconColorAliases), iconRenderer); | ||
|
|
||
| export const Shadows = coreAndSemanticTokenSplitter(BoxShadowMapping, BoxShadowAliases, boxShadowRenderer); | ||
|
|
||
| export const FontFamily = coreAndSemanticTokenSplitter(FontFamilyMapping, FontFamilyAliases, fontFamilyRenderer); | ||
| export const FontSizes = coreAndSemanticTokenSplitter(FontSizeMapping, FontSizeAliases, fontSizeRenderer); | ||
| export const FontWeight = coreAndSemanticTokenSplitter(FontWeightMapping, FontWeightAliases, fontWeightRenderer); | ||
| export const LineHeight = coreAndSemanticTokenSplitter(LineHeightMapping, LineHeightAliases, lineHeightRenderer); | ||
|
|
||
| export const Radii = coreAndSemanticTokenSplitter(BorderRadiusMapping, BorderRadiusAliases, radiiRenderer); | ||
|
|
||
| export const Sizing = coreAndSemanticTokenSplitter(SizingMapping, [], sizingRenderer); | ||
| export const SimplePadding = coreAndSemanticTokenSplitter(SimplePaddingMapping, SemanticSimplePaddingSpace, paddingRenderer); | ||
| export const ComplexPadding = coreAndSemanticTokenSplitter(ComplexPaddingMapping, SemanticComplexPaddingSpace, paddingRenderer); | ||
| export const SimpleMargin = coreAndSemanticTokenSplitter(SimpleMarginMapping, SemanticSimpleMarginSpace, marginRenderer); | ||
| export const ComplexMargin = coreAndSemanticTokenSplitter(ComplexMarginMapping, SemanticComplexMarginSpace, marginRenderer); |
Oops, something went wrong.