feat: Generate Custom Bootstrap Theme using scss variables

frappe/hooks.py

@@ -47,9 +47,7 @@ web_include_js = [
 	"website_script.js"
 ]
 
-web_include_css = [
-	"assets/css/frappe-web-b4.css"
-]
+web_include_css = []
 
 website_route_rules = [
 	{"from_route": "/blog/<category>", "to_route": "Blog Post"},

frappe/public/js/frappe/form/controls/code.js

@@ -31,7 +31,8 @@ frappe.ui.form.ControlCode = frappe.ui.form.ControlText.extend({
 			'JS': 'ace/mode/javascript',
 			'HTML': 'ace/mode/html',
 			'CSS': 'ace/mode/css',
-			'Markdown': 'ace/mode/markdown'
+			'Markdown': 'ace/mode/markdown',
+			'SCSS': 'ace/mode/scss'
 		};
 		const language = this.df.options;
 

frappe/public/scss/css_variables.scss

@@ -1,592 +0,0 @@
-$white: var(--white, $white);
-$gray-100: var(--gray-100, $gray-100);
-$gray-200: var(--gray-200, $gray-200);
-$gray-300: var(--gray-300, $gray-300);
-$gray-400: var(--gray-400, $gray-400);
-$gray-500: var(--gray-500, $gray-500);
-$gray-600: var(--gray-600, $gray-600);
-$gray-700: var(--gray-700, $gray-700);
-$gray-800: var(--gray-800, $gray-800);
-$gray-900: var(--gray-900, $gray-900);
-$black: var(--black, $black);
-$blue: var(--blue, $blue);
-$indigo: var(--indigo, $indigo);
-$purple: var(--purple, $purple);
-$pink: var(--pink, $pink);
-$red: var(--red, $red);
-$orange: var(--orange, $orange);
-$yellow: var(--yellow, $yellow);
-$green: var(--green, $green);
-$teal: var(--teal, $teal);
-$cyan: var(--cyan, $cyan);
-$primary: var(--primary, $primary);
-$secondary: var(--secondary, $secondary);
-$success: var(--success, $success);
-$info: var(--info, $info);
-$warning: var(--warning, $warning);
-$danger: var(--danger, $danger);
-$light: var(--light, $light);
-$dark: var(--dark, $dark);
-$spacer: var(--spacer, $spacer);
-$body-bg: var(--body-bg, $body-bg);
-$body-color: var(--body-color, $body-color);
-$link-color: var(--link-color, $link-color);
-$link-decoration: var(--link-decoration, $link-decoration);
-$link-hover-color: var(--link-hover-color, $link-hover-color);
-$link-hover-decoration: var(--link-hover-decoration, $link-hover-decoration);
-$emphasized-link-hover-darken-percentage: var(--emphasized-link-hover-darken-percentage, $emphasized-link-hover-darken-percentage);
-$paragraph-margin-bottom: var(--paragraph-margin-bottom, $paragraph-margin-bottom);
-$grid-gutter-width: var(--grid-gutter-width, $grid-gutter-width);
-$line-height-lg: var(--line-height-lg, $line-height-lg);
-$line-height-sm: var(--line-height-sm, $line-height-sm);
-$border-width: var(--border-width, $border-width);
-$border-color: var(--border-color, $border-color);
-$border-radius: var(--border-radius, $border-radius);
-$border-radius-lg: var(--border-radius-lg, $border-radius-lg);
-$border-radius-sm: var(--border-radius-sm, $border-radius-sm);
-$rounded-pill: var(--rounded-pill, $rounded-pill);
-$box-shadow-sm: var(--box-shadow-sm, $box-shadow-sm);
-$box-shadow: var(--box-shadow, $box-shadow);
-$box-shadow-lg: var(--box-shadow-lg, $box-shadow-lg);
-$component-active-color: var(--component-active-color, $component-active-color);
-$component-active-bg: var(--component-active-bg, $component-active-bg);
-$caret-width: var(--caret-width, $caret-width);
-$transition-base: var(--transition-base, $transition-base);
-$transition-fade: var(--transition-fade, $transition-fade);
-$transition-collapse: var(--transition-collapse, $transition-collapse);
-$font-family-sans-serif: var(--font-family-sans-serif, $font-family-sans-serif);
-$font-family-monospace: var(--font-family-monospace, $font-family-monospace);
-$font-family-base: var(--font-family-base, $font-family-base);
-$font-size-lg: var(--font-size-lg, $font-size-lg);
-$font-size-sm: var(--font-size-sm, $font-size-sm);
-$font-weight-lighter: var(--font-weight-lighter, $font-weight-lighter);
-$font-weight-light: var(--font-weight-light, $font-weight-light);
-$font-weight-normal: var(--font-weight-normal, $font-weight-normal);
-$font-weight-bold: var(--font-weight-bold, $font-weight-bold);
-$font-weight-bolder: var(--font-weight-bolder, $font-weight-bolder);
-$font-weight-base: var(--font-weight-base, $font-weight-base);
-$line-height-base: var(--line-height-base, $line-height-base);
-$h1-font-size: var(--h1-font-size, $h1-font-size);
-$h2-font-size: var(--h2-font-size, $h2-font-size);
-$h3-font-size: var(--h3-font-size, $h3-font-size);
-$h4-font-size: var(--h4-font-size, $h4-font-size);
-$h5-font-size: var(--h5-font-size, $h5-font-size);
-$h6-font-size: var(--h6-font-size, $h6-font-size);
-$headings-margin-bottom: var(--headings-margin-bottom, $headings-margin-bottom);
-$headings-font-family: var(--headings-font-family, $headings-font-family);
-$headings-font-weight: var(--headings-font-weight, $headings-font-weight);
-$headings-line-height: var(--headings-line-height, $headings-line-height);
-$headings-color: var(--headings-color, $headings-color);
-$display1-size: var(--display1-size, $display1-size);
-$display2-size: var(--display2-size, $display2-size);
-$display3-size: var(--display3-size, $display3-size);
-$display4-size: var(--display4-size, $display4-size);
-$display1-weight: var(--display1-weight, $display1-weight);
-$display2-weight: var(--display2-weight, $display2-weight);
-$display3-weight: var(--display3-weight, $display3-weight);
-$display4-weight: var(--display4-weight, $display4-weight);
-$display-line-height: var(--display-line-height, $display-line-height);
-$lead-font-size: var(--lead-font-size, $lead-font-size);
-$lead-font-weight: var(--lead-font-weight, $lead-font-weight);
-$small-font-size: var(--small-font-size, $small-font-size);
-$text-muted: var(--text-muted, $text-muted);
-$blockquote-small-color: var(--blockquote-small-color, $blockquote-small-color);
-$blockquote-small-font-size: var(--blockquote-small-font-size, $blockquote-small-font-size);
-$blockquote-font-size: var(--blockquote-font-size, $blockquote-font-size);
-$hr-border-color: var(--hr-border-color, $hr-border-color);
-$hr-border-width: var(--hr-border-width, $hr-border-width);
-$mark-padding: var(--mark-padding, $mark-padding);
-$dt-font-weight: var(--dt-font-weight, $dt-font-weight);
-$kbd-box-shadow: var(--kbd-box-shadow, $kbd-box-shadow);
-$nested-kbd-font-weight: var(--nested-kbd-font-weight, $nested-kbd-font-weight);
-$list-inline-padding: var(--list-inline-padding, $list-inline-padding);
-$mark-bg: var(--mark-bg, $mark-bg);
-$hr-margin-y: var(--hr-margin-y, $hr-margin-y);
-$table-cell-padding: var(--table-cell-padding, $table-cell-padding);
-$table-cell-padding-sm: var(--table-cell-padding-sm, $table-cell-padding-sm);
-$table-bg: var(--table-bg, $table-bg);
-$table-accent-bg: var(--table-accent-bg, $table-accent-bg);
-$table-hover-bg: var(--table-hover-bg, $table-hover-bg);
-$table-active-bg: var(--table-active-bg, $table-active-bg);
-$table-border-color: var(--table-border-color, $table-border-color);
-$table-head-bg: var(--table-head-bg, $table-head-bg);
-$table-head-color: var(--table-head-color, $table-head-color);
-$table-dark-bg: var(--table-dark-bg, $table-dark-bg);
-$table-dark-accent-bg: var(--table-dark-accent-bg, $table-dark-accent-bg);
-$table-dark-hover-bg: var(--table-dark-hover-bg, $table-dark-hover-bg);
-$table-dark-border-color: var(--table-dark-border-color, $table-dark-border-color);
-$table-dark-color: var(--table-dark-color, $table-dark-color);
-$table-striped-order: var(--table-striped-order, $table-striped-order);
-$table-caption-color: var(--table-caption-color, $table-caption-color);
-$table-border-level: var(--table-border-level, $table-border-level);
-$input-btn-padding-y: var(--input-btn-padding-y, $input-btn-padding-y);
-$input-btn-padding-x: var(--input-btn-padding-x, $input-btn-padding-x);
-$input-btn-font-size: var(--input-btn-font-size, $input-btn-font-size);
-$input-btn-line-height: var(--input-btn-line-height, $input-btn-line-height);
-$input-btn-focus-width: var(--input-btn-focus-width, $input-btn-focus-width);
-$input-btn-focus-color: var(--input-btn-focus-color, $input-btn-focus-color);
-$input-btn-focus-box-shadow: var(--input-btn-focus-box-shadow, $input-btn-focus-box-shadow);
-$input-btn-padding-y-sm: var(--input-btn-padding-y-sm, $input-btn-padding-y-sm);
-$input-btn-padding-x-sm: var(--input-btn-padding-x-sm, $input-btn-padding-x-sm);
-$input-btn-font-size-sm: var(--input-btn-font-size-sm, $input-btn-font-size-sm);
-$input-btn-line-height-sm: var(--input-btn-line-height-sm, $input-btn-line-height-sm);
-$input-btn-padding-y-lg: var(--input-btn-padding-y-lg, $input-btn-padding-y-lg);
-$input-btn-padding-x-lg: var(--input-btn-padding-x-lg, $input-btn-padding-x-lg);
-$input-btn-font-size-lg: var(--input-btn-font-size-lg, $input-btn-font-size-lg);
-$input-btn-line-height-lg: var(--input-btn-line-height-lg, $input-btn-line-height-lg);
-$input-btn-border-width: var(--input-btn-border-width, $input-btn-border-width);
-$btn-padding-y: var(--btn-padding-y, $btn-padding-y);
-$btn-padding-x: var(--btn-padding-x, $btn-padding-x);
-$btn-font-size: var(--btn-font-size, $btn-font-size);
-$btn-line-height: var(--btn-line-height, $btn-line-height);
-$btn-padding-y-sm: var(--btn-padding-y-sm, $btn-padding-y-sm);
-$btn-padding-x-sm: var(--btn-padding-x-sm, $btn-padding-x-sm);
-$btn-font-size-sm: var(--btn-font-size-sm, $btn-font-size-sm);
-$btn-line-height-sm: var(--btn-line-height-sm, $btn-line-height-sm);
-$btn-padding-y-lg: var(--btn-padding-y-lg, $btn-padding-y-lg);
-$btn-padding-x-lg: var(--btn-padding-x-lg, $btn-padding-x-lg);
-$btn-font-size-lg: var(--btn-font-size-lg, $btn-font-size-lg);
-$btn-line-height-lg: var(--btn-line-height-lg, $btn-line-height-lg);
-$btn-border-width: var(--btn-border-width, $btn-border-width);
-$btn-font-weight: var(--btn-font-weight, $btn-font-weight);
-$btn-box-shadow: var(--btn-box-shadow, $btn-box-shadow);
-$btn-focus-width: var(--btn-focus-width, $btn-focus-width);
-$btn-focus-box-shadow: var(--btn-focus-box-shadow, $btn-focus-box-shadow);
-$btn-disabled-opacity: var(--btn-disabled-opacity, $btn-disabled-opacity);
-$btn-active-box-shadow: var(--btn-active-box-shadow, $btn-active-box-shadow);
-$btn-link-disabled-color: var(--btn-link-disabled-color, $btn-link-disabled-color);
-$btn-block-spacing-y: var(--btn-block-spacing-y, $btn-block-spacing-y);
-$btn-border-radius: var(--btn-border-radius, $btn-border-radius);
-$btn-border-radius-lg: var(--btn-border-radius-lg, $btn-border-radius-lg);
-$btn-border-radius-sm: var(--btn-border-radius-sm, $btn-border-radius-sm);
-$btn-transition: var(--btn-transition, $btn-transition);
-$label-margin-bottom: var(--label-margin-bottom, $label-margin-bottom);
-$input-padding-y: var(--input-padding-y, $input-padding-y);
-$input-padding-x: var(--input-padding-x, $input-padding-x);
-$input-font-size: var(--input-font-size, $input-font-size);
-$input-font-weight: var(--input-font-weight, $input-font-weight);
-$input-line-height: var(--input-line-height, $input-line-height);
-$input-padding-y-sm: var(--input-padding-y-sm, $input-padding-y-sm);
-$input-padding-x-sm: var(--input-padding-x-sm, $input-padding-x-sm);
-$input-font-size-sm: var(--input-font-size-sm, $input-font-size-sm);
-$input-line-height-sm: var(--input-line-height-sm, $input-line-height-sm);
-$input-padding-y-lg: var(--input-padding-y-lg, $input-padding-y-lg);
-$input-padding-x-lg: var(--input-padding-x-lg, $input-padding-x-lg);
-$input-font-size-lg: var(--input-font-size-lg, $input-font-size-lg);
-$input-line-height-lg: var(--input-line-height-lg, $input-line-height-lg);
-$input-bg: var(--input-bg, $input-bg);
-$input-disabled-bg: var(--input-disabled-bg, $input-disabled-bg);
-$input-color: var(--input-color, $input-color);
-$input-border-color: var(--input-border-color, $input-border-color);
-$input-border-width: var(--input-border-width, $input-border-width);
-$input-box-shadow: var(--input-box-shadow, $input-box-shadow);
-$input-border-radius: var(--input-border-radius, $input-border-radius);
-$input-border-radius-lg: var(--input-border-radius-lg, $input-border-radius-lg);
-$input-border-radius-sm: var(--input-border-radius-sm, $input-border-radius-sm);
-$input-focus-bg: var(--input-focus-bg, $input-focus-bg);
-$input-focus-border-color: var(--input-focus-border-color, $input-focus-border-color);
-$input-focus-color: var(--input-focus-color, $input-focus-color);
-$input-focus-width: var(--input-focus-width, $input-focus-width);
-$input-focus-box-shadow: var(--input-focus-box-shadow, $input-focus-box-shadow);
-$input-placeholder-color: var(--input-placeholder-color, $input-placeholder-color);
-$input-plaintext-color: var(--input-plaintext-color, $input-plaintext-color);
-$input-height-border: var(--input-height-border, $input-height-border);
-$input-height-inner: var(--input-height-inner, $input-height-inner);
-$input-height: var(--input-height, $input-height);
-$input-height-inner-sm: var(--input-height-inner-sm, $input-height-inner-sm);
-$input-height-sm: var(--input-height-sm, $input-height-sm);
-$input-height-inner-lg: var(--input-height-inner-lg, $input-height-inner-lg);
-$input-height-lg: var(--input-height-lg, $input-height-lg);
-$input-transition: var(--input-transition, $input-transition);
-$form-text-margin-top: var(--form-text-margin-top, $form-text-margin-top);
-$form-check-input-gutter: var(--form-check-input-gutter, $form-check-input-gutter);
-$form-check-input-margin-y: var(--form-check-input-margin-y, $form-check-input-margin-y);
-$form-check-input-margin-x: var(--form-check-input-margin-x, $form-check-input-margin-x);
-$form-check-inline-margin-x: var(--form-check-inline-margin-x, $form-check-inline-margin-x);
-$form-check-inline-input-margin-x: var(--form-check-inline-input-margin-x, $form-check-inline-input-margin-x);
-$form-grid-gutter-width: var(--form-grid-gutter-width, $form-grid-gutter-width);
-$form-group-margin-bottom: var(--form-group-margin-bottom, $form-group-margin-bottom);
-$input-group-addon-color: var(--input-group-addon-color, $input-group-addon-color);
-$input-group-addon-bg: var(--input-group-addon-bg, $input-group-addon-bg);
-$input-group-addon-border-color: var(--input-group-addon-border-color, $input-group-addon-border-color);
-$custom-forms-transition: var(--custom-forms-transition, $custom-forms-transition);
-$custom-control-gutter: var(--custom-control-gutter, $custom-control-gutter);
-$custom-control-spacer-x: var(--custom-control-spacer-x, $custom-control-spacer-x);
-$custom-control-indicator-size: var(--custom-control-indicator-size, $custom-control-indicator-size);
-$custom-control-indicator-bg: var(--custom-control-indicator-bg, $custom-control-indicator-bg);
-$custom-control-indicator-bg-size: var(--custom-control-indicator-bg-size, $custom-control-indicator-bg-size);
-$custom-control-indicator-box-shadow: var(--custom-control-indicator-box-shadow, $custom-control-indicator-box-shadow);
-$custom-control-indicator-border-color: var(--custom-control-indicator-border-color, $custom-control-indicator-border-color);
-$custom-control-indicator-border-width: var(--custom-control-indicator-border-width, $custom-control-indicator-border-width);
-$custom-control-indicator-disabled-bg: var(--custom-control-indicator-disabled-bg, $custom-control-indicator-disabled-bg);
-$custom-control-label-disabled-color: var(--custom-control-label-disabled-color, $custom-control-label-disabled-color);
-$custom-control-indicator-checked-color: var(--custom-control-indicator-checked-color, $custom-control-indicator-checked-color);
-$custom-control-indicator-checked-bg: var(--custom-control-indicator-checked-bg, $custom-control-indicator-checked-bg);
-$custom-control-indicator-checked-disabled-bg: var(--custom-control-indicator-checked-disabled-bg, $custom-control-indicator-checked-disabled-bg);
-$custom-control-indicator-checked-box-shadow: var(--custom-control-indicator-checked-box-shadow, $custom-control-indicator-checked-box-shadow);
-$custom-control-indicator-checked-border-color: var(--custom-control-indicator-checked-border-color, $custom-control-indicator-checked-border-color);
-$custom-control-indicator-focus-box-shadow: var(--custom-control-indicator-focus-box-shadow, $custom-control-indicator-focus-box-shadow);
-$custom-control-indicator-focus-border-color: var(--custom-control-indicator-focus-border-color, $custom-control-indicator-focus-border-color);
-$custom-control-indicator-active-color: var(--custom-control-indicator-active-color, $custom-control-indicator-active-color);
-$custom-control-indicator-active-bg: var(--custom-control-indicator-active-bg, $custom-control-indicator-active-bg);
-$custom-control-indicator-active-box-shadow: var(--custom-control-indicator-active-box-shadow, $custom-control-indicator-active-box-shadow);
-$custom-control-indicator-active-border-color: var(--custom-control-indicator-active-border-color, $custom-control-indicator-active-border-color);
-$custom-checkbox-indicator-border-radius: var(--custom-checkbox-indicator-border-radius, $custom-checkbox-indicator-border-radius);
-$custom-checkbox-indicator-icon-checked: var(--custom-checkbox-indicator-icon-checked, $custom-checkbox-indicator-icon-checked);
-$custom-checkbox-indicator-indeterminate-bg: var(--custom-checkbox-indicator-indeterminate-bg, $custom-checkbox-indicator-indeterminate-bg);
-$custom-checkbox-indicator-indeterminate-color: var(--custom-checkbox-indicator-indeterminate-color, $custom-checkbox-indicator-indeterminate-color);
-$custom-checkbox-indicator-icon-indeterminate: var(--custom-checkbox-indicator-icon-indeterminate, $custom-checkbox-indicator-icon-indeterminate);
-$custom-checkbox-indicator-indeterminate-box-shadow: var(--custom-checkbox-indicator-indeterminate-box-shadow, $custom-checkbox-indicator-indeterminate-box-shadow);
-$custom-checkbox-indicator-indeterminate-border-color: var(--custom-checkbox-indicator-indeterminate-border-color, $custom-checkbox-indicator-indeterminate-border-color);
-$custom-radio-indicator-border-radius: var(--custom-radio-indicator-border-radius, $custom-radio-indicator-border-radius);
-$custom-radio-indicator-icon-checked: var(--custom-radio-indicator-icon-checked, $custom-radio-indicator-icon-checked);
-$custom-switch-width: var(--custom-switch-width, $custom-switch-width);
-$custom-switch-indicator-border-radius: var(--custom-switch-indicator-border-radius, $custom-switch-indicator-border-radius);
-$custom-switch-indicator-size: var(--custom-switch-indicator-size, $custom-switch-indicator-size);
-$custom-select-padding-y: var(--custom-select-padding-y, $custom-select-padding-y);
-$custom-select-padding-x: var(--custom-select-padding-x, $custom-select-padding-x);
-$custom-select-height: var(--custom-select-height, $custom-select-height);
-$custom-select-font-weight: var(--custom-select-font-weight, $custom-select-font-weight);
-$custom-select-line-height: var(--custom-select-line-height, $custom-select-line-height);
-$custom-select-color: var(--custom-select-color, $custom-select-color);
-$custom-select-disabled-color: var(--custom-select-disabled-color, $custom-select-disabled-color);
-$custom-select-bg: var(--custom-select-bg, $custom-select-bg);
-$custom-select-disabled-bg: var(--custom-select-disabled-bg, $custom-select-disabled-bg);
-$custom-select-indicator-color: var(--custom-select-indicator-color, $custom-select-indicator-color);
-$custom-select-indicator: var(--custom-select-indicator, $custom-select-indicator);
-$custom-select-feedback-icon-padding-right: var(--custom-select-feedback-icon-padding-right, $custom-select-feedback-icon-padding-right);
-$custom-select-feedback-icon-position: var(--custom-select-feedback-icon-position, $custom-select-feedback-icon-position);
-$custom-select-feedback-icon-size: var(--custom-select-feedback-icon-size, $custom-select-feedback-icon-size);
-$custom-select-border-width: var(--custom-select-border-width, $custom-select-border-width);
-$custom-select-border-color: var(--custom-select-border-color, $custom-select-border-color);
-$custom-select-border-radius: var(--custom-select-border-radius, $custom-select-border-radius);
-$custom-select-box-shadow: var(--custom-select-box-shadow, $custom-select-box-shadow);
-$custom-select-focus-border-color: var(--custom-select-focus-border-color, $custom-select-focus-border-color);
-$custom-select-focus-width: var(--custom-select-focus-width, $custom-select-focus-width);
-$custom-select-focus-box-shadow: var(--custom-select-focus-box-shadow, $custom-select-focus-box-shadow);
-$custom-select-padding-y-sm: var(--custom-select-padding-y-sm, $custom-select-padding-y-sm);
-$custom-select-padding-x-sm: var(--custom-select-padding-x-sm, $custom-select-padding-x-sm);
-$custom-select-font-size-sm: var(--custom-select-font-size-sm, $custom-select-font-size-sm);
-$custom-select-height-sm: var(--custom-select-height-sm, $custom-select-height-sm);
-$custom-select-padding-y-lg: var(--custom-select-padding-y-lg, $custom-select-padding-y-lg);
-$custom-select-padding-x-lg: var(--custom-select-padding-x-lg, $custom-select-padding-x-lg);
-$custom-select-font-size-lg: var(--custom-select-font-size-lg, $custom-select-font-size-lg);
-$custom-select-height-lg: var(--custom-select-height-lg, $custom-select-height-lg);
-$custom-range-track-width: var(--custom-range-track-width, $custom-range-track-width);
-$custom-range-track-height: var(--custom-range-track-height, $custom-range-track-height);
-$custom-range-track-cursor: var(--custom-range-track-cursor, $custom-range-track-cursor);
-$custom-range-track-bg: var(--custom-range-track-bg, $custom-range-track-bg);
-$custom-range-track-border-radius: var(--custom-range-track-border-radius, $custom-range-track-border-radius);
-$custom-range-track-box-shadow: var(--custom-range-track-box-shadow, $custom-range-track-box-shadow);
-$custom-range-thumb-width: var(--custom-range-thumb-width, $custom-range-thumb-width);
-$custom-range-thumb-height: var(--custom-range-thumb-height, $custom-range-thumb-height);
-$custom-range-thumb-bg: var(--custom-range-thumb-bg, $custom-range-thumb-bg);
-$custom-range-thumb-border: var(--custom-range-thumb-border, $custom-range-thumb-border);
-$custom-range-thumb-border-radius: var(--custom-range-thumb-border-radius, $custom-range-thumb-border-radius);
-$custom-range-thumb-box-shadow: var(--custom-range-thumb-box-shadow, $custom-range-thumb-box-shadow);
-$custom-range-thumb-focus-box-shadow: var(--custom-range-thumb-focus-box-shadow, $custom-range-thumb-focus-box-shadow);
-$custom-range-thumb-active-bg: var(--custom-range-thumb-active-bg, $custom-range-thumb-active-bg);
-$custom-range-thumb-disabled-bg: var(--custom-range-thumb-disabled-bg, $custom-range-thumb-disabled-bg);
-$custom-file-height: var(--custom-file-height, $custom-file-height);
-$custom-file-height-inner: var(--custom-file-height-inner, $custom-file-height-inner);
-$custom-file-focus-border-color: var(--custom-file-focus-border-color, $custom-file-focus-border-color);
-$custom-file-focus-box-shadow: var(--custom-file-focus-box-shadow, $custom-file-focus-box-shadow);
-$custom-file-disabled-bg: var(--custom-file-disabled-bg, $custom-file-disabled-bg);
-$custom-file-padding-y: var(--custom-file-padding-y, $custom-file-padding-y);
-$custom-file-padding-x: var(--custom-file-padding-x, $custom-file-padding-x);
-$custom-file-line-height: var(--custom-file-line-height, $custom-file-line-height);
-$custom-file-font-weight: var(--custom-file-font-weight, $custom-file-font-weight);
-$custom-file-color: var(--custom-file-color, $custom-file-color);
-$custom-file-bg: var(--custom-file-bg, $custom-file-bg);
-$custom-file-border-width: var(--custom-file-border-width, $custom-file-border-width);
-$custom-file-border-color: var(--custom-file-border-color, $custom-file-border-color);
-$custom-file-border-radius: var(--custom-file-border-radius, $custom-file-border-radius);
-$custom-file-box-shadow: var(--custom-file-box-shadow, $custom-file-box-shadow);
-$custom-file-button-color: var(--custom-file-button-color, $custom-file-button-color);
-$custom-file-button-bg: var(--custom-file-button-bg, $custom-file-button-bg);
-$form-feedback-margin-top: var(--form-feedback-margin-top, $form-feedback-margin-top);
-$form-feedback-font-size: var(--form-feedback-font-size, $form-feedback-font-size);
-$form-feedback-valid-color: var(--form-feedback-valid-color, $form-feedback-valid-color);
-$form-feedback-invalid-color: var(--form-feedback-invalid-color, $form-feedback-invalid-color);
-$form-feedback-icon-valid-color: var(--form-feedback-icon-valid-color, $form-feedback-icon-valid-color);
-$form-feedback-icon-valid: var(--form-feedback-icon-valid, $form-feedback-icon-valid);
-$form-feedback-icon-invalid-color: var(--form-feedback-icon-invalid-color, $form-feedback-icon-invalid-color);
-$form-feedback-icon-invalid: var(--form-feedback-icon-invalid, $form-feedback-icon-invalid);
-$dropdown-min-width: var(--dropdown-min-width, $dropdown-min-width);
-$dropdown-padding-y: var(--dropdown-padding-y, $dropdown-padding-y);
-$dropdown-spacer: var(--dropdown-spacer, $dropdown-spacer);
-$dropdown-bg: var(--dropdown-bg, $dropdown-bg);
-$dropdown-border-color: var(--dropdown-border-color, $dropdown-border-color);
-$dropdown-border-radius: var(--dropdown-border-radius, $dropdown-border-radius);
-$dropdown-border-width: var(--dropdown-border-width, $dropdown-border-width);
-$dropdown-inner-border-radius: var(--dropdown-inner-border-radius, $dropdown-inner-border-radius);
-$dropdown-divider-bg: var(--dropdown-divider-bg, $dropdown-divider-bg);
-$dropdown-box-shadow: var(--dropdown-box-shadow, $dropdown-box-shadow);
-$dropdown-link-color: var(--dropdown-link-color, $dropdown-link-color);
-$dropdown-link-hover-color: var(--dropdown-link-hover-color, $dropdown-link-hover-color);
-$dropdown-link-hover-bg: var(--dropdown-link-hover-bg, $dropdown-link-hover-bg);
-$dropdown-link-active-color: var(--dropdown-link-active-color, $dropdown-link-active-color);
-$dropdown-link-active-bg: var(--dropdown-link-active-bg, $dropdown-link-active-bg);
-$dropdown-link-disabled-color: var(--dropdown-link-disabled-color, $dropdown-link-disabled-color);
-$dropdown-item-padding-y: var(--dropdown-item-padding-y, $dropdown-item-padding-y);
-$dropdown-item-padding-x: var(--dropdown-item-padding-x, $dropdown-item-padding-x);
-$dropdown-header-color: var(--dropdown-header-color, $dropdown-header-color);
-$zindex-dropdown: var(--zindex-dropdown, $zindex-dropdown);
-$zindex-sticky: var(--zindex-sticky, $zindex-sticky);
-$zindex-fixed: var(--zindex-fixed, $zindex-fixed);
-$zindex-modal-backdrop: var(--zindex-modal-backdrop, $zindex-modal-backdrop);
-$zindex-modal: var(--zindex-modal, $zindex-modal);
-$zindex-popover: var(--zindex-popover, $zindex-popover);
-$zindex-tooltip: var(--zindex-tooltip, $zindex-tooltip);
-$nav-link-padding-y: var(--nav-link-padding-y, $nav-link-padding-y);
-$nav-link-padding-x: var(--nav-link-padding-x, $nav-link-padding-x);
-$nav-link-disabled-color: var(--nav-link-disabled-color, $nav-link-disabled-color);
-$nav-tabs-border-color: var(--nav-tabs-border-color, $nav-tabs-border-color);
-$nav-tabs-border-width: var(--nav-tabs-border-width, $nav-tabs-border-width);
-$nav-tabs-border-radius: var(--nav-tabs-border-radius, $nav-tabs-border-radius);
-$nav-tabs-link-hover-border-color: var(--nav-tabs-link-hover-border-color, $nav-tabs-link-hover-border-color);
-$nav-tabs-link-active-color: var(--nav-tabs-link-active-color, $nav-tabs-link-active-color);
-$nav-tabs-link-active-bg: var(--nav-tabs-link-active-bg, $nav-tabs-link-active-bg);
-$nav-tabs-link-active-border-color: var(--nav-tabs-link-active-border-color, $nav-tabs-link-active-border-color);
-$nav-pills-border-radius: var(--nav-pills-border-radius, $nav-pills-border-radius);
-$nav-pills-link-active-color: var(--nav-pills-link-active-color, $nav-pills-link-active-color);
-$nav-pills-link-active-bg: var(--nav-pills-link-active-bg, $nav-pills-link-active-bg);
-$nav-divider-color: var(--nav-divider-color, $nav-divider-color);
-$nav-divider-margin-y: var(--nav-divider-margin-y, $nav-divider-margin-y);
-$navbar-padding-y: var(--navbar-padding-y, $navbar-padding-y);
-$navbar-padding-x: var(--navbar-padding-x, $navbar-padding-x);
-$navbar-nav-link-padding-x: var(--navbar-nav-link-padding-x, $navbar-nav-link-padding-x);
-$navbar-brand-font-size: var(--navbar-brand-font-size, $navbar-brand-font-size);
-$nav-link-height: var(--nav-link-height, $nav-link-height);
-$navbar-brand-height: var(--navbar-brand-height, $navbar-brand-height);
-$navbar-brand-padding-y: var(--navbar-brand-padding-y, $navbar-brand-padding-y);
-$navbar-toggler-padding-y: var(--navbar-toggler-padding-y, $navbar-toggler-padding-y);
-$navbar-toggler-padding-x: var(--navbar-toggler-padding-x, $navbar-toggler-padding-x);
-$navbar-toggler-font-size: var(--navbar-toggler-font-size, $navbar-toggler-font-size);
-$navbar-toggler-border-radius: var(--navbar-toggler-border-radius, $navbar-toggler-border-radius);
-$navbar-dark-color: var(--navbar-dark-color, $navbar-dark-color);
-$navbar-dark-hover-color: var(--navbar-dark-hover-color, $navbar-dark-hover-color);
-$navbar-dark-active-color: var(--navbar-dark-active-color, $navbar-dark-active-color);
-$navbar-dark-disabled-color: var(--navbar-dark-disabled-color, $navbar-dark-disabled-color);
-$navbar-dark-toggler-icon-bg: var(--navbar-dark-toggler-icon-bg, $navbar-dark-toggler-icon-bg);
-$navbar-dark-toggler-border-color: var(--navbar-dark-toggler-border-color, $navbar-dark-toggler-border-color);
-$navbar-light-color: var(--navbar-light-color, $navbar-light-color);
-$navbar-light-hover-color: var(--navbar-light-hover-color, $navbar-light-hover-color);
-$navbar-light-active-color: var(--navbar-light-active-color, $navbar-light-active-color);
-$navbar-light-disabled-color: var(--navbar-light-disabled-color, $navbar-light-disabled-color);
-$navbar-light-toggler-icon-bg: var(--navbar-light-toggler-icon-bg, $navbar-light-toggler-icon-bg);
-$navbar-light-toggler-border-color: var(--navbar-light-toggler-border-color, $navbar-light-toggler-border-color);
-$navbar-light-brand-color: var(--navbar-light-brand-color, $navbar-light-brand-color);
-$navbar-light-brand-hover-color: var(--navbar-light-brand-hover-color, $navbar-light-brand-hover-color);
-$navbar-dark-brand-color: var(--navbar-dark-brand-color, $navbar-dark-brand-color);
-$navbar-dark-brand-hover-color: var(--navbar-dark-brand-hover-color, $navbar-dark-brand-hover-color);
-$pagination-padding-y: var(--pagination-padding-y, $pagination-padding-y);
-$pagination-padding-x: var(--pagination-padding-x, $pagination-padding-x);
-$pagination-padding-y-sm: var(--pagination-padding-y-sm, $pagination-padding-y-sm);
-$pagination-padding-x-sm: var(--pagination-padding-x-sm, $pagination-padding-x-sm);
-$pagination-padding-y-lg: var(--pagination-padding-y-lg, $pagination-padding-y-lg);
-$pagination-padding-x-lg: var(--pagination-padding-x-lg, $pagination-padding-x-lg);
-$pagination-line-height: var(--pagination-line-height, $pagination-line-height);
-$pagination-color: var(--pagination-color, $pagination-color);
-$pagination-bg: var(--pagination-bg, $pagination-bg);
-$pagination-border-width: var(--pagination-border-width, $pagination-border-width);
-$pagination-border-color: var(--pagination-border-color, $pagination-border-color);
-$pagination-focus-box-shadow: var(--pagination-focus-box-shadow, $pagination-focus-box-shadow);
-$pagination-focus-outline: var(--pagination-focus-outline, $pagination-focus-outline);
-$pagination-hover-color: var(--pagination-hover-color, $pagination-hover-color);
-$pagination-hover-bg: var(--pagination-hover-bg, $pagination-hover-bg);
-$pagination-hover-border-color: var(--pagination-hover-border-color, $pagination-hover-border-color);
-$pagination-active-color: var(--pagination-active-color, $pagination-active-color);
-$pagination-active-bg: var(--pagination-active-bg, $pagination-active-bg);
-$pagination-active-border-color: var(--pagination-active-border-color, $pagination-active-border-color);
-$pagination-disabled-color: var(--pagination-disabled-color, $pagination-disabled-color);
-$pagination-disabled-bg: var(--pagination-disabled-bg, $pagination-disabled-bg);
-$pagination-disabled-border-color: var(--pagination-disabled-border-color, $pagination-disabled-border-color);
-$jumbotron-padding: var(--jumbotron-padding, $jumbotron-padding);
-$jumbotron-bg: var(--jumbotron-bg, $jumbotron-bg);
-$card-spacer-y: var(--card-spacer-y, $card-spacer-y);
-$card-spacer-x: var(--card-spacer-x, $card-spacer-x);
-$card-border-width: var(--card-border-width, $card-border-width);
-$card-border-radius: var(--card-border-radius, $card-border-radius);
-$card-border-color: var(--card-border-color, $card-border-color);
-$card-inner-border-radius: var(--card-inner-border-radius, $card-inner-border-radius);
-$card-cap-bg: var(--card-cap-bg, $card-cap-bg);
-$card-cap-color: var(--card-cap-color, $card-cap-color);
-$card-bg: var(--card-bg, $card-bg);
-$card-img-overlay-padding: var(--card-img-overlay-padding, $card-img-overlay-padding);
-$card-group-margin: var(--card-group-margin, $card-group-margin);
-$card-deck-margin: var(--card-deck-margin, $card-deck-margin);
-$card-columns-count: var(--card-columns-count, $card-columns-count);
-$card-columns-gap: var(--card-columns-gap, $card-columns-gap);
-$card-columns-margin: var(--card-columns-margin, $card-columns-margin);
-$tooltip-font-size: var(--tooltip-font-size, $tooltip-font-size);
-$tooltip-max-width: var(--tooltip-max-width, $tooltip-max-width);
-$tooltip-color: var(--tooltip-color, $tooltip-color);
-$tooltip-bg: var(--tooltip-bg, $tooltip-bg);
-$tooltip-border-radius: var(--tooltip-border-radius, $tooltip-border-radius);
-$tooltip-opacity: var(--tooltip-opacity, $tooltip-opacity);
-$tooltip-padding-y: var(--tooltip-padding-y, $tooltip-padding-y);
-$tooltip-padding-x: var(--tooltip-padding-x, $tooltip-padding-x);
-$tooltip-margin: var(--tooltip-margin, $tooltip-margin);
-$tooltip-arrow-width: var(--tooltip-arrow-width, $tooltip-arrow-width);
-$tooltip-arrow-height: var(--tooltip-arrow-height, $tooltip-arrow-height);
-$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-arrow-color);
-$form-feedback-tooltip-padding-y: var(--form-feedback-tooltip-padding-y, $form-feedback-tooltip-padding-y);
-$form-feedback-tooltip-padding-x: var(--form-feedback-tooltip-padding-x, $form-feedback-tooltip-padding-x);
-$form-feedback-tooltip-font-size: var(--form-feedback-tooltip-font-size, $form-feedback-tooltip-font-size);
-$form-feedback-tooltip-line-height: var(--form-feedback-tooltip-line-height, $form-feedback-tooltip-line-height);
-$form-feedback-tooltip-opacity: var(--form-feedback-tooltip-opacity, $form-feedback-tooltip-opacity);
-$form-feedback-tooltip-border-radius: var(--form-feedback-tooltip-border-radius, $form-feedback-tooltip-border-radius);
-$popover-font-size: var(--popover-font-size, $popover-font-size);
-$popover-bg: var(--popover-bg, $popover-bg);
-$popover-max-width: var(--popover-max-width, $popover-max-width);
-$popover-border-width: var(--popover-border-width, $popover-border-width);
-$popover-border-color: var(--popover-border-color, $popover-border-color);
-$popover-border-radius: var(--popover-border-radius, $popover-border-radius);
-$popover-box-shadow: var(--popover-box-shadow, $popover-box-shadow);
-$popover-header-bg: var(--popover-header-bg, $popover-header-bg);
-$popover-header-color: var(--popover-header-color, $popover-header-color);
-$popover-header-padding-y: var(--popover-header-padding-y, $popover-header-padding-y);
-$popover-header-padding-x: var(--popover-header-padding-x, $popover-header-padding-x);
-$popover-body-color: var(--popover-body-color, $popover-body-color);
-$popover-body-padding-y: var(--popover-body-padding-y, $popover-body-padding-y);
-$popover-body-padding-x: var(--popover-body-padding-x, $popover-body-padding-x);
-$popover-arrow-width: var(--popover-arrow-width, $popover-arrow-width);
-$popover-arrow-height: var(--popover-arrow-height, $popover-arrow-height);
-$popover-arrow-color: var(--popover-arrow-color, $popover-arrow-color);
-$popover-arrow-outer-color: var(--popover-arrow-outer-color, $popover-arrow-outer-color);
-$toast-max-width: var(--toast-max-width, $toast-max-width);
-$toast-padding-x: var(--toast-padding-x, $toast-padding-x);
-$toast-padding-y: var(--toast-padding-y, $toast-padding-y);
-$toast-font-size: var(--toast-font-size, $toast-font-size);
-$toast-background-color: var(--toast-background-color, $toast-background-color);
-$toast-border-width: var(--toast-border-width, $toast-border-width);
-$toast-border-color: var(--toast-border-color, $toast-border-color);
-$toast-border-radius: var(--toast-border-radius, $toast-border-radius);
-$toast-box-shadow: var(--toast-box-shadow, $toast-box-shadow);
-$toast-header-color: var(--toast-header-color, $toast-header-color);
-$toast-header-background-color: var(--toast-header-background-color, $toast-header-background-color);
-$toast-header-border-color: var(--toast-header-border-color, $toast-header-border-color);
-$badge-font-size: var(--badge-font-size, $badge-font-size);
-$badge-font-weight: var(--badge-font-weight, $badge-font-weight);
-$badge-padding-y: var(--badge-padding-y, $badge-padding-y);
-$badge-padding-x: var(--badge-padding-x, $badge-padding-x);
-$badge-border-radius: var(--badge-border-radius, $badge-border-radius);
-$badge-pill-padding-x: var(--badge-pill-padding-x, $badge-pill-padding-x);
-$badge-pill-border-radius: var(--badge-pill-border-radius, $badge-pill-border-radius);
-$modal-inner-padding: var(--modal-inner-padding, $modal-inner-padding);
-$modal-dialog-margin: var(--modal-dialog-margin, $modal-dialog-margin);
-$modal-dialog-margin-y-sm-up: var(--modal-dialog-margin-y-sm-up, $modal-dialog-margin-y-sm-up);
-$modal-title-line-height: var(--modal-title-line-height, $modal-title-line-height);
-$modal-content-bg: var(--modal-content-bg, $modal-content-bg);
-$modal-content-border-color: var(--modal-content-border-color, $modal-content-border-color);
-$modal-content-border-width: var(--modal-content-border-width, $modal-content-border-width);
-$modal-content-border-radius: var(--modal-content-border-radius, $modal-content-border-radius);
-$modal-content-box-shadow-xs: var(--modal-content-box-shadow-xs, $modal-content-box-shadow-xs);
-$modal-content-box-shadow-sm-up: var(--modal-content-box-shadow-sm-up, $modal-content-box-shadow-sm-up);
-$modal-backdrop-bg: var(--modal-backdrop-bg, $modal-backdrop-bg);
-$modal-backdrop-opacity: var(--modal-backdrop-opacity, $modal-backdrop-opacity);
-$modal-header-border-color: var(--modal-header-border-color, $modal-header-border-color);
-$modal-footer-border-color: var(--modal-footer-border-color, $modal-footer-border-color);
-$modal-header-border-width: var(--modal-header-border-width, $modal-header-border-width);
-$modal-footer-border-width: var(--modal-footer-border-width, $modal-footer-border-width);
-$modal-header-padding-y: var(--modal-header-padding-y, $modal-header-padding-y);
-$modal-header-padding-x: var(--modal-header-padding-x, $modal-header-padding-x);
-$modal-xl: var(--modal-xl, $modal-xl);
-$modal-lg: var(--modal-lg, $modal-lg);
-$modal-md: var(--modal-md, $modal-md);
-$modal-sm: var(--modal-sm, $modal-sm);
-$modal-fade-transform: var(--modal-fade-transform, $modal-fade-transform);
-$modal-show-transform: var(--modal-show-transform, $modal-show-transform);
-$modal-transition: var(--modal-transition, $modal-transition);
-$alert-padding-y: var(--alert-padding-y, $alert-padding-y);
-$alert-padding-x: var(--alert-padding-x, $alert-padding-x);
-$alert-margin-bottom: var(--alert-margin-bottom, $alert-margin-bottom);
-$alert-border-radius: var(--alert-border-radius, $alert-border-radius);
-$alert-link-font-weight: var(--alert-link-font-weight, $alert-link-font-weight);
-$alert-border-width: var(--alert-border-width, $alert-border-width);
-$alert-bg-level: var(--alert-bg-level, $alert-bg-level);
-$alert-border-level: var(--alert-border-level, $alert-border-level);
-$alert-color-level: var(--alert-color-level, $alert-color-level);
-$progress-height: var(--progress-height, $progress-height);
-$progress-font-size: var(--progress-font-size, $progress-font-size);
-$progress-bg: var(--progress-bg, $progress-bg);
-$progress-border-radius: var(--progress-border-radius, $progress-border-radius);
-$progress-box-shadow: var(--progress-box-shadow, $progress-box-shadow);
-$progress-bar-color: var(--progress-bar-color, $progress-bar-color);
-$progress-bar-bg: var(--progress-bar-bg, $progress-bar-bg);
-$progress-bar-animation-timing: var(--progress-bar-animation-timing, $progress-bar-animation-timing);
-$progress-bar-transition: var(--progress-bar-transition, $progress-bar-transition);
-$list-group-bg: var(--list-group-bg, $list-group-bg);
-$list-group-border-color: var(--list-group-border-color, $list-group-border-color);
-$list-group-border-width: var(--list-group-border-width, $list-group-border-width);
-$list-group-border-radius: var(--list-group-border-radius, $list-group-border-radius);
-$list-group-item-padding-y: var(--list-group-item-padding-y, $list-group-item-padding-y);
-$list-group-item-padding-x: var(--list-group-item-padding-x, $list-group-item-padding-x);
-$list-group-hover-bg: var(--list-group-hover-bg, $list-group-hover-bg);
-$list-group-active-color: var(--list-group-active-color, $list-group-active-color);
-$list-group-active-bg: var(--list-group-active-bg, $list-group-active-bg);
-$list-group-active-border-color: var(--list-group-active-border-color, $list-group-active-border-color);
-$list-group-disabled-color: var(--list-group-disabled-color, $list-group-disabled-color);
-$list-group-disabled-bg: var(--list-group-disabled-bg, $list-group-disabled-bg);
-$list-group-action-color: var(--list-group-action-color, $list-group-action-color);
-$list-group-action-hover-color: var(--list-group-action-hover-color, $list-group-action-hover-color);
-$list-group-action-active-color: var(--list-group-action-active-color, $list-group-action-active-color);
-$list-group-action-active-bg: var(--list-group-action-active-bg, $list-group-action-active-bg);
-$thumbnail-padding: var(--thumbnail-padding, $thumbnail-padding);
-$thumbnail-bg: var(--thumbnail-bg, $thumbnail-bg);
-$thumbnail-border-width: var(--thumbnail-border-width, $thumbnail-border-width);
-$thumbnail-border-color: var(--thumbnail-border-color, $thumbnail-border-color);
-$thumbnail-border-radius: var(--thumbnail-border-radius, $thumbnail-border-radius);
-$thumbnail-box-shadow: var(--thumbnail-box-shadow, $thumbnail-box-shadow);
-$figure-caption-font-size: var(--figure-caption-font-size, $figure-caption-font-size);
-$figure-caption-color: var(--figure-caption-color, $figure-caption-color);
-$breadcrumb-padding-y: var(--breadcrumb-padding-y, $breadcrumb-padding-y);
-$breadcrumb-padding-x: var(--breadcrumb-padding-x, $breadcrumb-padding-x);
-$breadcrumb-item-padding: var(--breadcrumb-item-padding, $breadcrumb-item-padding);
-$breadcrumb-margin-bottom: var(--breadcrumb-margin-bottom, $breadcrumb-margin-bottom);
-$breadcrumb-bg: var(--breadcrumb-bg, $breadcrumb-bg);
-$breadcrumb-divider-color: var(--breadcrumb-divider-color, $breadcrumb-divider-color);
-$breadcrumb-active-color: var(--breadcrumb-active-color, $breadcrumb-active-color);
-$breadcrumb-divider: var(--breadcrumb-divider, $breadcrumb-divider);
-$breadcrumb-border-radius: var(--breadcrumb-border-radius, $breadcrumb-border-radius);
-$carousel-control-color: var(--carousel-control-color, $carousel-control-color);
-$carousel-control-width: var(--carousel-control-width, $carousel-control-width);
-$carousel-control-opacity: var(--carousel-control-opacity, $carousel-control-opacity);
-$carousel-control-hover-opacity: var(--carousel-control-hover-opacity, $carousel-control-hover-opacity);
-$carousel-control-transition: var(--carousel-control-transition, $carousel-control-transition);
-$carousel-indicator-width: var(--carousel-indicator-width, $carousel-indicator-width);
-$carousel-indicator-height: var(--carousel-indicator-height, $carousel-indicator-height);
-$carousel-indicator-hit-area-height: var(--carousel-indicator-hit-area-height, $carousel-indicator-hit-area-height);
-$carousel-indicator-spacer: var(--carousel-indicator-spacer, $carousel-indicator-spacer);
-$carousel-indicator-active-bg: var(--carousel-indicator-active-bg, $carousel-indicator-active-bg);
-$carousel-indicator-transition: var(--carousel-indicator-transition, $carousel-indicator-transition);
-$carousel-caption-width: var(--carousel-caption-width, $carousel-caption-width);
-$carousel-caption-color: var(--carousel-caption-color, $carousel-caption-color);
-$carousel-control-icon-width: var(--carousel-control-icon-width, $carousel-control-icon-width);
-$carousel-control-prev-icon-bg: var(--carousel-control-prev-icon-bg, $carousel-control-prev-icon-bg);
-$carousel-control-next-icon-bg: var(--carousel-control-next-icon-bg, $carousel-control-next-icon-bg);
-$carousel-transition-duration: var(--carousel-transition-duration, $carousel-transition-duration);
-$spinner-width: var(--spinner-width, $spinner-width);
-$spinner-height: var(--spinner-height, $spinner-height);
-$spinner-border-width: var(--spinner-border-width, $spinner-border-width);
-$spinner-width-sm: var(--spinner-width-sm, $spinner-width-sm);
-$spinner-height-sm: var(--spinner-height-sm, $spinner-height-sm);
-$spinner-border-width-sm: var(--spinner-border-width-sm, $spinner-border-width-sm);
-$close-font-size: var(--close-font-size, $close-font-size);
-$close-font-weight: var(--close-font-weight, $close-font-weight);
-$close-color: var(--close-color, $close-color);
-$close-text-shadow: var(--close-text-shadow, $close-text-shadow);
-$code-font-size: var(--code-font-size, $code-font-size);
-$code-color: var(--code-color, $code-color);
-$kbd-padding-y: var(--kbd-padding-y, $kbd-padding-y);
-$kbd-padding-x: var(--kbd-padding-x, $kbd-padding-x);
-$kbd-font-size: var(--kbd-font-size, $kbd-font-size);
-$kbd-color: var(--kbd-color, $kbd-color);
-$kbd-bg: var(--kbd-bg, $kbd-bg);
-$pre-color: var(--pre-color, $pre-color);
-$pre-scrollable-max-height: var(--pre-scrollable-max-height, $pre-scrollable-max-height);
-$overflows: var(--overflows, $overflows);
-$positions: var(--positions, $positions);
-$print-page-size: var(--print-page-size, $print-page-size);
-$print-body-min-width: var(--print-body-min-width, $print-body-min-width);

frappe/public/scss/generate_css_variables_from_sass.js

@@ -1,44 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const args = {}
-
-process.argv
-    .slice(2)
-    .map((v, i) => {
-        if (v.startsWith('--')) {
-            const key = v.slice(2)
-            args[key] = process.argv[(i + 2) + 1]
-        }
-    });
-
-run({
-    src: '/Users/netchampfaris/frappe-bench3/apps/frappe/node_modules/bootstrap/scss/_variables.scss',
-    outpath: '/Users/netchampfaris/frappe-bench3/apps/frappe/frappe/public/scss/css_variables.scss'
-})
-
-
-function run({ src: file_path, outpath }) {
-    const blacklisted_keywords = ['grid-columns',
-        '() !default', 'true !default', 'false !default', 'table-border-width',
-        'yiq', 'table-bg-level', 'theme-color-interval'
-    ]
-
-    const filecontents = fs.readFileSync(file_path, { encoding: 'utf-8' })
-    const output  = [];
-
-    const lineSplit = filecontents.split('\n');
-
-    for (let line of lineSplit) {
-        if (line.startsWith('$') && line.endsWith(';') && !blacklisted_keywords.some(k => line.includes(k))) {
-            const match = line.match(/\$([\w\-]+):/);
-            if (match) {
-                const variable_name = match[1];
-                const output_line = `$${variable_name}: var(--${variable_name}, $${variable_name});`
-                output.push(output_line);
-            }
-        }
-    }
-
-    const outputContent = output.join('\n');
-    fs.writeFileSync(outpath, outputContent, { encoding: 'utf-8' })
-}

frappe/public/scss/website.scss

@@ -1,7 +1,6 @@
-@import "variables";
+@import "~bootstrap/scss/bootstrap";
 @import "multilevel-dropdown";
 
-
 body {
 	font-size: 16px;
 }

frappe/templates/base.html

@@ -24,6 +24,13 @@
 		{% if head_html is defined -%}
 		{{ head_html or "" }}
 		{%- endif %}
+
+		{% if theme.css_file_url %}
+		<link type="text/css" rel="stylesheet" href="{{ theme.css_file_url }}">
+		{% else %}
+		<link type="text/css" rel="stylesheet" href="/assets/css/frappe-web-b4.css">
+		{% endif %}
+
 		{%- for link in web_include_css %}
 		<link type="text/css" rel="stylesheet" href="{{ link|abs_url }}">
 		{%- endfor -%}

frappe/website/doctype/website_theme/website_theme.js

@@ -7,25 +7,31 @@ $.extend(frappe.website_theme, {
 		"footer_color", "footer_text_color", "text_color", "link_color"]
 });
 
-frappe.ui.form.on("Website Theme", "onload_post_render", function(frm) {
-	frappe.require('assets/frappe/js/lib/jscolor/jscolor.js', function() {
-		$.each(frappe.website_theme.color_variables, function(i, v) {
-			$(frm.fields_dict[v].input).addClass('color {required:false,hash:true}');
+frappe.ui.form.on('Website Theme', {
+	onload_post_render(frm) {
+		frappe.require('assets/frappe/js/lib/jscolor/jscolor.js', function() {
+			$.each(frappe.website_theme.color_variables, function(i, v) {
+				$(frm.fields_dict[v].input).addClass('color {required:false,hash:true}');
+			});
+			jscolor.bind();
 		});
-		jscolor.bind();
-	});
-});
-
-frappe.ui.form.on("Website Theme", "refresh", function(frm) {
-	frm.set_intro(__('Default theme is set in {0}', ['<a href="#Form/Website Settings">'
-		+ __('Website Settings') + '</a>']));
+	},
+	refresh(frm) {
+		frm.set_intro(__('Default theme is set in {0}', ['<a href="#Form/Website Settings">'
+			+ __('Website Settings') + '</a>']));
 
-	frm.toggle_display(["module", "custom"], !frappe.boot.developer_mode);
+		frm.toggle_display(["module", "custom"], !frappe.boot.developer_mode);
 
-	if (!frm.doc.custom && !frappe.boot.developer_mode) {
-		frm.set_read_only();
-		frm.disable_save();
-	} else {
-		frm.enable_save();
+		if (!frm.doc.custom && !frappe.boot.developer_mode) {
+			frm.set_read_only();
+			frm.disable_save();
+		} else {
+			frm.enable_save();
+		}
+	},
+	generate_theme(frm) {
+		frappe.call('frappe.website.doctype.website_theme.website_theme.generate_bootstrap_theme', {
+			website_theme: frm.doc.name
+		})
 	}
-});
+})

frappe/website/doctype/website_theme/website_theme.json

@@ -1,5 +1,6 @@
 {
  "allow_copy": 0,
+ "allow_events_in_timeline": 0,
  "allow_guest_to_view": 0,
  "allow_import": 1,
  "allow_rename": 0,
@@ -905,6 +906,136 @@
    "set_only_once": 0,
    "translatable": 0,
    "unique": 0
+  },
+  {
+   "allow_bulk_edit": 0,
+   "allow_in_quick_entry": 0,
+   "allow_on_submit": 0,
+   "bold": 0,
+   "collapsible": 0,
+   "columns": 0,
+   "fieldname": "advanced_section",
+   "fieldtype": "Section Break",
+   "hidden": 0,
+   "ignore_user_permissions": 0,
+   "ignore_xss_filter": 0,
+   "in_filter": 0,
+   "in_global_search": 0,
+   "in_list_view": 0,
+   "in_standard_filter": 0,
+   "label": "Advanced",
+   "length": 0,
+   "no_copy": 0,
+   "permlevel": 0,
+   "precision": "",
+   "print_hide": 0,
+   "print_hide_if_no_value": 0,
+   "read_only": 0,
+   "remember_last_selected_value": 0,
+   "report_hide": 0,
+   "reqd": 0,
+   "search_index": 0,
+   "set_only_once": 0,
+   "translatable": 0,
+   "unique": 0
+  },
+  {
+   "allow_bulk_edit": 0,
+   "allow_in_quick_entry": 0,
+   "allow_on_submit": 0,
+   "bold": 0,
+   "collapsible": 0,
+   "columns": 0,
+   "fieldname": "customize_bootstrap_4",
+   "fieldtype": "Code",
+   "hidden": 0,
+   "ignore_user_permissions": 0,
+   "ignore_xss_filter": 0,
+   "in_filter": 0,
+   "in_global_search": 0,
+   "in_list_view": 0,
+   "in_standard_filter": 0,
+   "label": "Customize Bootstrap 4",
+   "length": 0,
+   "no_copy": 0,
+   "options": "SCSS",
+   "permlevel": 0,
+   "precision": "",
+   "print_hide": 0,
+   "print_hide_if_no_value": 0,
+   "read_only": 0,
+   "remember_last_selected_value": 0,
+   "report_hide": 0,
+   "reqd": 0,
+   "search_index": 0,
+   "set_only_once": 0,
+   "translatable": 0,
+   "unique": 0
+  },
+  {
+   "allow_bulk_edit": 0,
+   "allow_in_quick_entry": 0,
+   "allow_on_submit": 0,
+   "bold": 0,
+   "collapsible": 0,
+   "columns": 0,
+   "fieldname": "generate_theme",
+   "fieldtype": "Button",
+   "hidden": 0,
+   "ignore_user_permissions": 0,
+   "ignore_xss_filter": 0,
+   "in_filter": 0,
+   "in_global_search": 0,
+   "in_list_view": 0,
+   "in_standard_filter": 0,
+   "label": "Generate Theme",
+   "length": 0,
+   "no_copy": 0,
+   "options": "",
+   "permlevel": 0,
+   "precision": "",
+   "print_hide": 0,
+   "print_hide_if_no_value": 0,
+   "read_only": 0,
+   "remember_last_selected_value": 0,
+   "report_hide": 0,
+   "reqd": 0,
+   "search_index": 0,
+   "set_only_once": 0,
+   "translatable": 0,
+   "unique": 0
+  },
+  {
+   "allow_bulk_edit": 0,
+   "allow_in_quick_entry": 0,
+   "allow_on_submit": 0,
+   "bold": 0,
+   "collapsible": 0,
+   "columns": 0,
+   "fieldname": "css_file_url",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "ignore_user_permissions": 0,
+   "ignore_xss_filter": 0,
+   "in_filter": 0,
+   "in_global_search": 0,
+   "in_list_view": 0,
+   "in_standard_filter": 0,
+   "label": "CSS File URL",
+   "length": 0,
+   "no_copy": 0,
+   "permlevel": 0,
+   "precision": "",
+   "print_hide": 0,
+   "print_hide_if_no_value": 0,
+   "read_only": 0,
+   "remember_last_selected_value": 0,
+   "report_hide": 0,
+   "reqd": 0,
+   "search_index": 0,
+   "set_only_once": 0,
+   "translatable": 0,
+   "unique": 0
   }
  ],
  "has_web_view": 0,
@@ -917,7 +1048,7 @@
  "issingle": 0,
  "istable": 0,
  "max_attachments": 0,
- "modified": "2018-08-16 06:00:32.415458",
+ "modified": "2019-01-27 15:53:15.259434",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Website Theme",

frappe/website/doctype/website_theme/website_theme.py

@@ -85,3 +85,16 @@ def get_active_theme():
 			return frappe.get_doc("Website Theme", website_theme)
 		except frappe.DoesNotExistError:
 			pass
+
+@frappe.whitelist()
+def generate_bootstrap_theme(website_theme):
+	doc = frappe.get_doc('Website Theme', website_theme)
+	file_name = frappe.scrub(doc.name) + '.css'
+	content = doc.customize_bootstrap_4
+	content = content.replace('\n', '\\n')
+
+	command = ['node', 'generate_bootstrap_theme.js', file_name, content]
+	frappe.commands.popen(command, cwd=frappe.get_app_path('frappe', '..'), shell=False)
+
+	doc.css_file_url = 'assets/frappe/website_theme/' + file_name
+	doc.save()

generate_bootstrap_theme.js

@@ -0,0 +1,42 @@
+const sass = require('node-sass');
+const fs = require('fs');
+const path = require('path');
+const { get_public_path } = require('./rollup/rollup.utils');
+
+const node_modules_path = path.resolve(get_public_path('frappe'), 'node_modules');
+const scss_path = path.resolve(get_public_path('frappe'), 'scss');
+const website_theme_path = path.resolve(get_public_path('frappe'), 'website_theme');
+const custom_theme_name = process.argv[2];
+let scss_content = process.argv[3];
+scss_content = scss_content.replace(/\\n/g, '\n');
+
+sass.render({
+	data: scss_content,
+	includePaths: [
+		node_modules_path,
+		scss_path
+	],
+	importer: function(url, prev, done) {
+		if (url.startsWith('~')) {
+			// strip ~ so that it can resolve from node_modules
+			return {
+				file: url.slice(1)
+			}
+		}
+		// normal file, let it go
+		return {
+			file: url
+		}
+	}
+}, function(err, result) {
+	if (err) {
+		console.error(err)
+		return;
+	}
+
+	fs.writeFile(path.resolve(website_theme_path, custom_theme_name), result.css, function(err) {
+		if (!err) {
+			console.log(custom_theme_name)
+		}
+	});
+});