Use functional color variables in CounterLabel

.changeset/twelve-suits-listen.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in CounterLabel

src/CounterLabel.tsx

@@ -12,20 +12,20 @@ const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     color:
       scheme === 'gray-light'
-        ? get('colors.gray.9')(props)
+        ? get('colors.counter.text')(props)
         : scheme === 'gray'
-        ? get('colors.white')(props)
-        : get('colors.gray.6')(props)
+        ? get('colors.counter.primary.text')(props)
+        : get('colors.text.secondary.text')(props)
   }
 }
 
 const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     backgroundColor:
       scheme === 'gray-light'
-        ? get('colors.blackfade15')(props)
+        ? get('colors.counter.bg')(props)
         : scheme === 'gray'
-        ? get('colors.gray.5')(props)
+        ? get('colors.counter.primary.bg')(props)
         : get('colors.counter.bg')(props)
   }
 }

src/__tests__/CounterLabel.tsx

@@ -6,6 +6,8 @@ import {colors} from '../theme'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
+import {default as primitives} from '@primer/primitives'
+
 expect.extend(toHaveNoViolations)
 
 describe('CounterLabel', () => {
@@ -27,15 +29,25 @@ describe('CounterLabel', () => {
   })
 
   it('respects the gray "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="gray" />)).toHaveStyleRule('color', colors.white.trim())
-    expect(render(<CounterLabel scheme="gray" />)).toHaveStyleRule('background-color', colors.gray[5].trim())
+    const p = primitives
+    expect(render(<CounterLabel scheme="gray" />)).toHaveStyleRule(
+      'color',
+      primitives.colors.light.counter.primary.text.trim()
+    )
+    expect(render(<CounterLabel scheme="gray" />)).toHaveStyleRule(
+      'background-color',
+      primitives.colors.light.counter.primary.bg.trim()
+    )
   })
 
   it('respects the gray-light "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="gray-light" />)).toHaveStyleRule('color', colors.gray[9].trim())
+    expect(render(<CounterLabel scheme="gray-light" />)).toHaveStyleRule(
+      'color',
+      primitives.colors.light.counter.text.trim()
+    )
     expect(render(<CounterLabel scheme="gray-light" />)).toHaveStyleRule(
       'background-color',
-      colors.blackfade15.replace(/\s/g, '')
+      primitives.colors.light.counter.bg
     )
   })
 })

src/__tests__/__snapshots__/CounterLabel.tsx.snap

@@ -8,7 +8,6 @@ exports[`CounterLabel renders consistently 1`] = `
   font-weight: 600;
   line-height: 1;
   border-radius: 20px;
-  color: #586069;
   background-color: rgba(209,213,218,0.5);
 }