@oslokommune/punkt-css 9.3.2 → 9.4.1

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,
@@ -39,120 +42,128 @@ $-sizes: (
 );
 
 $-skins: (
-  '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-focus,
-      'hover-bg': --color-active,
-      'hover-bc': --color-active,
-      'hover-txt': --color-white,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+  'primary': (
+    'light': (
+      'button-background-normal': --pkt-color-brand-dark-blue-1000,
+      '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,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      '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-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,
     ),
-    '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-focus,
-      'hover-bg': --color-blue,
-      'hover-bc': --color-blue,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-blue,
-      'active-bc': --color-blue,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-disabled,
+    'dark': (
+      'button-background-normal': --pkt-color-brand-blue-500,
+      '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,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-blue-1000,
+      '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-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,
     ),
   ),
-  '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-focus,
-      'hover-bg': --color-active,
-      'hover-bc': --color-active,
-      'hover-txt': --color-white,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-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-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,
+      'border-states-focus': --pkt-color-brand-purple-1000,
+      'button-background-hover': --pkt-color-brand-warm-blue-1000,
+      '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-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,
     ),
-    '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-focus,
-      'hover-bg': --color-active-light,
-      'hover-bc': --color-active-light,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-active-light,
-      'active-bc': --color-active-light,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-gray,
-      'disabled-bc': --color-gray,
-      'disabled-txt': --color-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-background-focus': --pkt-color-brand-blue-500,
+      'button-border-focus': --pkt-color-brand-blue-500,
+      '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-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-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,
     ),
   ),
-  'tertiary': ('light': ('link-bg': --color-transparent,
-      'link-bc': --color-transparent,
-      'link-txt': --color-blue-dark,
-      'focus-bg': --color-gray,
-      'focus-bc': --color-active,
-      'focus-txt': --color-active,
-      'hover-bg': --color-gray,
-      'hover-bc': --color-gray,
-      'hover-txt': --color-active,
-      'active-bg': --color-active,
-      'active-bc': --color-active,
-      'active-txt': --color-white,
-      'disabled-bg': --color-transparent,
-      'disabled-bc': --color-transparent,
-      'disabled-txt': --color-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,
+      '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-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,
     ),
-    '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-focus,
-      'hover-bg': --color-blue-5,
-      'hover-bc': --color-blue-5,
-      'hover-txt': --color-blue-dark,
-      'active-bg': --color-blue-dark-10,
-      'active-bc': --color-transparent,
-      'active-txt': --color-blue-dark,
-      'disabled-bg': --color-transparent,
-      'disabled-bc': --color-transparent,
-      'disabled-txt': --color-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,
+      '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-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-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,
     ),
   ),
 );
 
 @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) {
-      --btn-#{$key}: var(#{$value});
+    @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key)
+    {
+      --pkt-color-#{$key}: var(#{$value});
     }
   }
 }
@@ -196,9 +207,7 @@ $-skins: (
         @extend %sr-only;
       }
     }
-  }
-
-  @else {
+  } @else {
     &--#{$name} {
       @include typography.get-text(map.get($o, 'text-class'));
       height: map.get($o, 'height');
@@ -226,33 +235,113 @@ $-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'
     );
 
     // Dark mode
