@odx/ui 5.5.0 → 6.0.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 (206) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +0 -10
  3. package/ag-grid-theme.css +1 -1
  4. package/charts-theme.css +1 -1
  5. package/core-theme.css +1 -1
  6. package/package.json +4 -1
  7. package/scss/3rdparty/ag-grid/theme.scss +9 -7
  8. package/scss/_application.scss +5 -5
  9. package/scss/_base.scss +1 -1
  10. package/scss/_breakpoints.scss +15 -3
  11. package/scss/_color-palettes.scss +32 -32
  12. package/scss/_colors-dark.scss +31 -37
  13. package/scss/_colors.scss +94 -95
  14. package/scss/_controls.scss +45 -45
  15. package/scss/_description-list.scss +7 -13
  16. package/scss/_dimensions.scss +23 -10
  17. package/scss/_helpers.scss +44 -22
  18. package/scss/_layout.scss +2 -4
  19. package/scss/_skeleton.scss +1 -1
  20. package/scss/_text-list.scss +4 -7
  21. package/scss/_typography.scss +3 -6
  22. package/scss/_utils.scss +13 -0
  23. package/scss/_vertical-rythm.scss +1 -1
  24. package/scss/_visuals.scss +6 -6
  25. package/scss/abstract/_breakpoints.scss +15 -3
  26. package/scss/abstract/_dimensions.scss +23 -10
  27. package/scss/abstract/_utils.scss +13 -0
  28. package/scss/accordion-item.component.scss +22 -23
  29. package/scss/action-group.component.scss +6 -6
  30. package/scss/active-indicator.scss +3 -5
  31. package/scss/ag-grid/theme.scss +9 -7
  32. package/scss/anchor-navigation.component.scss +7 -10
  33. package/scss/area-header.component.scss +33 -31
  34. package/scss/autocomplete.component.scss +1 -4
  35. package/scss/avatar.component.scss +52 -11
  36. package/scss/badge.component.scss +11 -13
  37. package/scss/bar.component.scss +14 -18
  38. package/scss/brand-logo.component.scss +2 -4
  39. package/scss/breadcrumbs.component.scss +10 -14
  40. package/scss/button-group.component.scss +4 -8
  41. package/scss/button.component.scss +39 -36
  42. package/scss/calendar.component.scss +60 -56
  43. package/scss/card.component.scss +33 -35
  44. package/scss/cdk/active-indicator.scss +3 -5
  45. package/scss/cdk/connected-overlay.scss +4 -10
  46. package/scss/chart-footer.component.scss +21 -21
  47. package/scss/chart-header.component.scss +49 -49
  48. package/scss/charts/colors/_color-palettes.scss +32 -32
  49. package/scss/charts/components/chart-footer.component.scss +21 -21
  50. package/scss/charts/components/chart-header.component.scss +49 -49
  51. package/scss/charts/components/circle-chart-table.component.scss +1 -1
  52. package/scss/charts/components/line-timeframes-chart.component.scss +4 -4
  53. package/scss/charts/components/mirror-bar-chart.component.scss +2 -2
  54. package/scss/charts/components/multi-axis-box-plot.component.scss +2 -2
  55. package/scss/checkbox.component.scss +29 -30
  56. package/scss/chip-list.component.scss +5 -6
  57. package/scss/chip.component.scss +30 -17
  58. package/scss/circle-chart-table.component.scss +1 -1
  59. package/scss/circular-progress.component.scss +7 -8
  60. package/scss/colors/_color-palettes.scss +32 -32
  61. package/scss/components/accordion-item.component.scss +22 -23
  62. package/scss/components/action-group.component.scss +6 -6
  63. package/scss/components/anchor-navigation.component.scss +7 -10
  64. package/scss/components/area-header.component.scss +33 -31
  65. package/scss/components/autocomplete.component.scss +1 -4
  66. package/scss/components/avatar.component.scss +52 -11
  67. package/scss/components/badge.component.scss +11 -13
  68. package/scss/components/bar.component.scss +14 -18
  69. package/scss/components/brand-logo.component.scss +2 -4
  70. package/scss/components/breadcrumbs.component.scss +10 -14
  71. package/scss/components/button-group.component.scss +4 -8
  72. package/scss/components/button.component.scss +39 -36
  73. package/scss/components/calendar.component.scss +60 -56
  74. package/scss/components/card.component.scss +33 -35
  75. package/scss/components/chart-footer.component.scss +21 -21
  76. package/scss/components/chart-header.component.scss +49 -49
  77. package/scss/components/checkbox.component.scss +29 -30
  78. package/scss/components/chip-list.component.scss +5 -6
  79. package/scss/components/chip.component.scss +30 -17
  80. package/scss/components/circle-chart-table.component.scss +1 -1
  81. package/scss/components/circular-progress.component.scss +7 -8
  82. package/scss/components/content-box.component.scss +10 -7
  83. package/scss/components/datepicker.component.scss +1 -3
  84. package/scss/components/daterangepicker.component.scss +6 -3
  85. package/scss/components/dropdown.component.scss +5 -9
  86. package/scss/components/error-page.component.scss +5 -12
  87. package/scss/components/expandable-list-item.component.scss +6 -6
  88. package/scss/components/footer.component.scss +5 -7
  89. package/scss/components/form-field.component.scss +65 -58
  90. package/scss/components/header-navigation.component.scss +2 -10
  91. package/scss/components/header.component.scss +11 -13
  92. package/scss/components/icon.component.scss +8 -8
  93. package/scss/components/inline-message.component.scss +9 -15
  94. package/scss/components/line-timeframes-chart.component.scss +4 -4
  95. package/scss/components/link.component.scss +5 -5
  96. package/scss/components/list-item.component.scss +16 -18
  97. package/scss/components/list.component.scss +1 -3
  98. package/scss/components/loading-spinner.component.scss +4 -6
  99. package/scss/components/logo.component.scss +6 -10
  100. package/scss/components/main-menu-item.component.scss +15 -24
  101. package/scss/components/main-menu.component.scss +28 -41
  102. package/scss/components/mainfilter-group.component.scss +23 -27
  103. package/scss/components/menu.component.scss +7 -11
  104. package/scss/components/mirror-bar-chart.component.scss +2 -2
  105. package/scss/components/modal.component.scss +37 -43
  106. package/scss/components/multi-axis-box-plot.component.scss +2 -2
  107. package/scss/components/navigation-back.component.scss +5 -6
  108. package/scss/components/notification-center.component.scss +14 -18
  109. package/scss/components/notification-item.component.scss +6 -11
  110. package/scss/components/option.component.scss +11 -15
  111. package/scss/components/paginator.component.scss +5 -8
  112. package/scss/components/progress.component.scss +4 -8
  113. package/scss/components/radio-button.component.scss +23 -23
  114. package/scss/components/radio-group.component.scss +2 -4
  115. package/scss/components/rail-navigation-item.component.scss +19 -22
  116. package/scss/components/rail-navigation.component.scss +7 -12
  117. package/scss/components/rich-list-item-header.component.scss +4 -9
  118. package/scss/components/rich-list-item.component.scss +9 -17
  119. package/scss/components/search-bar.component.scss +13 -15
  120. package/scss/components/select.component.scss +9 -12
  121. package/scss/components/slider.component.scss +11 -14
  122. package/scss/components/spinbox.component.scss +23 -25
  123. package/scss/components/switch.component.scss +98 -123
  124. package/scss/components/tab-bar-item.component.scss +17 -19
  125. package/scss/components/tab-bar.component.scss +23 -28
  126. package/scss/components/table.component.scss +12 -19
  127. package/scss/components/timepicker.component.scss +5 -10
  128. package/scss/components/toast-item.component.scss +9 -15
  129. package/scss/components/toast.component.scss +5 -8
  130. package/scss/components/toggle-button-group.component.scss +13 -14
  131. package/scss/components/toggle-button.component.scss +15 -17
  132. package/scss/components/tooltip.component.scss +8 -13
  133. package/scss/components/wizard-step.component.scss +13 -17
  134. package/scss/components/wizard.component.scss +2 -4
  135. package/scss/connected-overlay.scss +4 -10
  136. package/scss/content-box.component.scss +10 -7
  137. package/scss/core.scss +2 -0
  138. package/scss/datepicker.component.scss +1 -3
  139. package/scss/daterangepicker.component.scss +6 -3
  140. package/scss/dropdown.component.scss +5 -9
  141. package/scss/error-page.component.scss +5 -12
  142. package/scss/expandable-list-item.component.scss +6 -6
  143. package/scss/footer.component.scss +5 -7
  144. package/scss/form-field.component.scss +65 -58
  145. package/scss/header-navigation.component.scss +2 -10
  146. package/scss/header.component.scss +11 -13
  147. package/scss/icon.component.scss +8 -8
  148. package/scss/inline-message.component.scss +9 -15
  149. package/scss/layout/_application.scss +5 -5
  150. package/scss/layout/_base.scss +1 -1
  151. package/scss/layout/_description-list.scss +7 -13
  152. package/scss/layout/_helpers.scss +44 -22
  153. package/scss/layout/_layout.scss +2 -4
  154. package/scss/layout/_text-list.scss +4 -7
  155. package/scss/layout/_typography.scss +62 -70
  156. package/scss/line-timeframes-chart.component.scss +4 -4
  157. package/scss/link.component.scss +5 -5
  158. package/scss/list-item.component.scss +16 -18
  159. package/scss/list.component.scss +1 -3
  160. package/scss/loading-spinner.component.scss +4 -6
  161. package/scss/logo.component.scss +6 -10
  162. package/scss/main-menu-item.component.scss +15 -24
  163. package/scss/main-menu.component.scss +28 -41
  164. package/scss/mainfilter-group.component.scss +23 -27
  165. package/scss/menu.component.scss +7 -11
  166. package/scss/mirror-bar-chart.component.scss +2 -2
  167. package/scss/modal.component.scss +37 -43
  168. package/scss/multi-axis-box-plot.component.scss +2 -2
  169. package/scss/navigation-back.component.scss +5 -6
  170. package/scss/notification-center.component.scss +14 -18
  171. package/scss/notification-item.component.scss +6 -11
  172. package/scss/option.component.scss +11 -15
  173. package/scss/paginator.component.scss +5 -8
  174. package/scss/progress.component.scss +4 -8
  175. package/scss/radio-button.component.scss +23 -23
  176. package/scss/radio-group.component.scss +2 -4
  177. package/scss/rail-navigation-item.component.scss +19 -22
  178. package/scss/rail-navigation.component.scss +7 -12
  179. package/scss/rich-list-item-header.component.scss +4 -9
  180. package/scss/rich-list-item.component.scss +9 -17
  181. package/scss/search-bar.component.scss +13 -15
  182. package/scss/select.component.scss +9 -12
  183. package/scss/skeleton/_skeleton.scss +1 -1
  184. package/scss/slider.component.scss +11 -14
  185. package/scss/spinbox.component.scss +23 -25
  186. package/scss/switch.component.scss +98 -123
  187. package/scss/tab-bar-item.component.scss +17 -19
  188. package/scss/tab-bar.component.scss +23 -28
  189. package/scss/table.component.scss +12 -19
  190. package/scss/theme.scss +9 -7
  191. package/scss/timepicker.component.scss +5 -10
  192. package/scss/toast-item.component.scss +9 -15
  193. package/scss/toast.component.scss +5 -8
  194. package/scss/toggle-button-group.component.scss +13 -14
  195. package/scss/toggle-button.component.scss +15 -17
  196. package/scss/tooltip.component.scss +8 -13
  197. package/scss/variables/_color-palettes-dark.scss +49 -49
  198. package/scss/variables/_color-palettes.scss +84 -84
  199. package/scss/variables/_colors-dark.scss +31 -37
  200. package/scss/variables/_colors.scss +94 -95
  201. package/scss/variables/_controls.scss +45 -45
  202. package/scss/variables/_typography.scss +3 -6
  203. package/scss/variables/_vertical-rythm.scss +1 -1
  204. package/scss/variables/_visuals.scss +6 -6
  205. package/scss/wizard-step.component.scss +13 -17
  206. package/scss/wizard.component.scss +2 -4
