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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/LICENSE +28 -0
  3. package/package.json +22 -12
  4. package/dist/css/dark.css +0 -239
  5. package/dist/css/light.css +0 -239
  6. package/dist/scss/tokens.scss +0 -158
package/CHANGELOG.md ADDED
@@ -0,0 +1,20 @@
1
+ # [@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
+
3
+
4
+ ### Features
5
+
6
+ * update input-tokens ([#97](https://github.com/SickDesignSystem/synergy/issues/97)) ([630d8e2](https://github.com/SickDesignSystem/synergy/commit/630d8e25b053daae1c78944e5e56577aead1a6c2))
7
+
8
+ # [@synergy-design-system/tokens-v1.0.0-main.2](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.1...tokens/1.0.0-main.2) (2023-10-26)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ React component support ([#88](https://github.com/SickDesignSystem/synergy/issues/88)) ([967b7dd](https://github.com/SickDesignSystem/synergy/commit/967b7ddce3f2e1f6a1c55898c1368f0560947101))
14
+
15
+ # @synergy-design-system/tokens-v1.0.0-main.1 (2023-10-23)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * 🤔 Fix multiple errors in package.json ([#85](https://github.com/SickDesignSystem/synergy/issues/85)) ([7d18b9a](https://github.com/SickDesignSystem/synergy/commit/7d18b9a43c836a33f9f1beaefd18c4c2abf937c4))
package/LICENSE ADDED
@@ -0,0 +1,28 @@
1
+ BSD 3-Clause License
2
+
3
+ Copyright (c) 2023, SickDesignSystem
4
+
5
+ Redistribution and use in source and binary forms, with or without
6
+ modification, are permitted provided that the following conditions are met:
7
+
8
+ 1. Redistributions of source code must retain the above copyright notice, this
9
+ list of conditions and the following disclaimer.
10
+
11
+ 2. Redistributions in binary form must reproduce the above copyright notice,
12
+ this list of conditions and the following disclaimer in the documentation
13
+ and/or other materials provided with the distribution.
14
+
15
+ 3. Neither the name of the copyright holder nor the names of its
16
+ contributors may be used to endorse or promote products derived from
17
+ this software without specific prior written permission.
18
+
19
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
package/package.json CHANGED
@@ -6,21 +6,23 @@
6
6
  "description": "Design tokens for the SICK Design System",
7
7
  "devDependencies": {
8
8
  "@semantic-release/changelog": "^6.0.3",
9
+ "@semantic-release/exec": "^6.0.3",
9
10
  "@semantic-release/git": "^10.0.1",
10
- "@synergy-design-system/eslint-config-syn": "workspace:0.1",
11
11
  "@tokens-studio/sd-transforms": "^0.11.0",
12
12
  "chalk": "^5.3.0",
13
13
  "eslint": "^8.47.0",
14
+ "eslint-plugin-import": "^2.28.1",
14
15
  "rimraf": "^5.0.1",
15
- "semantic-release": "^22.0.5",
16
+ "semantic-release": "^19.0.5",
16
17
  "semantic-release-monorepo": "^7.0.5",
17
- "style-dictionary": "^3.8.0"
18
+ "style-dictionary": "^3.8.0",
19
+ "@synergy-design-system/eslint-config-syn": "0.1.0"
18
20
  },
19
21
  "files": [
20
22
  "dist",
21
23
  "CHANGELOG.md"
22
24
  ],
23
- "homepage": "https://github.com/SickDesignSystem/syn/tree/main/packages/tokens",
25
+ "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens",
24
26
  "keywords": [
25
27
  "SDS",
26
28
  "SICK",
@@ -31,7 +33,7 @@
31
33
  "name": "@synergy-design-system/tokens",
32
34
  "repository": {
33
35
  "type": "git",
34
- "url": "https://github.com/SickDesignSystem/syn.git",
36
+ "url": "https://github.com/SickDesignSystem/synergy.git",
35
37
  "directory": "packages/tokens"
36
38
  },
37
39
  "release": {
@@ -48,7 +50,8 @@
48
50
  {
49
51
  "name": "alpha",
50
52
  "prerelease": true
51
- }
53
+ },
54
+ "release-fallback"
52
55
  ],
53
56
  "plugins": [
54
57
  "@semantic-release/commit-analyzer",
@@ -59,10 +62,16 @@
59
62
  "changelogFile": "CHANGELOG.md"
60
63
  }
61
64
  ],
65
+ [
66
+ "@semantic-release/exec",
67
+ {
68
+ "prepareCmd": "pnpm build"
69
+ }
70
+ ],
62
71
  [
63
72
  "@semantic-release/npm",
64
73
  {
65
- "npmPublish": true
74
+ "npmPublish": false
66
75
  }
67
76
  ],
68
77
  [
@@ -83,12 +92,13 @@
83
92
  ]
84
93
  ]
