@synergy-design-system/metadata 3.16.1 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/data/core/component/component:syn-button-group.json +0 -5
  3. package/data/core/component/component:syn-button.json +3 -3
  4. package/data/core/component/component:syn-chart.json +147 -2
  5. package/data/core/component/component:syn-radio-button.json +123 -14
  6. package/data/core/component/component:syn-radio-group.json +11 -0
  7. package/data/core/setup/setup:angular-components-module.json +1 -1
  8. package/data/core/setup/setup:angular-forms-module.json +1 -1
  9. package/data/core/setup/setup:angular-package.json +2 -2
  10. package/data/core/setup/setup:angular-validators-module.json +1 -1
  11. package/data/core/setup/setup:components-package.json +2 -2
  12. package/data/core/setup/setup:react-package.json +2 -2
  13. package/data/core/setup/setup:tokens-package.json +2 -2
  14. package/data/core/setup/setup:vue-package.json +2 -2
  15. package/data/core/token/token:tokens-charts-js-index-d-ts.json +1 -1
  16. package/data/core/token/token:tokens-charts-js-index-js.json +1 -1
  17. package/data/core/token/token:tokens-charts-scss-tokens-scss.json +1 -1
  18. package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json +1 -1
  19. package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json +1 -1
  20. package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
  21. package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
  22. package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
  23. package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
  24. package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
  25. package/data/core/token/token:tokens-js-index-js.json +1 -1
  26. package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
  27. package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
  28. package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
  29. package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
  30. package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
  31. package/data/index.json +3 -2
  32. package/data/layers/examples/component/component:syn-chart.md +115 -106
  33. package/data/layers/examples/component/component:syn-checkbox.md +16 -2
  34. package/data/layers/examples/component/component:syn-combobox.md +10 -21
  35. package/data/layers/examples/component/component:syn-file.md +16 -10
  36. package/data/layers/examples/component/component:syn-input.md +10 -3
  37. package/data/layers/examples/component/component:syn-radio-button.md +200 -0
  38. package/data/layers/examples/component/component:syn-radio-group.md +27 -2
  39. package/data/layers/examples/component/component:syn-radio.md +12 -5
  40. package/data/layers/examples/component/component:syn-range.md +16 -14
  41. package/data/layers/examples/component/component:syn-select.md +10 -3
  42. package/data/layers/examples/component/component:syn-switch.md +10 -3
  43. package/data/layers/examples/component/component:syn-textarea.md +10 -3
  44. package/data/layers/full/component/component:syn-button/components/button-group.styles.ts +66 -0
  45. package/data/layers/full/component/component:syn-button/components/button.component.ts +40 -52
  46. package/data/layers/full/component/component:syn-button/components/button.styles.ts +162 -173
  47. package/data/layers/full/component/component:syn-button-group/components/button-group.component.ts +22 -18
  48. package/data/layers/full/component/component:syn-button-group/components/button-group.styles.ts +0 -2
  49. package/data/layers/full/component/component:syn-chart/angular/chart.component.ts +11 -5
  50. package/data/layers/full/component/component:syn-chart/components/chart.component.ts +67 -20
  51. package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts +59 -59
  52. package/data/layers/full/component/component:syn-chart/components/types.ts +47 -4
  53. package/data/layers/full/component/component:syn-chart/react/chart.ts +1 -1
  54. package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue +11 -5
  55. package/data/layers/full/component/component:syn-radio-button/angular/radio-button.component.ts +14 -14
  56. package/data/layers/full/component/component:syn-radio-button/components/radio-button.component.ts +45 -25
  57. package/data/layers/full/component/component:syn-radio-button/components/radio-button.styles.ts +87 -25
  58. package/data/layers/full/component/component:syn-radio-button/react/radio-button.ts +1 -1
  59. package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue +6 -6
  60. package/data/layers/full/component/component:syn-radio-group/components/radio-group.component.ts +23 -11
  61. package/data/layers/full/component/component:syn-radio-group/components/radio-group.styles.ts +51 -6
  62. package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +38 -0
  63. package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
  64. package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +36 -0
  65. package/data/layers/full/setup/setup:components-package/components/package.json +1 -1
  66. package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +28 -0
  67. package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
  68. package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts +4 -4
  69. package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +31 -0
  70. package/data/layers/full/setup/setup:tokens-package/tokens/package.json +1 -1
  71. package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +38 -0
  72. package/data/layers/full/setup/setup:vue-package/vue/package.json +1 -1
  73. package/data/layers/full/tokens/charts/js/index.d.ts +275 -265
  74. package/data/layers/full/tokens/charts/js/index.js +143 -133
  75. package/data/layers/full/tokens/charts/scss/_tokens.scss +135 -133
  76. package/data/layers/full/tokens/charts/themes/sick2025_dark.css +135 -133
  77. package/data/layers/full/tokens/charts/themes/sick2025_light.css +135 -133
  78. package/data/layers/full/tokens/figma-variables/sick2018-dark.json +20 -0
  79. package/data/layers/full/tokens/figma-variables/sick2018-light.json +20 -0
  80. package/data/layers/full/tokens/figma-variables/sick2025-dark.json +20 -0
  81. package/data/layers/full/tokens/figma-variables/sick2025-light.json +20 -0
  82. package/data/layers/full/tokens/js/index.d.ts +31 -1
  83. package/data/layers/full/tokens/js/index.js +31 -1
  84. package/data/layers/full/tokens/scss/_tokens.scss +7 -1
  85. package/data/layers/full/tokens/themes/sick2018_dark.css +7 -1
  86. package/data/layers/full/tokens/themes/sick2018_light.css +7 -1
  87. package/data/layers/full/tokens/themes/sick2025_dark.css +7 -1
  88. package/data/layers/full/tokens/themes/sick2025_light.css +7 -1
  89. package/data/layers/interface/component/component:syn-chart.json +5 -5
  90. package/data/layers/interface/component/component:syn-chart.md +4 -4
  91. package/data/layers/interface/component/component:syn-radio-button.json +14 -12
  92. package/data/layers/interface/component/component:syn-radio-button.md +6 -4
  93. package/data/layers/rules/component/component:syn-radio-button.md +16 -11
  94. package/data/manifest.json +1 -1
  95. package/dist/intentPolicy/domains/input/capabilities.js +4 -0
  96. package/dist/intentPolicy/domains/input/patterns.js +9 -0
  97. package/package.json +5 -5
  98. package/data/layers/full/component/component:syn-button/components/button.custom.styles.ts +0 -245
  99. package/data/layers/full/component/component:syn-button-group/components/button-group.custom.styles.ts +0 -5
