@helsenorge/designsystem-react 15.7.2 → 16.1.0

package/lib/scss/typography.module.scss

@@ -81,6 +81,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.table-cell;
 }
 
+.table-header {
+  @include fonts.table-header;
+}
+
+.table-header-stack {
+  @include fonts.table-header-stack;
+}
+
 .strong {
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;

package/lib/scss/typography.module.scss.d.ts

@@ -21,6 +21,8 @@ export type Styles = {
   sublabel: string;
   'sublabel-subdued': string;
   'table-cell': string;
+  'table-header': string;
+  'table-header-stack': string;
   'text-list': string;
   'title-feature': string;
   title1: string;

package/lib/scss/typography.stories.tsx

@@ -83,6 +83,14 @@ export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
 
+export const TableHeader: Story = {
+  render: args => <div className={designsystemtypography['table-header']}>{args.tekst}</div>,
+};
+
+export const TableHeaderStack: Story = {
+  render: args => <div className={designsystemtypography['table-header-stack']}>{args.tekst}</div>,
+};
+
 export const Strong: Story = {
   render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
 };

package/lib/utils/formSpacing.js

@@ -1,12 +1,12 @@
 import { isComponent } from "./component.js";
 import { t as Checkbox } from "../Checkbox.js";
-import { t as RadioButton } from "../RadioButton.js";
+import { t as Radio } from "../Radio.js";
 import { t as Toggle_default } from "../Toggle.js";
 import React from "react";
 //#region src/utils/formSpacing.ts
-var isCompactComponent = (child) => isComponent(child, Checkbox) || isComponent(child, RadioButton) || isComponent(child, Toggle_default);
+var isCompactComponent = (child) => isComponent(child, Checkbox) || isComponent(child, Radio) || isComponent(child, Toggle_default);
 var hasSublabel = (child) => {
-	if (isComponent(child, Checkbox) || isComponent(child, RadioButton)) return React.isValidElement(child.props.label) && !!child.props.label.props.sublabel;
+	if (isComponent(child, Checkbox) || isComponent(child, Radio)) return React.isValidElement(child.props.label) && !!child.props.label.props.sublabel;
 	if (isComponent(child, Toggle_default)) return !!child.props.subLabel;
 	return false;
 };

package/lib/utils/formSpacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"formSpacing.js","names":[],"sources":["../../src/utils/formSpacing.ts"],"sourcesContent":["import React from 'react';\n\nimport type { CheckboxProps } from '../components/Checkbox/Checkbox';\nimport type { LabelProps } from '../components/Label';\nimport type { RadioButtonProps } from '../components/RadioButton/RadioButton';\nimport type { ToggleProps } from '../components/Toggle';\n\nimport { isComponent } from './component';\nimport Checkbox from '../components/Checkbox/Checkbox';\nimport RadioButton from '../components/RadioButton/RadioButton';\nimport Toggle from '../components/Toggle';\n\nexport const isCompactComponent = (child: React.ReactNode): boolean =>\n  isComponent<CheckboxProps>(child, Checkbox) ||\n  isComponent<RadioButtonProps>(child, RadioButton) ||\n  isComponent<ToggleProps>(child, Toggle);\n\nexport const hasSublabel = (child: React.ReactNode): boolean => {\n  if (isComponent<CheckboxProps>(child, Checkbox) || isComponent<RadioButtonProps>(child, RadioButton)) {\n    return React.isValidElement<LabelProps>(child.props.label) && !!child.props.label.props.sublabel;\n  }\n  if (isComponent<ToggleProps>(child, Toggle)) {\n    return !!child.props.subLabel;\n  }\n  return false;\n};\n"],"mappings":";;;;;;AAYA,IAAa,sBAAsB,UACjC,YAA2B,OAAO,QAAQ,KAC1C,YAA8B,OAAO,WAAW,KAChD,YAAyB,OAAO,cAAM;AAExC,IAAa,eAAe,UAAoC;CAC9D,IAAI,YAA2B,OAAO,QAAQ,KAAK,YAA8B,OAAO,WAAW,GACjG,OAAO,MAAM,eAA2B,MAAM,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,MAAM,MAAM,MAAM;CAE1F,IAAI,YAAyB,OAAO,cAAM,GACxC,OAAO,CAAC,CAAC,MAAM,MAAM;CAEvB,OAAO;AACT"}
+{"version":3,"file":"formSpacing.js","names":[],"sources":["../../src/utils/formSpacing.ts"],"sourcesContent":["import React from 'react';\n\nimport type { CheckboxProps } from '../components/Checkbox/Checkbox';\nimport type { LabelProps } from '../components/Label';\nimport type { RadioProps } from '../components/Radio/Radio';\nimport type { ToggleProps } from '../components/Toggle';\n\nimport { isComponent } from './component';\nimport Checkbox from '../components/Checkbox/Checkbox';\nimport Radio from '../components/Radio/Radio';\nimport Toggle from '../components/Toggle';\n\nexport const isCompactComponent = (child: React.ReactNode): boolean =>\n  isComponent<CheckboxProps>(child, Checkbox) || isComponent<RadioProps>(child, Radio) || isComponent<ToggleProps>(child, Toggle);\n\nexport const hasSublabel = (child: React.ReactNode): boolean => {\n  if (isComponent<CheckboxProps>(child, Checkbox) || isComponent<RadioProps>(child, Radio)) {\n    return React.isValidElement<LabelProps>(child.props.label) && !!child.props.label.props.sublabel;\n  }\n  if (isComponent<ToggleProps>(child, Toggle)) {\n    return !!child.props.subLabel;\n  }\n  return false;\n};\n"],"mappings":";;;;;;AAYA,IAAa,sBAAsB,UACjC,YAA2B,OAAO,QAAQ,KAAK,YAAwB,OAAO,KAAK,KAAK,YAAyB,OAAO,cAAM;AAEhI,IAAa,eAAe,UAAoC;CAC9D,IAAI,YAA2B,OAAO,QAAQ,KAAK,YAAwB,OAAO,KAAK,GACrF,OAAO,MAAM,eAA2B,MAAM,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,MAAM,MAAM,MAAM;CAE1F,IAAI,YAAyB,OAAO,cAAM,GACxC,OAAO,CAAC,CAAC,MAAM,MAAM;CAEvB,OAAO;AACT"}

package/lib/utils/uuid.js

@@ -1,16 +1,5 @@
+import { n as __exportAll } from "../rolldown-runtime.js";
 import { isTest } from "./environment.js";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
 //#region src/utils/uuid.ts
 var uuid_exports = /* @__PURE__ */ __exportAll({
 	default: () => uuid,

package/lib/utils/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}
+{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "15.7.2",
+  "version": "16.1.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -295,12 +295,6 @@
       "require": "./lib/components/HelpTeaser/index.js",
       "default": "./lib/components/HelpTeaser/index.js"
     },
-    "./components/HelpTooltip/HelpTooltip": {
-      "types": "./lib/components/HelpTooltip/HelpTooltip.d.ts",
-      "import": "./lib/components/HelpTooltip/index.js",
-      "require": "./lib/components/HelpTooltip/index.js",
-      "default": "./lib/components/HelpTooltip/index.js"
-    },
     "./components/HelpTriggerIcon/HelpSign": {
       "types": "./lib/components/HelpTriggerIcon/HelpSign.d.ts",
       "import": "./lib/components/HelpTriggerIcon/index.js",
@@ -487,11 +481,11 @@
       "require": "./lib/components/PromoPanel/index.js",
       "default": "./lib/components/PromoPanel/index.js"
     },
-    "./components/RadioButton/RadioButton": {
-      "types": "./lib/components/RadioButton/RadioButton.d.ts",
-      "import": "./lib/components/RadioButton/index.js",
-      "require": "./lib/components/RadioButton/index.js",
-      "default": "./lib/components/RadioButton/index.js"
+    "./components/Radio/Radio": {
+      "types": "./lib/components/Radio/Radio.d.ts",
+      "import": "./lib/components/Radio/index.js",
+      "require": "./lib/components/Radio/index.js",
+      "default": "./lib/components/Radio/index.js"
     },
     "./components/Select/Select": {
       "types": "./lib/components/Select/Select.d.ts",
@@ -849,7 +843,58 @@
     "./scss/reset": "./scss/_reset.scss",
     "./scss/screen-reader": "./scss/_screen-reader.scss",
     "./scss/spacers": "./scss/_spacers.scss",
-    "./scss/visual-form": "./scss/_visual-form.scss"
+    "./scss/visual-form": "./scss/_visual-form.scss",
+    "./components/Drawer/DrawerBackButton": {
+      "types": "./lib/components/Drawer/DrawerBackButton.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/Drawer/DrawerHeaderContent": {
+      "types": "./lib/components/Drawer/DrawerHeaderContent.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/UNSAFE_Table/TableCaption": {
+      "types": "./lib/components/UNSAFE_Table/TableCaption.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/TableContext": {
+      "types": "./lib/components/UNSAFE_Table/TableContext.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/UNSAFE_Table": {
+      "types": "./lib/components/UNSAFE_Table/UNSAFE_Table.d.ts"
+    },
+    "./components/UNSAFE_Table/constants": {
+      "types": "./lib/components/UNSAFE_Table/constants.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableExpandedRows": {
+      "types": "./lib/components/UNSAFE_Table/useTableExpandedRows.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableShowMore": {
+      "types": "./lib/components/UNSAFE_Table/useTableShowMore.d.ts"
+    },
+    "./components/UNSAFE_Table/utils": {
+      "types": "./lib/components/UNSAFE_Table/utils.d.ts"
+    },
+    "./components/VisualContentgroupWithImage/VisualContentgroupWithImage": {
+      "types": "./lib/components/VisualContentgroupWithImage/VisualContentgroupWithImage.d.ts",
+      "import": "./lib/components/VisualContentgroupWithImage/index.js",
+      "require": "./lib/components/VisualContentgroupWithImage/index.js",
+      "default": "./lib/components/VisualContentgroupWithImage/index.js"
+    },
+    "./components/UNSAFE_Table/StackLabelledContent": {
+      "types": "./lib/components/UNSAFE_Table/StackLabelledContent.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    }
   },
   "scripts": {
     "start": "storybook dev -p 3000",
@@ -867,6 +912,7 @@
     "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
     "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
     "generate:scssexports": "node __scripts__/gen-scss-exports.mjs",
+    "generate:deepexports": "node __scripts__/gen-deep-exports.mjs",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.{css,scss}\"",
@@ -880,7 +926,7 @@
   },
   "peerDependencies": {
     "classnames": "^2.3.2",
-    "motion": "^12.0.0",
+    "motion": "^13.0.0",
     "normalize.css": "^8.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -892,7 +938,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "motion": "^12.38.0"
+    "motion": "^13.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",

package/scss/_font-mixins.scss

@@ -170,8 +170,35 @@
 }
 
 @mixin table-cell {
+  font-size: 1rem;
+  line-height: 1.28rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin table-header {
   font-size: 1.125rem;
-  line-height: 1.4375rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin table-header-stack {
+  font-size: 1rem;
+  line-height: 1.28rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
 }
 
 @mixin image-caption {

package/scss/_visual-form.scss

@@ -51,9 +51,9 @@
     min-height: var(--core-space-l);
     padding: $pill-padding-mobile;
     border-radius: 100px;
-    background-color: var(--color-action-background-ondark);
-    border: 1px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
+    background-color: var(--color-action-background-light-normal);
+    border: 1px solid var(--color-action-border-dark-normal);
+    color: var(--color-base-text-dark);
 
     @include fonts.title6;
 
@@ -64,20 +64,20 @@
   }
 
   &:hover &__pill {
-    background-color: var(--color-action-background-ondark-hover);
-    border-color: var(--color-action-border-onlight-hover);
+    background-color: var(--color-action-background-light-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &:active &__pill {
-    background-color: var(--color-action-background-ondark-selected);
-    border-color: var(--color-action-border-onlight-hover);
+    background-color: var(--color-action-background-light-selected);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &--checked &__pill,
   &:has(input:checked) &__pill {
-    background-color: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
+    background-color: var(--color-action-background-dark-normal);
+    color: var(--color-action-text-light-normal);
+    border-color: var(--color-action-background-dark-normal);
     padding: var(--core-space-3xs) var(--core-space-s);
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -87,52 +87,52 @@
 
   &--checked:hover &__pill,
   &:has(input:checked):hover &__pill {
-    background-color: var(--color-action-graphics-onlight-hover);
-    border-color: var(--color-action-graphics-onlight-hover);
+    background-color: var(--color-action-graphics-dark-hover);
+    border-color: var(--color-action-graphics-dark-hover);
   }
 
   &--checked:active &__pill,
   &:has(input:checked):active &__pill {
-    background-color: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
+    background-color: var(--color-action-background-dark-plus1-active);
+    border-color: var(--color-action-background-dark-plus1-active);
   }
 
   &--invalid &__pill {
-    background-color: var(--color-action-background-ondark);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-action-background-light-normal);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid:hover &__pill {
-    background-color: var(--color-destructive-background-normal);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-destructive-background-light-plus1-normal);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid:active &__pill {
-    background-color: var(--color-destructive-background-emphasized);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-destructive-background-light-plus1-hover);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid#{&}--checked &__pill,
   &--invalid:has(input:checked) &__pill {
-    background-color: var(--color-destructive-graphics-normal);
-    border-color: var(--color-destructive-graphics-normal);
+    background-color: var(--color-destructive-graphics-dark-normal);
+    border-color: var(--color-destructive-graphics-dark-normal);
   }
 
   &--invalid#{&}--checked:hover &__pill,
   &--invalid:has(input:checked):hover &__pill {
-    background-color: var(--color-destructive-graphics-hover);
-    border-color: var(--color-destructive-graphics-hover);
+    background-color: var(--color-destructive-graphics-dark-hover);
+    border-color: var(--color-destructive-graphics-dark-hover);
   }
 
   &--invalid#{&}--checked:active &__pill,
   &--invalid:has(input:checked):active &__pill {
-    background-color: var(--color-destructive-graphics-emphasized-onlight);
-    border-color: var(--color-destructive-graphics-emphasized-onlight);
+    background-color: var(--color-destructive-graphics-dark-active);
+    border-color: var(--color-destructive-graphics-dark-active);
   }
 
   &__input:focus-visible + &__pill {
-    outline: 3px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
+    outline: 3px solid var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-light-normal);
   }
 
   &__icon {
@@ -141,7 +141,7 @@
     justify-content: center;
 
     svg {
-      fill: var(--color-action-graphics-ondark);
+      fill: var(--color-action-graphics-light-normal);
     }
   }
 
@@ -206,9 +206,9 @@
     z-index: 1;
     display: inline-flex;
     border-radius: 4px;
-    background: var(--color-action-background-ondark);
-    border: 2px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
+    background: var(--color-action-background-light-normal);
+    border: 2px solid var(--color-action-border-dark-normal);
+    color: var(--color-base-text-dark);
   }
 
   &--variant-line &__frame {
@@ -243,8 +243,8 @@
     justify-content: center;
     overflow: hidden;
     border-radius: 100%;
-    background: var(--color-action-background-ondark);
-    border: 2px solid var(--color-action-border-ondark);
+    background: var(--color-action-background-light-normal);
+    border: 2px solid var(--color-action-border-light-normal);
 
     > * {
       width: 100%;
@@ -272,35 +272,35 @@
 
   &--checked &__frame,
   &:has(input:checked) &__frame {
-    background: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
+    background: var(--color-action-background-dark-normal);
+    color: var(--color-action-text-light-normal);
+    border-color: var(--color-action-background-dark-normal);
   }
 
   &--invalid &__frame {
-    background: var(--color-action-background-ondark);
+    background: var(--color-action-background-light-normal);
     border-color: var(--core-color-cherry-500);
   }
 
   &:hover &__frame {
     background: var(--core-color-neutral-50);
-    border-color: var(--color-action-border-onlight-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &:active &__frame {
     background: var(--core-color-neutral-100);
-    border-color: var(--color-action-border-onlight-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &--checked:hover &__frame,
   &:has(input:checked):hover &__frame {
-    background: var(--color-action-background-onlight-hover);
+    background: var(--color-action-background-dark-plus1-hover);
   }
 
   &--checked:active &__frame,
   &:has(input:checked):active &__frame {
-    background: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
+    background: var(--color-action-background-dark-plus1-active);
+    border-color: var(--color-action-background-dark-plus1-active);
   }
 
   &--invalid:hover &__frame {
@@ -316,7 +316,7 @@
   &--invalid#{&}--checked &__frame,
   &--invalid:has(input:checked) &__frame {
     background: var(--core-color-cherry-50);
-    color: var(--color-base-text-onlight);
+    color: var(--color-base-text-dark);
     border-color: var(--core-color-cherry-500);
   }
 
@@ -333,8 +333,8 @@
   }
 
   &__input:focus-visible + &__frame {
-    outline: 4px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
+    outline: 4px solid var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-light-normal);
   }
 
   &__icon {
@@ -343,7 +343,7 @@
     justify-content: center;
 
     svg {
-      fill: var(--color-action-graphics-ondark);
+      fill: var(--color-action-graphics-light-normal);
     }
   }
 

package/scss/helsenorge.scss

@@ -6,6 +6,7 @@
 @forward 'body';
 @forward 'print';
 @forward 'radio-reset';
+@use './supernova-legacy/styles/legacy-colors.css';
 @import './bootstrap/scss/bootstrap-grid';
 @import './supernova/styles/colors.css';
 @import './supernova/styles/spacers.css';