Adds Tailwind as an export option #1
Conversation
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
Generated file is currently empty, have just added the new generate-tailwind command without processing any tokens. Includes a local command as figma is likely to contain everything TW wants and we may need some local additions wihout getting clobbered on each export
andrewfulton
commented
Feb 12, 2022
| @@ -0,0 +1,8 @@ | |||
| // AUTO-GENERATED - File generated by figma2theme <%- version %>, manual edits may be overwritten | |||
There was a problem hiding this comment.
Unclear at the moment why format-on-save is indenting this file, but not the other.
andrewfulton
changed the title
… config Most of it is now present in the output, barring a few that I'm not quite sure what to do with yet
|
Things I am not quite sure how to translate yet:
|
andrewfulton
commented
Feb 14, 2022
| // Run Prettier on JS code using the config file | ||
| const formatFileContents = async (contents: string) => { | ||
| return prettier.resolveConfig(prettierConfigFile).then((options) => { | ||
| return prettier.format(contents, { ...options, parser: 'babel' }); |
There was a problem hiding this comment.
Don't know if there is a more correct parser option here but it din't like it when I left it out
| // This takes the responsive textStyles that get applied in a system like Chakra | ||
| // and translates them into a set of responsive styles at the various breakpoints | ||
| // defined in the theme. | ||
| export const generateResponsiveTextStyles = ( |
There was a problem hiding this comment.
I don't know if this is the best way to get an equivalent to the responsive text styles that the toolkit defines and Chakra knows what do to with, but the alternative seems to be managing the utility classes for each breakpoint manually, which may be the more Tailwind way to do it, but could lead to things being missed pretty easily depending on how it's implemented.
Also not sure yet if we can use @apply and other tailwind utility classes in these definitions. That might make them a little less verbose?
…pendencies Update dependencies
Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.5 to 1.14.8. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.14.5...v1.14.8) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>
…t/npm_and_yarn/follow-redirects-1.14.8 Bump follow-redirects from 1.14.5 to 1.14.8
…pendencies chore: update dependencies
Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>
…t/npm_and_yarn/minimist-1.2.6 Bump minimist from 1.2.5 to 1.2.6
Bumps [@emotion/react](https://github.com/emotion-js/emotion) from 11.9.0 to 11.9.3. - [Release notes](https://github.com/emotion-js/emotion/releases) - [Changelog](https://github.com/emotion-js/emotion/blob/main/CHANGELOG.md) - [Commits](https://github.com/emotion-js/emotion/compare/@emotion/[email protected]...@emotion/[email protected]) --- updated-dependencies: - dependency-name: "@emotion/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>
…t/npm_and_yarn/emotion/react-11.9.3 Bump @emotion/react from 11.9.0 to 11.9.3
Bumps [@emotion/styled](https://github.com/emotion-js/emotion) from 11.8.1 to 11.9.3. - [Release notes](https://github.com/emotion-js/emotion/releases) - [Changelog](https://github.com/emotion-js/emotion/blob/main/CHANGELOG.md) - [Commits](https://github.com/emotion-js/emotion/compare/@emotion/[email protected]...@emotion/[email protected]) --- updated-dependencies: - dependency-name: "@emotion/styled" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>
…t/npm_and_yarn/emotion/styled-11.9.3 Bump @emotion/styled from 11.8.1 to 11.9.3
Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>
…tableStudios/figma2theme into feature/export-css-custom-properties
…ents to explain what the function does
…ents to explain what the function does
- refactor code to move `$type` property in to each token - update token types to match the new structure - add JSON examples for each token dictionary - refactor code to use new token types - update all `reduce` calls to add an explicit return type - update tests to account for `$type` change
…stom-properties # Conflicts: # src/export/export-chakra.ts
…tableStudios/figma2theme into feature/export-css-custom-properties
…xport-css-custom-properties Export CSS custom properties
…ate-gitignore 🧹 chore: updating gitignore file
…esign-token-format Update design token format
…support-icons-and-media feat(UIKIT-17): update to support new page name "Icons & Media"
…s-page-optional feat: make the "sizes" page optional
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Would like to be able to generate a tailwind.config file from the tokens generated from the figma file.
Not sure whether it will support everything in the same way chakra does but might at least get us some of the way there.