@oslokommune/punkt-css 18.0.0 → 18.3.0

package/dist/css/pkt.layer.css

@@ -261,7 +261,7 @@
     font-weight: 400;
     src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
   }
-  /* 
+  /*
    * Colors
    * Brand
    * Light mode
@@ -294,8 +294,16 @@
     --pkt-color-brand-light-beige-1000: #f8f0dd;
     --pkt-color-brand-dark-beige-1000: #d0bfae;
     --pkt-color-brand-neutrals-white: #ffffff;
-    --pkt-color-brand-neutrals-100: #f9f9f9;
-    --pkt-color-brand-neutrals-200: #f2f2f2;
+    --pkt-color-brand-neutrals-50: #f9f9f9;
+    --pkt-color-brand-neutrals-100: #f2f2f2;
+    --pkt-color-brand-neutrals-200: #e6e6e6;
+    --pkt-color-brand-neutrals-300: #cccccc;
+    --pkt-color-brand-neutrals-400: #b3b3b3;
+    --pkt-color-brand-neutrals-500: #9a9a9a;
+    --pkt-color-brand-neutrals-600: #808080;
+    --pkt-color-brand-neutrals-700: #666666;
+    --pkt-color-brand-neutrals-800: #4d4d4d;
+    --pkt-color-brand-neutrals-900: #333333;
     --pkt-color-brand-neutrals-1000: #2c2c2c;
     --pkt-color-brand-neutrals-black: #000000;
     --pkt-color-brand-neutrals-transparent: transparent;
@@ -329,23 +337,25 @@
     --pkt-color-border-states-hover: #1f42aa;
     --pkt-color-surface-default-faded-green: #e5ffe6;
     --pkt-color-surface-default-faded-red: #ffdfdc;
-    --pkt-color-surface-default-gray: #f9f9f9;
+    --pkt-color-surface-default-gray: #f2f2f2;
     --pkt-color-surface-default-light-beige: #f8f0dd;
-    --pkt-color-surface-default-light-blue: #d1f9ff;
+    --pkt-color-surface-default-light-blue: #b3f5ff;
     --pkt-color-surface-default-light-green: #c7fde9;
+    --pkt-color-surface-default-pale-blue: #d1f9ff;
     --pkt-color-surface-default-red: #ffb4ac;
     --pkt-color-surface-default-yellow: #ffe7bc;
     --pkt-color-surface-strong-beige: #d0bfae;
     --pkt-color-surface-strong-blue: #6fe9ff;
     --pkt-color-surface-strong-dark-blue: #2a2859;
     --pkt-color-surface-strong-dark-green: #034b45;
-    --pkt-color-surface-strong-gray: #f2f2f2;
+    --pkt-color-surface-strong-gray: #e6e6e6;
     --pkt-color-surface-strong-green: #43f8b6;
     --pkt-color-surface-strong-light-green: #c7f6c9;
     --pkt-color-surface-strong-red: #ff8274;
     --pkt-color-surface-strong-yellow: #f9c66b;
     --pkt-color-surface-subtle-light-blue: #e5fcff;
     --pkt-color-surface-subtle-light-red: #fff2f1;
+    --pkt-color-surface-subtle-gray: #f9f9f9;
     --pkt-color-surface-subtle-pale-blue: #f1fdff;
     --pkt-color-surface-subtle-white: #ffffff;
     --pkt-color-text-body-dark: #2a2859;
@@ -358,21 +368,60 @@
     --pkt-color-text-action-normal: #2a2859;
     --pkt-color-input-background-normal: #ffffff;
     --pkt-color-input-background-disabled: #f9f9f9;
+    --pkt-color-input-background-open: #1f42aa;
     --pkt-color-input-border-active: #1f42aa;
     --pkt-color-input-border-disabled: #b3b3b3;
     --pkt-color-input-border-error: #ff8274;
     --pkt-color-input-border-hover: #1f42aa;
     --pkt-color-input-border-normal: #2a2859;
     --pkt-color-input-text-active: #1f42aa;
-    --pkt-color-input-text-disabled: #808080;
+    --pkt-color-input-text-disabled: #666666;
     --pkt-color-input-text-hover: #1f42aa;
     --pkt-color-input-text-normal: #2a2859;
     --pkt-color-input-text-error: #ff8274;
     --pkt-color-input-text-open: #ffffff;
+    --pkt-color-tag-text-normal: #2a2859;
+    --pkt-color-tag-text-hover: #1f42aa;
+    --pkt-color-tag-text-active: #1f42aa;
+    --pkt-color-tag-text-focus: #1f42aa;
     --pkt-color-input-check-background: #ffffff;
     --pkt-color-input-check-border: #2a2859;
     --pkt-color-input-check-text-active: #1f42aa;
     --pkt-color-input-check-text-hover: #1f42aa;
+    --pkt-color-button-primary-background-normal: #2a2859;
+    --pkt-color-button-primary-background-hover: #1f42aa;
+    --pkt-color-button-primary-background-focus: #1f42aa;
+    --pkt-color-button-primary-background-active: #1f42aa;
+    --pkt-color-button-primary-background-disabled: #f9f9f9;
+    --pkt-color-button-primary-background-success: #43f8b6;
+    --pkt-color-button-primary-background-danger: #ff8274;
+    --pkt-color-button-primary-border-focus: #1f42aa;
+    --pkt-color-button-primary-text-normal: #ffffff;
+    --pkt-color-button-primary-text-hover: #ffffff;
+    --pkt-color-button-primary-text-focus: #ffffff;
+    --pkt-color-button-primary-text-active: #ffffff;
+    --pkt-color-button-primary-text-disabled: #666666;
+    --pkt-color-button-secondary-background-hover: #1f42aa;
+    --pkt-color-button-secondary-background-active: #1f42aa;
+    --pkt-color-button-secondary-background-disabled: #f9f9f9;
+    --pkt-color-button-secondary-border-normal: #2a2859;
+    --pkt-color-button-secondary-border-yellow: #f9c66b;
+    --pkt-color-button-secondary-border-focus: #1f42aa;
+    --pkt-color-button-secondary-text-normal: #2a2859;
+    --pkt-color-button-secondary-text-hover: #ffffff;
+    --pkt-color-button-secondary-text-focus: #1f42aa;
+    --pkt-color-button-secondary-text-active: #ffffff;
+    --pkt-color-button-secondary-text-disabled: #666666;
+    --pkt-color-button-tertiary-background-hover: #f2f2f2;
+    --pkt-color-button-tertiary-background-focus: #f2f2f2;
+    --pkt-color-button-tertiary-background-active: #1f42aa;
+    --pkt-color-button-tertiary-background-disabled: #f9f9f9;
+    --pkt-color-button-tertiary-border-focus: #1f42aa;
+    --pkt-color-button-tertiary-text-normal: #2a2859;
+    --pkt-color-button-tertiary-text-hover: #1f42aa;
+    --pkt-color-button-tertiary-text-focus: #1f42aa;
+    --pkt-color-button-tertiary-text-active: #ffffff;
+    --pkt-color-button-tertiary-text-disabled: #666666;
     --color-blue: #6fe9ff;
     --color-blue-light: #b3f5ff;
     --color-blue-dark: #2a2859;
@@ -427,67 +476,63 @@
   }
   :root[data-mode=dark],
   :root [data-mode=dark] {
-    --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);
-    --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);
-    --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);
-    --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);
-    --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
-    --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
-    --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
+    --pkt-color-background-card: #2c2c2c;
+    --pkt-color-background-default: #2c2c2c;
+    --pkt-color-background-subtle: #333333;
+    --pkt-color-border-default: #ffffff;
+    --pkt-color-border-subtle: #4d4d4d;
+    --pkt-color-border-states-active: #b3f5ff;
+    --pkt-color-border-states-disabled: #808080;
+    --pkt-color-border-states-hover: #b3f5ff;
+    --pkt-color-text-body-default: #ffffff;
+    --pkt-color-text-placeholder: #b3b3b3;
+    --pkt-color-text-action-disabled: #cccccc;
+    --pkt-color-text-action-active: #b3f5ff;
+    --pkt-color-text-action-hover: #b3f5ff;
+    --pkt-color-text-action-normal: #ffffff;
+    --pkt-color-input-background-open: #b3f5ff;
+    --pkt-color-input-border-active: #b3f5ff;
+    --pkt-color-input-border-disabled: #cccccc;
+    --pkt-color-input-border-hover: #b3f5ff;
+    --pkt-color-input-border-normal: #ffffff;
+    --pkt-color-input-text-open: #2a2859;
+    --pkt-color-tag-text-hover: #2a2859;
+    --pkt-color-tag-text-active: #2a2859;
+    --pkt-color-tag-text-focus: #2a2859;
+    --pkt-color-input-check-background: #2a2859;
+    --pkt-color-input-check-border: #ffffff;
+    --pkt-color-input-check-text-active: #b3f5ff;
+    --pkt-color-input-check-text-hover: #b3f5ff;
+    --pkt-color-button-primary-background-normal: #b3f5ff;
+    --pkt-color-button-primary-background-hover: #6fe9ff;
+    --pkt-color-button-primary-background-focus: #6fe9ff;
+    --pkt-color-button-primary-background-active: #6fe9ff;
+    --pkt-color-button-primary-background-disabled: #4d4d4d;
+    --pkt-color-button-primary-border-focus: #6fe9ff;
+    --pkt-color-button-primary-text-normal: #2a2859;
+    --pkt-color-button-primary-text-hover: #2a2859;
+    --pkt-color-button-primary-text-focus: #2a2859;
+    --pkt-color-button-primary-text-active: #2a2859;
+    --pkt-color-button-primary-text-disabled: #b3b3b3;
+    --pkt-color-button-secondary-background-hover: #b3f5ff;
+    --pkt-color-button-secondary-background-active: #b3f5ff;
+    --pkt-color-button-secondary-background-disabled: #4d4d4d;
+    --pkt-color-button-secondary-border-normal: #ffffff;
+    --pkt-color-button-secondary-border-focus: #b3f5ff;
+    --pkt-color-button-secondary-text-normal: #ffffff;
+    --pkt-color-button-secondary-text-hover: #2a2859;
+    --pkt-color-button-secondary-text-focus: #b3f5ff;
+    --pkt-color-button-secondary-text-active: #2a2859;
+    --pkt-color-button-secondary-text-disabled: #b3b3b3;
+    --pkt-color-button-tertiary-background-hover: #6a698b;
+    --pkt-color-button-tertiary-background-focus: #6a698b;
+    --pkt-color-button-tertiary-background-active: #6a698b;
+    --pkt-color-button-tertiary-background-disabled: #4d4d4d;
+    --pkt-color-button-tertiary-border-focus: transparent;
+    --pkt-color-button-tertiary-text-normal: #ffffff;
+    --pkt-color-button-tertiary-text-hover: #ffffff;
+    --pkt-color-button-tertiary-text-focus: #ffffff;
+    --pkt-color-button-tertiary-text-disabled: #b3b3b3;
   }
   /*
    * Defaults for elementer
@@ -3019,7 +3064,7 @@
   .pkt-link--external::after {
     display: inline-block;
     content: " ";
-    --svg: url(https://punkt-cdn.oslo.kommune.no/18.0/icons/new-window-small.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/new-window-small.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-size: 18px 18px;
@@ -5475,24 +5520,96 @@
   .pkt-color-border-brand-neutrals-white {
     border-color: #ffffff !important;
   }
-  .pkt-color-bg-brand-neutrals-100 {
+  .pkt-color-bg-brand-neutrals-50 {
     background-color: #f9f9f9 !important;
   }
-  .pkt-color-txt-brand-neutrals-100 {
+  .pkt-color-txt-brand-neutrals-50 {
     color: #f9f9f9 !important;
   }
-  .pkt-color-border-brand-neutrals-100 {
+  .pkt-color-border-brand-neutrals-50 {
     border-color: #f9f9f9 !important;
   }
-  .pkt-color-bg-brand-neutrals-200 {
+  .pkt-color-bg-brand-neutrals-100 {
     background-color: #f2f2f2 !important;
   }
-  .pkt-color-txt-brand-neutrals-200 {
+  .pkt-color-txt-brand-neutrals-100 {
     color: #f2f2f2 !important;
   }
-  .pkt-color-border-brand-neutrals-200 {
+  .pkt-color-border-brand-neutrals-100 {
     border-color: #f2f2f2 !important;
   }
+  .pkt-color-bg-brand-neutrals-200 {
+    background-color: #e6e6e6 !important;
+  }
+  .pkt-color-txt-brand-neutrals-200 {
+    color: #e6e6e6 !important;
+  }
+  .pkt-color-border-brand-neutrals-200 {
+    border-color: #e6e6e6 !important;
+  }
+  .pkt-color-bg-brand-neutrals-300 {
+    background-color: #cccccc !important;
+  }
+  .pkt-color-txt-brand-neutrals-300 {
+    color: #cccccc !important;
+  }
+  .pkt-color-border-brand-neutrals-300 {
+    border-color: #cccccc !important;
+  }
+  .pkt-color-bg-brand-neutrals-400 {
+    background-color: #b3b3b3 !important;
+  }
+  .pkt-color-txt-brand-neutrals-400 {
+    color: #b3b3b3 !important;
+  }
+  .pkt-color-border-brand-neutrals-400 {
+    border-color: #b3b3b3 !important;
+  }
+  .pkt-color-bg-brand-neutrals-500 {
+    background-color: #9a9a9a !important;
+  }
+  .pkt-color-txt-brand-neutrals-500 {
+    color: #9a9a9a !important;
+  }
+  .pkt-color-border-brand-neutrals-500 {
+    border-color: #9a9a9a !important;
+  }
+  .pkt-color-bg-brand-neutrals-600 {
+    background-color: #808080 !important;
+  }
+  .pkt-color-txt-brand-neutrals-600 {
+    color: #808080 !important;
+  }
+  .pkt-color-border-brand-neutrals-600 {
+    border-color: #808080 !important;
+  }
+  .pkt-color-bg-brand-neutrals-700 {
+    background-color: #666666 !important;
+  }
+  .pkt-color-txt-brand-neutrals-700 {
+    color: #666666 !important;
+  }
+  .pkt-color-border-brand-neutrals-700 {
+    border-color: #666666 !important;
+  }
+  .pkt-color-bg-brand-neutrals-800 {
+    background-color: #4d4d4d !important;
+  }
+  .pkt-color-txt-brand-neutrals-800 {
+    color: #4d4d4d !important;
+  }
+  .pkt-color-border-brand-neutrals-800 {
+    border-color: #4d4d4d !important;
+  }
+  .pkt-color-bg-brand-neutrals-900 {
+    background-color: #333333 !important;
+  }
+  .pkt-color-txt-brand-neutrals-900 {
+    color: #333333 !important;
+  }
+  .pkt-color-border-brand-neutrals-900 {
+    border-color: #333333 !important;
+  }
   .pkt-color-bg-brand-neutrals-1000 {
     background-color: #2c2c2c !important;
   }
@@ -5826,6 +5943,15 @@
   .pkt-color-border-surface-default-light-green {
     border-color: var(--pkt-color-surface-default-light-green) !important;
   }
+  .pkt-color-bg-surface-default-pale-blue {
+    background-color: var(--pkt-color-surface-default-pale-blue) !important;
+  }
+  .pkt-color-txt-surface-default-pale-blue {
+    color: var(--pkt-color-surface-default-pale-blue) !important;
+  }
+  .pkt-color-border-surface-default-pale-blue {
+    border-color: var(--pkt-color-surface-default-pale-blue) !important;
+  }
   .pkt-color-bg-surface-default-red {
     background-color: var(--pkt-color-surface-default-red) !important;
   }
@@ -5943,6 +6069,15 @@
   .pkt-color-border-surface-subtle-light-red {
     border-color: var(--pkt-color-surface-subtle-light-red) !important;
   }
+  .pkt-color-bg-surface-subtle-gray {
+    background-color: var(--pkt-color-surface-subtle-gray) !important;
+  }
+  .pkt-color-txt-surface-subtle-gray {
+    color: var(--pkt-color-surface-subtle-gray) !important;
+  }
+  .pkt-color-border-surface-subtle-gray {
+    border-color: var(--pkt-color-surface-subtle-gray) !important;
+  }
   .pkt-color-bg-surface-subtle-pale-blue {
     background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
   }
@@ -6051,6 +6186,15 @@
   .pkt-color-border-input-background-disabled {
     border-color: var(--pkt-color-input-background-disabled) !important;
   }
+  .pkt-color-bg-input-background-open {
+    background-color: var(--pkt-color-input-background-open) !important;
+  }
+  .pkt-color-txt-input-background-open {
+    color: var(--pkt-color-input-background-open) !important;
+  }
+  .pkt-color-border-input-background-open {
+    border-color: var(--pkt-color-input-background-open) !important;
+  }
   .pkt-color-bg-input-border-active {
     background-color: var(--pkt-color-input-border-active) !important;
   }
@@ -6150,6 +6294,42 @@
   .pkt-color-border-input-text-open {
     border-color: var(--pkt-color-input-text-open) !important;
   }
+  .pkt-color-bg-tag-text-normal {
+    background-color: var(--pkt-color-tag-text-normal) !important;
+  }
+  .pkt-color-txt-tag-text-normal {
+    color: var(--pkt-color-tag-text-normal) !important;
+  }
+  .pkt-color-border-tag-text-normal {
+    border-color: var(--pkt-color-tag-text-normal) !important;
+  }
+  .pkt-color-bg-tag-text-hover {
+    background-color: var(--pkt-color-tag-text-hover) !important;
+  }
+  .pkt-color-txt-tag-text-hover {
+    color: var(--pkt-color-tag-text-hover) !important;
+  }
+  .pkt-color-border-tag-text-hover {
+    border-color: var(--pkt-color-tag-text-hover) !important;
+  }
+  .pkt-color-bg-tag-text-active {
+    background-color: var(--pkt-color-tag-text-active) !important;
+  }
+  .pkt-color-txt-tag-text-active {
+    color: var(--pkt-color-tag-text-active) !important;
+  }
+  .pkt-color-border-tag-text-active {
+    border-color: var(--pkt-color-tag-text-active) !important;
+  }
+  .pkt-color-bg-tag-text-focus {
+    background-color: var(--pkt-color-tag-text-focus) !important;
+  }
+  .pkt-color-txt-tag-text-focus {
+    color: var(--pkt-color-tag-text-focus) !important;
+  }
+  .pkt-color-border-tag-text-focus {
+    border-color: var(--pkt-color-tag-text-focus) !important;
+  }
   .pkt-color-bg-input-check-background {
     background-color: var(--pkt-color-input-check-background) !important;
   }
@@ -6186,6 +6366,312 @@
   .pkt-color-border-input-check-text-hover {
     border-color: var(--pkt-color-input-check-text-hover) !important;
   }
+  .pkt-color-bg-button-primary-background-normal {
+    background-color: var(--pkt-color-button-primary-background-normal) !important;
+  }
+  .pkt-color-txt-button-primary-background-normal {
+    color: var(--pkt-color-button-primary-background-normal) !important;
+  }
+  .pkt-color-border-button-primary-background-normal {
+    border-color: var(--pkt-color-button-primary-background-normal) !important;
+  }
+  .pkt-color-bg-button-primary-background-hover {
+    background-color: var(--pkt-color-button-primary-background-hover) !important;
+  }
+  .pkt-color-txt-button-primary-background-hover {
+    color: var(--pkt-color-button-primary-background-hover) !important;
+  }
+  .pkt-color-border-button-primary-background-hover {
+    border-color: var(--pkt-color-button-primary-background-hover) !important;
+  }
+  .pkt-color-bg-button-primary-background-focus {
+    background-color: var(--pkt-color-button-primary-background-focus) !important;
+  }
+  .pkt-color-txt-button-primary-background-focus {
+    color: var(--pkt-color-button-primary-background-focus) !important;
+  }
+  .pkt-color-border-button-primary-background-focus {
+    border-color: var(--pkt-color-button-primary-background-focus) !important;
+  }
+  .pkt-color-bg-button-primary-background-active {
+    background-color: var(--pkt-color-button-primary-background-active) !important;
+  }
+  .pkt-color-txt-button-primary-background-active {
+    color: var(--pkt-color-button-primary-background-active) !important;
+  }
+  .pkt-color-border-button-primary-background-active {
+    border-color: var(--pkt-color-button-primary-background-active) !important;
+  }
+  .pkt-color-bg-button-primary-background-disabled {
+    background-color: var(--pkt-color-button-primary-background-disabled) !important;
+  }
+  .pkt-color-txt-button-primary-background-disabled {
+    color: var(--pkt-color-button-primary-background-disabled) !important;
+  }
+  .pkt-color-border-button-primary-background-disabled {
+    border-color: var(--pkt-color-button-primary-background-disabled) !important;
+  }
+  .pkt-color-bg-button-primary-background-success {
+    background-color: var(--pkt-color-button-primary-background-success) !important;
+  }
+  .pkt-color-txt-button-primary-background-success {
+    color: var(--pkt-color-button-primary-background-success) !important;
+  }
+  .pkt-color-border-button-primary-background-success {
+    border-color: var(--pkt-color-button-primary-background-success) !important;
+  }
+  .pkt-color-bg-button-primary-background-danger {
+    background-color: var(--pkt-color-button-primary-background-danger) !important;
+  }
+  .pkt-color-txt-button-primary-background-danger {
+    color: var(--pkt-color-button-primary-background-danger) !important;
+  }
+  .pkt-color-border-button-primary-background-danger {
+    border-color: var(--pkt-color-button-primary-background-danger) !important;
+  }
+  .pkt-color-bg-button-primary-border-focus {
+    background-color: var(--pkt-color-button-primary-border-focus) !important;
+  }
+  .pkt-color-txt-button-primary-border-focus {
+    color: var(--pkt-color-button-primary-border-focus) !important;
+  }
+  .pkt-color-border-button-primary-border-focus {
+    border-color: var(--pkt-color-button-primary-border-focus) !important;
+  }
+  .pkt-color-bg-button-primary-text-normal {
+    background-color: var(--pkt-color-button-primary-text-normal) !important;
+  }
+  .pkt-color-txt-button-primary-text-normal {
+    color: var(--pkt-color-button-primary-text-normal) !important;
+  }
+  .pkt-color-border-button-primary-text-normal {
+    border-color: var(--pkt-color-button-primary-text-normal) !important;
+  }
+  .pkt-color-bg-button-primary-text-hover {
+    background-color: var(--pkt-color-button-primary-text-hover) !important;
+  }
+  .pkt-color-txt-button-primary-text-hover {
+    color: var(--pkt-color-button-primary-text-hover) !important;
+  }
+  .pkt-color-border-button-primary-text-hover {
+    border-color: var(--pkt-color-button-primary-text-hover) !important;
+  }
+  .pkt-color-bg-button-primary-text-focus {
+    background-color: var(--pkt-color-button-primary-text-focus) !important;
+  }
+  .pkt-color-txt-button-primary-text-focus {
+    color: var(--pkt-color-button-primary-text-focus) !important;
+  }
+  .pkt-color-border-button-primary-text-focus {
+    border-color: var(--pkt-color-button-primary-text-focus) !important;
+  }
+  .pkt-color-bg-button-primary-text-active {
+    background-color: var(--pkt-color-button-primary-text-active) !important;
+  }
+  .pkt-color-txt-button-primary-text-active {
+    color: var(--pkt-color-button-primary-text-active) !important;
+  }
+  .pkt-color-border-button-primary-text-active {
+    border-color: var(--pkt-color-button-primary-text-active) !important;
+  }
+  .pkt-color-bg-button-primary-text-disabled {
+    background-color: var(--pkt-color-button-primary-text-disabled) !important;
+  }
+  .pkt-color-txt-button-primary-text-disabled {
+    color: var(--pkt-color-button-primary-text-disabled) !important;
+  }
+  .pkt-color-border-button-primary-text-disabled {
+    border-color: var(--pkt-color-button-primary-text-disabled) !important;
+  }
+  .pkt-color-bg-button-secondary-background-hover {
+    background-color: var(--pkt-color-button-secondary-background-hover) !important;
+  }
+  .pkt-color-txt-button-secondary-background-hover {
+    color: var(--pkt-color-button-secondary-background-hover) !important;
+  }
+  .pkt-color-border-button-secondary-background-hover {
+    border-color: var(--pkt-color-button-secondary-background-hover) !important;
+  }
+  .pkt-color-bg-button-secondary-background-active {
+    background-color: var(--pkt-color-button-secondary-background-active) !important;
+  }
+  .pkt-color-txt-button-secondary-background-active {
+    color: var(--pkt-color-button-secondary-background-active) !important;
+  }
+  .pkt-color-border-button-secondary-background-active {
+    border-color: var(--pkt-color-button-secondary-background-active) !important;
+  }
+  .pkt-color-bg-button-secondary-background-disabled {
+    background-color: var(--pkt-color-button-secondary-background-disabled) !important;
+  }
+  .pkt-color-txt-button-secondary-background-disabled {
+    color: var(--pkt-color-button-secondary-background-disabled) !important;
+  }
+  .pkt-color-border-button-secondary-background-disabled {
+    border-color: var(--pkt-color-button-secondary-background-disabled) !important;
+  }
+  .pkt-color-bg-button-secondary-border-normal {
+    background-color: var(--pkt-color-button-secondary-border-normal) !important;
+  }
+  .pkt-color-txt-button-secondary-border-normal {
+    color: var(--pkt-color-button-secondary-border-normal) !important;
+  }
+  .pkt-color-border-button-secondary-border-normal {
+    border-color: var(--pkt-color-button-secondary-border-normal) !important;
+  }
+  .pkt-color-bg-button-secondary-border-yellow {
+    background-color: var(--pkt-color-button-secondary-border-yellow) !important;
+  }
+  .pkt-color-txt-button-secondary-border-yellow {
+    color: var(--pkt-color-button-secondary-border-yellow) !important;
+  }
+  .pkt-color-border-button-secondary-border-yellow {
+    border-color: var(--pkt-color-button-secondary-border-yellow) !important;
+  }
+  .pkt-color-bg-button-secondary-border-focus {
+    background-color: var(--pkt-color-button-secondary-border-focus) !important;
+  }
+  .pkt-color-txt-button-secondary-border-focus {
+    color: var(--pkt-color-button-secondary-border-focus) !important;
+  }
+  .pkt-color-border-button-secondary-border-focus {
+    border-color: var(--pkt-color-button-secondary-border-focus) !important;
+  }
+  .pkt-color-bg-button-secondary-text-normal {
+    background-color: var(--pkt-color-button-secondary-text-normal) !important;
+  }
+  .pkt-color-txt-button-secondary-text-normal {
+    color: var(--pkt-color-button-secondary-text-normal) !important;
+  }
+  .pkt-color-border-button-secondary-text-normal {
+    border-color: var(--pkt-color-button-secondary-text-normal) !important;
+  }
+  .pkt-color-bg-button-secondary-text-hover {
+    background-color: var(--pkt-color-button-secondary-text-hover) !important;
+  }
+  .pkt-color-txt-button-secondary-text-hover {
+    color: var(--pkt-color-button-secondary-text-hover) !important;
+  }
+  .pkt-color-border-button-secondary-text-hover {
+    border-color: var(--pkt-color-button-secondary-text-hover) !important;
+  }
+  .pkt-color-bg-button-secondary-text-focus {
+    background-color: var(--pkt-color-button-secondary-text-focus) !important;
+  }
+  .pkt-color-txt-button-secondary-text-focus {
+    color: var(--pkt-color-button-secondary-text-focus) !important;
+  }
+  .pkt-color-border-button-secondary-text-focus {
+    border-color: var(--pkt-color-button-secondary-text-focus) !important;
+  }
+  .pkt-color-bg-button-secondary-text-active {
+    background-color: var(--pkt-color-button-secondary-text-active) !important;
+  }
+  .pkt-color-txt-button-secondary-text-active {
+    color: var(--pkt-color-button-secondary-text-active) !important;
+  }
+  .pkt-color-border-button-secondary-text-active {
+    border-color: var(--pkt-color-button-secondary-text-active) !important;
+  }
+  .pkt-color-bg-button-secondary-text-disabled {
+    background-color: var(--pkt-color-button-secondary-text-disabled) !important;
+  }
+  .pkt-color-txt-button-secondary-text-disabled {
+    color: var(--pkt-color-button-secondary-text-disabled) !important;
+  }
+  .pkt-color-border-button-secondary-text-disabled {
+    border-color: var(--pkt-color-button-secondary-text-disabled) !important;
+  }
+  .pkt-color-bg-button-tertiary-background-hover {
+    background-color: var(--pkt-color-button-tertiary-background-hover) !important;
+  }
+  .pkt-color-txt-button-tertiary-background-hover {
+    color: var(--pkt-color-button-tertiary-background-hover) !important;
+  }
+  .pkt-color-border-button-tertiary-background-hover {
+    border-color: var(--pkt-color-button-tertiary-background-hover) !important;
+  }
+  .pkt-color-bg-button-tertiary-background-focus {
+    background-color: var(--pkt-color-button-tertiary-background-focus) !important;
+  }
+  .pkt-color-txt-button-tertiary-background-focus {
+    color: var(--pkt-color-button-tertiary-background-focus) !important;
+  }
+  .pkt-color-border-button-tertiary-background-focus {
+    border-color: var(--pkt-color-button-tertiary-background-focus) !important;
+  }
+  .pkt-color-bg-button-tertiary-background-active {
+    background-color: var(--pkt-color-button-tertiary-background-active) !important;
+  }
+  .pkt-color-txt-button-tertiary-background-active {
+    color: var(--pkt-color-button-tertiary-background-active) !important;
+  }
+  .pkt-color-border-button-tertiary-background-active {
+    border-color: var(--pkt-color-button-tertiary-background-active) !important;
+  }
+  .pkt-color-bg-button-tertiary-background-disabled {
+    background-color: var(--pkt-color-button-tertiary-background-disabled) !important;
+  }
+  .pkt-color-txt-button-tertiary-background-disabled {
+    color: var(--pkt-color-button-tertiary-background-disabled) !important;
+  }
+  .pkt-color-border-button-tertiary-background-disabled {
+    border-color: var(--pkt-color-button-tertiary-background-disabled) !important;
+  }
+  .pkt-color-bg-button-tertiary-border-focus {
+    background-color: var(--pkt-color-button-tertiary-border-focus) !important;
+  }
+  .pkt-color-txt-button-tertiary-border-focus {
+    color: var(--pkt-color-button-tertiary-border-focus) !important;
+  }
+  .pkt-color-border-button-tertiary-border-focus {
+    border-color: var(--pkt-color-button-tertiary-border-focus) !important;
+  }
+  .pkt-color-bg-button-tertiary-text-normal {
+    background-color: var(--pkt-color-button-tertiary-text-normal) !important;
+  }
+  .pkt-color-txt-button-tertiary-text-normal {
+    color: var(--pkt-color-button-tertiary-text-normal) !important;
+  }
+  .pkt-color-border-button-tertiary-text-normal {
+    border-color: var(--pkt-color-button-tertiary-text-normal) !important;
+  }
+  .pkt-color-bg-button-tertiary-text-hover {
+    background-color: var(--pkt-color-button-tertiary-text-hover) !important;
+  }
+  .pkt-color-txt-button-tertiary-text-hover {
+    color: var(--pkt-color-button-tertiary-text-hover) !important;
+  }
+  .pkt-color-border-button-tertiary-text-hover {
+    border-color: var(--pkt-color-button-tertiary-text-hover) !important;
+  }
+  .pkt-color-bg-button-tertiary-text-focus {
+    background-color: var(--pkt-color-button-tertiary-text-focus) !important;
+  }
+  .pkt-color-txt-button-tertiary-text-focus {
+    color: var(--pkt-color-button-tertiary-text-focus) !important;
+  }
+  .pkt-color-border-button-tertiary-text-focus {
+    border-color: var(--pkt-color-button-tertiary-text-focus) !important;
+  }
+  .pkt-color-bg-button-tertiary-text-active {
+    background-color: var(--pkt-color-button-tertiary-text-active) !important;
+  }
+  .pkt-color-txt-button-tertiary-text-active {
+    color: var(--pkt-color-button-tertiary-text-active) !important;
+  }
+  .pkt-color-border-button-tertiary-text-active {
+    border-color: var(--pkt-color-button-tertiary-text-active) !important;
+  }
+  .pkt-color-bg-button-tertiary-text-disabled {
+    background-color: var(--pkt-color-button-tertiary-text-disabled) !important;
+  }
+  .pkt-color-txt-button-tertiary-text-disabled {
+    color: var(--pkt-color-button-tertiary-text-disabled) !important;
+  }
+  .pkt-color-border-button-tertiary-text-disabled {
+    border-color: var(--pkt-color-button-tertiary-text-disabled) !important;
+  }
   .bg-color-blue {
     background-color: #6fe9ff !important;
   }
@@ -15798,40 +16284,40 @@
     --spinner-color: var(--pkt-color-brand-dark-blue-1000);
   }
   .pkt-btn {
-    --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
     --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
+    --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
+    --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
     --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-    --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
+    --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
     --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
+    --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
     --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
+    --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
   }
   [data-mode=dark] .pkt-btn {
-    --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
+    --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
     --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
-    --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
-    --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
+    --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
+    --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
     --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-    --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
     --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
-    --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
+    --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
     --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
-    --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
-    --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+    --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
   }
   [data-mode=dark] .pkt-btn--green-dark {
     --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -15895,21 +16381,35 @@
   }
   .pkt-btn--secondary {
     --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+    --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
+    --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
+    --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
+    --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
+    --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
+    --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
   }
   [data-mode=dark] .pkt-btn--secondary {
     --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
-    --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
+    --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
     --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
-    --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
-    --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
+    --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+    --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
     --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
-    --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
+    --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
     --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
-    --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
-    --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
+    --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
   }
   [data-mode=dark] .pkt-btn--secondary--green-dark {
     --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -15974,27 +16474,35 @@
   .pkt-btn--tertiary {
     --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
     --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-    --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
-    --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
-    --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
-    --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
-    --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+    --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
+    --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
+    --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
+    --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
+    --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-100);
+    --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
+    --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
   }
   [data-mode=dark] .pkt-btn--tertiary {
     --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
     --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
-    --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
+    --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
+    --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
+    --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
+    --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
+    --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
     --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
-    --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
+    --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
+    --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
     --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
-    --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+    --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
+    --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
+    --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
+    --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
   }
   [data-mode=dark] .pkt-btn--tertiary--green-dark {
     --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -16378,7 +16886,7 @@
      */
   }
   .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
