Lead surface #167
Lead surface #167
Conversation
src/components/lead/CdrLead.vue
Outdated
| * @demoSelectMultiple false | ||
| * @values 'top', 'bottom' | ||
| */ | ||
| surfaceOrientation: 'top' | 'bottom' |
There was a problem hiding this comment.
surfaceOrientation seems a bit of a mouthful would surface:top /bottom do the same?
| <CdrTitle>Global lead title</CdrTitle> | ||
| </template> | ||
| </CdrLead> | ||
|
|
||
| <h2>Lead container with surface on top</h2> |
| ); | ||
| &--top { | ||
| background: linear-gradient( | ||
| var(--cdr-lead-base-background-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})) 0 50%, |
There was a problem hiding this comment.
is this the surface color - the background color should come from leads parent
There was a problem hiding this comment.
Meaning the custom prop should be named --cdr-lead-surface-color? The tokens for surface don't exist so the fallbacks would still be background color right?
| @@ -3,14 +3,14 @@ | |||
| line-height: 0; | |||
| &--top { | |||
| background: linear-gradient( | |||
| var(--cdr-lead-base-background-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})) 0 50%, | |||
| var(--cdr-lead-surface-color, var(--cdr-color-background-primary, #{$cdr-color-background-primary})) 0 50%, | |||
There was a problem hiding this comment.
I wonder if there is time to get
--cdr-surface
--cdr-surface-recessed
into tokens and then default the surface color to --cdr-surface - and allow the prop to switch its token?
There was a problem hiding this comment.
Can follow up with that, I want to get started on a round of integration testing
Adds surface support to lead container