Custom Styling Guide
When you use Flatfile, you're leveraging Flatfile to be a part of your existing application. Since Flatfile will be an extension of your application, we have created a way for you to align Flatfile's UI with your own. From the color of the text or buttons to the border radius or the wrapper and buttons, we want this to look and feel like your application and align with your company's branding guidelines.
One thing that you might notice is the pre-defined styling keys that are available. While we want this to look and feel like an extension of your own application, having complete control of the CSS is too brittle and causes too many issues with the data mapping. We simply can't account for all of the variances. What we have done, though, is give you an even easier way to style the Flatfile wrapper into your app.
Are you needing more control don't see the option you need? Please let us know, and we might be able to work with you on getting that feature added or move you to an Enterprise plan.
This section shows the various styleOverride keys and what they control. Within each heading for the key is the default value. If the default for any particular styleOverride key is what you want to use, then you can leave that key out all together.
* The available keys, their default values, and what they apply to **/ borderRadius: '4px', // Flatfile wrapper, modals, & buttons** primaryButtonColor: '#4a90e2', // Primary buttons* linkColor: '#c6d1dd', // Links* linkAltColor: '#4a90e2', // :hover, :active, & :focus states of links* primaryTextColor: '#50535b', // Main text color, background-color of certain buttons* secondaryTextColor: '#9daab6', // 'Dimmed' text* errorColor: '#d0011b', // Invalid and error indicator borders, icons, and text* successColor: '#60b700', // Success text, buttons, icons, toggles, required indicators* warningColor: '#f6a623', // Warning text and icons* borderColor: '#e8e8e8', // Flatfile wrapper, modals, and some buttons* fontFamily: '"aktiv-grotesk", sans-serif' // Main font***
* Colors can take hex, rgb or rgba values
** Can use px, em, rem, % or pt
*** Use web-safe fonts with at least one fallback (More fonts coming soon)
The borderRadius key controls the border radius of the Flatfile wrapper and also the border radius of most buttons. See the below arrows for some more specifics visuals.
The primaryButtonColor key controls only the color of the Primary Buttons on the page. Examples of exactly which buttons are considered primary are pictured.
The primaryTextColor key controls the primary text for the page including some headings, table elements and some button text colors. Highlighted below is the exact text that is controlled by this key.
The secondaryTextColor key controls the color of the secondary text on file selection page. Highlighted below is the text that is controlled by this key.
The errorColor key controls the text color, background color and icon color of the required fields icon and the data review sections of the importer. Below is a visual for these specifics elements.
The successColor key controls the color of the required fields icons, the check mark icons, the color of certain text that is associated with those icons and some of the buttons associated with successful data mapping. Highlighted below are all the elements that are controlled by this key.
The warningColor key controls the color of a couple of different icons associated with warnings with the data importing. See below for the examples of these icons.
The borderColor key controls the border color of the Flatfile wrapper and the color of a few secondary buttons. See below for some examples.
linkColor: "#c6d1dd" & linkAltColor:"#4a90e2"
The linkColor and linkAltColor control all of the links that might be built into your data mapping. These linkColor key controls the color of the links. The linkAltColor controls the color of the :hover, :active and :focus states of your links.
Want to play around with the styleOverrides? We've got a CodeSandbox just for that.