Skip to content

Commit 70a6483

Browse files
MaxLardenoisMaxLardenois
authored
feat: Update bg-* utilities with bg and surface (#3260)
1 parent dbfaa89 commit 70a6483

File tree

16 files changed

+325
-158
lines changed

16 files changed

+325
-158
lines changed

‎js/tests/visual/toast.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
2828
<div class="notifications">
2929
<div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
3030
<div class="toast-header">
31-
<span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
31+
<span class="d-block bg-surface-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
3232
<strong class="me-auto">Bootstrap</strong>
3333
<small>11 mins ago</small>
3434
</div>
@@ -39,7 +39,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
3939

4040
<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
4141
<div class="toast-header">
42-
<span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
42+
<span class="d-block bg-surface-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
4343
<strong class="me-auto">Bootstrap</strong>
4444
<small class="text-muted">2 seconds ago</small>
4545
<button type="button" class="ms-small mb-2xsmall btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->

‎scss/_maps.scss‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -141,31 +141,39 @@ $ouds-opacities: (
141141
// scss-docs-end ouds-maps-opacities
142142

143143
// scss-docs-start ouds-maps-backgrounds
144-
$ouds-backgrounds: (
144+
$ouds-backgrounds-with-color: (
145+
"surface-brand-primary": var(--#{$prefix}color-surface-brand-primary),
146+
"surface-brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null),
147+
"surface-brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null),
148+
"surface-status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
149+
"surface-status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
150+
"surface-status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
151+
"surface-status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
152+
"surface-status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
153+
"surface-status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
154+
"surface-status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
155+
"surface-status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
156+
"surface-status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
157+
"surface-status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
158+
"always-black": var(--#{$prefix}color-always-black),
159+
"always-white": var(--#{$prefix}color-always-white),
160+
) !default;
161+
$ouds-backgrounds-without-color: (
145162
"primary": var(--#{$prefix}color-bg-primary),
146163
"secondary": var(--#{$prefix}color-bg-secondary),
147164
"tertiary": var(--#{$prefix}color-bg-tertiary),
148-
"brand-primary": var(--#{$prefix}color-surface-brand-primary),
149-
"brand-secondary": if(variable-exists(ouds-color-surface-brand-secondary-light), var(--#{$prefix}color-surface-brand-secondary), null),
150-
"brand-tertiary": if(variable-exists(ouds-color-surface-brand-tertiary-light), var(--#{$prefix}color-surface-brand-tertiary), null),
151-
"inverse-high": var(--#{$prefix}color-surface-inverse-high),
152-
"inverse-low": var(--#{$prefix}color-surface-inverse-low),
153-
"status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
154-
"status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
155-
"status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
156-
"status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
157-
"status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
158-
"status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
159-
"status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
160-
"status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
161-
"status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
162-
"status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
163-
"always-black": var(--#{$prefix}color-always-black),
164-
"always-white": var(--#{$prefix}color-always-white),
165+
"inverse-high": var(--#{$prefix}color-bg-inverse-high),
166+
"inverse-low": var(--#{$prefix}color-bg-inverse-low),
167+
"surface-primary": var(--#{$prefix}color-surface-primary),
168+
"surface-secondary": var(--#{$prefix}color-surface-secondary),
169+
"surface-tertiary": var(--#{$prefix}color-surface-tertiary),
170+
"surface-inverse-high": var(--#{$prefix}color-surface-inverse-high),
171+
"surface-inverse-low": var(--#{$prefix}color-surface-inverse-low),
165172
"opacity-lower": var(--#{$prefix}color-opacity-lower),
166173
"opacity-lowest": var(--#{$prefix}color-opacity-lowest),
167174
"transparent": transparent,
168175
) !default;
176+
$ouds-backgrounds: map-merge($ouds-backgrounds-with-color, $ouds-backgrounds-without-color) !default;
169177
// scss-docs-end ouds-maps-backgrounds
170178

171179
// scss-docs-start ouds-maps-text-colors

‎scss/helpers/_color-bg.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,25 @@
2121
}
2222
}
2323

24-
@each $color, $value in map-remove($ouds-backgrounds, "primary", "secondary", "tertiary", "opacity-lower", "opacity-lowest", "transparent", "inverse-high", "inverse-low") {
24+
@each $color, $value in $ouds-backgrounds-with-color {
2525
$text-bg-color: null;
2626

2727
@if index(("always-black"), #{$color}) {
2828
$text-bg-color: var(--#{$prefix}color-always-on-black);
2929
} @else if index(("always-white"), #{$color}) {
3030
$text-bg-color: var(--#{$prefix}color-always-on-white);
3131
} @else {
32-
$text-bg-color: var(--#{$prefix}color-content-on-#{$color});
32+
$text-bg-color: var(--#{$prefix}color-content-on-#{str-replace($color, "surface-")});
3333
}
3434

3535
.bg-#{$color} {
3636
--#{$prefix}color-local: #{$text-bg-color};
37+
color: var(--#{$prefix}color-local);
38+
}
39+
}
40+
41+
@each $color, $value in $ouds-backgrounds-without-color {
42+
.bg-#{$color} {
43+
--#{$prefix}color-local: initial;
3744
}
3845
}

‎scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss‎

Lines changed: 102 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3632,67 +3632,47 @@ $utilities: ();
36323632
box-shadow: 0 4px 4px -1px var(--bs-elevation-color-sticky) !important;
36333633
}
36343634

3635-
.bg-primary {
3636-
background-color: var(--bs-color-bg-primary) !important;
3637-
}
3638-
3639-
.bg-secondary {
3640-
background-color: var(--bs-color-bg-secondary) !important;
3641-
}
3642-
3643-
.bg-tertiary {
3644-
background-color: var(--bs-color-bg-tertiary) !important;
3645-
}
3646-
3647-
.bg-brand-primary {
3635+
.bg-surface-brand-primary {
36483636
background-color: var(--bs-color-surface-brand-primary) !important;
36493637
}
36503638

3651-
.bg-inverse-high {
3652-
background-color: var(--bs-color-surface-inverse-high) !important;
3653-
}
3654-
3655-
.bg-inverse-low {
3656-
background-color: var(--bs-color-surface-inverse-low) !important;
3657-
}
3658-
3659-
.bg-status-accent-emphasized {
3639+
.bg-surface-status-accent-emphasized {
36603640
background-color: var(--bs-color-surface-status-accent-emphasized) !important;
36613641
}
36623642

3663-
.bg-status-accent-muted {
3643+
.bg-surface-status-accent-muted {
36643644
background-color: var(--bs-color-surface-status-accent-muted) !important;
36653645
}
36663646

3667-
.bg-status-positive-emphasized {
3647+
.bg-surface-status-positive-emphasized {
36683648
background-color: var(--bs-color-surface-status-positive-emphasized) !important;
36693649
}
36703650

3671-
.bg-status-positive-muted {
3651+
.bg-surface-status-positive-muted {
36723652
background-color: var(--bs-color-surface-status-positive-muted) !important;
36733653
}
36743654

3675-
.bg-status-negative-emphasized {
3655+
.bg-surface-status-negative-emphasized {
36763656
background-color: var(--bs-color-surface-status-negative-emphasized) !important;
36773657
}
36783658

3679-
.bg-status-negative-muted {
3659+
.bg-surface-status-negative-muted {
36803660
background-color: var(--bs-color-surface-status-negative-muted) !important;
36813661
}
36823662

3683-
.bg-status-warning-emphasized {
3663+
.bg-surface-status-warning-emphasized {
36843664
background-color: var(--bs-color-surface-status-warning-emphasized) !important;
36853665
}
36863666

3687-
.bg-status-warning-muted {
3667+
.bg-surface-status-warning-muted {
36883668
background-color: var(--bs-color-surface-status-warning-muted) !important;
36893669
}
36903670

3691-
.bg-status-info-emphasized {
3671+
.bg-surface-status-info-emphasized {
36923672
background-color: var(--bs-color-surface-status-info-emphasized) !important;
36933673
}
36943674

3695-
.bg-status-info-muted {
3675+
.bg-surface-status-info-muted {
36963676
background-color: var(--bs-color-surface-status-info-muted) !important;
36973677
}
36983678

@@ -3704,6 +3684,46 @@ $utilities: ();
37043684
background-color: var(--bs-color-always-white) !important;
37053685
}
37063686

3687+
.bg-primary {
3688+
background-color: var(--bs-color-bg-primary) !important;
3689+
}
3690+
3691+
.bg-secondary {
3692+
background-color: var(--bs-color-bg-secondary) !important;
3693+
}
3694+
3695+
.bg-tertiary {
3696+
background-color: var(--bs-color-bg-tertiary) !important;
3697+
}
3698+
3699+
.bg-inverse-high {
3700+
background-color: var(--bs-color-bg-inverse-high) !important;
3701+
}
3702+
3703+
.bg-inverse-low {
3704+
background-color: var(--bs-color-bg-inverse-low) !important;
3705+
}
3706+
3707+
.bg-surface-primary {
3708+
background-color: var(--bs-color-surface-primary) !important;
3709+
}
3710+
3711+
.bg-surface-secondary {
3712+
background-color: var(--bs-color-surface-secondary) !important;
3713+
}
3714+
3715+
.bg-surface-tertiary {
3716+
background-color: var(--bs-color-surface-tertiary) !important;
3717+
}
3718+
3719+
.bg-surface-inverse-high {
3720+
background-color: var(--bs-color-surface-inverse-high) !important;
3721+
}
3722+
3723+
.bg-surface-inverse-low {
3724+
background-color: var(--bs-color-surface-inverse-low) !important;
3725+
}
3726+
37073727
.bg-opacity-lower {
37083728
background-color: var(--bs-color-opacity-lower) !important;
37093729
}
@@ -14647,67 +14667,47 @@ $utilities: ();
1464714667
background-color: var(--bs-dark-bg-subtle) !important;
1464814668
}
1464914669

14650-
.bg-primary {
14651-
background-color: var(--bs-color-bg-primary) !important;
14652-
}
14653-
14654-
.bg-secondary {
14655-
background-color: var(--bs-color-bg-secondary) !important;
14656-
}
14657-
14658-
.bg-tertiary {
14659-
background-color: var(--bs-color-bg-tertiary) !important;
14660-
}
14661-
14662-
.bg-brand-primary {
14670+
.bg-surface-brand-primary {
1466314671
background-color: var(--bs-color-surface-brand-primary) !important;
1466414672
}
1466514673

14666-
.bg-inverse-high {
14667-
background-color: var(--bs-color-surface-inverse-high) !important;
14668-
}
14669-
14670-
.bg-inverse-low {
14671-
background-color: var(--bs-color-surface-inverse-low) !important;
14672-
}
14673-
14674-
.bg-status-accent-emphasized {
14674+
.bg-surface-status-accent-emphasized {
1467514675
background-color: var(--bs-color-surface-status-accent-emphasized) !important;
1467614676
}
1467714677

14678-
.bg-status-accent-muted {
14678+
.bg-surface-status-accent-muted {
1467914679
background-color: var(--bs-color-surface-status-accent-muted) !important;
1468014680
}
1468114681

14682-
.bg-status-positive-emphasized {
14682+
.bg-surface-status-positive-emphasized {
1468314683
background-color: var(--bs-color-surface-status-positive-emphasized) !important;
1468414684
}
1468514685

14686-
.bg-status-positive-muted {
14686+
.bg-surface-status-positive-muted {
1468714687
background-color: var(--bs-color-surface-status-positive-muted) !important;
1468814688
}
1468914689

14690-
.bg-status-negative-emphasized {
14690+
.bg-surface-status-negative-emphasized {
1469114691
background-color: var(--bs-color-surface-status-negative-emphasized) !important;
1469214692
}
1469314693

14694-
.bg-status-negative-muted {
14694+
.bg-surface-status-negative-muted {
1469514695
background-color: var(--bs-color-surface-status-negative-muted) !important;
1469614696
}
1469714697

14698-
.bg-status-warning-emphasized {
14698+
.bg-surface-status-warning-emphasized {
1469914699
background-color: var(--bs-color-surface-status-warning-emphasized) !important;
1470014700
}
1470114701

14702-
.bg-status-warning-muted {
14702+
.bg-surface-status-warning-muted {
1470314703
background-color: var(--bs-color-surface-status-warning-muted) !important;
1470414704
}
1470514705

14706-
.bg-status-info-emphasized {
14706+
.bg-surface-status-info-emphasized {
1470714707
background-color: var(--bs-color-surface-status-info-emphasized) !important;
1470814708
}
1470914709

14710-
.bg-status-info-muted {
14710+
.bg-surface-status-info-muted {
1471114711
background-color: var(--bs-color-surface-status-info-muted) !important;
1471214712
}
1471314713

@@ -14719,6 +14719,46 @@ $utilities: ();
1471914719
background-color: var(--bs-color-always-white) !important;
1472014720
}
1472114721

14722+
.bg-primary {
14723+
background-color: var(--bs-color-bg-primary) !important;
14724+
}
14725+
14726+
.bg-secondary {
14727+
background-color: var(--bs-color-bg-secondary) !important;
14728+
}
14729+
14730+
.bg-tertiary {
14731+
background-color: var(--bs-color-bg-tertiary) !important;
14732+
}
14733+
14734+
.bg-inverse-high {
14735+
background-color: var(--bs-color-bg-inverse-high) !important;
14736+
}
14737+
14738+
.bg-inverse-low {
14739+
background-color: var(--bs-color-bg-inverse-low) !important;
14740+
}
14741+
14742+
.bg-surface-primary {
14743+
background-color: var(--bs-color-surface-primary) !important;
14744+
}
14745+
14746+
.bg-surface-secondary {
14747+
background-color: var(--bs-color-surface-secondary) !important;
14748+
}
14749+
14750+
.bg-surface-tertiary {
14751+
background-color: var(--bs-color-surface-tertiary) !important;
14752+
}
14753+
14754+
.bg-surface-inverse-high {
14755+
background-color: var(--bs-color-surface-inverse-high) !important;
14756+
}
14757+
14758+
.bg-surface-inverse-low {
14759+
background-color: var(--bs-color-surface-inverse-low) !important;
14760+
}
14761+
1472214762
.bg-opacity-lower {
1472314763
background-color: var(--bs-color-opacity-lower) !important;
1472414764
}

‎site/src/assets/examples/download-app/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export const aliases = [
174174
</div>
175175
</div>
176176

177-
<div class="py-2xlarge py-md-4xlarge bg-status-info-emphasized">
177+
<div class="py-2xlarge py-md-4xlarge bg-surface-status-info-emphasized">
178178
<div data-bs-theme={getMode('modes-on-status-info-emphasized')}>
179179
<div class="container-fluid container-max-width d-flex justify-content-center pt-md-small pb-small">
180180
<div class="col-12 col-md-6 col-lg-8 col-xl-6">
@@ -815,7 +815,7 @@ export const aliases = [
815815
</div>
816816
</div>
817817

818-
<div class="py-2xlarge py-md-4xlarge bg-status-warning-emphasized">
818+
<div class="py-2xlarge py-md-4xlarge bg-surface-status-warning-emphasized">
819819
<div data-bs-theme={getMode('modes-on-status-warning-emphasized')}>
820820
<div class="container-fluid container-max-width d-flex justify-content-center pt-md-small pb-small">
821821
<div class="col-12 col-md-6">

0 commit comments

Comments
 (0)