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.

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

feat: new color palette #359

Merged
merged 37 commits into from
Apr 6, 2023
Merged

feat: new color palette #359

merged 37 commits into from
Apr 6, 2023

Conversation

muratcorlu
Copy link
Contributor

@muratcorlu muratcorlu commented Jan 6, 2023

This PR renames our color variables for a better clarity. We'll keep old variable names for backward compatibility until V3.

There is no need for an immediate change but please replace the Color variables mentioned below in near future before going next major release.

Here are the deprecated colors those will be removed in VERSION 3. (from default.css file)

/*
Color names below is kept for backward compatibility,

  Will be removed in V3
  */
  --bl-color-primary-hover: var(--bl-color-primary-highlight);
  --bl-color-success-hover: var(--bl-color-success-highlight);
  --bl-color-danger-hover: var(--bl-color-danger-highlight);
  --bl-color-warning-hover: var(--bl-color-warning-highlight);
  --bl-color-accent-primary-background: var(--bl-color-primary-contrast);
  --bl-color-success-background: var(--bl-color-success-contrast);
  --bl-color-danger-background: var(--bl-color-danger-contrast);
  --bl-color-warning-background: var(--bl-color-warning-contrast);
  --bl-color-primary-background: var(--bl-color-neutral-full);

  /* Content Colors */
  --bl-color-content-primary: var(--bl-color-neutral-darker);
  --bl-color-content-secondary: var(--bl-color-neutral-dark);
  --bl-color-content-tertiary: var(--bl-color-neutral-light);
  --bl-color-content-passive: var(--bl-color-neutral-lighter);
  --bl-color-content-primary-contrast: var(--bl-color-neutral-full);
  --bl-color-content-hover: var(--bl-color-primary-highlight);
  --bl-color-border: var(--bl-color-neutral-lighter);

  /* Removed Colors */
  --bl-color-secondary: #273142;
  --bl-color-secondary-hover: #0f131a;
  --bl-color-secondary-background: var(--bl-color-neutral-lightest);
  --bl-color-tertiary: #f1f2f7;
  --bl-color-tertiary-hover: #d5d9e1;
  --bl-color-alternative: #5794ff;
  --bl-color-alternative-hover: #457eff;
  --bl-color-featured: #8c4eff;
  --bl-color-featured-hover: #753eff;
  --bl-color-tertiary-background: #f7f7fa;
  --bl-color-alternative-background: #eef4ff;
  --bl-color-featured-background: #f4edff;

@sonarcloud
Copy link

sonarcloud bot commented Jan 12, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

100.0% 100.0% Coverage
0.0% 0.0% Duplication

@muratcorlu muratcorlu marked this pull request as ready for review March 28, 2023 22:27
@muratcorlu muratcorlu changed the title refactor: color palette (WIP) feat: new color palette - BREAKING CHANGE Mar 28, 2023
@buseselvi
Copy link
Contributor

buseselvi commented Mar 29, 2023

Great work! 🚀 I took a quick look and took some notes:

  1. Button: Tertiary buttons background is not visible on hover
  2. Checkbox: Disabled variants' background and border is not visible
  3. Popover: component didn't seem right
  4. Radio: Disabled variants' background and border is not visible
  5. For the buttons can we set disabled colors as --bl-color-neutral-lightest on the background and --bl-color-neutral-lighter on the contents?

@muratcorlu
Copy link
Contributor Author

  1. Button: Tertiary buttons background is not visible on hover
    ✅ Done
  2. Checkbox: Disabled variants' background and border is not visible
    ☑️ Background done, but disabled checkbox doesn't have border anyway❓
  3. Popover: component didn't seem right
    ✅ Done
  4. Radio: Disabled variants' background and border is not visible
    ✅ Done
  5. For the buttons can we set disabled colors as --bl-color-neutral-lightest on the background and --bl-color-neutral-lighter on the contents?
    ☑️ Done, please check the result

@buseselvi I tried to fix all of the color references. Please have a look.

@muratcorlu muratcorlu changed the title feat: new color palette - BREAKING CHANGE feat: new color palette Apr 5, 2023
@buseselvi
Copy link
Contributor

UI review notes:

  • Dialog overlay is missing

image

  • Input label colors are different, all should be --bl-color-neutral-dark

image

  • Border of input label true variant is missing in focused state

image

  • Tab divider colors should be --bl-color-neutral-lighter

image

@muratcorlu

Copy link
Contributor

@DamlaDemir DamlaDemir left a comment

Choose a reason for hiding this comment

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

👏

@muratcorlu muratcorlu merged commit 2e72455 into next Apr 6, 2023
@muratcorlu muratcorlu deleted the new-color-palette branch April 6, 2023 13:11
@github-actions
Copy link

github-actions bot commented Apr 6, 2023

🎉 This PR is included in version 2.0.0-beta.94 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link

github-actions bot commented Apr 6, 2023

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants