graphwise-styleguide 0.0.1-init3 → 0.0.1-init5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -11
- package/dist/{variables.css → variables-dark.css} +1162 -1717
- package/dist/variables-light.css +3513 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,33 +50,35 @@ This workflow describes how to update and integrate design tokens and styles fro
|
|
|
50
50
|
the application.
|
|
51
51
|
|
|
52
52
|
### 1. Update in Figma
|
|
53
|
-
-
|
|
53
|
+
- A UX developer updates the styleguide and design tokens in Figma.
|
|
54
54
|
|
|
55
55
|
### 2. Publish Tokens
|
|
56
|
-
-
|
|
57
|
-
UI developers.
|
|
56
|
+
- A UX developer publishes the updated tokens to this repository in the `dev` branch, or exports them as a file and
|
|
57
|
+
provides them to the UI developers.
|
|
58
58
|
|
|
59
59
|
### 3. Update Tokens in Repo
|
|
60
|
-
-
|
|
61
|
-
manually exported.
|
|
60
|
+
- A UI developer updates the tokens in the styleguide repository with the new version from Figma in case they were
|
|
61
|
+
manually exported from Token Studio in Figma.
|
|
62
62
|
|
|
63
63
|
### 4. Rebuild Stylesheet
|
|
64
|
-
-
|
|
64
|
+
- A UI developer generates the `dist/variables-dark.css` and `dist/variables-light.css` stylesheets by running
|
|
65
65
|
```bash
|
|
66
66
|
npm run build
|
|
67
67
|
```
|
|
68
68
|
|
|
69
69
|
### 5. Publish New Package Version
|
|
70
|
-
-
|
|
70
|
+
- A UI developer publishes a new version of the styleguide package to NPM, following semantic versioning.
|
|
71
71
|
|
|
72
72
|
### 6. Install Updated Styleguide
|
|
73
|
-
-
|
|
73
|
+
- A UI developer installs the new styleguide version in the respective Graphwise application by updating its
|
|
74
74
|
`package.json`.
|
|
75
75
|
|
|
76
76
|
### 7. Optimize Styleguide
|
|
77
|
-
The generated
|
|
78
|
-
styleguide for the GraphDB Workbench application, the UI developer runs `npm run build` in the
|
|
79
|
-
module.
|
|
77
|
+
The generated stylesheets are large and may contain variables unused in the particular application. To optimize the
|
|
78
|
+
styleguide in case for the GraphDB Workbench application, the UI developer runs `npm run build` in the
|
|
79
|
+
`packages/styleguide` module. This runs a custom script that purges unused variables from the generated stylesheets
|
|
80
|
+
based on the actual usage in the application stylesheets. The optimized stylesheets are then are exposed for loading in
|
|
81
|
+
the application.
|
|
80
82
|
|
|
81
83
|
## Notes
|
|
82
84
|
- Always follow semantic versioning when publishing updates.
|