@synergy-design-system/tokens 2.36.0 → 2.37.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [@synergy-design-system/tokens-v2.37.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.36.0...tokens/2.37.0) (2025-11-03)
2
+
3
+
4
+ ### Features
5
+
6
+ * ✨CD update for syn-alert ([#1064](https://github.com/synergy-design-system/synergy-design-system/issues/1064)) ([f9c0656](https://github.com/synergy-design-system/synergy-design-system/commit/f9c0656a268a71ea676ed0b937d8ca77cca2c924))
7
+
1
8
  # [@synergy-design-system/tokens-v2.36.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/2.35.0...tokens/2.36.0) (2025-10-29)
2
9
 
3
10
 
@@ -1,8 +1,108 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
+ /**
7
+ * Maps to the css variable `--syn-alert-error-color-background`
8
+ */
9
+ export const SynAlertErrorColorBackground: string;
10
+
11
+ /**
12
+ * Maps to the css variable `--syn-alert-error-color-border`
13
+ */
14
+ export const SynAlertErrorColorBorder: string;
15
+
16
+ /**
17
+ * Maps to the css variable `--syn-alert-error-color-icon`
18
+ */
19
+ export const SynAlertErrorColorIcon: string;
20
+
21
+ /**
22
+ * Maps to the css variable `--syn-alert-error-color-indicator`
23
+ */
24
+ export const SynAlertErrorColorIndicator: string;
25
+
26
+ /**
27
+ * Maps to the css variable `--syn-alert-informative-color-background`
28
+ */
29
+ export const SynAlertInformativeColorBackground: string;
30
+
31
+ /**
32
+ * Maps to the css variable `--syn-alert-informative-color-border`
33
+ */
34
+ export const SynAlertInformativeColorBorder: string;
35
+
36
+ /**
37
+ * Maps to the css variable `--syn-alert-informative-color-icon`
38
+ */
39
+ export const SynAlertInformativeColorIcon: string;
40
+
41
+ /**
42
+ * Maps to the css variable `--syn-alert-informative-color-indicator`
43
+ */
44
+ export const SynAlertInformativeColorIndicator: string;
45
+
46
+ /**
47
+ * Maps to the css variable `--syn-alert-neutral-color-background`
48
+ */
49
+ export const SynAlertNeutralColorBackground: string;
50
+
51
+ /**
52
+ * Maps to the css variable `--syn-alert-neutral-color-border`
53
+ */
54
+ export const SynAlertNeutralColorBorder: string;
55
+
56
+ /**
57
+ * Maps to the css variable `--syn-alert-neutral-color-icon`
58
+ */
59
+ export const SynAlertNeutralColorIcon: string;
60
+
61
+ /**
62
+ * Maps to the css variable `--syn-alert-neutral-color-indicator`
63
+ */
64
+ export const SynAlertNeutralColorIndicator: string;
65
+
66
+ /**
67
+ * Maps to the css variable `--syn-alert-success-color-background`
68
+ */
69
+ export const SynAlertSuccessColorBackground: string;
70
+
71
+ /**
72
+ * Maps to the css variable `--syn-alert-success-color-border`
73
+ */
74
+ export const SynAlertSuccessColorBorder: string;
75
+
76
+ /**
77
+ * Maps to the css variable `--syn-alert-success-color-icon`
78
+ */
79
+ export const SynAlertSuccessColorIcon: string;
80
+
81
+ /**
82
+ * Maps to the css variable `--syn-alert-success-color-indicator`
83
+ */
84
+ export const SynAlertSuccessColorIndicator: string;
85
+
86
+ /**
87
+ * Maps to the css variable `--syn-alert-warning-color-background`
88
+ */
89
+ export const SynAlertWarningColorBackground: string;
90
+
91
+ /**
92
+ * Maps to the css variable `--syn-alert-warning-color-border`
93
+ */
94
+ export const SynAlertWarningColorBorder: string;
95
+
96
+ /**
97
+ * Maps to the css variable `--syn-alert-warning-color-icon`
98
+ */
99
+ export const SynAlertWarningColorIcon: string;
100
+
101
+ /**
102
+ * Maps to the css variable `--syn-alert-warning-color-indicator`
103
+ */
104
+ export const SynAlertWarningColorIndicator: string;
105
+
6
106
  /**
7
107
  * Maps to the css variable `--syn-badge-error-color-background`
8
108
  */
package/dist/js/index.js CHANGED
@@ -1,8 +1,108 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
6
+ /**
7
+ * @type {string}
8
+ */
9
+ export const SynAlertErrorColorBackground = 'var(--syn-alert-error-color-background)';
10
+
11
+ /**
12
+ * @type {string}
13
+ */
14
+ export const SynAlertErrorColorBorder = 'var(--syn-alert-error-color-border)';
15
+
16
+ /**
17
+ * @type {string}
18
+ */
19
+ export const SynAlertErrorColorIcon = 'var(--syn-alert-error-color-icon)';
20
+
21
+ /**
22
+ * @type {string}
23
+ */
24
+ export const SynAlertErrorColorIndicator = 'var(--syn-alert-error-color-indicator)';
25
+
26
+ /**
27
+ * @type {string}
28
+ */
29
+ export const SynAlertInformativeColorBackground = 'var(--syn-alert-informative-color-background)';
30
+
31
+ /**
32
+ * @type {string}
33
+ */
34
+ export const SynAlertInformativeColorBorder = 'var(--syn-alert-informative-color-border)';
35
+
36
+ /**
37
+ * @type {string}
38
+ */
39
+ export const SynAlertInformativeColorIcon = 'var(--syn-alert-informative-color-icon)';
40
+
41
+ /**
42
+ * @type {string}
43
+ */
44
+ export const SynAlertInformativeColorIndicator = 'var(--syn-alert-informative-color-indicator)';
45
+
46
+ /**
47
+ * @type {string}
48
+ */
49
+ export const SynAlertNeutralColorBackground = 'var(--syn-alert-neutral-color-background)';
50
+
51
+ /**
52
+ * @type {string}
53
+ */
54
+ export const SynAlertNeutralColorBorder = 'var(--syn-alert-neutral-color-border)';
55
+
56
+ /**
57
+ * @type {string}
58
+ */
59
+ export const SynAlertNeutralColorIcon = 'var(--syn-alert-neutral-color-icon)';
60
+
61
+ /**
62
+ * @type {string}
63
+ */
64
+ export const SynAlertNeutralColorIndicator = 'var(--syn-alert-neutral-color-indicator)';
65
+
66
+ /**
67
+ * @type {string}
68
+ */
69
+ export const SynAlertSuccessColorBackground = 'var(--syn-alert-success-color-background)';
70
+
71
+ /**
72
+ * @type {string}
73
+ */
74
+ export const SynAlertSuccessColorBorder = 'var(--syn-alert-success-color-border)';
75
+
76
+ /**
77
+ * @type {string}
78
+ */
79
+ export const SynAlertSuccessColorIcon = 'var(--syn-alert-success-color-icon)';
80
+
81
+ /**
82
+ * @type {string}
83
+ */
84
+ export const SynAlertSuccessColorIndicator = 'var(--syn-alert-success-color-indicator)';
85
+
86
+ /**
87
+ * @type {string}
88
+ */
89
+ export const SynAlertWarningColorBackground = 'var(--syn-alert-warning-color-background)';
90
+
91
+ /**
92
+ * @type {string}
93
+ */
94
+ export const SynAlertWarningColorBorder = 'var(--syn-alert-warning-color-border)';
95
+
96
+ /**
97
+ * @type {string}
98
+ */
99
+ export const SynAlertWarningColorIcon = 'var(--syn-alert-warning-color-icon)';
100
+
101
+ /**
102
+ * @type {string}
103
+ */
104
+ export const SynAlertWarningColorIndicator = 'var(--syn-alert-warning-color-indicator)';
105
+
6
106
  /**
7
107
  * @type {string}
8
108
  */
@@ -1,7 +1,27 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
+ $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
6
+ $SynAlertErrorColorBorder: var(--syn-alert-error-color-border) !default;
7
+ $SynAlertErrorColorIcon: var(--syn-alert-error-color-icon) !default;
8
+ $SynAlertErrorColorIndicator: var(--syn-alert-error-color-indicator) !default;
9
+ $SynAlertInformativeColorBackground: var(--syn-alert-informative-color-background) !default;
10
+ $SynAlertInformativeColorBorder: var(--syn-alert-informative-color-border) !default;
11
+ $SynAlertInformativeColorIcon: var(--syn-alert-informative-color-icon) !default;
12
+ $SynAlertInformativeColorIndicator: var(--syn-alert-informative-color-indicator) !default;
13
+ $SynAlertNeutralColorBackground: var(--syn-alert-neutral-color-background) !default;
14
+ $SynAlertNeutralColorBorder: var(--syn-alert-neutral-color-border) !default;
15
+ $SynAlertNeutralColorIcon: var(--syn-alert-neutral-color-icon) !default;
16
+ $SynAlertNeutralColorIndicator: var(--syn-alert-neutral-color-indicator) !default;
17
+ $SynAlertSuccessColorBackground: var(--syn-alert-success-color-background) !default;
18
+ $SynAlertSuccessColorBorder: var(--syn-alert-success-color-border) !default;
19
+ $SynAlertSuccessColorIcon: var(--syn-alert-success-color-icon) !default;
20
+ $SynAlertSuccessColorIndicator: var(--syn-alert-success-color-indicator) !default;
21
+ $SynAlertWarningColorBackground: var(--syn-alert-warning-color-background) !default;
22
+ $SynAlertWarningColorBorder: var(--syn-alert-warning-color-border) !default;
23
+ $SynAlertWarningColorIcon: var(--syn-alert-warning-color-icon) !default;
24
+ $SynAlertWarningColorIndicator: var(--syn-alert-warning-color-indicator) !default;
5
25
  $SynBadgeErrorColorBackground: var(--syn-badge-error-color-background) !default;
6
26
  $SynBadgeErrorColorText: var(--syn-badge-error-color-text) !default;
7
27
  $SynBadgeInformativeColorBackground: var(--syn-badge-informative-color-background) !default;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2018-dark, .syn-theme-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-panel-background-color);
11
+ --syn-alert-error-color-border: var(--syn-panel-border-color);
12
+ --syn-alert-error-color-icon: var(--syn-color-error-600);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-panel-background-color);
15
+ --syn-alert-informative-color-border: var(--syn-panel-border-color);
16
+ --syn-alert-informative-color-icon: var(--syn-color-info-600);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-600);
18
+ --syn-alert-neutral-color-background: var(--syn-panel-background-color);
19
+ --syn-alert-neutral-color-border: var(--syn-panel-border-color);
20
+ --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
21
+ --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
+ --syn-alert-success-color-background: var(--syn-panel-background-color);
23
+ --syn-alert-success-color-border: var(--syn-panel-border-color);
24
+ --syn-alert-success-color-icon: var(--syn-color-success-500);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-500);
26
+ --syn-alert-warning-color-background: var(--syn-panel-background-color);
27
+ --syn-alert-warning-color-border: var(--syn-panel-border-color);
28
+ --syn-alert-warning-color-icon: var(--syn-color-warning-400);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: var(--syn-color-info-600);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-panel-background-color);
11
+ --syn-alert-error-color-border: var(--syn-panel-border-color);
12
+ --syn-alert-error-color-icon: var(--syn-color-error-600);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-panel-background-color);
15
+ --syn-alert-informative-color-border: var(--syn-panel-border-color);
16
+ --syn-alert-informative-color-icon: var(--syn-color-info-600);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-600);
18
+ --syn-alert-neutral-color-background: var(--syn-panel-background-color);
19
+ --syn-alert-neutral-color-border: var(--syn-panel-border-color);
20
+ --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
21
+ --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
+ --syn-alert-success-color-background: var(--syn-panel-background-color);
23
+ --syn-alert-success-color-border: var(--syn-panel-border-color);
24
+ --syn-alert-success-color-icon: var(--syn-color-success-500);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-500);
26
+ --syn-alert-warning-color-background: var(--syn-panel-background-color);
27
+ --syn-alert-warning-color-border: var(--syn-panel-border-color);
28
+ --syn-alert-warning-color-icon: var(--syn-color-warning-400);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: var(--syn-color-info-600);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2018-dark, .syn-theme-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-panel-background-color);
11
+ --syn-alert-error-color-border: var(--syn-panel-border-color);
12
+ --syn-alert-error-color-icon: var(--syn-color-error-600);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-panel-background-color);
15
+ --syn-alert-informative-color-border: var(--syn-panel-border-color);
16
+ --syn-alert-informative-color-icon: var(--syn-color-info-600);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-600);
18
+ --syn-alert-neutral-color-background: var(--syn-panel-background-color);
19
+ --syn-alert-neutral-color-border: var(--syn-panel-border-color);
20
+ --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
21
+ --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
+ --syn-alert-success-color-background: var(--syn-panel-background-color);
23
+ --syn-alert-success-color-border: var(--syn-panel-border-color);
24
+ --syn-alert-success-color-icon: var(--syn-color-success-500);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-500);
26
+ --syn-alert-warning-color-background: var(--syn-panel-background-color);
27
+ --syn-alert-warning-color-border: var(--syn-panel-border-color);
28
+ --syn-alert-warning-color-icon: var(--syn-color-warning-400);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: var(--syn-color-info-600);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2018-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-panel-background-color);
11
+ --syn-alert-error-color-border: var(--syn-panel-border-color);
12
+ --syn-alert-error-color-icon: var(--syn-color-error-600);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-panel-background-color);
15
+ --syn-alert-informative-color-border: var(--syn-panel-border-color);
16
+ --syn-alert-informative-color-icon: var(--syn-color-info-600);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-600);
18
+ --syn-alert-neutral-color-background: var(--syn-panel-background-color);
19
+ --syn-alert-neutral-color-border: var(--syn-panel-border-color);
20
+ --syn-alert-neutral-color-icon: var(--syn-color-neutral-800);
21
+ --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
+ --syn-alert-success-color-background: var(--syn-panel-background-color);
23
+ --syn-alert-success-color-border: var(--syn-panel-border-color);
24
+ --syn-alert-success-color-icon: var(--syn-color-success-500);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-500);
26
+ --syn-alert-warning-color-background: var(--syn-panel-background-color);
27
+ --syn-alert-warning-color-border: var(--syn-panel-border-color);
28
+ --syn-alert-warning-color-icon: var(--syn-color-warning-400);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-400);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: var(--syn-color-info-600);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2025-dark {
8
8
  color-scheme: dark;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-color-error-50);
