- Sugar has updated many of the colors used throughout the UI. These colors are based on the Tailwind color palette
- A new set of color variables is available for you to use in your customizations if you desire, to make it easier for your customizations to match the overall Sugar look and feel.
- These variables automatically adjust themselves when switching between light/dark mode, and are available to use in both LESS files as well as HBS files via Tailwind classes:
- --background-base: Backgrounds of dashboards, sidebars, drawers, etc.
- --foreground-base: Backgrounds of primary content such as list views, record views, dashlets, etc.
- --text-base: Main text color used throughout the application
- --text-action: Text color for non-button elements that result in an action
- --border-base: Main border color used throughout the application
- --sicon: Default text color used for SugarIcons
- --button-primary-text: Primary button text color
- --button-primary-background: Primary button background color
- --button-secondary-text: Secondary button text color
- --button-secondary-background: Secondary button background color
- These variables automatically adjust themselves when switching between light/dark mode, and are available to use in both LESS files as well as HBS files via Tailwind classes:
- “How does this affect my customizations?”
- This change should not break any customizations directly, but it may cause some customizations to look out of place against the updated colors in the UI.
- You may want to review and update the colors used in your customizations as needed