[Darkside] Pagination CSS update (#3367)

* :refactor: Added darkmode support for modal * 💫 Reduced animation travel-distance * 💄 Add border subtleA to modal * 💄 Adjusted button to figma design * 🎉 Added darkmode support to pagination * 💥 reverted modal css changes * 🐛 Flex-inline broke baseline when using icon inside button
navikt · Nov 15, 2024 · 57356ea · 57356ea
1 parent 41ae4a4
commit 57356ea
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 70 deletions.
diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css
@@ -35,13 +35,13 @@
 }
 
 .navds-button:focus-visible {
-  outline: 4px solid var(--ax-border-focus);
+  outline: 2px solid var(--ax-border-focus);
   outline-offset: 2px;
 }
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 4px solid var(--ax-border-focus);
+    outline: 2px solid var(--ax-border-focus);
   }
 }
 
@@ -137,7 +137,7 @@
 
 .navds-button--secondary:hover {
   background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-text-accent-strong);
   box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
 }
 
@@ -159,12 +159,13 @@
 
 .navds-button--secondary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
 }
 
 .navds-button--secondary-neutral:hover {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--secondary-neutral:active {
@@ -191,7 +192,7 @@
 
 .navds-button--tertiary:hover {
   background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-button--tertiary:active {
@@ -217,11 +218,12 @@
  ****************************/
 
 .navds-button--tertiary-neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-button--tertiary-neutral:hover {
   background-color: var(--ax-bg-neutral-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--tertiary-neutral:active {

diff --git a/@navikt/core/css/darkside/pagination.darkside.css b/@navikt/core/css/darkside/pagination.darkside.css
@@ -7,65 +7,33 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
+
+  & li {
+    list-style: none;
+    display: flex;
+  }
 }
 
 .navds-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--a-spacing-12);
+  width: 3rem;
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--a-spacing-8);
+  width: 2rem;
 }
 
 .navds-pagination--xsmall .navds-pagination__ellipsis {
-  width: var(--a-spacing-6);
-}
-
-.navds-pagination__item {
-  color: var(--ac-pagination-text, var(--a-text-default));
-}
-
-.navds-pagination--medium .navds-pagination__item {
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-pagination__item[aria-current="true"] {
-  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
-}
-
-.navds-pagination__item[aria-current="true"]:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-pagination__item[aria-current="true"]:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-pagination__prev-next {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-inline: var(--a-spacing-1-alt);
+  width: 1.5rem;
 }
 
-.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: var(--a-spacing-05);
-  padding-right: var(--a-spacing-05);
+.navds-pagination__item[data-selected="true"] {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 }
 
 .navds-pagination--invisible {

diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx
@@ -112,6 +112,12 @@ export const getSteps = ({
   ];
 };
 
+/**
+ * TODO: These classes can be removed in darkside update
+ * - navds-pagination--prev-next--with-text
+ * - navds-pagination__prev-next
+ */
+
 /**
  * A component that displays pagination controls.
  *

diff --git a/@navikt/core/react/src/pagination/PaginationItem.tsx b/@navikt/core/react/src/pagination/PaginationItem.tsx
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -39,11 +40,14 @@ export const Item: PaginationItemType = forwardRef(
     },
     ref,
   ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <Button
         as={Component}
-        variant="tertiary"
+        variant={themeContext ? "tertiary-neutral" : "tertiary"}
         aria-current={selected}
+        data-selected={selected}
         ref={ref}
         className={cl("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,

diff --git a/yarn.lock b/yarn.lock
@@ -3711,7 +3711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@npm:^7.4.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@npm:^7.5.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3742,8 +3742,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": "npm:^7.4.3"
-    "@navikt/ds-tokens": "npm:^7.4.3"
+    "@navikt/ds-css": "npm:^7.5.1"
+    "@navikt/ds-tokens": "npm:^7.5.1"
     concurrently: "npm:9.0.1"
     postcss-selector-parser: "npm:^6.0.13"
     postcss-value-parser: "npm:^4.2.0"
@@ -3758,7 +3758,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": "npm:7.4.3"
+    "@navikt/ds-css": "npm:7.5.1"
     axios: "npm:1.7.4"
     chalk: "npm:4.1.0"
     clipboardy: "npm:^2.3.0"
@@ -3779,11 +3779,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.4.3, @navikt/ds-css@npm:^7.4.3, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.5.1, @navikt/ds-css@npm:^7.5.1, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": "npm:^7.4.3"
+    "@navikt/ds-tokens": "npm:^7.5.1"
     autoprefixer: "npm:^10.4.20"
     cssnano: "npm:6.0.0"
     fast-glob: "npm:3.2.11"
@@ -3797,14 +3797,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.4.3, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.5.1, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": "npm:0.25.4"
     "@floating-ui/react-dom": "npm:^2.0.9"
-    "@navikt/aksel-icons": "npm:^7.4.3"
-    "@navikt/ds-tokens": "npm:^7.4.3"
+    "@navikt/aksel-icons": "npm:^7.5.1"
+    "@navikt/ds-tokens": "npm:^7.5.1"
     "@testing-library/dom": "npm:9.3.4"
     "@testing-library/jest-dom": "npm:^5.16.0"
     "@testing-library/react": "npm:^15.0.7"
@@ -3824,19 +3824,19 @@ __metadata:
     typescript: "npm:5.5.4"
     vitest: "npm:^1.2.2"
   peerDependencies:
-    "@types/react": ^17.0.30 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
+    "@types/react": ">=17.0.30"
+    react: ">=17.0.0"
   peerDependenciesMeta:
     "@types/react":
       optional: true
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@npm:^7.4.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@npm:^7.5.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": "npm:^7.4.3"
+    "@navikt/ds-tokens": "npm:^7.5.1"
     color: "npm:4.2.3"
     lodash: "npm:^4.17.21"
     tailwindcss: "npm:^3.3.3"
@@ -3846,7 +3846,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@npm:^7.4.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@npm:^7.5.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7729,11 +7729,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": "npm:^7.4.3"
-    "@navikt/ds-css": "npm:^7.4.3"
-    "@navikt/ds-react": "npm:^7.4.3"
-    "@navikt/ds-tailwind": "npm:^7.4.3"
-    "@navikt/ds-tokens": "npm:^7.4.3"
+    "@navikt/aksel-icons": "npm:^7.5.1"
+    "@navikt/ds-css": "npm:^7.5.1"
+    "@navikt/ds-react": "npm:^7.5.1"
+    "@navikt/ds-tailwind": "npm:^7.5.1"
+    "@navikt/ds-tokens": "npm:^7.5.1"
   languageName: unknown
   linkType: soft