11
+ --syn-alert-error-color-border: var(--syn-color-error-50);
12
+ --syn-alert-error-color-icon: var(--syn-typography-color-text);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-color-info-50);
15
+ --syn-alert-informative-color-border: var(--syn-color-info-50);
16
+ --syn-alert-informative-color-icon: var(--syn-typography-color-text);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-800);
18
+ --syn-alert-neutral-color-background: var(--syn-color-neutral-300);
19
+ --syn-alert-neutral-color-border: var(--syn-color-neutral-300);
20
+ --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
21
+ --syn-alert-neutral-color-indicator: var(--syn-color-neutral-800);
22
+ --syn-alert-success-color-background: var(--syn-color-success-50);
23
+ --syn-alert-success-color-border: var(--syn-color-success-50);
24
+ --syn-alert-success-color-icon: var(--syn-typography-color-text);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-600);
26
+ --syn-alert-warning-color-background: var(--syn-color-warning-50);
27
+ --syn-alert-warning-color-border: var(--syn-color-warning-50);
28
+ --syn-alert-warning-color-icon: var(--syn-typography-color-text);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-800);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: #a6e9ff;
@@ -206,8 +226,8 @@
206
226
  --syn-input-width: var(--syn-border-width-small);
207
227
  --syn-interactive-background-color-hover: var(--syn-color-neutral-100);
