[Theming] More color options and better docs#5939
Merged
cchaos merged 23 commits intoelastic:mainfrom Jun 2, 2022
Merged
Conversation
added 21 commits
May 7, 2022 13:58
- And removed `transparent` as a color
# Conflicts: # src-docs/src/views/guidelines/writing_examples.js # src-docs/src/views/guidelines/writing_guidelines.js # src-docs/src/views/theme/breakpoints/breakpoints.tsx # src-docs/src/views/theme/color/colors.tsx # src-docs/src/views/theme/other/other.tsx # src-docs/src/views/theme/sizing/tokens.tsx
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5939/ |
cchaos
commented
Jun 1, 2022
Contributor
Author
cchaos
left a comment
cchaos
left a comment
There was a problem hiding this comment.
This PR is now ready for review. Again, the reason it looks so large is because of moving the some of the old utility section pages to the theme pages (and snapshot updates).
| export const LanguageSelector = ({ | ||
| onChange, | ||
| showTour = true, | ||
| showTour = false, |
Contributor
Author
There was a problem hiding this comment.
Finally removing the language toggle tour
| href: sectionHref, | ||
| className: isCurrentlyOpenSubSection | ||
| ? 'guideSideNav__item--openSubTitle' | ||
| : '', |
Contributor
Author
There was a problem hiding this comment.
This is me fixing the double blue color of open sections
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5939/ |
elizabetdev
approved these changes
Jun 1, 2022
Contributor
elizabetdev
left a comment
elizabetdev
left a comment
There was a problem hiding this comment.
LGTM! 🎉
Found one minor issue. The following link still linking to the old page.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5939/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR mostly tackles a lot of documentation organization by leaning into the GuideTabbedPage and adding tabs with sub-sections to the theming docs (and a lot of snapshots).
Slight adjustment to
lightestShadeThis PR makes a non-noticeable adjustment to
lightestShadeto be slightly less blue but then adjusts the tint of thebodycolor to be slightly darker which also affects the subdued panel color. This is in preparation of some work I've been doing to simplify the amount of gray variations we use.Updates to color mixin
Added optional
methodfor declaring if it should return anopaqueortransparentversion of the color. This will be helpful for when we re-use this method for button colors.New button color mixins
Added placeholder mixins/functions for creating button-specific colors called
BUTTON_COLORS,useEuiButtonColorCSS(), andeuiButtonColor()Updated the colors / contrast section to show all three types of background colors:
These calculations were based on these started in Figma:
Docs Moved:
/utilities/responsive->/theming/breakpoints/utilities(HideFor / ShowFor / CSS classes)/theming/colors#background-colors->/theming/colors/utilities#background-colors/utilities/color-functions->/theming/colors/utilities/theming/sizing#logical-properties->/theming/sizing/utilities/utilities/text->/theming/typography/utilitiesChecklist
[ ] Props have proper autodocs and playground toggles[ ] Checked Code Sandbox works for any docs examples[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes