[OUDS] Add the Bootstrap compatibilities in the doc and the code #2833

louismaximepiton · 2025-01-08T17:59:35Z

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

Related issues

NA

Description

Remaining tasks and questions

⚠️ Questions:

.

Tasks:

Done list

The following was done in the PR:

Removed all the TODO LM occurrences by solving them or postponing for future us.
Added some missing OUDS mod
Removed entirely _colored-links.scss
Rewrite all Scss maps for Bootstrap compatibility with colors that we determined alltogether
Use correct CSS variables when they exist
Add all CSS variables related to colors inside Bootstrap compatibility
Adapted all the utilities in order to be more close to what should be rendered
Removed border-opacity, text-opacity and bg-opacity
Finished to adapt the Bootstrap variables to be sure that we have the right variables and the good rendering
Tweaked a bit the colored bgs to be inside Bootstrap compatibility and use the good colors
Adapted the CSS tests
Changed all the Bootstrap color CSS variables by the OUDS ones
Changed the shadows utilities
Added floating labels docs
Added all the missing documentation about how our color utilities are built
Added and checked all the bootstrap compatibility
Adapted our shortcodes

To be done after the PR is merged

Check for all the Scss diff, and check that there is no missing OUDS mod

Motivation & Context

Types of change

New feature (non-breaking change which adds functionality)

Live previews

https://deploy-preview-2833--boosted.netlify.app/docs/helpers/color-background

louismaximepiton · 2025-01-20T10:01:04Z

