Skip to content

Commit 082388a

Browse files
mark-fitzgeraldmark-fitzgerald
authored
[CSS] Break Perseus styling into its own Cascade Layers (#3113)
## Summary: Perseus is currently experiencing two key pain points in regards to its styling: - Internal - Perseus' `.paragraph` class name - External - Inability to override Wonder Blocks styling with class names These pain points make it difficult to efficiently craft widgets with their intended look-and-feel. They also make it difficult to anticipate and prevent regressions caused by seemingly unrelated styling or context changes. This PR addresses the first pain point (Internal) by adding Perseus-specific sub-layers to the Cascade Layers hierarchy. Two sub-layers have been added: **_libraries_** and **_perseus-legacy_**. Most all the styling that is bundled in the `perseus-renderer.css` file is placed within the **_perseus-legacy_** layer. Styling for the widgets themselves (either via CSS Modules or Aphrodite) remains in the base **_shared_** layer. This change now makes it possible to specify styling within a widget and have it override an overly broad style (usually associated with the `.paragraph` class) without the need to resort to terribly long selectors to achieve a higher specificity value. Issue: LEMS-3761 ## Test plan: 1. Review Chromatic snapshots for any discrepancies (the following exceptions are being accepted) - Matrix editor textarea width - There was a fixed width applied that wasn't needed. While the snapshot shows a difference, the actual editor doesn't exhibit any difference. - Radio widget choice line-height - There is a minor offset as a result of this change. It is not being addressed here because a ticket is already in place to address alignment more explicitly. 2. Review content in [Khan Classic ZND](https://prod-znd-251211-2890-6cd0c10.khanacademy.org/) 3. Review content in [Khan Classroom ZND](https://prod-znd-251211-2890-6cd0c10--classroom.khanacademy.org/) Author: mark-fitzgerald Reviewers: mark-fitzgerald, ivyolamit, anakaren-rojas, catandthemachines, SonicScrewdriver Required Reviewers: Approved By: ivyolamit, anakaren-rojas, catandthemachines Checks: ⏭️ 1 check has been skipped, ✅ 10 checks were successful Pull Request URL: #3113
1 parent 9eb52fe commit 082388a

File tree

9 files changed

+394
-365
lines changed

9 files changed

+394
-365
lines changed

‎.changeset/wet-llamas-join.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@khanacademy/math-input": minor
3+
"@khanacademy/perseus": minor
4+
---
5+
6+
Break Perseus styling into its own Cascade Layers

‎.storybook/main.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,12 @@ const cssWrapper = {
1414
if (pathname.endsWith(".css")) {
1515
// Exclude the CSS files that are not part of the shared layer.
1616
if (!excludedCssFiles.some((file) => pathname.endsWith(file))) {
17-
// Exclude any CSS file that already has a layer statement.
18-
if (!code.includes("@layer")) {
17+
// Exclude any CSS file that already has a layer statement,
18+
// unless it is specifying a sub-layer.
19+
if (
20+
!code.includes("@layer") ||
21+
/(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code)
22+
) {
1923
const layerStatements =
2024
"@layer reset, shared, legacy;\n@layer shared";
2125
return {

‎packages/math-input/styles/main.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
@import "mathquill/build/mathquill.css";
1+
@layer libraries, perseus-legacy;
2+
3+
@import "mathquill/build/mathquill.css" layer(libraries);
4+
25
.keypad-input {
36
outline: none !important;
47
}

‎packages/perseus/src/styles/paragraph-styles.css‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
.framework-perseus.perseus-article:not(.perseus-mobile)
2+
.perseus-renderer
3+
> .paragraph {
4+
color: #21242c;
5+
font-size: 20px;
6+
line-height: 30px;
7+
margin: 0 auto;
8+
max-width: 688px;
9+
}
10+
.framework-perseus.perseus-article:not(.perseus-mobile)
11+
.perseus-renderer
12+
> .paragraph
13+
.paragraph {
14+
color: #21242c;
15+
font-size: 20px;
16+
line-height: 30px;
17+
margin-bottom: 32px;
18+
margin-top: 0;
19+
}
20+
/* Reset the Renderer margins for the image widget.
21+
The image widget title and caption shouldn't have margins,
22+
so we need to override the above styles. */
23+
.framework-perseus.perseus-article:not(.perseus-mobile)
24+
.perseus-image-widget
25+
.perseus-renderer
26+
.paragraph {
27+
margin-bottom: 0;
28+
}
29+
.framework-perseus.perseus-article:not(.perseus-mobile)
30+
.perseus-renderer
31+
> .paragraph
32+
mjx-container {
33+
font-size: 100%;
34+
}
35+
.framework-perseus.perseus-article:not(.perseus-mobile)
36+
.perseus-renderer
37+
> .paragraph
38+
ul:not([data-widget="radio"]) {
39+
color: #21242c;
40+
font-size: 20px;
41+
line-height: 30px;
42+
}
43+
.framework-perseus.perseus-article:not(.perseus-mobile)
44+
.perseus-image-caption
45+
.perseus-renderer
46+
.paragraph
47+
.paragraph,
48+
.framework-perseus.perseus-article:not(.perseus-mobile)
49+
.perseus-image-caption
50+
.perseus-renderer
51+
.paragraph
52+
ol,
53+
.framework-perseus.perseus-article:not(.perseus-mobile)
54+
.perseus-image-caption
55+
.perseus-renderer
56+
.paragraph
57+
ul {
58+
color: rgba(33, 36, 44, 0.64);
59+
font-size: 14px;
60+
line-height: 19px;
61+
text-align: left;
62+
}
63+
.framework-perseus.perseus-article:not(.perseus-mobile)
64+
.paragraph.perseus-paragraph-full-width {
65+
margin-bottom: 32px;
66+
margin-left: 0;
67+
margin-right: 0;
68+
max-width: none;
69+
}
70+
.framework-perseus.perseus-article:not(.perseus-mobile)
71+
.paragraph.perseus-paragraph-full-width
72+
> .paragraph {
73+
margin: 0;
74+
max-width: none;
75+
}
76+
.framework-perseus.perseus-article:not(.perseus-mobile)
77+
.perseus-renderer
78+
> .paragraph
79+
.perseus-formats-tooltip {
80+
padding: 8px 12px;
81+
}
82+
.framework-perseus.perseus-article:not(.perseus-mobile)
83+
.perseus-renderer
84+
> .paragraph
85+
.perseus-formats-tooltip
86+
.paragraph {
87+
margin-bottom: 0;
88+
}
89+
.framework-perseus.perseus-article:not(.perseus-mobile)
90+
.perseus-renderer
91+
> .paragraph
92+
.perseus-formats-tooltip
93+
.paragraph
94+
ul:not([data-widget="radio"]) {
95+
font-size: 15px;
96+
line-height: 1.5;
97+
margin: 0;
98+
}
99+
.framework-perseus.perseus-mobile
100+
.perseus-article
101+
.perseus-renderer
102+
> .paragraph {
103+
margin-left: auto;
104+
margin-right: auto;
105+
max-width: 700px;
106+
}
107+
.framework-perseus.perseus-mobile
108+
.perseus-article
109+
.paragraph.perseus-paragraph-full-width {
110+
margin-left: 0;
111+
margin-right: 0;
112+
max-width: none;
113+
}
114+
.framework-perseus.perseus-mobile
115+
.perseus-article
116+
.paragraph.perseus-paragraph-full-width
117+
> .paragraph {
118+
margin: 0;
119+
max-width: none;
120+
}
121+
.framework-perseus.perseus-mobile :not(blockquote) > div.paragraph {
122+
margin: 0;
123+
}
124+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
125+
margin: 0 auto;
126+
}
127+
.framework-perseus.perseus-mobile
128+
.perseus-renderer
129+
> .paragraph:not(:first-child) {
130+
margin-top: var(--wb-sizing-size_240);
131+
margin-bottom: var(--wb-sizing-size_240);
132+
}
133+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph {
134+
margin: 0;
135+
}
136+
.framework-perseus.perseus-mobile
137+
.perseus-renderer
138+
> .paragraph
139+
ul:not([data-widget="radio"], .indicatorContainer) {
140+
margin: 0 0 0 1em;
141+
padding: 0;
142+
}
143+
.framework-perseus.perseus-mobile
144+
.perseus-renderer
145+
> .paragraph
146+
ul:not([data-widget="radio"], .indicatorContainer)
147+
> li {
148+
padding-left: 10px;
149+
margin-bottom: 24px;
150+
}
151+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
152+
margin: 0;
153+
padding-left: 32px;
154+
}
155+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li {
156+
list-style-type: decimal;
157+
margin-bottom: 24px;
158+
}
159+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol,
160+
.framework-perseus.perseus-mobile
161+
.perseus-renderer
162+
> .paragraph
163+
ul:not([data-widget="radio"])
164+
ol,
165+
.framework-perseus.perseus-mobile
166+
.perseus-renderer
167+
> .paragraph
168+
ol
169+
ul:not([data-widget="radio"]),
170+
.framework-perseus.perseus-mobile
171+
.perseus-renderer
172+
> .paragraph
173+
ul:not([data-widget="radio"])
174+
ul:not([data-widget="radio"]) {
175+
padding-top: 24px;
176+
}
177+
@media (max-width: 767px) {
178+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
179+
max-width: none;
180+
}
181+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
182+
font-family: inherit;
183+
font-size: 18px;
184+
line-height: 1.4;
185+
color: #626569;
186+
}
187+
.framework-perseus.perseus-mobile
188+
.perseus-renderer
189+
> .paragraph
190+
.paragraph {
191+
font-family: inherit;
192+
font-size: 18px;
193+
line-height: 1.4;
194+
color: #626569;
195+
}
196+
.framework-perseus.perseus-mobile
197+
.perseus-renderer
198+
> .paragraph
199+
ul:not([data-widget="radio"]) {
200+
font-family: inherit;
201+
font-size: 18px;
202+
line-height: 1.4;
203+
color: #626569;
204+
}
205+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
206+
font-family: inherit;
207+
font-size: 18px;
208+
line-height: 1.4;
209+
color: #626569;
210+
}
211+
.framework-perseus.perseus-mobile
212+
.perseus-image-caption
213+
.paragraph
214+
.paragraph {
215+
color: #888d93;
216+
font-size: 14px;
217+
line-height: 1.3;
218+
text-align: left;
219+
}
220+
}
221+
@media (min-width: 767px) and (max-width: 1199px) {
222+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
223+
max-width: 512px;
224+
}
225+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
226+
font-family: inherit;
227+
font-size: 20px;
228+
line-height: 1.5;
229+
color: #626569;
230+
}
231+
.framework-perseus.perseus-mobile
232+
.perseus-renderer
233+
> .paragraph
234+
.paragraph {
235+
font-family: inherit;
236+
font-size: 20px;
237+
line-height: 1.5;
238+
color: #626569;
239+
}
240+
.framework-perseus.perseus-mobile
241+
.perseus-renderer
242+
> .paragraph
243+
ul:not([data-widget="radio"]) {
244+
font-family: inherit;
245+
font-size: 20px;
246+
line-height: 1.5;
247+
color: #626569;
248+
}
249+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
250+
font-family: inherit;
251+
font-size: 20px;
252+
line-height: 1.5;
253+
color: #626569;
254+
}
255+
.framework-perseus.perseus-mobile
256+
.perseus-image-caption
257+
.paragraph
258+
.paragraph {
259+
color: #888d93;
260+
font-size: 17px;
261+
line-height: 1.4;
262+
text-align: left;
263+
}
264+
}
265+
@media (min-width: 1200px) {
266+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
267+
max-width: 688px;
268+
}
269+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph {
270+
font-family: inherit;
271+
font-size: 22px;
272+
line-height: 1.4;
273+
color: #626569;
274+
}
275+
.framework-perseus.perseus-mobile
276+
.perseus-renderer
277+
> .paragraph
278+
.paragraph {
279+
font-family: inherit;
280+
font-size: 22px;
281+
line-height: 1.4;
282+
color: #626569;
283+
}
284+
.framework-perseus.perseus-mobile
285+
.perseus-renderer
286+
> .paragraph
287+
ul:not([data-widget="radio"]) {
288+
font-family: inherit;
289+
font-size: 22px;
290+
line-height: 1.4;
291+
color: #626569;
292+
}
293+
.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol {
294+
font-family: inherit;
295+
font-size: 22px;
296+
line-height: 1.4;
297+
color: #626569;
298+
}
299+
.framework-perseus.perseus-mobile
300+
.perseus-image-caption
301+
.paragraph
302+
.paragraph {
303+
color: #888d93;
304+
font-size: 20px;
305+
line-height: 1.4;
306+
text-align: left;
307+
}
308+
}
309+
.framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width {
310+
margin-left: 0;
311+
margin-right: 0;
312+
max-width: none;
313+
}
314+
.framework-perseus.perseus-mobile
315+
.paragraph.perseus-paragraph-full-width
316+
> .paragraph {
317+
margin: 0;
318+
max-width: none;
319+
}
320+
.framework-perseus.perseus-mobile
321+
.perseus-renderer
322+
> .paragraph
323+
.perseus-formats-tooltip {
324+
padding: 8px 12px;
325+
}
326+
.framework-perseus.perseus-mobile
327+
.perseus-renderer
328+
> .paragraph
329+
.perseus-formats-tooltip
330+
.paragraph {
331+
margin-bottom: 0;
332+
}
333+
.framework-perseus.perseus-mobile
334+
.perseus-renderer
335+
> .paragraph
336+
.perseus-formats-tooltip
337+
.paragraph
338+
ul:not([data-widget="radio"]) {
339+
font-size: 15px;
340+
line-height: 1.5;
341+
margin: 0;
342+
}

‎packages/perseus/src/styles/perseus-renderer-part-1.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
top: 0;
2121
left: 0;
2222
}
23-
var,
23+
.graphie var,
2424
div.graphie {
2525
white-space: pre;
2626
/**

‎packages/perseus/src/styles/perseus-renderer-part-2.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,3 @@
175175
font-size: 18px;
176176
}
177177
}
178-
.perseus-widget-editor-content .perseus-editor-accordion h2 {
179-
padding-top: 0;
180-
}

0 commit comments

Comments
 (0)