@oslokommune/punkt-css 17.1.3 → 18.3.0

package/dist/css/pkt.css

@@ -285,7 +285,7 @@ input[type=search]::-webkit-search-decoration {
   font-weight: 400;
   src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
 }
-/* 
+/*
  * Colors
  * Brand
  * Light mode
@@ -318,8 +318,16 @@ input[type=search]::-webkit-search-decoration {
   --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;
@@ -353,23 +361,25 @@ input[type=search]::-webkit-search-decoration {
   --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;
@@ -382,21 +392,60 @@ input[type=search]::-webkit-search-decoration {
   --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;
@@ -451,67 +500,63 @@ input[type=search]::-webkit-search-decoration {
 }
 :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;
 }
 
 /*
@@ -3119,7 +3164,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/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;
@@ -5648,30 +5693,126 @@ button.pkt-link {
   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;
 }
@@ -6116,6 +6257,18 @@ button.pkt-link {
   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;
 }
@@ -6272,6 +6425,18 @@ button.pkt-link {
   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;
 }
@@ -6416,6 +6581,18 @@ button.pkt-link {
   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;
 }
@@ -6548,6 +6725,54 @@ button.pkt-link {
   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;
 }
@@ -6596,6 +6821,414 @@ button.pkt-link {
   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;
 }
@@ -16763,41 +17396,41 @@ button.pkt-link {
 }
 
 .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);
@@ -16862,22 +17495,36 @@ button.pkt-link {
 
 .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);
@@ -16943,28 +17590,36 @@ button.pkt-link {
 .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);
@@ -17353,7 +18008,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
    */
 }
 .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 */
 }
@@ -17367,9 +18022,9 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   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;
 }
 /*
@@ -17471,7 +18126,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   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/17.1/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);
 }
@@ -17497,7 +18152,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   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/17.1/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);
 }
@@ -17555,7 +18210,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/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%);
 }
@@ -17677,7 +18332,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
 .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);
 }
 
 /* 
@@ -17818,7 +18473,7 @@ pkt-select {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/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%;
@@ -18154,7 +18809,7 @@ pkt-select {
   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,
@@ -18228,10 +18883,10 @@ pkt-select {
 }
 
 .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 {
@@ -18243,27 +18898,12 @@ pkt-select {
     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 {
@@ -18275,27 +18915,12 @@ pkt-select {
     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,
@@ -18309,25 +18934,12 @@ pkt-select {
     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 {
@@ -18339,26 +18951,11 @@ pkt-select {
     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 {
@@ -18370,23 +18967,11 @@ pkt-select {
     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 {
@@ -18398,27 +18983,12 @@ pkt-select {
     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 {
@@ -18430,18 +19000,6 @@ pkt-select {
     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;
@@ -19056,48 +19614,6 @@ pkt-alert {
   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;
@@ -19391,7 +19907,7 @@ pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
 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;
 }
@@ -19448,7 +19964,7 @@ pkt-calendar .pkt-cal-range-hover .pkt-btn {
 }
 .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,
@@ -19630,7 +20146,7 @@ pkt-card {
   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);
@@ -19646,13 +20162,13 @@ pkt-card {
   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);
@@ -20180,7 +20696,7 @@ pkt-fileupload {
   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;
@@ -20369,7 +20885,7 @@ pkt-fileupload {
   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;
@@ -20536,7 +21052,7 @@ pkt-fileupload {
   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;
@@ -20551,7 +21067,7 @@ pkt-fileupload {
   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;
@@ -20672,7 +21188,7 @@ pkt-fileupload {
   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;
@@ -20842,7 +21358,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
 .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;
@@ -20876,7 +21392,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 
 .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;
@@ -20997,7 +21513,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 }
 .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 {
@@ -21473,7 +21989,7 @@ a.pkt-footer-simple__link:hover {
   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;
@@ -23409,7 +23925,7 @@ pkt-input-wrapper[inline] {
 }
 
 [data-mode=dark] .pkt-inputwrapper {
-  color: white;
+  color: var(--pkt-color-text-body-light, #ffffff);
 }
 
 /*
@@ -23634,7 +24150,7 @@ pkt-listbox {
 }
 .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;
@@ -23650,7 +24166,7 @@ pkt-listbox {
 }
 .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 {
@@ -23801,7 +24317,7 @@ pkt-listbox {
   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;
@@ -23812,15 +24328,15 @@ pkt-listbox {
   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;
 }
 
@@ -24063,7 +24579,7 @@ pkt-listbox {
   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;
@@ -24282,7 +24798,7 @@ pkt-messagebox {
   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;
 }
@@ -24666,18 +25182,18 @@ pkt-messagebox {
 }
 
 .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,
@@ -24690,11 +25206,11 @@ pkt-messagebox {
 }
 .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 {
@@ -24847,20 +25363,6 @@ pkt-tab-item {
 /*
  * 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;
@@ -25086,12 +25588,12 @@ button.pkt-tag {
 }
 .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,
@@ -25099,7 +25601,7 @@ button.pkt-tag {
 .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;