208
228
  --syn-interactive-emphasis-color: var(--syn-color-primary-500);
209
- --syn-interactive-emphasis-color-active: var(--syn-color-neutral-1000);
210
- --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
229
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-800);
230
+ --syn-interactive-emphasis-color-hover: var(--syn-color-primary-700);
211
231
  --syn-interactive-quiet-color: var(--syn-color-neutral-1000);
212
232
  --syn-interactive-quiet-color-active: var(--syn-color-primary-600);
213
233
  --syn-interactive-quiet-color-hover: var(--syn-color-primary-500);
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 2.35.0
2
+ * @synergy-design-system/tokens version 2.36.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,6 +7,26 @@
7
7
  :root, .syn-sick2025-light {
8
8
  color-scheme: light;
9
9
 
10
+ --syn-alert-error-color-background: var(--syn-color-error-100);
11
+ --syn-alert-error-color-border: var(--syn-color-error-100);
12
+ --syn-alert-error-color-icon: var(--syn-typography-color-text);
13
+ --syn-alert-error-color-indicator: var(--syn-color-error-600);
14
+ --syn-alert-informative-color-background: var(--syn-color-info-100);
15
+ --syn-alert-informative-color-border: var(--syn-color-info-100);
16
+ --syn-alert-informative-color-icon: var(--syn-typography-color-text);
17
+ --syn-alert-informative-color-indicator: var(--syn-color-info-400);
18
+ --syn-alert-neutral-color-background: #e6e1dc;
19
+ --syn-alert-neutral-color-border: #e6e1dc;
20
+ --syn-alert-neutral-color-icon: var(--syn-typography-color-text);
21
+ --syn-alert-neutral-color-indicator: #d5ccc5;
22
+ --syn-alert-success-color-background: var(--syn-color-success-100);
23
+ --syn-alert-success-color-border: var(--syn-color-success-100);
24
+ --syn-alert-success-color-icon: var(--syn-typography-color-text);
25
+ --syn-alert-success-color-indicator: var(--syn-color-success-800);
26
+ --syn-alert-warning-color-background: var(--syn-color-warning-100);
27
+ --syn-alert-warning-color-border: var(--syn-color-warning-100);
28
+ --syn-alert-warning-color-icon: var(--syn-typography-color-text);
29
+ --syn-alert-warning-color-indicator: var(--syn-color-warning-500);
10
30
  --syn-badge-error-color-background: var(--syn-color-error-600);
11
31
  --syn-badge-error-color-text: var(--syn-typography-color-text-inverted);
12
32
  --syn-badge-informative-color-background: #26c9ff;
@@ -204,9 +224,9 @@
204
224
  --syn-input-spacing-medium: var(--syn-spacing-medium);
205
225
  --syn-input-spacing-small: var(--syn-spacing-small);
206
226
  --syn-input-width: var(--syn-border-width-small);
207
- --syn-interactive-background-color-hover: #f8f7f6;
227
+ --syn-interactive-background-color-hover: #f2f0ed;
208
228
  --syn-interactive-emphasis-color: var(--syn-color-primary-700);
209
- --syn-interactive-emphasis-color-active: var(--syn-color-neutral-950);
229
+ --syn-interactive-emphasis-color-active: var(--syn-color-primary-950);
210
230
  --syn-interactive-emphasis-color-hover: var(--syn-color-primary-900);
211
231
  --syn-interactive-quiet-color: var(--syn-color-neutral-950);
212
232
  --syn-interactive-quiet-color-active: var(--syn-color-primary-800);
package/package.json CHANGED
@@ -25,8 +25,8 @@
25
25
  "style-dictionary": "^5.0.1",
26
26
  "stylelint": "^16.23.0",
27
27
  "typescript": "^5.8.3",
28
- "@synergy-design-system/eslint-config-syn": "0.1.0",
29
- "@synergy-design-system/stylelint-config-syn": "0.1.0"
28
+ "@synergy-design-system/stylelint-config-syn": "0.1.0",
29
+ "@synergy-design-system/eslint-config-syn": "0.1.0"
30
30
  },
