Add accentColor to css properties

Author: jhbell

packages/css/src/index.ts

@@ -112,6 +112,7 @@ export const multiples = {
 export const scales = {
   color: 'colors',
   background: 'colors',
+  accentColor: 'colors',
   backgroundColor: 'colors',
   borderColor: 'colors',
   caretColor: 'colors',

packages/css/test/index.ts

@@ -577,16 +577,18 @@ test('flexBasis uses theme.sizes', () => {
   })
 })
 
-test('fill and stroke and caretColor use theme.colors', () => {
+test('fill, stroke, caretColor, and accentColor use theme.colors', () => {
   const style = css({
     fill: 'primary',
     stroke: 'secondary',
     caretColor: 'primary',
+    accentColor: 'secondary',
   })(theme)
   expect(style).toEqual({
     fill: 'tomato',
     stroke: 'cyan',
     caretColor: 'tomato',
+    accentColor: 'cyan',
   })
 })
 

packages/docs/src/pages/sx-prop.mdx

@@ -60,6 +60,7 @@ available.
 | `letterSpacing`           | `letterSpacings` |
 | `color`                   | `colors`         |
 | `bg`, `backgroundColor`   | `colors`         |
+| `accentColor`             | `colors`         |
 | `borderColor`             | `colors`         |
 | `caretColor`              | `colors`         |
 | `outlineColor`            | `colors`         |