feat(pagination): add component tokens (#11157)

**Related Issue:** [#7180](#7180) ## Summary Add `pagination` component tokens. `--calcite-pagination-spacing`: Specifies the amount of left and right margin spacing between each item. `--calcite-pagination-size`: Specifies the width of each item. `--calcite-pagination-color`: Specifies the component's item color. `--calcite-pagination-color-hover`: Specifies the component's item color when hovered or selected. `--calcite-pagination-color-border-hover`: Specifies the component's item bottom border color when hovered. `--calcite-pagination-color-border-active`: Specifies the component's item bottom border color when selected. `--calcite-pagination-background-color`: Specifies the component's item background color when active. `--calcite-pagination-icon-color-background-hover`: Specifies the component's chevron item background color when hovered.
Esri · Jan 13, 2025 · f3973c8 · f3973c8
1 parent 79841db
commit f3973c8
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 9 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -2,7 +2,7 @@
 import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
 import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-pagination", () => {
@@ -366,4 +366,93 @@ describe("calcite-pagination", () => {
       expect(hiddenChevrons.length).toBe(0);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color": [
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.ellipsis}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("hover", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": [
+          {
+            shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        ],
+        "--calcite-pagination-color-border-hover": {
+          shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+          targetProp: "borderBlockEndColor",
+          state: "hover",
+        },
+        "--calcite-pagination-icon-color-background-hover": {
+          shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+      });
+    });
+    describe("active", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": [
+          {
+            shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+            targetProp: "color",
+            state: { press: { attribute: "class", value: `${CSS.chevron}` } },
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+            state: { press: { attribute: "class", value: `${CSS.page}` } },
+          },
+        ],
+        "--calcite-pagination-background-color": [
+          {
+            shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: `${CSS.page}` } },
+          },
+          {
+            shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: `${CSS.chevron}` } },
+          },
+        ],
+      });
+    });
+    describe("selected", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": {
+          shadowSelector: `.${CSS.page}`,
+          targetProp: "color",
+          state: "focus",
+        },
+        "--calcite-pagination-color-border-active": {
+          shadowSelector: `.${CSS.page}`,
+          targetProp: "borderBlockEndColor",
+          state: "focus",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -1,3 +1,16 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-pagination-color: Specifies the component's item color.
+ * @prop --calcite-pagination-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-color-border-hover: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-color-border-active: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-background-color: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-icon-color-background-hover: Specifies the component's chevron item background color when hovered.
+ */
+
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
@@ -66,7 +79,6 @@
   @apply p-0
     m-0
     text-0h
-    text-color-3
     font-inherit
     box-border
     flex
@@ -76,6 +88,8 @@
     justify-center
     align-baseline
     bg-transparent;
+
+  color: var(--calcite-pagination-color, var(--calcite-color-text-3));
 }
 
 .chevron,
@@ -84,19 +98,27 @@
   border-block: 2px solid transparent;
 
   &:hover {
-    @apply text-color-1 transition-default;
+    @apply transition-default;
+
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
+  }
+  &:active {
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
   }
 }
 
 .page {
   &:hover {
-    @apply border-b-color-2;
+    border-block-end-color: var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3));
   }
   &.selected {
-    @apply text-color-1 border-b-color-brand font-medium;
+    @apply font-medium;
+
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
+    border-block-end-color: var(--calcite-pagination-color-border-active, var(--calcite-color-brand));
 
     &:focus {
       border-block-end-width: var(--calcite-spacing-xxs);
@@ -107,10 +129,10 @@
 
 .chevron {
   &:hover {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3));
   }
   &.disabled {
     @apply pointer-events-none bg-transparent;

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -34,7 +34,7 @@ import { link, linkTokens } from "./custom-theme/link";
 import { list, listTokens } from "./custom-theme/list";
 import { loader, loaderTokens } from "./custom-theme/loader";
 import { notice, noticeTokens } from "./custom-theme/notice";
-import { pagination } from "./custom-theme/pagination";
+import { pagination, paginationTokens } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
@@ -171,6 +171,7 @@ const componentTokens = {
   ...navigationTokens,
   ...navigationUserTokens,
   ...noticeTokens,
+  ...paginationTokens,
   ...popoverTokens,
   ...progressTokens,
   ...ratingTokens,

diff --git a/packages/calcite-components/src/custom-theme/pagination.ts b/packages/calcite-components/src/custom-theme/pagination.ts
@@ -1,5 +1,14 @@
 import { html } from "../../support/formatting";
 
+export const paginationTokens = {
+  calcitePaginationColor: "",
+  calcitePaginationColorHover: "",
+  calcitePaginationColorBorderHover: "",
+  calcitePaginationColorBorderActive: "",
+  calcitePaginationBackgroundColor: "",
+  calcitePaginationIconColorBackgroundHover: "",
+};
+
 export const pagination = html`<calcite-pagination
   total-items="1200"
   page-size="100"