-    &--green-dark-outline,
-    &--green-outline,
-    &--blue-outline,
-    &--beige-dark-outline,
-    &--yellow-outline,
+    &--green-dark {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-dark-green-1000
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--green-dark-outline {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--green {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--green-outline {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--blue {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--blue-outline {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--beige-light {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-light-beige-1000
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--beige-dark-outline {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--yellow {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
+    &--yellow-outline {
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    }
+
+    &--red {
+      --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
+    }
+
     &--red-outline {
-      color: var(--color-white);
+      --pkt-color-button-background-normal: var(
+        --pkt-color-brand-neutrals-transparent
+      );
+      --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+      --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
     }
   }
 }
 
 // Print css vars for hvert skin
-@each $key,
-$value in $-skins {
+@each $key, $value in $-skins {
   @include -skin($key, map.get($value, 'light'));
 }
 
@@ -269,9 +358,9 @@ $value in $-skins {
   -ms-user-select: none;
   user-select: none;
   vertical-align: top;
-  background-color: var(--btn-link-bg);
-  border: 2px solid var(--btn-link-bc);
-  color: var(--btn-link-txt);
+  background-color: var(--pkt-color-button-background-normal);
+  border: 2px solid var(--pkt-color-button-border-normal);
+  color: var(--pkt-color-button-text-normal);
   text-decoration: none;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
@@ -279,7 +368,7 @@ $value in $-skins {
   align-items: center;
   column-gap: 0.5rem;
 
-  &[class*='pkt-btn--icon']>.pkt-btn__icon {
+  &[class*='pkt-btn--icon'] > .pkt-btn__icon {
     display: flex;
   }
 
@@ -291,51 +380,49 @@ $value in $-skins {
 
   &:link,
   &:visited {
-    color: var(--btn-link-txt);
+    color: var(--pkt-color-button-text-normal);
   }
 
   @at-root a.#{$-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);
+    &:enabled:focus,
+    &.#{$-module-name}--focus {
+    background-color: var(--pkt-color-button-background-focus);
+    color: var(--pkt-color-button-text-focus);
+    border-color: var(--pkt-color-button-border-focus);
+    outline: 4px solid var(--pkt-color-border-states-focus);
     text-decoration: none;
   }
 
   @at-root a.#{$-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);
+    &:enabled:hover,
+    &.#{$-module-name}--hover {
+    background-color: var(--pkt-color-button-background-hover);
+    border-color: var(--pkt-color-button-border-hover);
+    color: var(--pkt-color-button-text-hover);
     outline: 0;
     text-decoration: underline;
   }
 
   @at-root a.#{$-module-name}:active,
-  &: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);
+    &:enabled:active,
+    &.#{$-module-name}--active,
+    &.#{$-module-name}--active:hover {
+    background-color: var(--pkt-color-button-background-active);
+    border-color: var(--pkt-color-button-border-active);
+    color: var(--pkt-color-button-text-active);
     outline: 0;
     text-decoration: none;
   }
 
   &:disabled {
-    background-color: var(--btn-disabled-bg);
-    border-color: var(--btn-disabled-bc);
-    color: var(--btn-disabled-txt);
+    background-color: var(--pkt-color-button-background-disabled);
+    border-color: var(--pkt-color-button-border-disabled);
+    color: var(--pkt-color-button-text-disabled);
     cursor: inherit;
   }
 
-
   // button sizes & variants
-  @each $key,
-  $value in $-sizes {
+  @each $key, $value in $-sizes {
     @include -size($key, $value);
   }
 
@@ -344,77 +431,92 @@ $value in $-skins {
     border: 0;
   }
 
-
-  // button colors
+  // button colors modifiers
   &--green-dark {
-    --btn-link-bg: var(--color-green-dark);
-    --btn-link-bc: var(--color-green-dark);
-    --btn-link-txt: var(--color-white);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-dark-green-1000
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
   }
 
   &--green-dark-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-green-dark);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--green {
-    --btn-link-bg: var(--color-green);
-    --btn-link-bc: var(--color-green);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--green-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-green);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--blue {
-    --btn-link-bg: var(--color-blue);
-    --btn-link-bc: var(--color-blue);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--blue-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-blue);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--beige-light {
-    --btn-link-bg: var(--color-beige-light);
-    --btn-link-bc: var(--color-beige-light);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-light-beige-1000
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--beige-dark-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-beige-dark);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--yellow {
-    --btn-link-bg: var(--color-yellow);
-    --btn-link-bc: var(--color-yellow);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--yellow-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-yellow);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--red {
-    --btn-link-bg: var(--color-red);
-    --btn-link-bc: var(--color-red);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 
   &--red-outline {
-    --btn-link-bg: transparent;
-    --btn-link-bc: var(--color-red);
-    --btn-link-txt: var(--color-blue-dark);
+    --pkt-color-button-background-normal: var(
+      --pkt-color-brand-neutrals-transparent
+    );
+    --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
   }
 }