Fix badge colors

sophschneider · sophschneider · commit 07f91d86887c · 2023-05-31T19:38:58.000Z
diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
@@ -13,10 +13,15 @@
   border-radius: var(--p-border-radius-5);
   color: var(--p-color-text);
 
-  :where(#{$se23}) & {
+  #{$se23} & {
     background-color: var(--p-color-experimental-bg-transparent-subdued);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-medium);
+    border-radius: var(--p-border-radius-2);
+
+    svg {
+      fill: var(--p-color-text-subdued);
+    }
   }
 
   @media print {
@@ -29,6 +34,10 @@
 
   #{$se23} & {
     color: var(--p-color-text-success);
+
+    svg {
+      fill: var(--p-color-icon-success);
+    }
   }
 }
 
@@ -37,6 +46,10 @@
 
   #{$se23} & {
     color: var(--p-color-text-info);
+
+    svg {
+      fill: var(--p-color-icon-info);
+    }
   }
 }
 
@@ -45,14 +58,22 @@
 
   #{$se23} & {
     color: var(--p-color-text-caution);
+
+    svg {
+      fill: var(--p-color-icon-caution);
+    }
   }
 }
 
 .statusWarning {
   background-color: var(--p-color-bg-warning);
 
   #{$se23} & {
-    color: var(--p-color-text-warning-strong);
+    color: var(--p-color-experimental-text-warning);
+
+    svg {
+      fill: var(--p-color-icon-warning);
+    }
   }
 }
 
@@ -61,6 +82,10 @@
 
   #{$se23} & {
     color: var(--p-color-text-critical);
+
+    svg {
+      fill: var(--p-color-icon-critical);
+    }
   }
 }
 
diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Badge} from '@shopify/polaris';
+import {
+  Badge,
+  HorizontalStack,
+  LegacyCard,
+  VerticalStack,
+} from '@shopify/polaris';
 
 export default {
   component: Badge,
@@ -10,10 +15,6 @@ export function Default() {
   return <Badge>Fulfilled</Badge>;
 }
 
-export function Small() {
-  return <Badge size="small">Fulfilled</Badge>;
-}
-
 export function Informational() {
   return <Badge status="info">Draft</Badge>;
 }
@@ -69,3 +70,74 @@ export function WithStatusAndProgressLabelOverride() {
     </Badge>
   );
 }
+
+export function DesignReview() {
+  return (
+    <LegacyCard sectioned>
+      <VerticalStack gap="5">
+        <HorizontalStack gap="5">
+          <Badge>Fulfilled</Badge>
+          <Badge status="info">Informational</Badge>
+          <Badge status="success">Success</Badge>
+          <Badge status="warning">Warning</Badge>
+          <Badge status="attention">Attention</Badge>
+          <Badge status="critical">Critical</Badge>
+        </HorizontalStack>
+        <HorizontalStack gap="5">
+          <Badge progress="complete">Fulfilled</Badge>
+          <Badge progress="complete" status="info">
+            Informational
+          </Badge>
+          <Badge progress="complete" status="success">
+            Success
+          </Badge>
+          <Badge progress="complete" status="warning">
+            Warning
+          </Badge>
+          <Badge progress="complete" status="attention">
+            Attention
+          </Badge>
+          <Badge progress="complete" status="critical">
+            Critical
+          </Badge>
+        </HorizontalStack>
+        <HorizontalStack gap="5">
+          <Badge progress="partiallyComplete">Fulfilled</Badge>
+          <Badge progress="partiallyComplete" status="info">
+            Informational
+          </Badge>
+          <Badge progress="partiallyComplete" status="success">
+            Success
+          </Badge>
+          <Badge progress="partiallyComplete" status="warning">
+            Warning
+          </Badge>
+          <Badge progress="partiallyComplete" status="attention">
+            Attention
+          </Badge>
+          <Badge progress="partiallyComplete" status="critical">
+            Critical
+          </Badge>
+        </HorizontalStack>
+        <HorizontalStack gap="5">
+          <Badge progress="incomplete">Fulfilled</Badge>
+          <Badge progress="incomplete" status="info">
+            Informational
+          </Badge>
+          <Badge progress="incomplete" status="success">
+            Success
+          </Badge>
+          <Badge progress="incomplete" status="warning">
+            Warning
+          </Badge>
+          <Badge progress="incomplete" status="attention">
+            Attention
+          </Badge>
+          <Badge progress="incomplete" status="critical">
+            Critical
+          </Badge>
+        </HorizontalStack>
+      </VerticalStack>
+    </LegacyCard>
+  );
+}
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -22,6 +22,7 @@
     border-radius: 3px;
     // stylelint-disable-next-line -- se23 1.25px border width
     border-width: 1.25px;
+    --pc-pip-color: var(--p-color-text-subdued);
   }
 }
 
