@oslokommune/punkt-css 17.0.5 → 17.0.7

package/dist/scss/base/_colors-tokens.scss

@@ -0,0 +1,106 @@
+/* 
+ * Colors
+ * Brand
+ * Light mode
+ * Dark mode
+ */
+
+@use '../abstracts/variables';
+
+:root {
+  /**
+   * @tokens Colors
+   * @presenter Color
+   */
+  // Brand
+  @each $name, $color in variables.$pkt-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Semantic
+  @each $name, $color in variables.$pkt-semantic-colors {
+    --pkt-color-#{$name}: #{$color};
+  }
+
+  // Deprecated colors
+  @each $name, $color in variables.$colors {
+    --#{$name}: #{$color};
+  }
+
+  // Dark mode
+  &[data-mode='dark'],
+  [data-mode='dark'] {
+    // Background
+    --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);
+
+    // Borders
+    --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);
+    
+    // Surface
+    --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);
+
+    // Text
+    --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);
+
+    // Input (shared)
+    --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);
+
+    // Input - Checkbox/Radio specific
+    --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);
+  }
+}

package/dist/scss/base/_colors-utilities.scss

@@ -0,0 +1,43 @@
+// Colors
+// Hjelpeklasser
+
+@use '../abstracts/variables';
+
+@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/_colors.scss

@@ -1,144 +1,2 @@
-/* 
- * Colors
- * Brand
- * Light mode
- * Dark mode
- */
-
-@use '../abstracts/variables';
-
-:root {
-  /**
-   * @tokens Colors
-   * @presenter Color
-   */
-  // Brand
-  @each $name, $color in variables.$pkt-colors {
-    --pkt-color-#{$name}: #{$color};
-  }
-
-  // Semantic
-  @each $name, $color in variables.$pkt-semantic-colors {
-    --pkt-color-#{$name}: #{$color};
-  }
-
-  // Deprecated colors
-  @each $name, $color in variables.$colors {
-    --#{$name}: #{$color};
-  }
-
-  // Dark mode
-  &[data-mode='dark'],
-  [data-mode='dark'] {
-    // Background
-    --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);
-
-    // Borders
-    --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);
-    // Surface
-    --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);
-
-    // Text
-    --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);
-
-    // Input (shared)
-    --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);
-
-    // Input - Checkbox/Radio specific
-    --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);
-  }
-}
-
-@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;
-  }
-}
+@forward 'colors-tokens';
+@forward 'colors-utilities';

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/base/_index.scss

@@ -1,10 +1,17 @@
+// tokens → reset → typograhy → grid → utilities → a11y.
+// Utilities ligger sist med vilje, så de vinner på spesifisitet når !important fjernes senere
 @forward 'oslo-sans';
-@forward 'colors';
+@forward 'colors-tokens';
+
 @forward 'defaults';
-@forward 'spacing';
+@forward 'typography';
+
 @forward 'containers';
 @forward 'grid';
-@forward 'typography';
 @forward 'layouts';
+
+@forward 'colors-utilities';
+@forward 'spacing';
 @forward 'visibility';
+
 @forward 'accessibility';

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`.