@oslokommune/punkt-css 17.1.3 → 18.3.0

package/dist/css/pkt-elements.css

@@ -34,41 +34,41 @@
 }
 
 .pkt-btn {
-  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
   --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
+  --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
+  --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
   --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-  --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
   --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
   --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
-  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
-  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
 }
 
 [data-mode=dark] .pkt-btn {
-  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-background-normal: var(--pkt-color-button-primary-background-normal);
   --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
-  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
-  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-text-normal: var(--pkt-color-button-primary-text-normal);
+  --pkt-color-button-background-focus: var(--pkt-color-button-primary-background-focus);
+  --pkt-color-button-border-focus: var(--pkt-color-button-primary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-button-primary-text-focus);
   --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
-  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-button-primary-background-hover);
   --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
-  --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
+  --pkt-color-button-text-hover: var(--pkt-color-button-primary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-primary-background-active);
   --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
-  --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
-  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
-  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+  --pkt-color-button-text-active: var(--pkt-color-button-primary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-primary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-primary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-primary-text-disabled);
 }
 [data-mode=dark] .pkt-btn--green-dark {
   --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -133,22 +133,36 @@
 
 .pkt-btn--secondary {
   --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+  --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
+  --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
+  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
+  --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
+  --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
 }
 
 [data-mode=dark] .pkt-btn--secondary {
   --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
-  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-border-normal: var(--pkt-color-button-secondary-border-normal);
+  --pkt-color-button-text-normal: var(--pkt-color-button-secondary-text-normal);
   --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
-  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
-  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-border-focus: var(--pkt-color-button-secondary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-button-background-hover: var(--pkt-color-button-secondary-background-hover);
   --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
-  --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-button-text-hover: var(--pkt-color-button-secondary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-secondary-background-active);
   --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
-  --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
-  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
+  --pkt-color-button-text-active: var(--pkt-color-button-secondary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-secondary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-secondary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-secondary-text-disabled);
 }
 [data-mode=dark] .pkt-btn--secondary--green-dark {
   --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -214,28 +228,36 @@
 .pkt-btn--tertiary {
   --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
   --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
-  --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
-  --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
-  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
-  --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
-  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
+  --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
+  --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
+  --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
+  --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
+  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-100);
+  --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
+  --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
 }
 
 [data-mode=dark] .pkt-btn--tertiary {
   --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
   --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
-  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
-  --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
-  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-normal: var(--pkt-color-button-tertiary-text-normal);
+  --pkt-color-button-background-focus: var(--pkt-color-button-tertiary-background-focus);
+  --pkt-color-button-border-focus: var(--pkt-color-button-tertiary-border-focus);
+  --pkt-color-button-text-focus: var(--pkt-color-button-tertiary-text-focus);
+  --pkt-color-button-background-hover: var(--pkt-color-button-tertiary-background-hover);
   --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
-  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
-  --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
+  --pkt-color-button-text-hover: var(--pkt-color-button-tertiary-text-hover);
+  --pkt-color-button-background-active: var(--pkt-color-button-tertiary-background-active);
   --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
-  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-button-text-active: var(--pkt-color-button-tertiary-text-active);
+  --pkt-color-button-background-disabled: var(--pkt-color-button-tertiary-background-disabled);
+  --pkt-color-button-border-disabled: var(--pkt-color-button-tertiary-background-disabled);
+  --pkt-color-button-text-disabled: var(--pkt-color-button-tertiary-text-disabled);
 }
 [data-mode=dark] .pkt-btn--tertiary--green-dark {
   --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
@@ -624,7 +646,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
    */
 }
 .pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
-  color: var(--pkt-color-grays-gray-300);
+  color: var(--pkt-color-brand-neutrals-400);
   opacity: 1;
   /* 1 */
 }
@@ -638,9 +660,9 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   display: inherit;
 }
 .pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
