@openui5/themelib_sap_fiori_3 1.149.1 → 1.151.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 (82) hide show
  1. package/REUSE.toml +24 -0
  2. package/THIRDPARTY.txt +25 -6
  3. package/package.json +18 -18
  4. package/src/sap/f/themes/sap_fiori_3_hcb/SidePanel.less +5 -1
  5. package/src/sap/f/themes/sap_fiori_3_hcw/SidePanel.less +5 -1
  6. package/src/sap/m/themes/sap_fiori_3/ColorPalette.less +11 -0
  7. package/src/sap/m/themes/sap_fiori_3/CustomTile.less +2 -1
  8. package/src/sap/m/themes/sap_fiori_3/Link.less +2 -0
  9. package/src/sap/m/themes/sap_fiori_3/MessageBox.less +0 -8
  10. package/src/sap/m/themes/sap_fiori_3/ObjectAttribute.less +15 -2
  11. package/src/sap/m/themes/sap_fiori_3/ObjectHeader.less +24 -12
  12. package/src/sap/m/themes/sap_fiori_3/ObjectMarker.less +2 -1
  13. package/src/sap/m/themes/sap_fiori_3/Panel.less +1 -5
  14. package/src/sap/m/themes/sap_fiori_3/SegmentedButton.less +22 -10
  15. package/src/sap/m/themes/sap_fiori_3/Select.less +22 -1
  16. package/src/sap/m/themes/sap_fiori_3/SelectList.less +1 -0
  17. package/src/sap/m/themes/sap_fiori_3/SliderTooltip.less +7 -3
  18. package/src/sap/m/themes/sap_fiori_3/StandardListItem.less +0 -4
  19. package/src/sap/m/themes/sap_fiori_3/Switch.less +24 -0
  20. package/src/sap/m/themes/sap_fiori_3/TileContainer.less +2 -1
  21. package/src/sap/m/themes/sap_fiori_3/Token.less +2 -0
  22. package/src/sap/m/themes/sap_fiori_3_dark/ColorPalette.less +11 -0
  23. package/src/sap/m/themes/sap_fiori_3_dark/CustomTile.less +2 -1
  24. package/src/sap/m/themes/sap_fiori_3_dark/Link.less +3 -1
  25. package/src/sap/m/themes/sap_fiori_3_dark/MessageBox.less +0 -8
  26. package/src/sap/m/themes/sap_fiori_3_dark/ObjectAttribute.less +15 -2
  27. package/src/sap/m/themes/sap_fiori_3_dark/ObjectHeader.less +24 -7
  28. package/src/sap/m/themes/sap_fiori_3_dark/ObjectMarker.less +2 -1
  29. package/src/sap/m/themes/sap_fiori_3_dark/Panel.less +1 -5
  30. package/src/sap/m/themes/sap_fiori_3_dark/SegmentedButton.less +22 -10
  31. package/src/sap/m/themes/sap_fiori_3_dark/Select.less +22 -1
  32. package/src/sap/m/themes/sap_fiori_3_dark/SelectList.less +1 -0
  33. package/src/sap/m/themes/sap_fiori_3_dark/Slider.less +5 -0
  34. package/src/sap/m/themes/sap_fiori_3_dark/SliderTooltip.less +7 -3
  35. package/src/sap/m/themes/sap_fiori_3_dark/StandardListItem.less +0 -4
  36. package/src/sap/m/themes/sap_fiori_3_dark/Switch.less +24 -0
  37. package/src/sap/m/themes/sap_fiori_3_dark/TileContainer.less +2 -1
  38. package/src/sap/m/themes/sap_fiori_3_dark/Token.less +2 -0
  39. package/src/sap/m/themes/sap_fiori_3_hcb/ColorPalette.less +35 -0
  40. package/src/sap/m/themes/sap_fiori_3_hcb/CustomTile.less +2 -1
  41. package/src/sap/m/themes/sap_fiori_3_hcb/Link.less +4 -1
  42. package/src/sap/m/themes/sap_fiori_3_hcb/ObjectAttribute.less +15 -2
  43. package/src/sap/m/themes/sap_fiori_3_hcb/ObjectHeader.less +24 -12
  44. package/src/sap/m/themes/sap_fiori_3_hcb/ObjectMarker.less +2 -1
  45. package/src/sap/m/themes/sap_fiori_3_hcb/ObjectNumber.less +3 -1
  46. package/src/sap/m/themes/sap_fiori_3_hcb/ObjectStatus.less +50 -0
  47. package/src/sap/m/themes/sap_fiori_3_hcb/Panel.less +1 -5
  48. package/src/sap/m/themes/sap_fiori_3_hcb/SegmentedButton.less +22 -10
  49. package/src/sap/m/themes/sap_fiori_3_hcb/Select.less +28 -20
  50. package/src/sap/m/themes/sap_fiori_3_hcb/SelectList.less +1 -0
  51. package/src/sap/m/themes/sap_fiori_3_hcb/SliderTooltip.less +10 -4
  52. package/src/sap/m/themes/sap_fiori_3_hcb/Switch.less +24 -0
  53. package/src/sap/m/themes/sap_fiori_3_hcb/Tile.less +12 -6
  54. package/src/sap/m/themes/sap_fiori_3_hcb/TileContainer.less +2 -1
  55. package/src/sap/m/themes/sap_fiori_3_hcb/Token.less +2 -0
  56. package/src/sap/m/themes/sap_fiori_3_hcb/Tokenizer.less +5 -0
  57. package/src/sap/m/themes/sap_fiori_3_hcw/ColorPalette.less +35 -0
  58. package/src/sap/m/themes/sap_fiori_3_hcw/CustomTile.less +2 -1
  59. package/src/sap/m/themes/sap_fiori_3_hcw/Link.less +4 -1
  60. package/src/sap/m/themes/sap_fiori_3_hcw/ObjectAttribute.less +15 -2
  61. package/src/sap/m/themes/sap_fiori_3_hcw/ObjectHeader.less +24 -12
  62. package/src/sap/m/themes/sap_fiori_3_hcw/ObjectMarker.less +2 -1
  63. package/src/sap/m/themes/sap_fiori_3_hcw/ObjectNumber.less +3 -1
  64. package/src/sap/m/themes/sap_fiori_3_hcw/ObjectStatus.less +50 -0
  65. package/src/sap/m/themes/sap_fiori_3_hcw/Panel.less +1 -5
  66. package/src/sap/m/themes/sap_fiori_3_hcw/SegmentedButton.less +22 -10
  67. package/src/sap/m/themes/sap_fiori_3_hcw/Select.less +28 -20
  68. package/src/sap/m/themes/sap_fiori_3_hcw/SelectList.less +1 -0
  69. package/src/sap/m/themes/sap_fiori_3_hcw/SliderTooltip.less +10 -4
  70. package/src/sap/m/themes/sap_fiori_3_hcw/Switch.less +24 -0
  71. package/src/sap/m/themes/sap_fiori_3_hcw/Tile.less +12 -6
  72. package/src/sap/m/themes/sap_fiori_3_hcw/TileContainer.less +2 -1
  73. package/src/sap/m/themes/sap_fiori_3_hcw/Token.less +2 -0
  74. package/src/sap/m/themes/sap_fiori_3_hcw/Tokenizer.less +5 -0
  75. package/src/sap/ui/core/themes/sap_fiori_3/.theme +1 -1
  76. package/src/sap/ui/core/themes/sap_fiori_3_dark/.theme +1 -1
  77. package/src/sap/ui/core/themes/sap_fiori_3_hcb/.theme +1 -1
  78. package/src/sap/ui/core/themes/sap_fiori_3_hcw/.theme +1 -1
  79. package/src/sap/ui/unified/themes/sap_fiori_3/Calendar.less +47 -22
  80. package/src/sap/ui/unified/themes/sap_fiori_3_dark/Calendar.less +47 -22
  81. package/src/sap/ui/unified/themes/sap_fiori_3_hcb/Calendar.less +47 -20
  82. package/src/sap/ui/unified/themes/sap_fiori_3_hcw/Calendar.less +47 -20
