@synergy-design-system/tokens 2.21.0 → 2.23.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 (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +231 -9
  3. package/dist/js/index.d.ts +517 -522
  4. package/dist/js/index.js +259 -264
  5. package/dist/scss/_tokens.scss +203 -204
  6. package/dist/themes/dark.css +204 -207
  7. package/dist/themes/light.css +204 -207
  8. package/dist/themes/sick2018_dark.css +268 -0
  9. package/dist/themes/sick2018_light.css +268 -0
  10. package/dist/themes/sick2025_dark.css +268 -0
  11. package/dist/themes/sick2025_light.css +268 -0
  12. package/package.json +20 -8
  13. package/src/figma-variables/output/sick2018-dark.json +1183 -0
  14. package/src/figma-variables/output/sick2018-light.json +1183 -0
  15. package/src/figma-variables/output/sick2025-dark.json +1183 -0
  16. package/src/figma-variables/output/sick2025-light.json +1183 -0
package/dist/themes/light.css CHANGED
@@ -1,155 +1,253 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.20.1
2
+ * @synergy-design-system/tokens version 2.22.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-theme-light {
7
+ :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
- --syn-font-size-x-small: 12px;
11
- --syn-font-size-small: 14px;
12
- --syn-font-size-medium: 16px;
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-medium: 8px;
57
- --syn-dimension-base: 4px;
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-input-color: var(--syn-color-neutral-950);
74
- --syn-input-color-hover: var(--syn-color-neutral-950);
75
- --syn-input-color-focus: var(--syn-color-neutral-950);
76
- --syn-input-color-disabled: var(--syn-color-neutral-950);
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-hover: var(--syn-color-neutral-950);
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-width: var(--syn-border-width-small);
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-focus-ring-color: var(--syn-color-primary-400);
109
- --syn-input-focus-ring-offset: 0;
110
- --syn-input-focus-ring-error: var(--syn-color-error-400);
111
- --syn-input-disabled-opacity: 0.5;
112
- --syn-input-readonly-background-color: var(--syn-color-neutral-50);
113
- --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
114
- --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
115
- --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
116
- --syn-input-help-text-color: var(--syn-color-neutral-800);
117
- --syn-input-help-text-color-error: var(--syn-color-error-700);
118
- --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
119
- --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
120
- --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
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-toggle-size-small: 14px;
142
- --syn-toggle-size-medium: var(--syn-spacing-medium);
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-tooltip-border-radius: var(--syn-border-radius-small);
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-tooltip-arrow-size: 9px;
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);
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);
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);
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);
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
  }