Where are default global styles documented? How to override, how to use spacing values in custom components?

[strlns]

Hi,
please excuse me if my questions are stupid, I tried my best to find answers in docs. Maybe I lack some knowledge about usual and idiomatic approaches for component libraries.

Now my questions:

Question 1:

Geist-UI's <CssBaseline /> injects some global styles, most of them are useful and wanted by me.
But they are also hard to override using e.g. CSS modules.

I know that geist-ui does not use CSS modules, so maybe this combination is a problem in and of itself.

An example:
I want to use an unstyled <ul> somewhere in a custom nav component.
Naively, I try to add a CSS module with a custom class that sets stuff like
list-style-type: none.

Unfortunately, there is default styling for the HTML tag that is injected into a <style> tag in dev mode. In this case, it adds custom list bullets/dashes using pseudo-elements.
Of course I could override all that too, but that would be brittle and the opposite of what I want.

While default styles for HTML elements are useful, I'm at a loss here on how to get rid of them selectively, except maybe for customizing the theme?

Question 2

When adding custom components, I want to access geist-ui's spacing values.
I already took a look at this issue and others which I don't remember.

I see that useTheme provides me with a value for the unit, but that does not play well with external CSS, right?
Like it returns 16px for me, so I'd have to use inline styles or add something like styled-components to use this value in custom components?

Naively, I'd love to have some custom properties that I could access in e.g. CSS modules to use Geist's spacing values. I see that there are some CSS custom properties here and there, mostly related to buttons, but they don't seem to be a core part of Geist's CSS styling architecture.

Probably this means that my approach doesn't sit well with Geist's philosophy as a whole.

---

Anyway, I'd love to hear some feedback on recommended approaches for these use cases.
Thanks in advance and sorry if my search for similar discussions was too shallow, didn't find what I was looking for.

[strlns]

My question 1 is kind of resolved, as I can override styles if I really need to in my current SSG setup, I just need to be specific enough. Which leads to

Question 2:
Geist-UI apparently just requires sticking to CSS-in-JS, it uses styled-jsx which uses inline styles, overriding them instead of configuring the theme is an uphill battle. Although my CSS modules are also injected as inline style tags in the SSG setup I currently use, which makes overriding geist a little easier.

Still, all of this is brittle and the preferred way would seemingly be to just properly configure the theme and/or use styled-jsx.

I find theme configuration to be a little hard in some places, especially with SSG, but that's another topic.

I would love a framework that allows leveraging CSS custom properties for the design system, but I see that Geist UI probably just is not that framework. Still it's very nice 👍

[strlns]

My issues with theme configuration also seem related to #747