Skip to content

[OUDS] Add text color utilities to the Colors tokens PR #2830

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

Merged
louismaximepiton merged 2 commits into from
Jan 20, 2025
Merged

[OUDS] Add text color utilities to the Colors tokens PR #2830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
557ca72
Add text color utilities to the Colors tokens PR
louismaximepiton Jan 20, 2025
f5fae42
Add color background helpers to the Colors tokens PR (#2831)
louismaximepiton Jan 20, 2025
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
6 changes: 3 additions & 3 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/ouds-web-bootstrap.css",
"maxSize": "63.75 kB"
"maxSize": "64.0 kB"
},
{
"path": "./dist/css/ouds-web-bootstrap.min.css",
"maxSize": "60.75 kB"
"maxSize": "61.0 kB"
},
{
"path": "./dist/css/ouds-web-grid.css",
Expand Down Expand Up @@ -34,7 +34,7 @@
},
{
"path": "./dist/css/ouds-web.css",
"maxSize": "57.0 kB"
"maxSize": "57.25 kB"
},
{
"path": "./dist/css/ouds-web.min.css",
Expand Down
6 changes: 3 additions & 3 deletions js/tests/visual/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<a class="navbar-brand text-white" href="#">This shouldn't jump!</a>
<a class="navbar-brand text-always-on-black" href="#">This shouldn't jump!</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Home</a>
Expand Down Expand Up @@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>

<br><br>

<div class="text-bg-dark p-short" id="tall" style="display: none;">
<div class="text-bg-always-black p-short" id="tall" style="display: none;">
Tall body content to force the page to have a scrollbar.
</div>

Expand All @@ -212,7 +212,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>

function reportFirefoxTestResult(result) {
if (!firefoxTestDone) {
ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
ffBugTestResult.classList.add(result ? 'text-status-positive' : 'text-status-negative')
ffBugTestResult.textContent = result ? 'PASS' : 'FAIL'
}
}
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 @@ -11,7 +11,7 @@
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
<a class="navbar-brand text-white" href="#">Scrollspy test</a>
<a class="navbar-brand text-always-on-black" 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>
</button>
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
<div class="toast-header">
<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>
<small class="text-muted">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-->
</div>
<div class="toast-body">
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="container-fluid">
<h1>Tooltip <small>OUDS Web Visual Test</small></h1>

<p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>

<hr>

Expand Down
22 changes: 22 additions & 0 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,28 @@ $ouds-backgrounds: (
"transparent": transparent,
) !default;
// scss-docs-end ouds-maps-backgrounds

// scss-docs-start ouds-maps-text-colors
$ouds-text-colors: (
"brand-primary": var(--#{$prefix}color-content-brand-primary),
"default": var(--#{$prefix}color-content-default),
"disabled": var(--#{$prefix}color-content-disabled),
"muted": var(--#{$prefix}color-content-muted),
"on-brand-primary": var(--#{$prefix}color-content-on-brand-primary),
"on-status-emphasized": var(--#{$prefix}color-content-on-status-emphasized),
"on-status-emphasized-alt": var(--#{$prefix}color-content-on-status-emphasized-alt),
"on-status-muted": var(--#{$prefix}color-content-on-status-muted),
"status-info": var(--#{$prefix}color-content-status-info),
"status-negative": var(--#{$prefix}color-content-status-negative),
"status-positive": var(--#{$prefix}color-content-status-positive),
"status-warning": var(--#{$prefix}color-content-status-warning),
"always-black": var(--#{$prefix}color-always-black),
"always-white": var(--#{$prefix}color-always-white),
"always-on-black": var(--#{$prefix}color-always-on-black),
"always-on-white": var(--#{$prefix}color-always-on-white),
"reset": inherit,
) !default;
// scss-docs-end ouds-maps-text-colors
// End mod

// Re-assigned maps
Expand Down
12 changes: 6 additions & 6 deletions scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,33 +244,33 @@ ul {
// See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
// stylelint-disable selector-max-type
li::marker {
color: var(--#{$prefix}primary);
color: var(--#{$prefix}color-content-brand-primary);
vertical-align: middle;

ol & {
color: inherit;
}
}

li li::marker { color: var(--#{$prefix}secondary-color); }
li li::marker { color: var(--#{$prefix}color-content-muted); }

li li li::marker { color: var(--#{$prefix}tertiary-color); }
li li li::marker { color: var(--#{$prefix}color-content-disabled); } // TODO: Check the colors once the design is done

// Bullet-proof markers' color
// @todo To remove when ::marker support is OK
// See https://caniuse.com/#search=%3A%3Amarker
li::before {
color: var(--#{$prefix}primary);
color: var(--#{$prefix}color-content-brand-primary);
vertical-align: text-top;

ol & {
color: inherit;
}
}

li li::before { color: var(--#{$prefix}secondary-color); }
li li::before { color: var(--#{$prefix}color-content-muted); }

li li li::before { color: var(--#{$prefix}tertiary-color); }
li li li::before { color: var(--#{$prefix}color-content-disabled); }
// stylelint-enable selector-max-type
// End mod

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 @@ -985,9 +985,10 @@ $utilities: map-merge(
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
// OUDS mod: no "reset"
)
)
),
bootstrap-compatibility: true
),
"text-opacity": (
css-var: true,
Expand All @@ -997,14 +998,23 @@ $utilities: map-merge(
50: .5,
75: .75,
100: 1
)
),
bootstrap-compatibility: true
),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
values: $utilities-text-emphasis-colors,
bootstrap-compatibility: true
),
// scss-docs-end utils-color
// scss-docs-start utils-color-ouds
"color-ouds": (
property: color,
class: text,
values: $ouds-text-colors
),
// scss-docs-end utils-color-ouds
// scss-docs-start utils-links
"link-opacity": (
css-var: true,
Expand Down
4 changes: 2 additions & 2 deletions scss/_variables-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ $headings-color-dark: inherit !default;
$link-color-dark: $white !default; // OUDS mod: instead of `tint-color($primary, 40%)`
$link-hover-color-dark: $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
$code-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($code-color, 40%)`
$mark-color-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$body-color-dark`
$mark-bg-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$yellow-800`
$mark-color-dark: $ouds-color-content-on-action-highlighted-dark !default; // OUDS mod: instead of `$body-color-dark`
$mark-bg-dark: $ouds-color-action-highlighted-dark !default; // OUDS mod: instead of `$yellow-800`

$focus-ring-color-dark: rgba($ouds-color-orange-500, $focus-ring-opacity) !default; // OUDS mod

Expand Down
6 changes: 3 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -791,7 +791,7 @@ $text-muted: var(--#{$prefix}secondary-color) !default; // Depr

$blockquote-margin-y: $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
// OUDS mod: no `$blockquote-font-size`
$blockquote-footer-color: var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
$blockquote-footer-color: var(--#{$prefix}color-content-muted) !default; // OUDS mod: instead of `$gray-600`
// OUDS mod: no `$blockquote-footer-font-size`

$hr-margin-y: $ouds-space-fixed-medium !default;
Expand Down Expand Up @@ -819,8 +819,8 @@ $dt-font-weight: $font-weight-bold !default;
$list-inline-padding: $spacer * .25 !default;

$mark-padding: .125em !default; // OUDS mod: instead of `.1875rem`
$mark-color: $ouds-color-bg-primary-light !default; // OUDS mod: instead of `$body-color`
$mark-bg: $ouds-color-content-default-light !default; // OUDS mod: instead of `$yellow-100`
$mark-color: $ouds-color-content-on-action-highlighted-light !default; // OUDS mod: instead of `$body-color`
$mark-bg: $ouds-color-action-highlighted-light !default; // OUDS mod: instead of `$yellow-100`
// scss-docs-end type-variables
// End mod

Expand Down
26 changes: 26 additions & 0 deletions scss/helpers/_color-bg.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,29 @@
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}

// OUDS mod
@each $color, $value in map-remove($ouds-backgrounds, "transparent") {
$text-bg-color: var(--#{$prefix}color-content-default);
@if index(("brand-primary"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-content-on-brand-primary);
} @else if index(("emphasized"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-always-white);
} @else if index(("always-black"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-always-on-black);
} @else if index(("always-white"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-always-on-white);
} @else if index(("status-neutral-emphasized", "status-negative-emphasized"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-content-on-status-emphasized-alt);
} @else if index(("status-accent-emphasized", "status-positive-emphasized", "status-warning-emphasized", "status-info-emphasized"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-content-on-status-emphasized);
} @else if index(("status-neutral-muted", "status-accent-muted", "status-positive-muted", "status-negative-muted", "status-warning-muted", "status-info-muted"), #{$color}) {
$text-bg-color: var(--#{$prefix}color-content-on-status-muted);
}

.text-bg-#{$color} {
color: $text-bg-color if($enable-important-utilities, !important, null);
background-color: $value if($enable-important-utilities, !important, null);
}
}
// End mod
1 change: 1 addition & 0 deletions scss/helpers/_colored-links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
}

// OUDS mod
// TODO LM: Decide if we keep the dark mode or not
@if $enable-dark-mode {
@include color-mode(dark) {
@each $color, $value in $theme-colors-dark {
Expand Down
Loading
Loading