-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#181944040] generate variables from tokens (#4)
* playing around with theme switcher * pivotal-181957167 switch theme css * pivotal-181957167 pass tokens via context * pivotal-181944040 generate css variables (WIP) * pivotal-181944040 add parser for reference syntax, merge all tokens into one file, handle shadows and typography (WIP) * pivotal-181944040 make references work in style-dictionary by removing global key * pivotal-181944040 refactor * pivotal-181944040 add token config for js * pivotal-181944040 change output to json and use generated tokens in color palette * pivotal-181944040 expand typography tokens * add a bit more info to readme
- Loading branch information
Showing
29 changed files
with
1,596 additions
and
71 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 |
|---|---|---|
|
|
@@ -11,5 +11,6 @@ app/javascript/shared/i18n.ts | |
| config/**/*.js | ||
| vite.config.ts | ||
| node_modules | ||
| sd.config.js | ||
| storybook-static | ||
| dist | ||
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 |
|---|---|---|
|
|
@@ -4,3 +4,4 @@ coverage | |
| .history | ||
| app/javascript/gql/generated.ts | ||
| app/javascript/shared/i18n.ts | ||
| build | ||
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,27 +1,37 @@ | ||
| # Projectname | ||
| # Betterplace Design System | ||
|
|
||
| What it does nobody knows. | ||
| This is the repository for [betterplace](https://www.betterplace.org/)'s design system. | ||
|
|
||
| ## Overview | ||
| The system uses [Storybook](https://storybook.js.org/) as a tool for developing a component library, guidelines and documentation, that work across all betterplace platforms. | ||
|
|
||
| Only needed if lengthy | ||
| - [🔧 Setup](#-1-Setup) | ||
| - [💻 Development](#-Development) | ||
| - [📦 Data model](#-Data-model) | ||
| ## 🔧 Setup | ||
|
|
||
| 1. `git clone [email protected]:betterplace/betterplace-design-system.git` | ||
| 2. `cd betterplace-design-system` | ||
| 3. `yarn install` | ||
| 4. `yarn storybook` | ||
|
|
||
| ## 🔧 1 Setup | ||
| ## Dependencies | ||
|
|
||
| How to set it up. | ||
| See [.tool-versions](.tool-versions) | ||
|
|
||
| ### ... | ||
| ## 💻 Development | ||
|
|
||
| ## Dependencies | ||
| ### Scripts | ||
|
|
||
| ## 💻 Development | ||
| | Command | Description | | ||
| | ---------------------- | ---------------------------------------- | | ||
| | `yarn storybook` | Start and open storybook in the browser. | | ||
| | `yarn build-storybook` | Build static storybook output. | | ||
| | `yarn build-tokens` | Generate all CSS variables from tokens. | | ||
|
|
||
| ### Design Tokens | ||
|
|
||
| We use Design Tokens exported by [Figma Tokens](https://docs.tokens.studio/) and generate CSS variables from these tokens using [Style Dictionary](https://amzn.github.io/style-dictionary/#/). | ||
|
|
||
| The tokens input file is located in [config/tokens.json](config/tokens.json) (the exported file from Figma). The generated output is located in the [build](build) folder. Each theme is generated into its own file with variables, that would override each other. This is by design, because we only include one of these at a time. For example, theme org would include [build/css/themes/org.css](build/css/themes/org.css). Additionally, a [globals.css](build/css/globals.css) is generated, which includes only unique global tokens. | ||
|
|
||
| You might want to link to an [Architectural overview](doc/architecture.md) | ||
| here, if you have one: | ||
| To re-generate tokens with style-dictionary, run the following command: `yarn build-tokens` | ||
|
|
||
| ### 📦 Data model | ||
|
|
||
|
|
||
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,187 @@ | ||
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 12 May 2022 16:07:15 GMT | ||
| */ | ||
|
|
||
| :root { | ||
| --betterplace-text-decoration-underline: underline; | ||
| --betterplace-text-decoration-none: none; | ||
| --betterplace-text-case-none: none; | ||
| --betterplace-paragraph-spacing-1: 0.5rem; | ||
| --betterplace-paragraph-spacing-0: 0rem; | ||
| --betterplace-letter-spacing-0: 0%; | ||
| --betterplace-font-size-5: 3.5rem; | ||
| --betterplace-font-size-4: 2rem; | ||
| --betterplace-font-size-3: 1.5rem; | ||
| --betterplace-font-size-2: 1.125rem; | ||
| --betterplace-font-size-1: 1rem; | ||
| --betterplace-font-size-0: 0.875rem; | ||
| --betterplace-font-weights-fira-sans-1: Bold; | ||
| --betterplace-font-weights-fira-sans-0: Regular; | ||
| --betterplace-line-heights-3: 140%; | ||
| --betterplace-line-heights-2: 130%; | ||
| --betterplace-line-heights-1: 110%; | ||
| --betterplace-line-heights-0: 120%; | ||
| --betterplace-font-families-fira-sans: 'Fira Sans'; | ||
| --betterplace-dropshadow-large: 0px 0px 24px 0px #00000029; | ||
| --betterplace-dropshadow-small: 0px 0px 16px 0px #00000014; | ||
| --betterplace-danger-red-800: #b11b3e; | ||
| --betterplace-danger-red-700: #d32b43; | ||
| --betterplace-danger-red-200: #ffc4c4; | ||
| --betterplace-warning-yellow-400: #f6ce46; | ||
| --betterplace-warning-yellow-100: #fff4d2; | ||
| --betterplace-tertiary-teal-800: #1e6761; | ||
| --betterplace-tertiary-teal-700: #2b8475; | ||
| --betterplace-tertiary-teal-500: #60b2a4; | ||
| --betterplace-secondary-me-blue-700: #005d90; | ||
| --betterplace-secondary-me-blue-500: #00a0c8; | ||
| --betterplace-secondary-me-blue-100: #e0f4f9; | ||
| --betterplace-secondary-purple-600: #6d2c64; | ||
| --betterplace-gray-900: #292929; | ||
| --betterplace-gray-700: #636363; | ||
| --betterplace-gray-300: #cccccc; | ||
| --betterplace-gray-200: #eeeeee; | ||
| --betterplace-gray-100: #f8f8f8; | ||
| --betterplace-shades-black: #000000; | ||
| --betterplace-shades-white: #ffffff; | ||
| --betterplace-newbrand-01-0-2-opacity: #30604933; | ||
| --betterplace-newbrand-activecolor: #43a4ba; | ||
| --betterplace-newbrand-pastell-6: #a4ffd3; | ||
| --betterplace-newbrand-pastell-5: #7bffbf; | ||
| --betterplace-newbrand-pastell-4: #7debb6; | ||
| --betterplace-newbrand-pastell-3: #67e1a6; | ||
| --betterplace-newbrand-pastell-2: #54d898; | ||
| --betterplace-newbrand-pastell-1: #47ba82; | ||
| --betterplace-newbrand-ruby-6: #17ff8f; | ||
| --betterplace-newbrand-ruby-5: #23e487; | ||
| --betterplace-newbrand-ruby-4: #00e476; | ||
| --betterplace-newbrand-ruby-3: #1dc976; | ||
| --betterplace-newbrand-ruby-2: #21bf73; | ||
| --betterplace-newbrand-ruby-1: #05bb63; | ||
| --betterplace-newbrand-dark-6: #3e8261; | ||
| --betterplace-newbrand-dark-5: #218756; | ||
| --betterplace-newbrand-dark-4: #017d41; | ||
| --betterplace-newbrand-dark-3: #006534; | ||
| --betterplace-newbrand-dark-2: #16603c; | ||
| --betterplace-newbrand-dark-1: #306049; | ||
| --betterplace-primary-me-orange-800: #6f1f06; | ||
| --betterplace-primary-me-orange-600: #db6038; | ||
| --betterplace-primary-me-orange-500: #ff854d; | ||
| --betterplace-primary-me-orange-100: #ffe3c2; | ||
| --betterplace-primary-green-800: #357c00; | ||
| --betterplace-primary-green-600: #85ac1c; | ||
| --betterplace-primary-green-500: #9ecb0a; | ||
| --betterplace-primary-green-100: #f5fccc; | ||
| --betterplace-link-underlined-text-decoration: var(--betterplace-text-decoration-underline); | ||
| --betterplace-link-underlined-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-link-underlined-paragraph-spacing: var(--betterplace-paragraph-spacing-1); | ||
| --betterplace-link-underlined-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-link-underlined-font-size: var(--betterplace-font-size-1); | ||
| --betterplace-link-underlined-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-link-underlined-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-link-underlined-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-small-text-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-small-text-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-small-text-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-small-text-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-small-text-bold-font-size: var(--betterplace-font-size-0); | ||
| --betterplace-small-text-bold-line-height: var(--betterplace-line-heights-2); | ||
| --betterplace-small-text-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-small-text-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-small-text-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-small-text-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-small-text-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-small-text-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-small-text-font-size: var(--betterplace-font-size-0); | ||
| --betterplace-small-text-line-height: var(--betterplace-line-heights-2); | ||
| --betterplace-small-text-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-small-text-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-link-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-link-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-link-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-link-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-link-font-size: var(--betterplace-font-size-1); | ||
| --betterplace-link-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-link-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-link-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-body-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-body-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-body-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-1); | ||
| --betterplace-body-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-body-bold-font-size: var(--betterplace-font-size-1); | ||
| --betterplace-body-bold-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-body-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-body-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-body-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-body-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-body-paragraph-spacing: var(--betterplace-paragraph-spacing-1); | ||
| --betterplace-body-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-body-font-size: var(--betterplace-font-size-1); | ||
| --betterplace-body-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-body-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-body-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-large-text-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-large-text-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-large-text-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-large-text-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-large-text-bold-font-size: var(--betterplace-font-size-2); | ||
| --betterplace-large-text-bold-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-large-text-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-large-text-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-large-text-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-large-text-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-large-text-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-large-text-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-large-text-font-size: var(--betterplace-font-size-2); | ||
| --betterplace-large-text-line-height: var(--betterplace-line-heights-3); | ||
| --betterplace-large-text-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-large-text-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-x-large-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-x-large-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-x-large-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-x-large-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-x-large-bold-font-size: var(--betterplace-font-size-3); | ||
| --betterplace-x-large-bold-line-height: var(--betterplace-line-heights-2); | ||
| --betterplace-x-large-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-x-large-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-x-large-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-x-large-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-x-large-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-x-large-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-x-large-font-size: var(--betterplace-font-size-3); | ||
| --betterplace-x-large-line-height: var(--betterplace-line-heights-2); | ||
| --betterplace-x-large-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-x-large-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-xx-large-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-xx-large-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-xx-large-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-xx-large-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-xx-large-bold-font-size: var(--betterplace-font-size-4); | ||
| --betterplace-xx-large-bold-line-height: var(--betterplace-line-heights-0); | ||
| --betterplace-xx-large-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-xx-large-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-xx-large-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-xx-large-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-xx-large-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-xx-large-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-xx-large-font-size: var(--betterplace-font-size-4); | ||
| --betterplace-xx-large-line-height: var(--betterplace-line-heights-0); | ||
| --betterplace-xx-large-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-xx-large-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-xxx-large-bold-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-xxx-large-bold-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-xxx-large-bold-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-xxx-large-bold-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-xxx-large-bold-font-size: var(--betterplace-font-size-5); | ||
| --betterplace-xxx-large-bold-line-height: var(--betterplace-line-heights-1); | ||
| --betterplace-xxx-large-bold-font-weight: var(--betterplace-font-weights-fira-sans-1); | ||
| --betterplace-xxx-large-bold-font-family: var(--betterplace-font-families-fira-sans); | ||
| --betterplace-xxx-large-text-decoration: var(--betterplace-text-decoration-none); | ||
| --betterplace-xxx-large-text-case: var(--betterplace-text-case-none); | ||
| --betterplace-xxx-large-paragraph-spacing: var(--betterplace-paragraph-spacing-0); | ||
| --betterplace-xxx-large-letter-spacing: var(--betterplace-letter-spacing-0); | ||
| --betterplace-xxx-large-font-size: var(--betterplace-font-size-5); | ||
| --betterplace-xxx-large-line-height: var(--betterplace-line-heights-0); | ||
| --betterplace-xxx-large-font-weight: var(--betterplace-font-weights-fira-sans-0); | ||
| --betterplace-xxx-large-font-family: var(--betterplace-font-families-fira-sans); | ||
| } |
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,9 @@ | ||
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 12 May 2022 16:07:15 GMT | ||
| */ | ||
|
|
||
| :root { | ||
| --betterplace-color-secondary: var(--betterplace-secondary-purple-600); | ||
| --betterplace-color-primary: var(--betterplace-primary-green-800); | ||
| } |
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,9 @@ | ||
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 12 May 2022 16:07:15 GMT | ||
| */ | ||
|
|
||
| :root { | ||
| --betterplace-color-secondary: var(--betterplace-secondary-me-blue-500); | ||
| --betterplace-color-primary: var(--betterplace-primary-me-orange-500); | ||
| } |
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,9 @@ | ||
| /** | ||
| * Do not edit directly | ||
| * Generated on Thu, 12 May 2022 16:07:15 GMT | ||
| */ | ||
|
|
||
| :root { | ||
| --betterplace-color-secondary: var(--betterplace-tertiary-teal-500); | ||
| --betterplace-color-primary: var(--betterplace-primary-green-500); | ||
| } |
Oops, something went wrong.