@openui5/themelib_sap_horizon 1.128.0 → 1.130.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 (89) hide show
  1. package/THIRDPARTY.txt +2 -2
  2. package/package.json +18 -18
  3. package/src/sap/m/themes/sap_horizon/ActionSelect.less +13 -13
  4. package/src/sap/m/themes/sap_horizon/ActionSheet.less +12 -12
  5. package/src/sap/m/themes/sap_horizon/Avatar.less +12 -10
  6. package/src/sap/m/themes/sap_horizon/Bar.less +11 -9
  7. package/src/sap/m/themes/sap_horizon/Carousel.less +2 -0
  8. package/src/sap/m/themes/sap_horizon/ColorPalette.less +43 -16
  9. package/src/sap/m/themes/sap_horizon/ColumnListItem.less +5 -5
  10. package/src/sap/m/themes/sap_horizon/ComboBoxBase.less +3 -3
  11. package/src/sap/m/themes/sap_horizon/Dialog.less +29 -20
  12. package/src/sap/m/themes/sap_horizon/DynamicDateRange.less +1 -1
  13. package/src/sap/m/themes/sap_horizon/GenericTile.less +21 -21
  14. package/src/sap/m/themes/sap_horizon/IconTabBar.less +279 -212
  15. package/src/sap/m/themes/sap_horizon/Link.less +13 -10
  16. package/src/sap/m/themes/sap_horizon/RatingIndicator.less +0 -2
  17. package/src/sap/m/themes/sap_horizon/SlideTile.less +10 -10
  18. package/src/sap/m/themes/sap_horizon/SplitButton.less +18 -0
  19. package/src/sap/m/themes/sap_horizon/Token.less +27 -7
  20. package/src/sap/m/themes/sap_horizon_dark/ActionSelect.less +11 -10
  21. package/src/sap/m/themes/sap_horizon_dark/ActionSheet.less +11 -11
  22. package/src/sap/m/themes/sap_horizon_dark/Avatar.less +12 -10
  23. package/src/sap/m/themes/sap_horizon_dark/Bar.less +12 -10
  24. package/src/sap/m/themes/sap_horizon_dark/Carousel.less +2 -0
  25. package/src/sap/m/themes/sap_horizon_dark/ColorPalette.less +42 -16
  26. package/src/sap/m/themes/sap_horizon_dark/ColumnListItem.less +5 -5
  27. package/src/sap/m/themes/sap_horizon_dark/ComboBoxBase.less +3 -3
  28. package/src/sap/m/themes/sap_horizon_dark/Dialog.less +29 -21
  29. package/src/sap/m/themes/sap_horizon_dark/DynamicDateRange.less +1 -1
  30. package/src/sap/m/themes/sap_horizon_dark/GenericTile.less +24 -24
  31. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +217 -158
  32. package/src/sap/m/themes/sap_horizon_dark/Link.less +13 -10
  33. package/src/sap/m/themes/sap_horizon_dark/SlideTile.less +10 -10
  34. package/src/sap/m/themes/sap_horizon_dark/SplitButton.less +18 -0
  35. package/src/sap/m/themes/sap_horizon_dark/Token.less +28 -8
  36. package/src/sap/m/themes/sap_horizon_hcb/ActionSelect.less +4 -3
  37. package/src/sap/m/themes/sap_horizon_hcb/ActionSheet.less +12 -12
  38. package/src/sap/m/themes/sap_horizon_hcb/Avatar.less +9 -8
  39. package/src/sap/m/themes/sap_horizon_hcb/Bar.less +12 -10
  40. package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +2 -0
  41. package/src/sap/m/themes/sap_horizon_hcb/ColorPalette.less +25 -15
  42. package/src/sap/m/themes/sap_horizon_hcb/ColumnListItem.less +5 -5
  43. package/src/sap/m/themes/sap_horizon_hcb/ComboBoxBase.less +8 -8
  44. package/src/sap/m/themes/sap_horizon_hcb/Dialog.less +22 -13
  45. package/src/sap/m/themes/sap_horizon_hcb/DynamicDateRange.less +1 -1
  46. package/src/sap/m/themes/sap_horizon_hcb/GenericTile.less +5 -5
  47. package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +90 -79
  48. package/src/sap/m/themes/sap_horizon_hcb/Link.less +12 -9
  49. package/src/sap/m/themes/sap_horizon_hcb/SlideTile.less +6 -6
  50. package/src/sap/m/themes/sap_horizon_hcb/Token.less +29 -4
  51. package/src/sap/m/themes/sap_horizon_hcw/ActionSelect.less +4 -3
  52. package/src/sap/m/themes/sap_horizon_hcw/ActionSheet.less +12 -12
  53. package/src/sap/m/themes/sap_horizon_hcw/Avatar.less +9 -8
  54. package/src/sap/m/themes/sap_horizon_hcw/Bar.less +12 -10
  55. package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +2 -0
  56. package/src/sap/m/themes/sap_horizon_hcw/ColorPalette.less +25 -15
  57. package/src/sap/m/themes/sap_horizon_hcw/ColumnListItem.less +5 -6
  58. package/src/sap/m/themes/sap_horizon_hcw/ComboBoxBase.less +7 -7
  59. package/src/sap/m/themes/sap_horizon_hcw/Dialog.less +22 -13
  60. package/src/sap/m/themes/sap_horizon_hcw/DynamicDateRange.less +1 -1
  61. package/src/sap/m/themes/sap_horizon_hcw/GenericTile.less +6 -6
  62. package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +95 -83
  63. package/src/sap/m/themes/sap_horizon_hcw/Link.less +12 -9
  64. package/src/sap/m/themes/sap_horizon_hcw/SlideTile.less +6 -6
  65. package/src/sap/m/themes/sap_horizon_hcw/Token.less +29 -4
  66. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  67. package/src/sap/ui/core/themes/sap_horizon/base.less +515 -7
  68. package/src/sap/ui/core/themes/sap_horizon/global.less +453 -7
  69. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  70. package/src/sap/ui/core/themes/sap_horizon_dark/base.less +517 -9
  71. package/src/sap/ui/core/themes/sap_horizon_dark/global.less +453 -6
  72. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  73. package/src/sap/ui/core/themes/sap_horizon_hcb/base.less +524 -16
  74. package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +453 -6
  75. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  76. package/src/sap/ui/core/themes/sap_horizon_hcw/base.less +521 -13
  77. package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +453 -6
  78. package/src/sap/ui/dt/themes/sap_horizon/ContextMenu.less +0 -14
  79. package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less +0 -14
  80. package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less +0 -10
  81. package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less +0 -10
  82. package/src/sap/ui/integration/themes/sap_horizon/library.source.less +0 -1
  83. package/src/sap/ui/integration/themes/sap_horizon_dark/library.source.less +0 -1
  84. package/src/sap/ui/rta/themes/sap_horizon_dark/ChangeVisualization.less +0 -1
  85. package/src/sap/ui/rta/themes/sap_horizon_dark/Toolbar.adaptation.less +1 -1
  86. package/src/sap/ui/rta/themes/sap_horizon_hcb/ChangeVisualization.less +0 -1
  87. package/src/sap/ui/rta/themes/sap_horizon_hcw/ChangeVisualization.less +0 -1
  88. package/src/sap/ui/integration/themes/sap_horizon/Paginator.less +0 -5
  89. package/src/sap/ui/integration/themes/sap_horizon_dark/Paginator.less +0 -5
