Skip to content

chore: update tokens raw 1.7.0, core orange 1.2.0, brand system 2.0.1 #3178

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

Open
wants to merge 30 commits into
base: ouds/main
Choose a base branch
from
Open

chore: update tokens raw 1.7.0, core orange 1.2.0, brand system 2.0.1 #3178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
082c244
chore: update tokens
boosted-bot Oct 14, 2025
845828f
fix conflict in comp versions
MaxLardenois Oct 21, 2025
e0d4f81
fix: update elevation tokens
MaxLardenois Oct 21, 2025
f3a40f9
fix(docs): remove deleted shadows from doc
MaxLardenois Oct 21, 2025
9b1ab8b
docs: migration font weight tokens update
MaxLardenois Oct 22, 2025
948a0de
refactor: tshirt sizes for strings -size-
MaxLardenois Oct 22, 2025
009da08
refactor: tshirt sizes for strings '-size '
MaxLardenois Oct 23, 2025
2ddfc6f
refactor: tshirt sizes for strings '-size,'
MaxLardenois Oct 23, 2025
98a8181
refactor: tshirt sizes for strings '-size"'
MaxLardenois Oct 23, 2025
c7fae13
refactor: tshirt sizes for strings '-size)' and '-size\''
MaxLardenois Oct 23, 2025
2f0b3c7
fix: various tshirts sizes updates
MaxLardenois Oct 24, 2025
97b52c3
fix: update control items tokens
MaxLardenois Oct 24, 2025
5ab92a4
fix: breadcrumb v1.1
MaxLardenois Oct 24, 2025
24fb4c6
fix: buttons tokens
MaxLardenois Oct 24, 2025
dc71345
fix: update tokens ref on badges and tags
MaxLardenois Oct 24, 2025
ca77782
fix: copy core-orange-color-* tokens in sosh package
MaxLardenois Oct 24, 2025
35e9dd0
fix: update color mode lookup
MaxLardenois Oct 24, 2025
8969eea
fix: wrong tshirts sizes on custom props
MaxLardenois Oct 27, 2025
95053d5
fix: icons documentation sizes issues
MaxLardenois Oct 27, 2025
ce68d92
fix: update tshirt sizes from getting started to content
MaxLardenois Oct 28, 2025
4505a9f
fix: tshirt sizes corrections on components and utilities
MaxLardenois Nov 3, 2025
b05d1fc
fix: css tests for customize grid
MaxLardenois Nov 4, 2025
7281293
fix: css utilities test
MaxLardenois Nov 5, 2025
c1aa8a1
Merge branch 'ouds/main' into tokenator-update-tokens-20251014154239
MaxLardenois Nov 5, 2025
3093e9f
chore: tshirt sizes in migration from boosted
MaxLardenois Nov 7, 2025
1e39f9a
[OUDS] Update Tags to v1.4 after tokens update (#3201)
hannahiss Nov 10, 2025
451acae
chore: update tokens in migration doc
MaxLardenois Nov 10, 2025
7755f12
fix: only show background utilities once
MaxLardenois Nov 12, 2025
c8929fa
refactor: improvement on background filtering
MaxLardenois Nov 12, 2025
b77bb30
fix: conditional background display
MaxLardenois Nov 12, 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
8 changes: 4 additions & 4 deletions js/tests/integration/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid py-2xl">
<div class="container-fluid py-2xlarge">
<h1>Hello, world!</h1>

<div class="mt-4xl">
<button type="button" class="btn btn-default mb-lg" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
<div class="mt-4xlarge">
<button type="button" class="btn btn-default mb-large" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>

<div id="carouselExampleIndicators" class="carousel slide mt-sm" data-bs-ride="carousel">
<div id="carouselExampleIndicators" class="carousel slide mt-small" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button>
Expand Down
4 changes: 2 additions & 2 deletions js/tests/unit/toast.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ describe('Toast', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = [
'<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ms-short mb-2xs btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
' <button type="button" class="ms-2xsmall mb-2xsmall btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
'</div>'
].join('')

Expand Down Expand Up @@ -99,7 +99,7 @@ describe('Toast', () => {

fixtureEl.innerHTML = [
'<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
' <button type="button" class="ms-short mb-2xs btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
' <button type="button" class="ms-2xsmall mb-2xsmall btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
'</div>'
].join('')

Expand Down
14 changes: 7 additions & 7 deletions js/tests/visual/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</nav>

<ul class="nav nav-pills mt-lg">
<ul class="nav nav-pills mt-large">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
Expand All @@ -60,7 +60,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</ul>

<div class="row">
<div class="col-sm-12 mt-2xl">
<div class="col-sm-12 mt-2xlarge">
<div class="dropdown">
<button type="button" class="btn btn-default" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
Expand All @@ -80,7 +80,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</div>

<div class="col-sm-12 mt-2xl">
<div class="col-sm-12 mt-2xlarge">
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
Expand All @@ -102,7 +102,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</div>

<div class="col-sm-12 mt-2xl">
<div class="col-sm-12 mt-2xlarge">
<div class="btn-group dropup">
<a href="#" class="btn btn-default">Dropup split align end</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
Expand All @@ -124,7 +124,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</div>

<div class="col-sm-12 mt-2xl">
<div class="col-sm-12 mt-2xlarge">
<div class="btn-group dropend">
<a href="#" class="btn btn-default">Dropend split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
Expand Down Expand Up @@ -172,7 +172,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>

<div class="row">
<div class="col-sm-3 mt-2xl">
<div class="col-sm-3 mt-2xlarge">
<div class="btn-group dropdown">
<button type="button" class="btn btn-default">Dropdown reference</button>
<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
Expand All @@ -185,7 +185,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</ul>
</div>
</div>
<div class="col-sm-3 mt-2xl">
<div class="col-sm-3 mt-2xlarge">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Dropdown menu without Popper
Expand Down
12 changes: 6 additions & 6 deletions js/tests/visual/input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,26 @@ <h1>Input <small>Bootstrap Visual Test</small></h1>

<h2>No layout</h2>

<div class="mb-lg">
<div class="mb-large">
Text
<input class="form-control" />
</div>
<div class="mb-lg">
<div class="mb-large">
Email
<input type="email" class="form-control" />
</div>
<div class="mb-lg">
<div class="mb-large">
Number
<input type="number" class="form-control" />
</div>
<div class="mb-lg">
<div class="mb-large">
Date
<input type="date" class="form-control" />
</div>

<h2>Flex</h2>

<div class="d-flex flex-wrap gap-lg mb-lg">
<div class="d-flex flex-wrap gap-large mb-large">
<div>
Text
<input class="form-control" />
Expand All @@ -53,7 +53,7 @@ <h2>Flex</h2>

<h2>Grid</h2>

<div class="row mb-lg">
<div class="row mb-large">
<div class="col">
Text
<input class="form-control" />
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 @@ -35,7 +35,7 @@
</div>
</nav>

<div class="container-fluid mt-lg">
<div class="container-fluid mt-large">
<h1>Modal <small>Bootstrap Visual Test</small></h1>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
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-sm" id="tall" style="display: none;" data-bs-theme="dark">
<div class="text-bg-always-black p-small" id="tall" style="display: none;" data-bs-theme="dark">
Tall body content to force the page to have a scrollbar.
</div>

Expand Down
8 changes: 4 additions & 4 deletions js/tests/visual/toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div class="container-fluid">
<h1>Toast <small>Bootstrap Visual Test</small></h1>

<div class="row mt-lg">
<div class="row mt-large">
<div class="col-md-12">
<button id="btnShowToast" class="btn btn-strong">Show toast</button>
<button id="btnHideToast" class="btn btn-strong">Hide toast</button>
Expand All @@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
<div class="notifications">
<div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-header">
<span class="d-block bg-brand-primary rounded me-sm" style="width: 20px; height: 20px;"></span>
<span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
Expand All @@ -39,10 +39,10 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>

<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-block bg-brand-primary rounded me-sm" style="width: 20px; height: 20px;"></span>
<span class="d-block bg-brand-primary rounded me-small" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ms-sm mb-2xs btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
<button type="button" class="ms-small mb-2xsmall btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
Expand Down
8 changes: 4 additions & 4 deletions js/tests/visual/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,21 +63,21 @@ <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
<div class="col-sm-3">
<div id="target" title="Test tooltip on transformed element"></div>
</div>
<div id="shadow" class="pt-4xl"></div>
<div id="shadow" class="pt-4xlarge"></div>
</div>
<div id="customContainer"></div>

<div class="row mt-2xl border-top">
<div class="row mt-2xlarge border-top">
<hr />
<div class="h4">Test Selector triggered tooltips</div>
<div id="wrapperTriggeredBySelector">
<div class="py-sm selectorButtonsBlock">
<div class="py-small selectorButtonsBlock">
<button type="button" class="btn btn-default bs-dynamic-tooltip" title="random title">Using title</button>
<button type="button" class="btn btn-default bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
</div>

</div>
<div class="mt-lg">
<div class="mt-large">
<button type="button" class="btn btn-strong" onclick="duplicateButtons()">Duplicate above two buttons</button>
</div>
</div>
Expand Down
48 changes: 29 additions & 19 deletions packages/orange/scss/tokens/_component-colors-custom-props.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
// Components custom properties applications
// OUDS Core tokens version 1.5.0
// Orange Core tokens version 1.1.0
// Orange System tokens version 1.5.0
// OUDS Core tokens version 1.7.0
// Orange Core tokens version 1.2.0
// Orange System tokens version 2.0.1

// scss-docs-start ouds-all-component-css-color
// scss-docs-start ouds-component-css-color
@include color-mode(light, true) {
--#{$prefix}button-color-bg-brand-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-color-bg-brand-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-white};
--#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-black-680};
--#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-white-800};
--#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-white-800};
Expand All @@ -25,18 +29,18 @@
--#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-white-640};
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-white-640};
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-black};
Expand All @@ -45,15 +49,20 @@
--#{$prefix}link-mono-color-content-disabled: #{$core-ouds-color-opacity-black-280};
--#{$prefix}link-mono-color-content-focus: #{$core-ouds-color-functional-black};
--#{$prefix}switch-color-cursor: #{$core-ouds-color-functional-white};
--#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-500};
--#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-600};
--#{$prefix}switch-color-track-selected: #{$core-ouds-color-functional-malachite-700};
--#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-750};
--#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-black-440};
--#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-black-520};
--#{$prefix}button-social-color-content-focus: #{$ouds-color-content-on-action-focus-light};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-500};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$core-ouds-color-functional-sun-750};
}
// scss-docs-end ouds-component-css-color

@include color-mode(dark, true) {
--#{$prefix}button-color-bg-brand-pressed: #{$core-ouds-color-functional-gray-light-160};
--#{$prefix}button-color-bg-brand-loading: #{$core-ouds-color-functional-gray-light-160};
--#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-black};
--#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-white-800};
--#{$prefix}button-mono-color-bg-default-pressed: #{$core-ouds-color-opacity-black-680};
--#{$prefix}button-mono-color-bg-default-loading: #{$core-ouds-color-opacity-black-680};
Expand All @@ -73,18 +82,18 @@
--#{$prefix}button-mono-color-content-default-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-default-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}button-mono-color-content-default-focus: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-black-440};
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-minimal-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-minimal-hover: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-minimal-pressed: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-minimal-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-minimal-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}button-mono-color-content-minimal-focus: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-enabled: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-hover: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-content-strong-pressed: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-loading: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-content-strong-disabled: #{$core-ouds-color-opacity-black-440};
--#{$prefix}button-mono-color-content-strong-focus: #{$core-ouds-color-functional-black};
--#{$prefix}button-mono-color-border-default-enabled: #{$core-ouds-color-functional-white};
--#{$prefix}button-mono-color-border-default-disabled: #{$core-ouds-color-opacity-white-440};
--#{$prefix}link-mono-color-content-enabled: #{$core-ouds-color-functional-white};
Expand All @@ -97,6 +106,7 @@
--#{$prefix}switch-color-track-selected-interaction: #{$core-ouds-color-functional-malachite-300};
--#{$prefix}switch-color-track-unselected: #{$core-ouds-color-opacity-white-640};
--#{$prefix}switch-color-track-unselected-interaction: #{$core-ouds-color-opacity-white-800};
--#{$prefix}button-social-color-content-focus: #{$ouds-color-content-on-action-enabled-dark};
--#{$prefix}icon-color-content-status-warning-external-shape: #{$core-ouds-color-functional-sun-300};
--#{$prefix}icon-color-content-status-warning-internal-shape: #{$ouds-color-opacity-transparent-dark};
}
// scss-docs-end ouds-all-component-css-color
Loading
Loading