@oslokommune/punkt-css 17.1.3 → 18.3.0

package/dist/css/pkt-base.css

@@ -44,7 +44,7 @@
   font-weight: 400;
   src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
 }
-/* 
+/*
  * Colors
  * Brand
  * Light mode
@@ -77,8 +77,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;
@@ -112,23 +120,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;
@@ -141,21 +151,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;
@@ -210,67 +259,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;
 }
 
 /*
@@ -2878,7 +2923,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;
@@ -5407,30 +5452,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;
 }
@@ -5875,6 +6016,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;
 }
@@ -6031,6 +6184,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;
 }
@@ -6175,6 +6340,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;
 }
@@ -6307,6 +6484,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;
 }
@@ -6355,6 +6580,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;
 }