Version Packages (#3636)

Co-authored-by: github-actions[bot] <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

@@ -4,22 +4,13 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 # Migration
 
-## Missing features
-
-Some components are not yet implemented in the new system. These are:
-
-- ConfirmationPanel
-- Panel
-- Dropdown
-
 ## Tokens
 
 [See tokens docs here](https://main--66b4b3beb91603ed0ab5c45e.chromatic.com/?path=/docs/docs-become-a-pilot-team-4-tokens--docs).
 
 ## 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
@@ -40,6 +31,15 @@ All component-spesific tokens are no longer supported. That means all tokens lik
 
 All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
 
+## Tailwind CSS
+
+Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config.
+We have decided to prefix all our classes with `ax-` in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.
+
+### Removed classes
+
+z-index, maxWidth and spacing classes are removed from the new config.
+
 ## React
 
 We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
@@ -64,9 +64,9 @@ custom button.
 
 Component got a complete overhaul. Custom overrides might break.
 
-### Popover, HelpText, Tooltip
+### Popover, HelpText
 
-`arrow`-prop is removed. All of our floating dialog-elements now come without arrow.
+`arrow`-prop is removed. All of our floating dialog-elements except for `Tooltip` now comes without arrow.
 If you have custom `offset`-values, you might have to update them to accommodate this.
 
 ### Pagination

.storybook/docs/PilotSetup.mdx

@@ -6,18 +6,18 @@ import { Markdown, Meta } from "@storybook/blocks";
 
 ## Clean project
 
-For new projects, setup is just as easy as before, but now requires `Theme`-component to be wrapped around your app.
+For new projects, setup is just as easy as before, but now requires a `Theme`-component to be wrapped around your app.
 The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
 
 Steps:
 
 - 1. Import new CSS `@navikt/ds-css/darkside`
-- 2. Import `Theme`-component from `@navikt/ds-react`
+- 2. Import `Theme`-component from `@navikt/ds-react/Theme`
 - 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
 
 ```tsx
 import "@navikt/ds-css/darkside";
-import { Theme } from "@navikt/ds-react";
+import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
   <Theme theme="light">
@@ -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`, 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,11 +83,11 @@ 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 { Theme } from "@navikt/ds-react";
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
 
 export const App = () => (
   <Theme theme="light">
@@ -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
@@ -117,3 +140,12 @@ Since our implementation is based on CSS, you can easily make custom adjustments
   }
 }
 ```
+
+## Tailwind CSS
+
+```
+// Tailwind v3
+module.exports = {
+  presets: [require("@navikt/ds-tailwind/darkside-tw3")],
+}
+```

.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

@@ -44,6 +44,7 @@ We welcome all forms of feedback:
 - **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
 - **Dark mode**: A new dark mode implementation.
 - **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
+- **Updated Tailwind CSS config**: Now uses new tokens, now comes with built-in `ax`-prefix for easier separation between Aksel and your own config.
 - **Updated components**: Components use the new tokens and CSS.
 - **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
 - **Updated documentation**: Updated documentation for the new implementation.
@@ -54,9 +55,14 @@ As we go, we will add more documentation to help you get started with the new im
 
 - [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
 
+### Demo page
+
+We have a demo page to show off some of the new features and tokens. [You can find it here](https://aksel-referansesider.ansatt.dev.nav.no/aktivitetsplan/).
+We recommend using "inspect-tool" in browser to get a feel for the new tokens and CSS.
+
 ## How testing could affect your application
 
-All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all inn.
+All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all-in.
 You will still be able to recieve updates to the old implementation while we are in the testing phase.
 
 ### Tokens
@@ -67,7 +73,7 @@ This includes new backgrounds, text-colors, border-colors and updated spacing-to
 - All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
 - You will be able to use the new tokens at the same time as the old tokens.
 - All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
-- New spacing tokens are now named `space` and based on `px` values.
+- New spacing tokens are now named `space` and based on `px` values (most devs think and deal in `px` values first, no more on-the-fly mental arithmetic! WYSIWYG).
 
 ### CSS
 
@@ -75,9 +81,13 @@ 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
+
+We have made a new Tailwind CSS config based on the new tokens. Based on previous iterations, we have decided to try prefixing all our classes with `ax-`.
+While this will be a little more verbose, it makes it easier to separate your own config from ours, and hopefully makes it easier to maintain.
+
 ### React components
 
 We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @navikt/aksel-icons
 
+## 7.17.1
+
+## 7.17.0
+
+## 7.16.1
+
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `LineHeight`, `SpaceHorizontal` and `SpaceVertical`. ([#3587](https://github.com/navikt/aksel/pull/3587))
+
+## 7.13.0
+
+### Minor Changes
+
+- Icons: :tada: New icons `ExpandVertical` and `QuestionmarkCircle` ([#3583](https://github.com/navikt/aksel/pull/3583))
+
 ## 7.12.2
 
 ## 7.12.1

@navikt/aksel-icons/icons/Density3.yml

@@ -12,5 +12,5 @@ keywords:
   - struktur
   - innhold
 variant: Stroke
-updated_at: 05.01.2024
+updated_at: 10.02.2025
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ExpandVertical.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 2.21967C12.2374 1.92678 11.7626 1.92678 11.4697 2.21967L7.46967 6.21967C7.17678 6.51256 7.17678 6.98744 7.46967 7.28033C7.76256 7.57322 8.23744 7.57322 8.53033 7.28033L11.25 4.56066L11.25 10C11.25 10.4142 11.5858 10.75 12 10.75C12.4142 10.75 12.75 10.4142 12.75 10L12.75 4.56066L15.4697 7.28033C15.7626 7.57322 16.2374 7.57322 16.5303 7.28033C16.8232 6.98744 16.8232 6.51256 16.5303 6.21967L12.5303 2.21967ZM11.4697 21.7803C11.7626 22.0732 12.2374 22.0732 12.5303 21.7803L16.5303 17.7803C16.8232 17.4874 16.8232 17.0126 16.5303 16.7197C16.2374 16.4268 15.7626 16.4268 15.4697 16.7197L12.75 19.4393L12.75 14C12.75 13.5858 12.4142 13.25 12 13.25C11.5858 13.25 11.25 13.5858 11.25 14L11.25 19.4393L8.53033 16.7197C8.23744 16.4268 7.76256 16.4268 7.46967 16.7197C7.17678 17.0126 7.17678 17.4874 7.46967 17.7803L11.4697 21.7803Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/ExpandVertical.yml

@@ -0,0 +1,13 @@
+name: ExpandVertical
+category: Arrows
+sub_category: Arrow
+keywords:
+  - arrows
+  - piler
+  - fullscreen
+  - fullskjerm
+  - open
+  - åpne
+variant: Stroke
+updated_at: 30.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/LineHeight.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 3.25C3.33579 3.25 3 3.58579 3 4C3 4.41421 3.33579 4.75 3.75 4.75H20.25C20.6642 4.75 21 4.41421 21 4C21 3.58579 20.6642 3.25 20.25 3.25H3.75ZM12.6855 6.9454C12.5652 6.67455 12.2966 6.5 12.0002 6.5C11.7038 6.5 11.4352 6.67455 11.3148 6.9454L7.31483 15.9454C7.1466 16.3239 7.31707 16.7671 7.69558 16.9354C8.0741 17.1036 8.51732 16.9331 8.68555 16.5546L9.5987 14.5H14.4017L15.3148 16.5546C15.4831 16.9331 15.9263 17.1036 16.3048 16.9354C16.6833 16.7671 16.8538 16.3239 16.6855 15.9454L12.6855 6.9454ZM13.735 13L12.0002 9.09666L10.2654 13H13.735ZM3 20C3 19.5858 3.33579 19.25 3.75 19.25H20.25C20.6642 19.25 21 19.5858 21 20C21 20.4142 20.6642 20.75 20.25 20.75H3.75C3.33579 20.75 3 20.4142 3 20Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/LineHeight.yml

@@ -0,0 +1,9 @@
+name: LineHeight
+category: Interface
+sub_category: Design
+keywords:
+  - linjehøyde
+  - linjeavstand
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/QuestionmarkCircle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9ZM10.25 9.5C10.25 8.5335 11.0335 7.75 12 7.75H12.1361C13.0274 7.75 13.75 8.47255 13.75 9.36387C13.75 9.85413 13.5271 10.3178 13.1443 10.6241L12.7028 10.9773C11.7845 11.7119 11.25 12.8241 11.25 14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14C12.75 13.2797 13.0774 12.5985 13.6398 12.1486L14.0814 11.7954C14.82 11.2045 15.25 10.3098 15.25 9.36387C15.25 7.64413 13.8559 6.25 12.1361 6.25H12C10.2051 6.25 8.75 7.70507 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/QuestionmarkCircle.yml

@@ -0,0 +1,17 @@
+name: QuestionmarkCircle
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Stroke
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/QuestionmarkCircleFill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM12 7.75C11.0335 7.75 10.25 8.5335 10.25 9.5C10.25 9.91421 9.91421 10.25 9.5 10.25C9.08579 10.25 8.75 9.91421 8.75 9.5C8.75 7.70507 10.2051 6.25 12 6.25H12.1361C13.8559 6.25 15.25 7.64413 15.25 9.36387C15.25 10.3098 14.82 11.2045 14.0814 11.7954L13.6398 12.1486C13.0774 12.5985 12.75 13.2797 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14C11.25 12.8241 11.7845 11.7119 12.7028 10.9773L13.1443 10.6241C13.5271 10.3178 13.75 9.85413 13.75 9.36387C13.75 8.47255 13.0274 7.75 12.1361 7.75H12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/QuestionmarkCircleFill.yml

@@ -0,0 +1,17 @@
+name: QuestionmarkCircleFill
+category: Status
+sub_category: Guidance
+keywords:
+  - assistance
+  - support
+  - information
+  - guidance
+  - question mark
+  - hjelp
+  - støtte
+  - informasjon
+  - veiledning
+  - spørsmålstegn
+variant: Fill
+updated_at: 29.01.2025
+created_at: 29.01.2025

@navikt/aksel-icons/icons/SpaceHorizontal.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4.41421 4 4.75 4.33579 4.75 4.75V11.25H6.75C7.16421 11.25 7.5 11.5858 7.5 12C7.5 12.4142 7.16421 12.75 6.75 12.75H4.75V19.25C4.75 19.6642 4.41421 20 4 20C3.58579 20 3.25 19.6642 3.25 19.25V4.75C3.25 4.33579 3.58579 4 4 4ZM9.25 11.25C8.83579 11.25 8.5 11.5858 8.5 12C8.5 12.4142 8.83579 12.75 9.25 12.75H10.75C11.1642 12.75 11.5 12.4142 11.5 12C11.5 11.5858 11.1642 11.25 10.75 11.25H9.25ZM12.5 12C12.5 11.5858 12.8358 11.25 13.25 11.25H14.75C15.1642 11.25 15.5 11.5858 15.5 12C15.5 12.4142 15.1642 12.75 14.75 12.75H13.25C12.8358 12.75 12.5 12.4142 12.5 12ZM17.25 11.25C16.8358 11.25 16.5 11.5858 16.5 12C16.5 12.4142 16.8358 12.75 17.25 12.75H19.25V19.25C19.25 19.6642 19.5858 20 20 20C20.4142 20 20.75 19.6642 20.75 19.25V4.75C20.75 4.33579 20.4142 4 20 4C19.5858 4 19.25 4.33579 19.25 4.75V11.25H17.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SpaceHorizontal.yml

@@ -0,0 +1,12 @@
+name: SpaceHorizontal
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - horisontal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/icons/SpaceVertical.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 3.25C4.33579 3.25 4 3.58579 4 4C4 4.41421 4.33579 4.75 4.75 4.75H11.25V6.75C11.25 7.16421 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.16421 12.75 6.75V4.75H19.25C19.6642 4.75 20 4.41421 20 4C20 3.58579 19.6642 3.25 19.25 3.25H4.75ZM12 11.5C11.5858 11.5 11.25 11.1642 11.25 10.75V9.25C11.25 8.83579 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.83579 12.75 9.25V10.75C12.75 11.1642 12.4142 11.5 12 11.5ZM11.25 14.75C11.25 15.1642 11.5858 15.5 12 15.5C12.4142 15.5 12.75 15.1642 12.75 14.75V13.25C12.75 12.8358 12.4142 12.5 12 12.5C11.5858 12.5 11.25 12.8358 11.25 13.25V14.75ZM4.75 19.25H11.25V17.25C11.25 16.8358 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.8358 12.75 17.25V19.25H19.25C19.6642 19.25 20 19.5858 20 20C20 20.4142 19.6642 20.75 19.25 20.75H4.75C4.33579 20.75 4 20.4142 4 20C4 19.5858 4.33579 19.25 4.75 19.25Z" fill="#23262A"/>
+</svg>

@navikt/aksel-icons/icons/SpaceVertical.yml

@@ -0,0 +1,12 @@
+name: SpaceVertical
+category: Interface
+sub_category: Design
+keywords:
+  - avstand
+  - padding
+  - margin
+  - vertikal
+  - luft
+variant: Stroke
+updated_at: 14.02.2025
+created_at: 14.02.2025

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/aksel-stylelint
 
+## 7.17.1
+
+## 7.17.0
+
+## 7.16.1
+
+## 7.16.0
+
+## 7.15.0
+
+## 7.14.3
+
+## 7.14.2
+
+## 7.14.1
+
+## 7.14.0
+
+## 7.13.0
+
 ## 7.12.2
 
 ## 7.12.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "7.12.2",
+  "version": "7.17.1",
   "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.12.2",
-    "@navikt/ds-tokens": "^7.12.2",
+    "@navikt/ds-css": "^7.17.1",
+    "@navikt/ds-tokens": "^7.17.1",
     "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,81 @@
 # @navikt/aksel
 
+## 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
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.14.2
+
+## 7.14.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.14.1
+
+## 7.14.0
+
+### Patch Changes
+
+- Updated dependencies [[`08e134e`](https://github.com/navikt/aksel/commit/08e134ef3c2238d7d405b44e27edef593339406c), [`821343b`](https://github.com/navikt/aksel/commit/821343b67d702379013ceba5961a5872dca4fd1f)]:
+  - @navikt/ds-css@7.14.0
+
+## 7.13.0
+
+### Patch Changes
+
+- Updated dependencies [[`1ba5d9b`](https://github.com/navikt/aksel/commit/1ba5d9b5a2fb74ee2c1fdb8d498520ad85323a12)]:
+  - @navikt/ds-css@7.13.0
+
 ## 7.12.2
 
 ### Patch Changes

@navikt/aksel/package.json

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

@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,49 @@
 # @navikt/ds-css
 
+## 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
+
+## 7.14.0
+
+### Minor Changes
+
+- DatePicker: Updated `date.css` to support `react-day-picker v9`. ([#3525](https://github.com/navikt/aksel/pull/3525))
+
+### Patch Changes
+
+- Darkside: Added 'arrow' back to Tooltip. ([#3589](https://github.com/navikt/aksel/pull/3589))
+
+## 7.13.0
+
+### Patch Changes
+
+- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
+
 ## 7.12.2
 
 ## 7.12.1

@navikt/core/css/config/tests/bundle.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, test } from "vitest";
  * Darkside config might have some new files added. We can skip these when checking for equality.
  */
 const newFiles = ["theme"];
-const deprecatedFiles = ["linkpanel"];
+const deprecatedFiles: string[] = [];
 
 describe("Check that old and new (darkside) bundle matches", () => {
   test("Darkside includes the same files as old bundle", () => {

@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,4 +1,4 @@
-.navds-alert {
+.aksel-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
   padding: var(--ax-space-16) var(--ax-space-20);
@@ -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 {
+.aksel-alert--small {
   padding: var(--ax-space-12) 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,7 +53,7 @@
   gap: var(--ax-space-12);
 }
 
-.navds-chat__bubble {
+.aksel-chat__bubble {
   padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
@@ -65,27 +65,27 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-chat--small .navds-chat__bubble {
+.aksel-chat--small .aksel-chat__bubble {
   padding: var(--ax-space-12) 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,4 +1,4 @@
-.navds-date {
+.aksel-date {
   padding: var(--ax-space-16) var(--ax-space-12);
 
   .rdp-day_range_middle {
@@ -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 {
+  .aksel-date {
     padding: var(--ax-space-20) var(--ax-space-16);
   }
 
-  .navds-date__modal-body {
+  .aksel-date__modal-body {
     padding: var(--ax-space-24);
   }
 
-  .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,42 +1,42 @@
-.navds-dropdown__menu {
+.aksel-dropdown__menu {
   overflow: hidden;
-  padding: var(--a-spacing-2) 0;
-  color: var(--ac-dropdown-text, var(--a-text-default));
+  padding: var(--ax-space-8);
+  color: var(--ax-text-neutral);
   width: 27ch;
   max-height: 616px;
   overflow-y: auto;
 }
 
-.navds-dropdown__divider {
-  margin: var(--a-spacing-3) 0;
+.aksel-dropdown__divider {
+  margin: var(--ax-space-12) 0;
   border: none;
-  border-bottom: 1px solid var(--a-border-divider);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
 }
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+.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 {
-  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+.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;
   background: transparent;
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
   font: inherit;
   text-decoration: none;
   text-align: left;
@@ -44,47 +44,37 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-1) var(--a-spacing-4);
-}
+  gap: var(--ax-space-8);
+  padding: var(--ax-space-4);
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-neutral);
 
-.navds-dropdown__item:hover {
-  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
-}
-
-.navds-dropdown__item:active {
-  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
-}
-
-.navds-dropdown__item:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-dropdown__item:focus {
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
-}
 
-.navds-dropdown__item:disabled {
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
-  opacity: var(--ax-opacity-disabled);
-  background: transparent;
-  cursor: not-allowed;
+  &:active {
+    background-color: var(--ax-bg-accent-moderate-pressedA);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
+
+  &:disabled {
+    opacity: var(--ax-opacity-disabled);
+    background: transparent;
+    cursor: not-allowed;
+  }
 }
 
 @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;
@@ -182,39 +182,39 @@
     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,36 +1,22 @@
-.navds-confirmation-panel__inner {
+.aksel-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding: var(--a-spacing-4);
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
-  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+  gap: var(--ax-space-12);
+  padding: var(--ax-space-16);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-default);
+  background-color: var(--ax-bg-moderate);
   transition: background-color linear 100ms;
   justify-self: stretch;
   position: relative;
 }
 
-.navds-confirmation-panel__content {
+.aksel-confirmation-panel__content {
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
-  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
-}
-
-.navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
-  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
-}
-
-.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
-  color: var(--a-text-default);
-}
-
 @media (forced-colors: active) {
-  .navds-confirmation-panel__inner::before {
+  .aksel-confirmation-panel__inner::before {
     content: "";
     position: absolute;
     left: 0;
@@ -39,15 +25,15 @@
     border-left: 8px solid;
     border-color: orange;
     forced-color-adjust: none;
-    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-start-start-radius: calc(var(--ax-border-radius-large) - 1px);
+    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,4 +1,4 @@
-.navds-error-summary {
+.aksel-error-summary {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
@@ -6,32 +6,32 @@
   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 {
+.aksel-error-summary--small {
   padding: var(--ax-space-12) 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;
@@ -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,15 +148,15 @@
 }
 
 /* ----------------------------- 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;
@@ -168,11 +168,11 @@ li.navds-file-item {
   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;
@@ -50,6 +50,6 @@
   }
 }
 
-.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);
   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);
   }
 }