fix(ui-pagination): fix color of pageInput's label

Closes: INSTUI-4385 it was unset, so its color was derived from a parent, now its set to our default text color TEST PLAN: check the color in devtools
instructure · Dec 12, 2024 · b91cfe1 · b91cfe1
1 parent 7be2226
commit b91cfe1
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -948,6 +948,7 @@ export type PagesTheme = {
 export type PaginationPageInputTheme = {
   inputSpacing: Spacing['xSmall']
   inputWidth: string
+  labelColor: Colors['contrasts']['grey125125']
 }
 
 export type PaginationTheme = {

diff --git a/packages/ui-pagination/src/Pagination/PaginationPageInput/styles.ts b/packages/ui-pagination/src/Pagination/PaginationPageInput/styles.ts
@@ -52,7 +52,8 @@ const generateStyle = (
     inputLabel: {
       label: 'paginationPageInput__inputLabel',
       marginInlineStart: componentTheme.inputSpacing,
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      color: componentTheme.labelColor
     }
   }
 }

diff --git a/packages/ui-pagination/src/Pagination/PaginationPageInput/theme.ts b/packages/ui-pagination/src/Pagination/PaginationPageInput/theme.ts
@@ -31,11 +31,12 @@ import type { PaginationPageInputTheme } from '@instructure/shared-types'
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = (theme: Theme): PaginationPageInputTheme => {
-  const { spacing } = theme
+  const { spacing, colors } = theme
 
   const componentVariables: PaginationPageInputTheme = {
     inputSpacing: spacing.xSmall,
-    inputWidth: '4.5rem'
+    inputWidth: '4.5rem',
+    labelColor: colors?.contrasts?.grey125125
   }
 
   return {