@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/TagList/styles.module.scss

@@ -1,13 +1,13 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .tag-list {
   all: unset;
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: getSpacer(2xs);
+  gap: spacers.getSpacer(2xs);
 
   &__item {
     all: unset;

package/components/Textarea/styles.module.scss

@@ -1,22 +1,22 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/input';
-@import '../../scss/font-mixins';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-mixins' as fonts;
+@use '../../scss/input' as input;
+@use '../../scss/breakpoints' as *;
 
 .textarea {
-  @include input-wrapper;
+  @include input.input-wrapper;
 
   &--gutterBottom {
-    margin-bottom: getSpacer(s);
+    margin-bottom: spacers.getSpacer(s);
   }
 }
 
 .input-container {
-  @include input-container;
+  @include input.input-container;
 
   &__input {
-    @include input-text;
+    @include fonts.input-text;
 
     height: auto;
     padding: 16px;

package/components/Tile/index.js

@@ -1,12 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
 import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
 import { useHover } from "../../hooks/useHover.js";
 import { mergeRefs } from "../../utils/refs.js";
 import tileStyles from "./styles.module.scss";
-const Title = React.forwardRef((props, ref) => {
+const Title = React__default.forwardRef((props, ref) => {
   const { compact, children, className, htmlMarkup = "span", highlighted } = props;
   const titleClasses = classNames(
     tileStyles["tile__title"],
@@ -20,7 +20,7 @@ const Title = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(CustomTag, { className: titleClasses, ref, children });
 });
 Title.displayName = "Title";
-const Tile = React.forwardRef((props, ref) => {
+const Tile = React__default.forwardRef((props, ref) => {
   const {
     children,
     icon,
@@ -65,8 +65,8 @@ const Tile = React.forwardRef((props, ref) => {
       onClick,
       children: [
         /* @__PURE__ */ jsxs("div", { className: tileTitleWrapperClasses, children: [
-          React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? "white" : "black" }),
-          React.cloneElement(title, { highlighted, compact })
+          React__default.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? "white" : "black" }),
+          React__default.cloneElement(title, { highlighted, compact })
         ] }),
         !compact && !mobile && /* @__PURE__ */ jsx("p", { className: tileStyles.tile__description, children: description }),
         children && /* @__PURE__ */ jsx("div", { className: tileStyles.tile__children, children })

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":[],"mappings":";;;;;;;;AA+CA,MAAM,QAAQ,MAAM,WAA+C,CAAC,OAAO,QAAQ;AACjF,QAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAC3E,QAAM,eAAe;AAAA,IACnB,WAAW,aAAa;AAAA,IACxB;AAAA,MACE,CAAC,WAAW,0BAA0B,CAAC,GAAG;AAAA,MAC1C,CAAC,WAAW,sBAAsB,CAAC,GAAG;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAElB,SACG,oBAAA,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAO,MAAM,WAAyC,CAAC,OAAO,QAAQ;AAC3E,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAC5D,QAAM,aAAa,cAAc;AAC3B,QAAA,SAAS,aAAa,WAAW;AACvC,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,MACE,CAAC,WAAW,aAAa,CAAC,GAAG;AAAA,MAC7B,CAAC,WAAW,eAAe,CAAC,GAAG;AAAA,MAC/B,CAAC,WAAW,mBAAmB,CAAC,GAAG;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AACA,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,KAAK,WAAW,WAAW,wBAAwB;AAAA,MACnD,WAAW;AAAA,MACX,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MAEA,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,yBACb,UAAA;AAAA,UAAA,MAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/H,MAAM,aAAa,OAAO,EAAE,aAA0B,QAAkB,CAAA;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAE,EAAA,WAAW,WAAW,mBAAoB,UAAY,YAAA,CAAA;AAAA,QAChF,YAAa,oBAAA,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["React"],"mappings":";;;;;;;;AA+CA,MAAM,QAAQA,eAAM,WAA+C,CAAC,OAAO,QAAQ;AACjF,QAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAC3E,QAAM,eAAe;AAAA,IACnB,WAAW,aAAa;AAAA,IACxB;AAAA,MACE,CAAC,WAAW,0BAA0B,CAAC,GAAG;AAAA,MAC1C,CAAC,WAAW,sBAAsB,CAAC,GAAG;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAElB,SACG,oBAAA,WAAA,EAAU,WAAW,cAAc,KACjC,UACH;AAEJ,CAAC;AAED,MAAM,cAAc;AAEb,MAAM,OAAOA,eAAM,WAAyC,CAAC,OAAO,QAAQ;AAC3E,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAC5D,QAAM,aAAa,cAAc;AAC3B,QAAA,SAAS,aAAa,WAAW;AACvC,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc;AAAA,IAClB,WAAW;AAAA,IACX;AAAA,MACE,CAAC,WAAW,aAAa,CAAC,GAAG;AAAA,MAC7B,CAAC,WAAW,eAAe,CAAC,GAAG;AAAA,MAC/B,CAAC,WAAW,mBAAmB,CAAC,GAAG;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AACA,QAAM,0BAA0B,WAAW,WAAW,eAAe,GAAG;AAAA,IACtE,CAAC,WAAW,wBAAwB,CAAC,GAAG;AAAA,EAAA,CACzC;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,KAAK,WAAW,WAAW,wBAAwB;AAAA,MACnD,WAAW;AAAA,MACX,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B;AAAA,MAEA,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,yBACb,UAAA;AAAA,UAAAA,eAAM,aAAa,MAAM,EAAE,MAAM,SAAS,SAAS,QAAQ,SAAS,QAAQ,WAAW,OAAO,cAAc,UAAU,SAAS;AAAA,UAC/HA,eAAM,aAAa,OAAO,EAAE,aAA0B,QAAkB,CAAA;AAAA,QAAA,GAC3E;AAAA,QACC,CAAC,WAAW,CAAC,8BAAW,KAAE,EAAA,WAAW,WAAW,mBAAoB,UAAY,YAAA,CAAA;AAAA,QAChF,YAAa,oBAAA,OAAA,EAAI,WAAW,WAAW,gBAAiB,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpE;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,QAAQ;"}

package/components/Tile/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@import '../../scss/font-settings';
-@import '../../scss/palette';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/screen-reader';
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/palette' as palette;
+@use '../../scss/spacers' as spacers;
+@use '../../scss/screen-reader' as *;
+@use '../../scss/breakpoints' as *;
 @import '../../scss/supernova/styles/colors';
 
 .tile {
@@ -12,23 +12,23 @@
 
   display: flex;
   width: inherit;
-  padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
+  padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
   flex-direction: column;
   justify-content: center;
   background-color: var(--core-color-white);
-  color: $black;
+  color: palette.$black;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
+    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
     justify-content: flex-start;
   }
 
   @media print {
-    border: 1px solid $black;
+    border: 1px solid palette.$black;
   }
 
   &--fixed {
@@ -37,10 +37,10 @@
   }
 
   &--compact {
-    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
+    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      padding: getSpacer(s) getSpacer(m) getSpacer(s) getSpacer(s);
+      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
     }
   }
 
@@ -59,14 +59,14 @@
   }
 
   &--highlighted {
-    background-color: $blueberry500;
-    border-color: $blueberry500;
-    color: $white;
+    background-color: palette.$blueberry500;
+    border-color: palette.$blueberry500;
+    color: palette.$white;
 
     &:hover,
     &:active {
-      background-color: $blueberry700;
-      border-color: $blueberry700;
+      background-color: palette.$blueberry700;
+      border-color: palette.$blueberry700;
     }
 
     &:focus-visible {
@@ -78,26 +78,26 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
     text-align: center;
     line-height: 1.74rem;
     font-weight: 400;
-    margin: getSpacer(3xs) 0 0;
+    margin: spacers.getSpacer(3xs) 0 0;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
       text-align: left;
       font-weight: 600;
-      font-size: $font-size-md;
+      font-size: font-settings.$font-size-md;
       line-height: 1.625rem;
-      margin: getSpacer(s) 0 0 getSpacer(2xs);
+      margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
     }
 
     &--compact {
-      margin: 0 0 0 getSpacer(3xs);
+      margin: 0 0 0 spacers.getSpacer(3xs);
       text-align: left;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        margin-left: getSpacer(2xs);
+        margin-left: spacers.getSpacer(2xs);
       }
     }
   }
@@ -113,11 +113,11 @@
   &__description {
     font-size: 1.125rem;
     line-height: 1.75rem;
-    margin: getSpacer(2xs) 0 0 getSpacer(2xs);
+    margin: spacers.getSpacer(2xs) 0 0 spacers.getSpacer(2xs);
   }
 
   &__children {
-    margin: getSpacer(s) 0 0 getSpacer(2xs);
+    margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
   }
 }
 
@@ -137,7 +137,7 @@
   &--compact {
     flex-direction: row;
     align-items: center;
-    padding-right: getSpacer(s);
+    padding-right: spacers.getSpacer(s);
     padding-bottom: 0;
 
     svg {

package/components/Title/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/font-mixins';
+@use '../../scss/font-mixins' as fonts;
 
 .title {
   overflow-wrap: break-word;
@@ -7,30 +7,30 @@
   margin-right: 0;
 
   &--feature {
-    @include title-feature;
+    @include fonts.title-feature;
   }
 
   &--title1 {
-    @include title1;
+    @include fonts.title1;
   }
 
   &--title2 {
-    @include title2;
+    @include fonts.title2;
   }
 
   &--title3 {
-    @include title3;
+    @include fonts.title3;
   }
 
   &--title4 {
-    @include title4;
+    @include fonts.title4;
   }
 
   &--title5 {
-    @include title5;
+    @include fonts.title5;
   }
 
   &--title6 {
-    @include title6;
+    @include fonts.title6;
   }
 }