menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-system

Style props for rapid UI development

Channels
Team
Posts
Members
Info

Are responsive value objects supposed to remain in the DOM?

When using display with responsiveness like display={{ xs: 'none'; sm: 'inline' }}, should we always expect to see that in the dom, display:[object Object]. I think it's failing a RTL toBeVisible() test I wrote that expects to see none when the media query matches xs. The test…

message-simple
0

Unable to access `theme` inside of TS styled-system design system project

I have a React TS-based design system built with emotion, styled-system, and theme-ui and am encountering a TS error I can't seem to resolve. It seems like a simple fix, I just haven't been able to debug it... I'm seeing the issue in…

message-simple
0

Typescript autocomplete.

Has anyone got typescript autocompleting style props to work with styled system? For example, I would expect to see a list of justify-content values here (vscode intellisense): This is the basics of my type my setup: …

message-simple
7

Use array scales with themeGet

Using themeGet, I am trying to achieve this: But using array in themeGet don't work:

message-simple
1

which is better : themeGet(path,fallbackVal) vs props.theme.pName

Hello. I feel lost making the choice of the better way to get values from theme object. Using themeGet(path,fallbackVal) is ok, but it needs to import a new method themeGet. Using props.theme.pName is ok too. And it doesn't need extra imports. props.theme.pName || fallbackVal…

message-simple
1

Using Styled-System Theme Variables in a String

Hello, I was wondering if there was a way I could use my theme variables such as 'neutrals.0' , 'primary.8', etc in the string css properties. e.g: …

message-simple
1

Mixing grid layout and scaled spacing

I'm currently trying to get my head around the styled-system approach. Coming from design systems which utilize a classic column-based grid (e.g. Bootstrap) I have the feeling that this is somewhat opposed to specifying spacing (mostly margins) with the styled-system scale (by…

message-simple
0

How do you responsively style nested elements with styled-system?

I have a Text component which is a styled span and uses a variant to get the fontSize and lineHeight. <span>This is text <img src="exampleurl"/></span> I want to style the img tag that is inside the span responsively. I have included an example above of my component and attempt…

message-simple
0

I can't seem to use the 'color' system with my Theme via jest

Github Question > https://github.com/styled-system/styled-system/issues/1635 Stackoverflow > https://stackoverflow.com/questions/64336614/using-react-test-renderer-w-styled-components-theme-react-native It looks like when testing my component i can't seem to get the color…

message-simple
1

passing nested color object as prop not working

I have colors in my theme.js as below - colors: { gray: '#f2f2f2', …

message-simple
1