Skip to content

Commit a77e635

Browse files
author
mkb
committed
fix: theme colors reflect mocha palette better
1 parent 93d8788 commit a77e635

File tree

3 files changed

+64
-85
lines changed

3 files changed

+64
-85
lines changed

‎scss/_base.scss

+30-85
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
@charset "UTF-8";
2-
3-
/* @use "abstracts/colors"; */
4-
5-
@use "abstracts/fonts";
62
@use "abstracts/variables";
3+
@use "abstracts/fonts";
74
@use "base/admonitions-and-codeblocks";
85
@use "base/links";
96
@use "base/typography";
@@ -43,98 +40,45 @@
4340
}
4441

4542
body {
46-
--font-text-theme: "Vollkorn", "Gentium Book Basic", Inter, -apple-system, blinkmacsystemfont, "Segoe UI", "Microsoft YaHei Light", sans-serif;
43+
--font-text-theme: "Vollkorn", "Gentium Book Basic", inter, -apple-system, blinkmacsystemfont, "Segoe UI", "Microsoft YaHei Light", sans-serif;
4744
--font-interface-theme: "Public Sans", "Gill Sans", -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
4845
--font-monospace-theme: "Mononoki Nerd Font Mono", sfmono-regular, consolas, "Roboto Mono", monospace;
4946
}
5047

51-
.theme-dark {
52-
--background-primary: hsl(240deg 21% 15%);
53-
--background-primary-alt: hsl(249deg 23% 12%);
54-
--background-secondary: hsl(240deg 21% 15%);
55-
--background-secondary-alt: hsl(249deg 23% 12%);
56-
--background-modifier-border: hsl(249deg 16% 32%);
57-
--background-modifier-form-field: hsl(235deg 17% 29% 30%);
58-
--background-modifier-form-field-highlighted: hsl(235deg 17% 29% 30%);
59-
--background-modifier-box-shadow: hsl(235deg 17% 29% 30%);
60-
--background-modifier-success: hsl(128deg 58% 79%);
61-
--background-modifier-error: hsl(342deg 79% 75%);
62-
--background-modifier-error-rgb: 226 140 140;
63-
--background-modifier-error-hover: hsl(342deg 79% 60%);
64-
--background-modifier-cover: rgb(0 0 0 80%);
65-
--text-accent: hsl(128deg 58% 79%);
66-
--text-accent-hover: hsl(128deg 58% 79%);
67-
--text-normal: hsl(220deg 38% 89%);
68-
--text-normal-transparent: hsl(220deg 38% 89% / 60%);
69-
--text-muted: hsl(285deg 10% 75%);
70-
--text-muted-rgb: 195, 186, 198;
71-
--text-faint: hsl(274deg 11% 59%);
72-
--text-error: hsl(342deg 79% 75%);
73-
--text-error-hover: hsl(342deg 79% 60%);
74-
--text-highlight-bg: hsl(41deg 88% 84%);
75-
--text-highlight-bg-active: hsl(223.2deg 70.1% 79%);
76-
--text-selection: hsl(254deg 12% 36%);
77-
--text-on-accent: hsl(254deg 25% 10%);
78-
--interactive-normal: hsl(171deg 53% 81%);
79-
--interactive-hover: hsl(171deg 53% 81%);
80-
--interactive-accent: hsl(128deg 58% 79%);
81-
--interactive-accent-rgb: 171, 233, 179;
82-
--interactive-accent-hover: hsl(128deg 58% 79%);
83-
--interactive-success: hsl(128deg 58% 79%);
84-
--scrollbar-active-thumb-bg: rgb(255 255 255 / 20%);
85-
--scrollbar-bg: rgb(255 255 255 / 5%);
86-
--scrollbar-thumb-bg: rgb(255 255 255 / 10%);
87-
--code-blocks: hsl(10deg 56% 91%);
88-
--border: hsl(249deg 18% 22%);
89-
--border-inset: hsl(254deg 12% 36%);
90-
--active-interaction: hsl(316deg 72% 86%);
91-
--highlight-mix-blend-mode: lighten;
92-
--internal-buttons: hsl(24deg 88% 78%);
93-
--text-selection-opaque: hsl(238deg 100% 89%);
94-
--rosewater: hsl(10deg 56% 91%);
95-
--maroon: hsl(349deg 60% 77%);
96-
--pink: hsl(316deg 72% 86%);
97-
--lavender: hsl(220deg 38% 89%);
98-
--black-0: hsl(254deg 25% 10%);
99-
--black-1: hsl(249deg 23% 12%);
100-
--black-2: hsl(240deg 21% 15%);
101-
--black-3: hsl(249deg 18% 22%);
102-
--black-4: hsl(254deg 12% 36%);
103-
}
104-
48+
.theme-dark,
10549
.theme-light {
10650
--background-primary: hsl(240deg 21% 15%);
107-
--background-primary-alt: hsl(249deg 23% 12%);
51+
--background-primary-alt: hsl(240deg 23% 9%);
10852
--background-secondary: hsl(240deg 21% 15%);
109-
--background-secondary-alt: hsl(249deg 23% 12%);
110-
--background-modifier-border: hsl(249deg 23% 12%);
53+
--background-secondary-alt: hsl(240deg 23% 9%);
54+
--background-modifier-border: hsl(240deg 23% 9%);
11155
--background-modifier-form-field: hsl(235deg 17% 29% 30%);
11256
--background-modifier-form-field-highlighted: hsl(235deg 17% 29% 30%);
11357
--background-modifier-box-shadow: hsl(235deg 17% 29% 30%);
114-
--background-modifier-success: hsl(128deg 58% 79%);
115-
--background-modifier-error: hsl(342deg 79% 75%);
58+
--background-modifier-success: hsl(115deg 54% 76%);
59+
--background-modifier-error: hsl(343deg 81% 75%);
11660
--background-modifier-error-rgb: 226 140 140;
117-
--background-modifier-error-hover: hsl(342deg 79% 60%);
61+
--background-modifier-error-hover: hsl(343deg 81% 60%);
11862
--background-modifier-cover: rgb(0 0 0 80%);
119-
--text-accent: hsl(128deg 58% 79%);
120-
--text-accent-hover: hsl(128deg 58% 79%);
121-
--text-normal: hsl(220deg 38% 89%);
63+
--text-accent: hsl(115deg 54% 76%);
64+
--text-accent-hover: hsl(115deg 54% 76%);
65+
--text-normal: hsl(226deg 64% 88%);
12266
--text-normal-transparent: hsl(220deg 38% 89% / 60%);
123-
--text-muted: hsl(285deg 10% 75%);
124-
--text-muted-rgb: 195, 186, 198;
125-
--text-faint: hsl(274deg 11% 59%);
67+
--text-muted: hsl(227deg 35% 80%);
68+
--text-muted-rgb: 166, 173, 201;
69+
--text-faint: hsl(228deg 24% 72%);
12670
--text-error: hsl(342deg 79% 75%);
12771
--text-error-hover: hsl(342deg 79% 60%);
128-
--text-highlight-bg: hsl(41deg 88% 84%);
129-
--text-highlight-bg-active: hsl(223.2deg 70.1% 79%);
130-
--text-selection: hsl(254deg 12% 36%);
131-
--text-on-accent: hsl(254deg 25% 10%);
132-
--interactive-normal: hsl(171deg 53% 81%);
133-
--interactive-hover: hsl(171deg 53% 81%);
134-
--interactive-accent: hsl(128deg 58% 79%);
135-
--interactive-accent-rgb: 171, 233, 179;
136-
--interactive-accent-hover: hsl(128deg 58% 79%);
137-
--interactive-success: hsl(128deg 58% 79%);
72+
--text-highlight-bg: hsl(41deg 86% 83%);
73+
--text-highlight-bg-active: hsl(232deg 97% 85%);
74+
--text-selection: hsl(233deg 12% 39%);
75+
--text-on-accent: hsl(240deg 21% 12%);
76+
--interactive-normal: hsl(170deg 57% 73%);
77+
--interactive-hover: hsl(170deg 57% 73%);
78+
--interactive-accent: hsl(115deg 54% 76%);
79+
--interactive-accent-rgb: 166, 227, 161;
80+
--interactive-accent-hover: hsl(115deg 54% 76%);
81+
--interactive-success: hsl(115deg 54% 76%);
13882
--scrollbar-active-thumb-bg: rgb(255 255 255 / 20%);
13983
--scrollbar-bg: rgb(255 255 255 / 5%);
14084
--scrollbar-thumb-bg: rgb(255 255 255 / 10%);
@@ -143,15 +87,16 @@ body {
14387
--border-inset: hsl(254deg 12% 36%);
14488
--active-interaction: hsl(316deg 72% 86%);
14589
--highlight-mix-blend-mode: lighten;
146-
--internal-buttons: hsl(24deg 88% 78%);
147-
--text-selection-opaque: hsl(238deg 100% 89%);
90+
--internal-buttons: hsl(23deg 92% 75%);
91+
--text-selection-opaque: hsl(232deg 97% 85%);
14892
--rosewater: hsl(10deg 56% 91%);
149-
--maroon: hsl(349deg 60% 77%);
93+
--maroon: hsl(350deg 65% 77%);
15094
--pink: hsl(316deg 72% 86%);
151-
--lavender: hsl(220deg 38% 89%);
95+
--lavender: hsl(232deg 97% 85%);
15296
--black-0: hsl(254deg 25% 10%);
15397
--black-1: hsl(249deg 23% 12%);
15498
--black-2: hsl(240deg 21% 15%);
15599
--black-3: hsl(249deg 18% 22%);
156100
--black-4: hsl(254deg 12% 36%);
101+
--overlay0: hsl(231deg 11% 47%);
157102
}

‎scss/abstracts/_colors.scss

+28
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
/* from _mocha.scss https://github.com/catppuccin/palette/blob/main/scss */
2+
$rosewater: hsl(10, 56%, 91%);
3+
$flamingo: hsl(0, 59%, 88%);
4+
$pink: hsl(316, 72%, 86%);
5+
$mauve: hsl(267, 84%, 81%);
6+
$red: hsl(343, 81%, 75%);
7+
$maroon: hsl(350, 65%, 77%);
8+
$peach: hsl(23, 92%, 75%);
9+
$yellow: hsl(41, 86%, 83%);
10+
$green: hsl(115, 54%, 76%);
11+
$teal: hsl(170, 57%, 73%);
12+
$sky: hsl(189, 71%, 73%);
13+
$sapphire: hsl(199, 76%, 69%);
14+
$blue: hsl(217, 92%, 76%);
15+
$lavender: hsl(232, 97%, 85%);
16+
$text: hsl(226, 64%, 88%);
17+
$subtext1: hsl(227, 35%, 80%);
18+
$subtext0: hsl(228, 24%, 72%);
19+
$overlay2: hsl(228, 17%, 64%);
20+
$overlay1: hsl(230, 13%, 55%);
21+
$overlay0: hsl(231, 11%, 47%);
22+
$surface2: hsl(233, 12%, 39%);
23+
$surface1: hsl(234, 13%, 31%);
24+
$surface0: hsl(237, 16%, 23%);
25+
$base: hsl(240, 21%, 15%);
26+
$mantle: hsl(240, 21%, 12%);
27+
$crust: hsl(240, 23%, 9%);
28+
129
/* make any changes to colors in base.scss instead */
230

331
/* cursor, urls */

‎scss/components/_lines.scss

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/* Tables */
2+
.markdown-rendered th,
3+
.markdown-rendered td {
4+
border: 1px solid hsl(233deg 12% 39%);
5+
}
6+
17
.app-container.is-left-sidedock-collapsed .workspace-split.mod-left-split {
28
min-width: 15em;
39
margin: 0 8px;

0 commit comments

Comments
 (0)