@oslokommune/punkt-css 17.0.4 → 17.0.6

package/dist/scss/base/_colors.scss

@@ -27,47 +27,6 @@
     --#{$name}: #{$color};
   }
 
-  // Lager css-klasser basert på pkt-fargevariabler
-  @each $name, $color in variables.$pkt-colors {
-    .pkt-color-bg-#{$name} {
-      background-color: $color !important;
-    }
-
-    .pkt-color-txt-#{$name} {
-      color: $color !important;
-    }
-
-    .pkt-color-border-#{$name} {
-      border-color: $color !important;
-    }
-  }
-
-  // Lager css-klasser basert på semantiske variabler
-  @each $name, $color in variables.$pkt-semantic-colors {
-    .pkt-color-bg-#{$name} {
-      background-color: var(--pkt-color-#{$name}) !important;
-    }
-
-    .pkt-color-txt-#{$name} {
-      color: var(--pkt-color-#{$name}) !important;
-    }
-
-    .pkt-color-border-#{$name} {
-      border-color: var(--pkt-color-#{$name}) !important;
-    }
-  }
-
-  // Lager css-klasser basert på gamle fargevariabler - deprecated
-  @each $name, $color in variables.$colors {
-    .bg-#{$name} {
-      background-color: $color !important;
-    }
-
-    .txt-#{$name} {
-      color: $color !important;
-    }
-  }
-
   // Dark mode
   &[data-mode='dark'],
   [data-mode='dark'] {
@@ -144,3 +103,42 @@
     --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
   }
 }
+
+@each $name, $color in variables.$pkt-colors {
+  .pkt-color-bg-#{$name} {
+    background-color: $color !important;
+  }
+
+  .pkt-color-txt-#{$name} {
+    color: $color !important;
+  }
+
+  .pkt-color-border-#{$name} {
+    border-color: $color !important;
+  }
+}
+
+@each $name, $color in variables.$pkt-semantic-colors {
+  .pkt-color-bg-#{$name} {
+    background-color: var(--pkt-color-#{$name}) !important;
+  }
+
+  .pkt-color-txt-#{$name} {
+    color: var(--pkt-color-#{$name}) !important;
+  }
+
+  .pkt-color-border-#{$name} {
+    border-color: var(--pkt-color-#{$name}) !important;
+  }
+}
+
+// Deprecated
+@each $name, $color in variables.$colors {
+  .bg-#{$name} {
+    background-color: $color !important;
+  }
+
+  .txt-#{$name} {
+    color: $color !important;
+  }
+}

package/dist/scss/base/_containers.scss

