Update JS doc deps and fix harmony diagrams on Chrome

facelessuser · Dec 5, 2024 · 0281c33 · 0281c33
1 parent 4fbcfa4
commit 0281c33
Show file tree

Hide file tree

Showing 18 changed files with 2,606 additions and 2,274 deletions.
diff --git a/docs/src/scss/_buttons.scss b/docs/src/scss/_buttons.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 :root {
   --playground-edit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z' /%3E%3C/svg%3E");
   --playground-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M14 16V13C10.39 13 7.81 14.43 6 17C6.72 13.33 8.94 9.73 14 9V6L19 11L14 16Z' /%3E%3C/svg%3E");
@@ -11,7 +13,7 @@
     position: relative;
     padding: 0 1.5em;
     color: var(--md-typeset-a-color);
-    border-radius: px2rem(2px);
+    border-radius: convert.px2rem(2px);
     transition: color 125ms;
 
     &::before {
@@ -73,9 +75,9 @@
 // Special buttons in our toolbar
 .md-typeset .source-link {
   position: relative;
-  top: px2rem(-12px);
+  top: convert.px2rem(-12px);
   float: right;
-  margin-left: px2rem(8px);
+  margin-left: convert.px2rem(8px);
   color: var(--md-default-fg-color--lighter);
   cursor: pointer;
   transition: color 125ms;
@@ -85,11 +87,11 @@
   }
 
   .twemoji {
-      height: px2rem(24px);
+      height: convert.px2rem(24px);
 
       svg {
-          width: px2rem(24px);
-          height: px2rem(24px);
+          width: convert.px2rem(24px);
+          height: convert.px2rem(24px);
       }
   }
 }
diff --git a/docs/src/scss/_color_command.scss b/docs/src/scss/_color_command.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 div.color-command {
   margin: 1em 0;
   line-height: 0;
@@ -20,8 +22,8 @@ div.color-command {
 
 @media screen and (max-width: 44.9375em) {
   .md-typeset > div.color-command {
-    margin-right:  px2rem(-16px);
-    margin-left: px2rem(-16px);
+    margin-right:  convert.px2rem(-16px);
+    margin-left: convert.px2rem(-16px);
 
     .highlight code {
       border-radius: 0;

diff --git a/docs/src/scss/_colorwheel.scss b/docs/src/scss/_colorwheel.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 .color-wheel {
   --color-wheel-stops1: transparent;
   --color-wheel-stops2: transparent;
@@ -6,7 +8,7 @@
   --color-wheel-stops5: transparent;
   --color-wheel-bg: var(--md-default-bg-color);
 
-  margin: px2em(16px) 0;
+  margin: convert.px2em(16px) 0;
   overflow-x: scroll;
   overflow-y: hidden;
 
@@ -16,8 +18,8 @@
 
   // Override native scrollbar styles
   &::-webkit-scrollbar {
-    width: px2rem(4px);
-    height: px2rem(4px);
+    width: convert.px2rem(4px);
+    height: convert.px2rem(4px);
   }
 
   &::-webkit-scrollbar-corner {
@@ -45,8 +47,10 @@
 
   .wheel {
     min-width: max-content;
-    padding: px2em(5px);
+    padding: convert.px2em(5px);
     border-radius: 1000px;
+    // Workaround for chrome: fixes weird distortion
+    transform: rotate(0deg);
 
     .primary {
       width: 12em;

diff --git a/docs/src/scss/_loader.scss b/docs/src/scss/_loader.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 .loading {
     position: fixed;
     top: 0;
@@ -33,7 +35,7 @@
             width: 100%;
             margin-top: 40px;
             font-weight: 800;
-            font-size: px2rem(20px);
+            font-size: convert.px2rem(20px);
             text-align: center;
         }
     }

diff --git a/docs/src/scss/_playground.scss b/docs/src/scss/_playground.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 .playground-code {
   position: relative;
   width: 100%;
@@ -21,7 +23,7 @@
 }
 
 .playground-code pre {
-  height: calc(100% + px2rem(4px));
+  height: calc(100% + convert.px2rem(4px));
   margin: 0;
   pointer-events: none;
 }
@@ -61,15 +63,15 @@
 
 .playground-footer {
   margin-bottom: 1em;
-  padding: px2em(3px, 13.6px) px2em(16px, 13.6px) px2em(2px, 13.6px);
+  padding: convert.px2em(3px, 13.6px) convert.px2em(16px, 13.6px) convert.px2em(2px, 13.6px);
   color: var(--md-code-hl-comment-color);
-  font-size: px2em(13.6px);
+  font-size: convert.px2em(13.6px);
   background: var(--md-code-bg-color);
-  border-bottom-right-radius: px2rem(2px);
-  border-bottom-left-radius: px2rem(2px);
+  border-bottom-right-radius: convert.px2rem(2px);
+  border-bottom-left-radius: convert.px2rem(2px);
 
   hr {
-    margin: 0 0 px2em(2px, 13.6px) 0;
+    margin: 0 0 convert.px2em(2px, 13.6px) 0;
   }
 
   .gamut {

diff --git a/docs/src/scss/_scroll.scss b/docs/src/scss/_scroll.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 .md-typeset textarea {
 
   scrollbar-color: var(--md-default-fg-color--lighter) transparent;
@@ -8,8 +10,8 @@
   }
 
   &::-webkit-scrollbar {
-      width: px2rem(4px);
-      height: px2rem(4px);
+      width: convert.px2rem(4px);
+      height: convert.px2rem(4px);
   }
 
   &::-webkit-scrollbar-corner {

diff --git a/docs/src/scss/_swatch.scss b/docs/src/scss/_swatch.scss
@@ -1,3 +1,5 @@
+@use "utilities/convert";
+
 :root {
   --swatch-bar-border-color: hsl(0, 0%, 90%);
   --swatch-border-color: hsl(0, 0%, 85%);
@@ -22,8 +24,8 @@
 .swatch {
   display: inline-block;
   box-sizing: border-box;
-  width: px2em(20px);
-  height: px2em(20px);
+  width: convert.px2em(20px);
+  height: convert.px2em(20px);
   margin-right: 0.2em;
   margin-left: 0.25em;
   line-height: 0;
@@ -46,8 +48,8 @@
 
 .swatch-color {
   display: inline-block;
-  width: px2em(16.4px);
-  height: px2em(16.4px);
+  width: convert.px2em(16.4px);
+  height: convert.px2em(16.4px);
   margin: 0;
   padding: 0;
   vertical-align: text-bottom;
@@ -57,13 +59,13 @@
 
 .swatch-gradient {
   width: 100%;
-  height: px2em(48px);
+  height: convert.px2em(48px);
   margin: 0;
   border-radius: 0;
 
   .swatch-color {
     width: 100%;
-    height: px2em(44px);
+    height: convert.px2em(44px);
     border-radius: 0;
   }
 }
@@ -83,14 +85,14 @@ div.swatch-bar {
     }
 
     &:not(.swatch-gradient) {
-      width: px2em(48px);
-      height: px2em(48px);
+      width: convert.px2em(48px);
+      height: convert.px2em(48px);
       margin: 0;
       border-radius: 0;
 
       .swatch-color {
-        width: px2em(44px);
-        height: px2em(44px);
+        width: convert.px2em(44px);
+        height: convert.px2em(44px);
         margin: 0;
         border-radius: 0;
       }

diff --git a/docs/src/scss/extra.scss b/docs/src/scss/extra.scss
@@ -1,16 +1,9 @@
-@import "material-color";
-@import "material-shadows";
-
-@import "utilities/break";
-@import "utilities/convert";
-@import "utilities/color_tools";
-
-@import "buttons";
-@import "inputs";
-@import "scroll";
-@import "loader";
-@import "swatch";
-@import "colorwheel";
-@import "playground";
-@import "color_command";
-@import "notebook";
+@use "buttons";
+@use "inputs";
+@use "scroll";
+@use "loader";
+@use "swatch";
+@use "colorwheel";
+@use "playground";
+@use "color_command";
+@use "notebook";