Skip to content

fix / CLOUD-25242 / definition of foundation and semantic colors #21

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

Merged
merged 4 commits into from
Aug 28, 2024

Conversation

oli-hivemq
Copy link
Collaborator

Issue

The semantic colors layer is not defined properly, which means that:

  • color modes (light/dark) cannot be properly supported
  • the way colors are referenced is incorrect at least for the semantic layer

Done

  • fix definition of foundation and semantic colors
  • add unit tests

Demo

Short video (when played at 1.5x speed) explaining the changes.

Screenshots

CleanShot 2024-08-26 at 16 14 48
CleanShot 2024-08-26 at 16 15 36
CleanShot 2024-08-26 at 16 15 50

@oli-hivemq oli-hivemq added the bug Something isn't working label Aug 26, 2024
@oli-hivemq oli-hivemq self-assigned this Aug 26, 2024
@oli-hivemq oli-hivemq requested review from antpaw and h2xd as code owners August 26, 2024 14:21
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Changed default spacing from 4 to 2 characters

Comment on lines +59 to +62
<ColorModeProvider
value="dark"
options={{ useSystemColorMode: false, initialColorMode: 'dark' }}
>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is the equivalent of <DarkMode>, but I wanted to show different ways of achieving the same thing

Comment on lines +4 to +5
default: string
_dark: string
Copy link
Collaborator Author

@oli-hivemq oli-hivemq Aug 27, 2024

Choose a reason for hiding this comment

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

This is the type Chakra uses internally (default for light mode, _dark for dark mode). By sticking to this convention, it makes the semantic color coding much simpler, without requiring any conversion

Copy link
Contributor

@h2xd h2xd left a comment

Choose a reason for hiding this comment

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

LGTM! 🐊

@oli-hivemq oli-hivemq merged commit aa2f2a8 into main Aug 28, 2024
3 checks passed
@oli-hivemq oli-hivemq deleted the fix/CLOUD-25242/semantic-colors-theming-issues branch August 28, 2024 08:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants