[OUDS] Add border color utilities to the Colors tokens PR #2823

louismaximepiton · 2024-12-17T15:28:24Z

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

Related issues

NA

Description

Remaining tasks and questions

⚠️ Questions:

What is the correspondence between Bootstrap border color utilities and ours ?
What is the complete list of border color utilities that we should provide ?
How much do we want to spend and be precised on the documentation ?

Tasks:

Done list

The following was done in the PR:

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

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-2823--boosted.netlify.app/docs/utilities/borders#color

scss/_maps.scss

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

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

netlify · 2025-01-06T15:54:35Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`fa59b11`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/677bfc62eb2cf20008d8e628
😎 Deploy Preview	https://deploy-preview-2823--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.

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 Dec 17, 2024

louismaximepiton added this to the OUDS milestone Dec 17, 2024

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-border-utilities branch 2 times, most recently from 797713a to 31097e6 Compare December 23, 2024 10:26

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

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-border-utilities branch 2 times, most recently from 4a11a41 to 2617225 Compare December 27, 2024 09:23

vprothais reviewed Dec 27, 2024

View reviewed changes

scss/_maps.scss Outdated Show resolved Hide resolved

site/content/docs/0.0/utilities/position.md Outdated Show resolved Hide resolved

site/content/docs/0.0/utilities/borders.md Outdated Show resolved Hide resolved

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-border-utilities branch from 2617225 to 10b3d2a Compare December 27, 2024 11:32

vprothais approved these changes Dec 27, 2024

View reviewed changes

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-border-utilities branch from 10b3d2a to 741f161 Compare December 30, 2024 08:31

Base automatically changed from ouds/main-lmp-tokens-colors-bg-utilities to ouds/main-lmp-tokens-colors January 6, 2025 10:19

Add border color utilities to the Colors tokens PR

fa59b11

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-border-utilities branch from 741f161 to fa59b11 Compare January 6, 2025 15:53

vprothais merged commit 40a0bce into ouds/main-lmp-tokens-colors Jan 8, 2025
12 checks passed

vprothais deleted the ouds/main-lmp-tokens-colors-border-utilities branch January 8, 2025 10:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[OUDS] Add border color utilities to the Colors tokens PR #2823

[OUDS] Add border color utilities to the Colors tokens PR #2823

Uh oh!

louismaximepiton commented Dec 17, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Jan 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[OUDS] Add border color utilities to the Colors tokens PR #2823

[OUDS] Add border color utilities to the Colors tokens PR #2823

Uh oh!

Conversation

louismaximepiton commented Dec 17, 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!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Jan 6, 2025

✅ Deploy Preview for boosted ready!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

louismaximepiton commented Dec 17, 2024 •

edited

Loading