💄 Justering semantiske farger, tokens

.changeset/cyan-trainers-exercise.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tokens": minor
+---
+
+Justeringer i semantiske fargetokens, statusfarger nå mer tydelig

@navikt/core/css/alert.css

@@ -24,6 +24,7 @@
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 
 .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
   background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+}
+
 .navds-alert--info {
   border-color: var(--ac-alert-info-border, var(--a-border-info));
   background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));

@navikt/core/css/link.css

@@ -6,12 +6,8 @@
   gap: var(--a-spacing-1);
 }
 
-.navds-alert--info .navds-link {
-  color: var(--a-text-default);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
+.navds-alert .navds-link,
+.navds-confirmation-panel .navds-link {
   color: var(--a-text-default);
 }
 

@navikt/core/react/src/alert/alert.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading as DsHeading } from "..";
+import { BodyLong, Heading as DsHeading, Link } from "..";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
@@ -135,3 +135,15 @@ export const Heading = () => {
     </div>
   );
 };
+
+export const Links = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant}>
+          <Link href="#">Id elit esse enim reprehenderit</Link>
+        </Alert>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/config/validate-docs.js → @navikt/core/tokens/config/tests/validate-docs.test.js

@@ -1,13 +1,40 @@
-const docs = require("../docs.json");
-const DsTokens = require("../dist/tokens-cjs.js");
-const kebabCase = require("./kebabCase.js");
+const docs = require("../../docs.json");
+const DsTokens = require("../../dist/tokens-cjs.js");
+const kebabCase = require("../kebabCase.js");
 
 const flatten = Object.values(docs).reduce((old, val) => [...old, ...val], []);
 
 const notFound = [];
 const removed = [];
 const wrongValues = [];
 
+describe("Validate tokens dokumentation", () => {
+  flatten.forEach((x) => {
+    it(`${x} should be documented`, () => {
+      expect(
+        Object.keys(DsTokens).find(
+          (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name
+        )
+      ).toBeDefined();
+    });
+  });
+
+  Object.entries(DsTokens).forEach(([key, val]) => {
+    const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+    it(`${formatedKey} should exist in docs`, () => {
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc).toBeDefined();
+    });
+
+    it(`${formatedKey} should have correct value ${val}`, () => {
+      const formatedKey = `--${kebabCase(key)}`.replace("--az-", "--a-z-");
+
+      const tokenInDoc = flatten.find((x) => x.name === formatedKey);
+      expect(tokenInDoc?.value).toEqual(val);
+    });
+  });
+});
+
 flatten.forEach((x) => {
   !Object.keys(DsTokens).find(
     (y) => `--${kebabCase(y)}`.replace("--az-", "--a-z-") === x.name