nve-designsystem 0.0.8 → 0.0.9

package/.eslintignore

@@ -0,0 +1,8 @@
+/dist
+/node_modules
+.eslintrc.js
+/vite.config.ts
+/tokens
+/www
+/build
+/loader

package/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:lit/recommended",
+        "plugin:storybook/recommended"
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

package/.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml

@@ -0,0 +1,47 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+
+jobs:
+  # Run when a pull request is created or updated
+  build_and_deploy_pull_request:
+    if: github.event_name == 'pull_request' && github.event.action != 'closed'
+    runs-on: ubuntu-latest
+    name: Build and Deploy Pull Request
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN  }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: 'upload'
+          app_location: '/'
+          output_location: 'storybook-static'
+          app_build_command: 'npm run build-storybook'
+          ###### End of Repository/Build Configurations ######
+          close_pull_request_job:
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+          action: 'close'

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "printWidth": 120
+}

package/.storybook/main.ts

@@ -1,5 +1,11 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
+const globalCSSPath = process.env.NODE_ENV === 'production' ? '/assets/global.css' : '../src/styles/global.css';
+
+const varsomCSSPath = process.env.NODE_ENV === 'production' ? '/assets/varsom.css' : '../../../build/css/varsom.css';
+
+// we have to add another styling files after they will be in use
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
@@ -9,8 +15,10 @@ const config: StorybookConfig = {
   },
   previewHead: (head) => `
   ${head}
-  <link rel="stylesheet" href="../src/styles/global.css" />
-  <link rel="stylesheet" href="../../../build/css/varsom.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
+  <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/source-sans-pro" />
+  <link rel="stylesheet" href="${varsomCSSPath}" />
+  <link rel="stylesheet" href="${globalCSSPath}" />
 `,
   docs: {
     autodocs: 'tag',

package/.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "i18n-ally.localesPaths": ["src/locale"],
+  "editor.rulers": [120],
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.organizeImports": false
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSaveMode": "file"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSaveMode": "file"
+  },
+  "[ts]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSaveMode": "file"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSaveMode": "file"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSaveMode": "file"
+  }
+}

package/README.md

@@ -5,13 +5,17 @@ Dette repository inneholder css generert fra Figma-tokens og komponentbibliotek
 
 ## Skal du bruke NVE designsystem? Denne seksjonen er for deg.
 
+### Api-dokumentasjon
+
+[Her er dokumentasjon på hver komponent](./doc/components.md)
+
 ### **Oppsett i Vue**
 
 1. Install pakke med `npm i nve-designsystem`.
 
