@navikt/ds-css 7.5.3 → 7.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 7.6.0
+
+### Minor Changes
+
+- ReadMore: Added size 'large'. ([#3372](https://github.com/navikt/aksel/pull/3372))
+
+### Patch Changes
+
+- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
+
+- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
+
+- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
+
+- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
+
+- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
+
 ## 7.5.3
 
 ## 7.5.2

package/darkside/action-menu.darkside.css

@@ -3,12 +3,7 @@
   overflow: hidden;
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-subtleA);
-
-  /* TODO: Use token here when added */
-  box-shadow:
-    0 0 1px 0 rgb(7 9 13/ 0.02),
-    0 2px 5px 0 rgb(7 9 13/ 0.1),
-    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
 
   &[data-state="open"] {

package/darkside/button.darkside.css

@@ -1,4 +1,9 @@
 .navds-button {
+  --__axc-button-icon-size: 1.5rem;
+  --__axc-button-icon-margin: -4px;
+  --__axc-button-border-color: transparent;
+  --__axc-button-border-width: 2px;
+
   padding: var(--ax-spacing-3) var(--ax-spacing-5);
   border-radius: var(--ax-border-radius-medium);
   display: inline-flex;
@@ -9,6 +14,18 @@
   align-items: center;
   justify-content: center;
   gap: var(--ax-spacing-2);
+  box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.navds-button--small,
+.navds-button--xsmall {
+  --__axc-button-icon-margin: -2px;
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--small {
@@ -24,19 +41,14 @@
 
 .navds-button--icon-only {
   padding: var(--ax-spacing-3);
-}
 
-.navds-button--small.navds-button--icon-only {
-  padding: var(--ax-spacing-1);
-}
-
-.navds-button--xsmall.navds-button--icon-only {
-  padding: var(--ax-spacing-05);
-}
+  &.navds-button--small {
+    padding: var(--ax-spacing-1);
+  }
 
-.navds-button:focus-visible {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
+  &.navds-button--xsmall {
+    padding: var(--ax-spacing-05);
+  }
 }
 
 @supports not selector(:focus-visible) {
@@ -46,37 +58,40 @@
 }
 
 .navds-button__icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-button-icon-size);
   display: flex;
 
-  --__axc-button-icon-margin: -4px;
-}
-
-.navds-button__icon:first-child {
-  margin-left: var(--__axc-button-icon-margin);
-}
-
-.navds-button__icon:last-child {
-  margin-right: var(--__axc-button-icon-margin);
-}
-
-:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
-  --__axc-button-icon-margin: -2px;
+  &:first-child {
+    margin-left: var(--__axc-button-icon-margin);
+  }
 
-  font-size: 1.25rem;
-}
+  &:last-child {
+    margin-right: var(--__axc-button-icon-margin);
+  }
 
-.navds-button__icon:only-child {
-  margin: 0;
+  &:only-child {
+    margin: 0;
+  }
 }
 
 /*************************
  * .navds-button--primary *
  *************************/
-
 .navds-button--primary {
   background-color: var(--ax-bg-accent-strong);
   color: var(--ax-text-accent-contrast);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-strong-hover);
+  }
+
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-accent-strong);
+  }
 }
 
 @media (forced-colors: active) {
@@ -90,180 +105,152 @@
   }
 }
 
-.navds-button--primary:hover {
-  background-color: var(--ax-bg-accent-strong-hover);
-}
-
-.navds-button--primary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
-
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-accent-strong);
-}
-
 /*************************
  * .navds-button--primary-neutral *
  *************************/
-
 .navds-button--primary-neutral {
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
-}
 
-.navds-button--primary-neutral:hover {
-  background-color: var(--ax-bg-neutral-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-strong-hover);
+  }
 
-.navds-button--primary-neutral:active {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
 
-.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-neutral-strong);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-neutral-strong);
+  }
 }
 
 /**************************
 * .navds-button--secondary *
  **************************/
-
 .navds-button--secondary {
+  --__axc-button-border-color: var(--ax-border-accent);
+
   background-color: transparent;
   color: var(--ax-text-accent);
-  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
-}
 
-.navds-button--secondary:hover {
-  background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-text-accent-strong);
-  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
 
-.navds-button--secondary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-  box-shadow: none;
-}
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }
 
-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  background-color: transparent;
-  color: var(--ax-text-accent);
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-accent);
+
+    background-color: transparent;
+    color: var(--ax-text-accent);
+  }
 }
 
 /**************************
 * .navds-button--secondary-neutral *
  **************************/
-
 .navds-button--secondary-neutral {
+  --__axc-button-border-color: var(--ax-border-default);
+
   background-color: transparent;
   color: var(--ax-text-neutral);
-  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
-}
 
-.navds-button--secondary-neutral:hover {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
+  &:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
 
-.navds-button--secondary-neutral:active {
-  color: var(--ax-text-neutral-contrast);
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  box-shadow: none;
-}
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    color: var(--ax-text-neutral-strong);
+  }
 
-.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-default);
-  background-color: transparent;
-  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+  &:active {
+    --__axc-button-border-color: transparent;
+
+    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-neutral-strong-pressed);
+  }
+
+  &:is(:disabled, .navds-button--disabled) {
+    --__axc-button-border-color: var(--ax-border-neutral);
+
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
 }
 
 /****************************
  * .navds-button--tertiary *
  ****************************/
-
 .navds-button--tertiary {
   background-color: transparent;
   color: var(--ax-text-accent);
-}
 
-.navds-button--tertiary:hover {
-  background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent-strong);
-}
-
-.navds-button--tertiary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-}
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-accent-strong);
+  }
 
-.navds-button--tertiary:active:hover {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+  }
 
-.navds-button--tertiary:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-accent);
-  background: none;
-  box-shadow: none;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-accent);
+    background-color: transparent;
+  }
 }
 
 /****************************
  * .navds-button--tertiary-neutral *
  ****************************/
-
 .navds-button--tertiary-neutral {
+  background-color: transparent;
   color: var(--ax-text-neutral);
-}
 
-.navds-button--tertiary-neutral:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
-
-.navds-button--tertiary-neutral:active {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    color: var(--ax-text-neutral-strong);
+  }
 
-.navds-button--tertiary-neutral:active:hover {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+  }
 
-.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ax-text-default);
-  background: none;
-  box-shadow: none;
+  &:is(:disabled, .navds-button--disabled) {
+    color: var(--ax-text-default);
+    background-color: transparent;
+  }
 }
 
 /*************************
  * .navds-button--danger *
  *************************/
-
 .navds-button--danger {
   background-color: var(--ax-bg-danger-strong);
   color: var(--ax-text-danger-contrast);
-}
 
-.navds-button--danger:hover {
-  background-color: var(--ax-bg-danger-strong-hover);
-}
+  &:hover {
+    background-color: var(--ax-bg-danger-strong-hover);
+  }
 
-.navds-button--danger:active {
-  background-color: var(--ax-bg-danger-strong-pressed);
-}
+  &:active {
+    background-color: var(--ax-bg-danger-strong-pressed);
+  }
 
-.navds-button--danger:active:where(:disabled, .navds-button--disabled),
-.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ax-bg-danger-strong);
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-danger-strong);
+  }
 }
 
 /**************************

package/darkside/expansioncard.darkside.css

@@ -1,7 +1,7 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-5);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
@@ -16,7 +16,6 @@
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
   --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
@@ -31,10 +30,6 @@
     min-height: 2rem;
     min-width: 2rem;
   }
-
-  & .navds-expansioncard__content {
-    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
-  }
 }
 
 /* -------------------------- ExpansionCard Header -------------------------- */
