Updates Visual Guidelines Color Partial to TSX

playbook-website/app/javascript/components/VisualGuidelines/Colors/index.tsx

@@ -7,7 +7,17 @@ import { Title } from 'playbook-ui'
 import Example from './Example'
 
 import {
-  TEXT_COLORS,
+  ACTIONS,
+  ACTIVE,
+  BACKGROUND,
+  BORDER,
+  CARDS,
+  CATEGORY,
+  DATA,
+  PRODUCTS,
+  SHADOW,
+  STATUS,
+  TEXT_COLORS
 } from './variables'
 
 const Colors = (): React.ReactElement => (
@@ -23,6 +33,46 @@ const Colors = (): React.ReactElement => (
         colors={TEXT_COLORS}
         title="Text Colors"
     />
+    <Example
+        colors={BACKGROUND}
+        title="Backgrounds"
+    />
+    <Example
+        colors={CARDS}
+        title="Cards"
+    />
+    <Example
+        colors={STATUS}
+        title="Status"
+    />
+    <Example
+        colors={DATA}
+        title="Data"
+    />
+    <Example
+        colors={ACTIONS}
+        title="Actions"
+    />
+    <Example
+        colors={ACTIVE}
+        title="Active"
+    />
+    <Example
+        colors={BORDER}
+        title="Border"
+    />
+    <Example
+        colors={SHADOW}
+        title="Shadow"
+    />
+    <Example
+        colors={PRODUCTS}
+        title="Product Colors"
+    />
+    <Example
+        colors={CATEGORY}
+        title="Category Colors"
+    />
   </React.Fragment>
 )
 

playbook-website/app/javascript/components/VisualGuidelines/Colors/variables.ts

@@ -6,3 +6,84 @@ export const TEXT_COLORS = [
   { name: 'Light Dk', variable: 'text_dk_light', dark: true },
   { name: 'Lighter Dk', variable: 'text_dk_lighter', dark: true },
 ]
+ export const BACKGROUND = [
+  {name: "Bg Light", variable: "bg_light"},
+  {name: "Bg Dark", variable: "bg_dark"},
+  {name: "Bg Gradient", variable: "bg_gradient"}
+ ]
+
+ export const CARDS = [
+  {name: "Card Light", variable: "card_light"},
+  {name: "Card Dark", variable: "card_dark", dark: true}
+ ]
+
+ export const STATUS = [
+  {name: "Success", variable: "success"},
+  {name: "Warning", variable: "warning"},
+  {name: "Error", variable: "error"},
+  {name: "Info", variable: "info"},
+  {name: "Neutral", variable: "neutral"}
+ ]
+
+ export const DATA = [
+  {name: "Data 1", variable: "data_1"},
+  {name: "Data 2", variable: "data_2"},
+  {name: "Data 3", variable: "data_3"},
+  {name: "Data 4", variable: "data_4"},
+  {name: "Data 5", variable: "data_5"},
+  {name: "Data 6", variable: "data_6"},
+  {name: "Data 7", variable: "data_7"},
+  {name: "Data 8", variable: "data_8"}
+ ]
+
+ export const ACTIONS = [
+  {name: "Primary", variable: "primary_action"}
+ ]
+
+ export const ACTIVE = [
+  {name: "Active Light", variable: "active_light"},
+  {name: "Active Dark", variable: "active_dark", dark: true}
+ ]
+
+ export const BORDER = [
+  {name: "Border Light", variable: "border_light"},
+  {name: "Border Dark", variable: "border_dark", dark: true}
+ ]
+
+ export const SHADOW = [
+  {name: "Shadow", variable: "shadow"}
+ ]
+
+ export const PRODUCTS = [
+  {name: "Windows", variable: "windows"},
+  {name: "Siding", variable: "siding"},
+  {name: "Doors", variable: "doors"},
+  {name: "Solar", variable: "solar"},
+  {name: "Roofing", variable: "roofing"},
+  {name: "Gutters", variable: "gutters"},
+  {name: "Attic Insulation", variable: "insulation"}
+ ]
+
+ export const CATEGORY = [
+  {name: "Category 1", variable: "category_1"},
+  {name: "Category 2", variable: "category_2"},
+  {name: "Category 3", variable: "category_3"},
+  {name: "Category 4", variable: "category_4"},
+  {name: "Category 5", variable: "category_5"},
+  {name: "Category 6", variable: "category_6"},
+  {name: "Category 7", variable: "category_7"},
+  {name: "Category 8", variable: "category_8"},
+  {name: "Category 9", variable: "category_9"},
+  {name: "Category 10", variable: "category_10"},
+  {name: "Category 11", variable: "category_11"},
+  {name: "Category 12", variable: "category_12"},
+  {name: "Category 13", variable: "category_13"},
+  {name: "Category 14", variable: "category_14"},
+  {name: "Category 15", variable: "category_15"},
+  {name: "Category 16", variable: "category_16"},
+  {name: "Category 17", variable: "category_17"},
+  {name: "Category 18", variable: "category_18"},
+  {name: "Category 19", variable: "category_19"},
+  {name: "Category 20", variable: "category_20"},
+  {name: "Category 21", variable: "category_21"}
+ ]