@navikt/ds-css 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 7.8.0
+
+### Minor Changes
+
+- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
+
+### Patch Changes
+
+- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
+
 ## 7.7.0
 
 ## 7.6.0

package/darkside/form/combobox.darkside.css

@@ -69,7 +69,6 @@
   }
 }
 
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__axc-combobox-icon-size);
@@ -203,19 +202,6 @@
   }
 }
 
-.navds-combobox__button-clear {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-subtle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
-
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -231,10 +217,7 @@
   border: none;
   font-size: 1rem;
   padding: 0;
-}
 
-.navds-combobox__button-clear,
-.navds-combobox__button-toggle-list {
   &:hover {
     color: var(--ax-text-accent);
 
@@ -405,10 +388,6 @@
 }
 
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }

package/darkside/form/search.darkside.css

@@ -105,6 +105,10 @@
   --__axc-button-border-width: 1px;
   --__axc-button-border-color: var(--ax-border-default);
 
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
+  }
+
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }

package/darkside/guide-panel.darkside.css

@@ -1,20 +1,41 @@
 .navds-guide-panel {
-  --__ac-guide-panel-guide-size: 4rem;
+  --__axc-guide-panel-guide-size: 3.75rem;
 
   position: relative;
-  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+  display: flex;
+  width: fit-content;
+
+  &[data-poster="true"],
+  &[data-responsive="true"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &[data-poster="false"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @media (min-width: 480px) {
+    & {
+      --__axc-guide-panel-guide-size: 5rem;
+    }
+
+    &[data-responsive="true"] {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
 }
 
 .navds-guide {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-full);
+  box-sizing: border-box;
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  position: absolute;
-  width: var(--__ac-guide-panel-guide-size);
-  height: var(--__ac-guide-panel-guide-size);
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: var(--__axc-guide-panel-guide-size);
+  height: var(--__axc-guide-panel-guide-size);
+  flex-shrink: 0;
 }
 
 .navds-guide svg,
@@ -24,73 +45,70 @@
 }
 
 .navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-4);
-  padding-top: var(--a-spacing-12);
-}
+  background-color: var(--ax-bg-raised);
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-xlarge);
+  position: relative;
 
-@media (min-width: 480px) {
-  .navds-guide-panel {
-    --__ac-guide-panel-guide-size: 6.25rem;
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+    margin-top: var(--ax-spacing-5);
   }
 
-  .navds-guide-panel__content {
-    padding: var(--a-spacing-8);
-    padding-top: 4.25rem;
+  .navds-guide-panel[data-poster="false"] > & {
+    margin-left: var(--ax-spacing-5);
   }
-}
 
-/* not-poster */
-
-.navds-guide-panel--not-poster {
-  padding-top: 0;
-  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide-panel--not-poster .navds-guide {
-  left: 0;
-  top: var(--a-spacing-5);
-  transform: none;
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] > & {
+      margin-top: 0;
+      margin-left: var(--ax-spacing-5);
+    }
+  }
 }
 
-.navds-guide-panel--not-poster .navds-guide-panel__content {
-  padding: var(--a-spacing-4);
-  padding-left: var(--a-spacing-10);
-  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-}
+.navds-guide-panel__content-inner {
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  position: relative;
+  height: 100%;
 
-@media (min-width: 480px) {
-  .navds-guide-panel--not-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+  .navds-guide-panel[data-poster="false"] & {
+    min-height: var(--__axc-guide-panel-guide-size);
   }
 
-  .navds-guide-panel--not-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
+  @media (min-width: 480px) {
+    & {
+      padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    }
+
+    .navds-guide-panel[data-responsive="true"] & {
+      min-height: var(--__axc-guide-panel-guide-size);
+    }
   }
 }
 
-/* responsive-poster (on desktop) */
-
-@media (min-width: 480px) {
-  .navds-guide-panel--responsive-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+.navds-guide-panel__tail {
+  position: absolute;
+  z-index: 0;
 
-    padding-top: 0;
-    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+    left: 50%;
+    top: calc(var(--ax-spacing-4) * -1 - 2px);
+    transform: translateX(-48%);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide {
-    left: 0;
-    top: var(--a-spacing-5);
-    transform: none;
+  .navds-guide-panel[data-poster="false"] & {
+    top: calc(var(--__axc-guide-panel-guide-size) / 2);
+    left: calc(var(--ax-spacing-5) * -1 - 2px);
+    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] & {
+      top: calc(var(--__axc-guide-panel-guide-size) / 2);
+      left: calc(var(--ax-spacing-5) * -1 - 2px);
+      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+    }
   }
 }

package/darkside/table.darkside.css

@@ -10,43 +10,44 @@
 
 .navds-table__body {
   display: table-row-group;
+
+  & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
+    background-color: var(--ax-bg-neutral-hoverA);
+    transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+  }
 }
 
 .navds-table__row {
   display: table-row;
 }
 
-.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-  background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
-}
-
 .navds-table__row--selected {
-  background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
-}
-
-.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-  background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
+  background-color: var(--ax-bg-accent);
 }
 
-.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
-}
+.navds-table--zebra-stripes {
+  & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
+    background-color: var(--ax-bg-neutral);
+  }
 
-.navds-table--zebra-stripes
-  .navds-table__body
-  :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
-  background-color: transparent;
+  & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
+    background-color: transparent;
+  }
 }
 
 .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
