@oslokommune/punkt-css 9.3.2 → 9.4.0

package/dist/css/pkt-base.css

@@ -46,12 +46,99 @@
 }
 /* 
  * Colors
+ * Brand
+ * Light mode
+ * Dark mode
  */
 :root {
   /**
-  * @tokens Colors
-  * @presenter Color
-  */
+   * @tokens Colors
+   * @presenter Color
+   */
+  --pkt-color-brand-blue-100: #F1FDFF;
+  --pkt-color-brand-blue-200: #E5FCFF;
+  --pkt-color-brand-blue-300: #D1F9FF;
+  --pkt-color-brand-blue-500: #B3F5FF;
+  --pkt-color-brand-blue-1000: #6FE9FF;
+  --pkt-color-brand-dark-blue-700: #6A698B;
+  --pkt-color-brand-dark-blue-1000: #2A2859;
+  --pkt-color-brand-warm-blue-1000: #1F42AA;
+  --pkt-color-brand-green-400: #C7FDE9;
+  --pkt-color-brand-green-1000: #43F8B6;
+  --pkt-color-brand-light-green-400: #E5FFE6;
+  --pkt-color-brand-light-green-1000: #C7F6C9;
+  --pkt-color-brand-dark-green-1000: #034B45;
+  --pkt-color-brand-yellow-1000: #F9C66B;
+  --pkt-color-brand-yellow-500: #FFE7BC;
+  --pkt-color-brand-red-100: #FFF2F1;
+  --pkt-color-brand-red-400: #FFDFDC;
+  --pkt-color-brand-red-600: #FFB4AC;
+  --pkt-color-brand-red-1000: #FF8274;
+  --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-1000: #2C2C2C;
+  --pkt-color-brand-neutrals-black: #000000;
+  --pkt-color-brand-neutrals-transparent: transparent;
+  --pkt-color-brand-purple-1000: #E0ADFF;
+  --pkt-color-grays-gray-100: #E6E6E6;
+  --pkt-color-grays-gray-200: #CCCCCC;
+  --pkt-color-grays-gray-300: #B3B3B3;
+  --pkt-color-grays-gray-400: #9A9A9A;
+  --pkt-color-grays-gray-500: #808080;
+  --pkt-color-grays-gray-600: #666666;
+  --pkt-color-grays-gray-700: #4D4D4D;
+  --pkt-color-grays-gray-800: #333333;
+  --pkt-color-grays-gray-900: #1A1A1A;
+  --pkt-color-grays-gray-1000: #2C2C2C;
+  --pkt-color-background-card: #FFFFFF;
+  --pkt-color-background-default: #FFFFFF;
+  --pkt-color-background-subtle: #F9F9F9;
+  --pkt-color-background-transparent: transparent;
+  --pkt-color-border-default: #2A2859;
+  --pkt-color-border-beige: #D0BFAE;
+  --pkt-color-border-blue: #6FE9FF;
+  --pkt-color-border-gray: #CCCCCC;
+  --pkt-color-border-green: #43F8B6;
+  --pkt-color-border-light-beige: #F8F0DD;
+  --pkt-color-border-red: #FF8274;
+  --pkt-color-border-subtle: #F2F2F2;
+  --pkt-color-border-yellow: #F9C66B;
+  --pkt-color-border-states-active: #1F42AA;
+  --pkt-color-border-states-disabled: #B3B3B3;
+  --pkt-color-border-states-focus: #E0ADFF;
+  --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-light-beige: #F8F0DD;
+  --pkt-color-surface-default-light-blue: #D1F9FF;
+  --pkt-color-surface-default-light-green: #C7FDE9;
+  --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-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-pale-blue: #F1FDFF;
+  --pkt-color-surface-subtle-white: #FFFFFF;
+  --pkt-color-text-body-dark: #2A2859;
+  --pkt-color-text-body-default: #2A2859;
+  --pkt-color-text-body-light: #FFFFFF;
+  --pkt-color-text-placeholder: #666666;
+  --pkt-color-text-action-disabled: #666666;
+  --pkt-color-text-action-active: #1F42AA;
+  --pkt-color-text-action-hover: #1F42AA;
+  --pkt-color-text-action-normal: #2A2859;
   --color-blue: #6fe9ff;
   --color-blue-light: #b3f5ff;
   --color-blue-dark: #2a2859;
@@ -104,414 +191,1115 @@
   --color-grayscale-90: #1a1a1a;
   --color-black: #000;
 }
