Skip to content

🎨 Color Modes#1131

Merged
simurai merged 376 commits intorelease-16.0.0from
mkt/color-modes-whee
Mar 10, 2021
Merged

🎨 Color Modes#1131
simurai merged 376 commits intorelease-16.0.0from
mkt/color-modes-whee

Conversation

@BinaryMuse
Copy link
Copy Markdown
Contributor

@BinaryMuse BinaryMuse commented Jul 30, 2020 •
edited by simurai
Loading

This PR goes hand-in-hand with primer/primitives#18 to introduce color modes to Primer. This PR is extremely WIP.

TODO

  • Setup primer/primitives
  • Migrate components (except for /marketing)
  • Migrate SASS variables
  • Migrate utilities classes
  • Fix stylelint. Currently var(--color-text-primary) shows as invalid. Update stylelint config to support CSS variables #1176
  • Test on dotcom (to make this PR work on dotcom we first have to remove all darken/lighten color functions from dotcom)
  • Alias btn-blue to btn-primary
  • Add color-scheme: dark light to each mode to support "native" elements, see this article
  • Fix docs (the color tables are currently just commented out)
  • Alias presentational to functional variables -> $text-gray-dark: var(--color-text-primary);
  • Decide if functional utility classes should be prefixed with color-
  • Move link utilities to a Link component
  • Add color-text-white. This is the only "immutable" color. It stays "white" in all modes.
  • Use and document "overlay" colors
  • Implement components from Figma
  • Figure out what to do with marketing styles. There are a few rgba() that would need to be converted.
  • Make sure @primer/css-next works everywhere on dotcom. Use @primer/css-legacy for CSS bundles that can't use @primer/css-next.
  • Setup changesets so that making releases is less tedious Use changesets for Primer CSS #1224

API changes

  • Remove btn-solid(), btn-inverse(), btn-outline() mixins
  • Remove dropdown-menu-dark
  • Alias btn-blue to btn-primary
  • Add lots of new "functional" utility classes, see migration guide
  1. Add new colors -> Add support for multiple color modes primitives#18
  2. Use new colors -> 🎨 Color Modes #1131 (this PR)
  3. Toggle new colors -> https://github.com/github/github/pull/155266

@vercel
Copy link
Copy Markdown

vercel bot commented Jul 30, 2020 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/9rfgnKgoA48rZAGSxy168TBQ7JDz
✅ Preview: https://primer-css-git-mkt-color-modes-whee-primer.vercel.app

@BinaryMuse BinaryMuse self-assigned this Jul 30, 2020
@simurai simurai changed the base branch from master to color-modes August 3, 2020 00:56
@simurai
Copy link
Copy Markdown
Contributor

simurai commented Aug 3, 2020

Created #1134 and changed this PRs's base to it. Once this PR is ready, we can merge it and start testing in parallel with the @primer/css-next npm package. Similar to the Component Refresh.

@simurai simurai mentioned this pull request Aug 3, 2020
Closed
@BinaryMuse BinaryMuse force-pushed the mkt/color-modes-whee branch from 7769784 to d0457ba Compare August 10, 2020 17:51
BinaryMuse
BinaryMuse commented Aug 10, 2020
View reviewed changes
src/core/index.scss
Comment on lines +14 to +15
// Color modes

Copy link
Copy Markdown
Contributor Author

@BinaryMuse BinaryMuse Aug 10, 2020

Choose a reason for hiding this comment

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

🔥

@vercel vercel bot temporarily deployed to Preview September 9, 2020 20:41 Inactive
@BinaryMuse
Copy link
Copy Markdown
Contributor Author

BinaryMuse commented Sep 9, 2020

@simurai I changed the name of the package in this PR to @primer/css-next (since we already have a package with that name on npm — let me know if we need to change this) and I removed the lint step which was causing the build to fail. I also updated this PR to use the latest version of @primer/primitives from primer/primitives#18.

