-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(exporter-tokens): Add mixin css-variables to theme colors #DS-1542
- Loading branch information
Showing
14 changed files
with
286 additions
and
103 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export const COLOR_JS_SUFFIX = 'Colors'; | ||
| export const COLOR_KEY = 'colors'; | ||
| export const COLOR_SCSS_SUFFIX = '-colors'; | ||
| export const GLOBAL_DIRECTORY = 'global-tokens'; | ||
| export const JS_DIRECTORY = 'js'; | ||
| export const JS_INDENTATION = ' '; | ||
| export const SCSS_DIRECTORY = 'scss'; | ||
| export const SCSS_INDENTATION = ' '; | ||
| export const THEMES_DIRECTORY = 'themes'; | ||
| export const TYPOGRAPHY_KEY = 'styles'; |
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
7 changes: 5 additions & 2 deletions
7
exporters/tokens/src/generators/__fixtures__/mockedRootThemeFile.scss
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,12 +1,15 @@ | ||
| @use 'sass:meta'; | ||
| @use 'themes/theme-light'; | ||
| @use 'themes/theme-light-inverted'; | ||
|
|
||
| // The first theme is the default theme, as the left column in the Figma table. | ||
| $themes: ( | ||
| theme-light: ( | ||
| colors: theme-light.$colors, | ||
| variables: meta.module-variables(theme-light), | ||
| mixins: meta.module-mixins(theme-light), | ||
| ), | ||
| theme-light-inverted: ( | ||
| colors: theme-light-inverted.$colors, | ||
| variables: meta.module-variables(theme-light-inverted), | ||
| mixins: meta.module-mixins(theme-light-inverted), | ||
| ), | ||
| ); |
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
51 changes: 51 additions & 0 deletions
51
exporters/tokens/src/generators/__tests__/mixinGenerator.test.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,51 @@ | ||
| import { Token, TokenGroup } from '@supernovaio/sdk-exporters'; | ||
| import { exampleGroups } from '../../../tests/fixtures/exampleGroups'; | ||
| import { examplePrefixToken } from '../../../tests/fixtures/examplePrefixToken'; | ||
| import { findTokenPrefix } from '../../helpers/findTokenPrefix'; | ||
| import { generateMixinFromTokens } from '../mixinGenerator'; | ||
| import { exampleColorsTokens } from '../../../tests/fixtures/exampleColorTokens'; | ||
| import { SCSS_INDENTATION } from '../../constants'; | ||
|
|
||
| const mappedTokens: Map<string, Token> = new Map([]); | ||
| const tokenGroups: Array<TokenGroup> = exampleGroups; | ||
|
|
||
| describe('mixinGenerator', () => { | ||
| const dataProvider = [ | ||
| { | ||
| tokens: exampleColorsTokens, | ||
| groupName: '', | ||
| hasParentPrefix: false, | ||
| hasTokenPrefix: true, | ||
| description: 'should generate mixin from tokens', | ||
| expectedStyles: `${SCSS_INDENTATION}--spirit-color-active: #{$active};\n${SCSS_INDENTATION}--spirit-color-primary: #{$primary};`, | ||
| }, | ||
| { | ||
| tokens: exampleColorsTokens, | ||
| groupName: '', | ||
| hasParentPrefix: false, | ||
| hasTokenPrefix: false, | ||
| description: 'should generate mixin with parent prefix and no token prefix', | ||
| expectedStyles: `${SCSS_INDENTATION}--color-active: #{$active};\n${SCSS_INDENTATION}--color-primary: #{$primary};`, | ||
| }, | ||
| ]; | ||
|
|
||
| it.each(dataProvider)( | ||
| 'should correctly generate mixin for $description', | ||
| ({ tokens, expectedStyles, groupName, hasParentPrefix, hasTokenPrefix }) => { | ||
| const prefixTokens = Array.from(examplePrefixToken.values()); | ||
| const tokenPrefix = hasTokenPrefix ? findTokenPrefix(prefixTokens) : ''; | ||
|
|
||
| const styles = generateMixinFromTokens( | ||
| Array.from(tokens.values()), | ||
| mappedTokens, | ||
| tokenGroups, | ||
| tokenPrefix, | ||
| groupName, | ||
| hasParentPrefix, | ||
| false, | ||
| ); | ||
|
|
||
| expect(styles).toBe(`@mixin css-variables {\n${expectedStyles}\n}\n`); | ||
| }, | ||
| ); | ||
| }); |
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
Oops, something went wrong.