@navikt/ds-css 7.17.2 → 7.17.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 7.17.4
+
+### Patch Changes
+
+- Modal: Updated animations for reduced movement. ([#3671](https://github.com/navikt/aksel/pull/3671))
+
+## 7.17.3
+
+### Patch Changes
+
+- Darkside: Synced padding with Figma. ([#3651](https://github.com/navikt/aksel/pull/3651))
+
 ## 7.17.2
 
 ### Patch Changes

package/config/bundle.darkside.ts

@@ -1,5 +1,5 @@
 import browserslist from "browserslist";
-import CleanCss from "clean-css";
+import esbuild from "esbuild";
 import fastglob from "fast-glob";
 import fs from "fs";
 import { Features, browserslistToTargets, bundleAsync } from "lightningcss";
@@ -76,25 +76,30 @@ async function bundleDarkside() {
    * @param filePath: Path to the file in the build directory
    */
   function writeFile({ file, filePath }: { file: string; filePath: string }) {
-    fs.writeFileSync(`${buildDir}/${filePath}`, file);
+    const buildPath = `${buildDir}/${filePath}`;
+    fs.writeFileSync(buildPath, file);
 
     /**
-     * We use CleanCss package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
+     * We use Esbuild package here since we only want it to optimize filesize, not transform any CSS like LightningCSS minifier does.
      * This is because we want to keep the CSS as close to the original as possible.
-     * Since CleanCSS is not part of the PostCSS ecosystem, we use it in replacement for cssnano.
      */
-    const minifiedCss = new CleanCss({}).minify(file);
+    const result = esbuild.buildSync({
+      entryPoints: [buildPath],
+      outfile: buildPath.replace(".css", ".min.css"),
+      minify: true, // Enable minification
+      bundle: false,
+      write: true,
+      format: "iife",
+      loader: {
+        ".css": "css",
+      },
+    });
 
-    if (minifiedCss.errors.length > 0) {
+    if (result.errors.length > 0) {
       throw new Error(
-        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${minifiedCss.errors}`,
+        `Errors found when minifying for ${filePath} CSS. Stopped bundling\n${result.errors}`,
       );
     }
-
-    fs.writeFileSync(
-      `${buildDir}/${filePath.replace(".css", ".min.css")}`,
-      minifiedCss.styles,
-    );
   }
 
   /* ----------------------------- index.css build ---------------------------- */

package/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 {

package/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 -------------------------- */

package/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 {

package/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);

package/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;

package/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;
   }
 }

package/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);

package/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"] & {

package/darkside/modal.darkside.css

@@ -19,7 +19,7 @@
   &[open] {
     display: flex;
     flex-direction: column;
-    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+    animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
   }
 }
 
@@ -61,7 +61,7 @@
   width: 450px;
 
   & .aksel-modal__header {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 
   & .aksel-modal__body {
@@ -69,7 +69,7 @@
   }
 
   & .aksel-modal__footer {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16);
   }
 }
 
@@ -100,12 +100,12 @@
    * TODO: Consider adding `::backdrop` to global token definitions.
    * TODO: Check that overlay-color is correct after the new colors is set in stone.
    */
-  background: #0214317d;
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  background: rgb(2 20 49 /0.8);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .aksel-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
-  background: #0214317d;
+  background: rgb(2 20 49 /0.8);
 
   /* From polyfill: */
   position: fixed;
@@ -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) {
@@ -183,7 +183,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(2% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -196,11 +196,15 @@
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
   }
 
-  to {
+  50% {
+    opacity: 1;
+  }
+
+  100% {
     opacity: 1;
   }
 }

package/dist/component/modal.css

@@ -24,7 +24,7 @@
 .navds-modal[open] {
   display: flex;
   flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled {
@@ -94,7 +94,7 @@
    * We can add ::backdrop to tokens.css when we remove the polyfill.
    */
   background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
@@ -190,7 +190,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -203,11 +203,15 @@
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
+  }
+
+  50% {
+    opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 1;
   }
 }

package/dist/component/modal.min.css

@@ -1 +1 @@
-.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .35s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .35s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,calc(5% + 4px),0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:0}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}
+.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .7s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .7s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}

package/dist/components.css

@@ -5044,7 +5044,7 @@ button.navds-internalheader__title:active,
 .navds-modal[open] {
   display: flex;
   flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled {
@@ -5114,7 +5114,7 @@ button.navds-internalheader__title:active,
    * We can add ::backdrop to tokens.css when we remove the polyfill.
    */
   background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
-  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  animation: akselModalBackdropFadeIn 0.7s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
@@ -5210,7 +5210,7 @@ button.navds-internalheader__title:active,
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, 4px, 0);
   }
 
   50% {
@@ -5223,11 +5223,15 @@ button.navds-internalheader__title:active,
 }
 
 @keyframes akselModalBackdropFadeIn {
-  from {
-    opacity: 0;
+  0% {
+    opacity: 0.0001;
   }
 
-  to {
+  50% {
+    opacity: 1;
+  }
+
+  100% {
     opacity: 1;
   }
 }