Фон

$blue:#0d6efd;$indigo:#6610f2;$purple:#6f42c1;$pink:#d63384;$red:#dc3545;$orange:#fd7e14;$yellow:#ffc107;$green:#198754;$teal:#20c997;$cyan:#0dcaf0;

$primary:$blue;$secondary:$gray-600;$success:$green;$info:$cyan;$warning:$yellow;$danger:$red;$light:$gray-100;$dark:$gray-900;

$gradient:linear-gradient(180deg,rgba($white,.15),rgba($white,0));

$white:#fff;$gray-100:#f8f9fa;$gray-200:#e9ecef;$gray-300:#dee2e6;$gray-400:#ced4da;$gray-500:#adb5bd;$gray-600:#6c757d;$gray-700:#495057;$gray-800:#343a40;$gray-900:#212529;$black:#000;

$primary-bg-subtle:tint-color($primary,80%);$secondary-bg-subtle:tint-color($secondary,80%);$success-bg-subtle:tint-color($success,80%);$info-bg-subtle:tint-color($info,80%);$warning-bg-subtle:tint-color($warning,80%);$danger-bg-subtle:tint-color($danger,80%);$light-bg-subtle:mix($gray-100,$white);$dark-bg-subtle:$gray-400;

$primary-bg-subtle-dark:shade-color($primary,80%);$secondary-bg-subtle-dark:shade-color($secondary,80%);$success-bg-subtle-dark:shade-color($success,80%);$info-bg-subtle-dark:shade-color($info,80%);$warning-bg-subtle-dark:shade-color($warning,80%);$danger-bg-subtle-dark:shade-color($danger,80%);$light-bg-subtle-dark:$gray-800;$dark-bg-subtle-dark:mix($gray-800,$black);

$theme-colors:("primary":$primary,"secondary":$secondary,"success":$success,"info":$info,"warning":$warning,"danger":$danger,"light":$light,"dark":$dark);

$grays:("100":$gray-100,"200":$gray-200,"300":$gray-300,"400":$gray-400,"500":$gray-500,"600":$gray-600,"700":$gray-700,"800":$gray-800,"900":$gray-900);

$theme-colors-rgb:map-loop($theme-colors,to-rgb,"$value");

$utilities-bg:map-merge($utilities-colors,("black":to-rgb($black),"white":to-rgb($white),"body":to-rgb($body-bg)));$utilities-bg-colors:map-loop($utilities-bg,rgba-css-var,"$key","bg");$utilities-bg-subtle:("primary-subtle":var(--#{$prefix}primary-bg-subtle),"secondary-subtle":var(--#{$prefix}secondary-bg-subtle),"success-subtle":var(--#{$prefix}success-bg-subtle),"info-subtle":var(--#{$prefix}info-bg-subtle),"warning-subtle":var(--#{$prefix}warning-bg-subtle),"danger-subtle":var(--#{$prefix}danger-bg-subtle),"light-subtle":var(--#{$prefix}light-bg-subtle),"dark-subtle":var(--#{$prefix}dark-bg-subtle));

$theme-colors-bg-subtle:("primary":$primary-bg-subtle,"secondary":$secondary-bg-subtle,"success":$success-bg-subtle,"info":$info-bg-subtle,"warning":$warning-bg-subtle,"danger":$danger-bg-subtle,"light":$light-bg-subtle,"dark":$dark-bg-subtle,);

$theme-colors-bg-subtle-dark:("primary":$primary-bg-subtle-dark,"secondary":$secondary-bg-subtle-dark,"success":$success-bg-subtle-dark,"info":$info-bg-subtle-dark,"warning":$warning-bg-subtle-dark,"danger":$danger-bg-subtle-dark,"light":$light-bg-subtle-dark,"dark":$dark-bg-subtle-dark,);

@mixin gradient-bg($color:null){background-color:$color;@if$enable-gradients{background-image:var(--#{$prefix}gradient);}}

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color:$gray-700,$end-color:$gray-800,$start-percent:0%,$end-percent:100%){background-image:linear-gradient(toright,$start-color$start-percent,$end-color$end-percent);}// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color:$gray-700,$end-color:$gray-800,$start-percent:null,$end-percent:null){background-image:linear-gradient(tobottom,$start-color$start-percent,$end-color$end-percent);}@mixin gradient-directional($start-color:$gray-700,$end-color:$gray-800,$deg:45deg){background-image:linear-gradient($deg,$start-color,$end-color);}@mixin gradient-x-three-colors($start-color:$blue,$mid-color:$purple,$color-stop:50%,$end-color:$red){background-image:linear-gradient(toright,$start-color,$mid-color$color-stop,$end-color);}@mixin gradient-y-three-colors($start-color:$blue,$mid-color:$purple,$color-stop:50%,$end-color:$red){background-image:linear-gradient($start-color,$mid-color$color-stop,$end-color);}@mixin gradient-radial($inner-color:$gray-700,$outer-color:$gray-800){background-image:radial-gradient(circle,$inner-color,$outer-color);}@mixin gradient-striped($color:rgba($white,.15),$angle:45deg){background-image:linear-gradient($angle,$color25%,transparent25%,transparent50%,$color50%,$color75%,transparent75%,transparent);}

"background-color":(property:background-color,class:bg,local-vars:("bg-opacity":1),values:map-merge($utilities-bg-colors,("transparent":transparent,"body-secondary":rgba(var(--#{$prefix}secondary-bg-rgb),var(--#{$prefix}bg-opacity)),"body-tertiary":rgba(var(--#{$prefix}tertiary-bg-rgb),var(--#{$prefix}bg-opacity)),))),"bg-opacity":(css-var:true,class:bg-opacity,values:(10:.1,25:.25,50:.5,75:.75,100:1)),"subtle-background-color":(property:background-color,class:bg,values:$utilities-bg-subtle),