@openui5/themelib_sap_horizon 1.130.1 → 1.131.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 (136) hide show
  1. package/THIRDPARTY.txt +1 -1
  2. package/package.json +18 -18
  3. package/src/sap/f/themes/sap_horizon/Card.less +0 -4
  4. package/src/sap/f/themes/sap_horizon/DynamicPageTitle.less +0 -7
  5. package/src/sap/f/themes/sap_horizon_dark/DynamicPageTitle.less +0 -7
  6. package/src/sap/m/themes/sap_horizon/Carousel.less +0 -1
  7. package/src/sap/m/themes/sap_horizon/CheckBox.less +54 -46
  8. package/src/sap/m/themes/sap_horizon/CustomTile.less +1 -1
  9. package/src/sap/m/themes/sap_horizon/FeedInput.less +2 -2
  10. package/src/sap/m/themes/sap_horizon/GenericTag.less +37 -37
  11. package/src/sap/m/themes/sap_horizon/GenericTile.less +201 -130
  12. package/src/sap/m/themes/sap_horizon/HeaderContainer.less +3 -3
  13. package/src/sap/m/themes/sap_horizon/IconTabBar.less +1 -1
  14. package/src/sap/m/themes/sap_horizon/InputBase.less +25 -23
  15. package/src/sap/m/themes/sap_horizon/Label.less +2 -2
  16. package/src/sap/m/themes/sap_horizon/LightBox.less +2 -3
  17. package/src/sap/m/themes/sap_horizon/ListBase.less +7 -7
  18. package/src/sap/m/themes/sap_horizon/ListItemBase.less +1 -1
  19. package/src/sap/m/themes/sap_horizon/MenuButton.less +21 -14
  20. package/src/sap/m/themes/sap_horizon/MessageBox.less +8 -8
  21. package/src/sap/m/themes/sap_horizon/NotificationListGroup.less +1 -1
  22. package/src/sap/m/themes/sap_horizon/ObjectAttribute.less +3 -3
  23. package/src/sap/m/themes/sap_horizon/ObjectListItem.less +3 -3
  24. package/src/sap/m/themes/sap_horizon/ObjectMarker.less +4 -2
  25. package/src/sap/m/themes/sap_horizon/ObjectNumber.less +71 -63
  26. package/src/sap/m/themes/sap_horizon/ObjectStatus.less +141 -116
  27. package/src/sap/m/themes/sap_horizon/OverflowToolbarAssociativePopover.less +12 -9
  28. package/src/sap/m/themes/sap_horizon/ProgressIndicator.less +2 -2
  29. package/src/sap/m/themes/sap_horizon_dark/Carousel.less +0 -1
  30. package/src/sap/m/themes/sap_horizon_dark/CheckBox.less +54 -46
  31. package/src/sap/m/themes/sap_horizon_dark/CustomTile.less +1 -1
  32. package/src/sap/m/themes/sap_horizon_dark/FeedInput.less +2 -2
  33. package/src/sap/m/themes/sap_horizon_dark/GenericTag.less +36 -36
  34. package/src/sap/m/themes/sap_horizon_dark/GenericTile.less +191 -124
  35. package/src/sap/m/themes/sap_horizon_dark/HeaderContainer.less +3 -3
  36. package/src/sap/m/themes/sap_horizon_dark/IconTabBar.less +1 -1
  37. package/src/sap/m/themes/sap_horizon_dark/InputBase.less +26 -24
  38. package/src/sap/m/themes/sap_horizon_dark/Label.less +2 -2
  39. package/src/sap/m/themes/sap_horizon_dark/LightBox.less +2 -3
  40. package/src/sap/m/themes/sap_horizon_dark/ListBase.less +7 -7
  41. package/src/sap/m/themes/sap_horizon_dark/ListItemBase.less +1 -1
  42. package/src/sap/m/themes/sap_horizon_dark/MenuButton.less +16 -10
  43. package/src/sap/m/themes/sap_horizon_dark/MessageBox.less +8 -8
  44. package/src/sap/m/themes/sap_horizon_dark/NotificationListGroup.less +1 -1
  45. package/src/sap/m/themes/sap_horizon_dark/ObjectAttribute.less +3 -3
  46. package/src/sap/m/themes/sap_horizon_dark/ObjectListItem.less +3 -3
  47. package/src/sap/m/themes/sap_horizon_dark/ObjectMarker.less +3 -1
  48. package/src/sap/m/themes/sap_horizon_dark/ObjectNumber.less +71 -63
  49. package/src/sap/m/themes/sap_horizon_dark/ObjectStatus.less +142 -118
  50. package/src/sap/m/themes/sap_horizon_dark/OverflowToolbarAssociativePopover.less +12 -9
  51. package/src/sap/m/themes/sap_horizon_dark/ProgressIndicator.less +2 -2
  52. package/src/sap/m/themes/sap_horizon_dark/Table.less +0 -4
  53. package/src/sap/m/themes/sap_horizon_hcb/Carousel.less +0 -1
  54. package/src/sap/m/themes/sap_horizon_hcb/CheckBox.less +55 -47
  55. package/src/sap/m/themes/sap_horizon_hcb/CustomTile.less +1 -1
  56. package/src/sap/m/themes/sap_horizon_hcb/FeedInput.less +20 -17
  57. package/src/sap/m/themes/sap_horizon_hcb/FeedListItem.less +3 -2
  58. package/src/sap/m/themes/sap_horizon_hcb/GenericTag.less +40 -40
  59. package/src/sap/m/themes/sap_horizon_hcb/GenericTile.less +98 -55
  60. package/src/sap/m/themes/sap_horizon_hcb/HeaderContainer.less +6 -6
  61. package/src/sap/m/themes/sap_horizon_hcb/IconTabBar.less +4 -0
  62. package/src/sap/m/themes/sap_horizon_hcb/InputBase.less +23 -20
  63. package/src/sap/m/themes/sap_horizon_hcb/Label.less +1 -1
  64. package/src/sap/m/themes/sap_horizon_hcb/LightBox.less +3 -2
  65. package/src/sap/m/themes/sap_horizon_hcb/ListBase.less +12 -12
  66. package/src/sap/m/themes/sap_horizon_hcb/ListItemBase.less +3 -3
  67. package/src/sap/m/themes/sap_horizon_hcb/MenuButton.less +9 -5
  68. package/src/sap/m/themes/sap_horizon_hcb/MenuListItem.less +1 -1
  69. package/src/sap/m/themes/sap_horizon_hcb/MessageBox.less +1 -1
  70. package/src/sap/m/themes/sap_horizon_hcb/NotificationListGroup.less +1 -1
  71. package/src/sap/m/themes/sap_horizon_hcb/ObjectAttribute.less +3 -3
  72. package/src/sap/m/themes/sap_horizon_hcb/ObjectListItem.less +4 -4
  73. package/src/sap/m/themes/sap_horizon_hcb/ObjectNumber.less +8 -8
  74. package/src/sap/m/themes/sap_horizon_hcb/ObjectStatus.less +140 -129
  75. package/src/sap/m/themes/sap_horizon_hcb/OverflowToolbarAssociativePopover.less +5 -2
  76. package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less +2 -2
  77. package/src/sap/m/themes/sap_horizon_hcw/Carousel.less +0 -1
  78. package/src/sap/m/themes/sap_horizon_hcw/CheckBox.less +55 -47
  79. package/src/sap/m/themes/sap_horizon_hcw/CustomTile.less +1 -1
  80. package/src/sap/m/themes/sap_horizon_hcw/FeedInput.less +17 -15
  81. package/src/sap/m/themes/sap_horizon_hcw/FeedListItem.less +3 -2
  82. package/src/sap/m/themes/sap_horizon_hcw/GenericTag.less +41 -41
  83. package/src/sap/m/themes/sap_horizon_hcw/GenericTile.less +100 -57
  84. package/src/sap/m/themes/sap_horizon_hcw/HeaderContainer.less +6 -6
  85. package/src/sap/m/themes/sap_horizon_hcw/IconTabBar.less +4 -0
  86. package/src/sap/m/themes/sap_horizon_hcw/InputBase.less +22 -20
  87. package/src/sap/m/themes/sap_horizon_hcw/Label.less +1 -1
  88. package/src/sap/m/themes/sap_horizon_hcw/LightBox.less +3 -4
  89. package/src/sap/m/themes/sap_horizon_hcw/ListBase.less +12 -12
  90. package/src/sap/m/themes/sap_horizon_hcw/ListItemBase.less +3 -3
  91. package/src/sap/m/themes/sap_horizon_hcw/MenuButton.less +9 -5
  92. package/src/sap/m/themes/sap_horizon_hcw/MenuListItem.less +1 -1
  93. package/src/sap/m/themes/sap_horizon_hcw/MessageBox.less +1 -1
  94. package/src/sap/m/themes/sap_horizon_hcw/NotificationListGroup.less +1 -1
  95. package/src/sap/m/themes/sap_horizon_hcw/ObjectAttribute.less +3 -3
  96. package/src/sap/m/themes/sap_horizon_hcw/ObjectListItem.less +4 -4
  97. package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less +9 -8
  98. package/src/sap/m/themes/sap_horizon_hcw/ObjectStatus.less +141 -131
  99. package/src/sap/m/themes/sap_horizon_hcw/OverflowToolbarAssociativePopover.less +5 -2
  100. package/src/sap/m/themes/sap_horizon_hcw/ProgressIndicator.less +2 -2
  101. package/src/sap/tnt/themes/sap_horizon/SideNavigation.less +1 -3
  102. package/src/sap/tnt/themes/sap_horizon/ToolHeader.less +0 -21
  103. package/src/sap/tnt/themes/sap_horizon/ToolPage.less +2 -11
  104. package/src/sap/tnt/themes/sap_horizon_dark/SideNavigation.less +1 -3
  105. package/src/sap/tnt/themes/sap_horizon_dark/ToolHeader.less +0 -21
  106. package/src/sap/tnt/themes/sap_horizon_dark/ToolPage.less +2 -11
  107. package/src/sap/tnt/themes/sap_horizon_hcb/SideNavigation.less +1 -3
  108. package/src/sap/tnt/themes/sap_horizon_hcb/ToolHeader.less +0 -18
  109. package/src/sap/tnt/themes/sap_horizon_hcb/ToolPage.less +0 -10
  110. package/src/sap/tnt/themes/sap_horizon_hcw/SideNavigation.less +1 -3
  111. package/src/sap/tnt/themes/sap_horizon_hcw/ToolHeader.less +0 -18
  112. package/src/sap/tnt/themes/sap_horizon_hcw/ToolPage.less +0 -10
  113. package/src/sap/ui/core/themes/sap_horizon/.theme +1 -1
  114. package/src/sap/ui/core/themes/sap_horizon/base.less +414 -18
  115. package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.ttf +0 -0
  116. package/src/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 +0 -0
  117. package/src/sap/ui/core/themes/sap_horizon/global.less +32 -0
  118. package/src/sap/ui/core/themes/sap_horizon_dark/.theme +1 -1
  119. package/src/sap/ui/core/themes/sap_horizon_dark/base.less +412 -16
  120. package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.ttf +0 -0
  121. package/src/sap/ui/core/themes/sap_horizon_dark/fonts/SAP-icons.woff2 +0 -0
  122. package/src/sap/ui/core/themes/sap_horizon_dark/global.less +32 -0
  123. package/src/sap/ui/core/themes/sap_horizon_hcb/.theme +1 -1
  124. package/src/sap/ui/core/themes/sap_horizon_hcb/base.less +421 -25
  125. package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.ttf +0 -0
  126. package/src/sap/ui/core/themes/sap_horizon_hcb/fonts/SAP-icons.woff2 +0 -0
  127. package/src/sap/ui/core/themes/sap_horizon_hcb/global.less +32 -0
  128. package/src/sap/ui/core/themes/sap_horizon_hcw/.theme +1 -1
  129. package/src/sap/ui/core/themes/sap_horizon_hcw/base.less +420 -24
  130. package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.ttf +0 -0
  131. package/src/sap/ui/core/themes/sap_horizon_hcw/fonts/SAP-icons.woff2 +0 -0
  132. package/src/sap/ui/core/themes/sap_horizon_hcw/global.less +32 -0
  133. package/src/sap/ui/unified/themes/sap_horizon/Menu.less +1 -1
  134. package/src/sap/ui/unified/themes/sap_horizon_dark/Menu.less +1 -1
  135. package/src/sap/uxap/themes/sap_horizon/ObjectPageSubSection.less +0 -5
  136. package/src/sap/uxap/themes/sap_horizon_dark/ObjectPageSubSection.less +0 -5
