diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.js b/packages/dnb-design-system-portal/src/shared/menu/Card.js index 4a27137dfea..3e12707fed0 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/Card.js +++ b/packages/dnb-design-system-portal/src/shared/menu/Card.js @@ -174,7 +174,7 @@ export default class Card extends PureComponent { > diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js index b07a748321b..52c400e7d12 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js @@ -568,7 +568,7 @@ class ListItem extends PureComponent { diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.js b/packages/dnb-design-system-portal/src/shared/parts/Layout.js index 993500645ab..f9934b9f374 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.js @@ -206,7 +206,7 @@ const Footer = () => ( Last Portal update: {buildVersion} - + Copyright (c) 2018-present DNB.no diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js index 3e5fac22781..60f3649eb40 100644 --- a/packages/dnb-ui-lib/src/components/button/Button.js +++ b/packages/dnb-ui-lib/src/components/button/Button.js @@ -187,7 +187,7 @@ export default class Button extends PureComponent { id, class_name, className, - href ? '' : null // dnb-no-anchor-underline dnb-no-anchor-hover + href ? '' : null // dnb-anchor-no-underline dnb-anchor-no-hover ) const params = { diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/blockquote-screenshot-test-js-blockquote-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/blockquote-screenshot-test-js-blockquote-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png index 7c610233723..05b77bfc978 100644 Binary files a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/blockquote-screenshot-test-js-blockquote-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png and b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/blockquote-screenshot-test-js-blockquote-screenshot-have-to-match-blockquote-with-top-aligned-graphic-1-c67e6.snap.png differ diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss index ef9277a9e34..1377b8f22da 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor-mixins.scss @@ -92,3 +92,16 @@ transition: max-height 0.01s linear; } } +@mixin useAnchorContrastStyle() { + color: var(--color-white); + border-bottom-color: var(--color-white); + &:hover { + color: var(--color-emerald-green); + } + &:active { + color: var(--color-mint-green); + } + &:focus { + color: var(--color-emerald-green); + } +} diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss index 40080b5cc5c..40867b85c1c 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/anchor.scss @@ -5,7 +5,8 @@ @import './anchor-mixins.scss'; -a { +a, +.dnb-anchor { @include defaultAnchorStyle(); // have focus before :active, because of border-radius @@ -29,16 +30,16 @@ a { transform: translateY(-1px); } } -.dnb-hover-style { +.dnb-anchor--hover { @include hoverStyle(); } -.dnb-active-style { +.dnb-anchor--active { @include activeStyle(); } -.dnb-focus-style { +.dnb-anchor--focus { @include focusStyle('mouse'); } -.dnb-with-animation { +.dnb-anchor--animation { position: relative; // because of z-index and underline/hover sudo classes z-index: 1; // because of focus handling @@ -91,12 +92,17 @@ a { border-bottom: none; } } + // If a link don't contains a / or http(s) + &:not([href^='/']):not([href^='http']) { + cursor: pointer; + user-select: none; + } } .dnb-anchor-style { @include defaultAnchorStyle(); } -.dnb-no-anchor-style { +.dnb-anchor-no-style { white-space: normal; border-bottom: none; color: inherit; @@ -113,17 +119,15 @@ a { @include resetUnderlineStyle(); @include resetHoverStyle(); } -.dnb-no-anchor-underline { +.dnb-anchor-no-underline { @include resetUnderlineStyle(); } -.dnb-no-anchor-hover { +.dnb-anchor-no-hover { @include resetHoverStyle(); } -.dnb-no-anchor-animation { +.dnb-anchor-no-animation { @include resetAnimationStyle(); } -// If a link don't contains a / or http(s) -a:not([href^='/']):not([href^='http']) { - cursor: pointer; - user-select: none; +.dnb-anchor-contrast { + @include useAnchorContrastStyle(); } diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss index 6a1ef5a39fe..e1eaeb9ca8b 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss @@ -44,6 +44,10 @@ blockquote, padding-bottom: 3rem; } + a { + @include useAnchorContrastStyle(); + } + cite, footer, figcaption { diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js index 8219f9905b7..4645fcb2535 100644 --- a/packages/dnb-ui-lib/stories/elementsStories.js +++ b/packages/dnb-ui-lib/stories/elementsStories.js @@ -71,7 +71,7 @@ stories.push([ Column 3 - + Column 4 @@ -331,22 +331,22 @@ stories.push([ - + Hover Style - + Active Style - + Focus Style - + With a special @@ -359,12 +359,12 @@ stories.push([ - + Anchor with Animation - + Anchor with Animation - Adipiscing per egestas duis feugiat dignissim quam cras eget non est ante purus taciti volutpat mi phasellus rhoncus ridiculus diam at proin fusce bibendum netus @@ -374,7 +374,7 @@ stories.push([ Anchor with Animation and no `white-space: pre;` - Adipiscing per