package/data/layers/full/tokens/charts/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -7,136 +7,138 @@
7
7
  :root, .syn-sick2025-light, .syn-theme-light {
8
8
  color-scheme: light;
9
9
 
10
- --syn-categorical-10: var(--syn-color-data-purple-700);
11
- --syn-categorical-11: var(--syn-color-neutral-500);
12
- --syn-categorical-12: var(--syn-color-data-magenta-500);
13
- --syn-categorical-01: var(--syn-color-primary-700);
14
- --syn-categorical-02: var(--syn-color-accent-600);
15
- --syn-categorical-03: var(--syn-color-muted-600);
16
- --syn-categorical-04: var(--syn-color-data-purple-400);
17
- --syn-categorical-05: var(--syn-color-primary-900);
18
- --syn-categorical-06: var(--syn-color-data-teal-600);
19
- --syn-categorical-07: var(--syn-color-data-magenta-700);
20
- --syn-categorical-08: var(--syn-color-neutral-800);
21
- --syn-categorical-09: var(--syn-color-data-teal-800);
22
- --syn-sequential-01-10: var(--syn-color-primary-100);
23
- --syn-sequential-01-20: var(--syn-color-primary-200);
24
- --syn-sequential-01-30: var(--syn-color-primary-300);
25
- --syn-sequential-01-40: var(--syn-color-primary-400);
26
- --syn-sequential-01-50: var(--syn-color-primary-500);
27
- --syn-sequential-01-60: var(--syn-color-primary-600);
28
- --syn-sequential-01-70: var(--syn-color-primary-700);
29
- --syn-sequential-01-80: var(--syn-color-primary-800);
30
- --syn-sequential-01-90: var(--syn-color-primary-900);
31
- --syn-sequential-01-100: var(--syn-color-primary-950);
32
- --syn-sequential-02-10: var(--syn-color-accent-100);
33
- --syn-sequential-02-20: var(--syn-color-accent-200);
34
- --syn-sequential-02-30: var(--syn-color-accent-300);
35
- --syn-sequential-02-40: var(--syn-color-accent-400);
36
- --syn-sequential-02-50: var(--syn-color-accent-500);
37
- --syn-sequential-02-60: var(--syn-color-accent-600);
38
- --syn-sequential-02-70: var(--syn-color-accent-700);
39
- --syn-sequential-02-80: var(--syn-color-accent-800);
40
- --syn-sequential-02-90: var(--syn-color-accent-900);
41
- --syn-sequential-02-100: var(--syn-color-accent-950);
42
- --syn-sequential-03-10: var(--syn-color-muted-100);
43
- --syn-sequential-03-20: var(--syn-color-muted-200);
44
- --syn-sequential-03-30: var(--syn-color-muted-300);
45
- --syn-sequential-03-40: var(--syn-color-muted-400);
46
- --syn-sequential-03-50: var(--syn-color-muted-500);
47
- --syn-sequential-03-60: var(--syn-color-muted-600);
48
- --syn-sequential-03-70: var(--syn-color-muted-700);
49
- --syn-sequential-03-80: var(--syn-color-muted-800);
50
- --syn-sequential-03-90: var(--syn-color-muted-900);
51
- --syn-sequential-03-100: var(--syn-color-muted-950);
52
- --syn-sequential-04-10: var(--syn-color-data-purple-100);
53
- --syn-sequential-04-20: var(--syn-color-data-purple-200);
54
- --syn-sequential-04-30: var(--syn-color-data-purple-300);
55
- --syn-sequential-04-40: var(--syn-color-data-purple-400);
56
- --syn-sequential-04-50: var(--syn-color-data-purple-500);
57
- --syn-sequential-04-60: var(--syn-color-data-purple-600);
58
- --syn-sequential-04-70: var(--syn-color-data-purple-700);
59
- --syn-sequential-04-80: var(--syn-color-data-purple-800);
60
- --syn-sequential-04-90: var(--syn-color-data-purple-900);
61
- --syn-sequential-04-100: var(--syn-color-data-purple-950);
62
- --syn-sequential-05-10: var(--syn-color-data-teal-100);
63
- --syn-sequential-05-20: var(--syn-color-data-teal-200);
64
- --syn-sequential-05-30: var(--syn-color-data-teal-300);
65
- --syn-sequential-05-40: var(--syn-color-data-teal-400);
66
- --syn-sequential-05-50: var(--syn-color-data-teal-500);
67
- --syn-sequential-05-60: var(--syn-color-data-teal-600);
68
- --syn-sequential-05-70: var(--syn-color-data-teal-700);
69
- --syn-sequential-05-80: var(--syn-color-data-teal-800);
70
- --syn-sequential-05-90: var(--syn-color-data-teal-900);
71
- --syn-sequential-05-100: var(--syn-color-data-teal-950);
72
- --syn-sequential-06-10: var(--syn-color-data-magenta-100);
73
- --syn-sequential-06-20: var(--syn-color-data-magenta-200);
74
- --syn-sequential-06-30: var(--syn-color-data-magenta-300);
75
- --syn-sequential-06-40: var(--syn-color-data-magenta-400);
76
- --syn-sequential-06-50: var(--syn-color-data-magenta-500);
77
- --syn-sequential-06-60: var(--syn-color-data-magenta-600);
78
- --syn-sequential-06-70: var(--syn-color-data-magenta-700);
79
- --syn-sequential-06-80: var(--syn-color-data-magenta-800);
80
- --syn-sequential-06-90: var(--syn-color-data-magenta-900);
81
- --syn-sequential-06-100: var(--syn-color-data-magenta-950);
82
- --syn-sequential-07-10: var(--syn-color-neutral-100);
83
- --syn-sequential-07-20: var(--syn-color-neutral-200);
84
- --syn-sequential-07-30: var(--syn-color-neutral-300);
85
- --syn-sequential-07-40: var(--syn-color-neutral-400);
86
- --syn-sequential-07-50: var(--syn-color-neutral-500);
87
- --syn-sequential-07-60: var(--syn-color-neutral-600);
88
- --syn-sequential-07-70: var(--syn-color-neutral-700);
89
- --syn-sequential-07-80: var(--syn-color-neutral-800);
90
- --syn-sequential-07-90: var(--syn-color-neutral-900);
91
- --syn-sequential-07-100: var(--syn-color-neutral-950);
92
- --syn-sequential-status-critical-10: var(--syn-color-critical-100);
93
- --syn-sequential-status-critical-20: var(--syn-color-critical-200);
94
- --syn-sequential-status-critical-30: var(--syn-color-critical-300);
95
- --syn-sequential-status-critical-40: var(--syn-color-critical-400);
96
- --syn-sequential-status-critical-50: var(--syn-color-critical-500);
97
- --syn-sequential-status-critical-60: var(--syn-color-critical-600);
98
- --syn-sequential-status-critical-70: var(--syn-color-critical-700);
99
- --syn-sequential-status-critical-80: var(--syn-color-critical-800);
100
- --syn-sequential-status-critical-90: var(--syn-color-critical-900);
101
- --syn-sequential-status-critical-100: var(--syn-color-critical-950);
102
- --syn-sequential-status-error-10: var(--syn-color-error-100);
103
- --syn-sequential-status-error-20: var(--syn-color-error-200);
104
- --syn-sequential-status-error-30: var(--syn-color-error-300);
105
- --syn-sequential-status-error-40: var(--syn-color-error-400);
106
- --syn-sequential-status-error-50: var(--syn-color-error-500);
107
- --syn-sequential-status-error-60: var(--syn-color-error-600);
108
- --syn-sequential-status-error-70: var(--syn-color-error-700);
109
- --syn-sequential-status-error-80: var(--syn-color-error-800);
110
- --syn-sequential-status-error-90: var(--syn-color-error-900);
111
- --syn-sequential-status-error-100: var(--syn-color-error-950);
112
- --syn-sequential-status-info-10: var(--syn-color-info-100);
113
- --syn-sequential-status-info-20: var(--syn-color-info-200);
114
- --syn-sequential-status-info-30: var(--syn-color-info-300);
115
- --syn-sequential-status-info-40: var(--syn-color-info-400);
116
- --syn-sequential-status-info-50: var(--syn-color-info-500);
117
- --syn-sequential-status-info-60: var(--syn-color-info-600);
118
- --syn-sequential-status-info-70: var(--syn-color-info-700);
119
- --syn-sequential-status-info-80: var(--syn-color-info-800);
120
- --syn-sequential-status-info-90: var(--syn-color-info-900);
121
- --syn-sequential-status-info-100: var(--syn-color-info-950);
122
- --syn-sequential-status-success-10: var(--syn-color-success-100);
123
- --syn-sequential-status-success-20: var(--syn-color-success-200);
124
- --syn-sequential-status-success-30: var(--syn-color-success-300);
125
- --syn-sequential-status-success-40: var(--syn-color-success-400);
126
- --syn-sequential-status-success-50: var(--syn-color-success-500);
127
- --syn-sequential-status-success-60: var(--syn-color-success-600);
128
- --syn-sequential-status-success-70: var(--syn-color-success-700);
129
- --syn-sequential-status-success-80: var(--syn-color-success-800);
130
- --syn-sequential-status-success-90: var(--syn-color-success-900);
131
- --syn-sequential-status-success-100: var(--syn-color-success-950);
132
- --syn-sequential-status-warning-10: var(--syn-color-warning-100);
133
- --syn-sequential-status-warning-20: var(--syn-color-warning-200);
134
- --syn-sequential-status-warning-30: var(--syn-color-warning-300);
135
- --syn-sequential-status-warning-40: var(--syn-color-warning-400);
136
- --syn-sequential-status-warning-50: var(--syn-color-warning-500);
137
- --syn-sequential-status-warning-60: var(--syn-color-warning-600);
138
- --syn-sequential-status-warning-70: var(--syn-color-warning-700);
139
- --syn-sequential-status-warning-80: var(--syn-color-warning-800);
140
- --syn-sequential-status-warning-90: var(--syn-color-warning-900);
141
- --syn-sequential-status-warning-100: var(--syn-color-warning-950);
10
+ --syn-chart-categorical-10: var(--syn-color-data-purple-700);
11
+ --syn-chart-categorical-11: var(--syn-color-neutral-500);
12
+ --syn-chart-categorical-12: var(--syn-color-data-magenta-500);
13
+ --syn-chart-categorical-01: var(--syn-color-primary-700);
14
+ --syn-chart-categorical-02: var(--syn-color-accent-600);
15
+ --syn-chart-categorical-03: var(--syn-color-muted-600);
16
+ --syn-chart-categorical-04: var(--syn-color-data-purple-400);
17
+ --syn-chart-categorical-05: var(--syn-color-primary-900);
18
+ --syn-chart-categorical-06: var(--syn-color-data-teal-600);
19
+ --syn-chart-categorical-07: var(--syn-color-data-magenta-700);
20
+ --syn-chart-categorical-08: var(--syn-color-neutral-800);
21
+ --syn-chart-categorical-09: var(--syn-color-data-teal-800);
22
+ --syn-chart-grid-lines-color: var(--syn-color-neutral-100);
23
+ --syn-chart-grid-lines-color-emphasize: var(--syn-color-neutral-200);
24
+ --syn-chart-sequential-01-10: var(--syn-color-primary-100);
25
+ --syn-chart-sequential-01-20: var(--syn-color-primary-200);
26
+ --syn-chart-sequential-01-30: var(--syn-color-primary-300);
27
+ --syn-chart-sequential-01-40: var(--syn-color-primary-400);
28
+ --syn-chart-sequential-01-50: var(--syn-color-primary-500);
29
+ --syn-chart-sequential-01-60: var(--syn-color-primary-600);
30
+ --syn-chart-sequential-01-70: var(--syn-color-primary-700);
31
+ --syn-chart-sequential-01-80: var(--syn-color-primary-800);
32
+ --syn-chart-sequential-01-90: var(--syn-color-primary-900);
33
+ --syn-chart-sequential-01-100: var(--syn-color-primary-950);
34
+ --syn-chart-sequential-02-10: var(--syn-color-accent-100);
35
+ --syn-chart-sequential-02-20: var(--syn-color-accent-200);
36
+ --syn-chart-sequential-02-30: var(--syn-color-accent-300);
37
+ --syn-chart-sequential-02-40: var(--syn-color-accent-400);
38
+ --syn-chart-sequential-02-50: var(--syn-color-accent-500);
39
+ --syn-chart-sequential-02-60: var(--syn-color-accent-600);
40
+ --syn-chart-sequential-02-70: var(--syn-color-accent-700);
41
+ --syn-chart-sequential-02-80: var(--syn-color-accent-800);
42
+ --syn-chart-sequential-02-90: var(--syn-color-accent-900);
43
+ --syn-chart-sequential-02-100: var(--syn-color-accent-950);
44
+ --syn-chart-sequential-03-10: var(--syn-color-muted-100);
45
+ --syn-chart-sequential-03-20: var(--syn-color-muted-200);
46
+ --syn-chart-sequential-03-30: var(--syn-color-muted-300);
47
+ --syn-chart-sequential-03-40: var(--syn-color-muted-400);
48
+ --syn-chart-sequential-03-50: var(--syn-color-muted-500);
49
+ --syn-chart-sequential-03-60: var(--syn-color-muted-600);
50
+ --syn-chart-sequential-03-70: var(--syn-color-muted-700);
51
+ --syn-chart-sequential-03-80: var(--syn-color-muted-800);
52
+ --syn-chart-sequential-03-90: var(--syn-color-muted-900);
53
+ --syn-chart-sequential-03-100: var(--syn-color-muted-950);
54
+ --syn-chart-sequential-04-10: var(--syn-color-data-purple-100);
55
+ --syn-chart-sequential-04-20: var(--syn-color-data-purple-200);
56
+ --syn-chart-sequential-04-30: var(--syn-color-data-purple-300);
57
+ --syn-chart-sequential-04-40: var(--syn-color-data-purple-400);
58
+ --syn-chart-sequential-04-50: var(--syn-color-data-purple-500);
59
+ --syn-chart-sequential-04-60: var(--syn-color-data-purple-600);
60
+ --syn-chart-sequential-04-70: var(--syn-color-data-purple-700);
61
+ --syn-chart-sequential-04-80: var(--syn-color-data-purple-800);
62
+ --syn-chart-sequential-04-90: var(--syn-color-data-purple-900);
63
+ --syn-chart-sequential-04-100: var(--syn-color-data-purple-950);
64
+ --syn-chart-sequential-05-10: var(--syn-color-data-teal-100);
65
+ --syn-chart-sequential-05-20: var(--syn-color-data-teal-200);
66
+ --syn-chart-sequential-05-30: var(--syn-color-data-teal-300);
67
+ --syn-chart-sequential-05-40: var(--syn-color-data-teal-400);
68
+ --syn-chart-sequential-05-50: var(--syn-color-data-teal-500);
69
+ --syn-chart-sequential-05-60: var(--syn-color-data-teal-600);
70
+ --syn-chart-sequential-05-70: var(--syn-color-data-teal-700);
71
+ --syn-chart-sequential-05-80: var(--syn-color-data-teal-800);
72
+ --syn-chart-sequential-05-90: var(--syn-color-data-teal-900);
73
+ --syn-chart-sequential-05-100: var(--syn-color-data-teal-950);
74
+ --syn-chart-sequential-06-10: var(--syn-color-data-magenta-100);
75
+ --syn-chart-sequential-06-20: var(--syn-color-data-magenta-200);
76
+ --syn-chart-sequential-06-30: var(--syn-color-data-magenta-300);
77
+ --syn-chart-sequential-06-40: var(--syn-color-data-magenta-400);
78
+ --syn-chart-sequential-06-50: var(--syn-color-data-magenta-500);
79
+ --syn-chart-sequential-06-60: var(--syn-color-data-magenta-600);
80
+ --syn-chart-sequential-06-70: var(--syn-color-data-magenta-700);
81
+ --syn-chart-sequential-06-80: var(--syn-color-data-magenta-800);
82
+ --syn-chart-sequential-06-90: var(--syn-color-data-magenta-900);
83
+ --syn-chart-sequential-06-100: var(--syn-color-data-magenta-950);
84
+ --syn-chart-sequential-07-10: var(--syn-color-neutral-100);
85
+ --syn-chart-sequential-07-20: var(--syn-color-neutral-200);
86
+ --syn-chart-sequential-07-30: var(--syn-color-neutral-300);
87
+ --syn-chart-sequential-07-40: var(--syn-color-neutral-400);
88
+ --syn-chart-sequential-07-50: var(--syn-color-neutral-500);
89
+ --syn-chart-sequential-07-60: var(--syn-color-neutral-600);
90
+ --syn-chart-sequential-07-70: var(--syn-color-neutral-700);
91
+ --syn-chart-sequential-07-80: var(--syn-color-neutral-800);
92
+ --syn-chart-sequential-07-90: var(--syn-color-neutral-900);
93
+ --syn-chart-sequential-07-100: var(--syn-color-neutral-950);
94
+ --syn-chart-sequential-status-critical-10: var(--syn-color-critical-100);
95
+ --syn-chart-sequential-status-critical-20: var(--syn-color-critical-200);
96
+ --syn-chart-sequential-status-critical-30: var(--syn-color-critical-300);
97
+ --syn-chart-sequential-status-critical-40: var(--syn-color-critical-400);
98
+ --syn-chart-sequential-status-critical-50: var(--syn-color-critical-500);
99
+ --syn-chart-sequential-status-critical-60: var(--syn-color-critical-600);
100
+ --syn-chart-sequential-status-critical-70: var(--syn-color-critical-700);
101
+ --syn-chart-sequential-status-critical-80: var(--syn-color-critical-800);
102
+ --syn-chart-sequential-status-critical-90: var(--syn-color-critical-900);
103
+ --syn-chart-sequential-status-critical-100: var(--syn-color-critical-950);
104
+ --syn-chart-sequential-status-error-10: var(--syn-color-error-100);
105
+ --syn-chart-sequential-status-error-20: var(--syn-color-error-200);
106
+ --syn-chart-sequential-status-error-30: var(--syn-color-error-300);
107
+ --syn-chart-sequential-status-error-40: var(--syn-color-error-400);
108
+ --syn-chart-sequential-status-error-50: var(--syn-color-error-500);
109
+ --syn-chart-sequential-status-error-60: var(--syn-color-error-600);
110
+ --syn-chart-sequential-status-error-70: var(--syn-color-error-700);
111
+ --syn-chart-sequential-status-error-80: var(--syn-color-error-800);
112
+ --syn-chart-sequential-status-error-90: var(--syn-color-error-900);
113
+ --syn-chart-sequential-status-error-100: var(--syn-color-error-950);
114
+ --syn-chart-sequential-status-info-10: var(--syn-color-info-100);
115
+ --syn-chart-sequential-status-info-20: var(--syn-color-info-200);
116
+ --syn-chart-sequential-status-info-30: var(--syn-color-info-300);
117
+ --syn-chart-sequential-status-info-40: var(--syn-color-info-400);
118
+ --syn-chart-sequential-status-info-50: var(--syn-color-info-500);
119
+ --syn-chart-sequential-status-info-60: var(--syn-color-info-600);
120
+ --syn-chart-sequential-status-info-70: var(--syn-color-info-700);
121
+ --syn-chart-sequential-status-info-80: var(--syn-color-info-800);
122
+ --syn-chart-sequential-status-info-90: var(--syn-color-info-900);
123
+ --syn-chart-sequential-status-info-100: var(--syn-color-info-950);
124
+ --syn-chart-sequential-status-success-10: var(--syn-color-success-100);
125
+ --syn-chart-sequential-status-success-20: var(--syn-color-success-200);
126
+ --syn-chart-sequential-status-success-30: var(--syn-color-success-300);
127
+ --syn-chart-sequential-status-success-40: var(--syn-color-success-400);
128
+ --syn-chart-sequential-status-success-50: var(--syn-color-success-500);
129
+ --syn-chart-sequential-status-success-60: var(--syn-color-success-600);
130
+ --syn-chart-sequential-status-success-70: var(--syn-color-success-700);
131
+ --syn-chart-sequential-status-success-80: var(--syn-color-success-800);
132
+ --syn-chart-sequential-status-success-90: var(--syn-color-success-900);
133
+ --syn-chart-sequential-status-success-100: var(--syn-color-success-950);
134
+ --syn-chart-sequential-status-warning-10: var(--syn-color-warning-100);
135
+ --syn-chart-sequential-status-warning-20: var(--syn-color-warning-200);
136
+ --syn-chart-sequential-status-warning-30: var(--syn-color-warning-300);
137
+ --syn-chart-sequential-status-warning-40: var(--syn-color-warning-400);
138
+ --syn-chart-sequential-status-warning-50: var(--syn-color-warning-500);
139
+ --syn-chart-sequential-status-warning-60: var(--syn-color-warning-600);
140
+ --syn-chart-sequential-status-warning-70: var(--syn-color-warning-700);
141
+ --syn-chart-sequential-status-warning-80: var(--syn-color-warning-800);
142
+ --syn-chart-sequential-status-warning-90: var(--syn-color-warning-900);
143
+ --syn-chart-sequential-status-warning-100: var(--syn-color-warning-950);
142
144
  }
