feat: added toxic labels (#2396)

src/core/client/ui/components/Counter/Counter.css

@@ -35,6 +35,10 @@
   background-color: var(--palette-grey-dark);
 }
 
+.colorError {
+  background-color: var(--palette-error-darkest);
+}
+
 .colorInherit {
   background-color: currentColor;
 }

src/core/client/ui/components/Counter/Counter.tsx

@@ -14,7 +14,7 @@ interface Props {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color?: "inherit" | "dark" | "grey" | "primary";
+  color?: "inherit" | "dark" | "grey" | "primary" | "error";
 
   size?: "sm" | "md";
 }
@@ -34,6 +34,7 @@ const Counter: FunctionComponent<Props> = ({
       [classes.colorDark]: color === "dark",
       [classes.colorGrey]: color === "grey",
       [classes.colorInherit]: color === "inherit",
+      [classes.colorError]: color === "error",
       [classes.sizeSmall]: size === "sm",
     },
     className

src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap

@@ -5,6 +5,7 @@ exports[`renders correctly 1`] = `
   classes={
     Object {
       "colorDark": "Counter-colorDark",
+      "colorError": "Counter-colorError",
       "colorGrey": "Counter-colorGrey",
       "colorInherit": "Counter-colorInherit",
       "colorPrimary": "Counter-colorPrimary",

src/core/client/ui/components/Marker/Count.css

@@ -2,7 +2,7 @@
   composes: markerText from "coral-ui/shared/typography.css";
   border-left: 1px solid currentColor;
   margin-left: calc(0.5 * var(--mini-unit));
-  margin-right: calc(-0.5 * var(--mini-unit));
+  margin-right: calc(-0.25 * var(--mini-unit));
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: calc(0.5 * var(--mini-unit));

src/core/client/ui/components/Marker/Marker.css

@@ -2,7 +2,7 @@
   composes: markerText from "coral-ui/shared/typography.css";
   color: var(--palette-error-main);
   border: 1px solid currentColor;
-  border-radius: 4px;
+  border-radius: 20px;
   padding: 1px var(--mini-unit);
   white-space: nowrap;
 }

src/core/client/ui/components/Typography/Typography.css

@@ -122,6 +122,10 @@
   color: var(--palette-error-main);
 }
 
+.colorErrorDark {
+  color: var(--palette-error-dark);
+}
+
 .colorWarning {
   color: var(--palette-warning-main);
 }

src/core/client/ui/components/Typography/Typography.tsx

@@ -59,6 +59,7 @@ interface Props extends PropTypesOf<typeof Box> {
     | "textLight"
     | "warning"
     | "error"
+    | "errorDark"
     | "success";
   /**
    * The container used for the root node.
@@ -118,6 +119,7 @@ const Typography: FunctionComponent<Props> = props => {
       [classes.colorTextLight]: color === "textLight",
       [classes.colorPrimary]: color === "primary",
       [classes.colorError]: color === "error",
+      [classes.colorErrorDark]: color === "errorDark",
       [classes.colorSuccess]: color === "success",
       [classes.colorWarning]: color === "warning",
       [classes.noWrap]: noWrap,