@helsenorge/designsystem-react 15.7.1 → 16.0.0

package/lib/components/{RadioButton → Radio}/styles.module.scss

@@ -3,19 +3,18 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/screen-reader' as *;
-@import '../../scss/supernova/styles/spacers';
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
 
-.radio-button-errors {
+.radio-errors {
   font-size: font-settings.$font-size-sm;
   font-weight: 600;
   color: palette.$cherry600;
   margin-top: 0;
 }
 
-.radio-button-wrapper {
+.radio-wrapper {
   margin-left: -$padding-clickable-area-left;
 
   &__large {
@@ -40,7 +39,7 @@ $padding-clickable-area-left: 8px;
   }
 }
 
-.radio-button-label {
+.radio-label {
   display: flex;
   align-items: flex-start;
   cursor: pointer;
@@ -71,7 +70,7 @@ $padding-clickable-area-left: 8px;
     }
 
     &:has(input:focus-visible) {
-      border: 1px solid var(--color-action-border-ondark-focus);
+      border: 1px solid var(--color-action-border-light-focus);
     }
 
     &--on-blueberry {
@@ -173,19 +172,19 @@ $padding-clickable-area-left: 8px;
   }
 }
 
-.radio-button {
+.radio {
   @include sr-only;
 }
 
-.radio-button__marker-wrapper {
+.radio__marker-wrapper {
   margin-right: var(--core-space-s);
 }
 
-.radiobutton-sublabel-wrapper {
+.radio-sublabel-wrapper {
   margin-top: -$padding-clickable-area-top-bottom;
   padding-left: calc(2.8rem + $padding-clickable-area-left);
 }
 
-.radiobutton-afterlabelchildren-wrapper {
+.radio-afterlabelchildren-wrapper {
   padding-top: $padding-clickable-area-top-bottom;
 }

package/lib/components/Radio/styles.module.scss.d.ts

@@ -0,0 +1,26 @@
+export type Styles = {
+  radio: string;
+  'radio__marker-wrapper': string;
+  'radio-afterlabelchildren-wrapper': string;
+  'radio-errors': string;
+  'radio-label': string;
+  'radio-label__large': string;
+  'radio-label__large--disabled': string;
+  'radio-label__large--invalid': string;
+  'radio-label__large--on-blueberry': string;
+  'radio-label__large--on-grey': string;
+  'radio-label--disabled': string;
+  'radio-label--invalid': string;
+  'radio-label--on-dark': string;
+  'radio-sublabel-wrapper': string;
+  'radio-wrapper': string;
+  'radio-wrapper__large': string;
+  'radio-wrapper__large--invalid': string;
+  'radio-wrapper__large--on-blueberry': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/ServiceMessage/styles.module.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use '../../scss/font-settings' as font-settings;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 @import '../../scss/breakpoints';
 @import '../../scss/grid';
 
@@ -16,43 +14,43 @@
   }
 
   &--success {
-    background-color: var(--color-notification-background-success);
+    background-color: var(--color-notification-success-background);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: var(--color-notification-border-success);
+      border-color: var(--color-notification-success-border);
     }
   }
 
   &--info {
-    background-color: var(--color-notification-background-info);
+    background-color: var(--color-notification-info-background);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: var(--color-notification-border-info);
+      border-color: var(--color-notification-info-border);
     }
   }
 
   &--warn {
-    background-color: var(--color-notification-background-warning);
+    background-color: var(--color-notification-warning-background);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: var(--color-notification-border-warning);
+      border-color: var(--color-notification-warning-border);
     }
   }
 
   &--error {
-    background-color: var(--color-notification-background-error);
+    background-color: var(--color-notification-error-background);
 
     &#{$servicemessage},
     &#{$servicemessage}__label-container {
-      border-color: var(--color-notification-border-error);
+      border-color: var(--color-notification-error-border);
     }
   }
 
   &__icon {
-    fill: var(--color-action-graphics-onlight);
+    fill: var(--color-action-graphics-dark-normal);
   }
 
   &__container {
@@ -77,46 +75,46 @@
     }
 
     &--has-expander:has(:focus-visible) {
-      box-shadow: inset 0 0 0 4px var(--color-action-border-onlight-focus);
+      box-shadow: inset 0 0 0 4px var(--color-action-border-dark-focus);
     }
 
     &--info#{&}--has-expander {
       &:hover {
-        background-color: var(--color-notification-background-info-hover);
+        background-color: var(--color-notification-info-background-hover);
       }
 
       &:active {
-        background-color: var(--color-notification-background-info-active);
+        background-color: var(--color-notification-info-background-active);
       }
     }
 
     &--success#{&}--has-expander {
       &:hover {
-        background-color: var(--color-notification-background-success-hover);
+        background-color: var(--color-notification-success-background-hover);
       }
 
       &:active {
-        background-color: var(--color-notification-background-success-active);
+        background-color: var(--color-notification-success-background-active);
       }
     }
 
     &--warn#{&}--has-expander {
       &:hover {
-        background-color: var(--color-notification-background-warning-hover);
+        background-color: var(--color-notification-warning-background-hover);
       }
 
       &:active {
-        background-color: var(--color-notification-background-warning-active);
+        background-color: var(--color-notification-warning-background-active);
       }
     }
 
     &--error#{&}--has-expander {
       &:hover {
-        background-color: var(--color-notification-background-error-hover);
+        background-color: var(--color-notification-error-background-hover);
       }
 
       &:active {
-        background-color: var(--color-notification-background-error-active);
+        background-color: var(--color-notification-error-background-active);
       }
     }
   }
