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.

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 the Bootstrap compatibilities in the doc and the code #2833

Open
wants to merge 1 commit into
base: ouds/main-lmp-tokens-colors-text-bg-helpers
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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: 1 addition & 1 deletion hugo.yml
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ params:
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
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

algolia:
appId: "F4PKENW3TB"
Expand Down
2 changes: 1 addition & 1 deletion scss/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
//
// Rows contain your columns.

#{$ouds-root-selector} {
#{$ouds-root-selector} { // OUDS mod: instead of `:root`
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
Expand Down
48 changes: 35 additions & 13 deletions scss/_maps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default;
$utilities-text: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
"primary": var(--#{$prefix}color-content-brand-primary), // OUDS mod
"secondary": var(--#{$prefix}color-content-muted), // OUDS mod
"success": var(--#{$prefix}color-content-status-positive), // OUDS mod
"info": var(--#{$prefix}color-content-status-info), // OUDS mod
"warning": var(--#{$prefix}color-content-status-warning), // OUDS mod
"danger": var(--#{$prefix}color-content-status-negative), // OUDS mod
"light": var(--#{$prefix}color-content-disabled), // OUDS mod
"dark": var(--#{$prefix}color-content-default), // OUDS mod
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
"body": var(--#{$prefix}color-content-default) // OUDS mod: instead of `to-rgb($body-color)`
)
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-colors: $utilities-text !default; // OUDS mod: instead of `map-loop($utilities-text, rgba-css-var, "$key", "text")`

$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
Expand All @@ -311,12 +319,20 @@ $utilities-text-emphasis-colors: (
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
"primary": var(--#{$prefix}color-surface-brand-primary), // OUDS mod
"secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod
"success": var(--#{$prefix}color-surface-status-positive-emphasized), // OUDS mod
"info": var(--#{$prefix}color-surface-status-info-emphasized), // OUDS mod
"warning": var(--#{$prefix}color-surface-status-warning-emphasized), // OUDS mod
"danger": var(--#{$prefix}color-surface-status-negative-emphasized), // OUDS mod
"light": var(--#{$prefix}color-bg-secondary), // OUDS mod
"dark": var(--#{$prefix}color-surface-status-neutral-emphasized), // OUDS mod
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
"body": var(--#{$prefix}color-bg-primary) // OUDS mod: instead of `to-rgb($body-bg)`
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
$utilities-bg-colors: $utilities-bg !default; // OUDS mod: instead of `map-loop($utilities-bg, rgba-css-var, "$key", "bg")`

$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
Expand All @@ -334,13 +350,19 @@ $utilities-bg-subtle: (
$utilities-border: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"dark": $gray-700, // OUDS mod: handled differently within `rgba-css-var`
"light": $gray-500, // OUDS mod: handled differently within `rgba-css-var`
"white": to-rgb($white),
"primary": var(--#{$prefix}color-border-brand-primary), // OUDS mod
"secondary": var(--#{$prefix}color-border-emphasized), // OUDS mod
"success": var(--#{$prefix}color-border-emphasized), // OUDS mod
"info": var(--#{$prefix}color-border-emphasized), // OUDS mod
"warning": var(--#{$prefix}color-border-emphasized), // OUDS mod
"danger": var(--#{$prefix}color-border-emphasized), // OUDS mod
"light": var(--#{$prefix}color-border-emphasized), // OUDS mod
"dark": var(--#{$prefix}color-border-emphasized), // OUDS mod
"black": var(--#{$prefix}color-always-black), // OUDS mod: instead of `to-rgb($black)`
"white": var(--#{$prefix}color-always-white), // OUDS mod: instead of `to-rgb($white)`
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // OUDS mod
$utilities-border-colors: $utilities-border !default; // OUDS mod: instead of `map-loop($utilities-border, rgba-css-var, "$key", "border", "$value")`

$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
Expand Down
4 changes: 2 additions & 2 deletions scss/_reboot.scss
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.

#{$ouds-root-selector} {
#{$ouds-root-selector} { // OUDS mod: instead of `:root`
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
Expand Down Expand Up @@ -61,7 +61,7 @@
// See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis

// scss-docs-start reboot-body-rules
#{$ouds-root-selector} > * {
#{$ouds-root-selector} > * { // OUDS mod: instead of `body`
position: relative; // OUDS mod: required for back-to-top component
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
Expand Down
144 changes: 75 additions & 69 deletions scss/_root.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// 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

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

// Note: Custom variable values only support SassScript inside `#{}`.
Expand All @@ -16,36 +16,38 @@
//
// Generate palettes for full colors, grays, and theme colors.

@each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value};
}
@if $enable-bootstrap-compatibility {
@each $color, $value in $colors {
--#{$prefix}#{$color}: #{$value};
}

@each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $grays {
--#{$prefix}gray-#{$color}: #{$value};
}

@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$prefix}#{$color}: #{$value};
}

@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}

@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}

@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}

--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
}

// OUDS mod
@each $icon, $svg in $svg-as-custom-props {
Expand Down Expand Up @@ -226,18 +228,20 @@
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
@if $enable-bootstrap-compatibility {
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
}
// scss-docs-end root-body-variables

--#{$prefix}heading-color: #{$headings-color};
Expand Down Expand Up @@ -439,39 +443,41 @@
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};

--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};

--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};

--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};

// OUDS mod
@each $color, $value in $theme-colors-dark {
--#{$prefix}#{$color}: #{$value};
}

@each $color, $value in $theme-colors-rgb-dark {
--#{$prefix}#{$color}-rgb: #{$value};
}
// End mod

@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}

@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
@if $enable-bootstrap-compatibility {
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};

--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};

--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};

// OUDS mod
@each $color, $value in $theme-colors-dark {
--#{$prefix}#{$color}: #{$value};
}

@each $color, $value in $theme-colors-rgb-dark {
--#{$prefix}#{$color}-rgb: #{$value};
}
// End mod

@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}

@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
}

// OUDS mod
Expand Down
66 changes: 14 additions & 52 deletions scss/_utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,7 @@ $utilities: map-merge(
"border-color": (
property: border-color,
class: border,
local-vars: (
"border-opacity": 1
),
// OUDS mod: no local-vars,
values: $utilities-border-colors,
bootstrap-compatibility: true
),
Expand All @@ -217,18 +215,7 @@ $utilities: map-merge(
values: $border-widths,
bootstrap-compatibility: true
),
"border-opacity": (
css-var: true,
class: border-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
bootstrap-compatibility: true
),
// OUDS mod: no "border-opacity"
// scss-docs-end utils-borders
// OUDS mod
// scss-docs-start utils-borders-ouds
Expand Down Expand Up @@ -973,34 +960,22 @@ $utilities: map-merge(
"color": (
property: color,
class: text,
local-vars: (
"text-opacity": 1
),
// OUDS mod: no local-vars
values: map-merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // Deprecated in Bootstrap
"black-50": rgba($black, .5), // Deprecated in Bootstrap
"white-50": rgba($white, .5), // Deprecated in Bootstrap
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"muted": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
"black-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($black, .5)`
"white-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($white, .5)`
"body-secondary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
"body-tertiary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}tertiary-color)`
"body-emphasis": var(--#{$prefix}color-content-default), // OUDS mod: instead of `var(--#{$prefix}emphasis-color)`
// OUDS mod: no "reset"
)
),
bootstrap-compatibility: true
),
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
),
bootstrap-compatibility: true
),
// OUDS mod: no "text-opacity"
"text-color": (
property: color,
class: text,
Expand Down Expand Up @@ -1069,31 +1044,18 @@ $utilities: map-merge(
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
// OUDS mod: no local-vars
values: map-merge(
$utilities-bg-colors,
(
// 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)),
"body-secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity))`
"body-tertiary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity))`
)
),
bootstrap-compatibility: true,
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
bootstrap-compatibility: true,
),
// OUDS mod: no "bg-opacity"
"subtle-background-color": (
property: background-color,
class: bg,
Expand Down
Loading
Loading