@sapui5/sap.ushell 1.117.0 → 1.118.0

package/src/main/js/sap/ushell/themes/base/WorkPageColumn.less

@@ -1,4 +1,4 @@
-.sapCepWorkPageColumn {
+.workPageColumn {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10,17 +10,17 @@
   padding-bottom: 1rem;
   min-width: 21rem;
 
-  [data-cep-breakpoint="st-sp-1"] & {
+  [data-wp-breakpoint="st-sp-1"] & {
     min-width: 100%;
   }
 
-  .sapCepWorkPageColumnDeleteButton {
+  .workPageColumnDeleteButton {
     position: absolute;
     right: 1.5rem;
     top: 1.25rem;
   }
 
-  .sapCepColumnToolbar {
+  .workPageColumnToolbar {
     margin-top: 0.5rem;
     display: flex;
     gap: 0 0.5rem;
@@ -29,73 +29,84 @@
     flex-wrap: wrap;
   }
 
-  &.sapCepWorkPageColumnEmpty .sapCepAddWidgetButton {
+  &.workPageColumnEmpty .workPageAddWidgetButton {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
   }
 
-  &.sapCepColumnWidth4 {
+  &.workPageColumnWidth4 {
     flex: 4;
   }
-  &.sapCepColumnWidth6 {
+
+  &.workPageColumnWidth6 {
     flex: 6;
   }
-  &.sapCepColumnWidth8 {
+
+  &.workPageColumnWidth8 {
     flex: 8;
   }
-  &.sapCepColumnWidth10 {
+
+  &.workPageColumnWidth10 {
     flex: 10;
   }
-  &.sapCepColumnWidth12 {
+
+  &.workPageColumnWidth12 {
     flex: 12;
   }
-  &.sapCepColumnWidth14 {
+
+  &.workPageColumnWidth14 {
     flex: 14;
   }
-  &.sapCepColumnWidth16 {
+
+  &.workPageColumnWidth16 {
     flex: 16;
   }
-  &.sapCepColumnWidth18 {
+
+  &.workPageColumnWidth18 {
     flex: 18;
   }
-  &.sapCepColumnWidth20 {
+
+  &.workPageColumnWidth20 {
     flex: 20;
   }
-  &.sapCepColumnWidth24 {
+
+  &.workPageColumnWidth24 {
     flex: 24;
   }
 }
 
-[data-cep-breakpoint="st-sp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-sp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="lt-lp-2"],
-[data-cep-breakpoint="st-sp-3"],
-[data-cep-breakpoint="st-lp-3"],
-[data-cep-breakpoint="lt-sp-3"],
-[data-cep-breakpoint="lt-lp-3"] {
-    // No resized columns for 3 columns at these breakpoints
-  .sapCepWorkPageColumn[data-count="3"] {
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-sp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="st-sp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="lt-lp-3"] {
+
+  // No resized columns for 3 columns at these breakpoints
+  .workPageColumn[data-count="3"] {
     flex: 1;
   }
 }
 
-[data-cep-breakpoint="st-sp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-sp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="lt-lp-2"] {
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-sp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="lt-lp-2"] {
+
   // No resized columns for 2 columns at these breakpoints
-  .sapCepWorkPageColumn[data-count="2"] {
+  .workPageColumn[data-count="2"] {
     flex: 1;
   }
 }

package/src/main/js/sap/ushell/themes/base/WorkPageColumnResizer.less

@@ -1,4 +1,4 @@
-.sapCepDivider {
+.workPageDivider {
   position: absolute;
   transform: translateX(-50%);
   top: 0;
@@ -11,7 +11,7 @@
     cursor: col-resize;
   }
 
-  .sapCepDividerInner {
+  .workPageDividerInner {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -21,15 +21,15 @@
   }
 }
 
-html[dir=rtl] .sapCepDivider {
+html[dir=rtl] .workPageDivider {
   transform: translateX(50%);
 
-  .sapCepDividerInner {
+  .workPageDividerInner {
     transform: translateX(2px);
   }
 }
 
-.sapCepDividerButton {
+.workPageDividerButton {
   position: absolute;
   left: 0;
   top: 0;
@@ -39,74 +39,78 @@ html[dir=rtl] .sapCepDivider {
   transform: translateX(-50%);
   z-index: 1;
 
-  &.sapCepColumnButtonRight {
+  &.workPageColumnButtonRight {
     left: auto;
     right: 0;
     transform: translateX(calc(~"0.5rem + 6.5px"));
   }
 
-  &.sapCepColumnButtonLeft {
+  &.workPageColumnButtonLeft {
     transform: translateX(calc(~"-0.5rem - 6.5px"));
   }
 }
 
 
-html[dir=rtl] .sapCepDividerButton {
-  &.sapCepColumnButtonRight {
+html[dir=rtl] .workPageDividerButton {
+  &.workPageColumnButtonRight {
     left: auto;
     right: 0;
     transform: translateX(calc(~"-0.5rem - 6.5px"));
   }
 
-  &.sapCepColumnButtonLeft {
+  &.workPageColumnButtonLeft {
     transform: translateX(calc(~"0.5rem + 6.5px"));
   }
 }
 
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="st-sp-1"] {
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-sp-1"] {
+
   // max. 1 column -> no divider
-  .sapCepDivider {
+  .workPageDivider {
     display: none;
   }
 }
 
-[data-cep-breakpoint="lt-lp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="st-sp-2"] {
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-sp-2"] {
+
   // max. 2 columns -> no resizing possible for >= 3 columns
-  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+  .workPageColumn[data-count="4"] .workPageDivider,
+  .workPageColumn[data-count="5"] .workPageDivider,
+  .workPageColumn[data-count="6"] .workPageDivider {
     pointer-events: none;
 
     &:hover {
       cursor: default;
     }
   }
+
   // max. 2 columns -> no divider for 3rd columns
-  .sapCepWorkPageColumn[data-index="3"][data-count="3"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="6"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="5"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="5"][data-count="6"] .sapCepDivider {
+  .workPageColumn[data-index="3"][data-count="3"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="4"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="6"] .workPageDivider,
+  .workPageColumn[data-index="5"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="5"][data-count="6"] .workPageDivider {
     display: none;
   }
 }
 
 
-[data-cep-breakpoint="lt-lp-3"],
-[data-cep-breakpoint="st-lp-3"],
-[data-cep-breakpoint="lt-sp-3"],
-[data-cep-breakpoint="st-sp-3"] {
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-sp-3"] {
+
   // max. 3 columns -> no resizing possible for >= 4 columns
-  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+  .workPageColumn[data-count="4"] .workPageDivider,
+  .workPageColumn[data-count="5"] .workPageDivider,
+  .workPageColumn[data-count="6"] .workPageDivider {
     pointer-events: none;
 
     &:hover {
@@ -115,9 +119,9 @@ html[dir=rtl] .sapCepDividerButton {
   }
 
   // max. 3 columns -> no divider for 4th column
-  .sapCepWorkPageColumn[data-index="4"][data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="4"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="4"][data-count="6"] .sapCepDivider {
+  .workPageColumn[data-index="4"][data-count="4"] .workPageDivider,
+  .workPageColumn[data-index="4"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="4"][data-count="6"] .workPageDivider {
     display: none;
   }
 }

package/src/main/js/sap/ushell/themes/base/WorkPageRow.less

@@ -1,53 +1,81 @@
-.sapCepWorkPageRow {
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="lt-lp-1"] {
+  .workPageRow {
+    & + .workPageRow {
+      .workPageRowSectionTitle {
+        padding-top: 0.5rem;
+      }
+    }
+  }
+}
+
+.workPage.workPageHasTitle {
+  .workPageRow.workPageRowFirst {
+    padding-top: 0;
+  }
+}
+
+.workPageRow {
   position: relative;
   margin-top: -2px;
   border: 2px solid transparent;
   border-radius: 0.75rem;
-  padding-top: 1rem;
   box-sizing: content-box;
   background-clip: padding-box;
+  padding-top: 1rem;
 
-  .sapCepRowMessageStrip {
+  .workPageRowMessageStrip {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     margin-left: 1.5rem;
     margin-right: 1.5rem;
   }
 
-  .sapCepRowOverflowToolbar {
+  .workPageRowToolbar {
     margin-left: 1rem;
     margin-right: 1rem;
     background-color: @sapUiShellBackgroundPatternColor;
     border-bottom: none;
   }
 
-  .sapCepRowSectionTitle {
+  .workPageRowSectionTitle {
     font-weight: bold;
     font-family: @sapUiFontFamily;
     font-size: @sapMFontHeader4Size;
     color: @sapUiShellGroupTitleTextColor;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  & + .workPageRow {
+    padding-top: 0;
+
+    .workPageRowSectionTitle {
+      padding-top: 2rem;
+    }
   }
 
-  .sapCepWorkPageRowLimiter {
+  .workPageRowLimiter {
     box-sizing: border-box;
     max-width: 100%;
     margin: 0 auto;
   }
 
-  .sapCepWorkPageRowInner {
+  .workPageRowInner {
     position: static;
     display: flex;
     flex-wrap: wrap;
   }
 
-  .sapCepRowButton {
+  .workPageRowButton {
     position: absolute;
     z-index: 1;
   }
 
-  .sapCepRowButtonBottom {
+  .workPageRowButtonBottom {
     bottom: 0;
     left: 0;
     right: 0;
@@ -55,7 +83,7 @@
     transform: translateY(~'calc(50% + 1px)');
   }
 
-  .sapCepRowButtonTop {
+  .workPageRowButtonTop {
     top: 0;
     left: 0;
     right: 0;
@@ -63,7 +91,7 @@
     transform: translateY(~'calc(-50% - 1px)');
   }
 
-  .sapCepRowButtonLeft {
+  .workPageRowButtonLeft {
     top: 0;
     left: 0;
     bottom: 0;
@@ -71,7 +99,7 @@
     transform: translateX(-50%);
   }
 
-  .sapCepRowButtonRight {
+  .workPageRowButtonRight {
     top: 0;
     right: 0;
     bottom: 0;
@@ -79,53 +107,59 @@
     transform: translateX(50%);
   }
 
-  .sapCepWorkPageRowControlButtons {
+  .workPageRowControlButtons {
     /* use opacity here to focus the button when the control is shown by tabbing into the WorkPageRow via keyboard navigation */
     opacity: 0;
     position: absolute;
     right: 0;
-    transform: translateY(~'calc(-1rem - 50% - 2px)');
+    transform: translateY(-2rem);
     padding-right: 2rem;
   }
 }
 
-.sapCepRowOverflowToolbar > .sapMLabel .sapMLabelColonAndRequired::before {
+.workPageRowToolbar > .sapMLabel .sapMLabelColonAndRequired::before {
   content: attr(data-colon);
   white-space: pre;
 }
 
 
-.sapCepWorkPageRow {
+.workPageRow {
   margin-left: 1.75rem;
   margin-right: 1.75rem;
 }
 
-[data-cep-breakpoint="st-sp-1"] {
-  .sapCepWorkPageRow {
+[data-wp-breakpoint="st-sp-1"] {
+  .workPageRow {
     margin-left: 0;
     margin-right: 0;
   }
 }
 
 
-
 /* EDIT MODE */
-.sapCepEditMode {
-  .sapCepWorkPageRow {
+.workPageEditMode {
+  &.workPage {
+    .workPageRow,
+    .workPageRow.workPageRowFirst {
+      padding-top: 1rem;
+    }
+  }
+  .workPageRow {
+
     &:hover,
-    &.sapCepWorkPageRowFocused {
+    &.workPageRowFocused {
       border-color: @sapUiNeutralBorder;
 
-      .sapCepWorkPageRowControlButtons {
+      .workPageRowControlButtons {
         opacity: 1;
       }
     }
 
-    .sapCepWorkPageRowInner {
+    .workPageRowInner {
       user-select: none;
     }
 
-    &:hover + .sapCepWorkPageRow {
+    &:hover + .workPageRow {
       border-top: none;
       margin-top: 0;
     }

package/src/main/js/sap/ushell/themes/sap_horizon/SearchCEP.less

@@ -19,7 +19,6 @@ html.sap-phone #CEPSearchField.sapMFocus>.sapMSFF::before {
 // Placeholder SearchField in CEP
 #PlaceHolderSearchField>.sapMSFF {
   border-radius: 1.125rem;
-  height: 2.25rem !important;
   background-color: @sapShell_InteractiveBackground;
   border: none;
   color: @sapShell_InteractiveTextColor;
@@ -170,6 +169,7 @@ html.sap-phone #CEPSearchField.sapMFocus>.sapMSFF::before {
 
 .sapUshellCEPSearchFieldPopover {
   border-radius: 1.125rem;
+  padding-bottom: 0.5rem;
 }
 
 .sapUshellCEPSearchFieldMargin {

package/src/main/js/sap/ushell/themes/sap_horizon/ToolAreaItem.less

@@ -3,48 +3,77 @@
 /* Horizon theme                            */
 /* ======================================== */
 
-@_sap_ushell_ToolAreaItem_HoverBG: #45596a;
-@_sap_ushell_ToolAreaItem_BG: #3f5161;
-@_sap_ushell_ToolAreaItem_SelectedBG: #416b8e;
-@_sap_ushell_ToolAreaItem_IconColor: #b7cee4;
-@_sap_ushell_ToolAreaItem_SeparatorColor: #4d6376;
+.sapUshellToolAreaWrapper {
+  background-color: @sapUiShellColor;
+}
 
 .sapUshellToolArea {
-
-  background-color: @_sap_ushell_ToolAreaItem_BG;
-
+  background-color: @sapUiShellColor;
+  border-inline-end: 1px solid @sapUiToolbarSeparatorColor;
+  border-top: 1px solid @sapUiToolbarSeparatorColor;
+  box-shadow: @sapContent_Shadow0;
+  position: relative;
+  border-radius: 0.5rem 0.5rem 0 0;
 
   .sapUshellToolAreaItemIcon {
-    color: @_sap_ushell_ToolAreaItem_IconColor;
+    color: @sapUiShellInteractiveTextColor;
   }
 }
 
 .sapUshellToolAreaItemText {
-  color: @_sap_ushell_ToolAreaItem_IconColor;
+  color: @sapUiShellInteractiveTextColor;
 }
 
-
 .sapUshellToolAreaItemText {
-  color: @_sap_ushell_ToolAreaItem_IconColor;
+  color: @sapUiShellInteractiveTextColor;
 }
 
 .sapUshellToolAreaContentSeparator, .sapUshellToolAreaFooterContentSeparator {
-  height:1px;
-  background-color: @_sap_ushell_ToolAreaItem_SeparatorColor;
+  height: 1px;
+  background-color: @sapUiToolbarSeparatorColor;
+  margin: 0 0.5rem;
+}
+
+.sapUshellToolAreaContent, .sapUshellToolAreaFooterContent {
+  margin: 0.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid transparent;
+  outline-offset: -0.2375rem;
+  height: 2.5rem;
+  padding-left: 0.6rem;
+}
 
+.sapUshellToolAreaContent:hover, .sapUshellToolAreaFooterContent:hover {
+  box-shadow: @sapUiContentInteractionShadow;
 }
-.sapUshellToolAreaContent:hover, .sapUshellToolAreaFooterContent:hover{
-  background-color: @_sap_ushell_ToolAreaItem_HoverBG;
+
+.sapUshellToolAreaContent:active, .sapUshellToolAreaFooterContent:active {
+  box-shadow: none;
+  border-color: @sapPrimary2;
 }
 
-.sapUshellToolAreaItemSelected {
-  background-color: @_sap_ushell_ToolAreaItem_SelectedBG;
+.sapUshellToolArea .sapUshellToolAreaItemIcon {
+  margin-top: 0.6rem;
+  margin-bottom: 0.6rem;
+}
+
+.sapUshellToolArea .sapUshellToolAreaItemIcon:hover {
+  cursor: pointer;
+}
+
+.sapUshellToolArea .sapUshellToolAreaItemIcon:active {
+  color: @sapPrimary2;
+}
+
+.sapUshellToolAreaItemExpandable:after {
+  font-size: 1rem;
+  left: 0;
 }
 
 .sapUshellToolAreaItemExpandable:after {
-  color:  @_sap_ushell_ToolAreaItem_IconColor;
+  color: @sapUiShellInteractiveTextColor;
 }
 
 .sapUshellToolAreaItm {
-  color: @_sap_ushell_ToolAreaItem_IconColor;
+  color: @sapUiShellInteractiveTextColor;
 }

package/src/main/js/sap/ushell/themes/sap_horizon/WorkPageCell.less

@@ -1,4 +1,5 @@
-.sapCepWorkPageCell {
+.workPageCell {
+
   .sapMGT.TwoByOne:not(.sapMTileSmallPhone),
   .sapMGT.TwoByHalf:not(.sapMTileSmallPhone) {
     width: 23rem;

package/src/main/js/sap/ushell/themes/sap_horizon_dark/SearchCEP.less

@@ -6,7 +6,6 @@
 // Placeholder SearchField in CEP
 #PlaceHolderSearchField>.sapMSFF {
   border-radius: 1.125rem;
-  height: 2.25rem !important;
   background-color: @sapShell_InteractiveBackground;
   border: none;
   color: @sapShell_InteractiveTextColor;
@@ -170,6 +169,7 @@ html.sap-phone #CEPSearchField.sapMFocus>.sapMSFF::before {
 
 .sapUshellCEPSearchFieldPopover {
   border-radius: 1.125rem;
+  padding-bottom: 0.5rem;
 }
 
 .sapUshellCEPSearchFieldMargin {