Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add dark mode #385

Merged
merged 56 commits into from
Nov 6, 2023
Merged

Add dark mode #385

merged 56 commits into from
Nov 6, 2023

Conversation

nlopin
Copy link
Contributor

@nlopin nlopin commented Oct 3, 2023 •
edited
Loading

What:

Adds dark mode to both themes: Classic and Redesigned

​
Why:

We want our users to enjoy the darkness
​
How:

  • I added a media query that redefines the theme CSS variables
  • Text, Header and other components now use color set to inherit to avoid manual overwriting
  • Page color now explicitly set in global styles

What's left

  • Review and verify the color mode component. Find a better name
  • Add new logo
  • make the dark schemes satisfy the Color type

Checklist:

  • Ready to be merged

nlopin and others added 30 commits August 14, 2023 13:00
@nlopin
docs: fix broken colors page
69b24e2
@nlopin
feat(button): add dark mode for the button
eb77f9a
feat: add ColorMode wrapper components to force a certain color mode
0c1e511
docs: add documentation for ColorMode component
5df8900
@dornelasnelson
test: ColorMode wrapper test
46aa840
docs: add documentation of the InvertedColorMode component
5423c8f
Merge branch 'add-dark-mode' of github.com:freenowtech/wave into add-…
38e3688 
…dark-mode
@nlopin
feat(button): add dark mode for the text button
fb0ca36
@nlopin
feat(input): add dark mode
fe2ab0c
@nlopin
feat(password): add dark mode
f7652ec
@nlopin
feat(select): add dark mode
7f68bec
@nlopin
feat(select-list): add dark mode
9b81a32
@nlopin
feat(textarea): add dark mode
8ecff16
@nlopin
feat(datepicker): add dark mode
9ea2bd4
@nlopin
feat(tooltip): add dark mode
9f8cc2c
@nlopin
feat(tag): add dark mode
f48ad71
@nlopin
feat(search): add dark mode
43c8c1e
@nlopin
feat(checkbox): add dark mode
ea345e6
@nlopin
feat(radiobutton): add dark mode
3be596e
@nlopin
feat(toggle): add dark mode
3e0d603
@nlopin
feat(filepicker): add dark mode
17fe6d1
@nlopin
feat(card): add dark mode
3a5951e
@nlopin
feat(modal): add dark mode
eb7d448
@nlopin
feat(headline): add dark mode
106ab0b
@nlopin
feat(tooltip): add dark mode
215ee7c
@nlopin
feat(accordion): add dark mode
f49b2f7
@nlopin
feat(popover): add dark mode
4b27dfa
@nlopin
feat(pagination): add dark mode
538a376
@nlopin
feat(table): add dark mode
75d9195
@nlopin
feat(table): fix dark mode
6ad3090
@nlopin nlopin changed the base branch from main to next October 3, 2023 15:30
@nlopin nlopin marked this pull request as draft October 3, 2023 15:30
martimalek
martimalek reviewed Oct 4, 2023
View reviewed changes
src/components/index.ts Outdated Show resolved Hide resolved
martimalek
martimalek approved these changes Oct 4, 2023
View reviewed changes
Copy link
Contributor

@martimalek martimalek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!! We are getting really close to Wave 2.0! 🥳 🍾

Nikolai Lopin added 7 commits October 10, 2023 17:36
feat(logo): support dark theme
e9a7e9f
feat(breadcrumb): add dark-mode
719b07e
feat(color-scheme): rename and update related components
1ee4c67 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
refactor(infobanner): use building blocks for the default infobanner
37e49e4 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
refactor(icon): inherit color from parent by default
793fda6 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
Merge branch 'next' into add-dark-mode
492be5d
test: fix codemode outputs
592e361 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
@nlopin nlopin marked this pull request as ready for review October 30, 2023 11:16
@martimalek
docs: fix the spelling
79426d6 
Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com>
@martimalek
docs: fix the error in InvertedColorScheme description
183d64b 
Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com>
@nlopin nlopin linked an issue Nov 2, 2023 that may be closed by this pull request
Add dark theme #356
Closed
Nikolai Lopin added 5 commits November 2, 2023 15:23
fix(color): delete unused colors
1e5946c 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
refactor(color): extract global style generation
f75756e 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
fix(infobanner): fix imports
e97d9e2 
Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
Merge branch 'next' into add-dark-mode
5722b4c 
# Conflicts:
#	src/components/Datepicker/Datepicker.tsx
fix(input): create internal size prop for input
929f1bf 
The current solution relied on `size` property used on all levels. It caused TS errors because `input` HTML element already have `size` prop. Those two definitions were merged by TS causing type mismatch.

I decided to create a separate `waveSize` property for HTML components to separate. I preserved the public API, while using the `waveSize` over the `size` internally

Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com>
@nlopin nlopin merged commit 60ae4ed into next Nov 6, 2023
10 checks passed
@nlopin nlopin deleted the add-dark-mode branch November 6, 2023 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@martimalek martimalek martimalek approved these changes

@div-Leo div-Leo Awaiting requested review from div-Leo

@jonotrujillo jonotrujillo Awaiting requested review from jonotrujillo jonotrujillo is a code owner

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add dark theme
3 participants
@nlopin @martimalek @dornelasnelson