@oslokommune/punkt-css 9.3.2 → 9.4.1

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

@@ -1,3 +1,111 @@
+$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,
+  // Green
+  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,
+
+  // Red
+  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,
+
+  // Neutrals
+  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,
+
+  // Grays
+  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-800: #333333,
+  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),
+  // 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),
+  // 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),
+  // 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;
+
+// Deprecated colors
 $colors: (
   // brand
   color-blue: #6fe9ff,

package/dist/scss/abstracts/variables/_spacing.scss

@@ -14,16 +14,18 @@ $spacing: (
   'size-56': 3.5rem,
   'size-64': 4rem,
   'size-72': 4.5rem,
+  'size-80': 5rem,
   'size-88': 5.5rem,
   'size-104': 6.5rem,
   'size-128': 8rem,
-  'size-5': 0.3125rem /* deprecated */,
-  'size-10': 0.625rem /* deprecated */,
-  'size-15': 0.9375rem /* deprecated */,
-  'size-20': 1.25rem /* deprecated */,
-  'size-30': 1.875rem /* deprecated */,
-  'size-50': 3.125rem /* deprecated */,
-  'size-60': 3.75rem /* deprecated */,
-  'size-75': 4.6875rem /* deprecated */,
-  'size-100': 6.25rem /* deprecated */,
-) !default;
+  /* deprecated */
+  'size-5': 0.3125rem,
+  'size-10': 0.625rem,
+  'size-15': 0.9375rem,
+  'size-20': 1.25rem,
+  'size-30': 1.875rem,
+  'size-50': 3.125rem,
+  'size-60': 3.75rem,
+  'size-75': 4.6875rem,
+  'size-100': 6.25rem,
+  ) !default;

package/dist/scss/base/_colors.scss

@@ -1,24 +1,126 @@
 /* 
  * Colors
+ * Brand
+ * Light mode
+ * Dark mode
  */
 
 @use "../abstracts/variables";
 
 :root {
+
   /**
-  * @tokens Colors
-  * @presenter Color
-  */
+   * @tokens Colors
+   * @presenter Color
+   */
+  // Brand
+  @each $name, $color in variables.$pkt-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Semantic
+  @each $name, $color in variables.$pkt-semantic-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Lager css-klasser basert på pkt-fargevariabler
+  @each $name, $color in variables.$pkt-colors {
+    .pkt-color-bg-#{$name} {
+      background-color: $color !important;
+    }
+
+    .pkt-color-txt-#{$name} {
+      color: $color !important;
+    }
+
+    .pkt-color-border-#{$name} {
+      border-color: $color !important;
+    }
+  }
+
+  // Lager css-klasser basert på semantiske variabler
+  @each $name, $color in variables.$pkt-semantic-colors {
+    .pkt-color-bg-#{$name} {
+      background-color: var(--pkt-color-#{$name}) !important;
+    }
+
+    .pkt-color-txt-#{$name} {
+      color: var(--pkt-color-#{$name}) !important;
+    }
+
+    .pkt-color-border-#{$name} {
+      border-color: var(--pkt-color-#{$name}) !important;
+    }
+  }
+
+  // Deprecated colors
   @each $name, $color in variables.$colors {
     --#{$name}: #{$color};
   }
-}
 
-@each $name, $color in variables.$colors {
-  .bg-#{$name} {
-    background-color: $color !important;
+  // Lager css-klasser basert på gamle fargevariabler - deprecated
+  @each $name, $color in variables.$colors {
+    .bg-#{$name} {
+      background-color: $color !important;
+    }
+
+    .txt-#{$name} {
+      color: $color !important;
+    }
   }
-  .txt-#{$name} {
-    color: $color !important;
+
+  // Dark mode
+  [data-mode="dark"] {
+    // Background
+    --pkt-color-background-card: var(--pkt-color-grays-gray-700);
+    --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
+    --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
+    --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
+
+    // Borders
+    --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
+    --pkt-color-border-green: var(--pkt-color-brand-green-1000);
+    --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-border-red: var(--pkt-color-brand-red-1000);
+    --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
+    --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
+    --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
+    --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
+    // Surface
+    --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
+    --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
+    --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
+    --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
+    --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
+    --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
+    --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
+    --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
+    --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
+    --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
+    --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
+    --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
+    --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
+    --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
+    --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
+    --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
+
+    // Text
+    --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
+    --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
+    --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
+    --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
   }
 }

