From 11a13f67f86e1616992b723b607e04e9b6d39da3 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Tue, 9 Dec 2025 16:31:58 -0800 Subject: [PATCH 01/10] [LEMS-3761-implement-cascade-layers-within-perseus] docs(changeset): Break Perseus styling into its own Cascade Layers --- .changeset/wet-llamas-join.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-llamas-join.md diff --git a/.changeset/wet-llamas-join.md b/.changeset/wet-llamas-join.md new file mode 100644 index 00000000000..2082cb6a39b --- /dev/null +++ b/.changeset/wet-llamas-join.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": minor +--- + +Break Perseus styling into its own Cascade Layers From 857b7adbbee5fd27f4717738bbc789006e2e14cd Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Tue, 9 Dec 2025 17:06:43 -0800 Subject: [PATCH 02/10] [LEMS-3761-implement-cascade-layers-within-perseus] Add "perseus-legacy" layer internal to Perseus for styling differentiation. --- .storybook/main.ts | 2 +- .../perseus/src/styles/perseus-renderer.css | 52 ++++++++++--------- .../src/widgets/radio/choice.module.css | 15 ++++-- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 7de702cffb2..1f58cd494d0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,7 +15,7 @@ const cssWrapper = { // Exclude the CSS files that are not part of the shared layer. if (!excludedCssFiles.some((file) => pathname.endsWith(file))) { // Exclude any CSS file that already has a layer statement. - if (!code.includes("@layer")) { + if (!code.includes("@layer") || code.includes("@layer perseus-legacy")) { const layerStatements = "@layer reset, shared, legacy;\n@layer shared"; return { diff --git a/packages/perseus/src/styles/perseus-renderer.css b/packages/perseus/src/styles/perseus-renderer.css index 61635223ece..e52c59cf0b5 100644 --- a/packages/perseus/src/styles/perseus-renderer.css +++ b/packages/perseus/src/styles/perseus-renderer.css @@ -1,28 +1,30 @@ -@import "./util.css"; -@import "./styles.css"; -@import "./perseus-renderer-part-1.css"; -@import "widgets/categorizer.css"; -@import "widgets/dropdown.css"; -@import "widgets/expression.css"; -@import "widgets/free-response.css"; -@import "widgets/grapher.css"; -@import "widgets/graded-group.css"; -@import "widgets/group.css"; -@import "widgets/image.css"; -@import "widgets/interactive-graph.css"; -@import "widgets/label-image.css"; -@import "widgets/matcher.css"; -@import "widgets/matrix.css"; -@import "widgets/measurer.css"; -@import "widgets/numeric.css"; -@import "widgets/orderer.css"; -@import "widgets/passage.css"; -@import "widgets/plotter.css"; -@import "widgets/radio.css"; -@import "widgets/sortable.css"; -@import "widgets/table.css"; -@import "widget-container.css"; -@import "./perseus-renderer-part-2.css"; +@layer perseus-legacy; + +@import "./util.css" layer(perseus-legacy); +@import "./styles.css" layer(perseus-legacy); +@import "./perseus-renderer-part-1.css" layer(perseus-legacy); +@import "widgets/categorizer.css" layer(perseus-legacy); +@import "widgets/dropdown.css" layer(perseus-legacy); +@import "widgets/expression.css" layer(perseus-legacy); +@import "widgets/free-response.css" layer(perseus-legacy); +@import "widgets/grapher.css" layer(perseus-legacy); +@import "widgets/graded-group.css" layer(perseus-legacy); +@import "widgets/group.css" layer(perseus-legacy); +@import "widgets/image.css" layer(perseus-legacy); +@import "widgets/interactive-graph.css" layer(perseus-legacy); +@import "widgets/label-image.css" layer(perseus-legacy); +@import "widgets/matcher.css" layer(perseus-legacy); +@import "widgets/matrix.css" layer(perseus-legacy); +@import "widgets/measurer.css" layer(perseus-legacy); +@import "widgets/numeric.css" layer(perseus-legacy); +@import "widgets/orderer.css" layer(perseus-legacy); +@import "widgets/passage.css" layer(perseus-legacy); +@import "widgets/plotter.css" layer(perseus-legacy); +@import "widgets/radio.css" layer(perseus-legacy); +@import "widgets/sortable.css" layer(perseus-legacy); +@import "widgets/table.css" layer(perseus-legacy); +@import "widget-container.css" layer(perseus-legacy); +@import "./perseus-renderer-part-2.css" layer(perseus-legacy); /* This file replicates the definition order of our styling when it was in LESS format. The styling in the original perseus-renderer.less had import statements interspersed among style definitions diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index 984c7161c36..3abc4b106b2 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -3,11 +3,11 @@ These styles should be removed when either layering control within Perseus is available, or when the high-level styles are refactored and these become unnecessary. */ - .choice :global(.paragraph) { - font-size: inherit; - font-weight: inherit; - line-height: inherit; - } + /*.choice :global(.paragraph) {*/ + /* font-size: inherit;*/ + /* font-weight: inherit;*/ + /* line-height: inherit;*/ + /*}*/ &:global(.perseus-article) { .choice:not(.is-correct):has(> button[aria-pressed="true"]) @@ -16,6 +16,11 @@ } } } +.choice :global(.paragraph) { + font-size: inherit; + font-weight: inherit; + line-height: inherit; +} .choice { --perseus-multiple-choice-divider-color: var( From 9603d4e97c514706b72e2123b55a6985c1497eae Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Wed, 10 Dec 2025 16:47:49 -0800 Subject: [PATCH 03/10] [LEMS-3761-implement-cascade-layers-within-perseus] Break out .paragraph styling to its own file so that non-paragraph styling can be hoisted to the shared layer in order to override the items in their selectors. Add a "libraries" layer within Perseus so that we can override their styling instead of them having more importance by being in the shared layer. Update Storybook to account for the new "libraries" layer. --- .storybook/main.ts | 2 +- packages/math-input/styles/main.css | 5 +- .../perseus/src/styles/paragraph-styles.css | 526 ++++++++++++++++++ .../perseus/src/styles/perseus-renderer.css | 5 +- packages/perseus/src/styles/styles.css | 524 +---------------- 5 files changed, 536 insertions(+), 526 deletions(-) create mode 100644 packages/perseus/src/styles/paragraph-styles.css diff --git a/.storybook/main.ts b/.storybook/main.ts index 1f58cd494d0..76e2edd5846 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,7 +15,7 @@ const cssWrapper = { // Exclude the CSS files that are not part of the shared layer. if (!excludedCssFiles.some((file) => pathname.endsWith(file))) { // Exclude any CSS file that already has a layer statement. - if (!code.includes("@layer") || code.includes("@layer perseus-legacy")) { + if (!code.includes("@layer") || /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code)) { const layerStatements = "@layer reset, shared, legacy;\n@layer shared"; return { diff --git a/packages/math-input/styles/main.css b/packages/math-input/styles/main.css index 1e56aae6690..acd2341ca30 100644 --- a/packages/math-input/styles/main.css +++ b/packages/math-input/styles/main.css @@ -1,4 +1,7 @@ -@import "mathquill/build/mathquill.css"; +@layer libraries, perseus-legacy; + +@import "mathquill/build/mathquill.css" layer(libraries); + .keypad-input { outline: none !important; } diff --git a/packages/perseus/src/styles/paragraph-styles.css b/packages/perseus/src/styles/paragraph-styles.css new file mode 100644 index 00000000000..76ef50c4cab --- /dev/null +++ b/packages/perseus/src/styles/paragraph-styles.css @@ -0,0 +1,526 @@ +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph { + color: #21242c; + font-size: 20px; + line-height: 30px; + margin: 0 auto; + max-width: 688px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .paragraph { + color: #21242c; + font-size: 20px; + line-height: 30px; + margin-bottom: 32px; + margin-top: 0; +} +/* Reset the Renderer margins for the image widget. + The image widget title and caption shouldn't have margins, + so we need to override the above styles. */ +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-widget + .perseus-renderer + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + mjx-container { + font-size: 100%; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + color: #21242c; + font-size: 20px; + line-height: 30px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + .paragraph, +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + ol, +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-image-caption + .perseus-renderer + .paragraph + ul { + color: rgba(33, 36, 44, 0.64); + font-size: 14px; + line-height: 19px; + text-align: left; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .paragraph.perseus-paragraph-full-width { + margin-bottom: 32px; + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip { + padding: 8px 12px; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-article:not(.perseus-mobile) + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph + ul:not([data-widget="radio"]) { + font-size: 15px; + line-height: 1.5; + margin: 0; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 14px; + line-height: 1.25; + color: #21242c; +} +.framework-perseus:not(.perseus-article):not(.perseus-mobile) + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; +} +.framework-perseus.perseus-mobile + .perseus-article + .perseus-renderer + > .paragraph { + margin-left: auto; + margin-right: auto; + max-width: 700px; +} +.framework-perseus.perseus-mobile + .perseus-article + .paragraph.perseus-paragraph-full-width { + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .perseus-article + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-mobile :not(blockquote) > div.paragraph { + margin: 0; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + margin: 0 auto; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph:not(:first-child) { + margin-top: var(--wb-sizing-size_240); + margin-bottom: var(--wb-sizing-size_240); +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph { + margin: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"], .indicatorContainer) { + margin: 0 0 0 1em; + padding: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"], .indicatorContainer) + > li { + padding-left: 10px; + margin-bottom: 24px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + margin: 0; + padding-left: 32px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li { + list-style-type: decimal; + margin-bottom: 24px; +} +.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol, +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) + ol, +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ol + ul:not([data-widget="radio"]), +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) + ul:not([data-widget="radio"]) { + padding-top: 24px; +} +@media (max-width: 767px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: none; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 18px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 16px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 14px; + line-height: 1.3; + text-align: left; + } +} +@media (min-width: 767px) and (max-width: 1199px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: 512px; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 20px; + line-height: 1.5; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 18px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 17px; + line-height: 1.4; + text-align: left; + } +} +@media (min-width: 1200px) { + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + max-width: 688px; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + ul:not([data-widget="radio"]) { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { + font-family: inherit; + font-size: 22px; + line-height: 1.4; + color: #626569; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-option-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph { + font-family: inherit; + font-size: 20px; + line-height: 1.25; + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-radio-rationale-content + .perseus-renderer + > .paragraph + .paragraph + mjx-container { + color: #21242c; + } + .framework-perseus.perseus-mobile + .perseus-image-caption + .paragraph + .paragraph { + color: #888d93; + font-size: 20px; + line-height: 1.4; + text-align: left; + } +} +.framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width { + margin-left: 0; + margin-right: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .paragraph.perseus-paragraph-full-width + > .paragraph { + margin: 0; + max-width: none; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip { + padding: 8px 12px; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph { + margin-bottom: 0; +} +.framework-perseus.perseus-mobile + .perseus-renderer + > .paragraph + .perseus-formats-tooltip + .paragraph + ul:not([data-widget="radio"]) { + font-size: 15px; + line-height: 1.5; + margin: 0; +} diff --git a/packages/perseus/src/styles/perseus-renderer.css b/packages/perseus/src/styles/perseus-renderer.css index e52c59cf0b5..09cc361e691 100644 --- a/packages/perseus/src/styles/perseus-renderer.css +++ b/packages/perseus/src/styles/perseus-renderer.css @@ -1,7 +1,8 @@ -@layer perseus-legacy; +@layer libraries, perseus-legacy; @import "./util.css" layer(perseus-legacy); -@import "./styles.css" layer(perseus-legacy); +@import "./styles.css"; /* These styles are needed in the shared layer to override element selectors that are provided in the shared layer by frontend apps */ +@import "./paragraph-styles.css" layer(perseus-legacy); @import "./perseus-renderer-part-1.css" layer(perseus-legacy); @import "widgets/categorizer.css" layer(perseus-legacy); @import "widgets/dropdown.css" layer(perseus-legacy); diff --git a/packages/perseus/src/styles/styles.css b/packages/perseus/src/styles/styles.css index e2d2fcfa722..d5052bdcc71 100644 --- a/packages/perseus/src/styles/styles.css +++ b/packages/perseus/src/styles/styles.css @@ -10,48 +10,6 @@ white-space: pre; overflow: auto; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph { - color: #21242c; - font-size: 20px; - line-height: 30px; - margin: 0 auto; - max-width: 688px; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .paragraph { - color: #21242c; - font-size: 20px; - line-height: 30px; - margin-bottom: 32px; - margin-top: 0; -} -/* Reset the Renderer margins for the image widget. - The image widget title and caption shouldn't have margins, - so we need to override the above styles. */ -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-widget - .perseus-renderer - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - mjx-container { - font-size: 100%; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - color: #21242c; - font-size: 20px; - line-height: 30px; -} .framework-perseus.perseus-article:not(.perseus-mobile) table { color: #21242c; font-size: 20px; @@ -90,39 +48,6 @@ .framework-perseus.perseus-article:not(.perseus-mobile) .MathJax .math { color: inherit; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - .paragraph, -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - ol, -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-image-caption - .perseus-renderer - .paragraph - ul { - color: rgba(33, 36, 44, 0.64); - font-size: 14px; - line-height: 19px; - text-align: left; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .paragraph.perseus-paragraph-full-width { - margin-bottom: 32px; - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} .framework-perseus.perseus-article:not(.perseus-mobile) .unresponsive-svg-image, .framework-perseus.perseus-article:not(.perseus-mobile) .svg-image { font-size: 14px; @@ -133,7 +58,7 @@ position: relative; } .framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-block-math:before { +.perseus-block-math:before { bottom: 0; content: ""; position: absolute; @@ -142,7 +67,7 @@ width: 30px; } .framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-block-math-inner { +.perseus-block-math-inner { overflow-x: auto; padding-bottom: 8px; padding-right: 20px; @@ -180,167 +105,17 @@ h6:first-child { margin-top: 0; } -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip { - padding: 8px 12px; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-article:not(.perseus-mobile) - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph - ul:not([data-widget="radio"]) { - font-size: 15px; - line-height: 1.5; - margin: 0; -} .framework-perseus.perseus-article:not(.perseus-mobile) pre { margin: 0 -16px 32px -16px; } -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 14px; - line-height: 1.25; - color: #21242c; -} -.framework-perseus:not(.perseus-article):not(.perseus-mobile) - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; -} -.framework-perseus.perseus-mobile - .perseus-article - .perseus-renderer - > .paragraph { - margin-left: auto; - margin-right: auto; - max-width: 700px; -} -.framework-perseus.perseus-mobile - .perseus-article - .paragraph.perseus-paragraph-full-width { - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-mobile - .perseus-article - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} -.framework-perseus.perseus-mobile :not(blockquote) > div.paragraph { - margin: 0; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - margin: 0 auto; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph:not(:first-child) { - margin-top: var(--wb-sizing-size_240); - margin-bottom: var(--wb-sizing-size_240); -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph > .paragraph { - margin: 0; -} .framework-perseus.perseus-mobile .clearfix > .perseus-renderer { margin-bottom: 32px; } -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"], .indicatorContainer) { - margin: 0 0 0 1em; - padding: 0; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"], .indicatorContainer) - > li { - padding-left: 10px; - margin-bottom: 24px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - margin: 0; - padding-left: 32px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol > li { - list-style-type: decimal; - margin-bottom: 24px; -} -.framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol ol, -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) - ol, -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ol - ul:not([data-widget="radio"]), -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) - ul:not([data-widget="radio"]) { - padding-top: 24px; -} .framework-perseus.perseus-mobile .perseus-block-math { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } @media (max-width: 767px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: none; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -372,36 +147,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 18px; - line-height: 1.4; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 18px; @@ -415,61 +160,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 16px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 14px; - line-height: 1.3; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 21px; line-height: 1.2; @@ -502,9 +192,6 @@ } } @media (min-width: 767px) and (max-width: 1199px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: 512px; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -536,36 +223,6 @@ line-height: 1.5; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 20px; - line-height: 1.5; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 20px; @@ -579,61 +236,6 @@ line-height: 1.5; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 18px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 17px; - line-height: 1.4; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 23px; line-height: 1.3; @@ -666,9 +268,6 @@ } } @media (min-width: 1200px) { - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - max-width: 688px; - } .framework-perseus.perseus-mobile h1 { font-weight: 700; padding-top: 0px; @@ -700,36 +299,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - ul:not([data-widget="radio"]) { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } - .framework-perseus.perseus-mobile .perseus-renderer > .paragraph ol { - font-family: inherit; - font-size: 22px; - line-height: 1.4; - color: #626569; - } .framework-perseus.perseus-mobile blockquote { font-family: inherit; font-size: 22px; @@ -743,61 +312,6 @@ line-height: 1.4; color: #626569; } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-option-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph { - font-family: inherit; - font-size: 20px; - line-height: 1.25; - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-radio-rationale-content - .perseus-renderer - > .paragraph - .paragraph - mjx-container { - color: #21242c; - } - .framework-perseus.perseus-mobile - .perseus-image-caption - .paragraph - .paragraph { - color: #888d93; - font-size: 20px; - line-height: 1.4; - text-align: left; - } .framework-perseus.perseus-mobile mjx-container:not(.mafs-graph *) { font-size: 25px; line-height: 1.2; @@ -839,42 +353,8 @@ padding-top: 16px; padding-bottom: 16px; } -.framework-perseus.perseus-mobile .paragraph.perseus-paragraph-full-width { - margin-left: 0; - margin-right: 0; - max-width: none; -} -.framework-perseus.perseus-mobile - .paragraph.perseus-paragraph-full-width - > .paragraph { - margin: 0; - max-width: none; -} .framework-perseus.perseus-mobile .unresponsive-svg-image, .framework-perseus.perseus-mobile .svg-image { font-size: 14px; line-height: 19.6px; } -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip { - padding: 8px 12px; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph { - margin-bottom: 0; -} -.framework-perseus.perseus-mobile - .perseus-renderer - > .paragraph - .perseus-formats-tooltip - .paragraph - ul:not([data-widget="radio"]) { - font-size: 15px; - line-height: 1.5; - margin: 0; -} From 623ec25b045fe99a8936ae2eaa629e01c5c5d580 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 09:20:48 -0800 Subject: [PATCH 04/10] [LEMS-3761-implement-cascade-layers-within-perseus] Prettier --- .storybook/main.ts | 5 ++++- packages/perseus/src/styles/styles.css | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 76e2edd5846..384233f2117 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,7 +15,10 @@ const cssWrapper = { // Exclude the CSS files that are not part of the shared layer. if (!excludedCssFiles.some((file) => pathname.endsWith(file))) { // Exclude any CSS file that already has a layer statement. - if (!code.includes("@layer") || /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code)) { + if ( + !code.includes("@layer") || + /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code) + ) { const layerStatements = "@layer reset, shared, legacy;\n@layer shared"; return { diff --git a/packages/perseus/src/styles/styles.css b/packages/perseus/src/styles/styles.css index d5052bdcc71..e6f386fbbe9 100644 --- a/packages/perseus/src/styles/styles.css +++ b/packages/perseus/src/styles/styles.css @@ -58,7 +58,7 @@ position: relative; } .framework-perseus.perseus-article:not(.perseus-mobile) -.perseus-block-math:before { + .perseus-block-math:before { bottom: 0; content: ""; position: absolute; @@ -67,7 +67,7 @@ width: 30px; } .framework-perseus.perseus-article:not(.perseus-mobile) -.perseus-block-math-inner { + .perseus-block-math-inner { overflow-x: auto; padding-bottom: 8px; padding-right: 20px; From e4f9196c3404be0392d6ad311854ba42b3b89dc3 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 12:01:04 -0800 Subject: [PATCH 05/10] [LEMS-3761-implement-cascade-layers-within-perseus] Adjust styling to be in appropriate layers to render the same as before the new sub-layers. --- packages/perseus/src/styles/perseus-renderer-part-1.css | 2 +- packages/perseus/src/styles/perseus-renderer-part-2.css | 3 --- packages/perseus/src/styles/perseus-renderer.css | 1 + packages/perseus/src/styles/styles.css | 3 +++ packages/perseus/src/styles/widgets/passage-editor.css | 8 ++++++++ packages/perseus/src/styles/widgets/passage.css | 8 -------- 6 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 packages/perseus/src/styles/widgets/passage-editor.css diff --git a/packages/perseus/src/styles/perseus-renderer-part-1.css b/packages/perseus/src/styles/perseus-renderer-part-1.css index d15ecbaa295..a50104cb426 100644 --- a/packages/perseus/src/styles/perseus-renderer-part-1.css +++ b/packages/perseus/src/styles/perseus-renderer-part-1.css @@ -20,7 +20,7 @@ top: 0; left: 0; } -var, +.graphie var, div.graphie { white-space: pre; /** diff --git a/packages/perseus/src/styles/perseus-renderer-part-2.css b/packages/perseus/src/styles/perseus-renderer-part-2.css index cb3f85d2d9c..c6750e7e81d 100644 --- a/packages/perseus/src/styles/perseus-renderer-part-2.css +++ b/packages/perseus/src/styles/perseus-renderer-part-2.css @@ -175,6 +175,3 @@ font-size: 18px; } } -.perseus-widget-editor-content .perseus-editor-accordion h2 { - padding-top: 0; -} diff --git a/packages/perseus/src/styles/perseus-renderer.css b/packages/perseus/src/styles/perseus-renderer.css index 09cc361e691..85c9c338d71 100644 --- a/packages/perseus/src/styles/perseus-renderer.css +++ b/packages/perseus/src/styles/perseus-renderer.css @@ -20,6 +20,7 @@ @import "widgets/numeric.css" layer(perseus-legacy); @import "widgets/orderer.css" layer(perseus-legacy); @import "widgets/passage.css" layer(perseus-legacy); +@import "widgets/passage-editor.css"; /* Editor-only styles that need to be elevated above the perseus-legacy layer */ @import "widgets/plotter.css" layer(perseus-legacy); @import "widgets/radio.css" layer(perseus-legacy); @import "widgets/sortable.css" layer(perseus-legacy); diff --git a/packages/perseus/src/styles/styles.css b/packages/perseus/src/styles/styles.css index e6f386fbbe9..d8f643c7789 100644 --- a/packages/perseus/src/styles/styles.css +++ b/packages/perseus/src/styles/styles.css @@ -358,3 +358,6 @@ font-size: 14px; line-height: 19.6px; } +.perseus-widget-editor-content .perseus-editor-accordion h2 { + padding-top: 0; +} diff --git a/packages/perseus/src/styles/widgets/passage-editor.css b/packages/perseus/src/styles/widgets/passage-editor.css new file mode 100644 index 00000000000..24628d3b54f --- /dev/null +++ b/packages/perseus/src/styles/widgets/passage-editor.css @@ -0,0 +1,8 @@ +.perseus-widget-passage-editor .perseus-single-editor { + font-family: Times, "Times New Roman", serif; + margin-left: -11px; +} +.perseus-widget-passage-editor .perseus-textarea-pair textarea { + font-size: 13px; + line-height: 17px; +} diff --git a/packages/perseus/src/styles/widgets/passage.css b/packages/perseus/src/styles/widgets/passage.css index e1ce24ba927..0b64c376caf 100644 --- a/packages/perseus/src/styles/widgets/passage.css +++ b/packages/perseus/src/styles/widgets/passage.css @@ -172,14 +172,6 @@ .perseus-widget-passage-container .line-numbers .line-marker { visibility: visible; } -.perseus-widget-passage-editor .perseus-single-editor { - font-family: Times, "Times New Roman", serif; - margin-left: -11px; -} -.perseus-widget-passage-editor .perseus-textarea-pair textarea { - font-size: 13px; - line-height: 17px; -} body.sat-section .perseus-widget-passage { margin-top: 0; } From 176601b0b137f12ba7403a5a3ba577e045b9099f Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 13:06:46 -0800 Subject: [PATCH 06/10] [LEMS-3761-implement-cascade-layers-within-perseus] docs(changeset): CSS Sub-Layers --- .changeset/fresh-tables-admire.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fresh-tables-admire.md diff --git a/.changeset/fresh-tables-admire.md b/.changeset/fresh-tables-admire.md new file mode 100644 index 00000000000..9fc6fd3bc55 --- /dev/null +++ b/.changeset/fresh-tables-admire.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/math-input": minor +"@khanacademy/perseus": minor +--- + +CSS Sub-Layers From ee3626f449182d4b9493b412f0c2f6d76fb7d536 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 13:08:04 -0800 Subject: [PATCH 07/10] [LEMS-3761-implement-cascade-layers-within-perseus] Update changeset to include math-input. --- .changeset/fresh-tables-admire.md | 6 ------ .changeset/wet-llamas-join.md | 1 + 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .changeset/fresh-tables-admire.md diff --git a/.changeset/fresh-tables-admire.md b/.changeset/fresh-tables-admire.md deleted file mode 100644 index 9fc6fd3bc55..00000000000 --- a/.changeset/fresh-tables-admire.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@khanacademy/math-input": minor -"@khanacademy/perseus": minor ---- - -CSS Sub-Layers diff --git a/.changeset/wet-llamas-join.md b/.changeset/wet-llamas-join.md index 2082cb6a39b..0f43d578734 100644 --- a/.changeset/wet-llamas-join.md +++ b/.changeset/wet-llamas-join.md @@ -1,4 +1,5 @@ --- +"@khanacademy/math-input": minor "@khanacademy/perseus": minor --- From 0c0604bfd246fed30e049485ef40a3f8cc96c7f5 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 13:16:09 -0800 Subject: [PATCH 08/10] [LEMS-3761-implement-cascade-layers-within-perseus] Adjust radio widget styling overrides to reflect use of sublayers - no longer need the .framework-perseus in the selector for specificity. --- .storybook/main.ts | 3 +- .../src/widgets/radio/choice.module.css | 29 +++++++------------ 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 384233f2117..914826e208e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -14,7 +14,8 @@ const cssWrapper = { if (pathname.endsWith(".css")) { // Exclude the CSS files that are not part of the shared layer. if (!excludedCssFiles.some((file) => pathname.endsWith(file))) { - // Exclude any CSS file that already has a layer statement. + // Exclude any CSS file that already has a layer statement, + // unless it is specifying a sub-layer. if ( !code.includes("@layer") || /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code) diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index 3abc4b106b2..56a93738a60 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -1,27 +1,20 @@ -:global(.framework-perseus) { - /* OVERRIDES - These styles should be removed when either layering control within Perseus is available, - or when the high-level styles are refactored and these become unnecessary. - */ - /*.choice :global(.paragraph) {*/ - /* font-size: inherit;*/ - /* font-weight: inherit;*/ - /* line-height: inherit;*/ - /*}*/ - - &:global(.perseus-article) { - .choice:not(.is-correct):has(> button[aria-pressed="true"]) - :global(.paragraph) { - color: var(--wb-semanticColor-core-foreground-instructive-default); - } - } -} +/* OVERRIDES - Start + These styles should be removed when the high-level styles are refactored and these become unnecessary. + */ .choice :global(.paragraph) { font-size: inherit; font-weight: inherit; line-height: inherit; } +:global(.perseus-article) { + .choice:not(.is-correct):has(> button[aria-pressed="true"]) + :global(.paragraph) { + color: var(--wb-semanticColor-core-foreground-instructive-default); + } +} +/* OVERRIDES - End */ + .choice { --perseus-multiple-choice-divider-color: var( --wb-semanticColor-core-border-neutral-subtle From 9f11167e856b92e53b3faf6806c6d2da7452a4f1 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 11 Dec 2025 13:28:18 -0800 Subject: [PATCH 09/10] [LEMS-3761-implement-cascade-layers-within-perseus] Prettier --- packages/perseus/src/widgets/radio/choice.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index 56a93738a60..f0d6a469a4e 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -9,7 +9,7 @@ :global(.perseus-article) { .choice:not(.is-correct):has(> button[aria-pressed="true"]) - :global(.paragraph) { + :global(.paragraph) { color: var(--wb-semanticColor-core-foreground-instructive-default); } } From 26fa14b48a2693b77f4d4844faecd2ee852cf8c2 Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Mon, 15 Dec 2025 19:32:03 -0800 Subject: [PATCH 10/10] [LEMS-3761-implement-cascade-layers-within-perseus] Move .paragraph override out of "OVERRIDES" section & make it a normal-ish rule. --- .../src/widgets/radio/choice.module.css | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/perseus/src/widgets/radio/choice.module.css b/packages/perseus/src/widgets/radio/choice.module.css index f0d6a469a4e..d06b85e65d2 100644 --- a/packages/perseus/src/widgets/radio/choice.module.css +++ b/packages/perseus/src/widgets/radio/choice.module.css @@ -1,20 +1,3 @@ -/* OVERRIDES - Start - These styles should be removed when the high-level styles are refactored and these become unnecessary. - */ -.choice :global(.paragraph) { - font-size: inherit; - font-weight: inherit; - line-height: inherit; -} - -:global(.perseus-article) { - .choice:not(.is-correct):has(> button[aria-pressed="true"]) - :global(.paragraph) { - color: var(--wb-semanticColor-core-foreground-instructive-default); - } -} -/* OVERRIDES - End */ - .choice { --perseus-multiple-choice-divider-color: var( --wb-semanticColor-core-border-neutral-subtle @@ -46,6 +29,13 @@ color: var(--wb-semanticColor-core-foreground-instructive-default); } +.choice :global(.paragraph) { + font-size: inherit; + font-weight: inherit; + line-height: inherit; + color: inherit; +} + /***************** BORDER MANAGEMENT *****************/