-
-.bg-color-blue {
+:root .pkt-color-bg-brand-blue-100 {
+  background-color: #F1FDFF !important;
+}
+:root .pkt-color-txt-brand-blue-100 {
+  color: #F1FDFF !important;
+}
+:root .pkt-color-border-brand-blue-100 {
+  border-color: #F1FDFF !important;
+}
+:root .pkt-color-bg-brand-blue-200 {
+  background-color: #E5FCFF !important;
+}
+:root .pkt-color-txt-brand-blue-200 {
+  color: #E5FCFF !important;
+}
+:root .pkt-color-border-brand-blue-200 {
+  border-color: #E5FCFF !important;
+}
+:root .pkt-color-bg-brand-blue-300 {
+  background-color: #D1F9FF !important;
+}
+:root .pkt-color-txt-brand-blue-300 {
+  color: #D1F9FF !important;
+}
+:root .pkt-color-border-brand-blue-300 {
+  border-color: #D1F9FF !important;
+}
+:root .pkt-color-bg-brand-blue-500 {
+  background-color: #B3F5FF !important;
+}
+:root .pkt-color-txt-brand-blue-500 {
+  color: #B3F5FF !important;
+}
+:root .pkt-color-border-brand-blue-500 {
+  border-color: #B3F5FF !important;
+}
+:root .pkt-color-bg-brand-blue-1000 {
+  background-color: #6FE9FF !important;
+}
+:root .pkt-color-txt-brand-blue-1000 {
+  color: #6FE9FF !important;
+}
+:root .pkt-color-border-brand-blue-1000 {
+  border-color: #6FE9FF !important;
+}
+:root .pkt-color-bg-brand-dark-blue-700 {
+  background-color: #6A698B !important;
+}
+:root .pkt-color-txt-brand-dark-blue-700 {
+  color: #6A698B !important;
+}
+:root .pkt-color-border-brand-dark-blue-700 {
+  border-color: #6A698B !important;
+}
+:root .pkt-color-bg-brand-dark-blue-1000 {
+  background-color: #2A2859 !important;
+}
+:root .pkt-color-txt-brand-dark-blue-1000 {
+  color: #2A2859 !important;
+}
+:root .pkt-color-border-brand-dark-blue-1000 {
+  border-color: #2A2859 !important;
+}
+:root .pkt-color-bg-brand-warm-blue-1000 {
+  background-color: #1F42AA !important;
+}
+:root .pkt-color-txt-brand-warm-blue-1000 {
+  color: #1F42AA !important;
+}
+:root .pkt-color-border-brand-warm-blue-1000 {
+  border-color: #1F42AA !important;
+}
+:root .pkt-color-bg-brand-green-400 {
+  background-color: #C7FDE9 !important;
+}
+:root .pkt-color-txt-brand-green-400 {
+  color: #C7FDE9 !important;
+}
+:root .pkt-color-border-brand-green-400 {
+  border-color: #C7FDE9 !important;
+}
+:root .pkt-color-bg-brand-green-1000 {
+  background-color: #43F8B6 !important;
+}
+:root .pkt-color-txt-brand-green-1000 {
+  color: #43F8B6 !important;
+}
+:root .pkt-color-border-brand-green-1000 {
+  border-color: #43F8B6 !important;
+}
+:root .pkt-color-bg-brand-light-green-400 {
+  background-color: #E5FFE6 !important;
+}
+:root .pkt-color-txt-brand-light-green-400 {
+  color: #E5FFE6 !important;
+}
+:root .pkt-color-border-brand-light-green-400 {
+  border-color: #E5FFE6 !important;
+}
+:root .pkt-color-bg-brand-light-green-1000 {
+  background-color: #C7F6C9 !important;
+}
+:root .pkt-color-txt-brand-light-green-1000 {
+  color: #C7F6C9 !important;
+}
+:root .pkt-color-border-brand-light-green-1000 {
+  border-color: #C7F6C9 !important;
+}
+:root .pkt-color-bg-brand-dark-green-1000 {
+  background-color: #034B45 !important;
+}
+:root .pkt-color-txt-brand-dark-green-1000 {
+  color: #034B45 !important;
+}
+:root .pkt-color-border-brand-dark-green-1000 {
+  border-color: #034B45 !important;
+}
+:root .pkt-color-bg-brand-yellow-1000 {
+  background-color: #F9C66B !important;
+}
+:root .pkt-color-txt-brand-yellow-1000 {
+  color: #F9C66B !important;
+}
+:root .pkt-color-border-brand-yellow-1000 {
+  border-color: #F9C66B !important;
+}
+:root .pkt-color-bg-brand-yellow-500 {
+  background-color: #FFE7BC !important;
+}
+:root .pkt-color-txt-brand-yellow-500 {
+  color: #FFE7BC !important;
+}
+:root .pkt-color-border-brand-yellow-500 {
+  border-color: #FFE7BC !important;
+}
+:root .pkt-color-bg-brand-red-100 {
+  background-color: #FFF2F1 !important;
+}
+:root .pkt-color-txt-brand-red-100 {
+  color: #FFF2F1 !important;
+}
+:root .pkt-color-border-brand-red-100 {
+  border-color: #FFF2F1 !important;
+}
+:root .pkt-color-bg-brand-red-400 {
+  background-color: #FFDFDC !important;
+}
+:root .pkt-color-txt-brand-red-400 {
+  color: #FFDFDC !important;
+}
+:root .pkt-color-border-brand-red-400 {
+  border-color: #FFDFDC !important;
+}
+:root .pkt-color-bg-brand-red-600 {
+  background-color: #FFB4AC !important;
+}
+:root .pkt-color-txt-brand-red-600 {
+  color: #FFB4AC !important;
+}
+:root .pkt-color-border-brand-red-600 {
+  border-color: #FFB4AC !important;
+}
+:root .pkt-color-bg-brand-red-1000 {
+  background-color: #FF8274 !important;
+}
+:root .pkt-color-txt-brand-red-1000 {
+  color: #FF8274 !important;
+}
+:root .pkt-color-border-brand-red-1000 {
+  border-color: #FF8274 !important;
+}
+:root .pkt-color-bg-brand-light-beige-1000 {
+  background-color: #F8F0DD !important;
+}
+:root .pkt-color-txt-brand-light-beige-1000 {
+  color: #F8F0DD !important;
+}
+:root .pkt-color-border-brand-light-beige-1000 {
+  border-color: #F8F0DD !important;
+}
+:root .pkt-color-bg-brand-dark-beige-1000 {
+  background-color: #D0BFAE !important;
+}
+:root .pkt-color-txt-brand-dark-beige-1000 {
+  color: #D0BFAE !important;
+}
+:root .pkt-color-border-brand-dark-beige-1000 {
+  border-color: #D0BFAE !important;
+}
+:root .pkt-color-bg-brand-neutrals-white {
+  background-color: #FFFFFF !important;
+}
+:root .pkt-color-txt-brand-neutrals-white {
+  color: #FFFFFF !important;
+}
+:root .pkt-color-border-brand-neutrals-white {
+  border-color: #FFFFFF !important;
+}
+:root .pkt-color-bg-brand-neutrals-100 {
+  background-color: #F9F9F9 !important;
+}
+:root .pkt-color-txt-brand-neutrals-100 {
+  color: #F9F9F9 !important;
+}
+:root .pkt-color-border-brand-neutrals-100 {
+  border-color: #F9F9F9 !important;
+}
+:root .pkt-color-bg-brand-neutrals-200 {
+  background-color: #F2F2F2 !important;
+}
+:root .pkt-color-txt-brand-neutrals-200 {
+  color: #F2F2F2 !important;
+}
+:root .pkt-color-border-brand-neutrals-200 {
+  border-color: #F2F2F2 !important;
+}
+:root .pkt-color-bg-brand-neutrals-1000 {
+  background-color: #2C2C2C !important;
+}
+:root .pkt-color-txt-brand-neutrals-1000 {
+  color: #2C2C2C !important;
+}
+:root .pkt-color-border-brand-neutrals-1000 {
+  border-color: #2C2C2C !important;
+}
+:root .pkt-color-bg-brand-neutrals-black {
+  background-color: #000000 !important;
+}
+:root .pkt-color-txt-brand-neutrals-black {
+  color: #000000 !important;
+}
+:root .pkt-color-border-brand-neutrals-black {
+  border-color: #000000 !important;
+}
+:root .pkt-color-bg-brand-neutrals-transparent {
+  background-color: transparent !important;
+}
+:root .pkt-color-txt-brand-neutrals-transparent {
+  color: transparent !important;
+}
+:root .pkt-color-border-brand-neutrals-transparent {
+  border-color: transparent !important;
+}
+:root .pkt-color-bg-brand-purple-1000 {
+  background-color: #E0ADFF !important;
+}
+:root .pkt-color-txt-brand-purple-1000 {
+  color: #E0ADFF !important;
+}
+:root .pkt-color-border-brand-purple-1000 {
+  border-color: #E0ADFF !important;
+}
+:root .pkt-color-bg-grays-gray-100 {
+  background-color: #E6E6E6 !important;
+}
+:root .pkt-color-txt-grays-gray-100 {
+  color: #E6E6E6 !important;
+}
+:root .pkt-color-border-grays-gray-100 {
+  border-color: #E6E6E6 !important;
+}
+:root .pkt-color-bg-grays-gray-200 {
+  background-color: #CCCCCC !important;
+}
+:root .pkt-color-txt-grays-gray-200 {
+  color: #CCCCCC !important;
+}
+:root .pkt-color-border-grays-gray-200 {
+  border-color: #CCCCCC !important;
+}
+:root .pkt-color-bg-grays-gray-300 {
+  background-color: #B3B3B3 !important;
+}
+:root .pkt-color-txt-grays-gray-300 {
+  color: #B3B3B3 !important;
+}
+:root .pkt-color-border-grays-gray-300 {
+  border-color: #B3B3B3 !important;
+}
+:root .pkt-color-bg-grays-gray-400 {
+  background-color: #9A9A9A !important;
+}
+:root .pkt-color-txt-grays-gray-400 {
+  color: #9A9A9A !important;
+}
+:root .pkt-color-border-grays-gray-400 {
+  border-color: #9A9A9A !important;
+}
+:root .pkt-color-bg-grays-gray-500 {
+  background-color: #808080 !important;
+}
+:root .pkt-color-txt-grays-gray-500 {
+  color: #808080 !important;
+}
+:root .pkt-color-border-grays-gray-500 {
+  border-color: #808080 !important;
+}
+:root .pkt-color-bg-grays-gray-600 {
+  background-color: #666666 !important;
+}
+:root .pkt-color-txt-grays-gray-600 {
+  color: #666666 !important;
+}
+:root .pkt-color-border-grays-gray-600 {
+  border-color: #666666 !important;
+}
+:root .pkt-color-bg-grays-gray-700 {
+  background-color: #4D4D4D !important;
+}
+:root .pkt-color-txt-grays-gray-700 {
+  color: #4D4D4D !important;
+}
+:root .pkt-color-border-grays-gray-700 {
+  border-color: #4D4D4D !important;
+}
+:root .pkt-color-bg-grays-gray-800 {
+  background-color: #333333 !important;
+}
+:root .pkt-color-txt-grays-gray-800 {
+  color: #333333 !important;
+}
+:root .pkt-color-border-grays-gray-800 {
+  border-color: #333333 !important;
+}
+:root .pkt-color-bg-grays-gray-900 {
+  background-color: #1A1A1A !important;
+}
+:root .pkt-color-txt-grays-gray-900 {
+  color: #1A1A1A !important;
+}
+:root .pkt-color-border-grays-gray-900 {
+  border-color: #1A1A1A !important;
+}
+:root .pkt-color-bg-grays-gray-1000 {
+  background-color: #2C2C2C !important;
+}
+:root .pkt-color-txt-grays-gray-1000 {
+  color: #2C2C2C !important;
+}
+:root .pkt-color-border-grays-gray-1000 {
+  border-color: #2C2C2C !important;
+}
+:root .pkt-color-bg-background-card {
+  background-color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-txt-background-card {
+  color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-border-background-card {
+  border-color: var(--pkt-color-background-card) !important;
+}
+:root .pkt-color-bg-background-default {
+  background-color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-txt-background-default {
+  color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-border-background-default {
+  border-color: var(--pkt-color-background-default) !important;
+}
+:root .pkt-color-bg-background-subtle {
+  background-color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-txt-background-subtle {
+  color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-border-background-subtle {
+  border-color: var(--pkt-color-background-subtle) !important;
+}
+:root .pkt-color-bg-background-transparent {
+  background-color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-txt-background-transparent {
+  color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-border-background-transparent {
+  border-color: var(--pkt-color-background-transparent) !important;
+}
+:root .pkt-color-bg-border-default {
+  background-color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-txt-border-default {
+  color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-border-border-default {
+  border-color: var(--pkt-color-border-default) !important;
+}
+:root .pkt-color-bg-border-beige {
+  background-color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-txt-border-beige {
+  color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-border-border-beige {
+  border-color: var(--pkt-color-border-beige) !important;
+}
+:root .pkt-color-bg-border-blue {
+  background-color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-txt-border-blue {
+  color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-border-border-blue {
+  border-color: var(--pkt-color-border-blue) !important;
+}
+:root .pkt-color-bg-border-gray {
+  background-color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-txt-border-gray {
+  color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-border-border-gray {
+  border-color: var(--pkt-color-border-gray) !important;
+}
+:root .pkt-color-bg-border-green {
+  background-color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-txt-border-green {
+  color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-border-border-green {
+  border-color: var(--pkt-color-border-green) !important;
+}
+:root .pkt-color-bg-border-light-beige {
+  background-color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-txt-border-light-beige {
+  color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-border-border-light-beige {
+  border-color: var(--pkt-color-border-light-beige) !important;
+}
+:root .pkt-color-bg-border-red {
+  background-color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-txt-border-red {
+  color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-border-border-red {
+  border-color: var(--pkt-color-border-red) !important;
+}
+:root .pkt-color-bg-border-subtle {
+  background-color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-txt-border-subtle {
+  color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-border-border-subtle {
+  border-color: var(--pkt-color-border-subtle) !important;
+}
+:root .pkt-color-bg-border-yellow {
+  background-color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-txt-border-yellow {
+  color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-border-border-yellow {
+  border-color: var(--pkt-color-border-yellow) !important;
+}
+:root .pkt-color-bg-border-states-active {
+  background-color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-txt-border-states-active {
+  color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-border-border-states-active {
+  border-color: var(--pkt-color-border-states-active) !important;
+}
+:root .pkt-color-bg-border-states-disabled {
+  background-color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-txt-border-states-disabled {
+  color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-border-border-states-disabled {
+  border-color: var(--pkt-color-border-states-disabled) !important;
+}
+:root .pkt-color-bg-border-states-focus {
+  background-color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-txt-border-states-focus {
+  color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-border-border-states-focus {
+  border-color: var(--pkt-color-border-states-focus) !important;
+}
+:root .pkt-color-bg-border-states-hover {
+  background-color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-txt-border-states-hover {
+  color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-border-border-states-hover {
+  border-color: var(--pkt-color-border-states-hover) !important;
+}
+:root .pkt-color-bg-surface-default-faded-green {
+  background-color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-txt-surface-default-faded-green {
+  color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-border-surface-default-faded-green {
+  border-color: var(--pkt-color-surface-default-faded-green) !important;
+}
+:root .pkt-color-bg-surface-default-faded-red {
+  background-color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-txt-surface-default-faded-red {
+  color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-border-surface-default-faded-red {
+  border-color: var(--pkt-color-surface-default-faded-red) !important;
+}
+:root .pkt-color-bg-surface-default-gray {
+  background-color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-txt-surface-default-gray {
+  color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-border-surface-default-gray {
+  border-color: var(--pkt-color-surface-default-gray) !important;
+}
+:root .pkt-color-bg-surface-default-light-beige {
+  background-color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-txt-surface-default-light-beige {
+  color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-border-surface-default-light-beige {
+  border-color: var(--pkt-color-surface-default-light-beige) !important;
+}
+:root .pkt-color-bg-surface-default-light-blue {
+  background-color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-txt-surface-default-light-blue {
+  color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-border-surface-default-light-blue {
+  border-color: var(--pkt-color-surface-default-light-blue) !important;
+}
+:root .pkt-color-bg-surface-default-light-green {
+  background-color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-txt-surface-default-light-green {
+  color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-border-surface-default-light-green {
+  border-color: var(--pkt-color-surface-default-light-green) !important;
+}
+:root .pkt-color-bg-surface-default-red {
+  background-color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-txt-surface-default-red {
+  color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-border-surface-default-red {
+  border-color: var(--pkt-color-surface-default-red) !important;
+}
+:root .pkt-color-bg-surface-default-yellow {
+  background-color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-txt-surface-default-yellow {
+  color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-border-surface-default-yellow {
+  border-color: var(--pkt-color-surface-default-yellow) !important;
+}
+:root .pkt-color-bg-surface-strong-beige {
+  background-color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-txt-surface-strong-beige {
+  color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-border-surface-strong-beige {
+  border-color: var(--pkt-color-surface-strong-beige) !important;
+}
+:root .pkt-color-bg-surface-strong-blue {
+  background-color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-txt-surface-strong-blue {
+  color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-border-surface-strong-blue {
+  border-color: var(--pkt-color-surface-strong-blue) !important;
+}
+:root .pkt-color-bg-surface-strong-dark-blue {
+  background-color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-txt-surface-strong-dark-blue {
+  color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-border-surface-strong-dark-blue {
+  border-color: var(--pkt-color-surface-strong-dark-blue) !important;
+}
+:root .pkt-color-bg-surface-strong-dark-green {
+  background-color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-txt-surface-strong-dark-green {
+  color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-border-surface-strong-dark-green {
+  border-color: var(--pkt-color-surface-strong-dark-green) !important;
+}
+:root .pkt-color-bg-surface-strong-gray {
+  background-color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-txt-surface-strong-gray {
+  color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-border-surface-strong-gray {
+  border-color: var(--pkt-color-surface-strong-gray) !important;
+}
+:root .pkt-color-bg-surface-strong-green {
+  background-color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-txt-surface-strong-green {
+  color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-border-surface-strong-green {
+  border-color: var(--pkt-color-surface-strong-green) !important;
+}
+:root .pkt-color-bg-surface-strong-light-green {
+  background-color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-txt-surface-strong-light-green {
+  color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-border-surface-strong-light-green {
+  border-color: var(--pkt-color-surface-strong-light-green) !important;
+}
+:root .pkt-color-bg-surface-strong-red {
+  background-color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-txt-surface-strong-red {
+  color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-border-surface-strong-red {
+  border-color: var(--pkt-color-surface-strong-red) !important;
+}
+:root .pkt-color-bg-surface-strong-yellow {
+  background-color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-txt-surface-strong-yellow {
+  color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-border-surface-strong-yellow {
+  border-color: var(--pkt-color-surface-strong-yellow) !important;
+}
+:root .pkt-color-bg-surface-subtle-light-blue {
+  background-color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-txt-surface-subtle-light-blue {
+  color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-border-surface-subtle-light-blue {
+  border-color: var(--pkt-color-surface-subtle-light-blue) !important;
+}
+:root .pkt-color-bg-surface-subtle-light-red {
+  background-color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-txt-surface-subtle-light-red {
+  color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-border-surface-subtle-light-red {
+  border-color: var(--pkt-color-surface-subtle-light-red) !important;
+}
+:root .pkt-color-bg-surface-subtle-pale-blue {
+  background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-txt-surface-subtle-pale-blue {
+  color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-border-surface-subtle-pale-blue {
+  border-color: var(--pkt-color-surface-subtle-pale-blue) !important;
+}
+:root .pkt-color-bg-surface-subtle-white {
+  background-color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-txt-surface-subtle-white {
+  color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-border-surface-subtle-white {
+  border-color: var(--pkt-color-surface-subtle-white) !important;
+}
+:root .pkt-color-bg-text-body-dark {
+  background-color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-txt-text-body-dark {
+  color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-border-text-body-dark {
+  border-color: var(--pkt-color-text-body-dark) !important;
+}
+:root .pkt-color-bg-text-body-default {
+  background-color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-txt-text-body-default {
+  color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-border-text-body-default {
+  border-color: var(--pkt-color-text-body-default) !important;
+}
+:root .pkt-color-bg-text-body-light {
+  background-color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-txt-text-body-light {
+  color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-border-text-body-light {
+  border-color: var(--pkt-color-text-body-light) !important;
+}
+:root .pkt-color-bg-text-placeholder {
+  background-color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-txt-text-placeholder {
+  color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-border-text-placeholder {
+  border-color: var(--pkt-color-text-placeholder) !important;
+}
+:root .pkt-color-bg-text-action-disabled {
+  background-color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-txt-text-action-disabled {
+  color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-border-text-action-disabled {
+  border-color: var(--pkt-color-text-action-disabled) !important;
+}
+:root .pkt-color-bg-text-action-active {
+  background-color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-txt-text-action-active {
+  color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-border-text-action-active {
+  border-color: var(--pkt-color-text-action-active) !important;
+}
+:root .pkt-color-bg-text-action-hover {
+  background-color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-txt-text-action-hover {
+  color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-border-text-action-hover {
+  border-color: var(--pkt-color-text-action-hover) !important;
+}
+:root .pkt-color-bg-text-action-normal {
+  background-color: var(--pkt-color-text-action-normal) !important;
+}
+:root .pkt-color-txt-text-action-normal {
+  color: var(--pkt-color-text-action-normal) !important;
+}
+:root .pkt-color-border-text-action-normal {
+  border-color: var(--pkt-color-text-action-normal) !important;
+}
+:root .bg-color-blue {
   background-color: #6fe9ff !important;
 }
-
-.txt-color-blue {
+:root .txt-color-blue {
   color: #6fe9ff !important;
 }
-
-.bg-color-blue-light {
+:root .bg-color-blue-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-blue-light {
+:root .txt-color-blue-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-blue-dark {
+:root .bg-color-blue-dark {
   background-color: #2a2859 !important;
 }
-
-.txt-color-blue-dark {
+:root .txt-color-blue-dark {
   color: #2a2859 !important;
 }
-
-.bg-color-green {
+:root .bg-color-green {
   background-color: #43f8b6 !important;
 }
-
-.txt-color-green {
+:root .txt-color-green {
   color: #43f8b6 !important;
 }
-
-.bg-color-green-light {
+:root .bg-color-green-light {
   background-color: #c7f6c9 !important;
 }
-
-.txt-color-green-light {
+:root .txt-color-green-light {
   color: #c7f6c9 !important;
 }
-
-.bg-color-green-dark {
+:root .bg-color-green-dark {
   background-color: #034b45 !important;
 }
-
-.txt-color-green-dark {
+:root .txt-color-green-dark {
   color: #034b45 !important;
 }
-
-.bg-color-red {
+:root .bg-color-red {
   background-color: #ff8274 !important;
 }
-
-.txt-color-red {
+:root .txt-color-red {
   color: #ff8274 !important;
 }
-
-.bg-color-red-light {
+:root .bg-color-red-light {
   background-color: #ffb4ac !important;
 }
-
-.txt-color-red-light {
+:root .txt-color-red-light {
   color: #ffb4ac !important;
 }
-
-.bg-color-yellow {
+:root .bg-color-yellow {
   background-color: #f9c66b !important;
 }
-
-.txt-color-yellow {
+:root .txt-color-yellow {
   color: #f9c66b !important;
 }
-
-.bg-color-beige-light {
+:root .bg-color-beige-light {
   background-color: #f8f0dd !important;
 }
-
-.txt-color-beige-light {
+:root .txt-color-beige-light {
   color: #f8f0dd !important;
 }
-
-.bg-color-beige-dark {
+:root .bg-color-beige-dark {
   background-color: #d0bfae !important;
 }
-
-.txt-color-beige-dark {
+:root .txt-color-beige-dark {
   color: #d0bfae !important;
 }
-
-.bg-color-active {
+:root .bg-color-active {
   background-color: #1f42aa !important;
 }
-
-.txt-color-active {
+:root .txt-color-active {
   color: #1f42aa !important;
 }
-
-.bg-color-active-light {
+:root .bg-color-active-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-active-light {
+:root .txt-color-active-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-hover {
+:root .bg-color-hover {
   background-color: #1f42aa !important;
 }
-
-.txt-color-hover {
+:root .txt-color-hover {
   color: #1f42aa !important;
 }
-
-.bg-color-hover-light {
+:root .bg-color-hover-light {
   background-color: #b3f5ff !important;
 }
-
-.txt-color-hover-light {
+:root .txt-color-hover-light {
   color: #b3f5ff !important;
 }
-
-.bg-color-focus {
+:root .bg-color-focus {
   background-color: #e0adff !important;
 }
-
-.txt-color-focus {
+:root .txt-color-focus {
   color: #e0adff !important;
 }
-
-.bg-color-disabled {
+:root .bg-color-disabled {
   background-color: #4d4d4d !important;
 }
-
-.txt-color-disabled {
+:root .txt-color-disabled {
   color: #4d4d4d !important;
 }
-
-.bg-color-disabled-light {
+:root .bg-color-disabled-light {
   background-color: #f9f9f9 !important;
 }
-
-.txt-color-disabled-light {
+:root .txt-color-disabled-light {
   color: #f9f9f9 !important;
 }
-
-.bg-color-info {
+:root .bg-color-info {
   background-color: #2a2859 !important;
 }
-
-.txt-color-info {
+:root .txt-color-info {
   color: #2a2859 !important;
 }
-
-.bg-color-success {
+:root .bg-color-success {
   background-color: #034b45 !important;
 }
-
-.txt-color-success {
+:root .txt-color-success {
   color: #034b45 !important;
 }
-
-.bg-color-warning {
+:root .bg-color-warning {
   background-color: #774c01 !important;
 }
-
-.txt-color-warning {
+:root .txt-color-warning {
   color: #774c01 !important;
 }
-
-.bg-color-error {
+:root .bg-color-error {
   background-color: #96281c !important;
 }
-
-.txt-color-error {
+:root .txt-color-error {
   color: #96281c !important;
 }
-
-.bg-color-blue-dark-5 {
+:root .bg-color-blue-dark-5 {
   background-color: #f2f9ff !important;
 }
-
-.txt-color-blue-dark-5 {
+:root .txt-color-blue-dark-5 {
   color: #f2f9ff !important;
 }
-
-.bg-color-blue-dark-10 {
+:root .bg-color-blue-dark-10 {
   background-color: #d9e9f2 !important;
 }
-
-.txt-color-blue-dark-10 {
+:root .txt-color-blue-dark-10 {
   color: #d9e9f2 !important;
 }
-
-.bg-color-blue-5 {
+:root .bg-color-blue-5 {
   background-color: #f1fdff !important;
 }
-
-.txt-color-blue-5 {
+:root .txt-color-blue-5 {
   color: #f1fdff !important;
 }
-
-.bg-color-blue-10 {
+:root .bg-color-blue-10 {
   background-color: #e5fcff !important;
 }
-
-.txt-color-blue-10 {
+:root .txt-color-blue-10 {
   color: #e5fcff !important;
 }
-
-.bg-color-blue-60 {
+:root .bg-color-blue-60 {
   background-color: #d1f9ff !important;
 }
-
-.txt-color-blue-60 {
+:root .txt-color-blue-60 {
   color: #d1f9ff !important;
 }
-
-.bg-color-green-dark-5 {
+:root .bg-color-green-dark-5 {
   background-color: #f2fff3 !important;
 }
-
-.txt-color-green-dark-5 {
+:root .txt-color-green-dark-5 {
   color: #f2fff3 !important;
 }
-
-.bg-color-green-dark-10 {
+:root .bg-color-green-dark-10 {
   background-color: #d9f2ef !important;
 }
-
-.txt-color-green-dark-10 {
+:root .txt-color-green-dark-10 {
   color: #d9f2ef !important;
 }
-
-.bg-color-green-10 {
+:root .bg-color-green-10 {
   background-color: #e5ffe6 !important;
 }
-
-.txt-color-green-10 {
+:root .txt-color-green-10 {
   color: #e5ffe6 !important;
 }
-
-.bg-color-green-30 {
+:root .bg-color-green-30 {
   background-color: #c7fde9 !important;
 }
-
-.txt-color-green-30 {
+:root .txt-color-green-30 {
   color: #c7fde9 !important;
 }
-
-.bg-color-red-5 {
+:root .bg-color-red-5 {
   background-color: #fff3f2 !important;
 }
-
-.txt-color-red-5 {
+:root .txt-color-red-5 {
   color: #fff3f2 !important;
 }
-
-.bg-color-red-10 {
+:root .bg-color-red-10 {
   background-color: #ffe8e5 !important;
 }
-
-.txt-color-red-10 {
+:root .txt-color-red-10 {
   color: #ffe8e5 !important;
 }
-
-.bg-color-red-30 {
+:root .bg-color-red-30 {
   background-color: #ffdfdc !important;
 }
-
-.txt-color-red-30 {
+:root .txt-color-red-30 {
   color: #ffdfdc !important;
 }
-
-.bg-color-yellow-5 {
+:root .bg-color-yellow-5 {
   background-color: #fef9f0 !important;
 }
-
-.txt-color-yellow-5 {
+:root .txt-color-yellow-5 {
   color: #fef9f0 !important;
 }
-
-.bg-color-yellow-50 {
+:root .bg-color-yellow-50 {
   background-color: #ffe7bc !important;
 }
-
-.txt-color-yellow-50 {
+:root .txt-color-yellow-50 {
   color: #ffe7bc !important;
 }
-
-.bg-color-gray-light {
+:root .bg-color-gray-light {
   background-color: #f9f9f9 !important;
 }
-
-.txt-color-gray-light {
+:root .txt-color-gray-light {
   color: #f9f9f9 !important;
 }
-
-.bg-color-gray {
+:root .bg-color-gray {
   background-color: #f2f2f2 !important;
 }
-
-.txt-color-gray {
+:root .txt-color-gray {
   color: #f2f2f2 !important;
 }
-
-.bg-color-gray-dark {
+:root .bg-color-gray-dark {
   background-color: #2c2c2c !important;
 }
-
-.txt-color-gray-dark {
+:root .txt-color-gray-dark {
   color: #2c2c2c !important;
 }
-
-.bg-color-transparent {
+:root .bg-color-transparent {
   background-color: transparent !important;
 }
-
-.txt-color-transparent {
+:root .txt-color-transparent {
   color: transparent !important;
 }
-
-.bg-color-white {
+:root .bg-color-white {
   background-color: #fff !important;
 }
-
-.txt-color-white {
+:root .txt-color-white {
   color: #fff !important;
 }
-
-.bg-color-grayscale-10 {
+:root .bg-color-grayscale-10 {
   background-color: #e6e6e6 !important;
 }
-
-.txt-color-grayscale-10 {
+:root .txt-color-grayscale-10 {
   color: #e6e6e6 !important;
 }
-
-.bg-color-grayscale-20 {
+:root .bg-color-grayscale-20 {
   background-color: #ccc !important;
 }
-
-.txt-color-grayscale-20 {
+:root .txt-color-grayscale-20 {
   color: #ccc !important;
 }
-
-.bg-color-grayscale-30 {
+:root .bg-color-grayscale-30 {
   background-color: #b3b3b3 !important;
 }
-
-.txt-color-grayscale-30 {
+:root .txt-color-grayscale-30 {
   color: #b3b3b3 !important;
 }
-
-.bg-color-grayscale-40 {
+:root .bg-color-grayscale-40 {
   background-color: #9a9a9a !important;
 }
-
-.txt-color-grayscale-40 {
+:root .txt-color-grayscale-40 {
   color: #9a9a9a !important;
 }
-
-.bg-color-grayscale-50 {
+:root .bg-color-grayscale-50 {
   background-color: #808080 !important;
 }
-
-.txt-color-grayscale-50 {
+:root .txt-color-grayscale-50 {
   color: #808080 !important;
 }
-
-.bg-color-grayscale-60 {
+:root .bg-color-grayscale-60 {
   background-color: #666 !important;
 }
-
-.txt-color-grayscale-60 {
+:root .txt-color-grayscale-60 {
   color: #666 !important;
 }
-
-.bg-color-grayscale-70 {
+:root .bg-color-grayscale-70 {
   background-color: #4d4d4d !important;
 }
-
-.txt-color-grayscale-70 {
+:root .txt-color-grayscale-70 {
   color: #4d4d4d !important;
 }
-
-.bg-color-grayscale-80 {
+:root .bg-color-grayscale-80 {
   background-color: #333 !important;
 }
-
-.txt-color-grayscale-80 {
+:root .txt-color-grayscale-80 {
   color: #333 !important;
 }
-
-.bg-color-grayscale-90 {
+:root .bg-color-grayscale-90 {
   background-color: #1a1a1a !important;
 }
-
-.txt-color-grayscale-90 {
+:root .txt-color-grayscale-90 {
   color: #1a1a1a !important;
 }
-
-.bg-color-black {
+:root .bg-color-black {
   background-color: #000 !important;
 }
-
-.txt-color-black {
+:root .txt-color-black {
   color: #000 !important;
 }
+: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);
+}
 
 /* 
  * Defaults for elementer
@@ -5777,6 +6565,354 @@ body {
     padding-bottom: 4.5rem !important;
   }
 }
+.m-size-80 {
+  margin: 5rem !important;
+}
+
+.mt-size-80 {
+  margin-top: 5rem !important;
+}
+
+.mr-size-80 {
+  margin-right: 5rem !important;
+}
+
+.mb-size-80 {
+  margin-bottom: 5rem !important;
+}
+
+.ml-size-80 {
+  margin-left: 5rem !important;
+}
+
+.mx-size-80 {
+  margin-right: 5rem !important;
+  margin-left: 5rem !important;
+}
+
+.my-size-80 {
+  margin-top: 5rem !important;
+  margin-bottom: 5rem !important;
+}
+
+.p-size-80 {
+  padding: 5rem !important;
+}
+
+.pt-size-80 {
+  padding-top: 5rem !important;
+}
+
+.pr-size-80 {
+  padding-right: 5rem !important;
+}
+
+.pb-size-80 {
+  padding-bottom: 5rem !important;
+}
+
+.pl-size-80 {
+  padding-left: 5rem !important;
+}
+
+.px-size-80 {
+  padding-right: 5rem !important;
+  padding-left: 5rem !important;
+}
+
+.py-size-80 {
+  padding-top: 5rem !important;
+  padding-bottom: 5rem !important;
+}
+
+@media screen and (min-width: 0) {
+  .m-size-80--mobile-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--mobile-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--mobile-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--mobile-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--mobile-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--mobile-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--mobile-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--mobile-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--mobile-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--mobile-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--mobile-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--mobile-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--mobile-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--mobile-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 36rem) {
+  .m-size-80--phablet-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--phablet-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--phablet-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--phablet-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--phablet-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--phablet-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--phablet-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--phablet-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--phablet-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--phablet-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--phablet-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--phablet-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--phablet-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--phablet-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .m-size-80--tablet-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--tablet-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--tablet-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--tablet-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--tablet-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--tablet-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--tablet-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--tablet-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--tablet-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--tablet-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--tablet-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--tablet-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--tablet-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--tablet-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .m-size-80--tablet-big-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--tablet-big-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--tablet-big-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--tablet-big-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--tablet-big-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--tablet-big-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--tablet-big-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--tablet-big-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--tablet-big-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--tablet-big-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--tablet-big-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--tablet-big-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--tablet-big-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--tablet-big-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .m-size-80--laptop-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--laptop-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--laptop-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--laptop-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--laptop-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--laptop-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--laptop-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--laptop-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--laptop-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--laptop-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--laptop-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--laptop-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--laptop-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--laptop-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
+@media screen and (min-width: 100rem) {
+  .m-size-80--desktop-up {
+    margin: 5rem !important;
+  }
+  .mt-size-80--desktop-up {
+    margin-top: 5rem !important;
+  }
+  .mr-size-80--desktop-up {
+    margin-right: 5rem !important;
+  }
+  .mb-size-80--desktop-up {
+    margin-bottom: 5rem !important;
+  }
+  .ml-size-80--desktop-up {
+    margin-left: 5rem !important;
+  }
+  .mx-size-80--desktop-up {
+    margin-right: 5rem !important;
+    margin-left: 5rem !important;
+  }
+  .my-size-80--desktop-up {
+    margin-top: 5rem !important;
+    margin-bottom: 5rem !important;
+  }
+  .p-size-80--desktop-up {
+    padding: 5rem !important;
+  }
+  .pt-size-80--desktop-up {
+    padding-top: 5rem !important;
+  }
+  .pr-size-80--desktop-up {
+    padding-right: 5rem !important;
+  }
+  .pb-size-80--desktop-up {
+    padding-bottom: 5rem !important;
+  }
+  .pl-size-80--desktop-up {
+    padding-left: 5rem !important;
+  }
+  .px-size-80--desktop-up {
+    padding-right: 5rem !important;
+    padding-left: 5rem !important;
+  }
+  .py-size-80--desktop-up {
+    padding-top: 5rem !important;
+    padding-bottom: 5rem !important;
+  }
+}
 .m-size-88 {
   margin: 5.5rem !important;
 }
@@ -10209,6 +11345,15 @@ body {
 .pkt-grid--rowgap-size-72 {
   row-gap: 4.5rem;
 }
+.pkt-grid--gap-size-80 {
+  gap: 5rem;
+}
+.pkt-grid--colgap-size-80 {
+  column-gap: 5rem;
+}
+.pkt-grid--rowgap-size-80 {
+  row-gap: 5rem;
+}
 .pkt-grid--gap-size-88 {
   gap: 5.5rem;
 }
@@ -10453,6 +11598,15 @@ body {
   .pkt-grid--rowgap-size-72-mobile-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-mobile-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-mobile-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-mobile-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-mobile-up {
     gap: 5.5rem;
   }
@@ -10698,6 +11852,15 @@ body {
   .pkt-grid--rowgap-size-72-phablet-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-phablet-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-phablet-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-phablet-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-phablet-up {
     gap: 5.5rem;
   }
@@ -10943,6 +12106,15 @@ body {
   .pkt-grid--rowgap-size-72-tablet-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-tablet-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-tablet-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-tablet-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-tablet-up {
     gap: 5.5rem;
   }
@@ -11188,6 +12360,15 @@ body {
   .pkt-grid--rowgap-size-72-tablet-big-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-tablet-big-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-tablet-big-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-tablet-big-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-tablet-big-up {
     gap: 5.5rem;
   }
@@ -11433,6 +12614,15 @@ body {
   .pkt-grid--rowgap-size-72-laptop-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-laptop-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-laptop-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-laptop-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-laptop-up {
     gap: 5.5rem;
   }
@@ -11678,6 +12868,15 @@ body {
   .pkt-grid--rowgap-size-72-desktop-up {
     row-gap: 4.5rem;
   }
+  .pkt-grid--gap-size-80-desktop-up {
+    gap: 5rem;
+  }
+  .pkt-grid--colgap-size-80-desktop-up {
+    column-gap: 5rem;
+  }
+  .pkt-grid--rowgap-size-80-desktop-up {
+    row-gap: 5rem;
+  }
   .pkt-grid--gap-size-88-desktop-up {
     gap: 5.5rem;
   }
@@ -12038,7 +13237,7 @@ body {
  * 
  */
 body {
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-body-default);
   font-family: 'Oslo Sans', arial, sans-serif;
   font-size: 1rem;
   font-weight: 300;
@@ -12061,62 +13260,38 @@ strong {
 
 a,
 .pkt-link-button {
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-text-action-normal);
   text-decoration: underline;
   word-wrap: break-word;
   cursor: pointer;
 }
-a:visited,
-.pkt-link-button:visited {
-  color: var(--color-blue-dark);
+a:visited:not(.pkt-linkcard),
+.pkt-link-button:visited:not(.pkt-linkcard) {
+  color: inherit;
 }
 a:hover, a.pkt-link--hover,
 .pkt-link-button:hover,
 .pkt-link-button.pkt-link--hover {
-  color: var(--color-hover);
+  color: var(--pkt-color-text-action-active);
   text-decoration: underline;
 }
 a:focus-visible, a.pkt-link--focus,
 .pkt-link-button:focus-visible,
 .pkt-link-button.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--color-active), 0px 0px 0px 0.375rem var(--color-focus);
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
   outline: none;
-  color: var(--color-hover);
+  color: var(--pkt-color-text-action-active);
 }
 a:focus:not(:focus-visible),
 .pkt-link-button:focus:not(:focus-visible) {
   box-shadow: none;
-  outline: 0.125rem solid var(--color-active);
-  color: var(--color-hover);
+  outline: 0.125rem solid var(--pkt-color-text-action-active);
+  color: var(--pkt-color-text-action-active);
 }
 a:active, a.pkt-link--active,
 .pkt-link-button:active,
 .pkt-link-button.pkt-link--active {
-  color: var(--color-active);
-}
-[data-mode=dark] a:link, [data-mode=dark] a.pkt-link--link {
-  color: var(--color-white);
-  text-decoration: underline;
-  word-wrap: break-word;
-}
-[data-mode=dark] a:visited {
-  color: var(--color-white);
-}
-[data-mode=dark] a:hover, [data-mode=dark] a.pkt-link--hover {
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:focus-visible, [data-mode=dark] a.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--color-active-light), 0px 0px 0px 0.375rem var(--color-focus);
-  outline: none;
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0.125rem solid var(--color-focus);
-  color: var(--color-hover-light);
-}
-[data-mode=dark] a:active, [data-mode=dark] a.pkt-link--active {
-  color: var(--color-active-light);
+  color: var(--pkt-color-text-action-active);
 }
 
 .pkt-link {
@@ -12141,7 +13316,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.3/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;