Skip to content

Commit 14cf0a8

Browse files
zeroedinzeroedin
committed
fix(label): use color-specific border for link hover and improve icon css
1 parent 61e23cf commit 14cf0a8

2 files changed

Lines changed: 110 additions & 51 deletions

File tree

‎elements/pf-label/demo/link.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<section>
2-
<pf-label color="blue" href="#blue">Blue</pf-label>
3-
<pf-label color="green" href="#green">Green</pf-label>
2+
<pf-label color="blue" href="#blue" icon="radiation-alt" removable>Blue</pf-label>
3+
<pf-label color="green" href="#green" icon="radiation-alt">Green</pf-label>
44
<pf-label color="orange" href="#orange">Orange</pf-label>
55
<pf-label color="red" href="#red"><span>Red <span class="visually-hidden-class">Hat</span></span></pf-label>
6-
<pf-label color="purple" href="purple">Purple</pf-label>
6+
<pf-label color="purple" href="purple" removable>Purple</pf-label>
77
<pf-label color="cyan" href="#cyan">Cyan</pf-label>
88
<pf-label color="gold" href="#gold">Gold</pf-label>
99
<pf-label href="#grey">Grey</pf-label>

‎elements/pf-label/pf-label.css‎

Lines changed: 107 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
position: relative;
33
white-space: nowrap;
44
border: 0;
5+
6+
--_label-link-hover-border-color:
7+
var(--pf-c-label__content--link--hover--before--BorderColor,
8+
var(--pf-global--BorderColor--200, #8a8d90));
59
}
610

711
pf-icon, ::slotted(pf-icon) {
@@ -79,18 +83,40 @@ pf-icon, ::slotted(pf-icon) {
7983
--pf-global--icon--FontSize--sm: 12px;
8084
}
8185

86+
.outline {
87+
/** outline label background color */
88+
--pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);
89+
--pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);
90+
91+
--_label-link-hover-border-color:
92+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
93+
var(--pf-global--BorderColor--100, #d2d2d2));
94+
}
95+
8296
.blue {
8397
/** blue label content text color */
8498
--pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952));
8599
/** blue label background color */
86100
--pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa));
87101
/** blue label content border color */
88102
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4));
103+
104+
--_label-link-hover-border-color:
105+
var(--pf-c-label__content--link--hover--before--BorderColor,
106+
var(--pf-c-label--m-blue__content--link--hover--before--BorderColor,
107+
var(--pf-global--primary-color--100, #06c)));
108+
109+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));
89110
}
90111

91112
.blue.outline {
92113
/** outline blue label content text color */
93114
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c)));
115+
116+
--_label-link-hover-border-color:
117+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
118+
var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor,
119+
var(--pf-global--BorderColor--100, #d2d2d2)));
94120
}
95121

96122
.cyan {
@@ -100,11 +126,23 @@ pf-icon, ::slotted(pf-icon) {
100126
--pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9));
101127
/** cyan label content border color */
102128
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9));
129+
130+
--_label-link-hover-border-color:
131+
var(--pf-c-label__content--link--hover--before--BorderColor,
132+
var(--pf-c-label--m-cyan__content--link--hover--before--BorderColor,
133+
var(--pf-global--default-color--200, #009596)));
134+
135+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));
103136
}
104137

105138
.cyan.outline {
106139
/** outline cyan label content text color */
107-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)))
140+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60)));
141+
142+
--_label-link-hover-border-color:
143+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
144+
var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor,
145+
var(--pf-global--BorderColor--100, #d2d2d2)));
108146
}
109147

110148
.green {
@@ -114,11 +152,23 @@ pf-icon, ::slotted(pf-icon) {
114152
--pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2));
115153
/** green label content border color */
116154
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8));
155+
156+
--_label-link-hover-border-color:
157+
var(--pf-c-label__content--link--hover--before--BorderColor,
158+
var(--pf-c-label--m-green__content--link--hover--before--BorderColor,
159+
var(--pf-global--success-color--100, #3e8635)));
160+
161+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));
117162
}
118163

119-
.green.outline{
164+
.green.outline {
120165
/** outline green label content text color */
121-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)))
166+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635)));
167+
168+
--_label-link-hover-border-color:
169+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
170+
var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor,
171+
var(--pf-global--BorderColor--100, #d2d2d2)));
122172
}
123173

124174
.orange {
@@ -128,11 +178,23 @@ pf-icon, ::slotted(pf-icon) {
128178
--pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec));
129179
/** orange label content border color */
130180
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678));
181+
182+
--_label-link-hover-border-color:
183+
var(--pf-c-label__content--link--hover--before--BorderColor,
184+
var(--pf-c-label--m-orange__content--link--hover--before--BorderColor,
185+
var(--pf-global--palette--orange-300, #ec7a08)));
186+
187+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));
131188
}
132189

