Skip to content

Commit 810532c

Browse files
sam-b-rosesam-b-rose
authored
Revert "Unify Text responsive styles" (#11833)
Reverts #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) |
1 parent c8dc013 commit 810532c

File tree

6 files changed

+67
-103
lines changed

6 files changed

+67
-103
lines changed

‎.changeset/cuddly-goats-remain.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Revert responsive text style updates

‎polaris-react/postcss-mixins/text-style-input.css

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
@define-mixin text-style-input {
2-
font-size: var(--p-font-size-400);
2+
font-size: var(--p-font-size-325);
33
font-weight: var(--p-font-weight-regular);
4-
line-height: var(--p-font-line-height-600);
4+
line-height: var(--p-font-line-height-500);
55
border: none;
66
letter-spacing: initial;
7-
8-
@media (--p-breakpoints-md-up) {
9-
font-size: var(--p-font-size-325);
10-
line-height: var(--p-font-line-height-500);
11-
}
127
}

‎polaris-react/src/components/AppProvider/global.css

+2-7
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,12 @@
5353

5454
html,
5555
body {
56-
font-size: var(--p-font-size-400);
57-
line-height: var(--p-font-line-height-600);
56+
font-size: var(--p-font-size-325);
57+
line-height: var(--p-font-line-height-500);
5858
font-weight: var(--p-font-weight-regular);
5959
font-feature-settings: 'calt' 0;
6060
letter-spacing: initial;
6161
color: var(--p-color-text);
62-
63-
@media (--p-breakpoints-md-up) {
64-
font-size: var(--p-font-size-325);
65-
line-height: var(--p-font-line-height-500);
66-
}
6762
}
6863

6964
html,

‎polaris-react/src/components/Select/Select.module.css

+2-7
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,9 @@
8787

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

9494
/* Safari requires the font-family to be added to the <select> element */
9595
font-family: var(--p-font-family-sans);
@@ -112,11 +112,6 @@
112112
/* Google chrome on Windows requires padding to be added otherwise <option> has no space */
113113
padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
114114
var(--p-space-300);
115-
116-
@media (--p-breakpoints-md-up) {
117-
font-size: var(--p-font-size-325);
118-
line-height: var(--p-font-line-height-500);
119-
}
120115
}
121116

122117
.Backdrop {

‎polaris-react/src/components/Text/Text.module.css

+52-68
Original file line numberDiff line numberDiff line change
@@ -79,117 +79,101 @@
7979
}
8080

8181
.headingXs {
82-
font-size: var(--p-font-size-300);
83-
font-weight: var(--p-font-weight-semibold);
84-
letter-spacing: var(--p-font-letter-spacing-normal);
85-
line-height: var(--p-font-line-height-400);
82+
font-size: var(--p-text-heading-xs-font-size);
83+
font-weight: var(--p-text-heading-xs-font-weight);
84+
letter-spacing: var(--p-text-heading-xs-font-letter-spacing);
85+
line-height: var(--p-text-heading-xs-font-line-height);
8686
}
8787

8888
.headingSm {
89-
font-size: var(--p-font-size-350);
90-
font-weight: var(--p-font-weight-semibold);
91-
letter-spacing: var(--p-font-letter-spacing-normal);
92-
line-height: var(--p-font-line-height-500);
93-
94-
@media (--p-breakpoints-md-up) {
95-
font-size: var(--p-font-size-325);
96-
}
89+
font-size: var(--p-text-heading-sm-font-size);
90+
font-weight: var(--p-text-heading-sm-font-weight);
91+
letter-spacing: var(--p-text-heading-sm-font-letter-spacing);
92+
line-height: var(--p-text-heading-sm-font-line-height);
9793
}
9894

9995
.headingMd {
100-
font-size: var(--p-font-size-400);
101-
font-weight: var(--p-font-weight-semibold);
102-
letter-spacing: var(--p-font-letter-spacing-normal);
103-
line-height: var(--p-font-line-height-500);
104-
105-
@media (--p-breakpoints-md-up) {
106-
font-size: var(--p-font-size-350);
107-
}
96+
font-size: var(--p-text-heading-md-font-size);
97+
font-weight: var(--p-text-heading-md-font-weight);
98+
letter-spacing: var(--p-text-heading-md-font-letter-spacing);
99+
line-height: var(--p-text-heading-md-font-line-height);
108100
}
109101

110102
.headingLg {
111-
font-size: var(--p-font-size-500);
112-
font-weight: var(--p-font-weight-semibold);
113-
letter-spacing: var(--p-font-letter-spacing-dense);
114-
line-height: var(--p-font-line-height-600);
103+
font-size: var(--p-text-heading-lg-font-size);
104+
font-weight: var(--p-text-heading-lg-font-weight);
105+
letter-spacing: var(--p-text-heading-lg-font-letter-spacing);
106+
line-height: var(--p-text-heading-lg-font-line-height);
115107
}
116108

117109
.headingXl {
118-
font-size: var(--p-font-size-550);
119-
font-weight: var(--p-font-weight-bold);
110+
font-size: var(--p-font-size-500);
111+
font-weight: var(--p-font-weight-semibold);
120112
letter-spacing: var(--p-font-letter-spacing-dense);
121-
line-height: var(--p-font-line-height-800);
113+
line-height: var(--p-font-line-height-600);
122114

123115
@media (--p-breakpoints-md-up) {
124-
font-size: var(--p-font-size-600);
116+
font-size: var(--p-text-heading-xl-font-size);
117+
font-weight: var(--p-text-heading-xl-font-weight);
118+
letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
119+
line-height: var(--p-text-heading-xl-font-line-height);
125120
}
126121
}
127122

