feat(palette): implement YIQ for color switcher

stuf · Oct 1, 2019 · 2c58e2a · 2c58e2a
1 parent a39ba25
commit 2c58e2a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Palette.js b/src/components/Palette.js
@@ -2,6 +2,8 @@ import * as React from 'karet';
 import * as U from 'karet.util';
 import * as R from 'ramda';
 
+import * as H from '../shared';
+
 import style from './Palette.module.scss';
 
 function Palette({ items, currentColor }) {
@@ -15,9 +17,11 @@ function Palette({ items, currentColor }) {
             return (
               <li key={`color-${i}`} className={U.when(isActive, style.active)}>
                 <button
-                  style={{ backgroundColor: it }}
+                  style={{ backgroundColor: it, color: H.yiqFor(it) }}
                   onClick={U.doSet(currentColor, i)}
-                />
+                >
+                  {it}
+                </button>
               </li>
             );
           }),

diff --git a/src/components/Palette.module.scss b/src/components/Palette.module.scss
@@ -7,16 +7,17 @@
   padding: 0;
   display: grid;
   grid-gap: 2px;
-  grid-auto-rows: 20px;
+  grid-auto-rows: 1.5rem;
 
   button {
     display: block;
     width: 100%;
     height: 100%;
     border: 0;
+    font-size: 10px;
   }
 }
 
 .active {
-  border: solid 2px #f00;
+  border: solid 2px #fff;
 }