Skip to content

Commit 10665ba

Browse files
committed
Theme adjustments
- mix colors in oklab to better preserve hues - fix some cases with code nested under tabs - match admonition alpha of official zensical theme for overrides - adjust some sidebar icons
1 parent 932b1b5 commit 10665ba

File tree

11 files changed

+43
-29
lines changed

11 files changed

+43
-29
lines changed

docs/src/markdown/extensions/blocks/plugins/tab.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
icon: lucide/notebook-tabs
2+
icon: lucide/app-window
33
---
44
[:octicons-file-code-24:][_tab_block]{: .source-link }
55

docs/src/markdown/extensions/tabbed.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
icon: lucide/notebook-tabs
2+
icon: lucide/app-window
33
---
44
[:octicons-file-code-24:][_tabbed]{: .source-link }
55

docs/src/scss/extensions/_admonition.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ $old-admonitions: (
2727
/* Style new admonitions with dark or light colors */
2828
:root > * {
2929
--md-admonition-icon-color: #{dracula.$alucard-blue};
30-
--md-admonition-bg-color: #{color.change(dracula.$alucard-blue, $alpha: 0.255)};
30+
--md-admonition-bg-color: #{color.adjust(dracula.$alucard-blue, $alpha: -0.9)};
3131
// --md-admonition-bg-color: #{color.mix(dracula.$alucard-blue, dracula.$alucard-bg, $weight: 12%, $method: oklab)};
3232

3333
&[data-md-color-scheme="slate"] {
3434
--md-admonition-icon-color: #{dracula.$drac-blue};
35-
--md-admonition-bg-color: #{color.change(dracula.$drac-blue, $alpha: 0.102)};
35+
--md-admonition-bg-color: #{color.adjust(dracula.$drac-blue, $alpha: -0.9)};
3636
}
3737

3838
@each $names, $prop in $new-admonitions {
@@ -42,12 +42,12 @@ $old-admonitions: (
4242

4343
& {
4444
--md-admonition-icon--#{$name}: svg-load("#{list.nth($prop, 3)}");
45-
--md-admonition-bg-color--#{$name}: #{color.change($tint2, $alpha: 0.102)};
45+
--md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
4646
--md-admonition-icon-color--#{$name}: #{$tint2};
4747
}
4848

4949
&[data-md-color-scheme="slate"] {
50-
--md-admonition-bg-color--#{$name}: #{color.change($tint, $alpha: 0.102)};
50+
--md-admonition-bg-color--#{$name}: #{color.adjust($tint, $alpha: -0.9)};
5151
--md-admonition-icon-color--#{$name}: #{$tint};
5252
}
5353
}
@@ -58,12 +58,12 @@ $old-admonitions: (
5858
$name: list.nth($names, 1);
5959

6060
& {
61-
--md-admonition-bg-color--#{$name}: #{color.change($tint2, $alpha: 0.102)};
61+
--md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
6262
--md-admonition-icon-color--#{$name}: #{$tint2};
6363
}
6464

6565
&[data-md-color-scheme="slate"] {
66-
--md-admonition-bg-color--#{$name}: #{color.change($tint, $alpha: 0.102)};
66+
--md-admonition-bg-color--#{$name}: #{color.adjust($tint, $alpha: -0.9)};
6767
--md-admonition-icon-color--#{$name}: #{$tint};
6868
}
6969
}

docs/src/scss/extensions/_tabbed.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,25 @@
4242
.highlight,
4343
.highlighttable {
4444

45+
&:first-child {
46+
margin-top: convert.px2em(15px);
47+
48+
code {
49+
border-top-left-radius: convert.px2rem(9.6px);
50+
border-top-right-radius: convert.px2rem(9.6px);
51+
}
52+
}
53+
4554
&:only-child {
55+
margin-top: 0;
4656
margin-right: convert.px2rem(-24px);
4757
margin-left: convert.px2rem(-24px);
4858
padding-right: convert.px2rem(12px);
4959
padding-left: convert.px2rem(12px);
60+
code {
61+
border-top-left-radius: 0;
62+
border-top-right-radius: 0;
63+
}
5064

5165
span.filename {
5266
margin-top: 0;

docs/src/scss/palette/_colors.scss

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,18 @@
7575
--md-footer-fg-color: var(--md-default-fg-color);
7676

7777
--md-default-bg-color: var(--md-default-bg-color--darkest);
78-
--md-default-bg-color--light: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -9%), $alpha: -0.3)};
79-
--md-default-bg-color--lighter: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -9%), $alpha: -0.7)};
80-
--md-default-bg-color--lightest: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -9%), $alpha: -0.88)};
81-
--md-default-bg-color--trans: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -9%), $alpha: -1)};
78+
--md-default-bg-color--light: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.3)};
79+
--md-default-bg-color--lighter: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.7)};
80+
--md-default-bg-color--lightest: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -0.88)};
81+
--md-default-bg-color--trans: #{color.adjust(color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab), $alpha: -1)};
8282

8383
--md-tab-control-bg: var(--md-default-bg-color--dark);
8484

