|
75 | 75 | --md-footer-fg-color: var(--md-default-fg-color); |
76 | 76 |
|
77 | 77 | --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)}; |
82 | 82 |
|
83 | 83 | --md-tab-control-bg: var(--md-default-bg-color--dark); |
84 | 84 |
|
85 | 85 | // 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)}; |
90 | 90 |
|
91 | 91 | // General text |
92 | 92 | --md-text-color: var(--md-default-fg-color); |
|
99 | 99 | --md-code-fg-color: #{dracula.$drac-fg}; |
100 | 100 | --md-code-bg-color: #{dracula.$drac-bg}; |
101 | 101 | --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)}; |
103 | 103 | --md-code-hl-operator-color: #{dracula.$drac-pink}; |
104 | 104 | --md-code-hl-punctuation-color: #{dracula.$drac-fg}; |
105 | 105 | --md-code-hl-string-color: #{dracula.$drac-yellow}; |
|
125 | 125 | --md-code-special-bg-color: #{dracula.$drac-highlight}; |
126 | 126 |
|
127 | 127 | // 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)}; |
129 | 129 |
|
130 | 130 | // Various Material related color variables |
131 | 131 | --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)}; |
135 | 135 |
|
136 | 136 | // Progressbar colors |
137 | 137 | --md-progress-stripe: var(--md-default-bg-color--lightest); |
|
178 | 178 | [data-md-color-scheme="slate"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"] |
179 | 179 | { |
180 | 180 |
|
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)}; |
182 | 182 | --md-primary-fg-color: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 1); |
183 | 183 | --md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 0.2); |
184 | 184 | --md-primary-fg-color--light: hsla(#{convert.hex2hsl(list.nth($colors, 2))}, 1); |
|
214 | 214 | // Color palette |
215 | 215 | [data-md-color-scheme="slate"][data-md-color-accent="#{$name}"], |
216 | 216 | [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)}; |
218 | 218 | --md-accent-fg-color: hsla(#{convert.hex2hsl($color)}, 1); |
219 | 219 | --md-accent-fg-color--transparent: hsla(#{convert.hex2hsl($color)}, 0.2); |
220 | 220 | --md-accent-bg-color: var(--md-default-bg-color); |
|
0 commit comments