package/scss/wizard-step.component.scss CHANGED
@@ -1,16 +1,12 @@
1
- @use 'sass:math';
2
- @use 'sass:color';
3
- @use '../abstract/dimensions';
4
1
  @use '../abstract/utils';
5
- @use '../abstract/motion';
6
2
  @use '../abstract/typography';
7
3
 
8
4
  .odx-wizard-step {
9
5
  $root: &;
10
6
  $parent-root: odx-wizard;
11
- $step-size: dimensions.get-size(math.div(20, 24));
12
- $icon-size: dimensions.get-size(math.div(13, 24));
13
- $border-width: dimensions.get-size(math.div(2, 24));
7
+ $step-size: var(--odx-size-125);
8
+ $icon-size: var(--odx-spacing-75);
9
+ $border-width: var(--odx-spacing-12);
14
10
 
15
11
  cursor: pointer;
16
12
  display: none;
@@ -19,10 +15,9 @@
19
15
  overflow: hidden;
20
16
 
21
17
  .#{$parent-root}:not(.#{$parent-root}--vertical) & {
22
- @include dimensions.padding(math.div(2, 24), 'top');
23
-
24
- gap: dimensions.get-size(math.div(8, 24));
18
+ gap: var(--odx-spacing-50);
25
19
  min-width: var(--odx-horizontal-wizard-width);
20
+ padding-block-start: var(--odx-spacing-12);
26
21
  }
