@helsenorge/designsystem-react 10.5.0 → 10.6.1

package/components/PromoPanel/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 $colors: 'neutral', 'blueberry', 'cherry';
 
@@ -21,22 +21,22 @@ $colors: 'neutral', 'blueberry', 'cherry';
       inset 0 0 0 2px palette.$black;
   }
 
-  @media (min-width: map.get($grid-breakpoints, xs)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
     padding-left: 0;
   }
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     padding-right: spacers.getSpacer(s);
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-right: spacers.getSpacer(l);
   }
 
   &--no-illustration {
     padding-left: spacers.getSpacer(s);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(l);
     }
   }
@@ -54,7 +54,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__illustration {
     display: none;
 
-    @media (min-width: map.get($grid-breakpoints, xs)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
       display: inline;
     }
   }
@@ -67,7 +67,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
     padding-top: spacers.getSpacer(m);
     padding-bottom: spacers.getSpacer(m);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       gap: spacers.getSpacer(2xs);
       padding-top: spacers.getSpacer(l);
       padding-bottom: spacers.getSpacer(l);
@@ -89,11 +89,11 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__icon {
     margin-left: spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       margin-left: spacers.getSpacer(s);
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       margin-left: spacers.getSpacer(l);
     }
   }

package/components/RadioButton/styles.module.scss

@@ -4,7 +4,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 @mixin dashed-border() {
   box-shadow: none;
@@ -163,7 +163,7 @@
     }
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     &__large {
       padding: 1.68rem spacers.getSpacer(l);
     }

package/components/Select/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .select-wrapper {
   display: flex;
@@ -65,7 +65,7 @@
   line-height: font-settings.$lineheight-size-sm;
   border-radius: 0;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     height: 3.125rem;
     font-size: font-settings.$font-size-md;
   }
@@ -98,7 +98,7 @@
     font-family: inherit;
     font-size: font-settings.$font-size-sm;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
     }
   }

package/components/ServiceMessage/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
 
 .service-message {

package/components/SharingStatus/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 $dot-size: 1.765rem;
 

package/components/Slider/styles.module.scss

@@ -1,8 +1,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 $track-height-offset: 1rem;
 $mark-size: spacers.getSpacer(l);

package/components/StatusDot/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 $status-dot-size: 0.937rem;
 
@@ -15,7 +15,7 @@ $status-dot-size: 0.937rem;
   line-height: 1.4rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     font-size: font-settings.$font-size-sm;
     line-height: 1.6rem;
   }
@@ -37,7 +37,7 @@ $status-dot-size: 0.937rem;
     min-width: $status-dot-size;
     min-height: $status-dot-size;
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       top: spacers.getSpacer(3xs);
     }
 

package/components/StepButtons/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .stepbuttons {
   margin-top: spacers.getSpacer(m);
@@ -21,7 +21,7 @@
     display: flex;
     gap: spacers.getSpacer(s);
 
-    @media (max-width: map.get($grid-max-breakpoints, xs)) {
+    @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
       width: 100%;
     }
 
@@ -33,7 +33,7 @@
   &__button {
     &--back,
     &--forward {
-      @media (max-width: map.get($grid-max-breakpoints, xs)) {
+      @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
         width: 50%;
       }
     }

package/components/Stepper/styles.module.scss

@@ -2,14 +2,14 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .stepper-wrapper {
   display: flex;
   align-items: center;
   min-height: spacers.getSpacer(l);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     min-height: spacers.getSpacer(xl);
   }
 }

package/components/StickyNote/styles.module.scss

@@ -1,5 +1,5 @@
 @use '../../scss/font-settings' as font-settings;
-@import '../../scss/supernova/styles/colors';
+@import '../../scss/supernova/styles/colors.css';
 
 .sticky-note {
   position: relative;

package/components/Table/styles.module.scss

@@ -4,7 +4,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
 
 /* fix outline for Safari */

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../../scss/breakpoints' as *;
+@use '../../../scss/breakpoints' as breakpoints;
 @import '../../../scss/supernova/styles/colors';
 
 .tab-list {
@@ -25,7 +25,7 @@
     display: none; /* Safari */
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-left: 0;
     padding-right: 0;
 

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../../scss/spacers' as spacers;
 @use '../../../scss/palette' as palette;
-@use '../../../scss/breakpoints' as *;
+@use '../../../scss/breakpoints' as breakpoints;
 @import '../../../scss/supernova/styles/colors';
 
 .tab-panel {
@@ -18,7 +18,7 @@
     }
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @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-top: 0;
@@ -27,7 +27,7 @@
     &#{$tab-panel}--first {
       border-radius: 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         border-radius: 0 0 0.5rem 0.5rem;
       }
     }

package/components/Tabs/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .tab-list-wrapper {
   position: relative;
@@ -21,7 +21,7 @@
   border-radius: 0;
   height: 50px;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     border-right: 1px solid var(--color-action-border-onlight-focus);
     border-left: 1px solid var(--color-action-border-onlight-focus);
     height: 50px;

package/components/Tag/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .tag {
   $tag: &;

package/components/TagList/styles.module.scss

@@ -1,6 +1,6 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .tag-list {
   all: unset;

package/components/Textarea/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/input' as input;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .textarea {
   @include input.input-wrapper;

package/components/Tile/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
@@ -22,7 +22,7 @@
   border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
     justify-content: flex-start;
   }
@@ -39,7 +39,7 @@
   &--compact {
     padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
     }
   }
@@ -84,7 +84,7 @@
     font-weight: 400;
     margin: spacers.getSpacer(3xs) 0 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       text-align: left;
       font-weight: 600;
       font-size: font-settings.$font-size-md;
@@ -96,7 +96,7 @@
       margin: 0 0 0 spacers.getSpacer(3xs);
       text-align: left;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: spacers.getSpacer(2xs);
       }
     }
