@synergy-design-system/mcp 2.13.2 → 2.13.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/metadata/checksum.txt +1 -1
- package/metadata/packages/assets/CHANGELOG.md +8 -0
- package/metadata/packages/components/components/syn-option/component.styles.ts +104 -28
- package/metadata/packages/components/components/syn-option/component.ts +1 -2
- package/metadata/packages/components/static/CHANGELOG.md +25 -0
- package/metadata/packages/fonts/CHANGELOG.md +8 -0
- package/metadata/packages/fonts/package.json +2 -2
- package/metadata/packages/styles/CHANGELOG.md +11 -0
- package/metadata/packages/tokens/CHANGELOG.md +10 -0
- package/metadata/packages/tokens/dark.css +4 -4
- package/metadata/packages/tokens/index.js +1 -1
- package/metadata/packages/tokens/light.css +4 -4
- package/metadata/packages/tokens/sick2018_dark.css +5 -5
- package/metadata/packages/tokens/sick2018_light.css +5 -5
- package/metadata/packages/tokens/sick2025_dark.css +4 -4
- package/metadata/packages/tokens/sick2025_light.css +4 -4
- package/metadata/static/templates/forms.md +189 -0
- package/package.json +8 -8
- package/metadata/packages/components/components/syn-option/component.custom.styles.ts +0 -117
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.13.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
12
|
+
- @synergy-design-system/assets@2.0.3
|
|
13
|
+
|
|
14
|
+
## 2.13.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [#1228](https://github.com/synergy-design-system/synergy-design-system/pull/1228) [`0c5d176`](https://github.com/synergy-design-system/synergy-design-system/commit/0c5d1761ca6ef9d60714ec4010cd47665c2f7731) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-20
|
|
19
|
+
|
|
20
|
+
fix: 🐛 `<syn-option>` corner radius may look blurry or too sharp on low resolution screens (#1200)
|
|
21
|
+
|
|
22
|
+
This release fixes an issue with `<syn-option>` in combination with the SICK2025 theme.
|
|
23
|
+
When using this combination, the `border-radius` looked either blurry or too sharp on low resolution screens.
|
|
24
|
+
|
|
3
25
|
## 2.13.2
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/metadata/checksum.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
d1dbcb89316700587875bfb327172531
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
3
11
|
## 2.0.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,83 +1,159 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
3
|
export default css`
|
|
5
|
-
/* stylelint-disable */
|
|
6
4
|
:host {
|
|
7
5
|
display: block;
|
|
8
|
-
|
|
6
|
+
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
9
7
|
-webkit-user-select: none;
|
|
8
|
+
user-select: none;
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
:host(:focus) {
|
|
13
12
|
outline: none;
|
|
14
13
|
}
|
|
15
14
|
|
|
15
|
+
/**
|
|
16
|
+
* syn-option is now able to adjust its height from a parent item
|
|
17
|
+
* This is done by exposing multiple css variables to the outside:
|
|
18
|
+
*
|
|
19
|
+
* --option-min-height (defaults to 48px) The minimal height of an element
|
|
20
|
+
* --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
|
|
21
|
+
* --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
|
|
22
|
+
* --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
|
|
23
|
+
*
|
|
24
|
+
* See below for usage of these variables
|
|
25
|
+
*/
|
|
16
26
|
.option {
|
|
17
|
-
position: relative;
|
|
18
|
-
display: flex;
|
|
19
27
|
align-items: center;
|
|
28
|
+
|
|
29
|
+
/*
|
|
30
|
+
* #988: Brand2025 defines a small gap between options
|
|
31
|
+
* and rounded corners. We achieve that using an border
|
|
32
|
+
* that simulates the gap using the menu background color.
|
|
33
|
+
*/
|
|
34
|
+
border: solid var(--syn-panel-background-color);
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Border Radius needs to be increased to cover the outline
|
|
38
|
+
* Note this also needs to take the following into account:
|
|
39
|
+
* - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
|
|
40
|
+
* - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
|
|
41
|
+
*/
|
|
42
|
+
border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);
|
|
43
|
+
border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
|
|
44
|
+
color: var(--syn-color-neutral-700);
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: flex;
|
|
20
47
|
font-family: var(--syn-font-sans);
|
|
21
|
-
font-size: var(--syn-font-size-medium);
|
|
48
|
+
font-size: var(--option-font-size, var(--syn-font-size-medium));
|
|
22
49
|
font-weight: var(--syn-font-weight-normal);
|
|
23
|
-
line-height: var(--syn-line-height-normal);
|
|
24
50
|
letter-spacing: var(--syn-letter-spacing-normal);
|
|
25
|
-
|
|
26
|
-
|
|
51
|
+
line-height: var(--syn-line-height-normal);
|
|
52
|
+
|
|
53
|
+
/* Height is dependent on line-height of .option__label, which does not fit completely to layout */
|
|
54
|
+
min-height: var(--option-min-height, var(--syn-input-height-medium));
|
|
55
|
+
padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
|
|
56
|
+
position: relative;
|
|
27
57
|
transition: var(--syn-transition-fast) fill;
|
|
28
|
-
cursor: pointer;
|
|
29
58
|
}
|
|
30
59
|
|
|
31
|
-
.option
|
|
32
|
-
|
|
33
|
-
color: var(--syn-color-neutral-1000);
|
|
60
|
+
.option:not(.option--current) {
|
|
61
|
+
color: var(--syn-option-color);
|
|
34
62
|
}
|
|
35
63
|
|
|
36
64
|
.option--current,
|
|
37
|
-
.option--current.option--disabled {
|
|
38
|
-
background-color: var(--syn-color-
|
|
39
|
-
color: var(--syn-color-
|
|
40
|
-
|
|
65
|
+
.option--current.option--hover:not(.option--disabled) {
|
|
66
|
+
background-color: var(--syn-option-background-color-active);
|
|
67
|
+
color: var(--syn-option-color-active);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.option--hover:not(.option--current):not(.option--disabled) {
|
|
71
|
+
background-color: var(--syn-option-background-color-hover);
|
|
72
|
+
color: var(--syn-option-color-hover);
|
|
41
73
|
}
|
|
42
74
|
|
|
43
75
|
.option--disabled {
|
|
44
|
-
outline: none;
|
|
45
|
-
opacity: 0.5;
|
|
46
76
|
cursor: not-allowed;
|
|
77
|
+
opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
|
|
78
|
+
outline: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.option--current.option--disabled {
|
|
82
|
+
background-color: var(--syn-option-background-color-hover);
|
|
83
|
+
color: var(--syn-option-color-hover);
|
|
47
84
|
}
|
|
48
85
|
|
|
49
86
|
.option__label {
|
|
50
|
-
flex: 1 1 auto;
|
|
51
87
|
display: inline-block;
|
|
52
|
-
|
|
88
|
+
flex: 1 1 auto;
|
|
89
|
+
line-height: var(--syn-line-height-normal);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.option__check {
|
|
93
|
+
color: var(--syn-option-check-color);
|
|
94
|
+
font-size: var(--option-icon-size, var(--syn-spacing-large));
|
|
53
95
|
}
|
|
54
96
|
|
|
55
97
|
.option .option__check {
|
|
56
|
-
flex: 0 0 auto;
|
|
57
|
-
display: flex;
|
|
58
98
|
align-items: center;
|
|
99
|
+
display: flex;
|
|
100
|
+
flex: 0 0 auto;
|
|
59
101
|
justify-content: center;
|
|
102
|
+
padding-inline-end: var(--syn-spacing-small);
|
|
60
103
|
visibility: hidden;
|
|
61
|
-
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* Invert the check mark when keyboard navigation is used */
|
|
107
|
+
.option--current .option__check {
|
|
108
|
+
color: var(--syn-option-check-color-active);
|
|
62
109
|
}
|
|
63
110
|
|
|
64
111
|
.option--selected .option__check {
|
|
65
112
|
visibility: visible;
|
|
66
113
|
}
|
|
67
114
|
|
|
115
|
+
.option--hover:not(.option--current) .option__check {
|
|
116
|
+
color: var(--syn-option-check-color-hover);
|
|
117
|
+
}
|
|
118
|
+
|
|
68
119
|
.option__prefix,
|
|
69
120
|
.option__suffix {
|
|
70
|
-
flex: 0 0 auto;
|
|
71
|
-
display: flex;
|
|
72
121
|
align-items: center;
|
|
122
|
+
display: flex;
|
|
123
|
+
flex: 0 0 auto;
|
|
73
124
|
}
|
|
74
125
|
|
|
126
|
+
/* Use larger spacing between icons and content */
|
|
75
127
|
.option__prefix::slotted(*) {
|
|
76
|
-
margin-inline-end: var(--syn-spacing-
|
|
128
|
+
margin-inline-end: var(--syn-spacing-small);
|
|
77
129
|
}
|
|
78
130
|
|
|
79
131
|
.option__suffix::slotted(*) {
|
|
80
|
-
margin-inline-start: var(--syn-spacing-
|
|
132
|
+
margin-inline-start: var(--syn-spacing-small);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Set correct icon size when someone uses syn-icon in the slots */
|
|
136
|
+
.option__prefix::slotted(syn-icon),
|
|
137
|
+
.option__suffix::slotted(syn-icon) {
|
|
138
|
+
color: var(--syn-option-icon-color);
|
|
139
|
+
font-size: var(--option-icon-size, var(--syn-spacing-large));
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.option--hover .option__prefix::slotted(syn-icon),
|
|
143
|
+
.option--hover .option__suffix::slotted(syn-icon) {
|
|
144
|
+
color: var(--syn-option-icon-color-hover);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.option--current .option__prefix::slotted(syn-icon),
|
|
148
|
+
.option--current .option__suffix::slotted(syn-icon) {
|
|
149
|
+
color: var(--syn-option-icon-color-active);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* This is needed for the highlight styling of the options in syn-combobox */
|
|
153
|
+
.option__label::slotted(.syn-highlight-style) {
|
|
154
|
+
background-color: transparent;
|
|
155
|
+
color: unset;
|
|
156
|
+
font: var(--syn-body-medium-bold);
|
|
81
157
|
}
|
|
82
158
|
|
|
83
159
|
@media (forced-colors: active) {
|
|
@@ -8,7 +8,6 @@ import componentStyles from '../../styles/component.styles.js';
|
|
|
8
8
|
import SynergyElement from '../../internal/synergy-element.js';
|
|
9
9
|
import SynIcon from '../icon/icon.component.js';
|
|
10
10
|
import styles from './option.styles.js';
|
|
11
|
-
import customStyles from './option.custom.styles.js';
|
|
12
11
|
import { delimiterToWhiteSpace } from './utility.js';
|
|
13
12
|
import type { CSSResultGroup } from 'lit';
|
|
14
13
|
import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
|
|
@@ -33,7 +32,7 @@ import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator
|
|
|
33
32
|
*/
|
|
34
33
|
@enableDefaultSettings('SynOption')
|
|
35
34
|
export default class SynOption extends SynergyElement {
|
|
36
|
-
static styles: CSSResultGroup = [componentStyles, styles
|
|
35
|
+
static styles: CSSResultGroup = [componentStyles, styles];
|
|
37
36
|
static dependencies = { 'syn-icon': SynIcon };
|
|
38
37
|
|
|
39
38
|
// @ts-expect-error - Controller is currently unused
|
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.10.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
12
|
+
- @synergy-design-system/tokens@3.10.5
|
|
13
|
+
|
|
14
|
+
## 3.10.4
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [#1228](https://github.com/synergy-design-system/synergy-design-system/pull/1228) [`0c5d176`](https://github.com/synergy-design-system/synergy-design-system/commit/0c5d1761ca6ef9d60714ec4010cd47665c2f7731) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-20
|
|
19
|
+
|
|
20
|
+
fix: 🐛 `<syn-option>` corner radius may look blurry or too sharp on low resolution screens (#1200)
|
|
21
|
+
|
|
22
|
+
This release fixes an issue with `<syn-option>` in combination with the SICK2025 theme.
|
|
23
|
+
When using this combination, the `border-radius` looked either blurry or too sharp on low resolution screens.
|
|
24
|
+
|
|
25
|
+
- Updated dependencies []:
|
|
26
|
+
- @synergy-design-system/tokens@3.10.4
|
|
27
|
+
|
|
3
28
|
## 3.10.3
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
3
11
|
## 1.0.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"postcss-header": "^3.0.3",
|
|
14
14
|
"postcss-import": "^16.1.1",
|
|
15
15
|
"postcss-url": "^10.1.3",
|
|
16
|
-
"stylelint": "^17.
|
|
16
|
+
"stylelint": "^17.5.0"
|
|
17
17
|
},
|
|
18
18
|
"exports": {
|
|
19
19
|
".": {
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"lint": "pnpm run /^lint:.*/"
|
|
69
69
|
},
|
|
70
70
|
"type": "module",
|
|
71
|
-
"version": "1.0.
|
|
71
|
+
"version": "1.0.5"
|
|
72
72
|
}
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [[`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9)]:
|
|
12
|
+
- @synergy-design-system/tokens@3.10.5
|
|
13
|
+
|
|
3
14
|
## 2.0.2
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.10.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1246](https://github.com/synergy-design-system/synergy-design-system/pull/1246) [`5f0eb58`](https://github.com/synergy-design-system/synergy-design-system/commit/5f0eb58996be36571edf1764a7314f78bac96dd9) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-27
|
|
8
|
+
|
|
9
|
+
fix: 🐛 dependency updates (#258)
|
|
10
|
+
|
|
11
|
+
## 3.10.4
|
|
12
|
+
|
|
3
13
|
## 3.10.3
|
|
4
14
|
|
|
5
15
|
## 3.10.2
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-700);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-500);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
--syn-option-icon-color: var(--syn-typography-color-text);
|
|
350
350
|
--syn-option-icon-color-active: var(--syn-typography-color-text-inverted);
|
|
351
351
|
--syn-option-icon-color-hover: var(--syn-typography-color-text);
|
|
352
|
-
--syn-overlay-background-blur:
|
|
352
|
+
--syn-overlay-background-blur: 0;
|
|
353
353
|
--syn-overlay-background-color: rgba(49, 55, 58, 0.5);
|
|
354
354
|
--syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
|
|
355
355
|
--syn-page-background-color: var(--syn-color-neutral-0);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-color-neutral-500);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-400);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
--syn-option-icon-color: var(--syn-input-icon-color);
|
|
350
350
|
--syn-option-icon-color-active: var(--syn-color-neutral-0);
|
|
351
351
|
--syn-option-icon-color-hover: var(--syn-input-icon-color-hover);
|
|
352
|
-
--syn-overlay-background-blur:
|
|
352
|
+
--syn-overlay-background-blur: 0;
|
|
353
353
|
--syn-overlay-background-color: rgba(49, 55, 58, 0.5);
|
|
354
354
|
--syn-page-background: var(--syn-page-background-color); /** Will be DEPRECATED */
|
|
355
355
|
--syn-page-background-color: var(--syn-color-neutral-0);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-700);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 3.10.
|
|
2
|
+
* @synergy-design-system/tokens version 3.10.4
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly, this file was auto-generated.
|
|
5
5
|
*/
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
--syn-border-radius-circle: 9999px;
|
|
41
41
|
--syn-border-radius-large: 8px;
|
|
42
42
|
--syn-border-radius-medium: 8px;
|
|
43
|
-
--syn-border-radius-none:
|
|
43
|
+
--syn-border-radius-none: 0;
|
|
44
44
|
--syn-border-radius-pill: 9999px;
|
|
45
45
|
--syn-border-radius-small: 4px;
|
|
46
46
|
--syn-border-radius-x-large: 16px;
|
|
47
47
|
--syn-border-width-large: 3px; /** Large */
|
|
48
48
|
--syn-border-width-medium: 2px; /** Medium */
|
|
49
|
-
--syn-border-width-none:
|
|
49
|
+
--syn-border-width-none: 0; /** None */
|
|
50
50
|
--syn-border-width-small: 1px; /** Small */
|
|
51
51
|
--syn-border-width-x-large: 4px; /** X Large */
|
|
52
52
|
--syn-breadcrumb-color: var(--syn-typography-color-text);
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
--syn-input-disabled-opacity: 0.5;
|
|
260
260
|
--syn-input-focus-ring-color: var(--syn-color-primary-500);
|
|
261
261
|
--syn-input-focus-ring-error: var(--syn-color-error-600);
|
|
262
|
-
--syn-input-focus-ring-offset:
|
|
262
|
+
--syn-input-focus-ring-offset: 0;
|
|
263
263
|
--syn-input-font-family: var(--syn-font-sans);
|
|
264
264
|
--syn-input-font-size-large: var(--syn-font-size-large);
|
|
265
265
|
--syn-input-font-size-medium: var(--syn-font-size-medium);
|
|
@@ -367,3 +367,192 @@
|
|
|
367
367
|
</form>
|
|
368
368
|
</div>
|
|
369
369
|
```
|
|
370
|
+
|
|
371
|
+
---
|
|
372
|
+
|
|
373
|
+
## Multiple Files Upload Form
|
|
374
|
+
|
|
375
|
+
```html
|
|
376
|
+
<div class="synergy-upload-form-demo">
|
|
377
|
+
<h1>Multiple files upload</h1>
|
|
378
|
+
<form
|
|
379
|
+
enctype="multipart/form-data"
|
|
380
|
+
method="post"
|
|
381
|
+
id="upload-multiple-form-docs"
|
|
382
|
+
>
|
|
383
|
+
<syn-file
|
|
384
|
+
droparea=""
|
|
385
|
+
name="files"
|
|
386
|
+
multiple=""
|
|
387
|
+
label="Select Files"
|
|
388
|
+
help-text="Max file size is 500kb. Supported file types are .jgp, .png and .pdf"
|
|
389
|
+
size="medium"
|
|
390
|
+
form=""
|
|
391
|
+
></syn-file>
|
|
392
|
+
|
|
393
|
+
<!-- File list: hidden until files are selected -->
|
|
394
|
+
<ul class="uploaded-files">
|
|
395
|
+
<li class="entry-uploading">
|
|
396
|
+
<em>image.png</em
|
|
397
|
+
><span class="uploaded-files--status"><syn-spinner></syn-spinner></span
|
|
398
|
+
><syn-divider
|
|
399
|
+
role="separator"
|
|
400
|
+
aria-orientation="horizontal"
|
|
401
|
+
></syn-divider>
|
|
402
|
+
</li>
|
|
403
|
+
<li class="entry-success">
|
|
404
|
+
<em>file-name</em
|
|
405
|
+
><span class="uploaded-files--status"
|
|
406
|
+
><syn-icon-button
|
|
407
|
+
library="system"
|
|
408
|
+
size="medium"
|
|
409
|
+
name="status-success"
|
|
410
|
+
label="Upload successful"
|
|
411
|
+
tabindex="-1"
|
|
412
|
+
color="currentColor"
|
|
413
|
+
></syn-icon-button></span
|
|
414
|
+
><syn-divider
|
|
415
|
+
role="separator"
|
|
416
|
+
aria-orientation="horizontal"
|
|
417
|
+
></syn-divider>
|
|
418
|
+
</li>
|
|
419
|
+
<li class="entry-queued">
|
|
420
|
+
<em>file-name</em
|
|
421
|
+
><span class="uploaded-files--status"
|
|
422
|
+
><syn-icon-button
|
|
423
|
+
library="system"
|
|
424
|
+
size="medium"
|
|
425
|
+
name="x-lg"
|
|
426
|
+
label="Cancel upload"
|
|
427
|
+
color="currentColor"
|
|
428
|
+
></syn-icon-button></span
|
|
429
|
+
><syn-divider
|
|
430
|
+
role="separator"
|
|
431
|
+
aria-orientation="horizontal"
|
|
432
|
+
></syn-divider>
|
|
433
|
+
</li>
|
|
434
|
+
<li class="entry-queued">
|
|
435
|
+
<em
|
|
436
|
+
>file-name-large<span class="uploaded-files--help-text"
|
|
437
|
+
>File exceeds size limit.</span
|
|
438
|
+
></em
|
|
439
|
+
><span class="uploaded-files--status"
|
|
440
|
+
><syn-icon-button
|
|
441
|
+
library="system"
|
|
442
|
+
size="medium"
|
|
443
|
+
name="x-lg"
|
|
444
|
+
label="Cancel upload"
|
|
445
|
+
color="currentColor"
|
|
446
|
+
></syn-icon-button></span
|
|
447
|
+
><syn-divider
|
|
448
|
+
role="separator"
|
|
449
|
+
aria-orientation="horizontal"
|
|
450
|
+
></syn-divider>
|
|
451
|
+
</li>
|
|
452
|
+
</ul>
|
|
453
|
+
|
|
454
|
+
<div class="submit-actions">
|
|
455
|
+
<syn-button type="submit" variant="filled" title="" size="medium"
|
|
456
|
+
>Upload</syn-button
|
|
457
|
+
>
|
|
458
|
+
</div>
|
|
459
|
+
</form>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<style>
|
|
463
|
+
.synergy-upload-form-demo {
|
|
464
|
+
background: var(--syn-color-neutral-0);
|
|
465
|
+
margin: 0 auto;
|
|
466
|
+
padding: var(--syn-spacing-x-large);
|
|
467
|
+
max-width: 750px;
|
|
468
|
+
|
|
469
|
+
form {
|
|
470
|
+
display: flex;
|
|
471
|
+
flex-direction: column;
|
|
472
|
+
gap: var(--syn-spacing-medium);
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
h1 {
|
|
477
|
+
font-size: var(--syn-font-size-3x-large);
|
|
478
|
+
font-weight: var(--syn-font-weight-bold);
|
|
479
|
+
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.uploaded-files {
|
|
483
|
+
display: flex;
|
|
484
|
+
flex-direction: column;
|
|
485
|
+
list-style: none;
|
|
486
|
+
padding: 0;
|
|
487
|
+
|
|
488
|
+
li {
|
|
489
|
+
--indicator-color: var(--syn-input-icon-icon-clearable-color);
|
|
490
|
+
|
|
491
|
+
align-items: center;
|
|
492
|
+
box-sizing: border-box;
|
|
493
|
+
display: flex;
|
|
494
|
+
flex-direction: row;
|
|
495
|
+
flex-wrap: wrap;
|
|
496
|
+
padding: var(--syn-spacing-small) 0;
|
|
497
|
+
font: var(--syn-body-medium-regular);
|
|
498
|
+
gap: var(--syn-spacing-small);
|
|
499
|
+
min-height: 50px;
|
|
500
|
+
position: relative;
|
|
501
|
+
|
|
502
|
+
&.entry-success {
|
|
503
|
+
--indicator-color: var(--syn-namur-success-color);
|
|
504
|
+
|
|
505
|
+
pointer-events: none;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
em {
|
|
509
|
+
font: var(--syn-body-medium-regular);
|
|
510
|
+
font-style: normal;
|
|
511
|
+
flex: 1;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.uploaded-files--status {
|
|
515
|
+
color: var(--indicator-color);
|
|
516
|
+
text-align: end;
|
|
517
|
+
width: var(--syn-spacing-large);
|
|
518
|
+
font-size: var(--syn-font-size-large);
|
|
519
|
+
position: absolute;
|
|
520
|
+
right: 0;
|
|
521
|
+
top: var(--syn-spacing-small);
|
|
522
|
+
|
|
523
|
+
syn-icon-button {
|
|
524
|
+
&::part(base) {
|
|
525
|
+
font-size: var(--syn-spacing-large);
|
|
526
|
+
padding: 0;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.uploaded-files--help-text {
|
|
532
|
+
color: var(--syn-input-border-color-focus-error);
|
|
533
|
+
display: block;
|
|
534
|
+
font: var(--syn-body-small-regular);
|
|
535
|
+
margin: var(--syn-spacing-x-small) 0;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
/* Spinner surface is slightly larger as buttons have some padding applied */
|
|
539
|
+
.uploaded-files--status:has(syn-spinner) {
|
|
540
|
+
right: 2px;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
syn-divider {
|
|
544
|
+
width: 100%;
|
|
545
|
+
margin: 0;
|
|
546
|
+
position: absolute;
|
|
547
|
+
bottom: 0;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.submit-actions {
|
|
553
|
+
display: flex;
|
|
554
|
+
justify-content: right;
|
|
555
|
+
margin-top: var(--syn-spacing-2x-large);
|
|
556
|
+
}
|
|
557
|
+
</style>
|
|
558
|
+
```
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
11
11
|
"globby": "^16.1.1",
|
|
12
12
|
"zod": "^4.3.6",
|
|
13
|
-
"@synergy-design-system/assets": "2.0.
|
|
13
|
+
"@synergy-design-system/assets": "2.0.3"
|
|
14
14
|
},
|
|
15
15
|
"description": "MCP Server for the Synergy Design System",
|
|
16
16
|
"devDependencies": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"change-case": "^5.4.4",
|
|
21
21
|
"custom-elements-manifest": "^2.1.0",
|
|
22
22
|
"eslint": "^9.39.4",
|
|
23
|
-
"jest": "^30.
|
|
23
|
+
"jest": "^30.3.0",
|
|
24
24
|
"ora": "^9.3.0",
|
|
25
25
|
"playwright": "^1.58.2",
|
|
26
26
|
"prettier": "^3.8.1",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"serve-handler": "^6.1.7",
|
|
29
29
|
"ts-jest": "^29.4.6",
|
|
30
30
|
"typescript": "^5.9.3",
|
|
31
|
-
"@synergy-design-system/docs": "0.1.0",
|
|
32
31
|
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
33
|
-
"@synergy-design-system/components": "3.10.
|
|
34
|
-
"@synergy-design-system/
|
|
35
|
-
"@synergy-design-system/
|
|
36
|
-
"@synergy-design-system/
|
|
32
|
+
"@synergy-design-system/components": "3.10.5",
|
|
33
|
+
"@synergy-design-system/tokens": "^3.10.5",
|
|
34
|
+
"@synergy-design-system/fonts": "1.0.5",
|
|
35
|
+
"@synergy-design-system/docs": "0.1.0",
|
|
36
|
+
"@synergy-design-system/styles": "2.0.3"
|
|
37
37
|
},
|
|
38
38
|
"exports": {
|
|
39
39
|
".": {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"directory": "packages/mcp"
|
|
68
68
|
},
|
|
69
69
|
"type": "module",
|
|
70
|
-
"version": "2.13.
|
|
70
|
+
"version": "2.13.4",
|
|
71
71
|
"scripts": {
|
|
72
72
|
"build": "pnpm run build:ts && pnpm run build:metadata && pnpm build:hash",
|
|
73
73
|
"build:all": "pnpm run build && pnpm run build:storybook",
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
|
|
3
|
-
export default css`
|
|
4
|
-
/**
|
|
5
|
-
* The syn-option is now able to adjust its height from a parent item
|
|
6
|
-
* This is done by exposing multiple css variables to the outside:
|
|
7
|
-
*
|
|
8
|
-
* --option-min-height (defaults to 48px) The minimal height of an element
|
|
9
|
-
* --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
|
|
10
|
-
* --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
|
|
11
|
-
* --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
|
|
12
|
-
*
|
|
13
|
-
* See below for usage of these variables
|
|
14
|
-
*/
|
|
15
|
-
.option {
|
|
16
|
-
/*
|
|
17
|
-
* #988: Brand2025 defines a small gap between options
|
|
18
|
-
* and rounded corners. We achieve that using an border
|
|
19
|
-
* that simulates the gap using the menu background color.
|
|
20
|
-
*/
|
|
21
|
-
border: solid var(--syn-panel-background-color);
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Border Radius needs to be increased to cover the outline
|
|
25
|
-
* Note this also needs to take the following into account:
|
|
26
|
-
* - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
|
|
27
|
-
* - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
|
|
28
|
-
*/
|
|
29
|
-
border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);
|
|
30
|
-
border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
|
|
31
|
-
font-size: var(--option-font-size, var(--syn-font-size-medium));
|
|
32
|
-
|
|
33
|
-
/* Height is dependent on line-height of .option__label, which does not fit completely to layout */
|
|
34
|
-
min-height: var(--option-min-height, var(--syn-input-height-medium));
|
|
35
|
-
padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.option:not(.option--current) {
|
|
39
|
-
color: var(--syn-option-color);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.option--current,
|
|
43
|
-
.option--current.option--hover:not(.option--disabled) {
|
|
44
|
-
background-color: var(--syn-option-background-color-active);
|
|
45
|
-
color: var(--syn-option-color-active);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.option--hover:not(.option--current):not(.option--disabled) {
|
|
49
|
-
background-color: var(--syn-option-background-color-hover);
|
|
50
|
-
color: var(--syn-option-color-hover);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/** #429: Use token for opacity */
|
|
54
|
-
.option--disabled {
|
|
55
|
-
opacity: var(--syn-input-disabled-opacity);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.option--current.option--disabled {
|
|
59
|
-
background-color: var(--syn-option-background-color-hover);
|
|
60
|
-
color: var(--syn-option-color-hover);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.option__label {
|
|
64
|
-
line-height: var(--syn-line-height-normal);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.option__check {
|
|
68
|
-
color: var(--syn-option-check-color);
|
|
69
|
-
font-size: var(--option-icon-size, var(--syn-spacing-large));
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.option .option__check {
|
|
73
|
-
padding-inline-end: var(--syn-spacing-small);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/* Invert the check mark when keyboard navigation is used */
|
|
77
|
-
.option--current .option__check {
|
|
78
|
-
color: var(--syn-option-check-color-active);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.option--hover:not(.option--current) .option__check {
|
|
82
|
-
color: var(--syn-option-check-color-hover);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* Use larger spacing between icons and content */
|
|
86
|
-
.option__prefix::slotted(*) {
|
|
87
|
-
margin-inline-end: var(--syn-spacing-small);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.option__suffix::slotted(*) {
|
|
91
|
-
margin-inline-start: var(--syn-spacing-small);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* Set correct icon size when someone uses syn-icon in the slots */
|
|
95
|
-
.option__prefix::slotted(syn-icon),
|
|
96
|
-
.option__suffix::slotted(syn-icon) {
|
|
97
|
-
color: var(--syn-option-icon-color);
|
|
98
|
-
font-size: var(--option-icon-size, var(--syn-spacing-large));
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.option--hover .option__prefix::slotted(syn-icon),
|
|
102
|
-
.option--hover .option__suffix::slotted(syn-icon) {
|
|
103
|
-
color: var(--syn-option-icon-color-hover);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.option--current .option__prefix::slotted(syn-icon),
|
|
107
|
-
.option--current .option__suffix::slotted(syn-icon) {
|
|
108
|
-
color: var(--syn-option-icon-color-active);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/* This is needed for the highlight styling of the options in syn-combobox */
|
|
112
|
-
.option__label::slotted(.syn-highlight-style) {
|
|
113
|
-
background-color: transparent;
|
|
114
|
-
color: unset;
|
|
115
|
-
font: var(--syn-body-medium-bold);
|
|
116
|
-
}
|
|
117
|
-
`;
|