@@ -4,81 +4,96 @@
4
4
  /* ================================== */
5
5
 
6
6
  .sapMGT.sapMGTBackgroundImage {
7
+
7
8
  .sapMGTContent {
8
- border-bottom-left-radius: @sapTile_BorderCornerRadius;
9
- border-bottom-right-radius: @sapTile_BorderCornerRadius;
9
+ border-bottom-left-radius: var(--sapTile_BorderCornerRadius);
10
+ border-bottom-right-radius: var(--sapTile_BorderCornerRadius);
10
11
  }
11
12
  }
12
13
 
13
14
  .sapMGT.sapMGTScopeActions.sapMGTBackgroundImage .sapMGTMoreIcon {
14
- color: @sapUiContentContrastTextColor;
15
+ color: var(--sapContent_ContrastTextColor);
15
16
  }
16
17
 
17
18
  .sapMGTTInfoContainer {
18
19
  height: 2.5rem;
19
20
  }
20
21
 
21
- .tileWithAppInfo{
22
- .sapMGTTInfo{
22
+ .tileWithAppInfo {
23
+ .sapMGTTInfo {
23
24
  padding: 0.125rem 1rem 0.125rem 0.25rem;
24
25
  text-transform: uppercase;
25
26
  margin-bottom: 0.7rem;
26
27
  border-radius: 0.125rem 0 0 0.125rem;
27
- background-color: @sapInfobar_NonInteractive_Background;
28
+ background-color: var(--sapInfobar_NonInteractive_Background);
28
29
  width: fit-content;
29
- .sapMText{
30
- font-size: @sapMFontSmallSize ;
30
+
31
+ .sapMText {
32
+ font-size: var(--sapFontSmallSize);
31
33
  text-align: right !important;
32
34
  }
33
- .sapMGTSystemInfoText{
35
+
36
+ .sapMGTSystemInfoText {
34
37
  display: flex;
35
38
  justify-content: flex-end;
39
+
36
40
  .sapMText {
37
- color: @sapUiTileTitleTextColor;
41
+ color: var(--sapTile_TitleTextColor);
38
42
  padding-left: 0.15rem;
39
43
  }
40
44
  }
45
+
41
46
  .sapMGTAppAndSystemInfoDivider{
42
47
  height: 0.25rem;
43
48
  }
49
+
44
50
  .sapMGTAppShortcutText {
45
51
  display: flex;
46
52
  justify-content: flex-end;
53
+
47
54
  .sapMText {
48
- color: @sapUiTileTextColor;
55
+ color: var(--sapTile_TextColor);
49
56
  }
50
57
  }
51
-
58
+
52
59
  }
53
60
  }
54
61
 
55
- .sapMGT.sapMGTScopeActions.sapMGTBackgroundImage, .sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {
62
+ .sapMGT.sapMGTScopeActions.sapMGTBackgroundImage,
63
+ .sapMGT.sapMGTScopeSingleActions.sapMGTBackgroundImage {
64
+
56
65
  .sapMGTContent {
57
- &:before {
58
- border-radius: @sapTile_BorderCornerRadius;
66
+
67
+ &::before {
68
+ border-radius: var(--sapTile_BorderCornerRadius);
59
69
  }
60
70
  }
61
71
  }
62
72
 
63
- .sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading){
64
- .sapMTileCntContent{
65
- &:after{
73
+ .sapMGT.sapMGTScopeActions:not(.sapMGTStateLoading) {
74
+
75
+ .sapMTileCntContent {
76
+
77
+ &::after {
66
78
  opacity: 0.4;
67
- background-color: @sapTile_Background;
79
+ background-color: var(--sapTile_Background);
68
80
 
69
81
  }
70
82
  }
71
83
  }
72
84
 
73
- .sapMGT.sapMGTScopeActions.OneByHalf:not(.sapMGTStateLoading),.sapMGT.sapMGTScopeActions.TwoByHalf:not(.sapMGTStateLoading){
74
- .sapMTileCntContent{
75
- &:after{
76
- top: -0.3125rem;
77
- }
85
+ .sapMGT.sapMGTScopeActions.OneByHalf:not(.sapMGTStateLoading),
86
+ .sapMGT.sapMGTScopeActions.TwoByHalf:not(.sapMGTStateLoading) {
87
+
88
+ .sapMTileCntContent {
89
+
90
+ &::after {
91
+ top: -0.3125rem;
78
92
  }
93
+ }
79
94
  }
80
95
 
81
- /************************ LINE MODE LIST VIEW ********************/
96
+ /* LINE MODE LIST VIEW */
82
97
 
83
98
  .sapMGT.sapMGTLineMode {
84
99
  transition: background 0.2s;
@@ -86,15 +101,16 @@
86
101
  }
87
102
 
88
103
  .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
104
+
89
105
  &:not(.sapMGTLineModePress):hover {
90
- background: @sapTile_Hover_Background;
91
- box-shadow: @sapContent_Shadow2;
106
+ background: var(--sapTile_Hover_Background);
107
+ box-shadow: var(--sapContent_Shadow2);
92
108
  }
93
109
  }
94
110
 
95
- .sapMGT.sapMGTLineMode:active{
96
- background-color: @sapTile_Active_Background;
97
- outline: 0.125rem solid @sapContent_FocusColor !important;
111
+ .sapMGT.sapMGTLineMode:active {
112
+ background-color: var(--sapTile_Active_Background);
113
+ outline: 0.125rem solid var(--sapContent_FocusColor) !important;
98
114
  outline-offset: -0.125rem;
99
115
  border: none;
100
116
  }
@@ -109,7 +125,7 @@
109
125
 
110
126
  .sapMGTLineMode .sapMGTLineModeFailedIcon {
111
127
  cursor: pointer;
112
- color: @sapUiContentNonInteractiveIconColor;
128
+ color: var(--sapContent_NonInteractiveIconColor);
113
129
  text-shadow: @sapUiShadowText;
114
130
  }
115
131
 
@@ -122,21 +138,25 @@
122
138
  }
123
139
 
124
140
  .sapMGTLineMode .sapMGTActionsContainer .sapMGTRemoveButton {
125
- background-color: @sapUiButtonBackground;
126
- color: @sapUiButtonTextColor;
141
+ background-color: var(--sapButton_Background);
142
+ color: var(--sapButton_TextColor);
127
143
 
128
- &:before {
129
- color: @sapUiButtonIconColor;
144
+ &::before {
145
+ color: var(--sapButton_IconColor);
130
146
  }
131
147
  }
132
148
 
133
- .sapMGT.sapMGTScopeActions .sapMGTRemoveButton, .sapMGT.sapMGTScopeSingleAction .sapMGTRemoveButton{
134
- .sapMBtnInner, .sapMBtnActive.sapMBtnInner{
135
- border-color: @sapButton_BorderColor;
136
- background-color: @sapButton_Background;
149
+ .sapMGT.sapMGTScopeActions .sapMGTRemoveButton,
150
+ .sapMGT.sapMGTScopeSingleAction .sapMGTRemoveButton {
151
+
152
+ .sapMBtnInner,
153
+ .sapMBtnActive.sapMBtnInner {
154
+ border-color: var(--sapButton_BorderColor);
155
+ background-color: var(--sapButton_Background);
137
156
  }
157
+
138
158
  .sapMBtnIcon {
139
- color: @sapButton_TextColor;
159
+ color: var(--sapButton_TextColor);
140
160
  }
141
161
  }
142
162
 
@@ -147,35 +167,44 @@
147
167
  -webkit-mask-image: linear-gradient(to left, #FFF ~"calc(100% - 1.5rem)", transparent);
148
168
  }
149
169
 
150
- .sapMGTHdrTxt, .sapMGTSubHdrTxt {
170
+ .sapMGTHdrTxt,
171
+ .sapMGTSubHdrTxt {
151
172
  text-overflow: clip;
152
173
  }
153
174
  }
154
175
 
155
- /************************ LINE MODE FLOATING VIEW *****************/
176
+ /* LINE MODE FLOATING VIEW */
156
177
 
157
178
  .sapUiMedia-GenericTileDeviceSet-large {
179
+
158
180
  .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
159
- &:focus, &.sapMGTLineModePress {
160
- .sapMGTLineStyleHelperInner:before {
161
- content: "";
181
+
182
+ &:focus,
183
+ &.sapMGTLineModePress {
184
+
185
+ .sapMGTLineStyleHelperInner::before {
186
+ content: '';
162
187
  position: absolute;
163
188
  top: 1px;
164
189
  left: 1px;
165
190
  bottom: 1px;
166
191
  right: 1px;
167
192
  box-sizing: border-box;
168
- border: 1px dotted @sapUiContentFocusColor;
193
+ border: 1px dotted var(--sapContent_FocusColor);
169
194
  }
170
195
  }
171
196
  }
172
197
  }
198
+
173
199
  .sapUiMedia-GenericTileDeviceSet-large {
200
+
174
201
  .sapMGT.sapMGTLineMode:not(.sapMGTDisabled) {
202
+
175
203
  &:hover .sapMGTLineStyleHelperInner {
176
- background: @sapUiTileHoverBackground;
204
+ background: var(--sapTile_Hover_Background);
177
205
  }
178
206
  }
207
+
179
208
  .sapMGT.sapMGTLineMode {
180
209
  font-size: @sapMFontMediumSize;
181
210
 
@@ -184,13 +213,16 @@
184
213
  }
185
214
 
186
215
  &.sapMGTDisabled {
187
- .sapMGTHdrTxt, .sapMGTSubHdrTxt {
216
+
217
+ .sapMGTHdrTxt,
218
+ .sapMGTSubHdrTxt {
188
219
  opacity: 0.5;
189
220
  }
190
221
  }
191
-
222
+
192
223
 
193
224
  .sapMGTLineStyleHelper {
225
+
194
226
  &:first-child:not(:only-child) .sapMGTLineStyleHelperInner {
195
227
  margin-right: 0.125rem;
196
228
  }
@@ -198,6 +230,7 @@
198
230
  &:not(:first-child) .sapMGTLineStyleHelperInner {
199
231
  margin: 0 0.125rem;
200
232
  }
233
+
201
234
  &:last-child .sapMGTLineStyleHelperInner {
202
235
  margin-right: 0;
203
236
  }
@@ -218,25 +251,26 @@
218
251
  }
219
252
 
220
253
  &.sapMGTLineModePress:not(.sapMGTDisabled) {
221
- &, &:hover {
254
+
255
+ &,
256
+ &:hover {
257
+
222
258
  .sapMGTLineStyleHelperInner {
223
- background: @sapUiTileActiveBackground;
259
+ background: var(--sapTile_Active_Background);
224
260
  }
225
261
  }
226
262
  }
227
263
  }
228
264
  }
229
265
 
230
- /************************************************************/
231
-
232
266
  .sapMGTLineMode .sapMGTHdrTxt {
233
- color: @sapTile_TitleTextColor;
267
+ color: var(--sapTile_TitleTextColor);
234
268
  font-size: @sapMFontMediumSize;
235
269
  text-shadow: @sapUiShadowText;
236
270
  }
237
271
 
238
272
  .sapMGTLineMode .sapMGTSubHdrTxt {
239
- color: @sapUiTileTextColor;
273
+ color: var(--sapTile_TextColor);
240
274
  font-size: @sapMFontMediumSize;
241
275
  text-shadow: @sapUiShadowText;
242
276
  }
@@ -270,10 +304,10 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
270
304
  box-shadow: 0 0 0 1px fade(@sapUiContentShadowColor, 30);
271
305
 
272
306
  &:not(.sapMGTBackgroundImage) {
273
- background: @sapUiTileActiveBackground;
307
+ background: var(--sapTile_Active_Background);
274
308
  }
275
309
 
276
- &.sapMGTScopeActions .sapMTileCntContent:after {
310
+ &.sapMGTScopeActions .sapMTileCntContent::after {
277
311
  background-color: fade(@sapUiTileActiveBackground, 70);
278
312
  }
279
313
  }
@@ -287,7 +321,7 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
287
321
  transition: background 0.2s;
288
322
 
289
323
  &:not(.sapMGTBackgroundImage) {
290
- background: @sapUiTileHoverBackground;
324
+ background: var(--sapTile_Hover_Background);
291
325
  }
292
326
 
293
327
  .sapMGTWithImageHoverOverlay {
@@ -295,70 +329,76 @@ html.sap-tablet .sapMGTWithImageHoverOverlay {
295
329
  transition: background 0.2s;
296
330
  }
297
331
 
298
- &.sapMGTScopeActions .sapMTileCntContent:after {
332
+ &.sapMGTScopeActions .sapMTileCntContent::after {
299
333
  background-color: fade(@sapUiTileHoverBackground, 70);
300
334
  transition: background 0.2s;
301
335
  }
302
336
  }
303
337
 
304
- .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, // focus inside GridContainer
338
+ .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, /* focus inside GridContainer */
305
339
  .sapMGT:focus .sapMGTFocusDiv,
306
340
  .sapMGT:active .sapMGTFocusDiv,
307
341
  .sapMGTLineModePress .sapMGTFocusDiv {
308
- border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
342
+ border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
309
343
  }
310
344
 
311
- .sapMGTActionButtonPress.sapMGT:active
312
- {
313
- .sapMGTFocusDiv{
345
+ .sapMGTActionButtonPress.sapMGT:active {
346
+
347
+ .sapMGTFocusDiv {
314
348
  border: none;
315
349
  }
316
350
  }
317
351
 
318
- .sapMGTActionButtonPress.sapMGT:focus-visible
319
- {
320
- .sapMGTFocusDiv{
321
- border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
322
- border-radius: @sapTile_BorderCornerRadius;
352
+ .sapMGTActionButtonPress.sapMGT:focus-visible {
353
+
354
+ .sapMGTFocusDiv {
355
+ border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
356
+ border-radius: var(--sapTile_BorderCornerRadius);
323
357
  }
324
358
  }
325
359
 
326
360
  .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv,
327
361
  .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
328
- &:after {
329
- content: "";
362
+
363
+ &::after {
364
+ content: '';
330
365
  .sapMGTOverlayMixin();
331
366
  border-radius: 0.25rem;
332
- border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentContrastFocusColor;
367
+ border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
333
368
  z-index: 0;
334
369
  }
335
370
  }
336
371
 
337
372
 
338
- large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
373
+ large.sapUiSizeCompact .sapMGT.sapMGTLineMode,
374
+ .sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
339
375
  margin-right: 1rem;
340
- border: 1px solid @sapTile_BorderColor
376
+ border: 1px solid var(--sapTile_BorderColor);
341
377
  }
342
378
 
343
379
  .sapMGT {
344
- border-radius: @sapTile_BorderCornerRadius;
345
- border-color: @sapTile_BorderColor;
346
- box-shadow: @sapContent_Shadow0;
347
- .sapMGTContent{
348
- border-radius: 0 0 @sapTile_BorderCornerRadius @sapTile_BorderCornerRadius;
380
+ border-radius: var(--sapTile_BorderCornerRadius);
381
+ border-color: var(--sapTile_BorderColor);
382
+ box-shadow: var(--sapContent_Shadow0);
383
+
384
+ .sapMGTContent {
385
+ border-radius: 0 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius);
349
386
  }
350
387
  }
351
388
 
352
389
  .sapMGT.tileWithAppInfo {
353
- .sapMGTContent{
390
+
391
+ .sapMGTContent {
354
392
  border-radius: 0;
355
393
  }
356
394
  }
357
395
 
358
396
  .sapUshellSection {
397
+
359
398
  .sapMGT.TwoByOne {
360
399
  width: 23rem;
361
400
  }
401
+
362
402
  .sapMGT.TwoByHalf {
363
403
  width: 23rem;
364
404
  }
@@ -376,7 +416,7 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
376
416
  width: 19rem;
377
417
  }
378
418
 
379
- .sapMTileSmallPhone .sapMTileCntContent{
419
+ .sapMTileSmallPhone .sapMTileCntContent {
380
420
  height: 3.438rem;
381
421
  }
382
422
 
@@ -384,9 +424,9 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
384
424
  width: 22.5rem;
385
425
  }
386
426
 
387
- .sapMGTHdrTxt>.sapMText {
427
+ .sapMGTHdrTxt > .sapMText {
388
428
  font-weight: bold;
389
- font-size: @sapFontHeader6Size;
429
+ font-size: var(--sapFontHeader6Size);
390
430
  }
391
431
 
392
432
  .sapMGTLineMode .sapMGTHdrTxt {
@@ -394,20 +434,22 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
394
434
  }
395
435
 
396
436
  .sapMGT.sapMGTLineMode {
397
- border: 1px solid @sapTile_BorderColor !important;
398
- border-radius: @sapTile_BorderCornerRadius !important;
399
- box-shadow: @sapContent_Shadow0 !important;
437
+ border: 1px solid var(--sapTile_BorderColor) !important;
438
+ border-radius: var(--sapTile_BorderCornerRadius) !important;
439
+ box-shadow: var(--sapContent_Shadow0) !important;
400
440
  }
401
441
 
402
442
  .sapMGT.sapMGTLineMode.sapMGTInfoRendered {
403
443
  border: transparent !important;
404
- .sapMGTTInfoWrapper{
405
- border-radius: 0 @sapTile_BorderCornerRadius @sapTile_BorderCornerRadius 0 !important;
444
+
445
+ .sapMGTTInfoWrapper {
446
+ border-radius: 0 var(--sapTile_BorderCornerRadius) var(--sapTile_BorderCornerRadius) 0 !important;
406
447
  }
407
448
  }
408
449
 
409
450
  .sapMGT.sapMGTLineMode.sapMGTInfoRendered:focus {
410
- .sapMGTFocusDiv{
451
+
452
+ .sapMGTFocusDiv {
411
453
  inset: 0;
412
454
  }
413
455
  }
@@ -417,13 +459,13 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
417
459
  }
418
460
 
419
461
  .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
420
- background: @sapTile_Hover_Background;
421
- border: 1px solid @sapTile_BorderColor !important;
422
- box-shadow: @sapContent_Shadow2 !important;
462
+ background: var(--sapTile_Hover_Background);
463
+ border: 1px solid var(--sapTile_BorderColor) !important;
464
+ box-shadow: var(--sapContent_Shadow2) !important;
423
465
  }
424
466
 
425
467
  .sapMGT:hover:not(.sapMGTPressActive) {
426
- box-shadow: @sapContent_Shadow2 !important;
468
+ box-shadow: var(--sapContent_Shadow2) !important;
427
469
  }
428
470
 
429
471
  .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
@@ -436,48 +478,58 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
436
478
  margin-right: 1px;
437
479
  }
438
480
 
439
- .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, .sapMGT:focus .sapMGTFocusDiv, .sapMGT:active .sapMGTFocusDiv, .sapMGTLineModePress .sapMGTFocusDiv {
440
- border-radius: @sapTile_BorderCornerRadius;
481
+ .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv,
482
+ .sapMGT:focus .sapMGTFocusDiv,
483
+ .sapMGT:active .sapMGTFocusDiv,
484
+ .sapMGTLineModePress .sapMGTFocusDiv {
485
+ border-radius: var(--sapTile_BorderCornerRadius);
441
486
  inset: -1px;
442
487
  }
443
488
 
444
- .sapMGT:active{
445
- background-color: @sapTile_Active_Background;
446
- border: 0.0625rem solid @sapTile_Interactive_BorderColor;
447
- &.sapMGTIconMode{
448
- outline: 0.0625rem solid @sapTile_Interactive_BorderColor;
489
+ .sapMGT:active {
490
+ background-color: var(--sapTile_Active_Background);
491
+ border: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
492
+
493
+ &.sapMGTIconMode {
494
+ outline: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
449
495
  border: none;
450
496
  }
451
- &.sapMGTNewsContent{
497
+
498
+ &.sapMGTNewsContent {
452
499
  overflow: hidden;
453
500
  }
454
- .sapMGTFocusDiv{
501
+
502
+ .sapMGTFocusDiv {
455
503
  box-shadow: none;
456
504
  border: none !important;
457
505
  }
458
506
  }
459
507
 
460
- .sapMGT:focus .sapMGTFocusDiv{
461
- border-radius: @sapTile_BorderCornerRadius;
508
+ .sapMGT:focus .sapMGTFocusDiv {
509
+ border-radius: var(--sapTile_BorderCornerRadius);
462
510
  box-shadow: none;
463
511
  inset: -1px;
464
512
  }
465
513
 
466
- .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv{
514
+ .sapMGT.sapMGTOneByOne:focus .sapMGTFocusDiv {
467
515
  inset: 0;
468
516
  }
469
517
 
470
- .sapMGT.sapMGTScopeActions, .sapMGT.sapMGTScopeSingleAction{
471
- .sapMGTMoreIcon{
472
- .sapMBtnIcon{
473
- color: @sapButton_Lite_TextColor;
518
+ .sapMGT.sapMGTScopeActions,
519
+ .sapMGT.sapMGTScopeSingleAction {
520
+
521
+ .sapMGTMoreIcon {
522
+
523
+ .sapMBtnIcon {
524
+ color: var(--sapButton_Lite_TextColor);
474
525
  }
475
526
  }
476
527
  }
477
528
 
478
- .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
529
+ .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv::after,
530
+ .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv::after {
479
531
  border: none;
480
- border-radius: @sapElement_BorderCornerRadius;
532
+ border-radius: var(--sapElement_BorderCornerRadius);
481
533
  }
482
534
 
483
535
  .sapMGTLineMode .sapMGTFocusDiv {
@@ -489,25 +541,30 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
489
541
  }
490
542
 
491
543
  .sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
492
- border: 2px solid @sapContent_FocusColor;
493
- border-radius: @sapElement_BorderCornerRadius;
544
+ border: 2px solid var(--sapContent_FocusColor);
545
+ border-radius: var(--sapElement_BorderCornerRadius);
494
546
  }
495
547
 
496
548
  .miniTileBackground {
497
- background: @sapTile_Background;
498
- box-shadow: @sapContent_Shadow0 !important;
549
+ background: var(--sapTile_Background);
550
+ box-shadow: var(--sapContent_Shadow0) !important;
499
551
  }
500
552
 
501
553
  .miniTileContainer .sapMGT {
502
- background: @sapTile_Background;
503
- box-shadow: @sapContent_Shadow0 !important;
554
+ background: var(--sapTile_Background);
555
+ box-shadow: var(--sapContent_Shadow0) !important;
504
556
  }
505
557
 
506
- .sapUshellTile, .sapUshellTileWrapper, .sapUshellTileInner, .sapUshellTileBase, .sapUshellInner .sapUshellTile-placeholder, .sapUshellInner .sapUshellLinkTile-placeholder {
507
- border-radius: @sapElement_BorderCornerRadius;
558
+ .sapUshellTile,
559
+ .sapUshellTileWrapper,
560
+ .sapUshellTileInner,
561
+ .sapUshellTileBase,
562
+ .sapUshellInner .sapUshellTile-placeholder,
563
+ .sapUshellInner .sapUshellLinkTile-placeholder {
564
+ border-radius: var(--sapElement_BorderCornerRadius);
508
565
  }
509
566
 
510
- .sapUshellTile{
567
+ .sapUshellTile {
511
568
  margin: 0 1rem 1rem 0;
512
569
  }
513
570
 
@@ -516,43 +573,53 @@ large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-
516
573
  }
517
574
 
518
575
  .OneByOne.tileWithAppInfo {
576
+
519
577
  .sapMGTTInfoContainer {
578
+
520
579
  .sapMGTTInfo {
521
- background-color: @sapTile_Active_Background;
580
+ background-color: var(--sapTile_Active_Background);
522
581
  }
523
582
  }
524
583
  }
525
584
 
526
585
  .TwoByOne.sapMGTActionMode {
527
586
  border-radius: 1.25rem;
587
+
528
588
  .sapMGTFocusDiv {
529
589
  border-radius: 1.25rem !important;
530
590
  }
531
591
  }
532
592
 
533
- .sapMGT.OneByOne,.sapMGT.TwoByOne{
593
+ .sapMGT.OneByOne,
594
+ .sapMGT.TwoByOne {
595
+
534
596
  .sapMTileCnt.News {
535
597
  border-bottom-left-radius: 0.87rem;
536
598
  border-bottom-right-radius: 0.87rem;
537
599
  }
538
600
  }
539
601
 
540
- /******************* OVERLAYS AND HELPERS *******************/
602
+ /* OVERLAYS AND HELPERS */
541
603
 
542
604
  .sapMGTOverlay {
543
605
  border-radius: inherit;
544
606
  }
545
607
 
546
608
  .sapMGT.sapMGTBackgroundImage {
609
+
547
610
  .sapMGTOverlay {
548
611
  border-radius: 0.9rem;
549
612
  }
613
+
550
614
  &.sapMGTStateFailed {
615
+
551
616
  .sapMGTWithImageHoverOverlay {
552
- border-radius: @sapTile_BorderCornerRadius;
617
+ border-radius: var(--sapTile_BorderCornerRadius);
553
618
  }
554
619
  }
620
+
555
621
  &:active {
622
+
556
623
  .sapMGTOverlay {
557
624
  border-radius: 0.95rem;
558
625
  }
@@ -18,15 +18,15 @@
18
18
  }
19
19
 
20
20
  .sapMHdrCntrBtnIcon{
21
- color: @sapContent_NonInteractiveIconColor;
21
+ color: var(--sapContent_NonInteractiveIconColor);
22
22
  }
23
23
 
24
24
  .sapMHrdrCntrDvdrs.Horizontal .sapMHrdrCntrInner::after {
25
- border-left: 1px solid @sapList_BorderColor;
25
+ border-left: 1px solid var(--sapList_BorderColor);
26
26
  }
27
27
 
28
28
  .sapMHrdrCntrDvdrs.Vertical .sapMHrdrCntrInner::after {
29
- border-top: 1px solid @sapList_BorderColor;
29
+ border-top: 1px solid var(--sapList_BorderColor);
30
30
  }
31
31
 
32
32
  .sapMHdrCntrBGTransparent {
@@ -710,7 +710,7 @@
710
710
  }
711
711
 
712
712
  .sapMITBText {
713
- font-family: var(--sapFontFamily);
713
+ font-family: var(--sapFontHeaderFamily);
714
714
  font-size: var(--sapFontSmallSize);
715
715
  }
716
716
  }