From 74609c1b68bf5cb90d5eb351088a3da537662cf9 Mon Sep 17 00:00:00 2001 From: Duncan Kolba Date: Wed, 12 Oct 2022 15:35:41 +0200 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Link=20according?= =?UTF-8?q?=20to=20DBUX-3=20spec?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: ๐Ÿงจ Brace yourselves - all your links are belong to us ๐Ÿ”— --- source/_patterns/00-base/_init.scss | 2 +- .../00-base/icons/_icons.helpers.scss | 98 +++++++++++++++++++ source/_patterns/01-elements/link/_link.hbs | 1 + .../01-elements/link/_link.variables.scss | 4 +- source/_patterns/01-elements/link/link.scss | 62 ++++++------ source/_patterns/01-elements/link/links.hbs | 7 ++ 6 files changed, 137 insertions(+), 37 deletions(-) create mode 100644 source/_patterns/00-base/icons/_icons.helpers.scss diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss index 1246d2d532..dee997fb54 100644 --- a/source/_patterns/00-base/_init.scss +++ b/source/_patterns/00-base/_init.scss @@ -42,7 +42,7 @@ 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; } // Focus styles diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss new file mode 100644 index 0000000000..81e31a6b6b --- /dev/null +++ b/source/_patterns/00-base/icons/_icons.helpers.scss @@ -0,0 +1,98 @@ +// Icon SCSS mixin +@mixin icon( + $glyph: "", + $size: $icon-size, + $style: $icon-style, + $position: "before", + $partial: false +) { + &::#{$position} { + --icon-font-family: "#{"icons-" + $size + "-" + $style}", + "missing-icons" !important; + --icon-font-size: #{to-rem($pxValue: $size)}; + + @if $position == "before" { + margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); + } + @if $position == "after" { + margin-inline-start: var( + --icon-margin-before, + #{$icon-content-space} + ); + } + + @if $glyph != "" { + --icon-glyph: "#{$glyph}"; + } + @if $partial { + /*** icon - partial ***/ + // * use !important to prevent issues with browser extensions that change fonts + font-family: var(--icon-font-family) !important; + + font-size: var(--icon-font-size); + + vertical-align: middle; + + content: var(--icon-glyph); + + font-style: normal; + font-weight: normal; // CSS variables fallback + font-weight: var(--icon-font-weight, normal); + font-variant: normal; + text-transform: none; + line-height: 1; + + display: inline-block; + + // * Better Font Rendering =========== + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + // Hiding icon from screenreaders + @supports (content: ""/"") { + content: var(--icon-glyph) / ""; // https://www.w3.org/TR/css-content-3/#alt + } + -webkit-alt: ""; + alt: ""; + speak: none; + @media aural { + content: none; + } + @media speech { + content: none; + } + } @else { + // ๐Ÿคทโ€โ™‚๏ธ + @extend %icon !optional; + } + } +} + +// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon +@mixin is-icon-text-replace($position: "before") { + font-size: 0; + + @if $position == "before" { + &::before { + --icon-margin-after: 0; + } + } @else { + &::after { + --icon-margin-before: 0; + } + } +} + +// Icon glyph mixin +@function glyph($glyph) { + @return map-get($icon-glyphs, $glyph); +} + +// Icon meta data mixin +@mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") { + &::#{$position} { + --icon-font-family: "#{"icons-" + $size + "-" + $style}", + "missing-icons" !important; + --icon-font-size: #{to-rem($pxValue: $size)}; + } +} diff --git a/source/_patterns/01-elements/link/_link.hbs b/source/_patterns/01-elements/link/_link.hbs index 52d4fffa8c..ec1e392480 100644 --- a/source/_patterns/01-elements/link/_link.hbs +++ b/source/_patterns/01-elements/link/_link.hbs @@ -14,5 +14,6 @@ {{#if size }} data-size="{{ size }}"{{/if }} {{#if icon}} data-icon="{{ icon }}"{{/if}} {{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}} + {{#if data-variant}} data-variant="{{ data-variant }}"{{/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 index 082635a9e1..2b71267b8a 100644 --- a/source/_patterns/01-elements/link/_link.variables.scss +++ b/source/_patterns/01-elements/link/_link.variables.scss @@ -1,5 +1,5 @@ @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; +$link--disabled-opacity: 0.25 !default; +$link-reaMain--color: $db-color-cyan-600 !default; diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 70c72188bc..b4957a7363 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -6,18 +6,19 @@ @import "link.variables"; .elm-link { - border-radius: to-rem($pxValue: 4); display: inline-block; + border-radius: to-rem($pxValue: 6); // Link underline - text-underline-offset: to-rem($pxValue: 3); + text-underline-offset: to-rem($pxValue: 1); text-underline-position: under; + text-decoration-thickness: to-rem($pxValue: 1); @supports (text-underline-offset: 3px) { text-underline-position: auto; } &:active { - color: initial; + font-size: to-em($pxValue: 14); } // "disabled" links @@ -30,47 +31,40 @@ color: initial; } } + &[data-variant="internal"] { + @include icon(glyph(link), 20, "outline", "after"); + } + &[data-variant="external"] { + @include icon(glyph(link-external), 20, "outline", "after"); + } + &[data-variant="internal"], + &[data-variant="external"] { + color: #282d37; + &::after { + margin-top: -3px; + --icon-margin-before: #{to-rem($pxValue: 4)}; + } + &:focus-visible { + outline-offset: -1px; + padding: 0 2px 0 2px; + } + } // Sizes &%size-Small { &:not(.is-icon-text-replace) { - font-size: to-rem($pxValue: 14); + font-size: to-em($pxValue: 12); } - - &[rel], - &[data-icon], - &[data-icon-before] { - @include icon-meta(20); - } - - &[data-icon-after]::after { - @include icon-meta($size: 20, $position: "after"); + &:active { + font-size: to-em($pxValue: 10); } } &[data-size="small"] { + color: #42464f; @extend %size-Small; - } - - // Define the available icons - &[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; + &::after { + --icon-font-size: #{to-rem($pxValue: 16)}; } } } diff --git a/source/_patterns/01-elements/link/links.hbs b/source/_patterns/01-elements/link/links.hbs index f088aa6e01..1936745a46 100644 --- a/source/_patterns/01-elements/link/links.hbs +++ b/source/_patterns/01-elements/link/links.hbs @@ -19,3 +19,10 @@

