Skip to content

Commit 8eb2884

Browse files
aryanpinglearyanpingle
committed
Fine. Take your light theme.
1 parent 7573a7b commit 8eb2884

File tree

15 files changed

+161
-56
lines changed

15 files changed

+161
-56
lines changed

‎src/components/ChipSelect/index.css

+2-8
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55

66
padding: 0.25em;
77
margin: 1em 0;
8-
background-color: #121212;
9-
outline: 2px solid #242424;
8+
outline: 2px solid var(--surface-2-border);
109
border-radius: 0.5em;
1110

1211
display: grid;
@@ -41,11 +40,6 @@
4140
text-align: center;
4241
}
4342

44-
.chip-select__input:focus + .chip-select__label {
45-
/* outline: 2px solid gold; */
46-
}
47-
4843
.chip-select__input:checked + .chip-select__label {
49-
background-color: #ccc;
50-
color: black;
44+
background-color: var(--surface-2-border);
5145
}

‎src/components/ColorInput/index.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
position: relative;
33
font-weight: 700;
44
padding: 0.5em;
5-
background-color: #121212;
6-
outline: 2px solid #242424;
5+
outline: 2px solid var(--surface-2-border);
76
border-radius: 0.5em;
87

98
margin: 1em 0;

‎src/components/RuneReference/index.css

+28-10
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,13 @@
1818
grid-auto-flow: row;
1919
grid-template-rows: auto 1fr;
2020
justify-items: stretch;
21+
gap: 0.5em;
2122

2223
height: 100%;
2324
cursor: pointer;
2425

25-
background-color: black;
26-
outline: 2px solid #242424;
26+
background-color: var(--surface-1);
27+
outline: 2px solid var(--surface-1-border);
2728
border-radius: 0.5em;
2829

2930
text-align: center;
@@ -42,18 +43,36 @@
4243
justify-content: center;
4344
align-items: center;
4445

45-
background-color: #121212;
46-
border-radius: inherit;
46+
border-bottom: 2px solid var(--surface-1-border);
4747
}
4848

4949
.rune-card .runic-svg {
5050
width: 3em;
5151
}
5252

