feat(pagination): Add component tokens (#8777)

**Related Issue:** #7180 ## Summary `--calcite-pagination-background-color-active:` Specifies the background color of the pagination items while active. `--calcite-pagination-background-color-hover:` Specifies the background color of the pagination items while hovered. `--calcite-pagination-background-color`: Specifies the background color of the pagination items. `--calcite-pagination-border-color-hover:` Specifies the border color the pagination items while hovered. `--calcite-pagination-border-color-selected:` Specifies the border color of the pagination items when selected. `--calcite-pagination-text-color-hover:` Specifies the text color of the pagination items items while hovered. `--calcite-pagination-text-color-selected:` Specifies the text color of the pagination items when selected. `--calcite-pagination-text-color: Specifies` the text color of the pagination items. `--calcite-pagination-arrow-background-color-active`: Specifies the background color of the arrow items while active. `--calcite-pagination-arrow-background-color-hover`: Specifies the background color of the arrow items while hovered. `--calcite-pagination-arrow-background-color:` Specifies the background color of the arrow items. `--calcite-pagination-arrow-icon-color-active`: Specifies the icon color of the arrow items while active. `--calcite-pagination-arrow-icon-color-hover`: Specifies the icon color of the arrow items while hovered. `--calcite-pagination-arrow-icon-color:` Specifies the icon color of the arrow items. Adds local demo and Chromatic screenshot test.
Esri · Feb 21, 2024 · 97d77c3 · 97d77c3
1 parent a056b0a
commit 97d77c3
Show file tree

Hide file tree

Showing 3 changed files with 411 additions and 57 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -1,42 +1,88 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+
+ * @prop --calcite-pagination-background-color-active: Specifies the background color of the pagination items while active.
+ * @prop --calcite-pagination-background-color-hover: Specifies the background color of the pagination items while hovered.
+ * @prop --calcite-pagination-background-color: Specifies the background color of the pagination items.
+ * @prop --calcite-pagination-border-color-hover: Specifies the border color the pagination items while hovered.
+ * @prop --calcite-pagination-border-color-selected: Specifies the border color of the pagination items when selected.
+ * @prop --calcite-pagination-text-color-hover: Specifies the text color of the pagination items items while hovered.
+ * @prop --calcite-pagination-text-color-selected: Specifies the text color of the pagination items when selected.
+ * @prop --calcite-pagination-text-color: Specifies the text color of the pagination items.
+ * @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
+ * @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
+ * @prop --calcite-pagination-arrow-icon-color-active: Specifies the icon color of the arrow items while active.
+ * @prop --calcite-pagination-arrow-icon-color-hover: Specifies the icon color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-icon-color: Specifies the icon color of the arrow items.
+ *
+ */
+/**
+  * Local props
+  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
+  *
+  * --calcite-internal-pagination-item-size
+  * --calcite-internal-pagination-item-space
+*/
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
+  --calcite-pagination-background-color-active: transparent;
+  --calcite-pagination-background-color-hover: transparent;
+  --calcite-pagination-background-color: transparent;
+  --calcite-pagination-border-color-hover: var(--calcite-color-border-2);
+  --calcite-pagination-border-color-selected: var(--calcite-color-brand);
+  --calcite-pagination-text-color-hover: var(--calcite-color-text-1);
+  --calcite-pagination-text-color-selected: var(--calcite-color-text-1);
+  --calcite-pagination-text-color: var(--calcite-color-text-3);
+  --calcite-pagination-arrow-background-color-active: var(--calcite-color-foreground-3);
+  --calcite-pagination-arrow-background-color-hover: var(--calcite-color-foreground-2);
+  --calcite-pagination-arrow-background-color: var(--calcite-pagination-background-color);
+  --calcite-pagination-arrow-icon-color-active: var(--calcite-color-brand);
+  --calcite-pagination-arrow-icon-color-hover: var(--calcite-color-brand);
+  --calcite-pagination-arrow-icon-color: var(--calcite-pagination-text-color);
 }
 
 :host([scale="s"]) {
+  --calcite-internal-pagination-item-size: var(--calcite-size-xxl);
+  --calcite-internal-pagination-item-space: var(--calcite-size-xxs);
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n2h h-6 px-1;
-    min-inline-size: theme("width.6");
+    @apply text-n2h;
   }
 }
 
 :host([scale="m"]) {
+  --calcite-internal-pagination-item-size: var(--calcite-size-xxxl);
+  --calcite-internal-pagination-item-space: var(--calcite-size-sm);
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n1h h-8 px-2;
-    min-inline-size: theme("width.8");
+    @apply text-n1h;
   }
 }
 
 :host([scale="l"]) {
+  --calcite-internal-pagination-item-size: #{$calcite-size-44};
+  --calcite-internal-pagination-item-space: var(--calcite-size-md);
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-0h h-11;
-    min-inline-size: theme("width.11");
+    @apply text-0h;
   }
 
   & .chevron {
     @apply px-2.5;
   }
