@navikt/ds-css 7.5.3 → 7.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @navikt/ds-css
 
+## 7.7.0
+
+## 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/alert.darkside.css

@@ -1,7 +1,7 @@
 .navds-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   display: flex;
   gap: var(--ax-spacing-3);
   align-items: center;
@@ -25,7 +25,7 @@
 }
 
 .navds-alert--small {
-  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   gap: var(--ax-spacing-2);
 
   > .navds-alert__icon {

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,224 +58,197 @@
 }
 
 .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);
-}
 
-@media (forced-colors: active) {
-  .navds-button.navds-button--primary {
-    background-color: highlight;
-    color: highlighttext;
+  &:hover {
+    background-color: var(--ax-bg-accent-strong-hover);
   }
 
-  .navds-button.navds-button--primary span {
-    forced-color-adjust: none;
+  &:active {
+    background-color: var(--ax-bg-accent-strong-pressed);
   }
-}
 
-.navds-button--primary:hover {
-  background-color: var(--ax-bg-accent-strong-hover);
-}
+  &:is(:disabled, .navds-button--disabled) {
+    background-color: var(--ax-bg-accent-strong);
+  }
 
-.navds-button--primary:active {
-  background-color: var(--ax-bg-accent-strong-pressed);
-}
+  @media (forced-colors: active) {
+    &:not(:disabled) {
+      background-color: highlight;
+      color: highlighttext;
+    }
 
-.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);
+    & span {
+      forced-color-adjust: none;
+    }
+  }
 }
 
 /*************************
  * .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);
-}
+  color: var(--ax-text-default);
 
-.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);
+  }
 
-.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 {
-  color: var(--ax-text-neutral);
-}
-
-.navds-button--tertiary-neutral:hover {
-  background-color: var(--ax-bg-neutral-hoverA);
-  color: var(--ax-text-neutral-strong);
-}
+  background-color: transparent;
+  color: var(--ax-text-default);
 
-.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);
+  }
 
-.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);
+  }
 }
 
 /**************************
@@ -300,14 +285,14 @@
     background-color: ButtonFace;
   }
 
-  .navds-button:hover {
+  .navds-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:hover span {
+  .navds-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 

package/darkside/chat.darkside.css

@@ -54,7 +54,7 @@
 }
 
 .navds-chat__bubble {
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
@@ -66,7 +66,7 @@
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */