Revert "[Docs] Update StatusBadge" (#10613)

Reverts #10562.
Related to #10457.

polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss

@@ -1,37 +1,24 @@
 .StatusBadge {
-  font-size: var(--p-font-size-75);
+  font-size: var(--font-size-100);
   letter-spacing: 0;
-  font-weight: var(--p-font-weight-medium);
-  padding: var(--p-space-05) var(--p-space-2);
-  color: var(--p-color-text-subdued);
-  border-radius: var(--p-border-radius-2);
-}
+  font-weight: var(--font-weight-400);
+  border-radius: var(--border-radius-round);
+  padding: 0.05rem 0.25rem;
+  color: var(--text);
 
-.toneSuccess {
-  background-color: var(--p-color-bg-success);
-  color: var(--p-color-text-success);
-}
+  &[data-value='alpha'] {
+    background: var(--surface-attention);
+  }
 
-.toneInfo {
-  background-color: var(--p-color-bg-info);
-  color: var(--p-color-text-info);
-}
-
-.toneAttention {
-  background-color: var(--p-color-bg-caution);
-  color: var(--p-color-text-caution);
-}
-
-.toneWarning {
-  background-color: var(--p-color-bg-warning);
-  color: var(--p-color-text-warning-experimental);
-}
-
-.toneCritical {
-  background-color: var(--p-color-bg-critical);
-  color: var(--p-color-text-critical);
-}
+  &[data-value='warning'],
+  &[data-value='deprecated'],
+  &[data-value='legacy'] {
+    background: var(--surface-warning);
+  }
 
-.toneNew {
-  background-color: var(--p-color-bg-transparent-subdued-experimental);
+  &[data-value='beta'],
+  &[data-value='information'],
+  &[data-value='new'] {
+    background: var(--surface-information);
+  }
 }

polaris.shopify.com/src/components/StatusBadge/StatusBadge.tsx

@@ -1,30 +1,15 @@
 import {Status} from '../../types';
-import {className as classNames, variationName} from '../../utils/various';
 import styles from './StatusBadge.module.scss';
 
 interface Props {
   status: Status;
 }
-
-type Tone = 'info' | 'success' | 'warning' | 'critical' | 'attention' | 'new';
-
-const StatusToneMapping: {[S in Status]: Tone} = {
-  Alpha: 'info',
-  Beta: 'success',
-  Deprecated: 'critical',
-  Information: 'info',
-  Legacy: 'warning',
-  New: 'new',
-  Warning: 'warning',
-};
-
 function StatusBadge({status}: Props) {
-  const className = classNames(
-    styles.StatusBadge,
-    styles[variationName('tone', StatusToneMapping[status])],
+  return (
+    <div className={styles.StatusBadge} data-value={status.toLowerCase()}>
+      {status}
+    </div>
   );
-
-  return <div className={className}>{status}</div>;
 }
 
 export default StatusBadge;

polaris.shopify.com/src/utils/various.ts

@@ -62,10 +62,6 @@ export const className = (...classNames: ClassName[]): string => {
     .join(' ');
 };
 
-export const variationName = (name: string, value: string) => {
-  return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-};
-
 export const toPascalCase = (str: string): string =>
   (str.match(/[a-zA-Z0-9]+/g) || [])
     .map((w) => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)