@synergy-design-system/tokens 2.36.0 → 2.38.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 +324 -232
- package/dist/js/index.d.ts +101 -1
- package/dist/js/index.js +101 -1
- package/dist/scss/_tokens.scss +21 -1
- package/dist/themes/dark.css +21 -1
- package/dist/themes/light.css +21 -1
- package/dist/themes/sick2018_dark.css +21 -1
- package/dist/themes/sick2018_light.css +21 -1
- package/dist/themes/sick2025_dark.css +23 -3
- package/dist/themes/sick2025_light.css +23 -3
- package/package.json +2 -60
- package/src/figma-variables/output/sick2018-dark.json +96 -0
- package/src/figma-variables/output/sick2018-light.json +96 -0
- package/src/figma-variables/output/sick2025-dark.json +98 -2
- package/src/figma-variables/output/sick2025-light.json +98 -2
package/dist/js/index.d.ts
CHANGED
|
@@ -1,8 +1,108 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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
|
*/
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -1,7 +1,27 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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;
|
package/dist/themes/dark.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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);
|
package/dist/themes/light.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 2.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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-
|
|
210
|
-
--syn-interactive-emphasis-color-hover: var(--syn-color-primary-
|
|
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.
|
|
2
|
+
* @synergy-design-system/tokens version 2.37.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: #
|
|
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-
|
|
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
|
@@ -9,9 +9,6 @@
|
|
|
9
9
|
"@figma-export/cli": "^6.2.2",
|
|
10
10
|
"@figma-export/types": "^6.2.2",
|
|
11
11
|
"@figma/rest-api-spec": "^0.31.0",
|
|
12
|
-
"@semantic-release/changelog": "^6.0.3",
|
|
13
|
-
"@semantic-release/exec": "^6.0.3",
|
|
14
|
-
"@semantic-release/git": "^10.0.1",
|
|
15
12
|
"@tamtamchik/json-deep-sort": "^1.3.0",
|
|
16
13
|
"@tokens-studio/sd-transforms": "^2.0.1",
|
|
17
14
|
"@types/node": "^22.17.0",
|
|
@@ -20,8 +17,6 @@
|
|
|
20
17
|
"eslint": "^8.57.1",
|
|
21
18
|
"eslint-import-resolver-typescript": "^4.4.4",
|
|
22
19
|
"rimraf": "^6.0.1",
|
|
23
|
-
"semantic-release": "^19.0.5",
|
|
24
|
-
"semantic-release-monorepo": "7.0.5",
|
|
25
20
|
"style-dictionary": "^5.0.1",
|
|
26
21
|
"stylelint": "^16.23.0",
|
|
27
22
|
"typescript": "^5.8.3",
|
|
@@ -60,60 +55,9 @@
|
|
|
60
55
|
"url": "https://github.com/synergy-design-system/synergy-design-system.git",
|
|
61
56
|
"directory": "packages/tokens"
|
|
62
57
|
},
|
|
63
|
-
"release": {
|
|
64
|
-
"branches": [
|
|
65
|
-
"main",
|
|
66
|
-
{
|
|
67
|
-
"name": "beta",
|
|
68
|
-
"prerelease": true
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
"name": "alpha",
|
|
72
|
-
"prerelease": true
|
|
73
|
-
}
|
|
74
|
-
],
|
|
75
|
-
"plugins": [
|
|
76
|
-
"@semantic-release/commit-analyzer",
|
|
77
|
-
"@semantic-release/release-notes-generator",
|
|
78
|
-
[
|
|
79
|
-
"@semantic-release/changelog",
|
|
80
|
-
{
|
|
81
|
-
"changelogFile": "CHANGELOG.md"
|
|
82
|
-
}
|
|
83
|
-
],
|
|
84
|
-
[
|
|
85
|
-
"@semantic-release/exec",
|
|
86
|
-
{
|
|
87
|
-
"prepareCmd": "pnpm build"
|
|
88
|
-
}
|
|
89
|
-
],
|
|
90
|
-
[
|
|
91
|
-
"@semantic-release/npm",
|
|
92
|
-
{
|
|
93
|
-
"npmPublish": false
|
|
94
|
-
}
|
|
95
|
-
],
|
|
96
|
-
[
|
|
97
|
-
"@semantic-release/git",
|
|
98
|
-
{
|
|
99
|
-
"message": "chore(release/tokens): ${nextRelease.version} [skip actions]\n\n${nextRelease.notes}",
|
|
100
|
-
"assets": [
|
|
101
|
-
"CHANGELOG.md",
|
|
102
|
-
"package.json"
|
|
103
|
-
]
|
|
104
|
-
}
|
|
105
|
-
],
|
|
106
|
-
[
|
|
107
|
-
"@semantic-release/github",
|
|
108
|
-
{
|
|
109
|
-
"successComment": false
|
|
110
|
-
}
|
|
111
|
-
]
|
|
112
|
-
]
|
|
113
|
-
},
|
|
114
58
|
"type": "module",
|
|
115
59
|
"types": "./dist/js/index.d.ts",
|
|
116
|
-
"version": "2.
|
|
60
|
+
"version": "2.38.0",
|
|
117
61
|
"scripts": {
|
|
118
62
|
"build": "pnpm clean && node scripts/build.js",
|
|
119
63
|
"build:all": "dotenvx -q run pnpm build:_all",
|
|
@@ -132,8 +76,6 @@
|
|
|
132
76
|
"format.eslint": "pnpm lint:js --fix",
|
|
133
77
|
"start": "pnpm build",
|
|
134
78
|
"compare": "pnpm build && node test/test-css-variables.js",
|
|
135
|
-
"test": "pnpm compare"
|
|
136
|
-
"release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
|
|
137
|
-
"release.dry": "semantic-release --dry-run --tagFormat 'tokens/${version}' -e semantic-release-monorepo"
|
|
79
|
+
"test": "pnpm compare"
|
|
138
80
|
}
|
|
139
81
|
}
|
|
@@ -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": {
|