package/REUSE.toml CHANGED
@@ -225,6 +225,16 @@ SPDX-FileCopyrightText = "jQuery Foundation and other contributors"
225
225
  SPDX-License-Identifier = "MIT"
226
226
  SPDX-FileComment = "these files belong to: QUnit 2.18"
227
227
 
228
+ [[annotations]]
229
+ path = [
230
+ "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.css",
231
+ "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.js"
232
+ ]
233
+ precedence = "aggregate"
234
+ SPDX-FileCopyrightText = "OpenJS Foundation and other contributors"
235
+ SPDX-License-Identifier = "MIT"
236
+ SPDX-FileComment = "these files belong to: QUnit 2.26.0"
237
+
228
238
  [[annotations]]
229
239
  path = "src/sap.ui.core/src/sap/ui/thirdparty/jquery-compat.js"
230
240
  precedence = "aggregate"
@@ -349,6 +359,20 @@ SPDX-FileCopyrightText = "2010-2022, Christian Johansen, christian@cjohansen.no"
349
359
  SPDX-License-Identifier = "BSD-3-Clause"
350
360
  SPDX-FileComment = "these files belong to: SinonJS 14"
351
361
 
362
+ [[annotations]]
363
+ path = "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-22.0.0.js"
364
+ precedence = "aggregate"
365
+ SPDX-FileCopyrightText = "2010-2024, Christian Johansen, christian@cjohansen.no"
366
+ SPDX-License-Identifier = "BSD-3-Clause"
367
+ SPDX-FileComment = "these files belong to: SinonJS 22"
368
+
369
+ [[annotations]]
370
+ path = "src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/nise-6.1.5.js"
371
+ precedence = "aggregate"
372
+ SPDX-FileCopyrightText = "2010-2017, Christian Johansen, christian@cjohansen.no"
373
+ SPDX-License-Identifier = "BSD-3-Clause"
374
+ SPDX-FileComment = "these files belong to: nise"
375
+
352
376
  [[annotations]]