@@ -144,8 +139,6 @@
 
 /* -------------------------- ExpansionCard Content ------------------------- */
 .navds-expansioncard__content {
-  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
-
   border-end-end-radius: var(--__axc-expansioncard-border-radius);
   border-end-start-radius: var(--__axc-expansioncard-border-radius);
   padding-inline: var(--__axc-expansioncard-padding-inline);
@@ -161,7 +154,7 @@
   &[data-open="true"] {
     grid-template-rows: 1fr;
     visibility: visible;
-    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+    padding-block: var(--__axc-expansioncard-padding-block);
 
     & .navds-expansioncard__content-inner {
       opacity: 1;

package/darkside/form/combobox.darkside.css

@@ -120,7 +120,6 @@
   & .navds-combobox__wrapper-inner {
     border-color: var(--ax-border-danger);
     box-shadow: 0 0 0 1px var(--ax-border-danger);
-    outline-offset: 3px;
 
     &:has(.navds-combobox__input:focus-visible) {
       border-color: var(--ax-border-danger);
@@ -129,7 +128,7 @@
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__axc-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
 
   & > li {
@@ -141,6 +140,10 @@
     display: flex;
     flex: 1;
   }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }
 
 .navds-combobox__selected-options--no-bg {
@@ -162,7 +165,6 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--ax-spacing-1);
   min-width: 10ch;
   width: 100%;
   height: var(--__axc-combobox-input-height);
@@ -172,6 +174,10 @@
     outline: 0;
     border: none;
   }
+
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
+  }
 }
 
 .navds-combobox__input--hide-caret {
@@ -248,17 +254,14 @@
   right: 0;
   z-index: 10;
   top: calc(100% + var(--ax-spacing-2));
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
   border-radius: var(--ax-border-radius-large);
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-default);
   overscroll-behavior: contain;
-  box-shadow:
-    0 0 1px 0 rgb(7 9 13 / 0.02),
-    0 2px 5px 0 rgb(7 9 13 / 0.1),
-    0 10px 16px 0 rgb(7 9 13 / 0.12);
+  box-shadow: var(--ax-shadow-dialog);
 
   & .navds-combobox__list-options {
     overflow-y: auto;
@@ -269,18 +272,6 @@
   display: none;
 }
 
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-
-  &:hover {
-    cursor: default;
-  }
-}
-
 .navds-combobox__list-item,
 .navds-combobox__list-item--loading,
 .navds-combobox__list-item--no-options,
@@ -295,6 +286,7 @@
   border: 0;
   margin-inline: var(--ax-spacing-2);
   margin-block: var(--ax-spacing-1);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
 }
 
 .navds-combobox__list-item--no-options {

package/darkside/form/file-upload.darkside.css

@@ -1,12 +1,3 @@
-/* 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 -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
@@ -154,6 +145,14 @@
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
   border: 1px solid var(--ax-border-subtleA);
@@ -176,6 +175,7 @@
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
+  margin-top: var(--ax-spacing-05);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);

package/darkside/form/form-summary.darkside.css

@@ -75,6 +75,7 @@
   padding: var(--ax-spacing-4);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info-subtleA);
 
   & .navds-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);

package/darkside/form/index.css

@@ -1,16 +1,14 @@
-@layer aksel.forms.base, aksel.forms.component;
-
-@import "./fieldset.darkside.css" layer(aksel.forms.base);
-@import "./file-upload.darkside.css" layer(aksel.forms.component);
-@import "./form.darkside.css" layer(aksel.forms.component);
-@import "./error-summary.darkside.css" layer(aksel.forms.component);
-@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
-@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
-@import "./select.darkside.css" layer(aksel.forms.component);
-@import "./switch.darkside.css" layer(aksel.forms.component);
-@import "./text-field.darkside.css" layer(aksel.forms.component);
-@import "./textarea.darkside.css" layer(aksel.forms.component);
-@import "./search.darkside.css" layer(aksel.forms.component);
-@import "./combobox.darkside.css" layer(aksel.forms.component);
-@import "./form-summary.darkside.css" layer(aksel.forms.component);
-@import "./form-progress.darkside.css" layer(aksel.forms.component);
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";