Update includes custom color variables to maintain a consistent color scheme across our application. These changes are reflected in both the global.css and tailwind.config.ts files.
Global CSS (global.css):
Added custom CSS variables for global colors using HSL in the tailwind base layer, including branding, background, foreground, and button styles.
Defined color variations for light and dark modes using media queries.
Defined classes in the tailwind component layer:
.primary-button: Applies branding colors for primary buttons.
.secondary-button: Applies custom background colors for secondary buttons.
.modal-secondary-button: Applies background colors specifically for secondary buttons within modals.
Tailwind Configuration (tailwind.config.ts):
Extended the theme to incorporate custom colors defined in global.css.
Usage:
These changes enhance maintainability and consistency throughout the application's UI, allowing for easy color adjustments and theme modifications.
Update includes custom color variables to maintain a consistent color scheme across our application. These changes are reflected in both the global.css and tailwind.config.ts files.
Global CSS (global.css): Added custom CSS variables for global colors using HSL in the tailwind base layer, including branding, background, foreground, and button styles. Defined color variations for light and dark modes using media queries. Defined classes in the tailwind component layer:
Tailwind Configuration (tailwind.config.ts): Extended the theme to incorporate custom colors defined in global.css.
Usage: These changes enhance maintainability and consistency throughout the application's UI, allowing for easy color adjustments and theme modifications.