nve-designsystem 0.0.5 → 0.0.7

package/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/web-components";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Norges vassdrags- og energidirektorat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,8 @@
+Hei.
+Prosjekt importerer shoelace npm pakke, bruker ikke shoelace cdn.
+Kjør npm run dev for utvikling.
+For å starte storybook kjør npm run storybook. Man trenger ikke å bygge først (kan være at det må fikses senere hvis det trengs).
+Styling på knappene er ikke helt ferdig (se f.eks. rammer når man hover over).
+Etter et forsøk på mappinga av ds tokene til shoelace tokene, foreslår jeg at vi bruker kun våre tokene uten mapping. Det
+blir alt for forvirrende men også ikke fungerer helt bra, siden noen tokene overskriver hverandre og fargene vil ikke passe akkurat som i nve sitt ds. Det er også veldig enkelt å style utvidet komponenter for man må ikke style shadow domen men kjøre styling direkte på klassene til komponentene. Akkurat nå så er styling på knappen i nve-button.ts men kan flyttes til separat style fil.
+Har man lyst til å teste en komponent via index.html må man huske å legge til script tag med komponenten som f.eks. <script type="module" src="/src/nve-button.ts"></script>

package/build/css/nve.css

@@ -0,0 +1,361 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 14:25:26 GMT
+ */
+
+:root {
+  --disabled: 38%;
+  --varsom-blue-050: #c8eaf9;
+  --varsom-blue-000: #eff8fc;
+  --varsom-blue-999: #00131c;
+  --varsom-blue-950: #002738;
+  --varsom-blue-900: #003147;
+  --varsom-blue-850: #00364e;
+  --varsom-blue-800: #00425F;
+  --varsom-blue-700: #005175;
+  --varsom-blue-600: #005c85;
+  --varsom-blue-500: #006b99;
+  --varsom-blue-400: #0E89BE;
+  --varsom-blue-300: #2c96c4;
+  --varsom-blue-200: #43a9d5;
+  --varsom-blue-150: #7ec4e2;
+  --varsom-blue-100: #a6d8ee;
+  --orange-050: #FFECD6;
+  --orange-000: #fff6f1;
+  --orange-999: #8b3200;
+  --orange-950: #973a06;
+  --orange-900: #a2420c;
+  --orange-850: #ae4a13;
+  --orange-800: #b95219;
+  --orange-700: #d16325;
+  --orange-600: #e87332;
+  --orange-500: #ff833e;
+  --orange-400: #FF9A24;
+  --orange-300: #ffb186;
+  --orange-200: #FFC98A;
+  --orange-150: #FFDAAE;
+  --orange-100: #FFE3C2;
+  --varsom-brand-050: #fbc792;
+  --varsom-brand-000: #ffdfba;
+  --varsom-brand-999: #432301;
+  --varsom-brand-950: #542c01;
+  --varsom-brand-900: #653502;
+  --varsom-brand-850: #763d02;
+  --varsom-brand-800: #874602;
+  --varsom-brand-700: #aa5803;
+  --varsom-brand-600: #F44900;
+  --varsom-brand-500: #FF5F1B;
+  --varsom-brand-400: #FF7B43;
+  --varsom-brand-300: #f49d43;
+  --varsom-brand-200: #f7ae63;
+  --varsom-brand-150: #f8b673;
+  --varsom-brand-100: #fabf82;
+  --green-050: #f0fef5;
+  --green-000: #f6fff9;
+  --green-999: #00301C;
+  --green-950: #004126;
+  --green-900: #1a6533;
+  --green-850: #247740;
+  --green-800: #00814b;
+  --green-700: #43ab66;
+  --green-600: #57ce7f;
+  --green-500: #6bf198;
+  --green-400: #8af0a1;
+  --green-300: #97f2a8;
+  --green-200: #8af0a1;
+  --green-150: #CBF9CB;
+  --green-100: #E8FCE8;
+  --blue-050: #d5edff;
+  --blue-000: #e6f4ff;
+  --blue-999: #0B2951;
+  --blue-950: #0F3970;
+  --blue-900: #034272;
+  --blue-850: #044b81;
+  --blue-800: #0668b1;
+  --blue-700: #1E6FDC;
+  --blue-600: #0F81FA;
+  --blue-500: #008FFB;
+  --blue-400: #38a9ff;
+  --blue-300: #65bdff;
+  --blue-200: #91d0ff;
+  --blue-150: #a8daff;
+  --blue-100: #ceeaff;
+  --yellow-050: #fff5d9;
+  --yellow-000: #fff9e9;
+  --yellow-999: #523D00;
+  --yellow-950: #795A00;
+  --yellow-900: #b58a0e;
+  --yellow-850: #be9315;
+  --yellow-800: #c79c1c;
+  --yellow-700: #daad2a;
+  --yellow-600: #ecbf38;
+  --yellow-500: #ffd046;
+  --yellow-400: #ffd867;
+  --yellow-300: #ffe087;
+  --yellow-200: #ffe8a5;
+  --yellow-150: #ffedb8;
+  --yellow-100: #FFF4D1;
+  --red-050: #ffd8de;
+  --red-000: #FFEBEE;
+  --red-999: #540000;
+  --red-950: #6B0000;
+  --red-900: #8f0a0a;
+  --red-850: #a80303;
+  --red-800: #bc0303;
+  --red-700: #cc0000;
+  --red-600: #ea2020;
+  --red-500: #ff3131;
+  --red-400: #ff5757;
+  --red-300: #ff7575;
+  --red-200: #ff9494;
+  --red-150: #ffa8a8;
+  --red-100: #ffc2c2;
+  --grey-050: #f7f7f8;
+  --grey-000: #ffffff;
+  --grey-999: #000000;
+  --grey-950: #0d0d0e;
+  --grey-900: #1b1c1e;
+  --grey-850: #292a2c;
+  --grey-800: #3c3f44;
+  --grey-700: #515459;
+  --grey-600: #60656c;
+  --grey-500: #878c94;
+  --grey-400: #9fa3a9;
+  --grey-300: #b7babf;
+  --grey-200: #c9cbcf;
+  --grey-150: #e4e5e7;
+  --grey-100: #edeef0;
+  --nve-brand-050: #ff4564;
+  --nve-brand-000: #ff5e79;
+  --nve-brand-999: #440510;
+  --nve-brand-950: #510613;
+  --nve-brand-900: #5e0716;
+  --nve-brand-850: #6c0819;
+  --nve-brand-800: #79091c;
+  --nve-brand-700: #880b1f;
+  --nve-brand-600: #a40d26;
+  --nve-brand-500: #c8102e;
+  --nve-brand-400: #d91232;
+  --nve-brand-300: #e61335;
+  --nve-brand-200: #f71439;
+  --nve-brand-150: #ff153b;
+  --nve-brand-100: #ff2b4e;
+  --header: 0px 4px 032px 0px rgba(0,0,0,0.02);
+  --hard: 0px 2px 10px 0px rgba(96,101,108,0.30);
+  --soft: 0px 2px 8px 0px rgba(96,101,108,0.15);
+  --none: 0px 0px 0px 0px rgba(0,0,0,0);
+  --border-width-strong: 2px;
+  --border-width-default: 1px;
+  --border-width-none: 0px;
+  --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;
+  --font-weights-source-sans-pro-2: 600;
+  --font-weights-source-sans-pro-1: 400;
+  --font-weights-source-sans-pro-0: 600;
+  --font-weight-semibold: 600;
+  --font-weight-regular: 400;
+  --font-size-3xlarge: 4rem;
+  --font-size-2xlarge: 3rem;
+  --font-size-xlarge: 2.5rem;
+  --font-size-large: 2rem;
+  --font-size-medium: 1.5rem;
+  --font-size-small: 1.25rem;
+  --font-size-xsmall: 1.125rem;
+  --font-size-2xsmall: 1rem;
+  --font-size-3xsmall: 0.875rem;
+  --font-size-8: 64px;
+  --font-size-7: 48px;
+  --font-size-6: 40px;
+  --font-size-5: 32px;
+  --font-size-4: 24px;
+  --font-size-3: 20px;
+  --font-size-2: 18px;
+  --font-size-1: 16px;
+  --font-size-0: 14px;
+  --spacing-grid-gutter: 3.5rem;
+  --spacing-grid-gap: 5rem;
+  --spacing-grid-margin: 4rem;
+  --spacing-5x-large: 10rem;
+  --spacing-4x-large: 5rem;
+  --spacing-3x-large: 4rem;
+  --spacing-2x-large: 2.5rem;
+  --spacing-x-large: 2rem;
+  --spacing-large: 1.5rem;
+  --spacing-medium: 1rem;
+  --spacing-small: 0.75rem;
+  --spacing-x-small: 0.5rem;
+  --spacing-xx-small: 0.25rem;
+  --paragraph-indent-0: 0px;
+  --text-decoration-underline: underline;
+  --text-decoration-none: none;
+  --text-case-uppercase: uppercase;
+  --text-case-none: none;
+  --text-case-capitalize: capitalize;
+  --paragraph-spacing-5: 40;
+  --paragraph-spacing-4: 32;
+  --paragraph-spacing-3: 24;
+  --paragraph-spacing-2: 16;
+  --paragraph-spacing-1: 12;
+  --paragraph-spacing-0: 0;
+  --letter-spacing-1: 5%;
+  --letter-spacing-0: 0%;
+  --line-heights-6: 110%;
+  --line-heights-5: 150%;
+  --line-heights-4: 140%;
+  --line-heights-3: 130%;
+  --line-heights-2: 125%;
+  --line-heights-1: 120%;
+  --line-heights-0: 115%;
+  --font-families-source-sans-pro: 'Source Sans Pro';
+  --label-x-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-var(--paragraph-spacing-0))/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-x-small: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-0)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-small-light: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-small: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-1)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-medium-light: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-medium: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-2)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-large-light: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --label-large: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-3)/var(--line-heights-6) var(--font-families-source-sans-pro);
+  --detailtext-caps-small: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --detailtext-caps-large: var(--font-weights-source-sans-pro-var(--paragraph-spacing-0)) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --detailtext-caption: var(--font-weights-source-sans-pro-1) var(--font-size-0)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-compact-xsmall-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-0)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-xsmall-compact: var(--font-weights-source-sans-pro-1) var(--font-size-0)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-small-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-small-compact: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-medium-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-medium-compact: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-large-underline-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-compact-large-compact: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --body-xsmall-underline: var(--font-weights-source-sans-pro-1) var(--font-size-0)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-xsmall: var(--font-weights-source-sans-pro-1) var(--font-size-0)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-small-underline: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-small: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-medium-underline: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-medium-default: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-large-underline: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --body-large: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-xsmall-semibold: var(--font-weights-source-sans-pro-2) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-xsmall-regular: var(--font-weights-source-sans-pro-1) var(--font-size-1)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-medium-semibold: var(--font-weights-source-sans-pro-0) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-medium-regular: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-small-semibold: var(--font-weights-source-sans-pro-0) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-small-regular: var(--font-weights-source-sans-pro-1) var(--font-size-2)/var(--line-heights-5) var(--font-families-source-sans-pro);
+  --ingress-large-semibold: var(--font-weights-source-sans-pro-0) var(--font-size-4)/var(--line-heights-4) var(--font-families-source-sans-pro);
+  --ingress-large-regular-default: var(--font-weights-source-sans-pro-1) var(--font-size-4)/var(--line-heights-4) var(--font-families-source-sans-pro);
+  --subheading-x-small: var(--font-weights-source-sans-pro-1) var(--font-size-3)/var(--line-heights-4) var(--font-families-source-sans-pro);
+  --subheading-medium: var(--font-weights-source-sans-pro-1) var(--font-size-5)/var(--line-heights-2) var(--font-families-source-sans-pro);
+  --subheading-2x-large: var(--font-weights-source-sans-pro-1) var(--font-size-8)/var(--line-heights-0) var(--font-families-source-sans-pro);
+  --subheading-small: var(--font-weights-source-sans-pro-1) var(--font-size-4)/var(--line-heights-3) var(--font-families-source-sans-pro);
+  --subheading-large: var(--font-weights-source-sans-pro-1) var(--font-size-6)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --subheading-x-large: var(--font-weights-source-sans-pro-1) var(--font-size-7)/var(--line-heights-0) var(--font-families-source-sans-pro);
+  --header-x-small: var(--font-weights-source-sans-pro-0) var(--font-size-3)/var(--line-heights-4) var(--font-families-source-sans-pro);
+  --header-small: var(--font-weights-source-sans-pro-0) var(--font-size-4)/var(--line-heights-3) var(--font-families-source-sans-pro);
+  --header-medium: var(--font-weights-source-sans-pro-0) var(--font-size-5)/var(--line-heights-2) var(--font-families-source-sans-pro);
+  --header-large-default: var(--font-weights-source-sans-pro-0) var(--font-size-6)/var(--line-heights-1) var(--font-families-source-sans-pro);
+  --header-x-large: var(--font-weights-source-sans-pro-0) var(--font-size-7)/var(--line-heights-0) var(--font-families-source-sans-pro);
+  --header-2x-large: var(--font-weights-source-sans-pro-0) var(--font-size-8)/var(--line-heights-0) var(--font-families-source-sans-pro);
+  --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-950);
+  --feedback-foreground-subtle-warning: var(--grey-950);
+  --feedback-foreground-subtle-error: var(--grey-950);
+  --feedback-foreground-subtle-info: var(--grey-950);
+  --feedback-foreground-default-success: var(--grey-950);
+  --feedback-foreground-default-warning: var(--grey-950);
+  --feedback-foreground-default-error: var(--grey-950);
+  --feedback-foreground-default-info: var(--grey-950);
+  --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-100);
+  --feedback-background-subtle-warning: var(--yellow-100);
+  --feedback-background-subtle-error: var(--red-000);
+  --feedback-background-subtle-info: var(--blue-000);
+  --feedback-background-default-success: var(--green-150);
+  --feedback-background-default-warning: var(--yellow-200);
+  --feedback-background-default-error: var(--red-050);
+  --feedback-background-default-info: var(--blue-100);
+  --interactive-links-visited: var(--grey-600);
+  --interactive-links-focus: var(--blue-700);
+  --interactive-links-hover: var(--grey-950);
+  --interactive-links-default: var(--blue-700);
+  --interactive-ghost-border-focus: var(--blue-500);
+  --interactive-ghost-foreground-disabled: var(--grey-950);
+  --interactive-ghost-foreground-hover: var(--grey-950);
+  --interactive-ghost-foreground-default: var(--grey-950);
+  --interactive-ghost-background-hover: var(--grey-150);
+  --interactive-outlined-border-disabled: var(--grey-500);
+  --interactive-outlined-border-focus: var(--blue-500);
+  --interactive-outlined-border-hover: var(--grey-950);
+  --interactive-outlined-border-default: var(--grey-500);
+  --interactive-outlined-foreground-disabled: var(--grey-950);
+  --interactive-outlined-foreground-hover: var(--grey-950);
+  --interactive-outlined-foreground-default: var(--grey-950);
+  --interactive-secondary-border-focus: var(--blue-500);
+  --interactive-secondary-foreground-disabled: var(--grey-950);
+  --interactive-secondary-foreground-hover: var(--grey-950);
+  --interactive-secondary-foreground-default: var(--grey-950);
+  --interactive-secondary-background-disabled: var(--grey-150);
+  --interactive-secondary-background-hover: var(--grey-200);
+  --interactive-secondary-background-default: var(--grey-150);
+  --interactive-primary-foreground-border-focus: var(--blue-500);
+  --interactive-primary-foreground-disabled: var(--grey-000);
+  --interactive-primary-foreground-hover: var(--grey-000);
+  --interactive-primary-foreground-default: var(--grey-000);
+  --interactive-primary-background-disabled: var(--grey-950);
+  --interactive-primary-background-hover: var(--grey-800);
+  --interactive-primary-background-default: var(--grey-950);
+  --neutrals-border-disabled: var(--grey-500);
+  --neutrals-border-subtle: var(--grey-150);
+  --neutrals-border-mute: var(--grey-000);
+  --neutrals-border-default: var(--grey-500);
+  --neutrals-foreground-subtle: var(--grey-600);
+  --neutrals-foreground-primary: var(--grey-950);
+  --neutrals-background-canvas: var(--grey-050);
+  --neutrals-background-secondary: var(--grey-150);
+  --neutrals-background-primary: var(--grey-000);
+  --neutrals-background-primary-contrast: var(--grey-050);
+  --brand-deep: var(--nve-brand-700);
+  --brand-light: var(--nve-brand-300);
+  --brand-primary: var(--nve-brand-500);
+}

package/build/css/nve_dark.css

@@ -0,0 +1,104 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 14:25:31 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);
+}