diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc
index a37debec1c..eb6c80b163 100644
--- a/docs/migrationGuide.adoc
+++ b/docs/migrationGuide.adoc
@@ -43,6 +43,13 @@ We've remove the deprecated previous HTML implementation of the label by an `out
- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
+=== `link`
+
+- Removed the ability for custom icons according to guidelines 3.0
+- Added `primary` as variant for highlighting links
+- Changed use of `data-variant` to use with `primary` and used `data-content` attribute for differentiation between `internal` and `external`
+- Font-size definition has moved to DB UI Base due to our `tonality` introduction (default and for `data-size=small`)
+
== DB UI Core 2.2.0 Migration Guide
=== progress element
diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss
index 1246d2d532..88d556b9d8 100644
--- a/source/_patterns/00-base/_init.scss
+++ b/source/_patterns/00-base/_init.scss
@@ -42,7 +42,9 @@ nav,
// General styles (TODO: most likely move those to DB UI Base)
:root {
--db-focus-outline-offset: 1px;
- --db-focus-outline-color: #2c95c4;
+ --db-focus-outline-color: #0087b9;
+
+ --db-disabled-text-opacity: 0.5;
}
// Focus styles
diff --git a/source/_patterns/01-elements/link/_link.hbs b/source/_patterns/01-elements/link/_link.hbs
index 52d4fffa8c..0b9b602bdc 100644
--- a/source/_patterns/01-elements/link/_link.hbs
+++ b/source/_patterns/01-elements/link/_link.hbs
@@ -12,7 +12,6 @@
{{#if target}} target="{{ target }}"{{/if }}
{{#if current}} aria-current="{{ current }}"{{/if }}
{{#if size }} data-size="{{ size }}"{{/if }}
- {{#if icon}} data-icon="{{ icon }}"{{/if}}
- {{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
- >{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}
-
+ {{#if data-variant}} data-variant="{{ data-variant }}"{{/if}}
+ {{#if data-content}} data-content="{{data-content}}"{{/if}}
+ >{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}
diff --git a/source/_patterns/01-elements/link/_link.variables.scss b/source/_patterns/01-elements/link/_link.variables.scss
deleted file mode 100644
index 082635a9e1..0000000000
--- a/source/_patterns/01-elements/link/_link.variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "@db-ui/base/build/scss/variables" as *;
-@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
-
-$link--disabled-opacity: 0.4 !default;
-$link-reaMain--color: $db-colors-information-enabled !default;
diff --git a/source/_patterns/01-elements/link/enterprise/_link.variables.scss b/source/_patterns/01-elements/link/enterprise/_link.variables.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/source/_patterns/01-elements/link/enterprise/link.scss b/source/_patterns/01-elements/link/enterprise/link.scss
index 27a0c2c9bd..50be6504a1 100644
--- a/source/_patterns/01-elements/link/enterprise/link.scss
+++ b/source/_patterns/01-elements/link/enterprise/link.scss
@@ -1,2 +1,40 @@
-@import "link.variables";
+@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
+
@import "../link";
+
+// Define the available icons
+.elm-link {
+ &[rel] {
+ --icon-font-family: var(--db-base-icon-font-family);
+ --icon-font-size: var(--db-base-icon-font-size);
+ }
+
+ &[rel="configuration"] {
+ @include icon(glyph(settings), 24, "outline", $partial: $partial);
+ }
+
+ &[rel="messages"] {
+ @include icon(glyph(chat), 24, "outline", $partial: $partial);
+ }
+
+ &[rel="account"] {
+ @include icon(glyph(account), 24, "outline", $partial: $partial);
+ }
+
+ &[rel="configuration"],
+ &[rel="messages"],
+ &[rel="account"] {
+ &::before {
+ // preventing an underlined icon on click
+ display: inline-block;
+ }
+ }
+
+ &[data-size="small"] {
+ &[rel] {
+ @include icon-meta(20);
+ // TODO: remove when icons are availabe in the correct size
+ font-size: 16px;
+ }
+ }
+}
diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss
index 70c72188bc..af9611f2c3 100644
--- a/source/_patterns/01-elements/link/link.scss
+++ b/source/_patterns/01-elements/link/link.scss
@@ -1,28 +1,30 @@
@use "@db-ui/base/build/scss/variables" as *;
+@use "@db-ui/base/build/scss/scaling-placeholder" as *;
+@use "@db-ui/base/build/scss/color-placeholder" as *;
@use "@db-ui/base/build/scss/helpers/functions" as *;
@use "@db-ui/base/build/scss/icon/icons.helpers" as *;
@import "../../../css/partials.meta";
-@import "link.variables";
.elm-link {
- border-radius: to-rem($pxValue: 4);
+ color: var(--db-current-color, $db-colors-neutral-on-bg-enabled);
display: inline-block;
+ border-radius: to-rem($pxValue: 6);
// Link underline
- text-underline-offset: to-rem($pxValue: 3);
- text-underline-position: under;
- @supports (text-underline-offset: 3px) {
- text-underline-position: auto;
- }
+ text-underline-position: from-font;
+ text-decoration-thickness: to-rem($pxValue: 1);
+
+ // Changing color on hover should be animated by a transition
+ transition: outline 0.06s, color $db-transition-color;
- &:active {
- color: initial;
+ &:hover {
+ color: inherit;
}
// "disabled" links
&[aria-disabled="true"] {
- opacity: $link--disabled-opacity;
+ opacity: var(--db-disabled-text-opacity, 0.5);
pointer-events: none;
@@ -31,46 +33,42 @@
}
}
- // Sizes
- &%size-Small {
- &:not(.is-icon-text-replace) {
- font-size: to-rem($pxValue: 14);
- }
-
- &[rel],
- &[data-icon],
- &[data-icon-before] {
- @include icon-meta(20);
- }
-
- &[data-icon-after]::after {
- @include icon-meta($size: 20, $position: "after");
- }
+ &[data-content] {
+ --icon-font-family: var(--db-base-icon-font-family);
+ --icon-font-size: var(--db-base-icon-font-size);
}
- &[data-size="small"] {
- @extend %size-Small;
+ &[data-content="internal"] {
+ @include icon(glyph(link), 24, "outline", "after");
}
- // Define the available icons
- &[rel="configuration"] {
- @include icon(glyph(settings), 24, "outline", $partial: $partial);
+ &[data-content="external"] {
+ @include icon(glyph(link-external), 24, "outline", "after");
}
- &[rel="messages"] {
- @include icon(glyph(chat), 24, "outline", $partial: $partial);
+ &[data-content="internal"],
+ &[data-content="external"] {
+ &::after {
+ --icon-margin-before: var(--db-spacing-fixed-2xs);
+ margin-top: -3px;
+ }
+
+ &:focus-visible {
+ outline-offset: var(--db-focus-outline-offset, 1px);
+ }
}
- &[rel="account"] {
- @include icon(glyph(account), 24, "outline", $partial: $partial);
+ &[data-variant="primary"] {
+ @extend %db-primary-text-ia;
}
- &[rel="configuration"],
- &[rel="messages"],
- &[rel="account"] {
- &::before {
- // preventing an underlined icon on click
- display: inline-block;
+ // data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality"
+ &[data-size="small"] {
+ &[data-content="internal"],
+ &[data-content="external"] {
+ &::after {
+ --icon-margin-before: var(--db-spacing-fixed-3xs);
+ }
}
}
}
diff --git a/source/_patterns/01-elements/link/links.hbs b/source/_patterns/01-elements/link/links.hbs
index f088aa6e01..5d2fad6cc4 100644
--- a/source/_patterns/01-elements/link/links.hbs
+++ b/source/_patterns/01-elements/link/links.hbs
@@ -8,14 +8,16 @@
{{/unless }}
- {{> elements-link href='#' value='Teaser link' }}
+ {{> elements-link href='#' value='Teaser link Primary' data-variant="primary" data-content='internal'}}
+
- {{> elements-link href='#' value='Teaser link' icon='settings' }}
+ {{> elements-link href='#' value='Teaser link (disabled)' disabled='true' data-content='internal'}}
+
- {{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}
+ {{> elements-link href='#' value='Teaser link Internal (Default)' data-content='internal' size=size }}
- {{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}
+ {{> elements-link href='#' value='External link External' data-content='external' size=size }}
diff --git a/source/_patterns/01-elements/link/tonality.hbs b/source/_patterns/01-elements/link/tonality.hbs
new file mode 100644
index 0000000000..ee3f4764d1
--- /dev/null
+++ b/source/_patterns/01-elements/link/tonality.hbs
@@ -0,0 +1,24 @@
+
+
+ {{> elements-link href='#' value='Internal link functional' data-content='internal' }}
+ {{> elements-link href='#' value='External link functional' data-content='external' }}
+ {{> elements-link href='#' value='Internal link functional small' data-content='internal' size="small" }}
+ {{> elements-link href='#' value='External link functional small' data-content='external' size="small" }}
+
+
+
+
+ {{> elements-link href='#' value='Internal link regular (Default)' data-content='internal' }}
+ {{> elements-link href='#' value='External link regular (Default)' data-content='external' }}
+ {{> elements-link href='#' value='Internal link regular (Default) small' data-content='internal' size="small" }}
+ {{> elements-link href='#' value='External link regular (Default) small' data-content='external' size="small" }}
+
+
+
+
+
+ {{> elements-link href='#' value='Internal link expressive' data-content='internal' }}
+ {{> elements-link href='#' value='External link expressive' data-content='external' }}
+ {{> elements-link href='#' value='Internal link expressive small' data-content='internal' size="small" }}
+ {{> elements-link href='#' value='External link expressive small' data-content='external' size="small" }}
+
diff --git a/source/css/enterprise/db-ui-core.scss b/source/css/enterprise/db-ui-core.scss
index 10daf0e16b..404b11a368 100644
--- a/source/css/enterprise/db-ui-core.scss
+++ b/source/css/enterprise/db-ui-core.scss
@@ -19,6 +19,7 @@ $partial: false;
@use "db-ui-core.variables" as *;
@use "@db-ui/base/build/scss/tonality" as *;
+@use "@db-ui/base/build/scss/color-placeholder" as *;
@use "../../_patterns/00-base/init.global" as *;
@use "../../_patterns/00-base/init" as *;
@@ -33,6 +34,7 @@ $partial: false;
:root {
@extend %db-ui-functional;
+ @extend %db-bg-neutral-0;
}
// ELEMENTS