-2. I vite.config file (lagre en ny fila hvis den ikke eksisterer i root mappe) legg inn isCustomElement som skal si til Vue at det er en customElement, og droppe component resolution [(les mer her)](https://vuejs.org/guide/extras/web-components.html)
+2. I vite.config (lagre en ny fil hvis den ikke eksisterer i rot-mappe), legg inn isCustomElement som forteller Vue at det er en customElement, og dropp component resolution [(les mer her)](https://vuejs.org/guide/extras/web-components.html).
 
-```
+```js
 export default defineConfig({
   plugins: [
     vue({
@@ -23,31 +27,40 @@ export default defineConfig({
     }),
 ```
 
-3. Import styles fra global.css i enten main.ts eller index.html.
+3. Importer stiler fra global.css i enten main.ts eller index.html:
 
 ```
 import 'nve-designsystem/src/styles/global.css';
 ```
 
-4. I tillegg trenger du å importere en .css fil med nve variabler. Filene finnes i `nve-designsystem/build/css/` mappe. Man kan bestemme selv hvilken tema man vil bruke og hvordan implementere eventuelt switch mellom lys og mørk tema. Eksempel på varsom tema import i main.ts fila:
+4. I tillegg trenger du å importere en .css-fil for farge-tema i main.ts. Filene finnes i `nve-designsystem/build/css/` mappe. For NVE-tema, bruk:
 
+```ts
+import 'nve-designsystem/build/css/nve.css';
 ```
+
+For Varsom-tema, bruk:
+
+```ts
 import 'nve-designsystem/build/css/varsom.css';
 ```
 
+Du har også mulighet til å velge enten lyst eller mørkt tema. Lyst er standard.
+
 ### **Eksempel på bruk av komponent**
 
-```
+```html
 <template>
-   <nve-button variant="primary" size="small" @click="send">Button</nve-button>
-<template>
-
-<script setup lang="ts">
-import { NveButton } from 'nve-designsystem/src/components/nve-button/nve-button';
-</script>
+  <nve-button variant="primary" size="small" @click="send">Button</nve-button>
+  <template>
+    <script setup lang="ts">
+      import { NveButton } from 'nve-designsystem/src/components/nve-button/nve-button';
+    </script></template
+  ></template
+>
 ```
 
-Husk å alltid bruke både opening og closing tag individuelt, (`<nve-button />` skal ikke fungere).
+Husk å alltid bruke både opening og closing tag individuelt, (`<nve-button />` fungerer ikke).
 
 ### **Storybook**
 
@@ -55,21 +68,30 @@ Komponentene kan ses og testes i Storybook med ulike parametere og varianter: ht
 
 ## Skal du utvikle NVE designsystem? Denne seksjonen er for deg.
 
-### **Bygge css**
-
-For å bygge css filer som inneholder verdier basert på tokens fra Figma, kjør følgende kommando: "npm run tokenbuild." <br>
-
-### **npm**
-
-For å publisere på npm, må man oppdatere versjonsnr. i package.json og package-lock.json. Deretter kjør kommando `npm publish --access public`. Dette krever at man er innlogget på npm. For at CSS-variabler skal være tilgjengelig i npm-pakken, må css-filer kopieres. Dette gjøres ved å kjøre kommando `npm run copy-files`.
+De fleste komponentene bygger på [Shoelace](https://shoelace.style/), men er tilpasset NVE Designsystem. Etterhvert vil de fleste Shoelace-komponenter få sin NVE-variant, men vi kommer også til å lage komponenter som ikke baseres på Shoelace. Vi anbefaler at du laster ned [kildekoden til Shoelace](https://github.com/shoelace-style/shoelace) og setter deg inn i [Lit](https://lit.dev/), som vi bruker som rammeverk.
 
 ### **Kjøremiljø**
 
-Prosjekt importerer shoelace npm pakke. Kjør `npm run dev` for utvikling.
-For å teste en komponent i main.ts må man huske å legge til script tag med komponenten i index.html fila som f.eks. <script type="module" src="/src/nve-button.ts"></script>
+Kjør `npm run dev` for å vise test-applikasjonen.
+Lag en testside for komponenten din, `nve-komponentnavn-demo.ts`, og inkluder denne i `main.ts`. Sida bør vise de forskjellige variantene av komponenten.
 
 ### Storybook
 
 For å kjøre Storybook lokalt, kjør `npm run storybook`
 
 For å publisere Storybook på Chromatic, kjør `npm run build; npm run build-storybook`. Deretter må det kjøres en kommando med project token fra Chromatic: `npx chromatic --project-token=\<project-token\>`
+
+### Dokumentasjon
+
+- Vi dokumenterer på norsk
+- Alle komponenter dokumenteres med JsDoc-tags i koden. Alt som er tilgjengelig for de som bruker komponentene skal dokumenteres, dvs. alle public klasser, interfaces, properties/attributter, metoder, events, slots, css-parts og css-properties. [Her er noen tips.](https://github.com/runem/web-component-analyzer#-how-to-document-your-components-using-jsdoc)
+  Vi bruker [Web Component Analyzer](https://github.com/runem/web-component-analyze) til å generere API-dokumentasjon.
+- Generer .MD-filer med `npm run doc` og sjekk inn de genererte filene sammen med koden. Om du har laget nye komponenter, legg dem til i [denne lista](./doc/components.md).
+
+### **Bygge css**
+
+For å bygge css filer som inneholder verdier basert på tokens fra Figma, kjør følgende kommando: "npm run tokenbuild." <br>
+
+### **npm**
+
+For å publisere på npm, må man oppdatere versjonsnr. i package.json og package-lock.json. Deretter kjør kommando `npm publish --access public`. Dette krever at man er innlogget på npm. For at CSS-variabler skal være tilgjengelig i npm-pakken, må css-filer kopieres. Dette gjøres ved å kjøre kommando `npm run copy-files`.

package/build/css/nve.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 11:59:15 GMT
+ * Generated on Thu, 14 Dec 2023 09:06:39 GMT
  */
 
 :root {
@@ -150,12 +150,14 @@
   --border-radius-large: 6px;
   --border-radius-small: 4px;
   --border-radius-none: 0px;
-  --sizing-x-large: 4rem;
-  --sizing-large: 3.5rem;
-  --sizing-medium: 2.5rem;
-  --sizing-small: 1.5rem;
-  --sizing-x-small: 1rem;
-  --sizing-xx-small: 0.5rem;
+  --sizing-4x-small: 0.5rem; /* 8px */
+  --sizing-3x-small: 1rem; /* 16px */
+  --sizing-x-large: 4rem; /* 64px */
+  --sizing-large: 3.5rem; /* 56px */
+  --sizing-medium: 3rem; /* 48px */
+  --sizing-small: 2.5rem; /* 40px */
+  --sizing-x-small: 2rem; /* 32px */
+  --sizing-2x-small: 1.5rem; /* 24px */
   --font-weights-source-sans-pro-2: 600;
   --font-weights-source-sans-pro-1: 400;
   --font-weights-source-sans-pro-zero: 600;

package/build/css/nve_dark.css

@@ -1,104 +1,104 @@
-/**
- * Do not edit directly
- * Generated on Mon, 27 Nov 2023 11:59:17 GMT
- */
-
-:root.darkmode {
-  --dangerlevel-foreground-subtle-level5: var(--grey-950);
-  --dangerlevel-foreground-subtle-level4: var(--grey-950);
-  --dangerlevel-foreground-subtle-level3: var(--grey-950);
-  --dangerlevel-foreground-subtle-level2: var(--grey-950);
-  --dangerlevel-foreground-subtle-level1: var(--grey-950);
-  --dangerlevel-foreground-mute-level5: var(--grey-950);
-  --dangerlevel-foreground-mute-level4: var(--grey-950);
-  --dangerlevel-foreground-mute-level3: var(--grey-950);
-  --dangerlevel-foreground-mute-level2: var(--grey-950);
-  --dangerlevel-foreground-mute-level1: var(--grey-950);
-  --dangerlevel-foreground-default-level5: var(--grey-000);
-  --dangerlevel-foreground-default-level4: var(--grey-950);
-  --dangerlevel-foreground-default-level3: var(--grey-950);
-  --dangerlevel-foreground-default-level2: var(--grey-950);
-  --dangerlevel-foreground-default-level1: var(--grey-950);
-  --dangerlevel-background-default-level5: var(--grey-950);
-  --dangerlevel-background-default-level4: var(--red-500);
-  --dangerlevel-background-default-level3: var(--orange-400);
-  --dangerlevel-background-default-level2: var(--yellow-500);
-  --dangerlevel-background-default-level1: var(--green-500);
-  --dangerlevel-background-subtle-level5: var(--grey-150);
-  --dangerlevel-background-subtle-level4: var(--red-000);
-  --dangerlevel-background-subtle-level3: var(--orange-050);
-  --dangerlevel-background-subtle-level2: var(--yellow-100);
-  --dangerlevel-background-subtle-level1: var(--green-100);
-  --dangerlevel-background-mute-level5: var(--grey-200);
-  --dangerlevel-background-mute-level4: var(--red-050);
-  --dangerlevel-background-mute-level3: var(--orange-150);
-  --dangerlevel-background-mute-level2: var(--yellow-200);
-  --dangerlevel-background-mute-level1: var(--green-150);
-  --feedback-foreground-emphasized-success: var(--grey-000);
-  --feedback-foreground-emphasized-warning: var(--grey-950);
-  --feedback-foreground-emphasized-error: var(--grey-000);
-  --feedback-foreground-emphasized-info: var(--grey-000);
-  --feedback-foreground-subtle-success: var(--grey-000);
-  --feedback-foreground-subtle-warning: var(--grey-000);
-  --feedback-foreground-subtle-error: var(--grey-000);
-  --feedback-foreground-subtle-info: var(--grey-000);
-  --feedback-foreground-default-success: var(--grey-000);
-  --feedback-foreground-default-warning: var(--grey-000);
-  --feedback-foreground-default-error: var(--grey-000);
-  --feedback-foreground-default-info: var(--grey-000);
-  --feedback-background-emphasized-success: var(--green-800);
-  --feedback-background-emphasized-warning: var(--yellow-500);
-  --feedback-background-emphasized-error: var(--red-700);
-  --feedback-background-emphasized-info: var(--blue-700);
-  --feedback-background-subtle-success: var(--green-999);
-  --feedback-background-subtle-warning: var(--yellow-999);
-  --feedback-background-subtle-error: var(--red-999);
-  --feedback-background-subtle-info: var(--blue-999);
-  --feedback-background-default-success: var(--green-950);
-  --feedback-background-default-warning: var(--yellow-950);
-  --feedback-background-default-error: var(--red-950);
-  --feedback-background-default-info: var(--blue-950);
-  --interactive-links-visited: var(--grey-200);
-  --interactive-links-focus: var(--blue-500);
-  --interactive-links-hover: var(--grey-000);
-  --interactive-links-default: var(--blue-400);
-  --interactive-ghost-border-focus: var(--blue-500);
-  --interactive-ghost-foreground-disabled: var(--grey-000);
-  --interactive-ghost-foreground-hover: var(--grey-000);
-  --interactive-ghost-foreground-default: var(--grey-000);
-  --interactive-ghost-background-hover: var(--grey-700);
-  --interactive-outlined-border-disabled: var(--grey-600);
-  --interactive-outlined-border-focus: var(--blue-500);
-  --interactive-outlined-border-hover: var(--grey-000);
-  --interactive-outlined-border-default: var(--grey-600);
-  --interactive-outlined-foreground-disabled: var(--grey-000);
-  --interactive-outlined-foreground-hover: var(--grey-000);
-  --interactive-outlined-foreground-default: var(--grey-000);
-  --interactive-secondary-border-focus: var(--blue-500);
-  --interactive-secondary-foreground-disabled: var(--grey-000);
-  --interactive-secondary-foreground-hover: var(--grey-000);
-  --interactive-secondary-foreground-default: var(--grey-000);
-  --interactive-secondary-background-disabled: var(--grey-700);
-  --interactive-secondary-background-hover: var(--grey-600);
-  --interactive-secondary-background-default: var(--grey-700);
-  --interactive-primary-foreground-border-focus: var(--blue-500);
-  --interactive-primary-foreground-disabled: var(--grey-950);
-  --interactive-primary-foreground-hover: var(--grey-950);
-  --interactive-primary-foreground-default: var(--grey-950);
-  --interactive-primary-background-disabled: var(--grey-000);
-  --interactive-primary-background-hover: var(--grey-150);
-  --interactive-primary-background-default: var(--grey-000);
-  --neutrals-border-disabled: var(--grey-500);
-  --neutrals-border-subtle: var(--grey-800);
-  --neutrals-border-mute: var(--grey-950);
-  --neutrals-border-default: var(--grey-500);
-  --neutrals-foreground-subtle: var(--grey-200);
-  --neutrals-foreground-primary: var(--grey-000);
-  --neutrals-background-canvas: var(--grey-850);
-  --neutrals-background-secondary: var(--grey-700);
-  --neutrals-background-primary: var(--grey-950);
-  --neutrals-background-primary-contrast: var(--grey-850);
-  --brand-deep: var(--nve-brand-700);
-  --brand-light: var(--nve-brand-500);
-  --brand-primary: var(--nve-brand-300);
-}
+/**
+ * Do not edit directly
+ * Generated on Thu, 07 Dec 2023 09:14:05 GMT
+ */
+
+:root.darkmode {
+  --dangerlevel-foreground-subtle-level5: var(--grey-950);
+  --dangerlevel-foreground-subtle-level4: var(--grey-950);
+  --dangerlevel-foreground-subtle-level3: var(--grey-950);
+  --dangerlevel-foreground-subtle-level2: var(--grey-950);
+  --dangerlevel-foreground-subtle-level1: var(--grey-950);
+  --dangerlevel-foreground-mute-level5: var(--grey-950);
+  --dangerlevel-foreground-mute-level4: var(--grey-950);
+  --dangerlevel-foreground-mute-level3: var(--grey-950);
+  --dangerlevel-foreground-mute-level2: var(--grey-950);
+  --dangerlevel-foreground-mute-level1: var(--grey-950);
+  --dangerlevel-foreground-default-level5: var(--grey-000);
+  --dangerlevel-foreground-default-level4: var(--grey-950);
+  --dangerlevel-foreground-default-level3: var(--grey-950);
+  --dangerlevel-foreground-default-level2: var(--grey-950);
+  --dangerlevel-foreground-default-level1: var(--grey-950);
+  --dangerlevel-background-default-level5: var(--grey-950);
+  --dangerlevel-background-default-level4: var(--red-500);
+  --dangerlevel-background-default-level3: var(--orange-400);
+  --dangerlevel-background-default-level2: var(--yellow-500);
+  --dangerlevel-background-default-level1: var(--green-500);
+  --dangerlevel-background-subtle-level5: var(--grey-150);
+  --dangerlevel-background-subtle-level4: var(--red-000);
+  --dangerlevel-background-subtle-level3: var(--orange-050);
+  --dangerlevel-background-subtle-level2: var(--yellow-100);
+  --dangerlevel-background-subtle-level1: var(--green-100);
+  --dangerlevel-background-mute-level5: var(--grey-200);
+  --dangerlevel-background-mute-level4: var(--red-050);
+  --dangerlevel-background-mute-level3: var(--orange-150);
+  --dangerlevel-background-mute-level2: var(--yellow-200);
+  --dangerlevel-background-mute-level1: var(--green-150);
+  --feedback-foreground-emphasized-success: var(--grey-000);
+  --feedback-foreground-emphasized-warning: var(--grey-950);
+  --feedback-foreground-emphasized-error: var(--grey-000);
+  --feedback-foreground-emphasized-info: var(--grey-000);
+  --feedback-foreground-subtle-success: var(--grey-000);
+  --feedback-foreground-subtle-warning: var(--grey-000);
+  --feedback-foreground-subtle-error: var(--grey-000);
+  --feedback-foreground-subtle-info: var(--grey-000);
+  --feedback-foreground-default-success: var(--grey-000);
+  --feedback-foreground-default-warning: var(--grey-000);
+  --feedback-foreground-default-error: var(--grey-000);
+  --feedback-foreground-default-info: var(--grey-000);
+  --feedback-background-emphasized-success: var(--green-800);
+  --feedback-background-emphasized-warning: var(--yellow-500);
+  --feedback-background-emphasized-error: var(--red-700);
+  --feedback-background-emphasized-info: var(--blue-700);
+  --feedback-background-subtle-success: var(--green-999);
+  --feedback-background-subtle-warning: var(--yellow-999);
+  --feedback-background-subtle-error: var(--red-999);
+  --feedback-background-subtle-info: var(--blue-999);
+  --feedback-background-default-success: var(--green-950);
+  --feedback-background-default-warning: var(--yellow-950);
+  --feedback-background-default-error: var(--red-950);
+  --feedback-background-default-info: var(--blue-950);
+  --interactive-links-visited: var(--grey-200);
+  --interactive-links-focus: var(--blue-500);
+  --interactive-links-hover: var(--grey-000);
+  --interactive-links-default: var(--blue-400);
+  --interactive-ghost-border-focus: var(--blue-500);
+  --interactive-ghost-foreground-disabled: var(--grey-000);
+  --interactive-ghost-foreground-hover: var(--grey-000);
+  --interactive-ghost-foreground-default: var(--grey-000);
+  --interactive-ghost-background-hover: var(--grey-700);
+  --interactive-outlined-border-disabled: var(--grey-600);
+  --interactive-outlined-border-focus: var(--blue-500);
+  --interactive-outlined-border-hover: var(--grey-000);
+  --interactive-outlined-border-default: var(--grey-600);
+  --interactive-outlined-foreground-disabled: var(--grey-000);
+  --interactive-outlined-foreground-hover: var(--grey-000);
+  --interactive-outlined-foreground-default: var(--grey-000);
+  --interactive-secondary-border-focus: var(--blue-500);
+  --interactive-secondary-foreground-disabled: var(--grey-000);
+  --interactive-secondary-foreground-hover: var(--grey-000);
+  --interactive-secondary-foreground-default: var(--grey-000);
+  --interactive-secondary-background-disabled: var(--grey-700);
+  --interactive-secondary-background-hover: var(--grey-600);
+  --interactive-secondary-background-default: var(--grey-700);
+  --interactive-primary-foreground-border-focus: var(--blue-500);
+  --interactive-primary-foreground-disabled: var(--grey-950);
+  --interactive-primary-foreground-hover: var(--grey-950);
+  --interactive-primary-foreground-default: var(--grey-950);
+  --interactive-primary-background-disabled: var(--grey-000);
+  --interactive-primary-background-hover: var(--grey-150);
+  --interactive-primary-background-default: var(--grey-000);
+  --neutrals-border-disabled: var(--grey-500);
+  --neutrals-border-subtle: var(--grey-800);
+  --neutrals-border-mute: var(--grey-950);
+  --neutrals-border-default: var(--grey-500);
+  --neutrals-foreground-subtle: var(--grey-200);
+  --neutrals-foreground-primary: var(--grey-000);
+  --neutrals-background-canvas: var(--grey-850);
+  --neutrals-background-secondary: var(--grey-700);
+  --neutrals-background-primary: var(--grey-950);
+  --neutrals-background-primary-contrast: var(--grey-850);
+  --brand-deep: var(--nve-brand-700);
+  --brand-light: var(--nve-brand-500);
+  --brand-primary: var(--nve-brand-300);
+}

package/build/css/varsom.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 11:59:20 GMT
+ * Generated on Thu, 14 Dec 2023 09:06:47 GMT
  */
 
 :root {
@@ -150,12 +150,14 @@
   --border-radius-large: 6px;
   --border-radius-small: 4px;
   --border-radius-none: 0px;
-  --sizing-x-large: 4rem;
-  --sizing-large: 3.5rem;
-  --sizing-medium: 2.5rem;
-  --sizing-small: 1.5rem;
-  --sizing-x-small: 1rem;
-  --sizing-xx-small: 0.5rem;
+  --sizing-4x-small: 0.5rem; /* 8px */
+  --sizing-3x-small: 1rem; /* 16px */
+  --sizing-x-large: 4rem; /* 64px */
+  --sizing-large: 3.5rem; /* 56px */
+  --sizing-medium: 3rem; /* 48px */
+  --sizing-small: 2.5rem; /* 40px */
+  --sizing-x-small: 2rem; /* 32px */
+  --sizing-2x-small: 1.5rem; /* 24px */
   --font-weights-source-sans-pro-2: 600;
   --font-weights-source-sans-pro-1: 400;
   --font-weights-source-sans-pro-zero: 600;