diff --git a/.changeset/olive-buttons-train.md b/.changeset/olive-buttons-train.md new file mode 100644 index 0000000000..b64b171f71 --- /dev/null +++ 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 index 0ab816972c..d0e12438cb 100644 --- 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 index f5a531b6ec..23649be0cc 100644 --- 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 index 2bb9dc90fe..97b1b0ea92 100644 --- 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 index f693fcc62d..08c30fb689 100644 --- 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 index 7d2e0ed9f3..04262c941d 100644 --- 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 index 3ea5184fa1..c861b39476 100644 --- 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 index 3dd7b4a5f5..e1bae4bdaa 100644 --- 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 index 5c522bf07c..7cccaa6568 100644 --- 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 index 1783650c63..e1bf1c6909 100644 --- 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 index b4a1a3db5e..71e5d282b2 100644 --- 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 index d38b4a54c4..db8d9f7976 100644 --- 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 index f439d145ef..f450dea37a 100644 --- 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 index 654f7b5166..f0b691fdb7 100644 --- 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 ( - +
+ ) : ( - + ) ) : (