85
94
  },
95
+ "type": "module",
96
+ "version": "1.0.0-main.3",
86
97
  "scripts": {
87
98
  "build": "pnpm clean && node scripts/build.js",
88
99
  "clean": "rimraf build",
89
100
  "lint": "eslint scripts",
90
- "start": "pnpm build"
91
- },
92
- "type": "module",
93
- "version": "0.1.0"
94
- }
101
+ "start": "pnpm build",
102
+ "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
103
+ }
104
+ }
package/dist/css/dark.css DELETED
@@ -1,239 +0,0 @@
1
- /**
2
- * @synergy-design-system/tokens version 0.1.0
3
- * SICK Global UX Foundation
4
- * Do not edit directly
5
- * Generated on Thu, 19 Oct 2023 11:11:33 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-primary-800);
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-600);
80
- --syn-input-width: var(--syn-border-width-small);
81
- --syn-input-icon-color: var(--syn-color-neutral-950);
82
- --syn-input-icon-color-hover: var(--syn-color-neutral-950);
83
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
84
- --syn-input-placeholder-color: var(--syn-color-neutral-800);
85
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
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-200);
96
- --syn-input-focus-ring-offset: 0;
97
- --syn-input-focus-ring-error: var(--syn-color-error-200);
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-600);
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 DELETED
@@ -1,239 +0,0 @@
1
- /**
2
- * @synergy-design-system/tokens version 0.1.0
3
- * SICK Global UX Foundation
4
- * Do not edit directly
5
- * Generated on Thu, 19 Oct 2023 11:11:33 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-primary-800);
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-600);
80
- --syn-input-width: var(--syn-border-width-small);
81
- --syn-input-icon-color: var(--syn-color-neutral-950);
82
- --syn-input-icon-color-hover: var(--syn-color-neutral-950);
83
- --syn-input-icon-color-focus: var(--syn-color-neutral-950);
84
- --syn-input-placeholder-color: var(--syn-color-neutral-800);
85
- --syn-input-placeholder-color-disabled: var(--syn-color-neutral-800);
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-200);
96
- --syn-input-focus-ring-offset: 0;
97
- --syn-input-focus-ring-error: var(--syn-color-error-200);
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-600);
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/dist/scss/tokens.scss DELETED
@@ -1,158 +0,0 @@
1
-
2
- // @synergy-design-system/tokens version 1.0.0
3
- // SICK Global UX Foundation
4
- // Do not edit directly
5
- // Generated on Thu, 19 Oct 2023 07:27:13 GMT
6
-
7
- $syn-input-focus-ring-offset: 0 !default;
8
- $syn-input-required-content-offset: -2px !default;
9
- $syn-input-required-content: * !default;
10
- $syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !default;
11
- $syn-border-width-x-large: 4px !default;
12
- $syn-border-width-large: 3px !default;
13
- $syn-border-width-medium: 2px !default;
14
- $syn-border-width-small: 1px !default;
15
- $syn-border-width-none: 0px !default;
16
- $syn-dimension-base: 4px !default;
17
- $syn-border-radius-circle: 9999px !default;
18
- $syn-border-radius-pill: 9999px !default;
19
- $syn-border-radius-none: 0px !default;
20
- $syn-font-mono: Roboto Mono !default;
21
- $syn-font-sans: Open Sans !default;
22
- $syn-font-weight-bold: 700 !default;
23
- $syn-font-weight-semibold: 600 !default;
24
- $syn-font-weight-normal: 400 !default;
25
- $syn-line-height-looser: 220% !default;
26
- $syn-line-height-loose: 180% !default;
27
- $syn-line-height-normal: 140% !default;
28
- $syn-line-height-dense: 120% !default;
29
- $syn-line-height-denser: 100% !default;
30
- $syn-duration-extra-slow: 500ms !default;
31
- $syn-duration-slow: 350ms !default;
32
- $syn-duration-normal: 250ms !default;
33
- $syn-duration-fast: 150ms !default;
34
- $syn-duration-extra-fast: 90ms !default;
35
- $syn-font-size-3x-large: 40px !default;
36
- $syn-font-size-2x-large: 32px !default;
37
- $syn-font-size-x-large: 24px !default;
38
- $syn-font-size-large: 20px !default;
39
- $syn-font-size-medium: 16px !default;
40
- $syn-font-size-small: 14px !default;
41
- $syn-font-size-x-small: 12px !default;
42
- $syn-font-size-2x-small: 10px !default;
43
- $--syn-color-input-focus-ring-color: $syn-color-blue-700 !default;
44
- $--syn-input-width: $syn-border-width-small !default;
45
- $--syn-input-border-radius-large: $syn-border-radius-none !default;
46
- $--syn-input-border-radius-medium: $syn-border-radius-none !default;
47
- $--syn-input-border-radius-small: $syn-border-radius-none !default;
48
- $--syn-focus-ring-width: $syn-border-width-small !default;
49
- $--syn-spacing-5x-large: $syn-dimension-base*32 !default;
50
- $--syn-spacing-4x-large: $syn-dimension-base*24 !default;
51
- $--syn-spacing-3x-large: $syn-dimension-base*16 !default;
52
- $--syn-spacing-2x-large: $syn-dimension-base*12 !default;
53
- $--syn-spacing-x-large: $syn-dimension-base*8 !default;
54
- $--syn-spacing-large: $syn-dimension-base*6 !default;
55
- $--syn-spacing-medium: $syn-dimension-base*4 !default;
56
- $--syn-spacing-small: $syn-dimension-base*3 !default;
57
- $--syn-spacing-x-small: $syn-dimension-base*2 !default;
58
- $--syn-spacing-2x-small: $syn-dimension-base*1 !default;
59
- $--syn-spacing-3x-small: $syn-dimension-base/2 !default;
60
- $--syn-spacing-4x-small: $syn-dimension-base/4 !default;
61
- $--syn-color-neutral-1000: $syn-color-black !default;
62
- $--syn-color-neutral-950: $syn-color-gray-950 !default;
63
- $--syn-color-neutral-900: $syn-color-gray-900 !default;
64
- $--syn-color-neutral-800: $syn-color-gray-800 !default;
65
- $--syn-color-neutral-700: $syn-color-gray-700 !default;
66
- $--syn-color-neutral-600: $syn-color-gray-600 !default;
67
- $--syn-color-neutral-500: $syn-color-gray-500 !default;
68
- $--syn-color-neutral-400: $syn-color-gray-400 !default;
69
- $--syn-color-neutral-300: $syn-color-gray-300 !default;
70
- $--syn-color-neutral-200: $syn-color-gray-200 !default;
71
- $--syn-color-neutral-100: $syn-color-gray-100 !default;
72
- $--syn-color-neutral-50: $syn-color-gray-50 !default;
73
- $--syn-color-neutral-0: $syn-color-white !default;
74
- $--syn-color-accent-950: $syn-color-orange-950 !default;
75
- $--syn-color-accent-900: $syn-color-orange-900 !default;
76
- $--syn-color-accent-800: $syn-color-orange-800 !default;
77
- $--syn-color-accent-700: $syn-color-orange-700 !default;
78
- $--syn-color-accent-600: $syn-color-orange-600 !default;
79
- $--syn-color-accent-500: $syn-color-orange-500 !default;
80
- $--syn-color-accent-400: $syn-color-orange-400 !default;
81
- $--syn-color-accent-300: $syn-color-orange-300 !default;
82
- $--syn-color-accent-200: $syn-color-orange-200 !default;
83
- $--syn-color-accent-100: $syn-color-orange-100 !default;
84
- $--syn-color-accent-50: $syn-color-orange-50 !default;
85
- $--syn-color-error-950: $syn-color-red-950 !default;
86
- $--syn-color-error-900: $syn-color-red-900 !default;
87
- $--syn-color-error-800: $syn-color-red-800 !default;
88
- $--syn-color-error-700: $syn-color-red-700 !default;
89
- $--syn-color-error-600: $syn-color-red-600 !default;
90
- $--syn-color-error-500: $syn-color-red-500 !default;
91
- $--syn-color-error-400: $syn-color-red-400 !default;
92
- $--syn-color-error-300: $syn-color-red-300 !default;
93
- $--syn-color-error-200: $syn-color-red-200 !default;
94
- $--syn-color-error-100: $syn-color-red-100 !default;
95
- $--syn-color-error-50: $syn-color-red-50 !default;
96
- $--syn-color-warning-950: $syn-color-yellow-950 !default;
97
- $--syn-color-warning-900: $syn-color-yellow-900 !default;
98
- $--syn-color-warning-800: $syn-color-yellow-800 !default;
99
- $--syn-color-warning-700: $syn-color-yellow-700 !default;
100
- $--syn-color-warning-600: $syn-color-yellow-600 !default;
101
- $--syn-color-warning-500: $syn-color-yellow-500 !default;
102
- $--syn-color-warning-400: $syn-color-yellow-400 !default;
103
- $--syn-color-warning-300: $syn-color-yellow-300 !default;
104
- $--syn-color-warning-200: $syn-color-yellow-200 !default;
105
- $--syn-color-warning-100: $syn-color-yellow-100 !default;
106
- $--syn-color-warning-50: $syn-color-yellow-50 !default;
107
- $--syn-color-success-950: $syn-color-green-950 !default;
108
- $--syn-color-success-900: $syn-color-green-900 !default;
109
- $--syn-color-success-800: $syn-color-green-800 !default;
110
- $--syn-color-success-700: $syn-color-green-700 !default;
111
- $--syn-color-success-600: $syn-color-green-600 !default;
112
- $--syn-color-success-500: $syn-color-green-500 !default;
113
- $--syn-color-success-400: $syn-color-green-400 !default;
114
- $--syn-color-success-300: $syn-color-green-300 !default;
115
- $--syn-color-success-200: $syn-color-green-200 !default;
116
- $--syn-color-success-100: $syn-color-green-100 !default;
117
- $--syn-color-success-50: $syn-color-green-50 !default;
118
- $--syn-color-primary-950: $syn-color-blue-950 !default;
119
- $--syn-color-primary-900: $syn-color-blue-900 !default;
120
- $--syn-color-primary-800: $syn-color-blue-800 !default;
121
- $--syn-color-primary-700: $syn-color-blue-700 !default;
122
- $--syn-color-primary-600: $syn-color-blue-600 !default;
123
- $--syn-color-primary-500: $syn-color-blue-500 !default;
124
- $--syn-color-primary-400: $syn-color-blue-400 !default;
125
- $--syn-color-primary-300: $syn-color-blue-300 !default;
126
- $--syn-color-primary-200: $syn-color-blue-200 !default;
127
- $--syn-color-primary-100: $syn-color-blue-100 !default;
128
- $--syn-color-primary-50: $syn-color-blue-50 !default;
129
- $--syn-input-spacing-large: $--syn-spacing-large !default;
130
- $--syn-input-spacing-medium: $--syn-spacing-medium !default;
131
- $--syn-input-spacing-small: $--syn-spacing-small !default;
132
- $--syn-color-input-label-color: $--syn-color-neutral-950 !default;
133
- $--syn-color-input-placeholder-color-disabled: $--syn-color-neutral-600 !default;
134
- $--syn-color-input-placeholder-color: $--syn-color-neutral-500 !default;
135
- $--syn-color-input-icon-color-focus: $--syn-color-neutral-600 !default;
136
- $--syn-color-input-icon-color-hover: $--syn-color-neutral-600 !default;
137
- $--syn-color-input-icon-color: $--syn-color-neutral-500 !default;
138
- $--syn-color-input-border-color-disables: $--syn-color-neutral-300 !default;
139
- $--syn-color-input-border-color-focus: $--syn-color-primary-500 !default;
140
- $--syn-color-input-border-color-hover: $--syn-color-neutral-400 !default;
141
- $--syn-color-input-border-color: $--syn-color-neutral-300 !default;
142
- $--syn-color-input-background-color-disabled: $--syn-color-neutral-100 !default;
143
- $--syn-color-input-background-color: $--syn-color-neutral-0 !default;
144
- $--syn-color-input-color-disabled: $--syn-color-neutral-900 !default;
145
- $--syn-color-input-color-focus: $--syn-color-neutral-700 !default;
146
- $--syn-color-input-color-hover: $--syn-color-neutral-700 !default;
147
- $--syn-color-input-color: $--syn-color-neutral-700 !default;
148
- $--syn-focus-ring-offset: $--syn-spacing-4x-small !default;
149
- $--syn-color-focus-ring-color: $--syn-color-primary-600 !default;
150
- $syn-shadow-overflow-right: [object Object],[object Object],[object Object] !default;
151
- $syn-shadow-overflow-left: [object Object],[object Object],[object Object] !default;
152
- $syn-shadow-overflow-up: [object Object],[object Object],[object Object] !default;
153
- $syn-shadow-overflow-down: [object Object],[object Object],[object Object] !default;
154
- $syn-shadow-large: [object Object],[object Object],[object Object] !default;
155
- $syn-shadow-medium: [object Object],[object Object],[object Object] !default;
156
- $syn-shadow-small: [object Object],[object Object],[object Object] !default;
157
- $--syn-color-input-background-color-focus: $--syn-color-input-background-color !default;
158
- $--syn-color-input-background-color-hover: $--syn-color-input-background-color !default;