@oslokommune/punkt-css 17.1.3 → 18.3.0

package/dist/scss/components/_loader.scss

@@ -1,6 +1,7 @@
 /*
  * Loader component
  */
+@use '../abstracts/functions';
 @use 'sass:map';
 @use '../abstracts/variables';
 @use '../abstracts/mixins/breakpoints' as *;
@@ -82,7 +83,7 @@
     width: 5em;
     height: 6.5em;
     left: 0em;
-    background: repeating-linear-gradient(#ff8274, #ff8274 1em, #f9c66b 1em, #f9c66b 2em);
+    background: repeating-linear-gradient(#{functions.color-token('surface-strong-red')}, #{functions.color-token('surface-strong-red')} 1em, #{functions.color-token('surface-strong-yellow')} 1em, #{functions.color-token('surface-strong-yellow')} 2em);
     border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
     transform: translate3d(0, 0, 0);
     animation-name: eggroll;
@@ -93,15 +94,15 @@
     opacity: 0;
   }
   .egg.two {
-    background: repeating-linear-gradient(#6fe9ff, #6fe9ff 1em, #ff8274 1em, #ff8274 2em);
+    background: repeating-linear-gradient(#{functions.color-token('surface-strong-blue')}, #{functions.color-token('surface-strong-blue')} 1em, #{functions.color-token('surface-strong-red')} 1em, #{functions.color-token('surface-strong-red')} 2em);
     animation-delay: 0.5s;
   }
   .egg.three {
-    background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #f9c66b 1em, #f9c66b 2em);
+    background: repeating-linear-gradient(#{functions.color-token('surface-strong-green')}, #{functions.color-token('surface-strong-green')} 1em, #{functions.color-token('surface-strong-yellow')} 1em, #{functions.color-token('surface-strong-yellow')} 2em);
     animation-delay: 1s;
   }
   .egg.four {
-    background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #ff8274 1em, #ff8274 2em);
+    background: repeating-linear-gradient(#{functions.color-token('surface-strong-green')}, #{functions.color-token('surface-strong-green')} 1em, #{functions.color-token('surface-strong-red')} 1em, #{functions.color-token('surface-strong-red')} 2em);
     animation-delay: 1.5s;
   }
 }

package/dist/scss/components/_modal.scss

@@ -3,6 +3,7 @@
  */
 @use 'sass:map';
 @use '../abstracts/variables';
+@use '../abstracts/functions';
 @use '../abstracts/mixins/breakpoints' as *;
 @use '../abstracts/' as *;
 
@@ -222,7 +223,7 @@ $pkt-modal-padding-sides: map.get(variables.$spacing, 'size-40');
     position: relative;
     color: var(--pkt-color-text-body-default);
     background:
-      linear-gradient(var(--pkt-color-white) 30%, transparent) top,
+      linear-gradient(#{functions.color-token('background-card')} 30%, transparent) top,
       linear-gradient(transparent, var(--pkt-color-border-subtle) 60%) bottom,
       radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent) top,
       radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) bottom;

package/dist/scss/components/_progressbar.scss

@@ -18,7 +18,7 @@
     }
   }
   &__bar-wrapper {
-    background-color: var(--pkt-color-grays-gray-100);
+    background-color: var(--pkt-color-brand-neutrals-200);
     height: 8px;
     overflow: hidden;
   }

package/dist/scss/components/_stepper.scss

@@ -194,12 +194,12 @@
 // INCOMPLETE STEP
 .pkt-step--incomplete {
   .pkt-step__line {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
 
   .pkt-step__title,
   .pkt-step__content {
-    color: var(--pkt-color-grays-gray-600);
+    color: var(--pkt-color-brand-neutrals-700);
   }
 }
 
@@ -209,7 +209,7 @@
     background-color: var(--pkt-color-brand-dark-blue-1000);
   }
   .pkt-step__line--2 {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
 }
 
@@ -229,14 +229,14 @@
 
   .pkt-step__line--2,
   .pkt-step__line--3 {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
 }
 
 // CURRENT STEP + INCOMPLETE STEP
 .pkt-step--current + .pkt-step--incomplete {
   .pkt-step__line--1 {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
 }
 

package/dist/scss/components/_tag.scss

@@ -6,19 +6,7 @@
 @use '../abstracts/variables';
 @use '../abstracts/mixins/typography';
 
-.pkt-tag {
-  --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
-}
-
-[data-mode='dark'] .pkt-tag {
-  --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
-}
+// tag-text-* er globale semantiske tokens, se abstracts/variables/_colors.scss
 
 pkt-tag {
   display: inline-block;
@@ -341,8 +329,8 @@ button.pkt-tag {
 
   &.pkt-tag--blue-dark {
     background: var(--pkt-color-brand-dark-blue-1000);
-    color: var(--pkt-color-brand-neutrals-200);
-    --fg-color: var(--pkt-color-brand-neutrals-200);
+    color: var(--pkt-color-brand-neutrals-100);
+    --fg-color: var(--pkt-color-brand-neutrals-100);
 
     &.pkt-btn:hover,
     &:is(button):hover,
@@ -350,10 +338,10 @@ button.pkt-tag {
     &:is(button):focus,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-brand-warm-blue-1000) !important;
-      color: var(--pkt-color-brand-neutrals-200) !important;
+      color: var(--pkt-color-brand-neutrals-100) !important;
       &,
       svg {
-        --fg-color: var(--pkt-color-brand-neutrals-200) !important;
+        --fg-color: var(--pkt-color-brand-neutrals-100) !important;
       }
     }
   }

package/dist/scss/elements/_button.scss

@@ -53,116 +53,120 @@ $-sizes: (
 $-skins: (
   'primary': (
     'light': (
-      'button-background-normal': --pkt-color-brand-dark-blue-1000,
+      'button-background-normal': --pkt-color-button-primary-background-normal,
       'button-border-normal': --pkt-color-brand-dark-blue-1000,
-      'button-text-normal': --pkt-color-brand-neutrals-white,
-      'button-background-focus': --pkt-color-brand-warm-blue-1000,
-      'button-border-focus': --pkt-color-brand-warm-blue-1000,
-      'button-text-focus': --pkt-color-brand-neutrals-white,
+      'button-text-normal': --pkt-color-button-primary-text-normal,
+      'button-background-focus': --pkt-color-button-primary-background-focus,
+      'button-border-focus': --pkt-color-button-primary-border-focus,
+      'button-text-focus': --pkt-color-button-primary-text-focus,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      'button-background-hover': --pkt-color-button-primary-background-hover,
       'button-border-hover': --pkt-color-brand-warm-blue-1000,
-      'button-text-hover': --pkt-color-brand-neutrals-white,
-      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-text-hover': --pkt-color-button-primary-text-hover,
+      'button-background-active': --pkt-color-button-primary-background-active,
       'button-border-active': --pkt-color-brand-warm-blue-1000,
-      'button-text-active': --pkt-color-brand-neutrals-white,
-      'button-background-disabled': --pkt-color-brand-neutrals-100,
-      'button-border-disabled': --pkt-color-brand-neutrals-100,
-      'button-text-disabled': --pkt-color-grays-gray-500,
+      'button-text-active': --pkt-color-button-primary-text-active,
+      'button-background-disabled': --pkt-color-button-primary-background-disabled,
+      'button-border-disabled': --pkt-color-button-primary-background-disabled,
+      'button-text-disabled': --pkt-color-button-primary-text-disabled,
     ),
     'dark': (
-      'button-background-normal': --pkt-color-brand-blue-500,
+      'button-background-normal': --pkt-color-button-primary-background-normal,
       'button-border-normal': --pkt-color-brand-blue-500,
-      'button-text-normal': --pkt-color-brand-dark-blue-1000,
-      'button-background-focus': --pkt-color-brand-blue-1000,
-      'button-border-focus': --pkt-color-brand-blue-1000,
-      'button-text-focus': --pkt-color-brand-dark-blue-1000,
+      'button-text-normal': --pkt-color-button-primary-text-normal,
+      'button-background-focus': --pkt-color-button-primary-background-focus,
+      'button-border-focus': --pkt-color-button-primary-border-focus,
+      'button-text-focus': --pkt-color-button-primary-text-focus,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-background-hover': --pkt-color-brand-blue-1000,
+      'button-background-hover': --pkt-color-button-primary-background-hover,
       'button-border-hover': --pkt-color-brand-blue-1000,
-      'button-text-hover': --pkt-color-brand-dark-blue-1000,
-      'button-background-active': --pkt-color-brand-blue-1000,
+      'button-text-hover': --pkt-color-button-primary-text-hover,
+      'button-background-active': --pkt-color-button-primary-background-active,
       'button-border-active': --pkt-color-brand-blue-1000,
-      'button-text-active': --pkt-color-brand-dark-blue-1000,
-      'button-background-disabled': --pkt-color-brand-neutrals-100,
-      'button-border-disabled': --pkt-color-brand-neutrals-100,
-      'button-text-disabled': --pkt-color-grays-gray-600,
+      'button-text-active': --pkt-color-button-primary-text-active,
+      'button-background-disabled': --pkt-color-button-primary-background-disabled,
+      'button-border-disabled': --pkt-color-button-primary-background-disabled,
+      'button-text-disabled': --pkt-color-button-primary-text-disabled,
     ),
   ),
   'secondary': (
     'light': (
       'button-background-normal': --pkt-color-brand-neutrals-transparent,
-      'button-border-normal': --pkt-color-brand-dark-blue-1000,
-      'button-text-normal': --pkt-color-brand-dark-blue-1000,
+      'button-border-normal': --pkt-color-button-secondary-border-normal,
+      'button-text-normal': --pkt-color-button-secondary-text-normal,
       'button-background-focus': --pkt-color-brand-warm-blue-1000,
-      'button-border-focus': --pkt-color-brand-warm-blue-1000,
+      'button-border-focus': --pkt-color-button-secondary-border-focus,
+      // TODO: Figma sier button-secondary-text-focus, men mangler
+      // button-secondary-background-focus. Avventer avklaring.
       'button-text-focus': --pkt-color-brand-neutrals-white,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      'button-background-hover': --pkt-color-button-secondary-background-hover,
       'button-border-hover': --pkt-color-brand-warm-blue-1000,
-      'button-text-hover': --pkt-color-brand-neutrals-white,
-      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-text-hover': --pkt-color-button-secondary-text-hover,
+      'button-background-active': --pkt-color-button-secondary-background-active,
       'button-border-active': --pkt-color-brand-warm-blue-1000,
-      'button-text-active': --pkt-color-brand-neutrals-white,
-      'button-background-disabled': --pkt-color-brand-neutrals-100,
-      'button-border-disabled': --pkt-color-brand-neutrals-100,
-      'button-text-disabled': --pkt-color-grays-gray-600,
+      'button-text-active': --pkt-color-button-secondary-text-active,
+      'button-background-disabled': --pkt-color-button-secondary-background-disabled,
+      'button-border-disabled': --pkt-color-button-secondary-background-disabled,
+      'button-text-disabled': --pkt-color-button-secondary-text-disabled,
     ),
     'dark': (
       'button-background-normal': --pkt-color-brand-neutrals-transparent,
-      'button-border-normal': --pkt-color-brand-neutrals-white,
-      'button-text-normal': --pkt-color-brand-neutrals-white,
+      'button-border-normal': --pkt-color-button-secondary-border-normal,
+      'button-text-normal': --pkt-color-button-secondary-text-normal,
       'button-background-focus': --pkt-color-brand-blue-500,
-      'button-border-focus': --pkt-color-brand-blue-500,
+      'button-border-focus': --pkt-color-button-secondary-border-focus,
+      // TODO: Figma sier button-secondary-text-focus, men mangler
+      // button-secondary-background-focus. Avventer avklaring.
       'button-text-focus': --pkt-color-brand-dark-blue-1000,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-background-hover': --pkt-color-brand-blue-500,
+      'button-background-hover': --pkt-color-button-secondary-background-hover,
       'button-border-hover': --pkt-color-brand-blue-500,
-      'button-text-hover': --pkt-color-brand-dark-blue-1000,
-      'button-background-active': --pkt-color-brand-blue-500,
+      'button-text-hover': --pkt-color-button-secondary-text-hover,
+      'button-background-active': --pkt-color-button-secondary-background-active,
       'button-border-active': --pkt-color-brand-blue-500,
-      'button-text-active': --pkt-color-brand-dark-blue-1000,
-      'button-background-disabled': --pkt-color-grays-gray-100,
-      'button-border-disabled': --pkt-color-grays-gray-100,
-      'button-text-disabled': --pkt-color-grays-gray-600,
+      'button-text-active': --pkt-color-button-secondary-text-active,
+      'button-background-disabled': --pkt-color-button-secondary-background-disabled,
+      'button-border-disabled': --pkt-color-button-secondary-background-disabled,
+      'button-text-disabled': --pkt-color-button-secondary-text-disabled,
     ),
   ),
   'tertiary': (
     'light': (
       'button-background-normal': --pkt-color-brand-neutrals-transparent,
       'button-border-normal': --pkt-color-brand-neutrals-transparent,
-      'button-text-normal': --pkt-color-brand-dark-blue-1000,
-      'button-background-focus': --pkt-color-brand-neutrals-200,
-      'button-border-focus': --pkt-color-brand-warm-blue-1000,
-      'button-text-focus': --pkt-color-brand-warm-blue-1000,
+      'button-text-normal': --pkt-color-button-tertiary-text-normal,
+      'button-background-focus': --pkt-color-button-tertiary-background-focus,
+      'button-border-focus': --pkt-color-button-tertiary-border-focus,
+      'button-text-focus': --pkt-color-button-tertiary-text-focus,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-background-hover': --pkt-color-brand-neutrals-200,
-      'button-border-hover': --pkt-color-brand-neutrals-200,
-      'button-text-hover': --pkt-color-brand-warm-blue-1000,
-      'button-background-active': --pkt-color-brand-warm-blue-1000,
+      'button-background-hover': --pkt-color-button-tertiary-background-hover,
+      'button-border-hover': --pkt-color-brand-neutrals-100,
+      'button-text-hover': --pkt-color-button-tertiary-text-hover,
+      'button-background-active': --pkt-color-button-tertiary-background-active,
       'button-border-active': --pkt-color-brand-warm-blue-1000,
-      'button-text-active': --pkt-color-brand-neutrals-white,
-      'button-background-disabled': --pkt-color-brand-neutrals-100,
-      'button-border-disabled': --pkt-color-brand-neutrals-100,
-      'button-text-disabled': --pkt-color-grays-gray-600,
+      'button-text-active': --pkt-color-button-tertiary-text-active,
+      'button-background-disabled': --pkt-color-button-tertiary-background-disabled,
+      'button-border-disabled': --pkt-color-button-tertiary-background-disabled,
+      'button-text-disabled': --pkt-color-button-tertiary-text-disabled,
     ),
     'dark': (
       'button-background-normal': --pkt-color-brand-neutrals-transparent,
       'button-border-normal': --pkt-color-brand-neutrals-transparent,
-      'button-text-normal': --pkt-color-brand-neutrals-white,
-      'button-background-focus': --pkt-color-brand-dark-blue-700,
-      'button-border-focus': --pkt-color-brand-dark-blue-700,
+      'button-text-normal': --pkt-color-button-tertiary-text-normal,
+      'button-background-focus': --pkt-color-button-tertiary-background-focus,
+      'button-border-focus': --pkt-color-button-tertiary-border-focus,
       'border-states-focus': --pkt-color-brand-purple-1000,
-      'button-text-focus': --pkt-color-brand-neutrals-white,
-      'button-background-hover': --pkt-color-brand-dark-blue-700,
+      'button-text-focus': --pkt-color-button-tertiary-text-focus,
+      'button-background-hover': --pkt-color-button-tertiary-background-hover,
       'button-border-hover': --pkt-color-brand-dark-blue-700,
-      'button-text-hover': --pkt-color-brand-neutrals-white,
-      'button-background-active': --pkt-color-brand-dark-blue-700,
+      'button-text-hover': --pkt-color-button-tertiary-text-hover,
+      'button-background-active': --pkt-color-button-tertiary-background-active,
       'button-border-active': --pkt-color-brand-dark-blue-700,
-      'button-text-active': --pkt-color-brand-neutrals-white,
-      'button-background-disabled': --pkt-color-brand-neutrals-100,
-      'button-border-disabled': --pkt-color-brand-neutrals-100,
-      'button-text-disabled': --pkt-color-grays-gray-600,
+      'button-text-active': --pkt-color-button-tertiary-text-active,
+      'button-background-disabled': --pkt-color-button-tertiary-background-disabled,
+      'button-border-disabled': --pkt-color-button-tertiary-background-disabled,
+      'button-text-disabled': --pkt-color-button-tertiary-text-disabled,
     ),
   ),
 );

package/dist/scss/elements/_form.scss

@@ -99,7 +99,7 @@
      * 1. Override Firefox's default opacity
      */
     &::placeholder {
-      color: var(--pkt-color-grays-gray-300);
+      color: var(--pkt-color-brand-neutrals-400);
       opacity: 1;
       /* 1 */
     }
@@ -118,9 +118,9 @@
 
     &:disabled,
     &[readonly] {
-      background-color: var(--pkt-color-brand-neutrals-200);
-      border-color: var(--pkt-color-grays-gray-300);
-      color: var(--pkt-color-grays-gray-300);
+      background-color: var(--pkt-color-brand-neutrals-100);
+      border-color: var(--pkt-color-brand-neutrals-400);
+      color: var(--pkt-color-brand-neutrals-400);
       cursor: inherit;
     }
 

package/dist/scss/elements/_hr.scss

@@ -5,5 +5,5 @@
 .pkt-hr {
   border: 0;
   width: 100%;
-  border-top: 1px solid var(--pkt-color-grays-gray-200);
+  border-top: 1px solid var(--pkt-color-brand-neutrals-300);
 }

package/dist/scss/elements/_list.scss

@@ -58,7 +58,7 @@
 
   &.bordered {
     li+li {
-      border-left: 1px solid var(--pkt-color-grays-gray-600);
+      border-left: 1px solid var(--pkt-color-brand-neutrals-700);
     }
   }
 }
@@ -96,7 +96,7 @@
 @mixin dd-narrow {
   padding: 0 0 0.5em;
   font-weight: 500;
-  border-bottom: 1px solid rgba(black, 0.15);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 .pkt-dt {
@@ -115,7 +115,7 @@
   @include dd-narrow;
 
   @include bp('tablet-up') {
-    border-bottom: 1px solid rgba(black, 0.15);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 
     @supports (display: grid) {
       padding: 0.25em 0 0.25em 1.25em;

package/dist/scss/elements/_section.scss

@@ -3,8 +3,7 @@
  *
  */
 
-@use 'sass:map';
-@use '../abstracts/variables';
+@use '../abstracts/functions';
 @use '../abstracts/mixins/breakpoints' as *;
 
 @mixin -section($backgroundColor: none) {
@@ -21,17 +20,6 @@
     @include bp('tablet-up') {
       padding: 1.5rem;
     }
-
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
   }
 }
 
@@ -40,52 +28,36 @@
 }
 
 .pkt-section--dark {
-  color: white;
-  @include -section(map.get(variables.$pkt-colors, 'brand-dark-blue-1000'));
-
-  a.pkt-btn--ter {
-    color: white;
-  }
+  color: functions.color-token('text-body-light');
+  @include -section(functions.color-token('surface-strong-dark-blue'));
 }
 
 .pkt-section--danger {
-  color: black;
-  @include -section(map.get(variables.$pkt-colors, 'brand-red-1000'));
-
-  a.pkt-btn--ter {
-    color: black;
-  }
+  color: functions.color-token('text-body-dark');
+  @include -section(functions.color-token('surface-strong-red'));
 }
 
 .pkt-section--gray,
 .pkt-section--grey {
-  @include -section(map.get(variables.$pkt-colors, 'brand-neutrals-200'));
+  @include -section(functions.color-token('surface-default-gray'));
 }
 
 .pkt-section--success {
-  color: black;
-  @include -section(map.get(variables.$pkt-colors, 'brand-green-1000'));
-
-  a.pkt-btn--ter {
-    color: black;
-  }
+  color: functions.color-token('text-body-dark');
+  @include -section(functions.color-token('surface-strong-green'));
 }
 
 .pkt-section--warning {
-  @include -section(map.get(variables.$pkt-colors, 'brand-yellow-1000'));
+  @include -section(functions.color-token('surface-strong-yellow'));
 }
 
 .pkt-section--info {
-  @include -section(map.get(variables.$pkt-colors, 'brand-blue-500'));
-
-  a.pkt-btn--ter {
-    color: black;
-  }
+  @include -section(functions.color-token('surface-default-light-blue'));
 }
 
 .pkt-section--frame {
-  border: 1px solid map.get(variables.$pkt-colors, 'brand-neutrals-1000');
-  @include -section(white);
+  border: 1px solid functions.color-token('brand-neutrals-1000');
+  @include -section(functions.color-token('surface-subtle-white'));
 }
 
 [class*='ok-section-'] > [class^='ok-title-'] {

package/dist/scss/pkt-docs.scss

@@ -1,5 +1,7 @@
 @charset "utf-8";
 
+@use 'abstracts/functions';
+
 // Normalise
 @forward 'normalise';
 
@@ -81,7 +83,7 @@
     list-style: none;
   }
   .pkt-linkcard {
-    background-color: white;
+    background-color: functions.color-token('surface-subtle-white');
     padding: 2.5rem;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.1.3",
+  "version": "18.3.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -25,7 +25,7 @@
     ]
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^17.1.2",
+    "@oslokommune/punkt-assets": "^18.0.0",
     "edit-json-file": "^1.8.1",
     "fs-extra": "^11.3.5",
     "prettier": "^3.8.4",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "f378c0e71d923d9526bc9eea3a399e0d9e00b206"
+  "gitHead": "72a1389ecb1c277a463dfe5d2c020d96dd4c7ded"
 }

package/dist/css/components/badge.css

@@ -1,41 +0,0 @@
-/* 
- * Badge element
- * DEPRECATED - use tag instead 
- */
-.pkt-badge {
-  display: inline-flex;
-  height: 1.5em;
-  margin-inline-start: 0.4em;
-  padding: 0.25em 0.4em;
-  color: black;
-  font-weight: 500;
-  font-size: 0.75em;
-  line-height: 1em;
-  border-radius: 1px;
-}
-
-.pkt-badge.pkt-badge--small,
-.pkt-h1 > .pkt-badge,
-.pkt-h2 > .pkt-badge,
-.pkt-h3 > .pkt-badge {
-  font-size: 0.5em;
-  transform: translateY(-0.25em);
-}
-
-.pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
-  color: inherit;
-  background: transparent;
-  border: 1px solid;
-  border-radius: 4px;
-}
-
-.pkt-btn--pri:not(.pkt-btn--neg) > .pkt-badge,
-.pkt-btn--neg.pkt-btn--ter > .pkt-badge,
-.pkt-btn--neg.pkt-btn--ghost > .pkt-badge {
-  border-color: white;
-}
-
-.pkt-btn--small > .pkt-badge {
-  padding-block-start: 0.28em;
-  transform: translateY(-0.1em);
-}

package/dist/css/components/badge.min.css

@@ -1 +0,0 @@
-.pkt-badge{display:inline-flex;height:1.5em;margin-inline-start:.4em;padding:.25em .4em;color:#000;font-weight:500;font-size:.75em;line-height:1em;border-radius:1px}.pkt-badge.pkt-badge--small,.pkt-h1>.pkt-badge,.pkt-h2>.pkt-badge,.pkt-h3>.pkt-badge{font-size:.5em;transform:translateY(-0.25em)}.pkt-btn:not(.pkt-btn--ter)>.pkt-badge{color:inherit;background:rgba(0,0,0,0);border:1px solid;border-radius:4px}.pkt-btn--pri:not(.pkt-btn--neg)>.pkt-badge,.pkt-btn--neg.pkt-btn--ter>.pkt-badge,.pkt-btn--neg.pkt-btn--ghost>.pkt-badge{border-color:#fff}.pkt-btn--small>.pkt-badge{padding-block-start:.28em;transform:translateY(-0.1em)}

package/dist/scss/components/_badge.scss

@@ -1,60 +0,0 @@
-/* 
- * Badge element
- * DEPRECATED - use tag instead 
- */
-
-@use 'sass:map';
-@use '../abstracts/variables';
-
-.pkt-badge {
-  display: inline-flex;
-  height: 1.5em;
-  margin-inline-start: 0.4em;
-  padding: 0.25em 0.4em;
-  color: black;
-  font-weight: 500;
-  font-size: 0.75em;
-  line-height: 1em;
-  background: map.get(variables.$pkt-colors, 'pkt-color-brand-blue-500');
-  border-radius: 1px;
-}
-
-.pkt-btn>.pkt-badge.pkt-badge--strong,
-.pkt-badge--strong {
-  color: map.get(variables.$pkt-colors, 'pkt-color-brand-blue-500');
-  background: map.get(variables.$pkt-colors, 'pkt-color-brand-dark-blue-1000');
-}
-
-.pkt-btn>.pkt-badge.pkt-badge--info,
-.pkt-badge--info {
-  background: map.get(variables.$pkt-colors, 'pkt-color-brand-yellow-1000');
-}
-
-// Reduce size when used inside headings
-.pkt-badge.pkt-badge--small,
-.pkt-h1>.pkt-badge,
-.pkt-h2>.pkt-badge,
-.pkt-h3>.pkt-badge {
-  font-size: 0.5em;
-  transform: translateY(-0.25em);
-}
-
-// Badges for buttons
-.pkt-btn:not(.pkt-btn--ter)>.pkt-badge {
-  color: inherit;
-  background: transparent;
-  border: 1px solid map.get(variables.$pkt-colors, 'pkt-color-brand-dark-blue-1000');
-  border-radius: 4px;
-}
-
-.pkt-btn--pri:not(.pkt-btn--neg)>.pkt-badge,
-.pkt-btn--neg.pkt-btn--ter>.pkt-badge,
-.pkt-btn--neg.pkt-btn--ghost>.pkt-badge {
-  border-color: white;
-}
-
-// Hack to fix pixel alignment on small buttons
-.pkt-btn--small>.pkt-badge {
-  padding-block-start: 0.28em;
-  transform: translateY(-0.1em);
-}