@deque/cauldron-styles 4.6.0-canary.43500cc8 → 4.6.0-canary.53b76d5e

package/dist/index.css

@@ -4043,6 +4043,20 @@ fieldset.Panel {
   line-height: var(--address-line-height);
 }
 
+:root {
+  --pagination-button-background-color: var(--gray-20);
+  --pagination-button-border-color: var(--gray-40);
+  --pagination-button-disabled-text-color: var(--gray-40);
+  --pagination-text-accent-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --pagination-button-background-color: var(--accent-medium);
+  --pagination-button-border-color: transparent;
+  --pagination-button-disabled-text-color: var(--stroke-dark);
+  --pagination-text-accent-color: var(--white);
+}
+
 .Pagination > ul {
   list-style-type: none;
   display: flex;
@@ -4051,25 +4065,28 @@ fieldset.Panel {
 }
 
 .Pagination > ul > li {
-  margin-right: 5px;
+  margin-right: var(--space-smallest);
 }
 
-.Pagination button {
+.Pagination:not(.Pagination--thin) button {
   height: 2.26rem;
   width: 2.26rem;
-  border-radius: 2px;
+}
+
+.Pagination button {
   display: flex;
   justify-content: center;
   align-items: center;
   /* light theme-specific styles */
-  background: var(--gray-20);
-  border: 1px solid var(--gray-40);
-  color: var(--gray-90);
+  background: var(--pagination-button-background-color);
+  border: 1px solid var(--pagination-button-border-color);
+  padding: 0;
+  margin: 0;
+  border-radius: 2px;
 }
 
 .Pagination button[aria-disabled='true'] {
-  color: var(--gray-40);
-  margin: 2px;
+  color: var(--pagination-button-disabled-text-color);
 }
 
 .Pagination button .Icon {
@@ -4078,35 +4095,21 @@ fieldset.Panel {
 }
 
 .Pagination [role='log'] {
-  margin-left: calc(var(--space-medium) - 5px);
-  margin-right: calc(var(--space-medium) - 5px);
-  color: var(--gray-60);
-}
-
-.Pagination [role='log'] strong {
-  color: var(--gray-90);
+  margin: 0 var(--space-small);
+  font-variant-numeric: tabular-nums;
 }
 
-/*
- * dark theme
- */
-
-.cauldron--theme-dark .Pagination button {
-  background-color: var(--accent-medium);
-  border-color: transparent;
+.Pagination--thin [role='log'] {
+  font-size: var(--text-size-smaller);
+  margin: 0 var(--space-half);
 }
 
-.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
-  color: #5d676f;
+.Pagination [role='log'] strong {
+  color: var(--pagination-text-accent-color);
 }
 
 .cauldron--theme-dark .Pagination [role='log'] {
   color: var(--accent-light);
-  font-variant-numeric: tabular-nums;
-}
-
-.cauldron--theme-dark .Pagination [role='log'] strong {
-  color: var(--white);
 }
 
 .Breadcrumb ol {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.6.0-canary.43500cc8",
+  "version": "4.6.0-canary.53b76d5e",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",