Skip to content

Convert padding and border utilities to rem units with fallbacks #2315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 9 commits into from
Nov 21, 2022
Merged

Convert padding and border utilities to rem units with fallbacks #2315

merged 9 commits into from
Nov 21, 2022

Conversation

@langermank
Copy link
Contributor

@langermank langermank commented Nov 17, 2022 •
edited
Loading

What are you trying to accomplish?

Safely test rem units for all padding and border base and utility styles behind a feature flag. Each change is using a CSS var that only exists behind a feature flag, with a fallback to the current value (scss var). There should be no visual changes to padding/border styles with this change.

What approach did you choose and why?

CSS vars with fallbacks as this has been a useful method for testing our new set of design tokens.

What should reviewers focus on?

  • Spelling/typos

Can these changes ship as is?

  • Yes, this PR does not depend on additional changes. 🚢
Compiled ```css

.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-1 {
padding: var(--base-size-4, 4px) !important;
}
.pt-1 {
padding-top: var(--base-size-4, 4px) !important;
}
.pr-1 {
padding-right: var(--base-size-4, 4px) !important;
}
.pb-1 {
padding-bottom: var(--base-size-4, 4px) !important;
}
.pl-1 {
padding-left: var(--base-size-4, 4px) !important;
}
.px-1 {
padding-right: var(--base-size-4, 4px) !important;
padding-left: var(--base-size-4, 4px) !important;
}
.py-1 {
padding-top: var(--base-size-4, 4px) !important;
padding-bottom: var(--base-size-4, 4px) !important;
}
.p-2 {
padding: var(--base-size-8, 8px) !important;
}
.pt-2 {
padding-top: var(--base-size-8, 8px) !important;
}
.pr-2 {
padding-right: var(--base-size-8, 8px) !important;
}
.pb-2 {
padding-bottom: var(--base-size-8, 8px) !important;
}
.pl-2 {
padding-left: var(--base-size-8, 8px) !important;
}
.px-2 {
padding-right: var(--base-size-8, 8px) !important;
padding-left: var(--base-size-8, 8px) !important;
}
.py-2 {
padding-top: var(--base-size-8, 8px) !important;
padding-bottom: var(--base-size-8, 8px) !important;
}
.p-3 {
padding: var(--base-size-16, 16px) !important;
}
.pt-3 {
padding-top: var(--base-size-16, 16px) !important;
}
.pr-3 {
padding-right: var(--base-size-16, 16px) !important;
}
.pb-3 {
padding-bottom: var(--base-size-16, 16px) !important;
}
.pl-3 {
padding-left: var(--base-size-16, 16px) !important;
}
.px-3 {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
.py-3 {
padding-top: var(--base-size-16, 16px) !important;
padding-bottom: var(--base-size-16, 16px) !important;
}
.p-4 {
padding: var(--base-size-24, 24px) !important;
}
.pt-4 {
padding-top: var(--base-size-24, 24px) !important;
}
.pr-4 {
padding-right: var(--base-size-24, 24px) !important;
}
.pb-4 {
padding-bottom: var(--base-size-24, 24px) !important;
}
.pl-4 {
padding-left: var(--base-size-24, 24px) !important;
}
.px-4 {
padding-right: var(--base-size-24, 24px) !important;
padding-left: var(--base-size-24, 24px) !important;
}
.py-4 {
padding-top: var(--base-size-24, 24px) !important;
padding-bottom: var(--base-size-24, 24px) !important;
}
.p-5 {
padding: var(--base-size-32, 32px) !important;
}
.pt-5 {
padding-top: var(--base-size-32, 32px) !important;
}
.pr-5 {
padding-right: var(--base-size-32, 32px) !important;
}
.pb-5 {
padding-bottom: var(--base-size-32, 32px) !important;
}
.pl-5 {
padding-left: var(--base-size-32, 32px) !important;
}
.px-5 {
padding-right: var(--base-size-32, 32px) !important;
padding-left: var(--base-size-32, 32px) !important;
}
.py-5 {
padding-top: var(--base-size-32, 32px) !important;
padding-bottom: var(--base-size-32, 32px) !important;
}
.p-6 {
padding: var(--base-size-40, 40px) !important;
}
.pt-6 {
padding-top: var(--base-size-40, 40px) !important;
}
.pr-6 {
padding-right: var(--base-size-40, 40px) !important;
}
.pb-6 {
padding-bottom: var(--base-size-40, 40px) !important;
}
.pl-6 {
padding-left: var(--base-size-40, 40px) !important;
}
.px-6 {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
.py-6 {
padding-top: var(--base-size-40, 40px) !important;
padding-bottom: var(--base-size-40, 40px) !important;
}
.pt-7 {
padding-top: var(--base-size-48, 48px) !important;
}
.pr-7 {
padding-right: var(--base-size-48, 48px) !important;
}
.pb-7 {
padding-bottom: var(--base-size-48, 48px) !important;
}
.pl-7 {
padding-left: var(--base-size-48, 48px) !important;
}
.py-7 {
padding-top: var(--base-size-48, 48px) !important;
padding-bottom: var(--base-size-48, 48px) !important;
}
.pt-8 {
padding-top: var(--base-size-64, 64px) !important;
}
.pr-8 {
padding-right: var(--base-size-64, 64px) !important;
}
.pb-8 {
padding-bottom: var(--base-size-64, 64px) !important;
}
.pl-8 {
padding-left: var(--base-size-64, 64px) !important;
}
.py-8 {
padding-top: var(--base-size-64, 64px) !important;
padding-bottom: var(--base-size-64, 64px) !important;
}
.pt-9 {
padding-top: var(--base-size-80, 80px) !important;
}
.pr-9 {
padding-right: var(--base-size-80, 80px) !important;
}
.pb-9 {
padding-bottom: var(--base-size-80, 80px) !important;
}
.pl-9 {
padding-left: var(--base-size-80, 80px) !important;
}
.py-9 {
padding-top: var(--base-size-80, 80px) !important;
padding-bottom: var(--base-size-80, 80px) !important;
}
.pt-10 {
padding-top: var(--base-size-96, 96px) !important;
}
.pr-10 {
padding-right: var(--base-size-96, 96px) !important;
}
.pb-10 {
padding-bottom: var(--base-size-96, 96px) !important;
}
.pl-10 {
padding-left: var(--base-size-96, 96px) !important;
}
.py-10 {
padding-top: var(--base-size-96, 96px) !important;
padding-bottom: var(--base-size-96, 96px) !important;
}
.pt-11 {
padding-top: var(--base-size-112, 112px) !important;
}
.pr-11 {
padding-right: var(--base-size-112, 112px) !important;
}
.pb-11 {
padding-bottom: var(--base-size-112, 112px) !important;
}
.pl-11 {
padding-left: var(--base-size-112, 112px) !important;
}
.py-11 {
padding-top: var(--base-size-112, 112px) !important;
padding-bottom: var(--base-size-112, 112px) !important;
}
.pt-12 {
padding-top: var(--base-size-128, 128px) !important;
}
.pr-12 {
padding-right: var(--base-size-128, 128px) !important;
}
.pb-12 {
padding-bottom: var(--base-size-128, 128px) !important;
}
.pl-12 {
padding-left: var(--base-size-128, 128px) !important;
}
.py-12 {
padding-top: var(--base-size-128, 128px) !important;
padding-bottom: var(--base-size-128, 128px) !important;
}
@media (min-width: 544px) {
.p-sm-0 {
padding: 0 !important;
}
.pt-sm-0 {
padding-top: 0 !important;
}
.pr-sm-0 {
padding-right: 0 !important;
}
.pb-sm-0 {
padding-bottom: 0 !important;
}
.pl-sm-0 {
padding-left: 0 !important;
}
.px-sm-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-sm-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-sm-1 {
padding: var(--base-size-4, 4px) !important;
}
.pt-sm-1 {
padding-top: var(--base-size-4, 4px) !important;
}
.pr-sm-1 {
padding-right: var(--base-size-4, 4px) !important;
}
.pb-sm-1 {
padding-bottom: var(--base-size-4, 4px) !important;
}
.pl-sm-1 {
padding-left: var(--base-size-4, 4px) !important;
}
.px-sm-1 {
padding-right: var(--base-size-4, 4px) !important;
padding-left: var(--base-size-4, 4px) !important;
}
.py-sm-1 {
padding-top: var(--base-size-4, 4px) !important;
padding-bottom: var(--base-size-4, 4px) !important;
}
.p-sm-2 {
padding: var(--base-size-8, 8px) !important;
}
.pt-sm-2 {
padding-top: var(--base-size-8, 8px) !important;
}
.pr-sm-2 {
padding-right: var(--base-size-8, 8px) !important;
}
.pb-sm-2 {
padding-bottom: var(--base-size-8, 8px) !important;
}
.pl-sm-2 {
padding-left: var(--base-size-8, 8px) !important;
}
.px-sm-2 {
padding-right: var(--base-size-8, 8px) !important;
padding-left: var(--base-size-8, 8px) !important;
}
.py-sm-2 {
padding-top: var(--base-size-8, 8px) !important;
padding-bottom: var(--base-size-8, 8px) !important;
}
.p-sm-3 {
padding: var(--base-size-16, 16px) !important;
}
.pt-sm-3 {
padding-top: var(--base-size-16, 16px) !important;
}
.pr-sm-3 {
padding-right: var(--base-size-16, 16px) !important;
}
.pb-sm-3 {
padding-bottom: var(--base-size-16, 16px) !important;
}
.pl-sm-3 {
padding-left: var(--base-size-16, 16px) !important;
}
.px-sm-3 {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
.py-sm-3 {
padding-top: var(--base-size-16, 16px) !important;
padding-bottom: var(--base-size-16, 16px) !important;
}
.p-sm-4 {
padding: var(--base-size-24, 24px) !important;
}
.pt-sm-4 {
padding-top: var(--base-size-24, 24px) !important;
}
.pr-sm-4 {
padding-right: var(--base-size-24, 24px) !important;
}
.pb-sm-4 {
padding-bottom: var(--base-size-24, 24px) !important;
}
.pl-sm-4 {
padding-left: var(--base-size-24, 24px) !important;
}
.px-sm-4 {
padding-right: var(--base-size-24, 24px) !important;
padding-left: var(--base-size-24, 24px) !important;
}
.py-sm-4 {
padding-top: var(--base-size-24, 24px) !important;
padding-bottom: var(--base-size-24, 24px) !important;
}
.p-sm-5 {
padding: var(--base-size-32, 32px) !important;
}
.pt-sm-5 {
padding-top: var(--base-size-32, 32px) !important;
}
.pr-sm-5 {
padding-right: var(--base-size-32, 32px) !important;
}
.pb-sm-5 {
padding-bottom: var(--base-size-32, 32px) !important;
}
.pl-sm-5 {
padding-left: var(--base-size-32, 32px) !important;
}
.px-sm-5 {
padding-right: var(--base-size-32, 32px) !important;
padding-left: var(--base-size-32, 32px) !important;
}
.py-sm-5 {
padding-top: var(--base-size-32, 32px) !important;
padding-bottom: var(--base-size-32, 32px) !important;
}
.p-sm-6 {
padding: var(--base-size-40, 40px) !important;
}
.pt-sm-6 {
padding-top: var(--base-size-40, 40px) !important;
}
.pr-sm-6 {
padding-right: var(--base-size-40, 40px) !important;
}
.pb-sm-6 {
padding-bottom: var(--base-size-40, 40px) !important;
}
.pl-sm-6 {
padding-left: var(--base-size-40, 40px) !important;
}
.px-sm-6 {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
.py-sm-6 {
padding-top: var(--base-size-40, 40px) !important;
padding-bottom: var(--base-size-40, 40px) !important;
}
.pt-sm-7 {
padding-top: var(--base-size-48, 48px) !important;
}
.pr-sm-7 {
padding-right: var(--base-size-48, 48px) !important;
}
.pb-sm-7 {
padding-bottom: var(--base-size-48, 48px) !important;
}
.pl-sm-7 {
padding-left: var(--base-size-48, 48px) !important;
}
.py-sm-7 {
padding-top: var(--base-size-48, 48px) !important;
padding-bottom: var(--base-size-48, 48px) !important;
}
.pt-sm-8 {
padding-top: var(--base-size-64, 64px) !important;
}
.pr-sm-8 {
padding-right: var(--base-size-64, 64px) !important;
}
.pb-sm-8 {
padding-bottom: var(--base-size-64, 64px) !important;
}
.pl-sm-8 {
padding-left: var(--base-size-64, 64px) !important;
}
.py-sm-8 {
padding-top: var(--base-size-64, 64px) !important;
padding-bottom: var(--base-size-64, 64px) !important;
}
.pt-sm-9 {
padding-top: var(--base-size-80, 80px) !important;
}
.pr-sm-9 {
padding-right: var(--base-size-80, 80px) !important;
}
.pb-sm-9 {
padding-bottom: var(--base-size-80, 80px) !important;
}
.pl-sm-9 {
padding-left: var(--base-size-80, 80px) !important;
}
.py-sm-9 {
padding-top: var(--base-size-80, 80px) !important;
padding-bottom: var(--base-size-80, 80px) !important;
}
.pt-sm-10 {
padding-top: var(--base-size-96, 96px) !important;
}
.pr-sm-10 {
padding-right: var(--base-size-96, 96px) !important;
}
.pb-sm-10 {
padding-bottom: var(--base-size-96, 96px) !important;
}
.pl-sm-10 {
padding-left: var(--base-size-96, 96px) !important;
}
.py-sm-10 {
padding-top: var(--base-size-96, 96px) !important;
padding-bottom: var(--base-size-96, 96px) !important;
}
.pt-sm-11 {
padding-top: var(--base-size-112, 112px) !important;
}
.pr-sm-11 {
padding-right: var(--base-size-112, 112px) !important;
}
.pb-sm-11 {
padding-bottom: var(--base-size-112, 112px) !important;
}
.pl-sm-11 {
padding-left: var(--base-size-112, 112px) !important;
}
.py-sm-11 {
padding-top: var(--base-size-112, 112px) !important;
padding-bottom: var(--base-size-112, 112px) !important;
}
.pt-sm-12 {
padding-top: var(--base-size-128, 128px) !important;
}
.pr-sm-12 {
padding-right: var(--base-size-128, 128px) !important;
}
.pb-sm-12 {
padding-bottom: var(--base-size-128, 128px) !important;
}
.pl-sm-12 {
padding-left: var(--base-size-128, 128px) !important;
}
.py-sm-12 {
padding-top: var(--base-size-128, 128px) !important;
padding-bottom: var(--base-size-128, 128px) !important;
}
}
@media (min-width: 768px) {
.p-md-0 {
padding: 0 !important;
}
.pt-md-0 {
padding-top: 0 !important;
}
.pr-md-0 {
padding-right: 0 !important;
}
.pb-md-0 {
padding-bottom: 0 !important;
}
.pl-md-0 {
padding-left: 0 !important;
}
.px-md-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-md-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-md-1 {
padding: var(--base-size-4, 4px) !important;
}
.pt-md-1 {
padding-top: var(--base-size-4, 4px) !important;
}
.pr-md-1 {
padding-right: var(--base-size-4, 4px) !important;
}
.pb-md-1 {
padding-bottom: var(--base-size-4, 4px) !important;
}
.pl-md-1 {
padding-left: var(--base-size-4, 4px) !important;
}
.px-md-1 {
padding-right: var(--base-size-4, 4px) !important;
padding-left: var(--base-size-4, 4px) !important;
}
.py-md-1 {
padding-top: var(--base-size-4, 4px) !important;
padding-bottom: var(--base-size-4, 4px) !important;
}
.p-md-2 {
padding: var(--base-size-8, 8px) !important;
}
.pt-md-2 {
padding-top: var(--base-size-8, 8px) !important;
}
.pr-md-2 {
padding-right: var(--base-size-8, 8px) !important;
}
.pb-md-2 {
padding-bottom: var(--base-size-8, 8px) !important;
}
.pl-md-2 {
padding-left: var(--base-size-8, 8px) !important;
}
.px-md-2 {
padding-right: var(--base-size-8, 8px) !important;
padding-left: var(--base-size-8, 8px) !important;
}
.py-md-2 {
padding-top: var(--base-size-8, 8px) !important;
padding-bottom: var(--base-size-8, 8px) !important;
}
.p-md-3 {
padding: var(--base-size-16, 16px) !important;
}
.pt-md-3 {
padding-top: var(--base-size-16, 16px) !important;
}
.pr-md-3 {
padding-right: var(--base-size-16, 16px) !important;
}
.pb-md-3 {
padding-bottom: var(--base-size-16, 16px) !important;
}
.pl-md-3 {
padding-left: var(--base-size-16, 16px) !important;
}
.px-md-3 {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
.py-md-3 {
padding-top: var(--base-size-16, 16px) !important;
padding-bottom: var(--base-size-16, 16px) !important;
}
.p-md-4 {
padding: var(--base-size-24, 24px) !important;
}
.pt-md-4 {
padding-top: var(--base-size-24, 24px) !important;
}
.pr-md-4 {
padding-right: var(--base-size-24, 24px) !important;
}
.pb-md-4 {
padding-bottom: var(--base-size-24, 24px) !important;
}
.pl-md-4 {
padding-left: var(--base-size-24, 24px) !important;
}
.px-md-4 {
padding-right: var(--base-size-24, 24px) !important;
padding-left: var(--base-size-24, 24px) !important;
}
.py-md-4 {
padding-top: var(--base-size-24, 24px) !important;
padding-bottom: var(--base-size-24, 24px) !important;
}
.p-md-5 {
padding: var(--base-size-32, 32px) !important;
}
.pt-md-5 {
padding-top: var(--base-size-32, 32px) !important;
}
.pr-md-5 {
padding-right: var(--base-size-32, 32px) !important;
}
.pb-md-5 {
padding-bottom: var(--base-size-32, 32px) !important;
}
.pl-md-5 {
padding-left: var(--base-size-32, 32px) !important;
}
.px-md-5 {
padding-right: var(--base-size-32, 32px) !important;
padding-left: var(--base-size-32, 32px) !important;
}
.py-md-5 {
padding-top: var(--base-size-32, 32px) !important;
padding-bottom: var(--base-size-32, 32px) !important;
}
.p-md-6 {
padding: var(--base-size-40, 40px) !important;
}
.pt-md-6 {
padding-top: var(--base-size-40, 40px) !important;
}
.pr-md-6 {
padding-right: var(--base-size-40, 40px) !important;
}
.pb-md-6 {
padding-bottom: var(--base-size-40, 40px) !important;
}
.pl-md-6 {
padding-left: var(--base-size-40, 40px) !important;
}
.px-md-6 {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
.py-md-6 {
padding-top: var(--base-size-40, 40px) !important;
padding-bottom: var(--base-size-40, 40px) !important;
}
.pt-md-7 {
padding-top: var(--base-size-48, 48px) !important;
}
.pr-md-7 {
padding-right: var(--base-size-48, 48px) !important;
}
.pb-md-7 {
padding-bottom: var(--base-size-48, 48px) !important;
}
.pl-md-7 {
padding-left: var(--base-size-48, 48px) !important;
}
.py-md-7 {
padding-top: var(--base-size-48, 48px) !important;
padding-bottom: var(--base-size-48, 48px) !important;
}
.pt-md-8 {
padding-top: var(--base-size-64, 64px) !important;
}
.pr-md-8 {
padding-right: var(--base-size-64, 64px) !important;
}
.pb-md-8 {
padding-bottom: var(--base-size-64, 64px) !important;
}
.pl-md-8 {
padding-left: var(--base-size-64, 64px) !important;
}
.py-md-8 {
padding-top: var(--base-size-64, 64px) !important;
padding-bottom: var(--base-size-64, 64px) !important;
}
.pt-md-9 {
padding-top: var(--base-size-80, 80px) !important;
}
.pr-md-9 {
padding-right: var(--base-size-80, 80px) !important;
}
.pb-md-9 {
padding-bottom: var(--base-size-80, 80px) !important;
}
.pl-md-9 {
padding-left: var(--base-size-80, 80px) !important;
}
.py-md-9 {
padding-top: var(--base-size-80, 80px) !important;
padding-bottom: var(--base-size-80, 80px) !important;
}
.pt-md-10 {
padding-top: var(--base-size-96, 96px) !important;
}
.pr-md-10 {
padding-right: var(--base-size-96, 96px) !important;
}
.pb-md-10 {
padding-bottom: var(--base-size-96, 96px) !important;
}
.pl-md-10 {
padding-left: var(--base-size-96, 96px) !important;
}
.py-md-10 {
padding-top: var(--base-size-96, 96px) !important;
padding-bottom: var(--base-size-96, 96px) !important;
}
.pt-md-11 {
padding-top: var(--base-size-112, 112px) !important;
}
.pr-md-11 {
padding-right: var(--base-size-112, 112px) !important;
}
.pb-md-11 {
padding-bottom: var(--base-size-112, 112px) !important;
}
.pl-md-11 {
padding-left: var(--base-size-112, 112px) !important;
}
.py-md-11 {
padding-top: var(--base-size-112, 112px) !important;
padding-bottom: var(--base-size-112, 112px) !important;
}
.pt-md-12 {
padding-top: var(--base-size-128, 128px) !important;
}
.pr-md-12 {
padding-right: var(--base-size-128, 128px) !important;
}
.pb-md-12 {
padding-bottom: var(--base-size-128, 128px) !important;
}
.pl-md-12 {
padding-left: var(--base-size-128, 128px) !important;
}
.py-md-12 {
padding-top: var(--base-size-128, 128px) !important;
padding-bottom: var(--base-size-128, 128px) !important;
}
}
@media (min-width: 1012px) {
.p-lg-0 {
padding: 0 !important;
}
.pt-lg-0 {
padding-top: 0 !important;
}
.pr-lg-0 {
padding-right: 0 !important;
}
.pb-lg-0 {
padding-bottom: 0 !important;
}
.pl-lg-0 {
padding-left: 0 !important;
}
.px-lg-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-lg-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-lg-1 {
padding: var(--base-size-4, 4px) !important;
}
.pt-lg-1 {
padding-top: var(--base-size-4, 4px) !important;
}
.pr-lg-1 {
padding-right: var(--base-size-4, 4px) !important;
}
.pb-lg-1 {
padding-bottom: var(--base-size-4, 4px) !important;
}
.pl-lg-1 {
padding-left: var(--base-size-4, 4px) !important;
}
.px-lg-1 {
padding-right: var(--base-size-4, 4px) !important;
padding-left: var(--base-size-4, 4px) !important;
}
.py-lg-1 {
padding-top: var(--base-size-4, 4px) !important;
padding-bottom: var(--base-size-4, 4px) !important;
}
.p-lg-2 {
padding: var(--base-size-8, 8px) !important;
}
.pt-lg-2 {
padding-top: var(--base-size-8, 8px) !important;
}
.pr-lg-2 {
padding-right: var(--base-size-8, 8px) !important;
}
.pb-lg-2 {
padding-bottom: var(--base-size-8, 8px) !important;
}
.pl-lg-2 {
padding-left: var(--base-size-8, 8px) !important;
}
.px-lg-2 {
padding-right: var(--base-size-8, 8px) !important;
padding-left: var(--base-size-8, 8px) !important;
}
.py-lg-2 {
padding-top: var(--base-size-8, 8px) !important;
padding-bottom: var(--base-size-8, 8px) !important;
}
.p-lg-3 {
padding: var(--base-size-16, 16px) !important;
}
.pt-lg-3 {
padding-top: var(--base-size-16, 16px) !important;
}
.pr-lg-3 {
padding-right: var(--base-size-16, 16px) !important;
}
.pb-lg-3 {
padding-bottom: var(--base-size-16, 16px) !important;
}
.pl-lg-3 {
padding-left: var(--base-size-16, 16px) !important;
}
.px-lg-3 {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
.py-lg-3 {
padding-top: var(--base-size-16, 16px) !important;
padding-bottom: var(--base-size-16, 16px) !important;
}
.p-lg-4 {
padding: var(--base-size-24, 24px) !important;
}
.pt-lg-4 {
padding-top: var(--base-size-24, 24px) !important;
}
.pr-lg-4 {
padding-right: var(--base-size-24, 24px) !important;
}
.pb-lg-4 {
padding-bottom: var(--base-size-24, 24px) !important;
}
.pl-lg-4 {
padding-left: var(--base-size-24, 24px) !important;
}
.px-lg-4 {
padding-right: var(--base-size-24, 24px) !important;
padding-left: var(--base-size-24, 24px) !important;
}
.py-lg-4 {
padding-top: var(--base-size-24, 24px) !important;
padding-bottom: var(--base-size-24, 24px) !important;
}
.p-lg-5 {
padding: var(--base-size-32, 32px) !important;
}
.pt-lg-5 {
padding-top: var(--base-size-32, 32px) !important;
}
.pr-lg-5 {
padding-right: var(--base-size-32, 32px) !important;
}
.pb-lg-5 {
padding-bottom: var(--base-size-32, 32px) !important;
}
.pl-lg-5 {
padding-left: var(--base-size-32, 32px) !important;
}
.px-lg-5 {
padding-right: var(--base-size-32, 32px) !important;
padding-left: var(--base-size-32, 32px) !important;
}
.py-lg-5 {
padding-top: var(--base-size-32, 32px) !important;
padding-bottom: var(--base-size-32, 32px) !important;
}
.p-lg-6 {
padding: var(--base-size-40, 40px) !important;
}
.pt-lg-6 {
padding-top: var(--base-size-40, 40px) !important;
}
.pr-lg-6 {
padding-right: var(--base-size-40, 40px) !important;
}
.pb-lg-6 {
padding-bottom: var(--base-size-40, 40px) !important;
}
.pl-lg-6 {
padding-left: var(--base-size-40, 40px) !important;
}
.px-lg-6 {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
.py-lg-6 {
padding-top: var(--base-size-40, 40px) !important;
padding-bottom: var(--base-size-40, 40px) !important;
}
.pt-lg-7 {
padding-top: var(--base-size-48, 48px) !important;
}
.pr-lg-7 {
padding-right: var(--base-size-48, 48px) !important;
}
.pb-lg-7 {
padding-bottom: var(--base-size-48, 48px) !important;
}
.pl-lg-7 {
padding-left: var(--base-size-48, 48px) !important;
}
.py-lg-7 {
padding-top: var(--base-size-48, 48px) !important;
padding-bottom: var(--base-size-48, 48px) !important;
}
.pt-lg-8 {
padding-top: var(--base-size-64, 64px) !important;
}
.pr-lg-8 {
padding-right: var(--base-size-64, 64px) !important;
}
.pb-lg-8 {
padding-bottom: var(--base-size-64, 64px) !important;
}
.pl-lg-8 {
padding-left: var(--base-size-64, 64px) !important;
}
.py-lg-8 {
padding-top: var(--base-size-64, 64px) !important;
padding-bottom: var(--base-size-64, 64px) !important;
}
.pt-lg-9 {
padding-top: var(--base-size-80, 80px) !important;
}
.pr-lg-9 {
padding-right: var(--base-size-80, 80px) !important;
}
.pb-lg-9 {
padding-bottom: var(--base-size-80, 80px) !important;
}
.pl-lg-9 {
padding-left: var(--base-size-80, 80px) !important;
}
.py-lg-9 {
padding-top: var(--base-size-80, 80px) !important;
padding-bottom: var(--base-size-80, 80px) !important;
}
.pt-lg-10 {
padding-top: var(--base-size-96, 96px) !important;
}
.pr-lg-10 {
padding-right: var(--base-size-96, 96px) !important;
}
.pb-lg-10 {
padding-bottom: var(--base-size-96, 96px) !important;
}
.pl-lg-10 {
padding-left: var(--base-size-96, 96px) !important;
}
.py-lg-10 {
padding-top: var(--base-size-96, 96px) !important;
padding-bottom: var(--base-size-96, 96px) !important;
}
.pt-lg-11 {
padding-top: var(--base-size-112, 112px) !important;
}
.pr-lg-11 {
padding-right: var(--base-size-112, 112px) !important;
}
.pb-lg-11 {
padding-bottom: var(--base-size-112, 112px) !important;
}
.pl-lg-11 {
padding-left: var(--base-size-112, 112px) !important;
}
.py-lg-11 {
padding-top: var(--base-size-112, 112px) !important;
padding-bottom: var(--base-size-112, 112px) !important;
}
.pt-lg-12 {
padding-top: var(--base-size-128, 128px) !important;
}
.pr-lg-12 {
padding-right: var(--base-size-128, 128px) !important;
}
.pb-lg-12 {
padding-bottom: var(--base-size-128, 128px) !important;
}
.pl-lg-12 {
padding-left: var(--base-size-128, 128px) !important;
}
.py-lg-12 {
padding-top: var(--base-size-128, 128px) !important;
padding-bottom: var(--base-size-128, 128px) !important;
}
}
@media (min-width: 1280px) {
.p-xl-0 {
padding: 0 !important;
}
.pt-xl-0 {
padding-top: 0 !important;
}
.pr-xl-0 {
padding-right: 0 !important;
}
.pb-xl-0 {
padding-bottom: 0 !important;
}
.pl-xl-0 {
padding-left: 0 !important;
}
.px-xl-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-xl-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-xl-1 {
padding: var(--base-size-4, 4px) !important;
}
.pt-xl-1 {
padding-top: var(--base-size-4, 4px) !important;
}
.pr-xl-1 {
padding-right: var(--base-size-4, 4px) !important;
}
.pb-xl-1 {
padding-bottom: var(--base-size-4, 4px) !important;
}
.pl-xl-1 {
padding-left: var(--base-size-4, 4px) !important;
}
.px-xl-1 {
padding-right: var(--base-size-4, 4px) !important;
padding-left: var(--base-size-4, 4px) !important;
}
.py-xl-1 {
padding-top: var(--base-size-4, 4px) !important;
padding-bottom: var(--base-size-4, 4px) !important;
}
.p-xl-2 {
padding: var(--base-size-8, 8px) !important;
}
.pt-xl-2 {
padding-top: var(--base-size-8, 8px) !important;
}
.pr-xl-2 {
padding-right: var(--base-size-8, 8px) !important;
}
.pb-xl-2 {
padding-bottom: var(--base-size-8, 8px) !important;
}
.pl-xl-2 {
padding-left: var(--base-size-8, 8px) !important;
}
.px-xl-2 {
padding-right: var(--base-size-8, 8px) !important;
padding-left: var(--base-size-8, 8px) !important;
}
.py-xl-2 {
padding-top: var(--base-size-8, 8px) !important;
padding-bottom: var(--base-size-8, 8px) !important;
}
.p-xl-3 {
padding: var(--base-size-16, 16px) !important;
}
.pt-xl-3 {
padding-top: var(--base-size-16, 16px) !important;
}
.pr-xl-3 {
padding-right: var(--base-size-16, 16px) !important;
}
.pb-xl-3 {
padding-bottom: var(--base-size-16, 16px) !important;
}
.pl-xl-3 {
padding-left: var(--base-size-16, 16px) !important;
}
.px-xl-3 {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
.py-xl-3 {
padding-top: var(--base-size-16, 16px) !important;
padding-bottom: var(--base-size-16, 16px) !important;
}
.p-xl-4 {
padding: var(--base-size-24, 24px) !important;
}
.pt-xl-4 {
padding-top: var(--base-size-24, 24px) !important;
}
.pr-xl-4 {
padding-right: var(--base-size-24, 24px) !important;
}
.pb-xl-4 {
padding-bottom: var(--base-size-24, 24px) !important;
}
.pl-xl-4 {
padding-left: var(--base-size-24, 24px) !important;
}
.px-xl-4 {
padding-right: var(--base-size-24, 24px) !important;
padding-left: var(--base-size-24, 24px) !important;
}
.py-xl-4 {
padding-top: var(--base-size-24, 24px) !important;
padding-bottom: var(--base-size-24, 24px) !important;
}
.p-xl-5 {
padding: var(--base-size-32, 32px) !important;
}
.pt-xl-5 {
padding-top: var(--base-size-32, 32px) !important;
}
.pr-xl-5 {
padding-right: var(--base-size-32, 32px) !important;
}
.pb-xl-5 {
padding-bottom: var(--base-size-32, 32px) !important;
}
.pl-xl-5 {
padding-left: var(--base-size-32, 32px) !important;
}
.px-xl-5 {
padding-right: var(--base-size-32, 32px) !important;
padding-left: var(--base-size-32, 32px) !important;
}
.py-xl-5 {
padding-top: var(--base-size-32, 32px) !important;
padding-bottom: var(--base-size-32, 32px) !important;
}
.p-xl-6 {
padding: var(--base-size-40, 40px) !important;
}
.pt-xl-6 {
padding-top: var(--base-size-40, 40px) !important;
}
.pr-xl-6 {
padding-right: var(--base-size-40, 40px) !important;
}
.pb-xl-6 {
padding-bottom: var(--base-size-40, 40px) !important;
}
.pl-xl-6 {
padding-left: var(--base-size-40, 40px) !important;
}
.px-xl-6 {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
.py-xl-6 {
padding-top: var(--base-size-40, 40px) !important;
padding-bottom: var(--base-size-40, 40px) !important;
}
.pt-xl-7 {
padding-top: var(--base-size-48, 48px) !important;
}
.pr-xl-7 {
padding-right: var(--base-size-48, 48px) !important;
}
.pb-xl-7 {
padding-bottom: var(--base-size-48, 48px) !important;
}
.pl-xl-7 {
padding-left: var(--base-size-48, 48px) !important;
}
.py-xl-7 {
padding-top: var(--base-size-48, 48px) !important;
padding-bottom: var(--base-size-48, 48px) !important;
}
.pt-xl-8 {
padding-top: var(--base-size-64, 64px) !important;
}
.pr-xl-8 {
padding-right: var(--base-size-64, 64px) !important;
}
.pb-xl-8 {
padding-bottom: var(--base-size-64, 64px) !important;
}
.pl-xl-8 {
padding-left: var(--base-size-64, 64px) !important;
}
.py-xl-8 {
padding-top: var(--base-size-64, 64px) !important;
padding-bottom: var(--base-size-64, 64px) !important;
}
.pt-xl-9 {
padding-top: var(--base-size-80, 80px) !important;
}
.pr-xl-9 {
padding-right: var(--base-size-80, 80px) !important;
}
.pb-xl-9 {
padding-bottom: var(--base-size-80, 80px) !important;
}
.pl-xl-9 {
padding-left: var(--base-size-80, 80px) !important;
}
.py-xl-9 {
padding-top: var(--base-size-80, 80px) !important;
padding-bottom: var(--base-size-80, 80px) !important;
}
.pt-xl-10 {
padding-top: var(--base-size-96, 96px) !important;
}
.pr-xl-10 {
padding-right: var(--base-size-96, 96px) !important;
}
.pb-xl-10 {
padding-bottom: var(--base-size-96, 96px) !important;
}
.pl-xl-10 {
padding-left: var(--base-size-96, 96px) !important;
}
.py-xl-10 {
padding-top: var(--base-size-96, 96px) !important;
padding-bottom: var(--base-size-96, 96px) !important;
}
.pt-xl-11 {
padding-top: var(--base-size-112, 112px) !important;
}
.pr-xl-11 {
padding-right: var(--base-size-112, 112px) !important;
}
.pb-xl-11 {
padding-bottom: var(--base-size-112, 112px) !important;
}
.pl-xl-11 {
padding-left: var(--base-size-112, 112px) !important;
}
.py-xl-11 {
padding-top: var(--base-size-112, 112px) !important;
padding-bottom: var(--base-size-112, 112px) !important;
}
.pt-xl-12 {
padding-top: var(--base-size-128, 128px) !important;
}
.pr-xl-12 {
padding-right: var(--base-size-128, 128px) !important;
}
.pb-xl-12 {
padding-bottom: var(--base-size-128, 128px) !important;
}
.pl-xl-12 {
padding-left: var(--base-size-128, 128px) !important;
}
.py-xl-12 {
padding-top: var(--base-size-128, 128px) !important;
padding-bottom: var(--base-size-128, 128px) !important;
}
}
.p-responsive {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
@media (min-width: 544px) {
.p-responsive {
padding-right: var(--base-size-40, 40px) !important;
padding-left: var(--base-size-40, 40px) !important;
}
}
@media (min-width: 1012px) {
.p-responsive {
padding-right: var(--base-size-16, 16px) !important;
padding-left: var(--base-size-16, 16px) !important;
}
}


</details>

@langermank langermank requested a review from a team as a code owner November 17, 2022 01:16
@langermank langermank requested a review from simurai November 17, 2022 01:16
@changeset-bot
Copy link

changeset-bot bot commented Nov 17, 2022 •
edited
Loading

⚠️ No Changeset found

Latest commit: 09731d7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@langermank langermank changed the base branch from main to margin-utils-rem November 17, 2022 01:16
@langermank
Copy link
Contributor Author

langermank commented Nov 17, 2022

Will change to main base once #2311 is merged

@langermank langermank temporarily deployed to github-pages November 17, 2022 01:22 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview November 17, 2022 01:22 Inactive
simurai
simurai reviewed Nov 18, 2022
View reviewed changes
src/utilities/borders.scss Outdated
.rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
.rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
.rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
.rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-medium, $border-radius-3) !important; }
Copy link
Contributor

@simurai simurai Nov 18, 2022

Choose a reason for hiding this comment

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

Should this be --primer-borderRadius-large? With feature flag enabled it would increase 8px -> 12px.

Copy link
Contributor Author

@langermank langermank Nov 18, 2022

Choose a reason for hiding this comment

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

I went with medium here thinking it would be a less drastic change.

$border-radius-3 is 8px while borderRadius-large is 12px, so 4px vs. 2px difference.. but maybe we should just go ahead and test the new larger radius 😄 I'm just not sure where we intend to use it other than Overlay.

Base automatically changed from margin-utils-rem to main November 21, 2022 17:34
@langermank langermank temporarily deployed to github-pages November 21, 2022 17:46 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview November 21, 2022 17:47 Inactive
@langermank langermank temporarily deployed to github-pages November 21, 2022 18:02 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview November 21, 2022 18:03 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview November 21, 2022 21:22 Inactive
@github-actions github-actions bot temporarily deployed to Storybook Preview November 21, 2022 21:28 Inactive
@langermank langermank merged commit 15ef15b into main Nov 21, 2022
@langermank langermank deleted the padding-utils-rem branch November 21, 2022 21:33
@langermank langermank restored the padding-utils-rem branch November 21, 2022 21:45
langermank added a commit that referenced this pull request Nov 21, 2022
@langermank
Revert "Convert padding and border utilities to rem units with fallba…
2c14915 
…cks (#2315)"

This reverts commit 15ef15b.
@langermank langermank mentioned this pull request Nov 21, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@simurai simurai simurai left review comments

@jonrohan jonrohan jonrohan approved these changes

Assignees

No one assigned

Labels

minor release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@langermank @jonrohan @simurai @actions-user