# CSS vars
We're replacing default Bootstrap CSS utilities approach with CSS vars (opens new window) approach, it provides a lighter and more flexible theme.
Beyond the default ones, more CSS vars are set on :root
(brands colors, borders, text, spacing...) to be used by Storefront components and widgets, as example:
:root {
--body-bg: #fff;
--body-color: #212529;
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #e83e8c;
--primary-yiq: #fff;
--primary-rgb: 232,62,140;
--secondary: #333;
--secondary-yiq: #fff;
--secondary-rgb: 51,51,51;
--success: #28a745;
--success-yiq: #fff;
--success-rgb: 40,167,69;
--info: #17a2b8;
--info-yiq: #fff;
--info-rgb: 23,162,184;
--warning: #ffc107;
--warning-yiq: #212529;
--warning-rgb: 255,193,7;
--danger: #dc3545;
--danger-yiq: #fff;
--danger-rgb: 220,53,69;
--light: #f8f9fa;
--light-yiq: #212529;
--light-rgb: 248,249,250;
--dark: #343a40;
--dark-yiq: #fff;
--dark-rgb: 52,58,64;
--primary-lightest: #fad4e6;
--primary-lightest-yiq: #212529;
--primary-lightest-rgb: 249.92083,212.37917,229.60417;
--primary-lighter: #f39ec5;
--primary-lighter-yiq: #212529;
--primary-lighter-rgb: 243.40417,157.69583,197.02083;
--primary-light: #ed6ca7;
--primary-light-yiq: #212529;
--primary-light-rgb: 237.43056,107.56944,167.15278;
--secondary-lightest: #878787;
--secondary-lightest-yiq: #fff;
--secondary-lightest-rgb: 135.15,135.15,135.15;
--secondary-lighter: #696969;
--secondary-lighter-yiq: #fff;
--secondary-lighter-rgb: 104.55,104.55,104.55;
--secondary-light: #4d4d4d;
--secondary-light-yiq: #fff;
--secondary-light-rgb: 76.5,76.5,76.5;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--border-width: 1px;
--border-color: #dee2e6;
--border-radius-sm: 0.2rem;
--border-radius: 0.25rem;
--border-radius-lg: 0.3rem;
--rounded-pill: 50rem;
--box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
--box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
--box-shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);
--spacer-1: 0.25rem;
--spacer-2: 0.5rem;
--spacer-3: 1rem;
--spacer-4: 1.5rem;
--spacer-5: 3rem;
--text-muted: #6c757d;
--font-light: 300;
--font-normal: 400;
--font-bold: 700;
--line-height: 1.5;
--line-height-lg: 1.5;
--line-height-sm: 1.2;
--font-size: 1rem;
--font-size-lg: 1.25rem;
--font-size-sm: 0.875rem;
--h1: 2.5rem;
--h2: 2rem;
--h3: 1.75rem;
--h4: 1.5rem;
--h5: 1.25rem;
--h6: 1rem;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
Try to use it whenever possible (specially for colors) to respect the store's identity and make your styles easily customizable and extensible.
# Usage example
.btn-orange {
background-color: var(--orange);
color: var(--white);
}
<button class="btn btn-orange">
Orange button
</button>