@@ -14,16 +14,13 @@ $-gapsSmall: map.get(variables.$spacing, 'size-16');
 $-gapsMedium: map.get(variables.$spacing, 'size-32');
 
 .pkt-container {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: $-gapsSmall;
-  padding-right: $-gapsSmall;
+  margin-inline: auto;
+  padding-inline: $-gapsSmall;
   width: 100%;
   max-width: 100vw;
 
   @include bp('tablet-up') {
-    padding-left: $-gapsMedium;
-    padding-right: $-gapsMedium;
+    padding-inline: $-gapsMedium;
   }
 
   @include bp('laptop-up') {
@@ -66,8 +63,7 @@ $-gapsMedium: map.get(variables.$spacing, 'size-32');
     margin-right: auto;
   }
   &--center {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
   }
   &--right {
     margin-left: auto;

package/dist/scss/components/_alert.scss

@@ -86,14 +86,14 @@ pkt-alert {
     @include get-text('pkt-txt-18-light');
 
     p {
-      margin-bottom: map.get(variables.$spacing, 'size-16');
+      margin-block-end: map.get(variables.$spacing, 'size-16');
 
       &:first-of-type {
-        margin-top: 0;
+        margin-block-start: 0;
       }
 
       &:last-of-type {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
   }

package/dist/scss/components/_badge.scss

@@ -9,7 +9,7 @@
 .pkt-badge {
   display: inline-flex;
   height: 1.5em;
-  margin-left: 0.4em;
+  margin-inline-start: 0.4em;
   padding: 0.25em 0.4em;
   color: black;
   font-weight: 500;
@@ -55,6 +55,6 @@
 
 // Hack to fix pixel alignment on small buttons
 .pkt-btn--small>.pkt-badge {
-  padding-top: 0.28em;
+  padding-block-start: 0.28em;
   transform: translateY(-0.1em);
 }

package/dist/scss/components/_breadcrumbs.scss

@@ -81,7 +81,7 @@
   &__icon {
     width: 1rem;
     height: 1rem;
-    margin-left: map.get(variables.$spacing, 'size-8');
+    margin-inline-start: map.get(variables.$spacing, 'size-8');
   }
 
 

package/dist/scss/components/_calendar.scss

@@ -13,7 +13,7 @@ pkt-calendar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-block-end: 1rem;
     .pkt-cal-month-picker {
       display: flex;
       gap: 0.5rem;
@@ -52,7 +52,7 @@ pkt-calendar {
 
   .pkt-cal-days {
     margin: 0;
-    padding-left: 0;
+    padding-inline-start: 0;
     border-spacing: 0;
     td {
       padding: 0;

package/dist/scss/components/_card.scss

@@ -45,7 +45,7 @@ pkt-card {
       margin: 0;
       font-size: map.get(variables.$font-size, 'size-30');
       font-weight: map.get(variables.$font-weight, 'regular');
-      margin-bottom: map.get(variables.$spacing, 'size-8');
+      margin-block-end: map.get(variables.$spacing, 'size-8');
       hyphens: auto;
       overflow-wrap: break-word;
     }
@@ -60,7 +60,7 @@ pkt-card {
     padding: 0;
     margin: 0;
     line-height: unset;
-    margin-bottom: map.get(variables.$spacing, 'size-16');
+    margin-block-end: map.get(variables.$spacing, 'size-16');
     font-size: map.get(variables.$font-size, 'size-20');
     font-weight: map.get(variables.$font-weight, 'light');
     hyphens: auto;
@@ -68,8 +68,8 @@ pkt-card {
   }
 
   .pkt-card__metadata {
-    margin-top: map.get(variables.$spacing, 'size-16');
-    margin-bottom: 0;
+    margin-block-start: map.get(variables.$spacing, 'size-16');
+    margin-block-end: 0;
     line-height: unset;
     gap: map.get(variables.$spacing, 'size-8');
   }
@@ -82,11 +82,11 @@ pkt-card {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
-    margin-bottom: map.get(variables.$spacing, 'size-8');
-    margin-top: 0;
+    margin-block-end: map.get(variables.$spacing, 'size-8');
+    margin-block-start: 0;
     &-bottom {
-      margin-top: map.get(variables.$spacing, 'size-8');
-      margin-bottom: 0;
+      margin-block-start: map.get(variables.$spacing, 'size-8');
+      margin-block-end: 0;
     }
   }
 
@@ -134,14 +134,14 @@ pkt-card {
   &.pkt-card--horizontal {
     .pkt-card__image {
       max-width: 400px;
-      margin-right: 2rem;
+      margin-inline-end: 2rem;
       &-square {
         align-self: stretch;
       }
 
       @media screen and (max-width: map.get(variables.$breakpoints, 'phablet')) {
-        margin-right: 0;
-        margin-bottom: 2rem;
+        margin-inline-end: 0;
+        margin-block-end: 2rem;
         max-height: 400px;
         &-square {
           max-width: unset;
@@ -153,7 +153,7 @@ pkt-card {
   // portait image styles
   &.pkt-card--vertical {
     .pkt-card__image {
-      margin-bottom: 2rem;
+      margin-block-end: 2rem;
       max-height: 400px;
     }
   }

package/dist/scss/components/_combobox.scss

@@ -48,7 +48,7 @@ pkt-combobox,
     }
 
     &__value {
-      padding-left: 0.5rem;
+      padding-inline-start: 0.5rem;
     }
 
     &__input {
@@ -221,12 +221,12 @@ pkt-combobox,
     &__placeholder {
       color: var(--pkt-color-text-placeholder);
       opacity: 1;
-      padding-left: 0.5rem;
+      padding-inline-start: 0.5rem;
     }
   }
 
   .pkt-listbox__open {
-    margin-top: $-box-separator;
+    margin-block-start: $-box-separator;
   }
 }
 

package/dist/scss/components/_datepicker.scss

@@ -79,8 +79,7 @@ pkt-datepicker-multiple {
     }
   }
   button.pkt-input-icon {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+    padding-inline: 0.75rem;
     &:hover {
       background-color: inherit !important;
       border-color: inherit !important;
@@ -88,19 +87,19 @@ pkt-datepicker-multiple {
     }
   }
   .pkt-datepicker__input {
-    padding-right: 0;
+    padding-inline-end: 0;
     background-image: none;
     width: 8.3rem;
   }
   .pkt-input-separator ~ .pkt-datepicker--range {
-    padding-left: 0.25rem;
+    padding-inline-start: 0.25rem;
   }
 }
 .pkt-calendar-popup {
   top: 100%;
   left: 0;
   z-index: 2;
-  margin-top: 0.5rem;
+  margin-block-start: 0.5rem;
   padding: 0.5rem;
   position: absolute;
   width: max-content;
@@ -153,8 +152,7 @@ pkt-datepicker-multiple {
     }
 
     button.pkt-input-icon {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
+      padding-inline: 0.5rem;
 
       pkt-icon,
       .pkt-icon,
@@ -187,7 +185,7 @@ pkt-datepicker-multiple {
 @supports (-moz-appearance: none) {
   .pkt-datepicker__inputs {
     .pkt-datepicker__input {
-      padding-right: 0.5rem;
+      padding-inline-end: 0.5rem;
     }
     .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
       width: auto;

package/dist/scss/components/_fileupload.scss

@@ -46,7 +46,7 @@ pkt-fileupload,
     }
 
     .pkt-alert--error.pkt-fileupload__error-alert {
-      margin-bottom: 1rem;
+      margin-block-end: 1rem;
       width: 100%;
     }
   }
@@ -89,7 +89,7 @@ pkt-fileupload,
     cursor: pointer;
     padding: 2rem;
     text-align: center;
-    margin-bottom: 1rem;
+    margin-block-end: 1rem;
     font-size: 14px;
 
     &:hover {
@@ -199,8 +199,8 @@ pkt-fileupload,
     display: flex;
     flex-direction: column;
     padding: 0;
-    margin-top: 0;
-    margin-bottom: 1rem;
+    margin-block-start: 0;
+    margin-block-end: 1rem;
     row-gap: map.get(variables.$spacing, 'size-8');
 
     container-type: inline-size;
@@ -264,7 +264,7 @@ pkt-fileupload,
         display: flex;
         flex-direction: column;
         width: 100%;
-        padding-left: 0;
+        padding-inline-start: 0;
         align-items: flex-start;
         gap: 0.5rem;
       }
@@ -323,7 +323,7 @@ pkt-fileupload,
         color: var(--pkt-color-text-placeholder);
         flex: 0 0 auto;
         white-space: nowrap;
-        padding-left: 0.5rem;
+        padding-inline-start: 0.5rem;
       }
 
       &__cancel-button {
@@ -395,7 +395,7 @@ pkt-fileupload,
         grid-column: 1 / -1;
         padding: 0.75rem 1rem;
         background: var(--pkt-color-surface-default-gray);
-        margin-top: 0.5rem;
+        margin-block-start: 0.5rem;
 
         &:empty {
           display: none;
@@ -458,7 +458,7 @@ pkt-fileupload,
         &__time {
           @include typography.get-text('pkt-txt-12-medium');
           display: block;
-          margin-top: 0.25rem;
+          margin-block-start: 0.25rem;
           color: var(--pkt-color-text-subtle);
         }
 
@@ -551,8 +551,8 @@ pkt-fileupload,
 
         &__title {
           @include typography.get-text('pkt-txt-14');
-          margin-top: 0.5rem;
-          margin-bottom: 0.25rem;
+          margin-block-start: 0.5rem;
+          margin-block-end: 0.25rem;
           min-width: 0;
           max-width: 100%;
           overflow: hidden;
@@ -606,7 +606,7 @@ pkt-fileupload,
         .pkt-fileupload__queue-display__item__cancel-button {
           grid-column: 3;
           grid-row: 1;
-          margin-left: 1rem;
+          margin-inline-start: 1rem;
 
           &:hover {
             color: var(--pkt-color-brand-warm-blue-1000);
@@ -761,11 +761,11 @@ pkt-fileupload,
   }
 
   .pkt-inputwrapper__fieldset {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 
   .pkt-inputwrapper__helptext {
-    margin-bottom: 0.5rem;
+    margin-block-end: 0.5rem;
   }
 }
 
@@ -825,7 +825,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal {
   }
 
   .pkt-modal__container {
-    padding-top: 0;
+    padding-block-start: 0;
     background-color: transparent;
   }
 
@@ -907,13 +907,13 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal {
     &--prev {
       grid-column: 1;
       grid-row: 1;
-      margin-left: 0.5rem;
+      margin-inline-start: 0.5rem;
     }
 
     &--next {
       grid-column: 3;
       grid-row: 1;
-      margin-right: 0.5rem;
+      margin-inline-end: 0.5rem;
     }
 
     // Same element as React: nav BEM + `.pkt-btn--medium` — round hit target; skin from `.pkt-btn--secondary`.

package/dist/scss/components/_footer.scss

@@ -79,8 +79,7 @@ $-footer-content-max-width: 75rem;
     }
 
     &--compact {
-      padding-top: map.get(variables.$spacing, 'size-32');
-      padding-bottom: map.get(variables.$spacing, 'size-32');
+      padding-block: map.get(variables.$spacing, 'size-32');
     }
   }
 
@@ -118,16 +117,16 @@ $-footer-content-max-width: 75rem;
     justify-content: space-between;
     align-items: center;
     gap: map.get(variables.$spacing, 'size-32');
-    margin-top: map.get(variables.$spacing, 'size-16');
+    margin-block-start: map.get(variables.$spacing, 'size-16');
 
     @include cq('pkt-footer', $cq-bp-tablet) {
       grid-column: -2 / -1;
-      margin-top: 0;
+      margin-block-start: 0;
     }
   }
 
   &__sections + &__bottom {
-    margin-top: map.get(variables.$spacing, 'size-32');
+    margin-block-start: map.get(variables.$spacing, 'size-32');
   }
 
   &__bottom-links {
@@ -167,7 +166,7 @@ $-footer-content-max-width: 75rem;
   }
 
   &__sections + &__consent {
-    margin-top: map.get(variables.$spacing, 'size-32');
+    margin-block-start: map.get(variables.$spacing, 'size-32');
   }
 }
 

package/dist/scss/components/_header-global.scss

@@ -31,14 +31,14 @@
   &__logo-area {
     align-items: center;
     display: inline-flex;
-    padding-left: map.get(variables.$spacing, 'size-32');
+    padding-inline-start: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-global--tablet & {
-      padding-left: map.get(variables.$spacing, 'size-16');
+      padding-inline-start: map.get(variables.$spacing, 'size-16');
     }
 
     .pkt-header-global--mobile & {
-      padding-left: map.get(variables.$spacing, 'size-8');
+      padding-inline-start: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -58,7 +58,7 @@
 
     .pkt-header-global--mobile & {
       column-gap: map.get(variables.$spacing, 'size-8');
-      padding-right: map.get(variables.$spacing, 'size-8');
+      padding-inline-end: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -69,10 +69,10 @@
 
   &__user {
     justify-self: end;
-    padding-right: map.get(variables.$spacing, 'size-32');
+    padding-inline-end: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-global--tablet:not(.pkt-header-global--mobile) & {
-      padding-right: map.get(variables.$spacing, 'size-16');
+      padding-inline-end: map.get(variables.$spacing, 'size-16');
     }
   }
 
@@ -171,7 +171,7 @@
   }
 
   &__search-panel-inner {
-    margin-left: var(--pkt-header-global-left, 0px);
+    margin-inline-start: var(--pkt-header-global-left, 0px);
     width: var(--pkt-header-global-width, 100%);
     background-color: var(--pkt-color-background-default);
     border-bottom: 1px solid var(--pkt-color-border-subtle);

package/dist/scss/components/_header-menu.scss

@@ -12,8 +12,8 @@ $pkt-header-menu-breakpoint: 48rem;
 @mixin pkt-header-menu-region-inner {
   max-width: 75rem;
   margin: 0 auto;
-  padding-top: map.get(variables.$spacing, 'size-32');
-  padding-bottom: map.get(variables.$spacing, 'size-16');
+  padding-block-start: map.get(variables.$spacing, 'size-32');
+  padding-block-end: map.get(variables.$spacing, 'size-16');
 
   @include cq('pkt-header-menu', $cq-bp-tablet) {
     padding: map.get(variables.$spacing, 'size-52');
@@ -52,7 +52,7 @@ $pkt-header-menu-breakpoint: 48rem;
   }
 
   &__services-title {
-    margin-bottom: map.get(variables.$spacing, 'size-32');
+    margin-block-end: map.get(variables.$spacing, 'size-32');
   }
 
   &__services-list {
@@ -77,7 +77,7 @@ $pkt-header-menu-breakpoint: 48rem;
       display: flex;
       gap: map.get(variables.$spacing, 'size-16');
       flex-wrap: wrap;
-      padding-top: 0;
+      padding-block-start: 0;
     }
 
     @include cq('pkt-header-menu', $cq-bp-tablet-big) {
@@ -232,11 +232,11 @@ $pkt-header-menu-breakpoint: 48rem;
           border-right: 1px solid currentColor;
           padding: 0 map.get(variables.$spacing, 'size-32');
           &:first-child {
-            padding-left: 0;
+            padding-inline-start: 0;
           }
           &:last-child {
             border-right: none;
-            padding-right: 0;
+            padding-inline-end: 0;
           }
         }
       }
@@ -285,10 +285,10 @@ $pkt-header-menu-breakpoint: 48rem;
     @include pkt-header-menu-region-inner;
     text-align: center;
     color: var(--pkt-color-text-body-default);
-    padding-bottom: map.get(variables.$spacing, 'size-48');
+    padding-block-end: map.get(variables.$spacing, 'size-48');
 
     @include cq('pkt-header-menu', $cq-bp-tablet) {
-      padding-bottom: map.get(variables.$spacing, 'size-52');
+      padding-block-end: map.get(variables.$spacing, 'size-52');
     }
   }
 }

package/dist/scss/components/_header-service-mobile.scss

@@ -34,7 +34,7 @@
     &__content {
       grid-column: 2;
       grid-row: 1;
-      padding-right: map.get(variables.$spacing, 'size-8');
+      padding-inline-end: map.get(variables.$spacing, 'size-8');
     }
 
     &__user {
@@ -134,10 +134,10 @@
         align-items: stretch;
         &,
         > ul {
-          margin-left: 0;
+          margin-inline-start: 0;
           gap: map.get(variables.$spacing, 'size-24');
           > * {
-            margin-left: 0;
+            margin-inline-start: 0;
           }
         }
       }

package/dist/scss/components/_header-service.scss

@@ -139,14 +139,14 @@
     grid-row: 1;
     align-items: center;
     display: inline-flex;
-    padding-left: map.get(variables.$spacing, 'size-32');
+    padding-inline-start: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-service--tablet & {
-      padding-left: map.get(variables.$spacing, 'size-16');
+      padding-inline-start: map.get(variables.$spacing, 'size-16');
     }
 
     .pkt-header-service--mobile & {
-      padding-left: map.get(variables.$spacing, 'size-8');
+      padding-inline-start: map.get(variables.$spacing, 'size-8');
     }
   }
 
@@ -174,10 +174,10 @@
   &__user {
     grid-column: 3;
     justify-self: end;
-    padding-right: map.get(variables.$spacing, 'size-32');
+    padding-inline-end: map.get(variables.$spacing, 'size-32');
 
     .pkt-header-service--tablet & {
-      padding-right: map.get(variables.$spacing, 'size-16');
+      padding-inline-end: map.get(variables.$spacing, 'size-16');
     }
   }
 
@@ -206,7 +206,7 @@
   &__service-name {
     @include get-text('pkt-txt-22-medium');
 
-    padding-top: 4px;
+    padding-block-start: 4px;
     white-space: normal;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -252,7 +252,7 @@
   &__search-input {
     background-color: var(--pkt-color-background-default);
     .pkt-input-icon:not(button) svg {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 
@@ -269,13 +269,13 @@
     flex-direction: row;
     align-items: center;
     > * + * {
-      margin-left: map.get(variables.$spacing, 'size-32');
+      margin-inline-start: map.get(variables.$spacing, 'size-32');
     }
 
     > .pkt-link + .pkt-link,
     > pkt-link + pkt-link,
     > a + a {
-      margin-left: map.get(variables.$spacing, 'size-24');
+      margin-inline-start: map.get(variables.$spacing, 'size-24');
     }
   }