@synergy-design-system/tokens 1.2.2 → 1.3.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +17 -9
  3. package/dist/js/index.d.ts +1 -1
  4. package/dist/js/index.js +1 -1
  5. package/dist/scss/_tokens.scss +1 -1
  6. package/dist/themes/dark.css +4 -4
  7. package/dist/themes/light.css +3 -3
  8. package/package.json +2 -2
  9. package/src/figma-tokens/_docs.json +12 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v1.3.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.2.3...tokens/1.3.0) (2024-01-30)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ syn-select / syn-option / syn-optgroup ([#274](https://github.com/synergy-design-system/synergy-design-system/issues/274)) ([25c6788](https://github.com/synergy-design-system/synergy-design-system/commit/25c678829e58a173c0fc23005a4f724b6d792dd7))
7
+
8
+ # [@synergy-design-system/tokens-v1.2.3](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.2.2...tokens/1.2.3) (2024-01-29)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * 🤔 SCSS tokens cannot be loaded via postcss because of defunct exports map ([#286](https://github.com/synergy-design-system/synergy-design-system/issues/286)) ([cc6a9c1](https://github.com/synergy-design-system/synergy-design-system/commit/cc6a9c1cee33377c313611c89bfa98119e0c2377))
14
+
1
15
  # [@synergy-design-system/tokens-v1.2.2](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.2.1...tokens/1.2.2) (2024-01-24)
2
16
 
3
17
 
package/README.md CHANGED
@@ -32,10 +32,10 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
32
32
  <head>
33
33
  <!-- Example 1: Referencing directly in a HTML document -->
34
34
  <!-- Make sure to add the stylesheet before using any components -->
35
- <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/light.css" />
35
+ <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
36
36
 
37
37
  <!-- Alternative: Use the dark theme -->
38
- <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/themes/dark.css" />
38
+ <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
39
39
  </head>
40
40
  <body>
41
41
  <div style="background: var(--syn-color-primary-500)">
@@ -63,8 +63,8 @@ To switch the theme, proceed in the following way:
63
63
  -- Load both themes initially.
64
64
  -- The last theme will be the default, in this case the light theme
65
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" />
66
+ <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
67
+ <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
68
68
  </head>
69
69
  <body>
70
70
  <button id="theme-switch">Switch Theme</button>
@@ -135,21 +135,29 @@ console.log(div.style.backgroundColor);
135
135
 
136
136
  Our variables are also available as scss variables that make it possible to consume them in sass based projects.
137
137
 
138
+ > Note that because of the complexity of sass based toolchains (e.g. vite ones differ from webpack ones and there are [multiple](https://www.npmjs.com/package/node-sass-package-importer) [loaders](https://www.npmjs.com/package/sass-module-importer) for `node_modules`), we only show examples using the **relative path** to the filesystem.
139
+ > Configuration for those systems is NOT part of this guide.
140
+
138
141
  ```scss
142
+ // ! All paths are relative, we assume your input file is named src/example.scss
143
+
139
144
  // Import the design tokens first.
140
145
  // This can be done in a sass file or in any other way described above.
141
146
  // Make sure to NOT add the .css file suffix, this will not work in sass
142
- @import "~@synergy-design-system/tokens/themes/light";
147
+ @import "../node_modules/@synergy-design-system/tokens/dist/themes/light";
143
148
 
144
149
  // Import the scss variables
145
- @import "@synergy-design-system/tokens/scss/tokens";
150
+ @import "../node_modules/@synergy-design-system/tokens/dist/scss/tokens";
146
151
 
152
+ // You are now able to use the provided tokens
147
153
  div {
148
154
  background: $SynColorPrimary500;
149
155
  }
150
156
 
151
- // This will render the following output:
152
- :root {
157
+ // When compiled, this should render the following output
158
+ :root,
159
+ .syn-theme-light {
160
+ // Other syn- variables truncated
153
161
  --syn-color-primary-500: #0ca2eb;
154
162
  }
155
163
 
@@ -168,7 +176,7 @@ Just make sure to add a valid path to the light theme in the `.vscode/settings.j
168
176
 
169
177
  ```json
170
178
  "cssVariables.lookupFiles": [
171
- "node_modules/@synergy-design-system/tokens/themes/light.css"
179
+ "node_modules/@synergy-design-system/tokens/dist/themes/light.css"
172
180
  ],
173
181
  ```
174
182
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.2.1
2
+ * @synergy-design-system/tokens version 1.2.3
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.2.1
2
+ * @synergy-design-system/tokens version 1.2.3
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.2.1
2
+ * @synergy-design-system/tokens version 1.2.3
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
package/dist/themes/dark.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.2.1
2
+ * @synergy-design-system/tokens version 1.2.3
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Wed, 24 Jan 2024 10:35:41 GMT
5
+ * Generated on Tue, 30 Jan 2024 07:58:46 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-dark {
@@ -232,8 +232,8 @@
232
232
  --syn-input-filled-color-focus: var(--syn-color-neutral-700);
233
233
  --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
234
234
  --syn-overlay-background-color: hsl(0 0% 0% / 43%);
235
- --syn-panel-background-color: var(--syn-color-neutral-50);
236
- --syn-panel-border-color: var(--syn-color-neutral-200);
235
+ --syn-panel-background-color: var(--syn-color-neutral-0);
236
+ --syn-panel-border-color: var(--syn-color-neutral-300);
237
237
  --syn-panel-border-width: 1px;
238
238
  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
239
239
  --syn-tooltip-background-color: var(--syn-color-neutral-800);
package/dist/themes/light.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 1.2.1
2
+ * @synergy-design-system/tokens version 1.2.3
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly
5
- * Generated on Wed, 24 Jan 2024 10:35:41 GMT
5
+ * Generated on Tue, 30 Jan 2024 07:58:46 GMT
6
6
  */
7
7
 
8
8
  :root, .syn-theme-light {
@@ -233,7 +233,7 @@
233
233
  --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
234
234
  --syn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
235
235
  --syn-panel-background-color: var(--syn-color-neutral-0);
236
- --syn-panel-border-color: var(--syn-color-neutral-200);
236
+ --syn-panel-border-color: var(--syn-color-neutral-300);
237
237
  --syn-panel-border-width: 1px;
238
238
  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
239
239
  --syn-tooltip-background-color: var(--syn-color-neutral-800);
package/package.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "import": "./dist/js/index.js"
26
26
  },
27
27
  "./themes/*": "./dist/themes/*",
28
- "./scss": "./dist/scss/_tokens.scss"
28
+ "./scss/*": "./dist/scss/*"
29
29
  },
30
30
  "files": [
31
31
  "dist",
@@ -99,7 +99,7 @@
99
99
  },
100
100
  "type": "module",
101
101
  "types": "./dist/js/index.d.ts",
102
- "version": "1.2.2",
102
+ "version": "1.3.0",
103
103
  "scripts": {
104
104
  "build": "pnpm clean && node scripts/build.js",
105
105
  "clean": "rimraf build",
package/src/figma-tokens/_docs.json CHANGED
@@ -658,6 +658,16 @@
658
658
  "value": "The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
659
659
  "type": "text"
660
660
  }
661
+ },
662
+ "stepper": {
663
+ "title": {
664
+ "value": "Stepper",
665
+ "type": "text"
666
+ },
667
+ "description": {
668
+ "value": "The Stepper (Input type number) attribute has additional step buttons at the right side for incrementing and decrementing values. It is ideal for situations where users need to adjust quantities or settings within a range.",
669
+ "type": "text"
670
+ }
661
671
  }
662
672
  },
663
673
  "menu-item": {
@@ -1007,11 +1017,11 @@
1007
1017
  },
1008
1018
  "prefix": {
1009
1019
  "title": {
1010
- "value": "Prefix Suffix Text and Icons",
1020
+ "value": "Prefix Icons",
1011
1021
  "type": "text"
1012
1022
  },
1013
1023
  "description": {
1014
- "value": "Use the prefix and suffix slots to add text and icons.",
1024
+ "value": "Use the prefix slot to prepend an icon to the control.",
1015
1025
  "type": "text"
1016
1026
  }
1017
1027
  },