Skip to content

Commit f315e01

Browse files
louismaximepitonlouismaximepiton
committed
Add background utilities to the Colors tokens PR
1 parent b6b2f0f commit f315e01

30 files changed

+283
-68
lines changed

‎hugo.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ params:
8080
icons_license: "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
8181
icons_usage: "https://design.orange.com/0c1af118d/p/92bb17-usage"
8282
bootstrap: "https://getbootstrap.com"
83+
ouds:
84+
web: "https://unified-design-system.orange.com/" # TODO LM: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed
8385

8486
algolia:
8587
appId: "F4PKENW3TB"

‎js/tests/visual/dropdown.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="container-fluid">
1111
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
1212

13-
<nav class="navbar navbar-expand-md bg-light">
13+
<nav class="navbar navbar-expand-md bg-always-white">
1414
<a class="navbar-brand" href="#">Navbar</a>
1515
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
1616
<span class="navbar-toggler-icon"></span>

‎js/tests/visual/modal.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</style>
1414
</head>
1515
<body>
16-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
16+
<nav class="navbar navbar-expand-lg navbar-dark bg-always-black">
1717
<div class="container-fluid">
1818
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
1919
<span class="navbar-toggler-icon"></span>

‎js/tests/visual/scrollspy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</style>
1111
</head>
1212
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
13-
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
13+
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
1414
<a class="navbar-brand text-white" href="#">Scrollspy test</a>
1515
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
1616
<span class="navbar-toggler-icon"></span>

‎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-primary rounded me-short" style="width: 20px; height: 20px;"></span>
31+
<span class="d-block bg-brand-primary rounded me-short" 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-primary rounded me-short" style="width: 20px; height: 20px;"></span>
42+
<span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
4343
<strong class="me-auto">Bootstrap</strong>
4444
<small class="text-body-secondary">2 seconds ago</small>
4545
<button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->

‎scss/_maps.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,35 @@ $ouds-opacities: (
116116
"opaque": $ouds-opacity-opaque
117117
) !default;
118118
// scss-docs-end ouds-maps-opacities
119+
120+
// scss-docs-start ouds-maps-opacities
121+
$ouds-backgrounds: (
122+
"primary": var(--#{$prefix}color-bg-primary),
123+
"secondary": var(--#{$prefix}color-bg-secondary),
124+
"tertiary": var(--#{$prefix}color-bg-tertiary),
125+
"emphasized": var(--#{$prefix}color-bg-emphasized),
126+
"overlay-default": var(--#{$prefix}color-overlay-default), // TODO LM: To remove overlays ?
127+
"overlay-drag": var(--#{$prefix}color-overlay-drag),
128+
"overlay-emphasized": var(--#{$prefix}color-overlay-emphasized),
129+
"overlay-modal": var(--#{$prefix}color-overlay-modal),
130+
"brand-primary": var(--#{$prefix}color-surface-brand-primary),
131+
"status-neutral-emphasized": var(--#{$prefix}color-surface-status-neutral-emphasized),
132+
"status-neutral-muted": var(--#{$prefix}color-surface-status-neutral-muted),
133+
"status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
134+
"status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
135+
"status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
136+
"status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
137+
"status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
138+
"status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
139+
"status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
140+
"status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
141+
"status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
142+
"status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
143+
"always-black": var(--#{$prefix}color-always-black),
144+
"always-white": var(--#{$prefix}color-always-white),
145+
"transparent": transparent,
146+
) !default;
147+
// scss-docs-end ouds-maps-opacities
119148
// End mod
120149

121150
// Re-assigned maps

‎scss/_root.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
:root,
33
[data-bs-theme] {
44
color: var(--#{$prefix}body-color);
5-
background-color: var(--#{$prefix}body-bg);
5+
background-color: var(--#{$prefix}color-bg-primary);
66
}
77

88
// Note that some of the following variables in `:root, [data-bs-theme="light"]` could be extracted into `:root` only selector since they are not modified by other color modes!

‎scss/_utilities.scss‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1058,11 +1058,12 @@ $utilities: map-merge(
10581058
values: map-merge(
10591059
$utilities-bg-colors,
10601060
(
1061-
"transparent": transparent,
1061+
// OUDS mod: no "transparent"
10621062
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
10631063
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
10641064
)
1065-
)
1065+
),
1066+
bootstrap-compatibility: true,
10661067
),
10671068
"bg-opacity": (
10681069
css-var: true,
@@ -1073,14 +1074,23 @@ $utilities: map-merge(
10731074
50: .5,
10741075
75: .75,
10751076
100: 1
1076-
)
1077+
),
1078+
bootstrap-compatibility: true,
10771079
),
10781080
"subtle-background-color": (
10791081
property: background-color,
10801082
class: bg,
1081-
values: $utilities-bg-subtle
1083+
values: $utilities-bg-subtle,
1084+
bootstrap-compatibility: true,
10821085
),
10831086
// scss-docs-end utils-bg-color
1087+
// scss-docs-start utils-bg-color-ouds
1088+
"background-color-ouds": (
1089+
property: background-color,
1090+
class: bg,
1091+
values: $ouds-backgrounds,
1092+
),
1093+
// scss-docs-end utils-bg-color-ouds
10841094
"gradient": (
10851095
property: background-image,
10861096
class: bg,

‎scss/tokens/_semantic-colors-custom-props.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// scss-docs-start ouds-semantic-css-color
12
:root,
23
[data-bs-theme="light"] {
34
--#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-light};
@@ -104,6 +105,7 @@
104105
--#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light};
105106
--#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light};
106107
}
108+
// scss-docs-end ouds-semantic-css-color
107109

108110
[data-bs-theme="dark"] {
109111
--#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-dark};

‎site/assets/scss/_callouts.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
margin-top: $spacer; // OUDS mod
1111
margin-bottom: $spacer; // OUDS mod
1212
color: var(--bd-callout-color, inherit);
13-
background-color: var(--bd-callout-bg, var(--bs-gray-200)); // OUDS mod
13+
background-color: var(--bd-callout-bg, var(--#{$prefix}color-surface-status-neutral)); // OUDS mod
1414
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-200)); // OUDS mod
1515

1616
h4 {
@@ -32,7 +32,7 @@
3232
@each $variant in $bd-callout-variants {
3333
.bd-callout-#{$variant} {
3434
--bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
35-
--bd-callout-bg: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
35+
--bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
3636
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
3737
}
3838
}

0 commit comments

Comments
 (0)