Skip to content

Commit af1abd7

Browse files
jacbnjacbn
committed
Prefer (inherited) CSS vars over (not) SASS vars
1 parent e4364e4 commit af1abd7

File tree

13 files changed

+42
-85
lines changed

13 files changed

+42
-85
lines changed

‎src/app/components/content/IsaacFigure.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ export const IsaacFigure = ({doc}: IsaacFigureProps) => {
3030
</div>
3131
<div className="text-center figure-caption">
3232
{doc.children && doc.children.length > 0 && figId && <div>
33-
<strong className="text-secondary figure-reference">{figureString}</strong>
33+
<strong className="text-theme figure-reference">{figureString}</strong>
3434
</div>}
3535
<IsaacContentValueOrChildren
3636
encoding={doc.encoding}
37-
value={doc.value && figId && `<strong class="text-secondary figure-reference">${figureString}:</strong> ${doc.value}`}
37+
value={doc.value && figId && `<strong class="text-theme figure-reference">${figureString}:</strong> ${doc.value}`}
3838
>
3939
{doc.children}
4040
</IsaacContentValueOrChildren>

‎src/app/components/elements/Accordion.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
172172
aria-expanded={isOpen ? "true" : "false"}
173173
>
174174
{isConceptPage && audienceString && <span className={
175-
classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "text-bg-secondary": isPhy})
175+
classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "text-bg-theme": isPhy})
176176
}>
177177
{siteSpecific(
178178
audienceString,
@@ -187,7 +187,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
187187
<Row className="h-100">
188188
<div className="d-flex align-items-center p-0 h-100">
189189
{/* FIXME Revisit this maybe? https://github.com/isaacphysics/isaac-react-app/pull/473#discussion_r841556455 */}
190-
<span className="accordion-part p-3 text-secondary text-nowrap">Part {ALPHABET[(index as number) % ALPHABET.length]} {" "}</span>
190+
<span className="accordion-part p-3 text-theme text-nowrap">Part {ALPHABET[(index as number) % ALPHABET.length]} {" "}</span>
191191
{trustedTitle && <div className="p-3">
192192
<h2>
193193
<Markup encoding={"latex"}>

‎src/app/components/elements/EventBookingForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const EventBookingForm = ({event, targetUser, additionalInformation, upda
2929
{/* Account Information */}
3030
<Card className="mb-3 bg-light">
3131
<CardBody>
32-
<legend>Your account information (<a href="/account" target="_blank" className="text-secondary">update</a>)</legend>
32+
<legend>Your account information (<a href="/account" target="_blank" className="text-theme">update</a>)</legend>
3333
<Row>
3434
<Col md={6}>
3535
{/* Should be impossible to not have a first name */}

‎src/app/components/elements/list-groups/ContentSummaryListGroupItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export const ContentSummaryListGroupItem = ({item, search, showBreadcrumb, noCar
167167
<div className={classNames("flex-fill", {"py-3 pe-3 align-content-center": isAda, "d-flex": isAda && !stack, "d-md-flex": isPhy})}>
168168
<div className={"align-self-center " + titleClasses}>
169169
<div className="d-flex">
170-
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-secondary": isPhy})}>
170+
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-theme": isPhy})}>
171171
{title ?? ""}
172172
</Markup>
173173
{isPhy && typeLabel && <span className={"small text-muted align-self-end d-none d-md-inline ms-2 mb-1"}>

‎src/app/components/elements/markup/latexRendering.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export function katexify(html: string, user: Immutable<PotentialUser> | null, bo
231231
const number = figureNumbers[ref];
232232
if (number) {
233233
const figure = `Figure&nbsp;${number}`;
234-
return format ? `<strong class="text-secondary figure-reference">${figure}</strong>` : figure;
234+
return format ? `<strong class="text-theme figure-reference">${figure}</strong>` : figure;
235235
}
236236
}
237237
return ifMissing;

‎src/app/components/navigation/NavigationBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@ export const LinkItem = ({children, muted, badgeTitle, ...props}: React.PropsWit
3333
const className = classNames(siteSpecific("p-3", "ps-2 py-2 p-nav-3 font-h4 link-light"), {"text-muted": muted});
3434
return <DropdownItem tag={Link} className={className} {...props}>
3535
{children}
36-
{badgeTitle && <Badge color="light" className="border-secondary border bg-white ms-2 me-1">{badgeTitle}</Badge>}
36+
{badgeTitle && <Badge color="light" className="border-theme border bg-white ms-2 me-1">{badgeTitle}</Badge>}
3737
</DropdownItem>;
3838
};
3939

4040
export const LinkItemComingSoon = ({children}: {children: React.ReactNode}) => (
4141
<LinkItem to="/coming_soon" aria-disabled="true">
4242
<span className="me-2 text-muted">{children}</span>
43-
<Badge color="light" className="border-secondary border bg-white ms-auto me-1">Coming soon</Badge>
43+
<Badge color="light" className="border-theme border bg-white ms-auto me-1">Coming soon</Badge>
4444
</LinkItem>
4545
);
4646

‎src/app/components/pages/Gameboard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const GameboardItemComponent = ({gameboard, question}: {gameboard: GameboardDTO,
9797
<div className={classNames("flex-fill", {"d-flex py-3 pe-3 flex-column flex-md-row": isAda, "d-md-flex": isPhy})}>
9898
{/* TODO CP shouldn't the subject colour here depend on the contents/tags of the gameboard? */}
9999
<div className={"flex-grow-1 " + (itemSubject?.id ?? (isPhy ? "physics" : ""))}>
100-
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-secondary": isPhy})}>
100+
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-theme": isPhy})}>
101101
{generateQuestionTitle(question)}
102102
</Markup>
103103
{isPhy && message && <span className={classNames("gameboard-item-message-phy", messageClasses)}>{message}</span>}

‎src/app/components/pages/MyAccount.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ const AccountPageComponent = ({user, getChosenUserAuthSettings, error, userAuthS
329329
<h3 className="d-md-none text-center text-muted m-3">
330330
<small>
331331
{`Update your ${SITE_TITLE} account, or `}
332-
<Link to="/logout" className="text-secondary">Log out</Link>
332+
<Link to="/logout" className="text-theme">Log out</Link>
333333
</small>
334334
</h3>
335335

‎src/app/components/pages/Search.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const Search = withRouter((props: RouteComponentProps) => {
121121
</Row>
122122
<Row>
123123
<Col>
124-
<SearchPageSearch className={siteSpecific("", "border-secondary")} initialValue={urlQuery ?? ""} />
124+
<SearchPageSearch className={siteSpecific("", "border-theme")} initialValue={urlQuery ?? ""} />
125125
</Col>
126126
</Row>
127127
<Row>

‎src/scss/common/elements.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.content-summary-link .content-summary-link-title {
33
background: none;
44
border: 0;
5-
.text-secondary {
5+
.text-theme {
66
font-family: $secondary-font-semi-bold;
77
}
88
}

‎src/scss/common/gameboard.scss

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,6 @@
2121
a > span:first-of-type {
2222
border-color: #ddd;
2323
}
24-
25-
a {
26-
// Slightly higher contrast colours to achieve 4.5 contrast ratio with light green background
27-
.maths > .text-secondary {
28-
color: #017195 !important;
29-
}
30-
.physics > .text-secondary {
31-
color: #8f49b8 !important;
32-
}
33-
.chemistry > .text-secondary {
34-
color: #cb2921 !important;
35-
}
36-
// Biology green has a 7.88 contrast ratio against the light green background
37-
.biology > .text-secondary {
38-
color: #005210 !important;
39-
}
40-
}
4124
}
4225

4326
.gameboard-item-icon {

‎src/scss/phy/subjects.scss

Lines changed: 28 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,9 @@ $alert-text-colours: (
88
"neutral": $color-neutral-800,
99
);
1010

11-
@function color-level($color, $level: 0) {
12-
$color-base: if($level > 0, $black, $white);
13-
$level: abs($level);
14-
15-
@return mix($color-base, $color, $level * $theme-color-interval);
16-
}
17-
18-
@mixin bg-variant($parent, $color) {
19-
#{$parent} {
20-
background-color: $color !important;
21-
}
22-
a#{$parent},
23-
button#{$parent} {
24-
&:hover, &:focus {
25-
background-color: darken($color, 10%) !important;
26-
}
27-
}
28-
}
29-
30-
@mixin text-emphasis-variant($parent, $color) {
31-
#{$parent} {
32-
color: $color !important;
33-
}
34-
a#{$parent}:hover,
35-
a#{$parent}:focus {
36-
color: darken($color, 10%) !important;
37-
}
38-
}
39-
4011
// TODO: move all these definitions to more relevant files, defining the colours to use in color-theme.scss
4112
@each $palette, $subject-colors in $isaac-color-palettes {
42-
@include color-mode($palette) {
43-
$subject-color-500: map.get($subject-colors, 500);
44-
45-
/* background classes */
46-
@include bg-variant(".bg-secondary", $subject-color-500);
47-
48-
13+
@include color-mode($palette) {
4914
/* correct answer */
5015
.validation-response-panel {
5116
.question-response {
@@ -59,7 +24,7 @@ $alert-text-colours: (
5924
font-weight: 700;
6025
}
6126
&.correct {
62-
background: $subject-color-500;
27+
background: var(--subject-color-500);
6328
color: white;
6429
a {
6530
color: white !important;
@@ -72,17 +37,26 @@ $alert-text-colours: (
7237
}
7338

7439
/* text- classes */
75-
@include text-emphasis-variant(".text-secondary", $subject-color-500);
76-
// text-emphasis-color: $color;
40+
41+
.text-theme {
42+
color: var(--subject-color-500);
43+
text-emphasis-color: var(--subject-color-500);
44+
45+
&a {
46+
&:hover, &:focus {
47+
color: var(--subject-color-600);
48+
}
49+
}
50+
}
7751

7852
/* badge classes */
79-
.text-bg-secondary {
53+
.text-bg-theme {
8054
@extend .text-bg-#{$palette};
8155
}
8256

8357
/* borders */
84-
.border-secondary {
85-
border-color: $subject-color-500 !important;
58+
.border-theme {
59+
border-color: var(--subject-color-500);
8660
}
8761

8862
/* BS5 checkboxes and radio buttons */
@@ -93,18 +67,18 @@ $alert-text-colours: (
9367
outline: none;
9468
box-shadow: none;
9569
&:checked {
96-
border-color: $subject-color-500;
97-
background-color: $subject-color-500;
70+
border-color: var(--subject-color-500);
71+
background-color: var(--subject-color-500);
9872
}
9973
&:focus {
100-
border-color: $subject-color-500;
74+
border-color: var(--subject-color-500);
10175
&:checked {
102-
box-shadow: 0 0 0 0.25rem rgba($subject-color-500, 0.25);
76+
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
10377
}
10478
}
10579
&:not(:disabled):active {
106-
background-color: rgba($subject-color-500, 0.25);
107-
border-color: rgba($subject-color-500, 0.25);
80+
background-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
81+
border-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
10882
}
10983
}
11084

@@ -115,11 +89,11 @@ $alert-text-colours: (
11589
}
11690
.dropdown-item {
11791
&:active {
118-
background-color: $subject-color-500;
92+
background-color: var(--subject-color-500);
11993
color: white;
12094
}
12195
&:focus {
122-
box-shadow: 0 0 0 0.25rem rgba($subject-color-500, .25);
96+
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
12397
}
12498
}
12599
}
@@ -131,22 +105,22 @@ $alert-text-colours: (
131105

132106
li {
133107
.hint-tab-title {
134-
color: $subject-color-500 !important;
108+
color: var(--subject-color-500) !important;
135109
}
136110
&.active {
137111
.hint-tab-title {
138112
color: white !important;
139-
background-color: $subject-color-500 !important;
113+
background-color: var(--subject-color-500) !important;
140114
}
141115
}
142116
}
143117

144118
.quick-question-options {
145-
background: rgba($subject-color-500, 0.5);
119+
background: color-mix(in srgb, var(--subject-color-500) 50%, transparent);
146120
}
147121

148122
svg.search-item-icon, svg.gameboard-item-icon {
149-
fill: $subject-color-500;
123+
fill: var(--subject-color-500);
150124
}
151125
}
152126
}

‎src/test/components/TrustedHtml.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('TrustedHtml LaTeX locator', () => {
105105
const result = katexify(testcase, null, undefined, false, {foo: 42});
106106

107107
const expectedFigureRef = "Figure" + "&nbsp;" + "42";
108-
const expectedFigureRefWithFormatting = `<strong class="text-secondary figure-reference">${expectedFigureRef}</strong>`;
108+
const expectedFigureRefWithFormatting = `<strong class="text-theme figure-reference">${expectedFigureRef}</strong>`;
109109
expect(result).toEqual(html[0] + expectedFigureRefWithFormatting + html[1]);
110110
expect(katex.renderToString).not.toHaveBeenCalled();
111111
});

0 commit comments

Comments
 (0)