feat(status,themes): add design tokens to status components

packages/react/src/components/status/status.tsx

@@ -4,27 +4,22 @@ import { ResolvedTheme } from '../../themes/theme';
 
 export type StatusType = 'enabled' | 'disabled' | 'blocked';
 
-function getBackgroundColor(type: StatusType, theme: ResolvedTheme): string {
-    switch (type) {
-        case 'enabled':
-            return theme.notifications['success-1.1'];
-        case 'disabled':
-            return theme.greys.white;
-        case 'blocked':
-            return theme.notifications['alert-2.1'];
-    }
+function getCircleBorderStyle(props: {theme: ResolvedTheme, type: StatusType}): string {
+    const { theme, type } = props;
+    return `border: ${type === 'disabled'
+        ? `1px solid ${theme.component['status-circle-disabled-border-color']}`
+        : 'none'}`;
 }
 
 const Wrapper = styled.div<{ type: StatusType }>`
     align-items: center;
     display: flex;
-
-    ${({ type, theme }) => type === 'disabled' && `color: ${theme.greys['dark-grey']}`}
+    ${({ type, theme }) => type === 'disabled' && `color: ${theme.component['status-disabled-text-color']}`};
 `;
 
 const Circle = styled.div<{ type: StatusType }>`
-    background-color: ${({ type, theme }) => getBackgroundColor(type, theme)};
-    border: ${({ type, theme }) => (type === 'disabled' ? `1px solid ${theme.greys['dark-grey']}` : 'none')};
+    background-color: ${({ theme, type }) => theme.component[`status-circle-${type}-color`]};
+    ${getCircleBorderStyle};
     border-radius: 50%;
     box-sizing: border-box;
     height: 0.625rem;

packages/react/src/themes/tokens/component-tokens.ts

@@ -21,6 +21,7 @@ import { BadgeTokens, defaultBadgeTokens } from './component/badge-tokens';
 import { defaultGlobalBannerTokens, GlobalBannerTokens } from './component/global-banner-tokens';
 import { defaultSectionalBannerTokens, SectionalBannerTokens } from './component/sectional-banner-tokens';
 import { defaultSpinnerTokens, SpinnerTokens } from './component/spinner-tokens';
+import { defaultStatusTokens, StatusTokens } from './component/status-tokens';
 import { defaultTagTokens, TagTokens } from './component/tag-tokens';
 import { defaultToastContainerTokens, ToastContainerTokens } from './component/toast-container-tokens';
 
@@ -46,6 +47,7 @@ export type ComponentTokens =
     | GlobalBannerTokens
     | SectionalBannerTokens
     | SpinnerTokens
+    | StatusTokens
     | TagTokens
     | ToastContainerTokens;
 
@@ -78,6 +80,7 @@ export const defaultComponentTokens: ComponentTokenMap = {
     ...defaultGlobalBannerTokens,
     ...defaultSectionalBannerTokens,
     ...defaultSpinnerTokens,
+    ...defaultStatusTokens,
     ...defaultTagTokens,
     ...defaultToastContainerTokens,
 };

packages/react/src/themes/tokens/component/status-tokens.ts

@@ -0,0 +1,23 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type StatusTokens =
+    | 'status-disabled-text-color'
+    | 'status-circle-blocked-color'
+    | 'status-circle-disabled-color'
+    | 'status-circle-disabled-border-color'
+    | 'status-circle-enabled-color';
+
+export type StatusTokenValue = AliasTokens | RefTokens;
+
+export type StatusTokenMap = {
+    [Token in StatusTokens]: StatusTokenValue;
+};
+
+export const defaultStatusTokens: StatusTokenMap = {
+    'status-disabled-text-color': 'color-neutral-65',
+    'status-circle-blocked-color': 'color-alert-50',
+    'status-circle-disabled-color': 'color-white',
+    'status-circle-disabled-border-color': 'color-neutral-65',
+    'status-circle-enabled-color': 'color-success-50',
+};