8585
// Dark specific colors
86-
--md-default-bg-color--dark: #{color.adjust(dracula.$drac-default-bg, $lightness: -3%)};
87-
--md-default-bg-color--darker: #{color.adjust(dracula.$drac-default-bg, $lightness: -6%)};
88-
--md-default-bg-color--darkest: #{color.adjust(dracula.$drac-default-bg, $lightness: -9%)};
89-
--md-default-bg-color--ultra-dark: #{color.adjust(dracula.$drac-default-bg, $lightness: -15%)};
86+
--md-default-bg-color--dark: #{color.adjust(dracula.$drac-default-bg, $lightness: -3%, $space: oklab)};
87+
--md-default-bg-color--darker: #{color.adjust(dracula.$drac-default-bg, $lightness: -6%, $space: oklab)};
88+
--md-default-bg-color--darkest: #{color.adjust(dracula.$drac-default-bg, $lightness: -10%, $space: oklab)};
89+
--md-default-bg-color--ultra-dark: #{color.adjust(dracula.$drac-default-bg, $lightness: -15%, $space: oklab)};
9090

9191
// General text
9292
--md-text-color: var(--md-default-fg-color);
@@ -99,7 +99,7 @@
9999
--md-code-fg-color: #{dracula.$drac-fg};
100100
--md-code-bg-color: #{dracula.$drac-bg};
101101
--md-code-title-bg-color: #{dracula.$drac-bg};
102-
--md-code-inline-bg-color: #{color.adjust(dracula.$drac-bg, $lightness: 5%)};
102+
--md-code-inline-bg-color: #{color.adjust(dracula.$drac-bg, $lightness: 5%, $space: oklab)};
103103
--md-code-hl-operator-color: #{dracula.$drac-pink};
104104
--md-code-hl-punctuation-color: #{dracula.$drac-fg};
105105
--md-code-hl-string-color: #{dracula.$drac-yellow};
@@ -125,13 +125,13 @@
125125
--md-code-special-bg-color: #{dracula.$drac-highlight};
126126

127127
// List steps
128-
--md-steps-border-color: #{color.adjust(dracula.$drac-bg, $lightness: 10%)};
128+
--md-steps-border-color: #{color.adjust(dracula.$drac-bg, $lightness: 10%, $space: oklab)};
129129

130130
// Various Material related color variables
131131
--md-typeset-a-color: #{dracula.$drac-cyan};
132-
--md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};
133-
--md-typeset-del-color: #{color.mix(dracula.$drac-pink, dracula.$drac-bg, 35%)};
134-
--md-typeset-ins-color: #{color.mix(dracula.$drac-green, dracula.$drac-bg, 35%)};
132+
--md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%, $method: oklab)};
133+
--md-typeset-del-color: #{color.mix(dracula.$drac-pink, dracula.$drac-bg, 35%, $method: oklab)};
134+
--md-typeset-ins-color: #{color.mix(dracula.$drac-green, dracula.$drac-bg, 35%, $method: oklab)};
135135

136136
// Progressbar colors
137137
--md-progress-stripe: var(--md-default-bg-color--lightest);
@@ -178,7 +178,7 @@
178178
[data-md-color-scheme="slate"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"]
179179
{
180180

181-
--md-primary-code-bg-color: #{color.mix(dracula.$drac-bg, list.nth($colors, 1), 85%)};
181+
--md-primary-code-bg-color: #{color.mix(dracula.$drac-bg, list.nth($colors, 1), 85%, $method: oklab)};
182182
--md-primary-fg-color: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 1);
183183
--md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 0.2);
184184
--md-primary-fg-color--light: hsla(#{convert.hex2hsl(list.nth($colors, 2))}, 1);
@@ -214,7 +214,7 @@
214214
// Color palette
215215
[data-md-color-scheme="slate"][data-md-color-accent="#{$name}"],
216216
[data-md-color-scheme="slate"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"] {
217-
--md-code-link-accent-bg-color: #{color.mix($color, dracula.$drac-bg, 15%)};
217+
--md-code-link-accent-bg-color: #{color.mix($color, dracula.$drac-bg, 15%, $method: oklab)};
218218
--md-accent-fg-color: hsla(#{convert.hex2hsl($color)}, 1);
219219
--md-accent-fg-color--transparent: hsla(#{convert.hex2hsl($color)}, 0.2);
220220
--md-accent-bg-color: var(--md-default-bg-color);
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@use "sass:color";
22

33
@function tint($color, $percentage) {
4-
@return color.mix(white, $color, $percentage);
4+
@return color.mix(white, $color, $percentage, $method: oklab);
55
}
66

77

88
@function shade($color, $percentage) {
9-
@return color.mix(black, $color, $percentage);
9+
@return color.mix(black, $color, $percentage, $method: oklab);
1010
}

docs/theme/assets/pymdownx-extras/extra-14483b58e0.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/theme/assets/pymdownx-extras/extra-14483b58e0.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/theme/assets/pymdownx-extras/extra-a1ecc5dcda.css

Lines changed: 0 additions & 2 deletions
This file was deleted.

docs/theme/assets/pymdownx-extras/extra-a1ecc5dcda.css.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)