-  background-color: var(--pkt-color-brand-neutrals-200);
-  border-color: var(--pkt-color-grays-gray-300);
-  color: var(--pkt-color-grays-gray-300);
+  background-color: var(--pkt-color-brand-neutrals-100);
+  border-color: var(--pkt-color-brand-neutrals-400);
+  color: var(--pkt-color-brand-neutrals-400);
   cursor: inherit;
 }
 /*
@@ -742,7 +764,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
 }
 .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/minus-sign.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/minus-sign.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -768,7 +790,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -826,7 +848,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -948,7 +970,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
 .pkt-hr {
   border: 0;
   width: 100%;
-  border-top: 1px solid var(--pkt-color-grays-gray-200);
+  border-top: 1px solid var(--pkt-color-brand-neutrals-300);
 }
 
 /* 
@@ -1089,7 +1111,7 @@ pkt-select {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.1/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -1425,7 +1447,7 @@ pkt-select {
   padding-inline-end: 0;
 }
 .pkt-list-horizontal.bordered li + li {
-  border-left: 1px solid var(--pkt-color-grays-gray-600);
+  border-left: 1px solid var(--pkt-color-brand-neutrals-700);
 }
 
 .pkt-dl,
@@ -1499,10 +1521,10 @@ pkt-select {
 }
 
 .pkt-section--dark {
-  color: white;
+  color: var(--pkt-color-text-body-light, #ffffff);
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #2a2859;
+  background-color: var(--pkt-color-surface-strong-dark-blue, #2a2859);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--dark {
@@ -1514,27 +1536,12 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--dark {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
-.pkt-section--dark a.pkt-btn--ter {
-  color: white;
-}
 
 .pkt-section--danger {
-  color: black;
+  color: var(--pkt-color-text-body-dark, #2a2859);
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #ff8274;
+  background-color: var(--pkt-color-surface-strong-red, #ff8274);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--danger {
@@ -1546,27 +1553,12 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--danger {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
-.pkt-section--danger a.pkt-btn--ter {
-  color: black;
-}
 
 .pkt-section--gray,
 .pkt-section--grey {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f2f2f2;
+  background-color: var(--pkt-color-surface-default-gray, #f2f2f2);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--gray,
@@ -1580,25 +1572,12 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--gray,
-.pkt-section--grey {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
 
 .pkt-section--success {
-  color: black;
+  color: var(--pkt-color-text-body-dark, #2a2859);
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #43f8b6;
+  background-color: var(--pkt-color-surface-strong-green, #43f8b6);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--success {
@@ -1610,26 +1589,11 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--success {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
-.pkt-section--success a.pkt-btn--ter {
-  color: black;
-}
 
 .pkt-section--warning {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #f9c66b;
+  background-color: var(--pkt-color-surface-strong-yellow, #f9c66b);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--warning {
@@ -1641,23 +1605,11 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--warning {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
 
 .pkt-section--info {
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: #b3f5ff;
+  background-color: var(--pkt-color-surface-default-light-blue, #b3f5ff);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--info {
@@ -1669,27 +1621,12 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--info {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
-.pkt-section--info a.pkt-btn--ter {
-  color: black;
-}
 
 .pkt-section--frame {
-  border: 1px solid #2c2c2c;
+  border: 1px solid var(--pkt-color-brand-neutrals-1000, #2c2c2c);
   margin: 1rem 0;
   padding: 0.75rem;
-  background-color: white;
+  background-color: var(--pkt-color-surface-subtle-white, #ffffff);
 }
 @media screen and (min-width: 36rem) {
   .pkt-section--frame {
@@ -1701,18 +1638,6 @@ pkt-select {
     padding: 1.5rem;
   }
 }
-.pkt-section--frame {
-  /*
-  @if luminance($backgroundColor) < 0.4 {
-    color: white;
-
-    a:not([class^='ok-btn']) {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-  */
-}
 
 [class*=ok-section-] > [class^=ok-title-] {
   margin-block-start: 0;