@navikt/ds-css 7.9.0 → 7.9.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.9.1
+
+### Patch Changes
+
+- Link: :bug: Use inside Alert got wrong text-color while focused or active. ([#3489](https://github.com/navikt/aksel/pull/3489))
+
 ## 7.9.0
 
 ### Minor Changes

package/README.md

@@ -1,11 +1,11 @@
 # Aksel styling
 
-CSS for NAVs designsystem.
+CSS for Nav's design system.
 
-- Css tokens (Colors, border, shadows etc)
-- Component-styling for `@navikt/ds-react` packages
+- Css tokens (Colors, border, shadows etc.)
+- Component styling for `@navikt/ds-react` packages
 - Normalize.css v8
-- Font-loading
+- Font loading
 
 ## Installation
 
@@ -16,7 +16,7 @@ CSS for NAVs designsystem.
 
 ## Usage
 
-Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file.
+Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file:
 
 ```javascript
 import "@navikt/ds-css";
@@ -26,7 +26,7 @@ function App() {
 }
 ```
 
-But you can import it in a .css-file
+But you can import it in a .css-file as well:
 
 ```css
 @import "@navikt/ds-css";

package/dist/component/link.css

@@ -30,7 +30,7 @@
   text-decoration: underline;
 }
 
-.navds-alert:not(.navds-alert--inline) .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link:not(:active, :focus-visible),
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }

package/dist/component/link.min.css

@@ -1 +1 @@
-.navds-link{align-items:center;color:var(--ac-link-text,var(--a-text-action));display:inline-flex;gap:var(--a-spacing-1);text-decoration:underline}.navds-link.navds-link--inline-text{display:inline}.navds-link.navds-link--inline-text>svg{display:inline;margin:.1em .1em -.1em;transform:translateY(.05em);vertical-align:initial}.navds-link.navds-link--remove-underline,.navds-link:hover{text-decoration:none}.navds-link.navds-link--remove-underline:hover{text-decoration:underline}.navds-alert:not(.navds-alert--inline) .navds-link,.navds-confirmation-panel .navds-link{color:var(--a-text-default)}.navds-link:focus-visible{background-color:var(--ac-link-focus-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-focus-border,var(--a-border-focus));color:var(--ac-link-focus-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}@supports not selector(:focus-visible){.navds-link:focus{background-color:var(--ac-link-focus-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-focus-border,var(--a-border-focus));color:var(--ac-link-focus-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}}.navds-link:active{background-color:var(--ac-link-active-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-active-border,var(--a-border-focus));color:var(--ac-link-active-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}.navds-link svg{color:inherit;flex-shrink:0}.navds-link--action{color:var(--ac-link-action-text,var(--a-text-action))}.navds-link--neutral{color:var(--ac-link-neutral-text,var(--a-text-default))}.navds-link--subtle{color:var(--ac-link-subtle-text,var(--a-text-subtle))}
+.navds-link{align-items:center;color:var(--ac-link-text,var(--a-text-action));display:inline-flex;gap:var(--a-spacing-1);text-decoration:underline}.navds-link.navds-link--inline-text{display:inline}.navds-link.navds-link--inline-text>svg{display:inline;margin:.1em .1em -.1em;transform:translateY(.05em);vertical-align:initial}.navds-link.navds-link--remove-underline,.navds-link:hover{text-decoration:none}.navds-link.navds-link--remove-underline:hover{text-decoration:underline}.navds-alert:not(.navds-alert--inline) .navds-link:not(:active,:focus-visible),.navds-confirmation-panel .navds-link{color:var(--a-text-default)}.navds-link:focus-visible{background-color:var(--ac-link-focus-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-focus-border,var(--a-border-focus));color:var(--ac-link-focus-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}@supports not selector(:focus-visible){.navds-link:focus{background-color:var(--ac-link-focus-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-focus-border,var(--a-border-focus));color:var(--ac-link-focus-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}}.navds-link:active{background-color:var(--ac-link-active-bg,var(--a-border-focus));box-shadow:0 0 0 2px var(--ac-link-active-border,var(--a-border-focus));color:var(--ac-link-active-text,var(--a-text-on-action));outline:2px solid #0000;text-decoration:none}.navds-link svg{color:inherit;flex-shrink:0}.navds-link--action{color:var(--ac-link-action-text,var(--a-text-action))}.navds-link--neutral{color:var(--ac-link-neutral-text,var(--a-text-default))}.navds-link--subtle{color:var(--ac-link-subtle-text,var(--a-text-subtle))}

package/dist/components.css

@@ -4839,7 +4839,7 @@ button.navds-internalheader__title:active,
   text-decoration: underline;
 }
 
-.navds-alert:not(.navds-alert--inline) .navds-link,
+.navds-alert:not(.navds-alert--inline) .navds-link:not(:active, :focus-visible),
 .navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }