refactor(CSS): refactor application of colors #507
Conversation
|
Deploy preview for helix-ui ready! Built with commit 89a643d |
catsiller
force-pushed
the
css-prop-refactor-prototype
branch
from
a8fcc4d to
cc68095
Compare
CITguy
force-pushed
the
css-prop-refactor-prototype
branch
from
fab687d to
79b5aa9
Compare
| background-color: @gray-50; | ||
| border-radius: 2px; | ||
| border: 2px solid transparent; | ||
| color: @gray-900; |
There was a problem hiding this comment.
migrated to Light DOM CSS
| } | ||
|
|
||
| #hxLink { | ||
| color: @gray-900; |
There was a problem hiding this comment.
Removed because @gray-900 is the default color for the File Tile, so we let inheritance take over.
| &[href]:hover { | ||
| color: @cyan-500; | ||
| &[href] { | ||
| color: var(--hxLink-color, inherit); |
There was a problem hiding this comment.
Using --hxLink-color only when it's an actual link ([href] is present).
|
|
||
| :host([invalid]) { | ||
| #hxFileTile { | ||
| border-color: @red-900; |
There was a problem hiding this comment.
Moved to Light DOM CSS
| // TODO: hook for progress bar fill color | ||
| :host([progress]) { | ||
| #hxLink { | ||
| color: @gray-600; |
There was a problem hiding this comment.
Moved color definition to Light DOM CSS to allow for css inheritance to take over.
| } | ||
|
|
||
| // DEPRECATED: remove in v1.0.0 | ||
| hx-modalhead { |
There was a problem hiding this comment.
organized all deprecated styling further below, in one place
| hx-pill { | ||
| background-color: @gray-400; | ||
| border-radius: 1em; | ||
| color: @gray-900; |
There was a problem hiding this comment.
Migrated from Shadow DOM CSS
| } | ||
|
|
||
| > hx-div { | ||
| --padding-left: @space[md]; |
There was a problem hiding this comment.
Updated in response to renaming hx-div CSS custom props
| &::after { | ||
| border-left-color: @green-500; | ||
| } | ||
| } |
There was a problem hiding this comment.
Migrated from Shadow DOM CSS
| :root { | ||
| --hxSelect__trigger-background: @gray-0; | ||
| --hxSelect__trigger-background--disabled: @gray-100; | ||
| } |
There was a problem hiding this comment.
Removed defaults, because default values are now defined inline with the hook definitions.
See src/helix-ui/elements/HXSelectElement.less.
catsiller
force-pushed
the
css-prop-refactor-prototype
branch
from
73dc0e1 to
89a643d
Compare
CITguy
changed the title
shipped
JIRA: SURF-1700
LGTM's