@oslokommune/punkt-css 18.0.0 → 18.3.1

package/dist/css/elements/list.css

@@ -44,7 +44,7 @@
   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,

package/dist/css/elements/list.min.css

@@ -1 +1 @@
-.pkt-list{display:grid;grid-template-columns:auto;grid-template-rows:auto;list-style:none;padding:0;position:relative;row-gap:1.5rem}@media screen and (min-width: 48rem){.pkt-list.two-cols-tablet-up{column-gap:1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto}}@media screen and (min-width: 80rem){.pkt-list.three-cols-laptop-up{column-gap:1.5rem;grid-template-columns:1fr 1fr 1fr}}.pkt-list li>a{display:grid;grid-template-columns:2rem auto;column-gap:1rem}.pkt-list-horizontal{display:flex;list-style:none;padding:0}.pkt-list-horizontal li{padding-inline-end:1rem}.pkt-list-horizontal li+li{padding-inline-start:1rem}.pkt-list-horizontal li:last-child{padding-inline-end:0}.pkt-list-horizontal.bordered li+li{border-left:1px solid var(--pkt-color-grays-gray-600)}.pkt-dl,.pkt-dl--narrow{display:flex;flex-direction:column}@supports(display: grid){.pkt-dl,.pkt-dl--narrow{display:grid;flex-direction:column;grid-template-columns:1fr;margin:.5rem 0}}@media screen and (min-width: 48rem){.pkt-dl{grid-template-columns:minmax(9rem, auto) 1fr;border-bottom:0}}.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}@media screen and (min-width: 48rem){.pkt-dt{font-size:inherit}}.pkt-dl--narrow>.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}@media screen and (min-width: 48rem){.pkt-dd{border-bottom:1px solid rgba(0,0,0,.15)}@supports(display: grid){.pkt-dd{padding:.25em 0 .25em 1.25em;border-bottom:0}}}.pkt-dl--narrow>.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}
+.pkt-list{display:grid;grid-template-columns:auto;grid-template-rows:auto;list-style:none;padding:0;position:relative;row-gap:1.5rem}@media screen and (min-width: 48rem){.pkt-list.two-cols-tablet-up{column-gap:1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto}}@media screen and (min-width: 80rem){.pkt-list.three-cols-laptop-up{column-gap:1.5rem;grid-template-columns:1fr 1fr 1fr}}.pkt-list li>a{display:grid;grid-template-columns:2rem auto;column-gap:1rem}.pkt-list-horizontal{display:flex;list-style:none;padding:0}.pkt-list-horizontal li{padding-inline-end:1rem}.pkt-list-horizontal li+li{padding-inline-start:1rem}.pkt-list-horizontal li:last-child{padding-inline-end:0}.pkt-list-horizontal.bordered li+li{border-left:1px solid var(--pkt-color-brand-neutrals-700)}.pkt-dl,.pkt-dl--narrow{display:flex;flex-direction:column}@supports(display: grid){.pkt-dl,.pkt-dl--narrow{display:grid;flex-direction:column;grid-template-columns:1fr;margin:.5rem 0}}@media screen and (min-width: 48rem){.pkt-dl{grid-template-columns:minmax(9rem, auto) 1fr;border-bottom:0}}.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}@media screen and (min-width: 48rem){.pkt-dt{font-size:inherit}}.pkt-dl--narrow>.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}@media screen and (min-width: 48rem){.pkt-dd{border-bottom:1px solid rgba(0,0,0,.15)}@supports(display: grid){.pkt-dd{padding:.25em 0 .25em 1.25em;border-bottom:0}}}.pkt-dl--narrow>.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}

package/dist/css/elements/section.css