@@ -223,7 +221,7 @@
     align-items: center;
     border: none;
     width: fit-content;
-    color: var(--color-action-text-onlight);
+    color: var(--color-action-text-dark-normal);
     font-weight: 600;
     font-size: font-settings.$font-size-xs;
     line-height: 1.25rem;
@@ -239,7 +237,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 4px var(--color-action-border-onlight-focus);
+      box-shadow: 0 0 0 4px var(--color-action-border-dark-focus);
       background-color: transparent;
       border: 0;
       outline: none;

package/lib/components/Slider/styles.module.scss

@@ -2,7 +2,6 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 $track-height-offset: 1rem;
 $mark-size: spacers.getSpacer(l);
@@ -118,7 +117,7 @@ $mark-size: spacers.getSpacer(l);
     }
 
     &--invalid {
-      border-color: var(--color-notification-border-error);
+      border-color: var(--color-notification-error-border);
     }
 
     &--disabled {

package/lib/components/StatusDot/styles.module.scss

@@ -5,7 +5,6 @@
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 $status-dot-size: 1rem;
 
@@ -75,7 +74,7 @@ $status-dot-size: 1rem;
     }
 
     &--transparent {
-      fill: var(--color-disabled-border);
+      fill: var(--color-disabled-border-dark);
     }
 
     &--transparent#{&}--on-dark,
@@ -86,7 +85,7 @@ $status-dot-size: 1rem;
     &--hidden#{&}--on-dark,
     &--login#{&}--on-dark,
     &--attachment#{&}--on-dark {
-      fill: var(--color-base-graphics-ondark);
+      fill: var(--color-base-graphics-light);
     }
 
     svg {
@@ -95,12 +94,12 @@ $status-dot-size: 1rem;
   }
 
   &__label {
-    color: var(--color-base-text-onlight-subdued);
+    color: var(--color-base-subdued-text-dark);
 
     @include fonts.sublabel-subdued;
 
     &--on-dark {
-      color: var(--color-base-text-ondark);
+      color: var(--color-base-text-light);
     }
   }
 }

package/lib/components/StickyNote/index.js

