chore(theme): validate css variables

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;

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>

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;
+}