Skip to content

[OUDS] Add migration guides to the color tokens PR #2838

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
vprothais merged 5 commits into from
Jan 29, 2025
Merged

[OUDS] Add migration guides to the color tokens PR #2838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5741dd0
Add migration guides
louismaximepiton Jan 22, 2025
eafa409
fix(review)
louismaximepiton Jan 28, 2025
bb7685c
fix(ci)
louismaximepiton Jan 28, 2025
a1dfa82
fix(review)
louismaximepiton Jan 29, 2025
be71bb3
Quick fix for syntax
louismaximepiton Jan 29, 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
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-always-white">
<nav class="navbar navbar-expand-md bg-always-white" data-bs-theme="light">
<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
4 changes: 2 additions & 2 deletions 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-always-black">
<nav class="navbar navbar-expand-lg navbar-dark bg-always-black" data-bs-theme="dark">
<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 Expand Up @@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>

<br><br>

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

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-always-black fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-always-black fixed-top" data-bs-theme="dark">
<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>
Expand Down
2 changes: 1 addition & 1 deletion scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ $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`
// OUDS mod: $color-mode-type is declared in our `_config.scss` file

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

Expand Down
16 changes: 8 additions & 8 deletions scss/tokens/_raw.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@ $ouds-border-width-125: $ouds-border-base * 1.25 !default; // 5
// Color

// scss-docs-start ouds-raw-color
$ouds-color-decorative-amber-100: #fff0cc !default;
$ouds-color-decorative-amber-200: #ffe199 !default;
$ouds-color-decorative-amber-300: #ffd266 !default;
$ouds-color-decorative-amber-400: #ffc333 !default;
// $ouds-color-decorative-amber-100: #fff0cc !default;
// $ouds-color-decorative-amber-200: #ffe199 !default;
// $ouds-color-decorative-amber-300: #ffd266 !default;
// $ouds-color-decorative-amber-400: #ffc333 !default;
$ouds-color-decorative-amber-500: #ffb400 !default;
$ouds-color-decorative-amber-600: #cc9000 !default;
$ouds-color-decorative-amber-700: #996c00 !default;
$ouds-color-decorative-amber-800: #664800 !default;
$ouds-color-decorative-amber-900: #332400 !default;
// $ouds-color-decorative-amber-600: #cc9000 !default;
// $ouds-color-decorative-amber-700: #996c00 !default;
// $ouds-color-decorative-amber-800: #664800 !default;
// $ouds-color-decorative-amber-900: #332400 !default;
$ouds-color-decorative-amethyst-100: #f1ecf9 !default;
$ouds-color-decorative-amethyst-200: #e0d4f2 !default;
$ouds-color-decorative-amethyst-300: #c5ade6 !default;
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_syntax.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
// Right now, values are from Bootstrap from `--base00` to `--baseOF` and the 4 remaining one are copied from OUDS Web's light mode
@include color-mode(dark, true) {
--base00: #{$ouds-color-functional-dark-gray-880};
--base01: #{$gray-500};
--base01: #{$gray-400};
--base02: #{$teal-300};
--base03: #{$cyan-300};
--base04: #{$yellow-300};
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/0.0/getting-started/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Content which should be visually hidden, but remain accessible to assistive tech

```html
<p>
<svg width="8em" height="8em" class="text-status-negative" aria-hidden="true">
<svg width="1.5em" height="1.5em" class="text-status-negative" aria-hidden="true">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#error-severe"/>
</svg>
<span class="visually-hidden">Danger: </span>
Expand Down
14 changes: 7 additions & 7 deletions site/content/docs/0.0/helpers/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
<div class="bd-example">
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-2xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -326,7 +326,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-xs-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -337,7 +337,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-sm-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -348,7 +348,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-md-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -359,7 +359,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-lg-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -370,7 +370,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand All @@ -381,7 +381,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
</div>
<div class="d-flex mb-medium">
<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;">
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
<svg class="decorative-2xl-icon text-status-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true" data-bs-theme="dark">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
</svg>
</div>
Expand Down
Loading
Loading