[Darkside] Quality assurance P8 (#3536)

* 💄 Update background Header * 💄 Update popover padding for smaller screens * 💄 Adjusted borders * 💄 Uses Alpha-tokens for zebra-stripes in Table * 💄 Stronger border for hovered timeline items, transparent track bg * 💄 Transparent lines for Tabs to contrast colored bg * 💄 New icons for Table-sorting * 💄 Selected exoanded item now has accent colors * 💄 Keeps border-color for active state in search-button * 💄 Removed hover-color change on checked radio * 💄 Only non-responsive or left-static guidepanels shrink on tablet or below * 📝 Changeset
navikt · Feb 5, 2025 · 8f9f313 · 8f9f313
1 parent 1c31997
commit 8f9f313
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 41 deletions.
diff --git a/.changeset/olive-buttons-train.md b/.changeset/olive-buttons-train.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Table: Updated sorting icons for ascending and descending.
diff --git a/@navikt/core/css/darkside/action-menu.darkside.css b/@navikt/core/css/darkside/action-menu.darkside.css
@@ -94,7 +94,7 @@
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-moderate-pressed);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   &:focus {

diff --git a/@navikt/core/css/darkside/form/radio-checkbox.darkside.css b/@navikt/core/css/darkside/form/radio-checkbox.darkside.css
@@ -156,7 +156,7 @@
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
   color: var(--ax-text-accent);
 }
 

diff --git a/@navikt/core/css/darkside/form/search.darkside.css b/@navikt/core/css/darkside/form/search.darkside.css
@@ -112,10 +112,6 @@
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
-
-  &:active:not(:disabled) {
-    --__axc-button-border-color: transparent;
-  }
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */

diff --git a/@navikt/core/css/darkside/guide-panel.darkside.css b/@navikt/core/css/darkside/guide-panel.darkside.css
@@ -1,5 +1,5 @@
 .navds-guide-panel {
-  --__axc-guide-panel-guide-size: 3.75rem;
+  --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
   display: flex;
@@ -16,8 +16,12 @@
     align-items: flex-start;
   }
 
+  &[data-poster="false"][data-responsive="false"] {
+    --__axc-guide-panel-guide-size: 3.75rem;
+  }
+
   @media (min-width: 480px) {
-    & {
+    &[data-poster="false"][data-responsive="false"] {
       --__axc-guide-panel-guide-size: 5rem;
     }
 

diff --git a/@navikt/core/css/darkside/help-text.darkside.css b/@navikt/core/css/darkside/help-text.darkside.css
@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ax-bg-accent-strong);
+  color: var(--ax-bg-info-strong);
   font-size: 1.25rem;
   padding: calc(var(--ax-space-4) / 2);
 }
@@ -33,11 +33,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-bg-info-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {

diff --git a/@navikt/core/css/darkside/internalheader.darkside.css b/@navikt/core/css/darkside/internalheader.darkside.css
@@ -36,7 +36,7 @@
   }
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-moderate-hoverA);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -69,7 +69,7 @@
   color: var(--ax-text-default);
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-moderate-hoverA);
   }
 }
 
@@ -91,7 +91,7 @@
   }
 
   &:active {
-    background: var(--ax-bg-moderate-pressed);
+    background: var(--ax-bg-moderate-pressedA);
   }
 }
 

diff --git a/@navikt/core/css/darkside/popover.darkside.css b/@navikt/core/css/darkside/popover.darkside.css
@@ -10,7 +10,13 @@
 }
 
 .navds-popover__content {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16);
+}
+
+@media (min-width: 480px) {
+  .navds-popover__content {
+    padding: var(--ax-space-20);
+  }
 }
 
 .navds-popover--hidden {

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
@@ -35,7 +35,6 @@
 
     &:hover {
       background-color: var(--ax-bg-hoverA);
-      color: var(--ax-text-accent-strong);
     }
   }
 }

diff --git a/@navikt/core/css/darkside/table.darkside.css b/@navikt/core/css/darkside/table.darkside.css
@@ -26,28 +26,36 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent-soft);
+  background-color: var(--ax-bg-accent-softA);
+
+  & + .navds-table__expanded-row {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table--zebra-stripes {
   & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-    background-color: var(--ax-bg-soft);
+    background-color: var(--ax-bg-softA);
   }
 
   & .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(--ax-bg-soft);
+  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-softA);
+  }
+
+  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
   padding: var(--ax-space-12) var(--ax-space-8);
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-subtleA);
   text-align: left;
 }
 
