[Styling] Use CFPB Colors in Tailwind Theme (#1112)

Find hardcoded colors and replace them to use tailwind theme colors ## Changes - Updated locations of hardcoded colors to take advantage of tailwind styles instead ## How to test this PR #### Setup for verification - Perform any console commands below from within the `sbl-frontend` directory 1. Run `checkout main && git pull` 2. Restart the stack 3. Run `yarn run test:e2e:snapshot-update` 4. Once finished `ctrl-c` 5. Run `git add --all` 6. Run `git stash` 7. Run `git checkout 1094-tailwind-theme && git pull` 8. Run `git stash pop` 9. Restart the stack #### Verify the changes 1. Run `yarn run test:e2e:snapshot` 2. In the playwright testing window that appears, run all tests 3. Verify that there are no relevant snapshot related failures 4. Click through the site and verify that things look as they should
cfpb · Feb 4, 2025 · 89c5343 · 89c5343
1 parent 020df13
commit 89c5343
Show file tree

Hide file tree

Showing 16 changed files with 26 additions and 22 deletions.
diff --git a/index.html b/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"

diff --git a/src/components/Button.tsx b/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,

diff --git a/src/components/FieldGroup.tsx b/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>

diff --git a/src/components/FieldGroupDivider.tsx b/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' />
   );
 }
diff --git a/src/components/InlineStatus.tsx b/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 => {

diff --git a/src/components/Loading.tsx b/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>

diff --git a/src/index.css b/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;
+}
diff --git a/src/pages/AuthenticatedLanding/Landing.less b/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 {

diff --git a/src/pages/AuthenticatedLanding/index.tsx b/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'>

diff --git a/src/pages/Error/Error500.tsx b/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={

diff --git a/src/pages/Error/NotFound404.tsx b/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={

diff --git a/src/pages/Filing/FilingApp/FileSubmission.tsx b/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={[
                           {

diff --git a/src/pages/Filing/FilingHome.less b/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;
   }
 }
diff --git a/src/pages/Filing/FilingHome.tsx b/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'>

diff --git a/tailwind.config.js b/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],

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