@synergy-design-system/tokens 2.22.0 → 2.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +40 -17
  3. package/dist/js/index.d.ts +31 -1
  4. package/dist/js/index.js +31 -1
  5. package/dist/scss/_tokens.scss +7 -1
  6. package/dist/themes/dark.css +12 -6
  7. package/dist/themes/light.css +12 -6
  8. package/dist/themes/sick2018_dark.css +274 -0
  9. package/dist/themes/sick2018_light.css +274 -0
  10. package/dist/themes/sick2025_dark.css +274 -0
  11. package/dist/themes/sick2025_light.css +274 -0
  12. package/package.json +1 -1
  13. package/src/figma-variables/output/sick2018-dark.json +30 -4
  14. package/src/figma-variables/output/sick2018-light.json +30 -4
  15. package/src/figma-variables/output/sick2025-dark.json +1213 -0
  16. package/src/figma-variables/output/sick2025-light.json +1213 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [@synergy-design-system/tokens-v2.24.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.23.0...tokens/2.24.0) (2025-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨CD update for syn-input ([#1001](https://github.com/synergy-design-system/synergy-design-system/issues/1001)) ([52f42f8](https://github.com/synergy-design-system/synergy-design-system/commit/52f42f8d1f494c54492e54b6ddafc6693dcdb0bb))
7
+
8
+ # [@synergy-design-system/tokens-v2.23.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.22.0...tokens/2.23.0) (2025-08-19)
9
+
10
+
11
+ ### Features
12
+
13
+ * ✨ export new sick2025 themes ([#985](https://github.com/synergy-design-system/synergy-design-system/issues/985)) ([148730d](https://github.com/synergy-design-system/synergy-design-system/commit/148730d68037ea74dc241ca6627aa6a32af876ab))
14
+
1
15
  # [@synergy-design-system/tokens-v2.22.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.21.0...tokens/2.22.0) (2025-08-07)
2
16
 
3
17
 
package/README.md CHANGED
@@ -23,8 +23,8 @@ As projects may use various forms of applying styles, we provide different ways
23
23
 
24
24
  ### Using CSS themes
25
25
 
26
- Provides the css variables that are used in synergy components as css variables and is **required** if you are using `@synergy-design-system/components` or a derived package like `@synergy-design-system/react`.
27
- The tokens package ships with two themes: 🌞 light and 🌛 dark.
26
+ Provides the css variables that are used in synergy components as css variables and is **required** if you are using `@synergy-design-system/components` or one of the framework packages like `@synergy-design-system/react`.
27
+ The tokens package ships two **themes** (sick2018 and sick2025), with each providing two **modes**: 🌞 light and 🌛 dark.
28
28
 
29
29
  > The css styles are used as a single source of truth, also when working with the provided JavaScript or SASS exports!
30
30
  > Always make sure to load one of the css themes!
@@ -34,9 +34,11 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
34
34
  <head>
35
35
  <!-- Example 1: Referencing directly in a HTML document -->
36
36
  <!-- Make sure to add the stylesheet before using any components -->
37
+ <!-- Note that "light.css" will point to the default theme of the tokens package. See table below for defaults -->
37
38
  <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/light.css" />
38
39
 
39
40
  <!-- Alternative: Use the dark theme -->
41
+ <!-- Note that "dark.css" will point to the default theme of the tokens package. See table below for defaults -->
40
42
  <link rel="stylesheet" href="/node_modules/@synergy-design-system/tokens/dist/themes/dark.css" />
41
43
  </head>
42
44
  <body>
@@ -51,10 +53,12 @@ The tokens package ships with two themes: 🌞 light and 🌛 dark.
51
53
 
52
54
  You are also able to switch themes during the runtime. For the time being, we do not ship a utility function for this, as it is easy to implement. Each theme applies the variables via a `:root` selector, as well as a `className` that may be added to the `document.body`.
53
55
 
54
- | Theme | Stylesheet to use | Body className |
55
- | :---- | :------------------------ | :---------------- |
56
- | light | `tokens/themes/light.css` | `syn-theme-light` |
57
- | dark | `tokens/themes/dark.css` | `syn-theme-dark` |
56
+ | Theme | Mode | Stylesheet to use | Corresponding classNames | Default for Version |
57
+ | :------- | :---- | :--------------------------------- | :-------------------------------------- | :-----------------: |
58
+ | sick2018 | light | `tokens/themes/sick2018_light.css` | `syn-theme-light`, `syn-sick2018-light` | `2.0.0` |
59
+ | sick2018 | dark | `tokens/themes/sick2018_dark.css` | `syn-theme-dark`, `syn-sick2018-dark` | |
60
+ | sick2025 | light | `tokens/themes/sick2025_light.css` | `syn-sick2025-light` | `3.0.0` |
61
+ | sick2025 | dark | `tokens/themes/sick2025_dark.css` | `syn-sick2025-dark` | |
58
62
 
59
63
  To switch the theme, proceed in the following way:
60
64
 
@@ -103,7 +107,12 @@ To switch the theme, proceed in the following way:
103
107
  // Use this way when you already use a build system like webpack or vite
104
108
  // to make it part of your bundle.
105
109
  // Note this import should happen BEFORE you render any components!
110
+
111
+ // Light theme
106
112
  import "@synergy-design-system/tokens/themes/light.css";
113
+
114
+ // Dark theme
115
+ import "@synergy-design-system/tokens/themes/dark.css";
107
116
  ```
108
117
 
109
118
  ---
@@ -200,13 +209,13 @@ Figma
200
209
  ↓
201
210
  Figma REST API
202
211
  ↓
203
- Raw JSON Files (src/figma-variables/)
212
+ Raw JSON Files (src/figma-variables/variableTokens.json + styleTokens.json)
204
213
  ↓
205
214
  Transform Scripts (scripts/figma/)
206
215
  ↓
207
- Style Dictionary compliant JSON Files (src/figma-variables/output)
216
+ Style Dictionary compliant JSON Files (src/figma-variables/output/)
208
217
  ↓
209
- Style Dictionary Processing
218
+ Style Dictionary Processing (scripts/build.js)
210
219
  ↓
211
220
  Build Output (dist/)
212
221
  ```
@@ -233,8 +242,17 @@ pnpm fetch:figma
233
242
  # Only fetch variables and transform into Style Dictionary format
234
243
  pnpm fetch:variables
235
244
 
236
- # Only fetch styles
245
+ # Only fetch styles and transform into Style Dictionary format
237
246
  pnpm fetch:styles
247
+
248
+ # Transform already fetched variables into Style Dictionary format
249
+ pnpm build:variables
250
+
251
+ # Transform already fetched styles into Style Dictionary format
252
+ pnpm build:styles
253
+
254
+ # Process transformed tokens with Style Dictionary (build final output)
255
+ pnpm build
238
256
  ```
239
257
 
240
258
  #### Figma variables
@@ -244,6 +262,8 @@ Currently supported modes are:
244
262
 
245
263
  - **sick2018-light**
246
264
  - **sick2018-dark**
265
+ - **sick2025-light**
266
+ - **sick2025-dark**
247
267
 
248
268
  For each mode a json file is created, with the corresponding tokens and values.
249
269
 
@@ -254,7 +274,7 @@ For the styles a separate `styles.json` is created.
254
274
  #### Output
255
275
 
256
276
  Outputs of the tokens are created using [Style Dictionary](https://amzn.github.io/style-dictionary/).
257
- You can trigger a build using `pnpm build` in the `tokens` package root. This will create the css themes (located in `dist/themes/light.css` and `dist/themes/dark.css`), as well as the JavaScript exports (located at `dist/js/index.js`) and scss variables (`dist/scss/_tokens.scss`).
277
+ You can trigger a build using `pnpm build` in the `tokens` package root. This will create the css themes (located in `dist/themes/` with files like `light.css`, `dark.css`, `sick2018_light.css`, `sick2018_dark.css`, `sick2025_light.css`, and `sick2025_dark.css`), as well as the JavaScript exports (located at `dist/js/index.js`) and scss variables (`dist/scss/_tokens.scss`).
258
278
 
259
279
  ---
260
280
 
@@ -262,17 +282,20 @@ You can trigger a build using `pnpm build` in the `tokens` package root. This wi
262
282
 
263
283
  #### `/src/figma-variables/`
264
284
 
265
- - **`tokens.json`**: Raw data of Figma Variables and Collections, directly fetched from the Figma API
285
+ - **`variableTokens.json`**: Raw data of Figma Variables and Collections, directly fetched from the Figma API
286
+ - **`styleTokens.json`**: Raw data of Figma Styles, directly fetched from the Figma API
266
287
  - **`output/`**: Transformed token files in Style Dictionary-compatible formats
267
- - `sick2018-light.json`: Light Theme Tokens
268
- - `sick2018-dark.json`: Dark Theme Tokens
269
- - `styles.json`: Figma Styles (Typography, Shadows, etc.)
288
+ - `sick2018-light.json`: Light Theme Tokens for SICK 2018
289
+ - `sick2018-dark.json`: Dark Theme Tokens for SICK 2018
290
+ - `sick2025-light.json`: Light Theme Tokens for SICK 2025
291
+ - `sick2025-dark.json`: Dark Theme Tokens for SICK 2025
270
292
 
271
293
  #### `/scripts/figma/`
272
294
 
273
295
  - **`fetch-variables.js`**: Downloads Figma Variables via the REST API
274
- - **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
275
296
  - **`style-dict-outputter.js`**: Custom outputter for Figma Styles export
297
+ - **`transform-tokens.js`**: Transforms Figma Variables into Style Dictionary format
298
+ - **`transform-styles.js`**: Transforms Figma Styles into Style Dictionary format
276
299
  - **`helpers.js`**: Utility functions
277
300
 
278
301
  #### `/scripts/add-missing-tokens.js`
@@ -314,7 +337,7 @@ The workflow is manually triggered using `workflow_dispatch` with configurable i
314
337
 
315
338
  1. **Repository Setup**: Checks out the repository with full history
316
339
  2. **Environment Setup**: Installs pnpm, Node.js 22, and project dependencies
317
- 3. **Token Synchronization**: Runs `pnpm -C ./packages/tokens fetch:figma` to fetch and transform Figma data
340
+ 3. **Token Synchronization**: Runs `pnpm -C ./packages/tokens fetch:figma && pnpm -C ./packages/tokens build:figma` to fetch and transform Figma data
318
341
  4. **Quality Assurance**: Builds and tests the updated tokens to ensure integrity
319
342
  5. **Pull Request Creation**: Creates a new branch and pull request with the changes
320
343
 
package/dist/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.21.0
2
+ * @synergy-design-system/tokens version 2.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall: string;
863
863
  */
864
864
  export const SynInputWidth: string;
865
865
 
866
+ /**
867
+ * Maps to the css variable `--syn-interactive-primary-color`
868
+ */
869
+ export const SynInteractivePrimaryColor: string;
870
+
871
+ /**
872
+ * Maps to the css variable `--syn-interactive-primary-color-active`
873
+ */
874
+ export const SynInteractivePrimaryColorActive: string;
875
+
876
+ /**
877
+ * Maps to the css variable `--syn-interactive-primary-color-hover`
878
+ */
879
+ export const SynInteractivePrimaryColorHover: string;
880
+
881
+ /**
882
+ * Maps to the css variable `--syn-interactive-secondary-color`
883
+ */
884
+ export const SynInteractiveSecondaryColor: string;
885
+
886
+ /**
887
+ * Maps to the css variable `--syn-interactive-secondary-color-active`
888
+ */
889
+ export const SynInteractiveSecondaryColorActive: string;
890
+
891
+ /**
892
+ * Maps to the css variable `--syn-interactive-secondary-color-hover`
893
+ */
894
+ export const SynInteractiveSecondaryColorHover: string;
895
+
866
896
  /**
867
897
  * Maps to the css variable `--syn-letter-spacing-dense`
868
898
  */
package/dist/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.21.0
2
+ * @synergy-design-system/tokens version 2.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -863,6 +863,36 @@ export const SynInputSpacingSmall = 'var(--syn-input-spacing-small)';
863
863
  */
864
864
  export const SynInputWidth = 'var(--syn-input-width)';
865
865
 
866
+ /**
867
+ * @type {string}
868
+ */
869
+ export const SynInteractivePrimaryColor = 'var(--syn-interactive-primary-color)';
870
+
871
+ /**
872
+ * @type {string}
873
+ */
874
+ export const SynInteractivePrimaryColorActive = 'var(--syn-interactive-primary-color-active)';
875
+
876
+ /**
877
+ * @type {string}
878
+ */
879
+ export const SynInteractivePrimaryColorHover = 'var(--syn-interactive-primary-color-hover)';
880
+
881
+ /**
882
+ * @type {string}
883
+ */
884
+ export const SynInteractiveSecondaryColor = 'var(--syn-interactive-secondary-color)';
885
+
886
+ /**
887
+ * @type {string}
888
+ */
889
+ export const SynInteractiveSecondaryColorActive = 'var(--syn-interactive-secondary-color-active)';
890
+
891
+ /**
892
+ * @type {string}
893
+ */
894
+ export const SynInteractiveSecondaryColorHover = 'var(--syn-interactive-secondary-color-hover)';
895
+
866
896
  /**
867
897
  * @type {string}
868
898
  */
package/dist/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.21.0
2
+ * @synergy-design-system/tokens version 2.23.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynBorderRadiusCircle: var(--syn-border-radius-circle) !default;
@@ -174,6 +174,12 @@ $SynInputSpacingLarge: var(--syn-input-spacing-large) !default;
174
174
  $SynInputSpacingMedium: var(--syn-input-spacing-medium) !default;
175
175
  $SynInputSpacingSmall: var(--syn-input-spacing-small) !default;
176
176
  $SynInputWidth: var(--syn-input-width) !default;
177
+ $SynInteractivePrimaryColor: var(--syn-interactive-primary-color) !default;
178
+ $SynInteractivePrimaryColorActive: var(--syn-interactive-primary-color-active) !default;
179
+ $SynInteractivePrimaryColorHover: var(--syn-interactive-primary-color-hover) !default;
180
+ $SynInteractiveSecondaryColor: var(--syn-interactive-secondary-color) !default;
181
+ $SynInteractiveSecondaryColorActive: var(--syn-interactive-secondary-color-active) !default;
182
+ $SynInteractiveSecondaryColorHover: var(--syn-interactive-secondary-color-hover) !default;
177
183
  $SynLetterSpacingDense: var(--syn-letter-spacing-dense) !default;
178
184
  $SynLetterSpacingDenser: var(--syn-letter-spacing-denser) !default;
179
185
  $SynLetterSpacingLoose: var(--syn-letter-spacing-loose) !default;
package/dist/themes/dark.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.21.0
2
+ * @synergy-design-system/tokens version 2.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-theme-dark {
7
+ :root, .syn-sick2018-dark, .syn-theme-dark {
8
8
  color-scheme: dark;
9
9
 
10
10
  --syn-border-radius-circle: 9999px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -242,10 +248,10 @@
242
248
  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
249
  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
250
  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Down */
246
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Up */
247
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Left */
248
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Right */
251
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
252
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
253
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
254
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
255
  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
256
  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
257
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/dist/themes/light.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.21.0
2
+ * @synergy-design-system/tokens version 2.23.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
6
6
 
7
- :root, .syn-theme-light {
7
+ :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
10
  --syn-border-radius-circle: 9999px;
@@ -179,6 +179,12 @@
179
179
  --syn-input-spacing-medium: var(--syn-spacing-medium);
180
180
  --syn-input-spacing-small: var(--syn-spacing-small);
181
181
  --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
182
188
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
189
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
190
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
@@ -242,10 +248,10 @@
242
248
  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
249
  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
250
  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Down */
246
- --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Up */
247
- --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Left */
248
- --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16); /** Overflow Right */
251
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
252
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
253
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
254
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
255
  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
256
  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
257
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/dist/themes/sick2018_dark.css ADDED
@@ -0,0 +1,274 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 2.23.0
3
+ * SICK Global UX Foundation
4
+ * Do not edit directly, this file was auto-generated.
5
+ */
6
+
7
+ :root, .syn-sick2018-dark, .syn-theme-dark {
8
+ color-scheme: dark;
9
+
10
+ --syn-border-radius-circle: 9999px;
11
+ --syn-border-radius-large: 8px;
12
+ --syn-border-radius-medium: 8px;
13
+ --syn-border-radius-none: 0px;
14
+ --syn-border-radius-pill: 9999px;
15
+ --syn-border-radius-small: 4px;
16
+ --syn-border-radius-x-large: 16px;
17
+ --syn-border-width-large: 3px; /** Large */
18
+ --syn-border-width-medium: 2px; /** Medium */
19
+ --syn-border-width-none: 0px; /** None */
20
+ --syn-border-width-small: 1px; /** Small */
21
+ --syn-border-width-x-large: 4px; /** X Large */
22
+ --syn-button-font-size-large: var(--syn-font-size-large);
23
+ --syn-button-font-size-medium: var(--syn-font-size-medium);
24
+ --syn-button-font-size-small: var(--syn-font-size-small);
25
+ --syn-color-accent-50: #481700;
26
+ --syn-color-accent-100: #7c310b;
27
+ --syn-color-accent-200: #983b08;
28
+ --syn-color-accent-300: #bb4d02;
29
+ --syn-color-accent-400: #e27200;
30
+ --syn-color-accent-500: #f39200;
31
+ --syn-color-accent-600: #ffbd1b;
32
+ --syn-color-accent-700: #ffd246;
33
+ --syn-color-accent-800: #ffe685;
34
+ --syn-color-accent-900: #fff2c5;
35
+ --syn-color-accent-950: #fffbea;
36
+ --syn-color-error-50: #4e010a;
37
+ --syn-color-error-100: #8d0f1e;
38
+ --syn-color-error-200: #ab091c;
39
+ --syn-color-error-300: #d0051d;
40
+ --syn-color-error-400: #ea0823;
41
+ --syn-color-error-500: #ff2b44;
42
+ --syn-color-error-600: #ff5d70;
43
+ --syn-color-error-700: #ff98a4;
44
+ --syn-color-error-800: #ffc3c9;
45
+ --syn-color-error-900: #ffdee2;
46
+ --syn-color-error-950: #fff0f2;
47
+ --syn-color-neutral-0: #000000;
48
+ --syn-color-neutral-50: #31373a;
49
+ --syn-color-neutral-100: #4c5357;
50
+ --syn-color-neutral-200: #5e676b;
51
+ --syn-color-neutral-300: #737f85;
52
+ --syn-color-neutral-400: #859298;
53
+ --syn-color-neutral-500: #9ea9ae;
54
+ --syn-color-neutral-600: #bac2c6;
55
+ --syn-color-neutral-700: #d5dbdd;
56
+ --syn-color-neutral-800: #e8ebec;
57
+ --syn-color-neutral-900: #f2f3f6;
58
+ --syn-color-neutral-950: #f9fafb;
59
+ --syn-color-neutral-1000: #ffffff;
60
+ --syn-color-primary-50: #072e4a;
61
+ --syn-color-primary-100: #0b486f;
62
+ --syn-color-primary-200: #065786;
63
+ --syn-color-primary-300: #0166a3;
64
+ --syn-color-primary-400: #007cc1;
65
+ --syn-color-primary-500: #0ca2eb;
66
+ --syn-color-primary-600: #36bbfa;
67
+ --syn-color-primary-700: #7cd1fd;
68
+ --syn-color-primary-800: #b9e5fe;
69
+ --syn-color-primary-900: #e0f1fe;
70
+ --syn-color-primary-950: #f0f9ff;
71
+ --syn-color-success-50: #172c07;
72
+ --syn-color-success-100: #315017;
73
+ --syn-color-success-200: #395e16;
74
+ --syn-color-success-300: #437714;
75
+ --syn-color-success-400: #63b017;
76
+ --syn-color-success-500: #73c31f;
77
+ --syn-color-success-600: #93dd3e;
78
+ --syn-color-success-700: #b0eb6b;
79
+ --syn-color-success-800: #d1f4a2;
80
+ --syn-color-success-900: #e7facd;
81
+ --syn-color-success-950: #f5fde8;
82
+ --syn-color-warning-50: #411f07;
83
+ --syn-color-warning-100: #6f3e14;
84
+ --syn-color-warning-200: #834b10;
85
+ --syn-color-warning-300: #9e5f0a;
86
+ --syn-color-warning-400: #c68608;
87
+ --syn-color-warning-500: #e5ae0d;
88
+ --syn-color-warning-600: #f5c413;
89
+ --syn-color-warning-700: #f9da4b;
90
+ --syn-color-warning-800: #fcec8c;
91
+ --syn-color-warning-900: #fdf7c4;
92
+ --syn-color-warning-950: #fefce8;
93
+ --syn-dimension-base: 4px; /** to be deprecated */
94
+ --syn-duration-extra-fast: 50ms;
95
+ --syn-duration-extra-slow: 1000ms;
96
+ --syn-duration-fast: 150ms;
97
+ --syn-duration-normal: 250ms;
98
+ --syn-duration-slow: 500ms;
99
+ --syn-focus-ring-color: var(--syn-color-primary-400);
100
+ --syn-focus-ring-offset: var(--syn-spacing-3x-small);
101
+ --syn-focus-ring-style: solid;
102
+ --syn-focus-ring-width: var(--syn-border-width-medium);
103
+ --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
104
+ --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
105
+ --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
106
+ --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
107
+ --syn-font-size-2x-large: 32px;
108
+ --syn-font-size-2x-small: 11px;
109
+ --syn-font-size-3x-large: 40px;
110
+ --syn-font-size-4x-large: 52px;
111
+ --syn-font-size-large: 20px;
112
+ --syn-font-size-medium: 16px;
113
+ --syn-font-size-small: 14px;
114
+ --syn-font-size-x-large: 24px;
115
+ --syn-font-size-x-small: 12px;
116
+ --syn-font-weight-bold: 700;
117
+ --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
118
+ --syn-font-weight-normal: 400;
119
+ --syn-font-weight-semibold: 600;
120
+ --syn-input-background-color: var(--syn-color-neutral-0);
121
+ --syn-input-background-color-disabled: var(--syn-input-background-color);
122
+ --syn-input-background-color-focus: var(--syn-input-background-color);
123
+ --syn-input-background-color-hover: var(--syn-input-background-color);
124
+ --syn-input-border-color: var(--syn-color-neutral-700);
125
+ --syn-input-border-color-disabled: var(--syn-color-neutral-700);
126
+ --syn-input-border-color-focus: var(--syn-color-neutral-950);
127
+ --syn-input-border-color-focus-error: var(--syn-color-error-700);
128
+ --syn-input-border-color-hover: var(--syn-color-neutral-950);
129
+ --syn-input-border-radius-large: var(--syn-border-radius-none);
130
+ --syn-input-border-radius-medium: var(--syn-border-radius-none);
131
+ --syn-input-border-radius-small: var(--syn-border-radius-none);
132
+ --syn-input-border-width: 1px;
133
+ --syn-input-color: var(--syn-color-neutral-950);
134
+ --syn-input-color-disabled: var(--syn-color-neutral-950);
135
+ --syn-input-color-focus: var(--syn-color-neutral-950);
136
+ --syn-input-color-hover: var(--syn-color-neutral-950);
137
+ --syn-input-disabled-opacity: 0.5;
138
+ --syn-input-focus-ring-color: var(--syn-color-primary-400);
139
+ --syn-input-focus-ring-error: var(--syn-color-error-400);
140
+ --syn-input-focus-ring-offset: 0px;
141
+ --syn-input-font-family: var(--syn-font-sans);
142
+ --syn-input-font-size-large: var(--syn-font-size-large);
143
+ --syn-input-font-size-medium: var(--syn-font-size-medium);
144
+ --syn-input-font-size-small: var(--syn-font-size-small);
145
+ --syn-input-font-weight: var(--syn-font-weight-normal);
146
+ --syn-input-height-large: var(--syn-spacing-3x-large);
147
+ --syn-input-height-medium: var(--syn-spacing-2x-large);
148
+ --syn-input-height-small: 36px;
149
+ --syn-input-help-text-color: var(--syn-color-neutral-800);
150
+ --syn-input-help-text-color-error: var(--syn-color-error-700);
151
+ --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
152
+ --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
153
+ --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
154
+ --syn-input-icon-color: var(--syn-color-neutral-800);
155
+ --syn-input-icon-color-focus: var(--syn-color-neutral-800);
156
+ --syn-input-icon-color-hover: var(--syn-color-neutral-800);
157
+ --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
158
+ --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
159
+ --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
160
+ --syn-input-label-color: var(--syn-color-neutral-950);
161
+ --syn-input-label-font-size-large: var(--syn-font-size-large);
162
+ --syn-input-label-font-size-medium: var(--syn-font-size-medium);
163
+ --syn-input-label-font-size-small: var(--syn-font-size-small);
164
+ --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
165
+ --syn-input-placeholder-color: var(--syn-color-neutral-500);
166
+ --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
167
+ --syn-input-readonly-color: var(--syn-color-neutral-800);
168
+ --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
169
+ --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
170
+ --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
171
+ --syn-input-readonly-background-color: var(--syn-color-neutral-50);
172
+ --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
173
+ --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
174
+ --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
175
+ --syn-input-required-content: "*";
176
+ --syn-input-required-content-color: var(--syn-input-label-color);
177
+ --syn-input-required-content-offset: -2px;
178
+ --syn-input-spacing-large: var(--syn-spacing-large);
179
+ --syn-input-spacing-medium: var(--syn-spacing-medium);
180
+ --syn-input-spacing-small: var(--syn-spacing-small);
181
+ --syn-input-width: var(--syn-border-width-small);
182
+ --syn-interactive-primary-color: var(--syn-color-primary-600);
183
+ --syn-interactive-primary-color-active: var(--syn-color-neutral-950);
184
+ --syn-interactive-primary-color-hover: var(--syn-color-primary-900);
185
+ --syn-interactive-secondary-color: var(--syn-color-neutral-950);
186
+ --syn-interactive-secondary-color-active: var(--syn-color-primary-600);
187
+ --syn-interactive-secondary-color-hover: var(--syn-color-primary-600);
188
+ --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
189
+ --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
190
+ --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
191
+ --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
192
+ --syn-letter-spacing-normal: normal;
193
+ --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
194
+ --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
195
+ --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
196
+ --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
197
+ --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
198
+ --syn-link-color: var(--syn-color-primary-600);
199
+ --syn-link-color-active: var(--syn-color-primary-950);
200
+ --syn-link-color-hover: var(--syn-color-primary-900);
201
+ --syn-link-quiet-color: var(--syn-typography-color-text);
202
+ --syn-link-quiet-color-active: var(--syn-color-primary-950);
203
+ --syn-link-quiet-color-hover: var(--syn-color-primary-900);
204
+ --syn-opacity-50: 0.5; /** 50% */
205
+ --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
206
+ --syn-panel-background-color: var(--syn-color-neutral-0);
207
+ --syn-panel-border-color: var(--syn-color-neutral-300);
208
+ --syn-panel-border-width: var(--syn-border-width-small);
209
+ --syn-spacing-2x-large: 48px;
210
+ --syn-spacing-2x-small: 4px;
211
+ --syn-spacing-3x-large: 64px;
212
+ --syn-spacing-3x-small: 2px;
213
+ --syn-spacing-4x-large: 96px;
214
+ --syn-spacing-4x-small: 1px;
215
+ --syn-spacing-5x-large: 128px;
216
+ --syn-spacing-large: 24px;
217
+ --syn-spacing-medium: 16px;
218
+ --syn-spacing-medium-large: 20px;
219
+ --syn-spacing-small: 12px;
220
+ --syn-spacing-x-large: 32px;
221
+ --syn-spacing-x-small: 8px;
222
+ --syn-text-decoration-default: none;
223
+ --syn-text-decoration-underline: underline;
224
+ --syn-toggle-size-large: var(--syn-spacing-large);
225
+ --syn-toggle-size-medium: var(--syn-spacing-medium);
226
+ --syn-toggle-size-small: 14px;
227
+ --syn-tooltip-arrow-size: 9px;
228
+ --syn-tooltip-background-color: var(--syn-color-neutral-950);
229
+ --syn-tooltip-border-radius: var(--syn-border-radius-small);
230
+ --syn-tooltip-color: var(--syn-typography-color-text-inverted);
231
+ --syn-tooltip-font-family: var(--syn-font-sans);
232
+ --syn-tooltip-font-size: var(--syn-font-size-small);
233
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
234
+ --syn-tooltip-line-height: var(--syn-line-height-normal);
235
+ --syn-tooltip-padding: var(--syn-spacing-small);
236
+ --syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
237
+ --syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
238
+ --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
239
+ --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
240
+ --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
241
+ --syn-typography-color-text: var(--syn-color-neutral-950);
242
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
243
+ --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
244
+ --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
245
+ --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
246
+ --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
247
+ --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
248
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
249
+ --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
250
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
251
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
252
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
253
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
254
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
255
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
256
+ --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
257
+ --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
258
+ --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
259
+ --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
260
+ --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
261
+ --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
262
+ --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
263
+ --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
264
+ --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
265
+ --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
266
+ --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
267
+ --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
268
+ --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
269
+ --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
270
+ --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
271
+ --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
272
+ --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
273
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
274
+ }