@helsenorge/designsystem-react 15.7.2 → 16.0.0

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/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "15.7.2",
+  "version": "16.0.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",
@@ -880,7 +874,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 +886,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/_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';