8000 feat(tokens): use rems instead of px for most sizes by srambach · Pull Request #6846 · patternfly/patternfly · GitHub
[go: up one dir, main page]

Skip to content

feat(tokens): use rems instead of px for most sizes#6846

Merged
mcoker merged 2 commits intopatternfly:v6from
srambach:6830-use-rem-tokens
Jul 3, 2024
Merged

feat(tokens): use rems instead of px for most sizes#6846
mcoker merged 2 commits intopatternfly:v6from
srambach:6830-use-rem-tokens

Conversation

@srambach
Copy link
Member
@srambach srambach commented Jul 2, 2024

Fixes #6830 to change px values for sizes, spacers, and breakpoints to rems. Does not change box-shadow and border sizing.

Also includes updates to font definitions and a couple of semantic spacers.

(0 visual differences when run with just the rem change)

@patternfly-build
Copy link
Collaborator
patternfly-build commented Jul 2, 2024

Comment on lines +293 to +304
--pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added #6847

Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's... just so beautiful 🥹

Comment on lines +457 to +458
--pf-t--global--spacer--action--vertical--default: var(--pf-t--global--spacer--sm);
--pf-t--global--spacer--action--vertical--plain: var(--pf-t--global--spacer--sm);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lboehling can you confirm these are intentional? Last I remember we were using --pf-t--global--spacer--control--vertical[...] for the top/bottom padding of actions/controls so that we used a single spacer.

Copy link
Collaborator
@andrew-ronaldson andrew-ronaldson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

REMarkable

Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shazam! 🐳

@mcoker mcoker merged commit 8bb40ae into patternfly:v6 Jul 3, 2024
@patternfly-build
Copy link
Collaborator

🎉 This PR is included in version 6.0.0-alpha.181 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update gutter size in our layouts

4 participants

0