Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Merged
merged 20 commits into from
Jan 29, 2025

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
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
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
css 📖 documentation Improvements or additions to documentation 🗳️ feature
Projects
Development

Successfully merging this pull request may close these issues.

3 participants