@synergy-design-system/tokens 2.48.2 → 3.0.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 +18 -0
- package/README.md +2 -0
- package/dist/js/index.d.ts +6 -1
- package/dist/js/index.js +6 -1
- package/dist/scss/_tokens.scss +2 -1
- package/dist/themes/dark.css +237 -236
- package/dist/themes/light.css +221 -220
- package/dist/themes/sick2018_dark.css +4 -3
- package/dist/themes/sick2018_light.css +4 -3
- package/dist/themes/sick2025_dark.css +4 -3
- package/dist/themes/sick2025_light.css +4 -3
- package/package.json +1 -1
- package/src/figma-variables/output/sick2018-dark.json +16 -1
- package/src/figma-variables/output/sick2018-light.json +15 -0
- package/src/figma-variables/output/sick2025-dark.json +15 -0
- package/src/figma-variables/output/sick2025-light.json +15 -0
package/dist/themes/dark.css
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.48.
|
|
2
|
+
* @synergy-design-system/tokens version 2.48.2
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
:root, .syn-
|
|
7
|
+
:root, .syn-sick2025-dark, .syn-theme-dark {
|
|
8
8
|
color-scheme: dark;
|
|
9
9
|
|
|
10
|
-
--syn-alert-error-color-background: var(--syn-
|
|
11
|
-
--syn-alert-error-color-border: var(--syn-
|
|
12
|
-
--syn-alert-error-color-icon: var(--syn-color-
|
|
13
|
-
--syn-alert-error-color-indicator: var(--syn-
|
|
14
|
-
--syn-alert-informative-color-background: var(--syn-
|
|
15
|
-
--syn-alert-informative-color-border: var(--syn-
|
|
16
|
-
--syn-alert-informative-color-icon: var(--syn-color-
|
|
17
|
-
--syn-alert-informative-color-indicator: var(--syn-
|
|
18
|
-
--syn-alert-neutral-color-background: var(--syn-
|
|
19
|
-
--syn-alert-neutral-color-border: var(--syn-
|
|
20
|
-
--syn-alert-neutral-color-icon: var(--syn-color-
|
|
21
|
-
--syn-alert-neutral-color-indicator: var(--syn-
|
|
22
|
-
--syn-alert-success-color-background: var(--syn-
|
|
23
|
-
--syn-alert-success-color-border: var(--syn-
|
|
24
|
-
--syn-alert-success-color-icon: var(--syn-color-
|
|
25
|
-
--syn-alert-success-color-indicator: var(--syn-
|
|
26
|
-
--syn-alert-warning-color-background: var(--syn-
|
|
27
|
-
--syn-alert-warning-color-border: var(--syn-
|
|
28
|
-
--syn-alert-warning-color-icon: var(--syn-color-
|
|
29
|
-
--syn-alert-warning-color-indicator: var(--syn-
|
|
30
|
-
--syn-badge-error-color-background: var(--syn-
|
|
10
|
+
--syn-alert-error-color-background: var(--syn-namur-error-color-background);
|
|
11
|
+
--syn-alert-error-color-border: var(--syn-namur-error-color-background);
|
|
12
|
+
--syn-alert-error-color-icon: var(--syn-typography-color-text);
|
|
13
|
+
--syn-alert-error-color-indicator: var(--syn-namur-error-color);
|
|
14
|
+
--syn-alert-informative-color-background: var(--syn-namur-info-color-background);
|
|
15
|
+
--syn-alert-informative-color-border: var(--syn-namur-info-color-background);
|
|
16
|
+
--syn-alert-informative-color-icon: var(--syn-typography-color-text);
|
|
17
|
+
--syn-alert-informative-color-indicator: var(--syn-namur-info-color);
|
|
18
|
+
--syn-alert-neutral-color-background: var(--syn-namur-neutral-color-background);
|
|
19
|
+
--syn-alert-neutral-color-border: var(--syn-namur-neutral-color-background);
|
|
20
|
+
--syn-alert-neutral-color-icon: var(--syn-typography-color-text);
|
|
21
|
+
--syn-alert-neutral-color-indicator: var(--syn-namur-neutral-color);
|
|
22
|
+
--syn-alert-success-color-background: var(--syn-namur-success-color-background);
|
|
23
|
+
--syn-alert-success-color-border: var(--syn-namur-success-color-background);
|
|
24
|
+
--syn-alert-success-color-icon: var(--syn-typography-color-text);
|
|
25
|
+
--syn-alert-success-color-indicator: var(--syn-namur-success-color);
|
|
26
|
+
--syn-alert-warning-color-background: var(--syn-namur-warning-color-background);
|
|
27
|
+
--syn-alert-warning-color-border: var(--syn-namur-warning-color-background);
|
|
28
|
+
--syn-alert-warning-color-icon: var(--syn-typography-color-text);
|
|
29
|
+
--syn-alert-warning-color-indicator: var(--syn-namur-warning-color);
|
|
30
|
+
--syn-badge-error-color-background: var(--syn-namur-error-color);
|
|
31
31
|
--syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
|
|
32
|
-
--syn-badge-informative-color-background: var(--syn-
|
|
32
|
+
--syn-badge-informative-color-background: var(--syn-namur-info-color);
|
|
33
33
|
--syn-badge-informative-color-text: var(--syn-typography-color-text-inverted);
|
|
34
|
-
--syn-badge-neutral-color-background: var(--syn-
|
|
34
|
+
--syn-badge-neutral-color-background: var(--syn-namur-neutral-color);
|
|
35
35
|
--syn-badge-neutral-color-text: var(--syn-typography-color-text-inverted);
|
|
36
|
-
--syn-badge-success-color-background: var(--syn-
|
|
37
|
-
--syn-badge-success-color-text: var(--syn-typography-color-text);
|
|
38
|
-
--syn-badge-warning-color-background: var(--syn-
|
|
39
|
-
--syn-badge-warning-color-text: var(--syn-typography-color-text);
|
|
36
|
+
--syn-badge-success-color-background: var(--syn-namur-success-color);
|
|
37
|
+
--syn-badge-success-color-text: var(--syn-typography-color-text-inverted);
|
|
38
|
+
--syn-badge-warning-color-background: var(--syn-namur-warning-color);
|
|
39
|
+
--syn-badge-warning-color-text: var(--syn-typography-color-text-inverted);
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
@@ -49,133 +49,133 @@
|
|
|
49
49
|
--syn-border-width-none: 0px; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
|
-
--syn-breadcrumb-color: var(--syn-color-
|
|
53
|
-
--syn-button-border-radius-large: var(--syn-
|
|
54
|
-
--syn-button-border-radius-medium: var(--syn-
|
|
55
|
-
--syn-button-border-radius-small: var(--syn-
|
|
56
|
-
--syn-button-color: var(--syn-
|
|
57
|
-
--syn-button-color-active: var(--syn-
|
|
58
|
-
--syn-button-color-hover: var(--syn-
|
|
59
|
-
--syn-button-filled-color-text: var(--syn-
|
|
60
|
-
--syn-button-filled-color-text-active: var(--syn-color-
|
|
61
|
-
--syn-button-filled-color-text-hover: var(--syn-color-
|
|
52
|
+
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
53
|
+
--syn-button-border-radius-large: var(--syn-border-radius-pill);
|
|
54
|
+
--syn-button-border-radius-medium: var(--syn-border-radius-pill);
|
|
55
|
+
--syn-button-border-radius-small: var(--syn-border-radius-pill);
|
|
56
|
+
--syn-button-color: var(--syn-color-neutral-1000);
|
|
57
|
+
--syn-button-color-active: var(--syn-color-neutral-950);
|
|
58
|
+
--syn-button-color-hover: var(--syn-color-neutral-1000);
|
|
59
|
+
--syn-button-filled-color-text: var(--syn-interactive-emphasis-color);
|
|
60
|
+
--syn-button-filled-color-text-active: var(--syn-typography-color-text-inverted);
|
|
61
|
+
--syn-button-filled-color-text-hover: var(--syn-typography-color-text-inverted);
|
|
62
62
|
--syn-button-font-size-large: var(--syn-font-size-large);
|
|
63
63
|
--syn-button-font-size-medium: var(--syn-font-size-medium);
|
|
64
64
|
--syn-button-font-size-small: var(--syn-font-size-small);
|
|
65
|
-
--syn-button-outline-color-active:
|
|
66
|
-
--syn-button-outline-color-hover:
|
|
67
|
-
--syn-button-outline-color-text: var(--syn-color-
|
|
68
|
-
--syn-button-outline-color-text-active: var(--syn-color-
|
|
69
|
-
--syn-button-outline-color-text-hover: var(--syn-color-
|
|
70
|
-
--syn-button-text-color-text: var(--syn-
|
|
71
|
-
--syn-button-text-color-text-active: var(--syn-
|
|
72
|
-
--syn-button-text-color-text-hover: var(--syn-
|
|
73
|
-
--syn-checkbox-border-radius: var(--syn-border-radius-
|
|
74
|
-
--syn-color-accent-50: #
|
|
75
|
-
--syn-color-accent-100: #
|
|
76
|
-
--syn-color-accent-200: #
|
|
77
|
-
--syn-color-accent-300: #
|
|
78
|
-
--syn-color-accent-400: #
|
|
79
|
-
--syn-color-accent-500: #
|
|
80
|
-
--syn-color-accent-600: #
|
|
81
|
-
--syn-color-accent-700: #
|
|
82
|
-
--syn-color-accent-800: #
|
|
83
|
-
--syn-color-accent-900: #
|
|
84
|
-
--syn-color-accent-950: #
|
|
85
|
-
--syn-color-critical-50: #
|
|
86
|
-
--syn-color-critical-100: #
|
|
87
|
-
--syn-color-critical-200: #
|
|
88
|
-
--syn-color-critical-300: #
|
|
89
|
-
--syn-color-critical-400: #
|
|
90
|
-
--syn-color-critical-500: #
|
|
91
|
-
--syn-color-critical-600: #
|
|
92
|
-
--syn-color-critical-700: #
|
|
93
|
-
--syn-color-critical-800: #
|
|
94
|
-
--syn-color-critical-900: #
|
|
95
|
-
--syn-color-critical-950: #
|
|
96
|
-
--syn-color-error-50: #
|
|
97
|
-
--syn-color-error-100: #
|
|
98
|
-
--syn-color-error-200: #
|
|
99
|
-
--syn-color-error-300: #
|
|
100
|
-
--syn-color-error-400: #
|
|
101
|
-
--syn-color-error-500: #
|
|
102
|
-
--syn-color-error-600: #
|
|
103
|
-
--syn-color-error-700: #
|
|
104
|
-
--syn-color-error-800: #
|
|
105
|
-
--syn-color-error-900: #
|
|
106
|
-
--syn-color-error-950: #
|
|
107
|
-
--syn-color-info-50: #
|
|
108
|
-
--syn-color-info-100: #
|
|
109
|
-
--syn-color-info-200: #
|
|
110
|
-
--syn-color-info-300: #
|
|
111
|
-
--syn-color-info-400: #
|
|
112
|
-
--syn-color-info-500: #
|
|
113
|
-
--syn-color-info-600: #
|
|
114
|
-
--syn-color-info-700: #
|
|
115
|
-
--syn-color-info-800: #
|
|
116
|
-
--syn-color-info-900: #
|
|
117
|
-
--syn-color-info-950: #
|
|
118
|
-
--syn-color-neutral-0: #
|
|
119
|
-
--syn-color-neutral-50: #
|
|
120
|
-
--syn-color-neutral-100: #
|
|
121
|
-
--syn-color-neutral-200: #
|
|
122
|
-
--syn-color-neutral-300: #
|
|
123
|
-
--syn-color-neutral-400: #
|
|
124
|
-
--syn-color-neutral-500: #
|
|
125
|
-
--syn-color-neutral-600: #
|
|
126
|
-
--syn-color-neutral-700: #
|
|
127
|
-
--syn-color-neutral-800: #
|
|
128
|
-
--syn-color-neutral-900: #
|
|
129
|
-
--syn-color-neutral-950: #
|
|
130
|
-
--syn-color-neutral-1000: #
|
|
131
|
-
--syn-color-primary-50: #
|
|
132
|
-
--syn-color-primary-100: #
|
|
133
|
-
--syn-color-primary-200: #
|
|
134
|
-
--syn-color-primary-300: #
|
|
135
|
-
--syn-color-primary-400: #
|
|
136
|
-
--syn-color-primary-500: #
|
|
137
|
-
--syn-color-primary-600: #
|
|
138
|
-
--syn-color-primary-700: #
|
|
139
|
-
--syn-color-primary-800: #
|
|
140
|
-
--syn-color-primary-900: #
|
|
141
|
-
--syn-color-primary-950: #
|
|
142
|
-
--syn-color-primary-1000: #
|
|
143
|
-
--syn-color-success-50: #
|
|
144
|
-
--syn-color-success-100: #
|
|
145
|
-
--syn-color-success-200: #
|
|
146
|
-
--syn-color-success-300: #
|
|
147
|
-
--syn-color-success-400: #
|
|
148
|
-
--syn-color-success-500: #
|
|
149
|
-
--syn-color-success-600: #
|
|
150
|
-
--syn-color-success-700: #
|
|
151
|
-
--syn-color-success-800: #
|
|
152
|
-
--syn-color-success-900: #
|
|
153
|
-
--syn-color-success-950: #
|
|
154
|
-
--syn-color-warning-50: #
|
|
155
|
-
--syn-color-warning-100: #
|
|
156
|
-
--syn-color-warning-200: #
|
|
157
|
-
--syn-color-warning-300: #
|
|
158
|
-
--syn-color-warning-400: #
|
|
159
|
-
--syn-color-warning-500: #
|
|
160
|
-
--syn-color-warning-600: #
|
|
161
|
-
--syn-color-warning-700: #
|
|
162
|
-
--syn-color-warning-800: #
|
|
163
|
-
--syn-color-warning-900: #
|
|
164
|
-
--syn-color-warning-950: #
|
|
165
|
-
--syn-details-open-rotation:
|
|
65
|
+
--syn-button-outline-color-active: var(--syn-color-neutral-950);
|
|
66
|
+
--syn-button-outline-color-hover: var(--syn-color-neutral-1000);
|
|
67
|
+
--syn-button-outline-color-text: var(--syn-typography-color-text);
|
|
68
|
+
--syn-button-outline-color-text-active: var(--syn-typography-color-text-inverted);
|
|
69
|
+
--syn-button-outline-color-text-hover: var(--syn-typography-color-text-inverted);
|
|
70
|
+
--syn-button-text-color-text: var(--syn-typography-color-text);
|
|
71
|
+
--syn-button-text-color-text-active: var(--syn-interactive-quiet-color-active);
|
|
72
|
+
--syn-button-text-color-text-hover: var(--syn-interactive-quiet-color-hover);
|
|
73
|
+
--syn-checkbox-border-radius: var(--syn-border-radius-small);
|
|
74
|
+
--syn-color-accent-50: #092518;
|
|
75
|
+
--syn-color-accent-100: #155033;
|
|
76
|
+
--syn-color-accent-200: #18643e;
|
|
77
|
+
--syn-color-accent-300: #1e7d4c;
|
|
78
|
+
--syn-color-accent-400: #2d9c60;
|
|
79
|
+
--syn-color-accent-500: #4fb87c;
|
|
80
|
+
--syn-color-accent-600: #83d2a3;
|
|
81
|
+
--syn-color-accent-700: #a5e1b9;
|
|
82
|
+
--syn-color-accent-800: #bbe8c8;
|
|
83
|
+
--syn-color-accent-900: #d2f0dc;
|
|
84
|
+
--syn-color-accent-950: #e9f8ed;
|
|
85
|
+
--syn-color-critical-50: #462104;
|
|
86
|
+
--syn-color-critical-100: #82450c;
|
|
87
|
+
--syn-color-critical-200: #a1520b;
|
|
88
|
+
--syn-color-critical-300: #cc6b02;
|
|
89
|
+
--syn-color-critical-400: #ff9100;
|
|
90
|
+
--syn-color-critical-500: #ffa80a;
|
|
91
|
+
--syn-color-critical-600: #ffbf32;
|
|
92
|
+
--syn-color-critical-700: #ffdb6d;
|
|
93
|
+
--syn-color-critical-800: #ffeba5;
|
|
94
|
+
--syn-color-critical-900: #fff7d3;
|
|
95
|
+
--syn-color-critical-950: #fffbec;
|
|
96
|
+
--syn-color-error-50: #450709;
|
|
97
|
+
--syn-color-error-100: #6c0c0e;
|
|
98
|
+
--syn-color-error-200: #941013;
|
|
99
|
+
--syn-color-error-300: #bc1519;
|
|
100
|
+
--syn-color-error-400: #e6191e;
|
|
101
|
+
--syn-color-error-500: #f93a3f;
|
|
102
|
+
--syn-color-error-600: #ff696d;
|
|
103
|
+
--syn-color-error-700: #ffa0a2;
|
|
104
|
+
--syn-color-error-800: #ffcfd1;
|
|
105
|
+
--syn-color-error-900: #ffe3e4;
|
|
106
|
+
--syn-color-error-950: #fff1f1;
|
|
107
|
+
--syn-color-info-50: #06334b;
|
|
108
|
+
--syn-color-info-100: #085172;
|
|
109
|
+
--syn-color-info-200: #02628a;
|
|
110
|
+
--syn-color-info-300: #0075a7;
|
|
111
|
+
--syn-color-info-400: #0092ce;
|
|
112
|
+
--syn-color-info-500: #06b6f1;
|
|
113
|
+
--syn-color-info-600: #26c9ff;
|
|
114
|
+
--syn-color-info-700: #78ddff;
|
|
115
|
+
--syn-color-info-800: #a6e9ff;
|
|
116
|
+
--syn-color-info-900: #dff4ff;
|
|
117
|
+
--syn-color-info-950: #effaff;
|
|
118
|
+
--syn-color-neutral-0: #000206;
|
|
119
|
+
--syn-color-neutral-50: #00051a;
|
|
120
|
+
--syn-color-neutral-100: #000a37;
|
|
121
|
+
--syn-color-neutral-200: #0e1633;
|
|
122
|
+
--syn-color-neutral-300: #262f55;
|
|
123
|
+
--syn-color-neutral-400: #404769;
|
|
124
|
+
--syn-color-neutral-500: #4d5473;
|
|
125
|
+
--syn-color-neutral-600: #5f678e;
|
|
126
|
+
--syn-color-neutral-700: #777ea4;
|
|
127
|
+
--syn-color-neutral-800: #9298b6;
|
|
128
|
+
--syn-color-neutral-900: #adb2c8;
|
|
129
|
+
--syn-color-neutral-950: #c8ccdb;
|
|
130
|
+
--syn-color-neutral-1000: #e9ebf1;
|
|
131
|
+
--syn-color-primary-50: #0e275d;
|
|
132
|
+
--syn-color-primary-100: #0d3f9b;
|
|
133
|
+
--syn-color-primary-200: #0845c5;
|
|
134
|
+
--syn-color-primary-300: #005aff;
|
|
135
|
+
--syn-color-primary-400: #066fff;
|
|
136
|
+
--syn-color-primary-500: #3183fe;
|
|
137
|
+
--syn-color-primary-600: #5e97fc;
|
|
138
|
+
--syn-color-primary-700: #91bbff;
|
|
139
|
+
--syn-color-primary-800: #ccdeff;
|
|
140
|
+
--syn-color-primary-900: #dae7ff;
|
|
141
|
+
--syn-color-primary-950: #eff5ff;
|
|
142
|
+
--syn-color-primary-1000: #eff5ff;
|
|
143
|
+
--syn-color-success-50: #003911;
|
|
144
|
+
--syn-color-success-100: #026524;
|
|
145
|
+
--syn-color-success-200: #00852c;
|
|
146
|
+
--syn-color-success-300: #1a9945;
|
|
147
|
+
--syn-color-success-400: #34ad5c;
|
|
148
|
+
--syn-color-success-500: #4fc275;
|
|
149
|
+
--syn-color-success-600: #6ad88f;
|
|
150
|
+
--syn-color-success-700: #84eca7;
|
|
151
|
+
--syn-color-success-800: #bcf6cf;
|
|
152
|
+
--syn-color-success-900: #ddfbe6;
|
|
153
|
+
--syn-color-success-950: #f0fdf4;
|
|
154
|
+
--syn-color-warning-50: #442404;
|
|
155
|
+
--syn-color-warning-100: #74450f;
|
|
156
|
+
--syn-color-warning-200: #89540a;
|
|
157
|
+
--syn-color-warning-300: #a66c02;
|
|
158
|
+
--syn-color-warning-400: #d19800;
|
|
159
|
+
--syn-color-warning-500: #f2c500;
|
|
160
|
+
--syn-color-warning-600: #f6d029;
|
|
161
|
+
--syn-color-warning-700: #fbdb52;
|
|
162
|
+
--syn-color-warning-800: #ffe67c;
|
|
163
|
+
--syn-color-warning-900: #fff5c6;
|
|
164
|
+
--syn-color-warning-950: #fffbeb;
|
|
165
|
+
--syn-details-open-rotation: 0deg;
|
|
166
166
|
--syn-dimension-base: 4px; /** to be deprecated */
|
|
167
167
|
--syn-duration-extra-fast: 50ms;
|
|
168
168
|
--syn-duration-extra-slow: 1000ms;
|
|
169
169
|
--syn-duration-fast: 150ms;
|
|
170
170
|
--syn-duration-normal: 250ms;
|
|
171
171
|
--syn-duration-slow: 500ms;
|
|
172
|
-
--syn-focus-ring-border-radius: var(--syn-border-radius-
|
|
173
|
-
--syn-focus-ring-color: var(--syn-color-primary-
|
|
172
|
+
--syn-focus-ring-border-radius: var(--syn-border-radius-small);
|
|
173
|
+
--syn-focus-ring-color: var(--syn-color-primary-700);
|
|
174
174
|
--syn-focus-ring-offset: var(--syn-spacing-3x-small);
|
|
175
175
|
--syn-focus-ring-style: solid;
|
|
176
176
|
--syn-focus-ring-width: var(--syn-border-width-medium);
|
|
177
177
|
--syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
|
|
178
|
-
--syn-font-sans: '
|
|
178
|
+
--syn-font-sans: 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
|
|
179
179
|
--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 */
|
|
180
180
|
--syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
|
|
181
181
|
--syn-font-size-2x-large: 32px;
|
|
@@ -187,33 +187,33 @@
|
|
|
187
187
|
--syn-font-size-small: 14px;
|
|
188
188
|
--syn-font-size-x-large: 24px;
|
|
189
189
|
--syn-font-size-x-small: 12px;
|
|
190
|
-
--syn-font-weight-bold:
|
|
190
|
+
--syn-font-weight-bold: 600;
|
|
191
191
|
--syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
|
|
192
192
|
--syn-font-weight-normal: 400;
|
|
193
193
|
--syn-font-weight-semibold: 600;
|
|
194
|
-
--syn-header-border-color: var(--syn-color-neutral-
|
|
195
|
-
--syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-
|
|
196
|
-
--syn-input-background-color: var(--syn-color-neutral-
|
|
194
|
+
--syn-header-border-color: var(--syn-color-neutral-300);
|
|
195
|
+
--syn-icon-button-focus-ring-border-radius: var(--syn-border-radius-pill);
|
|
196
|
+
--syn-input-background-color: var(--syn-color-neutral-50);
|
|
197
197
|
--syn-input-background-color-disabled: var(--syn-input-background-color);
|
|
198
198
|
--syn-input-background-color-focus: var(--syn-input-background-color);
|
|
199
199
|
--syn-input-background-color-hover: var(--syn-input-background-color);
|
|
200
|
-
--syn-input-border-color: var(--syn-color-neutral-
|
|
201
|
-
--syn-input-border-color-active: var(--syn-color-
|
|
202
|
-
--syn-input-border-color-disabled: var(--syn-color-neutral-
|
|
203
|
-
--syn-input-border-color-focus: var(--syn-color-
|
|
204
|
-
--syn-input-border-color-focus-error: var(--syn-color-error-
|
|
205
|
-
--syn-input-border-color-hover: var(--syn-color-
|
|
200
|
+
--syn-input-border-color: var(--syn-color-neutral-1000);
|
|
201
|
+
--syn-input-border-color-active: var(--syn-color-primary-500);
|
|
202
|
+
--syn-input-border-color-disabled: var(--syn-color-neutral-1000);
|
|
203
|
+
--syn-input-border-color-focus: var(--syn-color-primary-400);
|
|
204
|
+
--syn-input-border-color-focus-error: var(--syn-color-error-600);
|
|
205
|
+
--syn-input-border-color-hover: var(--syn-color-primary-400);
|
|
206
206
|
--syn-input-border-color-offset: var(--syn-panel-background-color);
|
|
207
|
-
--syn-input-border-radius-large: var(--syn-border-radius-
|
|
208
|
-
--syn-input-border-radius-medium: var(--syn-border-radius-
|
|
209
|
-
--syn-input-border-radius-small: var(--syn-border-radius-
|
|
207
|
+
--syn-input-border-radius-large: var(--syn-border-radius-medium);
|
|
208
|
+
--syn-input-border-radius-medium: var(--syn-border-radius-medium);
|
|
209
|
+
--syn-input-border-radius-small: var(--syn-border-radius-medium);
|
|
210
210
|
--syn-input-border-width: 1px;
|
|
211
|
-
--syn-input-color: var(--syn-color-neutral-
|
|
212
|
-
--syn-input-color-disabled: var(--syn-color-neutral-
|
|
213
|
-
--syn-input-color-focus: var(--syn-color-neutral-
|
|
214
|
-
--syn-input-color-hover: var(--syn-color-neutral-
|
|
211
|
+
--syn-input-color: var(--syn-color-neutral-1000);
|
|
212
|
+
--syn-input-color-disabled: var(--syn-color-neutral-1000);
|
|
213
|
+
--syn-input-color-focus: var(--syn-color-neutral-1000);
|
|
214
|
+
--syn-input-color-hover: var(--syn-color-neutral-1000);
|
|
215
215
|
--syn-input-disabled-opacity: 0.5;
|
|
216
|
-
--syn-input-focus-ring-color: var(--syn-color-primary-
|
|
216
|
+
--syn-input-focus-ring-color: var(--syn-color-primary-700);
|
|
217
217
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
218
218
|
--syn-input-focus-ring-offset: 0px;
|
|
219
219
|
--syn-input-font-family: var(--syn-font-sans);
|
|
@@ -229,18 +229,18 @@
|
|
|
229
229
|
--syn-input-help-text-font-size-large: var(--syn-font-size-medium);
|
|
230
230
|
--syn-input-help-text-font-size-medium: var(--syn-font-size-small);
|
|
231
231
|
--syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
|
|
232
|
-
--syn-input-icon-color: var(--syn-color-neutral-
|
|
233
|
-
--syn-input-icon-color-hover: var(--syn-color-neutral-
|
|
232
|
+
--syn-input-icon-color: var(--syn-color-neutral-1000);
|
|
233
|
+
--syn-input-icon-color-hover: var(--syn-color-neutral-1000);
|
|
234
234
|
--syn-input-icon-icon-clearable-color: var(--syn-color-neutral-600);
|
|
235
235
|
--syn-input-icon-icon-clearable-color-active: var(--syn-color-neutral-900);
|
|
236
236
|
--syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-800);
|
|
237
|
-
--syn-input-label-color: var(--syn-color-neutral-
|
|
237
|
+
--syn-input-label-color: var(--syn-color-neutral-1000);
|
|
238
238
|
--syn-input-label-font-size-large: var(--syn-font-size-large);
|
|
239
239
|
--syn-input-label-font-size-medium: var(--syn-font-size-medium);
|
|
240
240
|
--syn-input-label-font-size-small: var(--syn-font-size-small);
|
|
241
|
-
--syn-input-letter-spacing:
|
|
242
|
-
--syn-input-placeholder-color: var(--syn-color-neutral-
|
|
243
|
-
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-
|
|
241
|
+
--syn-input-letter-spacing: normal;
|
|
242
|
+
--syn-input-placeholder-color: var(--syn-color-neutral-800);
|
|
243
|
+
--syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
|
|
244
244
|
--syn-input-readonly-color-hover: var(--syn-color-neutral-950);
|
|
245
245
|
--syn-input-readonly-background-color: var(--syn-readonly-background-color);
|
|
246
246
|
--syn-input-readonly-background-color-disabled: var(--syn-readonly-background-color);
|
|
@@ -255,16 +255,16 @@
|
|
|
255
255
|
--syn-input-width: var(--syn-border-width-small);
|
|
256
256
|
--syn-interactive-background-color-active: var(--syn-color-neutral-300);
|
|
257
257
|
--syn-interactive-background-color-hover: var(--syn-color-neutral-100);
|
|
258
|
-
--syn-interactive-emphasis-color: var(--syn-color-primary-
|
|
259
|
-
--syn-interactive-emphasis-color-active: var(--syn-color-primary-
|
|
260
|
-
--syn-interactive-emphasis-color-hover: var(--syn-color-primary-
|
|
261
|
-
--syn-interactive-quiet-color: var(--syn-color-neutral-
|
|
262
|
-
--syn-interactive-quiet-color-active: var(--syn-color-primary-
|
|
263
|
-
--syn-interactive-quiet-color-hover: var(--syn-color-primary-
|
|
264
|
-
--syn-letter-spacing-dense:
|
|
265
|
-
--syn-letter-spacing-denser:
|
|
266
|
-
--syn-letter-spacing-loose:
|
|
267
|
-
--syn-letter-spacing-looser:
|
|
258
|
+
--syn-interactive-emphasis-color: var(--syn-color-primary-400);
|
|
259
|
+
--syn-interactive-emphasis-color-active: var(--syn-color-primary-700);
|
|
260
|
+
--syn-interactive-emphasis-color-hover: var(--syn-color-primary-600);
|
|
261
|
+
--syn-interactive-quiet-color: var(--syn-color-neutral-1000);
|
|
262
|
+
--syn-interactive-quiet-color-active: var(--syn-color-primary-500);
|
|
263
|
+
--syn-interactive-quiet-color-hover: var(--syn-color-primary-400);
|
|
264
|
+
--syn-letter-spacing-dense: normal; /** Shoelace compatibility DO NOT USE */
|
|
265
|
+
--syn-letter-spacing-denser: normal; /** Shoelace compatibility DO NOT USE */
|
|
266
|
+
--syn-letter-spacing-loose: normal; /** Shoelace compatibility DO NOT USE */
|
|
267
|
+
--syn-letter-spacing-looser: 2px; /** Shoelace compatibility DO NOT USE */
|
|
268
268
|
--syn-letter-spacing-normal: normal;
|
|
269
269
|
--syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
|
|
270
270
|
--syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
|
|
@@ -277,46 +277,47 @@
|
|
|
277
277
|
--syn-link-quiet-color: var(--syn-interactive-quiet-color);
|
|
278
278
|
--syn-link-quiet-color-active: var(--syn-interactive-quiet-color-active);
|
|
279
279
|
--syn-link-quiet-color-hover: var(--syn-interactive-quiet-color-hover);
|
|
280
|
-
--syn-link-underline-outline:
|
|
281
|
-
--syn-logo-color: var(--syn-color-primary-
|
|
280
|
+
--syn-link-underline-outline: 25%;
|
|
281
|
+
--syn-logo-color: var(--syn-color-primary-300);
|
|
282
282
|
--syn-namur-color-border: var(--syn-color-neutral-50);
|
|
283
|
-
--syn-namur-critical-color: var(--syn-color-critical-
|
|
283
|
+
--syn-namur-critical-color: var(--syn-color-critical-400);
|
|
284
284
|
--syn-namur-critical-color-background: var(--syn-color-critical-100);
|
|
285
285
|
--syn-namur-error-color: var(--syn-color-error-500);
|
|
286
|
-
--syn-namur-error-color-background: var(--syn-color-error-
|
|
286
|
+
--syn-namur-error-color-background: var(--syn-color-error-50);
|
|
287
287
|
--syn-namur-icon-color: var(--syn-color-neutral-50);
|
|
288
|
-
--syn-namur-info-color: var(--syn-color-info-
|
|
288
|
+
--syn-namur-info-color: var(--syn-color-info-600);
|
|
289
289
|
--syn-namur-info-color-background: var(--syn-color-info-50);
|
|
290
290
|
--syn-namur-neutral-color: var(--syn-color-neutral-600);
|
|
291
|
-
--syn-namur-neutral-color-background: var(--syn-color-neutral-
|
|
291
|
+
--syn-namur-neutral-color-background: var(--syn-color-neutral-300);
|
|
292
292
|
--syn-namur-success-color: var(--syn-color-success-500);
|
|
293
|
-
--syn-namur-success-color-background: var(--syn-color-success-
|
|
294
|
-
--syn-namur-warning-color: var(--syn-color-warning-
|
|
295
|
-
--syn-namur-warning-color-background: var(--syn-color-warning-
|
|
293
|
+
--syn-namur-success-color-background: var(--syn-color-success-50);
|
|
294
|
+
--syn-namur-warning-color: var(--syn-color-warning-500);
|
|
295
|
+
--syn-namur-warning-color-background: var(--syn-color-warning-50);
|
|
296
296
|
--syn-opacity-50: 0.5; /** 50% */
|
|
297
|
-
--syn-option-background-color-active: var(--syn-color-
|
|
298
|
-
--syn-option-background-color-hover: var(--syn-color-
|
|
299
|
-
--syn-option-check-color: var(--syn-
|
|
297
|
+
--syn-option-background-color-active: var(--syn-interactive-emphasis-color-active);
|
|
298
|
+
--syn-option-background-color-hover: var(--syn-interactive-emphasis-color-hover);
|
|
299
|
+
--syn-option-check-color: var(--syn-interactive-quiet-color);
|
|
300
300
|
--syn-option-check-color-active: var(--syn-color-neutral-0);
|
|
301
|
-
--syn-option-check-color-hover: var(--syn-color-
|
|
301
|
+
--syn-option-check-color-hover: var(--syn-color-neutral-0);
|
|
302
302
|
--syn-option-color: var(--syn-typography-color-text);
|
|
303
303
|
--syn-option-color-active: var(--syn-typography-color-text-inverted);
|
|
304
|
-
--syn-option-color-hover: var(--syn-typography-color-text);
|
|
305
|
-
--syn-option-icon-color: var(--syn-
|
|
306
|
-
--syn-option-icon-color-active: var(--syn-
|
|
307
|
-
--syn-option-icon-color-hover: var(--syn-
|
|
308
|
-
--syn-overlay-background-blur:
|
|
309
|
-
--syn-overlay-background-color: rgba(
|
|
310
|
-
--syn-page-background: var(--syn-color-neutral-
|
|
311
|
-
--syn-
|
|
304
|
+
--syn-option-color-hover: var(--syn-typography-color-text-inverted);
|
|
305
|
+
--syn-option-icon-color: var(--syn-interactive-quiet-color);
|
|
306
|
+
--syn-option-icon-color-active: var(--syn-color-neutral-0);
|
|
307
|
+
--syn-option-icon-color-hover: var(--syn-color-neutral-0);
|
|
308
|
+
--syn-overlay-background-blur: 8px;
|
|
309
|
+
--syn-overlay-background-color: rgba(0, 5, 26, 0.6);
|
|
310
|
+
--syn-page-background: var(--syn-color-neutral-0); /** Will be DEPRECATED */
|
|
311
|
+
--syn-page-background-color: var(--syn-color-neutral-0);
|
|
312
|
+
--syn-panel-background-color: var(--syn-color-neutral-50);
|
|
312
313
|
--syn-panel-border-color: var(--syn-color-neutral-300);
|
|
313
314
|
--syn-panel-border-radius: var(--syn-border-radius-medium);
|
|
314
315
|
--syn-panel-border-width: var(--syn-border-width-small);
|
|
315
|
-
--syn-progress-indicator-color: var(--syn-color-primary-
|
|
316
|
-
--syn-progress-track-color: var(--syn-color-neutral-
|
|
317
|
-
--syn-range-color-inactive: var(--syn-color-neutral-
|
|
318
|
-
--syn-range-error-color: var(--syn-color-error-
|
|
319
|
-
--syn-range-tick-color: var(--syn-color-neutral-
|
|
316
|
+
--syn-progress-indicator-color: var(--syn-color-primary-500);
|
|
317
|
+
--syn-progress-track-color: var(--syn-color-neutral-300);
|
|
318
|
+
--syn-range-color-inactive: var(--syn-color-neutral-300);
|
|
319
|
+
--syn-range-error-color: var(--syn-color-error-600);
|
|
320
|
+
--syn-range-tick-color: var(--syn-color-neutral-600);
|
|
320
321
|
--syn-range-track-color-active: var(--syn-interactive-emphasis-color);
|
|
321
322
|
--syn-readonly-background-color: var(--syn-color-neutral-300);
|
|
322
323
|
--syn-spacing-1-5x-large: 40px;
|
|
@@ -333,7 +334,7 @@
|
|
|
333
334
|
--syn-spacing-small: 12px;
|
|
334
335
|
--syn-spacing-x-large: 32px;
|
|
335
336
|
--syn-spacing-x-small: 8px;
|
|
336
|
-
--syn-spinner-opacity: 0.
|
|
337
|
+
--syn-spinner-opacity: 0.4;
|
|
337
338
|
--syn-switch-height-large: 28px;
|
|
338
339
|
--syn-switch-height-medium: var(--syn-spacing-large);
|
|
339
340
|
--syn-switch-height-small: var(--syn-spacing-medium-large);
|
|
@@ -341,18 +342,18 @@
|
|
|
341
342
|
--syn-switch-width-medium: var(--syn-spacing-1-5x-large);
|
|
342
343
|
--syn-switch-width-small: var(--syn-spacing-x-large);
|
|
343
344
|
--syn-table-background-color: var(--syn-panel-background-color);
|
|
344
|
-
--syn-table-background-color-alternating: var(--syn-color-neutral-
|
|
345
|
-
--syn-table-background-color-header: var(--syn-color-neutral-
|
|
345
|
+
--syn-table-background-color-alternating: var(--syn-color-neutral-200);
|
|
346
|
+
--syn-table-background-color-header: var(--syn-color-neutral-300);
|
|
346
347
|
--syn-table-border-color: var(--syn-color-neutral-300);
|
|
347
|
-
--syn-table-shadow-end: rgba(
|
|
348
|
-
--syn-table-shadow-start: rgba(
|
|
348
|
+
--syn-table-shadow-end: rgba(13, 13, 13, 0);
|
|
349
|
+
--syn-table-shadow-start: rgba(13, 13, 13, 0.8);
|
|
349
350
|
--syn-text-decoration-default: none;
|
|
350
351
|
--syn-text-decoration-underline: underline;
|
|
351
352
|
--syn-toggle-size-large: var(--syn-spacing-large);
|
|
352
353
|
--syn-toggle-size-medium: var(--syn-spacing-medium-large);
|
|
353
354
|
--syn-toggle-size-small: var(--syn-spacing-medium);
|
|
354
355
|
--syn-tooltip-arrow-size: 9px;
|
|
355
|
-
--syn-tooltip-background-color: var(--syn-color-neutral-
|
|
356
|
+
--syn-tooltip-background-color: var(--syn-color-neutral-1000);
|
|
356
357
|
--syn-tooltip-border-radius: var(--syn-border-radius-small);
|
|
357
358
|
--syn-tooltip-color: var(--syn-typography-color-text-inverted);
|
|
358
359
|
--syn-tooltip-font-family: var(--syn-font-sans);
|
|
@@ -365,37 +366,37 @@
|
|
|
365
366
|
--syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
|
|
366
367
|
--syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
|
|
367
368
|
--syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
|
|
368
|
-
--syn-typography-color-text: var(--syn-color-neutral-
|
|
369
|
-
--syn-typography-color-text-inverted: var(--syn-color-neutral-
|
|
369
|
+
--syn-typography-color-text: var(--syn-color-neutral-1000);
|
|
370
|
+
--syn-typography-color-text-inverted: var(--syn-color-neutral-50);
|
|
370
371
|
--syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
|
|
371
372
|
--syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
|
|
372
373
|
--syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
|
|
373
374
|
--syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
|
|
374
375
|
--syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
|
|
375
|
-
--syn-shadow-medium: 0px 1px 2px 0px rgba(
|
|
376
|
-
--syn-shadow-large: 0px 0px 3px 0px rgba(
|
|
377
|
-
--syn-shadow-x-large: 0px 1px 4px 0px rgba(
|
|
378
|
-
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(
|
|
379
|
-
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(
|
|
380
|
-
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(
|
|
381
|
-
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(
|
|
382
|
-
--syn-shadow-x-small: 0px 1px 2px 0px rgba(
|
|
383
|
-
--syn-shadow-small: 0px 1px 2px 0px rgba(
|
|
384
|
-
--syn-body-x-small-regular: 400 12px/1.4 '
|
|
385
|
-
--syn-body-x-small-semibold: 600 12px/1.4 '
|
|
386
|
-
--syn-body-x-small-bold:
|
|
387
|
-
--syn-body-small-regular: 400 14px/1.4 '
|
|
388
|
-
--syn-body-small-semibold: 600 14px/1.4 '
|
|
389
|
-
--syn-body-small-bold:
|
|
390
|
-
--syn-body-medium-regular: 400 16px/1.4 '
|
|
391
|
-
--syn-body-medium-semibold: 600 16px/1.4 '
|
|
392
|
-
--syn-body-medium-bold:
|
|
393
|
-
--syn-body-large-regular: 400 20px/1.4 '
|
|
394
|
-
--syn-body-large-semibold: 600 20px/1.4 '
|
|
395
|
-
--syn-body-large-bold:
|
|
396
|
-
--syn-heading-large:
|
|
397
|
-
--syn-heading-x-large:
|
|
398
|
-
--syn-heading-2x-large:
|
|
399
|
-
--syn-heading-3x-large:
|
|
376
|
+
--syn-shadow-medium: 0px 1px 2px 0px rgba(13, 13, 13, 0.08), 0px 1px 4px 0px rgba(13, 13, 13, 0.08), 0px 2px 8px 0px rgba(13, 13, 13, 0.08);
|
|
377
|
+
--syn-shadow-large: 0px 0px 3px 0px rgba(13, 13, 13, 0.12), 0px 2px 6px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.16);
|
|
378
|
+
--syn-shadow-x-large: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 8px 24px 0px rgba(13, 13, 13, 0.12), 0px 16px 48px 0px rgba(13, 13, 13, 0.16);
|
|
379
|
+
--syn-shadow-overflow-down: 0px 1px 4px 0px rgba(13, 13, 13, 0.12), 0px 3px 8px 0px rgba(13, 13, 13, 0.12), 0px 4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
380
|
+
--syn-shadow-overflow-up: 0px -1px 4px 0px rgba(13, 13, 13, 0.12), 0px -3px 8px 0px rgba(13, 13, 13, 0.12), 0px -4px 12px 0px rgba(13, 13, 13, 0.16);
|
|
381
|
+
--syn-shadow-overflow-left: -1px 0px 4px 0px rgba(13, 13, 13, 0.12), -3px 0px 8px 0px rgba(13, 13, 13, 0.12), -4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
382
|
+
--syn-shadow-overflow-right: 1px 0px 4px 0px rgba(13, 13, 13, 0.12), 3px 0px 8px 0px rgba(13, 13, 13, 0.12), 4px 0px 12px 0px rgba(13, 13, 13, 0.16);
|
|
383
|
+
--syn-shadow-x-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.04), 0px 1px 4px 0px rgba(13, 13, 13, 0.04), 0px 2px 8px 0px rgba(13, 13, 13, 0.04);
|
|
384
|
+
--syn-shadow-small: 0px 1px 2px 0px rgba(13, 13, 13, 0.06), 0px 1px 4px 0px rgba(13, 13, 13, 0.06), 0px 2px 8px 0px rgba(13, 13, 13, 0.06);
|
|
385
|
+
--syn-body-x-small-regular: 400 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
386
|
+
--syn-body-x-small-semibold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
387
|
+
--syn-body-x-small-bold: 600 12px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
388
|
+
--syn-body-small-regular: 400 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
389
|
+
--syn-body-small-semibold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
390
|
+
--syn-body-small-bold: 600 14px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
391
|
+
--syn-body-medium-regular: 400 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
392
|
+
--syn-body-medium-semibold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
393
|
+
--syn-body-medium-bold: 600 16px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
394
|
+
--syn-body-large-regular: 400 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
395
|
+
--syn-body-large-semibold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
396
|
+
--syn-body-large-bold: 600 20px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
397
|
+
--syn-heading-large: 400 22px/1.4 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
398
|
+
--syn-heading-x-large: 400 28px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
399
|
+
--syn-heading-2x-large: 400 34px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
400
|
+
--syn-heading-3x-large: 400 40px/1.2 'SICK Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
400
401
|
--syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
|
|
401
402
|
}
|