From e1de869091647c98663618fa391fb2d9c06bd908 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 28 Dec 2017 15:26:44 -0600
Subject: [PATCH] chore(theme): validate css variables

---
 .../components/color-selector/color-selector.css  |  4 ++++
 .../components/color-selector/color-selector.tsx  |  5 +++--
 .../theme-builder/src/components/helpers.ts       | 15 +++++++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.css b/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.css
index c53bc8e29f..1b3caf8c31 100644
--- a/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.css
+++ b/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.css
@@ -3,6 +3,10 @@ section {
   display: flex;
 }
 
+.invalid {
+  background: #f0b2b1;
+}
+
 .property-label {
   font-family: Courier New, Courier, monospace;
   white-space: nowrap;
diff --git a/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.tsx b/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.tsx
index e760013075..4e2f9b5b89 100644
--- a/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.tsx
+++ b/packages/core/scripts/theme-builder/src/components/color-selector/color-selector.tsx
@@ -1,4 +1,5 @@
 import { Component, Event, EventEmitter, Prop } from '@stencil/core';
+import { isValidColorValue } from '../helpers';
 
 
 @Component({
@@ -11,7 +12,7 @@ export class ColorSelector {
   @Prop() property: string;
   @Prop({ mutable: true }) value: string;
   @Prop() isRgb: boolean;
-
+  isValid: boolean;
 
   onChange(ev) {
     if (this.isRgb) {
@@ -33,7 +34,7 @@ export class ColorSelector {
     const hex = rgbToHex(value);
 
     return [
-      <section>
+      <section class={isValidColorValue(value) ? 'valid' : 'invalid'}>
         <div class='color-square'>
           <input type='color' value={hex} onInput={this.onChange.bind(this)} tabindex='-1' />
         </div>
diff --git a/packages/core/scripts/theme-builder/src/components/helpers.ts b/packages/core/scripts/theme-builder/src/components/helpers.ts
index 6daf8404c3..6a926d44bb 100644
--- a/packages/core/scripts/theme-builder/src/components/helpers.ts
+++ b/packages/core/scripts/theme-builder/src/components/helpers.ts
@@ -53,3 +53,18 @@ function cleanRgb(value: string) {
     return /[rgba0-9\,\.\(\)]/.test(c) ? c : '';
   }).join('');
 }
+
+export function isValidColorValue(value: string) {
+  if (value) {
+    if (value.charAt(0) === '#') {
+      const rxValidHex = /^#[0-9a-f]{6}$/i;
+      return rxValidHex.test(value);
+    }
+    if (value.charAt(0) === 'r') {
+      const rxValidRgb = /([R][G][B][A]?[(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\s*,\s*((0\.[0-9]{1})|(1\.0)|(1)))?[)])/i;
+      return rxValidRgb.test(value);
+    }
+  }
+
+  return false;
+}