Merge 6493e98 into 505462b

Author: KenAJoh

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,7 +9,6 @@
 - [ ] Documentation / Decision Records
 - [ ] Storybook
 - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
-- [ ] Component tokens (`@navikt/core/css/tokens.json`)
 - [ ] CSS class deprecations (`@navikt/aksel-stylelint/src/deprecations.ts`)
 - [ ] Exports (`@navikt/core/react/src/index.ts` and `@navikt/core/react/package.json`)
 - [ ] New component? CSS import (`@navikt/core/css/index.css`)

.github/copilot-instructions.md

@@ -200,9 +200,6 @@ Troubleshooting
 ## Darkside theming and tokens
 
 - Use design tokens and CSS layers; avoid hard-coded colors/spacing.
-- Website imports Darkside CSS and tokens, see:
-  - `aksel.nav.no/website/pages/global.css` (imports `@navikt/ds-css/darkside`)
-  - `aksel.nav.no/website/pages/_app.tsx` (imports `@navikt/ds-tokens/darkside-css`)
 - Stylelint enforces token usage; unknown/missing custom properties will fail lint.
 
 ## Website (Next.js)
@@ -227,7 +224,7 @@ Troubleshooting
 - Storybook: “Run yarn storybook” (or `yarn storybook:aksel` for the website config)
 - Lint/format: “Run yarn lint” (full install recommended) and optional `yarn biome:lint`
 - Versioning: “Run yarn changeset, then yarn create-version”
-- Theming: “Import @navikt/ds-css/darkside in global CSS and ensure tokens via @navikt/ds-tokens/darkside-css”
+- Theming: “Import @navikt/ds-css in global CSS”
 
 ## Code reviews (for Copilot)
 

.storybook/layout.css

@@ -15,11 +15,6 @@ body {
   padding: 1rem;
 }
 
-.colgap[data-theme="dark"],
-.rowgap[data-theme="dark"] {
-  background-color: var(--a-gray-900);
-}
-
 .rowgap-wrap {
   flex-wrap: wrap;
 }

.storybook/preview.tsx

@@ -1,41 +1,12 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { Preview } from "@storybook/nextjs";
-import React, { useEffect, useLayoutEffect } from "react";
-// @ts-expect-error - Temporary
-import darksideCss from "../@navikt/core/css/darkside/index.css?inline";
-// @ts-expect-error - Temporary
-import defaultCss from "../@navikt/core/css/index.css?inline";
+import React, { useEffect } from "react";
+import "../@navikt/core/css/src/index.css";
 import { Provider } from "../@navikt/core/react/src/provider";
-import { Theme } from "../@navikt/core/react/src/theme";
 import { Translations } from "../@navikt/core/react/src/util/i18n/i18n.types";
 import { en, nb, nn } from "../@navikt/core/react/src/util/i18n/locales";
 import "./layout.css";
 