{{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }}

+ +

+ {{> elements-link href='#' value='Internal link hbs' data-variant='internal' size=size }} +

+

+ {{> elements-link href='#' value='External link hbs' data-variant='external' size=size }} +

From cbdc37bb21fbc9fcb4b2efc516b0fa9d86834e11 Mon Sep 17 00:00:00 2001 From: Duncan Kolba Date: Wed, 9 Nov 2022 15:24:35 +0100 Subject: [PATCH 02/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20issues=20from?= =?UTF-8?q?=20review?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-elements/link/enterprise/link.scss | 21 +++++++++++++++++++ source/_patterns/01-elements/link/link.scss | 17 ++++++++------- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/source/_patterns/01-elements/link/enterprise/link.scss b/source/_patterns/01-elements/link/enterprise/link.scss index 27a0c2c9bd..0400d62f20 100644 --- a/source/_patterns/01-elements/link/enterprise/link.scss +++ b/source/_patterns/01-elements/link/enterprise/link.scss @@ -1,2 +1,23 @@ @import "link.variables"; @import "../link"; + +// Define the available icons +.elm-link { + &[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; + } + } +} diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index b4957a7363..157ed6d97f 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -6,6 +6,7 @@ @import "link.variables"; .elm-link { + color: #282d37; display: inline-block; border-radius: to-rem($pxValue: 6); @@ -17,10 +18,6 @@ text-underline-position: auto; } - &:active { - font-size: to-em($pxValue: 14); - } - // "disabled" links &[aria-disabled="true"] { opacity: $link--disabled-opacity; @@ -40,7 +37,6 @@ &[data-variant="internal"], &[data-variant="external"] { - color: #282d37; &::after { margin-top: -3px; --icon-margin-before: #{to-rem($pxValue: 4)}; @@ -55,16 +51,21 @@ &:not(.is-icon-text-replace) { font-size: to-em($pxValue: 12); } - &:active { - font-size: to-em($pxValue: 10); - } } &[data-size="small"] { + // TODO: replace with color when it becomes available via core color: #42464f; @extend %size-Small; &::after { --icon-font-size: #{to-rem($pxValue: 16)}; } + &[rel], + &[data-icon], + &[data-icon-before] { + @include iconMeta(20); + // TODO: remove when icons are availabe in the correct size + font-size: 16px; + } } } From e24100ff7b091988300a75514f6ed4ad8cd52ab1 Mon Sep 17 00:00:00 2001 From: Duncan Kolba Date: Wed, 9 Nov 2022 15:44:28 +0100 Subject: [PATCH 03/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20more=20issues?= =?UTF-8?q?=20from=20review?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_patterns/01-elements/link/link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 157ed6d97f..fa1a666b0c 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -6,6 +6,7 @@ @import "link.variables"; .elm-link { + // TODO: replace with color when it becomes available via core color: #282d37; display: inline-block; border-radius: to-rem($pxValue: 6); From a8647f76ecda8fd1357f29eb767a3feffa26a7de Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 13:23:18 +0100 Subject: [PATCH 04/14] refactor: remove custom icons for links --- source/_patterns/01-elements/link/_link.hbs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-elements/link/_link.hbs b/source/_patterns/01-elements/link/_link.hbs index ec1e392480..0b9b602bdc 100644 --- a/source/_patterns/01-elements/link/_link.hbs +++ b/source/_patterns/01-elements/link/_link.hbs @@ -12,8 +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 data-variant}} data-variant="{{ data-variant }}"{{/if}} - >{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }} - + {{#if data-content}} data-content="{{data-content}}"{{/if}} + >{{#if value }}{{{ value }}}{{ else }}{{ href }}{{/if }} From 005c3fe3359c6d398d3b85aa01aabd64bc87329b Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 13:25:02 +0100 Subject: [PATCH 05/14] refactor: updated colors and tonality --- .../01-elements/link/_link.variables.scss | 5 -- .../link/enterprise/_link.variables.scss | 0 .../01-elements/link/enterprise/link.scss | 19 ++++- source/_patterns/01-elements/link/link.scss | 70 +++++++++++-------- source/_patterns/01-elements/link/links.hbs | 11 ++- .../_patterns/01-elements/link/tonality.hbs | 24 +++++++ 6 files changed, 86 insertions(+), 43 deletions(-) delete mode 100644 source/_patterns/01-elements/link/_link.variables.scss delete mode 100644 source/_patterns/01-elements/link/enterprise/_link.variables.scss create mode 100644 source/_patterns/01-elements/link/tonality.hbs 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 2b71267b8a..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.25 !default; -$link-reaMain--color: $db-color-cyan-600 !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 0400d62f20..50be6504a1 100644 --- a/source/_patterns/01-elements/link/enterprise/link.scss +++ b/source/_patterns/01-elements/link/enterprise/link.scss @@ -1,17 +1,26 @@ -@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"] { @@ -20,4 +29,12 @@ 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 fa1a666b0c..812c70b134 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -1,13 +1,12 @@ @use "@db-ui/base/build/scss/variables" as *; +@use "@db-ui/base/build/scss/scaling-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 { - // TODO: replace with color when it becomes available via core - color: #282d37; + color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); display: inline-block; border-radius: to-rem($pxValue: 6); @@ -19,9 +18,16 @@ text-underline-position: auto; } + // Changing color on hover should be animated by a transition + transition: $db-transition-color; + + &:hover { + color: inherit; + } + // "disabled" links &[aria-disabled="true"] { - opacity: $link--disabled-opacity; + opacity: var(--db-disabled-text-opacity, 0.5); pointer-events: none; @@ -29,44 +35,46 @@ color: initial; } } - &[data-variant="internal"] { - @include icon(glyph(link), 20, "outline", "after"); + + &[data-content] { + --icon-font-family: var(--db-base-icon-font-family); + --icon-font-size: var(--db-base-icon-font-size); + } + + &[data-content="internal"] { + @include icon(glyph(link), 24, "outline", "after"); } - &[data-variant="external"] { - @include icon(glyph(link-external), 20, "outline", "after"); + + &[data-content="external"] { + @include icon(glyph(link-external), 24, "outline", "after"); } - &[data-variant="internal"], - &[data-variant="external"] { + &[data-content="internal"], + &[data-content="external"] { &::after { + --icon-margin-before: var(--db-spacing-fixed-xs); margin-top: -3px; - --icon-margin-before: #{to-rem($pxValue: 4)}; } + &:focus-visible { outline-offset: -1px; - padding: 0 2px 0 2px; - } - } - // Sizes - &%size-Small { - &:not(.is-icon-text-replace) { - font-size: to-em($pxValue: 12); + padding: 0 2px; } } - &[data-size="small"] { - // TODO: replace with color when it becomes available via core - color: #42464f; - @extend %size-Small; - &::after { - --icon-font-size: #{to-rem($pxValue: 16)}; - } - &[rel], - &[data-icon], - &[data-icon-before] { - @include iconMeta(20); - // TODO: remove when icons are availabe in the correct size - font-size: 16px; + &[data-variant="primary"] { + color: $db-colors-primary-enabled; + + &:not(:disabled) { + &:hover { + color: $db-colors-primary-hover; + } + + &:active { + color: $db-colors-primary-pressed; + } } } + + // data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality" } diff --git a/source/_patterns/01-elements/link/links.hbs b/source/_patterns/01-elements/link/links.hbs index 1936745a46..348e393528 100644 --- a/source/_patterns/01-elements/link/links.hbs +++ b/source/_patterns/01-elements/link/links.hbs @@ -10,19 +10,18 @@

{{> elements-link href='#' value='Teaser link' }}

+

- {{> elements-link href='#' value='Teaser link' icon='settings' }} + {{> elements-link href='#' value='Teaser link' data-variant="primary"}}

+

{{> elements-link href='#' value='Teaser link (disabled)' disabled='true' }}

-

- {{> elements-link href='#' value='Teaser Link (disabled)' icon-after='account' disabled='true' size=size }} -

- {{> elements-link href='#' value='Internal link hbs' data-variant='internal' size=size }} + {{> elements-link href='#' value='Internal link hbs' data-content='internal' size=size }}

- {{> elements-link href='#' value='External link hbs' data-variant='external' size=size }} + {{> elements-link href='#' value='External link hbs' 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" }} +

From c5c5d44c60e3a2376ff3a16543c529d2ba66f4c9 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 13:25:57 +0100 Subject: [PATCH 06/14] refactor: add globals --- source/_patterns/00-base/_init.scss | 2 ++ source/css/enterprise/db-ui-core.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss index dee997fb54..88d556b9d8 100644 --- a/source/_patterns/00-base/_init.scss +++ b/source/_patterns/00-base/_init.scss @@ -43,6 +43,8 @@ nav, :root { --db-focus-outline-offset: 1px; --db-focus-outline-color: #0087b9; + + --db-disabled-text-opacity: 0.5; } // Focus styles diff --git a/source/css/enterprise/db-ui-core.scss b/source/css/enterprise/db-ui-core.scss index ff1c4745b9..b668444b11 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 From ce448e0e1d47652e32cf4fe19b68ab2794be93a6 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 13:42:04 +0100 Subject: [PATCH 07/14] refactor: default style with arrows --- source/_patterns/01-elements/link/link.scss | 10 +++++++++- source/_patterns/01-elements/link/links.hbs | 12 ++++-------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 812c70b134..931cdcf662 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -52,7 +52,7 @@ &[data-content="internal"], &[data-content="external"] { &::after { - --icon-margin-before: var(--db-spacing-fixed-xs); + --icon-margin-before: var(--db-spacing-fixed-2xs); margin-top: -3px; } @@ -77,4 +77,12 @@ } // 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 348e393528..5d2fad6cc4 100644 --- a/source/_patterns/01-elements/link/links.hbs +++ b/source/_patterns/01-elements/link/links.hbs @@ -8,20 +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' data-variant="primary"}} + {{> 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='Internal link hbs' data-content='internal' size=size }} + {{> elements-link href='#' value='Teaser link Internal (Default)' data-content='internal' size=size }}

- {{> elements-link href='#' value='External link hbs' data-content='external' size=size }} + {{> elements-link href='#' value='External link External' data-content='external' size=size }}

From 9a747adde32f8aef538e3dce77c3a964f3d645fa Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 14:24:28 +0100 Subject: [PATCH 08/14] docs(migrationGuide): update migrationGuide --- docs/migrationGuide.adoc | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc index 9d3247a210..cd3ff005cb 100644 --- a/docs/migrationGuide.adoc +++ b/docs/migrationGuide.adoc @@ -36,6 +36,14 @@ We've remove the deprecated previous HTML implementation of the label by an `out - The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself: `aria-describedby="{{ id }}-label"` +=== `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 `daata-content` attribute for differentiation between `internal` and `external` +- Font-size definition has moved to base due to our `tonality` introduction (default and for `data-size=small`) + + == DB UI Core 2.2.0 Migration Guide === progress element From 8103d9e24090a0e519a505614c1f2d0d1bbcc81a Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 8 Dec 2022 14:35:20 +0100 Subject: [PATCH 09/14] fix: revert adding icons helper --- .../00-base/icons/_icons.helpers.scss | 98 ------------------- 1 file changed, 98 deletions(-) delete mode 100644 source/_patterns/00-base/icons/_icons.helpers.scss diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss deleted file mode 100644 index 81e31a6b6b..0000000000 --- a/source/_patterns/00-base/icons/_icons.helpers.scss +++ /dev/null @@ -1,98 +0,0 @@ -// Icon SCSS mixin -@mixin icon( - $glyph: "", - $size: $icon-size, - $style: $icon-style, - $position: "before", - $partial: false -) { - &::#{$position} { - --icon-font-family: "#{"icons-" + $size + "-" + $style}", - "missing-icons" !important; - --icon-font-size: #{to-rem($pxValue: $size)}; - - @if $position == "before" { - margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); - } - @if $position == "after" { - margin-inline-start: var( - --icon-margin-before, - #{$icon-content-space} - ); - } - - @if $glyph != "" { - --icon-glyph: "#{$glyph}"; - } - @if $partial { - /*** icon - partial ***/ - // * use !important to prevent issues with browser extensions that change fonts - font-family: var(--icon-font-family) !important; - - font-size: var(--icon-font-size); - - vertical-align: middle; - - content: var(--icon-glyph); - - font-style: normal; - font-weight: normal; // CSS variables fallback - font-weight: var(--icon-font-weight, normal); - font-variant: normal; - text-transform: none; - line-height: 1; - - display: inline-block; - - // * Better Font Rendering =========== - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - // Hiding icon from screenreaders - @supports (content: ""/"") { - content: var(--icon-glyph) / ""; // https://www.w3.org/TR/css-content-3/#alt - } - -webkit-alt: ""; - alt: ""; - speak: none; - @media aural { - content: none; - } - @media speech { - content: none; - } - } @else { - // ๐Ÿคทโ€โ™‚๏ธ - @extend %icon !optional; - } - } -} - -// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon -@mixin is-icon-text-replace($position: "before") { - font-size: 0; - - @if $position == "before" { - &::before { - --icon-margin-after: 0; - } - } @else { - &::after { - --icon-margin-before: 0; - } - } -} - -// Icon glyph mixin -@function glyph($glyph) { - @return map-get($icon-glyphs, $glyph); -} - -// Icon meta data mixin -@mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") { - &::#{$position} { - --icon-font-family: "#{"icons-" + $size + "-" + $style}", - "missing-icons" !important; - --icon-font-size: #{to-rem($pxValue: $size)}; - } -} From 9d3d15defce04aa4cc4635507d5352af32644373 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 12 Dec 2022 10:28:41 +0100 Subject: [PATCH 10/14] Update migrationGuide.adoc --- docs/migrationGuide.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc index cd3ff005cb..b23d079700 100644 --- a/docs/migrationGuide.adoc +++ b/docs/migrationGuide.adoc @@ -40,8 +40,8 @@ We've remove the deprecated previous HTML implementation of the label by an `out - 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 `daata-content` attribute for differentiation between `internal` and `external` -- Font-size definition has moved to base due to our `tonality` introduction (default and for `data-size=small`) +- 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 From 3e0135f6114da72b5b53a8936a0aa4fdfed226c8 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Fri, 6 Jan 2023 12:00:42 +0100 Subject: [PATCH 11/14] refactor: use color placeholder from latest base --- package-lock.json | 14 +++++++------- package.json | 2 +- source/_patterns/01-elements/link/link.scss | 12 +----------- 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index a583bb2331..355f4669a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "2.0.0-18-812537f" + "@db-ui/base": "2.0.0-20-58c8a10" }, "devDependencies": { "@babel/cli": "^7.19.3", @@ -2216,9 +2216,9 @@ } }, "node_modules/@db-ui/base": { - "version": "2.0.0-18-812537f", - "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-18-812537f.tgz", - "integrity": "sha512-1Yyhd713xlKk2uPriA47HH/wKHcQDCM0Ac7uFPUEGuNNpPMzYZCgsegSCgdg779dTq5xBCAzXmiTctDCmjfSWw==", + "version": "2.0.0-20-58c8a10", + "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-20-58c8a10.tgz", + "integrity": "sha512-y8sCmlJeqF2/0mlaEZ3UMSdIHSz+kwQ50x4Ojq3sxZExjjn31gVMMAq6ZJa/2+ROPhsOjoK9HgF9ROhKleDZow==", "dependencies": { "@csstools/normalize.css": "^12.0.0" } @@ -18614,9 +18614,9 @@ "requires": {} }, "@db-ui/base": { - "version": "2.0.0-18-812537f", - "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-18-812537f.tgz", - "integrity": "sha512-1Yyhd713xlKk2uPriA47HH/wKHcQDCM0Ac7uFPUEGuNNpPMzYZCgsegSCgdg779dTq5xBCAzXmiTctDCmjfSWw==", + "version": "2.0.0-20-58c8a10", + "resolved": "https://registry.npmjs.org/@db-ui/base/-/base-2.0.0-20-58c8a10.tgz", + "integrity": "sha512-y8sCmlJeqF2/0mlaEZ3UMSdIHSz+kwQ50x4Ojq3sxZExjjn31gVMMAq6ZJa/2+ROPhsOjoK9HgF9ROhKleDZow==", "requires": { "@csstools/normalize.css": "^12.0.0" } diff --git a/package.json b/package.json index 73ee3e7f3e..7560bdd043 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "license": "Apache-2.0", "dependencies": { "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "2.0.0-18-812537f" + "@db-ui/base": "2.0.0-20-58c8a10" }, "devDependencies": { "@babel/cli": "^7.19.3", diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 931cdcf662..b64a63ae11 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -63,17 +63,7 @@ } &[data-variant="primary"] { - color: $db-colors-primary-enabled; - - &:not(:disabled) { - &:hover { - color: $db-colors-primary-hover; - } - - &:active { - color: $db-colors-primary-pressed; - } - } + @extend %db-primary-text-ia; } // data-size=small is defined by tonality in "@db-ui/base/build/scss/tonality" From 99f933f323b648fc8c9b21ff3c862353162ebfe0 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Sat, 7 Jan 2023 08:50:00 +0100 Subject: [PATCH 12/14] Update link.scss --- source/_patterns/01-elements/link/link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index b64a63ae11..45fe6e4d49 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -1,5 +1,6 @@ @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 *; From 6912f57271c0b6ed3e49daa5d1499b48e08dda69 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Thu, 12 Jan 2023 11:12:21 +0100 Subject: [PATCH 13/14] refactor: removed unused styles --- source/_patterns/01-elements/link/link.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 45fe6e4d49..616d123ff8 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -12,15 +12,10 @@ border-radius: to-rem($pxValue: 6); // Link underline - text-underline-offset: to-rem($pxValue: 1); - text-underline-position: under; text-decoration-thickness: to-rem($pxValue: 1); - @supports (text-underline-offset: 3px) { - text-underline-position: auto; - } // Changing color on hover should be animated by a transition - transition: $db-transition-color; + transition: outline 0.06s, color $db-transition-color; &:hover { color: inherit; @@ -58,8 +53,7 @@ } &:focus-visible { - outline-offset: -1px; - padding: 0 2px; + outline-offset: var(--db-focus-outline-offset, 1px); } } From 02605f31716b487b4b32cc6987afc8a429b35299 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Thu, 12 Jan 2023 11:38:52 +0100 Subject: [PATCH 14/14] Update link.scss --- source/_patterns/01-elements/link/link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/source/_patterns/01-elements/link/link.scss b/source/_patterns/01-elements/link/link.scss index 616d123ff8..af9611f2c3 100644 --- a/source/_patterns/01-elements/link/link.scss +++ b/source/_patterns/01-elements/link/link.scss @@ -12,6 +12,7 @@ border-radius: to-rem($pxValue: 6); // Link underline + text-underline-position: from-font; text-decoration-thickness: to-rem($pxValue: 1); // Changing color on hover should be animated by a transition