Upgrade doc deps and fix more harmony issues in Chrome

docs/src/js/extra-notebook.js

@@ -123,7 +123,7 @@ ${content}
     if (!initialized) {
       initialized = true
       pyodide = await loadPyodide({ // eslint-disable-line no-undef
-        indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/",
+        indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/",
         fullStdLib: false
       })
     }

docs/src/markdown/demos/3d_models.html

@@ -191,8 +191,8 @@ <h1>ColorAide Color Space Models</h1>
   <div>Copyright &copy; 2020 - 2023 <a href="https://github.com/facelessuser">Isaac Muse</a></div>
 </footer>
 </div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.34.0/plotly.min.js"></script>
-<script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>
+<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+<script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
 <script id="init" type="text/python">
 from coloraide.everything import ColorAll as Color
 from coloraide.spaces import Regular
@@ -1034,7 +1034,7 @@ <h1>ColorAide Color Space Models</h1>
 import json
 from coloraide.everything import ColorAll as Color
 c = Color.random('hsl', limits=[(0, 360), (0.3, 1), (0.3, 0.8)]).set('alpha', 0.75)
-dark = c.compose('white').contrast('black') < 4.5
+dark = Color.layer([c, 'white']).contrast('black') < 4.5
 json.dumps({'color': c.to_string(), 'dark': dark})
 `))
   const display = document.getElementById('display')
@@ -1052,15 +1052,15 @@ <h1>ColorAide Color Space Models</h1>
   busyTarget = document.getElementsByTagName('body')[0]
   showBusy(busyTarget, 'Setting up Environment...')
   pyodide = await loadPyodide({
-    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/",
+    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/",
     fullStdLib: false
   })
 
   // Load ColorAide
   await pyodide.loadPackage([
     'numpy',
     'scipy',
-    'https://files.pythonhosted.org/packages/b8/f0/bcf716a8e070370d6598c92fcd328bd9ef8a9bda2c5562da5a835c66700b/plotly-5.23.0-py3-none-any.whl',
+    'https://files.pythonhosted.org/packages/e5/ae/580600f441f6fc05218bd6c9d5794f4aef072a7d9093b291f1c50a9db8bc/plotly-5.24.1-py3-none-any.whl',
     package])
 
   // Set background color

docs/src/markdown/demos/colorpicker.html

@@ -409,7 +409,7 @@ <h1>ColorAide Color Picker</h1>
         <div>Copyright &copy; 2020 - 2023 <a href="https://github.com/facelessuser">Isaac Muse</a></div>
       </footer>
     </div>
-  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>
+  <script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
   <script>
 
 (() => {
@@ -676,7 +676,7 @@ <h1>ColorAide Color Picker</h1>
         document.getElementById('color-label').value = colorStr
 
         // Adjust text color to accommodate contrast
-        const compose = mappedColor.compose('white')
+        const compose = coloraide.ColorAll.layer([mappedColor, 'white'])
         if (compose.contrast('black') < 4.5) {
           document.querySelector('body').classList.add('dark')
         } else {
@@ -744,7 +744,7 @@ <h1>ColorAide Color Picker</h1>
         busyTarget = document.getElementById('color-display')
         showBusy(busyTarget, 'Loading ColorAide...')
         pyodide = await loadPyodide({
-          indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/",
+          indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.4/full/",
           fullStdLib: false
         })
 

docs/src/mkdocs.yml

@@ -308,9 +308,9 @@ markdown_extensions:
 extra_css:
   - assets/coloraide-extras/extra.css
 extra_javascript:
-  - https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js
+  - https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js
   - playground-config-152e791e.js
-  - https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js
+  - https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js
   - assets/coloraide-extras/extra-notebook.js
 
 extra:

docs/src/scss/_colorwheel.scss

@@ -56,6 +56,8 @@
       width: 12em;
       height: 10.5em;
       margin: auto;
+      // Workaround for chrome: fixes weird distortion
+      transform: rotate(0deg);
       clip-path: polygon(50% 0, 100% 100%, 0 100%);
 
       .primary-inner {
@@ -72,6 +74,8 @@
       margin: auto;
       background: var(--color-wheel-bg);
       border-radius: 1000px;
+      // Workaround for chrome: fixes weird distortion
+      transform: rotate(0deg);
 
       .secondary-inner {
         width: 14em;

mkdocs.yml

@@ -306,12 +306,12 @@ markdown_extensions:
       inject_style: True
 
 extra_css:
-  - assets/coloraide-extras/extra-841546e069.css
+  - assets/coloraide-extras/extra-c9c195c408.css
 extra_javascript:
-  - https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js
+  - https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js
   - playground-config-152e791e.js
-  - https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js
-  - assets/coloraide-extras/extra-notebook-lX1Ayavv.js
+  - https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js
+  - assets/coloraide-extras/extra-notebook-BTWSznik.js
 
 extra:
   social: