Styling Guide
Advanced
General
Theming allows you to personalize the appearance of the nuvo importer. By modifying the theme, you can swiftly align the importer's style with your brand. This can be achieved by defining a few lines of code within the globals class. If you require more detailed customization, you have the flexibility to style each component individually. This includes an extensive range of options, from controlling the hover animation to adjusting the border radius.
Render custom upload button (deprecated)
The renderUploadButton property enables you to customize the appearance of the button used to initiate the import process. By utilizing the launch parameter, you can invoke it within the desired HTML event. Refer to the example below for further clarification:
caution
renderUploadButton has been deprecated for React since v2.11, for vanilla JS and Angular since v2.9 and for Vue.js since v.2.10. For styling the import button use buttons.import.
<NuvoImporter
licenseKey="Your License Key"
renderUploadButton={({ launch }) => (
<button onClick={() => launch()}>Click here</button>
)}
settings={{...}}
/>
Quick start (Simplified styling)
Having a fast implementation of the nuvo importer is crucial for quickly reaping its benefits. However, whitelabeling often poses a challenge and can delay the go-live process. To address this, we offer a convenient styling option that requires just a few lines of code. With this option, you can easily customize our importer to align it with your brand guidelines.
To achieve this, utilize our globals class, which allows you to adjust various elements such as the background color, font family, text color, border radius, primary color, and secondary color. The primary and secondary colors affect the button colors and numerous table elements within the importer. By leveraging this simplified styling option, you can implement your style guide more efficiently, including support for dark mode.
In case the styling options provided by the globals class do not fully meet your requirements, we recommend utilizing the buttons class before delving into advanced styling techniques.
globals
The globals key helps you implement a general and global theming. Its options are generic and easy to use. The available keys are the following:
textColor- This sets the default color for the text of the nuvo importer. This text color does not apply to the text of the table within the "Header Selection" and "Review Entries" steps. To control this instead, you will find other options below.fontFamily- This enables you to use your preferred font within the nuvo importer.backgroundColor- This allows you to control the general background color of the nuvo importer.primaryTextColor- This and the following key enable you to define different text font colors within the nuvo importer more specifically.secondaryTextColor- Like mentioned above, this is a more specific styling than thetextColorkey.primaryColor- This allows you to implement your primary color of your brand style. This key influences the primary buttons as well as many table elements inside the importer.secondaryColor- This allows you to implement your secondary color of your brand style.borderRadius- This key allows you to define the border radius of the modal. Necessary, you will only see an effect ifmodalis set tofalse.maxHeight(deprecated) - This key helps you to define a maximum height of the iframe.
info
The maxHeight attribute is now deprecated and is only supported in vanilla JavaScript, Angular versions 2.8 or lower, and Vue.js versions 2.9 or lower.
To get an idea of how quick whitelabeling can be achieved, refer to the code snippets below:
- React
- Angular
- Vue
- JavaScript
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
primaryColor: "#ffcc02",
secondaryColor: "#d40511",
borderRadius: "10px",
},
},
}}
/>
- Add the nuvo component in the HTML file.
<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" />
- Define the property in the component file.
licenseKey!: string
settings!: SettingsAPI;
ngOnInit(): void {
this.licenseKey = "Your License Key"
this.settings = {
developerMode: true,
identifier: "customer_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
primaryColor: "#ffc116",
secondaryColor: "#162338",
borderRadius: "5px"
}
},
}
}
info
We're phasing out support for Vue 2. If you're still using Vue 2, you can use "nuvo-vuejs" v2.9 or lower.
- Add the nuvo component inside the
<template>tag in the fileApp.vue.
<template>
<div id="app">
<NuvoImporter :settings="settings" :licenseKey="licenseKey" />
</div>
</template>
- Define the property inside the
<script>tag in the component file.
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
primaryColor: "#ffc116",
secondaryColor: "#162338",
borderRadius: "5px",
},
},
};
return { settings };
},
data: () => {
return {
licenseKey: "Your License Key",
};
},
};
info
Our vanilla JS syntax has changed since v2.9. If you use v2.8 or lower, please migrate to the latest version by following our migration guide.
<div class="nuvo-container" />
<script type="module">
import { launchNuvoImporter } from "nuvo-vanilla-js";
launchNuvoImporter(".nuvo-container", {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
primaryColor: "#ffc116",
secondaryColor: "#162338",
borderRadius: "5px",
},
},
},
});
</script>
Advanced styling
The example above demonstrates how the globals class can be utilized to swiftly customize the theme of the nuvo importer according to your branding. If you wish to fine-tune the styling to achieve a better alignment with your brand, you can make use of the other keys available in the style class. Each key within the style class corresponds to a specific area of the importer that can be modified. In the following section, we will provide a comprehensive overview of each key and guide you on their proper usage.
Below is a list of all the available keys:
style: {
globals: {},
root: {},
buttons: {},
progressBar: {},
header: {},
dropzone: {},
footer: {},
sheetSelect: {},
headerSelect: {},
joinSheet: {},
columnMatch: {},
reviewEntries: {},
popover: {},
dialog: {},
messagePopup: {},
popoverInfo: {},
loader: {},
cleaningAssistant: {}
}
root
Root styles apply to the main element of the nuvo importer.
container- Control the styles of the root container of the nuvo importer.
style: {
root: {
container: {
padding: 0;
}
}
}
buttons
If you want to change the styling of the nuvo importer buttons, you can use the buttons key for it.
primary- This allows you to control the primary buttons within the nuvo importer like the "Select file" and "Continue" button.secondary- This will control the secondary buttons within the nuvo importer like the "Manual entry" and "Edit data" button.tertiary– This will control the tertiary buttons within the nuvo importer like the "Back" buttons and the template buttons.import– This will control the "Import data" button. Ifbuttons.importis not set, the styles of the "Import data" button will default to the style defined in thebuttons.primary. If there's no style defined in thebuttons.primaryeither, it will default to theglobals.primaryColor.cleanData- This allows you to control the "Clean data"-button within the nuvo importer. By usingicon.backgroundImage, you can replace the button’s icon, and by settingicon.display to "none", you can remove the button’s icon entirely.exportExcel- This allows you to control the "Export as Excel"-button within the nuvo importer. By usingicon.backgroundImage, you can replace the button’s icon, and by settingicon.display to "none", you can remove the button’s icon entirely.findError– This allows you to control the "Find error"-button within the nuvo importer. By usingicon.backgroundImage, you can add an icon to the button.findReplace– This allows you to control the "Find & replace"-button within the nuvo importer. By usingicon.backgroundImage, you can replace the button’s icon, and by settingicon.display to "none", you can remove the button’s icon entirely.manualEntry(deprecated) - This will control the manualEntry button forallowManualInputis enabled within the nuvo importer.editData(deprecated) - This will control the editData button forbuttonModeiseditorbothwithin the nuvo importer.
In the following, you can see an example of a style object using the buttons key:
style: {
buttons: {
primary: {
backgroundColor: "#ffc116",
borderColor: "#ffc116",
color: "#ffffff",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#D09E13",
borderColor: "#D09E13",
},
":active": {
backgroundColor: "#856612",
borderColor: "#D09E13",
},
},
secondary: {
backgroundColor: "#ffffff",
borderColor: "#ffc116",
color: "#ffc116",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#D09E13",
color: "#D09E13",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#D09E13",
color: "#D09E13",
},
},
tertiary: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046",
},
},
impоrt: {
backgroundColor: "#5c8ef2",
borderColor: "#5c8ef2",
color: "#ffffff",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#3573ef",
borderColor: "#3573ef"
},
":active": {
backgroundColor: "#1152d5",
borderColor: "#1152d5"
},
},
cleanData: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046",
},
icon: {
stroke: "yellow",
color: "yellow"
}
},
exportExcel: {
backgroundColor: "#ffffff",
borderColor: "#ffc116",
color: "#ffc116",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#D09E13",
color: "#D09E13",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#D09E13",
color: "#D09E13",
},
icon: {
stroke: "yellow",
color: "yellow"
}
},
findError: {
backgroundColor: "#5c8ef2",
borderColor: "#5c8ef2",
color: "#ffffff",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#3573ef",
borderColor: "#3573ef",
color: "#ffffff",
},
":active": {
backgroundColor: "#1152d5",
borderColor: "#1152d5",
color: "#ffffff",
},
icon: {
stroke: "yellow",
color: "yellow"
}
},
findReplace: {
backgroundColor: "#ffc116",
borderColor: "#ffc116",
color: "#ffffff",
padding: "4px 8px",
fontSize: "16px",
borderRadius: "6px",
":hover": {
backgroundColor: "#D09E13",
borderColor: "#D09E13",
},
":active": {
backgroundColor: "#856612",
borderColor: "#D09E13",
},
icon: {
stroke: "yellow",
color: "yellow"
}
},
},
}
info
The remaining keys below will all use a root option. This option controls the basic styling of the section. This allows you to control the backgroundColor, border, borderRadius, and the padding, while the more determined options within each key will control fontWeight, fontSize, and color.
progressBar
The progressBar key allows the theming of the progress bar starting at the top left of the nuvo importer that displays the steps of the import process, which have already been completed, are currently on, and which are still coming. In the following, all options for this key are listed:
root- This allows you to control the base stylings of the section.icon- This setting controls the icon of the section.current- This allows you to control the styling of the current step.complete- Controls the theming of the completed steps.incomplete- Controls the styling of the incomplete steps.
style: {
progressBar: {
root: {
backgroundColor: "grey",
borderRadius: "7px",
border: "1px solid white",
padding: "20px"
},
icon: {
fill: "red",
},
current: {
color: "darkblue",
fontSize: "18px",
fontWeight: "600"
},
complete: {
color: "green"
},
incomplete: {
color: "yellow"
}
}
}
header
By using the header key, you can control the theming of the header section. The header section is placed between the progressbar and the dropzone within the "Upload" step, between the progressbar and headerMatch within the "Header Selection" step and between the progressbar and the sheetSelect within the "Sheet Selection" step. Here are the available options listed:
root- This allows you to control the base stylings of the section.title- This setting controls the header title styles in the upper left.description- Controls the header description styles below thetitle.
style: {
header: {
root: {
backgroundColor: "#E1E1E1"
},
title: {
color: "darkblue",
fontSize: "10px"
},
description: {
color: "black",
fontSize: "8px"
}
}
}
dropzone
This setting allows for controlling the drag and drop area, also called dropzone section, that is displayed when the nuvo importer is launched. The button inside of this section is controlled by the buttons key mentioned above. Therefore the button can't be controlled by this setting. Here are the available options for use:
root- This allows you to control the base stylings of the dropdown section.icon- This setting controls the file icons of the dropdown section.content- Controls the stylings of the "Download Template" tile. It contains the same theming options asrootwith additional nested options forcontent:root,title,descriptionandillustration.container- Controls the stylings of the dropzone container.
style: {
dropzone: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black"
},
icon: {
box: {
fill: "black"
}
},
content: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
borderRadius: "20px",
padding: "40px 60px",
},
title: {
color: "darkblue",
},
description: {
color: "green",
},
illustration: {
borderColor: "red",
headerColor: "green",
circleHeaderColor: "blue",
circleRowColor: "brown",
downloadIconColor: "gray",
shadowColor: "#E0EAFD"
}
},
container: {
padding: 0
}
}
}
info
The "Download Template" tile is only displayed when modal and embedUploadArea is set to true, and disableTemplates is not set to true.
footer
The footer key can be used to control the root styling of the nuvo importer's bottom. It only contains the root key:
root- This allows you to control the base stylings of the footer.
style: {
footer: {
root: {
backgroundColor: "#E1E1E1";
}
}
}
sheetSelect
With this key you can access and change the style of the elements of the "Sheet Selection" step of the nuvo importer.
root- Controls the base stylings for the section.pageHeader- Controls the base stylings for the header of the page.header- Controls the theming of the header text.sheetName- Controls the file tab on the left side of the section with nested options forsheetName:root,title,descriptionandborder.grid- Controls the styles of the sheet selection section in grid mode with additional options nested:root,title,description,checkboxandillustration.list- Controls the styles of the sheet selection section in list mode with additional options nested:root,title,descriptionandcheckbox.pagination- Controls the stylings of the pagination in the bottom left with the following options nested:root,pageButton,pageMore,currentPageButton,nextButtonandprevButton.icon- Controls the color of both icons in the top right.sheetLists- Controls the styles of the layout of the file tab which is on the left side of the section with options nested:root.scrollbar- Controls the styles of the scrollbar of the file tab which is on the left side and the styles of the scrollbar of the sheet selection section with options nested:backgroundColorandnavigatorColor.unSelectSheetNameControls the styles of the file tab when it's not selected. This apply whenmultipleFileUploadistrue. The nested options areroot,title,descriptionandborder.addFileButtonControls the styles of add file button which is on the left side. This button is visible whenmultipleFileUploadistrue. The nested options arerootandicon.sheetPreviewControls the styles of sheet preview feature.
style: {
sheetSelect: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
header: {
color: "red",
},
sheetName: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
border: {
backgroundColor: "#143a52"
}
},
grid: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
illustration: {
borderColor: "red",
cellColor: "red",
headerColor: "red",
outlineColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
},
illustration: {
borderColor: "red",
cellColor: "red",
headerColor: "red",
outlineColor: "red"
}
}
},
list: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
}
},
pagination: {
currentPageButton: {
backgroundColor: "red",
color: "white"
}
},
icon: {
stroke: "red"
},
sheetLists: {
root: {
backgroundColor: "brown"
}
},
scrollbar: {
backgroundColor: "blue",
navigatorColor: "red",
},
unSelectSheetName: {
root: {
backgroundColor: "green"
},
title: {
color: "pink"
},
description: {
color: "purple"
},
border: {
backgroundColor: "green"
}
},
addFileButton: {
root: {
backgroundColor: "red",
color: "blue",
},
icon: {
stroke: "green"
}
},
sheetPreview: {
title: {
color: "#eb3b5a"
},
fileName: {
color: "#fa8231"
},
sheetName: {
color: "#20bf6b"
},
listButton: {
color: "#fc5c65"
},
gridButton: {
background: "#fc5c65"
},
table: {
root: {
background: "#a55eea"
},
th: {
color: "#26de81"
},
td: {
color: "#4b7bec"
}
}
}
}
}
headerSelect
headerMatch controls the theming of the "Select Header" step of the nuvo importer. All available keys are listed below:
root- Controls the base stylings for the section.pageHeader- Controls the base stylings for the header of the page.content- Controls the theming of the table content.sheetName- Controls the sheet name badge placed at the top left with additional nested options forsheetName:root,title,descriptionandborderfullscreen– Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.table- Controls the table of the "Select Header" step. The nested options are table elements, for example,td,th,scrollbar,selectRowColor, etc.progressBar- Controls the style of the progress bar whenmultipleFileUploadistrueand at least two sheets are selected by the user. The nested options arerootandprogress.sheetNameSelected- Controls the selected sheet name badge placed at the top left. The nested options areroot,title,descriptionandborder.
style: {
headerSelect: {
root: {
borderRadius: "20px"
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
content: {
fontSize: "12px",
color: "red"
},
sheetName: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
padding: "8px"
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
},
fullScreen: {
root: {
width: 200
},
icon: {
stroke: "red"
}
},
table: {
th: {
backgroundColor: "#E1E1E1",
borderColor: "black",
color: "yellow"
},
td: {
backgroundColor: "#f2f2f2",
borderColor: "black"
},
scrollbar: {
navigatorColor: "#4b357f",
backgroundColor: "#e9e6ef"
},
selectRowColor: "yellow"
},
progressBar: {
root: {
backgroundColor: "red"
},
progress: {
navigatorColor: "blue",
backgroundColor: "green",
}
},
sheetNameSelected: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
}
}
}
joinSheet
With joinSheet the theming of the elements within the "Join Sheets" step can be controlled. Here are the available keys:
root- Controls the styles of the background in each table displaying example data from the sheet.pageHeader- Controls the base stylings for the header of the page.content- Controls the styles of the table content which is displayed as example data from the sheet.table- Controls the styles of table where example data from each sheet is displayed.sheetPreview- Controls the styles of sheet preview feature.joinPopover- Controls the style of the joined sheet popover.sheetSelection- Controls the styles of the sheet selection.appendColumnsDialog- Controls the dialogue styles for append data.joinColumnsDialog- Controls the dialogue styles for joining data.removedSheet- Controls the styles of the removed sheet section.
style: {
joinSheet: {
root: {
backgroundColor: "green",
borderRadius: "20px",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
content: {
backgroundColor: "white"
},
table: {
empty: {
description: {
color: red
},
title: {
color: blue
},
root: {
backgroundColor: green
},
content: {
backgroundColor: "black"
}
},
root: {
backgroundColor: "black"
},
badge: {
backgroundColor: "green",
color: "red"
},
scrollbar: {
backgroundColor: "red",
navigatorColor: "green"
},
td: {
backgroundColor: "red"
},
th: {
backgroundColor: "yellow"
}
},
sheetPreview: {
fileName: {
color: "red"
},
sheetName: {
color: "blue"
},
title: {
color: "green"
},
table: {
root: {
backgroundColor: "red"
},
scrollbarBackgroundColor: "red",
scrollbarNavigatorColor: "green",
td: {
backgroundColor: "red"
},
th: {
backgroundColor: "yellow"
}
}
},
sheetSelection: {
root: {
backgroundColor: "rgba(0, 0, 255, 0.7)"
},
title: {
color: "red"
},
badge: {
backgroundColor: "red",
color: "white"
},
empty: {
backgroundColor: "red"
},
joinedSheets: {
root: {
backgroundColor: "gold"
}
},
scrollbar: {
backgroundColor: "red",
navigatorColor: "green"
},
sheet: {
title: {
color: "red"
},
description: {
color: "blue"
},
root: {
backgroundColor: "greenyellow"
},
addButton: {
backgroundColor: "red",
color: "blue",
":hover": {
backgroundColor: "blue",
color: "white"
}
},
addMenu: {
root: {
backgroundColor: "blue"
},
item: {
backgroundColor: "red",
color: "purple",
":hover": {
backgroundColor: "green"
},
":disabled": {
color: "yellow"
}
}
},
removeButton: {
backgroundColor: "blue",
color: "red"
},
previewButton: {
color: "blue",
backgroundColor: "white"
}
},
unselectedSheets: {
root: {
backgroundColor: "green"
}
}
},
appendColumnsDialog: {
root: {
backgroundColor: "violet"
},
overlay: {
backgroundColor: "blue"
},
closeIcon: {
stroke: "yellow"
},
title: {
color: "red"
},
description: {
color: "blue"
},
label: {
color: "blue"
},
asterisk: {
color: "white"
},
dropdown: {
scrollbar: {
navigatorColor: "purple",
backgroundColor: "yellow"
},
search: {
root: {
borderColor: "blue",
backgroundColor: "black",
color: "blue"
},
icon: {
color: "red"
},
placeholder: {
color: "green"
}
},
root: {
backgroundColor: "greenyellow"
},
selectedOption: {
backgroundColor: "black"
},
button: {
root: {
backgroundColor: "yellow",
color: "green",
borderColor: "red",
},
icon: {
color: "red"
},
placeholder: {
color: "red"
}
},
header: {
backgroundColor: "red",
color: "white"
},
option: {
backgroundColor: "blue",
color: "white",
},
badge: {
backgroundColor: "blueviolet",
color: "white"
},
joinBadge: {
backgroundColor: "orangered",
color: "white"
}
},
appendColumn: {
backgroundColor: "red",
borderColor: "green"
}
},
joinColumnsDialog: {
root: {
backgroundColor: "pink"
},
overlay: {
backgroundColor: "red"
},
scrollbar: {
navigatorColor: "blue",
backgroundColor: "black"
},
closeIcon: {
stroke: "red"
},
title: {
color: "white"
},
description: {
color: "red"
},
dropdown: {
scrollbar: {
navigatorColor: "purple",
backgroundColor: "yellow"
},
search: {
root: {
borderColor: "blue",
backgroundColor: "black",
color: "blue"
},
icon: {
color: "red"
},
placeholder: {
color: "green"
}
},
root: {
backgroundColor: "greenyellow"
},
selectedOption: {
backgroundColor: "black"
},
button: {
root: {
backgroundColor: "yellow",
color: "green",
borderColor: "red",
},
icon: {
color: "red"
},
placeholder: {
color: "red"
}
},
header: {
backgroundColor: "red",
color: "white"
},
option: {
backgroundColor: "blue",
color: "white",
}
},
badge: {
backgroundColor: "blueviolet",
color: "white"
},
joinBadge: {
backgroundColor: "orangered",
color: "white"
}
},
deleteButton: {
backgroundColor: "blue",
color: "yellow"
},
label: {
color: "red"
},
asterisk: {
color: "blue"
},
matchStatus: {
success: {
percent: {
color: "red"
},
icon: {
color: "yellow"
},
root: {
backgroundColor: "blue"
},
description: {
color: "white"
}
},
warning: {
percent: {
color: "green"
},
icon: {
color: "blue"
},
root: {
backgroundColor: "black"
},
description: {
color: "red"
}
}
}
},
removedSheet: {
root: {
backgroundColor: "red"
},
sheetName: {
backgroundColor: "blue"
},
column: {
color: "white"
}
}
}
}
columnMatch
With the columnMatch key, the theming of the elements within the "Match Columns" step can be controlled. Here are the available keys:
root- Controls the base theming of the section.pageHeader- Controls the base stylings for the header of the page.icon- Controls the color of the expand and collapse arrow.matchingTitle- Controls the stylings of the matching title, which is shown in the first row on the right side of each matching tile.matchingPercent- Controls the stylings of the row value percentage, which is shown in the second row on the right side of each matching tile.notMatchingValue- Controls the stylings of the row, which is shown in the third row on the right side of each matching tile. Important: This row is only displayed when not all unique values of an imported column are matched with a dropdown option of a category column.columnMatchHeader- Controls the header stylings for the left section of each matching tile with addition options:root,iconanddropdowncolumnMatchValue- Controls the stylings of the value rows displayed inside the left section of each matching tile. It also contains additional nested options:root,icon,scrollbar, anddropdownrequiredColumns- Controls the stylings of the "Required Columns" section within the footer.dialogCreateCustomColumn- Controls the styling of the modal and content which shows form for create custom column. The nested options areroot,overlay,closeIcon,title,description,columnName,columnTypeanddateFormat.dialogCreateCustomOption- Controls the styling of the modal and content which shows form for create custom option. The nested options areroot,overlay,closeIcon,title,description,optionNameandoptionType.columnPopover- Controls the style of the showing column name popover.joinBadge- Controls the style of the join badge.sheetInfo- Controls the style of the sheet info icon.
style: {
columnMatch: {
root: {
color: "blueviolet",
borderColor: "red"
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
icon: {
color: "black"
},
matchingTitle: {
root: {
backgroundColor: "tomato"
},
icon: {
color: "green"
},
checkIcon: {
color: "chocolate"
},
},
matchingPercent: {
root: {
backgroundColor: "green",
color: "yellow"
},
icon: {
color: "pink"
},
},
notMatchingValue: {
root: {
backgroundColor: "green",
color: "red"
},
icon: {
color: "red"
},
},
columnMatchHeader: {
root: {
backgroundColor: "burlywood",
borderColor: "tomato",
color: "burlywood"
},
icon: {
stroke: "yellow"
},
dropdown: {
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink"
},
search: {
placeholder: "red"
},
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "blue"
},
selectedOption: {
backgroundColor: "green",
":hover": {
backgroundColor: "yellow"
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato"
},
icon: {
color: "black"
},
},
header: {
backgroundColor: "gold",
color: "navy"
},
option: {
color: "yellow",
":hover": {
backgroundColor: "pink",
color: "blue"
},
},
badge: {
root: {
backgroundColor: "blue",
color: "white",
":hover": {
backgroundColor: "yellow",
color: "gold"
},
},
icon: {
color: "purple"
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
}
},
},
columnMatchValue: {
root: {
backgroundColor: "lemonchiffon",
borderColor: "red",
color: "blue"
},
emptyValue: {
color: "gold"
},
icon: {
stroke: "red"
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
dropdown: {
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "red"
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink"
},
selectedOption: {
backgroundColor: "navy"
},
option: {
":hover": {
backgroundColor: "pink",
color: "blue"
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato"
},
icon: {
color: "chocolate"
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
},
multiSelectionBadge: {
root: {
backgroundColor: "green",
color: "blue"
},
icon: {
color: "blue"
},
},
iconCheckedColor: "yellow"
},
},
requiredColumns: {
title: {
color: "red"
},
showMore: {
root: {
backgroundColor: "yellow"
},
badge: {
backgroundColor: "blue",
color: "yellow"
},
text: {
color: "purple",
fontSize: 24
},
icon: {
stroke: "blue"
},
},
notMatchErrorIcon: {
stroke: "green"
},
notMatchError: {
color: "blue"
},
hasMatchIcon: {
stroke: "purple"
},
hasMatch: {
color: "yellow"
},
notMatch: {
color: "purple"
},
notMatchIcon: {
color: "black"
},
},
dialogCreateCustomColumn: {
root: {
backgroundColor: "blue"
},
overlay: {
backgroundColor: "blue"
},
closeIcon: {
stroke: "red"
},
title: {
color: "white"
},
description: {
color: "white"
},
columnName: {
label: {
color: "red"
},
icon: {
color: "green"
},
input: {
backgroundColor: "red",
borderColor: "green"
},
errorMessage: {
color: "white",
fontWeight: "bold"
}
},
columnType: {
label: {
color: "red"
},
icon: {
color: "green"
},
dropdown: {
button: {
root: {
backgroundColor: "red",
color: "green"
},
icon: {
color: "blue"
}
},
scrollbar: {
navigatorColor: "red",
backgroundColor: "blue"
},
option: {
backgroundColor: "red",
color: "yellow"
},
selectedOption: {
backgroundColor: "green",
color: "white"
},
iconCheckedColor: "white"
}
},
dateFormat: {
label: {
color: "red"
},
icon: {
color: "green"
},
dropdown: {
button: {
root: {
backgroundColor: "red",
color: "green"
},
icon: {
color: "blue"
}
},
scrollbar: {
navigatorColor: "red",
backgroundColor: "blue"
},
option: {
backgroundColor: "red",
color: "yellow"
},
selectedOption: {
backgroundColor: "green",
color: "white"
},
iconCheckedColor: "white"
}
}
},
dialogCreateCustomOption: {
root: {
backgroundColor: "blue"
},
overlay: {
backgroundColor: "blue"
},
closeIcon: {
stroke: "red"
},
title: {
color: "white"
},
description: {
color: "white"
},
optionName: {
label: {
color: "red"
},
icon: {
color: "green"
},
input: {
backgroundColor: "red",
borderColor: "green"
},
errorMessage: {
color: "white",
fontWeight: "bold"
}
},
optionType: {
label: {
color: "red"
},
icon: {
color: "green"
},
dropdown: {
button: {
root: {
backgroundColor: "red",
color: "green"
},
icon: {
color: "blue"
}
},
scrollbar: {
navigatorColor: "red",
backgroundColor: "blue"
},
option: {
backgroundColor: "red",
color: "yellow"
},
selectedOption: {
backgroundColor: "green",
color: "white"
},
iconCheckedColor: "white"
}
}
},
columnPopover: {
backgroundColor: "black",
color: "coral"
},
joinBadge: {
color: "green"
},
sheetInfo: {
color: "green"
}
}
}
reviewEntries
To control the elements within the "Review Entries" step of the nuvo importer, the reviewEntries key can be used. In the following, all available options are listed:
root- Controls the general styling of the section.pageHeader- Controls the base stylings for the header of the page.switchError- Controls the color of the "Show all rows with errors" button for the section.selectRowColor- Controls the color of the selected row in the table section.selectedBackground- Controls the color of the selection frame which is displayed when one field is selected.fullscreen- Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.infoIcon- Controls the stylings of the info icon right next to the column name within the header row.edit- Controls the styles for fields in edit mode with separate options for the dropdown fieldsbooleanandcategory. These keys have the nested optionitemwhich uses the keysoption, andselectedOption. Forcategorythere're also keysheaderandsearchfor adjust style of search bar.table- Controls the table of the "Review Entries" step. The nested options are table elements, for example,td,th,scrollbar, etc.tdalso has the additional options for themingnormal,error,infoandwarningfields.duplicateButton- Controls the styling of the "Duplicate" button when a row is selected.removeButton- Controls the styling of the "Delete" button when a row is selected.clearFilterButton- Controls the styling of the "Clear filters" button when a filter is applied to one or more columns.selectedBadge- Controls the styling of the badge indicating how many rows are selected.addRowButton- Controls the styling of the "+" button to add a new row.smartTable- Controls the base styling for the smart table features within the table view if smart table is actived.findAndReplaceButton- Controls the styling of the "Find & Replace" button.findAndReplaceMenu- Controls the base styling of the "Find & Replace" pop-over.toggleViewButton- Controls the styling of the "All rows" "All errors" toggle.rowHeader- Controls the styling of selected and not selected row headers.
style: {
reviewEntries: {
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
switchError: {
label: {
color: "red",
fontSize: 20,
},
badge: {
backgroundColor: "orange",
color: "black",
},
},
selectRowColor: "orange",
selectedBackground: {
normal: "yellow",
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
infoIcon: {
color: "orange",
":hover": {
color: "blue",
},
},
edit: {
category: {
header: {
backgroundColor: "blue"
},
search: {
root: {
backgroundColor: "red"
},
icon: {
color: "green"
},
placeholder: {
color: "blue"
}
},
item: {
option: {
backgroundColor: "red",
":hover": {
color: "blue",
},
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "yellow",
},
closeIcon: {
color: "yellow",
},
},
multiSelectionBadge: {
root: {
backgroundColor: "green",
color: "blue"
},
icon: {
color: "blue"
},
},
iconCheckedColor: "yellow"
},
string: {
backgroundColor: "blue",
},
currency: {
backgroundColor: "pink"
},
percentage: {
backgroundColor: "black"
},
date: {
backgroundColor: "#4F8AAB",
borderColor: "#4BC589"
},
time: {
backgroundColor: "#9AC54B",
borderColor: "#C5B64B"
},
boolean: {
item: {
option: {
backgroundColor: "red",
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "red",
},
closeIcon: {
color: "red",
},
},
},
},
table: {
scrollbar: {
backgroundColor: "red",
navigatorColor: "blue",
},
dragStyle: {
color: "orange",
style: "solid",
},
th: {
borderColor: "blue",
backgroundColor: "yellow",
},
td: {
root: {
borderColor: "grey",
},
warning: {
backgroundColor: "yellow",
color: "black",
},
error: {
backgroundColor: "red",
color: "white",
},
info: {
backgroundColor: "blue",
color: "red",
},
normal: {
backgroundColor: "green",
color: "red",
},
},
},
duplicateButton: {
color: "#f8d7da",
backgroundColor: "#ff9e80"
},
removeButton: {
color: "#f8d7da",
backgroundColor: "#ff9e80"
},
clearFilterButton: {
color: "#f8d7da"
},
selectedBadge: {
color: "#f8d7da"
},
addRowButton: {
color: "black"
},
smartTable: {
th: {
menuIcon: {
color: "red"
},
expandIcon: {
color: "green",
backgroundColor: "red"
},
loadingIcon: {
color: "blue"
}
},
"contextMenu": {
root: {
backgroundColor: "violet"
},
item: {
label: {
color: "white"
},
icon: {
color: "yellow"
},
root: {
backgroundColor: "red",
:hover: {
backgroundColor: "blue"
}
},
popover: {
backgroundColor: "red"
}
},
filter: {
label: {
color: "yellowgreen",
textDecoration: "underline"
},
input: {
root: {
color: "blanchedalmond",
fontSize: 24,
borderColor: "red"
},
icon: {
color: "yellow"
}
},
radioButton: {
root: {
backgroundColor: "green",
color: "orange"
},
radio: {
color: "orange"
}
},
outlineButton: {
color: "honeydew",
fontSize: "20px"
},
dropdown: {
root: {
backgroundColor: "red",
color: "blue"
},
icon: {
color: "white"
},
list: {
root: {
backgroundColor: "yellow"
},
item: {
backgroundColor: "navy"
}
}
},
root: {
backgroundColor: "whitesmoke"
},
valueList: {
root: {
backgroundColor: "green",
color: "white"
},
item: {
color: "white"
},
checkbox: {
backgroundColor: "red",
color: "#00ff00",
:checked: {
backgroundColor: "blue"
}
},
emptyIcon: {
color: "yellow"
}
},
secondButton: {
backgroundColor: "red",
color: "white"
},
primaryButton: {
backgroundColor: "red",
color: "black"
}
}
},
findAndReplaceButton: {
backgroundColor: "pink",
color: "white"
},
findAndReplaceMenu: {
closeIcon: {
color: "blue"
},
root: {
boxShadow: "5px 5px 0px black"
},
title: {
color: "red"
},
label: {
color: "pink"
},
checkboxLabel: {
color: "pink"
},
checkbox: {
backgroundColor: "green",
color: "violet",
:checked: {
backgroundColor: "red"
}
},
infoText: {
fontStyle: "italic"
},
input: {
color: "red"
},
primaryButton: {
backgroundColor: "pink"
},
dropdown: {
root: {
color: "white"
},
icon: {
color: "green"
},
list: {
root: {
boxShadow: "3px 3px 0px black"
},
checkbox: {
backgroundColor: "green",
:checked: {
backgroundColor: "red"
}
},
item: {
color: "red",
backgroundColor: "blue"
},
selectedItem: {
backgroundColor: "pink"
}
}
}
},
freezeBoxShadow: "5px 5px blue, 10px 10px red, 15px 15px green"
},
toggleViewButton: {
root: {
border: "10px solid red"
},
item: {
backgroundColor: "green"
},
selected: {
backgroundColor: "purple"
},
allRows: {
color: "red"
},
errorRows: {
color: "blue"
}
},
rowHeader: {
checkbox: {
backgroundColor: "red",
:checked: {
backgroundColor: "blue"
}
},
allCheckbox: {
backgroundColor: "red",
:checked: {
backgroundColor: "blue"
},
:indeterminate: {
backgroundColor: "violet"
}
}
}
}
}
popover
The popover key allows the styling of the error, warning and info popover indicator, that occur when hovering over a cell containing an error, warning or info.
All three classes (info, warning and error) contain the following key:
root- Controls the basic styling for the popover indicator
style: {
popover: {
info: {
root: {
color: "white",
backgroundColor: "#11b981",
borderColor: "#11b981"
}
},
warning: {
root: {
color: "white",
backgroundColor: "orange",
borderColor: "orange"
}
},
error: {
root: {
color: "white",
backgroundColor: "#9b0707",
borderColor: "#9b0707"
}
}
}
}
dialog
The dialog key allows controlling the style of the pop-up screens, which occurs when modal is set to true:
root- Controls the base stylings for the section.overlay- Controls the stylings of the overlay that surrounds the dialog container.closeIcon- Controls the style of the "X" icon on the top right of the pop-ups.
style: {
dialog: {
root: {
backgroundColor: "yellow",
},
overlay: {
backgroundColor: "white",
},
closeIcon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
}
}
messagePopup
The messagePopup key allows controlling the style of the pop-ups which occur when going backward or for confirmations during the import process. In the following, all available options are listed:
root- Controls the base stylings for the section.overlay- Controls the stylings of the overlay that surrounds the dialog container.title- Controls the style of the pop-up title.description- Controls the style of the pop-up description text.warnIcon- Controls the style of the pop-up warning icon.closeIcon- Controls the style of the "X" icon on the top right of the pop-ups.
style: {
messagePopup: {
root: {
backgroundColor: "green",
},
overlay: {
backgroundColor: "blue",
},
title: {
color: "red",
},
description: {
color: "blue",
},
warnIcon: {
stroke: "red",
},
closeIcon: {
stroke: "blue",
},
}
}
popoverInfo
The popoverInfo allows for the styling of the popover indicator, mainly inside the section containing additional information to lookup.
This option has only a root key assigned with CSS directly to this option.
style: {
popoverInfo: {
backgroundColor: "white",
color: "red",
}
}
loader
When a file is uploaded, a loading indicator will appear. This key controls the stylings of that indicator and its container.
root- Controls the base stylings for the section.content- Controls the styling of content in the loading section.loadAnimationColor- Controls the color of the animation inside the spin icon.
style: {
loader: {
root: {
backgroundColor: "#f2f2f2",
},
content: {
color: "green",
},
loadAnimationColor: "green",
}
}
cleaningAssistant
This field allows to add styling for Cleaning Assistant.
style: {
cleaningAssistant: {
root: {},
toggle: {
root: {},
sparkleA: {},
sparkleB: {},
icon: {},
badge: {}
},
suggestionList: {
root: {},
header: {},
headerCheckbox: {},
headerCheckboxLabel: {}
},
suggestion: {
root: {},
newValue: {},
oldValue: {},
oldValueEmpty: {},
checkbox: {},
details: {},
actions: {},
findButton: {},
dismissButton: {},
applyButton: {}
},
loadingState: {
root: {},
skeleton: {}
},
emptyState: {
root: {},
icon: {},
title: {},
text: {}
},
dropdown: {
root: {},
header: {},
headerBack: {},
headerText: {},
headerTag: {},
headerActions: {},
headerActionRepeat: {},
headerActionRepeatSpinner: {},
headerActionRepeatSpinnerInner: {},
headerActionClose: {},
body: {},
footer: {},
footerSelected: {},
footerActions: {},
footerDismiss: {},
footerApply: {}
},
cleaningGroupList: {
root: {}
},
cleaningGroup: {
root: {},
name: {},
divider: {},
count: {},
icon: {}
}
}
}
Complete styling
Here you can find a complete code snippet with all the main keys mentioned above:
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
root: {
container: {
padding: 0
}
},
buttons: {
primary: {
backgroundColor: "#143a52",
borderColor: "#143a52",
color: "#ffffff",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#24516D",
borderColor: "#ffffff",
},
":active": {
backgroundColor: "##0C3046",
borderColor: "#ffffff",
},
},
secondary: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046",
},
},
},
progressBar: {
root: {
backgroundColor: "grey",
borderRadius: "7px",
border: "1px solid white",
padding: "20px",
},
icon: {
fill: "red",
},
current: {
color: "darkblue",
fontSize: "18px",
fontWeight: "600",
},
complete: {
color: "green",
},
incomplete: {
color: "yellow",
},
},
header: {
root: {
backgroundColor: "#E1E1E1",
},
title: {
color: "darkblue",
fontSize: "10px",
},
description: {
color: "black",
fontSize: "8px",
},
},
dropzone: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black"
},
icon: {
box: {
fill: "black",
},
},
content: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
borderRadius: "20px",
padding: "40px 60px",
},
title: {
color: "darkblue",
},
description: {
color: "green",
},
illustration: {
borderColor: "red",
headerColor: "green",
circleHeaderColor: "blue",
circleRowColor: "brown",
downloadIconColor: "gray",
shadowColor: "#E0EAFD"
}
},
container: {
padding: 0
}
},
footer: {
root: {
backgroundColor: "#E1E1E1",
}
},
sheetSelect: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
header: {
color: "red",
},
sheetName: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange",
},
border: {
backgroundColor: "#143a52",
},
},
grid: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange",
},
checkbox: {
backgroundColor: "red",
},
illustration: {
borderColor: "red",
cellColor: "red",
headerColor: "red",
outlineColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow",
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
},
illustration: {
borderColor: "red",
cellColor: "red",
headerColor: "red",
outlineColor: "red"
}
},
container: {
backgroundColor: "white",
}
},
list: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
},
container: {
backgroundColor: "white",
}
},
pagination: {
currentPageButton: {
backgroundColor: "red",
color: "white",
},
},
icon: {
stroke: "red",
},
sheetLists: {
root: {
backgroundColor: "brown"
}
},
scrollbar: {
backgroundColor: "blue",
navigatorColor: "red",
},
unSelectSheetName: {
root: {
backgroundColor: "green"
},
title: {
color: "pink"
},
description: {
color: "purple"
},
border: {
backgroundColor: "green"
}
},
addFileButton: {
root: {
backgroundColor: "red",
color: "blue",
},
icon: {
stroke: "green"
}
},
sheetPreview: {
title: {
color: "#eb3b5a"
},
fileName: {
color: "#fa8231"
},
sheetName: {
color: "#20bf6b"
},
listButton: {
color: "#fc5c65"
},
gridButton: {
background: "#fc5c65"
},
table: {
root: {
background: "#a55eea"
},
th: {
color: "#26de81"
},
td: {
color: "#4b7bec"
}
}
}
},
headerSelect: {
root: {
borderRadius: "20px",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
content: {
fontSize: "12px",
color: "red",
},
sheetName: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
padding: "8px",
},
title: {
color: "orange",
},
description: {
color: "yellow",
},
border: {
backgroundColor: "#143a52",
},
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
table: {
th: {
backgroundColor: "#E1E1E1",
borderColor: "black",
color: "yellow",
},
td: {
backgroundColor: "#f2f2f2",
borderColor: "black",
},
scrollbar: {
navigatorColor: "#4b357f",
backgroundColor: "#e9e6ef",
},
selectRowColor: "yellow"
},
progressBar: {
root: {
backgroundColor: "red"
},
progress: {
navigatorColor: "blue",
backgroundColor: "green",
}
},
sheetNameSelected: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
}
},
joinSheet: {
root: {
backgroundColor: "green",
borderRadius: "20px",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
content: {
backgroundColor: "white"
},
table: {
empty: {
description: {
color: red
},
title: {
color: blue
},
root: {
backgroundColor: green
},
content: {
backgroundColor: "black"
}
},
root: {
backgroundColor: "black"
},
badge: {
backgroundColor: "green",
color: "red"
},
scrollbar: {
backgroundColor: "red",
navigatorColor: "green"
},
td: {
backgroundColor: "red"
},
th: {
backgroundColor: "yellow"
}
},
sheetPreview: {
fileName: {
color: "red"
},
sheetName: {
color: "blue"
},
title: {
color: "green"
},
table: {
root: {
backgroundColor: "red"
},
scrollbarBackgroundColor: "red",
scrollbarNavigatorColor: "green",
td: {
backgroundColor: "red"
},
th: {
backgroundColor: "yellow"
}
}
},
sheetSelection: {
root: {
backgroundColor: "rgba(0, 0, 255, 0.7)"
},
title: {
color: "red"
},
badge: {
backgroundColor: "red",
color: "white"
},
empty: {
backgroundColor: "red"
},
joinedSheets: {
root: {
backgroundColor: "gold"
}
},
scrollbar: {
backgroundColor: "red",
navigatorColor: "green"
},
sheet: {
title: {
color: "red"
},
description: {
color: "blue"
},
root: {
backgroundColor: "greenyellow"
},
addButton: {
backgroundColor: "red",
color: "blue",
":hover": {
backgroundColor: "blue",
color: "white"
}
},
addMenu: {
root: {
backgroundColor: "blue"
},
item: {
backgroundColor: "red",
color: "purple",
":hover": {
backgroundColor: "green"
},
":disabled": {
color: "yellow"
}
}
},
removeButton: {
backgroundColor: "blue",
color: "red"
},
previewButton: {
color: "blue",
backgroundColor: "white"
}
},
unselectedSheets: {
root: {
backgroundColor: "green"
}
}
},
appendColumnsDialog: {
root: {
backgroundColor: "violet"
},
overlay: {
backgroundColor: "blue"
},
closeIcon: {
stroke: "yellow"
},
title: {
color: "red"
},
description: {
color: "blue"
},
label: {
color: "blue"
},
asterisk: {
color: "white"
},
dropdown: {
scrollbar: {
navigatorColor: "purple",
backgroundColor: "yellow"
},
search: {
root: {
borderColor: "blue",
backgroundColor: "black",
color: "blue"
},
icon: {
color: "red"
},
placeholder: {
color: "green"
}
},
root: {
backgroundColor: "greenyellow"
},
selectedOption: {
backgroundColor: "black"
},
button: {
root: {
backgroundColor: "yellow",
color: "green",
borderColor: "red",
},
icon: {
color: "red"
},
placeholder: {
color: "red"
}
},
header: {
backgroundColor: "red",
color: "white"
},
option: {
backgroundColor: "blue",
color: "white",
},
badge: {
backgroundColor: "blueviolet",
color: "white"
},
joinBadge: {
backgroundColor: "orangered",
color: "white"
}
},
appendColumn: {
backgroundColor: "red",
borderColor: "green"
}
},
joinColumnsDialog: {
root: {
backgroundColor: "pink"
},
overlay: {
backgroundColor: "red"
},
scrollbar: {
navigatorColor: "blue",
backgroundColor: "black"
},
closeIcon: {
stroke: "red"
},
title: {
color: "white"
},
description: {
color: "red"
},
dropdown: {
scrollbar: {
navigatorColor: "purple",
backgroundColor: "yellow"
},
search: {
root: {
borderColor: "blue",
backgroundColor: "black",
color: "blue"
},
icon: {
color: "red"
},
placeholder: {
color: "green"
}
},
root: {
backgroundColor: "greenyellow"
},
selectedOption: {
backgroundColor: "black"
},
button: {
root: {
backgroundColor: "yellow",
color: "green",
borderColor: "red",
},
icon: {
color: "red"
},
placeholder: {
color: "red"
}
},
header: {
backgroundColor: "red",
color: "white"
},
option: {
backgroundColor: "blue",
color: "white",
}
},
badge: {
backgroundColor: "blueviolet",
color: "white"
},
joinBadge: {
backgroundColor: "orangered",
color: "white"
}
},
deleteButton: {
backgroundColor: "blue",
color: "yellow"
},
label: {
color: "red"
},
asterisk: {
color: "blue"
},
matchStatus: {
success: {
percent: {
color: "red"
},
icon: {
color: "yellow"
},
root: {
backgroundColor: "blue"
},
description: {
color: "white"
}
},
warning: {
percent: {
color: "green"
},
icon: {
color: "blue"
},
root: {
backgroundColor: "black"
},
description: {
color: "red"
}
}
}
},
removedSheet: {
root: {
backgroundColor: "red"
},
sheetName: {
backgroundColor: "blue"
},
column: {
color: "white"
}
}
},
columnMatch: {
root: {
color: "blueviolet",
borderColor: "red",
},
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
icon: {
color: "black",
},
matchingTitle: {
root: {
backgroundColor: "tomato",
},
icon: {
color: "green",
},
checkIcon: {
color: "chocolate",
},
},
matchingPercent: {
root: {
backgroundColor: "green",
color: "yellow",
},
icon: {
color: "pink",
},
},
notMatchingValue: {
root: {
backgroundColor: "green",
color: "red",
},
icon: {
color: "red",
},
},
columnMatchHeader: {
root: {
backgroundColor: "burlywood",
borderColor: "tomato",
color: "burlywood",
},
icon: {
stroke: "yellow",
},
dropdown: {
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
search: {
placeholder: "red",
},
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "blue",
},
selectedOption: {
backgroundColor: "green",
":hover": {
backgroundColor: "yellow",
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato",
},
icon: {
color: "black",
},
},
header: {
backgroundColor: "gold",
color: "navy",
},
option: {
color: "yellow",
":hover": {
backgroundColor: "pink",
color: "blue",
},
},
badge: {
root: {
backgroundColor: "blue",
color: "white",
":hover": {
backgroundColor: "yellow",
color: "gold",
},
},
icon: {
color: "purple",
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
}
},
},
columnMatchValue: {
root: {
backgroundColor: "lemonchiffon",
borderColor: "red",
color: "blue",
},
emptyValue: {
color: "gold",
},
icon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
dropdown: {
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
selectedOption: {
backgroundColor: "navy",
},
option: {
":hover": {
backgroundColor: "pink",
color: "blue",
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato",
},
icon: {
color: "chocolate",
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
},
iconCheckedColor: "yellow"
},
},
requiredColumns: {
title: {
color: "red",
},
showMore: {
root: {
backgroundColor: "yellow",
},
badge: {
backgroundColor: "blue",
color: "yellow",
},
text: {
color: "purple",
fontSize: 24,
},
icon: {
stroke: "blue",
},
},
notMatchErrorIcon: {
stroke: "green",
},
notMatchError: {
color: "blue",
},
hasMatchIcon: {
stroke: "purple",
},
hasMatch: {
color: "yellow",
},
notMatch: {
color: "purple",
},
notMatchIcon: {
color: "black",
},
},
columnPopover: {
backgroundColor: "black",
color: "coral"
},
joinBadge: {
color: "green"
},
sheetInfo: {
color: "green"
}
},
reviewEntries: {
pageHeader: {
root: {
backgroundColor: "#fd79a8"
},
title: {
fontSize: "18px"
},
description: {
fontSize: "14px"
}
},
switchError: {
label: {
color: "red",
fontSize: 20,
},
badge: {
backgroundColor: "orange",
color: "black",
},
},
selectRowColor: "orange",
selectedBackground: {
normal: "yellow",
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
infoIcon: {
color: "orange",
":hover": {
color: "blue",
},
},
edit: {
category: {
header: {
backgroundColor: "blue"
},
search: {
root: {
backgroundColor: "red"
},
icon: {
color: "green"
},
placeholder: {
color: "blue"
}
},
item: {
option: {
backgroundColor: "red",
":hover": {
color: "blue",
},
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "yellow",
},
closeIcon: {
color: "yellow",
},
},
iconCheckedColor: "yellow"
},
string: {
backgroundColor: "blue",
},
currency: {
backgroundColor: "pink"
},
percentage: {
backgroundColor: "black"
},
date: {
backgroundColor: "#4F8AAB",
borderColor: "#4BC589"
},
time: {
backgroundColor: "#9AC54B",
borderColor: "#C5B64B"
},
boolean: {
item: {
option: {
backgroundColor: "red",
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "red",
},
closeIcon: {
color: "red",
},
},
},
},
table: {
scrollbar: {
backgroundColor: "red",
navigatorColor: "blue",
},
dragStyle: {
color: "orange",
style: "solid",
},
th: {
borderColor: "blue",
backgroundColor: "yellow",
},
td: {
root: {
borderColor: "grey",
},
warning: {
backgroundColor: "yellow",
color: "black",
},
error: {
backgroundColor: "red",
color: "white",
},
info: {
backgroundColor: "blue",
color: "red",
},
normal: {
backgroundColor: "green",
color: "red",
},
},
duplicateButton: {
color: "#f8d7da",
backgroundColor: "#ff9e80"
},
removeButton: {
color: "#f8d7da",
backgroundColor: "#ff9e80"
},
clearFilterButton: {
color: "#f8d7da"
},
selectedBadge: {
color: "#f8d7da"
},
addRowButton: {
color: "black"
},
smartTable: {
th: {
menuIcon: {
color: "red"
},
expandIcon: {
color: "green",
backgroundColor: "red"
},
loadingIcon: {
color: "blue"
}
},
"contextMenu": {
root: {
backgroundColor: "violet"
},
item: {
label: {
color: "white"
},
icon: {
color: "yellow"
},
root: {
backgroundColor: "red",
:hover: {
backgroundColor: "blue"
}
},
popover: {
backgroundColor: "red"
}
},
filter: {
label: {
color: "yellowgreen",
textDecoration: "underline"
},
input: {
root: {
color: "blanchedalmond",
fontSize: 24,
borderColor: "red"
},
icon: {
color: "yellow"
}
},
radioButton: {
root: {
backgroundColor: "green",
color: "orange"
},
radio: {
color: "orange"
}
},
outlineButton: {
color: "honeydew",
fontSize: "20px"
},
dropdown: {
root: {
backgroundColor: "red",
color: "blue"
},
icon: {
color: "white"
},
list: {
root: {
backgroundColor: "yellow"
},
item: {
backgroundColor: "navy"
}
}
},
root: {
backgroundColor: "whitesmoke"
},
valueList: {
root: {
backgroundColor: "green",
color: "white"
},
item: {
color: "white"
},
checkbox: {
backgroundColor: "red",
color: "#00ff00",
:checked: {
backgroundColor: "blue"
}
},
emptyIcon: {
color: "yellow"
}
},
secondButton: {
backgroundColor: "red",
color: "white"
},
primaryButton: {
backgroundColor: "red",
color: "black"
}
}
},
findAndReplaceButton: {
backgroundColor: "pink",
color: "white"
},
findAndReplaceMenu: {
closeIcon: {
color: "blue"
},
root: {
boxShadow: "5px 5px 0px black"
},
title: {
color: "red"
},
label: {
color: "pink"
},
checkboxLabel: {
color: "pink"
},
checkbox: {
backgroundColor: "green",
color: "violet",
:checked: {
backgroundColor: "red"
}
},
infoText: {
fontStyle: "italic"
},
input: {
color: "red"
},
primaryButton: {
backgroundColor: "pink"
},
dropdown: {
root: {
color: "white"
},
icon: {
color: "green"
},
list: {
root: {
boxShadow: "3px 3px 0px black"
},
checkbox: {
backgroundColor: "green",
:checked: {
backgroundColor: "red"
}
},
item: {
color: "red",
backgroundColor: "blue"
},
selectedItem: {
backgroundColor: "pink"
}
}
}
},
freezeBoxShadow: "5px 5px blue, 10px 10px red, 15px 15px green"
},
toggleViewButton: {
root: {
border: "10px solid red"
},
item: {
backgroundColor: "green"
},
selected: {
backgroundColor: "purple"
},
allRows: {
color: "red"
},
errorRows: {
color: "blue"
}
},
rowHeader: {
checkbox: {
backgroundColor: "red",
:checked: {
backgroundColor: "blue"
}
},
allCheckbox: {
backgroundColor: "red",
:checked: {
backgroundColor: "blue"
},
:indeterminate: {
backgroundColor: "violet"
}
}
}
}
},
popover: {
info: {
root: {
color: "white",
backgroundColor: "#11b981",
borderColor: "#11b981"
}
},
warning: {
root: {
color: "white",
backgroundColor: "orange",
borderColor: "orange"
}
},
error: {
root: {
color: "white",
backgroundColor: "#9b0707",
borderColor: "#9b0707"
}
}
},
dialog: {
root: {
backgroundColor: "yellow",
},
overlay: {
backgroundColor: "white",
},
closeIcon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
},
messagePopup: {
root: {
backgroundColor: "green",
},
overlay: {
backgroundColor: "blue",
},
title: {
color: "red",
},
description: {
color: "blue",
},
warnIcon: {
stroke: "red",
},
closeIcon: {
stroke: "blue",
},
},
popoverInfo: {
backgroundColor: "white",
color: "red",
},
loader: {
root: {
backgroundColor: "#f2f2f2",
},
content: {
color: "green",
},
loadAnimationColor: "green",
},
cleaningAssistant: {
suggestion: {
newValue: {
color: "purple"
}
}
}
}