From 73b887ff93345add292cb35a79612ffd2f8b74fe Mon Sep 17 00:00:00 2001
From: "Liujie (Jacky) Hao" <jacky.hao18@gmail.com>
Date: Fri, 14 Jul 2023 18:45:55 -0500
Subject: [PATCH 1/3] add additional colors

---
 src/content/Text.tsx          |  14 +++-
 src/content/types.ts          |   5 +-
 src/provider/GlobalStyles.tsx |   2 +
 src/types/core.ts             |   2 +
 src/utils/styleProps.ts       |   2 +-
 stories/Text.stories.tsx      | 147 ++++++++++++++++++----------------
 6 files changed, 94 insertions(+), 78 deletions(-)

diff --git a/src/content/Text.tsx b/src/content/Text.tsx
index 124ab1d7..0ae1b066 100644
--- a/src/content/Text.tsx
+++ b/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)};
diff --git a/src/content/types.ts b/src/content/types.ts
index 1693594a..6fca3e64 100644
--- a/src/content/types.ts
+++ b/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'
diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx
index 7af7e538..ff9dfec3 100644
--- a/src/provider/GlobalStyles.tsx
+++ b/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);
 
diff --git a/src/types/core.ts b/src/types/core.ts
index e611e80e..d10abf74 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -105,6 +105,8 @@ export type ColorValue =
   | 'gray-700'
   | 'gray-800'
   | 'gray-900'
+  | 'success'
+  | 'warning'
   | 'danger';
 
 export type DesignationColorValue =
diff --git a/src/utils/styleProps.ts b/src/utils/styleProps.ts
index 954046be..b4a736b2 100644
--- a/src/utils/styleProps.ts
+++ b/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}))`;
 }
diff --git a/stories/Text.stories.tsx b/stories/Text.stories.tsx
index c4e79b12..835ecb2d 100644
--- a/stories/Text.stories.tsx
+++ b/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>
   );
 };

From a138d6a38ab4600006f8772dda37e09cc87f244b Mon Sep 17 00:00:00 2001
From: "Liujie (Jacky) Hao" <jacky.hao18@gmail.com>
Date: Fri, 14 Jul 2023 19:01:37 -0500
Subject: [PATCH 2/3] version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a463750d..ea74afc1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.12.3",
+  "version": "0.12.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

From 2dce3963b8aecfd8525e8a5dc20535b7de0f92b7 Mon Sep 17 00:00:00 2001
From: "Liujie (Jacky) Hao" <jacky.hao18@gmail.com>
Date: Fri, 14 Jul 2023 19:02:22 -0500
Subject: [PATCH 3/3] v0.12.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ea74afc1..e98b27d2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.12.4",
+  "version": "0.12.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",