@synergy-design-system/mcp 2.13.2 → 2.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/metadata/checksum.txt +1 -1
- 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 +14 -0
- package/metadata/packages/tokens/CHANGELOG.md +2 -0
- package/metadata/packages/tokens/dark.css +1 -1
- package/metadata/packages/tokens/index.js +1 -1
- package/metadata/packages/tokens/light.css +1 -1
- package/metadata/packages/tokens/sick2018_dark.css +1 -1
- package/metadata/packages/tokens/sick2018_light.css +1 -1
- package/metadata/packages/tokens/sick2025_dark.css +1 -1
- package/metadata/packages/tokens/sick2025_light.css +1 -1
- package/package.json +4 -4
- package/metadata/packages/components/components/syn-option/component.custom.styles.ts +0 -117
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.13.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#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
|
|
8
|
+
|
|
9
|
+
fix: 🐛 `<syn-option>` corner radius may look blurry or too sharp on low resolution screens (#1200)
|
|
10
|
+
|
|
11
|
+
This release fixes an issue with `<syn-option>` in combination with the SICK2025 theme.
|
|
12
|
+
When using this combination, the `border-radius` looked either blurry or too sharp on low resolution screens.
|
|
13
|
+
|
|
3
14
|
## 2.13.2
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
package/metadata/checksum.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
82e7e641d6c1bf9232df101fcc9a802c
|
|
@@ -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,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.10.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#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
|
|
8
|
+
|
|
9
|
+
fix: 🐛 `<syn-option>` corner radius may look blurry or too sharp on low resolution screens (#1200)
|
|
10
|
+
|
|
11
|
+
This release fixes an issue with `<syn-option>` in combination with the SICK2025 theme.
|
|
12
|
+
When using this combination, the `border-radius` looked either blurry or too sharp on low resolution screens.
|
|
13
|
+
|
|
14
|
+
- Updated dependencies []:
|
|
15
|
+
- @synergy-design-system/tokens@3.10.4
|
|
16
|
+
|
|
3
17
|
## 3.10.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -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/components": "3.10.4",
|
|
31
32
|
"@synergy-design-system/docs": "0.1.0",
|
|
32
33
|
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
33
|
-
"@synergy-design-system/components": "3.10.3",
|
|
34
|
-
"@synergy-design-system/fonts": "1.0.4",
|
|
35
34
|
"@synergy-design-system/styles": "2.0.2",
|
|
36
|
-
"@synergy-design-system/
|
|
35
|
+
"@synergy-design-system/fonts": "1.0.4",
|
|
36
|
+
"@synergy-design-system/tokens": "^3.10.4"
|
|
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.3",
|
|
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
|
-
`;
|