mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 12:59:05 +02:00
Code Issues Releases Wiki Activity

v6: Don't disallow calc (#41681)

Browse Source 
* Don't disallow calc()

* Remove disables that aren't needed

* Remove custom subtract and add functions

* Remove more disables

* keep it here
This commit is contained in:
Mark Otto
2025-08-26 21:34:58 -07:00
committed by Mark Otto
parent 8d9e3d122e
commit f9052f47c6
21 changed files with 55 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.stylelintrc.json
View File

@@ -13,7 +13,6 @@
"outline": "none"
},
"function-disallowed-list": [
"calc",
"lighten",
"darken"
],

2
scss/_accordion.scss
View File

@@ -46,7 +46,7 @@
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
background-color: var(--#{$prefix}accordion-active-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
&::after {
background-image: var(--#{$prefix}accordion-btn-active-icon);

4
scss/_button-group.scss
View File

@@ -39,7 +39,7 @@
// Prevent double borders when buttons are next to each other
> :not(.btn-check:first-child) + .btn,
> .btn-group:not(:first-child) {
margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * #{$btn-border-width});
}
// Reset rounded corners
@@ -126,7 +126,7 @@
> .btn:not(:first-child),
> .btn-group:not(:first-child) {
margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * #{$btn-border-width});
}
// Reset rounded corners

12
scss/_card.scss
View File

@@ -80,7 +80,7 @@
}
.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
}
@@ -132,9 +132,9 @@
//
.card-header-tabs {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
border-bottom: 0;
.nav-link.active {
@@ -144,8 +144,8 @@
}
.card-header-pills {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
}
// Card image

41
scss/_functions.scss
View File

@@ -218,47 +218,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
// scss-docs-end color-functions
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);

4
scss/_list-group.scss
View File

@@ -84,7 +84,7 @@
border-top-width: 0;
&.active {
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
border-top-width: var(--#{$prefix}list-group-border-width);
}
}
@@ -148,7 +148,7 @@
border-left-width: 0;
&.active {
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
border-left-width: var(--#{$prefix}list-group-border-width);
}
}

2
scss/_modal.scss
View File

@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal

4
scss/_nav.scss
View File

@@ -70,7 +70,7 @@
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
.nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
@@ -91,7 +91,7 @@
.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}

2
scss/_offcanvas.scss
View File

@@ -1,5 +1,3 @@
// stylelint-disable function-disallowed-list
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};

18
scss/_popover.scss
View File

@@ -56,11 +56,11 @@
.bs-popover-top {
> .popover-arrow {
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
}
&::before {
@@ -78,13 +78,13 @@
/* rtl:begin:ignore */
.bs-popover-end {
> .popover-arrow {
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
}
&::before {
@@ -103,11 +103,11 @@
.bs-popover-bottom {
> .popover-arrow {
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
}
&::before {
@@ -128,7 +128,7 @@
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
content: "";
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
@@ -137,13 +137,13 @@
/* rtl:begin:ignore */
.bs-popover-start {
> .popover-arrow {
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
width: var(--#{$prefix}popover-arrow-height);
height: var(--#{$prefix}popover-arrow-width);
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
}
&::before {

2
scss/_tables.scss
View File

@@ -49,7 +49,7 @@
}
.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
}
//

2
scss/_toasts.scss
View File

@@ -62,7 +62,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
.btn-close {
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
margin-left: var(--#{$prefix}toast-padding-x);
}
}

16
scss/_tooltip.scss
View File

@@ -44,24 +44,24 @@
}
.bs-tooltip-top .tooltip-arrow {
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
&::before {
top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
border-top-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow {
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
right: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
border-right-color: var(--#{$prefix}tooltip-bg);
}
}
@@ -69,24 +69,24 @@
/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow {
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
&::before {
bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow {
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width);
&::before {
left: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
border-left-color: var(--#{$prefix}tooltip-bg);
}
}

16
scss/_variables.scss
View File

@@ -586,7 +586,6 @@ $transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
$aspect-ratios: (
"1x1": 100%,
@@ -595,7 +594,6 @@ $aspect-ratios: (
"21x9": calc(9 / 21 * 100%)
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list
// Typography
//
@@ -920,7 +918,7 @@ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-border: calc(#{$input-border-width} * 2) !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
@@ -1245,7 +1243,7 @@ $dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
@@ -1302,7 +1300,7 @@ $pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
@@ -1348,7 +1346,7 @@ $card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
@@ -1370,7 +1368,7 @@ $accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
@@ -1438,7 +1436,7 @@ $popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default;
@@ -1512,7 +1510,7 @@ $modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;

2
scss/forms/_input-group.scss
View File

@@ -121,7 +121,7 @@
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
margin-left: calc(-1 * #{$input-border-width});
@include border-start-radius(0);
}

4
scss/mixins/_container.scss
View File

@@ -4,8 +4,8 @@
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}

10
scss/mixins/_grid.scss
View File

@@ -8,9 +8,9 @@
display: flex;
flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}gutter-y));
margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
}
@mixin make-col-ready() {
@@ -22,8 +22,8 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-right: calc(var(--#{$prefix}gutter-x) * .5);
padding-left: calc(var(--#{$prefix}gutter-x) * .5);
margin-top: var(--#{$prefix}gutter-y);
}

4
site/src/scss/_component-examples.scss
View File

@@ -93,13 +93,13 @@
.fixed-top,
.sticky-top {
position: static;
margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
}
.fixed-bottom,
.sticky-bottom {
position: static;
margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
}

2
site/src/scss/_sidebar.scss
View File

@@ -5,7 +5,7 @@
// Override collapse behaviors
// stylelint-disable-next-line declaration-no-important
display: block !important;
height: subtract(100vh, 6rem);
height: calc(100vh - 6rem);
// Prevent focus styles to be cut off:
padding-left: .25rem;
margin-left: -.25rem;

2
site/src/scss/_toc.scss
View File

@@ -9,7 +9,7 @@
top: 5rem;
right: 0;
z-index: 2;
height: subtract(100vh, 7rem);
height: calc(100vh - 7rem);
overflow-y: auto;
}

6
site/src/scss/_variables.scss
View File

@@ -1,7 +1,9 @@
// stylelint-disable function-disallowed-list
// Local docs variables
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%);
$bd-accent: #ffe484;
$bd-gutter-x: 3rem;