chore: update tokens #2767
chore: update tokens #2767
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| // $ouds-border-width-200: $ouds-border-base * 2 !default; | ||
| // $ouds-border-style-none: none !default; | ||
| $ouds-border-style-solid: solid !default; | ||
| $ouds-border-radius-0: strip-units($ouds-border-base * 0) !default; // 0 |
There was a problem hiding this comment.
The alphabetical order is weird but it's maybe from the export itself ?
There was a problem hiding this comment.
Yep, I don't know why for this use case precisely it happens.
I'll create an issue for that.
| // $ouds-color-transparent-white-700: rgba(255, 255, 255, .64) !default; | ||
| // $ouds-color-transparent-white-800: rgba(255, 255, 255, .88) !default; | ||
| // $ouds-color-transparent-white-900: #fff !default; | ||
| // $ouds-color-orange-50: #fff2e6 !default; |
There was a problem hiding this comment.
Here it's because it comes from two different files: some colors are from the common raw tokens, and "orange" + "warm-gray" from the Orange brand file.
I'll create an issue for that.
| // Elevation | ||
|
|
||
| // scss-docs-start ouds-raw-elevation | ||
| $ouds-elevation-blur-0: 0 !default; | ||
| $ouds-elevation-blur-0: 0 !default; | ||
| // $ouds-elevation-blur-100: 1px !default; | ||
| $ouds-elevation-blur-200: 2px !default; | ||
| $ouds-elevation-blur-300: 3px !default; | ||
| $ouds-elevation-blur-400: 4px !default; | ||
| // $ouds-elevation-blur-500: 8px !default; | ||
| $ouds-elevation-blur-600: 12px !default; |
There was a problem hiding this comment.
Should we use the syntax $ouds-dimension-base x ** in here ?
There was a problem hiding this comment.
It's not done like that on the design side apparently. Need to double-check but it wasn't mentioned.
| // $ouds-font-family-monospace-monaco: "Monaco" !default; | ||
| // $ouds-font-family-monospace-sf-mono: "SF Mono" !default; | ||
| // $ouds-font-family-system-arial: "Arial" !default; | ||
| // $ouds-font-family-system-helvetica: "Helvetica" !default; |
There was a problem hiding this comment.
We will probably need some of those but aren't referenced in semantic, how should we proceed ? Should we manually uncomment the ones that we need ?
There was a problem hiding this comment.
Font is not handled right now in the tool. It will probably get rid of all the font family tokens.
| $ouds-grid-min-width-800: 1880px !default; | ||
| $ouds-grid-width-100: 360px !default; | ||
| $ouds-grid-width-200: 390px !default; | ||
| $ouds-grid-width-300: 480px !default; |
There was a problem hiding this comment.
Should these variables be generated using $ouds-dimension-base?
There was a problem hiding this comment.
We need to double-check with the designers, but it wasn't mentioned like that in the specifications.
| $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default; | ||
| $ouds-elevation-color-drag: $ouds-color-transparent-black-500 !default; |
There was a problem hiding this comment.
Weird alphabetical values in here
There was a problem hiding this comment.
Issue to create but low priority.
| $ouds-space-scaled-tallest-desktop: $ouds-dimension-700 !default; | ||
| $ouds-space-scaled-tallest-mobile: $ouds-dimension-500 !default; | ||
| $ouds-space-scaled-tallest-tablet: $ouds-dimension-600 !default; | ||
| $ouds-space-column-gap-medium: $ouds-dimension-5xs !default; |
There was a problem hiding this comment.
Same alphabetical issue
There was a problem hiding this comment.
Issue to create but low priority.
This PR is generated automatically, it updates the tokens based on Figma Variables.