Skip to content

Commit ee44117

Browse files
NHristov-sapNHristov-sap
authored
feat(ui5-link): Implement SAP Horizon theme parameters (#5011)
* CSS parameters have been applied in the component's CSS files for Horizon/Horizon Dark/Horizon HCB/Horizon HCW themes * add more parameters for hover states
1 parent 4ef2c65 commit ee44117

File tree

13 files changed

+72
-29
lines changed

13 files changed

+72
-29
lines changed

‎packages/main/src/themes/Link.css

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@
77
:host {
88
max-width: 100%;
99
color: var(--sapLinkColor);
10-
font-family: "72override", var(--sapFontFamily);
10+
font-family: var(--sapFontFamily);
1111
font-size: var(--sapFontSize);
1212
cursor: pointer;
1313
outline: none;
1414
text-decoration: var(--_ui5_link_text_decoration);
15-
}
16-
17-
:host(:hover) {
18-
text-decoration: var(--_ui5_link_hover_text_decoration);
15+
text-shadow: var(--sapContent_TextShadow);
1916
}
2017

2118
:host([disabled]) {
@@ -27,16 +24,16 @@
2724
outline: none;
2825
cursor: default;
2926
pointer-events: none;
30-
opacity: var(--_ui5_link_opacity);
27+
opacity: var(--sapContent_DisabledOpacity);
3128
}
3229

3330
:host([design="Emphasized"]) .ui5-link-root {
34-
font-weight: bold;
31+
font-family: var(--sapFontBoldFamily);
3532
}
3633

37-
:host([design="Subtle"]) .ui5-link-root,
38-
:host([design="Subtle"]) .ui5-link-root:visited {
34+
:host([design="Subtle"]) .ui5-link-root {
3935
color: var(--sapLink_SubtleColor);
36+
text-decoration: var(--_ui5_link_subtle_text_decoration);
4037
}
4138

4239
:host([design="Subtle"]) .ui5-link-root:focus {
@@ -60,18 +57,38 @@
6057
text-decoration: inherit;
6158
}
6259

63-
.ui5-link-root,
64-
.ui5-link-root:visited,
65-
.ui5-link-root:active {
66-
color: currentColor;
60+
:host(:active) .ui5-link-root {
61+
color: var(--sapLink_Active_Color);
62+
text-decoration: var(--_ui5_link_active_text_decoration);
63+
}
64+
65+
.ui5-link-root:visited {
66+
color: var(--sapLink_Visited_Color);
6767
}
6868

6969
:host .ui5-link-root {
7070
border: var(--_ui5_link_border);
7171
border-radius: var(--_ui5_link_focus_border-radius);
7272
}
7373

74-
:host([focused]) .ui5-link-root {
74+
:host([focused]) .ui5-link-root,
75+
:host([design="Subtle"][focused]) .ui5-link-root {
76+
background-color: var(--_ui5_link_focus_background_color);
77+
color: var(--_ui5_link_focus_color);
7578
border: var(--_ui5_link_border_focus);
76-
text-decoration: underline;
79+
border-radius: var(--_ui5_link_focus_border-radius);
80+
text-decoration: var(--_ui5_link_focus_text_decoration);
81+
text-shadow: none;
7782
}
83+
84+
:host(:hover),
85+
:host(:hover) .ui5-link-root {
86+
color: var(--sapLink_Hover_Color);
87+
text-decoration: var(--_ui5_link_hover_text_decoration);
88+
}
89+
90+
:host([focused]:hover),
91+
:host([focused]:hover) .ui5-link-root {
92+
color: var(--_ui5_link_focused_hover_text_color);
93+
text-decoration: var(--_ui5_link_focused_hover_text_decoration);
94+
}

‎packages/main/src/themes/base/Link-parameters.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
:root {
2-
--_ui5_link_opacity: 0.5;
32
--_ui5_link_text_decoration: none;
43
--_ui5_link_hover_text_decoration: underline;
4+
--_ui5_link_focused_hover_text_decoration: underline;
5+
--_ui5_link_focused_hover_text_color: var(--sapLinkColor);
6+
--_ui5_link_active_text_decoration: underline;
57
--_ui5_link_border: 0.0625rem dotted transparent;
68
--_ui5_link_border_focus: 0.0625rem dotted var(--sapContent_FocusColor);
79
--_ui5_link_focus_border-radius: 0;
10+
--_ui5_link_focus_background_color: transparent;
11+
--_ui5_link_focus_color: inherit;
12+
--_ui5_link_focus_text_decoration: underline;
13+
--_ui5_link_subtle_text_decoration: none;
814
}

‎packages/main/src/themes/sap_belize_hcb/Link-parameters.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: underline;
65
--_ui5_link_hover_text_decoration: none;
6+
--_ui5_link_border: 0.125rem dotted transparent;
7+
--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
78
}

‎packages/main/src/themes/sap_belize_hcw/Link-parameters.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: underline;
65
--_ui5_link_hover_text_decoration: none;
6+
--_ui5_link_border: 0.125rem dotted transparent;
7+
--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
78
}

‎packages/main/src/themes/sap_fiori_3/Link-parameters.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: none;
65
--_ui5_link_hover_text_decoration: underline;
76
}

‎packages/main/src/themes/sap_fiori_3_dark/Link-parameters.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: none;
65
--_ui5_link_hover_text_decoration: underline;
76
}

‎packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: underline;
65
--_ui5_link_hover_text_decoration: none;
6+
--_ui5_link_active_text_decoration: none;
7+
--_ui5_link_focus_text_decoration: none;
8+
--_ui5_link_border: 0.125rem dotted transparent;
9+
--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
710
}

‎packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: underline;
65
--_ui5_link_hover_text_decoration: none;
6+
--_ui5_link_active_text_decoration: none;
7+
--_ui5_link_focus_text_decoration: none;
8+
--_ui5_link_border: 0.125rem dotted transparent;
9+
--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
710
}

‎packages/main/src/themes/sap_horizon/Link-parameters.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: none;
65
--_ui5_link_hover_text_decoration: underline;
6+
--_ui5_link_focused_hover_text_decoration: none;
7+
--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
78
--_ui5_link_border: 0.125rem solid transparent;
89
--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
9-
--_ui5_link_focus_border-radius: 0.25rem;
10+
--_ui5_link_focus_border-radius: 0.125rem;
11+
--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
12+
--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
13+
--_ui5_link_subtle_text_decoration: underline;
1014
}

‎packages/main/src/themes/sap_horizon_dark/Link-parameters.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
@import "../base/Link-parameters.css";
22

33
:root {
4-
--_ui5_link_opacity: 0.4;
54
--_ui5_link_text_decoration: none;
65
--_ui5_link_hover_text_decoration: underline;
6+
--_ui5_link_focused_hover_text_decoration: none;
7+
--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
78
--_ui5_link_border: 0.125rem solid transparent;
89
--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
9-
--_ui5_link_focus_border-radius: 0.25rem;
10+
--_ui5_link_focus_border-radius: 0.125rem;
11+
--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
12+
--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
13+
--_ui5_link_subtle_text_decoration: underline;
1014
}

0 commit comments

Comments
 (0)