refactor: guidelines 3.0 link style (#89)

* feat: 🎸 Link according to DBUX-3 spec BREAKING CHANGE: 🧨 Brace yourselves - all your links are belong to us 🔗 * fix: 🐛 Fix issues from review * fix: 🐛 Fix more issues from review * refactor: remove custom icons for links * refactor: updated colors and tonality * refactor: add globals * refactor: default style with arrows * docs(migrationGuide): update migrationGuide * fix: revert adding icons helper * Update migrationGuide.adoc * refactor: use color placeholder from latest base * Update link.scss * refactor: removed unused styles * Update link.scss Co-authored-by: Anna Schoderer <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Jan 12, 2023 · e826142 · e826142
1 parent 7c1d5cb
commit e826142
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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 }}
-</a>
+	{{#if data-variant}} data-variant="{{ data-variant }}"{{/if}}
+	{{#if data-content}} data-content="{{data-content}}"{{/if}}
+	>{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }}</a>
diff --git a/source/_patterns/01-elements/link/_link.variables.scss b/source/_patterns/01-elements/link/_link.variables.scss
diff --git a/source/_patterns/01-elements/link/enterprise/_link.variables.scss b/source/_patterns/01-elements/link/enterprise/_link.variables.scss
diff --git 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
@@ -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
@@ -8,14 +8,16 @@
 {{/unless }}
 
 <p class="{{ styleModifier }}">
-	{{> elements-link href='#' value='Teaser link' }}
+	{{> elements-link href='#' value='Teaser link Primary' data-variant="primary" data-content='internal'}}
 </p>
+
 <p class="{{ styleModifier }}">
-	{{> elements-link href='#' value='Teaser link' icon='settings' }}
+	{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' data-content='internal'}}
 </p>
+
 <p class="{{ styleModifier }}">
-	{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}
+	{{> elements-link href='#' value='Teaser link Internal (Default)' data-content='internal' size=size }}
 </p>
 <p class="{{ styleModifier }}">
-	{{> 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 }}
 </p>
diff --git a/source/_patterns/01-elements/link/tonality.hbs b/source/_patterns/01-elements/link/tonality.hbs
@@ -0,0 +1,24 @@
+
+<p class="db-ui-functional">
+	{{> 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" }}
+</p>
+
+
+<p class="db-ui-regular">
+	{{> 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" }}
+</p>
+
+
+
+<p class="db-ui-expressive">
+	{{> 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" }}
+</p>
diff --git 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