353
377
  path = "src/sap.ui.core/src/sap/ui/thirdparty/sinon-qunit.js"
354
378
  precedence = "aggregate"
package/THIRDPARTY.txt CHANGED
@@ -6,31 +6,31 @@ The full text of all referenced licenses is appended at the end of this file.
6
6
 
7
7
  Library: sap.f:
8
8
 
9
- Component: UI5 Web Components, version: 2.19.2
9
+ Component: UI5 Web Components, version: 2.24.0
10
10
  Copyright: SAP
11
11
  License: Apache-2.0
12
12
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
13
13
  Contained in: src/sap.f/src/sap/f/thirdparty/**
14
14
 
15
- Component: UI5 Web Components Fiori, version: 2.19.2
15
+ Component: UI5 Web Components Fiori, version: 2.24.0
16
16
  Copyright: SAP
17
17
  License: Apache-2.0
18
18
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
19
19
  Contained in: src/sap.f/src/sap/f/thirdparty/**
20
20
 
21
- Component: UI5 Web Components Icons, version: 2.19.2
21
+ Component: UI5 Web Components Icons, version: 2.24.0
22
22
  Copyright: SAP
23
23
  License: Apache-2.0
24
24
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
25
25
  Contained in: src/sap.f/src/sap/f/thirdparty/**
26
26
 
27
- Component: UI5 Web Components Icons Business Suite, version: 2.19.2
27
+ Component: UI5 Web Components Icons Business Suite, version: 2.24.0
28
28
  Copyright: SAP
29
29
  License: Apache-2.0
30
30
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
31
31
  Contained in: src/sap.f/src/sap/f/thirdparty/**
32
32
 
33
- Component: UI5 Web Components Icons TNT, version: 2.19.2
33
+ Component: UI5 Web Components Icons TNT, version: 2.24.0
34
34
  Copyright: SAP
35
35
  License: Apache-2.0
36
36
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/Apache-2.0.txt
@@ -134,6 +134,13 @@ License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
134
134
  Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.css
135
135
  src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.js
136
136
 
137
+ Component: QUnit 2.26.0, version: 2.26.0
138
+ Copyright: OpenJS Foundation and other contributors
139
+ License: MIT
140
+ License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
141
+ Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.css
142
+ src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.26.0.js
143
+
137
144
  Component: jQuery-Migrate, version: 3.3.1
138
145
  Copyright: OpenJS Foundation and other contributors
139
146
  License: MIT
@@ -227,6 +234,18 @@ License: BSD-3-Clause
227
234
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
228
235
  Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-14.0.js
229
236
 
237
+ Component: SinonJS 22, version: 22.0.0
238
+ Copyright: 2010-2024, Christian Johansen, christian@cjohansen.no
239
+ License: BSD-3-Clause
240
+ License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
241
+ Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-22.0.0.js
242
+
243
+ Component: nise, version: 6.1.5
244
+ Copyright: 2010-2017, Christian Johansen, christian@cjohansen.no
245
+ License: BSD-3-Clause
246
+ License Text: https://github.com/UI5/openui5/blob/master/LICENSES/BSD-3-Clause.txt
247
+ Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/nise-6.1.5.js
248
+
230
249
  Component: Sinon-qunit, version: 2.0.0
231
250
  Copyright: 2010-2011, Christian Johansen
232
251
  License: BSD-3-Clause
@@ -248,7 +267,7 @@ License: MIT
248
267
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
249
268
  Contained in: src/sap.ui.core/src/sap/ui/thirdparty/punycode.js
250
269
 
251
- Component: handlebars, version: 4.7.7
270
+ Component: handlebars, version: 4.7.9
252
271
  Copyright: 2011-2019 by Yehuda Katz
253
272
  License: MIT
254
273
  License Text: https://github.com/UI5/openui5/blob/master/LICENSES/MIT.txt
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openui5/themelib_sap_fiori_3",
3
- "version": "1.149.1",
3
+ "version": "1.151.0",
4
4
  "description": "OpenUI5 Theme Library sap_fiori_3",
5
5
  "author": "SAP SE (https://www.sap.com)",
6
6
  "license": "Apache-2.0",
@@ -14,22 +14,22 @@
14
14
  "url": "https://github.com/UI5/openui5.git"
15
15
  },
16
16
  "devDependencies": {
17
- "@openui5/sap.f": "1.149.1",
18
- "@openui5/sap.m": "1.149.1",
19
- "@openui5/sap.tnt": "1.149.1",
20
- "@openui5/sap.ui.codeeditor": "1.149.1",
21
- "@openui5/sap.ui.commons": "1.149.1",
22
- "@openui5/sap.ui.core": "1.149.1",
23
- "@openui5/sap.ui.dt": "1.149.1",
24
- "@openui5/sap.ui.fl": "1.149.1",
25
- "@openui5/sap.ui.mdc": "1.149.1",
26
- "@openui5/sap.ui.integration": "1.149.1",
27
- "@openui5/sap.ui.layout": "1.149.1",
28
- "@openui5/sap.ui.rta": "1.149.1",
29
- "@openui5/sap.ui.suite": "1.149.1",
30
- "@openui5/sap.ui.table": "1.149.1",
31
- "@openui5/sap.ui.unified": "1.149.1",
32
- "@openui5/sap.ui.ux3": "1.149.1",
33
- "@openui5/sap.uxap": "1.149.1"
17
+ "@openui5/sap.f": "1.151.0",
18
+ "@openui5/sap.m": "1.151.0",
19
+ "@openui5/sap.tnt": "1.151.0",
20
+ "@openui5/sap.ui.codeeditor": "1.151.0",
21
+ "@openui5/sap.ui.commons": "1.151.0",
22
+ "@openui5/sap.ui.core": "1.151.0",
23
+ "@openui5/sap.ui.dt": "1.151.0",
24
+ "@openui5/sap.ui.fl": "1.151.0",
25
+ "@openui5/sap.ui.mdc": "1.151.0",
26
+ "@openui5/sap.ui.integration": "1.151.0",
27
+ "@openui5/sap.ui.layout": "1.151.0",
28
+ "@openui5/sap.ui.rta": "1.151.0",
29
+ "@openui5/sap.ui.suite": "1.151.0",
30
+ "@openui5/sap.ui.table": "1.151.0",
31
+ "@openui5/sap.ui.unified": "1.151.0",
32
+ "@openui5/sap.ui.ux3": "1.151.0",
33
+ "@openui5/sap.uxap": "1.151.0"
34
34
  }
35
35
  }
@@ -41,7 +41,7 @@
41
41
  }
42
42
  }
43
43
 
44
- &:focus {
44
+ &:focus-visible {
45
45
 
46
46
  &::after {
47
47
  border: 0.125rem dotted var(--sapContent_FocusColor);
@@ -51,4 +51,8 @@
51
51
  }
52
52
  }
53
53
  }
54
+ }
55
+
56
+ html.sap-desktop .sapFSP .sapFSPSide .sapFSPSideInner .sapFSPActionBar .sapFSPItem:focus::after {
57
+ border: 0.125rem dotted var(--sapContent_FocusColor);
54
58
  }
@@ -41,7 +41,7 @@
41
41
  }
42
42
  }
43
43
 
44
- &:focus {
44
+ &:focus-visible {
45
45
 
46
46
  &::after {
47
47
  border: 0.125rem dotted var(--sapContent_FocusColor);
@@ -51,4 +51,8 @@
51
51
  }
52
52
  }
53
53
  }
54
+ }
55
+
56
+ html.sap-desktop .sapFSP .sapFSPSide .sapFSPSideInner .sapFSPActionBar .sapFSPItem:focus::after {
57
+ border: 0.125rem dotted var(--sapContent_FocusColor);
54
58
  }
@@ -44,4 +44,15 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare div,
44
44
  color: var(--sapList_TextColor);
45
45
  }
46
46
  }
47
+ }
48
+
49
+ html.sap-phone .sapMColorPalette .sapMBtn:focus-visible {
50
+
51
+ &::after {
52
+ border-color: var(--sapContent_FocusColor);
53
+ }
54
+
55
+ &:active::after {
56
+ border-color: var(--sapContent_ContrastFocusColor);
57
+ }
47
58
  }
@@ -7,6 +7,7 @@
7
7
  /* Fiori 3 theme */
