@bonniernews/dn-design-system-web 25.0.5 → 25.0.6-beta.0

package/components/teaser-slideshow/teaser-slideshow.scss

@@ -2,7 +2,7 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--slideshow {
-  background-color: $ds-color-surface-background;
+  background-color: $ds-color-surface-primary;
   overflow: hidden;
   max-height: 230px;
   box-sizing: border-box;
@@ -20,12 +20,12 @@
 
     .ds-teaser__title {
       display: inline;
-      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
+      @include ds-typography($ds-typography-functional-heading-xxs, $lineHeight: $ds-lineheight-md);
     }
 
     .ds-teaser__text {
       display: inline;
-      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m);
+      @include ds-typography($ds-typography-functional-body-md, $lineHeight: $ds-lineheight-md);
     }
   }
 

package/components/teaser-split/teaser-split.scss

@@ -7,12 +7,12 @@
   flex-wrap: wrap;
   position: relative;
   box-sizing: border-box;
-  background: $ds-color-background-primary;
+  background: $ds-color-surface-primary;
 
   @at-root .ds-teaser-package > & + & {
     &:before {
       content: "";
-      height: ds-border-width(x1);
+      height: ds-border-width(xxs);
       background-color: $ds-color-border-primary;
       left: 0;
       right: 0;
@@ -56,7 +56,7 @@
       content: "";
       margin-top: ds-spacing($ds-s-100);
       padding-top: ds-spacing($ds-s-075);
-      border-top: ds-border-width(x1) solid $ds-color-border-primary;
+      border-top: ds-border-width(xxs) solid $ds-color-border-primary;
 
       @include ds-mq-smallest-breakpoint(tablet) {
         margin-top: 0;
@@ -70,14 +70,14 @@
     }
 
     .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-twin);
+      @include ds-typography($ds-typography-detail-teaser-twin);
     }
 
     .ds-teaser__media {
       margin-top: ds-spacing($ds-s-025);
 
       .ds-teaser-image__byline {
-        @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
+        @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
       }
 
       @include ds-mq-largest-breakpoint(mobile) {

package/components/teaser-standard/teaser-standard.scss

@@ -10,19 +10,19 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-standard);
+    @include ds-typography($ds-typography-detail-teaser-standard);
 
     &--italic {
-      @include ds-typography($ds-typography-detailteaser-standard-opinion);
+      @include ds-typography($ds-typography-detail-teaser-standard-opinion);
     }
   }
 
   &.ds-teaser--compact {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-detailteaser-standard-compact);
+      @include ds-typography($ds-typography-detail-teaser-standard-compact);
 
       &--italic {
-        @include ds-typography($ds-typography-detailteaser-standard-compact-opinion);
+        @include ds-typography($ds-typography-detail-teaser-standard-compact-opinion);
       }
     }
   }
@@ -43,7 +43,7 @@
     float: right;
 
     .ds-teaser-image__byline {
-      @include ds-typography($ds-typography-functionalmeta01, $forcePx: true, $lineHeight: $ds-lineheight-l);
+      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
     }
 
     @include ds-mq-only-breakpoint(mobile) {

package/components/teaser-swipe-card/teaser-swipe-card.scss

@@ -24,15 +24,15 @@
     display: flex;
     flex-direction: column;
     padding: ds-spacing($ds-s-075);
-    border: ds-border-width(x1) solid $ds-color-border-primary;
-    border-radius: ds-border-radius(x1);
+    border: ds-border-width(xxs) solid $ds-color-border-primary;
+    border-radius: ds-border-radius(012);
     margin: 0;
     flex: 1;
   }
 
   .ds-teaser-image {
-    border-top-right-radius: ds-border-radius(x1);
-    border-top-left-radius: ds-border-radius(x1);
+    border-top-right-radius: ds-border-radius(012);
+    border-top-left-radius: ds-border-radius(012);
     overflow: hidden;
   }
 