@@ -47,7 +47,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
 		if (!isError) {
 			if (isHover) colors.background = "var(--component-stickynote-background-fold-normal-medium)";
 			if (isFocus) {
-				colors.border = "var(--color-action-border-onlight-focus)";
+				colors.border = "var(--color-action-border-dark-focus)";
 				colors.background = "var(--component-stickynote-background-fold-normal-medium)";
 			}
 			if (isActive) colors.background = "var(--component-stickynote-background-fold-normal-dark)";
@@ -56,7 +56,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
 			colors.background = "var(--component-stickynote-background-fold-error-light)";
 			if (isHover) colors.background = "var(--component-stickynote-background-fold-error-medium)";
 			if (isFocus) {
-				colors.border = "var(--color-action-border-onlight-focus)";
+				colors.border = "var(--color-action-border-dark-focus)";
 				colors.background = "var(--component-stickynote-background-fold-error-medium)";
 			}
 			if (isActive) colors.background = "var(--component-stickynote-background-fold-error-dark)";

package/lib/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close: React.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import { useId } from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdFocus} fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdFocus})`}\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdNormal} fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: showErrorStyling,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close: React.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import { useId } from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const uniqueId = useId();\n  const maskIdFocus = `${uniqueId}-mask-focus`;\n  const maskIdNormal = `${uniqueId}-mask-normal`;\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-dark-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-dark-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdFocus} fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdFocus})`}\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id={maskIdNormal} fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask={`url(#${maskIdNormal})`}\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const showErrorStyling = error || !!errorText;\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: showErrorStyling,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={showErrorStyling} />\n        </div>\n      </div>\n      {errorText && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}

package/lib/components/StickyNote/styles.module.scss

@@ -2,7 +2,6 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .sticky-note {
   $sticky-note: &;
@@ -17,8 +16,8 @@
   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
 
   &--focused {
-    box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-onlight-focus);
+    box-shadow: inset 0 0 0 1px var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-dark-focus);
     background-color: var(--component-stickynote-background-normal-medium);
   }
 
@@ -39,8 +38,8 @@
     }
 
     &#{$sticky-note}--focused {
-      box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
-      border-color: var(--color-action-border-onlight-focus);
+      box-shadow: inset 0 0 0 1px var(--color-action-border-dark-focus);
+      border-color: var(--color-action-border-dark-focus);
       background-color: var(--component-stickynote-background-error-medium);
     }
 
@@ -58,7 +57,7 @@
     &__timestamp {
       @include fonts.compact-data;
 
-      color: var(--color-placeholder-text-onlight);
+      color: var(--color-placeholder-text-dark);
     }
   }
 
@@ -73,7 +72,7 @@
 
     &:disabled {
       // Dette er for å unngå at disabled tekst ikke validerer på iOS
-      -webkit-text-fill-color: var(--color-base-text-onlight);
+      -webkit-text-fill-color: var(--color-base-text-dark);
       opacity: 1;
     }
   }
@@ -81,7 +80,7 @@
   &__footer {
     @include fonts.image-credit;
 
-    color: var(--color-placeholder-text-onlight);
+    color: var(--color-placeholder-text-dark);
   }
 
   &__triangle {
@@ -95,7 +94,7 @@
   &__error-text {
     @include fonts.sublabel-subdued;
 
-    color: var(--color-notification-status-error);
+    color: var(--color-notification-error);
     margin-top: 0.5rem;
   }
 }
@@ -155,7 +154,7 @@ $mobile-outer-size: 2.75rem;
     }
 
     :focus-visible > & {
-      outline: 3px solid var(--color-action-border-onlight-focus);
+      outline: 3px solid var(--color-action-border-dark-focus);
       border-radius: 0;
       border: 0;
     }