53-
.rune-card hr {
54-
margin: 0;
55-
width: 100%;
56-
border: 1px solid #242424;
53+
/* Enable (easy) custom rune colors (to adapt to the theme) */
54+
55+
.rune-card .rune-segment--stroke {
56+
stroke: var(--rune-color, transparent);
57+
}
58+
59+
.rune-card .rune-segment--fill {
60+
fill: var(--rune-color, transparent);
61+
}
62+
63+
/* Dark theme */
64+
.rune-card .runic-layer--guide {
65+
/* noop */
66+
}
67+
.rune-card .runic-layer--real .rune-segment--active {
68+
--rune-color: palegreen;
69+
}
70+
/* Light theme */
71+
.light-theme .rune-card .runic-layer--guide {
72+
/* noop */
73+
}
74+
.light-theme .rune-card .runic-layer--real .rune-segment--active {
75+
--rune-color: mediumseagreen;
5776
}
5877

5978
.rune-info {
@@ -67,10 +86,9 @@
6786

6887
.rune-info__symbol {
6988
font-size: 1.5em;
70-
color: #cdcdcd;
7189
}
7290

7391
.rune-info__english {
7492
font-size: 0.5em;
75-
color: #888;
93+
color: var(--on-surface-0-alt);
7694
}

‎src/components/RuneReference/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@ function runeReferenceGridItem(symbol: SymbolData): VNode<any> {
2727
displayPhonemes={false}
2828
interactive={false}
2929
phoneticText={symbol.ipaSymbol}
30-
runeColor="palegreen"
31-
runeGuideColor="#242424"
30+
runeThickness={0.3}
31+
runeColor=""
32+
runeGuideColor=""
3233
></RuneSVG>
3334
</div>
3435
<div className="rune-info">

‎src/components/RuneSVG/index.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ svg.runic-svg {
33
max-height: 100%;
44
}
55

6+
/* Add styles to the interactive layer */
7+
68
.runic-layer--interactive .rune-segment {
7-
transition: stroke 250ms ease;
9+
transition: 250ms ease;
10+
transition-property: stroke, opacity;
811
cursor: pointer;
912
}
1013

1114
.runic-layer--interactive .rune-segment:hover {
1215
stroke: currentColor;
13-
}
16+
opacity: 0.5;
17+
}

‎src/components/RuneSVG/index.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export class RuneSVG extends Component<Props, State> {
9494
this.applyStylesToGuideSegments();
9595
this.applyStylesToRealSegments();
9696
this.applyStylesToInteractiveSegments();
97+
this.applyStylesToPhonemeText();
9798

9899
// Apply styles to the SVG
99100
this.applyGeneralSVGStyles();
@@ -172,6 +173,15 @@ export class RuneSVG extends Component<Props, State> {
172173
});
173174
}
174175

176+
private applyStylesToPhonemeText() {
177+
// Text layer segments
178+
this.textLayer
179+
?.querySelectorAll("text")
180+
.forEach((segment) => {
181+
segment.setAttribute("fill", this.state.runeColor);
182+
});
183+
}
184+
175185
// --- Listener
176186

177187
private onInteractiveSegmentClick = (event: Event) => {
@@ -326,28 +336,28 @@ export class RuneSVG extends Component<Props, State> {
326336
>
327337
<g
328338
ref={(e) => (this.guideLayer = e)}
329-
className="runic-layer--guide"
339+
className="runic-layer runic-layer--guide"
330340
>
331341
{...tokenLayers.guide}
332342
</g>
333343
<g
334344
ref={(e) => (this.realLayer = e)}
335-
className="runic-layer--real"
345+
className="runic-layer runic-layer--real"
336346
>
337347
{...tokenLayers.real}
338348
</g>
339349
{props.interactive && (
340350
<g
341351
ref={(e) => (this.interactiveLayer = e)}
342-
className="runic-layer--interactive"
352+
className="runic-layer runic-layer--interactive"
343353
>
344354
{...tokenLayers.interactive}
345355
</g>
346356
)}
347357
{state.displayPhonemes && (
348358
<g
349359
ref={(e) => (this.textLayer = e)}
350-
className="runic-layer--text"
360+
className="runic-layer runic-layer--text"
351361
>
352362
{...tokenLayers.text}
353363
</g>

‎src/components/RuneSVG/rune.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function renderEnglishCharacter(
3939
class="rune-segment rune-segment--active rune-segment--fill"
4040
font-size={5}
4141
font-family={"Noto Sans Mono, monospace"}
42-
alignment-baseline={"before-edge"}
42+
dominant-baseline={"text-before-edge"}
4343
text-anchor={"start"}
4444
>
4545
{char}
@@ -242,10 +242,10 @@ export function getRuneLayersForOneRune(
242242
<g className="rune" data-rune-index={index} transform={runeTranslation}>
243243
<text
244244
font-size={1}
245-
fill={"white"}
245+
className="rune-segment--active rune-segment--fill"
246246
x={1.5}
247247
y={8}
248-
alignment-baseline={"middle"}
248+
dominant-baseline={"middle"}
249249
text-anchor={"middle"}
250250
>
251251
{token.symbols.map((s) => s.ipaSymbol).join(" ")}

‎src/components/RunicEditor/index.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.runic-editor {
22
border-radius: 1em;
3-
outline: 2px solid #242424;
4-
background-color: #121212;
3+
outline: 2px solid var(--surface-1-border);
4+
background-color: var(--surface-1);
55

66
font-size: 0.75em;
77

@@ -11,7 +11,7 @@
1111
.runic-editor__input-area {
1212
display: grid;
1313
align-items: stretch;
14-
border-bottom: 2px solid #242424;
14+
border-bottom: 2px solid var(--surface-1-border);
1515
}
1616

1717
/* Mobile - Vertical layout */
@@ -86,7 +86,7 @@
8686

8787
.runic-editor__preview > hr {
8888
margin: 0;
89-
border: 1px solid #242424;
89+
border: 1px solid var(--surface-1-border);
9090
}
9191

9292
.runic-editor__svg-container {
@@ -96,8 +96,8 @@
9696
place-items: center;
9797

9898
background-color: black;
99-
--transparency-darker: #000000;
100-
--transparency-lighter: #121212;
99+
--transparency-darker: var(--surface-1);
100+
--transparency-lighter: var(--surface-0);
101101
background-image: linear-gradient(
102102
45deg,
103103
var(--transparency-lighter) 25%,

‎src/components/RunicPlayground/index.css

+24-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.runic-playground {
22
border-radius: 1em;
3-
background-color: black;
4-
border: 2px solid #242424;
3+
background-color: var(--surface-1);
4+
border: 2px solid var(--surface-1-border);
55

66
display: grid;
77
align-items: center;
@@ -36,18 +36,37 @@
3636

3737
.runic-playground__svg-container {
3838
border: none;
39-
border-bottom: 2px solid #242424;
39+
border-bottom: 2px solid var(--surface-1-border);
4040
}
4141

4242
/* Desktop - Horizontal */
4343

4444
@media (min-width: 1024px) {
4545
.runic-playground__svg-container {
4646
border: none;
47-
border-right: 2px solid #242424;
47+
border-right: 2px solid var(--surface-1-border);
4848
}
4949
}
5050

51+
/* Enable (easy) custom rune colors (to adapt to the theme) */
52+
53+
.runic-playground .rune-segment--stroke {
54+
stroke: var(--rune-color, transparent);
55+
}
56+
.runic-playground .rune-segment--fill {
57+
fill: var(--rune-color, transparent);
58+
}
59+
60+
.runic-playground .runic-layer--guide {
61+
--rune-color: var(--surface-2);
62+
}
63+
.runic-playground .runic-layer--real .rune-segment--active {
64+
--rune-color: cornflowerblue;
65+
}
66+
.runic-playground .runic-layer--text text {
67+
--rune-color: currentColor;
68+
}
69+
5170
.runic-playground__manuals {
5271
font-size: 0.75em;
5372
padding: 1em;
@@ -73,7 +92,7 @@
7392
overflow: hidden;
7493

7594
color: inherit;
76-
background-color: #242424;
95+
background-color: var(--surface-2);
7796

7897
display: flex;
7998
justify-content: center;

‎src/components/RunicPlayground/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ export class RunicPlayground extends Component<Props, State> {
8282
interactive={true}
8383
displayPhonemes={true}
8484
runeThickness={0.5}
85-
runeColor="cornflowerblue"
86-
runeGuideColor="#242424"
85+
runeColor=""
86+
runeGuideColor=""
8787
/>
8888
</div>
8989
<div className="runic-playground__manuals">

‎src/components/SocialMediaCard/index.css

+14-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
font-size: 0.75em;
1818
padding: 0.5em 1em;
1919
background-color: var(--sm-card--background);
20-
border: 2px solid #242424;
20+
border: 2px solid var(--surface-1-border);
2121
border-radius: 1em;
2222

2323
display: grid;
@@ -87,3 +87,16 @@
8787
vertical-align: text-top;
8888
margin-right: 0.5em;
8989
}
90+
91+
/* Enable (easy) custom rune colors (to adapt to the theme) */
92+
93+
.sm-card .rune-segment--stroke {
94+
stroke: var(--rune-color, transparent);
95+
}
96+
.sm-card .rune-segment--fill {
97+
fill: var(--rune-color, transparent);
98+
}
99+
100+
.sm-card .runic-layer--real .rune-segment--active {
101+
--rune-color: currentColor;
102+
}

‎src/components/SocialMediaCard/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ export class SocialMediaCard extends Component<SocialMediaCardProps, State> {
4040
phoneticText={props.phoneticText}
4141
displayPhonemes={false}
4242
interactive={false}
43-
runeColor="#e7e9ea"
43+
runeColor=""
44+
runeGuideColor=""
4445
/>
4546
</div>
4647
<div className="sm-card__interactions">

‎src/components/TextInput/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818

1919
border-radius: 0.5em;
2020
border: none;
21-
background-color: #242424;
22-
outline: 2px solid #363636;
21+
background-color: var(--surface-2);
22+
outline: 2px solid var(--surface-2-border);
2323
}
2424

2525
.text-input__textarea:focus {

0 commit comments

Comments
 (0)