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