[Styling] Use CFPB Colors in Tailwind Theme

index.html

@@ -13,7 +13,6 @@
       name="description"
       content="Use the CFPB Small Business Lending Data Filing Platform to upload your lending data, review validation results, and submit your filing."
     />
-    <meta name="theme-color" content="#42b883" />
     <!-- Google Tag Manager -->
     <link
       rel="preconnect"

src/components/Button.tsx

@@ -8,10 +8,9 @@ const newSecondaryStyle =
   'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific disabled:cursor-not-allowed disabled:border-none';
 
 /* Handles increasing the dimensions of non-secondary buttons to match the new secondary style */
-// TODO: Fix in the DS and DSR
-// https://github.com/cfpb/design-system-react/issues/365
+// TODO: Fix in the DS and DSR: https://github.com/cfpb/design-system-react/issues/365
 const newPrimaryBorderStyle =
-  'border-solid border-[1px] border-pacific focus:border-pacificDark hover:border-pacificDark disabled:border-[#d2d3d5]';
+  'border-solid border-[1px] border-pacific focus:border-pacificDark hover:border-pacificDark disabled:border-gray20';
 
 export function Button({
   children,

src/components/FieldGroup.tsx

@@ -10,7 +10,7 @@ function FieldGroup({
 }: FieldGroupProperties & JSX.IntrinsicElements['div']): JSX.Element {
   return (
     <div
-      className={`field-group box-border max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem] ${className}`}
+      className={`field-group box-border max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-gray5 p-[1.875rem] ${className}`}
     >
       {children}
     </div>

src/components/FieldGroupDivider.tsx

@@ -1,5 +1,5 @@
 export default function FieldGroupDivider(): JSX.Element {
   return (
-    <div className='my-[1.875rem] w-full border-b-0 border-t border-solid border-[#A2A3A4]' />
+    <div className='my-[1.875rem] w-full border-b-0 border-t border-solid border-gray50' />
   );
 }

src/components/InlineStatus.tsx

@@ -60,7 +60,7 @@ function InlineStatus({
   const getStatusClassName = (): string => {
     const { value } =
       classNamePriorityPipe.find(option => option.condition) ?? {};
-    return value ?? 'text-[#0072CE]';
+    return value ?? 'text-pacific';
   };
 
   const getMessage = (): JSX.Element | null => {

src/components/Loading.tsx

@@ -16,7 +16,7 @@ export function LoadingContent({
   message = 'Loading',
 }: LoadingType): ReactElement {
   return (
-    <Paragraph className='h3 mt-[25%] flex min-h-dvh justify-center text-[#43484e]'>
+    <Paragraph className='h3 mt-[25%] flex min-h-dvh justify-center text-grayDark'>
       <Icon isPresentational name='updating' />
       <span className='ml-[15px]'>{message}</span>
     </Paragraph>

src/index.css

@@ -76,18 +76,18 @@ select.error {
 
 .auth-action .a-btn {
   font-weight: 600;
-  color: #43484e;
   border: none;
   text-decoration: none;
+  @apply text-grayDark;
 
   &:hover {
-    color: #2284d5;
+    @apply text-pacific90;
   }
 }
 
 /* Fixes the issue where too much white space below the footer while zoomed out or when swiping on mobile */
 body {
-  background-color: #f7f8f9;
+  @apply bg-gray5;
 }
 
 /* Uncomment to use ellipsis trick on Review Errors and Warnings tables */
@@ -120,7 +120,7 @@ td:last-child{
 
 /* https://github.com/cfpb/design-system-react/issues/345 */
 td {
-  background-color: white !important;
+  @apply !bg-white;
 }
 
 /* Design System overrides */
@@ -137,3 +137,7 @@ a:visited .link-icon-override-color .cf-icon-svg {
 a:hover .link-icon-override-color .cf-icon-svg {
   @apply !fill-pacificDark;
 }
+
+.m-hero {
+  @apply !bg-white;
+}

src/pages/AuthenticatedLanding/Landing.less

@@ -1,5 +1,6 @@
 .m-hero {
-  border-bottom: 1px solid #afd2f2;
+  border-bottom: 1px solid;
+  @apply border-b-pacific40 !bg-pacific10;
 }
 
 #landing-page {

src/pages/AuthenticatedLanding/index.tsx

@@ -24,7 +24,6 @@ function Landing(): ReactElement | null {
         <Hero
           heading='File your lending data'
           subheading='Upload your loan application data, review validations, certify the accuracy and completeness of the data, and submit data for the filing year.'
-          backgroundColor='#EFF8FD'
         />
         <Layout.Wrapper>
           <Layout.Content id='main-content'>

src/pages/Error/Error500.tsx

@@ -54,7 +54,6 @@ export function Error500({
   return (
     <Hero
       className='error-page'
-      backgroundColor='white'
       image='/server-706x619.png'
       heading='An unknown error occurred'
       subheading={

src/pages/Error/NotFound404.tsx

@@ -7,7 +7,6 @@ export function NotFound404(): ReactElement {
   return (
     <Hero
       className='error-page'
-      backgroundColor='white'
       image='/plug-538x655.png'
       heading="404: We can't find that page"
       subheading={

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -408,7 +408,7 @@ export function FileSubmission(): JSX.Element {
                             condition: dataUpload || dataGetSubmissionLatest,
                             value: 'text-successColor',
                           },
-                          { condition: true, value: 'text-[#0072CE]' }, // Default condition
+                          { condition: true, value: 'text-pacific' }, // Default condition
                         ]}
                         messagePriorityPipe={[
                           {
@@ -513,7 +513,7 @@ export function FileSubmission(): JSX.Element {
                               (hasErrors || hasWarnings),
                             value: 'text-warningColor',
                           },
-                          { condition: true, value: 'text-[#0072CE]' }, // Default condition
+                          { condition: true, value: 'text-pacific' }, // Default condition
                         ]}
                         messagePriorityPipe={[
                           {

src/pages/Filing/FilingHome.less

@@ -1,5 +1,6 @@
 #filing-home {
   .m-hero {
-    border-bottom: 1px solid #afd2f2; // @pacific-40
+    border-bottom: 1px solid;
+    @apply border-b-pacific40 !bg-pacific10;
   }
 }

src/pages/Filing/FilingHome.tsx

@@ -26,7 +26,6 @@ function Home(): ReactElement {
         <Hero
           heading='Get started filing your lending data'
           subheading='Covered financial institutions are required to maintain and report information about lending to the CFPB.'
-          backgroundColor='#EFF8FD'
         />
         <Layout.Wrapper>
           <Layout.Content className='content_main u-mb15'>

tailwind.config.js

@@ -6,21 +6,26 @@ const config = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      // TODO: Consolidate colors to tailwind theme: https://github.com/cfpb/sbl-frontend/issues/1094
       colors: {
         warningColor: '#ff9e1b',
         errorColor: '#D14124',
         successColor: '#20AA3F',
         disabledColor: '#E7E8E9',
         cfpbBorderColor: '#919395',
         black: '#101820',
+        gray5: '#F7F8F9',
         gray20: '#D2D3D5',
+        gray50: '#A2A3A4',
         grayDark: '#43484E',
         grayDarker: '#293037',
+        pacific90: '#2284d5',
+        pacific40: '#AFD2F2',
+        pacific10: '#EFF8FD',
         pacific: '#0072CE', // TODO: Integrate DS color vars
         pacificDark: '#0050b4',
         navy: '#254b87',
         teal: '#257675',
-        navy: '#254B87',
       },
       fontFamily: {
         inter: ['Inter', ...defaultConfig.theme.fontFamily.sans],

vite.config.ts

@@ -74,7 +74,6 @@ export default async ({ mode }) => {
                 'icons/*.svg',
               ],
               manifest: {
-                theme_color: '#BD34FE',
                 icons: [
                   {
                     src: '/android-chrome-192x192.png',