-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reintroduce all text color utilities #2030
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…in-his-text-colors-ic
- complete doc
Haven't tested in detail, but you might want to try the following: diff --git a/scss/_root.scss b/scss/_root.scss
index fd17dcdbd..39fa00853 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -158,6 +158,7 @@
--#{$boosted-prefix}kbd-color: #{$kbd-color-inverted};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg-inverted};
--#{$boosted-prefix}pre-color: #{$pre-color-inverted};
+ --#{$prefix}body-color: #{$body-color-dark};
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
[class*="bg-"]:not(&):not(.bg-transparent) {
@@ -175,6 +176,7 @@
--#{$boosted-prefix}kbd-color: #{$kbd-color};
--#{$boosted-prefix}kbd-bg: #{$kbd-bg};
--#{$boosted-prefix}pre-color: #{$pre-color};
+ --#{$prefix}body-color: #{$body-color};
}
}
// End mod Plus, for example, adding the definition for And we will probably be able to completely remove dark variants handling in this |
- change doc on colors (text-primary now turns to the right orange on dark-bg - again) - fix pbs on dark variants by changing color of body-color and heading-color on dark-bg - fix pb on buttons no-outline btn-inverse on hover - fix pb on navbar titles on hover - fix pbs on tag dark variants - change doc on spinners (use no class on light and text-white and no - adapt backgrounds and text colors in utilities
@julien-deramond
Remaining pbs & questions;
|
- cards: move text-bg-** to card-body - fix wording in docs (belong to) - colored-links in helpers and utilities: restore all the links colors, add bg-dark when needed, add design callout, restore accessibility tip - maps: remove light not needed (already in theme colors)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll review the migration guide once it's done.
- use theme-colors.yml to add bg-dark when needed on texts and links in utilities - fix and enhance wordings in docs - forgotten bg-dark with text-white - add more icons colors combinations examples
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Please retry analysis of this Pull-Request directly on SonarCloud. |
Kudos, SonarCloud Quality Gate passed!
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: Please transform
- [ ]
into- (NA)
in the description when things are not applicableRelated issues
Description
Reintroduce all text color utilities to conform to Bootstrap (and in particular within the dark mode) and allow developers to use text colors when needed, for SVG icons for example.
Add a design callout to explain it to developers and draw their attention to design specifications and accessibility requirements.
Motivation & Context
In the icons documentation, it is said to use text colors but they didn't exist anymore.
Types of change
Live previews
Fix wording:
do not belong the Orange Design System specifications
=>do not belong to the Orange Design System specifications
Doc, SCSS and examples (classes) changes:
Code of examples (markup or classes) changes, but doc and examples display remain exactly the same:
text-white
extra class when needed to comply with design and accessibility requirementstext-bg-**
to card body instead of the entire card to keep header black with white fonttext-white
when needed and no class otherwise to have the right colorSCSS changes, but doc and examples remain exactly the same:
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge