[OUDS] Add background utilities to the Colors tokens PR #2807

louismaximepiton · 2024-11-29T15:21:58Z

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

NA

Description

Remaining tasks and questions

⚠️ Questions:

Naming of the dynamic themes ? Can be changed later so postponed for now
Choose whether we use theme or mode naming
How to handle duplicate .bg-primary, .bg-secondary, etc ...

Tasks:

Done list

The following was done in the PR:

Added two themes root and root-inverted
Added Background page
Added Color modes page
Added the background utilities
Added a new way to determine the root selector
Changed all calls to background and background-color
Added tests

To be done after the PR is merged

Motivation & Context

Types of change

New feature (non-breaking change which adds functionality)

Live previews

https://deploy-preview-2807--boosted.netlify.app/docs/utilities/background

netlify · 2024-11-29T15:23:32Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`3d2f01c`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/677258dc4770bb00080ec32b
😎 Deploy Preview	https://deploy-preview-2807--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

scss/_mixins.scss

scss/mixins/_color-mode.scss

site/assets/scss/_tarteaucitron.scss

site/content/docs/0.0/utilities/shadows.md

vprothais

Some minor things. I approve if you need to merge this one and fix it later or wait for us to be there to talk about some points

vprothais · 2024-12-27T13:40:10Z

site/content/docs/0.0/customize/color-modes.md

+Our dark mode option is available to use for all users of OUDS Web, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `$enable-dark-mode` to `false`.
+
+{{< callout warning >}}
+Please be aware that some of OUDS Web's components always use the contextual dark mode to have the same rendering both in light and dark mode, such as our [Orange navbar]({{< docsref "/components/orange-navbar" >}}) and [Footer]({{< docsref "/components/footer" >}}). Please respect this constraint.


We don't have the navbar and footer yet, maybe we should comment the link for now.

vprothais · 2024-12-27T13:42:08Z

site/content/docs/0.0/customize/color-modes.md

+</html>
+```
+
+OUDS Web do ship with a built-in color mode picker, you can use the one from our own documentation if you like in our [Orange navbar section]({{< docsref "/components/orange-navbar#with-mode-selector" >}}). [Learn more in the JavaScript section.](#javascript)


We don't have the navbar yet, maybe we should comment the link for now.

vprothais · 2024-12-27T14:02:08Z

site/content/docs/0.0/customize/color-modes.md

+}
+```
+
+#### Change the root selector


While re-reading this one, I asked myself if we won't have a problem with styles defined on body, if the selector isn't :root. We have some style in reboot defined on body, using css vars. If those vars are defined on a child element, they won't exist in body. Maybe some of those styles should be moved to custom root selector instead of body ?

That's a good question, maybe as you said, we should set all these attributes inside the root selector since mostly all variables will inherit and so be set in the body for most of them. I'm doing it, but it will imply many docs changes. Do we refactor all BS variables from --bs-body-bg to --bs-root-bg ? I don't think we should since they are here mainly for the Bootstrap compatibility but I'm just asking.

I'm not that sure about the selector I use in the _reboot.scss.

Not sure about the associated naming

If we don't want it, we can just revert: 1e8be13

I agree with you, we don't need to rename variables, the body meaning is still relevant for what it does.
I don't know if the ":root children" term is comprehensible for everyone but let's keep it.

vprothais · 2024-12-27T15:03:14Z

site/content/docs/0.0/customize/color-modes.md

+
+{{< callout info >}}
+Check out our [Orange navbar mode selector variant]({{< docsref "/components/orange-navbar#with-mode-selector" >}}) to add a color mode selector to your navbar.
+{{< /callout >}}


Maybe this callout should be hidden for now since the component is not available yet

vprothais · 2024-12-27T15:21:53Z

site/content/docs/0.0/customize/custom-libraries.md

+
+### Custom color modes
+
+<!-- TODO LM: Do we Ouds ify this paragraph or remove it ? -->