@@ -44,15 +44,15 @@
   }
 
   .ds-teaser-swipe-card__time {
-    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: $ds-lineheight-l) {
-      color: $ds-color-text-primary-02;
+    @include ds-typography($ds-typography-functional-meta-md, $lineHeight: $ds-lineheight-lg) {
+      color: $ds-color-text-primary-subtle;
     }
   }
 
   .ds-teaser__title {
     margin-bottom: ds-spacing($ds-s-050);
     flex: 1;
-    @include ds-typography($ds-typography-expressiveheading01);
+    @include ds-typography($ds-typography-expressive-heading-xxs);
   }
 
   @include ds-hover(true) {
@@ -64,7 +64,7 @@
   &.ds-teaser-swipe-card--insandare {
     .ds-teaser__title {
       @include ds-typography(
-        $ds-typography-expressiveheading01,
+        $ds-typography-expressive-heading-xxs,
         $fontWeight: $ds-fontweight-medium,
         $fontStyle: italic
       );
@@ -92,7 +92,7 @@
       display: flex;
       align-items: center;
       margin-bottom: ds-spacing($ds-s-025);
-      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold) {
+      @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold) {
         color: $ds-theme-color;
       }
 
@@ -109,7 +109,7 @@
       &::after {
         content: "";
         display: block;
-        height: ds-border-width(x1);
+        height: ds-border-width(xxs);
         flex: 1;
         background-color: $ds-color-border-primary;
         margin-left: ds-spacing($ds-s-050);

package/components/teaser-tipsa/teaser-tipsa.scss

@@ -7,7 +7,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-detailteaser-tipsa, $lineHeight: $ds-lineheight-m);
+    @include ds-typography($ds-typography-detail-teaser-tipsa, $lineHeight: $ds-lineheight-md);
   }
 
   @include ds-hover(true) {
@@ -18,6 +18,6 @@
 
   .ds-teaser__text {
     margin-top: ds-spacing($ds-s-050);
-    @include ds-typography($ds-typography-functionalbody02);
+    @include ds-typography($ds-typography-functional-body-md);
   }
 }

package/components/text-button/text-button.scss

@@ -13,7 +13,7 @@ $ds-text-btn__underline-offset: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: ds-border-radius(x1);
+  border-radius: ds-border-radius(012);
   padding: 0;
   position: relative;
   text-decoration: none;
@@ -76,7 +76,7 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &:focus-visible {
-    outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+    outline: ds-border-width(xs) solid $ds-color-border-primary-strongest;
     outline-offset: 2px;
   }
 
@@ -87,7 +87,7 @@ $ds-text-btn__underline-offset: 2px;
 
   .ds-text-btn__text {
     text-underline-offset: $ds-text-btn__underline-offset;
-    @include ds-typography-with-force-px($ds-typography-functionalbody02) {
+    @include ds-typography-with-force-px($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
   }
@@ -97,7 +97,7 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &.ds-text-btn--small .ds-text-btn__text {
-    @include ds-typography-with-force-px($ds-typography-functionalbody01);
+    @include ds-typography-with-force-px($ds-typography-functional-body-sm);
   }
 
   @include ds-hover() {
@@ -116,10 +116,10 @@ $ds-text-btn__underline-offset: 2px;
       background-color: unset;
     }
     .ds-icon {
-      color: $ds-color-icon-disabled;
+      color: $ds-color-text-primary-disabled;
     }
     .ds-text-btn__text {
-      color: $ds-color-text-disabled;
+      color: $ds-color-text-primary-disabled;
     }
   }
 
@@ -142,7 +142,7 @@ $ds-text-btn__underline-offset: 2px;
     height: var(--ds-text-btn__icon-size);
     width: var(--ds-text-btn__icon-size);
     margin: var(--ds-text-btn__icon-margin);
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
     svg {
       fill: currentColor;
     }

package/components/text-button-toggle/text-button-toggle.scss

@@ -11,10 +11,10 @@ $ds-text-btn-toggle__icon-size: 24px;
     background-color: unset;
   }
   .ds-icon {
-    color: $ds-color-icon-disabled;
+    color: $ds-color-text-primary-disabled;
   }
   .ds-text-btn-toggle__text {
-    color: $ds-color-text-disabled;
+    color: $ds-color-text-primary-disabled;
   }
 }
 
@@ -25,7 +25,7 @@ $ds-text-btn-toggle__icon-size: 24px;
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  border-radius: ds-border-radius(x1);
+  border-radius: ds-border-radius(012);
   padding: 0;
   position: relative;
 
@@ -34,7 +34,7 @@ $ds-text-btn-toggle__icon-size: 24px;
   }
 
   &:focus-visible {
-    outline: ds-border-width(x2) solid $ds-color-border-focus-02;
+    outline: ds-border-width(xs) solid $ds-color-border-primary;
     outline-offset: 2px;
   }
 