-    color: var(--pkt-color-grays-gray-300);
+    color: var(--pkt-color-brand-neutrals-400);
     opacity: 1;
     /* 1 */
   }
@@ -16392,9 +16900,9 @@
     display: inherit;
   }
   .pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[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;
   }
   /*
@@ -16496,7 +17004,7 @@
     box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
   }
   .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
-    --svg: url(https://punkt-cdn.oslo.kommune.no/18.0/icons/minus-sign.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/minus-sign.svg);
     position: relative;
     background-color: var(--pkt-color-input-border-normal);
   }
@@ -16522,7 +17030,7 @@
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
   }
   .pkt-input-check__input-checkbox:checked[type=checkbox] {
-    --svg: url(https://punkt-cdn.oslo.kommune.no/18.0/icons/check-medium.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
     position: relative;
     background-color: var(--pkt-color-input-border-normal);
   }
@@ -16580,7 +17088,7 @@
     cursor: not-allowed;
   }
   .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-    --svg: url(https://punkt-cdn.oslo.kommune.no/18.0/icons/check-medium.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
     --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
     filter: grayscale(100%) brightness(400%);
   }
@@ -16699,7 +17207,7 @@
   .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);
   }
   /* 
    * Image elements
@@ -16832,7 +17340,7 @@
     padding-right: 3rem;
   }
   .pkt-input:is(select):not([multiple]) {
-    --svg: url(https://punkt-cdn.oslo.kommune.no/18.0/icons/chevron-thin-down.svg);
+    --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/chevron-thin-down.svg);
     background-image: var(--svg);
     background-repeat: no-repeat;
     background-position: right 0.7rem top 50%;
@@ -17165,7 +17673,7 @@
     padding-inline-end: 0;
   }
   .pkt-list-horizontal.bordered li + li {
-    border-left: 1px solid var(--pkt-color-grays-gray-600);
+    border-left: 1px solid var(--pkt-color-brand-neutrals-700);
   }
   .pkt-dl,
   .pkt-dl--narrow {
@@ -17231,10 +17739,10 @@
     margin: 1rem 0;
   }
   .pkt-section--dark {
-    color: white;
+    color: var(--pkt-color-text-body-light, #ffffff);
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #2a2859;
+    background-color: var(--pkt-color-surface-strong-dark-blue, #2a2859);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--dark {
@@ -17246,26 +17754,11 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--dark {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
-  .pkt-section--dark a.pkt-btn--ter {
-    color: white;
-  }
   .pkt-section--danger {
-    color: black;
+    color: var(--pkt-color-text-body-dark, #2a2859);
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #ff8274;
+    background-color: var(--pkt-color-surface-strong-red, #ff8274);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--danger {
@@ -17277,26 +17770,11 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--danger {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
-  .pkt-section--danger a.pkt-btn--ter {
-    color: black;
-  }
   .pkt-section--gray,
   .pkt-section--grey {
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #f2f2f2;
+    background-color: var(--pkt-color-surface-default-gray, #f2f2f2);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--gray,
@@ -17310,24 +17788,11 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--gray,
-  .pkt-section--grey {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
   .pkt-section--success {
-    color: black;
+    color: var(--pkt-color-text-body-dark, #2a2859);
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #43f8b6;
+    background-color: var(--pkt-color-surface-strong-green, #43f8b6);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--success {
@@ -17339,25 +17804,10 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--success {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
-  .pkt-section--success a.pkt-btn--ter {
-    color: black;
-  }
   .pkt-section--warning {
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #f9c66b;
+    background-color: var(--pkt-color-surface-strong-yellow, #f9c66b);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--warning {
@@ -17369,22 +17819,10 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--warning {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
   .pkt-section--info {
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: #b3f5ff;
+    background-color: var(--pkt-color-surface-default-light-blue, #b3f5ff);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--info {
@@ -17396,26 +17834,11 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--info {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
-  .pkt-section--info a.pkt-btn--ter {
-    color: black;
-  }
   .pkt-section--frame {
-    border: 1px solid #2c2c2c;
+    border: 1px solid var(--pkt-color-brand-neutrals-1000, #2c2c2c);
     margin: 1rem 0;
     padding: 0.75rem;
-    background-color: white;
+    background-color: var(--pkt-color-surface-subtle-white, #ffffff);
   }
   @media screen and (min-width: 36rem) {
     .pkt-section--frame {
@@ -17427,18 +17850,6 @@
       padding: 1.5rem;
     }
   }
-  .pkt-section--frame {
-    /*
-    @if luminance($backgroundColor) < 0.4 {
-      color: white;
-
-      a:not([class^='ok-btn']) {
-        color: white;
-        text-decoration: underline;
-      }
-    }
-    */
-  }
   [class*=ok-section-] > [class^=ok-title-] {
     margin-block-start: 0;
   }