Hmm good question here,
I'm not completely sure on how we will manage Sosh, but I think most of brand/countries wont have to declare custom color mode. Color mode correspond pretty much to what is done in Figma with tokens. A new brand will have is own instance of tokens but will not be a color mode in OUDS Web. So I think this part should not be useful but I'm not completely sure :)

Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Louis-Maxime Piton <[email protected]> chore: update tokens (#2777) Co-authored-by: boosted-bot <[email protected]> Co-authored-by: Julien Déramond <[email protected]> chore(merge main): patched Boosted commit → be8268e (#2778) chore: update tokens (#2780) Co-authored-by: boosted-bot <[email protected]> feat: add Dimension tokens, utilities and documentation (#2754) Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Vincent Prothais <[email protected]> tmp changed display classname and reordering of tables and small definition Some modifs + some OUDS mods Add some OUDS mod, remove .initialism, add some documentation Thiner handle of OUDS mod + small tweaks of the doc. Adapting documentation with `px` and right values. First version with icon, missing links and the end of the icon page Remove '-web' from tokens, use mixin rather than extend, handle the icon size a bit differently and add documentation ------------ Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Vincent Prothais <[email protected]> Fix ci chore: update tokens (#2790) Co-authored-by: boosted-bot <[email protected]> Co-authored-by: Julien Déramond <[email protected]> Remove useless classes, Add font references everywhere, Add doc about the new mixin, Remove all `_config.scss` references, Add `.mw-none` utility, Update Scss tests chore: update tokens (#2793) Co-authored-by: boosted-bot <[email protected]> Small tweaks of font-stack Fix CI migration guide (from v0.0.3) fix(review) ------------ Co-authored-by: Hannah Issermann <[email protected]> chore: update tokens (#2794) Co-authored-by: boosted-bot <[email protected]> Align with mobile apps presentation css and sass vars and maps and mixins in both guides + first version of migration guide from Boosted last fixes about bootstrap-compat migration doc fix docs job (indentation) Review migration guides and doc with LM Update site/content/docs/0.0/helpers/icon.md Remove Label font-size classes Adding examples inside the doc, and small css tweaks New ways to architect the icon + text Adding migration guides fix(ci) Start button component Add minimal, strong and negative variants Fix css-test All btn color variants fix(design): after design review Small tweak for forgotten `.text-*` and some spacings. Add color tokens in OUDS Web Align bootstrap compat buttons strictly to designed buttons Add icon buttons feat: add Typography tokens, utilities and documentation (#2774) ------------ Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Hannah Issermann <[email protected]> Co-authored-by: Vincent Prothais <[email protected]> First try for loading button Add color tokens in OUDS Web Restore all custom examples from Bootstrap Add Bootstrap basic logo for examples Rewrite all button documentation. Determinate loading, skeleton and buttons on colored background must still be implemented remove unused button-outline-variant fix(CI) fix(docs): add the forgotten `.border-*`, `.opacity-*` and a `.ms-auto` misplaced in the previous PRs (#2806) fix(docs): change the font example thumbnails (#2806) chore: update tokens (#2805) Co-authored-by: boosted-bot <[email protected]> Co-authored-by: louismaxime.piton <[email protected]> chore: update tokens (#2816) --------- Co-authored-by: boosted-bot <[email protected]> Co-authored-by: louismaxime.piton <[email protected]> First draft on new colors fix(ci) fix merge issues + enhance color palette Use new color tokens + add mono (on colored bg) variants Check mono tokens against bad values + implement loading button example comment mixin button-outline-variant since vars are not defined use $ouds-button-size-loader token fix css-lint continue doc and laoding/skeleton states fix btn ids start migration guides, enhance doc, bootstrap-compat fix(review) Adapt to some of the new decisions made on buttons (to be finalized), variant loader-indeterminate with span chore: update tokens (#2829) --------- Co-authored-by: boosted-bot <[email protected]> Co-authored-by: louismaxime.piton <[email protected]> Add elevation color [OUDS] Add background utilities to the Colors tokens PR (#2807) change $ouds-button-space-inset-icon-alone to $ouds-button-space-inset-icon-only tokens: use new token $ouds-button-border-width-default-interaction-mono tokens: $ouds-button-color-border-default-disabled-mono well synchronized, so remove comment tokens: use new token $ouds-button-border-width-default-interaction-mono tokens: use --#{$prefix}color-opacity-transparent instead of --#{$prefix}color-opacity-invisible-black and --#{$prefix}color-content-on-status-emphasized-alt instead of --#{$prefix}color-content-on-action-negative For now, we chose to use two classes for variants on colored bg, e.g. `.btn-default.btn-on-colored-bg` Negative and colored bg Negative and colored bg Loading buttons!!! fix CI (ids) fix CI (cspell) Add border color utilities to the Colors tokens PR (#2823) Finalize loading buttons doc and example Fixes after first comments (review) Fixes after first comments (review) Fixes after first comments (review) Fixes after first comments (review) - change colored-bg with utility and add data-bs-theme + ex - change colored-bg with utility and add data-bs-theme + example with negative bg - replace old boosted btn-* by new classes in docs Replace old boosted btn-* by new classes everywhere btn-primary => btn-strong and btn-secondary and btn-outline-secondary => btn-default update tarteaucitron styles (buttons and modal size) revert examples Move Bootstrap examples into the right category after loading, put the focus back on the button Handle Bootstrap examples correctly chore(merge main): patched Boosted commit → 7bde599 (#2827) chore: update tokens (#2834) Add text color utilities to the Colors tokens PR Add color background helpers to the Colors tokens PR (#2831) changes after merge + add link to buttons guidelines First reviews from LM Proposal for new CSS Animation, closer to the previous DS one Update scss/_buttons.scss Co-authored-by: Louis-Maxime Piton <[email protected]> fix: several updates to take PR review comments into account fix: additional fixes on PR Buttons

louismaximepiton added 📖 documentation Improvements or additions to documentation css labels Nov 29, 2024

louismaximepiton added this to the OUDS milestone Nov 29, 2024

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bg-utilities branch 4 times, most recently from f315e01 to 937da5b Compare December 9, 2024 10:42

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bg-utilities branch 7 times, most recently from 4e218a1 to 86ae614 Compare December 16, 2024 16:18

louismaximepiton marked this pull request as ready for review December 16, 2024 17:34

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bg-utilities branch from 86ae614 to 9db1ce9 Compare December 17, 2024 10:30

vprothais reviewed Dec 17, 2024

View reviewed changes

scss/_mixins.scss Outdated Show resolved Hide resolved

scss/mixins/_color-mode.scss Outdated Show resolved Hide resolved

site/assets/scss/_tarteaucitron.scss Outdated Show resolved Hide resolved

site/content/docs/0.0/utilities/shadows.md Show resolved Hide resolved

louismaximepiton added 2 commits December 26, 2024 11:17

Add background utilities to the Colors tokens PR

e2f497b

fix(review)

29f453f

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bg-utilities branch from 9db1ce9 to 29f453f Compare December 26, 2024 10:18

louismaximepiton requested a review from vprothais December 27, 2024 07:52

louismaximepiton added 2 commits December 27, 2024 12:00

fix(ci+review)

5e7c926

fix(ci)

c107409

vprothais approved these changes Dec 27, 2024

View reviewed changes

louismaximepiton added 3 commits December 30, 2024 08:48

fix(review)

4d5bb68

More precise handling of the :root selector

1e8be13

fix(ci)

3d2f01c

vprothais merged commit b571a3d into ouds/main-lmp-tokens-colors Jan 6, 2025
14 checks passed

vprothais deleted the ouds/main-lmp-tokens-colors-bg-utilities branch January 6, 2025 10:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[OUDS] Add background utilities to the Colors tokens PR #2807

[OUDS] Add background utilities to the Colors tokens PR #2807

Uh oh!

louismaximepiton commented Nov 29, 2024 •

edited

Loading

Uh oh!

netlify bot commented Nov 29, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vprothais left a comment

Uh oh!

vprothais Dec 27, 2024

Uh oh!

vprothais Dec 27, 2024

Uh oh!

vprothais Dec 27, 2024

Uh oh!

louismaximepiton Dec 30, 2024 •

edited

Loading

Uh oh!

vprothais Jan 6, 2025

Uh oh!

vprothais Dec 27, 2024

Uh oh!

vprothais Dec 27, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		### Custom color modes

		<!-- TODO LM: Do we Ouds ify this paragraph or remove it ? -->

[OUDS] Add background utilities to the Colors tokens PR #2807

[OUDS] Add background utilities to the Colors tokens PR #2807

Uh oh!

Conversation

louismaximepiton commented Nov 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Description

Remaining tasks and questions

Done list

To be done after the PR is merged

Motivation & Context

Types of change

Live previews

Uh oh!

netlify bot commented Nov 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for boosted ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vprothais left a comment

Choose a reason for hiding this comment

Uh oh!

vprothais Dec 27, 2024

Choose a reason for hiding this comment

Uh oh!

vprothais Dec 27, 2024

Choose a reason for hiding this comment

Uh oh!

vprothais Dec 27, 2024

Choose a reason for hiding this comment

Uh oh!

louismaximepiton Dec 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vprothais Jan 6, 2025

Choose a reason for hiding this comment

Uh oh!

vprothais Dec 27, 2024

Choose a reason for hiding this comment

Uh oh!

vprothais Dec 27, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

louismaximepiton commented Nov 29, 2024 •

edited

Loading

netlify bot commented Nov 29, 2024 •

edited

Loading

louismaximepiton Dec 30, 2024 •

edited

Loading