Version Packages (#3653)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/actions/build-website/action.yml

@@ -19,6 +19,10 @@ inputs:
   sanity_read_no_drafts_token:
     description: "Sanity read-only token allowing only published documents"
     required: true
+  production:
+    description: "Toggle to differentiate production build (inject stuff based on this)"
+    default: false
+    required: false
 
 runs:
   using: "composite"
@@ -38,6 +42,12 @@ runs:
         echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
       shell: bash
 
+    - name: Set production env var
+      if: ${{ inputs.production == 'true' }}
+      run: |
+        echo "PRODUCTION=true" >> aksel.nav.no/website/.env
+      shell: bash
+
     - name: Build Next.js website
       run: yarn build:next
       env:

.github/workflows/aksel-dev.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   build_and_deploy:
     name: Build and deploy to dev-gcp
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     permissions:
       packages: "write"
       contents: "read"

.github/workflows/aksel-prod.yml

@@ -46,6 +46,7 @@ jobs:
         uses: ./.github/actions/build-website
         with:
           use_cdn_assets: true
+          production: true
           npm_auth_token: ${{ secrets.READER_TOKEN }}
           nais_id_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
           nais_project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}

.storybook/docs/PilotMigration.mdx

@@ -10,8 +10,7 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 ## CSS
 
-- Most of our CSS is re-written. This could potentially affect most custom overrides targeting `.navds`-classes.
-- You will not be able to use the old CSS and the new CSS at the same time.
+- Most of our CSS is re-written. This includes renaming all `.navds`-classNames to `.aksel`. This will affect most custom overrides targeting `.navds`-classes.
 
 As we strongly recommend avoiding custom
 overrides where possible, we would like to encourage opening an

.storybook/docs/PilotSetup.mdx

@@ -32,7 +32,7 @@ If you are not using any of our React-components, you can still switch between t
 
 ## Theme switching
 
-The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `navds-theme` class), and the rest is handled by the CSS.
+The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `aksel-theme` class), and the rest is handled by the CSS.
 
 You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
 
@@ -83,10 +83,10 @@ For SCSS, Less and JS they are also available under the paths
 
 ## I want to test the new React-changes
 
-For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `ds-css/darkside`
+For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `@navikt/ds-css/darkside`
 
 ```tsx
-import "@navikt/ds-css/darkside;";
+import "@navikt/ds-css/darkside";
 import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
@@ -96,7 +96,30 @@ export const App = () => (
 );
 ```
 
-You will not be able to use the old CSS and the new CSS at the same time.
+You will have to check on all your custom overrides when making this switch.
+
+### Partial update
+
+You can migrate parts of your application to use the new CSS classes without having to migrate everything at once.
+
+```tsx
+// Old setup
+import "@navikt/ds-css/darkside";
+// New setup
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
+
+export const App = () => (
+  <div>
+    <StillOnOldCSSComponent>
+    /* Only this part of your app now uses new styling */
+    <Theme>
+      <YourApp />
+    </Theme>
+  </div>
+);
+```
+
 You will have to check on all your custom overrides when making this switch.
 
 ## I have to make some custom changes in darkmode

.storybook/docs/PilotsChangelog.mdx

@@ -4,4 +4,25 @@ import { Meta, Title } from "@storybook/blocks";
 
 # Darkside changelog
 
-Nothing to see here yet.
+## v7.16 (03.03.25)
+
+To allow loading old and new CSS files that the same time, we have now renamed all classes to start with `.aksel` instead of `.navds`.
+Every React component has this now feature-flagged behind using the new `Theme`-component.
+
+- **With `<Theme />`**: All components uses `.aksel`-classes internally.
+- **Without `<Theme />`**: All components uses `.navds`-classes internally like before.
+
+This means you can now migrate parts of your application to use the new CSS classes without having to migrate everything at once.
+
+```
+// MyComponent.tsx
+<div>
+  // Uses old CSS
+  <Button>Click me</Button>
+
+  // Uses new CSS
+  <Theme>
+    <Button>Click me</Button>
+  </Theme>
+</div>
+```

.storybook/docs/PilotsIntro.mdx

@@ -81,7 +81,6 @@ We have updated our CSS to be based on the new tokens for theming.
 
 - Most of our CSS is re-written.
 - All custom overrides targeting `.navds`-classes might have to be updated locally.
-- You will not be able to use the old CSS and the new CSS at the same time.
 - Component-based tokens are no longer avaliable.
 
 ### Tailwind CSS

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/aksel-icons
 
+## 7.17.3
+
+## 7.17.2
+
+## 7.17.1
+
+## 7.17.0
+
+## 7.16.1
+
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
 ## 7.14.2
 
 ## 7.14.1

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "7.14.2",
+  "version": "7.17.3",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @navikt/aksel-stylelint
 
+## 7.17.3
+
+## 7.17.2
+
+## 7.17.1
+
+## 7.17.0
+
+## 7.16.1
+
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
 ## 7.14.2
 
 ## 7.14.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.14.2",
+  "version": "7.17.3",
   "author": "Aksel | Nav",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,13 +35,13 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^7.14.2",
-    "@navikt/ds-tokens": "^7.14.2",
+    "@navikt/ds-css": "^7.17.3",
+    "@navikt/ds-tokens": "^7.17.3",
     "concurrently": "9.0.1",
     "postcss-selector-parser": "^6.0.13",
     "postcss-value-parser": "^4.2.0",
-    "stylelint": "^16.10.0",
-    "stylelint-test-rule-node": "^0.2.1",
+    "stylelint": "^16.15.0",
+    "stylelint-test-rule-node": "^0.4.0",
     "tsx": "^4.19.1",
     "typescript": "5.5.4"
   }

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from "node:fs";
-import { Node as PostCSSNode } from "postcss";
 import valueParser from "postcss-value-parser";
 import stylelint from "stylelint";
 import { isCustomProperty, tokenExists } from "../../utils";
