feat(pagination): add component tokens

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,111 @@ 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-spacing": {
+          shadowSelector: `.${CSS.list}`,
+          targetProp: "columnGap",
+        },
+        "--calcite-pagination-size": [
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "minInlineSize",
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "minInlineSize",
+          },
+          {
+            shadowSelector: `.${CSS.ellipsis}`,
+            targetProp: "minInlineSize",
+          },
+        ],
+        "--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-chevron-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-color-background": [
+          {
+            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",
+        },
+      });
+    });
+  });
 });

packages/calcite-components/src/components/pagination/pagination.scss

@@ -1,11 +1,26 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-pagination-size: Specifies the width of each item.
+ * @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-color-background: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-chevron-color-background-hover: Specifies the component's chevron item background color when hovered.
+ */
+
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
 }
 
 .list {
   @apply flex list-none m-0 p-0;
-  column-gap: var(--calcite-spacing-base);
+  column-gap: var(--calcite-pagination-spacing, var(--calcite-spacing-base));
 }
 
 .list-item {
@@ -21,7 +36,7 @@
   & .page,
   & .ellipsis {
     @apply text-n2h h-6 px-1;
-    min-inline-size: theme("width.6");
+    --calcite-internal-pagination-width: theme("width.6");
   }
 }
 
@@ -30,7 +45,7 @@
   & .page,
   & .ellipsis {
     @apply text-n1h h-8 px-2;
-    min-inline-size: theme("width.8");
+    --calcite-internal-pagination-width: theme("width.8");
   }
 }
 
@@ -39,7 +54,7 @@
   & .page,
   & .ellipsis {
     @apply text-0h h-11;
-    min-inline-size: theme("width.11");
+    --calcite-internal-pagination-width: theme("width.11");
   }
 
   & .chevron {
@@ -66,7 +81,6 @@
   @apply p-0
     m-0
     text-0h
-    text-color-3
     font-inherit
     box-border
     flex
@@ -76,6 +90,9 @@
     justify-center
     align-baseline
     bg-transparent;
+
+  min-inline-size: var(--calcite-pagination-size, var(--calcite-internal-pagination-width));
+  color: var(--calcite-pagination-color, var(--calcite-color-text-3));
 }
 
 .chevron,
@@ -84,19 +101,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-color-background, 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 +132,10 @@
 
 .chevron {
   &:hover {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-pagination-chevron-color-background-hover, var(--calcite-color-foreground-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-pagination-color-background, var(--calcite-color-foreground-3));
   }
   &.disabled {
     @apply pointer-events-none bg-transparent;

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";
@@ -170,6 +170,7 @@ const componentTokens = {
   ...navigationTokens,
   ...navigationUserTokens,
   ...noticeTokens,
+  ...paginationTokens,
   ...popoverTokens,
   ...progressTokens,
   ...ratingTokens,

packages/calcite-components/src/custom-theme/pagination.ts

@@ -1,5 +1,16 @@
 import { html } from "../../support/formatting";
 
+export const paginationTokens = {
+  calcitePaginationSpacing: "",
+  calcitePaginationSize: "",
+  calcitePaginationColor: "",
+  calcitePaginationColorHover: "",
+  calcitePaginationColorBorderHover: "",
+  calcitePaginationColorBorderActive: "",
+  calcitePaginationColorBackground: "",
+  calcitePaginationChevronColorBackgroundHover: "",
+};
+
 export const pagination = html`<calcite-pagination
   total-items="1200"
   page-size="100"