Please feel free to push any commits you need to the Primer Primitives PR; if you do you can use the version number in the GitHub checks to update this PR's package.json.

@simurai simurai mentioned this pull request Sep 10, 2020
Closed
@simurai simurai changed the base branch from color-modes to master September 10, 2020 11:41
@simurai
Copy link
Copy Markdown
Contributor

simurai commented Sep 10, 2020

I switched the base branch back to master, so publish @primer/css is somehow blocked, but I think that fine. We'll change the name back. Publishing to npm should still work.

@vercel vercel bot temporarily deployed to Preview September 11, 2020 08:04 Inactive
@vercel vercel bot temporarily deployed to Preview September 15, 2020 04:12 Inactive
@vercel vercel bot temporarily deployed to Preview September 15, 2020 10:18 Inactive
@vercel vercel bot temporarily deployed to Preview September 16, 2020 14:38 Inactive
@vercel vercel bot temporarily deployed to Preview September 17, 2020 08:17 Inactive
@vercel vercel bot temporarily deployed to Preview September 17, 2020 08:22 Inactive
simurai and others added 17 commits March 4, 2021 22:25
@simurai
Merge pull request #1233 from primer/color_modes/deprecate
89d022b 
[Color Modes] Remove presentational utilities/variables
@jonrohan
Put back some utilities for view_components
376e0d4
@jonrohan
lint fixes
09bea8d
@jonrohan
Merge pull request #1234 from primer/put_back_some_utilities
7e7b125 
Put back some utilities for view_components
@simurai
Remove all deprecated colors
50c2f03
@simurai
Keep .text-inherit
e09aa8a
@simurai
Add warning about using latest version
b621594
@simurai
Remove labels
990b1f7
@simurai
Remove .box-shadow
fe6c4ef
@simurai
Remove presentational .State classes
f1da379
@simurai
Remove presentational .Counter classes
65bb96f
@simurai
Remove .input-dark
08de943
@jonrohan
Merge pull request #1235 from primer/color_modes/remove-deprecated-co…
474f27f 
…lors

[Color Modes] Remove all deprecated colors
@simurai
Merge branch 'mkt/color-modes-whee' of https://github.com/primer/css …
bee4af7 
…into mkt/color-modes-whee
@simurai
Merge branch 'master' into mkt/color-modes-whee
6e36291
@simurai
npm install
2772952
@simurai
Merge branch 'release-16.0.0' into mkt/color-modes-whee
f325e12
@tonimelisma
Copy link
Copy Markdown

tonimelisma commented Mar 10, 2021

Hey @simurai so I get it that automatic dark mode detection is coming to release 16.0 of primer, is that correct?

@simurai simurai mentioned this pull request Mar 11, 2021
Merged
16 tasks
@simurai
Copy link
Copy Markdown
Contributor

simurai commented Mar 12, 2021

@tonimelisma so I get it that automatic dark mode detection is coming to release 16.0 of primer, is that correct?

Yes, although this reminds me we still have to document it. You can add these data- attributes to <html> to configure how the auto mode should work. Currently there are these 3 themes: light, dark, dark_dimmed.

So an example would be:

<html data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed">

@bartkamphorst bartkamphorst mentioned this pull request Mar 13, 2021
Open
8 tasks
@github-actions github-actions bot mentioned this pull request Mar 26, 2021
Merged
@github-actions github-actions bot mentioned this pull request Nov 28, 2022
Open
This was referenced Dec 17, 2022
Open
Open
Open
This was referenced Jan 1, 2023
Open
Open
Open
@github-actions github-actions bot mentioned this pull request Jan 11, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@ornobetarek1 ornobetarek1 ornobetarek1 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@BinaryMuse BinaryMuse

Labels

effort: high impact: high status: wip Tag: Breaking Change type: enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

9 participants

@BinaryMuse @simurai @heynan0 @tonimelisma @ornobetarek1 @auareyou @colebemis @koddsson @jonrohan