Skip to content

Commit

Permalink
Revert "Unify Text responsive styles" (Shopify#11833)
Browse files Browse the repository at this point in the history 
Reverts Shopify#11724

| Unified (current) | Reverted (after) |
| --- | --- |
|
![unified](https://github.com/Shopify/polaris/assets/11774595/5a499d4d-a577-45dd-a2be-afd3ed1c2fa1)
|
![reverted](https://github.com/Shopify/polaris/assets/11774595/598947d0-e06c-4938-bfcb-20ee55618dd2)
|
  • Loading branch information
@sam-b-rose
sam-b-rose committed Apr 4, 2024
1 parent 5f252cd commit d5cb5ea
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 103 deletions.
5 changes: 5 additions & 0 deletions .changeset/cuddly-goats-remain.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Revert responsive text style updates
9 changes: 2 additions & 7 deletions polaris-react/postcss-mixins/text-style-input.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
@define-mixin text-style-input {
font-size: var(--p-font-size-400);
font-size: var(--p-font-size-325);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-600);
line-height: var(--p-font-line-height-500);
border: none;
letter-spacing: initial;

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}
}
9 changes: 2 additions & 7 deletions polaris-react/src/components/AppProvider/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,12 @@

html,
body {
font-size: var(--p-font-size-400);
line-height: var(--p-font-line-height-600);
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
font-weight: var(--p-font-weight-regular);
font-feature-settings: 'calt' 0;
letter-spacing: initial;
color: var(--p-color-text);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}
}

html,
Expand Down
9 changes: 2 additions & 7 deletions polaris-react/src/components/Select/Select.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@

.Input {
/* Even though the input is invisible, text styles apply to the options menu */
font-size: var(--p-font-size-400);
font-size: var(--p-font-size-325);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-600);
line-height: var(--p-font-line-height-500);

/* Safari requires the font-family to be added to the <select> element */
font-family: var(--p-font-family-sans);
Expand All @@ -112,11 +112,6 @@
/* Google chrome on Windows requires padding to be added otherwise <option> has no space */
padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
var(--p-space-300);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}
}

.Backdrop {
Expand Down
120 changes: 52 additions & 68 deletions polaris-react/src/components/Text/Text.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,117 +79,101 @@
}

.headingXs {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-400);
font-size: var(--p-text-heading-xs-font-size);
font-weight: var(--p-text-heading-xs-font-weight);
letter-spacing: var(--p-text-heading-xs-font-letter-spacing);
line-height: var(--p-text-heading-xs-font-line-height);
}

.headingSm {
font-size: var(--p-font-size-350);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-500);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
}
font-size: var(--p-text-heading-sm-font-size);
font-weight: var(--p-text-heading-sm-font-weight);
letter-spacing: var(--p-text-heading-sm-font-letter-spacing);
line-height: var(--p-text-heading-sm-font-line-height);
}

.headingMd {
font-size: var(--p-font-size-400);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-500);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-350);
}
font-size: var(--p-text-heading-md-font-size);
font-weight: var(--p-text-heading-md-font-weight);
letter-spacing: var(--p-text-heading-md-font-letter-spacing);
line-height: var(--p-text-heading-md-font-line-height);
}

.headingLg {
font-size: var(--p-font-size-500);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-dense);
line-height: var(--p-font-line-height-600);
font-size: var(--p-text-heading-lg-font-size);
font-weight: var(--p-text-heading-lg-font-weight);
letter-spacing: var(--p-text-heading-lg-font-letter-spacing);
line-height: var(--p-text-heading-lg-font-line-height);
}

.headingXl {
font-size: var(--p-font-size-550);
font-weight: var(--p-font-weight-bold);
font-size: var(--p-font-size-500);
font-weight: var(--p-font-weight-semibold);
letter-spacing: var(--p-font-letter-spacing-dense);
line-height: var(--p-font-line-height-800);
line-height: var(--p-font-line-height-600);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-600);
font-size: var(--p-text-heading-xl-font-size);
font-weight: var(--p-text-heading-xl-font-weight);
letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
line-height: var(--p-text-heading-xl-font-line-height);
}
}