@@ -66,11 +74,6 @@
   text-align: center;
 }
 
-: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(--ax-border-strong);
-}
-
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
@@ -85,6 +88,7 @@
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
+/* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
@@ -97,6 +101,11 @@
   padding: 0;
 }
 
+.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+  height: 100%;
+}
+
 .navds-table__header-cell[aria-sort] {
   padding: 0;
 }
@@ -111,7 +120,7 @@
   padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-4);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
@@ -133,7 +142,6 @@
 .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(--ax-bg-accent-moderate);
-  color: var(--ax-text-accent-strong);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -145,7 +153,7 @@
 }
 
 .navds-table__sort-button svg {
-  font-size: 1rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
@@ -225,7 +233,7 @@
 /* -------------------------- 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);
+  border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-table__expanded-row-content {

diff --git a/@navikt/core/css/darkside/tabs.darkside.css b/@navikt/core/css/darkside/tabs.darkside.css
@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px var(--ax-border-subtle);
+  box-shadow: inset 0 -1px var(--ax-border-subtleA);
   width: 100%;
   display: flex;
 }
@@ -53,7 +53,7 @@
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-subtle);
+  --__axc-tabs-line-color: var(--ax-border-subtleA);
 
   box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
   transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);

diff --git a/@navikt/core/css/darkside/timeline.darkside.css b/@navikt/core/css/darkside/timeline.darkside.css
@@ -38,7 +38,7 @@
 
 .navds-timeline__row {
   display: flex;
-  background: var(--ax-bg-soft);
+  background: var(--ax-bg-softA);
   margin: var(--ax-space-16) 0;
   grid-column: 2;
 }
@@ -109,6 +109,7 @@
 
   &.navds-timeline__period--clickable:hover {
     background: var(--ax-bg-success-moderate-hover);
+    border-color: var(--ax-border-success-strong);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
@@ -125,6 +126,7 @@
 
   &.navds-timeline__period--clickable:hover {
     background: var(--ax-bg-warning-moderate-hover);
+    border-color: var(--ax-border-warning-strong);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
@@ -141,6 +143,7 @@
 
   &.navds-timeline__period--clickable:hover {
     background: var(--ax-bg-danger-moderate-hover);
+    border-color: var(--ax-border-danger-strong);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
@@ -157,6 +160,7 @@
 
   &.navds-timeline__period--clickable:hover {
     background: var(--ax-bg-info-moderate-hover);
+    border-color: var(--ax-border-info-strong);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {
@@ -173,6 +177,7 @@
 
   &.navds-timeline__period--clickable:hover {
     background: var(--ax-bg-moderate-hover);
+    border-color: var(--ax-border-strong);
   }
 
   &.navds-timeline__period--clickable.navds-timeline__period--selected {

diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
@@ -110,7 +110,7 @@
   padding: var(--a-spacing-4) var(--a-spacing-3);
   width: 100%;
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--a-spacing-1);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
@@ -152,7 +152,7 @@
 }
 
 .navds-table__sort-button svg {
-  font-size: 1rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 

diff --git a/@navikt/core/react/src/internal-header/InternalHeader.tsx b/@navikt/core/react/src/internal-header/InternalHeader.tsx
@@ -85,7 +85,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
    */
   if (themeContext) {
     return (
-      <Theme theme="dark" asChild>
+      <Theme theme="dark" asChild hasBackground={false}>
         <header
           {...rest}
           ref={ref}

diff --git a/@navikt/core/react/src/table/ColumnHeader.tsx b/@navikt/core/react/src/table/ColumnHeader.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, useContext } from "react";
 import {
-  ArrowDownIcon,
-  ArrowUpIcon,
   ArrowsUpDownIcon,
+  SortDownIcon,
+  SortUpIcon,
 } from "@navikt/aksel-icons";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
@@ -58,9 +58,9 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
             {children}
             {context?.sort?.orderBy === sortKey ? (
               context?.sort?.direction === "descending" ? (
-                <ArrowDownIcon aria-hidden />
+                <SortDownIcon aria-hidden />
               ) : (
-                <ArrowUpIcon aria-hidden />
+                <SortUpIcon aria-hidden />
               )
             ) : (
               <ArrowsUpDownIcon aria-hidden />
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,6 @@ @@
         &:hover {
           background-color: var(--ax-bg-hoverA);
-          color: var(--ax-text-accent-strong);
         }
       }
     }
@@ Expand Down @@