Skip to content

Commit 89a643d

Browse files
author
Cathy Siller
committed
refactor(css-props): add css hooks and refactor some css
1 parent 0bacd95 commit 89a643d

23 files changed

+324
-325
lines changed

‎src/helix-ui/elements/HXCheckboxElement.less‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
@import "./HXElement";
22

3-
:host {
4-
--hxCheckbox__minus-display: none;
5-
--hxCheckbox__tick-display: none;
6-
}
7-
83
#hxCheckbox {
94
align-items: center;
105
display: grid;
@@ -25,9 +20,9 @@
2520
}
2621

2722
#hxMinus {
28-
display: var(--hxCheckbox__minus-display);
23+
display: var(--hxMinus-display, none);
2924
}
3025

3126
#hxTick {
32-
display: var(--hxCheckbox__tick-display);
27+
display: var(--hxTick-display, none);
3328
}

‎src/helix-ui/elements/HXDivElement.less‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
// to apply ShadyCSS overrides in the LightDOM.
66
@supports (--skip-ie: true) {
77
:host {
8-
--padding-base: 0;
8+
--hxPadding--base: 0;
99

10-
--padding-top: var(--padding-base);
11-
--padding-right: var(--padding-base);
12-
--padding-bottom: var(--padding-base);
13-
--padding-left: var(--padding-base);
10+
--hxPaddingTop: var(--hxPadding--base);
11+
--hxPaddingRight: var(--hxPadding--base);
12+
--hxPaddingBottom: var(--hxPadding--base);
13+
--hxPaddingLeft: var(--hxPadding--base);
1414

15-
--padding:
16-
var(--padding-top)
17-
var(--padding-right)
18-
var(--padding-bottom)
19-
var(--padding-left);
15+
--hxPadding:
16+
var(--hxPaddingTop)
17+
var(--hxPaddingRight)
18+
var(--hxPaddingBottom)
19+
var(--hxPaddingLeft);
2020

2121
#hxDiv {
22-
padding: var(--padding);
22+
padding: var(--hxPadding, 0);
2323
}
2424
}
2525
}

‎src/helix-ui/elements/HXFileTileElement.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<div id="hxState--invalid">
2222
<button id="hxRetry" type="button">
23-
Retry
23+
<span>Retry</span>
2424
<hx-icon type="redo"></hx-icon>
2525
</button>
2626
</div>

‎src/helix-ui/elements/HXFileTileElement.less‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,46 +10,43 @@
1010
}
1111

1212
#hxFileTile {
13-
background-color: @gray-50;
14-
border-radius: 2px;
15-
border: 2px solid transparent;
16-
color: @gray-900;
1713
display: flex;
1814
font-size: 0.875rem; //14px
1915
height: 100%;
2016
width: 100%;
2117
}
2218

19+
// TODO: add hooks for overriding retry button colors?
2320
#hxRetry {
2421
#Button.basic();
2522
#Button.small();
2623
#Button.tertiary();
2724

2825
hx-icon {
29-
// FIXME
3026
margin-left: 0.25rem !important;
3127
}
3228
}
3329

3430
#hxDismiss {
31+
color: var(--hxDismiss-color, inherit);
3532
flex-shrink: 0;
3633
font-size: 1rem;
3734
line-height: 0;
3835
padding: 0.5rem 0.75rem;
3936

4037
&:hover {
41-
color: @cyan-500;
38+
color: var(--hxDismiss-color--hover, @cyan-500);
4239
}
4340

4441
&:focus {
45-
border-color: @cyan-700;
46-
box-shadow: @focus-glow;
42+
box-shadow: var(--hxDismiss-boxShadow--focus, @focus-glow);
4743
outline: 0;
4844
}
4945
}
5046

5147
#hxIconWrapper {
5248
align-items: center;
49+
color: var(--hxIcon-color, inherit);
5350
display: flex;
5451
flex: 0 0 48px;
5552
height: 100%;
@@ -73,17 +70,19 @@
7370
}
7471

7572
#hxName {
76-
color: @cyan-900;
73+
color: var(--hxName-color, @cyan-900);
7774
display: flex;
7875
font-weight: 500;
7976

77+
// truncation children
8078
> span {
8179
white-space: pre;
8280

8381
&:first-child {
8482
overflow: hidden;
8583
text-overflow: ellipsis;
8684
}
85+
8786
&:last-child {
8887
flex-shrink: 0;
8988
}
@@ -98,33 +97,35 @@
9897
}
9998

10099
#hxLink {
101-
color: @gray-900;
102100
display: flex;
103101
flex-grow: 1;
104102
overflow: hidden;
105103

106-
&[href]:hover {
107-
color: @cyan-500;
104+
&[href] {
105+
color: var(--hxLink-color, inherit);
106+
107+
&:hover {
108+
color: var(--hxLink-color--hover, @cyan-500);
108109

109-
#hxIconWrapper {
110-
> hx-file-icon {
111-
display: none;
110+
#hxIconWrapper {
111+
> hx-file-icon {
112+
display: none;
113+
}
114+
115+
> hx-icon {
116+
display: inline-block;
117+
}
112118
}
113119

114-
> hx-icon {
115-
display: inline-block;
120+
#hxName {
121+
color: inherit;
116122
}
117-
}
123+
}//hovered with href
118124

119-
#hxName {
120-
color: inherit;
125+
&:focus {
126+
box-shadow: var(--hxLink-boxShadow--focus, @focus-glow);
127+
outline: 0;
121128
}
122-
}//hovered with href
123-
124-
&:focus {
125-
border-color: @cyan-700;
126-
box-shadow: @focus-glow;
127-
outline: 0;
128129
}
129130
}//#hxLink
130131

