search

primer / css

The CSS design system that powers GitHub
https://primer.style/css
MIT License
12.54k stars 1.2k forks source link

Primitives variables missing in bundled css #2648

Closed yanyongyu closed 2 months ago

yanyongyu commented 2 months ago

Describe the bug

I'm using the built primer css file on my static site following the documentation. and i'm upgrading to the latest 21 version (currently 21.3.3). I found many primitives css variables is missing since this version (21.3.2 or 21.3.3). Should i import the primitives variables by my self? If so, which css file should i add to my html header? The documentation seems not up-to-date.

To Reproduce

add <link href="https://unpkg.com/@primer/css@^21.0.1/dist/primer.css" rel="stylesheet" /> to static site html

Expected behavior

primitives variables loaded.

Additional context

it seems it works after i add https://unpkg.com/@primer/css@^21.0.1/dist/primitives.css to html.

related to https://github.com/cscs181/QQ-GitHub-Bot/pull/83

ethan-sre commented 2 months ago

I am also experiencing the same issue (where the bundled css doesn't contain the variables) through npm (which is expected).

I wasn't able to reproduce the fix you mentioned above, but I was able to find a fix which didn't involve downloading another css file.

I had to explicitly set the data-color-mode and data-light/dark-theme in a parent element (<main data-color-mode="light" data-light-theme="light">)

There is a very small amount of documentation here for the different themes.

The last version which works for me without needing to explicitly set the color mode is @primer/css@21.3.1

siddharthkp commented 2 months ago

Hi!

Tagging @langermank and @lukasoppermann on this, they have more context.

lukasoppermann commented 2 months ago

I had to explicitly set the data-color-mode and data-light/dark-theme in a parent element (\

)

This has been like this in the primer/primitives css for quite a while already.

I am wondering if this changed for primer/css consumers because of the change in the theme files like here: https://github.com/primer/css/pull/2634/files#diff-09f47f7344ab01d99503302193dff74105e131684928fbfb55c02aaac33f0799 ?

@jonrohan can you advise if this may be the cause for the change?

yanyongyu commented 2 months ago

In my case, I have already provided the data-color-mode and theme info in the html tag attribute. You can see the static html file here.

I didn't make any changes to this and it is not working since the primer css new version (21.3.2 or 21.3.3) released.

StephanTLavavej commented 2 months ago

I'm also observing that I need to load https://cdn.jsdelivr.net/npm/@primer/css@21.3.4/dist/primitives.min.css in addition to https://cdn.jsdelivr.net/npm/@primer/css@21.3.4/dist/primer.min.css while attempting to update the microsoft/STL Status Chart. (Color variables were also renamed.)

primer/css 21.3.2 specifically contained the breaking change.

lukasoppermann commented 2 months ago

CC: @langermank @jonrohan

jonrohan commented 2 months ago

This should be fixed with v21.3.5