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

louismaximepiton · 2024-11-22T09:44:27Z

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 ?

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.

To be done after the PR is merged

Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the Color theme page is developed.
Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the Utilities colors (text) page is developed.
Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the Utilities background (bg) page is developed.
Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the Helpers text + background (text-bg) page is developed.
Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the mapping to Bootstrap variable have been done.
Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that color-palette.md should be updated once the method to generate utilities is merged.
Remove netlify deployment.

Motivation & Context

Types of change

New feature (non-breaking change which adds functionality)

Live previews

https://deploy-preview-2802--boosted.netlify.app/docs/customize/color-palette
https://deploy-preview-2802--boosted.netlify.app/docs/customize/color-theme (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/customize/color-modes (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/helpers/color-background (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/helpers/colored-links (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/utilities/background (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/utilities/borders (Not ready yet)
https://deploy-preview-2802--boosted.netlify.app/docs/utilities/colors (Not ready yet)

netlify · 2024-11-28T14:24:19Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`0fc5dd4`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/676d2cdf3dbde60008fbc72f
😎 Deploy Preview	https://deploy-preview-2802--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.

…kens-colors

vprothais · 2024-12-10T15:13:41Z

site/assets/scss/_component-examples.scss

@@ -6,7 +6,7 @@
  display: flex; // OUDS mod
  flex-direction: column; // OUDS mod
  margin: 0 ($bd-gutter-x * -.5) 1rem;
-  border: solid var(--bs-border-color-subtle); // OUDS mod: instead of `var(--bs-border-color)`
+  border: solid var(--bs-color-border-emphasized); // OUDS mod: instead of `var(--bs-border-color)`


I would have replaced border-color-subtle by border-color-default I think, it's much in the subtle spirit than emphasized.

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

vprothais · 2024-12-11T08:27:42Z

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

+{{< callout danger >}}
+Some of the colors below do not belong to the Orange Unified Design System specifications.
+<!-- TODO LM: Decide how to link to the new DSM -->
+Please refer to our [color palette section](#palette)<!-- and to the [Color guidelines](https://unified-design-system.orange.com/472794e18/p/217ac6-colour/b/4705d3) on the Orange Unified Design System website-->.


Maybe we should link to this page : https://unified-design-system.orange.com/472794e18/p/92b911-colour/b/886430 ? Not sure since it seems to contain colors we don't have through tokens :/

I think we will see when it'll be uncommented, but for now the page is kinda of desynchronized with the actual colors, I've set another for now: https://unified-design-system.orange.com/472794e18/p/217ac6-color

vprothais · 2024-12-11T08:33:10Z

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

+
+<h3>Example</h3>
+
+Here's how you should not use these in your Sass:


I find it dangerous to show what we should not do. Developer may only see the code and don't read this sentence.
Maybe we should have comments directly in the following code, together with the good way to do it.

Tried something in the last commit

vprothais · 2024-12-11T10:34:55Z

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

+
+### Sass maps
+
+<!-- TODO LM


What do you want to do with this commented content ?

I'm still not quite sure how to handle it properly, maybe we should wait for the Bootstrap compatibility to uncomment it.

vprothais · 2024-12-12T10:09:46Z

scss/_variables.scss

@@ -317,6 +298,7 @@ $cyans: (
 ) !default;
 // fusv-enable

+// TODO LM: take care of the rest


what does that mean ? Should it be done in this PR ?

Maybe at some point when we will tackle the bootstrap compatibility, so it might happen on a PR based on this one.

…kens-colors

louismaximepiton added feature docs Improvements or additions to documentation css labels Nov 22, 2024

louismaximepiton added this to the OUDS milestone Nov 22, 2024

louismaximepiton marked this pull request as draft November 22, 2024 09:45

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

Add color tokens in OUDS Web

11e7727

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors branch from 8d41cf0 to 11e7727 Compare November 29, 2024 14:10

hannahiss and others added 7 commits December 2, 2024 16:35

Restore all custom examples from Bootstrap

c3c7a8a

Add Bootstrap basic logo for examples

5ebd0c0

fix(CI)

0d1f643

Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-to…

7924cd6

…kens-colors

First draft on new colors

5399a22

fix(ci)

a1f18d3

fix merge issues + enhance color palette

b6b2f0f

vprothais reviewed Dec 12, 2024

View reviewed changes

fix(review)

c70d6f7

hannahiss mentioned this pull request Dec 20, 2024

[OUDS] Button component #2804

Draft

47 tasks

louismaximepiton added 2 commits December 26, 2024 10:26

Merge remote-tracking branch 'origin/ouds/main' into ouds/main-lmp-to…

5e142b7

…kens-colors

Add elevation color

0fc5dd4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

louismaximepiton commented Nov 22, 2024 •

edited

Loading

netlify bot commented Nov 28, 2024 •

edited

Loading

vprothais Dec 10, 2024

vprothais Dec 11, 2024

louismaximepiton Dec 17, 2024

vprothais Dec 11, 2024

louismaximepiton Dec 17, 2024

vprothais Dec 11, 2024

louismaximepiton Dec 17, 2024

vprothais Dec 12, 2024

louismaximepiton Dec 17, 2024


		<h3>Example</h3>

		Here's how you should not use these in your Sass:

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

Are you sure you want to change the base?

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

Conversation

louismaximepiton commented Nov 22, 2024 • edited Loading

Related issues

Description

Remaining tasks and questions

Done list

To be done after the PR is merged

Motivation & Context

Types of change

Live previews

netlify bot commented Nov 28, 2024 • edited Loading

✅ Deploy Preview for boosted ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louismaximepiton commented Nov 22, 2024 •

edited

Loading

netlify bot commented Nov 28, 2024 •

edited

Loading