.heading2xl {
font-size: var(--p-font-size-600);
font-weight: var(--p-font-weight-bold);
letter-spacing: var(--p-font-letter-spacing-denser);
letter-spacing: var(--p-font-letter-spacing-dense);
line-height: var(--p-font-line-height-800);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-750);
line-height: var(--p-font-line-height-1000);
font-size: var(--p-text-heading-2xl-font-size);
font-weight: var(--p-text-heading-2xl-font-weight);
letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
line-height: var(--p-text-heading-2xl-font-line-height);
}
}

.heading3xl {
font-size: var(--p-font-size-800);
font-size: var(--p-font-size-750);
font-weight: var(--p-font-weight-bold);
letter-spacing: var(--p-font-letter-spacing-denser);
line-height: var(--p-font-line-height-1000);
}

.bodyXs {
font-size: var(--p-font-size-300);
font-weight: var(--p-font-weight-regular);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-400);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-275);
line-height: var(--p-font-line-height-300);
font-size: var(--p-text-heading-3xl-font-size);
font-weight: var(--p-text-heading-3xl-font-weight);
letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
line-height: var(--p-text-heading-3xl-font-line-height);
}
}

.bodySm {
font-size: var(--p-font-size-350);
font-weight: var(--p-font-weight-regular);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-500);
.bodyXs {
font-size: var(--p-text-body-xs-font-size);
font-weight: var(--p-text-body-xs-font-weight);
letter-spacing: var(--p-text-body-xs-font-letter-spacing);
line-height: var(--p-text-body-xs-font-line-height);
}

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-300);
line-height: var(--p-font-line-height-400);
}
.bodySm {
font-size: var(--p-text-body-sm-font-size);
font-weight: var(--p-text-body-sm-font-weight);
letter-spacing: var(--p-text-body-sm-font-letter-spacing);
line-height: var(--p-text-body-sm-font-line-height);
}

.bodyMd {
font-size: var(--p-font-size-400);
font-weight: var(--p-font-weight-regular);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-600);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}
font-size: var(--p-text-body-md-font-size);
font-weight: var(--p-text-body-sm-font-weight);
letter-spacing: var(--p-text-body-md-font-letter-spacing);
line-height: var(--p-text-body-md-font-line-height);
}

.bodyLg {
font-size: var(--p-font-size-450);
font-weight: var(--p-font-weight-regular);
letter-spacing: var(--p-font-letter-spacing-normal);
line-height: var(--p-font-line-height-600);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-350);
line-height: var(--p-font-line-height-500);
}
font-size: var(--p-text-body-lg-font-size);
font-weight: var(--p-text-body-sm-font-weight);
letter-spacing: var(--p-text-body-lg-font-letter-spacing);
line-height: var(--p-text-body-lg-font-line-height);
}

/* font-weight must be below variant styles so
Expand Down
18 changes: 4 additions & 14 deletions polaris-react/src/components/TextField/TextField.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,14 +222,9 @@
min-width: 1em;
grid-area: 1 / 2;
padding: 0 var(--p-space-300);
font-size: var(--p-font-size-400);
font-size: var(--p-font-size-325);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-600);

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}
line-height: var(--p-font-line-height-500);
}
}

Expand All @@ -251,9 +246,9 @@
}

.Input {
font-size: var(--p-font-size-400);
font-size: var(--p-font-size-325);
font-weight: var(--p-font-weight-regular);
line-height: var(--p-font-line-height-600);
line-height: var(--p-font-line-height-500);
letter-spacing: initial;
position: relative;
/* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
Expand All @@ -273,11 +268,6 @@
color: var(--p-color-text);
align-items: center;

@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-325);
line-height: var(--p-font-line-height-500);
}

.Prefix + & {
padding-left: 0;
}
Expand Down

0 comments on commit d5cb5ea

Please sign in to comment.