feat(buttons): new light/dark mode colors (#1807)

Author: jzempel

packages/buttons/src/styled/StyledAnchor.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledAnchor } from './StyledAnchor';
 
 describe('StyledAnchor', () => {
@@ -26,7 +26,7 @@ describe('StyledAnchor', () => {
   it('renders danger styling if provided', () => {
     const { container } = render(<StyledAnchor isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue'));
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
   });
 
   it('renders expected RTL direction', () => {

packages/buttons/src/styled/StyledButton.spec.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { StyledButton } from './StyledButton';
 
 describe('StyledButton', () => {
@@ -32,13 +32,15 @@ describe('StyledButton', () => {
   it('renders danger styling if provided', () => {
     const { container } = render(<StyledButton isDanger />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.red[600]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]);
   });
 
   it('renders disabled styling if provided', () => {
     const { container } = render(<StyledButton disabled />);
 
-    expect(container.firstChild).toHaveStyleRule('color', PALETTE_V8.grey[600]);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600], {
+      modifier: '&:disabled'
+    });
   });
 
   it('renders link styling if provided', () => {
@@ -51,13 +53,13 @@ describe('StyledButton', () => {
   it('renders primary styling if provided', () => {
     const { container } = render(<StyledButton isPrimary />);
 
-    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE_V8.blue[600]);
+    expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.blue[700]);
   });
 
   it('renders neutral styling if provided', () => {
     const { container } = render(<StyledButton isNeutral />);
 
-    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE_V8.grey[300]);
+    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.grey[400]);
   });
 
   it('renders pill styling if provided', () => {