@synergy-design-system/mcp 1.1.0 → 1.2.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 (15) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/metadata/checksum.txt +1 -1
  3. package/metadata/packages/components/migration/migration-synergy-v3.md +95 -1
  4. package/metadata/packages/tokens/CHANGELOG.md +7 -0
  5. package/metadata/packages/tokens/README.md +40 -17
  6. package/metadata/packages/tokens/dark.css +5 -5
  7. package/metadata/packages/tokens/light.css +5 -5
  8. package/metadata/packages/tokens/sick2018_dark.css +268 -0
  9. package/metadata/packages/tokens/sick2018_light.css +268 -0
  10. package/metadata/packages/tokens/sick2025_dark.css +268 -0
  11. package/metadata/packages/tokens/sick2025_light.css +268 -0
  12. package/metadata/static/components/syn-dialog/docs.md +1 -3
  13. package/metadata/static/components/syn-drawer/docs.md +1 -3
  14. package/metadata/static/setup/icon-usage.md +136 -1
  15. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/mcp-v1.2.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.1.0...mcp/1.2.0) (2025-08-19)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ 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))
7
+
1
8
  # Changelog
2
9
 
3
10
  # [@synergy-design-system/mcp-v1.1.0](https://github.com/synergy-design-system/synergy-design-system/compare/mcp/1.0.0...mcp/1.1.0) (2025-08-08)
package/metadata/checksum.txt CHANGED
@@ -1 +1 @@
1
- 8100ce028a0fb7f45f1ca769f98c0007
1
+ 0eb8e8ab1e1e86521a59e32b35d7e39e
package/metadata/packages/components/migration/migration-synergy-v3.md CHANGED
@@ -9,7 +9,7 @@ This document outlines the changes and migration steps required to upgrade from
9
9
  We are currently working on the migration to Synergy 3.0, which includes significant updates to the brand appearance, fonts and icon library.
10
10
  This migration will ensure that your application remains up-to-date with the latest design standards and functionality improvements.
11
11
 
12
- It is currently not adviced to use the new version in production, as we are still finalizing the migration process.
12
+ It is currently not advised to use the new version in production, as we are still finalizing the migration process.
13
13
  However, you can start preparing your codebase for the upcoming changes.
14
14
 
