Document updates

- Fix harmony diagrams in Chrome
- Use sass built-in compress
- Bump version

Fixes #444

coloraide/__meta__.py

@@ -193,5 +193,5 @@ def parse_version(ver: str) -> Version:
     return Version(major, minor, micro, release, pre, post, dev)
 
 
-__version_info__ = Version(4, 1, 0, "final")
+__version_info__ = Version(4, 2, 0, "final")
 __version__ = __version_info__._get_canonical()

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

@@ -909,7 +909,7 @@ <h1>ColorAide Color Space Models</h1>
 let colorSpaces = null
 let colorGamuts = null
 let lastModel = null
-let package = 'coloraide-4.1-py3-none-any.whl'
+let package = 'coloraide-4.2-py3-none-any.whl'
 const defaultSpace = 'lab'
 const defaultGamut = 'srgb'
 const exceptions = new Set(['hwb', 'ryb', 'ryb-biased'])

docs/src/markdown/demos/colorpicker.html

@@ -421,7 +421,7 @@ <h1>ColorAide Color Picker</h1>
     let pyodide = null
     let webspace = ''
     let initial = 'oklab(0.69 0.13 -0.1 / 0.85)'
-    let package = 'coloraide-4.1-py3-none-any.whl'
+    let package = 'coloraide-4.2-py3-none-any.whl'
 
     const base = `${window.location.origin}/${window.location.pathname.split('/')[1]}/playground/`
     package = base + package

docs/src/mkdocs.yml

@@ -312,7 +312,7 @@ extra_css:
   - assets/coloraide-extras/extra.css
 extra_javascript:
   - https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js
-  - playground-config-379cd902.js
+  - playground-config-e089e6cf.js
   - https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js
   - assets/coloraide-extras/extra-notebook.js
 

docs/src/scss/_colorwheel.scss

@@ -49,15 +49,13 @@
     min-width: max-content;
     padding: convert.px2em(5px);
     border-radius: 1000px;
-    // Workaround for chrome: fixes weird distortion
-    transform: rotate(0deg);
 
     .primary {
       width: 12em;
       height: 10.5em;
       margin: auto;
-      // Workaround for chrome: fixes weird distortion
-      transform: rotate(0deg);
+      // Workaround for chrome: fixes weird distortion: `translateZ`
+      transform: translateZ(0);
       clip-path: polygon(50% 0, 100% 100%, 0 100%);
 
       .primary-inner {
@@ -74,15 +72,14 @@
       margin: auto;
       background: var(--color-wheel-bg);
       border-radius: 1000px;
-      // Workaround for chrome: fixes weird distortion
-      transform: rotate(0deg);
 
       .secondary-inner {
         width: 14em;
         height: 14em;
         margin: auto;
         background: conic-gradient(var(--color-wheel-stops2));
-        transform: rotate(-135deg);
+        // Workaround for chrome: fixes weird distortion: `translateZ`
+        transform: rotate(225deg) translateZ(0);
         clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
       }
     }