Skip to content

Commit

Permalink
Unify Text responsive styles (#11724)
Browse files Browse the repository at this point in the history 
This PR:

- Detaches the semantic theme tokens from the `Text` component
- Uses a unified set of responsive styles for mobile typography

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1486

### WHAT is this pull request doing?

<details>
  <summary>Demo of responsive text</summary>
<img width="600"
src="https://github.com/Shopify/polaris/assets/11774595/784ea93d-27cc-41f2-b3fa-434ca70173bf"
alt="Demo of responsive text" />
</details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
  • Loading branch information
@sam-b-rose
sam-b-rose committed Mar 15, 2024
1 parent 79fc9a5 commit 1543246
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 52 deletions.
5 changes: 5 additions & 0 deletions .changeset/four-years-nail.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Updated responsive styles for `Text` component
120 changes: 68 additions & 52 deletions polaris-react/src/components/Text/Text.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,101 +63,117 @@
}

.headingXs {
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);
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);
}

.headingSm {
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);
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);
}
}

.headingMd {
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);
}
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);

.headingLg {
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);
@media (--p-breakpoints-md-up) {
font-size: var(--p-font-size-350);
}
}

.headingXl {
.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);
}

.headingXl {
font-size: var(--p-font-size-550);
font-weight: var(--p-font-weight-bold);
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-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);
font-size: var(--p-font-size-600);
}
}

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

@media (--p-breakpoints-md-up) {
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);
font-size: var(--p-font-size-750);
line-height: var(--p-font-line-height-1000);
}
}

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

@media (--p-breakpoints-md-up) {
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);
}
}

.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);
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);
}
}

.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);
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);

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

.bodyMd {
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);
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);
}
}

.bodyLg {
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-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-weight must be below variant styles so
Expand Down

0 comments on commit 1543246

Please sign in to comment.