133190
.orange.outline {
134191
/** outline orange label content text color */
135-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)))
192+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700)));
193+
194+
--_label-link-hover-border-color:
195+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
196+
var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor,
197+
var(--pf-global--BorderColor--100, #d2d2d2)));
136198
}
137199

138200
.purple {
@@ -142,11 +204,23 @@ pf-icon, ::slotted(pf-icon) {
142204
--pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc));
143205
/** purple label content border color */
144206
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff));
207+
208+
--_label-link-hover-border-color:
209+
var(--pf-c-label__content--link--hover--before--BorderColor,
210+
var(--pf-c-label--m-purple__content--link--hover--before--BorderColor,
211+
var(--pf-global--palette--purple-500, #6753ac)));
212+
213+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));
145214
}
146215

147216
.purple.outline {
148217
/** outline purple label content text color */
149-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)))
218+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac)));
219+
220+
--_label-link-hover-border-color:
221+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
222+
var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor,
223+
var(--pf-global--BorderColor--100, #d2d2d2)));
150224
}
151225

152226
.red {
@@ -156,11 +230,23 @@ pf-icon, ::slotted(pf-icon) {
156230
--pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8));
157231
/** red label content border color */
158232
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b));
233+
234+
--_label-link-hover-border-color:
235+
var(--pf-c-label__content--link--hover--before--BorderColor,
236+
var(--pf-c-label--m-red__content--link--hover--before--BorderColor,
237+
var(--pf-global--danger-color--100, #c9190b)));
238+
239+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));
159240
}
160241

161242
.red.outline {
162243
/** outline red label content text color */
163-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)))
244+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b)));
245+
246+
--_label-link-hover-border-color:
247+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
248+
var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor,
249+
var(--pf-global--BorderColor--100, #d2d2d2)));
164250
}
165251

166252
.gold {
@@ -170,57 +256,30 @@ pf-icon, ::slotted(pf-icon) {
170256
--pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7));
171257
/** gold label content border color */
172258
--pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2));
259+
260+
--_label-link-hover-border-color:
261+
var(--pf-c-label__content--link--hover--before--BorderColor,
262+
var(--pf-c-label--m-gold__content--link--hover--before--BorderColor,
263+
var(--pf-global--palette--gold-300, #f4c145)));
264+
265+
--_label-icon-color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));
173266
}
174267

175268
.gold.outline {
176269
/** outline gold label content text color */
177-
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)))
178-
}
270+
--pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color, var(--pf-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600)));
179271

180-
.outline {
181-
/** outline label background color */
182-
--pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor, #ffffff);
183-
--pf-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2);
272+
--_label-link-hover-border-color:
273+
var(--pf-c-label--m-outline__content--link--hover--before--BorderColor,
274+
var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor,
275+
var(--pf-global--BorderColor--100, #d2d2d2)));
184276
}
185277

186278
.hasIcon [part=icon] {
187279
left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem));
188280
margin-inline-end: var(--pf-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem));
189-
}
190-
191-
.blue .hasIcon [part=icon] {
192-
/** blue label icon color */
193-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c)));
194-
}
195-
196-
.cyan .hasIcon [part=icon] {
197-
/** cyan label icon color */
198-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596)));
199-
}
200-
201-
.green .hasIcon [part=icon] {
202-
/** green label icon color */
203-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635)));
204-
}
205-
206-
.orange .hasIcon [part=icon] {
207-
/** orange label icon color */
208-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08)));
209-
}
210-
211-
.purple .hasIcon [part=icon] {
212-
/** purple label icon color */
213-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac)));
214-
}
215-
216-
.red .hasIcon [part=icon] {
217-
/** red label icon color */
218-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b)));
219-
}
220-
221-
.gold .hasIcon [part=icon] {
222-
/** gold label icon color */
223-
color: var(--pf-c-label__icon--Color, var(--pf-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00)));
281+
/** label icon color */
282+
color: var(--_label-icon-color);
224283
}
225284

226285
pf-button {
@@ -256,7 +315,7 @@ pf-button {
256315
:host(:hover) #container:has(#link)::before,
257316
:host(:focus-within) #container:has(#link)::before {
258317
border-width: var(--pf-c-label__content--link--hover--before--BorderWidth, 2px);
259-
border-color: var(--pf-c-label__content--link--hover--before--BorderColor, var(--pf-global--primary-color--100, #06c));
318+
border-color: var(--_label-link-hover-border-color);
260319
}
261320

262321
svg {

0 commit comments

Comments
 (0)