diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 91aebc6567..2625dba60a 100644 --- 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 index d9709833c2..d9b2d2bce6 100644 --- 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 index 71a7979d4f..ca21bce47a 100644 --- 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 {