diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 3e99f956fe9..3b34d4e7e6e 100644
--- 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,10 +96,7 @@
 .chevron,
 .page,
 .ellipsis {
-  @apply p-0
-    m-0
-    text-0h
-    text-color-3
+  @apply text-0h
     font-inherit
     box-border
     flex
@@ -61,8 +104,14 @@
     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
index 8043fcdd94e..8cf02792fb9 100644
--- 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>
+`;
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 76090b9c009..8f2855623f5 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -27,15 +27,251 @@
         padding: 15px;
         flex: 1;
       }
+
+      .themed-example {
+        --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;
+      }
     </style>
   </head>
 
   <body>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
+      <!-- responsive testing from storybook-->
 
       <!-- Small -->
-      <div class="flex">
+      <div class="parent">
+        <div class="child">
+          <div class="breakpoint-stories-container">
+            <style>
+              .breakpoint-stories-container {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                justify-content: flex-start;
+              }
+
+              .breakpoint-story-container {
+                display: flex;
+              }
+
+              .breakpoint-story-container > * {
+                flex: 1;
+              }
+            </style>
+            <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>
+
+            <calcite-pagination
+              scale="m"
+              start-item="1"
+              lang="en"
+              numbering-system="latn"
+              total-items="123456789"
+              page-size="10"
+            ></calcite-pagination>
+            <strong>scale = s</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>scale = m</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>scale = l</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+          </div>
+        </div>
         <div class="parent">
           <div class="child">small</div>
 
@@ -43,7 +279,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="s"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="s">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="s"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -51,6 +287,37 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
           </div>
         </div>
 
+        <!-- Medium -->
+        <div class="parent">
+          <div class="child">themed</div>
+
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="300"
+              page-size="100"
+              start-item="1"
+            ></calcite-pagination>
+          </div>
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="1200"
+              page-size="100"
+              start-item="1"
+            ></calcite-pagination>
+          </div>
+
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="150000"
+              page-size="100"
+              start-item="5400"
+            ></calcite-pagination>
+          </div>
+        </div>
+
         <!-- Medium -->
         <div class="parent">
           <div class="child">medium</div>
@@ -59,7 +326,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="m"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="m">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="m"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -75,7 +342,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="l"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="l">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="l"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -98,8 +365,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="s"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="s">
             </calcite-pagination>
           </div>
 
@@ -131,8 +397,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="m"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="m">
             </calcite-pagination>
           </div>
 
@@ -164,8 +429,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="l"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="l">
             </calcite-pagination>
           </div>
 
@@ -204,7 +468,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="s"
-              >Hello
+            >
             </calcite-pagination>
           </div>
 
@@ -243,7 +507,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="m"
-              >Hello
+            >
             </calcite-pagination>
           </div>
 
@@ -282,7 +546,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="l"
-              >Hello
+            >
             </calcite-pagination>
           </div>