feat: colors

src/content/Text.tsx

@@ -1,9 +1,9 @@
 import React, { ElementType, ReactNode, forwardRef, HTMLProps } from 'react';
 import { css } from '@emotion/react';
-import { DOMRef } from '../types';
+import { DOMRef, TextColorValue } from '../types';
 import { useDOMRef } from '../utils/useDOMRef';
 import theme from '../theme';
-import { Color, Size, TextElementType, Weight } from './types';
+import { Size, TextElementType, Weight } from './types';
 import { textSizeCSS, textWeightCSS } from './styles';
 
 export interface TextProps extends HTMLProps<HTMLSpanElement> {
@@ -30,7 +30,7 @@ export interface TextProps extends HTMLProps<HTMLSpanElement> {
    * The color of the text
    * @default 'white90'
    */
-  color?: Color;
+  color?: TextColorValue;
   /**
    * The disabled state of the text
    */
@@ -41,7 +41,7 @@ export interface TextProps extends HTMLProps<HTMLSpanElement> {
   className?: string;
 }
 
-const textCSS = (color: Color) => css`
+const textCSS = (color: TextColorValue) => css`
   /* default to no margin */
   margin: 0;
   color: ${theme.textColors[color]};

src/content/types.ts

@@ -9,8 +9,6 @@ export type Size =
 
 export type Weight = 'heavy' | 'normal';
 
-export type Color = 'white90' | 'white70' | 'white30' | 'inherit';
-
 export type TextElementType =
   | 'span'
   | 'h1'

src/index.tsx

@@ -32,7 +32,7 @@ export * from './empty';
 export * from './contextualhelp';
 export * from './counter';
 export * from './layout';
-export { theme, designationColors } from './theme';
+export { theme, designationColors, colorPalette } from './theme';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
 //   children?: ReactChild;

src/types/core.ts

@@ -106,3 +106,5 @@ export type ColorValue =
   | 'gray-800'
   | 'gray-900'
   | 'danger';
+
+export type TextColorValue = 'white90' | 'white70' | 'white30' | 'inherit';

stories/Colors.stories.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { theme, designationColors, Text, Heading } from '../src';
+import { theme, designationColors, colorPalette, Text, Heading } from '../src';
 import { Meta, Story } from '@storybook/react';
 // @ts-ignore
 import { withDesign } from 'storybook-addon-designs';
@@ -60,15 +60,17 @@ function Colors() {
             </li>
           ))}
         </ul>
+        z
       </section>
     );
   });
 
+  const designationColorKeys = Object.keys(designationColors);
   const designations = (
     <section>
       <Heading>Designation Colors</Heading>
       <ul style={listStyle}>
-        {Object.keys(designationColors).map((c, i) => (
+        {designationColorKeys.map((c, i) => (
           <li key={i}>
             <Color color={designationColors[c]} name={c} />
           </li>
@@ -77,6 +79,27 @@ function Colors() {
     </section>
   );
 
+  const colorGroups = Object.keys(colorPalette);
+  const colorPaletteEl = (
+    <section>
+      <Heading>Color Palette</Heading>
+      {/* <div>
+        {colorGroups.map((colorGroup, i) => {
+          return (
+            <div>
+              {colorGroup}
+              <ul>
+                {colorPalette[colorGroup].map(color => (
+                  <li>{color}</li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div> */}
+    </section>
+  );
+
   return (
     <main>
       <ul style={listStyle}>
@@ -86,6 +109,7 @@ function Colors() {
       </ul>
       <br />
       {designations}
+      {colorPaletteEl}
       {components}
     </main>
   );