@synergy-design-system/tokens 1.2.1 → 1.2.3
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 +14 -0
- package/README.md +17 -9
- 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 +2 -2
- package/dist/themes/light.css +2 -2
- package/package.json +7 -7
- package/src/figma-tokens/_docs.json +247 -19
- package/src/figma-tokens/semantic/input.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [@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)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* 🤔 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))
|
|
7
|
+
|
|
8
|
+
# [@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)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* 🤔 Update project dependencies ([#276](https://github.com/synergy-design-system/synergy-design-system/issues/276)) ([9aa94be](https://github.com/synergy-design-system/synergy-design-system/commit/9aa94beb8f1191862d7cf48617af2d1994a6df9c))
|
|
14
|
+
|
|
1
15
|
# [@synergy-design-system/tokens-v1.2.1](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.2.0...tokens/1.2.1) (2024-01-17)
|
|
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 "
|
|
147
|
+
@import "../node_modules/@synergy-design-system/tokens/dist/themes/light";
|
|
143
148
|
|
|
144
149
|
// Import the scss variables
|
|
145
|
-
@import "
|
|
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
|
-
//
|
|
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
package/dist/js/index.js
CHANGED
package/dist/scss/_tokens.scss
CHANGED
package/dist/themes/dark.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.2.
|
|
2
|
+
* @synergy-design-system/tokens version 1.2.2
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Mon, 29 Jan 2024 13:11:18 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root, .syn-theme-dark {
|
package/dist/themes/light.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.2.
|
|
2
|
+
* @synergy-design-system/tokens version 1.2.2
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Mon, 29 Jan 2024 13:11:18 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root, .syn-theme-light {
|
package/package.json
CHANGED
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"@semantic-release/changelog": "^6.0.3",
|
|
9
9
|
"@semantic-release/exec": "^6.0.3",
|
|
10
10
|
"@semantic-release/git": "^10.0.1",
|
|
11
|
-
"@tokens-studio/sd-transforms": "^0.11.
|
|
11
|
+
"@tokens-studio/sd-transforms": "^0.11.10",
|
|
12
12
|
"chalk": "^5.3.0",
|
|
13
13
|
"change-case": "^4.1.2",
|
|
14
|
-
"eslint": "^8.
|
|
15
|
-
"eslint-plugin-import": "^2.
|
|
16
|
-
"rimraf": "^5.0.
|
|
14
|
+
"eslint": "^8.56.0",
|
|
15
|
+
"eslint-plugin-import": "^2.29.1",
|
|
16
|
+
"rimraf": "^5.0.5",
|
|
17
17
|
"semantic-release": "^19.0.5",
|
|
18
18
|
"semantic-release-monorepo": "^7.0.5",
|
|
19
|
-
"style-dictionary": "^3.
|
|
19
|
+
"style-dictionary": "^3.9.2",
|
|
20
20
|
"@synergy-design-system/eslint-config-syn": "0.1.0"
|
|
21
21
|
},
|
|
22
22
|
"exports": {
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"import": "./dist/js/index.js"
|
|
26
26
|
},
|
|
27
27
|
"./themes/*": "./dist/themes/*",
|
|
28
|
-
"./scss": "./dist/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.
|
|
102
|
+
"version": "1.2.3",
|
|
103
103
|
"scripts": {
|
|
104
104
|
"build": "pnpm clean && node scripts/build.js",
|
|
105
105
|
"clean": "rimraf build",
|
|
@@ -335,13 +335,55 @@
|
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
337
|
"divider": {
|
|
338
|
-
"
|
|
339
|
-
"
|
|
340
|
-
|
|
338
|
+
"default": {
|
|
339
|
+
"description": {
|
|
340
|
+
"value": "Dividers are used to visually separate or group elements.",
|
|
341
|
+
"type": "text"
|
|
342
|
+
},
|
|
343
|
+
"title": {
|
|
344
|
+
"value": "Divider",
|
|
345
|
+
"type": "text"
|
|
346
|
+
}
|
|
341
347
|
},
|
|
342
|
-
"
|
|
343
|
-
"
|
|
344
|
-
|
|
348
|
+
"width": {
|
|
349
|
+
"title": {
|
|
350
|
+
"value": "Width",
|
|
351
|
+
"type": "text"
|
|
352
|
+
},
|
|
353
|
+
"description": {
|
|
354
|
+
"value": "Use the --width custom property to change the width of the divider.",
|
|
355
|
+
"type": "text"
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
"color": {
|
|
359
|
+
"title": {
|
|
360
|
+
"value": "Color",
|
|
361
|
+
"type": "text"
|
|
362
|
+
},
|
|
363
|
+
"description": {
|
|
364
|
+
"value": "Use the --color custom property to change the color of the divider.",
|
|
365
|
+
"type": "text"
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
"spacing": {
|
|
369
|
+
"title": {
|
|
370
|
+
"value": "Spacing",
|
|
371
|
+
"type": "text"
|
|
372
|
+
},
|
|
373
|
+
"description": {
|
|
374
|
+
"value": "Use the --spacing custom property to change the amount of space between the divider and it’s neighboring elements.",
|
|
375
|
+
"type": "text"
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
"vertical": {
|
|
379
|
+
"title": {
|
|
380
|
+
"value": "Vertical",
|
|
381
|
+
"type": "text"
|
|
382
|
+
},
|
|
383
|
+
"description": {
|
|
384
|
+
"value": "Add the vertical attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.",
|
|
385
|
+
"type": "text"
|
|
386
|
+
}
|
|
345
387
|
}
|
|
346
388
|
},
|
|
347
389
|
"drawer": {
|
|
@@ -616,6 +658,16 @@
|
|
|
616
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.",
|
|
617
659
|
"type": "text"
|
|
618
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
|
+
}
|
|
619
671
|
}
|
|
620
672
|
},
|
|
621
673
|
"menu-item": {
|
|
@@ -659,13 +711,35 @@
|
|
|
659
711
|
}
|
|
660
712
|
},
|
|
661
713
|
"option": {
|
|
662
|
-
"
|
|
663
|
-
"
|
|
664
|
-
|
|
714
|
+
"default": {
|
|
715
|
+
"description": {
|
|
716
|
+
"value": "Options define the selectable items within various form controls such as select.",
|
|
717
|
+
"type": "text"
|
|
718
|
+
},
|
|
719
|
+
"title": {
|
|
720
|
+
"value": "Option",
|
|
721
|
+
"type": "text"
|
|
722
|
+
}
|
|
665
723
|
},
|
|
666
|
-
"
|
|
667
|
-
"
|
|
668
|
-
|
|
724
|
+
"disabled": {
|
|
725
|
+
"title": {
|
|
726
|
+
"value": "Disabled",
|
|
727
|
+
"type": "text"
|
|
728
|
+
},
|
|
729
|
+
"description": {
|
|
730
|
+
"value": "Use the disabled attribute to disable an option and prevent it from being selected.",
|
|
731
|
+
"type": "text"
|
|
732
|
+
}
|
|
733
|
+
},
|
|
734
|
+
"prefix-suffix": {
|
|
735
|
+
"title": {
|
|
736
|
+
"value": "Prefix and Suffix",
|
|
737
|
+
"type": "text"
|
|
738
|
+
},
|
|
739
|
+
"description": {
|
|
740
|
+
"value": "Add icons to the start and end of menu items using the prefix and suffix slots.",
|
|
741
|
+
"type": "text"
|
|
742
|
+
}
|
|
669
743
|
}
|
|
670
744
|
},
|
|
671
745
|
"popup": {
|
|
@@ -851,13 +925,135 @@
|
|
|
851
925
|
}
|
|
852
926
|
},
|
|
853
927
|
"select": {
|
|
854
|
-
"
|
|
855
|
-
"
|
|
856
|
-
|
|
928
|
+
"default": {
|
|
929
|
+
"description": {
|
|
930
|
+
"value": "Selects allow you to choose items from a menu of predefined options.",
|
|
931
|
+
"type": "text"
|
|
932
|
+
},
|
|
933
|
+
"title": {
|
|
934
|
+
"value": "Select",
|
|
935
|
+
"type": "text"
|
|
936
|
+
}
|
|
857
937
|
},
|
|
858
|
-
"
|
|
859
|
-
"
|
|
860
|
-
|
|
938
|
+
"labels": {
|
|
939
|
+
"title": {
|
|
940
|
+
"value": "Labels",
|
|
941
|
+
"type": "text"
|
|
942
|
+
},
|
|
943
|
+
"description": {
|
|
944
|
+
"value": "Use the label attribute to give the select an accessible label. For labels that contain HTML, use the label slot instead.",
|
|
945
|
+
"type": "text"
|
|
946
|
+
}
|
|
947
|
+
},
|
|
948
|
+
"help-text": {
|
|
949
|
+
"title": {
|
|
950
|
+
"value": "Help Text",
|
|
951
|
+
"type": "text"
|
|
952
|
+
},
|
|
953
|
+
"description": {
|
|
954
|
+
"value": "Add descriptive help text to a select with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
|
|
955
|
+
"type": "text"
|
|
956
|
+
}
|
|
957
|
+
},
|
|
958
|
+
"clearable": {
|
|
959
|
+
"title": {
|
|
960
|
+
"value": "Clearable",
|
|
961
|
+
"type": "text"
|
|
962
|
+
},
|
|
963
|
+
"description": {
|
|
964
|
+
"value": "Use the clearable attribute to make the control clearable. The clear button only appears when an option is selected.",
|
|
965
|
+
"type": "text"
|
|
966
|
+
}
|
|
967
|
+
},
|
|
968
|
+
"disabled": {
|
|
969
|
+
"title": {
|
|
970
|
+
"value": "Disabled",
|
|
971
|
+
"type": "text"
|
|
972
|
+
},
|
|
973
|
+
"description": {
|
|
974
|
+
"value": "Use the disabled attribute to disable a select.",
|
|
975
|
+
"type": "text"
|
|
976
|
+
}
|
|
977
|
+
},
|
|
978
|
+
"multiple": {
|
|
979
|
+
"title": {
|
|
980
|
+
"value": "Multiple",
|
|
981
|
+
"type": "text"
|
|
982
|
+
},
|
|
983
|
+
"description": {
|
|
984
|
+
"value": "To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values.",
|
|
985
|
+
"type": "text"
|
|
986
|
+
}
|
|
987
|
+
},
|
|
988
|
+
"initialvalue": {
|
|
989
|
+
"title": {
|
|
990
|
+
"value": "Setting Initial Values",
|
|
991
|
+
"type": "text"
|
|
992
|
+
},
|
|
993
|
+
"description": {
|
|
994
|
+
"value": "Use the value attribute to set the initial selection.\n\nWhen using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, <syn-option> values cannot contain spaces. If you’re accessing the value property through Javascript, it will be an array.",
|
|
995
|
+
"type": "text"
|
|
996
|
+
}
|
|
997
|
+
},
|
|
998
|
+
"group": {
|
|
999
|
+
"title": {
|
|
1000
|
+
"value": "Grouping Options",
|
|
1001
|
+
"type": "text"
|
|
1002
|
+
},
|
|
1003
|
+
"description": {
|
|
1004
|
+
"value": "Use <syn-optgroup> to group listbox items visually.",
|
|
1005
|
+
"type": "text"
|
|
1006
|
+
}
|
|
1007
|
+
},
|
|
1008
|
+
"size": {
|
|
1009
|
+
"title": {
|
|
1010
|
+
"value": "Sizes",
|
|
1011
|
+
"type": "text"
|
|
1012
|
+
},
|
|
1013
|
+
"description": {
|
|
1014
|
+
"value": "Use the size attribute to change a select’s size. Note that size does not apply to listbox options.",
|
|
1015
|
+
"type": "text"
|
|
1016
|
+
}
|
|
1017
|
+
},
|
|
1018
|
+
"prefix": {
|
|
1019
|
+
"title": {
|
|
1020
|
+
"value": "Prefix Suffix Text and Icons",
|
|
1021
|
+
"type": "text"
|
|
1022
|
+
},
|
|
1023
|
+
"description": {
|
|
1024
|
+
"value": "Use the prefix and suffix slots to add text and icons.",
|
|
1025
|
+
"type": "text"
|
|
1026
|
+
}
|
|
1027
|
+
},
|
|
1028
|
+
"gettag": {
|
|
1029
|
+
"title": {
|
|
1030
|
+
"value": "Custom Tags",
|
|
1031
|
+
"type": "text"
|
|
1032
|
+
},
|
|
1033
|
+
"description": {
|
|
1034
|
+
"value": "When multiple options can be selected, you can provide custom tags by passing a function to the getTag property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getTag() function will be called for each option. The first argument is an <syn-option> element and the second argument is the tag’s index (its position in the tag list).\n\nRemember that custom tags are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.",
|
|
1035
|
+
"type": "text"
|
|
1036
|
+
}
|
|
1037
|
+
},
|
|
1038
|
+
"placeholder": {
|
|
1039
|
+
"title": {
|
|
1040
|
+
"value": "Placeholder",
|
|
1041
|
+
"type": "text"
|
|
1042
|
+
},
|
|
1043
|
+
"description": {
|
|
1044
|
+
"value": "Use the placeholder attribute to add a placeholder.",
|
|
1045
|
+
"type": "text"
|
|
1046
|
+
}
|
|
1047
|
+
},
|
|
1048
|
+
"focus": {
|
|
1049
|
+
"title": {
|
|
1050
|
+
"value": "Focus",
|
|
1051
|
+
"type": "text"
|
|
1052
|
+
},
|
|
1053
|
+
"description": {
|
|
1054
|
+
"value": "The focus event gives the user feedback that the Select has been focused by the keyboard interaction.",
|
|
1055
|
+
"type": "text"
|
|
1056
|
+
}
|
|
861
1057
|
}
|
|
862
1058
|
},
|
|
863
1059
|
"skeleton": {
|
|
@@ -1237,6 +1433,38 @@
|
|
|
1237
1433
|
"type": "text"
|
|
1238
1434
|
}
|
|
1239
1435
|
}
|
|
1436
|
+
},
|
|
1437
|
+
"optiongroup": {
|
|
1438
|
+
"default": {
|
|
1439
|
+
"title": {
|
|
1440
|
+
"value": "Option Group",
|
|
1441
|
+
"type": "text"
|
|
1442
|
+
},
|
|
1443
|
+
"description": {
|
|
1444
|
+
"value": "Use <syn-optgroup> to group listbox items visually.",
|
|
1445
|
+
"type": "text"
|
|
1446
|
+
}
|
|
1447
|
+
},
|
|
1448
|
+
"disabled": {
|
|
1449
|
+
"title": {
|
|
1450
|
+
"value": "Disabled",
|
|
1451
|
+
"type": "text"
|
|
1452
|
+
},
|
|
1453
|
+
"description": {
|
|
1454
|
+
"value": "Use the disabled attribute in the <syn-optgroup> to disable the Section and prevent it from being selected.",
|
|
1455
|
+
"type": "text"
|
|
1456
|
+
}
|
|
1457
|
+
},
|
|
1458
|
+
"prefix-suffix": {
|
|
1459
|
+
"title": {
|
|
1460
|
+
"value": "Prefix and suffix",
|
|
1461
|
+
"type": "text"
|
|
1462
|
+
},
|
|
1463
|
+
"description": {
|
|
1464
|
+
"value": "Add icons to the start and end of menu items using the prefix and suffix slots.",
|
|
1465
|
+
"type": "text"
|
|
1466
|
+
}
|
|
1467
|
+
}
|
|
1240
1468
|
}
|
|
1241
1469
|
},
|
|
1242
1470
|
"frameworks": {
|
|
@@ -1499,4 +1727,4 @@
|
|
|
1499
1727
|
}
|
|
1500
1728
|
}
|
|
1501
1729
|
}
|
|
1502
|
-
}
|
|
1730
|
+
}
|