-
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.
fixup! Feat(exporters): Introduce variables-scss exporter #DS-1412
- Loading branch information
Showing
4 changed files
with
35 additions
and
2,033 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 |
---|---|---|
@@ -1,142 +1,2 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
.pnpm-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# Snowpack dependency directory (https://snowpack.dev/) | ||
web_modules/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Optional stylelint cache | ||
.stylelintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variable files | ||
.env | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
.env.local | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
out | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and not Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# vuepress v2.x temp and cache directory | ||
.temp | ||
.cache | ||
|
||
# Docusaurus cache and generated files | ||
.docusaurus | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Stores VSCode versions used for testing VSCode extensions | ||
.vscode-test | ||
|
||
# yarn v2 | ||
.yarn/cache | ||
.yarn/unplugged | ||
.yarn/build-state.yml | ||
.yarn/install-state.gz | ||
.pnp.* | ||
|
||
# MacOS | ||
.DS_Store | ||
.AppleDouble | ||
.LSOverride | ||
|
||
# Anything prefixed with `._` | ||
._* | ||
|
||
# Build folders | ||
build/ | ||
DerivedData/ | ||
.build | ||
.build | ||
.coverage |
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,9 +0,0 @@ | ||
### Release Notes | ||
|
||
All the updates to this exporter are documented in this file. | ||
|
||
## 1.0.0 | ||
|
||
### 🚀 New | ||
|
||
This is the first release of this exporter! | ||
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,32 +1,44 @@ | ||
# Your Exporter | ||
# Exporter Spirit Variables SCSS | ||
|
||
This exporter will become super powerful package that exports design system data into production-ready code. When you are ready to publish it, don't forget to write a nice Readme! | ||
[Supernova][supernova-studio] SCSS exporter made for Spirit Design System developed by [Alma Career (formerly LMC)][alma-career]. | ||
|
||
## Exporter Features | ||
## Token operations | ||
|
||
Here are the key features of this exporter: | ||
This exported does several operations with tokens: | ||
|
||
- **Support for X:** Generates X from your design system | ||
- **Support for Y:** It also supports Y! | ||
- All token groups except [Typography](#typography) are processed using a simple generate function. | ||
- The first step is sorting. Measures are sorted by number in the token name, Generic Tokens (Other) by value, and the rest by its name. | ||
- Next, each token is grouped and its value is prepared to print. Grouping is made using actual groups in Supernova and if these are not present, a common name prefix is used. Separate token values are printed as separate SCSS variables. | ||
- Groups are used for printing SCSS maps with references to separate tokens and pluralized names. Borders groups are skipped and colors have their group name suffixed. These maps are printed into SCSS. | ||
- Shadows are grouped if same name. | ||
- If Gradient names start with `gradients/gradient`, they are not used from Figma, but from Supernova | ||
|
||
## Example of Output | ||
### Typography | ||
|
||
Given any design system, the exporter will produce CSS color definitions in the following format: | ||
As typography in Figma and Supernova are stored in named text style groups, these groups are used to generate SCSS maps with all the values from Supernova. They are grouped by breakpoints. | ||
⚠️ We do not generate `link` typography tokens (styles that include `-link` in their name). | ||
|
||
```css | ||
/* This file was automatically generated. Do not modify manually. */ | ||
#### Ebony Font Weight Exception | ||
|
||
:root { | ||
/* The reddest of reds */ | ||
--color-red: #ff0000; | ||
--color-blue: #0000ff; | ||
/* The main color used throughout the application. */ | ||
--color-primary: var(--color-red); | ||
} | ||
``` | ||
Font Family Ebony has a different font weight mapping in Figma and in Adobe Fonts. To match these we set its own font weight numeric-name conversion. | ||
|
||
## Configuration Options | ||
### Sorting | ||
|
||
Here is a list of all the configuration options this exporter provides: | ||
Tokens are sorted alphabetically by origin (Figma) name or by name (Supernova). Except Measures - sorted by name number and Other - sorted by value. | ||
|
||
- **generateDisclaimer:** Toggle to show a disclaimer indicating the file is auto-generated. | ||
## Outputs: | ||
|
||
- \_borders.scss | ||
- \_colors.scss | ||
- \_gradients.scss | ||
- \_measures.scss | ||
- \_other.scss | ||
- \_radii.scss | ||
- \_shadows.scss | ||
- \_typography.scss | ||
- index.scss | ||
|
||
The index file contains SCSS forwards of all other outputs. | ||
|
||
[supernova-studio]: https://github.com/Supernova-Studio | ||
[alma-career]: https://github.com/lmc-eu |
Oops, something went wrong.