@@ -143,13 +144,12 @@
143144
}
144145

145146
:host([invalid]) {
146-
#hxFileTile {
147-
border-color: @red-900;
147+
#hxIconWrapper {
148+
color: var(--hxIcon-color, @gray-750);
148149
}
149150

150-
#hxIconWrapper,
151151
#hxName {
152-
color: @gray-750;
152+
color: var(--hxName-color, @gray-750);
153153
}
154154

155155
#hxState--downloadable {
@@ -161,14 +161,18 @@
161161
}
162162
}
163163

164+
// TODO: hook for progress bar fill color
164165
:host([progress]) {
165-
#hxLink {
166-
color: @gray-600;
166+
#hxDismiss {
167+
color: var(--hxDismiss-color, @gray-900);
168+
}
169+
170+
#hxIconWrapper {
171+
color: var(--hxIcon-color, @gray-750);
167172
}
168173

169-
#hxIconWrapper,
170174
#hxName {
171-
color: @gray-750;
175+
color: var(--hxName-color, @gray-750);
172176
}
173177

174178
#hxState--downloadable {

‎src/helix-ui/elements/HXIconElement.less‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:host {
22
background-color: transparent;
3-
color: currentColor; display: inline-block;
3+
color: currentColor;
4+
display: inline-block;
45
flex-shrink: 0;
56
height: 1em;
67
width: 1em;

‎src/helix-ui/elements/HXModalElement.less‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,9 @@
11
@import "./HXElement";
22
@import (reference) "components/buttons";
33

4-
:host {
5-
display: none;
6-
z-index: @modal-z-index;
7-
}
8-
9-
:host([open]) {
10-
display: block;
11-
}
12-
134
#hxBackdrop {
145
align-items: center;
15-
background-color: @backdrop-color;
6+
background-color: var(--hxBackdrop-backgroundColor, @backdrop-color);
167
display: flex;
178
flex-direction: column;
189
height: 100%;
@@ -22,8 +13,9 @@
2213
}
2314

2415
#hxModal {
25-
background-color: @gray-0;
26-
box-shadow: 0px 7px 9px 0 fade(@gray-1000, 30%);
16+
@box-shadow: 0px 7px 9px 0 fade(@gray-1000, 30%);
17+
background-color: var(--hxBackgroundColor, @gray-0);
18+
box-shadow: var(--hxBoxShadow, @box-shadow);
2719
display: flex;
2820
min-height: 3.5rem;
2921
min-width: 25rem; // 400px
@@ -45,7 +37,7 @@
4537

4638
#hxClose {
4739
#Button.reset();
48-
color: @gray-700;
40+
color: var(--hxClose-color, @gray-700);
4941
height: 1rem;
5042
position: absolute;
5143
right: 1.25rem;

‎src/helix-ui/elements/HXPillElement.less‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33

44
:host {
55
#hxPill {
6-
background-color: @gray-400;
7-
border-radius: 1em;
8-
color: @gray-900;
96
display: flex;
107
height: 100%;
118
padding: 0 1rem;
@@ -16,7 +13,7 @@
1613
#hxDismiss {
1714
#Button.reset();
1815
align-items: center;
19-
color: @gray-600;
16+
color: var(--hxDismiss-color, @gray-600);
2017
display: inline-flex;
2118
height: 1.5em;
2219
justify-content: center;
@@ -28,7 +25,7 @@
2825
}
2926

3027
&:hover {
31-
color: @gray-1000;
28+
color: var(--hxDismiss-color--hover, @gray-1000);
3229
}
3330
}
3431
}

‎src/helix-ui/elements/HXPopoverElement.less‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
@import "./_positioning";
33

44
#hxPopover {
5-
background-color: @gray-0;
6-
border: solid 1px @gray-300;
5+
background-color: var(--hxBackgroundColor, @gray-0);
6+
border-color: var(--hxBorderColor, @gray-300);
7+
border-style: solid;
8+
border-width: 1px;
79
box-shadow: @layering-shadow;
810
}

‎src/helix-ui/elements/HXSearchElement.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import (reference) "mixins";
22
@import "./HXElement.less";
33

4+
// TODO: add CSS custom props for theming hooks
5+
46
input::-ms-clear {
57
display: none;
68
}

‎src/helix-ui/elements/HXSelectElement.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import (reference) 'vars';
2+
13
// Hide ShadowDOM content for IE
24
#hxSelect {
35
display: none;
@@ -22,7 +24,7 @@
2224

2325
#hxTrigger {
2426
align-items: center;
25-
background-color: var(--hxSelect__trigger-background);
27+
background-color: var(--hxTrigger-backgroundColor, @gray-0);
2628
box-sizing: border-box;
2729
color: inherit;
2830
display: flex;

0 commit comments

Comments
 (0)