[Darkside] Fileupload CSS update (#3343)

* ✨ Updated Dropzone with darkmode * ♻️ Added nesting for root * ♻️ ac -> acx prefix for interla tokens * ♻️ Removed reduntant token * ♻️ More nesting * 💄 Align overlay on drag better * ⚰️ Removed test-code * 💄 Update hover-border for dropzone * 🐛 Removed border-color update on hover in disabled state * ♻️ Use bg input on area, use border default
navikt · Nov 12, 2024 · 204017e · 204017e
1 parent 37289b1
commit 204017e
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 111 deletions.
diff --git a/@navikt/core/css/darkside/form/file-upload.darkside.css b/@navikt/core/css/darkside/form/file-upload.darkside.css
@@ -1,78 +1,84 @@
-/**
-* Makes it easier for user to use FileItem in semantic lists
-*/
-.navds-file-upload :is(ul, li) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+/* Makes it easier for user to use FileItem in semantic lists */
+.navds-file-upload {
+  & :is(ul, li) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 
-/**
- * FileUpload.Dropzone
- */
-
+/* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-subtle);
-  --__ac-dropzone-text-color: var(--a-text-default);
-  --__ac-dropzone-padding: var(--a-spacing-6);
-  --__ac-dropzone-icon-padding: var(--a-spacing-2);
-  --__ac-dropzone-animation-length-long: 0.6s;
-  --__ac-dropzone-animation-length-short: 250ms;
-  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
-  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+  --__axc-dropzone-background: var(--ax-bg-input);
+  --__axc-dropzone-padding: var(--ax-spacing-6);
+  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-animation-length-long: 400ms;
+  --__axc-dropzone-animation-length-short: 250ms;
+  --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__axc-dropzone-animation-over-under: cubic-bezier(0.3, 1, 0.3, 1);
 
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-4);
+  gap: var(--ax-spacing-4);
   text-align: center;
-  padding: var(--__ac-dropzone-padding);
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--__ac-dropzone-background);
-  color: var(--__ac-dropzone-text-color);
-  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  padding: var(--__axc-dropzone-padding);
+  border: 1px dashed var(--ax-border-default);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--__axc-dropzone-background);
+  color: var(--ax-text-default);
+  transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
-}
 
-.navds-dropzone__area:hover {
-  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
-  outline-color: var(--a-border-default);
-}
+  &:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-accent-strong);
 
-.navds-dropzone--disabled > .navds-dropzone__area:hover {
-  outline-color: var(--a-border-subtle);
-  box-shadow: initial;
-  cursor: default;
-}
+    & > .navds-dropzone__area-button {
+      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-accent-moderate-hover);
+      box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+    }
+  }
+
+  &:active .navds-dropzone__area-button {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+    box-shadow: none;
+  }
 
-.navds-dropzone--dragging > .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
+  &[data-disabled="true"] {
+    cursor: default;
+  }
 }
 
-.navds-dropzone--dragging > .navds-dropzone__area::after {
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  color: var(--a-text-action-selected);
-  background-color: var(--a-surface-hover);
-  content: "";
-  inset: 0;
-  position: absolute;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
-  border-radius: var(--a-border-radius-large);
-  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+.navds-dropzone--dragging {
+  & > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  & > .navds-dropzone__area::after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    inset: 0;
+    margin: -1px;
+    border: 1px dashed var(--ax-border-accent-strong);
+    position: absolute;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
+      var(--__axc-dropzone-animation-ease-out);
+  }
 }
 
 @keyframes akselDropzoneDragoverAnimation {
   0% {
     -webkit-backdrop-filter: blur(0);
     backdrop-filter: blur(0);
-    background-color: var(--a-surface-transparent);
+    background-color: transparent;
   }
 
   70% {
@@ -81,54 +87,41 @@
   }
 
   100% {
-    background-color: var(--a-surface-hover);
+    background-color: var(--ax-bg-accent-moderateA);
   }
 }
 
 .navds-dropzone__area-icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
+  padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
-  outline-color: var(--a-surface-danger);
-  outline-width: 2px;
-}
-
-.navds-dropzone__area:hover > .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-}
-
-.navds-dropzone__area:active .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
+.navds-dropzone--error > .navds-dropzone__area {
+  border-color: transparent;
+  outline: 2px solid var(--ax-border-danger);
+  outline-offset: -1px;
 }
 
 .navds-dropzone__area-release {
-  top: var(--__ac-dropzone-padding);
+  top: var(--__axc-dropzone-padding);
   display: grid;
   position: absolute;
   z-index: 1;
   pointer-events: none;
   transition:
-    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
-    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+    top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
+    transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
 .navds-dropzone__area-release__icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  border-radius: var(--a-border-radius-full);
-  background-color: var(--a-surface-neutral-subtle);
+  padding: var(--__axc-dropzone-icon-padding);
+  border-radius: var(--ax-border-radius-full);
+  background-color: var(--ax-bg-neutral-moderateA);
   transition:
-    background-color 300ms var(--__ac-dropzone-animation-ease-out),
-    font-size 300ms var(--__ac-dropzone-animation-ease-out);
+    background-color 300ms var(--__axc-dropzone-animation-ease-out),
+    font-size 300ms var(--__axc-dropzone-animation-ease-out);
   font-size: 1.5rem;
 }
 
@@ -142,52 +135,55 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
-  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
   visibility: visible;
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--a-text-action-selected);
+  color: var(--ax-text-accent-strong);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--a-text-subtle);
+  color: var(--ax-text-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
-/**
- * FileUpload.Item
- */
-
+/* ----------------------------- FileUpload Item ---------------------------- */
 .navds-file-item__inner {
-  outline: 1px solid var(--a-border-subtle);
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-spacing-3);
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
   align-items: flex-start;
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--a-surface-danger);
+  outline: 2px solid var(--ax-border-danger);
 }
 
 .navds-file-item__icon {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-icon-default);
-  border-radius: var(--a-border-radius-full);
-  min-height: 3rem;
-  min-width: 3rem;
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2.5rem;
+  min-width: 2.5rem;
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+
+  & > svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }
 
 .navds-file-item__icon--loading {
@@ -203,28 +199,28 @@
 }
 
 .navds-file-item__error {
-  color: var(--a-text-danger);
+  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
   overflow: hidden;
   grid-template-rows: 0fr;
-}
-
-.navds-file-item--error .navds-file-item__error {
-  grid-template-rows: 1fr;
-  padding-top: var(--a-spacing-1);
-}
 
-.navds-file-item__error-content > svg {
-  flex-shrink: 0;
-  height: 1rem;
-  margin-top: 0.1rem;
+  & .navds-file-item__error {
+    grid-template-rows: 1fr;
+    padding-top: var(--ax-spacing-1);
+  }
 }
 
 .navds-file-item__error-content {
   min-height: 0;
   display: flex;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-spacing-1);
+
+  & > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: 0.1rem;
+  }
 }
diff --git a/@navikt/core/css/darkside/index.css b/@navikt/core/css/darkside/index.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.forms, aksel.components, aksel.layout, aksel.utilities;
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.forms, aksel.layout, aksel.utilities;
 
 /* CSS foundations */
 @import "./baseline/reset.darkside.css" layer(aksel.reset);

diff --git a/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx b/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx
@@ -107,6 +107,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
             onClick,
             () => inputRef.current?.click(),
           )}
+          data-disabled={inputProps.disabled}
         >
           {!inputProps.disabled && (
             <>