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

Color management with CSS Variables & HSL #108

Merged
merged 23 commits into from
Dec 12, 2023
Merged

Color management with CSS Variables & HSL #108

merged 23 commits into from
Dec 12, 2023

Conversation

sashachabin
Copy link
Member

@sashachabin sashachabin commented Dec 9, 2023 •
edited
Loading

TL;DR

  1. Now we work with colors in variables.css.

  2. We use dynamic colors in HSL:
    hsl( var(--color-h) var(--color-s) calc(var(--color-l) + 20%) / 10%)

  3. I removed a huge amount of style="" and updated some components

Colors

Updates

  • Switch dynamic colors from JS functions to HSL
  • Move all color variables to CSS Variables in variables.css
  • Move Notion text color-tokens to variables.css

Components changes

  • Remove all inline styles with colors
  • Update link colors in pages
  • Change colors in <SidePage> (search control)

Removed dependencies

  • Remove npm package color
  • Remove npm package rgba-to-rgb

Additionally refactoring

  • Separate variables.css from globals.css
  • Rename <CommonLinks> → <Ecosystem>
  • Remove inline borderRadius huge style="" fragment in tableOfContentsLink

@sashachabin sashachabin changed the title Control colors from CSS Variables with HSL Moved color management to CSS Variables. HEX → HSL Dec 9, 2023
@sashachabin sashachabin force-pushed the feature/css-vars-colors branch from d85ff27 to 600d7f6 Compare December 9, 2023 22:15
@sashachabin sashachabin changed the title Moved color management to CSS Variables. HEX → HSL Move color management to CSS Variables. HEX → HSL Dec 10, 2023
@sashachabin sashachabin force-pushed the feature/css-vars-colors branch 2 times, most recently from 06839af to 29cdf78 Compare December 10, 2023 16:57
@sashachabin sashachabin changed the title Move color management to CSS Variables. HEX → HSL Color management with CSS Variables & HSL Dec 10, 2023
@sashachabin
Copy link
Member Author

sashachabin commented Dec 10, 2023 •
edited
Loading

@Omelekhin

Now we can change color schemes in browser

image

@sashachabin
Copy link
Member Author

@Omelekhin

Example for common colors

image

@sashachabin
Copy link
Member Author

sashachabin commented Dec 11, 2023 •
edited
Loading

@sashachabin sashachabin force-pushed the feature/css-vars-colors branch from 0f47973 to 6185c06 Compare December 11, 2023 22:10
@sashachabin sashachabin force-pushed the feature/css-vars-colors branch from 6185c06 to c6e32a3 Compare December 11, 2023 22:11
fidlow
fidlow reviewed Dec 12, 2023
View reviewed changes
Copy link
Member

@fidlow fidlow left a comment

Choose a reason for hiding this comment

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

Approve!

@sashachabin sashachabin merged commit ad78b0c into main Dec 12, 2023
@sashachabin sashachabin deleted the feature/css-vars-colors branch December 12, 2023 10:36
@sashachabin sashachabin restored the feature/css-vars-colors branch December 12, 2023 10:39
sashachabin added a commit that referenced this pull request Dec 12, 2023
@sashachabin
Merge branch 'feature/css-vars-colors' into main (#108)
fdb9cb0
@sashachabin sashachabin deleted the feature/css-vars-colors branch December 12, 2023 10:42
@sashachabin sashachabin mentioned this pull request Dec 20, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fidlow fidlow fidlow left review comments

@AtkishkinVlad AtkishkinVlad Awaiting requested review from AtkishkinVlad

@Omelekhin Omelekhin Awaiting requested review from Omelekhin

Assignees
No one assigned
Labels
dx techlog
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@sashachabin @fidlow @ekbdev