start on consideration for evaluating variables defined referenced as…

… value for style properties of interest

packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts

@@ -29,23 +29,25 @@ const htmlElementColorDeclarationRegex = RegExp(
   String.raw`(${propertiesSupportingCssColor.join('|')})\:\s?(\'|\")?${cssColorRegex.source}`
 );
 
-// in trying to keep this rule simple, if a string is used to define a color, we mark it as invalid for this particular use case
 const raiseReportIfPropertyHasInvalidCssColor = (
   context: Rule.RuleContext,
-  propertyNode: TSESTree.ObjectLiteralElement,
+  propertyNode: TSESTree.Property,
   messageToReport: Rule.ReportDescriptor
 ) => {
   let didReport: boolean;
 
   if (
-    (didReport = Boolean(
-      propertyNode.type === 'Property' &&
-        propertyNode.key.type === 'Identifier' &&
-        propertyNode.value.type === 'Literal' &&
-        propertiesSupportingCssColor.indexOf(propertyNode.key.name) > -1
-    ))
+    propertyNode.key.type === 'Identifier' &&
+    propertiesSupportingCssColor.indexOf(propertyNode.key.name) < 0
   ) {
+    return;
+  }
+
+  if ((didReport = Boolean(propertyNode.value.type === 'Literal'))) {
+    // in trying to keep this rule simple, if a string is used to define a color we simply mark it as invalid
     context.report(messageToReport);
+  } else if ((didReport = Boolean(propertyNode.value.type === 'MemberExpression'))) {
+    // TODO: handle member expression ie. style.color.red
   }
 
   return didReport;