+  background-color: var(--ax-bg-neutral);
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
-  padding: var(--a-spacing-3) var(--a-spacing-2);
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+  padding: var(--ax-spacing-3) var(--ax-spacing-2);
+  border-bottom: 1px solid var(--ax-border-default);
   text-align: left;
 }
 
@@ -67,7 +68,7 @@
 
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
 :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
+  border-color: var(--ax-border-strong);
 }
 
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
@@ -76,12 +77,12 @@
 
 .navds-table--large .navds-table__header-cell,
 .navds-table--large .navds-table__data-cell {
-  padding: var(--a-spacing-4) var(--a-spacing-2);
+  padding: var(--ax-spacing-4) var(--ax-spacing-2);
 }
 
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-spacing-1) var(--ax-spacing-2);
 }
 
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
@@ -103,43 +104,36 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--ac-table-sort-button-text, var(--a-text-action));
+  color: var(--ax-text-accent);
   border: none;
   cursor: pointer;
   margin: 0;
-  padding: var(--a-spacing-4) var(--a-spacing-3);
+  padding: var(--ax-spacing-4) var(--ax-spacing-3);
   width: 100%;
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
 }
 
 .navds-table--small .navds-table__sort-button {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
+  padding: var(--ax-spacing-2) var(--ax-spacing-3);
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
+  background-color: var(--ax-bg-neutral-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__sort-button:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -4px;
 }
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
-  color: var(--ac-table-sort-button-sorted-text, var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle)));
+  background-color: var(--ax-bg-accent-moderate);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -156,7 +150,7 @@
 }
 
 .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
-  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  transition: border-bottom-color 150ms cubic-bezier(0.95, 0.05, 0.8, 0.04);
 }
 
 .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
@@ -168,7 +162,7 @@
 }
 
 .navds-table__expandable-row--open .navds-table__header-cell {
-  border-color: var(--ac-table-row-border, var(--a-border-default));
+  border-color: var(--ax-border-default);
 }
 
 .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
@@ -181,11 +175,11 @@
 }
 
 .navds-table--large .navds-table__toggle-expand-cell {
-  padding: 0 var(--a-spacing-2);
+  padding: 0 var(--ax-spacing-2);
 }
 
 .navds-table--small .navds-table__toggle-expand-cell {
-  padding: var(--a-spacing-1) var(--a-spacing-2);
+  padding: var(--ax-spacing-1) var(--ax-spacing-2);
 }
 
 .navds-table__toggle-expand-button {
@@ -194,93 +188,54 @@
   cursor: pointer;
   background: transparent;
   border: none;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   height: 2rem;
   width: 2rem;
   font-size: 1.5rem;
   margin: 0 auto;
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 .navds-table__expandable-icon {
-  transition: transform 150ms ease-in-out;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-table__toggle-expand-cell:hover {
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
   cursor: pointer;
 }
 
 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--a-surface-hover);
+  background-color: var(--ax-bg-neutral-hoverA);
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
-  transform: translateY(0) rotate(180deg);
-}
-
-.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(1px);
-}
-
-.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
-  transform: translateY(-1px) rotate(180deg);
+  transform: rotateX(180deg);
 }
 
 .navds-table__toggle-expand-button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-table__toggle-expand-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
+  outline: 2px solid var(--ax-border-focus);
 }
 
 .navds-table__expanded-row-cell {
   padding: 0;
-}
 
-.navds-table__expanded-row-cell:empty {
-  display: none;
+  &:empty {
+    display: none;
+  }
 }
 
-.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
-  border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
+/* -------------------------- Table ExpandableRow -------------------------- */
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
+.navds-table__expanded-row-collapse[style*="transition:"] {
+  border-bottom: 1px solid var(--ax-border-default);
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
-}
-
-@media (forced-colors: active) {
-  .navds-date.navds-date button.rdp-day_selected {
-    forced-color-adjust: none;
-    background-color: highlight;
-    color: highlighttext;
-    box-shadow: none;
-  }
-
-  .navds-date.navds-date button {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: none;
-    box-shadow: none;
-  }
-
-  .navds-date button:focus-visible {
-    color: buttontext;
-    forced-color-adjust: none;
-    outline: 2px solid highlight;
-  }
-
-  .navds-date.navds-date button.rdp-day_disabled {
-    color: GrayText;
-  }
+  padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
 }

package/dist/component/form.css

@@ -1475,7 +1475,6 @@ li.navds-file-item {
   background-color: var(--a-surface-subtle);
   border-color: var(--a-border-subtle);
 }
-.navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
   width: var(--__ac-combobox-icon-size);
@@ -1599,18 +1598,6 @@ li.navds-file-item {
     outline: none;
   }
 }
-.navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  padding: 0;
-}
 .navds-combobox__input::-webkit-search-cancel-button {
   display: none;
 }
@@ -1626,13 +1613,11 @@ li.navds-file-item {
   font-size: 1rem;
   padding: 0;
 }
-.navds-combobox__button-clear:active:hover,
 .navds-combobox__button-toggle-list:active:hover {
-  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+  color: var(--a-text-action);
 }
-.navds-combobox__button-clear:hover,
 .navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+  color: var(--a-text-action-selected);
 }
 .navds-combobox__button-toggle-list:focus-visible {
   box-shadow:
@@ -1781,10 +1766,6 @@ li.navds-file-item {
   }
 }
 @media (forced-colors: active) {
-  .navds-combobox__button-clear:hover {
-    color: highlight;
-  }
-
   .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
     outline-color: highlight;
   }