Skip to content

Commit 3a89709

Browse files
facelessuserfacelessuser
committed
Fix more sass stuff in doc style
1 parent e8ec7bf commit 3a89709

10 files changed

Lines changed: 369 additions & 99 deletions

File tree

‎docs/src/scss/_general.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
@use "material-color";
1+
@use "palette/material_color";
22
@use "palette/dracula";
33
@use "utilities/break";
44
@use "utilities/convert";
55

66
/* Normal colors */
77
:root {
8-
--md-heart: #{material-color.$clr-red-a200};
9-
--md-heart-big: #{material-color.$clr-red-a400};
8+
--md-heart: #{material_color.$clr-red-a200};
9+
--md-heart-big: #{material_color.$clr-red-a400};
1010

1111
:focus-visible {
1212
outline-style: solid;

‎docs/src/scss/extensions/_admonition.scss‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "sass:color";
2-
@use "material-color";
2+
@use "sass:list";
33
@use "../utilities/convert";
4+
@use "../palette/material_color";
45
@use "../palette/dracula";
56

67
.md-typeset .admonition {
@@ -9,8 +10,8 @@
910
}
1011

1112
$new-admonitions: (
12-
settings config: dracula.$drac-pink material-color.$clr-purple-a700 "@mdi/svg/svg/cog.svg",
13-
new: dracula.$drac-yellow material-color.$clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
13+
settings config: dracula.$drac-pink material_color.$clr-purple-a700 "@mdi/svg/svg/cog.svg",
14+
new: dracula.$drac-yellow material_color.$clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
1415
) !default;
1516

1617
$old-admonitions: (
@@ -37,12 +38,12 @@ $new-admonitions: (
3738
}
3839

3940
@each $names, $prop in $new-admonitions {
40-
$tint: nth($prop, 1);
41-
$tint2: nth($prop, 2);
42-
$name: nth($names, 1);
41+
$tint: list.nth($prop, 1);
42+
$tint2: list.nth($prop, 2);
43+
$name: list.nth($names, 1);
4344

4445
& {
45-
--md-admonition-icon--#{$name}: svg-load("#{nth($prop, 3)}");
46+
--md-admonition-icon--#{$name}: svg-load("#{list.nth($prop, 3)}");
4647
--md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
4748
--md-admonition-icon-color--#{$name}: #{$tint2};
4849
--md-admonition-shadow-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
@@ -55,7 +56,7 @@ $new-admonitions: (
5556
}
5657

5758
@each $names, $tint in $old-admonitions {
58-
$name: nth($names, 1);
59+
$name: list.nth($names, 1);
5960

6061
& {
6162
--md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
@@ -91,7 +92,7 @@ $new-admonitions: (
9192

9293
@each $names, $prop in $old-admonitions {
9394

94-
$name: nth($names, 1);
95+
$name: list.nth($names, 1);
9596

9697
// Define base class
9798
.md-typeset .admonition.#{$name} {
@@ -117,9 +118,9 @@ $new-admonitions: (
117118
}
118119

119120
// Define synonyms for base class
120-
@if length($names) > 1 {
121-
@for $n from 2 through length($names) {
122-
.#{nth($names, $n)} {
121+
@if list.length($names) > 1 {
122+
@for $n from 2 through list.length($names) {
123+
.#{list.nth($names, $n)} {
123124
@extend .#{$name};
124125
}
125126
}
@@ -128,7 +129,7 @@ $new-admonitions: (
128129
}
129130

130131
@each $names, $prop in $new-admonitions {
131-
$name: nth($names, 1);
132+
$name: list.nth($names, 1);
132133

133134
// Define base class
134135
.md-typeset .admonition.#{$name} {
@@ -158,9 +159,9 @@ $new-admonitions: (
158159
}
159160

160161
// Define synonyms for base class
161-
@if length($names) > 1 {
162-
@for $n from 2 through length($names) {
163-
.#{nth($names, $n)} {
162+
@if list.length($names) > 1 {
163+
@for $n from 2 through list.length($names) {
164+
.#{list.nth($names, $n)} {
164165
@extend .#{$name};
165166
}
166167
}

‎docs/src/scss/extensions/_progressbar.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "material-color";
1+
@use "../palette/material_color";
22
@use "../utilities/convert";
33

44
.md-typeset {
@@ -23,7 +23,7 @@
2323
.progress-bar {
2424
float: left;
2525
height: convert.px2rem(24px);
26-
background-color: material-color.$clr-blue-a400;
26+
background-color: material_color.$clr-blue-a400;
2727
}
2828

2929
/* Stripe animation */

‎docs/src/scss/palette/_colors.scss‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@use "sass:color";
2-
@use "material-color";
32
@use "../utilities/convert";
43
@use "../utilities/color_tools";
4+
@use "./material_color";
55
@use "./dracula";
6+
@use "sass:list";
67

78
:root > * {
89
// Custom code colors
@@ -24,16 +25,16 @@
2425
--md-code-hl-class-color: var(--md-code-hl-function-color);
2526

2627
// Various Material related color variables
27-
--md-typeset-a-color: #{material-color.$clr-cyan-500};
28+
--md-typeset-a-color: #{material_color.$clr-cyan-500};
2829

2930
// Progressbar colors
3031
--md-progress-stripe: var(--md-default-bg-color--lighter);
31-
--md-progress-100: #{material-color.$clr-green-a400};
32-
--md-progress-80: #{material-color.$clr-green-a400};
33-
--md-progress-60: #{material-color.$clr-yellow-700};
34-
--md-progress-40: #{material-color.$clr-orange-a400};
35-
--md-progress-20: #{material-color.$clr-red-a200};
36-
--md-progress-0: #{material-color.$clr-red-a400};
32+
--md-progress-100: #{material_color.$clr-green-a400};
33+
--md-progress-80: #{material_color.$clr-green-a400};
34+
--md-progress-60: #{material_color.$clr-yellow-700};
35+
--md-progress-40: #{material_color.$clr-orange-a400};
36+
--md-progress-20: #{material_color.$clr-red-a200};
37+
--md-progress-0: #{material_color.$clr-red-a400};
3738

3839
// Keys colors
3940
--md-typeset-kbd-color: #{color_tools.shade(hsla(0, 100%, 100%, 1), 8%)};
@@ -62,7 +63,7 @@
6263
--md-default-fg-color--lightest: #{color.adjust(dracula.$drac-fg, $alpha: -0.93)};
6364
--md-default-autocomplete-fg-color: #{color.adjust(dracula.$drac-fg, $alpha: -0.60)};
6465
--md-shadow-z2: 0 #{convert.px2rem(4px)} #{convert.px2rem(10px)} hsla(0, 0%, 0%, 0.3),
65-
0 0 #{convert.px2rem(1px)} hsla(0, 0%, 0%, 0.2);
66+
0 0 #{convert.px2rem(1px)} hsla(0, 0%, 0%, 0.2);
6667

6768
--md-default-bg-color: var(--md-default-bg-color--darkest);
6869
--md-default-bg-color--light: #{color.adjust(dracula.$drac-default-bg, $alpha: -0.3)};
@@ -111,13 +112,13 @@
111112

112113
--md-code-special-bg-color: #{color.adjust(dracula.$drac-bg, $lightness: -5%)};
113114
--md-code-alternate-bg-color: #{color_tools.tint(dracula.$drac-bg, 10%)};
114-
--md-code-link-bg-color: #{mix(dracula.$drac-cyan, dracula.$drac-bg, 15%)};
115+
--md-code-link-bg-color: #{color.mix(dracula.$drac-cyan, dracula.$drac-bg, 15%)};
115116

116117
// Various Material related color variables
117118
--md-typeset-a-color: #{dracula.$drac-cyan};
118-
--md-typeset-mark-color: #{mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};
119-
--md-typeset-del-color: #{mix(dracula.$drac-pink, dracula.$drac-bg, 35%)};
120-
--md-typeset-ins-color: #{mix(dracula.$drac-green, dracula.$drac-bg, 35%)};
119+
--md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};
120+
--md-typeset-del-color: #{color.mix(dracula.$drac-pink, dracula.$drac-bg, 35%)};
121+
--md-typeset-ins-color: #{color.mix(dracula.$drac-green, dracula.$drac-bg, 35%)};
121122

122123
// Progressbar colors
123124
--md-progress-stripe: var(--md-default-bg-color--lightest);
@@ -163,11 +164,11 @@
163164
[data-md-color-scheme="dracula"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"]
164165
{
165166

166-
--md-primary-code-bg-color: #{mix(dracula.$drac-bg, nth($colors, 1), 85%)};
167-
--md-primary-fg-color: hsla(#{convert.hex2hsl(nth($colors, 1))}, 1);
168-
--md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(nth($colors, 1))}, 0.1);
169-
--md-primary-fg-color--light: hsla(#{convert.hex2hsl(nth($colors, 2))}, 1);
170-
--md-primary-fg-color--dark: hsla(#{convert.hex2hsl(nth($colors, 3))}, 1);
167+
--md-primary-code-bg-color: #{color.mix(dracula.$drac-bg, list.nth($colors, 1), 85%)};
168+
--md-primary-fg-color: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 1);
169+
--md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 0.1);
170+
--md-primary-fg-color--light: hsla(#{convert.hex2hsl(list.nth($colors, 2))}, 1);
171+
--md-primary-fg-color--dark: hsla(#{convert.hex2hsl(list.nth($colors, 3))}, 1);
171172
--md-primary-bg-color: var(--md-default-bg-color);
172173
--md-primary-bg-color--light: var(--md-default-bg-color--light);
173174
}
@@ -199,7 +200,7 @@
199200
// Color palette
200201
[data-md-color-scheme="dracula"][data-md-color-accent="#{$name}"],
201202
[data-md-color-scheme="dracula"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"] {
202-
--md-code-link-accent-bg-color: #{mix($color, dracula.$drac-bg, 15%)};
203+
--md-code-link-accent-bg-color: #{color.mix($color, dracula.$drac-bg, 15%)};
203204
--md-accent-fg-color: hsla(#{convert.hex2hsl($color)}, 1);
204205
--md-accent-fg-color--transparent: hsla(#{convert.hex2hsl($color)}, 0.1);
205206
--md-accent-bg-color: var(--md-default-bg-color);

0 commit comments

Comments
 (0)