@@ -7,10 +7,10 @@
 }
 
 .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 {
@@ -22,27 +22,12 @@
     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 {
@@ -54,27 +39,12 @@
     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,
@@ -88,25 +58,12 @@
     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 {
@@ -118,26 +75,11 @@
     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 {
@@ -149,23 +91,11 @@
     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 {
@@ -177,27 +107,12 @@
     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 {
@@ -209,18 +124,6 @@
     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;

package/dist/css/elements/section.min.css

@@ -1 +1 @@
-.pkt-section{margin:1rem 0}.pkt-section--dark{color:#fff;margin:1rem 0;padding:.75rem;background-color:#2a2859}@media screen and (min-width: 36rem){.pkt-section--dark{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--dark{padding:1.5rem}}.pkt-section--dark a.pkt-btn--ter{color:#fff}.pkt-section--danger{color:#000;margin:1rem 0;padding:.75rem;background-color:#ff8274}@media screen and (min-width: 36rem){.pkt-section--danger{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--danger{padding:1.5rem}}.pkt-section--danger a.pkt-btn--ter{color:#000}.pkt-section--gray,.pkt-section--grey{margin:1rem 0;padding:.75rem;background-color:#f2f2f2}@media screen and (min-width: 36rem){.pkt-section--gray,.pkt-section--grey{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--gray,.pkt-section--grey{padding:1.5rem}}.pkt-section--success{color:#000;margin:1rem 0;padding:.75rem;background-color:#43f8b6}@media screen and (min-width: 36rem){.pkt-section--success{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--success{padding:1.5rem}}.pkt-section--success a.pkt-btn--ter{color:#000}.pkt-section--warning{margin:1rem 0;padding:.75rem;background-color:#f9c66b}@media screen and (min-width: 36rem){.pkt-section--warning{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--warning{padding:1.5rem}}.pkt-section--info{margin:1rem 0;padding:.75rem;background-color:#b3f5ff}@media screen and (min-width: 36rem){.pkt-section--info{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--info{padding:1.5rem}}.pkt-section--info a.pkt-btn--ter{color:#000}.pkt-section--frame{border:1px solid #2c2c2c;margin:1rem 0;padding:.75rem;background-color:#fff}@media screen and (min-width: 36rem){.pkt-section--frame{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--frame{padding:1.5rem}}[class*=ok-section-]>[class^=ok-title-]{margin-block-start:0}.pkt-section--margin-top{margin-block-start:2.5rem}
+.pkt-section{margin:1rem 0}.pkt-section--dark{color:var(--pkt-color-text-body-light, #ffffff);margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-strong-dark-blue, #2a2859)}@media screen and (min-width: 36rem){.pkt-section--dark{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--dark{padding:1.5rem}}.pkt-section--danger{color:var(--pkt-color-text-body-dark, #2a2859);margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-strong-red, #ff8274)}@media screen and (min-width: 36rem){.pkt-section--danger{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--danger{padding:1.5rem}}.pkt-section--gray,.pkt-section--grey{margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-default-gray, #f2f2f2)}@media screen and (min-width: 36rem){.pkt-section--gray,.pkt-section--grey{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--gray,.pkt-section--grey{padding:1.5rem}}.pkt-section--success{color:var(--pkt-color-text-body-dark, #2a2859);margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-strong-green, #43f8b6)}@media screen and (min-width: 36rem){.pkt-section--success{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--success{padding:1.5rem}}.pkt-section--warning{margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-strong-yellow, #f9c66b)}@media screen and (min-width: 36rem){.pkt-section--warning{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--warning{padding:1.5rem}}.pkt-section--info{margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-default-light-blue, #b3f5ff)}@media screen and (min-width: 36rem){.pkt-section--info{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--info{padding:1.5rem}}.pkt-section--frame{border:1px solid var(--pkt-color-brand-neutrals-1000, #2c2c2c);margin:1rem 0;padding:.75rem;background-color:var(--pkt-color-surface-subtle-white, #ffffff)}@media screen and (min-width: 36rem){.pkt-section--frame{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--frame{padding:1.5rem}}[class*=ok-section-]>[class^=ok-title-]{margin-block-start:0}.pkt-section--margin-top{margin-block-start:2.5rem}