@oslokommune/punkt-css 3.2.1 → 3.3.0

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

@@ -16,8 +16,7 @@ $colors: (
   color-active-light: #b3f5ff,
   color-hover: #1f42aa,
   color-hover-light: #b3f5ff,
-  color-visited: #8d50b1,
-  color-visited-light: #e0adff,
+  color-focus: #e0adff,
   color-disabled: #4d4d4d,
   color-disabled-light: #f9f9f9,
   // system
@@ -30,16 +29,16 @@ $colors: (
   color-blue-dark-10: #d9e9f2,
   color-blue-5: #f1fdff,
   color-blue-10: #e5fcff,
-  color-blue-60: #cdf5fb,
+  color-blue-60: #d1f9ff,
   color-green-dark-5: #f2fff3,
   color-green-dark-10: #d9f2ef,
   color-green-10: #e5ffe6,
-  color-green-30: #c0f6e3,
+  color-green-30: #c7fde9,
   color-red-5: #fff3f2,
   color-red-10: #ffe8e5,
-  color-red-30: #f9cfca,
+  color-red-30: #ffdfdc,
   color-yellow-5: #fef9f0,
-  color-yellow-50: #fae1b6,
+  color-yellow-50: #ffe7bc,
   // grayscale digital
   color-gray-light: #f9f9f9,
   color-gray: #f2f2f2,
@@ -56,5 +55,4 @@ $colors: (
   color-grayscale-70: #4d4d4d,
   color-grayscale-80: #333,
   color-grayscale-90: #1a1a1a,
-  color-black: #000
-) !default;
+  color-black: #000) !default;

package/dist/scss/base/_typography.scss

@@ -57,10 +57,11 @@ a {
   &:focus-visible,
   &.pkt-link--focus {
     box-shadow: 0px 0px 0px 0.125rem var(--color-active),
-      0px 0px 0px 0.375rem var(--color-visited-light);
+      0px 0px 0px 0.375rem var(--color-focus);
     outline: none;
     color: var(--color-hover);
   }
+
   &:focus:not(:focus-visible) {
     box-shadow: none;
     outline: 0.125rem solid var(--color-active);
@@ -74,6 +75,7 @@ a {
   }
 
   @at-root [data-mode='dark'] a {
+
     // link
     &:link,
     &.pkt-link--link {
@@ -97,13 +99,14 @@ a {
     &:focus-visible,
     &.pkt-link--focus {
       box-shadow: 0px 0px 0px 0.125rem var(--color-active-light),
-        0px 0px 0px 0.375rem var(--color-visited-light);
+        0px 0px 0px 0.375rem var(--color-focus);
       outline: none;
       color: var(--color-hover-light);
     }
+
     &:focus:not(:focus-visible) {
       box-shadow: none;
-      outline: 0.125rem solid var(--color-visited-light);
+      outline: 0.125rem solid var(--color-focus);
       color: var(--color-hover-light);
     }
 
@@ -162,6 +165,7 @@ a {
     &--external::after {
       @include icon-new-window-small(white, null);
     }
+
     &--external:hover::after {
       @include icon-new-window-small(#b3f5ff, null);
     }
@@ -173,22 +177,27 @@ a {
  * prefix pkt
  */
 
-@each $name, $style in variables.$pkt-styles {
+@each $name,
+$style in variables.$pkt-styles {
   @include typography.generate-text-class($name, $style);
 }
 
-@each $name, $style in variables.$pkt-font-weight {
+@each $name,
+$style in variables.$pkt-font-weight {
   @include typography.generate-text-class($name, $style);
 }
+
 /*
  * Alignment
  */
 .pkt-txt-start {
   text-align: left !important;
 }
+
 .pkt-txt-end {
   text-align: right !important;
 }
+
 .pkt-txt-center {
   text-align: center !important;
 }

package/dist/scss/elements/_button.scss

@@ -15,24 +15,21 @@
 
 $-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,
@@ -41,15 +38,13 @@ $-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,
       'focus-bc': --color-active,
       'focus-txt': --color-white,
-      'focus-outline': --color-visited-light,
+      'focus-outline': --color-focus,
       'hover-bg': --color-active,
       'hover-bc': --color-active,
       'hover-txt': --color-white,
@@ -60,14 +55,13 @@ $-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,
       'focus-bc': --color-blue,
       'focus-txt': --color-blue-dark,
-      'focus-outline': --color-visited-light,
+      'focus-outline': --color-focus,
       'hover-bg': --color-blue,
       'hover-bc': --color-blue,
       'hover-txt': --color-blue-dark,
@@ -79,15 +73,13 @@ $-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,
       'focus-bc': --color-active,
       'focus-txt': --color-active,
-      'focus-outline': --color-visited-light,
+      'focus-outline': --color-focus,
       'hover-bg': --color-active,
       'hover-bc': --color-active,
       'hover-txt': --color-white,
@@ -98,14 +90,13 @@ $-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,
       'focus-bc': --color-active-light,
       'focus-txt': --color-active-light,
-      'focus-outline': --color-visited-light,
+      'focus-outline': --color-focus,
       'hover-bg': --color-active-light,
       'hover-bc': --color-active-light,
       'hover-txt': --color-blue-dark,
@@ -117,9 +108,7 @@ $-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,
@@ -135,14 +124,13 @@ $-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,
       'focus-bc': --color-active,
       'focus-txt': --color-blue-dark,
-      'focus-outline': --color-visited-light,
+      'focus-outline': --color-focus,
       'hover-bg': --color-blue-5,
       'hover-bc': --color-blue-5,
       'hover-txt': --color-blue-dark,
@@ -157,17 +145,19 @@ $-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});
     }
   }
 }
 
 @mixin -size($name, $o) {
-  @if $name == medium {
+  @if $name ==medium {
     @include typography.get-text(map.get($o, 'text-class'));
     height: map.get($o, 'height');
     line-height: map.get($o, 'line-height');
@@ -193,9 +183,11 @@ $-skins: (
     &--icon-right {
       flex-direction: row-reverse;
     }
+
     &--icons-right-and-left {
       flex-direction: row;
     }
+
     &--icon-only {
       padding: map.get($o, 'padding-icon-only');
 
@@ -203,18 +195,22 @@ $-skins: (
         @extend %sr-only;
       }
     }
-  } @else {
+  }
+
+  @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');
       margin: map.get($o, 'icon-margin');
       width: map.get($o, 'icon-size');
     }
+
     &--#{$name}.#{$-module-name}--icon-only {
       padding: map.get($o, 'padding-icon-only');
     }
@@ -223,20 +219,20 @@ $-skins: (
 
 @mixin -skin($name, $o) {
   $css-skin: '';
-  @if $name != primary {
+
+  @if $name !=primary {
     $css-skin: --#{$name};
   }
 
   .#{$-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'
     );
@@ -244,7 +240,8 @@ $-skins: (
 }
 
 // Print css vars for hvert skin
-@each $key, $value in $-skins {
+@each $key,
+$value in $-skins {
   @include -skin($key, map.get($value, 'light'));
 }
 
@@ -271,7 +268,7 @@ $-skins: (
   align-items: center;
   column-gap: 0.5rem;
 
-  &[class*='pkt-btn--icon'] > .pkt-btn__icon {
+  &[class*='pkt-btn--icon']>.pkt-btn__icon {
     display: block;
   }
 
@@ -287,33 +284,36 @@ $-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);
     outline: 4px solid var(--btn-focus-outline);
     text-decoration: none;
   }
+
   @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);
     outline: 0;
     text-decoration: underline;
   }
+
   @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);
     outline: 0;
     text-decoration: none;
   }
+
   &:disabled {
     background-color: var(--btn-disabled-bg);
     border-color: var(--btn-disabled-bc);
@@ -322,7 +322,8 @@ $-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": "3.2.1",
+  "version": "3.3.0",
   "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": "840aa8871f8ef5fb69a560e9a2b0e3117eb7536e"
+  "gitHead": "5d22e2c14f5fb9b0ef82eb4ef21571a764b0209a"
 }