-
-  & .page,
-  & .ellipsis {
-    @apply px-3;
-  }
 }
 
 // focus styles
@@ -50,19 +96,22 @@
 .chevron,
 .page,
 .ellipsis {
-  @apply p-0
-    m-0
-    text-0h
-    text-color-3
+  @apply text-0h
     font-inherit
     box-border
     flex
     items-center
     border-none
     border-opacity-0
     justify-center
-    align-baseline
-    bg-transparent;
+    align-baseline;
+  padding: 0;
+  margin: 0;
+  min-inline-size: var(--calcite-internal-pagination-item-size);
+  block-size: var(--calcite-internal-pagination-item-size);
+  padding-inline: var(--calcite-internal-pagination-item-space);
+  color: var(--calcite-pagination-text-color);
+  background-color: var(--calcite-pagination-background-color);
 }
 
 .chevron,
@@ -71,29 +120,39 @@
   border-block: 2px solid transparent;
 
   &:hover {
-    @apply text-color-1 transition-default;
+    @apply transition-default;
+    color: var(--calcite-pagination-text-color-hover);
+    background-color: var(--calcite-pagination-background-color-hover);
+  }
+  &:active {
+    background-color: var(--calcite-pagination-background-color-active);
   }
 }
 
 .page {
   &:hover {
-    @apply border-b-color-2;
+    border-block-end-color: var(--calcite-pagination-border-color-hover);
   }
+
   &.selected {
-    @apply text-color-1 border-b-color-brand font-medium;
+    font-weight: var(--calcite-font-weight-medium);
+    color: var(--calcite-pagination-text-color-selected);
+    border-block-end-color: var(--calcite-pagination-border-color-selected);
   }
 }
 
 .chevron {
+  background-color: var(--calcite-pagination-arrow-background-color);
   &:hover {
-    @apply bg-foreground-2;
-    color: theme("backgroundColor.brand");
+    background-color: var(--calcite-pagination-arrow-background-color-hover);
+    color: var(--calcite-pagination-arrow-icon-color-hover);
   }
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-pagination-arrow-background-color-active);
+    color: var(--calcite-pagination-arrow-icon-color-active);
   }
   &.disabled {
-    @apply pointer-events-none bg-transparent;
+    @apply pointer-events-none;
     & > calcite-icon {
       @apply opacity-disabled;
     }

diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -88,31 +88,62 @@ export const responsiveTinyNumberLastPage_TestOnly = (): string =>
   createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "last" }));
 
 export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
-  <calcite-pagination
-    class="calcite-mode-dark"
-    start-item="1"
-    lang="fr"
-    group-separator
-    total-items="123456789"
-    page-size="10"
-    scale="l"
-  >
-  </calcite-pagination>
+  <div style="width:480px;">
+    <calcite-pagination
+      class="calcite-mode-dark"
+      start-item="1"
+      lang="fr"
+      group-separator
+      total-items="123456789"
+      page-size="10"
+      scale="l"
+    >
+    </calcite-pagination>
+  </div>
 `;
 
 darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const arabicNumberingSystemAndRTL_TestOnly = (): string =>
-  html`<calcite-pagination
-    dir="rtl"
-    numbering-system="arab"
-    start-item="1"
-    lang="fr"
-    total-items="123456789"
-    page-size="10"
-  >
-  </calcite-pagination>`;
+export const arabicNumberingSystemAndRTL_TestOnly = (): string => html`
+  <div style="width:480px;">
+    <calcite-pagination
+      dir="rtl"
+      numbering-system="arab"
+      start-item="1"
+      lang="fr"
+      total-items="123456789"
+      page-size="10"
+    >
+    </calcite-pagination>
+  </div>
+`;
 
 arabicNumberingSystemAndRTL_TestOnly.parameters = {
   chromatic: { diffThreshold: 1 },
 };
+
+export const theming_TestOnly = (): string => html`
+  <div style="width:480px;">
+    <calcite-pagination
+      total-items="1200"
+      page-size="100"
+      start-item="1"
+      style="
+      --calcite-pagination-text-color: green;
+      --calcite-pagination-text-color-hover: darkgreen;
+      --calcite-pagination-text-color-selected: teal;
+      --calcite-pagination-background-color: lightyellow;
+      --calcite-pagination-background-color-hover: yellow;
+      --calcite-pagination-background-color-active: gold;
+      --calcite-pagination-border-color-selected: green;
+      --calcite-pagination-border-color-hover: orange;
+      --calcite-pagination-arrow-icon-color: blue;
+      --calcite-pagination-arrow-icon-color-hover: pink;
+      --calcite-pagination-arrow-icon-color-active: red;
+      --calcite-pagination-arrow-background-color: lightyellow;
+      --calcite-pagination-arrow-background-color-hover: orange;
+      --calcite-pagination-arrow-background-color-active: gold;
+    "
+    ></calcite-pagination>
+  </div>
+`;