package/lib/components/Tabs/TabList/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../../scss/breakpoints' as breakpoints;
-@import '../../../scss/supernova/styles/colors';
 
 .tab-list-wrapper {
   position: relative;
@@ -19,14 +18,16 @@
   overflow: auto hidden;
   height: 3rem;
   margin: 0;
-  background-color: var(--color-base-background-white);
+  background-color: var(--color-base-background-light);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin-bottom: -1px;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
-    display: none; /* Safari */
+    display: none;
+
+    /* Safari */
   }
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -47,40 +48,41 @@
   }
 
   &--onwhite {
-    background-color: var(--color-base-background-white);
+    background-color: var(--color-base-background-light);
   }
 
   &--onblueberry {
-    background-color: var(--color-base-background-blueberry);
+    background-color: var(--color-base-blueberry-background-light);
   }
 
   &--onneutral {
-    background-color: var(--color-base-background-neutral);
+    background-color: var(--color-base-neutral-background-light);
   }
 
   &__tab {
     display: flex;
     align-items: start;
-    background-color: var(--color-base-background-white);
+    background-color: var(--color-base-background-light);
     height: 3rem;
     text-align: start;
     font-size: 1.25rem;
     text-decoration: none;
     padding: 0.5rem 1.5rem;
-    color: var(--color-action-text-onlight);
-    border: 1px solid var(--color-action-border-onlight);
+    color: var(--color-action-text-dark-normal);
+    border: 1px solid var(--color-action-border-dark-normal);
     border-bottom: 0;
     border-radius: 0.5rem 0.5rem 0 0;
     position: relative;
+    cursor: pointer;
 
     // Z-index brukes til å flytte tab bak/foran bottom border til tab-list__border
     z-index: 0;
 
     &--selected {
       overflow: visible;
-      border-color: var(--color-action-border-onlight-focus);
-      color: var(--color-base-text-onlight);
-      background-color: var(--color-base-background-white);
+      border-color: var(--color-action-border-dark-focus);
+      color: var(--color-base-text-dark);
+      background-color: var(--color-base-background-light);
       z-index: 2;
     }
 
@@ -95,22 +97,22 @@
 
   .tab-list__tab {
     &:focus-visible {
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
       outline-offset: -4px;
     }
   }
 
   .tab-list__tab--not-selected {
     &:hover {
-      background-color: var(--color-action-background-ondark-hover);
+      background-color: var(--color-action-background-light-hover);
 
       &#{$tab-list}__tab--blueberry {
-        background-color: var(--color-action-background-ondark-selected);
+        background-color: var(--color-action-background-light-selected);
       }
     }
 
     &:active {
-      background-color: var(--color-action-background-ondark-selected);
+      background-color: var(--color-action-background-light-selected);
     }
   }
 
@@ -137,7 +139,7 @@
     align-items: center;
 
     &:focus-visible {
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
       outline-offset: -4px;
     }
   }
@@ -164,6 +166,6 @@
     top: 0;
     width: 100%;
     height: 100%;
-    border-bottom: 1px solid var(--color-action-border-onlight-focus);
+    border-bottom: 1px solid var(--color-action-border-dark-focus);
   }
 }

package/lib/components/Tabs/TabPanel/styles.module.scss

@@ -2,7 +2,6 @@
 @use '../../../scss/spacers' as spacers;
 @use '../../../scss/palette' as palette;
 @use '../../../scss/breakpoints' as breakpoints;
-@import '../../../scss/supernova/styles/colors';
 
 .tab-panel {
   $tab-panel: &;
@@ -10,7 +9,7 @@
 
   padding: spacers.getSpacer(l) spacers.getSpacer(s) spacers.getSpacer(xl);
   width: 100%;
-  border-bottom: 1px solid var(--color-action-border-onlight-focus);
+  border-bottom: 1px solid var(--color-action-border-dark-focus);
 
   @each $color in $colors {
     &#{$tab-panel}--#{$color} {
@@ -20,7 +19,7 @@
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     border-radius: 0 0 0.5rem 0.5rem;
-    border: 1px solid var(--color-action-border-onlight-focus);
+    border: 1px solid var(--color-action-border-dark-focus);
     border-top: 0;
     padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xl);
 

package/lib/components/Tabs/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .tab-list-wrapper {
   position: relative;

package/lib/components/Tag/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/spacers.css';
 
 .tag {
   $tag: &;

package/lib/components/Tile/styles.module.scss

@@ -3,8 +3,6 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
@@ -19,7 +17,7 @@
   color: var(--core-color-black);
   text-decoration: none;
   cursor: pointer;
-  border: 1px solid var(--color-action-border-onlight);
+  border: 1px solid var(--color-action-border-dark-normal);
   outline: none;
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -50,12 +48,12 @@
 
   &:hover,
   &:active {
-    background-color: var(--color-action-background-ondark-selected);
+    background-color: var(--color-action-background-light-selected);
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-onlight-focus);
+    box-shadow: 0 0 0 3px var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-dark-focus);
   }
 
   &--highlighted {
@@ -70,7 +68,7 @@
     }
 
     &:focus-visible {
-      border-color: var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-dark-focus);
     }
   }
 

package/lib/components/Toast/styles.module.scss

@@ -1,7 +1,6 @@
 @use '../../scss/font-mixins' as fonts;
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .toast {
   max-width: 40rem;