8
8
  /* ========================= */
9
9
 
10
- .sapMCustomTile:focus {
10
+ html.sap-desktop .sapMCustomTile:focus,
11
+ .sapMCustomTile:focus-visible {
11
12
  outline: 1px dotted var(--sapContent_FocusColor);
12
13
  }
@@ -20,6 +20,7 @@
20
20
  text-decoration: none;
21
21
  }
22
22
 
23
+ .sapMLnkSubtle:focus-visible,
23
24
  .sapMLnkSubtle:focus {
24
25
  color: var(--sapContent_FocusColor);
25
26
  }
@@ -33,6 +34,7 @@
33
34
  }
34
35
 
35
36
  .sapMLnk:active:not(.sapMLnkDsbl),
37
+ .sapMLnk:focus-visible:not(.sapMLnkDsbl),
36
38
  .sapMLnk:focus:not(.sapMLnkDsbl) {
37
39
  color: var(--sapLink_Active_Color);
38
40
  }
@@ -3,14 +3,6 @@
3
3
  /* Fiori 3 theme */
4
4
  /* ================================= */
5
5
 
6
- /* header shadow - different states */
7
- @_sap_m_MessageBox_HeaderShadow: inset 0 -0.0625rem;
8
- @_sap_m_MessageBox_Shadow: @sapUiShadowHeader;
9
- @_sap_m_MessageBox_InformationShadow: @_sap_m_MessageBox_HeaderShadow var(--sapInformationBorderColor), @_sap_m_MessageBox_Shadow;
10
- @_sap_m_MessageBox_WarningShadow: @_sap_m_MessageBox_HeaderShadow var(--sapWarningBorderColor), @_sap_m_MessageBox_Shadow;
11
- @_sap_m_MessageBox_ErrorShadow: @_sap_m_MessageBox_HeaderShadow var(--sapErrorBorderColor), @_sap_m_MessageBox_Shadow;
12
- @_sap_m_MessageBox_SuccessShadow: @_sap_m_MessageBox_HeaderShadow var(--sapSuccessBorderColor), @_sap_m_MessageBox_Shadow;
13
-
14
6
  .sapMDialog.sapMMessageBoxInfo .sapMDialogIcon.sapUiIcon {
15
7
  color: var(--sapInformativeElementColor);
16
8
  }
