Skip to content

Commit aa8d3d7

Browse files
francescospissufrancescospissu
authored
feat: automate theming process from Figma (#5)
* feat: dark mode for button component * refactor: move WithFlavour interface in utils.ts * feat: theme management (partial) * generate themes.css in rollup * mapping between sass and css variables * feat: generate theme variables * fix: button colors * fix: theme variable creation * feat: error if theme doesn't exist in a variable * fix: remove redundant code * feat: improve algorithm for generating errors * add postinstall script * add tokens file * feat: script for fetching data from figma and generating corresponding scss files * feat: add figma-style-weekly-pull.yaml file * add pull_request trigger * package-lock.json fix * improve functions in themes-generator script * feat: add tests for themes-generator * refactor: convert themes-generator in typescript * add base entry to figma workflow * remove generated json files * add generated json files * update workflow * themes-generator improvements * move plugin ID in a const * update README.md Theme Usage section * remove useless stuff from tsconfig.json * fix typo in themes.scss * fix typo in README.md * add specific path in the workflow
1 parent 19ec904 commit aa8d3d7

18 files changed

+34048
-26192
lines changed

‎.github/workflows/figma-style-weekly-pull.yaml

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: figma-style-weekly-pull
2+
3+
on:
4+
schedule:
5+
# run every monday at 5AM
6+
- cron: '0 5 * * 1'
7+
8+
workflow_dispatch:
9+
10+
env:
11+
NODE_VERSION: 14.x
12+
13+
jobs:
14+
pull-from-figma:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v3
19+
20+
- name: Install Node.js
21+
uses: actions/setup-node@v3
22+
with:
23+
node-version: ${{ env.NODE_VERSION }}
24+
registry-url: 'https://registry.npmjs.org'
25+
26+
- name: Install dependencies
27+
run: npm install
28+
29+
- name: Run update-json-themes script
30+
run: npm run update-json-themes
31+
env:
32+
FIGMA_API_ACCESS_TOKEN: ${{ secrets.FIGMA_API_ACCESS_TOKEN }}
33+
FIGMA_THEME_FILE_ID: ${{ secrets.FIGMA_THEME_FILE_ID }}
34+
35+
- name: Create Pull Request
36+
uses: peter-evans/create-pull-request@v4
37+
with:
38+
commit-message: Updated theme files
39+
title: Update theme files
40+
branch: style/theme-update
41+
author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
42+
add-paths: src/themes/*.json

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,7 @@ yarn-error.log*
2525
# ide
2626
.idea/
2727
.vscode/
28+
dist
29+
.env
30+
src/themes/colors-library.scss
31+
src/themes/design-tokens.scss

‎README.md

Lines changed: 121 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,121 @@
1-
# ARC - Arduino React Components
2-
3-
This library contains a React-based implementation of the [Arduino Component Library](https://www.figma.com/file/euysycI6QhSSbN7Qvguce8/🎛UI-Controls).
4-
5-
Storybook is publicly accessible via github pages [here](https://arduino.github.io/arc/)
6-
7-
## Usage
8-
9-
```sh
10-
npm i @arduino/arc
11-
```
12-
13-
Please note that this package has a peer dependecy on `react`, `react-dom` and `react-aria`, you might need to install.
14-
15-
```sh
16-
npm i react@^17.0.2 react-dom@^17.0.2 [email protected]
17-
```
18-
19-
## Develop
20-
21-
1. Install dependencies with
22-
23-
```sh
24-
npm i
25-
```
26-
27-
2. Build the project with
28-
29-
```sh
30-
npm run build
31-
```
32-
33-
3. to test the components locally, run storybook
34-
35-
```sh
36-
npm run storybook
37-
```
38-
39-
4. to reference a WIP branch from another repo, set the package.json of the other repo to
40-
```json
41-
"dependencies": {
42-
"@arduino/arc": "github:arduino/arc#your-branch",
43-
...
44-
```
45-
46-
## Versioning
47-
48-
Versioning is automated, and managed via [semantic-release](https://github.com/semantic-release/)
49-
50-
All the commits that lands to `main` must stick with the Angular Commit Message Conventions (which is **CaseSensitive!**):
51-
52-
- feat: A new feature
53-
- fix: A bug fix
54-
- docs: Documentation only changes
55-
- style: Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
56-
- refactor: A code change that neither fixes a bug nor adds a feature
57-
- perf: A code change that improves performance
58-
- test: Adding missing or correcting existing tests
59-
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
60-
61-
Given the form above in the commits, semantic-release will automatically generate the changelog and bump the version of the libs.
62-
63-
**IMPORTANT**
64-
If you squash merge your commits, only the message in the squashed commit will be read from semantic-release.
65-
Please stick to the convention above ☝️ when squash-merging your PRs.
66-
67-
## Deployment Process
68-
69-
Deployment is handled automatically by the CI when your changes are merged into master. Sit back and relax ☺️
1+
# ARC - Arduino React Components
2+
3+
This library contains a React-based implementation of the [Arduino Component Library](https://www.figma.com/file/euysycI6QhSSbN7Qvguce8/🎛UI-Controls).
4+
5+
Storybook is publicly accessible via github pages [here](https://arduino.github.io/arc/)
6+
7+
## Usage
8+
9+
```sh
10+
npm i @arduino/arc
11+
```
12+
13+
Please note that this package has a peer dependecy on `react`, `react-dom` and `react-aria`, you might need to install.
14+
15+
```sh
16+
npm i react@^17.0.2 react-dom@^17.0.2 [email protected]
17+
```
18+
19+
### Themes Usage
20+
This package also offers Arduino color themes, provided in the `themes/themes.css` file.
21+
22+
23+
Themes are directly pulled from Figma using the Figma API. As reported on the [website](https://www.figma.com/developers/api) "The Figma API supports read access and interactions with Figma files. This gives you the ability to view and extract any objects or layers, and their properties."
24+
25+
This data is fetched as a `.json` file with the following structure:
26+
- `core` contains the colors library which defines the hex value for each color name, e.g.: `'tealscale-teal0': '#7fcbcd'`
27+
- `ide-default`, `ide-dark`, ..., are the different themes available, each containing two types of information:
28+
- mapping between color name and semantic value, e.g.: `'accent-strong': 'tealscale-teal0'`
29+
- mapping between variable name of an element and the semantic value, e.g.: `'button-primary-bg-hover': 'accent-strong'`
30+
31+
This file is parsed to generate a ColorLibrary, a list of colors associated with their hex value, and DesignTokens, an object in which each variable is associated with all the available themes and each theme is associated with a color defined in the ColorLibrary.
32+
33+
A workflow has been implemented to pull themes weekly from Figma. It is also possible to do it manually.
34+
35+
#### Pull themes manually
36+
37+
Whenever you need to update themes manually, follow these steps:
38+
39+
1. Get the `FIGMA_THEME_FILE_ID` from the [URL of the Figma file](https://www.figma.com/file/c9ZP7fwbfB5GWwr2hWXzwe/Colors---Figma-Tokens?node-id=0%3A1)
40+
41+
2. Generate your `FIGMA_API_ACCESS_TOKEN` from [Figma](https://www.figma.com/developers/api#authentication)
42+
43+
3. Export the environment variables
44+
45+
```sh
46+
export FIGMA_API_ACCESS_TOKEN=xxxxxx && export FIGMA_THEME_FILE_ID=xxxxxx
47+
```
48+
49+
4. Run the script
50+
```sh
51+
npm run update-json-themes
52+
```
53+
54+
55+
#### Generate `themes/themes.css` file
56+
57+
Once the updated themes are pulled from Figma it's possible to generate the `themes/themes.css` file using:
58+
```sh
59+
npm run build
60+
```
61+
The generated file will be available in the `dist` folder. This file will contain a `css` rule for each theme with internal mapping between all Arduino variables and their values.
62+
63+
An example:
64+
```sh
65+
:root .arc-dark {
66+
--arduino-button-primary-bg: #0ca1a6;
67+
--arduino-button-primary-bg-hover: #7fcbcd;
68+
}
69+
```
70+
71+
## Develop
72+
73+
1. Install dependencies with
74+
75+
```sh
76+
npm i
77+
```
78+
79+
2. Build the project with
80+
81+
```sh
82+
npm run build
83+
```
84+
85+
3. to test the components locally, run storybook
86+
87+
```sh
88+
npm run storybook
89+
```
90+
91+
4. to reference a WIP branch from another repo, set the package.json of the other repo to
92+
```json
93+
"dependencies": {
94+
"@arduino/arc": "github:arduino/arc#your-branch",
95+
...
96+
```
97+
98+
## Versioning
99+
100+
Versioning is automated, and managed via [semantic-release](https://github.com/semantic-release/)
101+
102+
All the commits that lands to `main` must stick with the Angular Commit Message Conventions (which is **CaseSensitive!**):
103+
104+
- feat: A new feature
105+
- fix: A bug fix
106+
- docs: Documentation only changes
107+
- style: Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
108+
- refactor: A code change that neither fixes a bug nor adds a feature
109+
- perf: A code change that improves performance
110+
- test: Adding missing or correcting existing tests
111+
- chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
112+
113+
Given the form above in the commits, semantic-release will automatically generate the changelog and bump the version of the libs.
114+
115+
**IMPORTANT**
116+
If you squash merge your commits, only the message in the squashed commit will be read from semantic-release.
117+
Please stick to the convention above ☝️ when squash-merging your PRs.
118+
119+
## Deployment Process
120+
121+
Deployment is handled automatically by the CI when your changes are merged into master. Sit back and relax ☺️

‎jest.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
2+
module.exports = {
3+
preset: 'ts-jest',
4+
testEnvironment: 'node',
5+
};

0 commit comments

Comments
 (0)