Customization
The framework make you able to customize almost everything. But keep in mind that most of the work will be to create you own components per website !
CSS custom properties
There is a bunch of default CSS custom properties, and (almost) each component have their own properties if needed.
Root
In the :root set the default CSS properties that are global to all your website.
You also can split in multiple files, e.g.: root.scss and color.scss..
You can use the default file @natachah/vanilla-frontend/scss/themes/_root.scss, or copy this code in your own file:
scss
////
/// ------------------------------------------------------------------
/// Root
/// ------------------------------------------------------------------
/// Regroup all the default CSS custom properties
///
/// @group themes
/// @author Natacha Herth
///
////
:root {
// Typography
--font-size: 16px;
--line-height: 1.5;
--font-family: Arial;
--font-weight: normal;
--font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-size-h1: 2.25em; // 36px
--font-size-h2: 2.00em; // 32px
--font-size-h3: 1.75em; // 28px
--font-size-h4: 1.50em; // 24px
--font-size-h5: 1.25em; // 20px
--font-size-h6: 1.125em; // 18px
--font-size-large: 1.25em;
--font-size-medium: 1.125em;
--font-size-small: .875em;
--word-spacing: normal;
--letter-spacing: normal;
// Anchor
--decoration: none;
// Layouts
--padding-inline: .75em;
--padding-block: .5em;
// Border
--border-size: 1px;
--border-style: solid;
--border-radius: .25rem;
// Outline (:focus)
--outline-size: 3px;
--outline-style: solid;
--outline-offset: 0;
// --outline-color: var(--color-primary);
// Backdrop
--backdrop-color: rgba(0, 0, 0, .5);
// Hover (color-mix)
--hover-color: black;
--hover-percent: 5%;
// Active (color-mix)
--active-color: black;
--active-percent: 10%;
// Focus (color-mix)
--focus-color: currentColor;
--focus-percent: 50%;
// Disabled
--disabled-opacity: 50%;
// Colors
--color-body: white;
--color-font: black;
--color-primary: #B790E5;
--color-error: #DC3030;
--color-success: #008A00;
--color-warning: #FFA500;
// Contrasts
--color-warning-contrast: black;
// Form
--form-border-color: currentColor;
--form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
// Icons
--icon-external: url('data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" /><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" /></svg>');
--icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
--icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
--icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>');
--icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
--icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>');
--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
--icon-switch: var(--icon-radio);
// Layout
--layout-width: 1280px;
--layout-gap-block: 1rem;
--layout-gap-inline: 1rem;
--layout-columns: 1;
@media (min-width: 720px) {
--layout-columns: 6;
--layout-gap-block: 1rem;
--layout-gap-inline: 1rem;
}
@media (min-width: 1024px) {
--layout-columns: 12;
--layout-gap-block: 2rem;
--layout-gap-inline: 2rem;
}
@media (min-width: 1440px) {
--layout-columns: 12;
--layout-gap-block: 4rem;
--layout-gap-inline: 2rem;
}
}Themes
You can define some CSS properties per theme with the attribute [data-theme=MYTHEME]:
scss
// This is the light theme (or if there is none)
html[data-theme=light],
html:not([data-theme]) {
--color-body: white;
--color-font: black;
}
// This is for the dark theme
html[data-theme=dark] {
--color-body: black;
--color-font: white;
}
// This is for the dark theme
html[data-theme=my-custom-theme] {
--color-body: white;
--color-font: orange;
}TIP
In best practive it will be better to have a file per theme.
SCSS options
You can set custom settings with @use "@natachah/vanilla-frontend/scss/components/..." with ( ... );. These custom values will override the default variables.
There is also a $default-item-properties to define the default properties to use for items (see mixins)
There is 4 components that use this syntax, and that you can pass the $colors and if there is the $outline style enable:
scss
@use "./components/badge" with ($colors: ('primary'), $outline: true);
@use "./components/button" with ($colors: ('primary'), $outline: true);
@use "./components/card" with ($colors: ('primary'), $outline: true);
@use "./components/popover" with ($colors: ('primary'));