31
31
  "exports": {
32
32
  ".": {
@@ -113,7 +113,7 @@
113
113
  },
114
114
  "type": "module",
115
115
  "types": "./dist/js/index.d.ts",
116
- "version": "2.36.0",
116
+ "version": "2.37.0",
117
117
  "scripts": {
118
118
  "build": "pnpm clean && node scripts/build.js",
119
119
  "build:all": "dotenvx -q run pnpm build:_all",
@@ -1,4 +1,96 @@
1
1
  {
2
+ "alert": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{panel.background.color}"
7
+ },
8
+ "color-border": {
9
+ "type": "color",
10
+ "value": "{panel.border.color}"
11
+ },
12
+ "color-icon": {
13
+ "type": "color",
14
+ "value": "{color.error.600}"
15
+ },
16
+ "color-indicator": {
17
+ "type": "color",
18
+ "value": "{color.error.600}"
19
+ }
20
+ },
21
+ "informative": {
22
+ "color-background": {
23
+ "type": "color",
24
+ "value": "{panel.background.color}"
25
+ },
26
+ "color-border": {
27
+ "type": "color",
28
+ "value": "{panel.border.color}"
29
+ },
30
+ "color-icon": {
31
+ "type": "color",
32
+ "value": "{color.info.600}"
33
+ },
34
+ "color-indicator": {
35
+ "type": "color",
36
+ "value": "{color.info.600}"
37
+ }
38
+ },
39
+ "neutral": {
40
+ "color-background": {
41
+ "type": "color",
42
+ "value": "{panel.background.color}"
43
+ },
44
+ "color-border": {
45
+ "type": "color",
46
+ "value": "{panel.border.color}"
47
+ },
48
+ "color-icon": {
49
+ "type": "color",
50
+ "value": "{color.neutral.800}"
51
+ },
52
+ "color-indicator": {
53
+ "type": "color",
54
+ "value": "{color.neutral.800}"
55
+ }
56
+ },
57
+ "success": {
58
+ "color-background": {
59
+ "type": "color",
60
+ "value": "{panel.background.color}"
61
+ },
62
+ "color-border": {
63
+ "type": "color",
64
+ "value": "{panel.border.color}"
65
+ },
66
+ "color-icon": {
67
+ "type": "color",
68
+ "value": "{color.success.500}"
69
+ },
70
+ "color-indicator": {
71
+ "type": "color",
72
+ "value": "{color.success.500}"
73
+ }
74
+ },
75
+ "warning": {
76
+ "color-background": {
77
+ "type": "color",
78
+ "value": "{panel.background.color}"
79
+ },
80
+ "color-border": {
81
+ "type": "color",
82
+ "value": "{panel.border.color}"
83
+ },
84
+ "color-icon": {
85
+ "type": "color",
86
+ "value": "{color.warning.400}"
87
+ },
88
+ "color-indicator": {
89
+ "type": "color",
90
+ "value": "{color.warning.400}"
91
+ }
92
+ }
93
+ },
2
94
  "badge": {
3
95
  "error": {
4
96
  "color-background": {
@@ -375,6 +467,10 @@
375
467
  "950": {
376
468
  "type": "color",
377
469
  "value": "#f0f9ff"
470
+ },
471
+ "1000": {
472
+ "type": "color",
473
+ "value": "#f0f9ff"
378
474
  }
379
475
  },
380
476
  "success": {
@@ -1,4 +1,96 @@
1
1
  {
2
+ "alert": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{panel.background.color}"
7
+ },
8
+ "color-border": {
9
+ "type": "color",
10
+ "value": "{panel.border.color}"
11
+ },
12
+ "color-icon": {
13
+ "type": "color",
14
+ "value": "{color.error.600}"
15
+ },
16
+ "color-indicator": {
17
+ "type": "color",
18
+ "value": "{color.error.600}"
19
+ }
20
+ },
21
+ "informative": {
22
+ "color-background": {
23
+ "type": "color",
24
+ "value": "{panel.background.color}"
25
+ },
26
+ "color-border": {
27
+ "type": "color",
28
+ "value": "{panel.border.color}"
29
+ },
30
+ "color-icon": {
31
+ "type": "color",
32
+ "value": "{color.info.600}"
33
+ },
34
+ "color-indicator": {
35
+ "type": "color",
36
+ "value": "{color.info.600}"
37
+ }
38
+ },
39
+ "neutral": {
40
+ "color-background": {
41
+ "type": "color",
42
+ "value": "{panel.background.color}"
43
+ },
44
+ "color-border": {
45
+ "type": "color",
46
+ "value": "{panel.border.color}"
47
+ },
48
+ "color-icon": {
49
+ "type": "color",
50
+ "value": "{color.neutral.800}"
51
+ },
52
+ "color-indicator": {
53
+ "type": "color",
54
+ "value": "{color.neutral.800}"
55
+ }
56
+ },
57
+ "success": {
58
+ "color-background": {
59
+ "type": "color",
60
+ "value": "{panel.background.color}"
61
+ },
62
+ "color-border": {
63
+ "type": "color",
64
+ "value": "{panel.border.color}"
65
+ },
66
+ "color-icon": {
67
+ "type": "color",
68
+ "value": "{color.success.500}"
69
+ },
70
+ "color-indicator": {
71
+ "type": "color",
72
+ "value": "{color.success.500}"
73
+ }
74
+ },
75
+ "warning": {
76
+ "color-background": {
77
+ "type": "color",
78
+ "value": "{panel.background.color}"
79
+ },
80
+ "color-border": {
81
+ "type": "color",
82
+ "value": "{panel.border.color}"
83
+ },
84
+ "color-icon": {
85
+ "type": "color",
86
+ "value": "{color.warning.400}"
87
+ },
88
+ "color-indicator": {
89
+ "type": "color",
90
+ "value": "{color.warning.400}"
91
+ }
92
+ }
93
+ },
2
94
  "badge": {
3
95
  "error": {
4
96
  "color-background": {
@@ -375,6 +467,10 @@
375
467
  "950": {
376
468
  "type": "color",
377
469
  "value": "#072e4a"
470
+ },
471
+ "1000": {
472
+ "type": "color",
473
+ "value": "#072e4a"
378
474
  }
379
475
  },
380
476
  "success": {
@@ -1,4 +1,96 @@
1
1
  {
2
+ "alert": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.50}"
7
+ },
8
+ "color-border": {
9
+ "type": "color",
10
+ "value": "{color.error.50}"
11
+ },
12
+ "color-icon": {
13
+ "type": "color",
14
+ "value": "{typography.color.text}"
15
+ },
16
+ "color-indicator": {
17
+ "type": "color",
18
+ "value": "{color.error.600}"
19
+ }
20
+ },
21
+ "informative": {
22
+ "color-background": {
23
+ "type": "color",
24
+ "value": "{color.info.50}"
25
+ },
26
+ "color-border": {
27
+ "type": "color",
28
+ "value": "{color.info.50}"
29
+ },
30
+ "color-icon": {
31
+ "type": "color",
32
+ "value": "{typography.color.text}"
33
+ },
34
+ "color-indicator": {
35
+ "type": "color",
36
+ "value": "{color.info.800}"
37
+ }
38
+ },
39
+ "neutral": {
40
+ "color-background": {
41
+ "type": "color",
42
+ "value": "{color.neutral.300}"
43
+ },
44
+ "color-border": {
45
+ "type": "color",
46
+ "value": "{color.neutral.300}"
47
+ },
48
+ "color-icon": {
49
+ "type": "color",
50
+ "value": "{typography.color.text}"
51
+ },
52
+ "color-indicator": {
53
+ "type": "color",
54
+ "value": "{color.neutral.800}"
55
+ }
56
+ },
57
+ "success": {
58
+ "color-background": {
59
+ "type": "color",
60
+ "value": "{color.success.50}"
61
+ },
62
+ "color-border": {
63
+ "type": "color",
64
+ "value": "{color.success.50}"
65
+ },
66
+ "color-icon": {
67
+ "type": "color",
68
+ "value": "{typography.color.text}"
69
+ },
70
+ "color-indicator": {
71
+ "type": "color",
72
+ "value": "{color.success.600}"
73
+ }
74
+ },
75
+ "warning": {
76
+ "color-background": {
77
+ "type": "color",
78
+ "value": "{color.warning.50}"
79
+ },
80
+ "color-border": {
81
+ "type": "color",
82
+ "value": "{color.warning.50}"
83
+ },
84
+ "color-icon": {
85
+ "type": "color",
86
+ "value": "{typography.color.text}"
87
+ },
88
+ "color-indicator": {
89
+ "type": "color",
90
+ "value": "{color.warning.800}"
91
+ }
92
+ }
93
+ },
2
94
  "badge": {
3
95
  "error": {
4
96
  "color-background": {
@@ -375,6 +467,10 @@
375
467
  "950": {
376
468
  "type": "color",
377
469
  "value": "#eff5ff"
470
+ },
471
+ "1000": {
472
+ "type": "color",
473
+ "value": "#eff5ff"
378
474
  }
379
475
  },
380
476
  "success": {
@@ -914,11 +1010,11 @@
914
1010
  },
915
1011
  "color-active": {
916
1012
  "type": "color",
917
- "value": "{color.neutral.1000}"
1013
+ "value": "{color.primary.800}"
918
1014
  },
919
1015
  "color-hover": {
920
1016
  "type": "color",
921
- "value": "{color.primary.900}"
1017
+ "value": "{color.primary.700}"
922
1018
  }
923
1019
  },
924
1020
  "quiet": {
@@ -1,4 +1,96 @@
1
1
  {
2
+ "alert": {
3
+ "error": {
4
+ "color-background": {
5
+ "type": "color",
6
+ "value": "{color.error.100}"
7
+ },
8
+ "color-border": {
9
+ "type": "color",
10
+ "value": "{color.error.100}"
11
+ },
12
+ "color-icon": {
13
+ "type": "color",
14
+ "value": "{typography.color.text}"
15
+ },
16
+ "color-indicator": {
17
+ "type": "color",
18
+ "value": "{color.error.600}"
19
+ }
20
+ },
21
+ "informative": {
22
+ "color-background": {
23
+ "type": "color",
24
+ "value": "{color.info.100}"
25
+ },
26
+ "color-border": {
27
+ "type": "color",
28
+ "value": "{color.info.100}"
29
+ },
30
+ "color-icon": {
31
+ "type": "color",
32
+ "value": "{typography.color.text}"
33
+ },
34
+ "color-indicator": {
35
+ "type": "color",
36
+ "value": "{color.info.400}"
37
+ }
38
+ },
39
+ "neutral": {
40
+ "color-background": {
41
+ "type": "color",
42
+ "value": "#e6e1dc"
43
+ },
44
+ "color-border": {
45
+ "type": "color",
46
+ "value": "#e6e1dc"
47
+ },
48
+ "color-icon": {
49
+ "type": "color",
50
+ "value": "{typography.color.text}"
51
+ },
52
+ "color-indicator": {
53
+ "type": "color",
54
+ "value": "#d5ccc5"
55
+ }
56
+ },
57
+ "success": {
58
+ "color-background": {
59
+ "type": "color",
60
+ "value": "{color.success.100}"
61
+ },
62
+ "color-border": {
63
+ "type": "color",
64
+ "value": "{color.success.100}"
65
+ },
66
+ "color-icon": {
67
+ "type": "color",
68
+ "value": "{typography.color.text}"
69
+ },
70
+ "color-indicator": {
71
+ "type": "color",
72
+ "value": "{color.success.800}"
73
+ }
74
+ },
75
+ "warning": {
76
+ "color-background": {
77
+ "type": "color",
78
+ "value": "{color.warning.100}"
79
+ },
80
+ "color-border": {
81
+ "type": "color",
82
+ "value": "{color.warning.100}"
83
+ },
84
+ "color-icon": {
85
+ "type": "color",
86
+ "value": "{typography.color.text}"
87
+ },
88
+ "color-indicator": {
89
+ "type": "color",
90
+ "value": "{color.warning.500}"
91
+ }
92
+ }
93
+ },
2
94
  "badge": {
3
95
  "error": {
4
96
  "color-background": {
@@ -375,6 +467,10 @@
375
467
  "950": {
376
468
  "type": "color",
377
469
  "value": "#0e275d"
470
+ },
471
+ "1000": {
472
+ "type": "color",
473
+ "value": "#000a37"
378
474
  }
379
475
  },
380
476
  "success": {
@@ -904,7 +1000,7 @@
904
1000
  "background": {
905
1001
  "color-hover": {
906
1002
  "type": "color",
907
- "value": "#f8f7f6"
1003
+ "value": "#f2f0ed"
908
1004
  }
909
1005
  },
910
1006
  "emphasis": {
@@ -914,7 +1010,7 @@
914
1010
  },
915
1011
  "color-active": {
916
1012
  "type": "color",
917
- "value": "{color.neutral.950}"
1013
+ "value": "{color.primary.950}"
918
1014
  },
919
1015
  "color-hover": {
920
1016
  "type": "color",