.changeset/smart-cases-bake.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tokens": patch
+---
+
+Darkside: Update global 'meta-purple' color.

.eslintrc.js

@@ -92,6 +92,13 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ["**/app/**/query-types.ts"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      rules: {
+        "@typescript-eslint/array-type": "off",
+      },
+    },
     {
       files: ["**/*.test.*", "**/__tests__/*"],
       plugins: ["@vitest"],
@@ -179,6 +186,8 @@ module.exports = {
     "esm",
     "cjs",
     "dist",
+    "@navikt/aksel/**/*.input.*",
+    "@navikt/aksel/**/*.output.*",
     "**/codemod/**/*.js",
     "!.storybook",
     "**/playwright-report/**",

.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 }}

.github/workflows/referansesider-spa-deploy.yml

@@ -35,3 +35,4 @@ jobs:
           environment: dev
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          cache_invalidation: true

.github/workflows/release.yml

@@ -32,7 +32,7 @@ jobs:
           cache: yarn
           cache-dependency-path: "**/yarn.lock"
 
-      - uses: denoland/setup-deno@v1
+      - uses: denoland/setup-deno@v2
         with:
           deno-version: v1.x
 

.prettierignore

@@ -1,6 +1,8 @@
 **/nais*.yaml
 **/nais*.yml
 **/codemod/**/tests/**/*.js
+**/@navikt/aksel/**/*.input.*
+**/@navikt/aksel/**/*.output.*
 node_modules
 .next
 dist

.storybook/docs/PilotMigration.mdx

@@ -0,0 +1,111 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/3.Migration" />
+
+# Migration
+
+## 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 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
+issue if you find that you have to override our CSS to achieve
+something! It's these cases we want to know about so that we can fix
+them for everyone.
+
+### Removed component-tokens
+
+All component-spesific tokens are no longer supported. That means all tokens like these from `Button` are removed:
+
+```css
+--ac-button-primary-bg
+--ac-button-primary-text
+--ac-button-primary-hover-bg
+--ac-button-primary-active-bg
+```
+
+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.
+
+### Accordion
+
+#### Props
+
+- `variant` is deprecated and will be removed in the future. We have not implemented it in the new system.
+- `headingSize` is deprecated and will be removed in the future. Accordion-size medium now equals `small` heading, and size small equals `xsmall` heading.
+
+#### Structural changes
+
+`<Accordion.Content/>` now has an extra nested `div` to allow for better animations. Custom CSS might break.
+
+### Datepicker
+
+Weeknumber-button uses our own button-component, and no longer a
+custom button.
+
+### GuidePanel
+
+Component got a complete overhaul. Custom overrides might break.
+
+### Popover, HelpText
+
+`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
+
+Button now uses our own button-component and `variant="tertiary-neutral".
+
+### Primitives
+
+Given that these are closely tied to our tokens, you will most
+likely have to update parts of them to test the new system.
+
+All primitives using our current `spacing`-tokens now has
+the new <code>space</code>-tokens. You can use the old tokens while
+testing, but the full release will remove them from the prop-list
+
+<Markdown>
+{`
+\`\`\`diff
+- <HStack gap="4">
++ <HStack gap="space-16">
+\`\`\`
+
+`}
+
+</Markdown>
+
+#### Page
+
+`background`-prop is removed. Now just uses `bg-default`-token.
+
+#### Box
+
+Since `<Box />` is directly tied to our tokens, we
+now offer `<Box.New />` as a temporary altenative. This
+component is based on our new tokens and can use the backgrounds,
+borders, border-radius and shadows from the new system. When the full release comes, we will update `<Box />` to use the new system, and provide tooling to handle this migration.
+
+**All instances of `<Box />` will break when using the new system if:**
+
+- `background`-prop is used
+- `shadow`-prop is used
+- `borderColor`-prop is used

.storybook/docs/PilotSetup.mdx

@@ -0,0 +1,151 @@
+import { Markdown, Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/2.Setup" />
+
+# Setup
+
+## Clean project
+
+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/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/Theme";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+### Only Tokens/CSS
+
+If you are not using any of our React-components, you can still switch between themes by setting `class="light"` or `class="dark"` on your root-element.
+
+## Theme switching
+
+The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `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.
+
+Since theme-switching often is framework-spesific, we have not included a theme-toggle component or advanced logic for cookies/localstorage.
+You will have to implement this yourself using a custom setup, or use a library like [next-themes](https://github.com/pacocoursey/next-themes).
+
+We will continue to work on the whole `Theme` ecosystem, and might include more features in the future to handle this built in.
+
+### Theme-switch component
+
+This is context-based for what fits your application, but there are some general patterns you can follow.
+
+- **Light or Dark-mode**: Here you can use a simple Switch-component, or a Tertiary-button to toggle between them.
+
+- **Light, Dark or System-mode**: Here you can use a ToggleGroup or Select-component.
+
+```tsx
+isLightMode ? (
+  <Button
+    variant="tertiary-neutral"
+    icon={<SunIcon title="Switch to dark theme" />}
+  />
+) : (
+  <Button
+    variant="tertiary-neutral"
+    icon={<MoonIcon title="Switch to light theme" />}
+  />
+);
+```
+
+## I just want to test the new tokens
+
+Since you can use the new tokens alongside the old tokens, you can start by importing the new tokens as you would the old system.
+
+```css
+@import "@navikt/ds-tokens/darkside-css";
+```
+
+For SCSS, Less and JS they are also available under the paths
+
+```
+@navikt/ds-tokens/darkside-scss
+@navikt/ds-tokens/darkside-less
+@navikt/ds-tokens/darkside-js
+```
+
+**Note: To support theming, scss, less and js tokens are all now based on `css-variables`. This means you will have to import the css-version from `darkside-css` alongside them for everything to work.**
+
+## 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 `@navikt/ds-css/darkside`
+
+```tsx
+import "@navikt/ds-css/darkside";
+import { Theme } from "@navikt/ds-react/Theme";
+
+export const App = () => (
+  <Theme theme="light">
+    <YourApp />
+  </Theme>
+);
+```
+
+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
+
+Since our implementation is based on CSS, you can easily make custom adjustments where necessary.
+
+```css
+.my-component {
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-neutral);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+}
+
+// Makes hover-state more visible only for darkmode
+.dark .my-component {
+  &:hover {
+    border-color: var(--ax-border-accent-default);
+  }
+}
+```
+
+## Tailwind CSS
+
+```
+// Tailwind v3
+module.exports = {
+  presets: [require("@navikt/ds-tailwind/darkside-tw3")],
+}
+```

.storybook/docs/PilotsChangelog.mdx

@@ -0,0 +1,28 @@
+import { Meta, Title } from "@storybook/blocks";
+
+<Meta title="Docs/Become a Pilot team/5.Changelog" />
+
+# Darkside changelog
+
+## 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>
+```