15
15
  A roadmap and current status of the migration can be found in our [GitHub repository](https://github.com/orgs/synergy-design-system/projects/2/views/37).
@@ -41,6 +41,98 @@ import { setSystemIconLibrary } from "@synergy-design-system/icons";
41
41
  setSystemIconLibrary("sick2025");
42
42
  ```
43
43
 
44
+ #### New SICK 2025 icons
45
+
46
+ The new SICK 2025 theme comes with an updated icon library that includes both outline and filled versions of icons. These icons are available in the `@synergy-design-system/assets` package and can be used with the `<syn-icon>` or `<syn-icon-button>` component.
47
+
48
+ The new icon library provides two main styles:
49
+
50
+ - **Outline icons**: These are the standard outlined icons, which are the default
51
+ - **Filled icons**: These are filled versions of the same icons. The icons have the same name as the outline icons but with a suffix of `_fill`
52
+
53
+ To use the new SICK 2025 icons in your application, you have several options:
54
+
55
+ The outline and fill version can be used simultaneously.
56
+
57
+ ```html
58
+ <!-- Outline version -->
59
+ <syn-icon name="home"></syn-icon>
60
+
61
+ <!-- Filled version -->
62
+ <syn-icon name="home_fill"></syn-icon>
63
+ ```
64
+
65
+ ```javascript
66
+ // Example vite config
67
+ import { defineConfig } from "vite";
68
+ import { viteStaticCopy } from "vite-plugin-static-copy";
69
+
70
+ export default defineConfig({
71
+ plugins: [
72
+ viteStaticCopy({
73
+ targets: [
74
+ {
75
+ src: "node_modules/@synergy-design-system/assets/src/sick2025/outline/*",
76
+ dest: "./assets/icons/",
77
+ },
78
+ {
79
+ src: "node_modules/@synergy-design-system/assets/src/sick2025/fill/*",
80
+ dest: "./assets/icons/",
81
+ },
82
+ ],
83
+ }),
84
+ ],
85
+ });
86
+ ```
87
+
88
+ ### Tokens
89
+
90
+ Synergy 3.0 introduces new CSS theme files that implement the updated SICK brand appearance:
91
+
92
+ - **`sick2025_light.css`**: The new light theme featuring the SICK 2025 brand identity
93
+ - **`sick2025_dark.css`**: The new dark theme featuring the SICK 2025 brand identity
94
+
95
+ These new themes include significant visual changes compared to the existing themes e.g. changed colors and new color palettes, components with roundings, new font etc.
96
+
97
+ We added new css class selectors, so it is easy to switch between different themes.
98
+
99
+ - SICK 2018 light theme: `.syn-sick2018-light`
100
+ - SICK 2018 dark theme: `.syn-sick2018-dark`
101
+ - SICK 2025 light theme: `.syn-sick2025-light`
102
+ - SICK 2025 dark theme: `.syn-sick2025-dark`
103
+
104
+ To use the new themes in your application:
105
+
106
+ 1. **Replace theme imports** in your HTML or CSS:
107
+
108
+ ```javascript
109
+ // New Synergy 3.0 themes
110
+ import "@synergy-design-system/tokens/themes/sick2025_light.css";
111
+ import "@synergy-design-system/tokens/themes/sick2025_dark.css";
112
+ ```
113
+
114
+ 2. **Update theme switching logic** if you support runtime theme changes:
115
+
116
+ ```javascript
117
+ // Rename the class names for theme switching
118
+ const switchTheme = () => {
119
+ const { body } = document;
120
+ const currentTheme = body.classList.contains("syn-sick2025-dark")
121
+ ? "dark"
122
+ : "light";
123
+
124
+ if (currentTheme === "light") {
125
+ // Light theme
126
+ body.classList.remove("syn-sick2025-light");
127
+ body.classList.add("syn-sick2025-dark");
128
+ } else {
129
+ // Dark theme
130
+ body.classList.remove("syn-sick2025-dark");
131
+ body.classList.add("syn-sick2025-light");
132
+ }
133
+ };
134
+ ```
135
+
44
136
  ## Migration Steps
45
137
 
46
138
  These steps are only needed when switching to the new Synergy 3.0 layout.
@@ -48,3 +140,5 @@ These steps are only needed when switching to the new Synergy 3.0 layout.
48
140
  1. Always make sure to use the latest versions of the Synergy packages. You can check for updates using your package manager.
49
141
  2. Call `setSystemIconLibrary` with `sick2025` to enable the new system icons.
50
142
  3. Adjust your bundler to copy the new icons to your build output. This is necessary to ensure that the new icons are available in your application.
143
+ 4. **Update CSS theme imports** to use the new `sick2025_light.css` and `sick2025_dark.css` files instead of the legacy theme files.
144
+ 5. **Update theme class names** in your JavaScript theme switching logic to use `syn-sick2025-light` and `syn-sick2025-dark`.
package/metadata/packages/tokens/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@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)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨ 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))
7
+
1
8
  # [@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
9
 
3
10
 
package/metadata/packages/tokens/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/metadata/packages/tokens/dark.css CHANGED
@@ -4,7 +4,7 @@
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;
@@ -242,10 +242,10 @@
242
242
  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
243
  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
244
  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** 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 */
245
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
246
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
247
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
248
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
249
  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
250
  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
251
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/light.css CHANGED
@@ -4,7 +4,7 @@
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;
@@ -242,10 +242,10 @@
242
242
  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
243
  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
244
  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
- --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16); /** 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 */
245
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
246
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
247
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
248
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
249
  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
250
  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
251
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/metadata/packages/tokens/sick2018_dark.css ADDED
@@ -0,0 +1,268 @@
1
+ /**
2
+ * @synergy-design-system/tokens version 2.22.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-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
183
+ --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
184
+ --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
185
+ --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
186
+ --syn-letter-spacing-normal: normal;
187
+ --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
188
+ --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
189
+ --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
190
+ --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
191
+ --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
192
+ --syn-link-color: var(--syn-color-primary-600);
193
+ --syn-link-color-active: var(--syn-color-primary-950);
194
+ --syn-link-color-hover: var(--syn-color-primary-900);
195
+ --syn-link-quiet-color: var(--syn-typography-color-text);
196
+ --syn-link-quiet-color-active: var(--syn-color-primary-950);
197
+ --syn-link-quiet-color-hover: var(--syn-color-primary-900);
198
+ --syn-opacity-50: 0.5; /** 50% */
199
+ --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
200
+ --syn-panel-background-color: var(--syn-color-neutral-0);
201
+ --syn-panel-border-color: var(--syn-color-neutral-300);
202
+ --syn-panel-border-width: var(--syn-border-width-small);
203
+ --syn-spacing-2x-large: 48px;
204
+ --syn-spacing-2x-small: 4px;
205
+ --syn-spacing-3x-large: 64px;
206
+ --syn-spacing-3x-small: 2px;
207
+ --syn-spacing-4x-large: 96px;
208
+ --syn-spacing-4x-small: 1px;
209
+ --syn-spacing-5x-large: 128px;
210
+ --syn-spacing-large: 24px;
211
+ --syn-spacing-medium: 16px;
212
+ --syn-spacing-medium-large: 20px;
213
+ --syn-spacing-small: 12px;
214
+ --syn-spacing-x-large: 32px;
215
+ --syn-spacing-x-small: 8px;
216
+ --syn-text-decoration-default: none;
217
+ --syn-text-decoration-underline: underline;
218
+ --syn-toggle-size-large: var(--syn-spacing-large);
219
+ --syn-toggle-size-medium: var(--syn-spacing-medium);
220
+ --syn-toggle-size-small: 14px;
221
+ --syn-tooltip-arrow-size: 9px;
222
+ --syn-tooltip-background-color: var(--syn-color-neutral-950);
223
+ --syn-tooltip-border-radius: var(--syn-border-radius-small);
224
+ --syn-tooltip-color: var(--syn-typography-color-text-inverted);
225
+ --syn-tooltip-font-family: var(--syn-font-sans);
226
+ --syn-tooltip-font-size: var(--syn-font-size-small);
227
+ --syn-tooltip-font-weight: var(--syn-font-weight-normal);
228
+ --syn-tooltip-line-height: var(--syn-line-height-normal);
229
+ --syn-tooltip-padding: var(--syn-spacing-small);
230
+ --syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
231
+ --syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
232
+ --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
233
+ --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
234
+ --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
235
+ --syn-typography-color-text: var(--syn-color-neutral-950);
236
+ --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
237
+ --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
238
+ --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
239
+ --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
240
+ --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
241
+ --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
242
+ --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
243
+ --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
244
+ --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
245
+ --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
246
+ --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
247
+ --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
248
+ --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
249
+ --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
250
+ --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
251
+ --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
252
+ --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
253
+ --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
254
+ --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';
255
+ --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';
256
+ --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';
257
+ --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';
258
+ --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';
259
+ --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';
260
+ --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';
261
+ --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';
262
+ --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';
263
+ --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';
264
+ --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
265
+ --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
266
+ --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
267
+ --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
268
+ }