package/data/layers/full/tokens/figma-variables/sick2018-dark.json CHANGED
@@ -1671,6 +1671,26 @@
1671
1671
  }
1672
1672
  }
1673
1673
  },
1674
+ "radio-button": {
1675
+ "border": {
1676
+ "color": {
1677
+ "type": "color",
1678
+ "value": "{color.neutral.700}"
1679
+ },
1680
+ "radius-large": {
1681
+ "type": "sizing",
1682
+ "value": "{border-radius.none}"
1683
+ },
1684
+ "radius-medium": {
1685
+ "type": "sizing",
1686
+ "value": "{border-radius.none}"
1687
+ },
1688
+ "radius-small": {
1689
+ "type": "sizing",
1690
+ "value": "{border-radius.none}"
1691
+ }
1692
+ }
1693
+ },
1674
1694
  "range": {
1675
1695
  "color-inactive": {
1676
1696
  "type": "color",
package/data/layers/full/tokens/figma-variables/sick2018-light.json CHANGED
@@ -1671,6 +1671,26 @@
1671
1671
  }
1672
1672
  }
1673
1673
  },
1674
+ "radio-button": {
1675
+ "border": {
1676
+ "color": {
1677
+ "type": "color",
1678
+ "value": "{color.neutral.700}"
1679
+ },
1680
+ "radius-large": {
1681
+ "type": "sizing",
1682
+ "value": "{border-radius.none}"
1683
+ },
1684
+ "radius-medium": {
1685
+ "type": "sizing",
1686
+ "value": "{border-radius.none}"
1687
+ },
1688
+ "radius-small": {
1689
+ "type": "sizing",
1690
+ "value": "{border-radius.none}"
1691
+ }
1692
+ }
1693
+ },
1674
1694
  "range": {
1675
1695
  "color-inactive": {
1676
1696
  "type": "color",
package/data/layers/full/tokens/figma-variables/sick2025-dark.json CHANGED
@@ -1671,6 +1671,26 @@
1671
1671
  }
1672
1672
  }
