@helsenorge/designsystem-react 10.2.0 → 10.3.0

package/components/Dropdown/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../../scss/screen-reader';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 
 .dropdown {
   position: relative;
@@ -20,14 +20,14 @@
     border-radius: 0;
     border-width: 2px;
     border-style: solid;
-    padding: 0 getSpacer(3xs) 0 getSpacer(s);
+    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(s);
     font-family: inherit;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(3xs) getSpacer(3xs) getSpacer(3xs) getSpacer(s);
-      font-size: $font-size-md;
+      padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
+      font-size: font-settings.$font-size-md;
       line-height: 1.5rem;
     }
 
@@ -37,80 +37,80 @@
 
     &:disabled {
       cursor: initial;
-      color: $neutral700;
+      color: palette.$neutral700;
       background-color: transparent;
-      border-color: $neutral600;
+      border-color: palette.$neutral600;
       border-style: dashed;
     }
 
     &--on-white,
     &--on-grey {
-      border-color: $neutral700;
-      background-color: $white;
+      border-color: palette.$neutral700;
+      background-color: palette.$white;
 
       &:hover {
-        background-color: $neutral50;
-        box-shadow: 0 0 0 1px $neutral700;
+        background-color: palette.$neutral50;
+        box-shadow: 0 0 0 1px palette.$neutral700;
       }
 
       &:focus {
-        border-color: $black;
-        box-shadow: 0 0 0 1px $black;
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
       }
     }
 
     &--on-blueberry {
-      border-color: $blueberry500;
-      background-color: $white;
+      border-color: palette.$blueberry500;
+      background-color: palette.$white;
 
       &:hover {
-        background-color: $blueberry50;
-        box-shadow: 0 0 0 1px $blueberry500;
+        background-color: palette.$blueberry50;
+        box-shadow: 0 0 0 1px palette.$blueberry500;
       }
 
       &:focus {
-        border-color: $black;
-        box-shadow: 0 0 0 1px $black;
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
       }
     }
 
     &--on-cherry {
-      border-color: $cherry500;
-      background-color: $white;
+      border-color: palette.$cherry500;
+      background-color: palette.$white;
 
       &:hover {
-        background-color: $cherry50;
-        box-shadow: 0 0 0 1px $cherry500;
+        background-color: palette.$cherry50;
+        box-shadow: 0 0 0 1px palette.$cherry500;
       }
 
       &:focus {
-        border-color: $black;
-        box-shadow: 0 0 0 1px $black;
+        border-color: palette.$black;
+        box-shadow: 0 0 0 1px palette.$black;
       }
     }
 
     &--open#{&}--on-white,
     &--open#{&}--on-grey {
-      background-color: $neutral50;
+      background-color: palette.$neutral50;
 
       &:hover {
-        background-color: $white;
+        background-color: palette.$white;
       }
     }
 
     &--open#{&}--on-blueberry {
-      background-color: $blueberry50;
+      background-color: palette.$blueberry50;
 
       &:hover {
-        background-color: $white;
+        background-color: palette.$white;
       }
     }
 
     &--open#{&}--on-cherry {
-      background-color: $cherry50;
+      background-color: palette.$cherry50;
 
       &:hover {
-        background-color: $white;
+        background-color: palette.$white;
       }
     }
 
