Skip to content

Commit 7ea0ff4

Browse files
louismaximepitonlouismaximepiton
authored
[OUDS] Add migration guides to the color tokens PR (#2838)
1 parent 6a559b8 commit 7ea0ff4

File tree

11 files changed

+1334
-32
lines changed

11 files changed

+1334
-32
lines changed

‎js/tests/visual/dropdown.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="container-fluid">
1111
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
1212

13-
<nav class="navbar navbar-expand-md bg-always-white">
13+
<nav class="navbar navbar-expand-md bg-always-white" data-bs-theme="light">
1414
<a class="navbar-brand" href="#">Navbar</a>
1515
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
1616
<span class="navbar-toggler-icon"></span>

‎js/tests/visual/modal.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</style>
1414
</head>
1515
<body>
16-
<nav class="navbar navbar-expand-lg navbar-dark bg-always-black">
16+
<nav class="navbar navbar-expand-lg navbar-dark bg-always-black" data-bs-theme="dark">
1717
<div class="container-fluid">
1818
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
1919
<span class="navbar-toggler-icon"></span>
@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
188188

189189
<br><br>
190190

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

‎js/tests/visual/scrollspy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</style>
1111
</head>
1212
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70">
13-
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top">
13+
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top" data-bs-theme="dark">
1414
<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>

‎scss/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,7 @@ $enable-fixed-header: true !default; // OUDS mod: used to apply scro
422422
$enable-bootstrap-compatibility: false !default; // OUDS mod: used to enforce Bootstrap compatibility
423423

424424
$enable-dark-mode: true !default;
425-
// $color-mode-type: data !default; // `data` or `media-query`
425+
// OUDS mod: $color-mode-type is declared in our `_config.scss` file
426426

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

‎scss/tokens/_raw.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ $ouds-border-width-125: $ouds-border-base * 1.25 !default; // 5
3535
// Color
3636

3737
// scss-docs-start ouds-raw-color
38-
$ouds-color-decorative-amber-100: #fff0cc !default;
39-
$ouds-color-decorative-amber-200: #ffe199 !default;
40-
$ouds-color-decorative-amber-300: #ffd266 !default;
41-
$ouds-color-decorative-amber-400: #ffc333 !default;
38+
// $ouds-color-decorative-amber-100: #fff0cc !default;
39+
// $ouds-color-decorative-amber-200: #ffe199 !default;
40+
// $ouds-color-decorative-amber-300: #ffd266 !default;
41+
// $ouds-color-decorative-amber-400: #ffc333 !default;
4242
$ouds-color-decorative-amber-500: #ffb400 !default;
43-
$ouds-color-decorative-amber-600: #cc9000 !default;
44-
$ouds-color-decorative-amber-700: #996c00 !default;
45-
$ouds-color-decorative-amber-800: #664800 !default;
46-
$ouds-color-decorative-amber-900: #332400 !default;
43+
// $ouds-color-decorative-amber-600: #cc9000 !default;
44+
// $ouds-color-decorative-amber-700: #996c00 !default;
45+
// $ouds-color-decorative-amber-800: #664800 !default;
46+
// $ouds-color-decorative-amber-900: #332400 !default;
4747
$ouds-color-decorative-amethyst-100: #f1ecf9 !default;
4848
$ouds-color-decorative-amethyst-200: #e0d4f2 !default;
4949
$ouds-color-decorative-amethyst-300: #c5ade6 !default;

‎site/assets/scss/_syntax.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
// Right now, values are from Bootstrap from `--base00` to `--baseOF` and the 4 remaining one are copied from OUDS Web's light mode
2727
@include color-mode(dark, true) {
2828
--base00: #{$ouds-color-functional-dark-gray-880};
29-
--base01: #{$gray-500};
29+
--base01: #{$gray-400};
3030
--base02: #{$teal-300};
3131
--base03: #{$cyan-300};
3232
--base04: #{$yellow-300};

‎site/content/docs/0.0/getting-started/accessibility.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Content which should be visually hidden, but remain accessible to assistive tech
3636

3737
```html
3838
<p>
39-
<svg width="8em" height="8em" class="text-status-negative" aria-hidden="true">
39+
<svg width="1.5em" height="1.5em" class="text-status-negative" aria-hidden="true">
4040
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#error-severe"/>
4141
</svg>
4242
<span class="visually-hidden">Danger: </span>

‎site/content/docs/0.0/helpers/icon.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
315315
<div class="bd-example">
316316
<div class="d-flex mb-medium">
317317
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
318-
<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
318+
<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
319319
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
320320
</svg>
321321
</div>
@@ -326,7 +326,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
326326
</div>
327327
<div class="d-flex mb-medium">
328328
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
329-
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
329+
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
330330
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
331331
</svg>
332332
</div>
@@ -337,7 +337,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
337337
</div>
338338
<div class="d-flex mb-medium">
339339
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
340-
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
340+
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
341341
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
342342
</svg>
343343
</div>
@@ -348,7 +348,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
348348
</div>
349349
<div class="d-flex mb-medium">
350350
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
351-
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
351+
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
352352
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
353353
</svg>
354354
</div>
@@ -359,7 +359,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
359359
</div>
360360
<div class="d-flex mb-medium">
361361
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
362-
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
362+
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
363363
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
364364
</svg>
365365
</div>
@@ -370,7 +370,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
370370
</div>
371371
<div class="d-flex mb-medium">
372372
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
373-
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
373+
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
374374
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
375375
</svg>
376376
</div>
@@ -381,7 +381,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
381381
</div>
382382
<div class="d-flex mb-medium">
383383
<div class="bg-emphasized d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
384-
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
384+
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
385385
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
386386
</svg>
387387
</div>

0 commit comments

Comments
 (0)