chore: Update CountBadge to use system color tokens (#2709)

Resolves: #2708

[category:Components]

Release Note:
We moved the `default` variant styles into the base styles. This makes the CSS classes a little nicer to use.

modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx

@@ -231,7 +231,9 @@ instead.
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2700)
 
-As part of the refactor, we've removed the following exports that were primarily used to style the component:
+As part of the refactor, we've removed the following exports that were primarily used to style the
+component:
+
 - `useStatusIndicatorModel`
 - `useStatusIndicator`
 - `statusIndicatorColors`
@@ -507,6 +509,19 @@ our new
 The component API has not been changed, and it should behave identically as it did in previous
 versions.
 
+We also removed the `default` variant and consolidated those styles into the badge's base styles.
+This will not be a breaking change for most users. However, if you have a `CountBadge` with an
+explicit `default` variant, you'll see a TypeScript error. To resolve this, simply remove the
+variant prop.
+
+```tsx
+// Before (v10)
+<CountBadge variant="default" count={10} />
+
+// After (v11)
+<CountBadge count={10} />
+```
+
 ### Form Field (Preview)
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
@@ -767,6 +782,7 @@ our
 The component now supports the `cs` prop, but otherwise the API has not been changed.
 
 > #### Visual Breaking Change
+>
 > Opacity applied to the whole container has been removed for transparent variant and replace by
 > translucent color. By this change opacity has been changed from `0.85` to `0.84`, so there is
 > possibility of the small visual change.

modules/react/badge/lib/CountBadge.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const grow = keyframes({
   from: {
@@ -28,17 +28,18 @@ export interface CountBadgeProps extends CSProps {
   limit?: number;
   /**
    * Sets the variant of the Count Badge
-   *
-   * @default 'default'
    */
-  variant?: 'default' | 'inverse';
+  variant?: 'inverse';
 }
 
+// .cnvs-count-badge
 const countBadgeStencil = createStencil({
   base: {
     alignItems: 'center',
     animation: `${grow} 0.2s ease`,
+    background: system.color.static.red.default,
     borderRadius: system.shape.round,
+    color: system.color.text.inverse,
     display: 'inline-flex',
     fontFamily: system.fontFamily.default,
     fontSize: system.fontSize.subtext.medium,
@@ -48,18 +49,16 @@ const countBadgeStencil = createStencil({
     lineHeight: px2rem(20),
     minWidth: px2rem(20),
     padding: `0 ${px2rem(6.5)}`,
+    textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
   },
   modifiers: {
     variant: {
-      default: {
-        background: base.cinnamon500,
-        color: base.frenchVanilla100,
-        textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
-      },
+      // .cnvs-count-badge--variant-inverse
       inverse: {
-        background: base.frenchVanilla100,
+        background: system.color.bg.default,
         boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
-        color: base.blueberry400,
+        color: system.color.text.primary.default,
+        textShadow: 'none',
       },
     },
   },
@@ -70,11 +69,7 @@ const countBadgeStencil = createStencil({
  */
 export const CountBadge = createComponent('span')({
   displayName: 'NewCountBadge',
-  Component: (
-    {count = 0, limit = 1000, variant = 'default', ...elemProps}: CountBadgeProps,
-    ref,
-    Element
-  ) => {
+  Component: ({count = 0, limit = 1000, variant, ...elemProps}: CountBadgeProps, ref, Element) => {
     const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
 
     return (

modules/react/badge/stories/examples/Basic.tsx

@@ -4,16 +4,19 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
+  boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
 });
 
 const defaultBackground = createStyles({
+  boxSizing: 'border-box',
   backgroundColor: base.frenchVanilla100,
   padding: system.space.x4,
 });
 
 const inverseBackground = createStyles({
+  boxSizing: 'border-box',
   backgroundColor: base.blueberry400,
   padding: system.space.x4,
 });

modules/react/badge/stories/examples/CustomLimit.tsx

@@ -6,24 +6,28 @@ import {createStyles, cssVar} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 const columnStyles = createStyles({
+  boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
   gap: system.space.x4,
 });
 
 const controls = createStyles({
+  boxSizing: 'border-box',
   borderBottom: `solid 1px ${cssVar(base.soap400)}`,
   display: 'flex',
   gap: system.space.x1,
   padding: system.space.x1,
 });
 
 const defaultBackground = createStyles({
+  boxSizing: 'border-box',
   backgroundColor: base.frenchVanilla100,
   padding: system.space.x4,
 });
 
 const inverseBackground = createStyles({
+  boxSizing: 'border-box',
   backgroundColor: base.blueberry400,
   padding: system.space.x4,
 });

modules/react/badge/stories/examples/NotificationBadge.tsx

@@ -11,23 +11,27 @@ function negate(value: string, fallback?: string) {
 }
 
 const container = createStyles({
+  boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
   gap: system.space.x4,
 });
 
 const controls = createStyles({
+  boxSizing: 'border-box',
   borderBottom: `solid 1px ${cssVar(base.soap400)}`,
   display: 'flex',
   gap: system.space.x1,
   padding: system.space.x1,
 });
 
 const notificationContainerStyles = createStyles({
+  boxSizing: 'border-box',
   position: 'relative',
 });
 
 const countBadgeStyles = createStyles({
+  boxSizing: 'border-box',
   position: 'absolute',
   top: negate(system.space.x4),
   insetInlineEnd: negate(system.space.x1),