Skip to content

Commit 005c3fe

Browse files
annschannsch
committed
refactor: updated colors and tonality
1 parent a8647f7 commit 005c3fe

File tree

6 files changed

+86
-43
lines changed

6 files changed

+86
-43
lines changed

‎source/_patterns/01-elements/link/_link.variables.scss‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎source/_patterns/01-elements/link/enterprise/_link.variables.scss‎

Whitespace-only changes.

‎source/_patterns/01-elements/link/enterprise/link.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
1-
@import "link.variables";
1+
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
2+
23
@import "../link";
34

45
// Define the available icons
56
.elm-link {
7+
&[rel] {
8+
--icon-font-family: var(--db-base-icon-font-family);
9+
--icon-font-size: var(--db-base-icon-font-size);
10+
}
11+
612
&[rel="configuration"] {
713
@include icon(glyph(settings), 24, "outline", $partial: $partial);
814
}
15+
916
&[rel="messages"] {
1017
@include icon(glyph(chat), 24, "outline", $partial: $partial);
1118
}
19+
1220
&[rel="account"] {
1321
@include icon(glyph(account), 24, "outline", $partial: $partial);
1422
}
23+
1524
&[rel="configuration"],
1625
&[rel="messages"],
1726
&[rel="account"] {
@@ -20,4 +29,12 @@
2029
display: inline-block;
2130
}
2231
}
32+
33+
&[data-size="small"] {
34+
&[rel] {
35+
@include icon-meta(20);
36+
// TODO: remove when icons are availabe in the correct size
37+
font-size: 16px;
38+
}
39+
}
2340
}

‎source/_patterns/01-elements/link/link.scss‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@use "@db-ui/base/build/scss/variables" as *;
2+
@use "@db-ui/base/build/scss/scaling-placeholder" as *;
23
@use "@db-ui/base/build/scss/helpers/functions" as *;
34
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
45

56
@import "../../../css/partials.meta";
6-
@import "link.variables";
77

88
.elm-link {
9-
// TODO: replace with color when it becomes available via core
10-
color: #282d37;
9+
color: var(--db-current-color, $db-colors-neutral-on-bg-enabled);
1110
display: inline-block;
1211
border-radius: to-rem($pxValue: 6);
1312

@@ -19,54 +18,63 @@
1918
text-underline-position: auto;
2019
}
2120

21+
// Changing color on hover should be animated by a transition
22+
transition: $db-transition-color;
23+
24+
&:hover {
25+
color: inherit;
26+
}
27+
2228
// "disabled" links
2329
&[aria-disabled="true"] {
24-
opacity: $link--disabled-opacity;
30+
opacity: var(--db-disabled-text-opacity, 0.5);
2531

2632
pointer-events: none;
2733

2834
&::before {
2935
color: initial;
3036
}
3137
}
32-
&[data-variant="internal"] {
33-
@include icon(glyph(link), 20, "outline", "after");
38+
39+
&[data-content] {
40+
--icon-font-family: var(--db-base-icon-font-family);
41+
--icon-font-size: var(--db-base-icon-font-size);
42+
}
43+
44+
&[data-content="internal"] {
45+
@include icon(glyph(link), 24, "outline", "after");
3446
}
35-
&[data-variant="external"] {
36-
@include icon(glyph(link-external), 20, "outline", "after");
47+
48+
&[data-content="external"] {
49+
@include icon(glyph(link-external), 24, "outline", "after");
3750
}
3851

39-
&[data-variant="internal"],
40-
&[data-variant="external"] {
52+
&[data-content="internal"],
53+
&[data-content="external"] {
4154
&::after {
55+
--icon-margin-before: var(--db-spacing-fixed-xs);
4256
margin-top: -3px;
43-
--icon-margin-before: #{to-rem($pxValue: 4)};
4457
}
58+
4559
&:focus-visible {
4660
outline-offset: -1px;
47-
padding: 0 2px 0 2px;
48-
}
49-
}
50-
// Sizes
51-
&%size-Small {
52-
&:not(.is-icon-text-replace) {
53-
font-size: to-em($pxValue: 12);
61+
padding: 0 2px;
5462
}
5563
}
5664

57-
&[data-size="small"] {
58-
// TODO: replace with color when it becomes available via core
59-
color: #42464f;
60-
@extend %size-Small;
61-
&::after {
62-
--icon-font-size: #{to-rem($pxValue: 16)};
63-
}
64-
&[rel],
65-
&[data-icon],
66-
&[data-icon-before] {
67-
@include iconMeta(20);
68-
// TODO: remove when icons are availabe in the correct size
69-
font-size: 16px;
65+
&[data-variant="primary"] {
66+
color: $db-colors-primary-enabled;
67+
68+
&:not(:disabled) {
69+
&:hover {
70+
color: $db-colors-primary-hover;
71+
}
72+
73+
&:active {
74+
color: $db-colors-primary-pressed;
75+
}
7076
}
7177
}
78+
79+
// data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality"
7280
}

‎source/_patterns/01-elements/link/links.hbs‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,18 @@
1010
<p class="{{ styleModifier }}">
1111
{{> elements-link href='#' value='Teaser link' }}
1212
</p>
13+
1314
<p class="{{ styleModifier }}">
14-
{{> elements-link href='#' value='Teaser link' icon='settings' }}
15+
{{> elements-link href='#' value='Teaser link' data-variant="primary"}}
1516
</p>
17+
1618
<p class="{{ styleModifier }}">
1719
{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}
1820
</p>
19-
<p class="{{ styleModifier }}">
20-
{{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}
21-
</p>
2221

2322
<p class="{{ styleModifier }}">
24-
{{> elements-link href='#' value='Internal link hbs' data-variant='internal' size=size }}
23+
{{> elements-link href='#' value='Internal link hbs' data-content='internal' size=size }}
2524
</p>
2625
<p class="{{ styleModifier }}">
27-
{{> elements-link href='#' value='External link hbs' data-variant='external' size=size }}
26+
{{> elements-link href='#' value='External link hbs' data-content='external' size=size }}
2827
</p>

‎source/_patterns/01-elements/link/tonality.hbs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
<p class="db-ui-functional">
3+
{{> elements-link href='#' value='Internal link functional' data-content='internal' }}
4+
{{> elements-link href='#' value='External link functional' data-content='external' }}
5+
{{> elements-link href='#' value='Internal link functional small' data-content='internal' size="small" }}
6+
{{> elements-link href='#' value='External link functional small' data-content='external' size="small" }}
7+
</p>
8+
9+
10+
<p class="db-ui-regular">
11+
{{> elements-link href='#' value='Internal link regular (Default)' data-content='internal' }}
12+
{{> elements-link href='#' value='External link regular (Default)' data-content='external' }}
13+
{{> elements-link href='#' value='Internal link regular (Default) small' data-content='internal' size="small" }}
14+
{{> elements-link href='#' value='External link regular (Default) small' data-content='external' size="small" }}
15+
</p>
16+
17+
18+
19+
<p class="db-ui-expressive">
20+
{{> elements-link href='#' value='Internal link expressive' data-content='internal' }}
21+
{{> elements-link href='#' value='External link expressive' data-content='external' }}
22+
{{> elements-link href='#' value='Internal link expressive small' data-content='internal' size="small" }}
23+
{{> elements-link href='#' value='External link expressive small' data-content='external' size="small" }}
24+
</p>

0 commit comments

Comments
 (0)