27
22
 
28
23
  &.is-disabled {
@@ -36,13 +31,14 @@
36
31
  &__label {
37
32
  @include typography.prevent-text-overflow();
38
33
  @include utils.with-outline(var(--odx-v-outline-width-bold));
39
- @include motion.transition(background-color);
40
34
 
41
35
  align-self: center;
42
- border-radius: var(--odx-v-border-radius-controls);
36
+ border-radius: var(--odx-border-radius-control);
43
37
  color: var(--odx-c-text-disabled);
44
38
  margin: 0 auto;
45
- padding: 0 var(--odx-v-outline-width-bold);
39
+ padding: 0 var(--odx-spacing-25);
40
+ transition: var(--odx-motion-transition-default);
41
+ transition-property: background-color;
46
42
  user-select: none;
47
43
 
48
44
  :is(#{$root}--valid, #{$root}--passed) & {
@@ -199,15 +195,15 @@
199
195
  }
200
196
 
201
197
  &__circle {
202
- @include motion.transition(background-color color);
203
-
204
198
  align-items: center;
205
199
  border: $border-width solid var(--odx-c-secondary);
206
- border-radius: 50%;
200
+ border-radius: var(--odx-border-radius-circle);
207
201
  color: var(--odx-c-text-disabled);
208
202
  display: flex;
209
203
  height: $step-size;
210
204
  justify-content: center;
205
+ transition: var(--odx-motion-transition-default);
206
+ transition-property: background-color, color;
211
207
  width: $step-size;
212
208
 
213
209
  :is(#{$root}--touched, #{$root}--passed) & {
@@ -236,7 +232,7 @@
236
232
  align-items: center;
237
233
  flex: 0 0 var(--odx-vertical-wizard-height);
238
234
  flex-direction: row-reverse;
239
- gap: dimensions.get-size(math.div(12, 24));
235
+ gap: var(--odx-spacing-75);
240
236
  justify-content: start;
241
237
  }
242
238
  }
package/scss/wizard.component.scss CHANGED
@@ -1,10 +1,8 @@
1
- @use 'sass:math';
2
- @use '../abstract/dimensions';
3
1
  @use '../abstract/breakpoints';
4
2
 
5
3
  .odx-wizard {
6
- --odx-horizontal-wizard-width: #{dimensions.get-size(math.div(100, 24))};
7
- --odx-vertical-wizard-height: #{dimensions.get-size(math.div(70, 24))};
4
+ --odx-horizontal-wizard-width: var(--odx-size-700);
5
+ --odx-vertical-wizard-height: var(--odx-size-450);
8
6
 
9
7
  display: flex;
10
8