128123
.heading2xl {
129124
font-size: var(--p-font-size-600);
130125
font-weight: var(--p-font-weight-bold);
131-
letter-spacing: var(--p-font-letter-spacing-denser);
126+
letter-spacing: var(--p-font-letter-spacing-dense);
132127
line-height: var(--p-font-line-height-800);
133128

134129
@media (--p-breakpoints-md-up) {
135-
font-size: var(--p-font-size-750);
136-
line-height: var(--p-font-line-height-1000);
130+
font-size: var(--p-text-heading-2xl-font-size);
131+
font-weight: var(--p-text-heading-2xl-font-weight);
132+
letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
133+
line-height: var(--p-text-heading-2xl-font-line-height);
137134
}
138135
}
139136

140137
.heading3xl {
141-
font-size: var(--p-font-size-800);
138+
font-size: var(--p-font-size-750);
142139
font-weight: var(--p-font-weight-bold);
143140
letter-spacing: var(--p-font-letter-spacing-denser);
144141
line-height: var(--p-font-line-height-1000);
145-
}
146-
147-
.bodyXs {
148-
font-size: var(--p-font-size-300);
149-
font-weight: var(--p-font-weight-regular);
150-
letter-spacing: var(--p-font-letter-spacing-normal);
151-
line-height: var(--p-font-line-height-400);
152142

153143
@media (--p-breakpoints-md-up) {
154-
font-size: var(--p-font-size-275);
155-
line-height: var(--p-font-line-height-300);
144+
font-size: var(--p-text-heading-3xl-font-size);
145+
font-weight: var(--p-text-heading-3xl-font-weight);
146+
letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
147+
line-height: var(--p-text-heading-3xl-font-line-height);
156148
}
157149
}
158150

159-
.bodySm {
160-
font-size: var(--p-font-size-350);
161-
font-weight: var(--p-font-weight-regular);
162-
letter-spacing: var(--p-font-letter-spacing-normal);
163-
line-height: var(--p-font-line-height-500);
151+
.bodyXs {
152+
font-size: var(--p-text-body-xs-font-size);
153+
font-weight: var(--p-text-body-xs-font-weight);
154+
letter-spacing: var(--p-text-body-xs-font-letter-spacing);
155+
line-height: var(--p-text-body-xs-font-line-height);
156+
}
164157

165-
@media (--p-breakpoints-md-up) {
166-
font-size: var(--p-font-size-300);
167-
line-height: var(--p-font-line-height-400);
168-
}
158+
.bodySm {
159+
font-size: var(--p-text-body-sm-font-size);
160+
font-weight: var(--p-text-body-sm-font-weight);
161+
letter-spacing: var(--p-text-body-sm-font-letter-spacing);
162+
line-height: var(--p-text-body-sm-font-line-height);
169163
}
170164

171165
.bodyMd {
172-
font-size: var(--p-font-size-400);
173-
font-weight: var(--p-font-weight-regular);
174-
letter-spacing: var(--p-font-letter-spacing-normal);
175-
line-height: var(--p-font-line-height-600);
176-
177-
@media (--p-breakpoints-md-up) {
178-
font-size: var(--p-font-size-325);
179-
line-height: var(--p-font-line-height-500);
180-
}
166+
font-size: var(--p-text-body-md-font-size);
167+
font-weight: var(--p-text-body-sm-font-weight);
168+
letter-spacing: var(--p-text-body-md-font-letter-spacing);
169+
line-height: var(--p-text-body-md-font-line-height);
181170
}
182171

183172
.bodyLg {
184-
font-size: var(--p-font-size-450);
185-
font-weight: var(--p-font-weight-regular);
186-
letter-spacing: var(--p-font-letter-spacing-normal);
187-
line-height: var(--p-font-line-height-600);
188-
189-
@media (--p-breakpoints-md-up) {
190-
font-size: var(--p-font-size-350);
191-
line-height: var(--p-font-line-height-500);
192-
}
173+
font-size: var(--p-text-body-lg-font-size);
174+
font-weight: var(--p-text-body-sm-font-weight);
175+
letter-spacing: var(--p-text-body-lg-font-letter-spacing);
176+
line-height: var(--p-text-body-lg-font-line-height);
193177
}
194178

195179
/* font-weight must be below variant styles so

‎polaris-react/src/components/TextField/TextField.module.css

+4-14
Original file line numberDiff line numberDiff line change
@@ -222,14 +222,9 @@
222222
min-width: 1em;
223223
grid-area: 1 / 2;
224224
padding: 0 var(--p-space-300);
225-
font-size: var(--p-font-size-400);
225+
font-size: var(--p-font-size-325);
226226
font-weight: var(--p-font-weight-regular);
227-
line-height: var(--p-font-line-height-600);
228-
229-
@media (--p-breakpoints-md-up) {
230-
font-size: var(--p-font-size-325);
231-
line-height: var(--p-font-line-height-500);
232-
}
227+
line-height: var(--p-font-line-height-500);
233228
}
234229
}
235230

@@ -251,9 +246,9 @@
251246
}
252247

253248
.Input {
254-
font-size: var(--p-font-size-400);
249+
font-size: var(--p-font-size-325);
255250
font-weight: var(--p-font-weight-regular);
256-
line-height: var(--p-font-line-height-600);
251+
line-height: var(--p-font-line-height-500);
257252
letter-spacing: initial;
258253
position: relative;
259254
/* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
@@ -273,11 +268,6 @@
273268
color: var(--p-color-text);
274269
align-items: center;
275270

276-
@media (--p-breakpoints-md-up) {
277-
font-size: var(--p-font-size-325);
278-
line-height: var(--p-font-line-height-500);
279-
}
280-
281271
.Prefix + & {
282272
padding-left: 0;
283273
}

0 commit comments

Comments
 (0)