feat: Add additional success, danger, and warning colors to Text

src/content/Text.tsx

@@ -2,18 +2,18 @@ import React, {
   ElementType,
   ReactNode,
   forwardRef,
-  HTMLProps,
   CSSProperties,
 } from 'react';
 import { css } from '@emotion/react';
-import { DOMRef } from '../types';
+import { ColorValue, DOMProps, DOMRef, StyleProps } from '../types';
 import { useDOMRef } from '../utils/useDOMRef';
 import theme, { designationColors } from '../theme';
 import { TextColor, Size, TextElementType, Weight } from './types';
 import { textSizeCSS, textWeightCSS } from './styles';
 import { filterDOMProps } from '@react-aria/utils';
+import { colorValue, useStyleProps } from '../utils';
 
-export interface TextProps extends HTMLProps<HTMLSpanElement> {
+export interface TextProps extends DOMProps, StyleProps {
   /**
    * Sets text size
    * @default 'medium'
@@ -58,7 +58,11 @@ const getTextColor = (color: TextColor) => {
     // Return the designation color (e.x. the main primary / reference colors)
     return designationColors[color];
   }
-  return theme.textColors[color];
+  const textColor = theme.textColors[color];
+  if (textColor) {
+    return textColor;
+  }
+  return colorValue(color as ColorValue);
 };
 const textCSS = (color: TextColor) => css`
   /* default to no margin */
@@ -82,11 +86,13 @@ function Text(props: TextProps, ref: DOMRef<HTMLSpanElement>) {
   } = props;
   const TextTag = elementType as ElementType;
   const domRef = useDOMRef(ref);
+  const styleProps = useStyleProps(otherProps);
 
   return (
     <TextTag
       className="ac-text"
       {...filterDOMProps(otherProps)}
+      {...styleProps}
       css={css`
         ${textCSS(color)};
         ${textSizeCSS(textSize)};

src/content/types.ts

@@ -1,4 +1,4 @@
-import { DesignationColorValue } from '../types';
+import { ColorValue, DesignationColorValue } from '../types';
 
 export type Size =
   | 'xxxlarge'
@@ -16,7 +16,8 @@ export type TextColor =
   | 'white70'
   | 'white30'
   | 'inherit'
-  | DesignationColorValue;
+  | DesignationColorValue
+  | ColorValue;
 
 export type TextElementType =
   | 'span'

src/provider/GlobalStyles.tsx

@@ -192,6 +192,8 @@ export const globalCSS = css`
       --ac-global-color-gray-100: #666b71;
 
       --ac-global-color-danger: #f85149;
+      --ac-global-color-success: #7ee787;
+      --ac-global-color-warning: #e69958;
 
       --ac-global-text-color-900: rgba(255, 255, 255, 0.9);
 

src/types/core.ts

@@ -105,6 +105,8 @@ export type ColorValue =
   | 'gray-700'
   | 'gray-800'
   | 'gray-900'
+  | 'success'
+  | 'warning'
   | 'danger';
 
 export type DesignationColorValue =

src/utils/styleProps.ts

@@ -209,7 +209,7 @@ function rtl(ltr: string, rtl: string) {
 }
 
 type ColorType = 'default' | 'background' | 'border' | 'icon' | 'status';
-function colorValue(value: ColorValue, type: ColorType = 'default') {
+export function colorValue(value: ColorValue, type: ColorType = 'default') {
   // TODO actually support semantic colors
   return `var(--ac-global-color-${value}, var(--ac-semantic-${value}-color-${type}))`;
 }

stories/Text.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { Meta } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
-import { Text, TextProps } from '../src';
+import { Provider, Text, TextProps } from '../src';
 
 const meta: Meta = {
   title: 'Text',
@@ -31,84 +31,89 @@ const colors: TextProps['color'][] = [
   'white90',
   'designationPurple',
   'designationTurquoise',
+  'success',
+  'danger',
+  'warning',
 ];
 /**
  * A gallery of all the variants
  */
 export const Gallery = () => {
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      <p
+    <Provider>
+      <div
         css={css`
-          .ac-text {
-            display: block;
-          }
+          display: flex;
+          flex-direction: column;
         `}
       >
-        {sizes.map(size => {
-          return (
-            <Text key={size} textSize={size}>
-              {`I will not waste chalk`}
-            </Text>
-          );
-        })}
-      </p>
-      <p
-        css={css`
-          .ac-text {
-            display: block;
-          }
-        `}
-      >
-        {sizes.map(size => {
-          return (
-            <Text key={size} textSize={size} weight="heavy">
-              {`I will not waste chalk`}
-            </Text>
-          );
-        })}
-      </p>
-      <p
-        css={css`
-          .ac-text {
-            display: block;
-          }
-        `}
-      >
-        {colors.map(color => {
-          return (
-            <Text key={color} textSize="xlarge" color={color} weight="heavy">
-              {`I will not waste chalk`}
-            </Text>
-          );
-        })}
-      </p>
-      <p
-        css={css`
-          .ac-text {
-            display: block;
-          }
-        `}
-      >
-        {colors.map(color => {
-          return (
-            <Text
-              key={color}
-              fontStyle="italic"
-              textSize="xlarge"
-              color={color}
-              weight="heavy"
-            >
-              {`I will not waste chalk`}
-            </Text>
-          );
-        })}
-      </p>
-    </div>
+        <p
+          css={css`
+            .ac-text {
+              display: block;
+            }
+          `}
+        >
+          {sizes.map(size => {
+            return (
+              <Text key={size} textSize={size}>
+                {`I will not waste chalk`}
+              </Text>
+            );
+          })}
+        </p>
+        <p
+          css={css`
+            .ac-text {
+              display: block;
+            }
+          `}
+        >
+          {sizes.map(size => {
+            return (
+              <Text key={size} textSize={size} weight="heavy">
+                {`I will not waste chalk`}
+              </Text>
+            );
+          })}
+        </p>
+        <p
+          css={css`
+            .ac-text {
+              display: block;
+            }
+          `}
+        >
+          {colors.map(color => {
+            return (
+              <Text key={color} textSize="xlarge" color={color} weight="heavy">
+                {`I will not waste chalk`}
+              </Text>
+            );
+          })}
+        </p>
+        <p
+          css={css`
+            .ac-text {
+              display: block;
+            }
+          `}
+        >
+          {colors.map(color => {
+            return (
+              <Text
+                key={color}
+                fontStyle="italic"
+                textSize="xlarge"
+                color={color}
+                weight="heavy"
+              >
+                {`I will not waste chalk`}
+              </Text>
+            );
+          })}
+        </p>
+      </div>
+    </Provider>
   );
 };