scss/_reboot.scss

  text-align: var(--#{$prefix}body-text-align);

  /* rtl:remove */
  letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
-  background-color: var(--#{$prefix}body-bg); // 2
+  background-color: var(--#{$prefix}color-bg-primary); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`


Not quite sure about these two changes in body and the following in the file, maybe

Suggested change

background-color: var(--#{$prefix}color-bg-primary); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`

background-color: var(--#{$prefix}body-bg, var(--#{$prefix}color-bg-primary)); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`

would be better ?

I'm not sure to understand, you want to do that to make it possible to change it through body-bg like its meant to be in bootstrap ? It would be taken into account even if not in compat mode

netlify · 2025-01-20T10:26:29Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`c00d687`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6790fe17e1307000085d7487
😎 Deploy Preview	https://deploy-preview-2833--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.

vprothais · 2025-01-20T10:57:55Z

site/layouts/shortcodes/example.html

@@ -37,7 +37,7 @@

    {{- if eq $show_preview true -}}
      <!-- OUDS mod: added `order-first` to handle the focus order -->


should the .border-default class be added to this OUDS mod comment ?

vprothais · 2025-01-20T14:05:09Z

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


 ### Sass mixins

-**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
+{{< bootstrap-compatibility false >}}
+**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients that shouldn't be used.


ahah this small passive-agressive, you could but you shouldn't :)

😄 I was wondering if we should let it like Bootstrap and if people use them, we don't care, maybe I should do that 🤔

I think very few people will read this part, and even less will need to do this kind of thing :)
No problem to keep it like this

vprothais · 2025-01-20T14:11:08Z

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

@@ -92,7 +92,7 @@ Or modify the default `border-color` of a component:
  Dangerous heading
 </div>

-<div class="p-3 bg-info bg-opacity-10 border border-emphasized border-start-0 rounded-end">
+<div class="p-3 text-bg-info bg-opacity-10 border border-emphasized border-start-0 rounded-end">


Humm I didn't not catch this while we were working on borders but shouldn't we use bootstrap classes since we are in the compatibility part ? border-brand-primary and border-emphasized are ouds classes. Not sure we were very consistent with that.

Whoops, good catch! I'll recheck the doc, but we should be using only Bootstrap classes inside bootstrap compatibility paragraphs.

Rechecked it, we only one class that was changed: .bg-primary -> .bg-brand-primary to have the same rendering than Bootstrap. Changed the rest.

vprothais · 2025-01-20T14:43:59Z

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

@@ -66,10 +66,35 @@ In the following table we assume that the context is switching between light and
 | `.text-on-status-emphasized` | `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized` | — |
 | `.text-on-status-emphasized-alt` | `.bg-status-neutral-emphasized`, `.bg-status-negative-emphasized` | — |
 | `.text-on-status-muted` | `.bg-status-neutral-muted`, `.bg-status-accent-muted`, `.bg-status-positive-muted`, `.bg-status-negative-muted`, `.bg-status-warning-muted`, `.bg-status-info-muted` | — |
-| `.text-always-on-black` | `.bg-emphasized`, `.bg-always-black` | — |
-| `.text-always-on-white` | `.bg-brand-primary`, `.bg-status-accent-emphasized`, `.bg-status-positive-emphasized`, `.bg-status-warning-emphasized`, `.bg-status-info-emphasized`, `.bg-always-white` | — |
+| `.text-always-on-black` | `.bg-always-black` | — |


If I understand well the documentation, those always-on are meant to be used on some media content. Maybe bg-color are not completely relevant here, but I would keep all dark background as acceptable with always-on-black and all light background as acceptable for the always-on-white. Like it was before.

Yeah, after the small discussion we had, we definitely should have the previous markdown.

site/assets/scss/_navbar.scss

vprothais · 2025-01-20T15:38:57Z

site/assets/scss/_content.scss

@@ -137,9 +137,9 @@
 // OUDS mod: some values have been changed in the following `custom-color-mode` and `.btn-dropdown` is used instead of `.btn-secondary`
 // scss-docs-start custom-color-mode
 [data-bs-theme="blue"] {


We have commented all the Blue bs-theme in custom-libraries markdown file. Do we still keep this content ?

We haven't decided yet if we should uncomment or delete the content, did we ? So I'm keeping this for now

Yes you're probably right, we had an exchange about that bu we did not solve this case. So we just need to remember to be consistent later when we decide what to do.

vprothais · 2025-01-20T15:44:12Z

site/assets/scss/_colors.scss

@@ -173,7 +173,6 @@
  @return $level;
 }

-// TODO LM: see if we remove it


Where is it used ? I can't find any corresponding documentation :/

It's not used but it might be great to have it, let's talk more about it

vprothais · 2025-01-20T15:57:39Z

site/content/docs/0.0/examples/grid/grid.css

@@ -1,17 +1,17 @@
 .themed-grid-col {
  padding-top: .75rem;
  padding-bottom: .75rem;
-  background-color: var(--bs-secondary-bg); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  background-color: var(--bs-color-bg-secondary); /* OUDS mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */


We may use --bs-color-surface-status-neutral-muted to take advantage of the alpha layer in order to differentiate nested grid :

vprothais · 2025-01-20T16:00:22Z

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

@@ -89,7 +89,7 @@ Here is a recap table of when to use which contextual theme. Prefer to use `ligh
 However, these 4 themes should be enough to deal with all of your use cases. If it's not the case, you are probably using them wrong. Since the implementation might be quite hard to understand, don't hesitate to contact us via our [GitHub discussions]({{< param repo >}}/discussions) with a reduced test case if you're having trouble implementing.

 {{< callout info >}}
-We usually use **2 different layers to set the `background-color` and the theme**. In some rare case you might want to set it on one element. <!-- TODO LM: Fill in the blank and explain -->
+We use **2 different layers to set the `background-color` and the theme** when the theme doesn't inherit directly.


We always inherit from a theme, so maybe we could rather say when the inherited theme does not match or something like that ?

Yes, I mean when you don't need to specify a [data-bs-theme] but I'll try something clearer.

vprothais · 2025-01-21T15:17:05Z

scss/_maps.scss

@@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default;
 $utilities-text: map-merge(
  $utilities-colors,


is it useful to keep $utilities-colors here since all ref are overwritten directly in the map. (I find it perturbing but I could understand to keep it for bootstrap migration questions)

Yeah, it's a bit confusing but my pov was:

If people or a library override utilities colors on their own, they'll have more keys than what described in here so it might be good in some very rare cases

Be closer to Bootstrap since we don't drop it for now

vprothais · 2025-01-21T15:36:03Z

scss/helpers/_color-bg.scss

-@each $color, $value in $theme-colors {
-  .text-bg-#{$color} {
+@if $enable-bootstrap-compatibility {
+  @each $color, $value in map-remove($utilities-bg, "black", "white", "body") {


shouldn't we use $utilities-bg-colors here like the one used in utilities ?

TBH, I don't mind using the other one, it should be the same on our side, changing it

vprothais · 2025-01-21T15:41:37Z

scss/_maps.scss

  )
 ) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // OUDS mod
+$utilities-border-colors: $utilities-border !default; // OUDS mod: instead of `map-loop($utilities-border, rgba-css-var, "$key", "border", "$value")`


We end up with some useless local variables for border, bg and text. Each time we have a map, and just an affectation of this var to another var. It follows Bootstrap logic but it is harder to follow.

Yeah, it's kind of related to the previous point, TBH I don't have a strong opinion on this, but I think the closer to Bootstrap we are, the easier it is to keep it maintained. So I'd keep them for now

I think it's easier to understand to Bootstrap because we don't call the map-loop(rgba-css-var) which is hard to handle at the begining

vprothais · 2025-01-21T15:47:05Z

scss/_reboot.scss

  text-align: var(--#{$prefix}body-text-align);

  /* rtl:remove */
  letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
-  background-color: var(--#{$prefix}body-bg); // 2
+  background-color: var(--#{$prefix}color-bg-primary); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`


I'm not sure to understand, you want to do that to make it possible to change it through body-bg like its meant to be in bootstrap ? It would be taken into account even if not in compat mode

vprothais · 2025-01-22T12:50:10Z

scss/_utilities.scss

+          "black-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($black, .5)`
+          "white-50": var(--#{$prefix}color-content-muted), // Deprecated in Bootstrap // OUDS mod: instead of `rgba($white, .5)`
+          "body-secondary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}secondary-color)`
+          "body-tertiary": var(--#{$prefix}color-content-muted), // OUDS mod: instead of `var(--#{$prefix}tertiary-color)`


if we want a different value than secondary we may use disabled here. Maybe it too light ?!

Yeah I've asked myself several times as well, my pov for this: when people use this variable on Bootstrap side https://getbootstrap.com/docs/5.3/customize/color-theme/, it's wrote: Use the tertiary color and bg options to have a body secondary less-emphasized rendering. . To me it means that it should still be accessible to be read.
That said, if you prefer to have disabled in here, I don't really mind.

vprothais · 2025-01-22T12:52:56Z

scss/_utilities.scss

-          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
-          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-secondary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity))`
+          "body-tertiary": var(--#{$prefix}color-bg-secondary), // OUDS mod: instead of `rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity))`


could be color-bg-tertiary if we want a difference with secondary

Same as above, it might look weird on Bootstrap compat but I don't really mind to change it.

vprothais · 2025-01-22T13:30:23Z

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


 Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We then map all the created variables to one of our raw color tokens that are coming from the design directly.

-<h3>Example</h3>
+<h4>Example</h4>

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

 ```scss


There is an issue with the rendering of this code sample. But If we change the parameter of bootstrap-compatibility short code we will have an issue elsewhere.

Yes good catch, I changed it in the last commit.

vprothais · 2025-01-22T13:38:47Z

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

@@ -218,4 +228,4 @@ $utilities: map-merge(
 @import "@ouds/web/scss/utilities/api";
 ```

-This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well. -->
+This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.


I really asking myself about this documentation page. The content is consistent and fit with OUDS. But good luck to the guy that will need to use any of this.

Yes, it's more a page to understand how OUDS work if people to get dive into the mechanism, I still need to add color-theme.md which is supposed to be related to this one with this one referencing the raw variables and the color theme page the semantic variables.

louismaximepiton added docs Improvements or additions to documentation css labels Jan 8, 2025

louismaximepiton added this to the OUDS milestone Jan 8, 2025

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bootstrap-compatibility branch from 2458723 to c62291e Compare January 9, 2025 09:42

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-text-bg-helpers branch from 98f2509 to 6a2b3d5 Compare January 9, 2025 09:47

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bootstrap-compatibility branch 5 times, most recently from 75bb0fc to 2120289 Compare January 15, 2025 14:26

Base automatically changed from ouds/main-lmp-tokens-colors-text-bg-helpers to ouds/main-lmp-tokens-colors-text-utilities January 17, 2025 10:52

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-text-utilities branch from 664b27f to f5fae42 Compare January 20, 2025 09:51

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bootstrap-compatibility branch from 2120289 to c1477b0 Compare January 20, 2025 09:54

louismaximepiton commented Jan 20, 2025

View reviewed changes

Base automatically changed from ouds/main-lmp-tokens-colors-text-utilities to ouds/main-lmp-tokens-colors January 20, 2025 10:16

Add the Bootstrap compatibilities in the doc and the code

1cf8b84

louismaximepiton force-pushed the ouds/main-lmp-tokens-colors-bootstrap-compatibility branch from c1477b0 to 1cf8b84 Compare January 20, 2025 10:25

vprothais reviewed Jan 20, 2025

View reviewed changes

vprothais reviewed Jan 22, 2025

View reviewed changes

fix(review)

c00d687

	background-color: var(--#{$prefix}color-bg-primary); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`
	background-color: var(--#{$prefix}body-bg, var(--#{$prefix}color-bg-primary)); // 2 // OUDS mod: instead of `var(--#{$prefix}body-bg)`

		@@ -37,7 +37,7 @@

		{{- if eq $show_preview true -}}
		<!-- OUDS mod: added `order-first` to handle the focus order -->

		@@ -288,12 +288,20 @@ $utilities-colors: $theme-colors-rgb !default;
		$utilities-text: map-merge(
		$utilities-colors,

[OUDS] Add the Bootstrap compatibilities in the doc and the code #2833

Are you sure you want to change the base?

[OUDS] Add the Bootstrap compatibilities in the doc and the code #2833

Conversation

louismaximepiton commented Jan 8, 2025 • 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

louismaximepiton Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Jan 20, 2025 • 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

louismaximepiton Jan 20, 2025 • edited Loading

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

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 Jan 22, 2025 • edited Loading

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

Choose a reason for hiding this comment

louismaximepiton commented Jan 8, 2025 •

edited

Loading

louismaximepiton Jan 20, 2025 •

edited

Loading

netlify bot commented Jan 20, 2025 •

edited

Loading

louismaximepiton Jan 20, 2025 •

edited

Loading

louismaximepiton Jan 22, 2025 •

edited

Loading