govuk-react / govuk-react/govuk-react

Adopt polished for styling utility functions

Open
#511 1 comment 0 reactions 0 assignees View on GitHub
discussion
Dominant language
TypeScript
Stars
458
Forks
89
PR merge metrics
No merged PRs in 30d

Description

We're looking to adopt [Polished](https://polished.js.org/) [(docs)](https://polished.js.org/docs/) to provide styling utility functions.

This issue is here to advise of that choice, and track suggestions for how it may be used, and where it may be used in our code.

The first planned use is within the [`Button`](https://github.com/govuk-react/govuk-react/blob/master/components/button/src/index.js) component, which tracks the [govuk-frontend button](https://github.com/alphagov/govuk-frontend/blob/master/src/components/button/_button.scss). Specifically we're looking to use the [`darken`](https://polished.js.org/docs/#darken) function to create the hover and shadow colours used for the button.

govuk-frontend also supports the use of a config flag to indicating that font sizes should be [in rems](https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_typography-responsive.scss) which we may look to provide some kind of equivalent support for via the use of Polished's [`rem` utility function](https://polished.js.org/docs/#rem)

Any further suggestions for how we may use Polished functions should be added as comments here.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.