@synergy-design-system/tokens 2.20.1 → 2.22.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 +14 -0
- package/README.md +201 -2
- package/dist/js/index.d.ts +517 -522
- package/dist/js/index.js +259 -264
- package/dist/scss/_tokens.scss +203 -204
- package/dist/themes/dark.css +203 -206
- package/dist/themes/light.css +203 -206
- package/package.json +20 -8
- package/src/figma-tokens/_docs.json +41 -1
- package/src/figma-variables/output/sick2018-dark.json +1187 -0
- package/src/figma-variables/output/sick2018-light.json +1187 -0
package/dist/themes/light.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.21.0
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -7,149 +7,247 @@
|
|
|
7
7
|
:root, .syn-theme-light {
|
|
8
8
|
color-scheme: light;
|
|
9
9
|
|
|
10
|
-
--syn-
|
|
11
|
-
--syn-
|
|
12
|
-
--syn-
|
|
13
|
-
--syn-font-size-large: 20px;
|
|
14
|
-
--syn-font-size-x-large: 24px;
|
|
15
|
-
--syn-font-size-2x-large: 32px;
|
|
16
|
-
--syn-font-size-3x-large: 40px;
|
|
17
|
-
--syn-duration-extra-fast: 90ms;
|
|
18
|
-
--syn-duration-fast: 150ms;
|
|
19
|
-
--syn-duration-normal: 250ms;
|
|
20
|
-
--syn-duration-slow: 350ms;
|
|
21
|
-
--syn-duration-extra-slow: 500ms;
|
|
22
|
-
--syn-line-height-denser: 1;
|
|
23
|
-
--syn-line-height-dense: 1.2;
|
|
24
|
-
--syn-line-height-normal: 1.4;
|
|
25
|
-
--syn-line-height-loose: 1.8;
|
|
26
|
-
--syn-line-height-looser: 2.2;
|
|
27
|
-
--syn-font-weight-normal: 400;
|
|
28
|
-
--syn-font-weight-semibold: 600;
|
|
29
|
-
--syn-font-weight-bold: 700;
|
|
30
|
-
--syn-shadow-medium: 0 1px 2px 0 rgba(49, 55, 58, 0.08), 0 1px 4px 0 rgba(49, 55, 58, 0.08), 0 2px 8px 0 rgba(49, 55, 58, 0.08);
|
|
31
|
-
--syn-shadow-large: 0 0 3px 0 rgba(49, 55, 58, 0.12), 0 2px 6px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.16);
|
|
32
|
-
--syn-shadow-x-large: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 8px 24px 0 rgba(49, 55, 58, 0.12), 0 16px 48px 0 rgba(49, 55, 58, 0.16);
|
|
33
|
-
--syn-shadow-overflow-down: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.12), 0 4px 12px 0 rgba(49, 55, 58, 0.16); /** Overflow Down */
|
|
34
|
-
--syn-shadow-overflow-up: 0 -1px 4px 0 rgba(49, 55, 58, 0.12), 0 -3px 8px 0 rgba(49, 55, 58, 0.12), 0 -4px 12px 0 rgba(49, 55, 58, 0.16); /** Overflow Up */
|
|
35
|
-
--syn-shadow-overflow-left: -1px 0 4px 0 rgba(49, 55, 58, 0.12), -3px 0 8px 0 rgba(49, 55, 58, 0.12), -4px 0 12px 0 rgba(49, 55, 58, 0.16); /** Overflow Left */
|
|
36
|
-
--syn-shadow-overflow-right: 1px 0 4px 0 rgba(49, 55, 58, 0.12), 3px 0 8px 0 rgba(49, 55, 58, 0.12), 4px 0 12px 0 rgba(49, 55, 58, 0.16); /** Overflow Right */
|
|
37
|
-
--syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Open Sans */
|
|
38
|
-
--syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
39
|
-
--syn-spacing-4x-small: calc(4px / 4);
|
|
40
|
-
--syn-spacing-3x-small: calc(4px / 2);
|
|
41
|
-
--syn-spacing-2x-small: calc(4px * 1);
|
|
42
|
-
--syn-spacing-x-small: calc(4px * 2);
|
|
43
|
-
--syn-spacing-small: calc(4px * 3);
|
|
44
|
-
--syn-spacing-medium: calc(4px * 4);
|
|
45
|
-
--syn-spacing-medium-large: calc(4px * 5);
|
|
46
|
-
--syn-spacing-large: calc(4px * 6);
|
|
47
|
-
--syn-spacing-x-large: calc(4px * 8);
|
|
48
|
-
--syn-spacing-2x-large: calc(4px * 12);
|
|
49
|
-
--syn-spacing-3x-large: calc(4px * 16);
|
|
50
|
-
--syn-spacing-4x-large: calc(4px * 24);
|
|
51
|
-
--syn-spacing-5x-large: calc(4px * 32);
|
|
10
|
+
--syn-border-radius-circle: 9999px;
|
|
11
|
+
--syn-border-radius-large: 8px;
|
|
12
|
+
--syn-border-radius-medium: 8px;
|
|
52
13
|
--syn-border-radius-none: 0px;
|
|
53
14
|
--syn-border-radius-pill: 9999px;
|
|
54
|
-
--syn-border-radius-circle: 9999px;
|
|
55
15
|
--syn-border-radius-small: 4px;
|
|
56
|
-
--syn-border-radius-
|
|
57
|
-
--syn-
|
|
16
|
+
--syn-border-radius-x-large: 16px;
|
|
17
|
+
--syn-border-width-large: 3px; /** Large */
|
|
18
|
+
--syn-border-width-medium: 2px; /** Medium */
|
|
58
19
|
--syn-border-width-none: 0px; /** None */
|
|
59
20
|
--syn-border-width-small: 1px; /** Small */
|
|
60
|
-
--syn-border-width-medium: 2px; /** Medium */
|
|
61
|
-
--syn-border-width-large: 3px; /** Large */
|
|
62
21
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
63
|
-
--syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
64
|
-
--syn-opacity-50: 0.5; /** 50% */
|
|
65
|
-
--syn-text-decoration-default: none;
|
|
66
|
-
--syn-text-decoration-underline: underline;
|
|
67
|
-
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
68
|
-
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
69
22
|
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
23
|
+
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
24
|
+
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
25
|
+
--syn-color-accent-50: #fffbea;
|
|
26
|
+
--syn-color-accent-100: #fff2c5;
|
|
27
|
+
--syn-color-accent-200: #ffe685;
|
|
28
|
+
--syn-color-accent-300: #ffd246;
|
|
29
|
+
--syn-color-accent-400: #ffbd1b;
|
|
30
|
+
--syn-color-accent-500: #f39200;
|
|
31
|
+
--syn-color-accent-600: #e27200;
|
|
32
|
+
--syn-color-accent-700: #bb4d02;
|
|
33
|
+
--syn-color-accent-800: #983b08;
|
|
34
|
+
--syn-color-accent-900: #7c310b;
|
|
35
|
+
--syn-color-accent-950: #481700;
|
|
36
|
+
--syn-color-error-50: #fff0f2;
|
|
37
|
+
--syn-color-error-100: #ffdee2;
|
|
38
|
+
--syn-color-error-200: #ffc3c9;
|
|
39
|
+
--syn-color-error-300: #ff98a4;
|
|
40
|
+
--syn-color-error-400: #ff5d70;
|
|
41
|
+
--syn-color-error-500: #ff2b44;
|
|
42
|
+
--syn-color-error-600: #ea0823;
|
|
43
|
+
--syn-color-error-700: #d0051d;
|
|
44
|
+
--syn-color-error-800: #ab091c;
|
|
45
|
+
--syn-color-error-900: #8d0f1e;
|
|
46
|
+
--syn-color-error-950: #4e010a;
|
|
47
|
+
--syn-color-neutral-0: #ffffff;
|
|
48
|
+
--syn-color-neutral-50: #f9fafb;
|
|
49
|
+
--syn-color-neutral-100: #f2f3f6;
|
|
50
|
+
--syn-color-neutral-200: #e8ebec;
|
|
51
|
+
--syn-color-neutral-300: #d5dbdd;
|
|
52
|
+
--syn-color-neutral-400: #bac2c6;
|
|
53
|
+
--syn-color-neutral-500: #9ea9ae;
|
|
54
|
+
--syn-color-neutral-600: #859298;
|
|
55
|
+
--syn-color-neutral-700: #737f85;
|
|
56
|
+
--syn-color-neutral-800: #5e676b;
|
|
57
|
+
--syn-color-neutral-900: #4c5357;
|
|
58
|
+
--syn-color-neutral-950: #31373a;
|
|
59
|
+
--syn-color-neutral-1000: #000000;
|
|
60
|
+
--syn-color-primary-50: #f0f9ff;
|
|
61
|
+
--syn-color-primary-100: #e0f1fe;
|
|
62
|
+
--syn-color-primary-200: #b9e5fe;
|
|
63
|
+
--syn-color-primary-300: #7cd1fd;
|
|
64
|
+
--syn-color-primary-400: #36bbfa;
|
|
65
|
+
--syn-color-primary-500: #0ca2eb;
|
|
66
|
+
--syn-color-primary-600: #007cc1;
|
|
67
|
+
--syn-color-primary-700: #0166a3;
|
|
68
|
+
--syn-color-primary-800: #065786;
|
|
69
|
+
--syn-color-primary-900: #0b486f;
|
|
70
|
+
--syn-color-primary-950: #072e4a;
|
|
71
|
+
--syn-color-success-50: #f5fde8;
|
|
72
|
+
--syn-color-success-100: #e7facd;
|
|
73
|
+
--syn-color-success-200: #d1f4a2;
|
|
74
|
+
--syn-color-success-300: #b0eb6b;
|
|
75
|
+
--syn-color-success-400: #93dd3e;
|
|
76
|
+
--syn-color-success-500: #73c31f;
|
|
77
|
+
--syn-color-success-600: #63b017;
|
|
78
|
+
--syn-color-success-700: #437714;
|
|
79
|
+
--syn-color-success-800: #395e16;
|
|
80
|
+
--syn-color-success-900: #315017;
|
|
81
|
+
--syn-color-success-950: #172c07;
|
|
82
|
+
--syn-color-warning-50: #fefce8;
|
|
83
|
+
--syn-color-warning-100: #fdf7c4;
|
|
84
|
+
--syn-color-warning-200: #fcec8c;
|
|
85
|
+
--syn-color-warning-300: #f9da4b;
|
|
86
|
+
--syn-color-warning-400: #f5c413;
|
|
87
|
+
--syn-color-warning-500: #e5ae0d;
|
|
88
|
+
--syn-color-warning-600: #c68608;
|
|
89
|
+
--syn-color-warning-700: #9e5f0a;
|
|
90
|
+
--syn-color-warning-800: #834b10;
|
|
91
|
+
--syn-color-warning-900: #6f3e14;
|
|
92
|
+
--syn-color-warning-950: #411f07;
|
|
93
|
+
--syn-dimension-base: 4px; /** to be deprecated */
|
|
94
|
+
--syn-duration-extra-fast: 50ms;
|
|
95
|
+
--syn-duration-extra-slow: 1000ms;
|
|
96
|
+
--syn-duration-fast: 150ms;
|
|
97
|
+
--syn-duration-normal: 250ms;
|
|
98
|
+
--syn-duration-slow: 500ms;
|
|
70
99
|
--syn-focus-ring-color: var(--syn-color-primary-400);
|
|
71
|
-
--syn-focus-ring-width: var(--syn-border-width-medium);
|
|
72
100
|
--syn-focus-ring-offset: var(--syn-spacing-3x-small);
|
|
73
|
-
--syn-
|
|
74
|
-
--syn-
|
|
75
|
-
--syn-
|
|
76
|
-
--syn-
|
|
101
|
+
--syn-focus-ring-style: solid;
|
|
102
|
+
--syn-focus-ring-width: var(--syn-border-width-medium);
|
|
103
|
+
--syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
|
|
104
|
+
--syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
|
|
105
|
+
--syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
|
|
106
|
+
--syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
|
|
107
|
+
--syn-font-size-2x-large: 32px;
|
|
108
|
+
--syn-font-size-2x-small: 11px;
|
|
109
|
+
--syn-font-size-3x-large: 40px;
|
|
110
|
+
--syn-font-size-4x-large: 52px;
|
|
111
|
+
--syn-font-size-large: 20px;
|
|
112
|
+
--syn-font-size-medium: 16px;
|
|
113
|
+
--syn-font-size-small: 14px;
|
|
114
|
+
--syn-font-size-x-large: 24px;
|
|
115
|
+
--syn-font-size-x-small: 12px;
|
|
116
|
+
--syn-font-weight-bold: 700;
|
|
117
|
+
--syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
|
|
118
|
+
--syn-font-weight-normal: 400;
|
|
119
|
+
--syn-font-weight-semibold: 600;
|
|
77
120
|
--syn-input-background-color: var(--syn-color-neutral-0);
|
|
78
|
-
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
79
|
-
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
80
121
|
--syn-input-background-color-disabled: var(--syn-input-background-color);
|
|
122
|
+
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
123
|
+
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
81
124
|
--syn-input-border-color: var(--syn-color-neutral-700);
|
|
82
|
-
--syn-input-border-color-
|
|
125
|
+
--syn-input-border-color-disabled: var(--syn-color-neutral-700);
|
|
83
126
|
--syn-input-border-color-focus: var(--syn-color-neutral-950);
|
|
84
|
-
--syn-input-border-color-disables: var(--syn-color-neutral-700);
|
|
85
|
-
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
86
|
-
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
87
|
-
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
88
127
|
--syn-input-border-color-focus-error: var(--syn-color-error-700);
|
|
89
|
-
--syn-input-
|
|
128
|
+
--syn-input-border-color-hover: var(--syn-color-neutral-950);
|
|
129
|
+
--syn-input-border-radius-large: var(--syn-border-radius-none);
|
|
130
|
+
--syn-input-border-radius-medium: var(--syn-border-radius-none);
|
|
131
|
+
--syn-input-border-radius-small: var(--syn-border-radius-none);
|
|
132
|
+
--syn-input-border-width: 1px;
|
|
133
|
+
--syn-input-color: var(--syn-color-neutral-950);
|
|
134
|
+
--syn-input-color-disabled: var(--syn-color-neutral-950);
|
|
135
|
+
--syn-input-color-focus: var(--syn-color-neutral-950);
|
|
136
|
+
--syn-input-color-hover: var(--syn-color-neutral-950);
|
|
137
|
+
--syn-input-disabled-opacity: 0.5;
|
|
138
|
+
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
139
|
+
--syn-input-focus-ring-error: var(--syn-color-error-400);
|
|
140
|
+
--syn-input-focus-ring-offset: 0px;
|
|
141
|
+
--syn-input-font-family: var(--syn-font-sans);
|
|
142
|
+
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
143
|
+
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
144
|
+
--syn-input-font-size-small: var(--syn-font-size-small);
|
|
145
|
+
--syn-input-font-weight: var(--syn-font-weight-normal);
|
|
146
|
+
--syn-input-height-large: var(--syn-spacing-3x-large);
|
|
147
|
+
--syn-input-height-medium: var(--syn-spacing-2x-large);
|
|
148
|
+
--syn-input-height-small: 36px;
|
|
149
|
+
--syn-input-help-text-color: var(--syn-color-neutral-800);
|
|
150
|
+
--syn-input-help-text-color-error: var(--syn-color-error-700);
|
|
151
|
+
--syn-input-help-text-font-size-large: var(--syn-font-size-medium);
|
|
152
|
+
--syn-input-help-text-font-size-medium: var(--syn-font-size-small);
|
|
153
|
+
--syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
|
|
90
154
|
--syn-input-icon-color: var(--syn-color-neutral-800);
|
|
91
|
-
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
92
155
|
--syn-input-icon-color-focus: var(--syn-color-neutral-800);
|
|
156
|
+
--syn-input-icon-color-hover: var(--syn-color-neutral-800);
|
|
93
157
|
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
|
|
94
|
-
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
|
|
95
158
|
--syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
|
|
159
|
+
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
|
|
160
|
+
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
161
|
+
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
162
|
+
--syn-input-label-font-size-medium: var(--syn-font-size-medium);
|
|
163
|
+
--syn-input-label-font-size-small: var(--syn-font-size-small);
|
|
164
|
+
--syn-input-letter-spacing: var(--syn-letter-spacing-normal);
|
|
96
165
|
--syn-input-placeholder-color: var(--syn-color-neutral-500);
|
|
97
166
|
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
|
|
167
|
+
--syn-input-readonly-color: var(--syn-color-neutral-800);
|
|
168
|
+
--syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
|
|
169
|
+
--syn-input-readonly-color-focus: var(--syn-color-neutral-950);
|
|
170
|
+
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
171
|
+
--syn-input-readonly-background-color: var(--syn-color-neutral-50);
|
|
172
|
+
--syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
|
|
173
|
+
--syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
|
|
174
|
+
--syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
|
|
98
175
|
--syn-input-required-content: "*";
|
|
99
176
|
--syn-input-required-content-color: var(--syn-input-label-color);
|
|
100
177
|
--syn-input-required-content-offset: -2px;
|
|
101
|
-
--syn-input-label-color: var(--syn-color-neutral-950);
|
|
102
|
-
--syn-input-label-font-size-small: var(--syn-font-size-small);
|
|
103
|
-
--syn-input-label-font-size-medium: var(--syn-font-size-medium);
|
|
104
|
-
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
105
|
-
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
106
|
-
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
107
178
|
--syn-input-spacing-large: var(--syn-spacing-large);
|
|
108
|
-
--syn-input-
|
|
109
|
-
--syn-input-
|
|
110
|
-
--syn-input-
|
|
111
|
-
--syn-
|
|
112
|
-
--syn-
|
|
113
|
-
--syn-
|
|
114
|
-
--syn-
|
|
115
|
-
--syn-
|
|
116
|
-
--syn-
|
|
117
|
-
--syn-
|
|
118
|
-
--syn-
|
|
119
|
-
--syn-
|
|
120
|
-
--syn-
|
|
121
|
-
--syn-input-height-small: 36px;
|
|
122
|
-
--syn-input-height-medium: var(--syn-spacing-2x-large);
|
|
123
|
-
--syn-input-height-large: var(--syn-spacing-3x-large);
|
|
124
|
-
--syn-input-readonly-color: var(--syn-color-neutral-800);
|
|
125
|
-
--syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
|
|
126
|
-
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
127
|
-
--syn-input-readonly-color-focus: var(--syn-color-neutral-950);
|
|
128
|
-
--syn-input-font-size-small: var(--syn-font-size-small);
|
|
129
|
-
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
130
|
-
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
179
|
+
--syn-input-spacing-medium: var(--syn-spacing-medium);
|
|
180
|
+
--syn-input-spacing-small: var(--syn-spacing-small);
|
|
181
|
+
--syn-input-width: var(--syn-border-width-small);
|
|
182
|
+
--syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
|
|
183
|
+
--syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
|
|
184
|
+
--syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
|
|
185
|
+
--syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
|
|
186
|
+
--syn-letter-spacing-normal: normal;
|
|
187
|
+
--syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
|
|
188
|
+
--syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
|
|
189
|
+
--syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
|
|
190
|
+
--syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
|
|
191
|
+
--syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
|
|
131
192
|
--syn-link-color: var(--syn-color-primary-600);
|
|
132
|
-
--syn-link-color-hover: var(--syn-color-primary-900);
|
|
133
193
|
--syn-link-color-active: var(--syn-color-primary-950);
|
|
194
|
+
--syn-link-color-hover: var(--syn-color-primary-900);
|
|
134
195
|
--syn-link-quiet-color: var(--syn-typography-color-text);
|
|
135
|
-
--syn-link-quiet-color-hover: var(--syn-color-primary-900);
|
|
136
196
|
--syn-link-quiet-color-active: var(--syn-color-primary-950);
|
|
197
|
+
--syn-link-quiet-color-hover: var(--syn-color-primary-900);
|
|
198
|
+
--syn-opacity-50: 0.5; /** 50% */
|
|
137
199
|
--syn-overlay-background-color: rgba(0, 0, 0, 0.5);
|
|
138
200
|
--syn-panel-background-color: var(--syn-color-neutral-0);
|
|
139
201
|
--syn-panel-border-color: var(--syn-color-neutral-300);
|
|
140
202
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
141
|
-
--syn-
|
|
142
|
-
--syn-
|
|
203
|
+
--syn-spacing-2x-large: 48px;
|
|
204
|
+
--syn-spacing-2x-small: 4px;
|
|
205
|
+
--syn-spacing-3x-large: 64px;
|
|
206
|
+
--syn-spacing-3x-small: 2px;
|
|
207
|
+
--syn-spacing-4x-large: 96px;
|
|
208
|
+
--syn-spacing-4x-small: 1px;
|
|
209
|
+
--syn-spacing-5x-large: 128px;
|
|
210
|
+
--syn-spacing-large: 24px;
|
|
211
|
+
--syn-spacing-medium: 16px;
|
|
212
|
+
--syn-spacing-medium-large: 20px;
|
|
213
|
+
--syn-spacing-small: 12px;
|
|
214
|
+
--syn-spacing-x-large: 32px;
|
|
215
|
+
--syn-spacing-x-small: 8px;
|
|
216
|
+
--syn-text-decoration-default: none;
|
|
217
|
+
--syn-text-decoration-underline: underline;
|
|
143
218
|
--syn-toggle-size-large: var(--syn-spacing-large);
|
|
144
|
-
--syn-
|
|
219
|
+
--syn-toggle-size-medium: var(--syn-spacing-medium);
|
|
220
|
+
--syn-toggle-size-small: 14px;
|
|
221
|
+
--syn-tooltip-arrow-size: 9px;
|
|
145
222
|
--syn-tooltip-background-color: var(--syn-color-neutral-950);
|
|
223
|
+
--syn-tooltip-border-radius: var(--syn-border-radius-small);
|
|
146
224
|
--syn-tooltip-color: var(--syn-typography-color-text-inverted);
|
|
147
225
|
--syn-tooltip-font-family: var(--syn-font-sans);
|
|
226
|
+
--syn-tooltip-font-size: var(--syn-font-size-small);
|
|
148
227
|
--syn-tooltip-font-weight: var(--syn-font-weight-normal);
|
|
149
|
-
--syn-tooltip-font-size: var(--syn-button-font-size-small);
|
|
150
228
|
--syn-tooltip-line-height: var(--syn-line-height-normal);
|
|
151
229
|
--syn-tooltip-padding: var(--syn-spacing-small);
|
|
152
|
-
--syn-
|
|
230
|
+
--syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
|
|
231
|
+
--syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
|
|
232
|
+
--syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
|
|
233
|
+
--syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
|
|
234
|
+
--syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
|
|
235
|
+
--syn-typography-color-text: var(--syn-color-neutral-950);
|
|
236
|
+
--syn-typography-color-text-inverted: var(--syn-color-neutral-0);
|
|
237
|
+
--syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
|
|
238
|
+
--syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
|
|
239
|
+
--syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
|
|
240
|
+
--syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
|
|
241
|
+
--syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
|
|
242
|
+
--syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
|
|
243
|
+
--syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
|
|
244
|
+
--syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
|
|
245
|
+
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Down */
|
|
246
|
+
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Up */
|
|
247
|
+
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Left */
|
|
248
|
+
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Right */
|
|
249
|
+
--syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
|
|
250
|
+
--syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
|
|
153
251
|
--syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
154
252
|
--syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
155
253
|
--syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
@@ -166,106 +264,5 @@
|
|
|
166
264
|
--syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
167
265
|
--syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
168
266
|
--syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
169
|
-
--syn-typography-color-text: var(--syn-color-neutral-950);
|
|
170
|
-
--syn-typography-color-text-inverted: var(--syn-color-neutral-0);
|
|
171
|
-
--syn-color-primary-50: #f0f9ff;
|
|
172
|
-
--syn-color-primary-100: #e0f1FE;
|
|
173
|
-
--syn-color-primary-200: #b9e5fe;
|
|
174
|
-
--syn-color-primary-300: #7cd1fd;
|
|
175
|
-
--syn-color-primary-400: #36bbfa;
|
|
176
|
-
--syn-color-primary-500: #0ca2eb;
|
|
177
|
-
--syn-color-primary-600: #007cc1;
|
|
178
|
-
--syn-color-primary-700: #0166a3;
|
|
179
|
-
--syn-color-primary-800: #065786;
|
|
180
|
-
--syn-color-primary-900: #0B486F;
|
|
181
|
-
--syn-color-primary-950: #072E4A;
|
|
182
|
-
--syn-color-success-50: #f5fde8;
|
|
183
|
-
--syn-color-success-100: #e7facd;
|
|
184
|
-
--syn-color-success-200: #D1F4A2;
|
|
185
|
-
--syn-color-success-300: #B0EB6B;
|
|
186
|
-
--syn-color-success-400: #93DD3E;
|
|
187
|
-
--syn-color-success-500: #73C31F;
|
|
188
|
-
--syn-color-success-600: #63B017;
|
|
189
|
-
--syn-color-success-700: #437714;
|
|
190
|
-
--syn-color-success-800: #395E16;
|
|
191
|
-
--syn-color-success-900: #315017;
|
|
192
|
-
--syn-color-success-950: #172C07;
|
|
193
|
-
--syn-color-warning-50: #fefce8;
|
|
194
|
-
--syn-color-warning-100: #fdf7c4;
|
|
195
|
-
--syn-color-warning-200: #FCEC8c;
|
|
196
|
-
--syn-color-warning-300: #f9da4b;
|
|
197
|
-
--syn-color-warning-400: #f5c413;
|
|
198
|
-
--syn-color-warning-500: #e5ae0d;
|
|
199
|
-
--syn-color-warning-600: #c68608;
|
|
200
|
-
--syn-color-warning-700: #9e5f0a;
|
|
201
|
-
--syn-color-warning-800: #834b10;
|
|
202
|
-
--syn-color-warning-900: #6f3e14;
|
|
203
|
-
--syn-color-warning-950: #411f07;
|
|
204
|
-
--syn-color-error-50: #fff0f2;
|
|
205
|
-
--syn-color-error-100: #ffdee2;
|
|
206
|
-
--syn-color-error-200: #ffc3c9;
|
|
207
|
-
--syn-color-error-300: #ff98a4;
|
|
208
|
-
--syn-color-error-400: #ff5d70;
|
|
209
|
-
--syn-color-error-500: #ff2b44;
|
|
210
|
-
--syn-color-error-600: #ea0823;
|
|
211
|
-
--syn-color-error-700: #d0051d;
|
|
212
|
-
--syn-color-error-800: #ab091c;
|
|
213
|
-
--syn-color-error-900: #8D0f1e;
|
|
214
|
-
--syn-color-error-950: #4e010a;
|
|
215
|
-
--syn-color-accent-50: #FFFBEA;
|
|
216
|
-
--syn-color-accent-100: #FFF2C5;
|
|
217
|
-
--syn-color-accent-200: #FFE685;
|
|
218
|
-
--syn-color-accent-300: #FFD246;
|
|
219
|
-
--syn-color-accent-400: #FFBD1B;
|
|
220
|
-
--syn-color-accent-500: #F39200;
|
|
221
|
-
--syn-color-accent-600: #E27200;
|
|
222
|
-
--syn-color-accent-700: #BB4D02;
|
|
223
|
-
--syn-color-accent-800: #983B08;
|
|
224
|
-
--syn-color-accent-900: #7C310B;
|
|
225
|
-
--syn-color-accent-950: #481700;
|
|
226
|
-
--syn-color-neutral-0: white;
|
|
227
|
-
--syn-color-neutral-50: #f9fafb;
|
|
228
|
-
--syn-color-neutral-100: #F2F3F6;
|
|
229
|
-
--syn-color-neutral-200: #e8ebec;
|
|
230
|
-
--syn-color-neutral-300: #d5dbdd;
|
|
231
|
-
--syn-color-neutral-400: #bac2c6;
|
|
232
|
-
--syn-color-neutral-500: #9ea9ae;
|
|
233
|
-
--syn-color-neutral-600: #859298;
|
|
234
|
-
--syn-color-neutral-700: #737f85;
|
|
235
|
-
--syn-color-neutral-800: #5e676b;
|
|
236
|
-
--syn-color-neutral-900: #4c5357;
|
|
237
|
-
--syn-color-neutral-950: #31373a;
|
|
238
|
-
--syn-color-neutral-1000: black;
|
|
239
|
-
|
|
240
|
-
/* Fallbacks from Shoelace */
|
|
241
|
-
--syn-border-radius-large: 0.5rem;
|
|
242
|
-
--syn-border-radius-x-large: 1rem;
|
|
243
|
-
--syn-shadow-x-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.06);
|
|
244
|
-
--syn-shadow-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.12);
|
|
245
|
-
--syn-transition-x-slow: 1000ms;
|
|
246
|
-
--syn-transition-slow: 500ms;
|
|
247
|
-
--syn-transition-medium: 250ms;
|
|
248
|
-
--syn-transition-fast: 150ms;
|
|
249
|
-
--syn-transition-x-fast: 50ms;
|
|
250
|
-
--syn-font-serif: Georgia, "Times New Roman", serif;
|
|
251
|
-
--syn-font-size-2x-small: 0.625rem;
|
|
252
|
-
--syn-font-size-4x-large: 4.5rem;
|
|
253
|
-
--syn-font-weight-light: 300;
|
|
254
|
-
--syn-letter-spacing-denser: -0.03em;
|
|
255
|
-
--syn-letter-spacing-dense: -0.015em;
|
|
256
|
-
--syn-letter-spacing-normal: normal;
|
|
257
|
-
--syn-letter-spacing-loose: 0.075em;
|
|
258
|
-
--syn-letter-spacing-looser: 0.15em;
|
|
259
|
-
--syn-focus-ring-style: solid;
|
|
260
267
|
--syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
|
|
261
|
-
--syn-input-border-color-disabled: var(--syn-color-neutral-300);
|
|
262
|
-
--syn-input-border-width: 1px;
|
|
263
|
-
--syn-input-font-family: var(--syn-font-sans);
|
|
264
|
-
--syn-input-font-weight: var(--syn-font-weight-normal);
|
|
265
|
-
--syn-input-letter-spacing: var(--syn-letter-spacing-normal);
|
|
266
|
-
--syn-z-index-drawer: 700;
|
|
267
|
-
--syn-z-index-dialog: 800;
|
|
268
|
-
--syn-z-index-dropdown: 900;
|
|
269
|
-
--syn-z-index-toast: 950;
|
|
270
|
-
--syn-z-index-tooltip: 1000;
|
|
271
268
|
}
|
package/package.json
CHANGED
|
@@ -5,20 +5,24 @@
|
|
|
5
5
|
},
|
|
6
6
|
"description": "Design tokens for Synergy, the SICK Design System",
|
|
7
7
|
"devDependencies": {
|
|
8
|
+
"@figma-export/cli": "^6.2.2",
|
|
9
|
+
"@figma-export/types": "^6.2.2",
|
|
10
|
+
"@figma/rest-api-spec": "^0.31.0",
|
|
8
11
|
"@semantic-release/changelog": "^6.0.3",
|
|
9
12
|
"@semantic-release/exec": "^6.0.3",
|
|
10
13
|
"@semantic-release/git": "^10.0.1",
|
|
11
|
-
"@
|
|
12
|
-
"@
|
|
14
|
+
"@tamtamchik/json-deep-sort": "^1.3.0",
|
|
15
|
+
"@tokens-studio/sd-transforms": "^2.0.1",
|
|
16
|
+
"@types/node": "^22.17.0",
|
|
13
17
|
"chalk": "^5.4.1",
|
|
14
18
|
"change-case": "^5.4.4",
|
|
15
19
|
"eslint": "^8.57.1",
|
|
16
|
-
"eslint-import-resolver-typescript": "^4.4.
|
|
20
|
+
"eslint-import-resolver-typescript": "^4.4.4",
|
|
17
21
|
"rimraf": "^6.0.1",
|
|
18
22
|
"semantic-release": "^19.0.5",
|
|
19
23
|
"semantic-release-monorepo": "7.0.5",
|
|
20
|
-
"style-dictionary": "^5.0.
|
|
21
|
-
"stylelint": "^16.
|
|
24
|
+
"style-dictionary": "^5.0.1",
|
|
25
|
+
"stylelint": "^16.23.0",
|
|
22
26
|
"typescript": "^5.8.3",
|
|
23
27
|
"@synergy-design-system/eslint-config-syn": "0.1.0",
|
|
24
28
|
"@synergy-design-system/stylelint-config-syn": "0.1.0"
|
|
@@ -38,7 +42,8 @@
|
|
|
38
42
|
"files": [
|
|
39
43
|
"dist",
|
|
40
44
|
"CHANGELOG.md",
|
|
41
|
-
"src/figma-tokens"
|
|
45
|
+
"src/figma-tokens",
|
|
46
|
+
"src/figma-variables/output"
|
|
42
47
|
],
|
|
43
48
|
"homepage": "https://synergy-design-system.github.io",
|
|
44
49
|
"keywords": [
|
|
@@ -107,16 +112,23 @@
|
|
|
107
112
|
},
|
|
108
113
|
"type": "module",
|
|
109
114
|
"types": "./dist/js/index.d.ts",
|
|
110
|
-
"version": "2.
|
|
115
|
+
"version": "2.22.0",
|
|
111
116
|
"scripts": {
|
|
112
117
|
"build": "pnpm clean && node scripts/build.js",
|
|
113
|
-
"
|
|
118
|
+
"build:figma": "pnpm run build:variables && pnpm run build:styles",
|
|
119
|
+
"build:variables": "node scripts/figma/transform-tokens.js",
|
|
120
|
+
"build:styles": "node scripts/figma/transform-styles.js",
|
|
121
|
+
"fetch:figma": "pnpm run fetch:variables && pnpm run fetch:styles",
|
|
122
|
+
"fetch:styles": "figma-export use-config",
|
|
123
|
+
"fetch:variables": "node scripts/figma/fetch-variables.js",
|
|
124
|
+
"clean": "rimraf dist",
|
|
114
125
|
"lint:css": "stylelint \"dist/**/*.css\"",
|
|
115
126
|
"lint:js": "eslint scripts dist/js",
|
|
116
127
|
"lint:types": "tsc --noEmit",
|
|
117
128
|
"lint": "pnpm run /^lint:.*/",
|
|
118
129
|
"format.eslint": "pnpm lint:js --fix",
|
|
119
130
|
"start": "pnpm build",
|
|
131
|
+
"compare": "pnpm build && node test/test-css-variables.js",
|
|
120
132
|
"release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
|
|
121
133
|
"release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
|
|
122
134
|
}
|
|
@@ -3333,6 +3333,46 @@
|
|
|
3333
3333
|
"type": "text"
|
|
3334
3334
|
}
|
|
3335
3335
|
},
|
|
3336
|
+
"multiple": {
|
|
3337
|
+
"title": {
|
|
3338
|
+
"value": "Multiple",
|
|
3339
|
+
"type": "text"
|
|
3340
|
+
},
|
|
3341
|
+
"description": {
|
|
3342
|
+
"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. \n\nUse the max-options-visible attribute to define the maximum number of selected options that will be visible. After the maximum, \"+n\" will be shown to indicate the number of additional items that are selected.",
|
|
3343
|
+
"type": "text"
|
|
3344
|
+
}
|
|
3345
|
+
},
|
|
3346
|
+
"initial-values": {
|
|
3347
|
+
"title": {
|
|
3348
|
+
"value": "Setting initial values",
|
|
3349
|
+
"type": "text"
|
|
3350
|
+
},
|
|
3351
|
+
"description": {
|
|
3352
|
+
"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.",
|
|
3353
|
+
"type": "text"
|
|
3354
|
+
}
|
|
3355
|
+
},
|
|
3356
|
+
"restrict-options": {
|
|
3357
|
+
"title": {
|
|
3358
|
+
"value": "Restrict options",
|
|
3359
|
+
"type": "text"
|
|
3360
|
+
},
|
|
3361
|
+
"description": {
|
|
3362
|
+
"value": "This restricts the combobox to only allow selections from the available options. Users cannot enter custom values that are not in the list.",
|
|
3363
|
+
"type": "text"
|
|
3364
|
+
}
|
|
3365
|
+
},
|
|
3366
|
+
"no-results": {
|
|
3367
|
+
"title": {
|
|
3368
|
+
"value": "No results found",
|
|
3369
|
+
"type": "text"
|
|
3370
|
+
},
|
|
3371
|
+
"description": {
|
|
3372
|
+
"value": "A “No results found” message is displayed, when the search term doesn’t match the options.",
|
|
3373
|
+
"type": "text"
|
|
3374
|
+
}
|
|
3375
|
+
},
|
|
3336
3376
|
"size": {
|
|
3337
3377
|
"title": {
|
|
3338
3378
|
"value": "Sizes",
|
|
@@ -4057,4 +4097,4 @@
|
|
|
4057
4097
|
}
|
|
4058
4098
|
}
|
|
4059
4099
|
}
|
|
4060
|
-
}
|
|
4100
|
+
}
|