@@ -126,7 +126,7 @@
   flex-direction: column;
   align-items: center;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     align-items: start;
 
     @media print {

package/components/Toggle/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .toggle-container {
   display: flex;
@@ -27,7 +27,7 @@
     color: var(--core-color-neutral-900);
     margin-left: spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       margin-left: spacers.getSpacer(s);
     }
 
@@ -39,7 +39,7 @@
       margin-left: 0;
       margin-right: spacers.getSpacer(xs);
 
-      @media (min-width: map.get($grid-breakpoints, sm)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
         margin-right: spacers.getSpacer(s);
       }
     }
@@ -52,7 +52,7 @@
     margin-left: 3.9rem;
     text-align: left;
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       font-size: font-settings.$font-size-sm;
       line-height: font-settings.$lineheight-size-xs;
       text-align: left;

package/components/Trigger/Trigger.d.ts

@@ -15,6 +15,7 @@ export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonE
     /**
      * Controls the icon and color. Default: help.
      */
+    /** @deprecated This will be removed in next major version */
     variant?: TriggerVariant;
     /**
      * Changes the design based on the background the trigger is placed on. Default: onlight.

package/components/Validation/styles.module.scss

@@ -2,13 +2,13 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .validation {
   &__error-wrapper {
     margin-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin-bottom: spacers.getSpacer(m);
     }
   }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.5.0",
+  "version": "10.6.1",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_font-mixins.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
 @use './spacers' as spacers;
-@use './breakpoints' as *;
+@use './breakpoints' as breakpoints;
 
 @mixin title-feature {
   font-size: 2.375rem;
   line-height: 2.875rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 4rem;
     line-height: 5rem;
   }
@@ -18,7 +18,7 @@
   line-height: 2.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 3rem;
     line-height: 3.625rem;
   }
@@ -29,7 +29,7 @@
   line-height: 1.938rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 2rem;
     line-height: 2.375rem;
   }
@@ -40,7 +40,7 @@
   line-height: 1.813rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.625rem;
     line-height: 2rem;
   }
@@ -51,7 +51,7 @@
   line-height: 1.625rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.375rem;
     line-height: 1.813rem;
   }
@@ -64,7 +64,7 @@
   font-weight: 600;
   text-transform: uppercase;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.563rem;
   }
@@ -75,7 +75,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.563rem;
   }
@@ -85,7 +85,7 @@
   font-size: 1.125rem;
   line-height: 1.688rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.875rem;
   }
@@ -96,7 +96,7 @@
   line-height: 1.625rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 1.938rem;
   }
@@ -107,7 +107,7 @@
   line-height: 1.438rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 1.938rem;
   }
@@ -118,7 +118,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -129,7 +129,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -140,7 +140,7 @@
   line-height: 1.2rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.463rem;
   }
@@ -151,7 +151,7 @@
   line-height: 1.2rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.463rem;
   }
@@ -161,7 +161,7 @@
   font-size: 1rem;
   line-height: 1.5rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.125rem;
     line-height: 1.4375rem;
   }
@@ -191,7 +191,7 @@
   font-size: 1.125rem;
   line-height: 1.688rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     line-height: 1.4375rem;
   }
 }
@@ -200,7 +200,7 @@
   font-size: 1.125rem;
   line-height: 1.563rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
@@ -211,7 +211,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -222,7 +222,7 @@
   line-height: 1.375rem;
   font-weight: 600;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }
@@ -233,7 +233,7 @@
   line-height: 1.375rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: 1.25rem;
     line-height: 1.625rem;
   }

package/scss/_input.scss

@@ -2,7 +2,7 @@
 @use './palette' as palette;
 @use './spacers' as spacers;
 @use './font-settings' as font-settings;
-@use './breakpoints' as *;
+@use './breakpoints' as breakpoints;
 
 @mixin input-wrapper {
   width: 100%;
@@ -145,7 +145,7 @@
     background-color: transparent;
     width: 100%;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
     }