🎨 #1213 revert to legacy hsla colors

Resolves issue with Sass compiler
metafizzy · Jan 16, 2023 · 7098102 · 7098102
1 parent 777b362
commit 7098102
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/css/flickity.css b/css/flickity.css
@@ -59,9 +59,9 @@ https://flickity.metafizzy.co
 
 .flickity-button {
   position: absolute;
-  background: hsl(0 0% 100% / 75%);
+  background: hsla(0, 0%, 100%, 75%);
   border: none;
-  color: hsl(0 0% 20%);
+  color: hsl(0, 0%, 20%);
 }
 
 .flickity-button:hover {
@@ -144,7 +144,7 @@ https://flickity.metafizzy.co
   height: 10px;
   padding: 0;
   margin: 0 8px;
-  background: hsl(0 0% 20% / 25%);
+  background: hsl(0, 0%, 20%, 25%);
   border-radius: 50%;
   cursor: pointer;
   appearance: none;
@@ -158,13 +158,13 @@ https://flickity.metafizzy.co
 }
 
 .flickity-page-dot:hover {
-  background: hsl(0 0% 20% / 75%);
+  background: hsla(0, 0%, 20%, 75%);
 }
 
 .flickity-page-dot:active {
   background: #19F;
 }
 
 .flickity-page-dot.is-selected {
-  background: hsl(0 0% 20%);
+  background: hsl(0, 0%, 20%);
 }
diff --git a/sandbox/sandbox.css b/sandbox/sandbox.css
@@ -26,23 +26,23 @@ body {
 }
 
 .cell.is-selected {
-  outline: 4px solid hsl(0 0% 0% / 25%);
+  outline: 4px solid hsla(0, 0%, 0%, 25%);
   outline-offset: -4px;
 }
 
-.cell:nth-child(6n) { background: hsl(0 80% 70%); }
-.cell:nth-child(6n+1) { background: hsl(60 80% 70%); }
-.cell:nth-child(6n+2) { background: hsl(120 80% 70%); }
-.cell:nth-child(6n+3) { background: hsl(180 80% 70%); }
-.cell:nth-child(6n+4) { background: hsl(240 80% 70%); }
-.cell:nth-child(6n+5) { background: hsl(300 80% 70%); }
+.cell:nth-child(6n) { background: hsl(0, 80%, 70%); }
+.cell:nth-child(6n+1) { background: hsl(60, 80%, 70%); }
+.cell:nth-child(6n+2) { background: hsl(120, 80%, 70%); }
+.cell:nth-child(6n+3) { background: hsl(180, 80%, 70%); }
+.cell:nth-child(6n+4) { background: hsl(240, 80%, 70%); }
+.cell:nth-child(6n+5) { background: hsl(300, 80%, 70%); }
 
-.cell.n1 { background: hsl(0 80% 70%); }
-.cell.n2 { background: hsl(60 80% 70%); }
-.cell.n3 { background: hsl(120 80% 70%); }
-.cell.n4 { background: hsl(180 80% 70%); }
-.cell.n5 { background: hsl(240 80% 70%); }
-.cell.n6 { background: hsl(300 80% 70%); }
+.cell.n1 { background: hsl(0, 80%, 70%); }
+.cell.n2 { background: hsl(60, 80%, 70%); }
+.cell.n3 { background: hsl(120, 80%, 70%); }
+.cell.n4 { background: hsl(180, 80%, 70%); }
+.cell.n5 { background: hsl(240, 80%, 70%); }
+.cell.n6 { background: hsl(300, 80%, 70%); }
 
 .variable-width .cell {
   width: 20%;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -2,6 +2,7 @@ module.exports = {
   extends: 'stylelint-config-standard',
   ignoreFiles: [ 'dist/*' ],
   rules: {
+    'color-function-notation': 'legacy',
     'color-hex-case': 'upper',
     'comment-empty-line-before': null,
     'declaration-block-no-duplicate-properties': [ true, {