Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Individual border properties should reference theme values

See original GitHub issue

I’d be happy to create a PR for this, if it makes sense. For example, this works just fine:

borderWidth: 'thin',
borderStyle: 'solid',
borderColor: 'primary',

however, this will result in the literal values winding up in the CSS:

borderBottomWidth: 'thin',
borderBottomStyle: 'solid',
borderBottomColor: 'primary',

I think it would make sense for the API to support all possible values:

X = Top, Bottom, Left, Right

borderXWidth
borderXColor
borderXStyle

X = Top, Bottom

borderXLeftRadius
borderXRightRadius

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:10 (7 by maintainers)

Top GitHub Comments

1reaction

jxnblkcommented, Aug 9, 2019

@kutyel see also #81

1reaction

dburlescommented, Aug 9, 2019

@kutyel think about how the values are resolved, borderBottom references borders. borderBottomColor references color, borderBottomWidth references borderWidths. Passing in a string containing values that need to be resolved across different parts of the global theme object won’t work. That’s why for shorthand you need to provide a function to reference the theme:

borderBottom: theme => `${theme.borderWidths.thin}px ${theme.borderStyles.thick} ${theme.colors.muted}`

Top Results From Across the Web

border - CSS: Cascading Style Sheets - MDN Web Docs

The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.

Gtk – 3.0: CSS Properties

The opacity property specifies the opacity that is used to composite the widget onto its parent widget. Font properties. Name, Value, Initial, Inh....

Use report themes in Power BI Desktop - Microsoft Learn

Learn how to use report themes to create a custom color palette and apply it to an entire report in Power BI Desktop....

CSS Shorthand Border Property - W3Schools

To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a...

Border Color - Tailwind CSS

. Quick reference ; border-slate-50, border-color: rgb(248 250 252); ; border-slate-100, border-color: rgb(241 245 249); ; border-slate-200, border-color: rgb(226 ...