@@ -62,18 +62,18 @@ $ds-text-btn-toggle__icon-size: 24px;
     height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
     width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
     margin: ds-spacing(0 $ds-s-050 0 0);
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
     svg {
       fill: currentColor;
     }
   }
 
   .ds-text-btn-toggle__text {
-    @include ds-typography($ds-typography-functionalbody02) {
+    @include ds-typography($ds-typography-functional-body-md) {
       color: $ds-color-text-primary;
     }
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functionalbody02, true) {
+      @include ds-typography($ds-typography-functional-body-md, true) {
         color: $ds-color-text-primary;
       }
     }

package/components/text-input/text-input.scss

@@ -9,7 +9,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
 
 .ds-form-field__error {
   .ds-text-input__input {
-    border-color: $ds-color-border-critical;
+    border-color: $ds-color-text-critical;
   }
 }
 
@@ -22,19 +22,19 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
 .ds-text-input__input {
   box-sizing: border-box;
   width: 100%;
-  background-color: $ds-color-component-secondary;
-  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x1)) ds-spacing($ds-s-100) - ds-border-width(x1);
-  border: solid ds-border-width(x1) $ds-color-border-primary-02;
-  border-radius: ds-border-radius(x1);
+  background-color: $ds-color-surface-primary;
+  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xxs)) ds-spacing($ds-s-100) - ds-border-width(xxs);
+  border: solid ds-border-width(xxs) $ds-color-border-primary-strong;
+  border-radius: ds-border-radius(012);
   margin: 0;
-  @include ds-typography($ds-typography-functionalbody02) {
+  @include ds-typography($ds-typography-functional-body-md) {
     color: $ds-color-text-primary;
   }
 
   &.password-toggle {
     padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area);
     &:focus {
-      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-border-width(x2));
+      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-border-width(xs));
     }
   }
 
@@ -42,30 +42,29 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   &:not(:placeholder-shown) {
     + .ds-text-input__label {
       top: 0;
-      @include ds-typography($ds-typography-functionalmeta02);
+      @include ds-typography($ds-typography-functional-body-md);
 
       &::before {
-        background-color: $ds-color-component-secondary;
+        background-color: $ds-color-surface-primary;
       }
     }
   }
 
   &:focus {
-    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x2)) ds-spacing($ds-s-100) - ds-border-width(x2);
-    border-color: $ds-color-border-primary-03;
-    border-width: ds-border-width(x2);
+    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xs)) ds-spacing($ds-s-100) - ds-border-width(xs);
+    border-color: $ds-color-border-primary-strongest;
+    border-width: ds-border-width(xs);
 
     + .ds-text-input__label::before {
-      height: ds-border-width(x2);
+      height: ds-border-width(xs);
     }
   }
 
   &:disabled {
-    background-color: $ds-color-component-secondary-overlay-02;
     cursor: not-allowed;
 
     + .ds-text-input__label {
-      color: $ds-color-text-disabled;
+      color: $ds-color-text-primary-disabled;
       cursor: not-allowed;
     }
   }
@@ -83,12 +82,12 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   transition:
     font-size 0.1s ease-in,
     top 0.1s ease-in;