@@ -9,11 +9,11 @@
9
9
  box-shadow: none;
10
10
 
11
11
  &:active {
12
- background-color: @sapField_Focus_Background;
13
- box-shadow: @sapContent_Interaction_Shadow;
12
+ background-color: var(--sapField_Focus_Background);
13
+ box-shadow: var(--sapContent_Interaction_Shadow);
14
14
  }
15
15
  }
16
16
 
17
17
  .sapMInputBaseIconPressed .sapMComboBoxBaseClearIcon::before {
18
- color: @sapUiContentIconColor;
18
+ color: var(--sapContent_IconColor);
19
19
  }
@@ -3,27 +3,27 @@
3
3
  /* Evening Horizon theme */
4
4
  /* ============================= */
5
5
 
6
- // ==========================================================================
7
- // Variables
8
- // ==========================================================================
6
+ /* ========================================================================== */
7
+ /* Variables */
8
+ /* ========================================================================== */
9
9
 
10
10
  @_sap_m_Dialog_VerticalMargin: 3%;
11
11
  @_sap_m_Dialog_BarHeight: 2.75rem;
12
12
  @_sap_m_Dialog_SubHeaderCompactHeight: 2.25rem;
13
13
 
14
- @_sap_m_Dialog_NoStateHeaderShadow: @sapUiContentHeaderShadow;
15
- @_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder, @sapUiContentHeaderShadow;
16
- @_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder, @sapUiContentHeaderShadow;
17
- @_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder, @sapUiContentHeaderShadow;
18
- @_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder, @sapUiContentHeaderShadow;
14
+ @_sap_m_Dialog_NoStateHeaderShadow: var(--sapContent_HeaderShadow);
15
+ @_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow);
16
+ @_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow);
17
+ @_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow);
18
+ @_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow);
19
19
 
20
20
  @_sap_m_Dialog_HeaderFocusBorderBottomOffset: 0.125rem;
21
21
  @_sap_m_Dialog_HeaderFocusBorderTopOffset: 0.0625rem;