@@ -35,7 +34,7 @@ export const messages = stylelint.utils.ruleMessages(ruleName, {
 const checkDeclValue = (
   value: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode,
+  rootNode: stylelint.Problem["node"],
 ) => {
   valueParser(value).walk((node) => {
     if (
@@ -58,7 +57,7 @@ const checkDeclValue = (
 const checkDeclProp = (
   prop: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode,
+  rootNode: stylelint.Problem["node"],
 ) => {
   if (
     isCustomProperty(prop) &&

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-component-reference/index.ts

@@ -1,4 +1,3 @@
-import { Node as PostCSSNode } from "postcss";
 import valueParser from "postcss-value-parser";
 import stylelint from "stylelint";
 import { getPackageVersion, isCustomProperty, tokenExists } from "../../utils";
@@ -22,7 +21,7 @@ const checkDeclValue = (
   controlledPrefixes: string[],
   value: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode,
+  rootNode: stylelint.Problem["node"],
 ) => {
   valueParser(value).walk((node) => {
     if (

@navikt/aksel-stylelint/src/rules/aksel-design-token-no-global-override/index.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from "node:fs";
-import { Node as PostCSSNode } from "postcss";
 import stylelint from "stylelint";
 import { isCustomProperty } from "../../utils";
 
@@ -26,7 +25,7 @@ const checkDeclProp = (
   controlledPrefixes: string[],
   prop: string,
   postcssResult: stylelint.PostcssResult,
-  rootNode: PostCSSNode,
+  rootNode: stylelint.Problem["node"],
 ) => {
   if (
     isCustomProperty(prop) &&

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @navikt/aksel
 
+## 7.17.3
+
+### Patch Changes
+
+- Updated dependencies [[`56971a1`](https://github.com/navikt/aksel/commit/56971a105d95b08b3e9a31d79f012eb9cd150cc0)]:
+  - @navikt/ds-css@7.17.3
+
+## 7.17.2
+
+### Patch Changes
+
+- Updated dependencies [[`e769eed`](https://github.com/navikt/aksel/commit/e769eed269d327403b89935502f8fe431eca8cc9)]:
+  - @navikt/ds-css@7.17.2
+
+## 7.17.1
+
+### Patch Changes
+
+- Updated dependencies [[`c1b2944`](https://github.com/navikt/aksel/commit/c1b294432195985309f33cef8e1bfc3119bb087b)]:
+  - @navikt/ds-css@7.17.1
+
+## 7.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.17.0
+
+## 7.16.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.16.1
+
+## 7.16.0
+
+### Patch Changes
+
+- Updated dependencies [[`96b9b8e`](https://github.com/navikt/aksel/commit/96b9b8e5bc8c683893e2c79e9a84ee8a6656d34c)]:
+  - @navikt/ds-css@7.16.0
+
+## 7.15.0
+
+### Minor Changes
+
+- CLI: Added primitives migration to new space-tokens. Run `npx @navikt/aksel migration primitive-spacing` to start migrating now. This update is supported for old and new (darkside) system. ([#3597](https://github.com/navikt/aksel/pull/3597))
+
+- CLI: Added js/ts migration to new space-tokens. Run `npx @navikt/aksel migration token-spacing-js` to start migrating now. This update is supported for old and new (darkside) system. ([#3597](https://github.com/navikt/aksel/pull/3597))
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.15.0
+
+## 7.14.3
+
+### Patch Changes
+
+- Updated dependencies [[`06fecf2`](https://github.com/navikt/aksel/commit/06fecf2af1972a5d06ea452fc5b7431b064e1fc0)]:
+  - @navikt/ds-css@7.14.3
+
 ## 7.14.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "7.14.2",
+  "version": "7.17.3",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | Nav designsystem team",
   "license": "MIT",
@@ -29,8 +29,8 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "^7.14.2",
-    "axios": "1.7.4",
+    "@navikt/ds-css": "^7.17.3",
+    "axios": "1.8.2",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",
     "commander": "10.0.1",

@navikt/aksel/src/codemod/migrations.ts

@@ -97,6 +97,37 @@ export const migrations: {
         "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
     },
   ],
+  darkside: [
+    {
+      description:
+        "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
+      value: "primitive-spacing",
+      path: "darkside/primitives-spacing/spacing",
+    },
+    {
+      description:
+        "Updates css, scss and less-variables to use new `space`-tokens. (Works with old and new system)",
+      value: "token-spacing",
+      path: "darkside/token-spacing/spacing",
+    },
+    {
+      description:
+        "Updates js-tokens to use new `space`-tokens. (Works with old and new system)",
+      value: "token-spacing-js",
+      path: "darkside/token-spacing-js/spacing",
+    },
+    {
+      description:
+        "Updates css, scss and less-variables to use new token-prefix",
+      value: "token-update",
+      path: "darkside/token-update/token-update",
+    },
+    {
+      description: "Updates js tokens to use new token-prefix and names",
+      value: "token-update-js",
+      path: "darkside/token-update-js/token-update-js",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

@navikt/aksel/src/codemod/run-codeshift.ts

@@ -13,6 +13,14 @@ const ignoreNodeModules = [
   "**/.next/**",
 ];
 
+export const messages = new Map<
+  string,
+  {
+    format: (input: any) => void;
+    data: any;
+  }
+>();
+
 export async function runCodeshift(
   input: string,
   options: any,
@@ -50,6 +58,10 @@ export async function runCodeshift(
     });
 
     warning && console.info(`\n${chalk.yellow(warning)}\n`);
+
+    messages.forEach((value) => {
+      value.format(value.data);
+    });
   } catch (error) {
     program.error(chalk.red("Error:", error.message));
   }

@navikt/aksel/src/codemod/transforms/darkside/darkside.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+import { newTokens, updatedTokens } from "./darkside.tokens";
+
+describe("Darkside codemods", () => {
+  test("Token migration references exists", () => {
+    Object.entries(updatedTokens).forEach(([oldToken, config]) => {
+      if (config.replacement.length > 1) {
+        expect(
+          newTokens,
+          `${oldToken} has valid replacement: ${config.replacement}`,
+        ).toContain(config.replacement);
+      }
+    });
+  });
+
+  test("Has raw value if no reference is set", () => {
+    Object.values(updatedTokens).forEach((config) => {
+      if (config.replacement.length === 0) {
+        expect(config.raw.length > 0).toBeTruthy();
+      }
+    });
+  });
+});

@navikt/aksel/src/codemod/transforms/darkside/darkside.utils.ts

@@ -0,0 +1,168 @@
+import type {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  JSXElement,
+  JSXOpeningElement,
+} from "jscodeshift";
+
+/**
+ * Finds a component import, accounting for sub-components and aliases.
+ * Returns the local name of the component. If the component is not found, returns null.
+ */
+function findComponentImport(input: {
+  j: API["j"];
+  file: FileInfo;
+  name: string;
+  packageType?: "react" | "tokens";
+}) {
+  const { j, file, name: _name, packageType = "react" } = input;
+
+  /* Account for sub-components */
+  const name = _name.includes(".") ? _name.split(".")[0] : _name;
+
+  const root = j(file.source);
+
+  let foundName: string | null = null;
+
+  root.find(j.ImportDeclaration).forEach((path) => {
+    if (packageType === "react" && !isAkselReactImport(path)) {
+      return;
+    }
+
+    if (packageType === "tokens" && !isAkselTokensImport(path)) {
+      return;
+    }
+
+    path.node.specifiers.forEach((specifier) => {
+      if (
+        specifier.type === "ImportSpecifier" &&
+        specifier.imported.name === name
+      ) {
+        foundName = specifier.local
+          ? specifier.local.name
+          : specifier.imported.name;
+      }
+    });
+  });
+
+  return foundName;
+}
+
+/**
+ * Finds a JSX element in the AST, accounting for sub-components.
+ */
+function findJSXElement(input: {
+  root: ReturnType<API["j"]>;
+  j: API["j"];
+  name: string;
+  originalName: string;
+}) {
+  const { root, j, name, originalName } = input;
+
+  const isSubComponent = originalName.includes(".");
+
+  const openingElement = (
+    isSubComponent
+      ? {
+          name: {
+            type: "JSXMemberExpression",
+            object: {
+              name,
+            },
+            property: {
+              name: originalName.split(".")[1],
+            },
+          },
+        }
+      : {
+          name: {
+            type: "JSXIdentifier",
+            name,
+          },
+        }
+  ) as JSXOpeningElement;
+
+  return root.find(j.JSXElement, {
+    openingElement,
+  });
+}
+
+/**
+ * Finds a prop in a JSX element.
+ */
+function findProp(input: {
+  j: API["j"];
+  path: ASTPath<JSXElement>;
+  name: string;
+}) {
+  const { j, path, name } = input;
+
+  return j(path).find(j.JSXAttribute, {
+    name: {
+      name,
+    },
+  });
+}
+
+/**
+ * Checks if an import is from @navikt/ds-react.
+ */
+function isAkselReactImport(path: ASTPath<ImportDeclaration>) {
+  const importSource = path.node.source.value;
+  return (
+    typeof importSource === "string" &&
+    importSource.startsWith("@navikt/ds-react")
+  );
+}
+
+/**
+ * Checks if an import is from @navikt/ds-tokens.
+ */
+function isAkselTokensImport(path: ASTPath<ImportDeclaration>) {
+  const importSource = path.node.source.value;
+  return (
+    typeof importSource === "string" &&
+    importSource.startsWith("@navikt/ds-tokens")
+  );
+}
+
+/**
+ * Maps old spacing-token values to new space-tokens
+ */
+const legacySpacingTokenMap = new Map<string, string>([
+  ["32", "128"],
+  ["24", "96"],
+  ["20", "80"],
+  ["18", "72"],
+  ["16", "64"],
+  ["14", "56"],
+  ["12", "48"],
+  ["11", "44"],
+  ["10", "40"],
+  ["9", "36"],
+  ["8", "32"],
+  ["7", "28"],
+  ["6", "24"],
+  ["5", "20"],
+  ["4", "16"],
+  ["3", "12"],
+  ["2", "8"],
+  ["1-alt", "6"],
+  ["1", "4"],
+  ["05", "2"],
+  ["0", "0"],
+]);
+
+function convertSpacingToSpace(spacing: string): string | null {
+  return legacySpacingTokenMap.get(spacing) || null;
+}
+
+export {
+  findComponentImport,
+  findJSXElement,
+  findProp,
+  convertSpacingToSpace,
+  legacySpacingTokenMap,
+};

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/spacing.ts

@@ -0,0 +1,113 @@
+import type { API, FileInfo } from "jscodeshift";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import {
+  findComponentImport,
+  findJSXElement,
+  findProp,
+  legacySpacingTokenMap,
+} from "../darkside.utils";
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  /**
+   * Migrate Primitives to `space` from `spacing`
+   */
+  const primitives = [
+    "Box",
+    "Box.New",
+    "BoxNew",
+    "Hgrid",
+    "Stack",
+    "HStack",
+    "VStack",
+    "Bleed",
+  ];
+
+  const affectedProps = [
+    "padding",
+    "paddingInline",
+    "paddingBlock",
+    "margin",
+    "marginInline",
+    "marginBlock",
+    "inset",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "gap",
+  ];
+
+  for (const primitive of primitives) {
+    const name = findComponentImport({ file, j, name: primitive });
+    if (!name) {
+      continue;
+    }
+
+    findJSXElement({
+      root,
+      j,
+      name,
+      originalName: primitive,
+    }).forEach((path) => {
+      for (const prop of affectedProps) {
+        findProp({ j, path, name: prop }).forEach((attr) => {
+          const attrValue = attr.value.value;
+
+          if (attrValue.type === "StringLiteral") {
+            /* padding="32" */
+            attrValue.value = convertSpacingToSpace(attrValue.value);
+          } else if (attrValue.type === "JSXExpressionContainer") {
+            /* padding={{xs: "16", sm: "32"}} */
+            const expression = attrValue.expression;
+            if (expression.type === "ObjectExpression") {
+              /* xs, md, sm */
+              expression.properties.forEach((property) => {
+                if (property.type === "ObjectProperty") {
+                  if (property.value.type === "StringLiteral") {
+                    property.value.value = convertSpacingToSpace(
+                      property.value.value,
+                    );
+                  }
+                }
+              });
+            }
+          }
+        });
+      }
+    });
+  }
+
+  return root.toSource(getLineTerminator(file.source));
+}
+
+/**
+ * Takes an old valid spacing-token and returns the new converted space-token
+ * oldValue: "8", "8 10", "8 auto", "auto auto", "full px"
+ * @returns "space-32", "space-32 space-40"
+ */
+function convertSpacingToSpace(oldValue: string): string {
+  const spacingTokens = oldValue.split(" ");
+
+  const newSpacing = [];
+  for (const spacingToken of spacingTokens) {
+    if (spacingToken === "px") {
+      /* We replace "px" with new `space-1` */
+      newSpacing.push(`space-1`);
+    } else if (
+      ["auto", "full", "px"].includes(spacingToken) ||
+      spacingToken.startsWith("space-")
+    ) {
+      newSpacing.push(spacingToken);
+    } else if (!legacySpacingTokenMap.get(spacingToken)) {
+      console.warn(`Possibly invalid spacing token found: ${spacingToken}\n`);
+      newSpacing.push(spacingToken);
+    } else {
+      newSpacing.push(`space-${legacySpacingTokenMap.get(spacingToken)}`);
+    }
+  }
+
+  return newSpacing.join(" ");
+}

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/directImport.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react/Box";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/directImport.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react/Box";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/idempotent.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/idempotent.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/import.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/import.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/importAlias.input.js

@@ -0,0 +1,13 @@
+import { Box as DSBOX } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DSBOX
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </DSBOX>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/importAlias.output.js

@@ -0,0 +1,13 @@
+import { Box as DSBOX } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DSBOX
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </DSBOX>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/spacing.test.ts

@@ -0,0 +1,19 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = [
+  "import",
+  "valueAsObject",
+  "importAlias",
+  "subComponent",
+  "idempotent",
+  "directImport",
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/subComponent.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box.New
+    before="before"
+    marginInline={{ xs: "auto", sm: "24", md: "32 11" }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box.New>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/subComponent.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box.New
+    before="before"
+    marginInline={{ xs: "auto", sm: "space-96", md: "space-128 space-44" }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box.New>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/valueAsObject.input.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: mdValue, md: getMdValue() }}
+    padding="24"
+    paddingInline="12 32"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/primitives-spacing/tests/valueAsObject.output.js

@@ -0,0 +1,13 @@
+import { Box } from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Box
+    before="before"
+    marginInline={{ xs: "auto", sm: mdValue, md: getMdValue() }}
+    padding="space-96"
+    paddingInline="space-48 space-128"
+    after="after"
+  >
+    <div>ELEMENT</div>
+  </Box>
+);

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/spacing.ts

@@ -0,0 +1,33 @@
+import type { API, FileInfo } from "jscodeshift";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import { translateToken } from "../../../utils/translate-token";
+import { findComponentImport, legacySpacingTokenMap } from "../darkside.utils";
+
+export default function transformer(file: FileInfo, api: API) {
+  const j = api.jscodeshift;
+  let root = j(file.source);
+
+  legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    const oldCSSVar = translateToken(`--a-spacing-${oldVar}`, "js");
+    const newCSSVar = translateToken(`--a-space-${newVar}`, "js");
+
+    const name = findComponentImport({
+      file,
+      j,
+      name: oldCSSVar,
+      packageType: "tokens",
+    });
+
+    if (!name) {
+      return;
+    }
+
+    let code = root.toSource(getLineTerminator(file.source));
+
+    const rgx = new RegExp("(" + oldCSSVar + ")", "gm");
+    code = code.replace(rgx, newCSSVar);
+    root = j(code);
+  });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/complete.input.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ASpacing16 as abc132,
+  ASpacing32,
+  ASpacing8,
+  ASpacing1Alt,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${ASpacing1Alt};
+    }
+  }
+  &.active {
+    background-color: ${ASpacing32};
+    border-bottom: 5px solid ${ASpacing8};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/complete.output.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import {
+  ASpace64 as abc132,
+  ASpace128,
+  ASpace32,
+  ASpace6,
+} from "@navikt/ds-tokens/dist/tokens";
+import { BodyShort } from "@navikt/ds-react";
+
+const StyledNavLink = styled(NavLink)`
+  border-bottom: 5px solid white;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+  :hover {
+    border-bottom: 5px solid ${abc132};
+    p {
+      color: ${ASpace6};
+    }
+  }
+  &.active {
+    background-color: ${ASpace128};
+    border-bottom: 5px solid ${ASpace32};
+
+    .typo-normal {
+      font-weight: bold;
+    }
+  }
+`;
+
+const StyledLenketekst = styled(BodyShort)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledTekst = styled(BodyShort)`
+  border-bottom: 5px solid white;
+  color: ${NavdsGlobalColorGray400};
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
+`;
+
+const Fane = ({ side, behandlingId, index, deaktivert }) => {
+  const { gåTilUrl } = useApp();
+  const fanenavn = side.navn;
+  return (
+    <>
+      {deaktivert && (
+        <StyledTekst size={"small"}>
+          {index + 1}. {fanenavn}
+        </StyledTekst>
+      )}
+      {!deaktivert && (
+        <StyledNavLink
+          key={side.navn}
+          to={`/behandling/${behandlingId}/${side.href}`}
+          onClick={(e) => {
+            e.preventDefault();
+            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
+          }}
+        >
+          <StyledLenketekst size={"small"}>
+            {index + 1}. {fanenavn}
+          </StyledLenketekst>
+        </StyledNavLink>
+      )}
+    </>
+  );
+};
+
+export default Fane;

@navikt/aksel/src/codemod/transforms/darkside/token-spacing-js/tests/spacing.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/spacing.ts

@@ -0,0 +1,28 @@
+import type { FileInfo } from "jscodeshift";
+import { translateToken } from "../../../utils/translate-token";
+import { legacySpacingTokenMap } from "../darkside.utils";
+
+export default function transformer(file: FileInfo) {
+  let src = file.source;
+
+  legacySpacingTokenMap.forEach((newVar, oldVar) => {
+    const oldCSSVar = `--a-spacing-${oldVar}`;
+    const newCSSVar = `--a-space-${newVar}`;
+
+    const CSSRgx = new RegExp("(" + oldCSSVar + ")", "gm");
+    const SCSSRgx = new RegExp(
+      "(\\" + translateToken(oldCSSVar, "scss") + ")",
+      "gm",
+    );
+    const LESSRgx = new RegExp(
+      "(" + translateToken(oldCSSVar, "less") + ")",
+      "gm",
+    );
+
+    src = src.replace(CSSRgx, newCSSVar);
+    src = src.replace(SCSSRgx, translateToken(newCSSVar, "scss"));
+    src = src.replace(LESSRgx, translateToken(newCSSVar, "less"));
+  });
+
+  return src;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.css

@@ -0,0 +1,7 @@
+.test {
+  margin: var(--a-spacing-4);
+  padding: var(--a-spacing-16);
+  padding: var(--a-spacing-0);
+  padding: var(--a-spacing-1-alt);
+  padding: var(--a-spacing-05);
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.less

@@ -0,0 +1,7 @@
+.test {
+  margin: @a-spacing-4;
+  padding: @a-spacing-16;
+  padding: @a-spacing-0;
+  padding: @a-spacing-1-alt;
+  padding: @a-spacing-05;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.input.scss

@@ -0,0 +1,7 @@
+.test {
+  margin: $a-spacing-4;
+  padding: $a-spacing-16;
+  padding: $a-spacing-0;
+  padding: common.$a-spacing-1-alt;
+  padding: common.$a-spacing-05;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.css

@@ -0,0 +1,7 @@
+.test {
+  margin: var(--a-space-16);
+  padding: var(--a-space-64);
+  padding: var(--a-space-0);
+  padding: var(--a-space-6);
+  padding: var(--a-space-2);
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.less

@@ -0,0 +1,7 @@
+.test {
+  margin: @a-space-16;
+  padding: @a-space-64;
+  padding: @a-space-0;
+  padding: @a-space-6;
+  padding: @a-space-2;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/complete.output.scss

@@ -0,0 +1,7 @@
+.test {
+  margin: $a-space-16;
+  padding: $a-space-64;
+  padding: $a-space-0;
+  padding: common.$a-space-6;
+  padding: common.$a-space-2;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-spacing/tests/spacing.test.ts

@@ -0,0 +1,24 @@
+import { check } from "../../../../utils/check";
+
+const migration = "spacing";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "css",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "scss",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "less",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/tests/replace-all.input.js

@@ -0,0 +1,19 @@
+import { ASurfaceSubtle, ASurfaceNeutral } from "@navikt/ds-tokens/dist/tokens";
+
+/**
+ * Since all tokens has a replacement, we want to remove old import when empty
+ */
+const StyledDiv = styled.div`
+    background-color: ${ASurfaceNeutral};
+`
+
+export const testComponent = () => {
+  return (
+    <StyledDiv
+      className="test bg-(--ax-bg-neutral-strong)"
+      style={{ backgroundColor: ASurfaceSubtle }}
+    >
+      Test
+    </StyledDiv>
+  );
+};

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/tests/replace-all.output.js

@@ -0,0 +1,20 @@
+import { BgNeutralStrong, BgNeutralSoft } from "@navikt/ds-tokens/darkside-js";
+
+/**
+ * Since all tokens has a replacement, we want to remove old import when empty
+ */
+const StyledDiv = styled.div`
+    background-color: ${BgNeutralStrong};
+`
+
+export const testComponent = () => {
+  return (
+    <StyledDiv
+      className="test bg-(--ax-bg-neutral-strong)"
+      style={{ backgroundColor: BgNeutralSoft }}
+    >
+      Test
+    </StyledDiv>
+  );
+};
+

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/tests/replace-some.input.js

@@ -0,0 +1,20 @@
+import { ASurfaceSubtle, ASurfaceNeutral, ASurfaceTransparent } from "@navikt/ds-tokens/dist/tokens";
+
+/**
+ * Since only some tokens has a replacement, we have to keep both imports
+ */
+const StyledDiv = styled.div`
+    background-color: ${ASurfaceNeutral};
+    color: ${ASurfaceTransparent};
+`
+
+export const testComponent = () => {
+  return (
+    <StyledDiv
+      className="test bg-(--ax-bg-neutral-strong)"
+      style={{ backgroundColor: ASurfaceSubtle }}
+    >
+      Test
+    </StyledDiv>
+  );
+};

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/tests/replace-some.output.js

@@ -0,0 +1,23 @@
+import { ASurfaceTransparent } from "@navikt/ds-tokens/dist/tokens";
+
+import { BgNeutralStrong, BgNeutralSoft } from "@navikt/ds-tokens/darkside-js";
+
+/**
+ * Since only some tokens has a replacement, we have to keep both imports
+ */
+const StyledDiv = styled.div`
+    background-color: ${BgNeutralStrong};
+    color: ${ASurfaceTransparent};
+`
+
+export const testComponent = () => {
+  return (
+    <StyledDiv
+      className="test bg-(--ax-bg-neutral-strong)"
+      style={{ backgroundColor: BgNeutralSoft }}
+    >
+      Test
+    </StyledDiv>
+  );
+};
+

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/tests/token-update-js.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "token-update-js";
+const fixtures = ["replace-all", "replace-some"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update-js/token-update-js.ts

@@ -0,0 +1,154 @@
+import chalk from "chalk";
+import type { API, FileInfo } from "jscodeshift";
+import { messages } from "../../../run-codeshift";
+import { getImportSpecifier } from "../../../utils/imports";
+import { getLineTerminator } from "../../../utils/lineterminator";
+import moveAndRenameImport from "../../../utils/moveAndRenameImport";
+import { translateToken } from "../../../utils/translate-token";
+import { updatedTokens } from "../darkside.tokens";
+
+/**
+ * Updates old tokens to new names.
+ * Replaces global and semantic tokens with avalaible replacement.
+ */
+export default function transformer(file: FileInfo, api: API) {
+  initMessageSetup();
+
+  let src = file.source;
+
+  const j = api.jscodeshift;
+
+  let root = j(file.source);
+
+  const jsImport = root.find(j.ImportDeclaration).filter((x) => {
+    return ["@navikt/ds-tokens/dist/tokens"].includes(
+      x.node.source.value as string,
+    );
+  });
+
+  if (!jsImport) {
+    return src;
+  }
+
+  for (const [oldToken, config] of Object.entries(updatedTokens)) {
+    const oldCSSVar = `--a-${oldToken}`;
+    const oldJsVar = translateToken(oldCSSVar, "js");
+
+    let foundName: string | null = null;
+
+    getImportSpecifier(
+      j,
+      root,
+      oldJsVar,
+      "@navikt/ds-tokens/dist/tokens",
+    ).forEach((x) => {
+      foundName = x.node.imported.name;
+    });
+
+    if (!foundName) {
+      continue;
+    }
+
+    if (config.replacement.length > 0) {
+      /* We remove the prefix */
+      const jsToken = translateToken(`--ax-${config.replacement}`, "js").slice(
+        2,
+      );
+
+      const localName = moveAndRenameImport(j, root, {
+        fromImport: "@navikt/ds-tokens/dist/tokens",
+        toImport: "@navikt/ds-tokens/darkside-js",
+        fromName: foundName,
+        toName: jsToken,
+        ignoreAlias: true,
+      });
+
+      let code = root.toSource(getLineTerminator(src));
+
+      const rgx = new RegExp("(" + localName + ")", "gm");
+      code = code.replace(rgx, jsToken);
+      src = code;
+
+      root = j(code);
+      continue;
+    }
+
+    documentLegacyReferences({
+      src,
+      oldToken: oldCSSVar,
+      comment: config.comment,
+    });
+  }
+
+  return root.toSource(getLineTerminator(src));
+}
+
+/**
+ * Replaces old token with new token reference.
+ */
+function documentLegacyReferences({
+  src,
+  oldToken,
+  comment,
+}: {
+  src: string;
+  oldToken: string;
+  comment?: string;
+}) {
+  const JSRgx = new RegExp("(" + translateToken(oldToken, "js") + ")", "gm");
+
+  JSRgx.test(src) && addMessage({ token: oldToken, comment, type: "js" });
+}
+
+type UpdateMessageData = {
+  js: string[];
+};
+
+function initMessageSetup() {
+  if (!messages.has("Token update")) {
+    messages.set("Token update", {
+      format: formatMessage,
+      data: {
+        js: [],
+      } satisfies UpdateMessageData,
+    });
+  }
+}
+
+function addMessage({
+  token,
+  comment,
+  type,
+}: {
+  token: string;
+  comment?: string;
+  type: keyof UpdateMessageData;
+}) {
+  messages
+    .get("Token update")
+    ?.data[type].push(`${token}${comment ? ` (${comment})` : ""}`);
+}
+
+function formatMessage(input: UpdateMessageData) {
+  const js = [...new Set(input.js)];
+
+  const total = js.length;
+
+  if (total === 0) {
+    console.info(
+      chalk.green(
+        `Found no legacy-tokens 🎉, you have now migrated over to the darkside.`,
+      ),
+    );
+  }
+
+  console.info(chalk.green(`\nToken update`));
+  console.info(
+    chalk.green(
+      `Found use of ${total} tokens no longer supported. Until these are updated, you will need to keep old tokens imported in your code.`,
+    ),
+  );
+
+  js.length > 0 &&
+    console.info(`\nJS:${js.map((token) => `\n${token}`).join("")}`);
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.input.css

@@ -0,0 +1,14 @@
+.test {
+  margin: var(--a-spacing-4);
+  padding: var(--a-spacing-0);
+  padding: var(--a-spacing-1-alt);
+  padding: var(--a-spacing-05);
+  /* Has replacement */
+  background-color: var(--a-surface-subtle);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --a-surface-neutral: red;
+  --a-surface-subtle: orange;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.input.js

@@ -0,0 +1,10 @@
+export const testComponent = () => {
+  return (
+    <div
+      className="test bg-(--a-surface-neutral)"
+      style={{ backgroundColor: "var(--a-surface-subtle)" }}
+    >
+      Test
+    </div>
+  );
+};

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.input.less

@@ -0,0 +1,25 @@
+.test {
+  margin: var(--a-spacing-4);
+  padding: var(--a-spacing-0);
+  padding: var(--a-spacing-1-alt);
+  padding: var(--a-spacing-05);
+  /* Has replacement */
+  background-color: var(--a-surface-subtle);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --a-surface-neutral: red;
+  --a-surface-subtle: orange;
+}
+
+.test-scss {
+  margin: @a-spacing-4;
+  padding: @a-spacing-0;
+  padding: @a-spacing-1-alt;
+  padding: @a-spacing-05;
+  /* Has replacement */
+  background-color: @a-surface-subtle;
+  /* Has no replacement */
+  background-color: @a-surface-transparent;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.input.scss

@@ -0,0 +1,25 @@
+.test {
+  margin: var(--a-spacing-4);
+  padding: var(--a-spacing-0);
+  padding: var(--a-spacing-1-alt);
+  padding: var(--a-spacing-05);
+  /* Has replacement */
+  background-color: var(--a-surface-subtle);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --a-surface-neutral: red;
+  --a-surface-subtle: orange;
+}
+
+.test-scss {
+  margin: $a-spacing-4;
+  padding: $a-spacing-0;
+  padding: $a-spacing-1-alt;
+  padding: $a-spacing-05;
+  /* Has replacement */
+  background-color: $a-surface-subtle;
+  /* Has no replacement */
+  background-color: $a-surface-transparent;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.output.css

@@ -0,0 +1,14 @@
+.test {
+  margin: var(--ax-space-16);
+  padding: var(--ax-space-0);
+  padding: var(--ax-space-6);
+  padding: var(--ax-space-2);
+  /* Has replacement */
+  background-color: var(--ax-bg-neutral-soft);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --aksel-legacy__a-surface-neutral: red;
+  --aksel-legacy__a-surface-subtle: orange;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.output.js

@@ -0,0 +1,10 @@
+export const testComponent = () => {
+  return (
+    <div
+      className="test bg-(--ax-bg-neutral-strong)"
+      style={{ backgroundColor: "var(--ax-bg-neutral-soft)" }}
+    >
+      Test
+    </div>
+  );
+};

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.output.less

@@ -0,0 +1,25 @@
+.test {
+  margin: var(--ax-space-16);
+  padding: var(--ax-space-0);
+  padding: var(--ax-space-6);
+  padding: var(--ax-space-2);
+  /* Has replacement */
+  background-color: var(--ax-bg-neutral-soft);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --aksel-legacy__a-surface-neutral: red;
+  --aksel-legacy__a-surface-subtle: orange;
+}
+
+.test-scss {
+  margin: @ax-space-16;
+  padding: @ax-space-0;
+  padding: @ax-space-6;
+  padding: @ax-space-2;
+  /* Has replacement */
+  background-color: @ax-bg-neutral-soft;
+  /* Has no replacement */
+  background-color: @a-surface-transparent;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/complete.output.scss

@@ -0,0 +1,25 @@
+.test {
+  margin: var(--ax-space-16);
+  padding: var(--ax-space-0);
+  padding: var(--ax-space-6);
+  padding: var(--ax-space-2);
+  /* Has replacement */
+  background-color: var(--ax-bg-neutral-soft);
+  /* Has no replacement */
+  background-color: var(--a-surface-transparent);
+
+  /* Is tagged as legacy */
+  --aksel-legacy__a-surface-neutral: red;
+  --aksel-legacy__a-surface-subtle: orange;
+}
+
+.test-scss {
+  margin: $ax-space-16;
+  padding: $ax-space-0;
+  padding: $ax-space-6;
+  padding: $ax-space-2;
+  /* Has replacement */
+  background-color: $ax-bg-neutral-soft;
+  /* Has no replacement */
+  background-color: $a-surface-transparent;
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/tests/token-update.test.ts

@@ -0,0 +1,30 @@
+import { check } from "../../../../utils/check";
+
+const migration = "token-update";
+const fixtures = ["complete"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "css",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "scss",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "less",
+  });
+
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/darkside/token-update/token-update.ts

@@ -0,0 +1,185 @@
+import chalk from "chalk";
+import type { FileInfo } from "jscodeshift";
+import { messages } from "../../../run-codeshift";
+import { translateToken } from "../../../utils/translate-token";
+import { updatedTokens } from "../darkside.tokens";
+
+/**
+ * Updates old tokens to new names.
+ * Replaces global and semantic tokens with avalaible replacement.
+ */
+export default function transformer(file: FileInfo) {
+  initMessageSetup();
+
+  let src = file.source;
+
+  for (const [oldToken, config] of Object.entries(updatedTokens)) {
+    const oldCSSVar = `--a-${oldToken}`;
+
+    /* We update all re-definitions of a token to a "legacy" version */
+    const replaceRegex = new RegExp("(" + `${oldCSSVar}:` + ")", "gm");
+
+    src = src.replace(
+      replaceRegex,
+      `--aksel-legacy${oldCSSVar.replace("--", "__")}:`,
+    );
+
+    if (config.replacement.length > 0) {
+      src = replaceTokenWithReference({
+        src,
+        newToken: `--ax-${config.replacement}`,
+        oldToken: oldCSSVar,
+      });
+      continue;
+    }
+
+    documentLegacyReferences({
+      src,
+      oldToken: oldCSSVar,
+      comment: config.comment,
+    });
+  }
+
+  return src;
+}
+
+/**
+ * Replaces old token with new token reference.
+ */
+function replaceTokenWithReference({
+  src,
+  newToken,
+  oldToken,
+}: {
+  src: string;
+  newToken: string;
+  oldToken: string;
+}) {
+  const CSSRgx = new RegExp("(" + oldToken + ")", "gm");
+  const SCSSRgx = new RegExp(
+    "(\\" + translateToken(oldToken, "scss") + ")",
+    "gm",
+  );
+  const LESSRgx = new RegExp(
+    "(" + translateToken(oldToken, "less") + ")",
+    "gm",
+  );
+
+  let fileSrc = src;
+
+  fileSrc = fileSrc.replace(CSSRgx, newToken);
+  fileSrc = fileSrc.replace(SCSSRgx, translateToken(newToken, "scss"));
+  fileSrc = fileSrc.replace(LESSRgx, translateToken(newToken, "less"));
+
+  return fileSrc;
+}
+
+/**
+ * Replaces old token with new token reference.
+ */
+function documentLegacyReferences({
+  src,
+  oldToken,
+  comment,
+}: {
+  src: string;
+  oldToken: string;
+  comment?: string;
+}) {
+  const CSSRgx = new RegExp("(" + oldToken + ")", "gm");
+  const SCSSRgx = new RegExp(
+    "(\\" + translateToken(oldToken, "scss") + ")",
+    "gm",
+  );
+  const LESSRgx = new RegExp(
+    "(" + translateToken(oldToken, "less") + ")",
+    "gm",
+  );
+
+  if (CSSRgx.test(src)) {
+    addMessage({ token: oldToken, comment, type: "css" });
+  } else if (SCSSRgx.test(src)) {
+    addMessage({
+      token: translateToken(oldToken, "scss"),
+      comment,
+      type: "scss",
+    });
+  } else if (LESSRgx.test(src)) {
+    addMessage({
+      token: translateToken(oldToken, "less"),
+      comment,
+      type: "less",
+    });
+  }
+}
+
+type UpdateMessageData = {
+  scss: string[];
+  less: string[];
+  css: string[];
+};
+
+function initMessageSetup() {
+  if (!messages.has("Token update")) {
+    messages.set("Token update", {
+      format: formatMessage,
+      data: {
+        scss: [],
+        less: [],
+        css: [],
+      } satisfies UpdateMessageData,
+    });
+  }
+}
+
+function addMessage({
+  token,
+  comment,
+  type,
+}: {
+  token: string;
+  comment?: string;
+  type: keyof UpdateMessageData;
+}) {
+  messages
+    .get("Token update")
+    ?.data[type].push(`${token}${comment ? ` (${comment})` : ""}`);
+}
+
+function formatMessage(input: UpdateMessageData) {
+  const css = [...new Set(input.css)];
+  const scss = [...new Set(input.scss)];
+  const less = [...new Set(input.less)];
+
+  const total = css.length + scss.length + less.length;
+
+  if (total === 0) {
+    console.info(
+      chalk.green(
+        `Found no legacy-tokens 🎉, you have now migrated over to the darkside.`,
+      ),
+    );
+  }
+
+  console.info(chalk.green(`\nToken update`));
+  console.info(
+    chalk.green(
+      `Found ${total} legacy tokens that are no longer supported. Until these are updated, you will need to keep the old tokens package imported in your code.`,
+    ),
+  );
+
+  css.length > 0 &&
+    console.info(
+      `\nCSS tokens found:${css.map((token) => `\n${token}`).join("")}`,
+    );
+
+  scss.length > 1 &&
+    console.info(
+      `\nSCSS tokens found:${scss.map((token) => `\n${token}`).join("")}`,
+    );
+
+  less.length > 1 &&
+    console.info(
+      `\nLESS tokens found:${less.map((token) => `\n${token}`).join("")}`,
+    );
+}

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @navikt/ds-css
 
+## 7.17.3
+
+### Patch Changes
+
+- Darkside: Synced padding with Figma. ([#3651](https://github.com/navikt/aksel/pull/3651))
+
+## 7.17.2
+
+### Patch Changes
+
+- Darkside: Removed stacking backgrounds with transparency in Combobox. ([`e769eed`](https://github.com/navikt/aksel/commit/e769eed269d327403b89935502f8fe431eca8cc9))
+
+## 7.17.1
+
+### Patch Changes
+
+- ExpansionCard: Fixed bug where `@media print` would hide header content. ([#3634](https://github.com/navikt/aksel/pull/3634))
+
+## 7.17.0
+
+## 7.16.1
+
+## 7.16.0
+
+### Minor Changes
+
+- Darkside: All classNames are now starts with `.aksel` instead of `.navds`. ([#3586](https://github.com/navikt/aksel/pull/3586))
+
+## 7.15.0
+
+## 7.14.3
+
+### Patch Changes
+
+- Darkside: Changed outline-offset for tabpanel from -4px to -3px. ([`06fecf2`](https://github.com/navikt/aksel/commit/06fecf2af1972a5d06ea452fc5b7431b064e1fc0))
+
 ## 7.14.2
 
 ## 7.14.1

@navikt/core/css/config/bundle.darkside.ts

@@ -1,5 +1,5 @@
 import browserslist from "browserslist";
-import CleanCss from "clean-css";
+import esbuild from "esbuild";
 import fastglob from "fast-glob";
 import fs from "fs";
 import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
@@ -76,25 +76,30 @@ async function bundleDarkside() {
    * @param filePath: Path to the file in the build directory
    */
   function writeFile({ file, filePath }: { file: string; filePath: string }) {
-    fs.writeFileSync(`${buildDir}/${filePath}`, file);
+    const buildPath = `${buildDir}/${filePath}`;
+    fs.writeFileSync(buildPath, file);
 
     /**
-     * We use CleanCss package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
+     * We use Esbuild package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
      * This is because we want to keep the CSS as close to the original as possible.
-     * Since CleanCSS is not part of the PostCSS ecosystem, we use it in replacement for cssnano.
      */
-    const minifiedCss = new CleanCss({}).minify(file);
+    const result = esbuild.buildSync({
+      entryPoints: [buildPath],
+      outfile: buildPath.replace(".css", ".min.css"),
+      minify: true, // Enable minification
+      bundle: false,
+      write: true,
+      format: "iife",
+      loader: {
+        ".css": "css",
+      },
+    });
 
-    if (minifiedCss.errors.length > 0) {
+    if (result.errors.length > 0) {
       throw new Error(
-        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${minifiedCss.errors}`,
+        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${result.errors}`,
       );
     }
-
-    fs.writeFileSync(
-      `${buildDir}/${filePath.replace(".css", ".min.css")}`,
-      minifiedCss.styles,
-    );
   }
 
   /* ----------------------------- index.css build ---------------------------- */

@navikt/core/css/darkside/accordion.darkside.css

@@ -1,5 +1,5 @@
 /* ---------------------------- Accordion header ---------------------------- */
-.navds-accordion__header {
+.aksel-accordion__header {
   width: 100%;
   display: flex;
   justify-content: flex-start;
@@ -32,7 +32,7 @@
       display: none;
     }
 
-    > .navds-accordion__icon-wrapper {
+    > .aksel-accordion__icon-wrapper {
       background-color: var(--ax-bg-accent-strong-hover);
       color: var(--ax-text-accent-contrast);
     }
@@ -56,12 +56,12 @@
   }
 }
 
-.navds-accordion--small .navds-accordion__header {
+.aksel-accordion--small .aksel-accordion__header {
   padding-block: var(--ax-space-8);
 }
 
-.navds-accordion__header::before,
-.navds-accordion__header::after {
+.aksel-accordion__header::before,
+.aksel-accordion__header::after {
   content: "";
   display: block;
   position: absolute;
@@ -73,24 +73,24 @@
   background-color: var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__header::after {
+.aksel-accordion__header::after {
   top: initial;
   bottom: 0;
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
-.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header::after,
+.aksel-accordion__item:not(:last-child) > .aksel-accordion__header::after {
   display: none;
 }
 
-.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
-  + .navds-accordion__item
-  > .navds-accordion__header::before {
+.aksel-accordion__item[data-expanded="false"]:has(.aksel-accordion__header:where(:hover, :focus-visible))
+  + .aksel-accordion__item
+  > .aksel-accordion__header::before {
   display: none;
 }
 
 /* ------------------------- Accordion chevron icon ------------------------- */
-.navds-accordion__icon-wrapper {
+.aksel-accordion__icon-wrapper {
   border-radius: var(--ax-border-radius-large);
   width: 22px;
   height: 22px;
@@ -99,20 +99,20 @@
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-accordion__header-chevron {
+.aksel-accordion__header-chevron {
   height: inherit;
   width: inherit;
   flex-shrink: 0;
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header .aksel-accordion__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* ---------------------------- Accordion content --------------------------- */
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+.aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
   padding-block: var(--ax-space-8);
   padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
@@ -121,12 +121,12 @@
   }
 }
 
-.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+.aksel-accordion--indent > .aksel-accordion__item > .aksel-accordion__content {
   box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__item {
-  & > .navds-accordion__content {
+.aksel-accordion__item {
+  & > .aksel-accordion__content {
     display: grid;
     grid-template-rows: 0fr;
     visibility: hidden;
@@ -139,14 +139,14 @@
     border-color: transparent;
     opacity: 0;
 
-    & .navds-accordion__content-inner {
+    & .aksel-accordion__content-inner {
       min-height: 0;
       padding-block: 0;
     }
   }
 
   &[data-expanded="true"] {
-    & > .navds-accordion__content {
+    & > .aksel-accordion__content {
       grid-template-rows: 1fr;
       visibility: visible;
       margin-block: var(--ax-space-8);
@@ -154,7 +154,7 @@
       border-color: var(--ax-border-neutral-subtleA);
       opacity: 1;
 
-      & .navds-accordion__content-inner {
+      & .aksel-accordion__content-inner {
         min-height: fit-content;
       }
     }
@@ -167,8 +167,8 @@
 
 /* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-.navds-accordion__item--no-animation {
-  & > .navds-accordion__content {
+.aksel-accordion__item--no-animation {
+  & > .aksel-accordion__content {
     transition: none;
   }
 }

@navikt/core/css/darkside/action-menu.darkside.css

@@ -1,5 +1,5 @@
 /* --------------------------- ActionMenu content --------------------------- */
-.navds-action-menu__content {
+.aksel-action-menu__content {
   overflow: hidden;
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-neutral-subtleA);
@@ -33,7 +33,7 @@
   }
 }
 
-.navds-action-menu__content > .navds-action-menu__content-inner {
+.aksel-action-menu__content > .aksel-action-menu__content-inner {
   --__axc-action-menu-content-p: var(--ax-space-8);
   --__axc-action-menu-item-pr: var(--ax-space-8);
   --__axc-action-menu-item-pl: var(--ax-space-8);
@@ -54,7 +54,7 @@
 }
 
 /* ----------------------------- ActionMenu Item ---------------------------- */
-.navds-action-menu__item {
+.aksel-action-menu__item {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
@@ -86,11 +86,11 @@
   }
 }
 
-.navds-action-menu__item--has-icon {
+.aksel-action-menu__item--has-icon {
   --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
-.navds-action-menu__sub-trigger {
+.aksel-action-menu__sub-trigger {
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
@@ -102,7 +102,7 @@
   }
 }
 
-.navds-action-menu__item--danger {
+.aksel-action-menu__item--danger {
   color: var(--ax-text-danger-subtle);
 
   &:focus {
@@ -112,18 +112,18 @@
 }
 
 /* ---------------------------- ActionMenu marker --------------------------- */
-.navds-action-menu__marker {
+.aksel-action-menu__marker {
   display: flex;
   align-items: center;
   gap: var(--ax-space-4);
 }
 
-.navds-action-menu__marker--right {
+.aksel-action-menu__marker--right {
   margin-left: auto;
   padding-left: var(--ax-space-16);
 }
 
-.navds-action-menu__marker--left {
+.aksel-action-menu__marker--left {
   position: absolute;
   left: 0;
   width: var(--__axc-action-menu-item-pl);
@@ -131,13 +131,13 @@
   justify-content: center;
 }
 
-.navds-action-menu__marker-icon svg {
+.aksel-action-menu__marker-icon svg {
   font-size: 18px;
   flex-shrink: 0;
 }
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
-.navds-action-menu__shortcut {
+.aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
@@ -152,7 +152,7 @@
 }
 
 /* ---------------------------- ActionMenu Grouping ---------------------------- */
-.navds-action-menu__label {
+.aksel-action-menu__label {
   display: flex;
   align-items: center;
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
@@ -165,7 +165,7 @@
   font-size: var(--ax-font-size-small);
 }
 
-.navds-action-menu__divider {
+.aksel-action-menu__divider {
   height: 1px;
   margin-block: var(--ax-space-8);
   background-color: var(--ax-border-neutral-subtleA);
@@ -173,29 +173,29 @@
 
 /* -------------------------- ActionMenu indicator -------------------------- */
 
-.navds-action-menu__indicator-icon--unchecked,
-.navds-action-menu__indicator-icon--checked,
-.navds-action-menu__indicator-icon--indeterminate {
+.aksel-action-menu__indicator-icon--unchecked,
+.aksel-action-menu__indicator-icon--checked,
+.aksel-action-menu__indicator-icon--indeterminate {
   display: none;
 }
 
-.navds-action-menu__indicator {
+.aksel-action-menu__indicator {
   display: grid;
   place-content: center;
 
-  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  &[data-state="unchecked"] .aksel-action-menu__indicator-icon--unchecked {
     display: block;
   }
 
-  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+  &[data-state="checked"] .aksel-action-menu__indicator-icon--checked {
     display: block;
   }
 
-  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+  &[data-state="indeterminate"] .aksel-action-menu__indicator-icon--indeterminate {
     display: block;
   }
 }
 
-.navds-action-menu__indicator-icon {
+.aksel-action-menu__indicator-icon {
   font-size: 14px;
 }

@navikt/core/css/darkside/alert.darkside.css

@@ -1,7 +1,7 @@
-.navds-alert {
+.aksel-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: center;
@@ -13,78 +13,78 @@
   }
 }
 
-.navds-alert__wrapper--maxwidth {
+.aksel-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 
-.navds-alert__icon {
+.aksel-alert__icon {
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--ax-font-line-height-xlarge);
 }
 
-.navds-alert--small {
-  padding: var(--ax-space-12) var(--ax-space-16);
+.aksel-alert--small {
+  padding: var(--ax-space-16);
   gap: var(--ax-space-8);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: 0;
     height: var(--ax-font-line-height-large);
   }
 }
 
 /* ----------------------------- Alert variants ----------------------------- */
-.navds-alert--info {
+.aksel-alert--info {
   border-color: var(--ax-border-info);
   background-color: var(--ax-bg-info-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-info-icon);
   }
 }
 
-.navds-alert--success {
+.aksel-alert--success {
   border-color: var(--ax-border-success);
   background-color: var(--ax-bg-success-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-success-icon);
   }
 }
 
-.navds-alert--warning {
+.aksel-alert--warning {
   border-color: var(--ax-border-warning);
   background-color: var(--ax-bg-warning-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-warning-icon);
   }
 }
 
-.navds-alert--error {
+.aksel-alert--error {
   border-color: var(--ax-border-danger);
   background-color: var(--ax-bg-danger-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-danger-icon);
   }
 }
 
 /* ----------------------------- Alert fullwidth ---------------------------- */
-.navds-alert--full-width {
+.aksel-alert--full-width {
   border-radius: 0;
 }
 
 /* ------------------------------ Alert inline ------------------------------ */
-.navds-alert--inline {
+.aksel-alert--inline {
   background-color: transparent;
   border: none;
   padding: 0;
 }
 
 /* ------------------------- Alert with close button ------------------------ */
-.navds-alert__button-wrapper {
+.aksel-alert__button-wrapper {
   align-self: flex-start;
   flex: 1;
   display: flex;
@@ -92,23 +92,23 @@
   justify-content: flex-end;
 }
 
-.navds-alert--close-button {
-  > .navds-alert__wrapper {
+.aksel-alert--close-button {
+  > .aksel-alert__wrapper {
     margin-block-start: var(--ax-space-2);
   }
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: var(--ax-space-2);
   }
 
-  &.navds-alert--small {
+  &.aksel-alert--small {
     align-items: flex-start;
 
-    > .navds-alert__wrapper {
+    > .aksel-alert__wrapper {
       margin-block-start: var(--ax-space-4);
     }
 
-    > .navds-alert__icon {
+    > .aksel-alert__icon {
       margin-block-start: var(--ax-space-4);
     }
   }

@navikt/core/css/darkside/baseline/baseline.darkside.css

@@ -14,7 +14,7 @@ body,
 
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  *:not(.aksel-loader *, .aksel-loader, .aksel-progress-bar *, .aksel-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;
@@ -39,7 +39,7 @@ body,
  */
 
 .sr-only,
-.navds-sr-only {
+.aksel-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
@@ -62,8 +62,8 @@ body,
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus,
-.navds-sr-only.focusable:active,
-.navds-sr-only.focusable:focus {
+.aksel-sr-only.focusable:active,
+.aksel-sr-only.focusable:focus {
   clip: auto;
   clip-path: none;
   height: auto;

@navikt/core/css/darkside/button.darkside.css

@@ -1,4 +1,4 @@
-.navds-button {
+.aksel-button {
   --__axc-button-icon-size: 1.5rem;
   --__axc-button-icon-margin: -4px;
   --__axc-button-border-color: transparent;
@@ -22,44 +22,44 @@
   }
 }
 
-.navds-button--small,
-.navds-button--xsmall {
+.aksel-button--small,
+.aksel-button--xsmall {
   --__axc-button-icon-margin: -2px;
 }
 
-.navds-button--small {
+.aksel-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
   gap: var(--ax-space-6);
 }
 
-.navds-button--xsmall {
+.aksel-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
 
   --__axc-button-icon-size: 1.25rem;
 }
 
-.navds-button--icon-only {
+.aksel-button--icon-only {
   padding: var(--ax-space-12);
 
-  &.navds-button--small {
+  &.aksel-button--small {
     padding: var(--ax-space-4);
   }
 
-  &.navds-button--xsmall {
+  &.aksel-button--xsmall {
     padding: var(--ax-space-2);
   }
 }
 
 @supports not selector(:focus-visible) {
-  .navds-button:focus {
+  .aksel-button:focus {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
-.navds-button__icon {
+.aksel-button__icon {
   font-size: var(--__axc-button-icon-size);
   display: flex;
 
@@ -71,15 +71,15 @@
     margin-right: var(--__axc-button-icon-margin);
   }
 
-  .navds-button--icon-only & {
+  .aksel-button--icon-only & {
     margin: 0;
   }
 }
 
 /*************************
- * .navds-button--primary *
+ * .aksel-button--primary *
  *************************/
-.navds-button--primary {
+.aksel-button--primary {
   background-color: var(--ax-bg-accent-strong);
   color: var(--ax-text-accent-contrast);
 
@@ -91,7 +91,7 @@
     background-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-accent-strong);
   }
 
@@ -108,9 +108,9 @@
 }
 
 /*************************
- * .navds-button--primary-neutral *
+ * .aksel-button--primary-neutral *
  *************************/
-.navds-button--primary-neutral {
+.aksel-button--primary-neutral {
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
 
@@ -122,15 +122,15 @@
     background-color: var(--ax-bg-neutral-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-neutral-strong);
   }
 }
 
 /**************************
-* .navds-button--secondary *
+* .aksel-button--secondary *
  **************************/
-.navds-button--secondary {
+.aksel-button--secondary {
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
@@ -146,7 +146,7 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
@@ -155,9 +155,9 @@
 }
 
 /**************************
-* .navds-button--secondary-neutral *
+* .aksel-button--secondary-neutral *
  **************************/
-.navds-button--secondary-neutral {
+.aksel-button--secondary-neutral {
   --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
@@ -173,7 +173,7 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-neutral);
 
     color: var(--ax-text-neutral);
@@ -182,9 +182,9 @@
 }
 
 /****************************
- * .navds-button--tertiary *
+ * .aksel-button--tertiary *
  ****************************/
-.navds-button--tertiary {
+.aksel-button--tertiary {
   background-color: transparent;
   color: var(--ax-text-accent-subtle);
 
@@ -196,16 +196,16 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
 
 /****************************
- * .navds-button--tertiary-neutral *
+ * .aksel-button--tertiary-neutral *
  ****************************/
-.navds-button--tertiary-neutral {
+.aksel-button--tertiary-neutral {
   background-color: transparent;
   color: var(--ax-text-neutral);
 
@@ -217,16 +217,16 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
 
 /*************************
- * .navds-button--danger *
+ * .aksel-button--danger *
  *************************/
-.navds-button--danger {
+.aksel-button--danger {
   background-color: var(--ax-bg-danger-strong);
   color: var(--ax-text-danger-contrast);
 
@@ -238,70 +238,70 @@
     background-color: var(--ax-bg-danger-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-danger-strong);
   }
 }
 
 /**************************
- * .navds-button:disabled *
+ * .aksel-button:disabled *
  **************************/
 
-.navds-button:where(:disabled, .navds-button--disabled) {
+.aksel-button:where(:disabled, .aksel-button--disabled) {
   cursor: not-allowed;
 }
 
-.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+.aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
   opacity: var(--ax-opacity-disabled);
 }
 
 /* Loader overrides */
-.navds-button > .navds-loader {
+.aksel-button > .aksel-loader {
   position: absolute;
 }
 
-.navds-button .navds-loader .navds-loader__foreground {
+.aksel-button .aksel-loader .aksel-loader__foreground {
   stroke: currentColor;
 }
 
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
+.aksel-button--primary .aksel-loader .aksel-loader__background,
+.aksel-button--danger .aksel-loader .aksel-loader__background {
   stroke: rgb(255 255 255 / 0.3);
 }
 
-.navds-button--loading > :not(.navds-loader) {
+.aksel-button--loading > :not(.aksel-loader) {
   visibility: hidden;
 }
 
 @media (forced-colors: active) {
-  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
     opacity: 1;
     color: GrayText;
   }
 
-  .navds-button {
+  .aksel-button {
     border: 1px solid transparent;
     color: ButtonText;
     background-color: ButtonFace;
   }
 
-  .navds-button:not(:disabled):hover {
+  .aksel-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:not(:disabled):hover span {
+  .aksel-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 
-  .navds-button .navds-loader .navds-loader__foreground {
+  .aksel-button .aksel-loader .aksel-loader__foreground {
     stroke: canvas;
   }
 
-  .navds-button--primary .navds-loader .navds-loader__background,
-  .navds-button--danger .navds-loader .navds-loader__background {
+  .aksel-button--primary .aksel-loader .aksel-loader__background,
+  .aksel-button--danger .aksel-loader .aksel-loader__background {
     stroke: canvastext;
   }
 }

@navikt/core/css/darkside/chat.darkside.css

@@ -1,25 +1,25 @@
-.navds-chat {
+.aksel-chat {
   display: flex;
   align-items: flex-end;
   gap: var(--ax-space-12);
   max-width: 40.75rem;
 }
 
-.navds-chat--right {
+.aksel-chat--right {
   flex-direction: row-reverse;
 
-  & .navds-chat__bubble-wrapper {
+  & .aksel-chat__bubble-wrapper {
     align-items: flex-end;
   }
 
-  & .navds-chat__bubble {
+  & .aksel-chat__bubble {
     border-radius: var(--ax-border-radius-xlarge);
     border-bottom-right-radius: var(--ax-border-radius-small);
   }
 }
 
 /* ------------------------------- Chat avatar ------------------------------ */
-.navds-chat__avatar {
+.aksel-chat__avatar {
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
@@ -44,7 +44,7 @@
 }
 
 /* ------------------------------- Chat bubble ------------------------------ */
-.navds-chat__bubble-wrapper {
+.aksel-chat__bubble-wrapper {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -53,8 +53,8 @@
   gap: var(--ax-space-12);
 }
 
-.navds-chat__bubble {
-  padding: var(--ax-space-16) var(--ax-space-20);
+.aksel-chat__bubble {
+  padding: var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
@@ -65,27 +65,27 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-space-12) var(--ax-space-16);
+.aksel-chat--small .aksel-chat__bubble {
+  padding: var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
-.navds-chat--info {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--info {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-info-moderate);
   }
 }
 
-.navds-chat--neutral {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--neutral {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
-.navds-chat__top-text {
+.aksel-chat__top-text {
   color: var(--ax-text-neutral);
   display: flex;
   gap: var(--ax-space-8);
@@ -94,22 +94,22 @@
   margin: 0;
 }
 
-.navds-chat--right .navds-chat__top-text {
+.aksel-chat--right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--top-text-left .navds-chat__top-text {
+.aksel-chat--top-text-left .aksel-chat__top-text {
   align-self: flex-start;
 }
 
-.navds-chat--top-text-right .navds-chat__top-text {
+.aksel-chat--top-text-right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--left .navds-chat__top-text--right {
+.aksel-chat--left .aksel-chat__top-text--right {
   align-self: flex-end;
 }
 
-.navds-chat--right .navds-chat__top-text--left {
+.aksel-chat--right .aksel-chat__top-text--left {
   align-self: flex-start;
 }

@navikt/core/css/darkside/chips.darkside.css

@@ -1,4 +1,4 @@
-.navds-chips {
+.aksel-chips {
   display: flex;
   gap: var(--ax-space-8);
   margin: 0;
@@ -7,14 +7,14 @@
   flex-wrap: wrap;
 }
 
-.navds-chips li {
+.aksel-chips li {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
 }
 
-.navds-chips__chip {
+.aksel-chips__chip {
   all: unset;
   display: flex;
   cursor: pointer;
@@ -33,43 +33,43 @@
   }
 }
 
-.navds-chips--readonly {
-  .navds-chips__chip {
+.aksel-chips--readonly {
+  .aksel-chips__chip {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
-.navds-chips--small {
-  .navds-chips__chip {
+.aksel-chips--small {
+  .aksel-chips__chip {
     min-height: 1.5rem;
     padding: 0 var(--ax-space-8);
   }
 
-  .navds-chips__toggle-icon {
+  .aksel-chips__toggle-icon {
     width: 1rem;
     height: 1rem;
   }
 
-  .navds-chips__toggle--with-checkmark {
+  .aksel-chips__toggle--with-checkmark {
     padding-left: var(--ax-space-4);
   }
 
-  .navds-chips__removable-icon {
+  .aksel-chips__removable-icon {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .navds-chips__removable-icon > svg {
+  .aksel-chips__removable-icon > svg {
     width: 1rem;
   }
 
-  .navds-chips--icon-right {
+  .aksel-chips--icon-right {
     padding-right: var(--ax-space-2);
   }
 }
 
 /* ------------------------------ Chips Toggle ------------------------------ */
-.navds-chips__toggle--action {
+.aksel-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
   color: var(--ax-text-accent);
@@ -89,7 +89,7 @@
   }
 }
 
-.navds-chips__toggle--neutral {
+.aksel-chips__toggle--neutral {
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
   background-color: var(--ax-bg-neutral-moderate);
   color: var(--ax-text-neutral);
@@ -109,18 +109,18 @@
   }
 }
 
-.navds-chips--medium .navds-chips__toggle--with-checkmark {
+.aksel-chips--medium .aksel-chips__toggle--with-checkmark {
   padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
 
 /* ----------------------------- Chips removable ---------------------------- */
-.navds-chips__removable {
+.aksel-chips__removable {
   gap: 0;
 }
 
-.navds-chips__removable--action {
+.aksel-chips__removable--action {
   background: var(--ax-bg-accent-strong-pressed);
   color: var(--ax-text-accent-contrast);
 
@@ -129,7 +129,7 @@
   }
 }
 
-.navds-chips__removable--neutral {
+.aksel-chips__removable--neutral {
   background: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 
@@ -138,7 +138,7 @@
   }
 }
 
-.navds-chips__removable-icon {
+.aksel-chips__removable-icon {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.25rem;
@@ -147,16 +147,16 @@
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-chips--icon-left {
+.aksel-chips--icon-left {
   padding-left: var(--ax-space-6);
 }
 
-.navds-chips--icon-right {
+.aksel-chips--icon-right {
   padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {
-  .navds-chips__chip {
+  .aksel-chips__chip {
     border: 1px solid transparent;
 
     &:hover {
@@ -165,11 +165,11 @@
     }
   }
 
-  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
+  .aksel-chips__chip:where([data-pressed="true"], :active, :hover) > span {
     forced-color-adjust: none;
   }
 
-  .navds-chips__toggle[data-pressed="true"] {
+  .aksel-chips__toggle[data-pressed="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     border: 1px solid selecteditem;

@navikt/core/css/darkside/copybutton.darkside.css

@@ -1,4 +1,4 @@
-.navds-copybutton[data-active="true"] .navds-copybutton__icon {
+.aksel-copybutton[data-active="true"] .aksel-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 

@navikt/core/css/darkside/date.darkside.css

@@ -1,5 +1,5 @@
-.navds-date {
-  padding: var(--ax-space-16) var(--ax-space-12);
+.aksel-date {
+  padding: var(--ax-space-16);
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
@@ -20,7 +20,7 @@
     gap: var(--ax-space-20);
   }
 
-  .navds-date__caption-label {
+  .aksel-date__caption-label {
     text-transform: capitalize;
   }
 
@@ -50,7 +50,7 @@
     border-radius: var(--ax-border-radius-large);
   }
 
-  .navds-date__field {
+  .aksel-date__field {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -58,7 +58,7 @@
   }
 
   .rdp-day_selected,
-  .navds-monthpicker__month--selected {
+  .aksel-monthpicker__month--selected {
     color: var(--ax-text-accent-contrast);
     background: var(--ax-bg-accent-strong-pressed);
     cursor: pointer;
@@ -72,7 +72,7 @@
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
-  .navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
     background: var(--ax-bg-accent-moderate-hoverA);
     cursor: pointer;
   }
@@ -106,16 +106,16 @@
     pointer-events: none;
   }
 
-  .navds-date__modal & {
+  .aksel-date__modal & {
     padding: 0;
   }
 
-  .navds-date__modal-body > & {
+  .aksel-date__modal-body > & {
     padding: 0;
   }
 }
 
-.navds-date__caption {
+.aksel-date__caption {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -123,18 +123,18 @@
   padding-inline: var(--ax-space-4);
 }
 
-.navds-date__caption-button {
+.aksel-date__caption-button {
   width: 2rem;
   height: 2rem;
   color: var(--ax-text-neutral);
 }
 
-.navds-date__caption__month .navds-select__container select {
+.aksel-date__caption__month .aksel-select__container select {
   text-transform: capitalize;
 }
 
 /* Monthpicker */
-.navds-date__month-button {
+.aksel-date__month-button {
   all: unset;
   text-align: center;
   width: 3rem;
@@ -144,18 +144,18 @@
   cursor: pointer;
 }
 
-.navds-date__year-label {
+.aksel-date__year-label {
   display: flex;
   align-items: center;
 }
 
-.navds-date__wrapper,
-.navds-date__standalone-wrapper {
+.aksel-date__wrapper,
+.aksel-date__standalone-wrapper {
   height: fit-content;
   width: fit-content;
 
   .rdp-cell > button.rdp-day,
-  button.navds-date__month-button {
+  button.aksel-date__month-button {
     &:focus-visible {
       outline: 3px solid var(--ax-border-focus);
       outline-offset: 3px;
@@ -168,17 +168,17 @@
   }
 }
 
-.navds-date__field-input {
-  &.navds-text-field__input {
+.aksel-date__field-input {
+  &.aksel-text-field__input {
     padding-right: var(--ax-space-48);
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding-right: var(--ax-space-32);
   }
 }
 
-.navds-date__field-button {
+.aksel-date__field-button {
   position: absolute;
   right: 0.0625rem;
   top: 50%;
@@ -199,17 +199,17 @@
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-4);
   }
 
-  .navds-form-field--disabled & {
+  .aksel-form-field--disabled & {
     opacity: 1;
     cursor: not-allowed;
   }
 
   /* Readonly */
-  .navds-date__field--readonly & {
+  .aksel-date__field--readonly & {
     cursor: default;
   }
 
@@ -218,29 +218,29 @@
   }
 }
 
-.navds-date__field-wrapper {
+.aksel-date__field-wrapper {
   display: inline-flex;
   align-items: center;
   position: relative;
   width: fit-content;
 }
 
-.navds-date__week-row {
+.aksel-date__week-row {
   display: flex;
   align-items: center;
   gap: var(--ax-space-2);
 }
 
-.navds-date__weeknumber {
+.aksel-date__weeknumber {
   --__axc-button-border-width: 1px;
 }
 
-.navds-date__weeknumber-number {
+.aksel-date__weeknumber-number {
   font-size: 0.875rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-date__week-wrapper {
+.aksel-date__week-wrapper {
   width: 2.5rem;
   display: flex;
   align-items: center;
@@ -248,7 +248,7 @@
   margin: 0;
 }
 
-.navds-date__modal-body {
+.aksel-date__modal-body {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -257,20 +257,20 @@
 }
 
 @media (min-width: 480px) {
-  .navds-date {
-    padding: var(--ax-space-20) var(--ax-space-16);
+  .aksel-date {
+    padding: var(--ax-space-20);
   }
 
-  .navds-date__modal-body {
-    padding: var(--ax-space-24);
+  .aksel-date__modal-body {
+    padding: var(--ax-space-20);
   }
 
-  .navds-date__caption {
+  .aksel-date__caption {
     gap: var(--ax-space-8);
   }
 
-  .navds-date .rdp-button,
-  .navds-date__caption-button {
+  .aksel-date .rdp-button,
+  .aksel-date__caption-button {
     width: 3rem;
     height: 3rem;
   }

@navikt/core/css/darkside/dropdown.darkside.css

@@ -1,4 +1,4 @@
-.navds-dropdown__menu {
+.aksel-dropdown__menu {
   overflow: hidden;
   padding: var(--ax-space-8);
   color: var(--ax-text-neutral);
@@ -7,32 +7,32 @@
   overflow-y: auto;
 }
 
-.navds-dropdown__divider {
+.aksel-dropdown__divider {
   margin: var(--ax-space-12) 0;
   border: none;
   border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
+.aksel-dropdown__menu > :not(.aksel-dropdown__divider, .aksel-dropdown__list) {
   margin: 0 var(--ax-space-16) var(--ax-space-12);
 }
 
-.navds-dropdown__list {
+.aksel-dropdown__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.navds-dropdown__list-item {
+.aksel-dropdown__list-item {
   margin: 0;
 }
 
-.navds-dropdown__list-heading {
+.aksel-dropdown__list-heading {
   margin-block: var(--ax-space-4) var(--ax-space-12);
   margin-inline: var(--ax-space-4);
 }
 
-.navds-dropdown__item {
+.aksel-dropdown__item {
   border: none;
   margin: 0;
   overflow: visible;
@@ -70,11 +70,11 @@
 }
 
 @media (forced-colors: active) {
-  .navds-dropdown__item:hover {
+  .aksel-dropdown__item:hover {
     color: highlight;
   }
 
-  .navds-dropdown__item:disabled {
+  .aksel-dropdown__item:disabled {
     opacity: 1;
     color: graytext;
   }

@navikt/core/css/darkside/expansioncard.darkside.css

@@ -1,4 +1,4 @@
-.navds-expansioncard {
+.aksel-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
@@ -8,33 +8,33 @@
   height: fit-content;
   border: 1px solid var(--ax-border-neutral);
 
-  &:has(.navds-expansioncard__header:hover) {
+  &:has(.aksel-expansioncard__header:hover) {
     box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
     border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
-.navds-expansioncard--small {
+.aksel-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
   --__axc-expansioncard-padding-block: var(--ax-space-16);
 
-  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+  & > .aksel-expansioncard__header .aksel-expansioncard__title--small {
     margin-top: var(--ax-space-2);
   }
 
-  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  & :is(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
     margin-top: 0;
   }
 
-  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+  & > .aksel-expansioncard__header > .aksel-expansioncard__header-button {
     min-height: 2rem;
     min-width: 2rem;
   }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
-.navds-expansioncard__header {
+.aksel-expansioncard__header {
   width: 100%;
   display: flex;
   gap: var(--ax-space-16);
@@ -71,20 +71,20 @@
 }
 
 /* --------------------- ExpansionCard Header typography -------------------- */
-.navds-expansioncard__title--small {
+.aksel-expansioncard__title--small {
   margin-top: 0.625rem;
 }
 
-.navds-expansioncard__title--medium {
+.aksel-expansioncard__title--medium {
   margin-top: var(--ax-space-8);
 }
 
-.navds-expansioncard__title--large {
+.aksel-expansioncard__title--large {
   margin-top: var(--ax-space-4);
 }
 
 /* ----------------------- ExpansionCard Header Button ---------------------- */
-.navds-expansioncard__header-button {
+.aksel-expansioncard__header-button {
   display: grid;
   place-content: center;
   cursor: pointer;
@@ -110,28 +110,31 @@
     height: 100%;
     width: 100%;
     cursor: pointer;
+
+    /* Avoid @media print from styling after-element */
+    opacity: 0;
   }
 }
 
-.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+.aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-expansioncard__header-chevron {
+.aksel-expansioncard__header-chevron {
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="true"] .aksel-expansioncard__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
-.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+.aksel-expansioncard__header[data-open="false"] .aksel-expansioncard__header-chevron {
   transition-duration: 400ms;
 }
 
 /* -------------------------- ExpansionCard Content ------------------------- */
-.navds-expansioncard__content {
+.aksel-expansioncard__content {
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -149,21 +152,21 @@
     visibility: visible;
     padding-block: var(--__axc-expansioncard-padding-block);
 
-    & .navds-expansioncard__content-inner {
+    & .aksel-expansioncard__content-inner {
       opacity: 1;
     }
   }
 }
 
-.navds-expansioncard__content-inner {
+.aksel-expansioncard__content-inner {
   min-height: 0;
   opacity: 0;
   transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 /* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
-.navds-expansioncard--no-animation {
-  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+.aksel-expansioncard--no-animation {
+  & :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
     transition: none;
   }
 }

@navikt/core/css/darkside/form/combobox.darkside.css

@@ -1,4 +1,4 @@
-.navds-combobox__wrapper {
+.aksel-combobox__wrapper {
   --__axc-combobox-icon-size: 1.5rem;
   --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
   --__axc-combobox-list-item-padding-block: var(--ax-space-12);
@@ -13,13 +13,13 @@
   border-radius: var(--ax-border-radius-large);
 }
 
-.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
-  & .navds-combobox__wrapper:hover {
+.aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) {
+  & .aksel-combobox__wrapper:hover {
     border-color: var(--ax-border-accent-strong);
   }
 }
 
-.navds-form-field--small .navds-combobox__wrapper {
+.aksel-form-field--small .aksel-combobox__wrapper {
   --__axc-combobox-icon-size: 1.25rem;
   --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
   --__axc-combobox-list-item-padding-block: var(--ax-space-6);
@@ -27,10 +27,10 @@
   --__axc-combobox-input-height: 1.5rem;
 }
 
-.navds-combobox--disabled {
+.aksel-combobox--disabled {
   opacity: var(--ax-opacity-disabled);
 
-  & .navds-combobox__wrapper {
+  & .aksel-combobox__wrapper {
     &:hover {
       border-color: var(--ax-border-neutral);
     }
@@ -40,61 +40,61 @@
     }
   }
 
-  & .navds-combobox__selected-options {
+  & .aksel-combobox__selected-options {
     pointer-events: none;
   }
 
-  & .navds-combobox--readonly {
+  & .aksel-combobox--readonly {
     pointer-events: none;
   }
 }
 
-.navds-combobox--readonly {
+.aksel-combobox--readonly {
   pointer-events: none;
 
-  & .navds-combobox__selected-options {
-    & .navds-chips__chip {
+  & .aksel-combobox__selected-options {
+    & .aksel-chips__chip {
       background-color: var(--ax-bg-neutral-moderateA);
     }
   }
 
-  & .navds-combobox__button-toggle-list {
+  & .aksel-combobox__button-toggle-list {
     color: var(--ax-bg-neutral-moderate);
   }
 
-  & .navds-combobox__wrapper {
+  & .aksel-combobox__wrapper {
     border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
-  & .navds-text-field__input,
-  & .navds-combobox__input {
+  & .aksel-text-field__input,
+  & .aksel-combobox__input {
     background-color: var(--ax-bg-neutral-moderate);
   }
 }
 
-.navds-combobox__button-toggle-list svg,
-.navds-combobox__list svg {
+.aksel-combobox__button-toggle-list svg,
+.aksel-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
   height: var(--__axc-combobox-icon-size);
 }
 
-.navds-combobox__wrapper-inner {
+.aksel-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-large);
 
-  &:has(.navds-combobox__input:focus-visible) {
+  &:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
-  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  &:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
     outline: none;
     border-color: var(--ax-border-neutral);
   }
 
-  &.navds-text-field__input {
+  &.aksel-text-field__input {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -118,23 +118,23 @@
     cursor: text;
   }
 
-  .navds-combobox--disabled &:hover {
+  .aksel-combobox--disabled &:hover {
     border-color: var(--ax-border-neutral);
   }
 }
 
-.navds-combobox--error {
-  & .navds-combobox__wrapper-inner {
+.aksel-combobox--error {
+  & .aksel-combobox__wrapper-inner {
     border-color: var(--ax-border-danger-strong);
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 
-    &:has(.navds-combobox__input:focus-visible) {
+    &:has(.aksel-combobox__input:focus-visible) {
       border-color: var(--ax-border-danger-strong);
     }
   }
 }
 
-.navds-combobox__selected-options {
+.aksel-combobox__selected-options {
   gap: 0;
   align-items: center;
 
@@ -153,7 +153,7 @@
   }
 }
 
-.navds-combobox__selected-options--no-bg {
+.aksel-combobox__selected-options--no-bg {
   font-family: inherit;
   font-size: var(--ax-font-size-large);
   font-weight: var(--ax-font-weight-regular);
@@ -163,11 +163,11 @@
   padding-left: 0.25rem;
 }
 
-.navds-combobox__input-wrapper {
+.aksel-combobox__input-wrapper {
   width: 100%;
 }
 
-.navds-combobox__input {
+.aksel-combobox__input {
   flex: 1;
   border: none;
   padding: 0;
@@ -175,46 +175,46 @@
   min-width: 10ch;
   width: 100%;
   height: var(--__axc-combobox-input-height);
-  background: var(--ax-bg-input);
+  background: transparent;
 
   &:focus-visible {
     outline: 0;
     border: none;
   }
 
-  .navds-combobox__selected-options > li:only-child > & {
+  .aksel-combobox__selected-options > li:only-child > & {
     margin-left: var(--ax-space-4);
   }
 }
 
-.navds-combobox__input--hide-caret {
+.aksel-combobox__input--hide-caret {
   caret-color: transparent;
 }
 
 @supports not selector(:focus-visible) {
-  .navds-combobox__input {
+  .aksel-combobox__input {
     &:focus {
       outline: none;
       border: none;
     }
   }
 
-  .navds-combobox__wrapper-inner {
-    &:has(.navds-combobox__input:focus) {
+  .aksel-combobox__wrapper-inner {
+    &:has(.aksel-combobox__input:focus) {
       outline: none;
     }
 
-    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    &:has(.aksel-combobox__input:focus).aksel-combobox__wrapper-inner--virtually-unfocused {
       outline: none;
     }
   }
 }
 
-.navds-combobox__input::-webkit-search-cancel-button {
+.aksel-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
 
-.navds-combobox__button-toggle-list {
+.aksel-combobox__button-toggle-list {
   color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
@@ -236,7 +236,7 @@
 
 /* dropdown & non selectable dropdown items */
 
-.navds-combobox__list {
+.aksel-combobox__list {
   max-height: 316px;
   overflow: clip;
   position: absolute;
@@ -253,20 +253,20 @@
   overscroll-behavior: contain;
   box-shadow: var(--ax-shadow-dialog);
 
-  & .navds-combobox__list-options {
+  & .aksel-combobox__list-options {
     overflow-y: auto;
   }
 }
 
-.navds-combobox__list--closed {
+.aksel-combobox__list--closed {
   display: none;
 }
 
-.navds-combobox__list-item,
-.navds-combobox__list-item--loading,
-.navds-combobox__list-item--no-options,
-.navds-combobox__list-item--new-option,
-.navds-combobox__list-item--max-selected {
+.aksel-combobox__list-item,
+.aksel-combobox__list-item--loading,
+.aksel-combobox__list-item--no-options,
+.aksel-combobox__list-item--new-option,
+.aksel-combobox__list-item--max-selected {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -279,16 +279,16 @@
   scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
-.navds-combobox__list-item--no-options {
+.aksel-combobox__list-item--no-options {
   margin: 0;
 }
 
-.navds-combobox__list-item--loading {
+.aksel-combobox__list-item--loading {
   justify-content: center;
   margin: 0;
 }
 
-.navds-combobox__list-item--max-selected {
+.aksel-combobox__list-item--max-selected {
   background-color: var(--ax-bg-neutral-moderateA);
   margin: 0;
   border-radius: 0;
@@ -299,7 +299,7 @@
 
 /* ul-list and selectable li-items */
 
-.navds-combobox__list-options {
+.aksel-combobox__list-options {
   list-style: none;
   margin: 0;
   display: inherit;
@@ -311,12 +311,12 @@
   padding-block: var(--ax-space-4);
 }
 
-.navds-combobox__list-item--focus {
+.aksel-combobox__list-item--focus {
   cursor: pointer;
   outline: 2px solid var(--ax-border-focus);
 }
 
-.navds-combobox__list-item {
+.aksel-combobox__list-item {
   user-select: none;
 
   &[data-no-focus="true"] {
@@ -335,7 +335,7 @@
   }
 }
 
-.navds-combobox__list-item--selected {
+.aksel-combobox__list-item--selected {
   background-color: var(--ax-bg-accent-moderate-pressedA);
 
   & p {
@@ -343,7 +343,7 @@
   }
 }
 
-.navds-combobox__list-item--new-option {
+.aksel-combobox__list-item--new-option {
   border-bottom: 1px solid var(--ax-border-accent-subtleA);
   border-radius: 0;
   background: var(--ax-bg-accent-moderateA);
@@ -363,7 +363,7 @@
   }
 }
 
-.navds-combobox__list-item--new-option--focus {
+.aksel-combobox__list-item--new-option--focus {
   border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
 
   /* TODO: new option should get a wrapper div later to
@@ -379,39 +379,39 @@
 
 /* Mobile */
 @media (max-width: 479px) {
-  .navds-combobox__button-toggle-list {
+  .aksel-combobox__button-toggle-list {
     right: 0.5rem;
   }
 
   /* add bigger click area for input */
-  .navds-combobox__input {
+  .aksel-combobox__input {
     min-width: min-content;
     padding: 0.75rem 0;
   }
 
-  .navds-combobox__selected-options {
+  .aksel-combobox__selected-options {
     gap: var(--ax-space-4);
   }
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
     outline-color: highlight;
   }
 
-  .navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover
-    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+  .aksel-combobox__list-item--focus,
+  .aksel-combobox__list--with-hover
+    .aksel-combobox__list-item:not([data-no-focus="true"], .aksel-combobox__list-item--new-option):hover {
     border-left-color: highlight;
     color: highlight;
   }
 
-  .navds-combobox__list-item[data-no-focus="true"] {
+  .aksel-combobox__list-item[data-no-focus="true"] {
     opacity: 1;
     color: graytext;
   }
 
-  .navds-combobox__list-item--selected {
+  .aksel-combobox__list-item--selected {
     background-color: highlight;
     color: selecteditemtext;
 
@@ -424,22 +424,22 @@
     }
   }
 
-  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  .aksel-combobox__list-item--selected.aksel-combobox__list-item--focus,
+  .aksel-combobox__list--with-hover .aksel-combobox__list-item--selected:hover {
     border-left-color: highlight;
     color: highlight;
   }
 
-  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  .aksel-combobox__list--with-hover .aksel-combobox__list-item--new-option:hover {
     color: highlight;
   }
 
-  .navds-combobox__list-item--new-option--focus {
+  .aksel-combobox__list-item--new-option--focus {
     outline: 2px solid highlight;
     outline-offset: 0;
   }
 
-  .navds-combobox--disabled {
+  .aksel-combobox--disabled {
     opacity: 1;
 
     & * {
@@ -449,7 +449,7 @@
     }
   }
 
-  .navds-combobox__list-item--new-option {
+  .aksel-combobox__list-item--new-option {
     svg {
       color: canvastext;
     }

@navikt/core/css/darkside/form/confirmation-panel.darkside.css

@@ -1,4 +1,4 @@
-.navds-confirmation-panel__inner {
+.aksel-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-12);
@@ -11,12 +11,12 @@
   position: relative;
 }
 
-.navds-confirmation-panel__content {
+.aksel-confirmation-panel__content {
   max-width: 80ch;
 }
 
 @media (forced-colors: active) {
-  .navds-confirmation-panel__inner::before {
+  .aksel-confirmation-panel__inner::before {
     content: "";
     position: absolute;
     left: 0;
@@ -29,11 +29,11 @@
     border-end-start-radius: calc(var(--ax-border-radius-large) - 1px);
   }
 
-  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
+  .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner::before {
     border-color: green;
   }
 
-  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
+  .aksel-confirmation-panel--error .aksel-confirmation-panel__inner::before {
     border-color: red;
   }
 }

@navikt/core/css/darkside/form/error-summary.darkside.css

@@ -1,37 +1,37 @@
-.navds-error-summary {
+.aksel-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 3px;
 
   &:focus-visible,
-  &:has(.navds-error-summary__heading:focus-visible) {
+  &:has(.aksel-error-summary__heading:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
-  .navds-error-summary:focus {
+  .aksel-error-summary:focus {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
-.navds-error-summary--small {
-  padding: var(--ax-space-12) var(--ax-space-16);
+.aksel-error-summary--small {
+  padding: var(--ax-space-16);
 
-  & .navds-error-summary__heading {
+  & .aksel-error-summary__heading {
     scroll-margin-top: var(--ax-space-16);
   }
 
-  & > .navds-error-summary__list {
+  & > .aksel-error-summary__list {
     margin: var(--ax-space-8) 0;
     gap: var(--ax-space-8);
     padding-left: var(--ax-space-20);
   }
 }
 
-.navds-error-summary__heading {
+.aksel-error-summary__heading {
   scroll-margin-top: var(--ax-space-24);
 
   &:focus {
@@ -39,7 +39,7 @@
   }
 }
 
-.navds-error-summary__list {
+.aksel-error-summary__list {
   margin: var(--ax-space-12) 0;
   display: flex;
   flex-direction: column;

@navikt/core/css/darkside/form/fieldset.darkside.css

@@ -1,43 +1,43 @@
-.navds-fieldset {
+.aksel-fieldset {
   margin: 0;
   padding: 0;
   border: 0;
   min-width: 0;
 }
 
-.navds-fieldset > :not(:first-child, :empty) {
+.aksel-fieldset > :not(:first-child, :empty) {
   margin-top: var(--ax-space-8);
 }
 
-.navds-fieldset__description {
+.aksel-fieldset__description {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-fieldset > .navds-fieldset__description:not(:empty) {
+.aksel-fieldset > .aksel-fieldset__description:not(:empty) {
   margin-top: 0.125rem;
 }
 
 /* Applied when hideLegend is applied to fieldset */
-.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
+.aksel-fieldset > .aksel-sr-only + :not(:first-child, :empty) {
   margin-top: 0;
 }
 
-.navds-fieldset__legend {
+.aksel-fieldset__legend {
   padding: 0;
 }
 
-.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+.aksel-fieldset--readonly > :where(.aksel-fieldset__legend) {
   display: inline-flex;
 }
 
-.navds-fieldset:disabled > .navds-fieldset__legend,
-.navds-fieldset:disabled > .navds-fieldset__description {
+.aksel-fieldset:disabled > .aksel-fieldset__legend,
+.aksel-fieldset:disabled > .aksel-fieldset__description {
   opacity: var(--ax-opacity-disabled);
 }
 
 @media (forced-colors: active) {
-  .navds-fieldset:disabled > .navds-fieldset__legend,
-  .navds-fieldset:disabled > .navds-fieldset__description {
+  .aksel-fieldset:disabled > .aksel-fieldset__legend,
+  .aksel-fieldset:disabled > .aksel-fieldset__description {
     opacity: 1;
   }
 }

@navikt/core/css/darkside/form/file-upload.darkside.css

@@ -1,5 +1,5 @@
 /* --------------------------- FileUpload Dropzone -------------------------- */
-.navds-dropzone__area {
+.aksel-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
   --__axc-dropzone-icon-padding: var(--ax-space-8);
   --__axc-dropzone-animation-length-long: 400ms;
@@ -14,7 +14,7 @@
   flex-direction: column;
   gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -25,14 +25,14 @@
   &:hover:not([data-disabled="true"]) {
     border-color: var(--ax-border-accent-strong);
 
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
   &:active:not([data-disabled="true"]) {
-    & > .navds-dropzone__area-button {
+    & > .aksel-dropzone__area-button {
       background-color: var(--ax-bg-accent-strong-pressed);
       color: var(--ax-text-accent-contrast);
       box-shadow: none;
@@ -47,12 +47,12 @@
   }
 }
 
-.navds-dropzone--dragging {
-  & > .navds-dropzone__area {
+.aksel-dropzone--dragging {
+  & > .aksel-dropzone__area {
     --__axc-dropzone-background: var(--ax-bg-input);
   }
 
-  & > .navds-dropzone__area::after {
+  & > .aksel-dropzone__area::after {
     color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
@@ -85,19 +85,19 @@
   }
 }
 
-.navds-dropzone__area-icon {
+.aksel-dropzone__area-icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error > .navds-dropzone__area {
+.aksel-dropzone--error > .aksel-dropzone__area {
   border-color: transparent;
   outline: 2px solid var(--ax-border-danger-strong);
   outline-offset: -1px;
 }
 
-.navds-dropzone__area-release {
+.aksel-dropzone__area-release {
   top: var(--ax-space-16);
   display: grid;
   position: absolute;
@@ -108,7 +108,7 @@
     transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
-.navds-dropzone__area-release__icon {
+.aksel-dropzone__area-release__icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
@@ -119,27 +119,27 @@
   font-size: 1.5rem;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+.aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__icon {
   background-color: transparent;
   font-size: 2rem;
 }
 
-.navds-dropzone__area-release__text {
+.aksel-dropzone__area-release__text {
   visibility: hidden;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+.aksel-dropzone--dragging .aksel-dropzone__area-release > .aksel-dropzone__area-release__text {
   transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
   visibility: visible;
 }
 
-.navds-dropzone--dragging .navds-dropzone__area-release {
+.aksel-dropzone--dragging .aksel-dropzone__area-release {
   color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
-.navds-dropzone__area-disabled {
+.aksel-dropzone__area-disabled {
   color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
@@ -148,31 +148,31 @@
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
-.navds-file-upload :is(ul, li),
-ul:has(> li.navds-file-item),
-li.navds-file-item {
+.aksel-file-upload :is(ul, li),
+ul:has(> li.aksel-file-item),
+li.aksel-file-item {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.navds-file-item__inner {
+.aksel-file-item__inner {
   background-color: var(--ax-bg-raised);
   border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: flex-start;
 }
 
-.navds-file-item--error > .navds-file-item__inner {
+.aksel-file-item--error > .aksel-file-item__inner {
   outline: 2px solid var(--ax-border-danger-strong);
 }
 
-.navds-file-item__icon {
+.aksel-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-full);
@@ -189,19 +189,19 @@ li.navds-file-item {
   }
 }
 
-.navds-file-item__icon--loading {
+.aksel-file-item__icon--loading {
   background-color: transparent;
 }
 
-.navds-file-item__file-info {
-  word-break: break-word;
+.aksel-file-item__file-info {
+  overflow-wrap: anywhere;
 }
 
-.navds-file-item__button {
+.aksel-file-item__button {
   margin-left: auto;
 }
 
-.navds-file-item__error {
+.aksel-file-item__error {
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -209,7 +209,7 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  .navds-file-item--error & {
+  .aksel-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }

@navikt/core/css/darkside/form/form-progress.darkside.css

@@ -1,8 +1,8 @@
-.navds-form-progress__bar {
+.aksel-form-progress__bar {
   margin-bottom: var(--ax-space-8);
 }
 
-.navds-form-progress__button {
+.aksel-form-progress__button {
   &:focus-visible {
     z-index: 1;
   }
@@ -14,12 +14,12 @@
   }
 }
 
-.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
-.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+.aksel-form-progress__button[data-state="closed"] .aksel-form-progress__btn-txt-hide,
+.aksel-form-progress__button[data-state="open"] .aksel-form-progress__btn-txt-show {
   display: none;
 }
 
-.navds-form-progress__collapsible {
+.aksel-form-progress__collapsible {
   display: grid;
   visibility: hidden;
   overflow: hidden;
@@ -29,7 +29,7 @@
   padding-inline: var(--ax-space-20);
   padding-block: 0;
   opacity: 0.001;
-  transition-duration: 1s;
+  transition-duration: 0.3s;
   transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
   transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
   grid-template-rows: 0fr;
@@ -45,11 +45,11 @@
     margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--ax-space-16);
+    padding-block: var(--ax-space-20);
     opacity: 1;
   }
 }
 
-.navds-form-progress__collapsible-content {
+.aksel-form-progress__collapsible-content {
   min-height: 0;
 }

@navikt/core/css/darkside/form/form-summary.darkside.css

@@ -1,11 +1,11 @@
-.navds-form-summary {
+.aksel-form-summary {
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
-.navds-form-summary__header {
+.aksel-form-summary__header {
   background: var(--ax-bg-neutral-moderateA);
   padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
@@ -14,70 +14,70 @@
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__header {
+  .aksel-form-summary__header {
     padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
 
-.navds-form-summary__edit {
+.aksel-form-summary__edit {
   flex-shrink: 0;
   margin-top: var(--ax-space-4);
   align-self: flex-start;
 }
 
-.navds-form-summary > .navds-form-summary__answers {
+.aksel-form-summary > .aksel-form-summary__answers {
   border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-form-summary__answers {
+.aksel-form-summary__answers {
   padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__answers {
+  .aksel-form-summary__answers {
     padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
-.navds-form-summary__answer:not(:last-child) {
+.aksel-form-summary__answer:not(:last-child) {
   margin-bottom: var(--ax-space-16);
   padding-bottom: var(--ax-space-16);
   border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer) {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer) {
   padding-bottom: var(--ax-space-24);
 }
 
-.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+.aksel-form-summary__answer:has(.aksel-form-summary__answer):last-child {
   padding-bottom: 0;
 }
 
 @media (max-width: 479px) {
-  .navds-form-summary__answer:not(:last-child) {
+  .aksel-form-summary__answer:not(:last-child) {
     margin-bottom: var(--ax-space-12);
     padding-bottom: var(--ax-space-12);
   }
 
-  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+  .aksel-form-summary__answer:has(.aksel-form-summary__answer) {
     padding-bottom: var(--ax-space-20);
   }
 }
 
-.navds-form-summary__value:first-of-type {
+.aksel-form-summary__value:first-of-type {
   margin-top: var(--ax-space-4);
 }
 
-.navds-form-summary__value .navds-form-summary__answers {
+.aksel-form-summary__value .aksel-form-summary__answers {
   margin-top: var(--ax-space-8);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info-subtleA);
 
-  & .navds-form-summary__answer {
+  & .aksel-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);
   }
 }

@navikt/core/css/darkside/form/form.darkside.css

@@ -1,32 +1,32 @@
-.navds-form-field {
+.aksel-form-field {
   display: grid;
   justify-items: start;
   gap: var(--ax-space-8);
 }
 
-.navds-form-field__description {
+.aksel-form-field__description {
   margin-top: -0.375rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--disabled {
+.aksel-form-field--disabled {
   opacity: var(--ax-opacity-disabled);
   cursor: not-allowed;
 }
 
-.navds-form-field__error:empty {
+.aksel-form-field__error:empty {
   display: none;
 }
 
-.navds-form-field__subdescription {
+.aksel-form-field__subdescription {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-form-field--readonly > :where(.navds-form-field__label) {
+.aksel-form-field--readonly > :where(.aksel-form-field__label) {
   display: inline-flex;
 }
 
-.navds-form-field__readonly-icon {
+.aksel-form-field__readonly-icon {
   margin-top: var(--ax-space-2);
   margin-right: var(--ax-space-4);
   flex-shrink: 0;
@@ -34,7 +34,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-form-field--disabled {
+  .aksel-form-field--disabled {
     opacity: 1;
   }
 }

@navikt/core/css/darkside/form/radio-checkbox.darkside.css

@@ -1,11 +1,11 @@
-.navds-checkbox,
-.navds-radio {
+.aksel-checkbox,
+.aksel-radio {
   position: relative;
   width: fit-content;
 }
 
-.navds-checkbox__input,
-.navds-radio__input {
+.aksel-checkbox__input,
+.aksel-radio__input {
   position: absolute;
   width: 3rem;
   height: 3rem;
@@ -16,8 +16,8 @@
   cursor: pointer;
 }
 
-.navds-checkbox__label,
-.navds-radio__label {
+.aksel-checkbox__label,
+.aksel-radio__label {
   padding: var(--ax-space-12) 0;
   cursor: pointer;
   display: flex;
@@ -27,8 +27,8 @@
   --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
-.navds-checkbox__label::before,
-.navds-radio__label::before {
+.aksel-checkbox__label::before,
+.aksel-radio__label::before {
   content: "";
   border-radius: var(--ax-border-radius-medium);
   background-color: var(--ax-bg-input);
@@ -38,38 +38,38 @@
   border: 2px solid var(--ax-border-neutral);
 }
 
-.navds-radio__label::before {
+.aksel-radio__label::before {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-checkbox__content,
-.navds-radio__content {
+.aksel-checkbox__content,
+.aksel-radio__content {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__input,
-.navds-radio--small > .navds-radio__input {
+.aksel-checkbox--small > .aksel-checkbox__input,
+.aksel-radio--small > .aksel-radio__input {
   width: 2rem;
   height: 2rem;
   top: 0;
   left: -0.375rem;
 }
 
-.navds-checkbox--small > .navds-checkbox__label,
-.navds-radio--small > .navds-radio__label {
+.aksel-checkbox--small > .aksel-checkbox__label,
+.aksel-radio--small > .aksel-radio__label {
   padding: var(--ax-space-6) 0;
 }
 
-.navds-checkbox--small > .navds-checkbox__label::before,
-.navds-radio--small > .navds-radio__label::before {
+.aksel-checkbox--small > .aksel-checkbox__label::before,
+.aksel-radio--small > .aksel-radio__label::before {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio__input:focus + .aksel-radio__label::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -80,16 +80,16 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
-.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+.aksel-checkbox--small > .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
+.aksel-radio--small > .aksel-radio__input:focus + .aksel-radio__label::after {
   height: calc(100% - var(--ax-space-12));
 }
 
-.navds-checkbox__icon-indeterminate {
+.aksel-checkbox__icon-indeterminate {
   display: none;
 }
 
-.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   display: block;
   width: 0.75rem;
   height: 0.25rem;
@@ -101,26 +101,26 @@
   pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--small .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   transform: translate(var(--ax-space-4), -50%);
   height: 0.1875rem;
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+.aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
   background-color: var(--ax-bg-accent-strong-pressed);
   border-color: var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label::before {
+.aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label::before {
   border-color: var(--ax-bg-accent-strong-hover);
   background-color: var(--ax-bg-accent-strong-hover);
 }
 
-.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
   display: none;
 }
 
-.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-bg-default);
   position: absolute;
   height: 1.5rem;
@@ -132,104 +132,104 @@
   align-items: center;
 }
 
-.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   transform: translate(0.25rem, -10%);
 }
 
 /* Tailwind sets all svg to block */
-.navds-checkbox__icon > svg {
+.aksel-checkbox__icon > svg {
   display: inline;
   vertical-align: initial;
 }
 
-.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+.aksel-checkbox--small > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
   background-position: 0.25rem center;
 }
 
-.navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-input);
   border: 8px solid var(--ax-bg-accent-strong-pressed);
 }
 
-.navds-radio--small > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-width: 6px;
 }
 
-.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+.aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+.aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label::before {
   border-color: var(--ax-border-accent-strong);
   background-color: var(--ax-bg-accent-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before {
   border-color: var(--ax-border-danger-strong);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label::before,
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label::before {
   background-color: var(--ax-bg-danger-moderate-hoverA);
 }
 
-.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+.aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-checkbox__label::before {
   background-color: var(--ax-bg-danger-strong-pressed);
   border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-radio--error > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label::before {
   border-color: var(--ax-bg-danger-strong-pressed);
 }
 
-.navds-checkbox--disabled,
-.navds-radio--disabled {
+.aksel-checkbox--disabled,
+.aksel-radio--disabled {
   opacity: var(--ax-opacity-disabled);
 }
 
-.navds-checkbox--disabled > .navds-checkbox__input,
-.navds-checkbox--disabled > .navds-checkbox__label,
-.navds-radio--disabled > .navds-radio__input,
-.navds-radio--disabled > .navds-radio__label {
+.aksel-checkbox--disabled > .aksel-checkbox__input,
+.aksel-checkbox--disabled > .aksel-checkbox__label,
+.aksel-radio--disabled > .aksel-radio__input,
+.aksel-radio--disabled > .aksel-radio__label {
   cursor: not-allowed;
 }
 
 /* Readonly */
-.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
-.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+.aksel-checkbox--readonly > :where(.aksel-checkbox__input, .aksel-checkbox__label),
+.aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
   cursor: default;
 }
 
-.navds-checkbox--readonly .navds-checkbox__label-text {
+.aksel-checkbox--readonly .aksel-checkbox__label-text {
   display: inline-flex;
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
-.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label,
+.aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
   color: var(--ax-text-neutral);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
-.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
-.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
-.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
+.aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label::before,
+.aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label::before,
+.aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before,
+.aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label::before {
   background-color: var(--__axc-radio-checkbox-readonly-bg);
   border-color: var(--__axc-radio-checkbox-readonly-border);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+.aksel-checkbox--readonly > .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
   border-color: var(--__axc-radio-checkbox-readonly-border);
   background-color: var(--__axc-radio-checkbox-readonly-bg);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+.aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
   background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
@@ -237,13 +237,13 @@
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+.aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
   background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
-  .navds-checkbox,
-  .navds-radio {
+  .aksel-checkbox,
+  .aksel-radio {
     --__axc-radio-checkbox-high-contrast-bg: field;
     --__axc-radio-checkbox-high-contrast-text: fieldtext;
     --__axc-radio-checkbox-high-contrast-highlight: highlight;
@@ -252,54 +252,54 @@
     --ax-border-focus: Highlight;
   }
 
-  .navds-checkbox__label::before,
-  .navds-radio__label::before {
+  .aksel-checkbox__label::before,
+  .aksel-radio__label::before {
     border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio__input:checked + .aksel-radio__label::before {
     border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  :not(.aksel-checkbox--readonly) > .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
+  :not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
     color: highlight;
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
     border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly
-    > .navds-checkbox__input:indeterminate
-    + .navds-checkbox__label
-    > .navds-checkbox__icon-indeterminate {
+  .aksel-checkbox--readonly
+    > .aksel-checkbox__input:indeterminate
+    + .aksel-checkbox__label
+    > .aksel-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
     border-width: 6px;
   }
 
-  .navds-checkbox--disabled,
-  .navds-radio--disabled {
+  .aksel-checkbox--disabled,
+  .aksel-radio--disabled {
     opacity: 1;
 
     --__axc-radio-checkbox-high-contrast-bg: field;
     --__axc-radio-checkbox-high-contrast-text: graytext;
   }
 
-  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+  :is(.aksel-checkbox--disabled, .aksel-radio--disabled) :is(.aksel-checkbox__label, .aksel-radio__label) {
     color: graytext;
   }
 }

@navikt/core/css/darkside/form/search.darkside.css

@@ -1,78 +1,78 @@
-.navds-search {
+.aksel-search {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.navds-search__wrapper-inner {
+.aksel-search__wrapper-inner {
   position: relative;
   width: 100%;
 }
 
-.navds-search--with-size {
-  & .navds-search__wrapper-inner {
+.aksel-search--with-size {
+  & .aksel-search__wrapper-inner {
     width: inherit;
   }
 
-  & .navds-search__wrapper {
+  & .aksel-search__wrapper {
     width: fit-content;
   }
 }
 
-.navds-search__wrapper {
+.aksel-search__wrapper {
   display: inline-flex;
   align-items: center;
   border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
-  &:has(.navds-search__input:focus-visible) {
+  &:has(.aksel-search__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Search input ------------------------------ */
-.navds-search__input {
+.aksel-search__input {
   padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
   }
 
-  &.navds-search__input--primary,
-  &.navds-search__input--secondary {
+  &.aksel-search__input--primary,
+  &.aksel-search__input--secondary {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: none;
   }
 }
 
-.navds-search__input--simple {
+.aksel-search__input--simple {
   padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-search__input {
+.aksel-form-field--small {
+  & .aksel-search__input {
     padding-right: var(--ax-space-28);
   }
 
-  & .navds-search__input--simple {
+  & .aksel-search__input--simple {
     padding-left: var(--ax-space-28);
   }
 
-  & .navds-search__search-icon {
+  & .aksel-search__search-icon {
     left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
-  & .navds-search__button-clear {
+  & .aksel-search__button-clear {
     right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
-.navds-search__search-icon {
+.aksel-search__search-icon {
   position: absolute;
   left: var(--ax-space-8);
   top: 50%;
@@ -80,13 +80,13 @@
   pointer-events: none;
   font-size: 1.5rem;
 
-  .navds-search--disabled & {
+  .aksel-search--disabled & {
     opacity: var(--ax-opacity-disabled);
   }
 }
 
 /* --------------------------- Search Clear-button -------------------------- */
-.navds-search__button-clear {
+.aksel-search__button-clear {
   position: absolute;
   right: var(--ax-space-8);
   top: 50%;
@@ -94,14 +94,14 @@
 }
 
 /* ------------------------------ Search Button ----------------------------- */
-.navds-search__button-search {
+.aksel-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
   border-top-right-radius: var(--ax-border-radius-large);
   border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
-.navds-search__button-search.navds-button--secondary {
+.aksel-search__button-search.aksel-button--secondary {
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-neutral);
 
@@ -115,35 +115,35 @@
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */
-.navds-search:not(.navds-search--error, .navds-search--disabled)
-  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
-  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+.aksel-search:not(.aksel-search--error, .aksel-search--disabled)
+  .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible))
+  .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
   --__axc-button-border-color: var(--ax-border-accent-strong);
 }
 
 /* --------------------------- Search Error-state --------------------------- */
-.navds-search--error .navds-search__input:not(:disabled) {
+.aksel-search--error .aksel-search__input:not(:disabled) {
   border-color: var(--ax-border-danger-strong);
   box-shadow:
     inset -2px 0 0 0 var(--ax-border-danger-strong),
     inset 0 0 0 1px var(--ax-border-danger-strong);
 
-  &.navds-search__input--simple {
+  &.aksel-search__input--simple {
     box-shadow: inset 0 0 0 1px var(--ax-border-danger-strong);
   }
 }
 
 /* -------------------------- Search Focus layering ------------------------- */
-.navds-search__input:focus-visible,
-.navds-search__button-search:focus-visible {
+.aksel-search__input:focus-visible,
+.aksel-search__button-search:focus-visible {
   z-index: 1;
 }
 
 /* -------------------------- Search disabled state ------------------------- */
 
 /* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
-.navds-search--disabled {
-  .navds-search__input {
+.aksel-search--disabled {
+  .aksel-search__input {
     opacity: var(--ax-opacity-disabled);
     cursor: not-allowed;
   }

@navikt/core/css/darkside/form/select.darkside.css

@@ -1,4 +1,4 @@
-.navds-select__input {
+.aksel-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-large);
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-select__container {
+.aksel-select__container {
   position: relative;
   display: flex;
   width: 100%;
@@ -40,7 +40,7 @@
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
-.navds-select__chevron {
+.aksel-select__chevron {
   position: absolute;
   font-size: 1.5rem;
   right: var(--ax-space-8);
@@ -56,15 +56,15 @@
 }
 
 /* ------------------------------ Select Sizing ----------------------------- */
-.navds-form-field--small {
-  & .navds-select__input {
+.aksel-form-field--small {
+  & .aksel-select__input {
     min-height: 2rem;
     padding-block: 0;
   }
 }
 
 /* --------------------------- Select Error-state --------------------------- */
-.navds-select--error {
+.aksel-select--error {
   > * select {
     box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
     border-color: var(--ax-border-danger-strong);
@@ -78,7 +78,7 @@
 }
 
 /* ----------------------------- Select disabled ---------------------------- */
-.navds-select__input:disabled {
+.aksel-select__input:disabled {
   background-color: var(--ax-bg-input);
   border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
@@ -93,15 +93,15 @@
   }
 
   @media (forced-colors: active) {
-    & + .navds-select__chevron {
+    & + .aksel-select__chevron {
       color: GrayText;
     }
   }
 }
 
 /* ----------------------------- Select Readonly ---------------------------- */
-.navds-select--readonly {
-  & .navds-select__input {
+.aksel-select--readonly {
+  & .aksel-select__input {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
@@ -115,7 +115,7 @@
     }
   }
 
-  & .navds-select__chevron {
+  & .aksel-select__chevron {
     color: var(--ax-text-neutral-subtle);
   }
 }

@navikt/core/css/darkside/form/switch.darkside.css

@@ -1,15 +1,15 @@
-.navds-switch {
+.aksel-switch {
   position: relative;
   min-height: 3rem;
   width: fit-content;
 }
 
-.navds-switch--small {
+.aksel-switch--small {
   min-height: 2rem;
 }
 
 /* ------------------------------ Switch Input ------------------------------ */
-.navds-switch__input {
+.aksel-switch__input {
   cursor: pointer;
   position: absolute;
   z-index: 1;
@@ -18,19 +18,19 @@
   opacity: 0;
   top: 0;
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     height: 2rem;
     top: 0;
   }
 }
 
 /* -------------------------- Switch content/label -------------------------- */
-.navds-switch__label-wrapper {
+.aksel-switch__label-wrapper {
   cursor: pointer;
   color: var(--ax-text-neutral);
 }
 
-.navds-switch__content {
+.aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
 
   position: relative;
@@ -39,19 +39,19 @@
   gap: var(--ax-space-2);
   padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
-  .navds-switch--right & {
+  .aksel-switch--right & {
     padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
-  .navds-switch--small & {
+  .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
   }
 
-  &.navds-switch--with-description {
+  &.aksel-switch--with-description {
     padding-bottom: 0;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &::after {
     content: "";
     position: absolute;
     left: 0;
@@ -63,22 +63,22 @@
     pointer-events: none;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &.aksel-switch--with-description::after {
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 }
 
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
+.aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+.aksel-switch__label-wrapper:hover {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
   color: inherit;
 }
 
 /* ------------------------------ Switch Track ------------------------------ */
-.navds-switch__track {
+.aksel-switch__track {
   width: 2.75rem;
   height: 1.5rem;
   background-color: var(--ax-bg-input);
@@ -91,38 +91,38 @@
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     top: var(--ax-space-4);
   }
 
-  .navds-switch__input:checked ~ & {
+  .aksel-switch__input:checked ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:hover:checked ~ & {
+  .aksel-switch__input:hover:checked ~ & {
     background-color: var(--ax-bg-accent-strong-hover);
     border-color: var(--ax-bg-accent-strong-hover);
   }
 
-  .navds-switch__input:disabled ~ & {
+  .aksel-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
     border-color: var(--ax-border-neutral);
   }
 
-  .navds-switch__input:checked:disabled ~ & {
+  .aksel-switch__input:checked:disabled ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ & {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Switch Thumb ------------------------------ */
-.navds-switch__thumb {
+.aksel-switch__thumb {
   background-color: var(--ax-bg-neutral-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
@@ -136,7 +136,7 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
-  .navds-switch__input:checked ~ .navds-switch__track > & {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
     color: var(--ax-text-accent-subtle);
@@ -146,91 +146,91 @@
     top: 0;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
     visibility: visible;
     opacity: 1;
   }
 }
 
-.navds-switch__checkmark {
+.aksel-switch__checkmark {
   visibility: hidden;
   opacity: 0;
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.0625rem);
   }
 
-  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.19rem);
   }
 }
 
-.navds-switch--right {
+.aksel-switch--right {
   width: auto;
 
-  & .navds-switch__input,
-  & .navds-switch__track {
+  & .aksel-switch__input,
+  & .aksel-switch__track {
     right: 0;
     left: auto;
   }
 }
 
 /* -------------------------- Switch Disabled-state ------------------------- */
-.navds-switch__input:disabled {
+.aksel-switch__input:disabled {
   appearance: none;
 }
 
-.navds-switch--disabled:not(.navds-switch--loading) {
+.aksel-switch--disabled:not(.aksel-switch--loading) {
   opacity: var(--ax-opacity-disabled);
 }
 
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled,
+.aksel-switch__input:disabled ~ .aksel-switch__label-wrapper {
   cursor: not-allowed;
 }
 
 /* -------------------------- Switch Readonly state ------------------------- */
-.navds-switch--readonly {
-  & > .navds-switch__track,
-  & > .navds-switch__input:hover ~ .navds-switch__track,
-  & > .navds-switch__input:checked ~ .navds-switch__track,
-  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+.aksel-switch--readonly {
+  & > .aksel-switch__track,
+  & > .aksel-switch__input:hover ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  & > .navds-switch__label-wrapper,
-  & > .navds-switch__input {
+  & > .aksel-switch__label-wrapper,
+  & > .aksel-switch__input {
     cursor: default;
   }
 
-  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  & .navds-switch__label-wrapper:hover {
+  & > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  & .aksel-switch__label-wrapper:hover {
     color: var(--ax-text-neutral);
   }
 
-  & .navds-switch__label {
+  & .aksel-switch__label {
     display: inline-flex;
   }
 
-  & .navds-switch__thumb {
+  & .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
   }
 
-  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  & > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    & > .aksel-switch__input:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(0);
     }
 
-    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
   }
@@ -238,40 +238,40 @@
 
 /* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
-  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  .navds-switch__label-wrapper:hover {
+  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  .aksel-switch__label-wrapper:hover {
     color: highlight;
   }
 
-  .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__thumb {
     background-color: fieldtext !important;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     color: field;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
-  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content::after,
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
     outline: 3px solid highlight;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) {
+  .aksel-switch--disabled:not(.aksel-switch--loading) {
     opacity: 1;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__thumb {
     background-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__track {
     border-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper,
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper:hover {
     color: graytext !important;
   }
 }

@navikt/core/css/darkside/form/text-field.darkside.css

@@ -1,4 +1,4 @@
-.navds-text-field__input {
+.aksel-text-field__input {
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
@@ -33,17 +33,17 @@
   }
 }
 
-.navds-form-field--small .navds-text-field__input {
+.aksel-form-field--small .aksel-text-field__input {
   padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
-.navds-text-field--error .navds-text-field__input:not(:disabled) {
+.aksel-text-field--error .aksel-text-field__input:not(:disabled) {
   border-color: var(--ax-border-danger-strong);
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
-.navds-text-field--readonly .navds-text-field__input {
+.aksel-text-field--readonly .aksel-text-field__input {
   background-color: var(--ax-bg-neutral-moderate);
   border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
@@ -52,7 +52,7 @@
 /**
   * Removes default search icon
   */
-.navds-text-field__input[type="search"] {
+.aksel-text-field__input[type="search"] {
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button,
@@ -62,7 +62,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-text-field__input {
+  .aksel-text-field__input {
     background-color: field;
     color: fieldtext;
   }

@navikt/core/css/darkside/form/textarea.darkside.css

@@ -1,4 +1,4 @@
-.navds-textarea__input {
+.aksel-textarea__input {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
@@ -31,51 +31,51 @@
     cursor: not-allowed;
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-6);
   }
 
-  .navds-textarea--readonly & {
+  .aksel-textarea--readonly & {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
 
-.navds-textarea__counter {
+.aksel-textarea__counter {
   margin-top: -0.25rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-textarea__counter--error {
+.aksel-textarea__counter--error {
   color: var(--ax-text-danger-subtle);
 }
 
-.navds-textarea__sr-counter {
+.aksel-textarea__sr-counter {
   display: none;
 }
 
-.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+.aksel-textarea__input:focus ~ .aksel-textarea__sr-counter {
   display: initial;
 }
 
-.navds-textarea--resize-both .navds-textarea__input {
+.aksel-textarea--resize-both .aksel-textarea__input {
   resize: both;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-horizontal .navds-textarea__input {
+.aksel-textarea--resize-horizontal .aksel-textarea__input {
   resize: horizontal;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-vertical .navds-textarea__input {
+.aksel-textarea--resize-vertical .aksel-textarea__input {
   resize: vertical;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--autoscrollbar,
-.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+.aksel-textarea--autoscrollbar,
+.aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -85,17 +85,17 @@
   margin: -3px;
 }
 
-.navds-textarea--autoscrollbar .navds-textarea__input {
+.aksel-textarea--autoscrollbar .aksel-textarea__input {
   scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }
 
-.navds-textarea--error .navds-textarea__input:not(:disabled) {
+.aksel-textarea--error .aksel-textarea__input:not(:disabled) {
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {
-  .navds-textarea__input {
+  .aksel-textarea__input {
     background-color: field;
     color: fieldtext;
   }

@navikt/core/css/darkside/guide-panel.darkside.css

@@ -1,4 +1,4 @@
-.navds-guide-panel {
+.aksel-guide-panel {
   --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-guide {
+.aksel-guide {
   box-sizing: border-box;
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-full);
@@ -42,74 +42,74 @@
   flex-shrink: 0;
 }
 
-.navds-guide svg,
-.navds-guide img {
+.aksel-guide svg,
+.aksel-guide img {
   height: 100%;
   width: 100%;
 }
 
-.navds-guide-panel__content {
+.aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-xlarge);
   position: relative;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
     margin-top: var(--ax-space-20);
   }
 
-  .navds-guide-panel[data-poster="false"] > & {
+  .aksel-guide-panel[data-poster="false"] > & {
     margin-left: var(--ax-space-20);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] > & {
+    .aksel-guide-panel[data-responsive="true"] > & {
       margin-top: 0;
       margin-left: var(--ax-space-20);
     }
   }
 }
 
-.navds-guide-panel__content-inner {
-  padding: var(--ax-space-12) var(--ax-space-16);
+.aksel-guide-panel__content-inner {
+  padding: var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
   height: 100%;
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     min-height: var(--__axc-guide-panel-guide-size);
   }
 
   @media (min-width: 480px) {
     & {
-      padding: var(--ax-space-16) var(--ax-space-20);
+      padding: var(--ax-space-20);
     }
 
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       min-height: var(--__axc-guide-panel-guide-size);
     }
   }
 }
 
-.navds-guide-panel__tail {
+.aksel-guide-panel__tail {
   position: absolute;
   z-index: 0;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
     left: 50%;
     top: calc(var(--ax-space-16) * -1 - 2px);
     transform: translateX(-48%);
   }
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
     left: calc(var(--ax-space-20) * -1 - 2px);
     transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
       left: calc(var(--ax-space-20) * -1 - 2px);
       transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);

@navikt/core/css/darkside/help-text.darkside.css

@@ -1,4 +1,4 @@
-.navds-help-text__button {
+.aksel-help-text__button {
   margin: 0;
   border: 0;
   cursor: pointer;
@@ -12,44 +12,44 @@
   padding: calc(var(--ax-space-4) / 2);
 }
 
-.navds-help-text__icon {
+.aksel-help-text__icon {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-help-text__popover.navds-popover {
+.aksel-help-text__popover.aksel-popover {
   background-color: var(--ax-bg-info-moderate);
   max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
 }
 
-.navds-help-text__icon--filled {
+.aksel-help-text__icon--filled {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
   display: inherit;
   color: var(--ax-bg-info-strong-hover);
 }
 
-.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+.aksel-help-text__button[aria-expanded="true"] > .aksel-help-text__icon--filled {
   color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
     display: inherit;
   }
 
-  .navds-help-text__button:hover > .navds-help-text__icon {
+  .aksel-help-text__button:hover > .aksel-help-text__icon {
     color: highlight;
   }
 
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
     display: none;
   }
 }

@navikt/core/css/darkside/internalheader.darkside.css

@@ -1,4 +1,4 @@
-.navds-internalheader {
+.aksel-internalheader {
   display: flex;
   align-self: stretch;
   background: var(--ax-bg-raised);
@@ -7,14 +7,14 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader {
+  .aksel-internalheader {
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;
   }
 }
 
-.navds-internalheader__title {
+.aksel-internalheader__title {
   border: none;
   overflow: visible;
   background: transparent;
@@ -44,14 +44,14 @@
   }
 }
 
-.navds-internalheader__user {
+.aksel-internalheader__user {
   padding: 0 var(--ax-space-20);
   border-left: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
 }
 
-.navds-internalheader__button {
+.aksel-internalheader__button {
   border: none;
   margin: 0;
   padding: 0 var(--ax-space-12);
@@ -74,7 +74,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader__button:hover {
+  .aksel-internalheader__button:hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
@@ -83,8 +83,8 @@
   }
 }
 
-.navds-internalheader__title,
-.navds-internalheader__button {
+.aksel-internalheader__title,
+.aksel-internalheader__button {
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: -4px;
@@ -95,7 +95,7 @@
   }
 }
 
-.navds-internalheader__user-button {
+.aksel-internalheader__user-button {
   padding-left: var(--ax-space-20);
   gap: var(--ax-space-16);
 }

@navikt/core/css/darkside/link-panel.darkside.css

@@ -1,4 +1,4 @@
-.navds-link-panel {
+.aksel-link-panel {
   text-decoration: none;
   color: var(--ax-text-neutral);
   display: flex;
@@ -9,7 +9,7 @@
   &:hover {
     border-color: var(--ax-border-accent);
 
-    & .navds-link-panel__title {
+    & .aksel-link-panel__title {
       text-decoration: underline;
       color: var(--ax-text-accent-subtle);
     }
@@ -21,17 +21,17 @@
   }
 }
 
-.navds-link-panel__chevron {
+.aksel-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;
   transition: transform 200ms;
 }
 
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
+.aksel-link-panel:hover > .aksel-link-panel__chevron,
+.aksel-link-panel:focus-within > .aksel-link-panel__chevron {
   transform: translateX(4px);
 }
 
-.navds-link-panel__description {
+.aksel-link-panel__description {
   margin-top: var(--a-space-4);
 }

@navikt/core/css/darkside/link.darkside.css

@@ -1,4 +1,4 @@
-.navds-link {
+.aksel-link {
   color: var(--ax-text-accent-subtle);
   display: inline-flex;
   align-items: center;
@@ -18,7 +18,7 @@
     border-radius: 1px;
   }
 
-  &.navds-link--inline-text {
+  &.aksel-link--inline-text {
     display: inline;
 
     & > svg {
@@ -30,7 +30,7 @@
     }
   }
 
-  &.navds-link--remove-underline {
+  &.aksel-link--remove-underline {
     text-decoration: none;
 
     &:hover {
@@ -44,21 +44,21 @@
   }
 }
 
-.navds-alert:not(.navds-alert--inline),
-.navds-confirmation-panel {
-  & .navds-link {
+.aksel-alert:not(.aksel-alert--inline),
+.aksel-confirmation-panel {
+  & .aksel-link {
     color: var(--ax-text-neutral);
   }
 }
 
-.navds-link--action {
+.aksel-link--action {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-link--neutral {
+.aksel-link--neutral {
   color: var(--ax-text-neutral);
 }
 
-.navds-link--subtle {
+.aksel-link--subtle {
   color: var(--ax-text-neutral-subtle);
 }

@navikt/core/css/darkside/list.darkside.css

@@ -1,11 +1,11 @@
-.navds-list ul,
-.navds-list ol {
+.aksel-list ul,
+.aksel-list ol {
   padding: 0;
   margin: 0;
 }
 
-.navds-list {
-  & .navds-list :where(ul, ol) {
+.aksel-list {
+  & .aksel-list :where(ul, ol) {
     margin-block: var(--ax-space-8) 0;
   }
 
@@ -13,7 +13,7 @@
     list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
     padding-left: 1.7rem;
 
-    & > .navds-list__item {
+    & > .aksel-list__item {
       padding-left: 0.3rem;
     }
 
@@ -23,13 +23,13 @@
   }
 
   & ul {
-    & > .navds-list__item {
+    & > .aksel-list__item {
       display: grid;
       grid-template-columns: auto 1fr;
       gap: var(--ax-space-8);
     }
 
-    & > li > .navds-list__item-marker {
+    & > li > .aksel-list__item-marker {
       display: flex;
       align-items: center;
       height: var(--ax-font-line-height-xlarge);
@@ -42,20 +42,20 @@
 
 _::-webkit-full-page-media,
 _:future,
-:root .navds-list ol {
+:root .aksel-list ol {
   padding-left: 2.1rem;
 }
 
 _::-webkit-full-page-media,
 _:future,
-:root .navds-list ol .navds-list__item {
+:root .aksel-list ol .aksel-list__item {
   padding-left: 0;
 }
 
 /* SAFARI HACK END */
 /* stylelint-enable selector-type-no-unknown */
 
-.navds-list__item {
+.aksel-list__item {
   margin-block-end: var(--ax-space-8);
 
   &:last-child {
@@ -63,19 +63,19 @@ _:future,
   }
 }
 
-.navds-list__item-marker {
+.aksel-list__item-marker {
   width: 1.5rem;
 }
 
-.navds-list--small ul > li > .navds-list__item-marker {
+.aksel-list--small ul > li > .aksel-list__item-marker {
   height: var(--ax-font-line-height-large);
 }
 
-.navds-list__item-marker--bullet {
+.aksel-list__item-marker--bullet {
   padding-left: 0.8rem;
 }
 
-.navds-list__item-marker--icon {
+.aksel-list__item-marker--icon {
   font-size: 1.5rem;
   justify-content: center;
 }

@navikt/core/css/darkside/loader.darkside.css

@@ -1,4 +1,4 @@
-.navds-loader {
+.aksel-loader {
   width: 1.5rem;
   display: inline-block;
   position: relative;
@@ -7,49 +7,49 @@
 
   --__axc-loader-stroke-width: 5.9;
 
-  &.navds-loader--3xlarge {
+  &.aksel-loader--3xlarge {
     width: 5.5rem;
     stroke-width: 5;
 
     --__axc-loader-stroke-width: 4.8;
   }
 
-  &.navds-loader--2xlarge {
+  &.aksel-loader--2xlarge {
     width: 4rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--xlarge {
+  &.aksel-loader--xlarge {
     width: 2.5rem;
     stroke-width: 6;
 
     --__axc-loader-stroke-width: 5.8;
   }
 
-  &.navds-loader--large {
+  &.aksel-loader--large {
     width: 2rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--medium {
+  &.aksel-loader--medium {
     width: 1.5rem;
     stroke-width: 7;
 
     --__axc-loader-stroke-width: 6.8;
   }
 
-  &.navds-loader--small {
+  &.aksel-loader--small {
     width: 1.25rem;
     stroke-width: 8;
 
     --__axc-loader-stroke-width: 7.8;
   }
 
-  &.navds-loader--xsmall {
+  &.aksel-loader--xsmall {
     width: 1rem;
     stroke-width: 8;
 
@@ -57,7 +57,7 @@
   }
 }
 
-.navds-loader__foreground {
+.aksel-loader__foreground {
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
@@ -66,39 +66,39 @@
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader__background {
+.aksel-loader__background {
   stroke: var(--ax-border-neutral-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader--neutral {
-  & .navds-loader__foreground {
+.aksel-loader--neutral {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--interaction {
-  & .navds-loader__foreground {
+.aksel-loader--interaction {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-accent-strong);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-accent-subtleA);
   }
 }
 
-.navds-loader--inverted {
-  & .navds-loader__foreground {
+.aksel-loader--inverted {
+  & .aksel-loader__foreground {
     stroke: var(--ax-border-neutral-subtle);
   }
 
-  & .navds-loader__background {
+  & .aksel-loader__background {
     stroke: var(--ax-border-neutral-strong);
   }
 }
 
-.navds-loader--transparent {
-  & .navds-loader__background {
+.aksel-loader--transparent {
+  & .aksel-loader__background {
     stroke: transparent;
   }
 }
@@ -127,7 +127,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-loader__background {
+  .aksel-loader__background {
     stroke: canvastext;
   }
 }

@navikt/core/css/darkside/modal.darkside.css

@@ -1,8 +1,8 @@
-.navds-modal__document-body {
+.aksel-modal__document-body {
   overflow: hidden;
 }
 
-.navds-modal {
+.aksel-modal {
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
@@ -23,7 +23,7 @@
   }
 }
 
-.navds-modal--polyfilled {
+.aksel-modal--polyfilled {
   top: 50%;
   transform: translate(0, -50%);
 
@@ -38,7 +38,7 @@
     display: none; /* from polyfill */
   }
 
-  & .navds-modal--polyfilled {
+  & .aksel-modal--polyfilled {
     overflow: auto;
   }
 }
@@ -53,48 +53,48 @@
   left: 0;
 }
 
-.navds-modal--medium {
+.aksel-modal--medium {
   width: 700px;
 }
 
-.navds-modal--small {
+.aksel-modal--small {
   width: 450px;
 
-  & .navds-modal__header {
+  & .aksel-modal__header {
+    padding: var(--ax-space-16);
+  }
+
+  & .aksel-modal__body {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
-  & .navds-modal__body {
-    padding: var(--ax-space-12) var(--ax-space-16);
-  }
-
-  & .navds-modal__footer {
-    padding: var(--ax-space-12) var(--ax-space-16);
+  & .aksel-modal__footer {
+    padding: var(--ax-space-16);
   }
 }
 
 @media (min-width: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-width: calc(100% - 2em);
   }
 
-  .navds-modal--autowidth {
+  .aksel-modal--autowidth {
     max-width: min(700px, calc(100% - 2em));
   }
 }
 
 @media (min-height: 480px) {
-  .navds-modal {
+  .aksel-modal {
     max-height: calc(100% - 2em);
   }
 
-  .navds-modal--top {
+  .aksel-modal--top {
     margin-top: 2em;
     max-height: calc(100% - 4em);
   }
 }
 
-.navds-modal::backdrop {
+.aksel-modal::backdrop {
   /*
    * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
    * TODO: Consider adding `::backdrop` to global token definitions.
@@ -104,7 +104,7 @@
   animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
-.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+.aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
   background: #0214317d;
 
   /* From polyfill: */
@@ -116,16 +116,16 @@
   left: 0;
 }
 
-.navds-modal__button {
+.aksel-modal__button {
   margin-left: var(--ax-space-16);
   float: right;
 }
 
-.navds-modal__header {
-  padding: var(--ax-space-16) var(--ax-space-20);
+.aksel-modal__header {
+  padding: var(--ax-space-20);
 }
 
-.navds-modal__header-icon {
+.aksel-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
@@ -133,12 +133,12 @@
   }
 }
 
-.navds-modal__label {
+.aksel-modal__label {
   font-weight: var(--ax-font-weight-bold);
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-modal__body {
+.aksel-modal__body {
   padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
@@ -157,23 +157,23 @@
   background-repeat: no-repeat;
 }
 
-.navds-modal__header + .navds-modal__body {
+.aksel-modal__header + .aksel-modal__body {
   padding-top: var(--ax-space-0);
 }
 
-.navds-modal__footer {
+.aksel-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-space-16);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
 }
 
-.navds-modal__footer :nth-of-type(2) {
+.aksel-modal__footer :nth-of-type(2) {
   margin-left: auto;
 }
 
 /* When Datepicker is used nested inside a Modal */
-.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+.aksel-modal--polyfilled .aksel-modal--polyfilled.aksel-date__nested-modal {
   min-width: fit-content;
   max-width: 100vw;
   max-height: 100vh;
@@ -206,7 +206,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-modal {
+  .aksel-modal {
     outline: 2px solid transparent;
   }
 }

@navikt/core/css/darkside/pagination.darkside.css

@@ -1,8 +1,8 @@
-.navds-pagination {
+.aksel-pagination {
   position: relative;
 }
 
-.navds-pagination__list {
+.aksel-pagination__list {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -15,7 +15,7 @@
   }
 }
 
-.navds-pagination__ellipsis {
+.aksel-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,19 +23,19 @@
   cursor: default;
 }
 
-.navds-pagination--small .navds-pagination__ellipsis {
+.aksel-pagination--small .aksel-pagination__ellipsis {
   width: 2rem;
 }
 
-.navds-pagination--xsmall .navds-pagination__ellipsis {
+.aksel-pagination--xsmall .aksel-pagination__ellipsis {
   width: 1.5rem;
 }
 
-.navds-pagination__item[data-selected="true"] {
+.aksel-pagination__item[data-selected="true"] {
   background-color: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 }
 
-.navds-pagination--invisible {
+.aksel-pagination--invisible {
   visibility: hidden;
 }

@navikt/core/css/darkside/panel.darkside.css

@@ -1,10 +1,10 @@
-.navds-panel {
+.aksel-panel {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16);
   border-radius: var(--ax-border-radius-small);
   border: 1px solid transparent;
 }
 
-.navds-panel--border {
+.aksel-panel--border {
   border-color: var(--ax-border-neutral);
 }