chore: fix colors

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.13",
+  "version": "0.4.14",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/accordion/Accordion.tsx

@@ -94,7 +94,7 @@ export function AccordionItem(props: AccordionItemProps) {
             background-color: inherit;
             border: 0;
             text-align: start;
-            color: ${theme.colors.text1};
+            color: ${theme.textColors.white90};
             border-bottom: 1px solid ${theme.colors.dividerColor};
             /* remove outline - TODO might need to give a visual cue that this area is in focus */
             outline: none;

src/alert/Alert.tsx

@@ -66,7 +66,7 @@ export const Alert = ({
       css={css`
         padding: ${theme.spacing.margin8}px ${theme.spacing.margin16}px;
         border-radius: 4px;
-        color: ${theme.colors.text1};
+        color: ${theme.textColors.white90};
         display: flex;
         flex-direction: row;
         align-items: center;

src/button/styles.ts

@@ -3,7 +3,7 @@ import theme from '../theme';
 import { transparentize } from 'polished';
 
 export const buttonCSS = css`
-  border: 1px solid ${theme.colors.dark1};
+  border: 1px solid ${theme.components.button.defaultBorderColor};
   font-weight: 600;
   margin: 0;
   display: flex;

src/card/styles.ts

@@ -5,15 +5,15 @@ const cardHeaderHeight = 68;
 export const cardCSS = css`
   display: flex;
   flex-direction: column;
-  background-color: ${theme.colors.dark4};
-  color: ${theme.colors.text1};
+  background-color: ${theme.components.card.bgColor};
+  color: ${theme.textColors.white90};
   border-radius: 8px;
   border: 1px solid ${theme.colors.dividerColor};
   overflow: hidden;
 `;
 
 const headerBorderCSS = css`
-  border-bottom: 1px solid ${theme.colors.dark5};
+  border-bottom: 1px solid ${theme.colors.gray500};
 `;
 
 export const headerCSS = ({
@@ -56,7 +56,7 @@ export const collapsibleCardCSS = css`
     background-color: inherit;
     border: 0;
     text-align: start;
-    color: ${theme.colors.text1};
+    color: ${theme.textColors.white90};
     /* remove outline - TODO might need to give a visual cue that this area is in focus */
     outline: none;
   }

src/content/Heading.tsx

@@ -30,7 +30,7 @@ export interface HeadingProps {
 const headingCSS = css`
   /* default to no margin */
   margin: 0;
-  color: ${theme.colors.text1};
+  color: ${theme.textColors.white90};
 `;
 
 const headingSizeCSS = (level: Level) => {

src/index.tsx

@@ -19,6 +19,7 @@ export * from './field';
 export * from './textfield';
 export * from './form';
 export * from './search';
+export { theme } from './theme';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */
 //   children?: ReactChild;

src/theme.ts

@@ -1,17 +1,4 @@
 import { lighten, darken } from 'polished';
-const baseColors = {
-  dark1: '#0B1015', // body bg
-  dark2: '#17202A', // nav bg
-  dark3: '#707070',
-  dark4: '#1C232B', // card bg
-  dark5: '#2D353E',
-  // TODO to be deprecated
-  text1: '#FFFFFF',
-  text2: '#D4D4D5',
-  text3: '#BBBDBF',
-  text4: '#D4D4D5',
-  text5: '#A3A6A9',
-};
 
 const grayColors = {
   gray500: '#2D353E',
@@ -50,14 +37,11 @@ const labelColors = {
   gray: 'rgba(255, 255, 255, 0.7)',
 };
 
-const theme = {
+export const theme = {
   colors: {
-    ...baseColors,
     ...arizeColors,
     ...grayColors,
     ...borderColors,
-    primary: '#db247c', // pink
-    secondary: '#db247c', // blue
     statusInfo: '#72D9FF',
     statusSuccess: '#7EE787', // RGB independent success color
     statusWarning: '#E69958',
@@ -100,6 +84,9 @@ const theme = {
       dangerBorderColor: lighten(0.1, '#F85149'),
       dangerHoverBackgroundColor: lighten(0.1, '#F85149'),
     },
+    card: {
+      bgColor: '#1C232B',
+    },
   },
   typography: {
     weights: {

stories/Colors.stories.tsx

@@ -1,56 +1,79 @@
-import React from 'react';
-import theme from '../src/theme';
+import React, { CSSProperties } from 'react';
+import { theme, Text, Heading } from '../src';
 import { Meta, Story } from '@storybook/react';
 // @ts-ignore
 import { withDesign } from 'storybook-addon-designs';
 
+const listStyle: CSSProperties = {
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  color: 'rgb(153,153,153)',
+  display: 'flex',
+  width: 1000,
+  flexWrap: 'wrap',
+  gap: '8px',
+};
+function Color({ color, name }) {
+  return (
+    <div
+      style={{
+        marginBottom: '5px',
+        marginTop: '5px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: color,
+          width: '100px',
+          height: '100px',
+          marginRight: '10px',
+          borderRadius: 3,
+        }}
+      />
+      <Text style={{ userSelect: 'none' }}>{color}</Text>
+      <Text>{name}</Text>
+    </div>
+  );
+}
 function Colors() {
   const colors = theme.colors;
-  const colorsArray = [];
+  const colorsArray: JSX.Element[] = [];
 
   Object.keys(theme.colors).forEach(name => {
     if (theme.colors[name]) {
-      colorsArray.push(
-        <div
-          style={{
-            marginBottom: '5px',
-            marginTop: '5px',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: colors[name],
-              width: '100px',
-              height: '100px',
-              marginRight: '10px',
-              borderRadius: 3,
-            }}
-          />
-          <div style={{ userSelect: 'none' }}>{colors[name]}</div>
-          <div>{name}</div>
-        </div>
-      );
+      colorsArray.push(<Color color={theme.colors[name]} name={name} />);
     }
   });
 
+  const components = Object.keys(theme.components).map(key => {
+    const colors = Object.keys(theme.components[key]);
+    return (
+      <section>
+        <Heading>{key}</Heading>
+        <ul style={listStyle}>
+          {colors.map((c, i) => (
+            <li key={i}>
+              <Color color={theme.components[key][c]} name={c} />
+            </li>
+          ))}
+        </ul>
+      </section>
+    );
+  });
+
   return (
-    <ul
-      style={{
-        listStyle: 'none',
-        margin: 0,
-        padding: 0,
-        color: 'rgb(153,153,153)',
-        display: 'flex',
-        width: 1000,
-        flexWrap: 'wrap',
-      }}
-    >
-      {colorsArray.map((el, i) => (
-        <li key={i}>{el}</li>
-      ))}
-    </ul>
+    <main>
+      <ul style={listStyle}>
+        {colorsArray.map((el, i) => (
+          <li key={i}>{el}</li>
+        ))}
+      </ul>
+      <br />
+      {components}
+    </main>
   );
 }