@synergy-design-system/tokens 1.1.0 → 1.2.0
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/CHANGELOG.md +7 -0
- package/README.md +55 -5
- package/dist/js/index.d.ts +1 -1
- package/dist/js/index.js +1 -1
- package/dist/scss/_tokens.scss +1 -1
- package/dist/themes/dark.css +4 -3
- package/dist/themes/light.css +4 -3
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [@synergy-design-system/tokens-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.1.0...tokens/1.2.0) (2024-01-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ✨ Implement dark mode for components and documentation ([#238](https://github.com/synergy-design-system/synergy-design-system/issues/238)) ([3defbb2](https://github.com/synergy-design-system/synergy-design-system/commit/3defbb25bdf6432d72e6ec7971628a3990b7a970))
|
|
7
|
+
|
|
1
8
|
# [@synergy-design-system/tokens-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.0.3...tokens/1.1.0) (2024-01-11)
|
|
2
9
|
|
|
3
10
|
|
package/README.md
CHANGED
|
@@ -45,13 +45,63 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
|
|
|
45
45
|
</html>
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
+
#### Switching themes during runtime
|
|
49
|
+
|
|
50
|
+
You are also able to switch themes during the runtime. For the time being, we do not ship a utility function for this, as it is easy to implement. Each theme applies the variables via a `:root` selector, as well as a `className` that may be added to the `document.body`.
|
|
51
|
+
|
|
52
|
+
| Theme | Stylesheet to use | Body className |
|
|
53
|
+
| :---- | :------------------------ | :---------------- |
|
|
54
|
+
| light | `tokens/themes/light.css` | `syn-theme-light` |
|
|
55
|
+
| dark | `tokens/themes/dark.css` | `syn-theme-dark` |
|
|
56
|
+
|
|
57
|
+
To switch the theme, proceed in the following way:
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<!DOCTYPE html>
|
|
61
|
+
<head>
|
|
62
|
+
<!--
|
|
63
|
+
-- Load both themes initially.
|
|
64
|
+
-- The last theme will be the default, in this case the light theme
|
|
65
|
+
-->
|
|
66
|
+
<link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/dark.css" />
|
|
67
|
+
<link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/light.css" />
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<button id="theme-switch">Switch Theme</button>
|
|
71
|
+
<script>
|
|
72
|
+
const switchTheme = ({ target }) => {
|
|
73
|
+
const { body } = document;
|
|
74
|
+
const currentTheme = body.classList.contains('syn-theme-dark') ? 'dark' : 'light';
|
|
75
|
+
|
|
76
|
+
if (currentTheme === 'light') {
|
|
77
|
+
// Light theme
|
|
78
|
+
body.classList.remove('syn-theme-light');
|
|
79
|
+
body.classList.add('syn-theme-dark');
|
|
80
|
+
target.innerText = 'Switch to light theme';
|
|
81
|
+
} else {
|
|
82
|
+
// Dark theme
|
|
83
|
+
body.classList.remove('syn-theme-dark');
|
|
84
|
+
body.classList.add('syn-theme-light');
|
|
85
|
+
target.innerText = 'Switch to dark theme';
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
document
|
|
90
|
+
.querySelector('#theme-switch')
|
|
91
|
+
.addEventListener('click', switchTheme);
|
|
92
|
+
</script>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
|
|
48
98
|
```javascript
|
|
49
99
|
// Example 2: Importing for bundlers
|
|
50
100
|
// In most build systems, you will be able to import css files directly
|
|
51
101
|
// Use this way when you already use a build system like webpack or vite
|
|
52
102
|
// to make it part of your bundle.
|
|
53
103
|
// Note this import should happen BEFORE you render any components!
|
|
54
|
-
import
|
|
104
|
+
import "@synergy-design-system/tokens/themes/light.css";
|
|
55
105
|
```
|
|
56
106
|
|
|
57
107
|
---
|
|
@@ -65,13 +115,13 @@ All tokens map to the corresponding css variables to make sure we have a single
|
|
|
65
115
|
// Using variables in JavaScript
|
|
66
116
|
|
|
67
117
|
// Import the css variables first as they are our single source of truth
|
|
68
|
-
import
|
|
118
|
+
import "@synergy-design-system/tokens/themes/light.css";
|
|
69
119
|
|
|
70
120
|
// Imports all tokens
|
|
71
|
-
import * as tokens from
|
|
121
|
+
import * as tokens from "@synergy-design-system/tokens";
|
|
72
122
|
|
|
73
123
|
// Set the background color of a queried div via JavaScript
|
|
74
|
-
const elm = document.querySelector(
|
|
124
|
+
const elm = document.querySelector("div");
|
|
75
125
|
div.style.backgroundColor = tokens.SynColorPrimary500;
|
|
76
126
|
|
|
77
127
|
// Get the value
|
|
@@ -113,7 +163,7 @@ div {
|
|
|
113
163
|
## Optional: Configuring tokens in VSCode
|
|
114
164
|
|
|
115
165
|
Using VSCode?
|
|
116
|
-
You may also want to install vunguyentuan.vscode-css-variables to include css variable auto completion in your project.
|
|
166
|
+
You may also want to install `vunguyentuan.vscode-css-variables` to include css variable auto completion in your project.
|
|
117
167
|
Just make sure to add a valid path to the light theme in the `.vscode/settings.json` file like this:
|
|
118
168
|
|
|
119
169
|
```json
|
package/dist/js/index.d.ts
CHANGED
package/dist/js/index.js
CHANGED
package/dist/scss/_tokens.scss
CHANGED
package/dist/themes/dark.css
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.0
|
|
2
|
+
* @synergy-design-system/tokens version 1.1.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Mon, 15 Jan 2024 13:15:09 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
:root {
|
|
8
|
+
:root, .syn-theme-dark {
|
|
9
|
+
color-scheme: dark;
|
|
9
10
|
--syn-font-size-2x-small: 10px;
|
|
10
11
|
--syn-font-size-x-small: 12px;
|
|
11
12
|
--syn-font-size-small: 14px;
|
package/dist/themes/light.css
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.0
|
|
2
|
+
* @synergy-design-system/tokens version 1.1.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Mon, 15 Jan 2024 13:15:09 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
:root {
|
|
8
|
+
:root, .syn-theme-light {
|
|
9
|
+
color-scheme: light;
|
|
9
10
|
--syn-font-size-2x-small: 10px;
|
|
10
11
|
--syn-font-size-x-small: 12px;
|
|
11
12
|
--syn-font-size-small: 14px;
|
package/package.json
CHANGED
|
@@ -99,11 +99,12 @@
|
|
|
99
99
|
},
|
|
100
100
|
"type": "module",
|
|
101
101
|
"types": "./dist/js/index.d.ts",
|
|
102
|
-
"version": "1.
|
|
102
|
+
"version": "1.2.0",
|
|
103
103
|
"scripts": {
|
|
104
104
|
"build": "pnpm clean && node scripts/build.js",
|
|
105
105
|
"clean": "rimraf build",
|
|
106
106
|
"lint": "eslint scripts",
|
|
107
|
+
"format.eslint": "pnpm lint --fix",
|
|
107
108
|
"start": "pnpm build",
|
|
108
109
|
"release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
|
|
109
110
|
"release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
|