ok

ambar · Apr 14, 2024 · a90467f · a90467f
1 parent 3bf1abf
commit a90467f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -18,8 +18,8 @@ Input:
 ```css
 a {
   color: cc(G01);
-  border: rgba(from cc(G01) r g b / 0.9); /* adjust alpha */
-  background: lch(from cc(G01) calc(l * 1.1) c h); /* adjust lightness */
+  color: oklch(from cc(G01) l c h / 0.8); /* adjust alpha */
+  background: oklch(from cc(G01) calc(l * 0.8) c h); /* adjust lightness */
 }
 ```
 
@@ -29,13 +29,13 @@ Output:
 a {
   color: #eee;
   border: rgba(238, 238, 238, 0.9);
-  background: rgb(255, 255, 255);
+  background: rgb(177, 177, 177);
 }
 
 html[data-theme='dark'] a {
   color: #111;
   border: rgba(17, 17, 17, 0.9);
-  background: rgb(18, 18, 18);
+  background: rgb(9, 9, 9);
 }
 ```
 

diff --git a/test/index.spec.js b/test/index.spec.js
@@ -27,8 +27,9 @@ function alpha(input, v) {
 function lightness(input, v) {
   const color = new Color(input)
   // TODO: CSSUnitValue.parse(v)
-  // A <number> between 0 and 100, a <percentage> between 0% and 100%
-  color.lch.l = Number(v)
+  // lch: A <number> between 0 and 100, a <percentage> between 0% and 100%
+  // oklch: A <number> between 0 and 1, a <percentage> between 0% and 100%, or the keyword none (equivalent to 0% in this case).
+  color.oklch.l = Number(v)
   return color.toString({format: 'rgba_number'})
 }
 
@@ -55,9 +56,9 @@ describe('postcss-theme-colors', () => {
   it('use with relative color syntax', async () => {
     const input = `
     a {
-      color: rgba(from cc(G01) r g b / .8);
-      border: lch(from cc(G01) 80 c h);
-      background: lch(from cc(G01) calc(l * 1.1) c h);
+      color: oklch(from cc(G01) l c h / .8);
+      border: oklch(from cc(G01) .8 c h);
+      background: oklch(from cc(G01) calc(l * .8) c h);
     }
     `
     const result = await process(input, null, {
@@ -72,16 +73,16 @@ describe('postcss-theme-colors', () => {
             color: rgba(17, 17, 17, 0.8);
       }
             a {
-            border: rgb(198, 198, 198);
+            border: rgb(190, 190, 190);
       }
             html[data-theme="dark"] a {
-            border: rgb(198, 198, 198);
+            border: rgb(190, 190, 190);
       }
             a {
-            background: rgb(255, 255, 255);
+            background: rgb(177, 177, 177);
       }
             html[data-theme="dark"] a {
-            background: rgb(18, 18, 18);
+            background: rgb(9, 9, 9);
       }
           "
     `)
@@ -112,7 +113,7 @@ describe('postcss-theme-colors', () => {
     const input = `
     a {
       color: alpha(cc(G01), .8);
-      border: lightness(cc(G01), 80);
+      border: lightness(cc(G01), .8);
     }
     `
     const result = await process(input, null, {
@@ -131,10 +132,10 @@ describe('postcss-theme-colors', () => {
             color: rgba(17, 17, 17, 0.8);
       }
             a {
-            border: rgba(198.33, 198.33, 198.33);
+            border: rgba(189.52, 189.52, 189.52);
       }
             html[data-theme="dark"] a {
-            border: rgba(198.33, 198.33, 198.33);
+            border: rgba(189.52, 189.52, 189.52);
       }
           "
     `)