22
22
  @_sap_m_Dialog_HeaderFocusBorderLeftOffset: 0.0625rem;
23
23
  @_sap_m_Dialog_HeaderFocusBorderRightOffset: 0.0625rem;
24
- @_sap_m_Dialog_HeaderFocusBorderRadius: @sapUiElementBorderCornerRadius;
24
+ @_sap_m_Dialog_HeaderFocusBorderRadius: var(--sapElement_BorderCornerRadius);
25
25
 
26
- // This parameter is used in sap.m.Select. TODO: remove it when it is removed from there.
26
+ /* This parameter is used in sap.m.Select. TODO: remove it when it is removed from there. */
27
27
  @_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);
28
28
 
29
29
  .sapMDialogSubHeader .sapMIBar {
@@ -41,21 +41,23 @@
41
41
  }
42
42
 
43
43
  .sapMDialogTitleGroup {
44
- z-index: 3; // to hide the shadow from the header when there is sub-header
44
+ z-index: 3; /* to hide the shadow from the header when there is sub-header */
45
45
  }
46
46
 
47
- // buttons on phone must be to the right side (in LTR mode)
47
+ /* buttons on phone must be to the right side (in LTR mode) */
48
48
  html.sap-phone .sapMDialog {
49
+
49
50
  & > footer .sapMFooter-CTX {
50
51
  justify-content: flex-end;
51
52
  }
52
53
  }
53
54
 
54
- // ==========================================================================
55
- // header, sub-header, footer
56
- // ==========================================================================
55
+ /* ========================================================================== */
56
+ /* header, sub-header, footer */
57
+ /* ========================================================================== */
57
58
 
58
59
  .sapMDialog {
60
+
59
61
  header .sapMBarLeft,
60
62
  header .sapMBarPH {
61
63
  padding-left: 1rem;
@@ -72,11 +74,17 @@ html.sap-phone .sapMDialog {
72
74
  }
73
75
  }
74
76
 
75
- // Responsive paddings
76
- .sapMDialogTitleGroup, .sapMDialogSubHeader {
77
- .sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
78
- .sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
77
+ /* Responsive paddings */
78
+ .sapMDialogTitleGroup,
79
+ .sapMDialogSubHeader {
80
+
81
+ .sapUi-Std-PaddingS,
82
+ .sapUi-Std-PaddingM,
83
+ .sapUi-Std-PaddingL,
84
+ .sapUi-Std-PaddingXL {
85
+
79
86
  &.sapMIBar {
87
+
80
88
  .sapMBarMiddle .sapMBarPH {
81
89
  padding-left: 0;
82
90
  padding-right: 0;
@@ -102,6 +110,7 @@ html.sap-phone .sapMDialog {
102
110
  }
103
111
 
104
112
  .sapMDialog:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding) {
113
+
105
114
  &.sapMDialog-NoHeader .sapMDialogScroll {
106
115
  padding-top: 0.25rem;
107
116
 
@@ -117,5 +126,4 @@ html.sap-phone .sapMDialog {
117
126
  padding-bottom: 0;
118
127
  }
119
128
  }
120
- }
121
-
129
+ }
@@ -4,7 +4,7 @@
4
4
  /* ======================================= */
5
5
 
6
6
  .sapUiIcon.sapMDDRDateOption {
7
- color: @sapUiButtonActiveTextColor;
7
+ color: var(--sapButton_Active_TextColor);
8
8
  }
9
9
 
10
10
  .sapMDynamicDateRangePopover section > .sapMLabel {
@@ -85,14 +85,14 @@
85
85
  background: transparent;
86
86
  }
87
87
 
88
- .sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
88
+ .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
89
89
  &:not(.sapMGTLineModePress):hover {
90
90
  background: @sapTile_Hover_Background;
91
91
  box-shadow: @sapContent_Shadow2;
92
92
  }
93
93
  }
94
94
 
95
- html.sap-desktop .sapMGT.sapMGTLineMode:active{
95
+ .sapMGT.sapMGTLineMode:active{
96
96
  background-color: @sapTile_Active_Background;
97
97
  outline: 0.125rem solid @sapContent_FocusColor !important;
98
98
  outline-offset: -0.125rem;
@@ -154,7 +154,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
154
154
 
155
155
  /************************ LINE MODE FLOATING VIEW *****************/
156
156
 
157
- .sapUiMedia-GenericTileDeviceSet-large.sap-desktop {
157
+ .sapUiMedia-GenericTileDeviceSet-large {
158
158
  .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
159
159
  &:focus, &.sapMGTLineModePress {
160
160
  .sapMGTLineStyleHelperInner:before {
@@ -171,7 +171,7 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
171
171
  }
172
172
  }
173
173
  .sapUiMedia-GenericTileDeviceSet-large {
174
- &.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
174
+ .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
175
175
  &:hover .sapMGTLineStyleHelperInner {
176
176
  background: @sapUiTileHoverBackground;
177
177
  }
@@ -241,8 +241,8 @@ html.sap-desktop .sapMGT.sapMGTLineMode:active{
241
241
  text-shadow: @sapUiShadowText;
242
242
  }
243
243
 
244
- html.sap-desktop .sapMGTWithoutImageHoverOverlay,
245
- html.sap-desktop .sapMGTWithImageHoverOverlay {
244
+ .sapMGTWithoutImageHoverOverlay,
245
+ .sapMGTWithImageHoverOverlay {
246
246
  z-index: 1;
247
247
  position: absolute;
248
248
  pointer-events: none;
@@ -282,7 +282,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
282
282
  background: fade(@sapUiTileActiveBackground, 20%);
283
283
  }
284
284
 
285
- html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
285
+ .sapMGT:hover:not(.sapMGTPressActive) {
286
286
  box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
287
287
  transition: background 0.2s;
288
288
 
@@ -301,21 +301,21 @@ html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
301
301
  }
302
302
  }
303
303
 
304
- html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
305
- html.sap-desktop .sapMGT:focus .sapMGTFocusDiv,
306
- html.sap-desktop .sapMGT:active .sapMGTFocusDiv,
307
- html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
304
+ .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
305
+ .sapMGT:focus .sapMGTFocusDiv,
306
+ .sapMGT:active .sapMGTFocusDiv,
307
+ .sapMGTLineModePress .sapMGTFocusDiv {
308
308
  border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
309
309
  }
310
310
 
311
- html.sap-desktop .sapMGTActionButtonPress.sapMGT:active
311
+ .sapMGTActionButtonPress.sapMGT:active
312
312
  {
313
313
  .sapMGTFocusDiv{
314
314
  border: none;
315
315
  }
316
316
  }
317
317
 
318
- html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
318
+ .sapMGTActionButtonPress.sapMGT:focus-visible
319
319
  {
320
320
  .sapMGTFocusDiv{
321
321
  border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
@@ -323,8 +323,8 @@ html.sap-desktop .sapMGTActionButtonPress.sapMGT:focus-visible
323
323
  }
324
324
  }
325
325
 
326
- html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
327
- html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
326
+ .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
327
+ .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
328
328
  &:after {
329
329
  content: "";
330
330
  .sapMGTOverlayMixin();
@@ -412,21 +412,21 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
412
412
  }
413
413
  }
414
414
 
415
- .sap-desktop .sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
415
+ .sapMGT.sapMGTLineMode.sapMGTInfoRendered:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
416
416
  border: transparent !important;
417
417
  }
418
418
 
419
- .sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
419
+ .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
420
420
  background: @sapTile_Hover_Background;
421
421
  border: 1px solid @sapTile_BorderColor !important;
422
422
  box-shadow: @sapContent_Shadow2 !important;
423
423
  }
424
424
 
425
- html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
425
+ .sapMGT:hover:not(.sapMGTPressActive) {
426
426
  box-shadow: @sapContent_Shadow2 !important;
427
427
  }
428
428
 
429
- html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
429
+ .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
430
430
  border: none !important;
431
431
  }
432
432
 
@@ -436,12 +436,12 @@ html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
436
436
  margin-right: 1px;
437
437
  }
438
438
 
439
- html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:active .sapMGTFocusDiv, html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
439
+ .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, .sapMGT:focus .sapMGTFocusDiv, .sapMGT:active .sapMGTFocusDiv, .sapMGTLineModePress .sapMGTFocusDiv {
440
440
  border-radius: @sapTile_BorderCornerRadius;
441
441
  inset: -1px;
442
442
  }
443
443
 
444
- html.sap-desktop .sapMGT:active{
444
+ .sapMGT:active{
445
445
  background-color: @sapTile_Active_Background;
446
446
  border: 0.0625rem solid @sapTile_Interactive_BorderColor;
447
447
  &.sapMGTIconMode{
@@ -457,13 +457,13 @@ html.sap-desktop .sapMGT:active{
457
457
  }
458
458
  }
459
459
 
460
- html.sap-desktop .sapMGT:focus .sapMGTFocusDiv{
460
+ .sapMGT:focus .sapMGTFocusDiv{
461
461
  border-radius: @sapTile_BorderCornerRadius;
462
462
  box-shadow: none;
463
463
  inset: -1px;
464
464
  }
465
465
 
466
- html.sap-desktop .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
466
+ .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
467
467
  inset: 0;
468
468
  }
469
469
 
@@ -475,7 +475,7 @@ html.sap-desktop .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
475
475
  }
476
476
  }
477
477
 
478
- html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
478
+ .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
479
479
  border: none;
480
480
  border-radius: @sapElement_BorderCornerRadius;
481
481
  }