♻️ update logic due to values@2 changes

noeldelgado · May 25, 2020 · 794aac4 · 794aac4
1 parent 5e13f69
commit 794aac4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 14 deletions.
diff --git a/src/javascripts/components/ColorItem.js b/src/javascripts/components/ColorItem.js
@@ -7,7 +7,7 @@ import Text from '/components/Text';
 export default class ColorItem extends Widget {
 
   static CLASSNAMES = {
-    BASE: '-is-base-color',
+    BASE: '-is-base',
     TINT: '-is-tint',
     SHADE: '-is-shade',
     LIGHT: '-is-light',
@@ -55,26 +55,19 @@ export default class ColorItem extends Widget {
    * @param {Value} value - values.js instance
   */
   update(value) {
-    const { TINT, SHADE, BASE, LIGHT, DARK } = this.constructor.CLASSNAMES;
-    const { isTint, isShade, isBaseColor } = value;
+    const { LIGHT, DARK } = this.constructor.CLASSNAMES;
 
     this.color = value.hexString();
 
-    this.ariaLabelPercentage.setText([
-      isTint && 'tint',
-      isShade && 'shade',
-      isBaseColor && 'base color'
-    ].filter(v => v));
-    this.percentageLabel.setText(`${value.percentage?.toFixed(2) ?? 0 |> Number}%`);
+    this.ariaLabelPercentage.setText(value.type);
+    this.percentageLabel.setText(`${value.weight?.toFixed(2) ?? 0 |> Number}%`);
     this.hexLabel.setText(this.color);
     this.element.style.backgroundColor = this.color;
 
     this.element.classList.remove(...Object.values(this.constructor.CLASSNAMES));
     this.element.classList.add(...[
-      isTint && TINT,
-      isShade && SHADE,
-      isBaseColor && BASE,
-      value.getBrightness() > 50 ? LIGHT : DARK
+      `-is-${value.type}`,
+      value.getBrightness() > 55 ? LIGHT : DARK
     ].filter(v => v));
 
     return this;

diff --git a/src/sass/components/color-item.scss b/src/sass/components/color-item.scss
@@ -5,7 +5,7 @@
   padding: 1.5rem;
   background-color: rgba(0,0,0,0);
 
-  &.-is-base-color {
+  &.-is-base {
     border: 2px solid rgba(0, 0, 0, 0.5);
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
   }