CSS Variables
This guide explains how to use and customize CSS variables in your KimiStores application for consistent styling.
CSS Variables Configuration
KimiStores uses CSS variables to maintain consistent styling across the application. These variables are defined in the theme configuration and exposed as CSS custom properties.
/* Examples of CSS variables available in your application */
:root {
/* Color system */
--primary-main: #00A76F;
--primary-light: #C8FAD6;
--primary-dark: #007867;
/* Typography */
--font-family-primary: 'Inter Variable, sans-serif';
/* Spacing */
--spacing-1: 8px;
--spacing-2: 16px;
--spacing-3: 24px;
/* Z-index */
--z-index-drawer: 1200;
--z-index-modal: 1300;
}
Using CSS Variables
In Components
Use CSS variables directly in your component styles for consistent theming:
// In a styled component
import { styled } from '@mui/material/styles';
const StyledButton = styled('button')`
background-color: var(--primary-main);
color: var(--primary-contrastText);
padding: var(--spacing-1) var(--spacing-2);
font-family: var(--font-family-primary);
border-radius: var(--shape-borderRadius);
border: none;
&:hover {
background-color: var(--primary-dark);
}
`;
// Usage
function MyButton() {
return <StyledButton>Click Me</StyledButton>;
}
In CSS Files
Access CSS variables in your regular CSS or CSS modules:
/* styles.css */
.custom-card {
background-color: white;
border: 1px solid var(--grey-300);
border-radius: var(--shape-borderRadius);
padding: var(--spacing-3);
box-shadow: var(--shadow-card);
}
.custom-card:hover {
border-color: var(--primary-main);
box-shadow: var(--shadow-z16);
}
.custom-card__title {
color: var(--text-primary);
font-size: var(--typography-h6-fontSize);
font-weight: var(--typography-fontWeightMedium);
margin-bottom: var(--spacing-2);
}
Customizing CSS Variables
You can customize CSS variables by modifying the theme:
1. Update src/theme/theme-config.ts to modify theme values
2. The updated values will be automatically reflected in the CSS variables
3. All components using these variables will update automatically
// src/theme/theme-config.ts
export const themeConfig = {
palette: {
primary: {
main: '#2065D1', // This changes --primary-main
light: '#5BE49B', // This changes --primary-light
dark: '#007B55', // This changes --primary-dark
// ...other values
},
// ...other colors
},
// ...other theme values
};
Pro Tips
1. Inspecting CSS Variables: Use browser dev tools to inspect available CSS variables. Look at the :root selector in the Styles panel.
2. Dark Mode Support: CSS variables automatically update when switching between light and dark modes.
3. Best Practice: Use theme objects for MUI components and CSS variables for custom components to maintain consistency.