@ui5/webcomponents-fiori 1.3.1 → 1.4.0

package/src/themes/ShellBar.css

@@ -13,7 +13,7 @@
 	justify-content: space-between;
 	align-items: center;
 	background: var(--sapShellColor);
-	height: 2.75rem;
+	height: var(--_ui5_shellbar_root_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
@@ -26,14 +26,14 @@
 ::slotted([ui5-button][slot="startButton"]) {
 	height: 2.25rem;
 	padding: 0;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	border: none;
 	background: transparent;
 	outline-color: var(--_ui5_shellbar_logo_outline_color);
 	color: var(--sapShell_TextColor);
 	box-sizing: border-box;
 	cursor: pointer;
-	border-radius: 0.25rem;
+	border-radius: var(--_ui5_shellbar_button_border_radius);
 	position: relative;
 	font-size: 0.75rem;
 	font-weight: bold;
@@ -64,6 +64,9 @@
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow {
+	border-top-color: var(--_ui5_shellbar_button_active_color);
+}
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
@@ -90,7 +93,7 @@ slot[name="profile"] {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
-	font-size: 0.75rem;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -103,11 +106,11 @@ slot[name="profile"] {
 }
 
 :host(:not([primary-title])) .ui5-shellbar-menu-button span {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
-	margin-left: .5rem;
+	margin-inline-start: .5rem;
 }
 
 .ui5-shellbar-secondary-title {
@@ -124,7 +127,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
 	display: inline-block;
-	margin-left: 0.375rem;
+	margin-inline-start: 0.375rem;
 	width: 10px;
 	height: 10px;
 	width: 0px;
@@ -145,7 +148,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-overflow-container-middle {
 	align-self: center;
-	height: 2.5rem;
+	height: var(--_ui5_shellbar_overflow_container_middle_height);
 	width: 0;
 	flex-shrink: 0;
 }
@@ -167,51 +170,66 @@ slot[name="profile"] {
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-root {
-	padding: 0.25rem 1rem;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 1rem;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0;
+	margin-inline-end: 0;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 :host([breakpoint-size="XXL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 .ui5-shellbar-logo {
 	cursor: pointer;
 	max-height: 2rem;
+	overflow: hidden;
 }
 
 .ui5-shellbar-logo:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_outline_offset);
+	outline-offset: var(--_ui5_shellbar_logo_outline_offset);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-logo:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
 .ui5-shellbar-button {
 	width: 2.5rem;
 }
 
+.ui5-shellbar-search-button {
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	--_ui5_shellbar_button_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	height: var(--_ui5_shellbar_search_button_size);
+	width: var(--_ui5_shellbar_search_button_size);
+	min-width: var(--_ui5_shellbar_search_button_size);
+}
+
 .ui5-shellbar-image-buttonImage {
 	border-radius: 50%;
 	width: 1.75rem;
@@ -231,8 +249,9 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-left {
+	padding: 0 0.125rem;
 	justify-content: flex-start;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 	max-width: 75%;
 	flex-shrink: 0;
 	flex-grow: 0;
@@ -252,24 +271,26 @@ slot[name="profile"] {
 	padding: 0.25rem 0.5rem;
 	cursor: text;
 	-webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
 	user-select: text;
 }
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
 	-webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 	user-select: none;
 	cursor: pointer;
+	border: var(--_ui5_shellbar_button_border);
 }
 
 :host(:not([with-logo])) .ui5-shellbar-menu-button {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-container-right {
+	padding: 0 0.125rem;
 	display: block;
 	overflow: hidden;
 	box-sizing: border-box;
@@ -283,12 +304,15 @@ slot[name="profile"] {
 }
 
 :host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
-	margin-left: 8rem;
+	margin-inline-start: 8rem;
 }
 
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
 	justify-content: flex-end;
+	height: inherit;
+	align-items: center;
+	float: var(--_ui5_shellbar_overflow_container_float);
 }
 
 .ui5-shellbar-overflow-button {
@@ -309,7 +333,7 @@ slot[name="profile"] {
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-button-shown {
@@ -322,16 +346,17 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-coPilot {
+	height: 100%;
 	background-color: transparent;
 	cursor: pointer;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
@@ -345,6 +370,7 @@ slot[name="profile"] {
 	height: 1rem;
 	min-width: 1rem;
 	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
 	color: var(--sapContent_BadgeTextColor);
 	top: 0.125rem;
 	left: 1.5rem;
@@ -368,13 +394,14 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-menu-button {
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 }
 
 .ui5-shellbar-search-field {
+	align-items: center;
 	flex-grow: 1;
 	min-width: 240px;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	max-width: 25rem;
 }
 
@@ -401,15 +428,20 @@ slot[name="profile"] {
 }
 
 ::slotted([ui5-input]) {
-	background-color: var(--sapShellColor);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-	color: var(--sapShell_TextColor);
-	height: 100%;
+	background: var(--_ui5_shellbar_search_field_background);
+	border: var(--_ui5_shellbar_search_field_border);
+	color: var(--_ui5_shellbar_search_field_color);
+	height: 2.25rem;
 	width: 100%;
 }
 
+::slotted([ui5-input]:hover) {
+	background: var(--_ui5_shellbar_search_field_background_hover);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
 ::slotted([ui5-input][focused]) {
-	outline: 1px dotted var(--sapContent_ContrastFocusColor);
+	outline: var(--_ui5_shellbar_search_field_outline_focused);
 }
 
 ::slotted([slot="logo"]) {
@@ -441,9 +473,11 @@ slot[name="profile"] {
 	position: relative;
 	outline: none;
 	box-sizing: border-box;
+	height: 100%;
 }
 
 .ui5-shellbar-copilot-wrapper:hover {
+	border-radius: var(--sapButton_BorderCornerRadius);
 	background: var(--sapShell_Hover_Background);
 }
 
@@ -452,17 +486,27 @@ slot[name="profile"] {
 	background: var(--sapShell_Active_Background);
 }
 
+.ui5-shellbar-copilot-wrapper:hover::after,
 .ui5-shellbar-copilot-wrapper:focus::after {
 	content: "";
 	position: absolute;
-	height: calc(100% - 0.75rem);
-	border: var(--_ui5_shellbar_logo_outline);
-	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+	left: var(--_ui5_shellbar_copilot_focus_offset);
+	right: var(--_ui5_shellbar_copilot_focus_offset);
+	top: var(--_ui5_shellbar_copilot_focus_offset);
+	bottom: var(--_ui5_shellbar_copilot_focus_offset);
+	outline: none;
 	pointer-events: none;
-	left: 0;
-	top: 0.25rem;
-	right: 0;
-	z-index: 1;
+	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+}
+
+.ui5-shellbar-copilot-wrapper:hover::after {
+	background: transparent;
+	box-shadow: var(--sapContent_Interaction_Shadow);
+	
+}
+
+.ui5-shellbar-copilot-wrapper:focus::after {
+	border: var(--_ui5_shellbar_logo_outline);
 }
 
 .ui5-shellbar-co-pilot-placeholder {
@@ -494,41 +538,8 @@ slot[name="profile"] {
 	stop-opacity: 0.2;
 }
 
-:host [dir="rtl"] ::slotted([ui5-button][slot="startButton"]) {
-	margin-left: 0.5rem;
-	margin-right: 0;
-}
-
-:host [dir="rtl"] .ui5-shellbar-menu-button {
-	margin-right: 0.5rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	margin-right: 0.375rem;
-	margin-left: 0;
-}
-
-:host(:not([show-search-field])) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 8rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
-	float: left;
-}
-
-:host([breakpoint-size="S"]) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 0;
-}
-
 ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0.5rem;
-	margin-left: 0;
+	margin-inline: 0 0.5rem;
 	justify-content: center;
 	align-items: center;
 }

package/src/themes/SideNavigation.css

@@ -2,39 +2,61 @@
     display: inline-block;
     width: 15rem;
     height: 100%;
-    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
     transition: width .25s;
-    --_ui5-tree-toggle-box-width: 1rem;
+    --_ui5-tree-toggle-box-width: var(--_ui5_side_navigation_icon_padding);
+    --_ui5_list_item_icon_size: var(--_ui5_side_navigation_icon_size);
+    --_ui5-tree-toggle-icon-size: var(--_ui5_side_navigation_toggle_icon_size);
+    --_ui5_list_item_title_size: var(--sapFontLargeSize);
+    --_ui5_list_item_icon_padding-inline-end: var(--_ui5_side_navigation_icon_padding);
+    --_ui5-tree-indent-step: var(--_ui5_side_navigation_indent_step);
 }
 
 :host([collapsed]) {
-    width: 3rem;
-    min-width: 3rem;
+    width: var(--_ui5_side_navigation_collapsed_state_width);
+}
+
+.ui5-sn-root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: var(--sapList_Background);
+    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+    box-shadow: var(--sapContent_Shadow0);
+}
+
+.ui5-sn-items-tree {
+    overflow: auto;
 }
 
 .ui5-sn-bottom-content-border {
     width: 100%;
-    padding: 0 0.5rem;
+    padding: 0 1rem;
     margin: 0.25rem 0;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
 }
 
+:host([collapsed]) .ui5-sn-bottom-content-border {
+    padding: 0 0.5rem;
+}
+
 .ui5-sn-bottom-content-border > span {
-    width: 90%;
+    width: 100%;
     height: .125rem;
-    background: var(--sapList_GroupHeaderBorderColor);
+    background: var(--_ui5_side_navigation_separator_backgound);
 }
 
-.ui5-sn-root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: var( --sapList_Background);
+.ui5-sn-spacer {
+    flex: 1;
+    min-height: 0;
 }
 
-.ui5-sn-spacer {
-    flex: auto;
-    min-height: 3rem;
+[ui5-tree]::part(toggle-icon) {
+    color: var(--sapContent_NonInteractiveIconColor);
+}
+
+[ui5-tree]::part(icon) {
+    color: var(--_ui5_side_navigation_icon_color);
 }

package/src/themes/SideNavigationPopover.css

@@ -1,13 +1,3 @@
-.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
-.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
 .ui5-side-navigation-popover::part(content) {
 	padding: 0;
 }

package/src/themes/TimelineItem.css

@@ -80,8 +80,8 @@
 	border: 1px solid var(--sapContent_NonInteractiveIconColor);
 	background-color: var(--sapContent_NonInteractiveIconColor);
 	border-radius: 50%;
-	width: .4375rem;
-	height: .4375rem;
+	width: 0.375rem;
+	height: 0.375rem;
 	position: absolute;
 	top: 0.9375rem;
 	left: 50%;
@@ -131,13 +131,13 @@
 
 .ui5-tli-bubble {
 	background: var(--sapGroup_ContentBackground);
-	border: 1px solid var(--sapList_BorderColor);
+	border: 1px solid var(--_ui5_TimelineItem_bubble_border_color);
 	box-sizing: border-box;
-	border-radius: 0.25rem;
+	border-radius: var(--_ui5_TimelineItem_bubble_border_radius);
 	flex: 1;
 	position: relative;
 	margin-left: .5rem;
-	padding: var(--_ui5_tl_bubble_padding);
+	padding: var(--_ui5_TimelineItem_bubble_content_padding);
 }
 
 :host([layout="Horizontal"]) .ui5-tli-bubble {
@@ -152,7 +152,7 @@
 .ui5-tli-bubble:focus::after {
 	content: "";
     border: var(--_ui5_TimelineItem_bubble_border_width) var(--_ui5_TimelineItem_bubble_border_style) var(--sapContent_FocusColor);
-    border-radius: var(--_ui5_TimelineItem_bubble_border_radius);
+    border-radius: var(--_ui5_TimelineItem_bubble_focus_border_radius);
 	position: absolute;
 	top: var(--_ui5_TimelineItem_bubble_border_top);
 	right: var(--_ui5_TimelineItem_bubble_border_right);
@@ -162,8 +162,8 @@
 }
 
 :host([layout="Horizontal"]) .ui5-tli-bubble:focus::after {
-	top: -0.625rem;
-	left: -0.125rem;
+	top: var(--_ui5_TimelineItem_horizontal_bubble_focus_top_offset);
+	left: var(--_ui5_TimelineItem_horizontal_bubble_focus_left_offset);
 }
 
 .ui5-tli-bubble-arrow {
@@ -179,7 +179,7 @@
 .ui5-tli-bubble-arrow::before {
 	content: "";
 	background: var(--sapGroup_ContentBackground);
-	border: 1px solid var(--sapList_BorderColor);
+	border: 1px solid var(--_ui5_TimelineItem_bubble_border_color);
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -216,7 +216,7 @@
 .ui5-tli-title,
 .ui5-tli-desc {
 	color: var(--sapTextColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-weight: 400;
 	font-size: var(--sapFontSize);
 }
@@ -228,17 +228,17 @@
 
 .ui5-tli-subtitle {
 	color: var(--sapContent_LabelColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-weight: 400;
 	font-size: var(--sapFontSmallSize);
-	padding-top: .375rem;
+	padding-top: var(--_ui5_TimelineItem_bubble_content_subtitle_padding_top);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .ui5-tli-desc {
-	padding-top: .75rem;
+	padding-top: var(--_ui5_TimelineItem_bubble_content_description_padding_top);
 }
 
 [dir=rtl] .ui5-tli-bubble-arrow--left {

package/src/themes/UploadCollectionItem.css

@@ -59,17 +59,19 @@
 }
 
 .ui5-uci-file-name {
-	width: 100%;
 	display: block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontLargeSize);
-	color: var(--sapTextColor);
 	margin-bottom: 0.25rem;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
+.ui5-uci-file-name-text {
+	color: var(--sapList_TextColor);
+}
+
 [ui5-link].ui5-uci-file-name {
 	pointer-events: all;
 }
@@ -80,9 +82,17 @@
 	font-size: var(--sapFontMediumSize);
 	color: var(--sapContent_LabelColor);
 	white-space: initial;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 /* Edit mode */
+
+.ui5-uci-edit-container {
+	display: flex;
+	align-items: center;
+}
+
 .ui5-uci-edit-container [ui5-input] {
 	width: 60%;
 	pointer-events: all;
@@ -111,19 +121,13 @@
 
 .ui5-uci-edit-buttons {
 	pointer-events: all;
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 .ui5-uci-edit-rename-btn {
 	margin-right: 0.125rem;
 }
 
-/* Progress Box */
-.ui5-uci-progress-box {
-	width: 20%;
-	min-width: 4rem;
-}
-
 @media(max-width: 30rem) {
 	.ui5-uci-content-and-edit-container {
 		display: block;
@@ -142,14 +146,13 @@
 		width: 100%;
 	}
 
-	.ui5-uci-edit-buttons,
-	.ui5-li-detailbtn,
-	.ui5-li-deletebtn {
-		margin-top: 0.75rem;
+	.ui5-uci-edit-buttons {
+		margin-inline-start: 0;
+		margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start);
 	}
 
-	.ui5-uci-edit-buttons {
-		margin-left: 0;
+	.ui5-uci-edit-buttons [ui5-button] {
+		margin-block-end: var(--ui5_upload_collection_button_margin_block_end);
 	}
 }
 
@@ -164,3 +167,15 @@
 	display: flex;
 	justify-content: space-between;
 }
+
+[ui5-button] {
+	margin-inline: 0.5rem;
+}
+
+[ui5-button]:first-of-type {
+	margin-inline-start: 0;
+}
+
+[ui5-button]:last-of-type {
+	margin-inline-end: var(--ui5_upload_collection_last_button_inline_end);
+}

package/src/themes/base/ShellBar-parameters.css

@@ -1,10 +1,24 @@
 :root {
+	--_ui5_shellbar_root_height: 2.75rem;
 	--_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor);
 	--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
 	--_ui5_shellbar_outline_offset: -0.0625rem;
+	--_ui5_shellbar_logo_outline_offset: var(--_ui5_shellbar_outline_offset);
 	--_ui5_shellbar_button_box_shadow: none;
+	--_ui5_shellbar_button_border: none;
+	--_ui5_shellbar_button_border_radius: 0.25rem;
 	--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);
 	--_ui5_shellbar_logo_outline_border_radius: 0;
 	--_ui5_shellbar_copilot_stop_color1: #C0D9F2;
 	--_ui5_shellbar_copilot_stop_color2: #FFFFFF;
+	--_ui5_shellbar_copilot_focus_offset: 0;
+	--_ui5_shellbar_search_button_size: 2.25rem;
+	--_ui5_shellbar_search_field_height: 2.25rem;
+	--_ui5_shellbar_search_button_border_radius: 0.25rem;
+	--_ui5_shellbar_search_field_background: var(--sapShellColor);
+	--_ui5_shellbar_search_field_border: 1px solid var(--sapShell_InteractiveBorderColor);
+	--_ui5_shellbar_search_field_color: var(--sapShell_TextColor);
+	--_ui5_shellbar_search_field_outline_focused: 1px dotted var(--sapContent_ContrastFocusColor);
+	--_ui5_shellbar_overflow_container_middle_height: 2.5rem;
+	--_ui5_shellbar_menu_button_title_font_size: 0.75rem;
 }

package/src/themes/base/SideNavigation-parameters.css

@@ -1,3 +1,9 @@
 :root {
-	--_ui5_side_navigation_overflow_border_radius: 0px;
+	--_ui5_side_navigation_separator_backgound: var(--sapList_GroupHeaderBorderColor);
+	--_ui5_side_navigation_icon_color: var(--sapContent_IconColor);
+	--_ui5_side_navigation_icon_size: 1rem;
+	--_ui5_side_navigation_toggle_icon_size: 1rem;
+	--_ui5_side_navigation_collapsed_state_width: 3.25rem;
+	--_ui5_side_navigation_indent_step: 2.25rem;
+	--_ui5_side_navigation_icon_padding: 1.125rem;
 }