@oslokommune/punkt-css 9.2.6 → 9.4.0

package/dist/css/pkt-components.css

@@ -2,35 +2,35 @@
  * Alert component
  */
 .pkt-alert {
-  --pkt-alert-bc: var(--color-blue);
-  --pkt-alert-bg: var(--color-blue-60);
-  --pkt-alert-txt: var(--color-blue-dark);
-  --pkt-alert-icon-fg: var(--color-blue-dark);
-  --pkt-alert-close-fg: var(--color-blue-dark);
+  --pkt-color-alert-bc: var(--pkt-color-border-blue);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);
+  --pkt-color-alert-txt: var(--pkt-color-text-body-dark);
+  --pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000);
 }
 
 .pkt-alert--error {
-  --pkt-alert-bc: var(--color-red);
-  --pkt-alert-bg: var(--color-red-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-red);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red);
 }
 
 .pkt-alert--success {
-  --pkt-alert-bc: var(--color-green);
-  --pkt-alert-bg: var(--color-green-30);
+  --pkt-color-alert-bc: var(--pkt-color-border-green);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-green);
 }
 
 .pkt-alert--warning {
-  --pkt-alert-bc: var(--color-yellow);
-  --pkt-alert-bg: var(--color-yellow-50);
+  --pkt-color-alert-bc: var(--pkt-color-border-yellow);
+  --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
 }
 
 .pkt-alert {
   padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   display: block;
   position: relative;
-  border-left: 0.25rem solid var(--pkt-alert-bc);
-  background-color: var(--pkt-alert-bg);
-  color: var(--pkt-alert-txt);
+  border-left: 0.25rem solid var(--pkt-color-alert-bc);
+  background-color: var(--pkt-color-alert-bg);
+  color: var(--pkt-color-alert-txt);
 }
 .pkt-alert__title {
   font-size: 1.125rem;
@@ -73,7 +73,7 @@
   margin-top: 1.5rem;
 }
 .pkt-alert__icon {
-  --fg-color: var(--pkt-alert-icon-fg);
+  --fg-color: var(--pkt-color-alert-icon-fg);
   height: 2rem;
   width: 2rem;
   position: absolute;
@@ -81,11 +81,13 @@
   left: 20px;
 }
 .pkt-alert__close {
-  --fg-color: var(--pkt-alert-close-fg);
   position: absolute;
   right: 1.125rem;
   top: 0.625rem;
 }
+.pkt-alert__close svg {
+  --fg-color: var(--pkt-color-alert-close-fg);
+}
 
 .pkt-alert--slim {
   padding: 0.75rem 1rem 0.75rem 0.25rem;
@@ -108,32 +110,53 @@
  * Tag element
  */
 .pkt-tag {
+  --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
   font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
-  background: var(--color-blue-light);
+  background: var(--pkt-color-surface-default-light-blue);
   padding: 0.25rem 0.5rem;
   display: inline-flex;
   align-items: center;
   height: 1.875rem;
   column-gap: 0;
+  color: var(--pkt-color-tag-text-normal);
+}
+[data-mode=dark] .pkt-tag {
+  --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
 }
+
 .pkt-tag.pkt-btn:hover, .pkt-tag.pkt-tag--hover {
-  background-color: var(--color-blue);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-hover);
   text-decoration: underline;
   border-color: transparent;
 }
