Skip to content

Commit e0a5d3b

Browse files
sjd210sjd210
authored
Merge pull request #1276 from isaacphysics/redesign/fix-colour-inheritance
Fix colour inheritance
2 parents 1390485 + f09cedf commit e0a5d3b

20 files changed

+111
-196
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
@@ -86,7 +86,7 @@ const GameboardItemComponent = ({gameboard, question}: {gameboard: GameboardDTO,
8686
<div className={classNames("flex-fill", {"d-flex py-3 pe-3 flex-column flex-md-row": isAda, "d-md-flex": isPhy})}>
8787
{/* TODO CP shouldn't the subject colour here depend on the contents/tags of the gameboard? */}
8888
<div className={"flex-grow-1 " + (itemSubject?.id ?? (isPhy ? "physics" : ""))}>
89-
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-secondary": isPhy})}>
89+
<Markup encoding={"latex"} className={classNames( "question-link-title", {"text-theme": isPhy})}>
9090
{generateQuestionTitle(question)}
9191
</Markup>
9292
{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/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ a.btn {
331331
}
332332

333333
.quick-question-options {
334-
background: rgba($secondary, 0.5);
334+
background: color-mix(in srgb, var(--subject-color-500) 50%, transparent);
335335
border: 1px solid transparent;
336336
transition: opacity 0.2s linear;
337337
}

‎src/scss/phy/color-theme.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@
5555
--subject-color-800: #{map.get($subject-colors, 800)};
5656
--subject-color-900: #{map.get($subject-colors, 900)};
5757

58+
// ALERT
59+
--alert-text-color: #{map.get($subject-colors, 900)};
60+
5861
@if $palette == "neutral" {
5962
// neutral has some special cases
6063
--badges-light: #{$color-neutral-white};
@@ -69,6 +72,8 @@
6972
--nav-primary: #{$color-brand-500};
7073

7174
--icon-primary: #{$color-brand-500};
75+
76+
--alert-text-color: #{$color-neutral-800};
7277
}
7378
}
7479
}
@@ -112,5 +117,28 @@
112117
@include svg-color(url("/assets/phy/icons/redesign/hexagon.svg"), var(--subject-color-200), 75px, 75px, 75px);
113118
position: absolute;
114119
}
120+
121+
.text-bg-theme {
122+
@extend .text-bg-#{$palette};
123+
}
124+
125+
.alert-secondary {
126+
@extend .alert-#{$palette};
127+
color: var(--alert-text-color);
128+
}
115129
}
116130
}
131+
132+
.text-theme {
133+
color: var(--subject-color-500);
134+
135+
&a {
136+
&:hover, &:focus {
137+
color: var(--subject-color-600);
138+
}
139+
}
140+
}
141+
142+
.border-theme {
143+
border-color: var(--subject-color-500);
144+
}

‎src/scss/phy/forms.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,25 @@
4444
.search--filter-input {
4545
border: 1px solid $color-neutral-300;
4646
}
47+
48+
.form-check-input {
49+
width: 24px;
50+
height: 24px;
51+
transition: all 0.1s ease-in-out;
52+
outline: none;
53+
box-shadow: none;
54+
&:checked {
55+
border-color: var(--subject-color-500);
56+
background-color: var(--subject-color-500);
57+
}
58+
&:focus {
59+
border-color: var(--subject-color-500);
60+
&:checked {
61+
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
62+
}
63+
}
64+
&:not(:disabled):active {
65+
background-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
66+
border-color: color-mix(in srgb, var(--subject-color-500) 25%, transparent);
67+
}
68+
}

‎src/scss/phy/hints.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,15 @@
77
@include respond-below(xs) {padding-left: 0 !important; padding-right: 0 !important;}
88
}
99

10-
// Note: Colours are practically always overridden by subjects.scss.
11-
// The following rule sets the default to be physics purple.
1210
li {
1311
.hint-tab-title {
14-
color: $phy_physics !important;
12+
color: var(--subject-color-500) !important;
1513
}
1614
&.active {
1715
.hint-tab-title {
1816
color: white !important;
19-
background-color: $phy_physics !important;
17+
background-color: var(--subject-color-500) !important;
2018
}
2119
}
22-
}
20+
}
2321
}

‎src/scss/phy/isaac.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,6 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
396396
@import "../common/scroll-button";
397397

398398
// Pages
399-
@import "subjects";
400399
@import "../common/pages";
401400
@import "homepage";
402401
@import "../common/login";

‎src/scss/phy/questions.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,3 +118,42 @@
118118
border: solid 1px $black;
119119
}
120120
}
121+
122+
.validation-response-panel {
123+
.question-response {
124+
font-family: desyrel, serif;
125+
font-size: 36px;
126+
font-weight: 600;
127+
}
128+
h1 {
129+
font-family: desyrel, serif;
130+
font-size: 48px;
131+
font-weight: 700;
132+
}
133+
&.correct {
134+
background: var(--subject-color-500);
135+
color: white;
136+
a {
137+
color: white !important;
138+
}
139+
}
140+
&.almost {
141+
background: #ffb847;
142+
color: #3c0000;
143+
}
144+
}
145+
146+
.numeric-question .unit-selection {
147+
.display-unit {
148+
opacity: 1 !important;
149+
}
150+
.dropdown-item {
151+
&:active {
152+
background-color: var(--subject-color-500);
153+
color: white;
154+
}
155+
&:focus {
156+
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--subject-color-500) 25%, transparent);
157+
}
158+
}
159+
}

‎src/scss/phy/search.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@
33
.searchContextPicker {
44
margin-right: -0.75rem;
55
}
6+
7+
svg.search-item-icon, svg.gameboard-item-icon {
8+
fill: var(--subject-color-500);
9+
}

0 commit comments

Comments
 (0)