feat(headline): migrate to semantic colors

Author: Zack Jones

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import { ClassicColors, ModernColors } from '../src/essentials/Colors/globalStyles';
+import { getSemanticValue } from '../src/utils/cssVariables';
 
 const THEMES = {
     classic: ClassicColors,
@@ -41,8 +42,8 @@ export const preview: Preview = {
         backgrounds: {
             default: 'light',
             values: [
-                { name: 'light', value: '#FFFFFF' },
-                { name: 'dark', value: '#001E3E' }
+                { name: 'light', value: getSemanticValue('background-primary-default') },
+                { name: 'dark', value: getSemanticValue('background-primary-inverted') }
             ]
         },
         viewport: {

docs/components/ItemWrapper.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { compose, margin, MarginProps, padding, PaddingProps } from 'styled-system';
-import { Colors, Spaces } from '../../src/essentials';
+import { Spaces } from '../../src/essentials';
+import { getSemanticValue } from '../../src/utils/cssVariables';
 
 type ItemWrapperProps = PaddingProps &
     MarginProps & {
@@ -17,7 +18,7 @@ const ItemWrapper = styled.div<ItemWrapperProps>`
     grid-template-columns: ${p => (p.gridTemplate ? p.gridTemplate : '1fr')};
     grid-row-gap: ${Spaces[3]};
     grid-column-gap: ${Spaces[2]};
-    background-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
+    background-color: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
 
     ${compose(padding, margin)}
 `;

src/components/Headline/Headline.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 import styled from 'styled-components';
 import { compose, margin, system, MarginProps, textAlign, TextAlignProps, ResponsiveValue } from 'styled-system';
-import { Colors } from '../../essentials';
 import { theme } from '../../essentials/theme';
 import { get } from '../../utils/themeGet';
+import { getSemanticValue } from '../../utils/cssVariables';
 
 interface HeadlineProps extends ComponentPropsWithoutRef<'h1'>, MarginProps, TextAlignProps {
     /**
@@ -59,7 +59,7 @@ const getSize = ({ as = 'h1', size }: HeadlineProps): ResponsiveValue<'xxl' | 'x
     size || DEFAULT_HEADLINE_SIZE[as];
 
 const Headline: React.FC<HeadlineProps> = styled.h1.attrs({ theme })<HeadlineProps>`
-    color: ${p => (p.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900)};
+    color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-primary')};
     font-family: ${get('fonts.normal')};
     font-weight: ${get('fontWeights.bold')};
     margin: 0;