[Darkside] 🚚 -hover tokens are now soft-hover (#3553)

* 💄 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 * 🚚 -hover tokens are now soft-hover * 🚚 Referansesider uses new soft-hover token
navikt · Feb 6, 2025 · 281ac2d · 281ac2d
1 parent 70dd5b5
commit 281ac2d
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 18 deletions.
diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css
@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-soft-hoverA);
 
     &::before,
     &::after {

diff --git a/@navikt/core/css/darkside/expansioncard.darkside.css b/@navikt/core/css/darkside/expansioncard.darkside.css
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-hoverA);
+    background-color: var(--ax-bg-soft-hoverA);
   }
 
   &[data-open="true"] {

diff --git a/@navikt/core/css/darkside/read-more.darkside.css b/@navikt/core/css/darkside/read-more.darkside.css
@@ -34,7 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-hoverA);
+      background-color: var(--ax-bg-soft-hoverA);
     }
   }
 }

diff --git a/@navikt/core/css/darkside/table.darkside.css b/@navikt/core/css/darkside/table.darkside.css
@@ -12,12 +12,12 @@
   display: table-row-group;
 
   & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-    background-color: var(--ax-bg-hoverA);
+    background-color: var(--ax-bg-soft-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);
+    background-color: var(--ax-bg-accent-soft-hoverA);
   }
 }
 
@@ -131,7 +131,7 @@
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ax-bg-hoverA);
+  background-color: var(--ax-bg-soft-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
@@ -211,7 +211,7 @@
 .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(--ax-bg-hoverA);
+  background-color: var(--ax-bg-soft-hoverA);
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {

diff --git a/@navikt/core/tokens/darkside/tokens/semantic-roles.ts b/@navikt/core/tokens/darkside/tokens/semantic-roles.ts
@@ -15,12 +15,12 @@ const configForRole = (role: SemanticColorRoles) => {
         type: "color",
         group: `background.${role}`,
       },
-      [`${role}-hover`]: {
+      [`${role}-soft-hover`]: {
         value: `{ax.${role}.200.value}`,
         type: "color",
         group: `background.${role}`,
       },
-      [`${role}-hoverA`]: {
+      [`${role}-soft-hoverA`]: {
         value: `{ax.${role}.200A.value}`,
         type: "color",
         group: `background.${role}`,

diff --git a/@navikt/core/tokens/darkside/tokens/semantic.ts b/@navikt/core/tokens/darkside/tokens/semantic.ts
@@ -83,12 +83,12 @@ export function semanticTokenConfig(theme: ColorTheme) {
         type: "color",
         group: `background`,
       },
-      hover: {
+      "soft-hover": {
         value: `{ax.neutral.200.value}`,
         type: "color",
         group: `background`,
       },
-      hoverA: {
+      "soft-hoverA": {
         value: `{ax.neutral.200A.value}`,
         type: "color",
         group: `background`,
@@ -156,7 +156,7 @@ export function semanticTokenConfig(theme: ColorTheme) {
         group: "border",
       },
       strong: {
-        value: "{ax.neutral.600.value}",
+        value: "{ax.neutral.700.value}",
         type: "color",
         group: "border",
       },

diff --git a/@navikt/core/tokens/types.ts b/@navikt/core/tokens/types.ts
@@ -56,8 +56,8 @@ export type StaticDefaultBgKeys =
   | "strong";
 
 export type StatefulDefaultBgKeys =
-  | "hover"
-  | "hoverA"
+  | "soft-hover"
+  | "soft-hoverA"
   | "moderate-hover"
   | "moderate-hoverA"
   | "moderate-pressed"
@@ -73,8 +73,8 @@ export type StaticBgKeys =
   | `${SemanticColorRoles}-strong`;
 
 export type StatefulBgKeys =
-  | `${SemanticColorRoles}-hover`
-  | `${SemanticColorRoles}-hoverA`
+  | `${SemanticColorRoles}-soft-hover`
+  | `${SemanticColorRoles}-soft-hoverA`
   | `${SemanticColorRoles}-moderate-hover`
   | `${SemanticColorRoles}-moderate-hoverA`
   | `${SemanticColorRoles}-moderate-pressed`

diff --git a/examples/referansesider/src/components/Button.tsx b/examples/referansesider/src/components/Button.tsx
@@ -28,7 +28,7 @@ const ScButton = styled.button`
     box-shadow: inset 0 0 0 2px ${tokens.BorderAccent};
 
     &:hover {
-      background-color: ${tokens.BgAccentHover};
+      background-color: ${tokens.BgAccentSoftHover};
     }
 
     &:active {

diff --git a/examples/referansesider/src/routes/sykepenger.tsx b/examples/referansesider/src/routes/sykepenger.tsx
@@ -248,7 +248,7 @@ let AccordionItem: ReactNode;
   const ScSummary = styled.summary`
     background-color: ${tokens.BgDefault};
     &:hover {
-      background-color: ${tokens.BgAccentHover};
+      background-color: ${tokens.BgAccentSoftHover};
     }
   `;