@synergy-design-system/tokens 1.0.0-main.3 → 1.0.0-main.4

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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/dark.css +239 -0
  3. package/dist/css/light.css +239 -0
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v1.0.0-main.4](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.3...tokens/1.0.0-main.4) (2023-11-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ add button tokens ([#109](https://github.com/SickDesignSystem/synergy/issues/109)) ([237148c](https://github.com/SickDesignSystem/synergy/commit/237148ccf64be74fc3721dc5381010c5495890f8))
7
+
1
8
  # [@synergy-design-system/tokens-v1.0.0-main.3](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.2...tokens/1.0.0-main.3) (2023-10-26)
2
9
 
3
10
 
package/dist/css/dark.css ADDED
@@ -0,0 +1,239 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.3
3
+ * SICK Global UX Foundation
4
+ * Do not edit directly
5
+ * Generated on Thu, 02 Nov 2023 15:24:29 GMT
6
+ */
7
+
8
+ :root { --syn-font-size-2x-small: 10px;
9
+ --syn-font-size-x-small: 12px;
10
+ --syn-font-size-small: 14px;
11
+ --syn-font-size-medium: 16px;
12
+ --syn-font-size-large: 20px;
13
+ --syn-font-size-x-large: 24px;
14
+ --syn-font-size-2x-large: 32px;
15
+ --syn-font-size-3x-large: 40px;
16
+ --syn-duration-extra-fast: 90ms;
17
+ --syn-duration-fast: 150ms;
18
+ --syn-duration-normal: 250ms;
19
+ --syn-duration-slow: 350ms;
20
+ --syn-duration-extra-slow: 500ms;
21
+ --syn-line-height-denser: 1;
22
+ --syn-line-height-dense: 1.2;
23
+ --syn-line-height-normal: 1.4;
24
+ --syn-line-height-loose: 1.8;
25
+ --syn-line-height-looser: 2.2;
26
+ --syn-font-weight-normal: 400;
27
+ --syn-font-weight-semibold: 600;
28
+ --syn-font-weight-bold: 700;
29
+ --syn-shadow-medium: 0 1px 2px 0 rgba(249, 250, 251, 0.08), 0 1px 4px 0 rgba(249, 250, 251, 0.08), 0 2px 8px 0 rgba(249, 250, 251, 0.08);
30
+ --syn-shadow-large: 0 0 3px 0 rgba(249, 250, 251, 0.12), 0 2px 6px 0 rgba(249, 250, 251, 0.12), 0 3px 8px 0 rgba(249, 250, 251, 0.16);
31
+ --syn-shadow-x-large: 0 1px 4px 0 rgba(249, 250, 251, 0.12), 0 8px 24px 0 rgba(249, 250, 251, 0.12), 0 16px 48px 0 rgba(249, 250, 251, 0.16);
32
+ --syn-shadow-overflow-down: 0 1px 4px 0 rgba(249, 250, 251, 0.12), 0 3px 8px 0 rgba(249, 250, 251, 0.12), 0 4px 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Down */
33
+ --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(249, 250, 251, 0.12), 0 -3px 8px 0 rgba(249, 250, 251, 0.12), 0 -4px 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Up */
34
+ --syn-shadow-overflow-left: -1px 0 4px 0 rgba(249, 250, 251, 0.12), -3px 0 8px 0 rgba(249, 250, 251, 0.12), -4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Left */
35
+ --syn-shadow-overflow-right: 1px 0 4px 0 rgba(249, 250, 251, 0.12), 3px 0 8px 0 rgba(249, 250, 251, 0.12), 4px 0 12px 0 rgba(249, 250, 251, 0.16); /* Overflow Right */
36
+ --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
37
+ '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-large: calc(4px * 6);
46
+ --syn-spacing-x-large: calc(4px * 8);
47
+ --syn-spacing-2x-large: calc(4px * 12);
48
+ --syn-spacing-3x-large: calc(4px * 16);
49
+ --syn-spacing-4x-large: calc(4px * 24);
50
+ --syn-spacing-5x-large: calc(4px * 32);
51
+ --syn-border-radius-none: 0px;
52
+ --syn-border-radius-pill: 9999px;
53
+ --syn-border-radius-circle: 9999px;
54
+ --syn-dimension-base: 4px;
55
+ --syn-border-width-none: 0px; /* None */
56
+ --syn-border-width-small: 1px; /* Small */
57
+ --syn-border-width-medium: 2px; /* Medium */
58
+ --syn-border-width-large: 3px; /* Large */
59
+ --syn-border-width-x-large: 4px; /* X Large */
60
+ --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
61
+ --syn-focus-ring-color: var(--syn-color-primary-600);
62
+ --syn-focus-ring-width: var(--syn-border-width-small);
63
+ --syn-focus-ring-offset: 0;
64
+ --syn-input-color: var(--syn-color-neutral-950);
65
+ --syn-input-color-hover: var(--syn-color-neutral-950);
66
+ --syn-input-color-focus: var(--syn-color-neutral-950);
67
+ --syn-input-color-disabled: var(--syn-color-neutral-950);
68
+ --syn-input-background-color: var(--syn-color-neutral-0);
69
+ --syn-input-background-color-hover: var(--syn-input-background.color);
70
+ --syn-input-background-color-focus: var(--syn-input-background.color);
71
+ --syn-input-background-color-disabled: var(--syn-input-background.color);
72
+ --syn-input-border-color: var(--syn-color-neutral-700);
73
+ --syn-input-border-color-hover: var(--syn-color-neutral-950);
74
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
75
+ --syn-input-border-color-disables: var(--syn-color-neutral-700);
76
+ --syn-input-border-radius-small: var(--syn-border-radius-none);
77
+ --syn-input-border-radius-medium: var(--syn-border-radius-none);
78
+ --syn-input-border-radius-large: var(--syn-border-radius-none);
79
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
80
+ --syn-input-width: var(--syn-border-width-small);
81
+ --syn-input-icon-color: var(--syn-color-neutral-800);
82
+ --syn-input-icon-color-hover: var(--syn-color-neutral-800);
83
+ --syn-input-icon-color-focus: var(--syn-color-neutral-800);
84
+ --syn-input-placeholder-color: var(--syn-color-neutral-500);
85
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
86
+ --syn-input-required-content: "*";
87
+ --syn-input-required-content-offset: -2px;
88
+ --syn-input-label-color: var(--syn-color-neutral-950);
89
+ --syn-input-label-font-size-small: var(--syn-font-size-small);
90
+ --syn-input-label-font-size-medium: var(--syn-font-size-medium);
91
+ --syn-input-label-font-size-large: var(--syn-font-size-large);
92
+ --syn-input-spacing-small: var(--syn-spacing-small);
93
+ --syn-input-spacing-medium: var(--syn-spacing-medium);
94
+ --syn-input-spacing-large: var(--syn-spacing-large);
95
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
96
+ --syn-input-focus-ring-offset: 0;
97
+ --syn-input-focus-ring-error: var(--syn-color-error-400);
98
+ --syn-input-disabled-opacity: 0.5;
99
+ --syn-input-filled-background-color: var(--syn-color-neutral-50);
100
+ --syn-input-filled-background-color-hover: var(--syn-color-neutral-50);
101
+ --syn-input-filled-background-color-focus: var(--syn-color-neutral-50);
102
+ --syn-input-filled-background-color-disabled: var(--syn-color-neutral-50);
103
+ --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
104
+ --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
105
+ --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
106
+ --syn-input-help-text-color: var(--syn-color-neutral-800);
107
+ --syn-input-help-text-color-error: var(--syn-color-error-700);
108
+ --syn-input-font-size-small: var(--syn-font-size-small);
109
+ --syn-input-font-size-medium: var(--syn-font-size-medium);
110
+ --syn-input-font-size-large: var(--syn-font-size-large);
111
+ --syn-input-height-small: var(--syn-spacing-x-large);
112
+ --syn-input-height-medium: var(--syn-spacing-2x-large);
113
+ --syn-input-height-large: var(--syn-spacing-3x-large);
114
+ --syn-input-filled-color: var(--syn-color-neutral-800);
115
+ --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
116
+ --syn-input-filled-color-hover: var(--syn-color-neutral-950);
117
+ --syn-input-filled-color-focus: var(--syn-color-neutral-950);
118
+ --syn-color-primary-50: #072E4A;
119
+ --syn-color-primary-100: #0B486F;
120
+ --syn-color-primary-200: #065786;
121
+ --syn-color-primary-300: #0166a3;
122
+ --syn-color-primary-400: #007cc1;
123
+ --syn-color-primary-500: #0ca2eb;
124
+ --syn-color-primary-600: #0ca2eb;
125
+ --syn-color-primary-700: #7cd1fd;
126
+ --syn-color-primary-800: #b9e5fe;
127
+ --syn-color-primary-900: #e0f1FE;
128
+ --syn-color-primary-950: #f0f9ff;
129
+ --syn-color-success-50: #172C07;
130
+ --syn-color-success-100: #315017;
131
+ --syn-color-success-200: #395E16;
132
+ --syn-color-success-300: #437714;
133
+ --syn-color-success-400: #63B017;
134
+ --syn-color-success-500: #73C31F;
135
+ --syn-color-success-600: #93DD3E;
136
+ --syn-color-success-700: #B0EB6B;
137
+ --syn-color-success-800: #D1F4A2;
138
+ --syn-color-success-900: #e7facd;
139
+ --syn-color-success-950: #f5fde8;
140
+ --syn-color-warning-50: #411f07;
141
+ --syn-color-warning-100: #6f3e14;
142
+ --syn-color-warning-200: #834b10;
143
+ --syn-color-warning-300: #9e5f0a;
144
+ --syn-color-warning-400: #c68608;
145
+ --syn-color-warning-500: #e5ae0d;
146
+ --syn-color-warning-600: #f5c413;
147
+ --syn-color-warning-700: #f9da4b;
148
+ --syn-color-warning-800: #FCEC8c;
149
+ --syn-color-warning-900: #fdf7c4;
150
+ --syn-color-warning-950: #fefce8;
151
+ --syn-color-error-50: #4e010a;
152
+ --syn-color-error-100: #8D0f1e;
153
+ --syn-color-error-200: #ab091c;
154
+ --syn-color-error-300: #d0051d;
155
+ --syn-color-error-400: #ea0823;
156
+ --syn-color-error-500: #ff2b44;
157
+ --syn-color-error-600: #ff5d70;
158
+ --syn-color-error-700: #ff98a4;
159
+ --syn-color-error-800: #ffc3c9;
160
+ --syn-color-error-900: #ffdee2;
161
+ --syn-color-error-950: #fff0f2;
162
+ --syn-color-accent-50: #481700;
163
+ --syn-color-accent-100: #7C310B;
164
+ --syn-color-accent-200: #983B08;
165
+ --syn-color-accent-300: #BB4D02;
166
+ --syn-color-accent-400: #E27200;
167
+ --syn-color-accent-500: #F39200;
168
+ --syn-color-accent-600: #FFBD1B;
169
+ --syn-color-accent-700: #FFD246;
170
+ --syn-color-accent-800: #FFE685;
171
+ --syn-color-accent-900: #FFF2C5;
172
+ --syn-color-accent-950: #FFFBEA;
173
+ --syn-color-neutral-0: black;
174
+ --syn-color-neutral-50: #31373a;
175
+ --syn-color-neutral-100: #4c5357;
176
+ --syn-color-neutral-200: #5e676b;
177
+ --syn-color-neutral-300: #737f85;
178
+ --syn-color-neutral-400: #859298;
179
+ --syn-color-neutral-500: #9ea9ae;
180
+ --syn-color-neutral-600: #bac2c6;
181
+ --syn-color-neutral-700: #d5dbdd;
182
+ --syn-color-neutral-800: #e8ebec;
183
+ --syn-color-neutral-900: #f2f5f5;
184
+ --syn-color-neutral-950: #f9fafb;
185
+ --syn-color-neutral-1000: white;
186
+ /* Fallbacks from Shoelace */
187
+ --syn-border-radius-small: 0.1875rem;
188
+ --syn-border-radius-medium: 0.25rem;
189
+ --syn-border-radius-large: 0.5rem;
190
+ --syn-border-radius-x-large: 1rem;
191
+ --syn-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
192
+ --syn-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
193
+ --syn-transition-x-slow: 1000ms;
194
+ --syn-transition-slow: 500ms;
195
+ --syn-transition-medium: 250ms;
196
+ --syn-transition-fast: 150ms;
197
+ --syn-transition-x-fast: 50ms;
198
+ --syn-font-serif: Georgia, "Times New Roman", serif;
199
+ --syn-font-size-4x-large: 4.5rem;
200
+ --syn-font-weight-light: 300;
201
+ --syn-letter-spacing-denser: -0.03em;
202
+ --syn-letter-spacing-dense: -0.015em;
203
+ --syn-letter-spacing-normal: normal;
204
+ --syn-letter-spacing-loose: 0.075em;
205
+ --syn-letter-spacing-looser: 0.15em;
206
+ --syn-focus-ring-style: solid;
207
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width)
208
+ var(--syn-focus-ring-color);
209
+ --syn-button-font-size-small: var(--syn-font-size-x-small);
210
+ --syn-button-font-size-medium: var(--syn-font-size-small);
211
+ --syn-button-font-size-large: var(--syn-font-size-medium);
212
+ --syn-input-border-color-disabled: var(--syn-color-neutral-300);
213
+ --syn-input-border-width: 1px;
214
+ --syn-input-required-content-color: var(--syn-input-label-color);
215
+ --syn-input-font-family: var(--syn-font-sans);
216
+ --syn-input-font-weight: var(--syn-font-weight-normal);
217
+ --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
218
+ --syn-toggle-size-small: 0.875rem;
219
+ --syn-toggle-size-medium: 1.125rem;
220
+ --syn-toggle-size-large: 1.375rem;
221
+ --syn-overlay-background-color: hsl(0 0% 0% / 43%);
222
+ --syn-panel-background-color: var(--syn-color-neutral-50);
223
+ --syn-panel-border-color: var(--syn-color-neutral-200);
224
+ --syn-panel-border-width: 1px;
225
+ --syn-tooltip-border-radius: var(--syn-border-radius-medium);
226
+ --syn-tooltip-background-color: var(--syn-color-neutral-800);
227
+ --syn-tooltip-color: var(--syn-color-neutral-0);
228
+ --syn-tooltip-font-family: var(--syn-font-sans);
229
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
230
+ --syn-tooltip-font-size: var(--syn-font-size-small);
231
+ --syn-tooltip-line-height: var(--syn-line-height-dense);
232
+ --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
233
+ --syn-tooltip-arrow-size: 6px;
234
+ --syn-z-index-drawer: 700;
235
+ --syn-z-index-dialog: 800;
236
+ --syn-z-index-dropdown: 900;
237
+ --syn-z-index-toast: 950;
238
+ --syn-z-index-tooltip: 1000;
239
+ }
package/dist/css/light.css ADDED
@@ -0,0 +1,239 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 1.0.0-main.3
3
+ * SICK Global UX Foundation
4
+ * Do not edit directly
5
+ * Generated on Thu, 02 Nov 2023 15:24:29 GMT
6
+ */
7
+
8
+ :root { --syn-font-size-2x-small: 10px;
9
+ --syn-font-size-x-small: 12px;
10
+ --syn-font-size-small: 14px;
11
+ --syn-font-size-medium: 16px;
12
+ --syn-font-size-large: 20px;
13
+ --syn-font-size-x-large: 24px;
14
+ --syn-font-size-2x-large: 32px;
15
+ --syn-font-size-3x-large: 40px;
16
+ --syn-duration-extra-fast: 90ms;
17
+ --syn-duration-fast: 150ms;
18
+ --syn-duration-normal: 250ms;
19
+ --syn-duration-slow: 350ms;
20
+ --syn-duration-extra-slow: 500ms;
21
+ --syn-line-height-denser: 1;
22
+ --syn-line-height-dense: 1.2;
23
+ --syn-line-height-normal: 1.4;
24
+ --syn-line-height-loose: 1.8;
25
+ --syn-line-height-looser: 2.2;
26
+ --syn-font-weight-normal: 400;
27
+ --syn-font-weight-semibold: 600;
28
+ --syn-font-weight-bold: 700;
29
+ --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);
30
+ --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);
31
+ --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);
32
+ --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 */
33
+ --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 */
34
+ --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 */
35
+ --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 */
36
+ --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
37
+ '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-large: calc(4px * 6);
46
+ --syn-spacing-x-large: calc(4px * 8);
47
+ --syn-spacing-2x-large: calc(4px * 12);
48
+ --syn-spacing-3x-large: calc(4px * 16);
49
+ --syn-spacing-4x-large: calc(4px * 24);
50
+ --syn-spacing-5x-large: calc(4px * 32);
51
+ --syn-border-radius-none: 0px;
52
+ --syn-border-radius-pill: 9999px;
53
+ --syn-border-radius-circle: 9999px;
54
+ --syn-dimension-base: 4px;
55
+ --syn-border-width-none: 0px; /* None */
56
+ --syn-border-width-small: 1px; /* Small */
57
+ --syn-border-width-medium: 2px; /* Medium */
58
+ --syn-border-width-large: 3px; /* Large */
59
+ --syn-border-width-x-large: 4px; /* X Large */
60
+ --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
61
+ --syn-focus-ring-color: var(--syn-color-primary-600);
62
+ --syn-focus-ring-width: var(--syn-border-width-small);
63
+ --syn-focus-ring-offset: 0;
64
+ --syn-input-color: var(--syn-color-neutral-950);
65
+ --syn-input-color-hover: var(--syn-color-neutral-950);
66
+ --syn-input-color-focus: var(--syn-color-neutral-950);
67
+ --syn-input-color-disabled: var(--syn-color-neutral-950);
68
+ --syn-input-background-color: var(--syn-color-neutral-0);
69
+ --syn-input-background-color-hover: var(--syn-input-background.color);
70
+ --syn-input-background-color-focus: var(--syn-input-background.color);
71
+ --syn-input-background-color-disabled: var(--syn-input-background.color);
72
+ --syn-input-border-color: var(--syn-color-neutral-700);
73
+ --syn-input-border-color-hover: var(--syn-color-neutral-950);
74
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
75
+ --syn-input-border-color-disables: var(--syn-color-neutral-700);
76
+ --syn-input-border-radius-small: var(--syn-border-radius-none);
77
+ --syn-input-border-radius-medium: var(--syn-border-radius-none);
78
+ --syn-input-border-radius-large: var(--syn-border-radius-none);
79
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
80
+ --syn-input-width: var(--syn-border-width-small);
81
+ --syn-input-icon-color: var(--syn-color-neutral-800);
82
+ --syn-input-icon-color-hover: var(--syn-color-neutral-800);
83
+ --syn-input-icon-color-focus: var(--syn-color-neutral-800);
84
+ --syn-input-placeholder-color: var(--syn-color-neutral-500);
85
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
86
+ --syn-input-required-content: "*";
87
+ --syn-input-required-content-offset: -2px;
88
+ --syn-input-label-color: var(--syn-color-neutral-950);
89
+ --syn-input-label-font-size-small: var(--syn-font-size-small);
90
+ --syn-input-label-font-size-medium: var(--syn-font-size-medium);
91
+ --syn-input-label-font-size-large: var(--syn-font-size-large);
92
+ --syn-input-spacing-small: var(--syn-spacing-small);
93
+ --syn-input-spacing-medium: var(--syn-spacing-medium);
94
+ --syn-input-spacing-large: var(--syn-spacing-large);
95
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
96
+ --syn-input-focus-ring-offset: 0;
97
+ --syn-input-focus-ring-error: var(--syn-color-error-400);
98
+ --syn-input-disabled-opacity: 0.5;
99
+ --syn-input-filled-background-color: var(--syn-color-neutral-50);
100
+ --syn-input-filled-background-color-hover: var(--syn-color-neutral-50);
101
+ --syn-input-filled-background-color-focus: var(--syn-color-neutral-50);
102
+ --syn-input-filled-background-color-disabled: var(--syn-color-neutral-50);
103
+ --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
104
+ --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
105
+ --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
106
+ --syn-input-help-text-color: var(--syn-color-neutral-800);
107
+ --syn-input-help-text-color-error: var(--syn-color-error-700);
108
+ --syn-input-font-size-small: var(--syn-font-size-small);
109
+ --syn-input-font-size-medium: var(--syn-font-size-medium);
110
+ --syn-input-font-size-large: var(--syn-font-size-large);
111
+ --syn-input-height-small: var(--syn-spacing-x-large);
112
+ --syn-input-height-medium: var(--syn-spacing-2x-large);
113
+ --syn-input-height-large: var(--syn-spacing-3x-large);
114
+ --syn-input-filled-color: var(--syn-color-neutral-800);
115
+ --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
116
+ --syn-input-filled-color-hover: var(--syn-color-neutral-950);
117
+ --syn-input-filled-color-focus: var(--syn-color-neutral-950);
118
+ --syn-color-primary-50: #f0f9ff;
119
+ --syn-color-primary-100: #e0f1FE;
120
+ --syn-color-primary-200: #b9e5fe;
121
+ --syn-color-primary-300: #7cd1fd;
122
+ --syn-color-primary-400: #36bbfa;
123
+ --syn-color-primary-500: #0ca2eb;
124
+ --syn-color-primary-600: #007cc1;
125
+ --syn-color-primary-700: #0166a3;
126
+ --syn-color-primary-800: #065786;
127
+ --syn-color-primary-900: #0B486F;
128
+ --syn-color-primary-950: #072E4A;
129
+ --syn-color-success-50: #f5fde8;
130
+ --syn-color-success-100: #e7facd;
131
+ --syn-color-success-200: #D1F4A2;
132
+ --syn-color-success-300: #B0EB6B;
133
+ --syn-color-success-400: #93DD3E;
134
+ --syn-color-success-500: #73C31F;
135
+ --syn-color-success-600: #63B017;
136
+ --syn-color-success-700: #437714;
137
+ --syn-color-success-800: #395E16;
138
+ --syn-color-success-900: #315017;
139
+ --syn-color-success-950: #172C07;
140
+ --syn-color-warning-50: #fefce8;
141
+ --syn-color-warning-100: #fdf7c4;
142
+ --syn-color-warning-200: #FCEC8c;
143
+ --syn-color-warning-300: #f9da4b;
144
+ --syn-color-warning-400: #f5c413;
145
+ --syn-color-warning-500: #e5ae0d;
146
+ --syn-color-warning-600: #c68608;
147
+ --syn-color-warning-700: #9e5f0a;
148
+ --syn-color-warning-800: #834b10;
149
+ --syn-color-warning-900: #6f3e14;
150
+ --syn-color-warning-950: #411f07;
151
+ --syn-color-error-50: #fff0f2;
152
+ --syn-color-error-100: #ffdee2;
153
+ --syn-color-error-200: #ffc3c9;
154
+ --syn-color-error-300: #ff98a4;
155
+ --syn-color-error-400: #ff5d70;
156
+ --syn-color-error-500: #ff2b44;
157
+ --syn-color-error-600: #ea0823;
158
+ --syn-color-error-700: #d0051d;
159
+ --syn-color-error-800: #ab091c;
160
+ --syn-color-error-900: #8D0f1e;
161
+ --syn-color-error-950: #4e010a;
162
+ --syn-color-accent-50: #FFFBEA;
163
+ --syn-color-accent-100: #FFF2C5;
164
+ --syn-color-accent-200: #FFE685;
165
+ --syn-color-accent-300: #FFD246;
166
+ --syn-color-accent-400: #FFBD1B;
167
+ --syn-color-accent-500: #F39200;
168
+ --syn-color-accent-600: #E27200;
169
+ --syn-color-accent-700: #BB4D02;
170
+ --syn-color-accent-800: #983B08;
171
+ --syn-color-accent-900: #7C310B;
172
+ --syn-color-accent-950: #481700;
173
+ --syn-color-neutral-0: white;
174
+ --syn-color-neutral-50: #f9fafb;
175
+ --syn-color-neutral-100: #f2f5f5;
176
+ --syn-color-neutral-200: #e8ebec;
177
+ --syn-color-neutral-300: #d5dbdd;
178
+ --syn-color-neutral-400: #bac2c6;
179
+ --syn-color-neutral-500: #9ea9ae;
180
+ --syn-color-neutral-600: #859298;
181
+ --syn-color-neutral-700: #737f85;
182
+ --syn-color-neutral-800: #5e676b;
183
+ --syn-color-neutral-900: #4c5357;
184
+ --syn-color-neutral-950: #31373a;
185
+ --syn-color-neutral-1000: black;
186
+ /* Fallbacks from Shoelace */
187
+ --syn-border-radius-small: 0.1875rem;
188
+ --syn-border-radius-medium: 0.25rem;
189
+ --syn-border-radius-large: 0.5rem;
190
+ --syn-border-radius-x-large: 1rem;
191
+ --syn-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
192
+ --syn-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
193
+ --syn-transition-x-slow: 1000ms;
194
+ --syn-transition-slow: 500ms;
195
+ --syn-transition-medium: 250ms;
196
+ --syn-transition-fast: 150ms;
197
+ --syn-transition-x-fast: 50ms;
198
+ --syn-font-serif: Georgia, "Times New Roman", serif;
199
+ --syn-font-size-4x-large: 4.5rem;
200
+ --syn-font-weight-light: 300;
201
+ --syn-letter-spacing-denser: -0.03em;
202
+ --syn-letter-spacing-dense: -0.015em;
203
+ --syn-letter-spacing-normal: normal;
204
+ --syn-letter-spacing-loose: 0.075em;
205
+ --syn-letter-spacing-looser: 0.15em;
206
+ --syn-focus-ring-style: solid;
207
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width)
208
+ var(--syn-focus-ring-color);
209
+ --syn-button-font-size-small: var(--syn-font-size-x-small);
210
+ --syn-button-font-size-medium: var(--syn-font-size-small);
211
+ --syn-button-font-size-large: var(--syn-font-size-medium);
212
+ --syn-input-border-color-disabled: var(--syn-color-neutral-300);
213
+ --syn-input-border-width: 1px;
214
+ --syn-input-required-content-color: var(--syn-input-label-color);
215
+ --syn-input-font-family: var(--syn-font-sans);
216
+ --syn-input-font-weight: var(--syn-font-weight-normal);
217
+ --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
218
+ --syn-toggle-size-small: 0.875rem;
219
+ --syn-toggle-size-medium: 1.125rem;
220
+ --syn-toggle-size-large: 1.375rem;
221
+ --syn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
222
+ --syn-panel-background-color: var(--syn-color-neutral-0);
223
+ --syn-panel-border-color: var(--syn-color-neutral-200);
224
+ --syn-panel-border-width: 1px;
225
+ --syn-tooltip-border-radius: var(--syn-border-radius-medium);
226
+ --syn-tooltip-background-color: var(--syn-color-neutral-800);
227
+ --syn-tooltip-color: var(--syn-color-neutral-0);
228
+ --syn-tooltip-font-family: var(--syn-font-sans);
229
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
230
+ --syn-tooltip-font-size: var(--syn-font-size-small);
231
+ --syn-tooltip-line-height: var(--syn-line-height-dense);
232
+ --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
233
+ --syn-tooltip-arrow-size: 6px;
234
+ --syn-z-index-drawer: 700;
235
+ --syn-z-index-dialog: 800;
236
+ --syn-z-index-dropdown: 900;
237
+ --syn-z-index-toast: 950;
238
+ --syn-z-index-tooltip: 1000;
239
+ }
package/package.json CHANGED
@@ -93,7 +93,7 @@
93
93
  ]
94
94
  },
95
95
  "type": "module",
96
- "version": "1.0.0-main.3",
96
+ "version": "1.0.0-main.4",
97
97
  "scripts": {
98
98
  "build": "pnpm clean && node scripts/build.js",
99
99
  "clean": "rimraf build",