Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OUDS] Add background utilities to the Colors tokens PR #2807

Draft
wants to merge 1 commit into
base: ouds/main-lmp-tokens-colors
Choose a base branch
from
Draft

[OUDS] Add background utilities to the Colors tokens PR #2807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions hugo.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ params:
icons_license: "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
icons_usage: "https://design.orange.com/0c1af118d/p/92bb17-usage"
bootstrap: "https://getbootstrap.com"
ouds:
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

algolia:
appId: "F4PKENW3TB"
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="container-fluid">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>

<nav class="navbar navbar-expand-md bg-light">
<nav class="navbar navbar-expand-md bg-always-white">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-always-black">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/scrollspy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
<a class="navbar-brand text-white" href="#">Scrollspy test</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand Down
4 changes: 2 additions & 2 deletions js/tests/visual/toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
<div class="notifications">
<div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-header">
<span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
<span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
Expand All @@ -39,7 +39,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>

<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
<span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small class="text-body-secondary">2 seconds ago</small>
<button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
Expand Down
3 changes: 3 additions & 0 deletions scss/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// Configuration file for OUDS Web

$prefix: bs- !default;
$color-mode-type: data !default; // `data` or `media-query`

$ouds-root-selector: ":root" !default;
4 changes: 4 additions & 0 deletions scss/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.

// OUDS mod: add color modes mixin
@import "mixins/color-mode";
// End mod

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
Expand Down
2 changes: 1 addition & 1 deletion scss/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
//
// Rows contain your columns.

:root {
#{$ouds-root-selector} {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
Expand Down
25 changes: 25 additions & 0 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,31 @@ $ouds-opacities: (
"opaque": $ouds-opacity-opaque
) !default;
// scss-docs-end ouds-maps-opacities

// scss-docs-start ouds-maps-opacities
$ouds-backgrounds: (
"primary": var(--#{$prefix}color-bg-primary),
"secondary": var(--#{$prefix}color-bg-secondary),
"tertiary": var(--#{$prefix}color-bg-tertiary),
"emphasized": var(--#{$prefix}color-bg-emphasized),
"brand-primary": var(--#{$prefix}color-surface-brand-primary),
"status-neutral-emphasized": var(--#{$prefix}color-surface-status-neutral-emphasized),
"status-neutral-muted": var(--#{$prefix}color-surface-status-neutral-muted),
"status-accent-emphasized": var(--#{$prefix}color-surface-status-accent-emphasized),
"status-accent-muted": var(--#{$prefix}color-surface-status-accent-muted),
"status-positive-emphasized": var(--#{$prefix}color-surface-status-positive-emphasized),
"status-positive-muted": var(--#{$prefix}color-surface-status-positive-muted),
"status-negative-emphasized": var(--#{$prefix}color-surface-status-negative-emphasized),
"status-negative-muted": var(--#{$prefix}color-surface-status-negative-muted),
"status-warning-emphasized": var(--#{$prefix}color-surface-status-warning-emphasized),
"status-warning-muted": var(--#{$prefix}color-surface-status-warning-muted),
"status-info-emphasized": var(--#{$prefix}color-surface-status-info-emphasized),
"status-info-muted": var(--#{$prefix}color-surface-status-info-muted),
"always-black": var(--#{$prefix}color-always-black),
"always-white": var(--#{$prefix}color-always-white),
"transparent": transparent,
) !default;
// scss-docs-end ouds-maps-opacities
// End mod

// Re-assigned maps
Expand Down
2 changes: 1 addition & 1 deletion scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
// @import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/fonts"; // OUDS mod
@import "mixins/image";
Expand Down
2 changes: 1 addition & 1 deletion scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
// Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated.

:root {
#{$ouds-root-selector} {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
Expand Down
8 changes: 3 additions & 5 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
// OUDS mod
:root,
#{$ouds-root-selector},
[data-bs-theme] {
color: var(--#{$prefix}body-color);
background-color: var(--#{$prefix}body-bg);
}

// 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!
// Note that some of the following variables in `#{$ouds-root-selector}, [data-bs-theme="light"]` could be extracted into `#{$ouds-root-selector}` only selector since they are not modified by other color modes!
// End mod

:root,
[data-bs-theme="light"] {
@include color-mode(light, true) {
color-scheme: light; // OUDS mod

// Note: Custom variable values only support SassScript inside `#{}`.
Expand Down
18 changes: 14 additions & 4 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1058,11 +1058,12 @@ $utilities: map-merge(
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
// OUDS mod: no "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)),
)
)
),
bootstrap-compatibility: true,
),
"bg-opacity": (
css-var: true,
Expand All @@ -1073,14 +1074,23 @@ $utilities: map-merge(
50: .5,
75: .75,
100: 1
)
),
bootstrap-compatibility: true,
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
values: $utilities-bg-subtle,
bootstrap-compatibility: true,
),
// scss-docs-end utils-bg-color
// scss-docs-start utils-bg-color-ouds
"background-color-ouds": (
property: background-color,
class: bg,
values: $ouds-backgrounds,
),
// scss-docs-end utils-bg-color-ouds
"gradient": (
property: background-image,
class: bg,
Expand Down
4 changes: 2 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,9 +424,9 @@ $enable-fixed-header: true !default; // OUDS mod: used to apply scro
$enable-bootstrap-compatibility: false !default; // OUDS mod: used to enforce Bootstrap compatibility

$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// $color-mode-type: data !default; // `data` or `media-query`

// OUDS mod: Prefix for :root CSS variables has been moved to `_config.scss`
// OUDS mod: Prefix for $ouds-root-selector CSS variables has been moved to `_config.scss`

// Gradient
//
Expand Down
21 changes: 17 additions & 4 deletions scss/mixins/_color-mode.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
// Kept it quite simple using only light and dark modes, but you can extend it like in https://codepen.io/louismaximepiton/pen/vYbEvLO for example, to allow more color modes.
// OUDS mod: add `$invert-mode`, root mode and root-inverted mode
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@mixin color-mode($mode: light, $root: false, $inverted-mode: if($mode == light, dark, light)) {
@if $color-mode-type == "media-query" {
@if $root == true {
@media (prefers-color-scheme: $mode) {
:root {
#{$ouds-root-selector} {
@content;
}
}
Expand All @@ -13,8 +15,19 @@
}
}
} @else {
[data-bs-theme="#{$mode}"] {
@content;
@if $root == true and $mode == light {
#{$ouds-root-selector},
[data-bs-theme="#{$mode}"],
#{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
#{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
@content;
}
} @else {
[data-bs-theme="#{$mode}"],
#{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
#{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
@content;
}
}
}
}
Expand Down
16 changes: 12 additions & 4 deletions scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,9 @@ $utilities: ();
}
@include expect() {
:root,
[data-bs-theme="light"] {
[data-bs-theme="light"],
:root[data-bs-theme="light"] [data-bs-theme="root"],
:root[data-bs-theme="dark"] [data-bs-theme="root-inverted"] {
--bs-color-opacity-invisible-black: rgba(0, 0, 0, 0);
--bs-color-opacity-invisible-white: rgba(255, 255, 255, 0);
--bs-color-action-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero
Expand Down Expand Up @@ -876,7 +878,9 @@ $utilities: ();
--bs-color-decorative-skin-tint-900: #2e2014;
}

[data-bs-theme="dark"] {
[data-bs-theme="dark"],
:root[data-bs-theme="dark"] [data-bs-theme="root"],
:root[data-bs-theme="light"] [data-bs-theme="root-inverted"] {
--bs-color-opacity-invisible-black: rgba(255, 255, 255, 0);
--bs-color-opacity-invisible-white: rgba(255, 255, 255, 0);
--bs-color-action-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero
Expand Down Expand Up @@ -10519,7 +10523,9 @@ $utilities: ();
}
@include expect() {
:root,
[data-bs-theme="light"] {
[data-bs-theme="light"],
:root[data-bs-theme="light"] [data-bs-theme="root"],
:root[data-bs-theme="dark"] [data-bs-theme="root-inverted"] {
--bs-color-opacity-invisible-black: rgba(0, 0, 0, 0);
--bs-color-opacity-invisible-white: rgba(255, 255, 255, 0);
--bs-color-action-disabled: rgba(0, 0, 0, 0.2); // stylelint-disable-line @stylistic/number-leading-zero
Expand Down Expand Up @@ -10625,7 +10631,9 @@ $utilities: ();
--bs-color-decorative-skin-tint-900: #2e2014;
}

[data-bs-theme="dark"] {
[data-bs-theme="dark"],
:root[data-bs-theme="dark"] [data-bs-theme="root"],
:root[data-bs-theme="light"] [data-bs-theme="root-inverted"] {
--bs-color-opacity-invisible-black: rgba(255, 255, 255, 0);
--bs-color-opacity-invisible-white: rgba(255, 255, 255, 0);
--bs-color-action-disabled: rgba(255, 255, 255, 0.2); // stylelint-disable-line @stylistic/number-leading-zero
Expand Down
8 changes: 6 additions & 2 deletions scss/tests/mixins/_color-modes.test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,15 @@
}
}
@include expect() {
[data-bs-theme=dark] .element {
[data-bs-theme=dark] .element,
:root[data-bs-theme=dark] [data-bs-theme=root] .element,
:root[data-bs-theme=light] [data-bs-theme=root-inverted] .element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] {
[data-bs-theme=dark],
:root[data-bs-theme=dark] [data-bs-theme=root],
:root[data-bs-theme=light] [data-bs-theme=root-inverted] {
--custom-color: #679cec; // OUDS mod: instead of `#3aff8`
}
}
Expand Down
7 changes: 4 additions & 3 deletions scss/tokens/_semantic-colors-custom-props.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root,
[data-bs-theme="light"] {
// scss-docs-start ouds-semantic-css-color
@include color-mode(light, true) {
--#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-light};
--#{$prefix}color-opacity-invisible-white: #{$ouds-color-opacity-invisible-white-light};
--#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light};
Expand Down Expand Up @@ -104,8 +104,9 @@
--#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light};
--#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light};
}
// scss-docs-end ouds-semantic-css-color

[data-bs-theme="dark"] {
@include color-mode(dark, true) {
--#{$prefix}color-opacity-invisible-black: #{$ouds-color-opacity-invisible-black-dark};
--#{$prefix}color-opacity-invisible-white: #{$ouds-color-opacity-invisible-white-dark};
--#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-dark};
Expand Down
4 changes: 2 additions & 2 deletions site/assets/scss/_callouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
margin-top: $spacer; // OUDS mod
margin-bottom: $spacer; // OUDS mod
color: var(--bd-callout-color, inherit);
background-color: var(--bd-callout-bg, var(--bs-gray-200)); // OUDS mod
background-color: var(--bd-callout-bg, var(--#{$prefix}color-surface-status-neutral)); // OUDS mod
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-200)); // OUDS mod

h4 {
Expand All @@ -32,7 +32,7 @@
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
--bd-callout-color: var(--bs-emphasis-color); // OUDS mod: instead of `var(--bs-#{$variant}-text-emphasis)`
--bd-callout-bg: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
--bd-callout-bg: var(--#{$prefix}color-surface-status-#{if($variant == "danger", negative, $variant)}-muted); // OUDS mod: instead of `var(--bs-#{$variant}-bg-subtle)`
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
}
}
12 changes: 6 additions & 6 deletions site/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@
width: 9rem; // OUDS mod
font-weight: $font-weight-bold; // OUDS mod
color: var(--bs-secondary-color);
background-color: var(--bs-secondary-bg); // OUDS mod: instead of `var(--bs-tertiary-bg)`
background-color: var(--#{$prefix}color-bg-secondary); // OUDS mod: instead of `var(--bs-tertiary-bg)`
border: var(--bs-border-width) solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-width) solid var(--bs-border-color)`

> div {
Expand Down Expand Up @@ -291,7 +291,7 @@
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: var(--bs-tertiary-bg);
background-color: var(--#{$prefix}color-bg-secondary);
}
}

Expand All @@ -307,13 +307,13 @@

.position-relative {
height: 12.5rem;
background-color: var(--bs-tertiary-bg);
background-color: var(--#{$prefix}color-bg-secondary);
}

.position-absolute {
width: 2rem;
height: 2rem;
background-color: var(--bs-body-color);
background-color: var(--#{$prefix}color-bg-emphasized);
@include border-radius();
}
}
Expand Down Expand Up @@ -487,13 +487,13 @@
.double-figure-svg {
padding-top: 10px;
padding-bottom: 10px;
background: linear-gradient(to bottom, $white, $white 50%, $ouds-color-functional-dark-gray-880 50%, $ouds-color-functional-dark-gray-880 100%);
background: linear-gradient(to bottom, $ouds-color-functional-white, $ouds-color-functional-white 50%, $ouds-color-functional-dark-gray-880 50%, $ouds-color-functional-dark-gray-880 100%);
}

.double-figure {
padding-top: 10px;
padding-bottom: 10px;
background: linear-gradient(to bottom, $white, $white calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc(100% - 1.875rem), transparent calc(100% - 1.875rem)); // stylelint-disable-line function-disallowed-list
background: linear-gradient(to bottom, $ouds-color-functional-white, $ouds-color-functional-white calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc((100% - 1.875rem) * .5), $ouds-color-functional-dark-gray-880 calc(100% - 1.875rem), transparent calc(100% - 1.875rem)); // stylelint-disable-line function-disallowed-list

figcaption {
height: 1.875rem;
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: rgba(var(--bs-body-color-rgb), .075);
background-color: var(--#{$prefix}color-bg-secondary);
@include border-radius(.5rem);

@include media-breakpoint-up(lg) {
Expand Down
Loading
Loading