-  @include ds-typography($ds-typography-functionalbody02);
+  @include ds-typography($ds-typography-functional-body-md);
   &::before {
     content: "";
     width: calc(100% + ds-spacing($ds-s-050));
     left: -#{ds-spacing($ds-s-025)};
-    height: ds-border-width(x1);
+    height: ds-border-width(xxs);
     position: absolute;
     top: ds-spacing($ds-s-050, rem);
     z-index: -1;
@@ -113,31 +112,31 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   .ds-text-input__input {
-    padding: ds-spacing($ds-s-100) - ds-border-width(x1);
-    @include ds-typography($ds-typography-functionalbody02, true);
+    padding: ds-spacing($ds-s-100) - ds-border-width(xxs);
+    @include ds-typography($ds-typography-functional-body-md, true);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
       &:focus {
-        padding-right: ($ds-text-input-toggle-btn__area - ds-border-width(x2));
+        padding-right: ($ds-text-input-toggle-btn__area - ds-border-width(xs));
       }
     }
 
     &:focus,
     &:not(:placeholder-shown) {
       + .ds-text-input__label {
-        @include ds-typography($ds-typography-functionalmeta02, true);
+        @include ds-typography($ds-typography-functional-body-md, true);
       }
     }
 
     &:focus {
-      padding: ds-spacing($ds-s-100) - ds-border-width(x2);
+      padding: ds-spacing($ds-s-100) - ds-border-width(xs);
     }
   }
 
   .ds-text-input__label {
     top: ds-spacing($ds-s-150);
-    @include ds-typography($ds-typography-functionalbody02, true);
+    @include ds-typography($ds-typography-functional-body-md, true);
     &::before {
       top: ds-spacing($ds-s-050);
     }

package/components/tooltip/tooltip.scss

@@ -5,7 +5,7 @@
 @use "../../components/icon-button/icon-button.scss";
 
 .ds-tooltip {
-  background-color: $ds-color-surface-raised;
+  background-color: $ds-color-surface-primary-raised-strong;
   color: $ds-color-text-primary;
   box-sizing: border-box;
   position: relative;
@@ -13,7 +13,7 @@
   display: flex;
 
   .ds-tooltip__close {
-    color: $ds-color-icon-primary;
+    color: $ds-color-text-primary;
     align-self: center;
     margin-left: ds-spacing($ds-s-100);
   }
@@ -24,7 +24,7 @@
 
   &.ds-tooltip--arrow-top::after,
   &.ds-tooltip--arrow-bottom::after {
-    border-bottom-color: $ds-color-surface-raised;
+    border-bottom-color: $ds-color-surface-primary-raised-strong;
   }
 
   &--arrow-top::after {
@@ -45,11 +45,11 @@
   }
 
   .ds-tooltip__content {
-    @include ds-typography($ds-typography-functionalbody01);
+    @include ds-typography($ds-typography-functional-body-sm);
 
     h2 {
       margin: 0;
-      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
+      @include ds-typography($ds-typography-functional-body-md, $fontWeight: $ds-fontweight-semibold);
 
       + p {
         margin-top: 0;

package/components/video-caption/video-caption.scss

@@ -1,19 +1,19 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-video-caption {
-  @include ds-typography($ds-typography-functionalbody01) {
+  @include ds-typography($ds-typography-functional-body-sm) {
     color: $ds-color-text-primary;
   }
 
   .ds-video-caption__duration {
     margin-right: ds-spacing($ds-s-025);
-    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-bold);
+    @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-bold);
   }
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-functionalbody01, true);
+    @include ds-typography($ds-typography-functional-body-sm, true);
     .ds-video-caption__duration {
-      @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $fontWeight: $ds-fontweight-bold);
+      @include ds-typography($ds-typography-functional-body-sm, $forcePx: true, $fontWeight: $ds-fontweight-bold);
     }
   }
 }

package/components/vip-badge/vip-badge.scss

@@ -7,25 +7,25 @@ $ds-vip-badge__icon-size: 16px;
   display: none;
   align-items: center;
   box-sizing: content-box;
-  border-radius: ds-px-to-rem(ds-border-radius(x1)) 0 ds-px-to-rem(ds-border-radius(x1))
-    ds-px-to-rem(ds-border-radius(x1));
-  background-color: $ds-color-component-business;
-  color: $ds-color-static-white;
-  fill: $ds-color-static-white;
+  border-radius: ds-px-to-rem(ds-border-radius(012)) 0 ds-px-to-rem(ds-border-radius(012))
+    ds-px-to-rem(ds-border-radius(012));
+  background-color: $ds-color-business;
+  color: $ds-color-neutral-white;
+  fill: $ds-color-neutral-white;
   padding: ds-spacing($ds-s-025, rem);
   @include ds-typography(
-    $ds-typography-functionalmeta01,
-    $lineHeight: $ds-lineheight-l,
+    $ds-typography-functional-meta-sm,
+    $lineHeight: $ds-lineheight-lg,
     $letterSpacing: $ds-letterspacing-none
   );
 
   @at-root .ds-force-px#{&} {
-    border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
+    border-radius: ds-border-radius(012) 0 ds-border-radius(012) ds-border-radius(012);
     padding: ds-spacing($ds-s-025);
     @include ds-typography(
-      $ds-typography-functionalmeta01,
+      $ds-typography-functional-meta-sm,
       $forcePx: true,
-      $lineHeight: $ds-lineheight-l,
+      $lineHeight: $ds-lineheight-lg,
       $letterSpacing: $ds-letterspacing-none
     );
   }