@@ -48,6 +49,10 @@
 .statusWarning {
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-pip-color: var(--p-color-icon-caution);
+
+  #{$se23} & {
+    --pc-pip-color: var(--p-color-icon-warning);
+  }
 }
 
 .statusCritical {
diff --git a/polaris-tokens/src/token-groups/color.ts b/polaris-tokens/src/token-groups/color.ts
@@ -370,7 +370,7 @@ export const color: {
   },
   'color-bg-critical': {
     value: colors.red[200],
-    valueExperimental: colorsExperimental.red[4],
+    valueExperimental: colorsExperimental.red[6],
     description: '',
   },
   'color-bg-critical-subdued': {
@@ -690,7 +690,7 @@ export const color: {
   },
   'color-icon-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[12],
+    valueExperimental: colorsExperimental.red[11],
     description: '',
   },
   'color-icon-caution': {
@@ -700,7 +700,7 @@ export const color: {
   },
   'color-icon-info': {
     value: colors.teal[600],
-    valueExperimental: colorsExperimental.azure[12],
+    valueExperimental: colorsExperimental.azure[11],
     description: '',
   },
   'color-icon-warning': {

Original file line number	Diff line number	Diff line change
`@@ -13,10 +13,15 @@`
`13`	`13`	`border-radius: var(--p-border-radius-5);`
`14`	`14`	`color: var(--p-color-text);`
`15`	`15`
`16`		`- :where(#{$se23}) & {`
	`16`	`+ #{$se23} & {`
`17`	`17`	`background-color: var(--p-color-experimental-bg-transparent-subdued);`
`18`	`18`	`color: var(--p-color-text-subdued);`
`19`	`19`	`font-weight: var(--p-font-weight-medium);`
	`20`	`+ border-radius: var(--p-border-radius-2);`
	`21`	`+`
	`22`	`+ svg {`
	`23`	`+ fill: var(--p-color-text-subdued);`
	`24`	`+ }`
`20`	`25`	`}`
`21`	`26`
`22`	`27`	`@media print {`
`@@ -29,6 +34,10 @@`
`29`	`34`
`30`	`35`	`#{$se23} & {`
`31`	`36`	`color: var(--p-color-text-success);`
	`37`	`+`
	`38`	`+ svg {`
	`39`	`+ fill: var(--p-color-icon-success);`
	`40`	`+ }`
`32`	`41`	`}`
`33`	`42`	`}`
`34`	`43`
`@@ -37,6 +46,10 @@`
`37`	`46`
`38`	`47`	`#{$se23} & {`
`39`	`48`	`color: var(--p-color-text-info);`
	`49`	`+`
	`50`	`+ svg {`
	`51`	`+ fill: var(--p-color-icon-info);`
	`52`	`+ }`
`40`	`53`	`}`
`41`	`54`	`}`
`42`	`55`
`@@ -45,14 +58,22 @@`
`45`	`58`
`46`	`59`	`#{$se23} & {`
`47`	`60`	`color: var(--p-color-text-caution);`
	`61`	`+`
	`62`	`+ svg {`
	`63`	`+ fill: var(--p-color-icon-caution);`
	`64`	`+ }`
`48`	`65`	`}`
`49`	`66`	`}`
`50`	`67`
`51`	`68`	`.statusWarning {`
`52`	`69`	`background-color: var(--p-color-bg-warning);`
`53`	`70`
`54`	`71`	`#{$se23} & {`
`55`		`- color: var(--p-color-text-warning-strong);`
	`72`	`+ color: var(--p-color-experimental-text-warning);`
	`73`	`+`
	`74`	`+ svg {`
	`75`	`+ fill: var(--p-color-icon-warning);`
	`76`	`+ }`
`56`	`77`	`}`
`57`	`78`	`}`
`58`	`79`
`@@ -61,6 +82,10 @@`
`61`	`82`
`62`	`83`	`#{$se23} & {`
`63`	`84`	`color: var(--p-color-text-critical);`
	`85`	`+`
	`86`	`+ svg {`
	`87`	`+ fill: var(--p-color-icon-critical);`
	`88`	`+ }`
`64`	`89`	`}`
`65`	`90`	`}`
`66`	`91`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`border-radius: 3px;`
`23`	`23`	`// stylelint-disable-next-line -- se23 1.25px border width`
`24`	`24`	`border-width: 1.25px;`
	`25`	`+ --pc-pip-color: var(--p-color-text-subdued);`
`25`	`26`	`}`
`26`	`27`	`}`
`27`	`28`
`@@ -48,6 +49,10 @@`
`48`	`49`	`.statusWarning {`
`49`	`50`	`// stylelint-disable-next-line -- Polaris component custom properties`
`50`	`51`	`--pc-pip-color: var(--p-color-icon-caution);`
	`52`	`+`
	`53`	`+ #{$se23} & {`
	`54`	`+ --pc-pip-color: var(--p-color-icon-warning);`
	`55`	`+ }`
`51`	`56`	`}`
`52`	`57`
`53`	`58`	`.statusCritical {`