@oslokommune/punkt-css 2.0.1 → 2.0.3

package/dist/scss/base/_defaults.scss

@@ -40,6 +40,8 @@ p {
 }
 
 body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   overflow-y: scroll;
   line-height: 1.5;

package/dist/scss/elements/_button.scss

@@ -17,27 +17,27 @@ $-module-name: 'pkt-btn';
 $-sizes: (
   'small': (
     'text-class': 'pkt-txt-14-medium',
-    'padding': 0.5rem 1rem,
-    'icon-m-icon-left': 0 0.5rem 0 0,
-    'icon-m-icon-right': 0 0 0 0.5rem,
-    'icon-m-icon-only': 0 -0.3125rem,
+    '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',
-    'padding': 0.5rem 1rem,
-    'icon-m-icon-left': 0.09375rem 0.5rem 0 0,
-    'icon-m-icon-right': 0.09375rem 0 0 0.5rem,
-    'icon-m-icon-only': 0.09375rem -0.21875rem,
+    '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',
-    'padding': 0.75rem 1rem,
-    'icon-m-icon-left': 0.0625rem 0.5rem 0 0,
-    'icon-m-icon-right': 0.0625rem 0 0 0.5rem,
-    'icon-m-icon-only': 0.0625rem -0.25rem,
+    'padding': 0 1rem,
+    'padding-icon-only': 0 0.875rem,
     'icon-size': 2rem,
+    'height': 4rem,
+    'line-height': 1.1,
   ),
 );
 $-skins: (
@@ -169,12 +169,14 @@ $-skins: (
 @mixin -size($name, $o) {
   @if $name == medium {
     @include typography.get-text(map.get($o, 'text-class'));
+    height: map.get($o, 'height');
+    line-height: map.get($o, 'line-height');
     padding: map.get($o, 'padding');
 
     &__icon {
       height: map.get($o, 'icon-size');
-      width: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
+      width: map.get($o, 'icon-size');
     }
 
     // button variants (base)
@@ -186,54 +188,35 @@ $-skins: (
 
     &--icon-left {
       flex-direction: row;
-
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-left');
-      }
     }
 
     &--icon-right {
       flex-direction: row-reverse;
-
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-right');
-      }
     }
     &--icons-right-and-left {
       flex-direction: row;
-      .#{$-module-name}__icon:first-of-type {
-        margin: map.get($o, 'icon-m-icon-left');
-      }
-      .#{$-module-name}__icon:last-of-type {
-        margin: map.get($o, 'icon-m-icon-right');
-      }
     }
     &--icon-only {
+      padding: map.get($o, 'padding-icon-only');
+
       .#{$-module-name}__text {
         @extend %sr-only;
       }
-      .#{$-module-name}__icon {
-        margin: map.get($o, 'icon-m-icon-only');
-      }
     }
   } @else {
     &--#{$name} {
       @include typography.get-text(map.get($o, 'text-class'));
+      height: map.get($o, 'height');
+      line-height: map.get($o, 'line-height');
       padding: map.get($o, 'padding');
     }
     &--#{$name} &__icon {
       height: map.get($o, 'icon-size');
-      width: map.get($o, 'icon-size');
       margin: map.get($o, 'icon-margin');
+      width: map.get($o, 'icon-size');
     }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-left &__icon {
-      margin: map.get($o, 'icon-m-icon-left');
-    }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-right &__icon {
-      margin: map.get($o, 'icon-m-icon-right');
-    }
-    .#{$-module-name}--#{$name}.#{$-module-name}--icon-only &__icon {
-      margin: map.get($o, 'icon-m-icon-only');
+    &--#{$name}.#{$-module-name}--icon-only {
+      padding: map.get($o, 'padding-icon-only');
     }
   }
 }
@@ -273,7 +256,6 @@ $-skins: (
   font-family: inherit;
   font-weight: normal;
   margin: 6px;
-  overflow: hidden;
   position: relative;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -287,6 +269,8 @@ $-skins: (
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
   text-align: left;
+  align-items: center;
+  column-gap: 0.5rem;
 
   &[class*='pkt-btn--icon'] > .pkt-btn__icon {
     display: block;

package/package.json

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