feat: initial run at design tokens and base css #3
Conversation
| @import url('./variables.css'); | ||
| @import url('../node_modules/modern-normalize/modern-normalize.css'); | ||
| @import url('./tokens.css'); | ||
| @import url('./base.css'); |
There was a problem hiding this comment.
This file is in bootstrap CSS framework territory because dropping it in will apply a bunch of prescriptive styles globally, rather than limiting scope to components.
But I suppose we need to work like this to avoid redeclaring stuff in each component?
There was a problem hiding this comment.
Yeah, I suppose it's whether we see diamond as components only or base styles as well.
Given the principle of styling the html, then adding components to enhance that html it feels like we should have some HTML styles.
I've separated out base and tokens, because you could just use the tokens and the components if you wanted. Tried to keep the base stuff fairly minimal, but it's things we use everywhere.
| input::-webkit-inner-spin-button { | ||
| appearance: none; | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
For this file – Would you expect installing Diamond to make these browser alterations to any website that installs it. Or is Diamond intended to be just for our projects and opinions?
There was a problem hiding this comment.
I'm happy to be opinionated on it, I think it should be for us before anyone else. I always turn this off because the spinner sucks and it gets caught by the mouse wheel and changes the value.
First run at some design tokens and base css.
I've moved stuff in I feel pretty confident about and added placeholders for things we need, but are not sure what they should be yet.
Fixed the stylelint config as well.