package/dist/scss/base/_typography.scss

@@ -11,7 +11,7 @@
 @use '../abstracts/functions';
 
 body {
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-body-default);
   font-family: #{map.get(variables.$font-family, 'normal')};
   font-size: map.get(variables.$font-size, 'size-16');
   font-weight: map.get(variables.$font-weight, 'light');
@@ -38,83 +38,42 @@ a,
   // link, visited, hover, focus, active
   // but we don't use visited, so we can skip :link
 
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-action-normal);
   text-decoration: underline;
   word-wrap: break-word;
   cursor: pointer;
+
   // visited
-  &:visited {
-    color: var(--color-blue-dark);
+  &:visited:not(.pkt-linkcard) {
+    color: inherit;
   }
 
   // hover
   &:hover,
   &.pkt-link--hover {
-    color: var(--color-hover);
+    color: var(--pkt-color-text-action-active);
     text-decoration: underline;
   }
 
   // focus
   &:focus-visible,
   &.pkt-link--focus {
-    box-shadow: 0px 0px 0px 0.125rem var(--color-active),
-      0px 0px 0px 0.375rem var(--color-focus);
+    box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
+      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
     outline: none;
-    color: var(--color-hover);
+    color: var(--pkt-color-text-action-active);
   }
 
   &:focus:not(:focus-visible) {
     box-shadow: none;
-    outline: 0.125rem solid var(--color-active);
-    color: var(--color-hover);
+    outline: 0.125rem solid var(--pkt-color-text-action-active);
+    color: var(--pkt-color-text-action-active);
   }
 
   // active
   &:active,
   &.pkt-link--active {
-    color: var(--color-active);
-  }
-
-  @at-root [data-mode='dark'] a {
-    // link
-    &:link,
-    &.pkt-link--link {
-      color: var(--color-white);
-      text-decoration: underline;
-      word-wrap: break-word;
-    }
-
-    // visited
-    &:visited {
-      color: var(--color-white);
-    }
-
-    // hover
-    &:hover,
-    &.pkt-link--hover {
-      color: var(--color-hover-light);
-    }
-
-    // focus
-    &:focus-visible,
-    &.pkt-link--focus {
-      box-shadow: 0px 0px 0px 0.125rem var(--color-active-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-focus);
-      color: var(--color-hover-light);
-    }
-
-    // active
-    &:active,
-    &.pkt-link--active {
-      color: var(--color-active-light);
-    }
+    color: var(--pkt-color-text-action-active);
   }
 }
 
@@ -143,7 +102,7 @@ a,
 
   &--external::after {
     content: ' ';
-    --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;
@@ -153,8 +112,7 @@ a,
 
   &--external:hover::after {
     // #1f42aa
-    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%)
-      hue-rotate(222deg) brightness(93%) contrast(90%);
+    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
   }
 }
 
@@ -176,8 +134,7 @@ button.pkt-link {
 
     &--external:hover::after {
       // #b3f5ff
-      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%)
-        hue-rotate(173deg) brightness(109%) contrast(105%);
+      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
     }
   }
 }

package/dist/scss/components/_alert.scss

@@ -14,42 +14,42 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
 
 // default is "info"
 .#{$-module-name} {
-  --pkt-alert-bc: var(--color-blue);
-  --pkt-alert-bg: var(--color-blue-60);
-  --pkt-alert-txt: var(--color-blue-dark);
-  --pkt-alert-icon-fg: var(--color-blue-dark);
-  --pkt-alert-close-fg: var(--color-blue-dark);
+  --pkt-color-alert-bc: var(--pkt-color-border-blue);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);
+  --pkt-color-alert-txt: var(--pkt-color-text-body-dark);
+  --pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000);
 }
+
 .#{$-module-name}--error {
-  --pkt-alert-bc: var(--color-red);
-  --pkt-alert-bg: var(--color-red-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-red);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red);
 }
 
 .#{$-module-name}--success {
-  --pkt-alert-bc: var(--color-green);
-  --pkt-alert-bg: var(--color-green-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-green);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-green);
 }
 
 .#{$-module-name}--warning {