@@ -18018,43 +18429,6 @@
     line-height: 1.375rem;
     line-height: unset;
   }
-  /* 
-   * 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);
-  }
   .pkt-bodytext--large {
     letter-spacing: -0.2px;
     font-weight: 300;
@@ -18346,7 +18720,7 @@
   pkt-calendar .pkt-cal-other,
   pkt-calendar .pkt-cal-days [data-disabled] {
     cursor: not-allowed;
-    color: var(--pkt-color-grays-gray-200);
+    color: var(--pkt-color-brand-neutrals-300);
     background: transparent;
     border: none;
   }
@@ -18403,7 +18777,7 @@
   }
   .pkt-calendar .pkt-cal-excluded,
   pkt-calendar .pkt-cal-excluded {
-    background-color: var(--pkt-color-brand-neutrals-100);
+    background-color: var(--pkt-color-brand-neutrals-50);
   }
   .pkt-calendar .pkt-cal-excluded :before,
   .pkt-calendar .pkt-cal-excluded :after,
@@ -18583,7 +18957,7 @@
     background-color: transparent;
   }
   .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray {
-    background-color: var(--pkt-color-brand-neutrals-100);
+    background-color: var(--pkt-color-brand-neutrals-50);
   }
   .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue {
     background-color: var(--pkt-color-brand-blue-200);
@@ -18599,13 +18973,13 @@
     outline-offset: -2px;
   }
   .pkt-card--outlined {
-    outline: 2px solid var(--pkt-color-grays-gray-100);
+    outline: 2px solid var(--pkt-color-brand-neutrals-200);
   }
   .pkt-card--outlined-beige {
     outline: 2px solid var(--pkt-color-brand-light-beige-1000);
   }
   .pkt-card--gray {
-    background-color: var(--pkt-color-brand-neutrals-100);
+    background-color: var(--pkt-color-brand-neutrals-50);
   }
   .pkt-card--blue {
     background-color: var(--pkt-color-brand-blue-200);
@@ -19112,7 +19486,7 @@
     width: 100%;
   }
   .pkt-fileupload--error .pkt-fileupload__drop-zone {
-    border-color: var(--pkt-color-brand-red-700);
+    border-color: var(--pkt-color-input-border-error, #ff8274);
   }
   .pkt-fileupload--error .pkt-alert--error.pkt-fileupload__error-alert {
     margin-block-end: 1rem;
@@ -19301,7 +19675,7 @@
     grid-row: 1;
     align-self: center;
     justify-self: center;
-    color: var(--pkt-color-text-subtle);
+    color: var(--pkt-color-text-placeholder, #666666);
   }
   .pkt-fileupload__queue-display__item__title {
     letter-spacing: -0.2px;
@@ -19468,7 +19842,7 @@
     line-height: 1.25rem;
     display: block;
     margin-block-start: 0.25rem;
-    color: var(--pkt-color-text-subtle);
+    color: var(--pkt-color-text-placeholder, #666666);
   }
   .pkt-fileupload__queue-display__item__comment__actions {
     display: flex;
@@ -19483,7 +19857,7 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    color: var(--pkt-color-text-subtle);
+    color: var(--pkt-color-text-placeholder, #666666);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -19604,7 +19978,7 @@
     line-height: 1.25rem;
     grid-column: 2;
     grid-row: 2;
-    color: var(--pkt-color-text-default);
+    color: var(--pkt-color-text-body-default, #2a2859);
   }
   .pkt-fileupload__queue-display__item--in-progress .pkt-progressbar__bar-wrapper, .pkt-fileupload__queue-display__item--error .pkt-progressbar__bar-wrapper {
     height: 0.25rem;
@@ -19767,7 +20141,7 @@
   .pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__content,
   pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__content {
     padding: 0 1rem 1rem;
-    background: var(--pkt-color-surface-default);
+    background: var(--pkt-color-background-default, #ffffff);
     background-image: none;
     box-shadow: none;
     min-height: 0;
@@ -19800,7 +20174,7 @@
   }
   .pkt-fileupload__image-preview {
     position: relative;
-    background-color: var(--pkt-color-surface-default);
+    background-color: var(--pkt-color-background-default, #ffffff);
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: minmax(0, 1fr) auto;
@@ -19919,7 +20293,7 @@
   }
   .pkt-footer__band--global {
     --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
-    --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
+    --pkt-footer-fg: var(--pkt-color-text-body-light, #ffffff);
     --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
   }
   .pkt-footer__band a {
@@ -20391,7 +20765,7 @@
     margin: 0;
   }
   .pkt-user-menu__label {
-    color: var(--pkt-color-grays-gray-600);
+    color: var(--pkt-color-brand-neutrals-700);
     letter-spacing: -0.2px;
     font-weight: 500;
     font-size: 0.875rem;
@@ -22308,7 +22682,7 @@
     line-height: 1.375rem;
   }
   [data-mode=dark] .pkt-inputwrapper {
-    color: white;
+    color: var(--pkt-color-text-body-light, #ffffff);
   }
   /*
    * Linkcard component
@@ -22527,7 +22901,7 @@
   }
   .pkt-listbox .pkt-listbox__option[data-disabled] {
     cursor: not-allowed;
-    color: var(--pkt-color-grays-gray-500);
+    color: var(--pkt-color-brand-neutrals-600);
   }
   .pkt-listbox .pkt-listbox__option {
     margin-block-end: 0.125rem;
@@ -22543,7 +22917,7 @@
   }
   .pkt-listbox .pkt-listbox__empty {
     padding: 0.75rem;
-    color: var(--pkt-color-text-body-muted);
+    color: var(--pkt-color-text-placeholder, #666666);
     list-style: none;
   }
   .pkt-listbox .pkt-listbox__banners {
@@ -22693,7 +23067,7 @@
     width: 5em;
     height: 6.5em;
     left: 0em;
-    background: repeating-linear-gradient(#ff8274, #ff8274 1em, #f9c66b 1em, #f9c66b 2em);
+    background: repeating-linear-gradient(var(--pkt-color-surface-strong-red, #ff8274), var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 2em);
     border-radius: 50% 50% 50% 50%/55% 55% 45% 45%;
     transform: translate3d(0, 0, 0);
     animation-name: eggroll;
@@ -22704,15 +23078,15 @@
     opacity: 0;
   }
   .pkt-loader .egg.two {
-    background: repeating-linear-gradient(#6fe9ff, #6fe9ff 1em, #ff8274 1em, #ff8274 2em);
+    background: repeating-linear-gradient(var(--pkt-color-surface-strong-blue, #6fe9ff), var(--pkt-color-surface-strong-blue, #6fe9ff) 1em, var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-red, #ff8274) 2em);
     animation-delay: 0.5s;
   }
   .pkt-loader .egg.three {
-    background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #f9c66b 1em, #f9c66b 2em);
+    background: repeating-linear-gradient(var(--pkt-color-surface-strong-green, #43f8b6), var(--pkt-color-surface-strong-green, #43f8b6) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 1em, var(--pkt-color-surface-strong-yellow, #f9c66b) 2em);
     animation-delay: 1s;
   }
   .pkt-loader .egg.four {
-    background: repeating-linear-gradient(#43f8b6, #43f8b6 1em, #ff8274 1em, #ff8274 2em);
+    background: repeating-linear-gradient(var(--pkt-color-surface-strong-green, #43f8b6), var(--pkt-color-surface-strong-green, #43f8b6) 1em, var(--pkt-color-surface-strong-red, #ff8274) 1em, var(--pkt-color-surface-strong-red, #ff8274) 2em);
     animation-delay: 1.5s;
   }
   @keyframes eggroll {
@@ -22954,7 +23328,7 @@
     padding-block-start: 0;
     position: relative;
     color: var(--pkt-color-text-body-default);
-    background: linear-gradient(var(--pkt-color-white) 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;
+    background: linear-gradient(var(--pkt-color-background-card, #ffffff) 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;
     background-attachment: local, local, scroll, scroll;
     background-repeat: no-repeat;
     background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
@@ -23154,7 +23528,7 @@
     text-align: center;
   }
   .pkt-progressbar__bar-wrapper {
-    background-color: var(--pkt-color-grays-gray-100);
+    background-color: var(--pkt-color-brand-neutrals-200);
     height: 8px;
     overflow: hidden;
   }
@@ -23531,17 +23905,17 @@
     display: none;
   }
   .pkt-step--incomplete .pkt-step__line {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
   .pkt-step--incomplete .pkt-step__title,
   .pkt-step--incomplete .pkt-step__content {
-    color: var(--pkt-color-grays-gray-600);
+    color: var(--pkt-color-brand-neutrals-700);
   }
   .pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
     background-color: var(--pkt-color-brand-dark-blue-1000);
   }
   .pkt-step--current + .pkt-step--incomplete .pkt-step__line--2 {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
   .pkt-step:last-of-type .pkt-step__line--3,
   .pkt-step:last-of-type .pkt-step__line--2 {
@@ -23552,10 +23926,10 @@
   }
   .pkt-step--current .pkt-step__line--2,
   .pkt-step--current .pkt-step__line--3 {
-    background-color: var(--pkt-color-grays-gray-200);
+    background-color: var(--pkt-color-brand-neutrals-300);
   }
   .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);
   }
   .pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content {
     display: none;
@@ -23701,18 +24075,6 @@
   /*
    * Tag element
    */
-  .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);
-  }
   pkt-tag {
     display: inline-block;
     vertical-align: middle;
@@ -23935,12 +24297,12 @@
   }
   .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-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark:is(button):hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark:is(button):focus, .pkt-tag.pkt-tag--blue-dark.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;
   }
   .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
   .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark:is(button):hover,
@@ -23948,7 +24310,7 @@
   .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark:is(button):focus,
   .pkt-tag.pkt-tag--blue-dark:is(button):focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
   .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
-    --fg-color: var(--pkt-color-brand-neutrals-200) !important;
+    --fg-color: var(--pkt-color-brand-neutrals-100) !important;
   }
   .pkt-tag.pkt-tag--small {
     padding: 0 0.25rem;