Fix more sass stuff in doc style

facelessuser · Oct 17, 2024 · 3a89709 · 3a89709
1 parent e8ec7bf
commit 3a89709
Show file tree

Hide file tree

Showing 10 changed files with 369 additions and 99 deletions.
diff --git a/docs/src/scss/_general.scss b/docs/src/scss/_general.scss
@@ -1,12 +1,12 @@
-@use "material-color";
+@use "palette/material_color";
 @use "palette/dracula";
 @use "utilities/break";
 @use "utilities/convert";
 
 /* Normal colors */
 :root {
-  --md-heart: #{material-color.$clr-red-a200};
-  --md-heart-big: #{material-color.$clr-red-a400};
+  --md-heart: #{material_color.$clr-red-a200};
+  --md-heart-big: #{material_color.$clr-red-a400};
 
   :focus-visible {
     outline-style: solid;

diff --git a/docs/src/scss/extensions/_admonition.scss b/docs/src/scss/extensions/_admonition.scss
@@ -1,6 +1,7 @@
 @use "sass:color";
-@use "material-color";
+@use "sass:list";
 @use "../utilities/convert";
+@use "../palette/material_color";
 @use "../palette/dracula";
 
 .md-typeset .admonition {
@@ -9,8 +10,8 @@
 }
 
 $new-admonitions: (
-  settings config: dracula.$drac-pink material-color.$clr-purple-a700 "@mdi/svg/svg/cog.svg",
-  new: dracula.$drac-yellow material-color.$clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
+  settings config: dracula.$drac-pink material_color.$clr-purple-a700 "@mdi/svg/svg/cog.svg",
+  new: dracula.$drac-yellow material_color.$clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
 ) !default;
 
   $old-admonitions: (
@@ -37,12 +38,12 @@ $new-admonitions: (
   }
 
   @each $names, $prop in $new-admonitions {
-    $tint: nth($prop, 1);
-    $tint2: nth($prop, 2);
-    $name: nth($names, 1);
+    $tint: list.nth($prop, 1);
+    $tint2: list.nth($prop, 2);
+    $name: list.nth($names, 1);
 
     & {
-      --md-admonition-icon--#{$name}: svg-load("#{nth($prop, 3)}");
+      --md-admonition-icon--#{$name}: svg-load("#{list.nth($prop, 3)}");
       --md-admonition-bg-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
       --md-admonition-icon-color--#{$name}: #{$tint2};
       --md-admonition-shadow-color--#{$name}: #{color.adjust($tint2, $alpha: -0.9)};
@@ -55,7 +56,7 @@ $new-admonitions: (
     }
 
     @each $names, $tint in $old-admonitions {
-      $name: nth($names, 1);
+      $name: list.nth($names, 1);
 
       & {
         --md-admonition-bg-color--#{$name}: var(--md-default-bg-color--ultra-dark);
@@ -91,7 +92,7 @@ $new-admonitions: (
 
   @each $names, $prop in $old-admonitions {
 
-    $name: nth($names, 1);
+    $name: list.nth($names, 1);
 
     // Define base class
     .md-typeset .admonition.#{$name} {
@@ -117,9 +118,9 @@ $new-admonitions: (
     }
 
     // Define synonyms for base class
-    @if length($names) > 1 {
-      @for $n from 2 through length($names) {
-        .#{nth($names, $n)} {
+    @if list.length($names) > 1 {
+      @for $n from 2 through list.length($names) {
+        .#{list.nth($names, $n)} {
           @extend .#{$name};
         }
       }
@@ -128,7 +129,7 @@ $new-admonitions: (
 }
 
 @each $names, $prop in $new-admonitions {
-  $name: nth($names, 1);
+  $name: list.nth($names, 1);
 
     // Define base class
   .md-typeset .admonition.#{$name} {
@@ -158,9 +159,9 @@ $new-admonitions: (
   }
 
   // Define synonyms for base class
-  @if length($names) > 1 {
-    @for $n from 2 through length($names) {
-      .#{nth($names, $n)} {
+  @if list.length($names) > 1 {
+    @for $n from 2 through list.length($names) {
+      .#{list.nth($names, $n)} {
         @extend .#{$name};
       }
     }

diff --git a/docs/src/scss/extensions/_progressbar.scss b/docs/src/scss/extensions/_progressbar.scss
@@ -1,4 +1,4 @@
-@use "material-color";
+@use "../palette/material_color";
 @use "../utilities/convert";
 
 .md-typeset {
@@ -23,7 +23,7 @@
   .progress-bar {
     float: left;
     height: convert.px2rem(24px);
-    background-color: material-color.$clr-blue-a400;
+    background-color: material_color.$clr-blue-a400;
   }
 
   /* Stripe animation */

diff --git a/docs/src/scss/palette/_colors.scss b/docs/src/scss/palette/_colors.scss
@@ -1,8 +1,9 @@
 @use "sass:color";
-@use "material-color";
 @use "../utilities/convert";
 @use "../utilities/color_tools";
+@use "./material_color";
 @use "./dracula";
+@use "sass:list";
 
 :root > * {
   // Custom code colors
@@ -24,16 +25,16 @@
   --md-code-hl-class-color: var(--md-code-hl-function-color);
 
   // Various Material related color variables
-  --md-typeset-a-color: #{material-color.$clr-cyan-500};
+  --md-typeset-a-color: #{material_color.$clr-cyan-500};
 
   // Progressbar colors
   --md-progress-stripe: var(--md-default-bg-color--lighter);
-  --md-progress-100: #{material-color.$clr-green-a400};
-  --md-progress-80: #{material-color.$clr-green-a400};
-  --md-progress-60: #{material-color.$clr-yellow-700};
-  --md-progress-40: #{material-color.$clr-orange-a400};
-  --md-progress-20: #{material-color.$clr-red-a200};
-  --md-progress-0: #{material-color.$clr-red-a400};
+  --md-progress-100: #{material_color.$clr-green-a400};
+  --md-progress-80: #{material_color.$clr-green-a400};
+  --md-progress-60: #{material_color.$clr-yellow-700};
+  --md-progress-40: #{material_color.$clr-orange-a400};
+  --md-progress-20: #{material_color.$clr-red-a200};
+  --md-progress-0: #{material_color.$clr-red-a400};
 
   // Keys colors
   --md-typeset-kbd-color: #{color_tools.shade(hsla(0, 100%, 100%, 1), 8%)};
@@ -62,7 +63,7 @@
     --md-default-fg-color--lightest:     #{color.adjust(dracula.$drac-fg, $alpha: -0.93)};
     --md-default-autocomplete-fg-color:  #{color.adjust(dracula.$drac-fg, $alpha: -0.60)};
     --md-shadow-z2:                      0 #{convert.px2rem(4px)} #{convert.px2rem(10px)} hsla(0, 0%, 0%, 0.3),
-                                         0 0              #{convert.px2rem(1px)}  hsla(0, 0%, 0%, 0.2);
+                                         0 0                      #{convert.px2rem(1px)}  hsla(0, 0%, 0%, 0.2);
 
     --md-default-bg-color:               var(--md-default-bg-color--darkest);
     --md-default-bg-color--light:        #{color.adjust(dracula.$drac-default-bg, $alpha: -0.3)};
@@ -111,13 +112,13 @@
 
     --md-code-special-bg-color: #{color.adjust(dracula.$drac-bg, $lightness: -5%)};
     --md-code-alternate-bg-color: #{color_tools.tint(dracula.$drac-bg, 10%)};
-    --md-code-link-bg-color: #{mix(dracula.$drac-cyan, dracula.$drac-bg, 15%)};
+    --md-code-link-bg-color: #{color.mix(dracula.$drac-cyan, dracula.$drac-bg, 15%)};
 
     // Various Material related color variables
     --md-typeset-a-color: #{dracula.$drac-cyan};
-    --md-typeset-mark-color: #{mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};
-    --md-typeset-del-color: #{mix(dracula.$drac-pink, dracula.$drac-bg, 35%)};
-    --md-typeset-ins-color: #{mix(dracula.$drac-green, dracula.$drac-bg, 35%)};
+    --md-typeset-mark-color: #{color.mix(dracula.$drac-yellow, dracula.$drac-bg, 35%)};
+    --md-typeset-del-color: #{color.mix(dracula.$drac-pink, dracula.$drac-bg, 35%)};
+    --md-typeset-ins-color: #{color.mix(dracula.$drac-green, dracula.$drac-bg, 35%)};
 
     // Progressbar colors
     --md-progress-stripe: var(--md-default-bg-color--lightest);
@@ -163,11 +164,11 @@
   [data-md-color-scheme="dracula"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"]
    {
 
-    --md-primary-code-bg-color:         #{mix(dracula.$drac-bg, nth($colors, 1), 85%)};
-    --md-primary-fg-color:              hsla(#{convert.hex2hsl(nth($colors, 1))}, 1);
-    --md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(nth($colors, 1))}, 0.1);
-    --md-primary-fg-color--light:       hsla(#{convert.hex2hsl(nth($colors, 2))}, 1);
-    --md-primary-fg-color--dark:        hsla(#{convert.hex2hsl(nth($colors, 3))}, 1);
+    --md-primary-code-bg-color:         #{color.mix(dracula.$drac-bg, list.nth($colors, 1), 85%)};
+    --md-primary-fg-color:              hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 1);
+    --md-primary-fg-color--transparent: hsla(#{convert.hex2hsl(list.nth($colors, 1))}, 0.1);
+    --md-primary-fg-color--light:       hsla(#{convert.hex2hsl(list.nth($colors, 2))}, 1);
+    --md-primary-fg-color--dark:        hsla(#{convert.hex2hsl(list.nth($colors, 3))}, 1);
     --md-primary-bg-color:              var(--md-default-bg-color);
     --md-primary-bg-color--light:       var(--md-default-bg-color--light);
   }
@@ -199,7 +200,7 @@
   // Color palette
   [data-md-color-scheme="dracula"][data-md-color-accent="#{$name}"],
   [data-md-color-scheme="dracula"] :not([data-md-color-scheme])[data-md-color-primary="#{$name}"] {
-    --md-code-link-accent-bg-color:    #{mix($color, dracula.$drac-bg, 15%)};
+    --md-code-link-accent-bg-color:    #{color.mix($color, dracula.$drac-bg, 15%)};
     --md-accent-fg-color:              hsla(#{convert.hex2hsl($color)}, 1);
     --md-accent-fg-color--transparent: hsla(#{convert.hex2hsl($color)}, 0.1);
     --md-accent-bg-color:              var(--md-default-bg-color);