@oslokommune/punkt-css 5.0.4 → 5.0.5

package/dist/scss/elements/_button.scss

@@ -15,21 +15,24 @@
 
 $-module-name: 'pkt-btn';
 $-sizes: (
-  'small': ('text-class': 'pkt-txt-14-medium',
+  'small': (
+    'text-class': 'pkt-txt-14-medium',
     'padding': 0 0.5rem,
     'padding-icon-only': 0 0.5625rem,
     'icon-size': 1.25rem,
     'height': 2.625rem,
     'line-height': 1.1,
   ),
-  'medium': ('text-class': 'pkt-txt-18-medium',
+  'medium': (
+    'text-class': 'pkt-txt-18-medium',
     'padding': 0 1rem,
     'padding-icon-only': 0 0.625rem,
     'icon-size': 1.5rem,
     'height': 3rem,
     'line-height': 1.1,
   ),
-  'large': ('text-class': 'pkt-txt-24-medium',
+  'large': (
+    'text-class': 'pkt-txt-24-medium',
     'padding': 0 1rem,
     'padding-icon-only': 0 0.875rem,
     'icon-size': 2rem,
@@ -38,7 +41,9 @@ $-sizes: (
   ),
 );
 $-skins: (
-  'primary': ('light': ('link-bg': --color-blue-dark,
+  'primary': (
+    'light': (
+      'link-bg': --color-blue-dark,
       'link-bc': --color-blue-dark,
       'link-txt': --color-white,
       'focus-bg': --color-active,
@@ -55,7 +60,8 @@ $-skins: (
       'disabled-bc': --color-gray,
       'disabled-txt': --color-disabled,
     ),
-    'dark': ('link-bg': --color-blue-light,
+    'dark': (
+      'link-bg': --color-blue-light,
       'link-bc': --color-blue-light,
       'link-txt': --color-blue-dark,
       'focus-bg': --color-blue,
@@ -73,7 +79,9 @@ $-skins: (
       'disabled-txt': --color-disabled,
     ),
   ),
-  'secondary': ('light': ('link-bg': --color-transparent,
+  'secondary': (
+    'light': (
+      'link-bg': --color-transparent,
       'link-bc': --color-blue-dark,
       'link-txt': --color-blue-dark,
       'focus-bg': --color-transparent,
@@ -90,7 +98,8 @@ $-skins: (
       'disabled-bc': --color-gray,
       'disabled-txt': --color-disabled,
     ),
-    'dark': ('link-bg': --color-transparent,
+    'dark': (
+      'link-bg': --color-transparent,
       'link-bc': --color-white,
       'link-txt': --color-white,
       'focus-bg': --color-transparent,
@@ -108,7 +117,9 @@ $-skins: (
       'disabled-txt': --color-disabled,
     ),
   ),
-  'tertiary': ('light': ('link-bg': --color-transparent,
+  'tertiary': (
+    'light': (
+      'link-bg': --color-transparent,
       'link-bc': --color-transparent,
       'link-txt': --color-blue-dark,
       'focus-bg': --color-gray,
@@ -124,7 +135,8 @@ $-skins: (
       'disabled-bc': --color-transparent,
       'disabled-txt': --color-disabled,
     ),
-    'dark': ('link-bg': --color-transparent,
+    'dark': (
+      'link-bg': --color-transparent,
       'link-bc': --color-transparent,
       'link-txt': --color-white,
       'focus-bg': --color-blue-5,
@@ -145,12 +157,10 @@ $-skins: (
 );
 
 @mixin -print-skin-as-css-vars($name, $o, $mode) {
-
-  @each $key,
-  $value in $o {
-
+  @each $key, $value in $o {
     // Only print primary skin and css vars that differ from primary
-    @if $name =='primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
+    @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key)
+    {
       --btn-#{$key}: var(#{$value});
     }
   }
@@ -195,9 +205,7 @@ $-skins: (
         @extend %sr-only;
       }
     }
-  }
-
-  @else {
+  } @else {
     &--#{$name} {
       @include typography.get-text(map.get($o, 'text-class'));
       height: map.get($o, 'height');
@@ -225,14 +233,16 @@ $-skins: (
   }
 
   .#{$-module-name}#{$css-skin} {
-    @include -print-skin-as-css-vars($name,
+    @include -print-skin-as-css-vars(
+      $name,
       map.get($-skins, $name, 'light'),
       'light'
     );
   }
 
   @at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
-    @include -print-skin-as-css-vars($name,
+    @include -print-skin-as-css-vars(
+      $name,
       map.get($-skins, $name, 'dark'),
       'dark'
     );
@@ -240,8 +250,7 @@ $-skins: (
 }
 
 // Print css vars for hvert skin
-@each $key,
-$value in $-skins {
+@each $key, $value in $-skins {
   @include -skin($key, map.get($value, 'light'));
 }
 
@@ -268,8 +277,8 @@ $value in $-skins {
   align-items: center;
   column-gap: 0.5rem;
 
-  &[class*='pkt-btn--icon']>.pkt-btn__icon {
-    display: block;
+  &[class*='pkt-btn--icon'] > .pkt-btn__icon {
+    display: flex;
   }
 
   &__icon {
@@ -284,8 +293,8 @@ $value in $-skins {
   }
 
   @at-root a.#{$-module-name}:focus,
-  &:enabled:focus,
-  &.#{$-module-name}--focus {
+    &:enabled:focus,
+    &.#{$-module-name}--focus {
     background-color: var(--btn-focus-bg);
     color: var(--btn-focus-txt);
     border-color: var(--btn-focus-bc);
@@ -294,8 +303,8 @@ $value in $-skins {
   }
 
   @at-root a.#{$-module-name}:hover,
-  &:enabled:hover,
-  &.#{$-module-name}--hover {
+    &:enabled:hover,
+    &.#{$-module-name}--hover {
     background-color: var(--btn-hover-bg);
     border-color: var(--btn-hover-bc);
     color: var(--btn-hover-txt);
@@ -304,9 +313,9 @@ $value in $-skins {
   }
 
   @at-root a.#{$-module-name}:active,
-  &:enabled:active,
-  &.#{$-module-name}--active,
-  &.#{$-module-name}--active:hover {
+    &:enabled:active,
+    &.#{$-module-name}--active,
+    &.#{$-module-name}--active:hover {
     background-color: var(--btn-active-bg);
     border-color: var(--btn-active-bc);
     color: var(--btn-active-txt);
@@ -322,8 +331,7 @@ $value in $-skins {
   }
 
   // button sizes & variants
-  @each $key,
-  $value in $-sizes {
+  @each $key, $value in $-sizes {
     @include -size($key, $value);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ceec529d5abb4946db492477a696cff656370c10"
+  "gitHead": "cee64a5848cb61440dbd18cf3029dcd6113032cc"
 }