@@ -9,7 +9,19 @@
9
9
  position: relative;
10
10
  }
11
11
 
12
- .sapMObjectAttributeActive .sapMObjectAttributeText:focus::after {
12
+ html.sap-desktop .sapMObjectAttributeActive .sapMObjectAttributeText:focus::after {
13
+ pointer-events: none;
14
+ display: block;
15
+ content: '';
16
+ position: absolute;
17
+ top: 1px;
18
+ left: 1px;
19
+ bottom: 1px;
20
+ right: 1px;
21
+ outline: 1px dotted var(--sapContent_FocusColor);
22
+ }
23
+
24
+ .sapMObjectAttributeActive .sapMObjectAttributeText:focus-visible::after {
13
25
  pointer-events: none;
14
26
  display: block;
15
27
  content: '';
@@ -33,7 +45,8 @@
33
45
 
34
46
  .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:active,
35
47
  .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
36
- .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
48
+ html.sap-desktop .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus,
49
+ .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus-visible {
37
50
  text-decoration: underline;
38
51
  color: var(--sapLink_Hover_Color);
39
52
  }
@@ -29,18 +29,27 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
29
29
  outline-offset: -1px;
30
30
  }
31
31
 
32
- .sapMOHTitle.sapMOHTitleActive:focus {
32
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus,
33
+ .sapMOHTitle.sapMOHTitleActive:focus-visible {
33
34
  outline: none;
34
35
  }
35
36
 
36
- .sapMOHTitle.sapMOHTitleActive:focus > h1 span,
37
- .sapMOHTitle.sapMOHTitleActive:focus > h2 span,
38
- .sapMOHTitle.sapMOHTitleActive:focus > h3 span,
39
- .sapMOHTitle.sapMOHTitleActive:focus > h4 span,
40
- .sapMOHTitle.sapMOHTitleActive:focus > h5 span,
41
- .sapMOHTitle.sapMOHTitleActive:focus > h6 span,
42
- .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
43
- .sapMOHTitleArrow .sapUiIcon:focus {
37
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h1 span,
38
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h2 span,
39
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h3 span,
40
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h4 span,
41
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h5 span,
42
+ html.sap-desktop .sapMOHTitle.sapMOHTitleActive:focus > h6 span,
43
+ html.sap-desktop .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
44
+ html.sap-desktop .sapMOHTitleArrow .sapUiIcon:focus,
45
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h1 span,
46
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h2 span,
47
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h3 span,
48
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h4 span,
49
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h5 span,
50
+ .sapMOHTitle.sapMOHTitleActive:focus-visible > h6 span,
51
+ .sapMOHIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus-visible,
52
+ .sapMOHTitleArrow .sapUiIcon:focus-visible {
44
53
  outline: 1px dotted var(--sapContent_FocusColor);
45
54
  outline-offset: -1px;
46
55
  }
@@ -63,19 +72,22 @@ a.sapMOHTitle.sapMOHTitleActive:hover > h1 .sapMText {
63
72
  background: transparent;
64
73
  }
65
74
 
66
- .sapMOHRTitleArrow .sapUiIcon:focus {
75
+ html.sap-desktop .sapMOHRTitleArrow .sapUiIcon:focus,
76
+ .sapMOHRTitleArrow .sapUiIcon:focus-visible {
67
77
  outline: 1px dotted var(--sapContent_FocusColor);
68
78
  outline-offset: -1px;
69
79
  }
70
80
 
71
- .sapMOHRIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus {
81
+ html.sap-desktop .sapMOHRIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus,
82
+ .sapMOHRIcon.sapMPointer .sapUiIcon.sapUiIconPointer:focus-visible {
72
83
 
73
84
  &::before {
74
85
  outline: 1px dotted var(--sapContent_FocusColor);
75
86
  }
76
87
  }
77
88
 
78
- .sapMOHRTitleActive .sapMOHRTitleText:focus {
89
+ html.sap-desktop .sapMOHRTitleActive .sapMOHRTitleText:focus,
90
+ .sapMOHRTitleActive .sapMOHRTitleText:focus-visible {
79
91
  outline: 1px dotted var(--sapContent_FocusColor);
80
92
  outline-offset: -1px;
81
93
  }
@@ -9,6 +9,7 @@
9
9
  text-shadow: @_sap_m_ObjectMarker_LinkShadowColor;
10
10
  }
11
11
 
12
- .sapMObjectMarkerActiveIconOnly:focus {
12
+ html.sap-desktop .sapMObjectMarkerActiveIconOnly:focus,
13
+ .sapMObjectMarkerActiveIconOnly:focus-visible {
13
14
  outline-offset: 2px;
14
15
  }
@@ -30,14 +30,10 @@
30
30
  border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
31
31
  }
32
32
 
33
- .sapMPanelContentWrapper:not(:has(> .sapMPanelBGTransparent)) {
33
+ .sapMPanelContent:not(.sapMPanelBGTransparent) {
34
34
  border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
35
35
  }
36
36
 
37
- .sapMPanelContentWrapper:has(> .sapMPanelBGSolid) {
38
- background-color: var(--sapGroup_ContentBackground);
39
- }
40
-
41
37
  .sapMPanel .sapMPanelHdr {
42
38
  line-height: 2.75rem;
43
39
  height: 2.75rem;
@@ -34,13 +34,13 @@
34
34
  }
35
35
 
36
36
  .sapMSegBBtn:first-child .sapMSegBBtnInner {
37
- border-top-left-radius: 0.25rem;
38
- border-bottom-left-radius: 0.25rem;
37
+ border-top-left-radius: var(--sapButton_BorderCornerRadius);
38
+ border-bottom-left-radius: var(--sapButton_BorderCornerRadius);
39
39
  }
40
40
 
41
41
  .sapMSegBBtn:last-child .sapMSegBBtnInner {
42
- border-top-right-radius: 0.25rem;
43
- border-bottom-right-radius: 0.25rem;
42
+ border-top-right-radius: var(--sapButton_BorderCornerRadius);
43
+ border-bottom-right-radius: var(--sapButton_BorderCornerRadius);
44
44
  }
45
45
 
46
46
  html.sap-desktop .sapMSegBBtnFocusable:hover .sapMSegBBtnInner {
@@ -63,6 +63,18 @@ html.sap-desktop {
63
63
  }
64
64
  }
65
65
 
66
+ .sapMSegBBtnFocusable:not(.sapMBtnFocusFromTouch):focus-visible .sapMSegBBtnInner {
67
+ outline: 1px dotted;
68
+ outline-offset: -3px;
69
+ outline-color: var(--sapContent_FocusColor);
70
+ }
71
+
72
+ .sapMSegBBtnFocusable.sapMSegBBtnSel:not(.sapMBtnFocusFromTouch):focus-visible .sapMSegBBtnInner {
73
+ outline: 1px dotted;
74
+ outline-offset: -3px;
75
+ outline-color: var(--sapContent_ContrastFocusColor);
76
+ }
77
+
66
78
  .sapMSegB.sapMSegBIcons {
67
79
 
68
80
  .sapMSegBBtn:not(.sapMSegBBtnMixed) .sapMSegBBtnInner {
@@ -198,13 +210,13 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
198
210
  }
199
211
 
200
212
  .sapMSegBBtn:first-child .sapMSegBBtnInner {
201
- border-top-left-radius: 0.2rem;
202
- border-bottom-left-radius: 0.2rem;
213
+ border-top-left-radius: var(--sapButton_BorderCornerRadius);
214
+ border-bottom-left-radius: var(--sapButton_BorderCornerRadius);
203
215
  }
204
216
 
205
217
  .sapMSegBBtn:last-child .sapMSegBBtnInner {
206
- border-top-right-radius: 0.2rem;
207
- border-bottom-right-radius: 0.2rem;
218
+ border-top-right-radius: var(--sapButton_BorderCornerRadius);
219
+ border-bottom-right-radius: var(--sapButton_BorderCornerRadius);
208
220
  }
209
221
 
210
222
  .sapMSegB img {
@@ -255,6 +267,6 @@ html.sap-desktop .sapMSegBBtnFocusable.sapMBtnActive:hover .sapMSegBBtnInner {
255
267
 
256
268
  .sapMSegBBtn.sapMSegBtnLastVisibleButton .sapMSegBBtnInner {
257
269
  border-right: 1px solid var(--sapButton_BorderColor);
258
- border-top-right-radius: 0.2rem;
259
- border-bottom-right-radius: 0.2rem;
270
+ border-top-right-radius: var(--sapButton_BorderCornerRadius);
271
+ border-bottom-right-radius: var(--sapButton_BorderCornerRadius);
260
272
  }
@@ -95,5 +95,26 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
95
95
  }
96
96
 
97
97
  div.sapMSltPicker .sapMSltPickerValueState {
98
- box-shadow: inset 0 -0.0625rem @_sap_m_Dialog_HeaderShadowColor;
98
+ padding-left: 0.5rem;
99
+ padding-right: 0.5rem;
100
+
101
+ .sapMSltPickerValueStateIcon {
102
+ margin-right: 0.5rem;
103
+ }
104
+
105
+ &.sapMSltPickerErrorState {
106
+ box-shadow: inset 0 -0.0625rem var(--sapField_InvalidColor);
107
+ }
108
+
109
+ &.sapMSltPickerWarningState {
110
+ box-shadow: inset 0 -0.0625rem var(--sapField_WarningColor);
111
+ }
112
+
113
+ &.sapMSltPickerSuccessState {
114
+ box-shadow: inset 0 -0.0625rem var(--sapField_SuccessColor);
115
+ }
116
+
117
+ &.sapMSltPickerInformationState {
118
+ box-shadow: inset 0 -0.0625rem var(--sapField_InformationColor);
119
+ }
99
120
  }
@@ -34,6 +34,7 @@ html.sap-desktop .sapMSelectListItemBase.sapMSelectListItemBasePressed:focus {
34
34
  }
35
35
 
36
36
  /* focus */
37
+ .sapMSelectListItemBase:focus-visible,
37
38
  html.sap-desktop .sapMSelectListItemBase:focus {
38
39
  outline: 0.0625rem dotted var(--sapContent_FocusColor);
39
40
  outline-offset: -0.125rem;
@@ -21,9 +21,13 @@
21
21
  color: var(--sapField_TextColor);
22
22
  }
23
23
 
24
- .sapMSliderTooltipErrorState {
25
- background: var(--sapField_InvalidBackground);
26
- border-color: var(--sapField_InvalidColor);
24
+ .sapMSliderTooltip:has(.sapMSliderTooltipInput:focus) {
25
+ outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
26
+ outline-offset: -.1875rem;
27
+ }
28
+
29
+ .sapMSliderTooltip.sapMSliderTooltipErrorState:has(.sapMSliderTooltipInput:focus) {
30
+ outline-offset: -.25rem;
27
31
  }
28
32
 
29
33
  .sapMSliderTooltipErrorState .sapMSliderTooltipInput {
@@ -6,10 +6,6 @@
6
6
  @_sap_m_StandardListItem_TextShadowColor: none;
7
7
  @_sap_m_StandardListItem_SelectedLabelColor: var(--sapContent_LabelColor);
8
8
 
9
- .sapMSLIInfo {
10
- text-shadow: @_sap_m_StandardListItem_TextShadowColor;
11
- }
12
-
13
9
  .sapMSLI {
14
10
  height: 2.75rem;
15
11
  }
@@ -44,6 +44,30 @@ html.sap-desktop {
44
44
  }
45
45
  }
46
46
 
47
+ .sapMSwtCont:focus-visible > .sapMSwt::before {
48
+ content: ' ';
49
+ position: absolute;
50
+ display: block;
51
+ top: -0.375rem;
52
+ left: -0.125rem;
53
+ bottom: -0.375rem;
54
+ right: -0.125rem;
55
+ outline: 1px dotted var(--sapContent_FocusColor);
56
+ }
57
+
58
+ .sapUiSizeCompact {
59
+
60
+ .sapMSwtCont:focus-visible > .sapMSwt:not(.sapMSwtNoLabel)::before {
61
+ top: -0.25rem;
62
+ bottom: -0.25rem;
63
+ }
64
+
65
+ .sapMSwtCont:focus-visible > .sapMSwt.sapMSwtNoLabel::before {
66
+ top: -0.375rem;
67
+ bottom: -0.375rem;
68
+ }
69
+ }
70
+
47
71
  /* Switch */
48
72
  .sapMSwt {
49
73
  box-sizing: border-box;
@@ -11,7 +11,8 @@
11
11
  opacity: 0.4;
12
12
  }
13
13
 
14
- .sapMTC .sapMTCScroller:focus::before {
14
+ html.sap-desktop .sapMTC .sapMTCScroller:focus::before,
15
+ .sapMTC .sapMTCScroller:focus-visible::before {
15
16
  border: 1px dotted var(--sapContent_FocusColor);
16
17
  position: absolute;
17
18
  top: -1px;
@@ -34,11 +34,13 @@ html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
34
34
  }
35
35
  }
36
36
 
37
+ .sapMToken:not(.sapMTokenFocusFromTouch):focus-visible,
37
38
  html.sap-desktop .sapMToken:focus {
38
39
  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
39
40
  outline-offset: -0.1875rem;
40
41
  }
41
42
 
43
+ .sapMToken.sapMTokenSelected:not(.sapMTokenFocusFromTouch):focus-visible,
42
44
  html.sap-desktop .sapMToken.sapMTokenSelected:focus {
43
45
  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_ContrastFocusColor);
44
46
  }
@@ -44,4 +44,15 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare div,
44
44
  color: var(--sapList_TextColor);
45
45
  }
46
46
  }
47
+ }
48
+
49
+ html.sap-phone .sapMColorPalette .sapMBtn:focus-visible {
50
+
51
+ &::after {
52
+ border-color: var(--sapContent_FocusColor);
53
+ }
54
+
55
+ &:active::after {
56
+ border-color: var(--sapContent_ContrastFocusColor);
57
+ }
47
58
  }
@@ -7,6 +7,7 @@
7
7
  /* Quartz Dark theme */
8
8
  /* ========================= */
9
9
 
10
- .sapMCustomTile:focus {
10
+ html.sap-desktop .sapMCustomTile:focus,
11
+ .sapMCustomTile:focus-visible {
11
12
  outline: 1px dotted var(--sapContent_FocusColor);
12
13
  }
@@ -20,6 +20,7 @@
20
20
  text-decoration: none;
21
21
  }
22
22
 
23
+ .sapMLnkSubtle:focus-visible,
23
24
  .sapMLnkSubtle:focus {
24
25
  color: var(--sapContent_FocusColor);
25
26
  }
@@ -33,7 +34,8 @@
33
34
  }
34
35
 
35
36
  .sapMLnk:active:not(.sapMLnkDsbl),
36
- .sapMLnk:focus:not(.sapMLnkDsbl) {
37
+ .sapMLnk:focus:not(.sapMLnkDsbl)
38
+ .sapMLnk:focus-visible:not(.sapMLnkDsbl) {
37
39
  color: var(--sapLink_Active_Color);
38
40
  }
39
41
 
@@ -3,14 +3,6 @@
3
3
  /* Quartz Dark theme */
4
4
  /* ================================= */
5
5
 
6
- /* header shadow - different states */
7
- @_sap_m_MessageBox_HeaderShadow: inset 0 -0.0625rem;
8
- @_sap_m_MessageBox_Shadow: @sapUiShadowHeader;
9
- @_sap_m_MessageBox_InformationShadow: @_sap_m_MessageBox_HeaderShadow var(--sapInformationBorderColor), @_sap_m_MessageBox_Shadow;
10
- @_sap_m_MessageBox_WarningShadow: @_sap_m_MessageBox_HeaderShadow var(--sapWarningBorderColor), @_sap_m_MessageBox_Shadow;
11
- @_sap_m_MessageBox_ErrorShadow: @_sap_m_MessageBox_HeaderShadow var(--sapErrorBorderColor), @_sap_m_MessageBox_Shadow;
12
- @_sap_m_MessageBox_SuccessShadow: @_sap_m_MessageBox_HeaderShadow var(--sapSuccessBorderColor), @_sap_m_MessageBox_Shadow;
13
-
14
6
  .sapMDialog.sapMMessageBoxInfo .sapMDialogIcon.sapUiIcon {
15
7
  color: var(--sapInformativeElementColor);
16
8
  }
@@ -9,7 +9,19 @@
9
9
  position: relative;
10
10
  }
11
11
 
12
- .sapMObjectAttributeActive .sapMObjectAttributeText:focus::after {
12
+ html.sap-desktop .sapMObjectAttributeActive .sapMObjectAttributeText:focus::after {
13
+ pointer-events: none;
14
+ display: block;
15
+ content: '';
16
+ position: absolute;
17
+ top: 1px;
18
+ left: 1px;
19
+ bottom: 1px;
20
+ right: 1px;
21
+ outline: 1px dotted var(--sapContent_FocusColor);
22
+ }
23
+
24
+ .sapMObjectAttributeActive .sapMObjectAttributeText:focus-visible::after {
13
25
  pointer-events: none;
14
26
  display: block;
15
27
  content: '';
@@ -33,7 +45,8 @@
33
45
 
34
46
  .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:active,
35
47
  .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
36
- .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
48
+ html.sap-desktop .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus,
49
+ .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus-visible {
37
50
  text-decoration: underline;
38
51
  color: var(--sapLink_Hover_Color);
39
52
  }