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
The themalize.scss document compiles the style sheet using @use at-rules as follows:
@use "configuration";
@use "properties";
@use "styles/maps";
@use "styles/variables";
@use "styles/styles";
@use "styles/extensions";Customizing can mostly be done in the _configuration.scss and _properties.scss documents. The configuration allows selectively compiling 70+ optional elements individually using true and false statements, and the properties includes the default values for the colors and styles plus optional components, utilities and layout extensions.
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.scss
// ------------------------------------------------------------
// 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-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;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;
// 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},
) !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 is limited to the @use at-rules now included to compile the style sheets using the updated method, and the @if rules that provide the ability to compile elements selectively as described above.
The layout utilities use a lot more Sass functionality to help produce the modifier classes and require a deeper understanding of Sass. Currently they're lightly documented as the techniques used to generate some of the utilities needs reworking to provide more flexibility for customizing and expanding.
Custom setup (anchor)
The method may be change as the author becomes more familiar with using Sass @use at-rules but currently the easiest way to customize Themalize with overrides is to 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 -->Then the _overrides.scss document (or whatever you call it) must include settings from the _configuration.scss and variables from _properties.scss 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;Two seperate overrides files replicating the _configuration.scss and _properties.scss documents could 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 custom styles need to be written as follows:
@use "themalize/scss/properties" as *;
@use "themalize/scss/styles/components/icons" as *;
.logotype:before {
@include icon-mask;
--ico: #{$brand};
--svg: #{$logo};
}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.