package/foundations/colors.scss

@@ -1,12 +1,12 @@
 @use "sass:meta";
 @use "sass:string";
-@use "./variables/colorsDnLightTokens";
-@use "./variables/colorsDnDarkTokens";
+@use "./variables/colorsDnLight";
+@use "./variables/colorsDnDark";
 @use "./helpers/colors.scss" as *;
 
 html,
 .ds-light {
-  @each $name, $value in meta.module-variables("colorsDnLightTokens") {
+  @each $name, $value in meta.module-variables("colorsDnLight") {
     --ds-color-#{string.slice($name, 8)}: #{$value};
   }
 }
@@ -26,25 +26,13 @@ html.support-color-scheme:not(.ds-light) {
 }
 
 html {
-  --ds-theme-color: #{$ds-color-component-brand};
+  --ds-theme-color: #{$ds-color-text-brand};
 }
 
 .ds-theme--nyheter {
-  --ds-theme-color: #{$ds-color-component-brand};
-}
-
-.ds-theme--ekonomi {
-  --ds-theme-color: #{$ds-color-static-economy};
+  --ds-theme-color: #{$ds-color-text-brand};
 }
 
 .ds-theme--kultur {
-  --ds-theme-color: #{$ds-color-static-kultur};
-}
-
-.ds-theme--sport {
-  --ds-theme-color: #{$ds-color-static-sport};
-}
-
-.ds-theme--sthlm {
-  --ds-theme-color: #{$ds-color-static-sthlm};
+  --ds-theme-color: #{$ds-color-text-culture};
 }

package/foundations/cssVariables.scss

@@ -2,3 +2,4 @@
 @use "./fontFamily.scss";
 @use "./shadows.scss";
 @use "./spacing.scss";
+@use "./gradients.scss";

package/foundations/gradients.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+@use "sass:meta";
+@use "./helpers/gradients.scss" as *;
+@use "./variables/gradientsDnLight";
+@use "./variables/gradientsDnDark";
+
+html,
+.ds-light {
+  @each $name, $value in meta.module-variables("gradientsDnLight") {
+    @each $key in map.keys($value) {
+      @include ds-gradient($key, light);
+    }
+  }
+}
+
+// for manually switching on dark mode
+// dnDark should only be used in storybook otherwise use ds-dark
+.dnDark,
+.ds-dark {
+  @each $name, $value in meta.module-variables("gradientsDnDark") {
+    @each $key in map.keys($value) {
+      @include ds-gradient($key, dark);
+    }
+  }
+}

package/foundations/helpers/colors.scss

@@ -3,36 +3,28 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../variables/colorsCssVariables" as *;
-@use "../variables/colorsDnLightTokens";
-@use "../variables/colorsDnDarkTokens";
+@use "../variables/colorsDnLight";
+@use "../variables/colorsDnDark";
+
+// Colors not available in Figma Variables
+$ds-color-business: #3a8352;
+$ds-color-green-100: #cee4d6;
 
 $ds-theme-color: var(--ds-theme-color);
 
 @mixin get-dark-color-scheme() {
-  @each $name, $value in meta.module-variables("colorsDnDarkTokens") {
+  @each $name, $value in meta.module-variables("colorsDnDark") {
     --ds-color-#{string.slice($name, 13)}: #{$value};
   }
 
   // these are not static so needs to be defined here also
-  --ds-theme-color: #{$ds-color-component-brand};
+  --ds-theme-color: #{$ds-color-text-brand};
 
   .ds-theme--nyheter {
-    --ds-theme-color: #{$ds-color-border-brand};
-  }
-
-  .ds-theme--ekonomi {
-    --ds-theme-color: #{$ds-color-static-economy};
+    --ds-theme-color: #{$ds-color-text-brand};
   }
 
   .ds-theme--kultur {
-    --ds-theme-color: #{$ds-color-static-kultur};
-  }
-
-  .ds-theme--sport {
-    --ds-theme-color: #{$ds-color-static-sport};
-  }
-
-  .ds-theme--sthlm {
-    --ds-theme-color: #{$ds-color-static-sthlm};
+    --ds-theme-color: #{$ds-color-text-culture};
   }
 }

package/foundations/helpers/forward.helpers.scss

@@ -10,3 +10,4 @@
 @forward "spacing.scss";
 @forward "typography.scss";
 @forward "utilities.scss";
+@forward "gradients.scss";