Skip to content

[OUDS] Add "Colors" tokens, utilities and documentation#2802

Merged
vprothais merged 20 commits intoouds/mainfrom
ouds/main-lmp-tokens-colors
Jan 29, 2025
Merged

[OUDS] Add "Colors" tokens, utilities and documentation#2802
vprothais merged 20 commits intoouds/mainfrom
ouds/main-lmp-tokens-colors

Conversation

@louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Nov 22, 2024

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

Related issues

NA

Description

Remaining tasks and questions

Questions:

  • Should we add some more Bootstrap examples ? Yep probably 28/11/2024.
  • Should the changes we didn't make inside other tokens PR be inside a new branch ? Yes 28/11/2024, see [OUDS] Docs: Change the classes that were missing #2806.
  • Should we change the pre color (syntax highlight) inside this PR or postpone it ? Postpone it
  • Naming of the dynamic themes ? Can be changed later so postponed for now
  • Choose whether we use theme or mode naming ? Postponed
  • How to handle duplicate .bg-primary, .bg-secondary, etc ...
  • What is the complete list of border color utilities that we should provide ? Answered by our designers on a meeting that happened the 20th of December 2024.
  • Do we keep colored links aligned with our text colors or not ? -> No
  • Do we keep the dark mode for colored links (coming from Boosted legacy) ? -> No
  • Do we keep all the utilities or do we keep only a few of them ? -> Only few of them
  • Do we keep the switch to set text color inside _color-bg.scss ? Any better solution ? -> No better solution

Tasks:

  • .

Done list

The following was done in the PR:

  • Removed _color-palette.scss.
  • Added a _config.scss to prepare the arrival of tokens/_semantic-colors-custom-props.scss generated by Tokenator.
  • Replaced --#{$prefix}focus-visible-inner-color and --#{$prefix}focus-visible-outer-color by --#{$prefix}color-border-focus-inset and --#{$prefix}color-border-focus.
  • Replaced --#{$prefix}border-color-subtle by --#{$prefix}color-border-emphasized and --#{$prefix}disabled-color by --#{$prefix}color-content-disabled (might be changed in the future) and --#{$prefix}tertiary-active-bg by --#{$prefix}color-action-primary-pressed.
  • Removed all the CSS var from Boosted since they will likely be replaced by the tokens/_semantic-colors-custom-props.scss ones.
  • Removed many Sass Variables introduced by Boosted to handle text or bg utilities. Replaced their call by either raw or semantic tokens depending on the context.
  • Set some Sass variables for basic HTML elements such as body text and body bg or code etc...
  • Add a new import for tokens/_semantic-colors-custom-props.scss.
  • Changed the test accordingly to the new colors.
  • Changed the colors in the components and composite files.
  • Uncommented some raw tokens to be able to map them to Bootstrap ones.
  • Changed many things that we forgot to change in the previous PRs since this one will certainly be the last one on the tokens.
  • Added the Bootstrap example to see how it fits with $enable-bootstrap-compatibility.
  • Updated colors.yml, grays.yml, palette.yml.
  • Created a first mapping of the Bootstrap variables using ours.
  • 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
  • Added new border color utilities
  • Added paragraph about the colors inside borders page
  • Changed all the .border-* calls in the doc
  • Changed all the border(|color): calls in the not components
  • Changed all the .text- color occurrences in the documentation
  • Introduced all the text color utilities and the corresponding documentation
  • Changed all the color properties in the Scss
  • Minor adapted the Scss variables
  • Introduced the colored links and the corresponding documentation
  • Tweaked a bit the callouts in the documentation
  • Uncommented some links in the doc
  • Added some new SVGs
  • Added text colors tests
  • Changed all the .text-bg-* occurrences in the docs
  • Introduced documentation for Color and Background
  • Uncommented some links
  • Reviewed the wording a bit
  • Added migrations guides.

To be done after the PR is merged

Motivation & Context

Types of change

  • New feature (non-breaking change which adds functionality)

Live previews

@louismaximepiton louismaximepiton added 🗳️ feature 📖 documentation Improvements or additions to documentation css labels Nov 22, 2024
@louismaximepiton louismaximepiton added this to the OUDS milestone Nov 22, 2024
@louismaximepiton louismaximepiton marked this pull request as draft November 22, 2024 09:45
@louismaximepiton louismaximepiton force-pushed the ouds/main-lmp-tokens-colors branch 5 times, most recently from 2872936 to 7f97176 Compare November 27, 2024 16:57
Base automatically changed from ouds/main-lmp-tokens-font to ouds/main November 28, 2024 14:13
@netlify
Copy link

netlify bot commented Nov 28, 2024

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 7ea0ff4
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/679a05fb05baac000818c131
😎 Deploy Preview https://deploy-preview-2802--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@louismaximepiton louismaximepiton force-pushed the ouds/main-lmp-tokens-colors branch from 8d41cf0 to 11e7727 Compare November 29, 2024 14:10
@hannahiss hannahiss mentioned this pull request Dec 20, 2024
47 tasks
@louismaximepiton louismaximepiton marked this pull request as ready for review January 29, 2025 10:45
@vprothais vprothais merged commit 637986a into ouds/main Jan 29, 2025
16 checks passed
@vprothais vprothais deleted the ouds/main-lmp-tokens-colors branch January 29, 2025 10:53
@louismaximepiton louismaximepiton mentioned this pull request Nov 4, 2025
17 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

css 📖 documentation Improvements or additions to documentation 🗳️ feature

Projects

Development

Successfully merging this pull request may close these issues.

3 participants