diff --git a/CHANGELOG.md b/CHANGELOG.md index f085c20b71..f656131652 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063)) +- Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092)) ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13) diff --git a/packages/react/src/themes/teams/components/Input/inputStyles.ts b/packages/react/src/themes/teams/components/Input/inputStyles.ts index e9349e1e60..9b9a2d625c 100644 --- a/packages/react/src/themes/teams/components/Input/inputStyles.ts +++ b/packages/react/src/themes/teams/components/Input/inputStyles.ts @@ -26,7 +26,7 @@ const inputStyles: ComponentSlotStylesInput = { ...(p.fluid && { width: '100%' }), ...(p.inline && { float: 'left' }), '::placeholder': { - color: v.fontColor, + color: v.placeholderColor, }, ':focus': { borderBottomColor: v.inputFocusBorderBottomColor, diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index a42bc28bd2..34be67cb53 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -15,6 +15,7 @@ export interface InputVariables { inputPadding: string inputFocusBorderBottomColor: string inputFocusBorderRadius: string + placeholderColor: string } export default (siteVars): InputVariables => ({ @@ -35,4 +36,6 @@ export default (siteVars): InputVariables => ({ inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, inputFocusBorderBottomColor: siteVars.colors.primary[500], inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, + + placeholderColor: siteVars.gray02, })