@oslokommune/punkt-css 17.0.4 → 17.0.5

package/dist/css/pkt-docs.css

@@ -449,1285 +449,1690 @@ input[type=search]::-webkit-search-decoration {
   --color-grayscale-90: #1a1a1a;
   --color-black: #000;
 }
-:root .pkt-color-bg-brand-blue-100 {
+: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-bg-brand-blue-100 {
   background-color: #f1fdff !important;
 }
-:root .pkt-color-txt-brand-blue-100 {
+
+.pkt-color-txt-brand-blue-100 {
   color: #f1fdff !important;
 }
-:root .pkt-color-border-brand-blue-100 {
+
+.pkt-color-border-brand-blue-100 {
   border-color: #f1fdff !important;
 }
-:root .pkt-color-bg-brand-blue-200 {
+
+.pkt-color-bg-brand-blue-200 {
   background-color: #e5fcff !important;
 }
-:root .pkt-color-txt-brand-blue-200 {
+
+.pkt-color-txt-brand-blue-200 {
   color: #e5fcff !important;
 }
-:root .pkt-color-border-brand-blue-200 {
+
+.pkt-color-border-brand-blue-200 {
   border-color: #e5fcff !important;
 }
-:root .pkt-color-bg-brand-blue-300 {
+
+.pkt-color-bg-brand-blue-300 {
   background-color: #d1f9ff !important;
 }
-:root .pkt-color-txt-brand-blue-300 {
+
+.pkt-color-txt-brand-blue-300 {
   color: #d1f9ff !important;
 }
-:root .pkt-color-border-brand-blue-300 {
+
+.pkt-color-border-brand-blue-300 {
   border-color: #d1f9ff !important;
 }
-:root .pkt-color-bg-brand-blue-500 {
+
+.pkt-color-bg-brand-blue-500 {
   background-color: #b3f5ff !important;
 }
-:root .pkt-color-txt-brand-blue-500 {
+
+.pkt-color-txt-brand-blue-500 {
   color: #b3f5ff !important;
 }
-:root .pkt-color-border-brand-blue-500 {
+
+.pkt-color-border-brand-blue-500 {
   border-color: #b3f5ff !important;
 }
-:root .pkt-color-bg-brand-blue-1000 {
+
+.pkt-color-bg-brand-blue-1000 {
   background-color: #6fe9ff !important;
 }
-:root .pkt-color-txt-brand-blue-1000 {
+
+.pkt-color-txt-brand-blue-1000 {
   color: #6fe9ff !important;
 }
-:root .pkt-color-border-brand-blue-1000 {
+
+.pkt-color-border-brand-blue-1000 {
   border-color: #6fe9ff !important;
 }
-:root .pkt-color-bg-brand-dark-blue-700 {
+
+.pkt-color-bg-brand-dark-blue-700 {
   background-color: #6a698b !important;
 }
-:root .pkt-color-txt-brand-dark-blue-700 {
+
+.pkt-color-txt-brand-dark-blue-700 {
   color: #6a698b !important;
 }
-:root .pkt-color-border-brand-dark-blue-700 {
+
+.pkt-color-border-brand-dark-blue-700 {
   border-color: #6a698b !important;
 }
-:root .pkt-color-bg-brand-dark-blue-1000 {
+
+.pkt-color-bg-brand-dark-blue-1000 {
   background-color: #2a2859 !important;
 }
-:root .pkt-color-txt-brand-dark-blue-1000 {
+
+.pkt-color-txt-brand-dark-blue-1000 {
   color: #2a2859 !important;
 }
-:root .pkt-color-border-brand-dark-blue-1000 {
+
+.pkt-color-border-brand-dark-blue-1000 {
   border-color: #2a2859 !important;
 }
-:root .pkt-color-bg-brand-warm-blue-1000 {
+
+.pkt-color-bg-brand-warm-blue-1000 {
   background-color: #1f42aa !important;
 }
-:root .pkt-color-txt-brand-warm-blue-1000 {
+
+.pkt-color-txt-brand-warm-blue-1000 {
   color: #1f42aa !important;
 }
-:root .pkt-color-border-brand-warm-blue-1000 {
+
+.pkt-color-border-brand-warm-blue-1000 {
   border-color: #1f42aa !important;
 }
-:root .pkt-color-bg-brand-green-400 {
+
+.pkt-color-bg-brand-green-400 {
   background-color: #c7fde9 !important;
 }
-:root .pkt-color-txt-brand-green-400 {
+
+.pkt-color-txt-brand-green-400 {
   color: #c7fde9 !important;
 }
-:root .pkt-color-border-brand-green-400 {
+
+.pkt-color-border-brand-green-400 {
   border-color: #c7fde9 !important;
 }
-:root .pkt-color-bg-brand-green-1000 {
+
+.pkt-color-bg-brand-green-1000 {
   background-color: #43f8b6 !important;
 }
-:root .pkt-color-txt-brand-green-1000 {
+
+.pkt-color-txt-brand-green-1000 {
   color: #43f8b6 !important;
 }
-:root .pkt-color-border-brand-green-1000 {
+
+.pkt-color-border-brand-green-1000 {
   border-color: #43f8b6 !important;
 }
-:root .pkt-color-bg-brand-light-green-400 {
+
+.pkt-color-bg-brand-light-green-400 {
   background-color: #e5ffe6 !important;
 }
-:root .pkt-color-txt-brand-light-green-400 {
+
+.pkt-color-txt-brand-light-green-400 {
   color: #e5ffe6 !important;
 }
-:root .pkt-color-border-brand-light-green-400 {
+
+.pkt-color-border-brand-light-green-400 {
   border-color: #e5ffe6 !important;
 }
-:root .pkt-color-bg-brand-light-green-1000 {
+
+.pkt-color-bg-brand-light-green-1000 {
   background-color: #c7f6c9 !important;
 }
-:root .pkt-color-txt-brand-light-green-1000 {
+
+.pkt-color-txt-brand-light-green-1000 {
   color: #c7f6c9 !important;
 }
-:root .pkt-color-border-brand-light-green-1000 {
+
+.pkt-color-border-brand-light-green-1000 {
   border-color: #c7f6c9 !important;
 }
-:root .pkt-color-bg-brand-dark-green-1000 {
+
+.pkt-color-bg-brand-dark-green-1000 {
   background-color: #034b45 !important;
 }
-:root .pkt-color-txt-brand-dark-green-1000 {
+
+.pkt-color-txt-brand-dark-green-1000 {
   color: #034b45 !important;
 }
-:root .pkt-color-border-brand-dark-green-1000 {
+
+.pkt-color-border-brand-dark-green-1000 {
   border-color: #034b45 !important;
 }
-:root .pkt-color-bg-brand-yellow-1000 {
+
+.pkt-color-bg-brand-yellow-1000 {
   background-color: #f9c66b !important;
 }
-:root .pkt-color-txt-brand-yellow-1000 {
+
+.pkt-color-txt-brand-yellow-1000 {
   color: #f9c66b !important;
 }
-:root .pkt-color-border-brand-yellow-1000 {
+
+.pkt-color-border-brand-yellow-1000 {
   border-color: #f9c66b !important;
 }
-:root .pkt-color-bg-brand-yellow-500 {
+
+.pkt-color-bg-brand-yellow-500 {
   background-color: #ffe7bc !important;
 }
-:root .pkt-color-txt-brand-yellow-500 {
+
+.pkt-color-txt-brand-yellow-500 {
   color: #ffe7bc !important;
 }
-:root .pkt-color-border-brand-yellow-500 {
+
+.pkt-color-border-brand-yellow-500 {
   border-color: #ffe7bc !important;
 }
-:root .pkt-color-bg-brand-red-100 {
+
+.pkt-color-bg-brand-red-100 {
   background-color: #fff2f1 !important;
 }
-:root .pkt-color-txt-brand-red-100 {
+
+.pkt-color-txt-brand-red-100 {
   color: #fff2f1 !important;
 }
-:root .pkt-color-border-brand-red-100 {
+
+.pkt-color-border-brand-red-100 {
   border-color: #fff2f1 !important;
 }
-:root .pkt-color-bg-brand-red-400 {
+
+.pkt-color-bg-brand-red-400 {
   background-color: #ffdfdc !important;
 }
-:root .pkt-color-txt-brand-red-400 {
+
+.pkt-color-txt-brand-red-400 {
   color: #ffdfdc !important;
 }
-:root .pkt-color-border-brand-red-400 {
+
+.pkt-color-border-brand-red-400 {
   border-color: #ffdfdc !important;
 }
-:root .pkt-color-bg-brand-red-600 {
+
+.pkt-color-bg-brand-red-600 {
   background-color: #ffb4ac !important;
 }
-:root .pkt-color-txt-brand-red-600 {
+
+.pkt-color-txt-brand-red-600 {
   color: #ffb4ac !important;
 }
-:root .pkt-color-border-brand-red-600 {
+
+.pkt-color-border-brand-red-600 {
   border-color: #ffb4ac !important;
 }
-:root .pkt-color-bg-brand-red-1000 {
+
+.pkt-color-bg-brand-red-1000 {
   background-color: #ff8274 !important;
 }
-:root .pkt-color-txt-brand-red-1000 {
+
+.pkt-color-txt-brand-red-1000 {
   color: #ff8274 !important;
 }
-:root .pkt-color-border-brand-red-1000 {
+
+.pkt-color-border-brand-red-1000 {
   border-color: #ff8274 !important;
 }
-:root .pkt-color-bg-brand-light-beige-1000 {
+
+.pkt-color-bg-brand-light-beige-1000 {
   background-color: #f8f0dd !important;
 }
-:root .pkt-color-txt-brand-light-beige-1000 {
+
+.pkt-color-txt-brand-light-beige-1000 {
   color: #f8f0dd !important;
 }
-:root .pkt-color-border-brand-light-beige-1000 {
+
+.pkt-color-border-brand-light-beige-1000 {
   border-color: #f8f0dd !important;
 }
-:root .pkt-color-bg-brand-dark-beige-1000 {
+
+.pkt-color-bg-brand-dark-beige-1000 {
   background-color: #d0bfae !important;
 }
-:root .pkt-color-txt-brand-dark-beige-1000 {
+
+.pkt-color-txt-brand-dark-beige-1000 {
   color: #d0bfae !important;
 }
-:root .pkt-color-border-brand-dark-beige-1000 {
+
+.pkt-color-border-brand-dark-beige-1000 {
   border-color: #d0bfae !important;
 }
-:root .pkt-color-bg-brand-neutrals-white {
+
+.pkt-color-bg-brand-neutrals-white {
   background-color: #ffffff !important;
 }
-:root .pkt-color-txt-brand-neutrals-white {
+
+.pkt-color-txt-brand-neutrals-white {
   color: #ffffff !important;
 }
-:root .pkt-color-border-brand-neutrals-white {
+
+.pkt-color-border-brand-neutrals-white {
   border-color: #ffffff !important;
 }
-:root .pkt-color-bg-brand-neutrals-100 {
+
+.pkt-color-bg-brand-neutrals-100 {
   background-color: #f9f9f9 !important;
 }
-:root .pkt-color-txt-brand-neutrals-100 {
+
+.pkt-color-txt-brand-neutrals-100 {
   color: #f9f9f9 !important;
 }
-:root .pkt-color-border-brand-neutrals-100 {
+
+.pkt-color-border-brand-neutrals-100 {
   border-color: #f9f9f9 !important;
 }
-:root .pkt-color-bg-brand-neutrals-200 {
+
+.pkt-color-bg-brand-neutrals-200 {
   background-color: #f2f2f2 !important;
 }
-:root .pkt-color-txt-brand-neutrals-200 {
+
+.pkt-color-txt-brand-neutrals-200 {
   color: #f2f2f2 !important;
 }
-:root .pkt-color-border-brand-neutrals-200 {
+
+.pkt-color-border-brand-neutrals-200 {
   border-color: #f2f2f2 !important;
 }
-:root .pkt-color-bg-brand-neutrals-1000 {
+
+.pkt-color-bg-brand-neutrals-1000 {
   background-color: #2c2c2c !important;
 }
-:root .pkt-color-txt-brand-neutrals-1000 {
+
+.pkt-color-txt-brand-neutrals-1000 {
   color: #2c2c2c !important;
 }
-:root .pkt-color-border-brand-neutrals-1000 {
+
+.pkt-color-border-brand-neutrals-1000 {
   border-color: #2c2c2c !important;
 }
-:root .pkt-color-bg-brand-neutrals-black {
+
+.pkt-color-bg-brand-neutrals-black {
   background-color: #000000 !important;
 }
-:root .pkt-color-txt-brand-neutrals-black {
+
+.pkt-color-txt-brand-neutrals-black {
   color: #000000 !important;
 }
-:root .pkt-color-border-brand-neutrals-black {
+
+.pkt-color-border-brand-neutrals-black {
   border-color: #000000 !important;
 }
-:root .pkt-color-bg-brand-neutrals-transparent {
+
+.pkt-color-bg-brand-neutrals-transparent {
   background-color: transparent !important;
 }
-:root .pkt-color-txt-brand-neutrals-transparent {
+
+.pkt-color-txt-brand-neutrals-transparent {
   color: transparent !important;
 }
-:root .pkt-color-border-brand-neutrals-transparent {
+
+.pkt-color-border-brand-neutrals-transparent {
   border-color: transparent !important;
 }
-:root .pkt-color-bg-brand-purple-1000 {
+
+.pkt-color-bg-brand-purple-1000 {
   background-color: #e0adff !important;
 }
-:root .pkt-color-txt-brand-purple-1000 {
+
+.pkt-color-txt-brand-purple-1000 {
   color: #e0adff !important;
 }
-:root .pkt-color-border-brand-purple-1000 {
+
+.pkt-color-border-brand-purple-1000 {
   border-color: #e0adff !important;
 }
-:root .pkt-color-bg-grays-gray-100 {
+
+.pkt-color-bg-grays-gray-100 {
   background-color: #e6e6e6 !important;
 }
-:root .pkt-color-txt-grays-gray-100 {
+
+.pkt-color-txt-grays-gray-100 {
   color: #e6e6e6 !important;
 }
-:root .pkt-color-border-grays-gray-100 {
+
+.pkt-color-border-grays-gray-100 {
   border-color: #e6e6e6 !important;
 }
-:root .pkt-color-bg-grays-gray-200 {
+
+.pkt-color-bg-grays-gray-200 {
   background-color: #cccccc !important;
 }
-:root .pkt-color-txt-grays-gray-200 {
+
+.pkt-color-txt-grays-gray-200 {
   color: #cccccc !important;
 }
-:root .pkt-color-border-grays-gray-200 {
+
+.pkt-color-border-grays-gray-200 {
   border-color: #cccccc !important;
 }
-:root .pkt-color-bg-grays-gray-300 {
+
+.pkt-color-bg-grays-gray-300 {
   background-color: #b3b3b3 !important;
 }
-:root .pkt-color-txt-grays-gray-300 {
+
+.pkt-color-txt-grays-gray-300 {
   color: #b3b3b3 !important;
 }
-:root .pkt-color-border-grays-gray-300 {
+
+.pkt-color-border-grays-gray-300 {
   border-color: #b3b3b3 !important;
 }
-:root .pkt-color-bg-grays-gray-400 {
+
+.pkt-color-bg-grays-gray-400 {
   background-color: #9a9a9a !important;
 }
-:root .pkt-color-txt-grays-gray-400 {
+
+.pkt-color-txt-grays-gray-400 {
   color: #9a9a9a !important;
 }
-:root .pkt-color-border-grays-gray-400 {
+
+.pkt-color-border-grays-gray-400 {
   border-color: #9a9a9a !important;
 }
-:root .pkt-color-bg-grays-gray-500 {
+
+.pkt-color-bg-grays-gray-500 {
   background-color: #808080 !important;
 }
-:root .pkt-color-txt-grays-gray-500 {
+
+.pkt-color-txt-grays-gray-500 {
   color: #808080 !important;
 }
-:root .pkt-color-border-grays-gray-500 {
+
+.pkt-color-border-grays-gray-500 {
   border-color: #808080 !important;
 }
-:root .pkt-color-bg-grays-gray-600 {
+
+.pkt-color-bg-grays-gray-600 {
   background-color: #666666 !important;
 }
-:root .pkt-color-txt-grays-gray-600 {
+
+.pkt-color-txt-grays-gray-600 {
   color: #666666 !important;
 }
-:root .pkt-color-border-grays-gray-600 {
+
+.pkt-color-border-grays-gray-600 {
   border-color: #666666 !important;
 }
-:root .pkt-color-bg-grays-gray-700 {
+
+.pkt-color-bg-grays-gray-700 {
   background-color: #4d4d4d !important;
 }
-:root .pkt-color-txt-grays-gray-700 {
+
+.pkt-color-txt-grays-gray-700 {
   color: #4d4d4d !important;
 }
-:root .pkt-color-border-grays-gray-700 {
+
+.pkt-color-border-grays-gray-700 {
   border-color: #4d4d4d !important;
 }
-:root .pkt-color-bg-grays-gray-800 {
+
+.pkt-color-bg-grays-gray-800 {
   background-color: #333333 !important;
 }
-:root .pkt-color-txt-grays-gray-800 {
+
+.pkt-color-txt-grays-gray-800 {
   color: #333333 !important;
 }
-:root .pkt-color-border-grays-gray-800 {
+
+.pkt-color-border-grays-gray-800 {
   border-color: #333333 !important;
 }
-:root .pkt-color-bg-grays-gray-900 {
+
+.pkt-color-bg-grays-gray-900 {
   background-color: #1a1a1a !important;
 }
-:root .pkt-color-txt-grays-gray-900 {
+
+.pkt-color-txt-grays-gray-900 {
   color: #1a1a1a !important;
 }
-:root .pkt-color-border-grays-gray-900 {
+
+.pkt-color-border-grays-gray-900 {
   border-color: #1a1a1a !important;
 }
-:root .pkt-color-bg-grays-gray-1000 {
+
+.pkt-color-bg-grays-gray-1000 {
   background-color: #2c2c2c !important;
 }
-:root .pkt-color-txt-grays-gray-1000 {
+
+.pkt-color-txt-grays-gray-1000 {
   color: #2c2c2c !important;
 }
-:root .pkt-color-border-grays-gray-1000 {
+
+.pkt-color-border-grays-gray-1000 {
   border-color: #2c2c2c !important;
 }
-:root .pkt-color-bg-background-card {
+
+.pkt-color-bg-background-card {
   background-color: var(--pkt-color-background-card) !important;
 }
-:root .pkt-color-txt-background-card {
+
+.pkt-color-txt-background-card {
   color: var(--pkt-color-background-card) !important;
 }
-:root .pkt-color-border-background-card {
+
+.pkt-color-border-background-card {
   border-color: var(--pkt-color-background-card) !important;
 }
-:root .pkt-color-bg-background-default {
+
+.pkt-color-bg-background-default {
   background-color: var(--pkt-color-background-default) !important;
 }
-:root .pkt-color-txt-background-default {
+
+.pkt-color-txt-background-default {
   color: var(--pkt-color-background-default) !important;
 }
-:root .pkt-color-border-background-default {
+
+.pkt-color-border-background-default {
   border-color: var(--pkt-color-background-default) !important;
 }
-:root .pkt-color-bg-background-subtle {
+
+.pkt-color-bg-background-subtle {
   background-color: var(--pkt-color-background-subtle) !important;
 }
-:root .pkt-color-txt-background-subtle {
+
+.pkt-color-txt-background-subtle {
   color: var(--pkt-color-background-subtle) !important;
 }
-:root .pkt-color-border-background-subtle {
+
+.pkt-color-border-background-subtle {
   border-color: var(--pkt-color-background-subtle) !important;
 }
-:root .pkt-color-bg-background-transparent {
+
+.pkt-color-bg-background-transparent {
   background-color: var(--pkt-color-background-transparent) !important;
 }
-:root .pkt-color-txt-background-transparent {
+
+.pkt-color-txt-background-transparent {
   color: var(--pkt-color-background-transparent) !important;
 }
-:root .pkt-color-border-background-transparent {
+
+.pkt-color-border-background-transparent {
   border-color: var(--pkt-color-background-transparent) !important;
 }
-:root .pkt-color-bg-border-default {
+
+.pkt-color-bg-border-default {
   background-color: var(--pkt-color-border-default) !important;
 }
-:root .pkt-color-txt-border-default {
+
+.pkt-color-txt-border-default {
   color: var(--pkt-color-border-default) !important;
 }
-:root .pkt-color-border-border-default {
+
+.pkt-color-border-border-default {
   border-color: var(--pkt-color-border-default) !important;
 }
-:root .pkt-color-bg-border-beige {
+
+.pkt-color-bg-border-beige {
   background-color: var(--pkt-color-border-beige) !important;
 }
-:root .pkt-color-txt-border-beige {
+
+.pkt-color-txt-border-beige {
   color: var(--pkt-color-border-beige) !important;
 }
-:root .pkt-color-border-border-beige {
+
+.pkt-color-border-border-beige {
   border-color: var(--pkt-color-border-beige) !important;
 }
-:root .pkt-color-bg-border-blue {
+
+.pkt-color-bg-border-blue {
   background-color: var(--pkt-color-border-blue) !important;
 }
-:root .pkt-color-txt-border-blue {
+
+.pkt-color-txt-border-blue {
   color: var(--pkt-color-border-blue) !important;
 }
-:root .pkt-color-border-border-blue {
+
+.pkt-color-border-border-blue {
   border-color: var(--pkt-color-border-blue) !important;
 }
-:root .pkt-color-bg-border-gray {
+
+.pkt-color-bg-border-gray {
   background-color: var(--pkt-color-border-gray) !important;
 }
-:root .pkt-color-txt-border-gray {
+
+.pkt-color-txt-border-gray {
   color: var(--pkt-color-border-gray) !important;
 }
-:root .pkt-color-border-border-gray {
+
+.pkt-color-border-border-gray {
   border-color: var(--pkt-color-border-gray) !important;
 }
-:root .pkt-color-bg-border-green {
+
+.pkt-color-bg-border-green {
   background-color: var(--pkt-color-border-green) !important;
 }
-:root .pkt-color-txt-border-green {
+
+.pkt-color-txt-border-green {
   color: var(--pkt-color-border-green) !important;
 }
-:root .pkt-color-border-border-green {
+
+.pkt-color-border-border-green {
   border-color: var(--pkt-color-border-green) !important;
 }
-:root .pkt-color-bg-border-light-beige {
+
+.pkt-color-bg-border-light-beige {
   background-color: var(--pkt-color-border-light-beige) !important;
 }
-:root .pkt-color-txt-border-light-beige {
+
+.pkt-color-txt-border-light-beige {
   color: var(--pkt-color-border-light-beige) !important;
 }
-:root .pkt-color-border-border-light-beige {
+
+.pkt-color-border-border-light-beige {
   border-color: var(--pkt-color-border-light-beige) !important;
 }
-:root .pkt-color-bg-border-red {
+
+.pkt-color-bg-border-red {
   background-color: var(--pkt-color-border-red) !important;
 }
-:root .pkt-color-txt-border-red {
+
+.pkt-color-txt-border-red {
   color: var(--pkt-color-border-red) !important;
 }
-:root .pkt-color-border-border-red {
+
+.pkt-color-border-border-red {
   border-color: var(--pkt-color-border-red) !important;
 }
-:root .pkt-color-bg-border-subtle {
+
+.pkt-color-bg-border-subtle {
   background-color: var(--pkt-color-border-subtle) !important;
 }
-:root .pkt-color-txt-border-subtle {
+
+.pkt-color-txt-border-subtle {
   color: var(--pkt-color-border-subtle) !important;
 }
-:root .pkt-color-border-border-subtle {
+
+.pkt-color-border-border-subtle {
   border-color: var(--pkt-color-border-subtle) !important;
 }
-:root .pkt-color-bg-border-yellow {
+
+.pkt-color-bg-border-yellow {
   background-color: var(--pkt-color-border-yellow) !important;
 }
-:root .pkt-color-txt-border-yellow {
+
+.pkt-color-txt-border-yellow {
   color: var(--pkt-color-border-yellow) !important;
 }
-:root .pkt-color-border-border-yellow {
+
+.pkt-color-border-border-yellow {
   border-color: var(--pkt-color-border-yellow) !important;
 }
-:root .pkt-color-bg-border-states-active {
+
+.pkt-color-bg-border-states-active {
   background-color: var(--pkt-color-border-states-active) !important;
 }
-:root .pkt-color-txt-border-states-active {
+
+.pkt-color-txt-border-states-active {
   color: var(--pkt-color-border-states-active) !important;
 }
-:root .pkt-color-border-border-states-active {
+
+.pkt-color-border-border-states-active {
   border-color: var(--pkt-color-border-states-active) !important;
 }
-:root .pkt-color-bg-border-states-disabled {
+
+.pkt-color-bg-border-states-disabled {
   background-color: var(--pkt-color-border-states-disabled) !important;
 }
-:root .pkt-color-txt-border-states-disabled {
+
+.pkt-color-txt-border-states-disabled {
   color: var(--pkt-color-border-states-disabled) !important;
 }
-:root .pkt-color-border-border-states-disabled {
+
+.pkt-color-border-border-states-disabled {
   border-color: var(--pkt-color-border-states-disabled) !important;
 }
-:root .pkt-color-bg-border-states-focus {
+
+.pkt-color-bg-border-states-focus {
   background-color: var(--pkt-color-border-states-focus) !important;
 }
-:root .pkt-color-txt-border-states-focus {
+
+.pkt-color-txt-border-states-focus {
   color: var(--pkt-color-border-states-focus) !important;
 }
-:root .pkt-color-border-border-states-focus {
+
+.pkt-color-border-border-states-focus {
   border-color: var(--pkt-color-border-states-focus) !important;
 }
-:root .pkt-color-bg-border-states-hover {
+
+.pkt-color-bg-border-states-hover {
   background-color: var(--pkt-color-border-states-hover) !important;
 }
-:root .pkt-color-txt-border-states-hover {
+
+.pkt-color-txt-border-states-hover {
   color: var(--pkt-color-border-states-hover) !important;
 }
-:root .pkt-color-border-border-states-hover {
+
+.pkt-color-border-border-states-hover {
   border-color: var(--pkt-color-border-states-hover) !important;
 }
-:root .pkt-color-bg-surface-default-faded-green {
+
+.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 {
+
+.pkt-color-txt-surface-default-faded-green {
   color: var(--pkt-color-surface-default-faded-green) !important;
 }
-:root .pkt-color-border-surface-default-faded-green {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-default-faded-red {
   color: var(--pkt-color-surface-default-faded-red) !important;
 }
-:root .pkt-color-border-surface-default-faded-red {
+
+.pkt-color-border-surface-default-faded-red {
   border-color: var(--pkt-color-surface-default-faded-red) !important;
 }
-:root .pkt-color-bg-surface-default-gray {
+
+.pkt-color-bg-surface-default-gray {
   background-color: var(--pkt-color-surface-default-gray) !important;
 }
-:root .pkt-color-txt-surface-default-gray {
+
+.pkt-color-txt-surface-default-gray {
   color: var(--pkt-color-surface-default-gray) !important;
 }
-:root .pkt-color-border-surface-default-gray {
+
+.pkt-color-border-surface-default-gray {
   border-color: var(--pkt-color-surface-default-gray) !important;
 }
-:root .pkt-color-bg-surface-default-light-beige {
+
+.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 {
+
+.pkt-color-txt-surface-default-light-beige {
   color: var(--pkt-color-surface-default-light-beige) !important;
 }
-:root .pkt-color-border-surface-default-light-beige {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-default-light-blue {
   color: var(--pkt-color-surface-default-light-blue) !important;
 }
-:root .pkt-color-border-surface-default-light-blue {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-default-light-green {
   color: var(--pkt-color-surface-default-light-green) !important;
 }
-:root .pkt-color-border-surface-default-light-green {
+
+.pkt-color-border-surface-default-light-green {
   border-color: var(--pkt-color-surface-default-light-green) !important;
 }
-:root .pkt-color-bg-surface-default-red {
+
+.pkt-color-bg-surface-default-red {
   background-color: var(--pkt-color-surface-default-red) !important;
 }
-:root .pkt-color-txt-surface-default-red {
+
+.pkt-color-txt-surface-default-red {
   color: var(--pkt-color-surface-default-red) !important;
 }
-:root .pkt-color-border-surface-default-red {
+
+.pkt-color-border-surface-default-red {
   border-color: var(--pkt-color-surface-default-red) !important;
 }
-:root .pkt-color-bg-surface-default-yellow {
+
+.pkt-color-bg-surface-default-yellow {
   background-color: var(--pkt-color-surface-default-yellow) !important;
 }
-:root .pkt-color-txt-surface-default-yellow {
+
+.pkt-color-txt-surface-default-yellow {
   color: var(--pkt-color-surface-default-yellow) !important;
 }
-:root .pkt-color-border-surface-default-yellow {
+
+.pkt-color-border-surface-default-yellow {
   border-color: var(--pkt-color-surface-default-yellow) !important;
 }
-:root .pkt-color-bg-surface-strong-beige {
+
+.pkt-color-bg-surface-strong-beige {
   background-color: var(--pkt-color-surface-strong-beige) !important;
 }
-:root .pkt-color-txt-surface-strong-beige {
+
+.pkt-color-txt-surface-strong-beige {
   color: var(--pkt-color-surface-strong-beige) !important;
 }
-:root .pkt-color-border-surface-strong-beige {
+
+.pkt-color-border-surface-strong-beige {
   border-color: var(--pkt-color-surface-strong-beige) !important;
 }
-:root .pkt-color-bg-surface-strong-blue {
+
+.pkt-color-bg-surface-strong-blue {
   background-color: var(--pkt-color-surface-strong-blue) !important;
 }
-:root .pkt-color-txt-surface-strong-blue {
+
+.pkt-color-txt-surface-strong-blue {
   color: var(--pkt-color-surface-strong-blue) !important;
 }
-:root .pkt-color-border-surface-strong-blue {
+
+.pkt-color-border-surface-strong-blue {
   border-color: var(--pkt-color-surface-strong-blue) !important;
 }
-:root .pkt-color-bg-surface-strong-dark-blue {
+
+.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 {
+
+.pkt-color-txt-surface-strong-dark-blue {
   color: var(--pkt-color-surface-strong-dark-blue) !important;
 }
-:root .pkt-color-border-surface-strong-dark-blue {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-strong-dark-green {
   color: var(--pkt-color-surface-strong-dark-green) !important;
 }
-:root .pkt-color-border-surface-strong-dark-green {
+
+.pkt-color-border-surface-strong-dark-green {
   border-color: var(--pkt-color-surface-strong-dark-green) !important;
 }
-:root .pkt-color-bg-surface-strong-gray {
+
+.pkt-color-bg-surface-strong-gray {
   background-color: var(--pkt-color-surface-strong-gray) !important;
 }
-:root .pkt-color-txt-surface-strong-gray {
+
+.pkt-color-txt-surface-strong-gray {
   color: var(--pkt-color-surface-strong-gray) !important;
 }
-:root .pkt-color-border-surface-strong-gray {
+
+.pkt-color-border-surface-strong-gray {
   border-color: var(--pkt-color-surface-strong-gray) !important;
 }
-:root .pkt-color-bg-surface-strong-green {
+
+.pkt-color-bg-surface-strong-green {
   background-color: var(--pkt-color-surface-strong-green) !important;
 }
-:root .pkt-color-txt-surface-strong-green {
+
+.pkt-color-txt-surface-strong-green {
   color: var(--pkt-color-surface-strong-green) !important;
 }
-:root .pkt-color-border-surface-strong-green {
+
+.pkt-color-border-surface-strong-green {
   border-color: var(--pkt-color-surface-strong-green) !important;
 }
-:root .pkt-color-bg-surface-strong-light-green {
+
+.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 {
+
+.pkt-color-txt-surface-strong-light-green {
   color: var(--pkt-color-surface-strong-light-green) !important;
 }
-:root .pkt-color-border-surface-strong-light-green {
+
+.pkt-color-border-surface-strong-light-green {
   border-color: var(--pkt-color-surface-strong-light-green) !important;
 }
-:root .pkt-color-bg-surface-strong-red {
+
+.pkt-color-bg-surface-strong-red {
   background-color: var(--pkt-color-surface-strong-red) !important;
 }
-:root .pkt-color-txt-surface-strong-red {
+
+.pkt-color-txt-surface-strong-red {
   color: var(--pkt-color-surface-strong-red) !important;
 }
-:root .pkt-color-border-surface-strong-red {
+
+.pkt-color-border-surface-strong-red {
   border-color: var(--pkt-color-surface-strong-red) !important;
 }
-:root .pkt-color-bg-surface-strong-yellow {
+
+.pkt-color-bg-surface-strong-yellow {
   background-color: var(--pkt-color-surface-strong-yellow) !important;
 }
-:root .pkt-color-txt-surface-strong-yellow {
+
+.pkt-color-txt-surface-strong-yellow {
   color: var(--pkt-color-surface-strong-yellow) !important;
 }
-:root .pkt-color-border-surface-strong-yellow {
+
+.pkt-color-border-surface-strong-yellow {
   border-color: var(--pkt-color-surface-strong-yellow) !important;
 }
-:root .pkt-color-bg-surface-subtle-light-blue {
+
+.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 {
+
+.pkt-color-txt-surface-subtle-light-blue {
   color: var(--pkt-color-surface-subtle-light-blue) !important;
 }
-:root .pkt-color-border-surface-subtle-light-blue {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-subtle-light-red {
   color: var(--pkt-color-surface-subtle-light-red) !important;
 }
-:root .pkt-color-border-surface-subtle-light-red {
+
+.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 {
+
+.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 {
+
+.pkt-color-txt-surface-subtle-pale-blue {
   color: var(--pkt-color-surface-subtle-pale-blue) !important;
 }
-:root .pkt-color-border-surface-subtle-pale-blue {
+
+.pkt-color-border-surface-subtle-pale-blue {
   border-color: var(--pkt-color-surface-subtle-pale-blue) !important;
 }
-:root .pkt-color-bg-surface-subtle-white {
+
+.pkt-color-bg-surface-subtle-white {
   background-color: var(--pkt-color-surface-subtle-white) !important;
 }
-:root .pkt-color-txt-surface-subtle-white {
+
+.pkt-color-txt-surface-subtle-white {
   color: var(--pkt-color-surface-subtle-white) !important;
 }
-:root .pkt-color-border-surface-subtle-white {
+
+.pkt-color-border-surface-subtle-white {
   border-color: var(--pkt-color-surface-subtle-white) !important;
 }
-:root .pkt-color-bg-text-body-dark {
+
+.pkt-color-bg-text-body-dark {
   background-color: var(--pkt-color-text-body-dark) !important;
 }
-:root .pkt-color-txt-text-body-dark {
+
+.pkt-color-txt-text-body-dark {
   color: var(--pkt-color-text-body-dark) !important;
 }
-:root .pkt-color-border-text-body-dark {
+
+.pkt-color-border-text-body-dark {
   border-color: var(--pkt-color-text-body-dark) !important;
 }
-:root .pkt-color-bg-text-body-default {
+
+.pkt-color-bg-text-body-default {
   background-color: var(--pkt-color-text-body-default) !important;
 }
-:root .pkt-color-txt-text-body-default {
+
+.pkt-color-txt-text-body-default {
   color: var(--pkt-color-text-body-default) !important;
 }
-:root .pkt-color-border-text-body-default {
+
+.pkt-color-border-text-body-default {
   border-color: var(--pkt-color-text-body-default) !important;
 }
-:root .pkt-color-bg-text-body-light {
+
+.pkt-color-bg-text-body-light {
   background-color: var(--pkt-color-text-body-light) !important;
 }
-:root .pkt-color-txt-text-body-light {
+
+.pkt-color-txt-text-body-light {
   color: var(--pkt-color-text-body-light) !important;
 }
-:root .pkt-color-border-text-body-light {
+
+.pkt-color-border-text-body-light {
   border-color: var(--pkt-color-text-body-light) !important;
 }
-:root .pkt-color-bg-text-placeholder {
+
+.pkt-color-bg-text-placeholder {
   background-color: var(--pkt-color-text-placeholder) !important;
 }
-:root .pkt-color-txt-text-placeholder {
+
+.pkt-color-txt-text-placeholder {
   color: var(--pkt-color-text-placeholder) !important;
 }
-:root .pkt-color-border-text-placeholder {
+
+.pkt-color-border-text-placeholder {
   border-color: var(--pkt-color-text-placeholder) !important;
 }
-:root .pkt-color-bg-text-action-disabled {
+
+.pkt-color-bg-text-action-disabled {
   background-color: var(--pkt-color-text-action-disabled) !important;
 }
-:root .pkt-color-txt-text-action-disabled {
+
+.pkt-color-txt-text-action-disabled {
   color: var(--pkt-color-text-action-disabled) !important;
 }
-:root .pkt-color-border-text-action-disabled {
+
+.pkt-color-border-text-action-disabled {
   border-color: var(--pkt-color-text-action-disabled) !important;
 }
-:root .pkt-color-bg-text-action-active {
+
+.pkt-color-bg-text-action-active {
   background-color: var(--pkt-color-text-action-active) !important;
 }
-:root .pkt-color-txt-text-action-active {
+
+.pkt-color-txt-text-action-active {
   color: var(--pkt-color-text-action-active) !important;
 }
-:root .pkt-color-border-text-action-active {
+
+.pkt-color-border-text-action-active {
   border-color: var(--pkt-color-text-action-active) !important;
 }
-:root .pkt-color-bg-text-action-hover {
+
+.pkt-color-bg-text-action-hover {
   background-color: var(--pkt-color-text-action-hover) !important;
 }
-:root .pkt-color-txt-text-action-hover {
+
+.pkt-color-txt-text-action-hover {
   color: var(--pkt-color-text-action-hover) !important;
 }
-:root .pkt-color-border-text-action-hover {
+
+.pkt-color-border-text-action-hover {
   border-color: var(--pkt-color-text-action-hover) !important;
 }
-:root .pkt-color-bg-text-action-normal {
+
+.pkt-color-bg-text-action-normal {
   background-color: var(--pkt-color-text-action-normal) !important;
 }
-:root .pkt-color-txt-text-action-normal {
+
+.pkt-color-txt-text-action-normal {
   color: var(--pkt-color-text-action-normal) !important;
 }
-:root .pkt-color-border-text-action-normal {
+
+.pkt-color-border-text-action-normal {
   border-color: var(--pkt-color-text-action-normal) !important;
 }
-:root .pkt-color-bg-input-background-normal {
+
+.pkt-color-bg-input-background-normal {
   background-color: var(--pkt-color-input-background-normal) !important;
 }
-:root .pkt-color-txt-input-background-normal {
+
+.pkt-color-txt-input-background-normal {
   color: var(--pkt-color-input-background-normal) !important;
 }
-:root .pkt-color-border-input-background-normal {
+
+.pkt-color-border-input-background-normal {
   border-color: var(--pkt-color-input-background-normal) !important;
 }
-:root .pkt-color-bg-input-background-disabled {
+
+.pkt-color-bg-input-background-disabled {
   background-color: var(--pkt-color-input-background-disabled) !important;
 }
-:root .pkt-color-txt-input-background-disabled {
+
+.pkt-color-txt-input-background-disabled {
   color: var(--pkt-color-input-background-disabled) !important;
 }
-:root .pkt-color-border-input-background-disabled {
+
+.pkt-color-border-input-background-disabled {
   border-color: var(--pkt-color-input-background-disabled) !important;
 }
-:root .pkt-color-bg-input-border-active {
+
+.pkt-color-bg-input-border-active {
   background-color: var(--pkt-color-input-border-active) !important;
 }
-:root .pkt-color-txt-input-border-active {
+
+.pkt-color-txt-input-border-active {
   color: var(--pkt-color-input-border-active) !important;
 }
-:root .pkt-color-border-input-border-active {
+
+.pkt-color-border-input-border-active {
   border-color: var(--pkt-color-input-border-active) !important;
 }
-:root .pkt-color-bg-input-border-disabled {
+
+.pkt-color-bg-input-border-disabled {
   background-color: var(--pkt-color-input-border-disabled) !important;
 }
-:root .pkt-color-txt-input-border-disabled {
+
+.pkt-color-txt-input-border-disabled {
   color: var(--pkt-color-input-border-disabled) !important;
 }
-:root .pkt-color-border-input-border-disabled {
+
+.pkt-color-border-input-border-disabled {
   border-color: var(--pkt-color-input-border-disabled) !important;
 }
-:root .pkt-color-bg-input-border-error {
+
+.pkt-color-bg-input-border-error {
   background-color: var(--pkt-color-input-border-error) !important;
 }
-:root .pkt-color-txt-input-border-error {
+
+.pkt-color-txt-input-border-error {
   color: var(--pkt-color-input-border-error) !important;
 }
-:root .pkt-color-border-input-border-error {
+
+.pkt-color-border-input-border-error {
   border-color: var(--pkt-color-input-border-error) !important;
 }
-:root .pkt-color-bg-input-border-hover {
+
+.pkt-color-bg-input-border-hover {
   background-color: var(--pkt-color-input-border-hover) !important;
 }
-:root .pkt-color-txt-input-border-hover {
+
+.pkt-color-txt-input-border-hover {
   color: var(--pkt-color-input-border-hover) !important;
 }
-:root .pkt-color-border-input-border-hover {
+
+.pkt-color-border-input-border-hover {
   border-color: var(--pkt-color-input-border-hover) !important;
 }
-:root .pkt-color-bg-input-border-normal {
+
+.pkt-color-bg-input-border-normal {
   background-color: var(--pkt-color-input-border-normal) !important;
 }
-:root .pkt-color-txt-input-border-normal {
+
+.pkt-color-txt-input-border-normal {
   color: var(--pkt-color-input-border-normal) !important;
 }
-:root .pkt-color-border-input-border-normal {
+
+.pkt-color-border-input-border-normal {
   border-color: var(--pkt-color-input-border-normal) !important;
 }
-:root .pkt-color-bg-input-text-active {
+
+.pkt-color-bg-input-text-active {
   background-color: var(--pkt-color-input-text-active) !important;
 }
-:root .pkt-color-txt-input-text-active {
+
+.pkt-color-txt-input-text-active {
   color: var(--pkt-color-input-text-active) !important;
 }
-:root .pkt-color-border-input-text-active {
+
+.pkt-color-border-input-text-active {
   border-color: var(--pkt-color-input-text-active) !important;
 }
-:root .pkt-color-bg-input-text-disabled {
+
+.pkt-color-bg-input-text-disabled {
   background-color: var(--pkt-color-input-text-disabled) !important;
 }
-:root .pkt-color-txt-input-text-disabled {
+
+.pkt-color-txt-input-text-disabled {
   color: var(--pkt-color-input-text-disabled) !important;
 }
-:root .pkt-color-border-input-text-disabled {
+
+.pkt-color-border-input-text-disabled {
   border-color: var(--pkt-color-input-text-disabled) !important;
 }
-:root .pkt-color-bg-input-text-hover {
+
+.pkt-color-bg-input-text-hover {
   background-color: var(--pkt-color-input-text-hover) !important;
 }
-:root .pkt-color-txt-input-text-hover {
+
+.pkt-color-txt-input-text-hover {
   color: var(--pkt-color-input-text-hover) !important;
 }
-:root .pkt-color-border-input-text-hover {
+
+.pkt-color-border-input-text-hover {
   border-color: var(--pkt-color-input-text-hover) !important;
 }
-:root .pkt-color-bg-input-text-normal {
+
+.pkt-color-bg-input-text-normal {
   background-color: var(--pkt-color-input-text-normal) !important;
 }
-:root .pkt-color-txt-input-text-normal {
+
+.pkt-color-txt-input-text-normal {
   color: var(--pkt-color-input-text-normal) !important;
 }
-:root .pkt-color-border-input-text-normal {
+
+.pkt-color-border-input-text-normal {
   border-color: var(--pkt-color-input-text-normal) !important;
 }
-:root .pkt-color-bg-input-text-error {
+
+.pkt-color-bg-input-text-error {
   background-color: var(--pkt-color-input-text-error) !important;
 }
-:root .pkt-color-txt-input-text-error {
+
+.pkt-color-txt-input-text-error {
   color: var(--pkt-color-input-text-error) !important;
 }
-:root .pkt-color-border-input-text-error {
+
+.pkt-color-border-input-text-error {
   border-color: var(--pkt-color-input-text-error) !important;
 }
-:root .pkt-color-bg-input-text-open {
+
+.pkt-color-bg-input-text-open {
   background-color: var(--pkt-color-input-text-open) !important;
 }
-:root .pkt-color-txt-input-text-open {
+
+.pkt-color-txt-input-text-open {
   color: var(--pkt-color-input-text-open) !important;
 }
-:root .pkt-color-border-input-text-open {
+
+.pkt-color-border-input-text-open {
   border-color: var(--pkt-color-input-text-open) !important;
 }
-:root .pkt-color-bg-input-check-background {
+
+.pkt-color-bg-input-check-background {
   background-color: var(--pkt-color-input-check-background) !important;
 }
-:root .pkt-color-txt-input-check-background {
+
+.pkt-color-txt-input-check-background {
   color: var(--pkt-color-input-check-background) !important;
 }
-:root .pkt-color-border-input-check-background {
+
+.pkt-color-border-input-check-background {
   border-color: var(--pkt-color-input-check-background) !important;
 }
-:root .pkt-color-bg-input-check-border {
+
+.pkt-color-bg-input-check-border {
   background-color: var(--pkt-color-input-check-border) !important;
 }
-:root .pkt-color-txt-input-check-border {
+
+.pkt-color-txt-input-check-border {
   color: var(--pkt-color-input-check-border) !important;
 }
-:root .pkt-color-border-input-check-border {
+
+.pkt-color-border-input-check-border {
   border-color: var(--pkt-color-input-check-border) !important;
 }
-:root .pkt-color-bg-input-check-text-active {
+
+.pkt-color-bg-input-check-text-active {
   background-color: var(--pkt-color-input-check-text-active) !important;
 }
-:root .pkt-color-txt-input-check-text-active {
+
+.pkt-color-txt-input-check-text-active {
   color: var(--pkt-color-input-check-text-active) !important;
 }
-:root .pkt-color-border-input-check-text-active {
+
+.pkt-color-border-input-check-text-active {
   border-color: var(--pkt-color-input-check-text-active) !important;
 }
-:root .pkt-color-bg-input-check-text-hover {
+
+.pkt-color-bg-input-check-text-hover {
   background-color: var(--pkt-color-input-check-text-hover) !important;
 }
-:root .pkt-color-txt-input-check-text-hover {
+
+.pkt-color-txt-input-check-text-hover {
   color: var(--pkt-color-input-check-text-hover) !important;
 }
-:root .pkt-color-border-input-check-text-hover {
+
+.pkt-color-border-input-check-text-hover {
   border-color: var(--pkt-color-input-check-text-hover) !important;
 }
-:root .bg-color-blue {
+
+.bg-color-blue {
   background-color: #6fe9ff !important;
 }
-:root .txt-color-blue {
+
+.txt-color-blue {
   color: #6fe9ff !important;
 }
-:root .bg-color-blue-light {
+
+.bg-color-blue-light {
   background-color: #b3f5ff !important;
 }
-:root .txt-color-blue-light {
+
+.txt-color-blue-light {
   color: #b3f5ff !important;
 }
-:root .bg-color-blue-dark {
+
+.bg-color-blue-dark {
   background-color: #2a2859 !important;
 }
-:root .txt-color-blue-dark {
+
+.txt-color-blue-dark {
   color: #2a2859 !important;
 }
-:root .bg-color-green {
+
+.bg-color-green {
   background-color: #43f8b6 !important;
 }
-:root .txt-color-green {
+
+.txt-color-green {
   color: #43f8b6 !important;
 }
-:root .bg-color-green-light {
+
+.bg-color-green-light {
   background-color: #c7f6c9 !important;
 }
-:root .txt-color-green-light {
+
+.txt-color-green-light {
   color: #c7f6c9 !important;
 }
-:root .bg-color-green-dark {
+
+.bg-color-green-dark {
   background-color: #034b45 !important;
 }
-:root .txt-color-green-dark {
+
+.txt-color-green-dark {
   color: #034b45 !important;
 }
-:root .bg-color-red {
+
+.bg-color-red {
   background-color: #ff8274 !important;
 }
-:root .txt-color-red {
+
+.txt-color-red {
   color: #ff8274 !important;
 }
-:root .bg-color-red-light {
+
+.bg-color-red-light {
   background-color: #ffb4ac !important;
 }
-:root .txt-color-red-light {
+
+.txt-color-red-light {
   color: #ffb4ac !important;
 }
-:root .bg-color-yellow {
+
+.bg-color-yellow {
   background-color: #f9c66b !important;
 }
-:root .txt-color-yellow {
+
+.txt-color-yellow {
   color: #f9c66b !important;
 }
-:root .bg-color-beige-light {
+
+.bg-color-beige-light {
   background-color: #f8f0dd !important;
 }
-:root .txt-color-beige-light {
+
+.txt-color-beige-light {
   color: #f8f0dd !important;
 }
-:root .bg-color-beige-dark {
+
+.bg-color-beige-dark {
   background-color: #d0bfae !important;
 }
-:root .txt-color-beige-dark {
+
+.txt-color-beige-dark {
   color: #d0bfae !important;
 }
-:root .bg-color-active {
+
+.bg-color-active {
   background-color: #1f42aa !important;
 }
-:root .txt-color-active {
+
+.txt-color-active {
   color: #1f42aa !important;
 }
-:root .bg-color-active-light {
+
+.bg-color-active-light {
   background-color: #b3f5ff !important;
 }
-:root .txt-color-active-light {
+
+.txt-color-active-light {
   color: #b3f5ff !important;
 }
-:root .bg-color-hover {
+
+.bg-color-hover {
   background-color: #1f42aa !important;
 }
-:root .txt-color-hover {
+
+.txt-color-hover {
   color: #1f42aa !important;
 }
-:root .bg-color-hover-light {
+
+.bg-color-hover-light {
   background-color: #b3f5ff !important;
 }
-:root .txt-color-hover-light {
+
+.txt-color-hover-light {
   color: #b3f5ff !important;
 }
-:root .bg-color-focus {
+
+.bg-color-focus {
   background-color: #e0adff !important;
 }
-:root .txt-color-focus {
+
+.txt-color-focus {
   color: #e0adff !important;
 }
-:root .bg-color-disabled {
+
+.bg-color-disabled {
   background-color: #4d4d4d !important;
 }
-:root .txt-color-disabled {
+
+.txt-color-disabled {
   color: #4d4d4d !important;
 }
-:root .bg-color-disabled-light {
+
+.bg-color-disabled-light {
   background-color: #f9f9f9 !important;
 }
-:root .txt-color-disabled-light {
+
+.txt-color-disabled-light {
   color: #f9f9f9 !important;
 }
-:root .bg-color-info {
+
+.bg-color-info {
   background-color: #2a2859 !important;
 }
-:root .txt-color-info {
+
+.txt-color-info {
   color: #2a2859 !important;
 }
-:root .bg-color-success {
+
+.bg-color-success {
   background-color: #034b45 !important;
 }
-:root .txt-color-success {
+
+.txt-color-success {
   color: #034b45 !important;
 }
-:root .bg-color-warning {
+
+.bg-color-warning {
   background-color: #774c01 !important;
 }
-:root .txt-color-warning {
+
+.txt-color-warning {
   color: #774c01 !important;
 }
-:root .bg-color-error {
+
+.bg-color-error {
   background-color: #96281c !important;
 }
-:root .txt-color-error {
+
+.txt-color-error {
   color: #96281c !important;
 }
-:root .bg-color-blue-dark-5 {
+
+.bg-color-blue-dark-5 {
   background-color: #f2f9ff !important;
 }
-:root .txt-color-blue-dark-5 {
+
+.txt-color-blue-dark-5 {
   color: #f2f9ff !important;
 }
-:root .bg-color-blue-dark-10 {
+
+.bg-color-blue-dark-10 {
   background-color: #d9e9f2 !important;
 }
-:root .txt-color-blue-dark-10 {
+
+.txt-color-blue-dark-10 {
   color: #d9e9f2 !important;
 }
-:root .bg-color-blue-5 {
+
+.bg-color-blue-5 {
   background-color: #f1fdff !important;
 }
-:root .txt-color-blue-5 {
+
+.txt-color-blue-5 {
   color: #f1fdff !important;
 }
-:root .bg-color-blue-10 {
+
+.bg-color-blue-10 {
   background-color: #e5fcff !important;
 }
-:root .txt-color-blue-10 {
+
+.txt-color-blue-10 {
   color: #e5fcff !important;
 }
-:root .bg-color-blue-60 {
+
+.bg-color-blue-60 {
   background-color: #d1f9ff !important;
 }
-:root .txt-color-blue-60 {
+
+.txt-color-blue-60 {
   color: #d1f9ff !important;
 }
-:root .bg-color-green-dark-5 {
+
+.bg-color-green-dark-5 {
   background-color: #f2fff3 !important;
 }
-:root .txt-color-green-dark-5 {
+
+.txt-color-green-dark-5 {
   color: #f2fff3 !important;
 }
-:root .bg-color-green-dark-10 {
+
+.bg-color-green-dark-10 {
   background-color: #d9f2ef !important;
 }
-:root .txt-color-green-dark-10 {
+
+.txt-color-green-dark-10 {
   color: #d9f2ef !important;
 }
-:root .bg-color-green-10 {
+
+.bg-color-green-10 {
   background-color: #e5ffe6 !important;
 }
-:root .txt-color-green-10 {
+
+.txt-color-green-10 {
   color: #e5ffe6 !important;
 }
-:root .bg-color-green-30 {
+
+.bg-color-green-30 {
   background-color: #c7fde9 !important;
 }
-:root .txt-color-green-30 {
+
+.txt-color-green-30 {
   color: #c7fde9 !important;
 }
-:root .bg-color-red-5 {
+
+.bg-color-red-5 {
   background-color: #fff3f2 !important;
 }
-:root .txt-color-red-5 {
+
+.txt-color-red-5 {
   color: #fff3f2 !important;
 }
-:root .bg-color-red-10 {
+
+.bg-color-red-10 {
   background-color: #ffe8e5 !important;
 }
-:root .txt-color-red-10 {
+
+.txt-color-red-10 {
   color: #ffe8e5 !important;
 }
-:root .bg-color-red-30 {
+
+.bg-color-red-30 {
   background-color: #ffdfdc !important;
 }
-:root .txt-color-red-30 {
+
+.txt-color-red-30 {
   color: #ffdfdc !important;
 }
-:root .bg-color-yellow-5 {
+
+.bg-color-yellow-5 {
   background-color: #fef9f0 !important;
 }
-:root .txt-color-yellow-5 {
+
+.txt-color-yellow-5 {
   color: #fef9f0 !important;
 }
-:root .bg-color-yellow-50 {
+
+.bg-color-yellow-50 {
   background-color: #ffe7bc !important;
 }
-:root .txt-color-yellow-50 {
+
+.txt-color-yellow-50 {
   color: #ffe7bc !important;
 }
-:root .bg-color-gray-light {
+
+.bg-color-gray-light {
   background-color: #f9f9f9 !important;
 }
-:root .txt-color-gray-light {
+
+.txt-color-gray-light {
   color: #f9f9f9 !important;
 }
-:root .bg-color-gray {
+
+.bg-color-gray {
   background-color: #f2f2f2 !important;
 }
-:root .txt-color-gray {
+
+.txt-color-gray {
   color: #f2f2f2 !important;
 }
-:root .bg-color-gray-dark {
+
+.bg-color-gray-dark {
   background-color: #2c2c2c !important;
 }
-:root .txt-color-gray-dark {
+
+.txt-color-gray-dark {
   color: #2c2c2c !important;
 }
-:root .bg-color-transparent {
+
+.bg-color-transparent {
   background-color: transparent !important;
 }
-:root .txt-color-transparent {
+
+.txt-color-transparent {
   color: transparent !important;
 }
-:root .bg-color-white {
+
+.bg-color-white {
   background-color: #fff !important;
 }
-:root .txt-color-white {
+
+.txt-color-white {
   color: #fff !important;
 }
-:root .bg-color-grayscale-10 {
+
+.bg-color-grayscale-10 {
   background-color: #e6e6e6 !important;
 }
-:root .txt-color-grayscale-10 {
+
+.txt-color-grayscale-10 {
   color: #e6e6e6 !important;
 }
-:root .bg-color-grayscale-20 {
+
+.bg-color-grayscale-20 {
   background-color: #ccc !important;
 }
-:root .txt-color-grayscale-20 {
+
+.txt-color-grayscale-20 {
   color: #ccc !important;
 }
-:root .bg-color-grayscale-30 {
+
+.bg-color-grayscale-30 {
   background-color: #b3b3b3 !important;
 }
-:root .txt-color-grayscale-30 {
+
+.txt-color-grayscale-30 {
   color: #b3b3b3 !important;
 }
-:root .bg-color-grayscale-40 {
+
+.bg-color-grayscale-40 {
   background-color: #9a9a9a !important;
 }
-:root .txt-color-grayscale-40 {
+
+.txt-color-grayscale-40 {
   color: #9a9a9a !important;
 }
-:root .bg-color-grayscale-50 {
+
+.bg-color-grayscale-50 {
   background-color: #808080 !important;
 }
-:root .txt-color-grayscale-50 {
+
+.txt-color-grayscale-50 {
   color: #808080 !important;
 }
-:root .bg-color-grayscale-60 {
+
+.bg-color-grayscale-60 {
   background-color: #666 !important;
 }
-:root .txt-color-grayscale-60 {
+
+.txt-color-grayscale-60 {
   color: #666 !important;
 }
-:root .bg-color-grayscale-70 {
+
+.bg-color-grayscale-70 {
   background-color: #4d4d4d !important;
 }
-:root .txt-color-grayscale-70 {
+
+.txt-color-grayscale-70 {
   color: #4d4d4d !important;
 }
-:root .bg-color-grayscale-80 {
+
+.bg-color-grayscale-80 {
   background-color: #333 !important;
 }
-:root .txt-color-grayscale-80 {
+
+.txt-color-grayscale-80 {
   color: #333 !important;
 }
-:root .bg-color-grayscale-90 {
+
+.bg-color-grayscale-90 {
   background-color: #1a1a1a !important;
 }
-:root .txt-color-grayscale-90 {
+
+.txt-color-grayscale-90 {
   color: #1a1a1a !important;
 }
-:root .bg-color-black {
+
+.bg-color-black {
   background-color: #000 !important;
 }
-:root .txt-color-black {
+
+.txt-color-black {
   color: #000 !important;
 }
-: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);
-}
 
 /*
  * Defaults for elementer