Very early draft of new tokens #1573
Conversation
❌ Deploy Preview for spirit-design-system failed. Why did it fail? →
|
| $border-none: none !default; | ||
| $border-solid: solid !default; | ||
| $border-dashed: dashed !default; |
There was a problem hiding this comment.
We have border-width below. Shouldn't this be border-style?
| // Generated Borders from Supernova. Do not edit manually. | ||
| $border-style-0: none !default; | ||
| $border-style-100: solid !default; | ||
| $border-style-200: dashed !default; | ||
| // Manually created from Figma |
There was a problem hiding this comment.
Do not edit manually.
Manually created from Figma
🎉
| ) !default; | ||
|
|
||
| $background-colors: ( | ||
| formfield: ( |
There was a problem hiding this comment.
I think it's two words… 🤔
| formfield: ( | |
| form-field: ( |
| $emotion-danger-active: #ffffff !default; | ||
| $emotion-danger-background: #ba3e5a !default; | ||
| $emotion-danger-border: #ffffff !default; | ||
| $emotion-danger-content: #e84b6f !default; | ||
| $emotion-danger-hover: #ffffff !default; |
There was a problem hiding this comment.
Emotion, button and custom colors mix interaction states with properties:
- states: active, hover
- properties: background, border, content
Looking at current tokens, it's unclear to me where I can use the active and hover tokens.
Don't we need an indication what the states can be used for? Something like:
$emotion-danger-background-active
$emotion-danger-background-hoverThere was a problem hiding this comment.
maybe add state infix? But still we are unsure to which token is this state.
| $shadow-100: 0 2px 8px 0 #00000026 !default; | ||
| $shadow-200: 0 4px 12px 0 #0003 !default; | ||
| $shadow-300: 0 8px 24px 0 #00000040 !default; | ||
| $shadow-400: 0 12px 32px 0 #00000040 !default; | ||
|
|
||
| $focus: 0 0 0 2px #d2c2ff99 !default; |
There was a problem hiding this comment.
Not reusing spacing and color tokens here?
There was a problem hiding this comment.
We can check if figma allows this, otherwise I think about them as tokens on the same level and then it might feel weird to somehow join them.
| $theme-colors: map.get($value, 'colors'); | ||
| $theme-gradients: map.get($value, 'gradients'); | ||
| $theme-shadows: map.get($value, 'shadows'); |
There was a problem hiding this comment.
Instead of hard-coding, you could put the property categories into a list and iterate over it:
$theme-categories: colors, gradients, shadows;
@each $category, $map in $theme-categories {
// …
}If plural vs. singular is a problem, we could strip the ending s from the category name here.
✅ Deploy Preview for spirit-design-system-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Split into many PRs and commits in #1595 |
Description
Additional context
Issue reference