feat(theme): use newly added semantic color tokens

Author: Nadiia Dmytrenko

documentation-site/components/blog.js

@@ -21,7 +21,7 @@ const Image = themedStyled('img', props => ({
 }));
 
 export const Caption = themedStyled('figcaption', ({$theme}) => ({
-  color: $theme.colors.foregroundAlt,
+  color: $theme.colors.contentSecondary,
   fontFamily: $theme.typography.font100.fontFamily,
   fontSize: $theme.sizing.scale500,
   fontWeight: 300,
@@ -48,22 +48,22 @@ export const Demo = themedStyled('iframe', {
 });
 
 const Tagline = themedStyled('span', ({$theme}) => ({
-  color: $theme.colors.foregroundAlt,
+  color: $theme.colors.contentSecondary,
   fontFamily: $theme.typography.font100.fontFamily,
   fontSize: $theme.sizing.scale800,
   fontWeight: 300,
 }));
 
 const AuthorLink = themedStyled('a', ({$theme}) => ({
-  color: $theme.colors.foregroundAlt,
+  color: $theme.colors.contentSecondary,
   fontFamily: $theme.typography.font100.fontFamily,
   ':hover': {
-    color: $theme.colors.foreground,
+    color: $theme.colors.contentPrimary,
   },
 }));
 
 const ArticleDate = themedStyled('span', ({$theme}) => ({
-  color: $theme.colors.foregroundAlt,
+  color: $theme.colors.contentSecondary,
 }));
 
 export const Meta = ({
@@ -121,7 +121,7 @@ export const Meta = ({
         overrides={{
           Block: {
             style: ({$theme}) => ({
-              color: $theme.colors.foregroundAlt,
+              color: $theme.colors.contentSecondary,
               fontFamily: $theme.typography.font100.fontFamily,
               margin: `${$theme.sizing.scale400} 0`,
             }),

documentation-site/components/example.js

@@ -118,7 +118,7 @@ class Example extends React.Component<PropsT, StateT> {
               marginBottom: 0,
               boxShadow: 'none',
               borderWidth: 0,
-              backgroundColor: $theme.colors.background,
+              backgroundColor: $theme.colors.backgroundPrimary,
             }),
           },
           Contents: {

documentation-site/components/footer.js

@@ -32,7 +32,7 @@ const StyledFooter = themedStyled<{}>(
     ...typography.font300,
     position: 'sticky',
     bottom: 0,
-    color: colors.foreground,
+    color: colors.contentPrimary,
     backgroundColor: name.startsWith('light-theme')
       ? colors.mono200
       : colors.headerNavigationFill,
@@ -46,7 +46,7 @@ const StyledFooter = themedStyled<{}>(
 
 const StyledLink = themedStyled('a', ({$theme}) => ({
   textDecoration: 'none',
-  color: $theme.colors.foreground,
+  color: $theme.colors.contentPrimary,
   display: 'inline-block',
   cursor: 'pointer',
   marginLeft: '32px',

documentation-site/components/gallery.js

@@ -267,7 +267,7 @@ function Thumbnail({children, href}) {
           borderTop: 0,
           borderLeft: 0,
           borderRight: 0,
-          color: `${theme.colors.foregroundAlt}`,
+          color: `${theme.colors.contentSecondary}`,
           paddingTop: theme.sizing.scale300,
           paddingBottom: theme.sizing.scale300,
           paddingLeft: theme.sizing.scale500,

documentation-site/components/header-navigation.js

@@ -160,7 +160,7 @@ const Navigation = ({toggleSidebar, toggleTheme, toggleDirection}: PropsT) => {
                 $style={{textDecoration: 'none'}}
                 target="_blank"
               >
-                <SlackLogo size={24} color={theme.colors.foreground} />
+                <SlackLogo size={24} color={theme.colors.contentPrimary} />
               </Block>
               <Block
                 $as="a"
@@ -180,7 +180,7 @@ const Navigation = ({toggleSidebar, toggleTheme, toggleDirection}: PropsT) => {
                 $style={{textDecoration: 'none'}}
                 target="_blank"
               >
-                <GithubLogo size={24} color={theme.colors.foreground} />
+                <GithubLogo size={24} color={theme.colors.contentPrimary} />
               </Block>
               <Block
                 as="span"
@@ -202,9 +202,15 @@ const Navigation = ({toggleSidebar, toggleTheme, toggleDirection}: PropsT) => {
                 }}
               >
                 {theme.direction === 'rtl' ? (
-                  <AlignLeftIcon size={24} color={theme.colors.foreground} />
+                  <AlignLeftIcon
+                    size={24}
+                    color={theme.colors.contentPrimary}
+                  />
                 ) : (
-                  <AlignRightIcon size={24} color={theme.colors.foreground} />
+                  <AlignRightIcon
+                    size={24}
+                    color={theme.colors.contentPrimary}
+                  />
                 )}
               </Block>
               <Block
@@ -228,12 +234,12 @@ const Navigation = ({toggleSidebar, toggleTheme, toggleDirection}: PropsT) => {
                   accessibilityType={'tooltip'}
                 >
                   <Block as="span" font="font300">
-                    <Bulb size={24} color={theme.colors.foreground} />
+                    <Bulb size={24} color={theme.colors.contentPrimary} />
                   </Block>
                 </StatefulTooltip>
               </Block>
               <Hamburger role="button" onClick={toggleSidebar}>
-                <Menu size={32} color={theme.colors.foregroundAlt} />
+                <Menu size={32} color={theme.colors.contentSecondary} />
               </Hamburger>
             </Block>
           </NavigationList>

documentation-site/components/help.js

@@ -20,7 +20,7 @@ const Help = () => {
         right: theme.sizing.scale2400,
         boxShadow: theme.lighting.shadow400,
         padding: theme.sizing.scale400,
-        backgroundColor: theme.colors.background,
+        backgroundColor: theme.colors.backgroundPrimary,
         display: 'none',
         [theme.mediaQuery.medium]: {
           display: 'block',

documentation-site/components/layout.js

@@ -142,8 +142,8 @@ class Layout extends React.Component<PropsT, {sidebarOpen: boolean}> {
               toggleDirection={toggleDirection}
             />
             <Block
-              backgroundColor="background"
-              color="foreground"
+              backgroundColor="backgroundPrimary"
+              color="contentPrimary"
               marginTop="scale300"
               display="flex"
               paddingTop="scale400"

documentation-site/components/posts.js

@@ -15,7 +15,7 @@ import {themedStyled} from '../pages/_app';
 import posts from '../posts';
 
 const MetaData = themedStyled('h2', ({$theme}) => ({
-  color: $theme.colors.foregroundAlt,
+  color: $theme.colors.contentSecondary,
   fontFamily: $theme.typography.font100.fontFamily,
   fontSize: $theme.sizing.scale500,
   lineHeight: $theme.sizing.scale600,

documentation-site/components/sidebar.js

@@ -20,7 +20,7 @@ const StyledNavItem = withStyle(NavItem, ({$theme, $active}) => {
 
   if ($theme.name.startsWith('dark')) {
     if ($active) {
-      styleOverride.background = $theme.colors.backgroundAlt;
+      styleOverride.background = $theme.colors.backgroundSecondary;
     }
   }
   return {

documentation-site/components/table-of-contents.js

@@ -92,7 +92,7 @@ const TableOfContents = props => {
           })}
         >
           <a
-            className={css({color: theme.colors.foregroundAlt})}
+            className={css({color: theme.colors.contentSecondary})}
             href={header.anchor}
           >
             {header.name}