[Darkside] Padding sync (#3651)

* 🎨 Adjust padding in alert styles for consistency

* 🎨 Update chat bubble padding for improved consistency

* 🎨 Standardize padding in date and modal styles for consistency

* 🎨 Refactor padding in error summary styles for improved consistency

* 🎨 Adjust padding in file upload styles for improved consistency

* 🎨 Update padding in file upload styles for improved consistency

* 🎨 Adjust transition duration and padding for form progress and summary styles

* 🎨 Update padding in guide panel styles for improved consistency

* 📝 Changeset

Author: KenAJoh

.changeset/gold-drinks-impress.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Darkside: Synced padding with Figma.

@navikt/core/css/darkside/alert.darkside.css

@@ -1,7 +1,7 @@
 .aksel-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: center;
@@ -25,7 +25,7 @@
 }
 
 .aksel-alert--small {
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-16);
   gap: var(--ax-space-8);
 
   > .aksel-alert__icon {

@navikt/core/css/darkside/chat.darkside.css

@@ -54,7 +54,7 @@
 }
 
 .aksel-chat__bubble {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
@@ -66,7 +66,7 @@
 }
 
 .aksel-chat--small .aksel-chat__bubble {
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */

@navikt/core/css/darkside/date.darkside.css

@@ -1,5 +1,5 @@
 .aksel-date {
-  padding: var(--ax-space-16) var(--ax-space-12);
+  padding: var(--ax-space-16);
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
@@ -258,11 +258,11 @@
 
 @media (min-width: 480px) {
   .aksel-date {
-    padding: var(--ax-space-20) var(--ax-space-16);
+    padding: var(--ax-space-20);
   }
 
   .aksel-date__modal-body {
-    padding: var(--ax-space-24);
+    padding: var(--ax-space-20);
   }
 
   .aksel-date__caption {

@navikt/core/css/darkside/form/error-summary.darkside.css

@@ -1,6 +1,6 @@
 .aksel-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 3px;
@@ -18,7 +18,7 @@
 }
 
 .aksel-error-summary--small {
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-16);
 
   & .aksel-error-summary__heading {
     scroll-margin-top: var(--ax-space-16);

@navikt/core/css/darkside/form/file-upload.darkside.css

@@ -14,7 +14,7 @@
   flex-direction: column;
   gap: var(--ax-space-16);
   text-align: center;
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
   border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -162,7 +162,7 @@ li.aksel-file-item {
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
   align-items: flex-start;

@navikt/core/css/darkside/form/form-progress.darkside.css

@@ -29,7 +29,7 @@
   padding-inline: var(--ax-space-20);
   padding-block: 0;
   opacity: 0.001;
-  transition-duration: 1s;
+  transition-duration: 0.3s;
   transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
   transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
   grid-template-rows: 0fr;
@@ -45,7 +45,7 @@
     margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--ax-space-16);
+    padding-block: var(--ax-space-20);
     opacity: 1;
   }
 }

@navikt/core/css/darkside/form/form-summary.darkside.css

@@ -72,7 +72,7 @@
 
 .aksel-form-summary__value .aksel-form-summary__answers {
   margin-top: var(--ax-space-8);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info-subtleA);

@navikt/core/css/darkside/guide-panel.darkside.css

@@ -71,7 +71,7 @@
 }
 
 .aksel-guide-panel__content-inner {
-  padding: var(--ax-space-12) var(--ax-space-16);
+  padding: var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
@@ -83,7 +83,7 @@
 
   @media (min-width: 480px) {
     & {
-      padding: var(--ax-space-16) var(--ax-space-20);
+      padding: var(--ax-space-20);
     }
 
     .aksel-guide-panel[data-responsive="true"] & {

@navikt/core/css/darkside/modal.darkside.css

@@ -61,15 +61,15 @@
   width: 450px;
 
   & .aksel-modal__header {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 
   & .aksel-modal__body {
     padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .aksel-modal__footer {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 }
 
@@ -122,7 +122,7 @@
 }
 
 .aksel-modal__header {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
 }
 
 .aksel-modal__header-icon {
@@ -165,7 +165,7 @@
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-space-16);
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-20);
 }
 
 .aksel-modal__footer :nth-of-type(2) {