Skip to content

Commit 2c8b907

Browse files
louismaximepitonlouismaximepiton
committed
Add text color utilities to the Colors tokens PR
1 parent 3d2f01c commit 2c8b907

40 files changed

+487
-169
lines changed

‎js/tests/visual/modal.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<span class="navbar-toggler-icon"></span>
2020
</button>
2121
<div class="collapse navbar-collapse" id="navbarResponsive">
22-
<a class="navbar-brand text-white" href="#">This shouldn't jump!</a>
22+
<a class="navbar-brand text-always-on-black" href="#">This shouldn't jump!</a>
2323
<ul class="navbar-nav">
2424
<li class="nav-item">
2525
<a class="nav-link active" href="#" aria-current="page">Home</a>
@@ -212,7 +212,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
212212

213213
function reportFirefoxTestResult(result) {
214214
if (!firefoxTestDone) {
215-
ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
215+
ffBugTestResult.classList.add(result ? 'text-status-positive' : 'text-status-negative')
216216
ffBugTestResult.textContent = result ? 'PASS' : 'FAIL'
217217
}
218218
}

‎js/tests/visual/scrollspy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</head>
1212
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
1313
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
14-
<a class="navbar-brand text-white" href="#">Scrollspy test</a>
14+
<a class="navbar-brand text-always-on-black" 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>
1717
</button>

‎js/tests/visual/toast.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
4141
<div class="toast-header">
4242
<span class="d-block bg-brand-primary rounded me-short" style="width: 20px; height: 20px;"></span>
4343
<strong class="me-auto">Bootstrap</strong>
44-
<small class="text-body-secondary">2 seconds ago</small>
44+
<small class="text-muted">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-->
4646
</div>
4747
<div class="toast-body">

‎js/tests/visual/tooltip.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="container-fluid">
2121
<h1>Tooltip <small>OUDS Web Visual Test</small></h1>
2222

23-
<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>
23+
<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>
2424

2525
<hr>
2626

‎scss/_maps.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,28 @@ $ouds-backgrounds: (
141141
"transparent": transparent,
142142
) !default;
143143
// scss-docs-end ouds-maps-opacities
144+
145+
// scss-docs-start ouds-maps-text-colors
146+
$ouds-text-colors: (
147+
"brand-primary": var(--#{$prefix}color-content-brand-primary),
148+
"default": var(--#{$prefix}color-content-default),
149+
"disabled": var(--#{$prefix}color-content-disabled),
150+
"muted": var(--#{$prefix}color-content-muted),
151+
"on-brand-primary": var(--#{$prefix}color-content-on-brand-primary),
152+
"on-status-emphasized": var(--#{$prefix}color-content-on-status-emphasized),
153+
"on-status-emphasized-alt": var(--#{$prefix}color-content-on-status-emphasized-alt),
154+
"on-status-muted": var(--#{$prefix}color-content-on-status-muted),
155+
"status-info": var(--#{$prefix}color-content-status-info),
156+
"status-negative": var(--#{$prefix}color-content-status-negative),
157+
"status-positive": var(--#{$prefix}color-content-status-positive),
158+
"status-warning": var(--#{$prefix}color-content-status-warning),
159+
"always-black": var(--#{$prefix}color-always-black),
160+
"always-white": var(--#{$prefix}color-always-white),
161+
"always-on-black": var(--#{$prefix}color-always-on-black),
162+
"always-on-white": var(--#{$prefix}color-always-on-white),
163+
"reset": inherit,
164+
) !default;
165+
// scss-docs-end ouds-maps-text-colors
144166
// End mod
145167

146168
// Re-assigned maps

‎scss/_reboot.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -244,33 +244,33 @@ ul {
244244
// See https://developer.mozilla.org/fr/docs/Web/CSS/::marker
245245
// stylelint-disable selector-max-type
246246
li::marker {
247-
color: var(--#{$prefix}primary);
247+
color: var(--#{$prefix}color-content-brand-primary);
248248
vertical-align: middle;
249249

250250
ol & {
251251
color: inherit;
252252
}
253253
}
254254

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

257-
li li li::marker { color: var(--#{$prefix}tertiary-color); }
257+
li li li::marker { color: var(--#{$prefix}color-content-disabled); }
258258

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

266266
ol & {
267267
color: inherit;
268268
}
269269
}
270270

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

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

‎scss/_utilities.scss‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -978,9 +978,10 @@ $utilities: map-merge(
978978
"body-secondary": var(--#{$prefix}secondary-color),
979979
"body-tertiary": var(--#{$prefix}tertiary-color),
980980
"body-emphasis": var(--#{$prefix}emphasis-color),
981-
"reset": inherit,
981+
// OUDS mod: no "reset"
982982
)
983-
)
983+
),
984+
bootstrap-compatibility: true
984985
),
985986
"text-opacity": (
986987
css-var: true,
@@ -990,14 +991,23 @@ $utilities: map-merge(
990991
50: .5,
991992
75: .75,
992993
100: 1
993-
)
994+
),
995+
bootstrap-compatibility: true
994996
),
995997
"text-color": (
996998
property: color,
997999
class: text,
998-
values: $utilities-text-emphasis-colors
1000+
values: $utilities-text-emphasis-colors,
1001+
bootstrap-compatibility: true
9991002
),
10001003
// scss-docs-end utils-color
1004+
// scss-docs-start utils-color-ouds
1005+
"color-ouds": (
1006+
property: color,
1007+
class: text,
1008+
values: $ouds-text-colors
1009+
),
1010+
// scss-docs-end utils-color-ouds
10011011
// scss-docs-start utils-links
10021012
"link-opacity": (
10031013
css-var: true,

‎scss/_variables-dark.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ $headings-color-dark: inherit !default;
7979
$link-color-dark: $white !default; // OUDS mod: instead of `tint-color($primary, 40%)`
8080
$link-hover-color-dark: $ouds-color-orange-500 !default; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
8181
$code-color-dark: $ouds-color-content-muted-dark !default; // OUDS mod: instead of `tint-color($code-color, 40%)`
82-
$mark-color-dark: $ouds-color-bg-primary-dark !default; // OUDS mod: instead of `$body-color-dark`
83-
$mark-bg-dark: $ouds-color-content-default-dark !default; // OUDS mod: instead of `$yellow-800`
82+
$mark-color-dark: $ouds-color-content-on-action-highlighted-dark !default; // OUDS mod: instead of `$body-color-dark`
83+
$mark-bg-dark: $ouds-color-action-highlighted-dark !default; // OUDS mod: instead of `$yellow-800`
8484

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

‎scss/_variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -791,7 +791,7 @@ $text-muted: var(--#{$prefix}secondary-color) !default; // Depr
791791

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

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

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

‎scss/helpers/_colored-links.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,21 @@
1616
}
1717

1818
// OUDS mod
19+
// TODO LM: Decide whether we keep this or not
20+
// @each $color, $value in $ouds-text-colors {
21+
// .link-#{$color} {
22+
// color: $value if($enable-important-utilities, !important, null);
23+
// text-decoration-color: $value if($enable-important-utilities, !important, null);
24+
25+
// &:hover,
26+
// &:focus-visible {
27+
// color: $value if($enable-important-utilities, !important, null);
28+
// text-decoration-color: $value if($enable-important-utilities, !important, null);
29+
// }
30+
// }
31+
// }
32+
33+
// TODO LM: Decide if we keep the dark mode or not
1934
@if $enable-dark-mode {
2035
@include color-mode(dark) {
2136
@each $color, $value in $theme-colors-dark {

0 commit comments

Comments
 (0)