@oslokommune/punkt-css 12.12.2 → 12.12.4

package/dist/scss/abstracts/functions/_index.scss

@@ -1,14 +1,18 @@
 // Sass tools
 
+@use 'sass:map';
+@use 'sass:string';
+
 /// Map deep get
 /// @author Kitty Giraudel
 /// @access public
 /// @param {Map} $map - Map
 /// @param {Arglist} $keys - Key chain
 /// @return {*} - Desired value
+
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -18,13 +22,7 @@
 // Requires the use of quotes around data URIs.
 
 // Characters which are escaped by the escape-svg function
-$escaped-characters: (
-  ('<', '%3c'),
-  ('>', '%3e'),
-  ('#', '%23'),
-  ('(', '%28'),
-  (')', '%29')
-) !default;
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
@@ -35,26 +33,22 @@ $escaped-characters: (
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
+    @return string.slice($string, 1, $index - 1) + $replace +
+      str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
 }
 
 @function escape-svg($string) {
-  @if str-index($string, 'data:image/svg+xml') {
+  @if string.index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, 'url(') == 1 {
-        $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
+      @if string.index($string, 'url(') == 1 {
+        $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }

package/dist/scss/abstracts/mixins/_typography.scss

@@ -10,23 +10,20 @@
   .#{$name} {
     font-size: map.get(variables.$font-size, map.get($style, 'size'));
     font-weight: map.get(variables.$font-weight, map.get($style, 'weight'));
-    letter-spacing: map.get(variables.$letter-spacing,
-        map.get($style, 'letter-spacing'));
-    line-height: map.get(variables.$line-height,
-        map.get($style, 'line-height'));
+    letter-spacing: map.get(variables.$letter-spacing, map.get($style, 'letter-spacing'));
+    line-height: map.get(variables.$line-height, map.get($style, 'line-height'));
   }
 }
 
 // Fetch pkt get-text from settings files
 @mixin get-text($name) {
-  font-size: map.get(variables.$font-size,
-      functions.map-deep-get(variables.$pkt-styles, $name, 'size'));
-  font-weight: map.get(variables.$font-weight,
-      functions.map-deep-get(variables.$pkt-styles, $name, 'weight'));
-  letter-spacing: map.get(variables.$letter-spacing,
-      functions.map-deep-get(variables.$pkt-styles, $name, 'letter-spacing'));
-  line-height: map.get(variables.$line-height,
-      functions.map-deep-get(variables.$pkt-styles, $name, 'line-height'));
+  letter-spacing: map.get(
+    variables.$letter-spacing,
+    functions.map-deep-get(variables.$pkt-styles, $name, 'letter-spacing')
+  );
+  font-weight: map.get(variables.$font-weight, functions.map-deep-get(variables.$pkt-styles, $name, 'weight'));
+  font-size: map.get(variables.$font-size, functions.map-deep-get(variables.$pkt-styles, $name, 'size'));
+  line-height: map.get(variables.$line-height, functions.map-deep-get(variables.$pkt-styles, $name, 'line-height'));
 }
 
 @mixin truncate-text() {

package/dist/scss/abstracts/variables/_colors.scss

@@ -1,109 +1,111 @@
+@use 'sass:map';
 $pkt-colors: (
   // Blue
-  brand-blue-100: #F1FDFF,
-  brand-blue-200: #E5FCFF,
-  brand-blue-300: #D1F9FF,
-  brand-blue-500: #B3F5FF,
-  brand-blue-1000: #6FE9FF,
-  brand-dark-blue-700: #6A698B,
-  brand-dark-blue-1000: #2A2859,
-  brand-warm-blue-1000: #1F42AA,
+  brand-blue-100: #f1fdff,
+  brand-blue-200: #e5fcff,
+  brand-blue-300: #d1f9ff,
+  brand-blue-500: #b3f5ff,
+  brand-blue-1000: #6fe9ff,
+  brand-dark-blue-700: #6a698b,
+  brand-dark-blue-1000: #2a2859,
+  brand-warm-blue-1000: #1f42aa,
   // Green
-  brand-green-400: #C7FDE9,
-  brand-green-1000: #43F8B6,
-  brand-light-green-400: #E5FFE6,
-  brand-light-green-1000: #C7F6C9,
-  brand-dark-green-1000: #034B45,
+  brand-green-400: #c7fde9,
+  brand-green-1000: #43f8b6,
+  brand-light-green-400: #e5ffe6,
+  brand-light-green-1000: #c7f6c9,
+  brand-dark-green-1000: #034b45,
 
   // Yellow
-  brand-yellow-1000: #F9C66B,
-  brand-yellow-500: #FFE7BC,
+  brand-yellow-1000: #f9c66b,
+  brand-yellow-500: #ffe7bc,
 
   // Red
-  brand-red-100: #FFF2F1,
-  brand-red-400: #FFDFDC,
-  brand-red-600: #FFB4AC,
-  brand-red-1000: #FF8274,
+  brand-red-100: #fff2f1,
+  brand-red-400: #ffdfdc,
+  brand-red-600: #ffb4ac,
+  brand-red-1000: #ff8274,
 
   // Beige
-  brand-light-beige-1000: #F8F0DD,
-  brand-dark-beige-1000: #D0BFAE,
+  brand-light-beige-1000: #f8f0dd,
+  brand-dark-beige-1000: #d0bfae,
 
   // Neutrals
-  brand-neutrals-white: #FFFFFF,
-  brand-neutrals-100: #F9F9F9,
-  brand-neutrals-200: #F2F2F2,
-  brand-neutrals-1000: #2C2C2C,
+  brand-neutrals-white: #ffffff,
+  brand-neutrals-100: #f9f9f9,
+  brand-neutrals-200: #f2f2f2,
+  brand-neutrals-1000: #2c2c2c,
   brand-neutrals-black: #000000,
   brand-neutrals-transparent: transparent,
 
   // Purple
-  brand-purple-1000: #E0ADFF,
+  brand-purple-1000: #e0adff,
 
   // Grays
-  grays-gray-100: #E6E6E6,
-  grays-gray-200: #CCCCCC,
-  grays-gray-300: #B3B3B3,
-  grays-gray-400: #9A9A9A,
+  grays-gray-100: #e6e6e6,
+  grays-gray-200: #cccccc,
+  grays-gray-300: #b3b3b3,
+  grays-gray-400: #9a9a9a,
   grays-gray-500: #808080,
   grays-gray-600: #666666,
-  grays-gray-700: #4D4D4D,
+  grays-gray-700: #4d4d4d,
   grays-gray-800: #333333,
-  grays-gray-900: #1A1A1A,
-  grays-gray-1000: #2C2C2C,
-  ) !default;
+  grays-gray-900: #1a1a1a,
+  grays-gray-1000: #2c2c2c
+) !default;
 
 $pkt-semantic-colors: (
   // Background
-  background-card: map-get($pkt-colors, brand-neutrals-white),
-  background-default: map-get($pkt-colors, brand-neutrals-white),
-  background-subtle: map-get($pkt-colors, brand-neutrals-100),
-  background-transparent: map-get($pkt-colors, brand-neutrals-transparent),
+  background-card: map.get($pkt-colors, brand-neutrals-white),
+  background-default: map.get($pkt-colors, brand-neutrals-white),
+  background-subtle: map.get($pkt-colors, brand-neutrals-100),
+  background-transparent: map.get($pkt-colors, brand-neutrals-transparent),
   // Borders
-  border-default: map-get($pkt-colors, brand-dark-blue-1000),
-  border-beige: map-get($pkt-colors, brand-dark-beige-1000),
-  border-blue: map-get($pkt-colors, brand-blue-1000),
-  border-gray: map-get($pkt-colors, grays-gray-200),
-  border-green: map-get($pkt-colors, brand-green-1000),
-  border-light-beige: map-get($pkt-colors, brand-light-beige-1000),
-  border-red: map-get($pkt-colors, brand-red-1000),
-  border-subtle: map-get($pkt-colors, brand-neutrals-200),
-  border-yellow: map-get($pkt-colors, brand-yellow-1000),
-  border-states-active: map-get($pkt-colors, brand-warm-blue-1000),
-  border-states-disabled: map-get($pkt-colors, grays-gray-300),
-  border-states-focus: map-get($pkt-colors, brand-purple-1000),
-  border-states-hover: map-get($pkt-colors, brand-warm-blue-1000),
+  border-default: map.get($pkt-colors, brand-dark-blue-1000),
+  border-beige: map.get($pkt-colors, brand-dark-beige-1000),
+  border-blue: map.get($pkt-colors, brand-blue-1000),
+  border-gray: map.get($pkt-colors, grays-gray-200),
+  border-green: map.get($pkt-colors, brand-green-1000),
+  border-light-beige: map.get($pkt-colors, brand-light-beige-1000),
+  border-red: map.get($pkt-colors, brand-red-1000),
+  border-subtle: map.get($pkt-colors, brand-neutrals-200),
+  border-yellow: map.get($pkt-colors, brand-yellow-1000),
+  border-states-active: map.get($pkt-colors, brand-warm-blue-1000),
+  border-states-disabled: map.get($pkt-colors, grays-gray-300),
+  border-states-focus: map.get($pkt-colors, brand-purple-1000),
+  border-states-hover: map.get($pkt-colors, brand-warm-blue-1000),
   // Surface
-  surface-default-faded-green: map-get($pkt-colors, brand-light-green-400),
-  surface-default-faded-red: map-get($pkt-colors, brand-red-400),
-  surface-default-gray: map-get($pkt-colors, brand-neutrals-100),
-  surface-default-light-beige: map-get($pkt-colors, brand-light-beige-1000),
-  surface-default-light-blue: map-get($pkt-colors, brand-blue-300),
-  surface-default-light-green: map-get($pkt-colors, brand-green-400),
-  surface-default-red: map-get($pkt-colors, brand-red-600),
-  surface-default-yellow: map-get($pkt-colors, brand-yellow-500),
-  surface-strong-beige: map-get($pkt-colors, brand-dark-beige-1000),
-  surface-strong-blue: map-get($pkt-colors, brand-blue-1000),
-  surface-strong-dark-blue: map-get($pkt-colors, brand-dark-blue-1000),
-  surface-strong-dark-green: map-get($pkt-colors, brand-dark-green-1000),
-  surface-strong-gray: map-get($pkt-colors, brand-neutrals-200),
-  surface-strong-green: map-get($pkt-colors, brand-green-1000),
-  surface-strong-light-green: map-get($pkt-colors, brand-light-green-1000),
-  surface-strong-red: map-get($pkt-colors, brand-red-1000),
-  surface-strong-yellow: map-get($pkt-colors, brand-yellow-1000),
-  surface-subtle-light-blue: map-get($pkt-colors, brand-blue-200),
-  surface-subtle-light-red: map-get($pkt-colors, brand-red-100),
-  surface-subtle-pale-blue: map-get($pkt-colors, brand-blue-100),
-  surface-subtle-white: map-get($pkt-colors, brand-neutrals-white),
+  surface-default-faded-green: map.get($pkt-colors, brand-light-green-400),
+  surface-default-faded-red: map.get($pkt-colors, brand-red-400),
+  surface-default-gray: map.get($pkt-colors, brand-neutrals-100),
+  surface-default-light-beige: map.get($pkt-colors, brand-light-beige-1000),
+  surface-default-light-blue: map.get($pkt-colors, brand-blue-300),
+  surface-default-light-green: map.get($pkt-colors, brand-green-400),
+  surface-default-red: map.get($pkt-colors, brand-red-600),
+  surface-default-yellow: map.get($pkt-colors, brand-yellow-500),
+  surface-strong-beige: map.get($pkt-colors, brand-dark-beige-1000),
+  surface-strong-blue: map.get($pkt-colors, brand-blue-1000),
+  surface-strong-dark-blue: map.get($pkt-colors, brand-dark-blue-1000),
+  surface-strong-dark-green: map.get($pkt-colors, brand-dark-green-1000),
+  surface-strong-gray: map.get($pkt-colors, brand-neutrals-200),
+  surface-strong-green: map.get($pkt-colors, brand-green-1000),
+  surface-strong-light-green: map.get($pkt-colors, brand-light-green-1000),
+  surface-strong-red: map.get($pkt-colors, brand-red-1000),
+  surface-strong-yellow: map.get($pkt-colors, brand-yellow-1000),
+  surface-subtle-light-blue: map.get($pkt-colors, brand-blue-200),
+  surface-subtle-light-red: map.get($pkt-colors, brand-red-100),
+  surface-subtle-pale-blue: map.get($pkt-colors, brand-blue-100),
+  surface-subtle-white: map.get($pkt-colors, brand-neutrals-white),
   // Text
-  text-body-dark: map-get($pkt-colors, brand-dark-blue-1000),
-  text-body-default: map-get($pkt-colors, brand-dark-blue-1000),
-  text-body-light: map-get($pkt-colors, brand-neutrals-white),
-  text-placeholder: map-get($pkt-colors, grays-gray-600),
-  text-action-disabled: map-get($pkt-colors, grays-gray-600),
-  text-action-active: map-get($pkt-colors, brand-warm-blue-1000),
-  text-action-hover: map-get($pkt-colors, brand-warm-blue-1000),
-  text-action-normal: map-get($pkt-colors, brand-dark-blue-1000)) !default;
+  text-body-dark: map.get($pkt-colors, brand-dark-blue-1000),
+  text-body-default: map.get($pkt-colors, brand-dark-blue-1000),
+  text-body-light: map.get($pkt-colors, brand-neutrals-white),
+  text-placeholder: map.get($pkt-colors, grays-gray-600),
+  text-action-disabled: map.get($pkt-colors, grays-gray-600),
+  text-action-active: map.get($pkt-colors, brand-warm-blue-1000),
+  text-action-hover: map.get($pkt-colors, brand-warm-blue-1000),
+  text-action-normal: map.get($pkt-colors, brand-dark-blue-1000)
+) !default;
 
 // Deprecated colors
 $colors: (
@@ -163,4 +165,5 @@ $colors: (
   color-grayscale-70: #4d4d4d,
   color-grayscale-80: #333,
   color-grayscale-90: #1a1a1a,
-  color-black: #000) !default;
+  color-black: #000
+) !default;

package/dist/scss/components/_alert.scss

@@ -51,8 +51,8 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   color: var(--pkt-color-alert-txt);
 
   &__title {
-    @include get-text('pkt-txt-18-medium');
     margin: 0 0 $-alert-spacing 2.5rem;
+    @include get-text('pkt-txt-18-medium');
   }
 
   &__close ~ &__title {
@@ -60,10 +60,11 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   }
 
   &__text {
-    @include get-text('pkt-txt-18-light');
     margin: 0 0 0 2.5rem;
     overflow-wrap: break-word;
 
+    @include get-text('pkt-txt-18-light');
+
     p {
       margin-bottom: map.get(variables.$spacing, 'size-16');
 
@@ -87,8 +88,9 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   }
 
   &__date {
-    @include get-text('pkt-txt-14-light');
     margin-top: $-alert-spacing;
+
+    @include get-text('pkt-txt-14-light');
   }
 
   &__icon {
@@ -123,8 +125,8 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   }
 
   .#{$-module-name}__text {
-    @include get-text('pkt-txt-16-light');
     margin: 0 2.875rem;
+    @include get-text('pkt-txt-16-light');
   }
   .#{$-module-name}__close {
     top: 0.25rem;

package/dist/scss/components/_backlink.scss

@@ -1,4 +1,4 @@
-/* 
+/*
  * Back link component
  */
 
@@ -13,7 +13,7 @@
   }
 
   &__text {
-    @include typography.get-text('pkt-txt-14-light');
     flex-grow: 1;
+    @include typography.get-text('pkt-txt-14-light');
   }
 }