-  --pkt-alert-bc: var(--color-yellow);
-  --pkt-alert-bg: var(--color-yellow-50);
+  --pkt-color-alert-bc: var(--pkt-color-border-yellow);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
 }
 
 .#{$-module-name} {
-  padding: $-alert-spacing $-alert-spacing $-alert-spacing
-    calc($-alert-spacing - $-border-thickness);
+  padding: $-alert-spacing $-alert-spacing $-alert-spacing calc($-alert-spacing - $-border-thickness);
   display: block;
   position: relative;
-  border-left: $-border-thickness solid var(--pkt-alert-bc);
-  background-color: var(--pkt-alert-bg);
-  color: var(--pkt-alert-txt);
+  border-left: $-border-thickness solid var(--pkt-color-alert-bc);
+  background-color: var(--pkt-color-alert-bg);
+  color: var(--pkt-color-alert-txt);
 
   &__title {
     @include get-text('pkt-txt-18-medium');
     margin: 0 0 $-alert-spacing 2.5rem;
   }
 
-  &__close ~ &__title {
+  &__close~&__title {
     margin: 0 4rem $-alert-spacing 2.5rem;
   }
 
@@ -63,17 +63,18 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
       &:first-of-type {
         margin-top: 0;
       }
+
       &:last-of-type {
         margin-bottom: 0;
       }
     }
   }
 
-  &__close + &__text {
+  &__close+&__text {
     margin: 0 4rem 0 2.5rem;
   }
 
-  &__title + &__text {
+  &__title+&__text {
     margin-left: 0;
     margin-right: 0;
   }
@@ -84,8 +85,7 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   }
 
   &__icon {
-    --fg-color: var(--pkt-alert-icon-fg);
-
+    --fg-color: var(--pkt-color-alert-icon-fg);
     height: 2rem;
     width: 2rem;
     position: absolute;
@@ -94,24 +94,27 @@ $-border-thickness: map.get(variables.$spacing, 'size-4');
   }
 
   &__close {
-    --fg-color: var(--pkt-alert-close-fg);
     position: absolute;
     right: 1.125rem;
     top: 0.625rem;
+
+    & svg {
+      --fg-color: var(--pkt-color-alert-close-fg);
+    }
   }
 }
 
 // Utelukkende for bruk i feilmeldinger i InputWrapper
 .#{$-module-name}--slim {
-  padding: map.get(variables.$spacing, 'size-12')
-    map.get(variables.$spacing, 'size-16')
-    map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-4');
+  padding: map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-12') map.get(variables.$spacing, 'size-4');
+
   .#{$-module-name}__icon {
     width: 1.375rem;
     height: 1.375rem;
     top: 0.81rem;
     left: 1.25rem;
   }
+
   .#{$-module-name}__text {
     @include get-text('pkt-txt-16-light');
     margin: 0 0 0 2.875rem;

package/dist/scss/components/_badge.scss

@@ -1,59 +1,60 @@
 /* 
  * Badge element
+ * DEPRECATED - use tag instead 
  */
 
- @use 'sass:map';
- @use '../abstracts/variables';
- 
- .pkt-badge {
-   display: inline-flex;
-   height: 1.5em;
-   margin-left: 0.4em;
-   padding: 0.25em 0.4em;
-   color: black;
-   font-weight: 500;
-   font-size: 0.75em;
-   line-height: 1em;
-   background: map.get(variables.$colors, 'color-blue-light');
-   border-radius: 1px;
- }
- 
- .pkt-btn > .pkt-badge.pkt-badge--strong,
- .pkt-badge--strong {
-   color: map.get(variables.$colors, 'color-blue-light');
-   background: map.get(variables.$colors, 'color-blue-dark');
- }
- 
- .pkt-btn > .pkt-badge.pkt-badge--info,
- .pkt-badge--info {
-   background: map.get(variables.$colors, 'color-yellow');
- }
- 
- // 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.$colors, 'color-blue-dark');
-   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-top: 0.28em;
-   transform: translateY(-0.1em);
- }
+@use 'sass:map';
+@use '../abstracts/variables';
+
+.pkt-badge {
+  display: inline-flex;
+  height: 1.5em;
+  margin-left: 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-top: 0.28em;
+  transform: translateY(-0.1em);
+}