@@ -120,24 +120,24 @@
 
     &--transparent#{&}--on-grey {
       &:hover {
-        background-color: $neutral100;
+        background-color: palette.$neutral100;
       }
     }
 
     &--transparent#{&}--on-blueberry {
       &:hover {
-        background-color: $blueberry100;
+        background-color: palette.$blueberry100;
       }
     }
 
     &--transparent#{&}--on-cherry {
       &:hover {
-        background-color: $cherry100;
+        background-color: palette.$cherry100;
       }
     }
 
     &--transparent#{&}--open#{&}--on-grey {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
 
       &:hover {
         background-color: transparent;
@@ -145,7 +145,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-blueberry {
-      background-color: $blueberry100;
+      background-color: palette.$blueberry100;
 
       &:hover {
         background-color: transparent;
@@ -153,7 +153,7 @@
     }
 
     &--transparent#{&}--open#{&}--on-cherry {
-      background-color: $cherry100;
+      background-color: palette.$cherry100;
 
       &:hover {
         background-color: transparent;
@@ -165,24 +165,24 @@
     }
 
     &__label {
-      padding: getSpacer(3xs) 0;
+      padding: spacers.getSpacer(3xs) 0;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(2xs) 0;
+        padding: spacers.getSpacer(2xs) 0;
       }
     }
   }
 
   &__icon {
-    margin-left: getSpacer(2xs);
+    margin-left: spacers.getSpacer(2xs);
   }
 
   &__content {
     display: none;
     position: absolute;
-    background-color: $white;
-    margin-top: getSpacer(2xs);
-    box-shadow: 0 0 0 2px $blueberry500;
+    background-color: palette.$white;
+    margin-top: spacers.getSpacer(2xs);
+    box-shadow: 0 0 0 2px palette.$blueberry500;
     z-index: 1;
 
     &--open {
@@ -203,15 +203,15 @@
   }
 
   &__close {
-    padding: getSpacer(s);
+    padding: spacers.getSpacer(s);
   }
 
   &__input {
-    border-bottom: 1px solid $neutral300;
-    padding: getSpacer(2xs) getSpacer(s);
+    border-bottom: 1px solid palette.$neutral300;
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(s);
+      padding: spacers.getSpacer(s);
     }
 
     &:last-child {

package/components/Duolist/index.js

@@ -56,7 +56,8 @@ const Duolist = (props) => {
   const duolistClasses = classNames(duolistStyles.duolist, {
     [duolistStyles["duolist--line"]]: hasLines,
     [duolistStyles["duolist--non-formatted"]]: nonFormatted,
-    [duolistStyles["duolist--collapsed"]]: useCollapsedMode
+    [duolistStyles["duolist--collapsed"]]: useCollapsedMode,
+    [duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode
   });
   const duolistColumnStyle = descriptionWidth ? descriptionWidth + "%" : "minmax(60%, 1fr)";
   return /* @__PURE__ */ jsxs("div", { className: duolistWrapperClasses, "data-testid": testId, "data-analyticsid": AnalyticsId.Duolist, children: [

package/components/Duolist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["React"],"mappings":";;;;;;;AAsDO,MAAM,eAA4C,CAAS,UAAA;AAChE,QAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,KAAS,IAAA;AAElI,QAAM,YAAY,eAAe;AACjC,QAAM,aAAa,eAAe;AAClC,QAAM,eAAe,WAAW;AAEhC,QAAM,eAAe,WAAW,cAAc,aAAa,GAAG;AAAA,IAC5D,CAAC,cAAc,mBAAmB,CAAC,GAAG;AAAA,IACtC,CAAC,cAAc,4BAA4B,CAAC,GAAG;AAAA,EAAA,CAChD;AACD,QAAM,eAAe,WAAW,cAAc,aAAa,GAAG;AAAA,IAC5D,CAAC,cAAc,mBAAmB,CAAC,GAAG;AAAA,IACtC,CAAC,cAAc,4BAA4B,CAAC,GAAG;AAAA,EAAA,CAChD;AAED,QAAM,gBAAgB,MAAM;AAC1B,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,QAAG,kBAAgB,eAAe,YAAY,QAAW,WAAW,cAClE,UACH,KAAA,CAAA;AAAA,MACC,oBAAA,MAAA,EAAG,WAAW,cAAe,UAAY,YAAA,CAAA;AAAA,IAAA,GAC5C;AAAA,EAEJ;AAEO,SAAA,mCAAgB,OAAK,EAAA,UAAA,cAAA,GAAgB,IAAS,oBAAA,UAAA,EAAG,wBAAgB,EAAA,CAAA;AAC1E;AAEO,MAAM,UAAkC,CAAS,UAAA;AAChD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,YAAY,WAAW;AAC7B,QAAM,WAAW,YAAY;AACvB,QAAA,kBAAkB,cAAc,SAAS;AAC/C,QAAM,eAAe,WAAW;AAChC,QAAM,aAAa,cAAc;AACjC,QAAM,mBAAmB,sCAAsC,cAAc,WAAW,kCAAkC;AAE1H,QAAM,wBAAwB;AAAA,IAC5B;AAAA,MACE,CAAC,cAAc,yBAAyB,CAAC,GAAG;AAAA,MAC5C,CAAC,cAAc,oCAAoC,CAAC,GAAG;AAAA,IACzD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,iBAAiB,WAAW,cAAc,SAAS;AAAA,IACvD,CAAC,cAAc,eAAe,CAAC,GAAG;AAAA,IAClC,CAAC,cAAc,wBAAwB,CAAC,GAAG;AAAA,IAC3C,CAAC,cAAc,oBAAoB,CAAC,GAAG;AAAA,EAAA,CACxC;AAEK,QAAA,qBAAqB,mBAAmB,mBAAmB,MAAM;AAGrE,SAAA,qBAAC,SAAI,WAAW,uBAAuB,eAAa,QAAQ,oBAAkB,YAAY,SACvF,UAAA;AAAA,IAAA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,0BACA,QAAO,CAAA,CAAA;AAAA,IAAA,GACV;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,kBAAkB,GAAO,IAAA;AAAA,QAC1G,WAAW;AAAA,QAEV,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,UAAmE;AAChG,cAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;AACpD,gBAAM,eAAe;AACjB,cAAA,aAAa,SAAS,cAAc;AAC/B,mBAAAA,eAAM,aAAa,OAAgD;AAAA,cACxE,YAAY,aAAa,MAAM,cAAc;AAAA,cAC7C,QAAQ,aAAa,MAAM,UAAU;AAAA,cACrC,WAAW,aAAa,MAAM,aAAa;AAAA,YAAA,CAC5C;AAAA,UAAA;AAAA,QAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["React"],"mappings":"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"}

package/components/Duolist/styles.module.scss

@@ -1,40 +1,35 @@
 @use 'sass:map';
-@import '../../scss/breakpoints';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
-@import '../../scss/spacers';
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/spacers' as spacers;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
+@import '../../scss/supernova/styles/colors';
 
 .duolist-wrapper {
   &--border {
-    padding: getSpacer(s) getSpacer(s) getSpacer(l);
-    border: 0.062rem solid $neutral500;
+    padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(l);
+    border: 0.062rem solid palette.$neutral500;
   }
 
   &--extra-padding-top {
-    padding-top: getSpacer(xl);
-    padding-bottom: getSpacer(xl);
+    padding-top: spacers.getSpacer(xl);
+    padding-bottom: spacers.getSpacer(xl);
   }
 }
 
 .duolist {
-  font-size: $font-size-sm;
-  margin: 0;
   display: grid;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
-    font-size: $font-size-md;
-  }
-
   &__dt {
-    padding-right: getSpacer(l);
+    @include fonts.definition-list-data;
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding-right: 2.6669rem;
-    }
+    padding-right: spacers.getSpacer(l);
 
     &--non-formatted {
       padding-right: 0;
     }
+
     &--non-formatted#{&}::after {
       content: attr(data-separator);
       font-weight: 400;
@@ -42,21 +37,15 @@
   }
 
   &__dd {
+    @include fonts.definition-list-data;
+
     margin-inline-start: 0;
   }
 
   &__dt,
   &__dd {
-    line-height: $lineheight-size-md;
-    padding-bottom: getSpacer(2xs);
-
-    &:last-of-type {
-      padding-bottom: 0;
-    }
-
     &--bold {
-      font-weight: 600;
-      line-height: $lineheight-size-sm;
+      @include fonts.definition-list-type;
     }
 
     &--non-formatted {
@@ -64,19 +53,52 @@
     }
   }
 
+  &--collapsed {
+    dt {
+      padding-bottom: spacers.getSpacer(3xs);
+    }
+
+    dd {
+      padding-bottom: spacers.getSpacer(s);
+    }
+  }
+
+  &--not-collapsed {
+    dt,
+    dd {
+      padding-bottom: spacers.getSpacer(2xs);
+    }
+  }
+
   &--collapsed &__dd {
     border-top: 0 !important;
   }
 
-  &--line &__dt,
-  &--line &__dd {
-    padding-top: getSpacer(2xs);
-    padding-bottom: getSpacer(2xs);
-    border-top: 0.062rem solid $neutral200;
+  &--line#{&}--collapsed {
+    dt {
+      padding-top: spacers.getSpacer(3xs);
+      padding-top: spacers.getSpacer(2xs);
+    }
+
+    dd {
+      padding-bottom: spacers.getSpacer(2xs);
+      border-bottom: 1px solid var(--color-base-border-onlight);
+
+      &:last-of-type {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  &--line#{&}--not-collapsed {
+    dt,
+    dd {
+      border-top: 1px solid var(--color-base-border-onlight);
+      padding-top: spacers.getSpacer(2xs);
 
-    &:last-of-type {
-      padding-bottom: getSpacer(2xs);
-      border-bottom: 0.062rem solid $neutral200;
+      &:last-of-type {
+        border-bottom: 0.062rem solid var(--color-base-border-onlight);
+      }
     }
   }
 

package/components/Duolist/styles.module.scss.d.ts

@@ -9,6 +9,7 @@ export type Styles = {
   'duolist--collapsed': string;
   'duolist--line': string;
   'duolist--non-formatted': string;
+  'duolist--not-collapsed': string;
   'duolist-wrapper--border': string;
   'duolist-wrapper--extra-padding-top': string;
 };

package/components/EmptyState/styles.module.scss

@@ -1,19 +1,19 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 .emptystate {
   display: flex;
   flex-flow: row;
-  gap: getSpacer(s);
-  padding: getSpacer(s);
+  gap: spacers.getSpacer(s);
+  padding: spacers.getSpacer(s);
   align-items: center;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    gap: getSpacer(m);
-    padding: getSpacer(l);
+    gap: spacers.getSpacer(m);
+    padding: spacers.getSpacer(l);
   }
 
   &--dashed {
@@ -27,15 +27,15 @@
     border: none;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
     }
   }
 
   &--compact {
     border-radius: 4px;
-    gap: getSpacer(3xs);
-    padding: getSpacer(2xs);
-    min-height: getSpacer(2xl);
+    gap: spacers.getSpacer(3xs);
+    padding: spacers.getSpacer(2xs);
+    min-height: spacers.getSpacer(2xl);
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.25rem;
@@ -49,10 +49,10 @@
   &__text {
     display: flex;
     flex-flow: column;
-    gap: getSpacer(3xs);
+    gap: spacers.getSpacer(3xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      gap: getSpacer(xs);
+      gap: spacers.getSpacer(xs);
     }
   }
 

package/components/ErrorWrapper/styles.module.scss

@@ -1,34 +1,24 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/breakpoints' as *;
+@use '../../scss/font-mixins' as fonts;
 
 .error-wrapper {
-  position: relative;
-
   &--with-error {
-    padding-top: getSpacer(s);
-    margin-left: getSpacer(xs) * -1;
-    margin-right: getSpacer(xs) * -1;
-    padding-left: getSpacer(2xs);
-    padding-right: getSpacer(xs);
-    background-color: $cherry100;
-    border-left: getSpacer(3xs) solid $cherry600;
+    padding: spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(2xs);
+    background-color: var(--color-notification-background-error);
+    border: 1px solid var(--core-color-cherry-400);
+    border-left: 4px solid var(--color-notification-border-error);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-left: (getSpacer(m) + 0.25rem) * -1;
-      margin-right: (getSpacer(m) + 0.25rem) * -1;
-      padding-left: getSpacer(m);
-      padding-right: getSpacer(m);
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
     }
   }
 
   &__errors {
-    line-height: 1.875rem;
-    font-size: $font-size-sm;
-    font-weight: 600;
-    color: $cherry600;
     margin-top: 0;
+    color: var(--color-notification-border-error);
+
+    @include fonts.label;
   }
 }

package/components/ErrorWrapper/styles.module.scss.d.ts

@@ -1,5 +1,4 @@
 export type Styles = {
-  'error-wrapper': string;
   'error-wrapper__errors': string;
   'error-wrapper--with-error': string;
 };