Setup & configuration
Themalize is built with Sass and designed to be easy to customize when recompiling the source files, but if editing CSS is preferred compiled style sheets are also available.
Customize with Sass (anchor)
Requirements: Dart Sass
Themalize is setup to provide a flexible environment for compiling the source files with a limited knowledge of Sass by enabling customizing to be done primarily via the _configuration.scss and _properties.scss documents.
The themalize.scss document compiles the style sheet as follows:
@use "configuration";
@use "properties";
@use "styles/maps";
@use "styles/variables";
@use "styles/styles";
@use "styles/extensions";The configuration.scss document controls what optional extensions are included with Themalize and allows selectively compiling 70+ different elements individually using simple true and false statements.
configuration.scss
The typography and color-schemes are compiled by default as the foundation for Themalize, everything else is optional. The settings below with the forms, buttons and tables enabled are the default settings provided with Themalize as compiled with themalize-lite.css as described further below.
// ------------------------------------------------------------
// Configuration
// ------------------------------------------------------------
// Styles
$enable-forms-buttons: true;
$enable-tables: true;
$enable-vis-hidden: false; // Accessibility utility
$enable-smooth-scroll: false; // If user prefers-reduced-motion: no-preference
$enable-view-transition: false; // As above
// Theme switch
$enable-theme-switch: false; // Requires theme-switch.js
$enable-switch-button: false;
// Colors
$enable-theme-colors: false;
$enable-primary-colors: false;
// Components
$enable-accordions: false;
$enable-alerts: false;
$enable-cards: false;
$enable-dialogs: false; // Requires dialogs.js
$enable-dialog-animate: false;
$enable-list-groups: false;
$enable-popovers: false;
// Utility modifiers
$enable-backgrounds: false;
$enable-badges: false;
$enable-borders: false;
$enable-buttons: false; // Requires $enable-forms-buttons: true
$enable-gradients: false;
$enable-images: false;
$enable-lists: false;
$enable-shadows: false;
$enable-text: false;
// Layout utilities
// Breakpoints
$enable-breakpoint-xl: false; // 1601px
$enable-breakpoint-lg: false; // 1281px
$enable-breakpoint-md: false; // 1025px
$enable-breakpoint-sm: false; // 769px
$enable-breakpoint-xs: false; // 481px
// Grids and containers
$enable-grid-auto: false;
$enable-grid-columns: false;
$enable-containers: false;
// Spacing
$enable-gaps: false;
$enable-margins: false;
$enable-padding: false;
// Spacing breakpoints
$enable-margins-bp: false;
$enable-padding-bp: false;
// Display
$enable-block: false;
$enable-flex: false;
$enable-alignment: false;
$enable-sizing: false;
$enable-order: false;
$enable-position: false;
$enable-overflow: false;
// Display breakpoints
$enable-block-bp: false;
$enable-flex-bp: false;
$enable-alignment-bp: false;
$enable-sizing-bp: false;
$enable-order-bp: false;
$enable-position-bp: false;
$enable-overflow-bp: false;
// Icon utilities
$enable-icon-mixins: false;
$enable-icon-styles: false;
// Icons SVG
$enable-logo-svg: false;
$enable-house-svg: false;
$enable-email-svg: false;
$enable-plus-svg: false;
$enable-minus-svg: false;
$enable-bars-svg: false;
$enable-caret-down-svg: false;
$enable-caret-up-svg: false;
$enable-caret-right-svg: false;
$enable-caret-left-svg: false;
$enable-close-svg: false;
$enable-close-box-svg: false;
$enable-close-box-fill-svg: false;
$enable-box-svg: false;
$enable-pen-box-svg: false;
$enable-tick-box-svg: false;
$enable-ext-link-svg: false;
$enable-pg-link-svg: false;
$enable-search-svg: false;
$enable-download-svg: false;
$enable-user-svg: false;
$enable-question-svg: false;
$enable-sun-svg: false;
$enable-moon-svg: false;
$enable-radio-on-svg: false;
$enable-radio-off-svg: false;The default property values for the colors and styles plus optional components, utilities and layout extensions are included as Sass variables in the properties.scss document that can be customized as required.
properties.scss
// ----------------------------------------------------------
// Properties
// ----------------------------------------------------------
// Theme base
$theme: slategray !default;
// Text, links and brand
$text-light: #000 !default;
$text-dark: #fff !default;
$link-light: #1c3db5 !default;
$link-dark: #9fbfdf !default;
$brand-light: #558e90 !default;
$brand-dark: #6fa8aa !default;
// Light surfaces
$body-bg-light: color-mix(in srgb, var(--theme) 6%, white) !default;
$surf-1-light: color-mix(in srgb, var(--theme) 21%, white) !default;
$surf-2-light: color-mix(in srgb, var(--theme) 29%, white) !default;
$surf-3-light: color-mix(in srgb, var(--theme) 43%, white) !default;
$surf-4-light: color-mix(in srgb, var(--theme) 60%, white) !default;
// Dark surfaces
$body-bg-dark: color-mix(in srgb, var(--theme) 27%, black) !default;
$surf-1-dark: color-mix(in srgb, var(--theme) 33%, black) !default;
$surf-2-dark: color-mix(in srgb, var(--theme) 40%, black) !default;
$surf-3-dark: color-mix(in srgb, var(--theme) 50%, black) !default;
$surf-4-dark: color-mix(in srgb, var(--theme) 65%, black) !default;
// Color-schemes
$text: light-dark(#{$text-light}, #{$text-dark}) !default;
$link: light-dark(#{$link-light}, #{$link-dark}) !default;
$link-hover: color-mix(in srgb, var(--link) 75%, white) !default;
$link-visited: color-mix(in srgb, var(--link) 65%, white) !default;
$body-bg: light-dark(var(--body-bg-light), var(--body-bg-dark)) !default;
$surf-1: light-dark(var(--surf-1-light), var(--surf-1-dark)) !default;
$surf-2: light-dark(var(--surf-2-light), var(--surf-2-dark)) !default;
$surf-3: light-dark(var(--surf-3-light), var(--surf-3-dark)) !default;
$surf-4: light-dark(var(--surf-4-light), var(--surf-4-dark)) !default;
$brand: light-dark(#{$brand-light}, #{$brand-dark}) !default;
// Primary colors
$blue: #264d73 !default;
$blue-light: color-mix(in srgb, var(--blue) 93%, white) !default;
$blue-lighter: color-mix(in srgb, var(--blue) 85%, white) !default;
$blue-dark: color-mix(in srgb, var(--blue) 90%, black) !default;
$blue-darker: color-mix(in srgb, var(--blue) 80%, black) !default;
$red: #9a1d1d !default;
$red-light: color-mix(in srgb, var(--red) 93%, white) !default;
$red-lighter: color-mix(in srgb, var(--red) 85%, white) !default;
$red-dark: color-mix(in srgb, var(--red) 90%, black) !default;
$red-darker: color-mix(in srgb, var(--red) 80%, black) !default;
$green: #2b6020 !default;
$green-light: color-mix(in srgb, var(--green) 93%, white) !default;
$green-lighter: color-mix(in srgb, var(--green) 85%, white) !default;
$green-dark: color-mix(in srgb, var(--green) 90%, black) !default;
$green-darker: color-mix(in srgb, var(--green) 80%, black) !default;
$orange: #ffc14d !default;
$orange-light: color-mix(in srgb, var(--orange) 85%, white) !default;
$orange-lighter: color-mix(in srgb, var(--orange) 75%, white) !default;
$orange-dark: color-mix(in srgb, var(--orange) 90%, black) !default;
$orange-darker: color-mix(in srgb, var(--orange) 80%, black) !default;
$cyan: #00e6e6 !default;
$cyan-light: color-mix(in srgb, var(--cyan) 75%, white) !default;
$cyan-lighter: color-mix(in srgb, var(--cyan) 60%, white) !default;
$cyan-dark: color-mix(in srgb, var(--cyan) 90%, black) !default;
$cyan-darker: color-mix(in srgb, var(--cyan) 80%, black) !default;
// Typography
$font-family: system-ui, -apple-system, Arial, Helvetica, sans-serif !default;
$font-size: clamp(100%, 40% + 0.666vw, 140%) !default;
$body: 1rem !default;
$fs-xl: 1.25rem !default;
$fs-lg: 1.1rem !default;
$fs-sm: 0.906rem !default;
$fs-xs: 0.813rem !default;
$fs-xxs: 0.75rem !default;
$h1: 2rem !default;
$h2: 1.725rem !default;
$h3: 1.5rem !default;
$h4: 1.35rem !default;
$h5: 1.2rem !default;
$h6: 1.063rem !default;
$lh-body: 1.5 !default;
$lh-header: 1.2 !default;
// Buttons and forms
$lh-btn-forms: 1.4 !default;
$btn-py: 0.313rem !default;
$btn-px: 0.75rem !default;
$btn-bg: var(--surf-1) !default;
$btn-hover: var(--surf-2) !default;
$btn-bd-width: 1px !default;
$btn-bd-color: var(--surf-2) !default;
$btn-radius: 0.188rem !default;
$form-py: 0.313rem !default;
$form-px: 0.75rem !default;
$form-bg: var(--body-bg) !default;
$form-bd-width: 1px !default;
$form-bd-color: var(--surf-3) !default;
$form-radius: 0.188rem !default;
$input-focus: 0 0 0 0.12rem !default;
$input-focus-color: var(--surf-4) !default;
// Tables
$table-thead-txt: var(--text) !default;
$table-thead-bg: var(--surf-1) !default;
$table-hover: color-mix(in srgb, var(--table-thead-bg) 55%, var(--body-bg)) !default;
$table-stripes: color-mix(in srgb, var(--table-thead-bg) 35%, var(--body-bg)) !default;
$table-bd-color: var(--surf-2) !default;
$table-bd-width: 0.0125rem !default;
$table-py: 0.313rem !default;
$table-px: 0.75rem !default;
$table-mb: 1rem !default;
// Accordions
$summary-txt: var(--text) !default;
$summary-bg: var(--surf-1) !default;
$summary-ico: var(--summary-txt) !default;
$details-py: 0.5rem !default;
$details-px: 0.75rem !default;
$details-bd-color: var(--surf-3) !default;
$details-bd-width: 1px !default;
$details-radius: 0.188rem !default;
// Alerts
$alert-txt: var(--text) !default;
$alert-bg: var(--surf-1) !default;
$alert-bd-color: var(--surf-3) !default;
$alert-radius: 0.188rem !default;
// Cards
$card-px: 1rem !default;
$card-pt: 0.75rem !default;
$card-pb: 1rem !default;
$card-bd-color: var(--surf-2);
$card-bd-width: 1px !default;
$card-radius: 0.188rem !default;
$card-bg: var(--body-bg) !default;
$card-hover: color-mix(in srgb, var(--surf-1) 50%, var(--body-bg)) !default;
$card-focus: 0.188rem solid var(--surf-3) !default;
$card-title-txt: var(--text) !default;
$card-title-bg: var(--surf-2) !default;
$card-title-py: 0.5rem !default;
$card-title-h-py: 0.75rem !default;
// Dialogs
$dialog-txt: var(--text) !default;
$dialog-bg: var(--body-bg) !default;
$dialog-header-txt: var(--text) !default;
$dialog-header-bg: var(--surf-2) !default;
$dialog-body-bg: var(--body-bg) !default;
$dialog-body-py: 0.75rem !default;
$dialog-body-px: 1rem !default;
$dialog-bd-color: var(--surf-3) !default;
$dialog-bd-width: 1px !default;
$dialog-radius: 0.188rem !default;
$dialog-top: 1rem !default;
$dialog-width: calc((100% - 6px) - 2em) !default;
$dialog-max-width: 30rem !default;
$dialog-transition: 0.25s !default;
$dialog-offcanvas: -30rem !default;
// List groups
$list-group-txt: var(--text) !default;
$list-group-links: var(--link) !default;
$list-group-py: 0.5rem !default;
$list-group-px: 0.75rem !default;
$list-group-bg: var(--body-bg) !default;
$list-group-title-bg: var(--surf-2) !default;
$list-group-hover: var(--surf-1) !default;
$list-group-bd-color: var(--surf-3) !default;
$list-group-radius: 0.188rem !default;
$list-group-hover-radius: calc(var(--list-group-radius) - 1px) !default;
// Popovers
$pop-txt: var(--text) !default;
$pop-bg: var(--body-bg) !default;
$pop-bd-color: var(--surf-3) !default;
$pop-bd-width: 1px !default;
$pop-radius: 0.188rem !default;
$pop-my: 1rem !default;
$pop-mx: auto !default;
$pop-py: 0.75rem !default;
$pop-px: 1rem !default;
$pop-width: calc((100% - 6px) - 2em) !default;
$pop-max-width: fit-content !default;
// Badges
$badge-txt: var(--text) !default;
$badge-fs: 0.65em !default;
$badge-fw: 600 !default;
$badge-py: 0.375em !default;
$badge-px: 0.65em !default;
$badge-radius: 0.188rem !default;
$badge-bg: var(--surf-2);
// Border radius
$rd-1: 0.188rem !default;
$rd-2: 0.313rem !default;
$rd-3: 0.5rem !default;
$rd-4: 0.75rem !default;
$rd-5: 1.125rem !default;
$rd-pill: 50rem !default;
// Shadows
$shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !default;
$shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.125) !default;
$shadow-lg: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !default;
// Gradients
$gradient-light: linear-gradient(180deg, var(--surf-1-light), var(--surf-2-light), var(--surf-3-light)) !default;
$gradient-dark: linear-gradient(0deg, var(--surf-1-dark), var(--surf-2-dark), var(--surf-3-dark)) !default;
$gradient-blue: linear-gradient(0deg, var(--blue), var(--blue-light), var(--blue-lighter)) !default;
$gradient-red: linear-gradient(0deg, var(--red), var(--red-light), var(--red-lighter)) !default;
$gradient-green: linear-gradient(0deg, var(--green), var(--green-light), var(--green-lighter)) !default;
$gradient-orange: linear-gradient(0deg, var(--orange-darker), var(--orange-dark), var(--orange)) !default;
$gradient-cyan: linear-gradient(0deg, var(--cyan-darker), var(--cyan-dark), var(--cyan)) !default;
// Spacing
$auto: auto;
$s0: 0;
$s1: .25rem !default;
$s2: .5rem !default;
$s3: 1rem !default;
$s4: 1.5rem !default;
$s5: 2rem !default;
// Breakpoints
$breakpoint-xl: 1601px !default;
$breakpoint-lg: 1281px !default;
$breakpoint-md: 1025px !default;
$breakpoint-sm: 769px !default;
$breakpoint-xs: 481px !default;
// Grid auto columns
$g-1: minmax(0, 1fr);
$g-2: repeat(2, minmax(0, 1fr));
$g-3: repeat(3, minmax(0, 1fr));
$g-4: repeat(4, minmax(0, 1fr));
$g-5: repeat(5, minmax(0, 1fr));
$g-6: repeat(6, minmax(0, 1fr));
$g-7: repeat(7, minmax(0, 1fr));
$g-8: repeat(8, minmax(0, 1fr));
$g-9: repeat(9, minmax(0, 1fr));
$g-10: repeat(10, minmax(0, 1fr));
$g-11: repeat(11, minmax(0, 1fr));
$g-12: repeat(12, minmax(0, 1fr));
// Layout grid spans
$span-0: initial;
$span-1: auto / span 1;
$span-2: auto / span 2;
$span-3: auto / span 3;
$span-4: auto / span 4;
$span-5: auto / span 5;
$span-6: auto / span 6;
$span-7: auto / span 7;
$span-8: auto / span 8;
$span-9: auto / span 9;
$span-10: auto / span 10;
$span-11: auto / span 11;
$span-12: auto / span 12;
// Grid start position
$start-0: 0;
$start-1: 1;
$start-2: 2;
$start-3: 3;
$start-4: 4;
$start-5: 5;
$start-6: 6;
$start-7: 7;
$start-8: 8;
$start-9: 9;
$start-10: 10;
$start-11: 11;
$start-12: 12;
// Alignment
$flex-start: flex-start;
$flex-end: flex-end;
$start: start;
$end: end;
$center: center;
$space-around: space-around;
$space-between: space-between;
$space-evenly: space-evenly;
// Resets
$initial: initial;
$unset: unset;
$revert: revert;
// Position
$relative: relative;
$absolute: absolute;
$fixed: fixed;
$sticky: sticky;
// Inset
$top: inset-block-start;
$bottom: inset-block-end;
$left: inset-inline-start;
$right: inset-inline-end;
// Z-index
$z-n: -1;
$z-0: 0;
$z-1: 1;
$z-2: 2;
$z-3: 3;
$z-4: 4;
// Overflow
$overflow-auto: auto;
$overflow-scroll: scroll;
$scroll-stable: stable;
// SVG icon paths
$logo: url("data:image/svg+xml,<svg viewBox='0 0 192 192' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m36 0c-36 0-36 36-36 36v120c0 36 36 36 36 36h120c36 0 36-36 36-36v-120c0-36-36-36-36-36zm12 42h96v24h-36v84h-24v-84h-36z'/></svg>") !default;
// Theme switch button
$sun: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.47 0v2.26h1.15v-2.26zm-4.9 2.19-0.812 0.8 1.62 1.6 0.812-0.8zm10.8 0-1.62 1.6 0.812 0.8 1.62-1.6zm-5.29 1.25s-4.59 0-4.59 4.52c0 4.52 4.59 4.52 4.59 4.52s4.59 0 4.59-4.52c0-4.52-4.59-4.52-4.59-4.52zm5.67 3.92v1.13h2.3v-1.13zm-13.7 0.0243v1.13h2.3v-1.13zm3.01 4-1.62 1.6 0.812 0.8 1.62-1.6zm9.99 0-0.812 0.8 1.62 1.6 0.812-0.8zm-5.54 2.36v2.26h1.15v-2.26z'/></svg>") !default;
$moon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m5.27 1c-0.533 0.0926-0.946 0.529-1.39 0.815-1.17 0.88-1.95 2.19-2.46 3.54-0.777 2.03-0.429 4.41 0.861 6.16 1.41 1.98 3.67 3.56 6.18 3.49 1.98-0.0388 3.86-0.991 5.28-2.33 0.48-0.565 0.971-1.16 1.27-1.84 0.089-0.435-0.481-0.742-0.809-0.456-1.61 0.937-3.67 1.22-5.37 0.365-1.52-0.764-2.79-2.04-3.55-3.55-0.871-1.73-0.56-3.83 0.411-5.45 0.187-0.304-0.0437-0.726-0.4-0.734z'/></svg>") !default;
// Generic
$house: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>") !default;
$email: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 2 7 8 7-8h-14zm14 0.959-4.47 5.33 4.47 5.67v-11zm-14 0.041v11l4.47-5.67-4.47-5.33zm5 6-5 6h14l-5-6-2 2-2-2z'/></svg>") !default;
$plus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7 2v5h-5v2h5v5h2v-5h5v-2h-5v-5h-2z'/></svg>") !default;
$minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 9v-2h12v2z'/></svg>") !default;
$bars: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 2v2h12v-2h-12zm0 5v2h12v-2h-12zm0 5v2h12v-2h-12z'/></svg>") !default;
$caret-down: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 10-4-4h8z'/></svg>") !default;
$caret-up: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 6 4 4-8 7e-7z'/></svg>") !default;
$caret-left: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m6 8 4-4v8z'/></svg>") !default;
$caret-right: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 8-4 4-9e-7 -8z'/></svg>");
$ext-link: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 0.5a0.5 0.5 0 0 0 0 1h3.79l-8.15 8.15a0.501 0.501 0 1 0 0.709 0.707l8.14-8.15v3.79a0.5 0.5 0 0 0 1 0v-5a0.5 0.5 0 0 0-0.5-0.5zm-7.5 1.5a1.5 1.5 0 0 0-1.5 1.5v10a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-6.64a0.5 0.5 0 0 0-1 0v6.64a0.5 0.5 0 0 1-0.5 0.5h-10a0.5 0.5 0 0 1-0.5-0.5v-10a0.5 0.5 0 0 1 0.5-0.5h6.64a0.5 0.5 0 0 0 0.5-0.5 0.5 0.5 0 0 0-0.5-0.5z'/></svg>") !default;
$pg-link: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2.5 2c-1.5 0-1.5 1.5-1.5 1.5v9c0 1.5 1.5 1.5 1.5 1.5h7.25c1.5 0 1.5-1.5 1.5-1.5v-1.99s0-0.5-0.5-0.5-0.5 0.5-0.5 0.5v1.99c0 0.5-0.5 0.5-0.5 0.5h-7.25c-0.5 0-0.5-0.5-0.5-0.5v-9c0-0.5 0.5-0.5 0.5-0.5h7.25c0.5 0 0.5 0.5 0.5 0.5v2.03s0 0.5 0.5 0.5 0.5-0.5 0.5-0.5v-2.03c0-1.5-1.5-1.5-1.5-1.5zm10 2.69c-0.384 0.0235-0.699 0.509-0.336 0.859l2.04 1.96h-10c-0.681-1.89e-4 -0.681 1 0 1l10-0.00195-2.01 2c-0.48 0.471 0.241 1.18 0.721 0.707l2.88-2.85c0.198-0.196 0.2-0.513 0-0.707l-2.91-2.82c-0.121-0.117-0.257-0.16-0.385-0.152z'/></svg>") !default;
$pen-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.9 0.5c-0.128 0-0.256 0.0489-0.354 0.146-2.85 2.85-5.71 5.71-8.56 8.56-0.055 0.055-0.0966 0.121-0.121 0.195l-0.805 2.41c-0.0648 0.195 0.119 0.381 0.314 0.316l2.41-0.805c0.0738-0.0242 0.142-0.0664 0.197-0.121 2.85-2.85 5.71-5.71 8.56-8.56 0.195-0.195 0.195-0.512 0-0.707l-1.29-1.29c-0.0976-0.0976-0.226-0.146-0.354-0.146zm-11.4 0.5a1.5 1.5 0 0 0-1.5 1.5v11a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-6a0.5 0.5 0 0 0-1 0v6a0.5 0.5 0 0 1-0.5 0.5h-11a0.5 0.5 0 0 1-0.5-0.5v-11a0.5 0.5 0 0 1 0.5-0.5h6.5a0.5 0.5 0 0 0 0-1z'/></svg>") !default;
$close: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13 3-10 10zm-10 0 10 10z' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>") !default;
$box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1.51 0.0131c-0.911-0.0389-1.61 0.85-1.5 1.73 0.0031 4.3-0.0062 8.6 0.0047 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$close-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m4.82 5.53s-0.354-0.354 0-0.707 0.707 0 0.707 0l2.47 2.47 2.47-2.47s0.354-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.354 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.354 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47zm-3.31-5.51c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$close-box-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm3.08 4.67c0.249-0.0497 0.447 0.15 0.447 0.15l2.47 2.47 2.47-2.47s0.353-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.353 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.353 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47-2.47-2.47s-0.354-0.353 0-0.707c0.0884-0.0884 0.177-0.134 0.26-0.15z'/></svg>") !default;
$tick-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.4 4.6c-0.322-0.0685-0.509 0.216-0.652 0.449l-4.01 5.57c-0.875-0.787-1.74-1.58-2.62-2.36-0.362-0.326-0.976 0.154-0.76 0.583 0.177 0.295 0.485 0.482 0.725 0.726 0.818 0.734 1.63 1.48 2.45 2.21 0.264 0.206 0.64 0.0522 0.769-0.232 1.63-2.39 2.85-3.86 4.48-6.26 0.143-0.282-0.0874-0.618-0.374-0.682zm-9.93-4.59c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$search: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.3 10.1a5.69 5.69 0 1 0-1.22 1.22h-8.75e-4q0.0385 0.0525 0.0858 0.101l3.37 3.37a0.875 0.875 0 0 0 1.24-1.24l-3.37-3.37a0.875 0.875 0 0 0-0.101-0.0875zm0.226-3.36a4.81 4.81 0 1 1-9.62 0 4.81 4.81 0 0 1 9.62 00'/></svg>") !default;
$download: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2c-0.344-0.0114-0.551 0.342-0.5 0.652 2e-3 2.21 5.6e-4 4.43 4e-3 6.64-1.06-1.06-2.13-2.13-3.2-3.19-0.0933-0.0741-0.213-0.113-0.332-0.107-0.443-0.0017-0.647 0.624-0.295 0.889 1.31 1.31 2.61 2.62 3.93 3.92 0.0104 0.0124 0.0216 0.0219 0.0332 0.0332 0.017 0.0168 0.0338 0.0339 0.0508 0.0508 0.133 0.112 0.29 0.124 0.438 0.0801 0.0874-0.02 0.167-0.0577 0.23-0.129 0.0433-0.036 0.088-0.0728 0.121-0.117 1.3-1.31 2.61-2.61 3.91-3.92 0.29-0.33-0.0448-0.898-0.475-0.801-0.313 0.0818-0.484 0.388-0.721 0.588l-2.7 2.7c-9.7e-4 -2.28 4e-3 -4.57-4e-3 -6.85-0.0246-0.245-0.25-0.446-0.496-0.441zm-6 8a0.5 0.5 0 0 0-0.5 0.5v3a0.5 0.5 0 0 0 0.5 0.5h12a0.5 0.5 0 0 0 0.5-0.5v-3a0.5 0.5 0 0 0-0.5-0.5 0.5 0.5 0 0 0-0.5 0.5v2.5h-11v-2.5a0.5 0.5 0 0 0-0.5-0.5z'/></svg>") !default;
$user: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.99 3s3 0 3 3-3 3-3 3-3 0-3-3 3-3 3-3zm0.0126-3c-2.4-0.0524-4.91 0.92-6.34 2.91-1.12 1.56-1.7 3.51-1.66 5.42 0.179 2.59 1.39 5.27 3.72 6.6 2.15 1.23 4.83 1.34 7.17 0.623 2.26-0.699 3.99-2.64 4.65-4.87 0.477-1.45 0.625-3.03 0.23-4.52-0.478-2.28-1.91-4.44-4.09-5.41-1.15-0.534-2.42-0.749-3.68-0.748zm0 1c2.02-0.0441 4.19 0.661 5.42 2.34 1.05 1.41 1.61 3.2 1.57 4.96-0.0993 1.29-0.491 2.62-1.18 3.75-0.425-0.879-1.75-2.05-5.82-2.05-4.1 0-5.41 1.19-5.82 2.07-0.268-0.43-0.491-0.887-0.654-1.36-0.506-1.38-0.706-2.91-0.314-4.35 0.443-2.08 1.77-4.11 3.84-4.86 0.937-0.362 1.95-0.494 2.95-0.494z'/></svg>") !default;
$question: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0.00201c-2.64-0.0763-5.41 1.16-6.73 3.52-1.29 2.15-1.64 4.86-0.791 7.23 0.67 2.12 2.26 4 4.4 4.72 2.23 0.8 4.78 0.696 6.94-0.278 2.18-1.05 3.6-3.28 4.02-5.62 0.483-2.35-0.164-4.88-1.6-6.79-1.44-1.94-3.88-2.82-6.23-2.78zm0 0.999c2.18-0.065 4.54 0.811 5.71 2.75 1.24 1.91 1.65 4.37 0.912 6.54-0.57 1.95-2 3.75-4.01 4.32-1.9 0.596-4.02 0.51-5.86-0.229-1.99-0.887-3.22-2.93-3.6-5.01-0.424-2.05 0.15-4.26 1.37-5.95 1.02-1.44 2.73-2.23 4.45-2.38 0.343-0.0353 0.688-0.051 1.03-0.0511zm-2.69 5.18c0.053-1.45 1.6-2.37 2.94-2.24 1.22-0.0093 2.53 0.941 2.43 2.25-0.0616 1.18-1.28 1.71-1.93 2.54-0.113 0.679-0.679 1.79-1.43 0.96-0.346-0.832 0.191-1.72 0.842-2.23 0.469-0.438 1.24-0.918 1-1.67-0.311-0.943-1.86-0.97-2.23-0.0498-0.0253 0.867-1.22 1.66-1.61 0.566zm2.62 5.89c-1.4 0.0355-0.715-2.25 0.447-1.48 0.652 0.405 0.34 1.52-0.447 1.48z'/></svg>") !default;
$radio-off: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.5 8a5.5 5.5 0 0 1-5.5 5.5 5.5 5.5 0 0 1-5.5-5.5 5.5 5.5 0 0 1 5.5-5.5 5.5 5.5 0 0 1 5.5 5.5z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/></svg>") !default;
$radio-on: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.5 8a5.5 5.5 0 0 1-5.5 5.5 5.5 5.5 0 0 1-5.5-5.5 5.5 5.5 0 0 1 5.5-5.5 5.5 5.5 0 0 1 5.5 5.5z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/><path d='m4.5 8s0-3.5 3.5-3.5 3.5 3.5 3.5 3.5 0 3.5-3.5 3.5-3.5-3.5-3.5-3.5z' fill='currentColor'/></svg>") !default;The Sass variables from the properties are used to create Sass maps for compiling the CSS variables, any new properties added also need to be added to the corresponding map in the _maps.scss document for compiling.
_maps.scss
// ----------------------------------------------------------
// Maps
// ----------------------------------------------------------
@use "../properties" as *;
$color-schemes: (
"theme": #{$theme},
"brand": #{$brand},
"text": #{$text},
"link": #{$link},
"link-hover": #{$link-hover},
"link-visited": #{$link-visited},
"body-bg": light-dark(#{$body-bg-light}, #{$body-bg-dark}),
"surf-1": light-dark(#{$surf-1-light}, #{$surf-1-dark}),
"surf-2": light-dark(#{$surf-2-light}, #{$surf-2-dark}),
"surf-3": light-dark(#{$surf-3-light}, #{$surf-3-dark}),
"surf-4": light-dark(#{$surf-4-light}, #{$surf-4-dark}),
) !default;
$color-schemes-variables: (
"theme": #{$theme},
"brand": #{$brand},
"text": #{$text},
"link": #{$link},
"link-hover": #{$link-hover},
"link-visited": #{$link-visited},
"body-bg": #{$body-bg},
"surf-1": #{$surf-1},
"surf-2": #{$surf-2},
"surf-3": #{$surf-3},
"surf-4": #{$surf-4},
) !default;
$theme-colors: (
"body-bg-light": #{$body-bg-light},
"body-bg-dark": #{$body-bg-dark},
"surf-1-light": #{$surf-1-light},
"surf-2-light": #{$surf-2-light},
"surf-3-light": #{$surf-3-light},
"surf-4-light": #{$surf-4-light},
"surf-1-dark": #{$surf-1-dark},
"surf-2-dark": #{$surf-2-dark},
"surf-3-dark": #{$surf-3-dark},
"surf-4-dark": #{$surf-4-dark},
) !default;
$primary-colors: (
"blue": #{$blue},
"blue-light": #{$blue-light},
"blue-lighter": #{$blue-lighter},
"blue-dark": #{$blue-dark},
"blue-darker": #{$blue-darker},
"red": #{$red},
"red-light": #{$red-light},
"red-lighter": #{$red-lighter},
"red-dark": #{$red-dark},
"red-darker": #{$red-darker},
"green": #{$green},
"green-light": #{$green-light},
"green-lighter": #{$green-lighter},
"green-dark": #{$green-dark},
"green-darker": #{$green-darker},
"orange": #{$orange},
"orange-light": #{$orange-light},
"orange-lighter": #{$orange-lighter},
"orange-dark": #{$orange-dark},
"orange-darker": #{$orange-darker},
"cyan": #{$cyan},
"cyan-light": #{$cyan-light},
"cyan-lighter": #{$cyan-lighter},
"cyan-dark": #{$cyan-dark},
"cyan-darker": #{$cyan-darker},
) !default;
$typography: (
"color": var(--text),
"font": #{$font-family},
"fs": #{$font-size},
"body": #{$body},
"fs-xl": #{$fs-xl},
"fs-lg": #{$fs-lg},
"fs-sm": #{$fs-sm},
"fs-xs": #{$fs-xs},
"fs-xxs": #{$fs-xxs},
"h1": #{$h1},
"h2": #{$h2},
"h3": #{$h3},
"h4": #{$h4},
"h5": #{$h5},
"h6": #{$h6},
"lh-body": #{$lh-body},
"lh-header": #{$lh-header},
) !default;
$forms-buttons: (
"lh-btn-forms": #{$lh-btn-forms},
"btn-py": #{$btn-py},
"btn-px": #{$btn-px},
"btn-bg": #{$btn-bg},
"btn-hover": #{$btn-hover},
"btn-bd-width": #{$btn-bd-width},
"btn-bd-color": #{$btn-bd-color},
"btn-radius": #{$btn-radius},
"form-py": #{$form-py},
"form-px": #{$form-px},
"form-bg": #{$form-bg},
"form-bd-width": #{$form-bd-width},
"form-bd-color": #{$form-bd-color},
"form-radius": #{$form-radius},
"input-focus": #{$input-focus},
"input-focus-color": #{$input-focus-color},
) !default;
$tables: (
"table-thead-txt": #{$table-thead-txt},
"table-thead-bg": #{$table-thead-bg},
"table-hover": #{$table-hover},
"table-stripes": #{$table-stripes},
"table-bd-color": #{$table-bd-color},
"table-bd-width": #{$table-bd-width},
"table-py": #{$table-py},
"table-px": #{$table-px},
"table-mb": #{$table-mb},
) !default;
$accordions: (
"summary-txt": #{$summary-txt},
"summary-bg": #{$summary-bg},
"summary-ico": #{$summary-ico},
"details-py": #{$details-py},
"details-px": #{$details-px},
"details-bd-color": #{$details-bd-color},
"details-bd-width": #{$details-bd-width},
"details-radius": #{$details-radius},
) !default;
$alerts: (
"alert-txt": #{$alert-txt},
"alert-bg": #{$alert-bg},
"alert-bd-color": #{$alert-bd-color},
"alert-radius": #{$alert-radius},
) !default;
$cards: (
"card-px": #{$card-px},
"card-pt": #{$card-pt},
"card-pb": #{$card-pb},
"card-bd-color": #{$card-bd-color},
"card-bd-width": #{$card-bd-width},
"card-radius": #{$card-radius},
"card-bg": #{$card-bg},
"card-hover": #{$card-hover},
"card-focus": #{$card-focus},
"card-title-txt": #{$card-title-txt},
"card-title-bg": #{$card-title-bg},
"card-title-py": #{$card-title-py},
"card-title-h-py": #{$card-title-h-py},
) !default;
$dialogs: (
"dialog-txt": #{$dialog-txt},
"dialog-bg": #{$dialog-bg},
"dialog-header-txt": #{$dialog-header-txt},
"dialog-header-bg": #{$dialog-header-bg},
"dialog-body-bg": #{$dialog-body-bg},
"dialog-body-py": #{$dialog-body-py},
"dialog-body-px": #{$dialog-body-px},
"dialog-bd-color": #{$dialog-bd-color},
"dialog-bd-width": #{$dialog-bd-width},
"dialog-radius": #{$dialog-radius},
"dialog-top": #{$dialog-top},
"dialog-width": #{$dialog-width},
"dialog-max-width": #{$dialog-max-width},
"dialog-transition": #{$dialog-transition},
"dialog-offcanvas": #{$dialog-offcanvas},
) !default;
$list-groups: (
"list-group-txt": #{$list-group-txt},
"list-group-links": #{$list-group-links},
"list-group-py": #{$list-group-py},
"list-group-px": #{$list-group-px},
"list-group-bd-color": #{$list-group-bd-color},
"list-group-bg": #{$list-group-bg},
"list-group-title-bg": #{$list-group-title-bg},
"list-group-hover": #{$list-group-hover},
"list-group-radius": #{$list-group-radius},
"list-group-hover-radius": #{$list-group-hover-radius},
) !default;
$popovers: (
"pop-txt": #{$pop-txt},
"pop-bg": #{$pop-bg},
"pop-bd-color": #{$pop-bd-color},
"pop-bd-width": #{$pop-bd-width},
"pop-radius": #{$pop-radius},
"pop-my": #{$pop-my},
"pop-mx": #{$pop-mx},
"pop-py": #{$pop-py},
"pop-px": #{$pop-px},
"pop-width": #{$pop-width},
"pop-max-width": #{$pop-max-width},
) !default;
$badges: (
"badge-txt": #{$badge-txt},
"badge-fs": #{$badge-fs},
"badge-fw": #{$badge-fw},
"badge-py": #{$badge-py},
"badge-px": #{$badge-px},
"badge-radius": #{$badge-radius},
"badge-bg": #{$badge-bg},
) !default;
$border-radius: (
"rd-1": #{$rd-1},
"rd-2": #{$rd-2},
"rd-3": #{$rd-3},
"rd-4": #{$rd-4},
"rd-5": #{$rd-5},
"rd-pill": #{$rd-pill},
) !default;
$shadows: (
"shadow": #{$shadow},
"shadow-sm": #{$shadow-sm},
"shadow-lg": #{$shadow-lg},
) !default;
$gradients-theme: (
"gradient-light": #{$gradient-light},
"gradient-dark": #{$gradient-dark},
) !default;
$gradients-primary: (
"gradient-blue": #{$gradient-blue},
"gradient-red": #{$gradient-red},
"gradient-green": #{$gradient-green},
"gradient-orange": #{$gradient-orange},
"gradient-cyan": #{$gradient-cyan},
) !default;
$grid-auto: (
"g-1": #{$g-1},
"g-2": #{$g-2},
"g-3": #{$g-3},
"g-4": #{$g-4},
"g-5": #{$g-5},
"g-6": #{$g-6},
"g-7": #{$g-7},
"g-8": #{$g-8},
"g-9": #{$g-9},
"g-10": #{$g-10},
"g-11": #{$g-11},
"g-12": #{$g-12},
) !default;
$grid-column: (
"col-0": #{$span-0},
"col-1": #{$span-1},
"col-2": #{$span-2},
"col-3": #{$span-3},
"col-4": #{$span-4},
"col-5": #{$span-5},
"col-6": #{$span-6},
"col-7": #{$span-7},
"col-8": #{$span-8},
"col-9": #{$span-9},
"col-10": #{$span-10},
"col-11": #{$span-11},
"col-12": #{$span-12},
) !default;
$grid-row: (
"row-0": #{$span-0},
"row-1": #{$span-1},
"row-2": #{$span-2},
"row-3": #{$span-3},
"row-4": #{$span-4},
"row-5": #{$span-5},
"row-6": #{$span-6},
"row-7": #{$span-7},
"row-8": #{$span-8},
"row-9": #{$span-9},
"row-10": #{$span-10},
"row-11": #{$span-11},
"row-12": #{$span-12},
) !default;
$grid-start: (
"start-0": #{$start-0},
"start-1": #{$start-1},
"start-2": #{$start-2},
"start-3": #{$start-3},
"start-4": #{$start-4},
"start-5": #{$start-5},
"start-6": #{$start-6},
"start-7": #{$start-7},
"start-8": #{$start-8},
"start-9": #{$start-9},
"start-10": #{$start-10},
"start-11": #{$start-11},
"start-12": #{$start-12},
) !default;
$spacing: (
"0": #{$s0},
"1": #{$s1},
"2": #{$s2},
"3": #{$s3},
"4": #{$s4},
"5": #{$s5},
) !default;
$spacing-auto: (
"auto": #{$auto},
"0": #{$s0},
"1": #{$s1},
"2": #{$s2},
"3": #{$s3},
"4": #{$s4},
"5": #{$s5},
) !default;
$alignment-1: (
"f-start": #{$flex-start},
"f-end": #{$flex-end},
"start": #{$start},
"end": #{$end},
"center": #{$center},
"space-around": #{$space-around},
"space-between": #{$space-between},
"space-evenly": #{$space-evenly},
) !default;
$alignment-2: (
"f-start": #{$flex-start},
"f-end": #{$flex-end},
"start": #{$start},
"end": #{$end},
"center": #{$center},
) !default;
$position: (
"pos-unset": #{$unset},
"relative": #{$relative},
"absolute": #{$absolute},
"fixed": #{$fixed},
"sticky": #{$sticky},
) !default;
$inset: (
"top": #{$top},
"bottom": #{$bottom},
"left": #{$left},
"right": #{$right},
);
$z-index: (
"z-n": #{$z-n},
"z-0": #{$z-0},
"z-1": #{$z-1},
"z-2": #{$z-2},
"z-3": #{$z-3},
"z-4": #{$z-4},
) !default;
$overflow: (
"unset": #{$unset},
"auto": #{$overflow-auto},
"scroll": #{$overflow-scroll},
) !default;
$scroll-gutter: (
"scroll-stable-unset": #{$unset},
"scroll-stable": #{$scroll-stable},
) !default;The variables use the Sass maps to compile the properties as CSS variables using :where() for 0 specificity. As with the properties, any new maps added above also need to be added to the _variables.scss for compiling as CSS variables.
_variables.scss
// ----------------------------------------------------------
// CSS variables
// ----------------------------------------------------------
@use "../configuration" as *;
@use "maps" as *;
:where(html) {
@if $enable-theme-colors {
@each $color-schemes-variables, $value in $color-schemes-variables {
--#{$color-schemes-variables}: #{$value};
}
@each $theme-colors, $value in $theme-colors {
--#{$theme-colors}: #{$value};
}
}
@else {
@each $color-schemes, $value in $color-schemes {
--#{$color-schemes}: #{$value};
}
}
@if $enable-primary-colors {
@each $primary-colors, $value in $primary-colors {
--#{$primary-colors}: #{$value};
}
}
}
:where(html) {
@each $typography, $value in $typography {
--#{$typography}: #{$value};
}
@if $enable-forms-buttons {
@each $forms-buttons, $value in $forms-buttons {
--#{$forms-buttons}: #{$value};
}
}
@if $enable-tables {
@each $tables, $value in $tables {
--#{$tables}: #{$value};
}
}
@if $enable-icon-mixins or $enable-icon-styles {
--ico: var(--color);
--ico-va: -.115em;
}
}
:where(html) {
@if $enable-accordions {
@each $accordions, $value in $accordions {
--#{$accordions}: #{$value};
}
}
@if $enable-alerts {
@each $alerts, $value in $alerts {
--#{$alerts}: #{$value};
}
}
@if $enable-cards {
@each $cards, $value in $cards {
--#{$cards}: #{$value};
}
}
@if $enable-dialogs {
@each $dialogs, $value in $dialogs {
--#{$dialogs}: #{$value};
}
}
@if $enable-list-groups {
@each $list-groups, $value in $list-groups {
--#{$list-groups}: #{$value};
}
}
@if $enable-popovers {
@each $popovers, $value in $popovers {
--#{$popovers}: #{$value};
}
}
@if $enable-badges {
@each $badges, $value in $badges {
--#{$badges}: #{$value};
}
}
@if $enable-borders {
@each $border-radius, $value in $border-radius {
--#{$border-radius}: #{$value};
}
}
@if $enable-shadows {
@each $shadows, $value in $shadows {
--#{$shadows}: #{$value};
}
}
@if $enable-gradients and $enable-theme-colors {
@each $gradients-theme, $value in $gradients-theme {
--#{$gradients-theme}: #{$value};
}
}
@if $enable-gradients and $enable-primary-colors {
@each $gradients-primary, $value in $gradients-primary {
--#{$gradients-primary}: #{$value};
}
}
}The _style.scss document includes the typography, forms, buttons and tables styles, the _extensions.scss includes all the optional utilities and components. These are explained in more detail on the individual pages which also include examples of the Sass for demonstration.
Editing the source files (anchor)
The styles are written as regular CSS (without Sass nesting) so can be edited like regular style sheets, each docs page shares code examples to demonstrate how the styles can be further customized if required.
The use of Sass functionality with the styles is mostly limited to the @use required for compiling and the @if rules that provide the ability to compile elements selectively as described above, with a couple style rules also including Sass variables to allow compiling them in isolation if incorporated utility styles are not also enabled.
The layout utilities use Sass variables, mixins and maps to help produce the responsive modifier classes and currently they're lightly documented as some of the techniques used need a major overhaul to provide more flexibility for customizing and expanding.
Custom setup (anchor)
To customize Themalize with overrides first setup the custom style sheet as follows:
@use "themalize/scss/configuration";
@use 'overrides';
@use "themalize/scss/properties";
@use "themalize/scss/styles/maps";
@use "themalize/scss/styles/variables";
@use "themalize/scss/styles/styles";
@use "themalize/scss/styles/extensions";
<-- custom styles -->The _overrides.scss file (or whatever you call it) must include the @use rule for each document loaded first and the custom overrides from each included with their names prefixed as follows:
@use "themalize/scss/configuration";
@use "themalize/scss/properties";
configuration.$enable-forms-buttons: false;
configuration.$enable-tables: false;
properties.$link-light: blue;
properties.$link-dark: gold;If preferred to replicate the Themalize structure two seperate overrides files can also be used provided the configuration overrides are loaded first as is done with Themalize.
Extending functionality (anchor)
To extend Sass functionality from the source files any custom styles need to include @use at-rules using the * namespace, for example to use an SVG icon property variable and the icon style @mixin the styles would be written as follows:
@use "themalize/scss/properties" as *;
@use "themalize/scss/styles/components/icons" as *;
.logotype:before {
@include icon-mask;
--svg: #{$logo};
}JavaScripts (anchor)
Two scripts are included with Themalize for the optional theme switch and dialogs components if enabled, examples and documentation on usage is provided on each page along with the credits for the authors of both scripts.
Customizing with CSS (anchor)
The download assets also include two alternative versions of Themalize that can be customized using the styles and CSS variables examples as documented on the website.
- themalize-lite.css
- A lightweight style sheet that includes the default typography styles and color-scheme variables plus the optional buttons, forms and tables styles and variables only.
- themalize-kit.css
- The full version of Themalize as demonstrated on this website with all optional components, utilities, and layouts enabled in the
_configuration.scssdocument.
The assets (also provided with the source download) includes uncompressed and minified versions of each style sheet plus the JS required for the optional theme switch and dialogs components.