@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/src/themes/Input.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -12,45 +13,51 @@
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
-	background-color: var(--_ui5-input-background-color);
 	border: var(--_ui5-input-border);
-	border-radius: var(--_ui5-input-border-radius);
+	border-radius: var(--_ui5_input_border_radius);
 	box-sizing: border-box;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
 	text-align: start;
-	transition: var(--_ui5-input-transition);
-	background-image: var(--_ui5-input-background-image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	transition: var(--_ui5_input_transition);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_input_background_color);
 }
 
-:host([focused]) {
-	border-color: var(--_ui5-input-focused-border-color);
+:host([focused]:not([opened])) {
+	border-color: var(--_ui5_input_focused_border_color);
 	background-color: var(--sapField_Focus_Background);
-	outline: var(--_ui5-input-focus-outline);
-	outline-offset: var(--_ui5-input-focus-outline-offset);
-	box-shadow: var(--_ui5-input-focus-box-shadow);
 }
 
-.ui5-input-root::before {
-	content: "";
-    position: absolute;
-    width: calc(100% - 2px);
-    left: 1px;
-    bottom: -2px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    height: var(--_ui5-input-bottom-border-height);
-    transition: var(--_ui5-input-transition);
-    background-color: var(--_ui5-input-bottom-border-color);
+.ui5-input-focusable-element {
+	position: relative;
 }
 
-:host([value-state]:not([value-state="None"])[focused]) {
-	outline: var(--_ui5-input-value-state-outline);
-	outline-offset: var(--_ui5-input-value-state-outline-offset);
+:host([focused]:not([opened])) .ui5-input-focusable-element::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+.ui5-input-root::before {
+	content: "";
+	position: absolute;
+	width: calc(100% - 2px);
+	left: 1px;
+	bottom: -2px;
+	border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	height: var(--_ui5_input_bottom_border_height);
+	transition: var(--_ui5_input_transition);
+	background-color: var(--_ui5_input_bottom_border_color);
 }
 
 .ui5-input-root {
@@ -63,13 +70,15 @@
 	box-sizing: border-box;
 	color: inherit;
 	transition: border-color .2s ease-in-out;
+	border-radius: var(--_ui5_input_border_radius);
+	overflow: hidden;
 }
 
 :host([disabled]) {
 	opacity: var(--_ui5_input_disabled_opacity);
 	cursor: default;
 	pointer-events: none;
-	background-color: var(--_ui5-input-disabled-background);
+	background-color: var(--_ui5-input_disabled_background);
 	border-color: var(--_ui5_input_disabled_border_color);
 }
 
@@ -105,17 +114,10 @@
 	padding: var(--_ui5_input_inner_padding_with_icon);
 }
 
-.ui5-input-readonly-icon {
-	display: var(--_ui5_input_readonly_icon_display);
-	padding: var(--_ui5_input_icon_padding);
-	margin-right: 0.125rem;
-	align-self: center;
-}
-
 .ui5-input-value-state-icon {
 	height: 100%;
 	display: var(--_ui5-input-value-state-icon-display);
-    align-items: center;
+	align-items: center;
 }
 
 .ui5-input-value-state-icon > svg {
@@ -131,72 +133,65 @@
 :host([disabled]) [inner-input]::-webkit-input-placeholder {
 	visibility: hidden;
 }
+
 :host([readonly]) [inner-input]::-webkit-input-placeholder {
 	visibility: hidden;
 }
-[inner-input]::-webkit-input-placeholder {
-	font-weight: normal;
-	font-style: var(--_ui5-input-placeholder-style);
-	color: var(--_ui5-input-placeholder-color);
-	padding-right: 0.125rem;
-}
 
 :host([disabled]) [inner-input]::-moz-placeholder {
 	visibility: hidden;
 }
+
 :host([readonly]) [inner-input]::-moz-placeholder {
 	visibility: hidden;
 }
-[inner-input]::-moz-placeholder {
+
+[inner-input]::-webkit-input-placeholder {
 	font-weight: normal;
-	font-style: var(--_ui5-input-placeholder-style);
-	color: var(--sapField_PlaceholderTextColor);
+	font-style: var(--_ui5_input_placeholder_style);
+	color: var(--_ui5_input_placeholder_color);
 	padding-right: 0.125rem;
 }
 
-:host([disabled]) [inner-input]:-ms-input-placeholder {
-	visibility: hidden;
-}
-:host([readonly]) [inner-input]:-ms-input-placeholder {
-	visibility: hidden;
-}
-[inner-input]:-ms-input-placeholder {
+[inner-input]::-moz-placeholder {
 	font-weight: normal;
-	font-style: italic;
-	color: var(--sapField_PlaceholderTextColor);
+	font-style: var(--_ui5_input_placeholder_style);
+	color: var(--_ui5_input_placeholder_color);
 	padding-right: 0.125rem;
 }
 
 :host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5-input-value-state-error-border-botom-color);
+	color: var(--_ui5-input_error_placeholder_color);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Error"]) [inner-input]::-moz-placeholder {
-	color: var(--_ui5-input-value-state-error-border-botom-color);
+	color: var(--_ui5-input_error_placeholder_color);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5-input-value-state-warning-border-botom-color);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Warning"]) [inner-input]::-moz-placeholder {
-	color: var(--_ui5-input-value-state-warning-border-botom-color);
+	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
 :host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5-input-value-state-success-border-botom-color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Success"]) [inner-input]::-moz-placeholder {
-	color: var(--_ui5-input-value-state-success-border-botom-color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Information"]) [inner-input]::-webkit-input-placeholder {
-	color: var(--_ui5-input-value-success-information-border-botom-color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 :host([value-state="Information"]) [inner-input]::-moz-placeholder {
-	color: var(--_ui5-input-value-success-information-border-botom-color);
+	color: var(--_ui5_input_placeholder_color);
 }
 
 .ui5-input-content {
@@ -209,44 +204,33 @@
 	outline: none;
 	background: transparent;
 	color: inherit;
+	border-radius: var(--_ui5_input_border_radius);
 }
 
 :host([readonly]) {
 	border-color: var(--_ui5_input_readonly_border_color);
-	background: var(--_ui5-input-readonly-background);
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--_ui5_input_readonly_background);
 }
 
+:host([value-state="None"]:not([readonly]):hover),
 :host(:not([value-state]):not([readonly]):hover) {
+	border: var(--_ui5_input_hover_border);
+	border-color: var(--_ui5_input_focused_border_color);
+	box-shadow: var(--_ui5_input_hover_box_shadow);
+	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
-	border: var(--_ui5-input-hover-border);
-	box-shadow: var(--_ui5-input-hover-box-shadow);
-	background-image: var(--_ui5-input-background-image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
 }
-
-:host(:not([value-state]):not([readonly])[focused]:hover),
-:host([value-state="None"]:not([readonly])[focused]:hover) {
-	border-color: var(--_ui5-input-focused-border-color);
-	box-shadow: var(--_ui5-input-focus-box-shadow);
+:host(:not([value-state]):not([readonly])[focused]:not([opened]):hover),
+:host([value-state="None"]:not([readonly])[focused]:not([opened]):hover) {
+	box-shadow: none;
 }
 
-:host(:not([value-state]):not([readonly]):hover) {
-	border: var(--_ui5-input-hover-border);
-}
-
-:host([focused]) .ui5-input-root::before {
+:host([focused]):not([opened]) .ui5-input-root::before {
 	content: none;
 }
 
-:host([value-state="None"]:not([readonly]):hover) {
-	background-color: var(--sapField_Hover_Background);
-	border: var(--_ui5-input-hover-border);
-	box-shadow: var(--_ui5-input-hover-box-shadow);
-}
-
-:host([value-state]:not([value-state="None"])) {
+:host(:not([readonly]):not([disabled])[value-state]:not([value-state="None"])) {
 	border-width: var(--_ui5_input_state_border_width);
 }
 
@@ -264,34 +248,29 @@
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Information"]) [inner-input] {
-	font-style: var(--_ui5_input_information_font_style);
-	font-weight: var(--_ui5_input_information_font_weight);
-	text-indent: var(--_ui5_input_information_text_indent);
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--_ui5_input_value_state_error_border_color);
 }
 
-:host([value-state="Error"]:not([readonly])) {
-	background-color: var(--sapField_InvalidBackground);
-	border-color: var(--_ui5-input-value-state-error-border-color);
-	background-image: var(--_ui5-input-error-background-image);
-	background-size: 100% var(--sapField_InvalidBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) {
+	background-color: var(--_ui5_input_focused_value_state_error_background);
+	border-color: var(--_ui5_input_focused_value_state_error_border_color);
 }
 
-:host([value-state="Error"][focused]:not([readonly])) {
-	background-color: var(--_ui5-input-focused-value-state-error-background);
-	border-color: var(--_ui5-input-focused-value-state-error-border-color);
-	box-shadow: var(--_ui5-input-value-state-error-focus-box-shadow);
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
 }
 
 :host([value-state="Error"]:not([readonly])) .ui5-input-root::before{
 	background-color: var(--_ui5-input-value-state-error-border-botom-color);
 }
 
-:host([value-state="Error"]:not([readonly]):not([focused]):hover) {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5-input-value-state-error-hover-box-shadow);
+:host([value-state="Error"]:not([readonly]):not([focused]):hover),
+:host([value-state="Error"]:not([readonly])[focused][opened]:hover) {
+	background-color: var(--_ui5_input_value_state_error_hover_background);
+	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
 }
 
 :host([value-state="Error"]:not([readonly]):not([disabled])),
@@ -300,84 +279,77 @@
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly])) {
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
-	border-color: var(--_ui5-input-value-state-warning-border-color);
-	background-image: var(--_ui5-input-warning-background-image);
-	background-size: 100% var(--sapField_WarningBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	border-color: var(--_ui5_input_value_state_warning_border_color);
+}
+
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) {
+	background-color: var(--_ui5_input_focused_value_state_warning_background);
+	border-color: var(--_ui5_input_focused_value_state_warning_border_color);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) {
-	background-color: var(--_ui5-input-focused-value-state-warning-background);
-	border-color: var(--_ui5-input-focused-value-state-warning-border-color);
-	box-shadow: var(--_ui5-input-value-state-warning-focus-box-shadow);
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
 }
 
 :host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{
-	background-color: var(--_ui5-input-value-state-warning-border-botom-color);
+	background-color: var(--_ui5_input_value_state_warning_border_botom_color);
 }
 
-:host([value-state="Warning"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover),
+:host([value-state="Warning"]:not([readonly])[focused][opened]:hover)  {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5-input-value-state-warning-hover-box-shadow);
+	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
 }
 
-:host([value-state="Success"]:not([readonly])) {
+:host([value-state="Success"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
-	border-color: var(--_ui5-input-value-state-success-border-color);
-	border-width: var(--_ui5-input-value-state-success-border-width);
-	background-image: var(--_ui5-input-success-background-image);
-	background-size: 100% var(--sapField_SuccessBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	border-color: var(--_ui5_input_value_state_success_border_color);
+	border-width: var(--_ui5_input_value_state_success_border_width);
+}
+
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) {
+	background-color: var(--_ui5_input_focused_value_state_success_background);
+	border-color: var(--_ui5_input_focused_value_state_success_border_color);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) {
-	background-color: var(--_ui5-input-focused-value-state-success-background);
-	border-color: var(--_ui5-input-focused-value-state-success-border-color);
-	box-shadow: var(--_ui5-input-value-state-success-focus-box-shadow);
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
+	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
 }
 
 :host([value-state="Success"]:not([readonly])) .ui5-input-root::before{
-	background-color: var(--_ui5-input-value-state-success-border-botom-color);
+	background-color: var(--_ui5_input_value_state_success_border_botom_color);
 }
 
-:host([value-state="Success"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Success"]:not([readonly]):not([focused]):hover),
+:host([value-state="Success"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5-input-value-state-success-hover-box-shadow);
+	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
 }
 
-:host([value-state="Information"]:not([readonly])) {
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_InformationBackgroundStyle);
 	background-color: var(--sapField_InformationBackground);
-	border-color: var(--_ui5-input-value-state-information-border-color);
-	border-width: var(--_ui5-input-information_border_width);
-	background-image: var(--_ui5-input-information-background-image);
-	background-size: 100% var(--sapField_InformationBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	border-color: var(--_ui5_input_value_state_information_border_color);
+	border-width: var(--_ui5_input_information_border_width);
 }
 
-:host([value-state="Information"][focused]:not([readonly])) {
-	background-color: var(--_ui5-input-focused-value-state-information-background);
-	border-color: var(--_ui5-input-focused-value-state-information-border-color);
-	box-shadow: var(--_ui5-input-focus-box-shadow);
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) {
+	background-color: var(--_ui5_input_focused_value_state_information_background);
+	border-color: var(--_ui5_input_focused_value_state_information_border_color);
 }
 
 :host([value-state="Information"]:not([readonly])) .ui5-input-root::before{
-	background-color: var(--_ui5-input-value-success-information-border-botom-color);
+	background-color: var(--_ui5_input_value_success_information_border_botom_color);
 }
 
-:host([value-state="Information"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5-input-value-state-information-hover-box-shadow);
-}
-
-/* Remove IE's defaut clear button */
-[inner-input]::-ms-clear {
-	height: 0;
-	width: 0;
+	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
 }
 
 /* Input Icon */
@@ -395,9 +367,72 @@
 	affects all icons in the combobox incuding these in the list items
 */
 ::slotted([ui5-icon][slot="icon"]) {
-	padding: var(--_ui5_input_icon_padding);
+	align-self: start;
+	padding: var(--_ui5_input_custom_icon_padding);
+}
+
+:host([value-state="Error"]) [input-icon],
+:host([value-state="Warning"]) [input-icon]{
+	padding: var(--_ui5_input_error_warning_icon_padding);
+}
+
+:host([value-state="Information"]) [input-icon] {
+	padding: var(--_ui5_input_information_icon_padding);
+}
+
+:host([value-state="Error"]) ::slotted([input-icon][ui5-icon]),
+:host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]),
+:host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_error_warning_custom_icon_padding);
+}
+
+:host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_information_custom_icon_padding);
+}
+
+:host([value-state="Error"]) [input-icon]:active,
+:host([value-state="Error"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+	color: var(--_ui5_input_icon_error_pressed_color);
 }
 
+:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+}
+
+:host([value-state="Warning"]) [input-icon]:active,
+:host([value-state="Warning"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+	color: var(--_ui5_input_icon_warning_pressed_color);
+}
+
+:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+}
+
+:host([value-state="Information"]) [input-icon]:active,
+:host([value-state="Information"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+	color: var(--_ui5_input_icon_information_pressed_color);
+}
+
+:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+}
+
+:host([value-state="Success"]) [input-icon]:active,
+:host([value-state="Success"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+	color: var(--_ui5_input_icon_success_pressed_color);
+}
+
+:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+}
+
+
+
+
 /* Chrome, Safari, Edge, Opera */
 [inner-input]::-webkit-outer-spin-button,
 [inner-input]::-webkit-inner-spin-button {

package/src/themes/InputIcon.css

@@ -10,23 +10,23 @@
 	cursor: pointer;
 	outline: none;
 	padding: var(--_ui5_input_icon_padding);
-	margin-right: var(--_ui5_input_icon_margin);
-	border-left: var(--_ui5_input_icon_border);
+	border-inline-start: var(--_ui5_input_icon_border);
 	min-width: 1rem;
 	min-height: 1rem;
 	border-radius: var(--_ui5_input_icon_border_radius);
-	align-self: center;
 }
 
 [input-icon][pressed] {
 	background: var(--_ui5_input_icon_pressed_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
 [input-icon]:active {
 	background-color: var(--sapButton_Active_Background);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
@@ -36,18 +36,6 @@
 }
 
 [input-icon]:hover {
-	border-left: var(--_ui5_select_hover_icon_left_border);
+	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
-}
-
-[input-icon][dir="rtl"]:hover {
-	border-left: none;
-	border-right: var(--_ui5_select_hover_icon_left_border);
-}
-
-[input-icon][dir="rtl"] {
-	border-left: none;
-	margin-right: 0;
-	margin-left: var(--_ui5_input_icon_margin);
-	border-right: var(--_ui5_input_icon_border);
 }

package/src/themes/Label.css

@@ -75,11 +75,5 @@ bdi {
 }
 
 :host([required][show-colon]) .ui5-label-required-colon:after {
-	margin-right: 0;
-	margin-left: .125rem;
-}
-
-:host([required][show-colon]) [dir="rtl"] .ui5-label-required-colon:after {
-	margin-right: .125rem;
-	margin-left: 0;
+	margin-inline-start: .125rem;
 }

package/src/themes/Link.css

@@ -7,15 +7,12 @@
 :host {
 	max-width: 100%;
 	color: var(--sapLinkColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	cursor: pointer;
 	outline: none;
 	text-decoration: var(--_ui5_link_text_decoration);
-}
-
-:host(:hover) {
-	text-decoration: var(--_ui5_link_hover_text_decoration);
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 :host([disabled]) {
@@ -27,16 +24,16 @@
 	outline: none;
 	cursor: default;
 	pointer-events: none;
-	opacity: var(--_ui5_link_opacity);
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 :host([design="Emphasized"]) .ui5-link-root {
-	font-weight: bold;
+	font-family: var(--sapFontBoldFamily);
 }
 
-:host([design="Subtle"]) .ui5-link-root,
-:host([design="Subtle"]) .ui5-link-root:visited {
+:host([design="Subtle"]) .ui5-link-root {
 	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration);
 }
 
 :host([design="Subtle"]) .ui5-link-root:focus {
@@ -58,12 +55,12 @@
 	word-wrap: normal;
 	outline: none;
 	text-decoration: inherit;
+	color: inherit;
 }
 
-.ui5-link-root,
-.ui5-link-root:visited,
-.ui5-link-root:active {
-	color: currentColor;
+:host(:active) .ui5-link-root {
+	color: var(--sapLink_Active_Color);
+	text-decoration: var(--_ui5_link_active_text_decoration);
 }
 
 :host .ui5-link-root {
@@ -71,7 +68,25 @@
 	border-radius: var(--_ui5_link_focus_border-radius);
 }
 
-:host([focused]) .ui5-link-root {
+:host([focused]) .ui5-link-root,
+:host([design="Subtle"][focused]) .ui5-link-root {
+	background-color: var(--_ui5_link_focus_background_color);
+	color:  var(--_ui5_link_focus_color);
 	border: var(--_ui5_link_border_focus);
-	text-decoration: underline;
+	border-radius: var(--_ui5_link_focus_border-radius);
+	text-decoration: var(--_ui5_link_focus_text_decoration);
+	text-shadow: none;
 }
+
+:host(:hover) {
+	color: var(--sapLink_Hover_Color);
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+:host([focused]:hover) {
+	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
+:host([focused]:hover) .ui5-link-root {
+	color: var(--_ui5_link_focused_hover_text_color);
+}

package/src/themes/List.css

@@ -106,7 +106,8 @@
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
 	height: var(--_ui5_list_no_data_height);
-	font-size: var(--sapFontSize);
+	font-size: var(--_ui5_list_no_data_font_size);
+	font-family: "72override", var(--sapFontFamily);
 }
 
 .ui5-list-nodata-text {