1673
1673
  },
1674
+ "radio-button": {
1675
+ "border": {
1676
+ "color": {
1677
+ "type": "color",
1678
+ "value": "{color.neutral.1000}"
1679
+ },
1680
+ "radius-large": {
1681
+ "type": "sizing",
1682
+ "value": "{border-radius.small}"
1683
+ },
1684
+ "radius-medium": {
1685
+ "type": "sizing",
1686
+ "value": "{border-radius.small}"
1687
+ },
1688
+ "radius-small": {
1689
+ "type": "sizing",
1690
+ "value": "{border-radius.small}"
1691
+ }
1692
+ }
1693
+ },
1674
1694
  "range": {
1675
1695
  "color-inactive": {
1676
1696
  "type": "color",
package/data/layers/full/tokens/figma-variables/sick2025-light.json CHANGED
@@ -1671,6 +1671,26 @@
1671
1671
  }
1672
1672
  }
1673
1673
  },
1674
+ "radio-button": {
1675
+ "border": {
1676
+ "color": {
1677
+ "type": "color",
1678
+ "value": "{color.neutral.950}"
1679
+ },
1680
+ "radius-large": {
1681
+ "type": "sizing",
1682
+ "value": "{border-radius.small}"
1683
+ },
1684
+ "radius-medium": {
1685
+ "type": "sizing",
1686
+ "value": "{border-radius.small}"
1687
+ },
1688
+ "radius-small": {
1689
+ "type": "sizing",
1690
+ "value": "{border-radius.small}"
1691
+ }
1692
+ }
1693
+ },
1674
1694
  "range": {
1675
1695
  "color-inactive": {
1676
1696
  "type": "color",
package/data/layers/full/tokens/js/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1768,6 +1768,26 @@ export const SynProgressIndicatorColor: string;
1768
1768
  */
1769
1769
  export const SynProgressTrackColor: string;
1770
1770
 
1771
+ /**
1772
+ * Maps to the css variable `--syn-radio-button-border-color`
1773
+ */
1774
+ export const SynRadioButtonBorderColor: string;
1775
+
1776
+ /**
1777
+ * Maps to the css variable `--syn-radio-button-border-radius-large`
1778
+ */
1779
+ export const SynRadioButtonBorderRadiusLarge: string;
1780
+
1781
+ /**
1782
+ * Maps to the css variable `--syn-radio-button-border-radius-medium`
1783
+ */
1784
+ export const SynRadioButtonBorderRadiusMedium: string;
1785
+
1786
+ /**
1787
+ * Maps to the css variable `--syn-radio-button-border-radius-small`
1788
+ */
1789
+ export const SynRadioButtonBorderRadiusSmall: string;
1790
+
1771
1791
  /**
1772
1792
  * Maps to the css variable `--syn-range-color-inactive`
1773
1793
  */
@@ -2113,6 +2133,16 @@ export const SynTypographyColorText: string;
2113
2133
  */
2114
2134
  export const SynTypographyColorTextInverted: string;
2115
2135
 
2136
+ /**
2137
+ * Maps to the css variable `--syn-typography-color-text-quiet`
2138
+ */
2139
+ export const SynTypographyColorTextQuiet: string;
2140
+
2141
+ /**
2142
+ * Maps to the css variable `--syn-typography-color-text-quiet-inverted`
2143
+ */
2144
+ export const SynTypographyColorTextQuietInverted: string;
2145
+
2116
2146
  /**
2117
2147
  * Maps to the css variable `--syn-z-index-dialog`
2118
2148
  */
package/data/layers/full/tokens/js/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
 
@@ -1768,6 +1768,26 @@ export const SynProgressIndicatorColor = 'var(--syn-progress-indicator-color)';
1768
1768
  */
1769
1769
  export const SynProgressTrackColor = 'var(--syn-progress-track-color)';
1770
1770
 
1771
+ /**
1772
+ * @type {string}
1773
+ */
1774
+ export const SynRadioButtonBorderColor = 'var(--syn-radio-button-border-color)';
1775
+
1776
+ /**
1777
+ * @type {string}
1778
+ */
1779
+ export const SynRadioButtonBorderRadiusLarge = 'var(--syn-radio-button-border-radius-large)';
1780
+
1781
+ /**
1782
+ * @type {string}
1783
+ */
1784
+ export const SynRadioButtonBorderRadiusMedium = 'var(--syn-radio-button-border-radius-medium)';
1785
+
1786
+ /**
1787
+ * @type {string}
1788
+ */
1789
+ export const SynRadioButtonBorderRadiusSmall = 'var(--syn-radio-button-border-radius-small)';
1790
+
1771
1791
  /**
1772
1792
  * @type {string}
1773
1793
  */
@@ -2113,6 +2133,16 @@ export const SynTypographyColorText = 'var(--syn-typography-color-text)';
2113
2133
  */
2114
2134
  export const SynTypographyColorTextInverted = 'var(--syn-typography-color-text-inverted)';
2115
2135
 
2136
+ /**
2137
+ * @type {string}
2138
+ */
2139
+ export const SynTypographyColorTextQuiet = 'var(--syn-typography-color-text-quiet)';
2140
+
2141
+ /**
2142
+ * @type {string}
2143
+ */
2144
+ export const SynTypographyColorTextQuietInverted = 'var(--syn-typography-color-text-quiet-inverted)';
2145
+
2116
2146
  /**
2117
2147
  * @type {string}
2118
2148
  */
package/data/layers/full/tokens/scss/_tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  */
5
5
  $SynAlertErrorColorBackground: var(--syn-alert-error-color-background) !default;
@@ -355,6 +355,10 @@ $SynPanelBorderRadius: var(--syn-panel-border-radius) !default;
355
355
  $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
356
356
  $SynProgressIndicatorColor: var(--syn-progress-indicator-color) !default;
357
357
  $SynProgressTrackColor: var(--syn-progress-track-color) !default;
358
+ $SynRadioButtonBorderColor: var(--syn-radio-button-border-color) !default;
359
+ $SynRadioButtonBorderRadiusLarge: var(--syn-radio-button-border-radius-large) !default;
360
+ $SynRadioButtonBorderRadiusMedium: var(--syn-radio-button-border-radius-medium) !default;
361
+ $SynRadioButtonBorderRadiusSmall: var(--syn-radio-button-border-radius-small) !default;
358
362
  $SynRangeColorInactive: var(--syn-range-color-inactive) !default;
359
363
  $SynRangeErrorColor: var(--syn-range-error-color) !default;
360
364
  $SynRangeTickColor: var(--syn-range-tick-color) !default;
@@ -424,6 +428,8 @@ $SynTransitionXFast: var(--syn-transition-x-fast) !default;
424
428
  $SynTransitionXSlow: var(--syn-transition-x-slow) !default;
425
429
  $SynTypographyColorText: var(--syn-typography-color-text) !default;
426
430
  $SynTypographyColorTextInverted: var(--syn-typography-color-text-inverted) !default;
431
+ $SynTypographyColorTextQuiet: var(--syn-typography-color-text-quiet) !default;
432
+ $SynTypographyColorTextQuietInverted: var(--syn-typography-color-text-quiet-inverted) !default;
427
433
  $SynZIndexDialog: var(--syn-z-index-dialog) !default;
428
434
  $SynZIndexDrawer: var(--syn-z-index-drawer) !default;
429
435
  $SynZIndexDropdown: var(--syn-z-index-dropdown) !default;
package/data/layers/full/tokens/themes/sick2018_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -360,6 +360,10 @@
360
360
  --syn-panel-border-width: var(--syn-border-width-small);
361
361
  --syn-progress-indicator-color: var(--syn-color-primary-600);
362
362
  --syn-progress-track-color: var(--syn-color-neutral-200);
363
+ --syn-radio-button-border-color: var(--syn-color-neutral-700);
364
+ --syn-radio-button-border-radius-large: var(--syn-border-radius-none);
365
+ --syn-radio-button-border-radius-medium: var(--syn-border-radius-none);
366
+ --syn-radio-button-border-radius-small: var(--syn-border-radius-none);
363
367
  --syn-range-color-inactive: var(--syn-color-neutral-200);
364
368
  --syn-range-error-color: var(--syn-color-error-700);
365
369
  --syn-range-tick-color: var(--syn-color-neutral-400);
@@ -429,6 +433,8 @@
429
433
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
430
434
  --syn-typography-color-text: var(--syn-color-neutral-950);
431
435
  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
436
+ --syn-typography-color-text-quiet: var(--syn-color-neutral-800);
437
+ --syn-typography-color-text-quiet-inverted: var(--syn-color-neutral-200);
432
438
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
433
439
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
434
440
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
package/data/layers/full/tokens/themes/sick2018_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -360,6 +360,10 @@
360
360
  --syn-panel-border-width: var(--syn-border-width-small);
361
361
  --syn-progress-indicator-color: var(--syn-color-primary-600);
362
362
  --syn-progress-track-color: var(--syn-color-neutral-200);
363
+ --syn-radio-button-border-color: var(--syn-color-neutral-700);
364
+ --syn-radio-button-border-radius-large: var(--syn-border-radius-none);
365
+ --syn-radio-button-border-radius-medium: var(--syn-border-radius-none);
366
+ --syn-radio-button-border-radius-small: var(--syn-border-radius-none);
363
367
  --syn-range-color-inactive: var(--syn-color-neutral-200);
364
368
  --syn-range-error-color: var(--syn-color-error-700);
365
369
  --syn-range-tick-color: var(--syn-color-neutral-400);
@@ -429,6 +433,8 @@
429
433
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
430
434
  --syn-typography-color-text: var(--syn-color-neutral-950);
431
435
  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
436
+ --syn-typography-color-text-quiet: var(--syn-color-neutral-800);
437
+ --syn-typography-color-text-quiet-inverted: var(--syn-color-neutral-200);
432
438
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
433
439
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
434
440
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
package/data/layers/full/tokens/themes/sick2025_dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -360,6 +360,10 @@
360
360
  --syn-panel-border-width: var(--syn-border-width-small);
361
361
  --syn-progress-indicator-color: var(--syn-color-primary-500);
362
362
  --syn-progress-track-color: var(--syn-color-neutral-300);
363
+ --syn-radio-button-border-color: var(--syn-color-neutral-1000);
364
+ --syn-radio-button-border-radius-large: var(--syn-border-radius-small);
365
+ --syn-radio-button-border-radius-medium: var(--syn-border-radius-small);
366
+ --syn-radio-button-border-radius-small: var(--syn-border-radius-small);
363
367
  --syn-range-color-inactive: var(--syn-color-neutral-300);
364
368
  --syn-range-error-color: var(--syn-color-error-600);
365
369
  --syn-range-tick-color: var(--syn-color-neutral-600);
@@ -429,6 +433,8 @@
429
433
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
430
434
  --syn-typography-color-text: var(--syn-color-neutral-1000);
431
435
  --syn-typography-color-text-inverted: var(--syn-color-neutral-50);
436
+ --syn-typography-color-text-quiet: var(--syn-color-neutral-800);
437
+ --syn-typography-color-text-quiet-inverted: var(--syn-color-neutral-200);
432
438
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
433
439
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
434
440
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
package/data/layers/full/tokens/themes/sick2025_light.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @synergy-design-system/tokens version 3.15.7
2
+ * @synergy-design-system/tokens version 3.17.0
3
3
  * SICK Global UX Foundation
4
4
  * Do not edit directly, this file was auto-generated.
5
5
  */
@@ -360,6 +360,10 @@
360
360
  --syn-panel-border-width: var(--syn-border-width-small);
361
361
  --syn-progress-indicator-color: var(--syn-color-primary-700);
362
362
  --syn-progress-track-color: var(--syn-color-neutral-100);
363
+ --syn-radio-button-border-color: var(--syn-color-neutral-950);
364
+ --syn-radio-button-border-radius-large: var(--syn-border-radius-small);
365
+ --syn-radio-button-border-radius-medium: var(--syn-border-radius-small);
366
+ --syn-radio-button-border-radius-small: var(--syn-border-radius-small);
363
367
  --syn-range-color-inactive: var(--syn-color-neutral-100);
364
368
  --syn-range-error-color: var(--syn-color-error-600);
365
369
  --syn-range-tick-color: var(--syn-color-neutral-500);
@@ -429,6 +433,8 @@
429
433
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
430
434
  --syn-typography-color-text: var(--syn-color-neutral-950);
431
435
  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
436
+ --syn-typography-color-text-quiet: var(--syn-color-neutral-700);
437
+ --syn-typography-color-text-quiet-inverted: var(--syn-color-neutral-300);
432
438
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
433
439
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
434
440
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */