@sbb-esta/lyne-elements 3.3.0 → 3.4.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 (147) hide show
  1. package/autocomplete/autocomplete-base-element.d.ts +3 -4
  2. package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  3. package/autocomplete/autocomplete-base-element.js +88 -83
  4. package/autocomplete/autocomplete.component.d.ts +0 -1
  5. package/autocomplete/autocomplete.component.d.ts.map +1 -1
  6. package/autocomplete/autocomplete.component.js +26 -26
  7. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  8. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  9. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +34 -44
  10. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  11. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  12. package/checkbox/checkbox-panel/checkbox-panel.component.js +36 -33
  13. package/core/i18n/i18n.d.ts +5 -0
  14. package/core/i18n/i18n.d.ts.map +1 -1
  15. package/core/i18n/i18n.js +108 -84
  16. package/core/i18n.js +84 -80
  17. package/core/mixins/element-internals-mixin.js +1 -1
  18. package/core/mixins/form-associated-input-mixin.d.ts +1 -0
  19. package/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  20. package/core/mixins/form-associated-input-mixin.js +2 -2
  21. package/core/mixins/form-associated-mixin.d.ts.map +1 -1
  22. package/core/mixins/form-associated-mixin.js +22 -16
  23. package/core/styles/core/mediaqueries.scss +1 -1
  24. package/core/styles/core.scss +34 -1
  25. package/core/styles/mixins/typo.scss +88 -41
  26. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +530 -0
  27. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +1123 -0
  28. package/core.css +37 -7
  29. package/custom-elements.json +2063 -554
  30. package/date-input/date-input.component.d.ts +5 -0
  31. package/date-input/date-input.component.d.ts.map +1 -1
  32. package/date-input/date-input.component.js +7 -0
  33. package/development/autocomplete/autocomplete-base-element.d.ts +3 -4
  34. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  35. package/development/autocomplete/autocomplete-base-element.js +30 -15
  36. package/development/autocomplete/autocomplete.component.d.ts +0 -1
  37. package/development/autocomplete/autocomplete.component.d.ts.map +1 -1
  38. package/development/autocomplete/autocomplete.component.js +16 -21
  39. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  40. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  41. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +26 -35
  42. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  43. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  44. package/development/checkbox/checkbox-panel/checkbox-panel.component.js +10 -4
  45. package/development/core/i18n/i18n.d.ts +5 -0
  46. package/development/core/i18n/i18n.d.ts.map +1 -1
  47. package/development/core/i18n/i18n.js +38 -10
  48. package/development/core/i18n.js +5 -1
  49. package/development/core/mixins/element-internals-mixin.js +2 -2
  50. package/development/core/mixins/form-associated-input-mixin.d.ts +1 -0
  51. package/development/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  52. package/development/core/mixins/form-associated-input-mixin.js +3 -2
  53. package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
  54. package/development/core/mixins/form-associated-mixin.js +14 -7
  55. package/development/date-input/date-input.component.d.ts +5 -0
  56. package/development/date-input/date-input.component.d.ts.map +1 -1
  57. package/development/date-input/date-input.component.js +8 -1
  58. package/development/dialog/dialog-title/dialog-title.component.js +2 -6
  59. package/development/file-selector/common/file-selector-common.d.ts +2 -1
  60. package/development/file-selector/common/file-selector-common.d.ts.map +1 -1
  61. package/development/file-selector/common/file-selector-common.js +64 -19
  62. package/development/file-selector/common.js +1 -1
  63. package/development/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
  64. package/development/file-selector/file-selector/file-selector.component.js +12 -17
  65. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
  66. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  67. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +32 -76
  68. package/development/{file-selector-common-csww18o8.js → file-selector-common-BxXdRZxt.js} +3 -3
  69. package/development/file-selector.js +1 -1
  70. package/development/form-field/form-field/form-field.component.d.ts +6 -3
  71. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  72. package/development/form-field/form-field/form-field.component.js +4 -6
  73. package/development/header/common/header-action-common.js +4 -1
  74. package/development/navigation/common/navigation-action-common.js +5 -8
  75. package/development/navigation/navigation/navigation.component.js +21 -4
  76. package/development/navigation/navigation-marker/navigation-marker.component.js +5 -8
  77. package/development/navigation/navigation-section/navigation-section.component.js +6 -19
  78. package/development/notification/notification.component.js +1 -1
  79. package/development/option/option/option-base-element.d.ts.map +1 -1
  80. package/development/option/option/option-base-element.js +2 -1
  81. package/development/paginator/common/paginator-common.d.ts +3 -0
  82. package/development/paginator/common/paginator-common.d.ts.map +1 -1
  83. package/development/paginator/common/paginator-common.js +68 -10
  84. package/development/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  85. package/development/paginator/compact-paginator/compact-paginator.component.js +8 -3
  86. package/development/paginator/paginator/paginator.component.d.ts +5 -0
  87. package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
  88. package/development/paginator/paginator/paginator.component.js +28 -6
  89. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  90. package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  91. package/development/tabs/tab-group/tab-group.component.js +3 -4
  92. package/development/time-input/time-input.component.d.ts +5 -0
  93. package/development/time-input/time-input.component.d.ts.map +1 -1
  94. package/development/time-input/time-input.component.js +8 -1
  95. package/development/title/title-base.js +14 -67
  96. package/development/title/title.component.js +17 -14
  97. package/development/toast/toast.component.js +6 -9
  98. package/development/toggle-check/toggle-check.component.d.ts +2 -2
  99. package/development/toggle-check/toggle-check.component.d.ts.map +1 -1
  100. package/development/toggle-check/toggle-check.component.js +4 -4
  101. package/development/train/train-wagon/train-wagon.component.js +6 -9
  102. package/dialog/dialog-title/dialog-title.component.js +1 -1
  103. package/file-selector/common/file-selector-common.d.ts +2 -1
  104. package/file-selector/common/file-selector-common.d.ts.map +1 -1
  105. package/file-selector/common/file-selector-common.js +88 -63
  106. package/file-selector/common.js +1 -1
  107. package/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
  108. package/file-selector/file-selector/file-selector.component.js +26 -31
  109. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
  110. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  111. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +50 -74
  112. package/file-selector-common-Cn6U8goV.js +5 -0
  113. package/file-selector.js +1 -1
  114. package/form-field/form-field/form-field.component.d.ts +6 -3
  115. package/form-field/form-field/form-field.component.d.ts.map +1 -1
  116. package/form-field/form-field/form-field.component.js +3 -5
  117. package/header/common/header-action-common.js +1 -1
  118. package/navigation/common/navigation-action-common.js +8 -8
  119. package/navigation/navigation/navigation.component.js +1 -1
  120. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  121. package/navigation/navigation-section/navigation-section.component.js +14 -14
  122. package/notification/notification.component.js +1 -1
  123. package/option/option/option-base-element.d.ts.map +1 -1
  124. package/option/option/option-base-element.js +18 -18
  125. package/package.json +1 -1
  126. package/paginator/common/paginator-common.d.ts +3 -0
  127. package/paginator/common/paginator-common.d.ts.map +1 -1
  128. package/paginator/common/paginator-common.js +103 -63
  129. package/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  130. package/paginator/compact-paginator/compact-paginator.component.js +13 -8
  131. package/paginator/paginator/paginator.component.d.ts +5 -0
  132. package/paginator/paginator/paginator.component.d.ts.map +1 -1
  133. package/paginator/paginator/paginator.component.js +77 -61
  134. package/sidebar/sidebar-title/sidebar-title.component.js +14 -14
  135. package/standard-theme.css +37 -7
  136. package/tabs/tab-group/tab-group.component.js +7 -7
  137. package/time-input/time-input.component.d.ts +5 -0
  138. package/time-input/time-input.component.d.ts.map +1 -1
  139. package/time-input/time-input.component.js +10 -3
  140. package/title/title-base.js +33 -33
  141. package/title/title.component.js +9 -9
  142. package/toast/toast.component.js +1 -1
  143. package/toggle-check/toggle-check.component.d.ts +2 -2
  144. package/toggle-check/toggle-check.component.d.ts.map +1 -1
  145. package/toggle-check/toggle-check.component.js +28 -28
  146. package/train/train-wagon/train-wagon.component.js +6 -6
  147. package/file-selector-common-Dw5d8vA4.js +0 -5
package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss ADDED
@@ -0,0 +1,530 @@
1
+ $sbb-animation-duration-1x: 0.04s;
2
+ $sbb-animation-duration-2x: 0.08s;
3
+ $sbb-animation-duration-3x: 0.12s;
4
+ $sbb-animation-duration-4x: 0.16s;
5
+ $sbb-animation-duration-5x: 0.20s;
6
+ $sbb-animation-duration-6x: 0.24s;
7
+ $sbb-animation-duration-12x: 0.48s;
8
+ $sbb-animation-easing: cubic-bezier(.47, .1, 1, .63);
9
+ /// Original Value: 1px
10
+ $sbb-border-width-1x: 0.0625rem;
11
+ /// Original Value: 2px
12
+ $sbb-border-width-2x: 0.125rem;
13
+ /// Original Value: 3px
14
+ $sbb-border-width-3x: 0.1875rem;
15
+ /// Original Value: 4px
16
+ $sbb-border-width-4x: 0.25rem;
17
+ /// Original Value: 2px
18
+ $sbb-border-radius-1x: 0.125rem;
19
+ /// Original Value: 4px
20
+ $sbb-border-radius-2x: 0.25rem;
21
+ /// Original Value: 8px
22
+ $sbb-border-radius-4x: 0.5rem;
23
+ /// Original Value: 12px
24
+ $sbb-border-radius-6x: 0.75rem;
25
+ /// Original Value: 16px
26
+ $sbb-border-radius-8x: 1rem;
27
+ /// Original Value: 32px
28
+ $sbb-border-radius-16x: 2rem;
29
+ /// Original Value: 0px
30
+ $sbb-breakpoint-zero-min: 0rem;
31
+ /// Original Value: 359px
32
+ $sbb-breakpoint-zero-max: 22.4375rem;
33
+ /// Original Value: 360px
34
+ $sbb-breakpoint-micro-min: 22.5rem;
35
+ /// Original Value: 599px
36
+ $sbb-breakpoint-micro-max: 37.4375rem;
37
+ /// Original Value: 600px
38
+ $sbb-breakpoint-small-min: 37.5rem;
39
+ /// Original Value: 839px
40
+ $sbb-breakpoint-small-max: 52.4375rem;
41
+ /// Original Value: 840px
42
+ $sbb-breakpoint-medium-min: 52.5rem;
43
+ /// Original Value: 1023px
44
+ $sbb-breakpoint-medium-max: 63.9375rem;
45
+ /// Original Value: 1024px
46
+ $sbb-breakpoint-large-min: 64rem;
47
+ /// Original Value: 1279px
48
+ $sbb-breakpoint-large-max: 79.9375rem;
49
+ /// Original Value: 1280px
50
+ $sbb-breakpoint-wide-min: 80rem;
51
+ /// Original Value: 1439px
52
+ $sbb-breakpoint-wide-max: 89.9375rem;
53
+ /// Original Value: 1440px
54
+ $sbb-breakpoint-ultra-min: 90rem;
55
+ /// Original Value: 2579px
56
+ $sbb-breakpoint-ultra-max: 161.1875rem;
57
+ $sbb-color-black: #000000;
58
+ $sbb-color-black-alpha-0: rgba(0, 0, 0, 0);
59
+ $sbb-color-black-alpha-10: rgba(0, 0, 0, 0.1);
60
+ $sbb-color-black-alpha-15: rgba(0, 0, 0, 0.15);
61
+ $sbb-color-black-alpha-20: rgba(0, 0, 0, 0.2);
62
+ $sbb-color-black-alpha-30: rgba(0, 0, 0, 0.3);
63
+ $sbb-color-black-alpha-40: rgba(0, 0, 0, 0.4);
64
+ $sbb-color-black-alpha-50: rgba(0, 0, 0, 0.5);
65
+ $sbb-color-black-alpha-60: rgba(0, 0, 0, 0.6);
66
+ $sbb-color-black-alpha-70: rgba(0, 0, 0, 0.7);
67
+ $sbb-color-midnight: #151515;
68
+ $sbb-color-blue: #2d327d;
69
+ $sbb-color-charcoal: #212121;
70
+ $sbb-color-iron: #444444;
71
+ $sbb-color-anthracite: #5a5a5a;
72
+ $sbb-color-granite: #686868;
73
+ $sbb-color-metal: #767676;
74
+ $sbb-color-metal-alpha-0: rgba(118, 118, 118, 0);
75
+ $sbb-color-metal-alpha-20: rgba(118, 118, 118, 0.2);
76
+ $sbb-color-smoke: #8d8d8d;
77
+ $sbb-color-smoke-alpha-0: rgba(141, 141, 141, 0);
78
+ $sbb-color-smoke-alpha-5: rgba(141, 141, 141, 0.05);
79
+ $sbb-color-smoke-alpha-10: rgba(141, 141, 141, 0.1);
80
+ $sbb-color-smoke-alpha-20: rgba(141, 141, 141, 0.2);
81
+ $sbb-color-storm: #a8a8a8;
82
+ $sbb-color-graphite: #b7b7b7;
83
+ $sbb-color-cement: #bdbdbd;
84
+ $sbb-color-cement-alpha-0: rgba(189, 189, 189, 0);
85
+ $sbb-color-cement-alpha-20: rgba(189, 189, 189, 0.2);
86
+ $sbb-color-platinum: #cdcdcd;
87
+ $sbb-color-platinum-alpha-0: rgba(205, 205, 205, 0);
88
+ $sbb-color-platinum-alpha-20: rgba(205, 205, 205, 0.2);
89
+ $sbb-color-aluminium: #d2d2d2;
90
+ $sbb-color-silver: #dcdcdc;
91
+ $sbb-color-cloud: #e5e5e5;
92
+ $sbb-color-cloud-alpha-80: rgba(229, 229, 229, 0.8);
93
+ $sbb-color-milk: #f6f6f6;
94
+ $sbb-color-red: #eb0000;
95
+ $sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
96
+ $sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
97
+ $sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
98
+ $sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
99
+ $sbb-color-red-mode-dark: #ff3838;
100
+ $sbb-color-red125: #c60018;
101
+ $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
102
+ $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
103
+ $sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
104
+ $sbb-color-red150: #a20013;
105
+ $sbb-color-royal: #06348b;
106
+ $sbb-color-royal125: #032668;
107
+ $sbb-color-royal150: #021c4e;
108
+ $sbb-color-white: #ffffff;
109
+ $sbb-color-white-alpha-0: rgba(255, 255, 255, 0);
110
+ $sbb-color-white-alpha-20: rgba(255, 255, 255, 0.2);
111
+ $sbb-color-white-alpha-30: rgba(255, 255, 255, 0.3);
112
+ $sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
113
+ $sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
114
+ $sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
115
+ $sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
116
+ $sbb-color-sky: #0074bf;
117
+ $sbb-color-night: #143a85;
118
+ $sbb-color-violet: #6f2282;
119
+ $sbb-color-pink: #c7387a;
120
+ $sbb-color-autumn: #cf3b00;
121
+ $sbb-color-orange: #f27e00;
122
+ $sbb-color-peach: #fcbb00;
123
+ $sbb-color-lemon: #ffde15;
124
+ $sbb-color-brown: #a05400;
125
+ $sbb-color-green: #008233;
126
+ $sbb-color-turquoise: #007e84;
127
+ /// Original Value: 3px
128
+ $sbb-focus-outline-offset: 0.1875rem;
129
+ $sbb-hover-image-brightness: 1.075;
130
+ $sbb-layout-base-grid-columns-zero: 4;
131
+ $sbb-layout-base-grid-columns-micro: 4;
132
+ $sbb-layout-base-grid-columns-small: 4;
133
+ $sbb-layout-base-grid-columns-medium: 8;
134
+ $sbb-layout-base-grid-columns-large: 8;
135
+ $sbb-layout-base-grid-columns-wide: 12;
136
+ $sbb-layout-base-grid-columns-ultra: 16;
137
+ /// Original Value: 16px
138
+ $sbb-layout-base-grid-gutter-responsive-zero: 1rem;
139
+ /// Original Value: 16px
140
+ $sbb-layout-base-grid-gutter-responsive-micro: 1rem;
141
+ /// Original Value: 24px
142
+ $sbb-layout-base-grid-gutter-responsive-small: 1.5rem;
143
+ /// Original Value: 24px
144
+ $sbb-layout-base-grid-gutter-responsive-medium: 1.5rem;
145
+ /// Original Value: 32px
146
+ $sbb-layout-base-grid-gutter-responsive-large: 2rem;
147
+ /// Original Value: 32px
148
+ $sbb-layout-base-grid-gutter-responsive-wide: 2rem;
149
+ /// Original Value: 32px
150
+ $sbb-layout-base-grid-gutter-responsive-ultra: 2rem;
151
+ /// Original Value: 16px
152
+ $sbb-layout-base-offset-responsive-zero: 1rem;
153
+ /// Original Value: 20px
154
+ $sbb-layout-base-offset-responsive-micro: 1.25rem;
155
+ /// Original Value: 48px
156
+ $sbb-layout-base-offset-responsive-small: 3rem;
157
+ /// Original Value: 56px
158
+ $sbb-layout-base-offset-responsive-medium: 3.5rem;
159
+ /// Original Value: 64px
160
+ $sbb-layout-base-offset-responsive-large: 4rem;
161
+ /// Original Value: 72px
162
+ $sbb-layout-base-offset-responsive-wide: 4.5rem;
163
+ /// Original Value: 120px
164
+ $sbb-layout-base-offset-responsive-ultra: 7.5rem;
165
+ /// Original Value: 1200px
166
+ $sbb-layout-base-page-max-width: 75rem;
167
+ /// Original Value: 0px
168
+ $sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
169
+ /// Original Value: 2px
170
+ $sbb-shadow-elevation-level-3-shadow-1-offset-y: 0.125rem;
171
+ /// Original Value: 16px
172
+ $sbb-shadow-elevation-level-3-shadow-1-blur: 1rem;
173
+ /// Original Value: 0px
174
+ $sbb-shadow-elevation-level-3-shadow-1-spread: 0rem;
175
+ /// Original Value: 0px
176
+ $sbb-shadow-elevation-level-3-shadow-2-offset-x: 0rem;
177
+ /// Original Value: 1px
178
+ $sbb-shadow-elevation-level-3-shadow-2-offset-y: 0.0625rem;
179
+ /// Original Value: 4px
180
+ $sbb-shadow-elevation-level-3-shadow-2-blur: 0.25rem;
181
+ /// Original Value: 0px
182
+ $sbb-shadow-elevation-level-3-shadow-2-spread: 0rem;
183
+ $sbb-shadow-elevation-level-3-soft-1-color: rgba(141, 141, 141, 0.05);
184
+ $sbb-shadow-elevation-level-3-soft-2-color: rgba(141, 141, 141, 0.1);
185
+ $sbb-shadow-elevation-level-3-soft-negative-1-color: rgba(0, 0, 0, 0.15);
186
+ $sbb-shadow-elevation-level-3-soft-negative-2-color: rgba(0, 0, 0, 0.2);
187
+ $sbb-shadow-elevation-level-3-hard-1-color: rgba(141, 141, 141, 0.1);
188
+ $sbb-shadow-elevation-level-3-hard-2-color: rgba(141, 141, 141, 0.2);
189
+ $sbb-shadow-elevation-level-3-hard-negative-1-color: rgba(0, 0, 0, 0.3);
190
+ $sbb-shadow-elevation-level-3-hard-negative-2-color: rgba(0, 0, 0, 0.4);
191
+ /// Original Value: 0px
192
+ $sbb-shadow-elevation-level-5-shadow-1-offset-x: 0rem;
193
+ /// Original Value: 4px
194
+ $sbb-shadow-elevation-level-5-shadow-1-offset-y: 0.25rem;
195
+ /// Original Value: 32px
196
+ $sbb-shadow-elevation-level-5-shadow-1-blur: 2rem;
197
+ /// Original Value: 0px
198
+ $sbb-shadow-elevation-level-5-shadow-1-spread: 0rem;
199
+ /// Original Value: 0px
200
+ $sbb-shadow-elevation-level-5-shadow-2-offset-x: 0rem;
201
+ /// Original Value: 1px
202
+ $sbb-shadow-elevation-level-5-shadow-2-offset-y: 0.0625rem;
203
+ /// Original Value: 8px
204
+ $sbb-shadow-elevation-level-5-shadow-2-blur: 0.5rem;
205
+ /// Original Value: 0px
206
+ $sbb-shadow-elevation-level-5-shadow-2-spread: 0rem;
207
+ $sbb-shadow-elevation-level-5-soft-1-color: rgba(141, 141, 141, 0.05);
208
+ $sbb-shadow-elevation-level-5-soft-2-color: rgba(141, 141, 141, 0.1);
209
+ $sbb-shadow-elevation-level-5-soft-negative-1-color: rgba(0, 0, 0, 0.15);
210
+ $sbb-shadow-elevation-level-5-soft-negative-2-color: rgba(0, 0, 0, 0.2);
211
+ $sbb-shadow-elevation-level-5-hard-1-color: rgba(141, 141, 141, 0.1);
212
+ $sbb-shadow-elevation-level-5-hard-2-color: rgba(141, 141, 141, 0.2);
213
+ $sbb-shadow-elevation-level-5-hard-negative-1-color: rgba(0, 0, 0, 0.3);
214
+ $sbb-shadow-elevation-level-5-hard-negative-2-color: rgba(0, 0, 0, 0.4);
215
+ /// Original Value: 0px
216
+ $sbb-shadow-elevation-level-9-shadow-1-offset-x: 0rem;
217
+ /// Original Value: 16px
218
+ $sbb-shadow-elevation-level-9-shadow-1-offset-y: 1rem;
219
+ /// Original Value: 128px
220
+ $sbb-shadow-elevation-level-9-shadow-1-blur: 8rem;
221
+ /// Original Value: 0px
222
+ $sbb-shadow-elevation-level-9-shadow-1-spread: 0rem;
223
+ /// Original Value: 0px
224
+ $sbb-shadow-elevation-level-9-shadow-2-offset-x: 0rem;
225
+ /// Original Value: 4px
226
+ $sbb-shadow-elevation-level-9-shadow-2-offset-y: 0.25rem;
227
+ /// Original Value: 32px
228
+ $sbb-shadow-elevation-level-9-shadow-2-blur: 2rem;
229
+ /// Original Value: 0px
230
+ $sbb-shadow-elevation-level-9-shadow-2-spread: 0rem;
231
+ $sbb-shadow-elevation-level-9-soft-1-color: rgba(141, 141, 141, 0.05);
232
+ $sbb-shadow-elevation-level-9-soft-2-color: rgba(141, 141, 141, 0.1);
233
+ $sbb-shadow-elevation-level-9-soft-negative-1-color: rgba(0, 0, 0, 0.15);
234
+ $sbb-shadow-elevation-level-9-soft-negative-2-color: rgba(0, 0, 0, 0.2);
235
+ $sbb-shadow-elevation-level-9-hard-1-color: rgba(141, 141, 141, 0.1);
236
+ $sbb-shadow-elevation-level-9-hard-2-color: rgba(141, 141, 141, 0.2);
237
+ $sbb-shadow-elevation-level-9-hard-negative-1-color: rgba(0, 0, 0, 0.3);
238
+ $sbb-shadow-elevation-level-9-hard-negative-2-color: rgba(0, 0, 0, 0.4);
239
+ /// Original Value: 0px
240
+ $sbb-shadow-elevation-level-11-shadow-1-offset-x: 0rem;
241
+ /// Original Value: 24px
242
+ $sbb-shadow-elevation-level-11-shadow-1-offset-y: 1.5rem;
243
+ /// Original Value: 192px
244
+ $sbb-shadow-elevation-level-11-shadow-1-blur: 12rem;
245
+ /// Original Value: 0px
246
+ $sbb-shadow-elevation-level-11-shadow-1-spread: 0rem;
247
+ /// Original Value: 0px
248
+ $sbb-shadow-elevation-level-11-shadow-2-offset-x: 0rem;
249
+ /// Original Value: 4px
250
+ $sbb-shadow-elevation-level-11-shadow-2-offset-y: 0.25rem;
251
+ /// Original Value: 64px
252
+ $sbb-shadow-elevation-level-11-shadow-2-blur: 4rem;
253
+ /// Original Value: 0px
254
+ $sbb-shadow-elevation-level-11-shadow-2-spread: 0rem;
255
+ $sbb-shadow-elevation-level-11-soft-1-color: rgba(141, 141, 141, 0.05);
256
+ $sbb-shadow-elevation-level-11-soft-2-color: rgba(141, 141, 141, 0.1);
257
+ $sbb-shadow-elevation-level-11-soft-negative-1-color: rgba(0, 0, 0, 0.15);
258
+ $sbb-shadow-elevation-level-11-soft-negative-2-color: rgba(0, 0, 0, 0.2);
259
+ $sbb-shadow-elevation-level-11-hard-1-color: rgba(141, 141, 141, 0.1);
260
+ $sbb-shadow-elevation-level-11-hard-2-color: rgba(141, 141, 141, 0.2);
261
+ $sbb-shadow-elevation-level-11-hard-negative-1-color: rgba(0, 0, 0, 0.3);
262
+ $sbb-shadow-elevation-level-11-hard-negative-2-color: rgba(0, 0, 0, 0.4);
263
+ /// Original Value: 28px
264
+ $sbb-size-element-xxxs-zero: 1.75rem;
265
+ /// Original Value: 28px
266
+ $sbb-size-element-xxxs-micro: 1.75rem;
267
+ /// Original Value: 28px
268
+ $sbb-size-element-xxxs-small: 1.75rem;
269
+ /// Original Value: 32px
270
+ $sbb-size-element-xxxs-medium: 2rem;
271
+ /// Original Value: 32px
272
+ $sbb-size-element-xxxs-large: 2rem;
273
+ /// Original Value: 32px
274
+ $sbb-size-element-xxxs-wide: 2rem;
275
+ /// Original Value: 32px
276
+ $sbb-size-element-xxxs-ultra: 2rem;
277
+ /// Original Value: 32px
278
+ $sbb-size-element-xxs-zero: 2rem;
279
+ /// Original Value: 32px
280
+ $sbb-size-element-xxs-micro: 2rem;
281
+ /// Original Value: 32px
282
+ $sbb-size-element-xxs-small: 2rem;
283
+ /// Original Value: 36px
284
+ $sbb-size-element-xxs-medium: 2.25rem;
285
+ /// Original Value: 36px
286
+ $sbb-size-element-xxs-large: 2.25rem;
287
+ /// Original Value: 36px
288
+ $sbb-size-element-xxs-wide: 2.25rem;
289
+ /// Original Value: 36px
290
+ $sbb-size-element-xxs-ultra: 2.25rem;
291
+ /// Original Value: 36px
292
+ $sbb-size-element-xs-zero: 2.25rem;
293
+ /// Original Value: 36px
294
+ $sbb-size-element-xs-micro: 2.25rem;
295
+ /// Original Value: 36px
296
+ $sbb-size-element-xs-small: 2.25rem;
297
+ /// Original Value: 40px
298
+ $sbb-size-element-xs-medium: 2.5rem;
299
+ /// Original Value: 40px
300
+ $sbb-size-element-xs-large: 2.5rem;
301
+ /// Original Value: 40px
302
+ $sbb-size-element-xs-wide: 2.5rem;
303
+ /// Original Value: 40px
304
+ $sbb-size-element-xs-ultra: 2.5rem;
305
+ /// Original Value: 44px
306
+ $sbb-size-element-s-zero: 2.75rem;
307
+ /// Original Value: 44px
308
+ $sbb-size-element-s-micro: 2.75rem;
309
+ /// Original Value: 44px
310
+ $sbb-size-element-s-small: 2.75rem;
311
+ /// Original Value: 48px
312
+ $sbb-size-element-s-medium: 3rem;
313
+ /// Original Value: 48px
314
+ $sbb-size-element-s-large: 3rem;
315
+ /// Original Value: 48px
316
+ $sbb-size-element-s-wide: 3rem;
317
+ /// Original Value: 48px
318
+ $sbb-size-element-s-ultra: 3rem;
319
+ /// Original Value: 48px
320
+ $sbb-size-element-m-zero: 3rem;
321
+ /// Original Value: 48px
322
+ $sbb-size-element-m-micro: 3rem;
323
+ /// Original Value: 48px
324
+ $sbb-size-element-m-small: 3rem;
325
+ /// Original Value: 56px
326
+ $sbb-size-element-m-medium: 3.5rem;
327
+ /// Original Value: 56px
328
+ $sbb-size-element-m-large: 3.5rem;
329
+ /// Original Value: 56px
330
+ $sbb-size-element-m-wide: 3.5rem;
331
+ /// Original Value: 56px
332
+ $sbb-size-element-m-ultra: 3.5rem;
333
+ /// Original Value: 56px
334
+ $sbb-size-element-l-zero: 3.5rem;
335
+ /// Original Value: 56px
336
+ $sbb-size-element-l-micro: 3.5rem;
337
+ /// Original Value: 56px
338
+ $sbb-size-element-l-small: 3.5rem;
339
+ /// Original Value: 64px
340
+ $sbb-size-element-l-medium: 4rem;
341
+ /// Original Value: 64px
342
+ $sbb-size-element-l-large: 4rem;
343
+ /// Original Value: 64px
344
+ $sbb-size-element-l-wide: 4rem;
345
+ /// Original Value: 64px
346
+ $sbb-size-element-l-ultra: 4rem;
347
+ /// Original Value: 16px
348
+ $sbb-size-icon-ui-extra-small: 1rem;
349
+ /// Original Value: 24px
350
+ $sbb-size-icon-ui-small: 1.5rem;
351
+ /// Original Value: 36px
352
+ $sbb-size-icon-ui-medium: 2.25rem;
353
+ /// Original Value: 48px
354
+ $sbb-size-icon-ui-large: 3rem;
355
+ /// Original Value: 4px
356
+ $sbb-spacing-fixed-1x: 0.25rem;
357
+ /// Original Value: 8px
358
+ $sbb-spacing-fixed-2x: 0.5rem;
359
+ /// Original Value: 12px
360
+ $sbb-spacing-fixed-3x: 0.75rem;
361
+ /// Original Value: 16px
362
+ $sbb-spacing-fixed-4x: 1rem;
363
+ /// Original Value: 20px
364
+ $sbb-spacing-fixed-5x: 1.25rem;
365
+ /// Original Value: 24px
366
+ $sbb-spacing-fixed-6x: 1.5rem;
367
+ /// Original Value: 28px
368
+ $sbb-spacing-fixed-7x: 1.75rem;
369
+ /// Original Value: 32px
370
+ $sbb-spacing-fixed-8x: 2rem;
371
+ /// Original Value: 36px
372
+ $sbb-spacing-fixed-9x: 2.25rem;
373
+ /// Original Value: 40px
374
+ $sbb-spacing-fixed-10x: 2.5rem;
375
+ /// Original Value: 48px
376
+ $sbb-spacing-fixed-12x: 3rem;
377
+ /// Original Value: 56px
378
+ $sbb-spacing-fixed-14x: 3.5rem;
379
+ /// Original Value: 64px
380
+ $sbb-spacing-fixed-16x: 4rem;
381
+ /// Original Value: 72px
382
+ $sbb-spacing-fixed-18x: 4.5rem;
383
+ /// Original Value: 80px
384
+ $sbb-spacing-fixed-20x: 5rem;
385
+ /// Original Value: 96px
386
+ $sbb-spacing-fixed-24x: 6rem;
387
+ /// Original Value: 120px
388
+ $sbb-spacing-fixed-30x: 7.5rem;
389
+ /// Original Value: 12px
390
+ $sbb-spacing-responsive-xxxs-zero: 0.75rem;
391
+ /// Original Value: 12px
392
+ $sbb-spacing-responsive-xxxs-micro: 0.75rem;
393
+ /// Original Value: 12px
394
+ $sbb-spacing-responsive-xxxs-small: 0.75rem;
395
+ /// Original Value: 16px
396
+ $sbb-spacing-responsive-xxxs-medium: 1rem;
397
+ /// Original Value: 16px
398
+ $sbb-spacing-responsive-xxxs-large: 1rem;
399
+ /// Original Value: 16px
400
+ $sbb-spacing-responsive-xxxs-wide: 1rem;
401
+ /// Original Value: 16px
402
+ $sbb-spacing-responsive-xxxs-ultra: 1rem;
403
+ /// Original Value: 16px
404
+ $sbb-spacing-responsive-xxs-zero: 1rem;
405
+ /// Original Value: 16px
406
+ $sbb-spacing-responsive-xxs-micro: 1rem;
407
+ /// Original Value: 16px
408
+ $sbb-spacing-responsive-xxs-small: 1rem;
409
+ /// Original Value: 24px
410
+ $sbb-spacing-responsive-xxs-medium: 1.5rem;
411
+ /// Original Value: 24px
412
+ $sbb-spacing-responsive-xxs-large: 1.5rem;
413
+ /// Original Value: 24px
414
+ $sbb-spacing-responsive-xxs-wide: 1.5rem;
415
+ /// Original Value: 24px
416
+ $sbb-spacing-responsive-xxs-ultra: 1.5rem;
417
+ /// Original Value: 20px
418
+ $sbb-spacing-responsive-xs-zero: 1.25rem;
419
+ /// Original Value: 20px
420
+ $sbb-spacing-responsive-xs-micro: 1.25rem;
421
+ /// Original Value: 20px
422
+ $sbb-spacing-responsive-xs-small: 1.25rem;
423
+ /// Original Value: 24px
424
+ $sbb-spacing-responsive-xs-medium: 1.5rem;
425
+ /// Original Value: 24px
426
+ $sbb-spacing-responsive-xs-large: 1.5rem;
427
+ /// Original Value: 24px
428
+ $sbb-spacing-responsive-xs-wide: 1.5rem;
429
+ /// Original Value: 24px
430
+ $sbb-spacing-responsive-xs-ultra: 1.5rem;
431
+ /// Original Value: 24px
432
+ $sbb-spacing-responsive-s-zero: 1.5rem;
433
+ /// Original Value: 24px
434
+ $sbb-spacing-responsive-s-micro: 1.5rem;
435
+ /// Original Value: 24px
436
+ $sbb-spacing-responsive-s-small: 1.5rem;
437
+ /// Original Value: 32px
438
+ $sbb-spacing-responsive-s-medium: 2rem;
439
+ /// Original Value: 32px
440
+ $sbb-spacing-responsive-s-large: 2rem;
441
+ /// Original Value: 32px
442
+ $sbb-spacing-responsive-s-wide: 2rem;
443
+ /// Original Value: 32px
444
+ $sbb-spacing-responsive-s-ultra: 2rem;
445
+ /// Original Value: 32px
446
+ $sbb-spacing-responsive-m-zero: 2rem;
447
+ /// Original Value: 32px
448
+ $sbb-spacing-responsive-m-micro: 2rem;
449
+ /// Original Value: 32px
450
+ $sbb-spacing-responsive-m-small: 2rem;
451
+ /// Original Value: 40px
452
+ $sbb-spacing-responsive-m-medium: 2.5rem;
453
+ /// Original Value: 40px
454
+ $sbb-spacing-responsive-m-large: 2.5rem;
455
+ /// Original Value: 48px
456
+ $sbb-spacing-responsive-m-wide: 3rem;
457
+ /// Original Value: 48px
458
+ $sbb-spacing-responsive-m-ultra: 3rem;
459
+ /// Original Value: 32px
460
+ $sbb-spacing-responsive-l-zero: 2rem;
461
+ /// Original Value: 32px
462
+ $sbb-spacing-responsive-l-micro: 2rem;
463
+ /// Original Value: 40px
464
+ $sbb-spacing-responsive-l-small: 2.5rem;
465
+ /// Original Value: 48px
466
+ $sbb-spacing-responsive-l-medium: 3rem;
467
+ /// Original Value: 56px
468
+ $sbb-spacing-responsive-l-large: 3.5rem;
469
+ /// Original Value: 56px
470
+ $sbb-spacing-responsive-l-wide: 3.5rem;
471
+ /// Original Value: 64px
472
+ $sbb-spacing-responsive-l-ultra: 4rem;
473
+ /// Original Value: 32px
474
+ $sbb-spacing-responsive-xl-zero: 2rem;
475
+ /// Original Value: 32px
476
+ $sbb-spacing-responsive-xl-micro: 2rem;
477
+ /// Original Value: 48px
478
+ $sbb-spacing-responsive-xl-small: 3rem;
479
+ /// Original Value: 64px
480
+ $sbb-spacing-responsive-xl-medium: 4rem;
481
+ /// Original Value: 80px
482
+ $sbb-spacing-responsive-xl-large: 5rem;
483
+ /// Original Value: 80px
484
+ $sbb-spacing-responsive-xl-wide: 5rem;
485
+ /// Original Value: 96px
486
+ $sbb-spacing-responsive-xl-ultra: 6rem;
487
+ /// Original Value: 48px
488
+ $sbb-spacing-responsive-xxl-zero: 3rem;
489
+ /// Original Value: 48px
490
+ $sbb-spacing-responsive-xxl-micro: 3rem;
491
+ /// Original Value: 72px
492
+ $sbb-spacing-responsive-xxl-small: 4.5rem;
493
+ /// Original Value: 80px
494
+ $sbb-spacing-responsive-xxl-medium: 5rem;
495
+ /// Original Value: 96px
496
+ $sbb-spacing-responsive-xxl-large: 6rem;
497
+ /// Original Value: 96px
498
+ $sbb-spacing-responsive-xxl-wide: 6rem;
499
+ /// Original Value: 120px
500
+ $sbb-spacing-responsive-xxl-ultra: 7.5rem;
501
+ $sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
502
+ $sbb-typo-letter-spacing-titles: 0;
503
+ $sbb-typo-letter-spacing-body-text: 0.03em;
504
+ $sbb-typo-line-height-titles: 1.3;
505
+ $sbb-typo-line-height-body-text: 1.75;
506
+ /// Original Value: 12px
507
+ $sbb-typo-scale-0-75x: 0.75rem;
508
+ /// Original Value: 13px
509
+ $sbb-typo-scale-0-8125x: 0.8125rem;
510
+ /// Original Value: 14px
511
+ $sbb-typo-scale-0-875x: 0.875rem;
512
+ /// Original Value: 16px
513
+ $sbb-typo-scale-default: 1rem;
514
+ /// Original Value: 18px
515
+ $sbb-typo-scale-1-125x: 1.125rem;
516
+ /// Original Value: 20px
517
+ $sbb-typo-scale-1-25x: 1.25rem;
518
+ /// Original Value: 24px
519
+ $sbb-typo-scale-1-5x: 1.5rem;
520
+ /// Original Value: 32px
521
+ $sbb-typo-scale-2x: 2rem;
522
+ /// Original Value: 40px
523
+ $sbb-typo-scale-2-5x: 2.5rem;
524
+ /// Original Value: 48px
525
+ $sbb-typo-scale-3x: 3rem;
526
+ /// Original Value: 56px
527
+ $sbb-typo-scale-3-5x: 3.5rem;
528
+ /// Original Value: 64px
529
+ $sbb-typo-scale-4x: 4rem;
530
+