+.pkt-tag.pkt-btn:hover > svg, .pkt-tag.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
+}
 .pkt-tag.pkt-btn:focus, .pkt-tag.pkt-tag--focus {
-  background-color: var(--color-blue);
-  border-color: var(--color-active);
-  outline: 4px solid var(--color-focus);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  border-color: var(--pkt-color-text-action-active);
+  outline: 4px solid var(--pkt-color-border-states-focus);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag.pkt-btn:focus > svg, .pkt-tag.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag.pkt-btn:active, .pkt-tag.pkt-tag--active, .pkt-tag.pkt-tag--active:hover {
-  background-color: var(--color-blue);
-  color: var(--color-active);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag.pkt-btn:active > svg, .pkt-tag.pkt-tag--active > svg, .pkt-tag.pkt-tag--active:hover > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag__icon {
   width: 16px;
@@ -146,79 +169,148 @@
   margin-left: 0.5rem;
 }
 .pkt-tag--green {
-  background: var(--color-green-light);
+  background: var(--pkt-color-surface-strong-light-green);
 }
 .pkt-tag--green.pkt-btn:hover, .pkt-tag--green.pkt-tag--hover {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--green.pkt-btn:hover > svg, .pkt-tag--green.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--green.pkt-btn:focus, .pkt-tag--green.pkt-tag--focus {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--green.pkt-btn:focus > svg, .pkt-tag--green.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--green.pkt-btn:active, .pkt-tag--green.pkt-tag--active {
-  background-color: var(--color-green);
+  background-color: var(--pkt-color-surface-strong-green);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--green.pkt-btn:active > svg, .pkt-tag--green.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--yellow {
-  background: var(--color-yellow-50);
+  background: var(--pkt-color-surface-default-yellow);
 }
 .pkt-tag--yellow.pkt-btn:hover, .pkt-tag--yellow.pkt-tag--hover {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--yellow.pkt-btn:hover > svg, .pkt-tag--yellow.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--yellow.pkt-btn:focus, .pkt-tag--yellow.pkt-tag--focus {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--yellow.pkt-btn:focus > svg, .pkt-tag--yellow.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--yellow.pkt-btn:active, .pkt-tag--yellow.pkt-tag--active {
-  background-color: var(--color-yellow);
+  background-color: var(--pkt-color-surface-strong-yellow);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--yellow.pkt-btn:active > svg, .pkt-tag--yellow.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--red {
-  background: var(--color-red-light);
+  background: var(--pkt-color-surface-default-red);
 }
 .pkt-tag--red.pkt-btn:hover, .pkt-tag--red.pkt-tag--hover {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--red.pkt-btn:hover > svg, .pkt-tag--red.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--red.pkt-btn:focus, .pkt-tag--red.pkt-tag--focus {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--red.pkt-btn:focus > svg, .pkt-tag--red.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--red.pkt-btn:active, .pkt-tag--red.pkt-tag--active {
-  background-color: var(--color-red);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-surface-strong-red);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--red.pkt-btn:active > svg, .pkt-tag--red.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--beige {
-  background: var(--color-beige-light);
+  background: var(--pkt-color-surface-default-light-beige);
 }
 .pkt-tag--beige.pkt-btn:hover, .pkt-tag--beige.pkt-tag--hover {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--beige.pkt-btn:hover > svg, .pkt-tag--beige.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--beige.pkt-btn:focus, .pkt-tag--beige.pkt-tag--focus {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--beige.pkt-btn:focus > svg, .pkt-tag--beige.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--beige.pkt-btn:active, .pkt-tag--beige.pkt-tag--active {
-  background-color: var(--color-beige-dark);
+  background-color: var(--pkt-color-surface-strong-beige);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--grey {
-  background: var(--color-gray-light);
+  background: var(--pkt-color-surface-default-gray);
 }
 .pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
-  background-color: var(--color-grayscale-20);
+  background-color: var(--pkt-color-surface-strong-gray);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--blue-light {
-  background: var(--color-blue-10);
+  background: var(--pkt-color-surface-subtle-light-blue);
 }
 .pkt-tag--blue-light.pkt-btn:hover, .pkt-tag--blue-light.pkt-tag--hover {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-hover);
+}
+.pkt-tag--blue-light.pkt-btn:hover > svg, .pkt-tag--blue-light.pkt-tag--hover > svg {
+  --fg-color: var(--pkt-color-tag-text-hover);
 }
 .pkt-tag--blue-light.pkt-btn:focus, .pkt-tag--blue-light.pkt-tag--focus {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-focus);
+}
+.pkt-tag--blue-light.pkt-btn:focus > svg, .pkt-tag--blue-light.pkt-tag--focus > svg {
+  --fg-color: var(--pkt-color-tag-text-focus);
 }
 .pkt-tag--blue-light.pkt-btn:active, .pkt-tag--blue-light.pkt-tag--active {
-  background-color: var(--color-blue-light);
+  background-color: var(--pkt-color-surface-strong-blue);
+  color: var(--pkt-color-tag-text-active);
+}
+.pkt-tag--blue-light.pkt-btn:active > svg, .pkt-tag--blue-light.pkt-tag--active > svg {
+  --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--small {
   padding: 0.25rem;
@@ -249,10 +341,6 @@
   line-height: 1.375rem;
 }
 
-:root [data-mode=dark] .pkt-tag {
-  color: var(--color-blue-dark);
-}
-
 /* 
  * Back link component
  */
@@ -269,6 +357,7 @@
 
 /* 
  * Badge element
+ * DEPRECATED - use tag instead 
  */
 .pkt-badge {
   display: inline-flex;
@@ -279,21 +368,9 @@
   font-weight: 500;
   font-size: 0.75em;
   line-height: 1em;
-  background: #b3f5ff;
   border-radius: 1px;
 }
 
-.pkt-btn > .pkt-badge.pkt-badge--strong,
-.pkt-badge--strong {
-  color: #b3f5ff;
-  background: #2a2859;
-}
-
-.pkt-btn > .pkt-badge.pkt-badge--info,
-.pkt-badge--info {
-  background: #f9c66b;
-}
-
 .pkt-badge.pkt-badge--small,
 .pkt-h1 > .pkt-badge,
 .pkt-h2 > .pkt-badge,
@@ -305,7 +382,7 @@
 .pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
   color: inherit;
   background: transparent;
-  border: 1px solid #2a2859;
+  border: 1px solid;
   border-radius: 4px;
 }
 
@@ -427,8 +504,8 @@
   letter-spacing: -0.2px;
   line-height: 1.75rem;
   padding: 2.5rem 1.5rem;
-  background-color: var(--color-blue-dark);
-  color: var(--color-white);
+  background-color: var(--pkt-color-surface-strong-dark-blue);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
 }
@@ -448,7 +525,7 @@
   line-height: 2.25rem;
   margin-bottom: 2rem;
   margin-top: 0;
-  color: var(--color-white);
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-footer__text:last-child {
   margin-bottom: 0;
@@ -530,8 +607,8 @@
   letter-spacing: -0.2px;
   line-height: 1.75rem;
   padding: 2rem 1.5rem;
-  background-color: var(--color-blue-dark);
-  color: var(--color-white);
+  background-color: var(--pkt-color-surface-strong-dark-blue);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   align-items: center;
 }
@@ -587,8 +664,9 @@
  * Header component
  */
 .pkt-header {
-  background-color: var(--color-white);
-  border-bottom: 1px solid var(--color-gray);
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+  color: var(--pkt-color-text-body-default);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -639,6 +717,9 @@
   margin: 0;
   padding: 0;
 }
+.pkt-header__logo svg {
+  --fg-color: var(--pkt-color-text-body-default);
+}
 .pkt-header__logo-service {
   padding-top: 0.2rem;
   display: none;
@@ -701,7 +782,7 @@
   }
 }
 .pkt-header__user-btn {
-  border-color: var(--color-yellow);
+  border-color: var(--pkt-color-brand-yellow-1000);
 }
 .pkt-header__actions {
   flex: 1 0 auto;
@@ -733,6 +814,7 @@
   max-height: calc(100vh - 4.5rem);
   overflow-x: hidden;
   overflow-y: auto;
+  color: var(--pkt-color-text-body-dark);
 }
 @media screen and (min-width: 48rem) {
   .pkt-header__dropdown {
@@ -745,14 +827,14 @@
 }
 .pkt-header__dropdown > li {
   padding: 2rem;
-  background-color: var(--color-white);
+  background-color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header__dropdown > li.footer {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 .pkt-header__dropdown > li:nth-child(odd) {
-  background-color: var(--color-gray-light);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-header__user-fullname {
   display: none;
@@ -776,7 +858,7 @@
   }
 }
 .pkt-header--has-dropdown > .pkt-btn:hover .pkt-btn--closed {
-  --fg-color: var(--color-white);
+  --fg-color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header--has-dropdown .pkt-btn--open {
   display: none;
@@ -790,12 +872,12 @@
   }
 }
 .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn {
-  background-color: var(--color-active);
-  border-color: var(--color-active);
-  color: var(--color-white);
+  background-color: var(--pkt-color-border-states-active);
+  border-color: var(--pkt-color-border-states-active);
+  color: var(--pkt-color-surface-subtle-white);
 }
 .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
-  --fg-color: var(--color-white);
+  --fg-color: var(--pkt-color-surface-subtle-white);
 }
 @media screen and (min-width: 80rem) {
   .pkt-header--has-dropdown.pkt-header--open-dropdown > .pkt-btn .pkt-btn--open {
@@ -813,7 +895,7 @@
   margin: 0;
 }
 .pkt-user-menu__label {
-  color: var(--color-grayscale-60);
+  color: var(--pkt-color-grays-gray-600);
   font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: -0.2px;
@@ -835,6 +917,7 @@
   margin: 0;
 }
 .pkt-user-menu .pkt-list .pkt-link {
+  color: var(--pkt-color-text-body-dark);
   text-decoration: none;
 }
 .pkt-user-menu .pkt-list .pkt-link:hover {
@@ -847,6 +930,9 @@
 .pkt-user-menu .pkt-list-horizontal {
   margin: 0;
 }
+.pkt-user-menu .pkt-list-horizontal .pkt-link {
+  color: var(--pkt-color-text-body-dark);
+}
 
 /* 
  * Icons
@@ -887,6 +973,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-inputwrapper__label > h2 {
   font-size: inherit;
@@ -898,14 +985,11 @@
 }
 .pkt-inputwrapper__helptext {
   width: min(100%, 31rem);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
   font-size: 0.875rem;
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
+  color: var(--pkt-color-text-body-default);
 }
 .pkt-inputwrapper__helptext > *:first-child {
   margin-top: 0;
@@ -927,7 +1011,7 @@
 }
 .pkt-inputwrapper__helptext-expandable-open {
   display: block;
-  border-left: 2px solid var(--color-blue-dark);
+  border-left: 2px solid var(--pkt-color-text-body-dark);
   padding: 0.5rem 1rem;
   margin-bottom: 0.25rem;
 }
@@ -947,15 +1031,15 @@
   margin-bottom: 0.5rem;
 }
 .pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
+  color: var(--pkt-color-text-action-disabled);
   cursor: inherit;
 }
 .pkt-inputwrapper--disabled .pkt-tag {
-  background-color: var(--color-disabled-light);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-inputwrapper--disabled .pkt-alert {
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-text-action-disabled);
 }
 .pkt-inputwrapper--inline {
   display: inline-block;
@@ -983,44 +1067,47 @@
 .pkt-inputwrapper--error .pkt-input,
 .pkt-inputwrapper--error .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input-icon,
+.pkt-inputwrapper--error .pkt-input-icon {
+  border-color: var(--pkt-color-brand-red-1000);
+}
 .pkt-inputwrapper--error .pkt-input:hover,
 .pkt-inputwrapper--error .pkt-input__container:hover,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon,
-.pkt-inputwrapper--error .pkt-input__container:focus-within,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
+  border-color: var(--pkt-color-brand-red-1000);
+}
+.pkt-inputwrapper--error .pkt-input:focus-within,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
-  border-color: var(--color-red);
-  --focus-outline: var(--color-red);
+  border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
+  color: var(--pkt-color-text-action-disabled);
   cursor: inherit;
 }
 .pkt-inputwrapper--disabled .pkt-input,
 .pkt-inputwrapper--disabled .pkt-input-prefix,
 .pkt-inputwrapper--disabled .pkt-input-suffix,
 .pkt-inputwrapper--disabled .pkt-input-icon {
-  border-color: var(--color-disabled);
-  background-color: var(--color-disabled-light);
+  border-color: var(--pkt-color-border-states-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-prefix,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-suffix,
 .pkt-inputwrapper--disabled .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
 }
 .pkt-inputwrapper--disabled .pkt-input:hover {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
   box-shadow: none;
 }
 .pkt-inputwrapper--disabled .pkt-input:focus {
-  border-color: var(--color-disabled);
+  border-color: var(--pkt-color-border-states-disabled);
   box-shadow: none;
   outline: none;
 }
@@ -1092,33 +1179,33 @@
  * Messagebox component
  */
 .pkt-messagebox {
-  --pkt-messagebox-bc: var(--color-beige-dark);
-  --pkt-messagebox-bg: var(--color-beige-light);
-  --pkt-messagebox-txt: var(--color-blue-dark);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-beige);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
+  --pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
 }
 
 .pkt-messagebox--red {
-  --pkt-messagebox-bc: var(--color-red);
-  --pkt-messagebox-bg: var(--color-red-30);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-red);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-faded-red);
 }
 
 .pkt-messagebox--green {
-  --pkt-messagebox-bc: var(--color-green);
-  --pkt-messagebox-bg: var(--color-green-30);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-green);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-green);
 }
 
 .pkt-messagebox--blue {
-  --pkt-messagebox-bc: var(--color-blue);
-  --pkt-messagebox-bg: var(--color-blue-60);
+  --pkt-color-messagebox-bc: var(--pkt-color-border-blue);
+  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
 }
 
 .pkt-messagebox {
   padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   display: block;
   position: relative;
-  border-left: 0.25rem solid var(--pkt-messagebox-bc);
-  background-color: var(--pkt-messagebox-bg);
-  color: var(--pkt-messagebox-txt);
+  border-left: 0.25rem solid var(--pkt-color-messagebox-bc);
+  background-color: var(--pkt-color-messagebox-bg);
+  color: var(--pkt-color-messagebox-txt);
 }
 .pkt-messagebox__title {
   font-size: 1.5rem;
@@ -1205,32 +1292,75 @@
   margin-bottom: 0;
 }
 .pkt-linkcard--beige {
-  background-color: var(--color-beige-light);
+  background-color: var(--pkt-color-surface-default-light-beige);
+  color: var(--pkt-color-text-body-dark) !important;
+}
+.pkt-linkcard--beige:hover, .pkt-linkcard--beige:focus, .pkt-linkcard--beige:focus-visible, .pkt-linkcard--beige:active {
+  color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
 .pkt-linkcard--blue {
-  background-color: var(--color-blue-5);
+  background-color: var(--pkt-color-surface-subtle-pale-blue);
+  color: var(--pkt-color-text-body-dark) !important;
+}
+.pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
+  color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
 .pkt-linkcard--grey-outline {
-  border: 4px solid var(--color-gray);
+  border: 4px solid var(--pkt-color-border-subtle);
 }
 .pkt-linkcard--beige-outline {
-  border: 4px solid var(--color-beige-light);
+  border: 4px solid var(--pkt-color-border-light-beige);
 }
 
-[data-mode=dark] .pkt-linkcard--beige {
-  color: var(--color-blue-dark) !important;
+[data-mode=dark] .pkt-linkcard .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%) contrast(100%);
 }
-[data-mode=dark] .pkt-linkcard--beige:focus {
-  color: var(--color-hover) !important;
+[data-mode=dark] .pkt-linkcard:hover .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%) contrast(107%);
 }
-[data-mode=dark] .pkt-linkcard--blue {
-  color: var(--color-blue-dark) !important;
+
+[data-mode=dark] .pkt-linkcard--beige .pkt-link--external::after, .pkt-linkcard--blue .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
 }
-[data-mode=dark] .pkt-linkcard--blue:focus {
-  color: var(--color-hover) !important;
+[data-mode=dark] .pkt-linkcard--beige .pkt-link--external:hover::after, .pkt-linkcard--blue .pkt-link--external:hover::after {
+  filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%) contrast(95%) !important;
 }
 
 /* Common styles for all inputs */
+.pkt-input, .pkt-textinput__input,
+.pkt-input-prefix,
+.pkt-input-suffix,
+.pkt-input-icon,
+.pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --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-neutrals-white);
+}
+
+[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-input-prefix, [data-mode=dark] .pkt-input-suffix, [data-mode=dark] .pkt-input-icon, [data-mode=dark] .pkt-input__container {
+  --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-input, .pkt-textinput__input {
   font-size: 1.125rem;
   font-weight: 300;
@@ -1239,10 +1369,10 @@
   display: flex;
   align-items: center;
   appearance: none;
-  background-color: var(--color-white);
-  border: 2px solid var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
   border-radius: 0;
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
 }
@@ -1262,41 +1392,41 @@
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.2/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 1.5rem auto, 100%;
 }
 .pkt-input:is(select) option, .pkt-textinput__input:is(select) option {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  background-color: var(--pkt-color-input-background-normal);
+  color: var(--pkt-color-input-text-normal);
   font-weight: normal;
 }
 .pkt-input::placeholder, .pkt-textinput__input::placeholder {
-  color: var(--color-grayscale-50);
+  color: var(--pkt-color-text-placeholder);
   opacity: 1;
 }
 .pkt-input:hover, .pkt-textinput__input:hover, .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:focus, .pkt-textinput__input:focus {
   outline: none;
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
-  border-color: var(--color-active);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-input[readonly], [readonly].pkt-textinput__input {
   opacity: 1;
-  background-color: var(--color-disabled-light);
-  border-color: var(--color-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
   cursor: inherit;
 }
 .pkt-input:disabled:active, .pkt-textinput__input:disabled:active {
-  border: 2px solid var(--color-disabled);
+  border: 2px solid var(--pkt-color-input-border-disabled);
 }
 .pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon {
   font-size: 1.125rem;
@@ -1307,8 +1437,10 @@
   align-items: center;
   width: auto;
   height: 3rem;
-  border: 2px solid var(--color-blue-dark);
+  border: 2px solid var(--pkt-color-input-border-normal);
   flex-shrink: 0;
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-input-background-normal);
 }
 .pkt-input-prefix {
   padding: 0.5rem 0rem 0.5rem 1rem;
@@ -1318,7 +1450,7 @@
   width: 1px;
   margin-left: 0.5rem;
   height: 100%;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-suffix {
   padding: 0.5rem 1rem 0.5rem 0rem;
@@ -1333,7 +1465,7 @@
   width: 1px;
   margin-right: 0.5rem;
   height: 1.5rem;
-  background-color: var(--color-blue-dark);
+  background-color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-input-icon {
   padding: 0.5rem 1rem;
@@ -1345,12 +1477,11 @@
   margin-left: 0.5rem;
 }
 .pkt-input--counter-error, .pkt-input--counter-error:focus {
-  border-color: var(--color-red);
-  background-color: var(--color-red-30);
+  border-color: var(--pkt-color-input-border-error);
+  background-color: var(--pkt-color-surface-default-faded-red);
 }
 .pkt-input--counter-error:focus {
-  --focus-outline: var(--color-red);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
 }
 .pkt-input__container {
   display: flex;
@@ -1378,18 +1509,16 @@
   box-shadow: none;
 }
 .pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-hover);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within {
-  --focus-outline: var(--color-active);
-  box-shadow: 0 0 0 2px var(--focus-outline);
+  outline: 2px solid var(--pkt-color-input-border-active);
 }
 .pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-textinput__input,
 .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-input__container:focus-within .pkt-input-icon {
-  outline: 0;
-  border-color: var(--color-active);
+  border-color: var(--pkt-color-input-border-active);
 }
 .pkt-input__counter {
   font-size: 0.875rem;
@@ -1404,14 +1533,7 @@
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
-  color: var(--color-red);
-}
-
-[data-mode=dark] .pkt-input-prefix,
-[data-mode=dark] .pkt-input-suffix,
-[data-mode=dark] .pkt-input-icon {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
+  color: var(--pkt-color-input-text-error);
 }
 
 /*