package/dist/scss/components/_footer.scss

@@ -14,13 +14,13 @@ $-footer-icon-r-margin: map.get(variables.$spacing, 'size-8');
 $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
 
 .pkt-footer {
-  @include typography.get-text('pkt-txt-18-light');
   padding: map.get(variables.$spacing, 'size-40') map.get(variables.$spacing, 'size-24');
   background-color: $-footer-bg-color;
   color: $-footer-color;
   display: flex;
   align-items: center;
 
+  @include typography.get-text('pkt-txt-18-light');
   @include bp('laptop-up') {
     padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-24');
     justify-content: center;
@@ -31,10 +31,10 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
   }
 
   &__title {
-    @include typography.get-text('pkt-txt-24-medium');
     margin-bottom: map.get(variables.$spacing, 'size-32');
     margin-top: 0;
     color: $-footer-color;
+    @include typography.get-text('pkt-txt-24-medium');
   }
 
   // tekstfelt
@@ -127,13 +127,13 @@ $-footer-link-b-margin: map.get(variables.$spacing, 'size-16');
 // Simple footer
 
 .pkt-footer-simple {
-  @include typography.get-text('pkt-txt-18-light');
   padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-24');
   background-color: $-footer-bg-color;
   color: $-footer-color;
   display: flex;
   align-items: center;
 
+  @include typography.get-text('pkt-txt-18-light');
   @include bp('laptop-up') {
     justify-content: center;
   }

package/dist/scss/components/_inputwrapper.scss

@@ -6,13 +6,13 @@
 
 .pkt-inputwrapper {
   &__label {
-    @include typography.get-text('pkt-txt-18-medium');
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: map.get(variables.$spacing, 'size-8');
     color: var(--pkt-color-text-body-default);
 
+    @include typography.get-text('pkt-txt-18-medium');
     > h2 {
       font-size: inherit;
       font-weight: inherit;
@@ -25,17 +25,17 @@
 
   &__helptext {
     width: min(100%, 31rem);
-    @include typography.get-text('pkt-txt-14-light');
     color: var(--pkt-color-text-body-default);
+    @include typography.get-text('pkt-txt-14-light');
 
     > .pkt-btn,
     &-expandable .pkt-btn {
-      @include typography.get-text('pkt-txt-14-light');
       padding: 0;
       height: auto;
       display: inline-flex;
       text-align: left;
       align-items: center;
+      @include typography.get-text('pkt-txt-14-light');
     }
 
     > * {
@@ -50,8 +50,8 @@
 
     &-expandable {
       &-heading {
-        @include typography.get-text('pkt-txt-18-medium');
         margin: 0;
+        @include typography.get-text('pkt-txt-18-medium');
       }
 
       &-open {

package/dist/scss/components/_messagebox.scss

@@ -49,14 +49,14 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
 
   &__title {
     grid-area: title;
-    @include get-text('pkt-txt-24-medium');
     margin: 0 0 $-messagebox-spacing 0;
+    @include get-text('pkt-txt-24-medium');
   }
 
   &__text {
     grid-area: text;
-    @include get-text('pkt-txt-18-light');
     margin: 0;
+    @include get-text('pkt-txt-18-light');
 
     p {
       margin-bottom: map.get(variables.$spacing, 'size-16');

package/dist/scss/components/_stepper.scss

@@ -87,7 +87,7 @@
     &--current {
       .pkt-step__title,
       .pkt-step__content {
-        padding: map-get(variables.$spacing, 'size-16') map-get(variables.$spacing, 'size-24');
+        padding: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-24');
         background-color: var(--pkt-color-surface-subtle-pale-blue);
       }
       .pkt-step__content {
@@ -95,7 +95,7 @@
       }
 
       .pkt-step__wrapper {
-        margin-bottom: map-get(variables.$spacing, 'size-24');
+        margin-bottom: map.get(variables.$spacing, 'size-24');
       }
     }
 
@@ -145,12 +145,12 @@
       min-width: fit-content;
     }
     &__title {
-      padding: map-get(variables.$spacing, 'size-24') map-get(variables.$spacing, 'size-16')
-        map-get(variables.$spacing, 'size-24') 0;
+      padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-16')
+        map.get(variables.$spacing, 'size-24') 0;
     }
 
     &__content {
-      padding: 0 map-get(variables.$spacing, 'size-16') map-get(variables.$spacing, 'size-16') 0;
+      padding: 0 map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-16') 0;
     }
 
     &__indicator > svg {

package/dist/scss/components/_tabs.scss

@@ -34,8 +34,9 @@
     padding: 0.75rem 1rem;
     color: var(--pkt-color-text-action-disabled);
     border-bottom: 0.25rem solid transparent;
-    @include typography.get-text('pkt-txt-16');
     white-space: nowrap;
+    @include typography.get-text('pkt-txt-16');
+
     .pkt-icon,
     pkt-icon {
       --fg-color: currentColor;