fix designation colors

src/content/Text.tsx

@@ -9,15 +9,22 @@ import {
   ColorValue,
   DOMProps,
   DOMRef,
+  DesignationColorValue,
   StyleProps,
   TextColorValue,
 } from '../types';
-import theme, { designationColors } from '../theme';
+import theme from '../theme';
 import { Size, TextElementType, Weight } from './types';
 
 import { textSizeCSS, textWeightCSS } from './styles';
 import { filterDOMProps } from '@react-aria/utils';
-import { colorValue, useDOMRef, useStyleProps } from '../utils';
+import {
+  colorValue,
+  designationColorValue,
+  useDOMRef,
+  useStyleProps,
+} from '../utils';
+import { assertUnreachable } from '../utils/typeUtils';
 
 export interface TextProps extends DOMProps, StyleProps {
   /**
@@ -59,10 +66,13 @@ export interface TextProps extends DOMProps, StyleProps {
   className?: string;
 }
 
-const getTextColor = (color: TextColorValue) => {
-  if (color.startsWith('designation')) {
-    // Return the designation color (e.x. the main primary / reference colors)
-    return designationColors[color];
+function isDesignationColor(color: string): color is DesignationColorValue {
+  return color.startsWith('designation');
+}
+
+const getTextColor = (color: TextColorValue): string => {
+  if (isDesignationColor(color)) {
+    return designationColorValue(color);
   }
   if (color === 'inherit') {
     return 'inherit';

src/utils/styleProps.ts

@@ -5,6 +5,7 @@ import {
   BorderRadiusValue,
   BorderSizeValue,
   ColorValue,
+  DesignationColorValue,
   DimensionValue,
   Direction,
   Responsive,
@@ -13,6 +14,7 @@ import {
   ViewStyleProps,
 } from '../types';
 import { useLocale } from '@react-aria/i18n';
+import { assertUnreachable } from './typeUtils';
 
 type Breakpoint = 'base' | 'S' | 'M' | 'L' | string;
 type StyleName = string | string[] | ((dir: Direction) => string);
@@ -214,6 +216,18 @@ export function colorValue(value: ColorValue, type: ColorType = 'default') {
   return `var(--ac-global-color-${value}, var(--ac-semantic-${value}-color-${type}))`;
 }
 
+export function designationColorValue(value: DesignationColorValue) {
+  // Return the designation color (e.x. the main primary / reference colors)
+  switch (value) {
+    case 'designationPurple':
+      return 'var(--ac-global-color-designation-purple)';
+    case 'designationTurquoise':
+      return 'var(--ac-global-color-designation-turquoise)';
+    default:
+      assertUnreachable(value);
+  }
+}
+
 function backgroundColorValue(value: BackgroundColorValue) {
   return `var(--ac-global-background-color-${value}, ${colorValue(
     value as ColorValue,

stories/Text.stories.tsx

@@ -4,6 +4,7 @@ import { Meta } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
 import { ColorValue, Provider, Text, TextProps } from '../src';
 import { globalColors } from './constants';
+import { ThemeSplitView } from './components/ThemeSplitView';
 
 const meta: Meta = {
   title: 'Text',
@@ -42,7 +43,7 @@ const colors: TextProps['color'][] = [
  */
 export const Gallery = () => {
   return (
-    <Provider>
+    <ThemeSplitView>
       <div
         css={css`
           display: flex;
@@ -133,6 +134,6 @@ export const Gallery = () => {
           })}
         </p>
       </div>
-    </Provider>
+    </ThemeSplitView>
   );
 };