-const ModeDecorator = ({ children, mode, theme }) => {
-  useLayoutEffect(() => {
-    const style = document.createElement("style");
-    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
-    document.head.appendChild(style);
-
-    if (mode === "darkside") {
-      document.body.style.setProperty("background", "var(--ax-bg-default)");
-    }
-
-    return () => {
-      document.head.removeChild(style);
-      document.body.style.removeProperty("background");
-    };
-  }, [mode]);
-
-  return mode === "darkside" ? (
-    <Theme theme={theme || undefined} hasBackground={false}>
-      {children}
-    </Theme>
-  ) : (
-    children
-  );
-};
-
 type Language = "nb" | "nn" | "en";
 const locales: Record<Language, Translations> = {
   nb,
@@ -55,7 +26,6 @@ const TypoDecorator = ({
   useEffect(() => {
     const fontVariable = fonts.includes(font) ? `"${font}", sans-serif` : null;
     document.body.style.setProperty("--ax-font-family", fontVariable);
-    document.body.style.setProperty("--a-font-family", fontVariable);
   }, [font]);
 
   return children;
@@ -93,21 +63,6 @@ export default {
   },
 
   globalTypes: {
-    mode: {
-      name: "Darkside",
-      toolbar: {
-        items: [
-          {
-            value: "default",
-            icon: "hourglass",
-            title: "Legacy theme",
-          },
-          { value: "darkside", icon: "beaker", title: "Darkside theme" },
-        ],
-        showName: true,
-        dynamicTitle: true,
-      },
-    },
     language: {
       toolbar: {
         icon: "globe",
@@ -140,11 +95,6 @@ export default {
         <StoryFn />
       </TypoDecorator>
     ),
-    (StoryFn, context) => (
-      <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
-        <StoryFn />
-      </ModeDecorator>
-    ),
     (StoryFn, context) =>
       context.globals.language ? (
         <Provider locale={locales[context.globals.language as Language]}>

@navikt/aksel-icons/figma-plugin/src/ui/app.css

@@ -1,11 +1,11 @@
 @import "@navikt/ds-css";
 
 .wrapper {
-  background-color: var(--a-bg-default);
+  background-color: var(--ax-bg-default);
 }
 
 .form {
-  border-bottom: 1px solid var(--a-border-subtle);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
   position: sticky;
   top: 0;
   z-index: 20;
@@ -16,7 +16,7 @@
   gap: 1rem;
   padding-block: 0.5rem;
   padding-inline: 1rem;
-  background-color: var(--a-bg-default);
+  background-color: var(--ax-bg-default);
 }
 
 .form-togglegroup {
@@ -45,7 +45,7 @@
 }
 
 .sub-heading {
-  color: var(--a-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   margin-bottom: 0.25rem;
 }
 
@@ -58,22 +58,23 @@
 .icon-button {
   min-height: 3rem;
   min-width: 3rem;
-  border-radius: var(--a-border-radius-small);
+  border-radius: var(--ax-radius-2);
   display: grid;
   place-content: center;
-  background-color: var(--a-surface-default);
+  background-color: var(--ax-bg-neutral-softA);
   cursor: pointer;
   border: none;
 }
 
 .icon-button:hover {
-  background-color: var(--a-surface-hover);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
 .icon-button:active {
-  background-color: var(--a-surface-neutral-subtle-hover);
+  background-color: var(--ax-bg-neutral-moderate-pressedA);
 }
 
 .icon-button:focus-visible {
-  outline: 2px solid var(--a-border-focus);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 2px;
 }

@navikt/aksel-icons/icons.stories.tsx

@@ -36,7 +36,7 @@ export const Icons: Story = {
 export const IconsInverted: Story = {
   render: () => {
     return (
-      <div className="icons">
+      <div className="dark">
         {Object.entries(AkselIcons).map(([key, Value]) => (
           <React.Fragment key={key}>
             <Value
@@ -47,18 +47,6 @@ export const IconsInverted: Story = {
             />
           </React.Fragment>
         ))}
-        <style>
-          {`
-          .icons{
-            display: flex;
-            flex-wrap: wrap;
-            background: var(--a-gray-900);
-          }
-          .icon-color{
-            color: var(--a-icon-on-inverted);
-          }
-          `}
-        </style>
       </div>
     );
   },

@navikt/core/css/tokens.json renamed to @navikt/aksel-stylelint/legacy-tokens.json

@@ -31,7 +31,7 @@
   "scripts": {
     "test": "yarn build && node --import tsx --test ./dist/**/*.test.js",
     "copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
-    "copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
+    "copy-tokens": "node -e \"require('fs').copyFileSync('legacy-tokens.json','dist/tokens.json')\"",
     "copy": "yarn copy-css && yarn copy-tokens",
     "build": "tsc -p . && concurrently \"yarn:copy-*\"",
     "watch:lint": "tsc --watch -p .",

@navikt/aksel-stylelint/package.json

@@ -4,85 +4,4 @@ type DeprecatedList = {
   deprecatePrefix?: boolean;
 }[];
 
-export const deprecations: DeprecatedList = [
-  {
-    classes: ["navdsi-deprecated-example", "navdsi-other-deprecated-example"],
-    message: "Removed in vX.X.X, see documentation [link] for more information",
-  },
-  {
-    classes: [
-      "navdsi-dropdown",
-      "navdsi-copy-to-clipboard",
-      "navdsi-header",
-      "navdsi-timeline",
-    ],
-    message:
-      "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
-    deprecatePrefix: true,
-  },
-  {
-    classes: ["navds-chips--icon-left"],
-    message:
-      "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
-  },
-  {
-    classes: ["navds-modal__overlay"],
-    message:
-      "Removed in v5.0.0, use `.navds-modal::backdrop` and `.navds-modal--polyfilled + .backdrop` instead",
-  },
-  {
-    classes: ["navds-modal__button--shake"],
-    message: "Removed in v5.0.0",
-  },
-  {
-    classes: ["navds-modal__content"],
-    message: "Renamed to `.navds-modal__body` in v5.0.0",
-  },
-  {
-    classes: ["navds-guide__illustration"],
-    message: "Use `.navds-guide` instead",
-  },
-  {
-    classes: [
-      "navds-guide__illustration--small",
-      "navds-guide__illustration--medium",
-    ],
-    message:
-      "There is no 1:1 replacement for this, the size will depend on the 'poster' prop and the viewport width",
-  },
-  {
-    classes: ["navds-grid", "navds-content-container"],
-    deprecatePrefix: true,
-    message:
-      "Components were replaced by `HGrid` and `Page.Block` in version 6",
-  },
-  {
-    classes: ["navds-textarea__wrapper"],
-    message: "Removed in v6.0.0",
-  },
-  {
-    classes: [
-      "navds-pagination__prev-next-icon",
-      "navds-pagination__next-text",
-      "navds-pagination__prev-text",
-    ],
-    message: "These classes had no effect and were removed in v7.1.0",
-  },
-  {
-    classes: ["navds-list--nested", "navds-list__item-content"],
-    message: "Removed in v7.1.1",
-  },
-  {
-    classes: ["navds-combobox__button-clear"],
-    message: "Removed in v7.8.0",
-  },
-  {
-    classes: ["navds-switch__checkmark"],
-    message: "Removed in v7.24.0",
-  },
-  {
-    classes: ["navds-modal__document-body"],
-    message:
-      "Will be removed in next major v8. We recommend not using this class anymore.",
-  },
-];
+export const deprecations: DeprecatedList = [];

@navikt/aksel-stylelint/src/deprecations.ts

@@ -70,10 +70,12 @@ Tries to migrate List component moving 'title' and 'description' props to 'Headi
 
 #### Variants
 
+`npx @navikt/aksel codemod v8-button-variant ...`
 `npx @navikt/aksel codemod v8-tag-variant ...`
 `npx @navikt/aksel codemod v8-toggle-group-variant ...`
 `npx @navikt/aksel codemod v8-accordion-variant ...`
 `npx @navikt/aksel codemod v8-chips-variant ...`
+`npx @navikt/aksel codemod v8-link-variant ...`
 
 Updates variant + data-color props based on current variant prop.