Skip to content

Commit 75bb0fc

Browse files
louismaximepitonlouismaximepiton
committed
Add the Bootstrap compatibilities in the doc and the code
1 parent 6a2b3d5 commit 75bb0fc

40 files changed

+488
-676
lines changed

‎hugo.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ params:
8181
icons_usage: "https://design.orange.com/0c1af118d/p/92bb17-usage"
8282
bootstrap: "https://getbootstrap.com"
8383
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
84+
web: "https://unified-design-system.orange.com/" # TODO: replace this URL by the web one or even "https://oran.ge/ds-web" when it will changed
8585

8686
algolia:
8787
appId: "F4PKENW3TB"

‎scss/_grid.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//
33
// Rows contain your columns.
44

5-
#{$ouds-root-selector} {
5+
#{$ouds-root-selector} { // OUDS mod: instead of `:root`
66
@each $name, $value in $grid-breakpoints {
77
--#{$prefix}breakpoint-#{$name}: #{$value};
88
}

‎scss/_maps.scss‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default;
288288
$utilities-text: map-merge(
289289
$utilities-colors,
290290
(
291-
"black": to-rgb($black),
292-
"white": to-rgb($white),
293-
"body": to-rgb($body-color)
291+
"primary": var(--#{$prefix}color-content-brand-primary), // OUDS mod
292+
"secondary": var(--#{$prefix}color-content-muted), // OUDS mod
293+
"success": var(--#{$prefix}color-content-status-positive), // OUDS mod
294+
"info": var(--#{$prefix}color-content-status-info), // OUDS mod
295+
"warning": var(--#{$prefix}color-content-status-warning), // OUDS mod
296+
"danger": var(--#{$prefix}color-content-status-negative), // OUDS mod
297+
"light": var(--#{$prefix}color-content-disabled), // OUDS mod
298+
"dark": var(--#{$prefix}color-content-default), // OUDS mod
299+
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
300+
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
301+
"body": var(--#{$prefix}color-content-default) // OUDS mod: instead of `to-rgb($body-color)`
294302
)
295303
) !default;
296-
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
304+
$utilities-text-colors: $utilities-text !default; // OUDS mod: instead of `map-loop($utilities-text, rgba-css-var, "$key", "text")`
297305

298306
$utilities-text-emphasis-colors: (
299307
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
@@ -311,12 +319,20 @@ $utilities-text-emphasis-colors: (
311319
$utilities-bg: map-merge(
312320
$utilities-colors,
313321
(
314-
"black": to-rgb($black),
315-
"white": to-rgb($white),
316-
"body": to-rgb($body-bg)
322+
"primary": var(--#{$prefix}color-surface-brand-primary), // OUDS mod
323+
"secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod
324+
"success": var(--#{$prefix}color-surface-status-positive-emphasized), // OUDS mod
325+
"info": var(--#{$prefix}color-surface-status-info-emphasized), // OUDS mod
326+
"warning": var(--#{$prefix}color-surface-status-warning-emphasized), // OUDS mod
327+
"danger": var(--#{$prefix}color-surface-status-negative-emphasized), // OUDS mod
328+
"light": var(--#{$prefix}color-bg-secondary), // OUDS mod
329+
"dark": var(--#{$prefix}color-surface-status-neutral-emphasized), // OUDS mod
330+
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
331+
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
332+
"body": var(--#{$prefix}color-bg-primary) // OUDS mod: instead of `to-rgb($body-bg)`
317333
)
318334
) !default;
319-
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
335+
$utilities-bg-colors: $utilities-bg !default; // OUDS mod: instead of `map-loop($utilities-bg, rgba-css-var, "$key", "bg")`
320336

321337
$utilities-bg-subtle: (
322338
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
@@ -334,13 +350,19 @@ $utilities-bg-subtle: (
334350
$utilities-border: map-merge(
335351
$utilities-colors,
336352
(
337-
"black": to-rgb($black),
338-
"dark": $gray-700, // OUDS mod: handled differently within `rgba-css-var`
339-
"light": $gray-500, // OUDS mod: handled differently within `rgba-css-var`
340-
"white": to-rgb($white),
353+
"primary": var(--#{$prefix}color-border-brand-primary), // OUDS mod
354+
"secondary": var(--#{$prefix}color-border-emphasized), // OUDS mod
355+
"success": var(--#{$prefix}color-border-emphasized), // OUDS mod
356+
"info": var(--#{$prefix}color-border-emphasized), // OUDS mod
357+
"warning": var(--#{$prefix}color-border-emphasized), // OUDS mod
358+
"danger": var(--#{$prefix}color-border-emphasized), // OUDS mod
359+
"light": var(--#{$prefix}color-border-emphasized), // OUDS mod
360+
"dark": var(--#{$prefix}color-border-emphasized), // OUDS mod
361+
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
362+
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
341363
)
342364
) !default;
343-
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // OUDS mod
365+
$utilities-border-colors: $utilities-border !default; // OUDS mod: instead of `map-loop($utilities-border, rgba-css-var, "$key", "border", "$value")`
344366

345367
$utilities-border-subtle: (
346368
"primary-subtle": var(--#{$prefix}primary-border-subtle),

‎scss/_reboot.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
// Ability to the value of the root font sizes, affecting the value of `rem`.
2626
// null by default, thus nothing is generated.
2727

28-
#{$ouds-root-selector} {
28+
#{$ouds-root-selector} { // OUDS mod: instead of `:root`
2929
@if $font-size-root != null {
3030
@include font-size(var(--#{$prefix}root-font-size));
3131
}
@@ -61,20 +61,20 @@
6161
// See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
6262

6363
// scss-docs-start reboot-body-rules
64-
#{$ouds-root-selector} > * {
64+
#{$ouds-root-selector} > * { // OUDS mod: instead of `body`
6565
position: relative; // OUDS mod: required for back-to-top component
6666
margin: 0; // 1
6767
font-family: var(--#{$prefix}body-font-family);
6868
font-synthesis: none; // OUDS mod // 5
6969
@include font-size(var(--#{$prefix}body-font-size));
7070
font-weight: var(--#{$prefix}body-font-weight);
7171
line-height: var(--#{$prefix}body-line-height);
72-
color: var(--#{$prefix}body-color);
72+
color: var(--#{$prefix}color-content-default); // OUDS mod: instead of `var(--#{$prefix}body-color)`
7373
text-align: var(--#{$prefix}body-text-align);
7474

7575
/* rtl:remove */
7676
letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
77-
background-color: var(--#{$prefix}body-bg); // 2
77+
background-color: var(--#{$prefix}color-bg-primary); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`
7878
-webkit-text-size-adjust: 100%; // 3
7979
-webkit-tap-highlight-color: rgba($black, 0); // 4
8080
-webkit-font-smoothing: subpixel-antialiased; // OUDS mod
@@ -325,8 +325,8 @@ small {
325325

326326
mark {
327327
padding: $mark-padding;
328-
color: var(--#{$prefix}highlight-color);
329-
background-color: var(--#{$prefix}highlight-bg);
328+
color: var(--#{$prefix}color-content-on-action-highlighted); // OUDS mod: instead of `var(--#{$prefix}highlight-color)`
329+
background-color: var(--#{$prefix}color-action-highlighted); // OUDS mod: instead of `var(--#{$prefix}highlight-bg)`
330330
}
331331

332332

@@ -408,7 +408,7 @@ var, // OUDS mod
408408
code {
409409
@include font-size($code-font-size);
410410
font-style: normal; // OUDS mod: <var> is italic in all browsers
411-
color: var(--#{$prefix}code-color);
411+
color: var(--#{$prefix}color-content-muted);
412412
word-wrap: break-word;
413413

414414
// Streamline the style when inside anchors to avoid broken underline and more
@@ -744,7 +744,7 @@ progress {
744744
// OUDS mod
745745
// Selection
746746
::selection {
747-
color: var(--#{$prefix}highlight-color);
748-
background-color: var(--#{$prefix}highlight-bg);
747+
color: var(--#{$prefix}color-content-on-action-highlighted);
748+
background-color: var(--#{$prefix}color-action-highlighted);
749749
}
750750
// End mod

0 commit comments

Comments
 (0)