Skip to content

Commit 2d13fc4

Browse files
kensternberg-authentikkensternberg-authentik
committed
Dark mode is now correctly interpreted by WCCSS.
1 parent ddddecd commit 2d13fc4

File tree

6 files changed

+180
-68
lines changed

6 files changed

+180
-68
lines changed

‎src/ak-button/ak-button.css‎

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
--button--PaddingRight: var(--pf-v5-c-button--PaddingRight, 1rem);
44
--button--PaddingBottom: var(--pf-v5-c-button--PaddingBottom, 0.375rem);
55
--button--PaddingLeft: var(--pf-v5-c-button--PaddingLeft, 1rem);
6-
7-
/* FontFamily and fallback added manually */
8-
--button-_FontFamily--fallback: redhattext, helvetica, arial, sans-serif;
9-
--button--FontFamily: var(--pf-v5-c-button--FontFamily, var(--button-_FontFamily--fallback));
106
--button--LineHeight: var(--pf-v5-c-button--LineHeight, 1.5);
117
--button--FontWeight: var(--pf-v5-c-button--FontWeight, 400);
128
--button--FontSize: var(--pf-v5-c-button--FontSize, 1rem);
@@ -399,10 +395,6 @@
399395
--pf-v5-c-button--m-link--m-display-lg--FontSize,
400396
1.125rem
401397
);
402-
--button--m-narrow--PaddingTop: var(--pf-v5-c-button--m-narrow--PaddingTop, 0.375rem);
403-
--button--m-narrow--PaddingRight: var(--pf-v5-c-button--m-narrow--PaddingRight, 0.5);
404-
--button--m-narrow--PaddingBottom: var(--pf-v5-c-button--m-narrow--PaddingBottom, 0.375rem);
405-
--button--m-narrow--PaddingLeft: var(--pf-v5-c-button--m-narrow--PaddingLeft, 0.5);
406398
--button__icon--m-start--MarginRight: var(
407399
--pf-v5-c-button__icon--m-start--MarginRight,
408400
0.25rem
@@ -464,16 +456,20 @@
464456

465457
position: relative;
466458
display: inline-block;
459+
460+
--button-_FontFamily--fallback: redhattext, helvetica, arial, sans-serif;
461+
--button--FontFamily: var(--pf-v5-c-button--FontFamily, var(--button-_FontFamily--fallback));
462+
--button--m-narrow--PaddingTop: var(--pf-v5-c-button--m-narrow--PaddingTop, 0.375rem);
463+
--button--m-narrow--PaddingRight: var(--pf-v5-c-button--m-narrow--PaddingRight, 0.5);
464+
--button--m-narrow--PaddingBottom: var(--pf-v5-c-button--m-narrow--PaddingBottom, 0.375rem);
465+
--button--m-narrow--PaddingLeft: var(--pf-v5-c-button--m-narrow--PaddingLeft, 0.5);
467466
}
468467

469468
[part="button"] {
470469
padding-block-start: var(--button--PaddingTop);
471470
padding-block-end: var(--button--PaddingBottom);
472471
padding-inline-start: var(--button--PaddingLeft);
473472
padding-inline-end: var(--button--PaddingRight);
474-
475-
/* font-family added manually */
476-
font-family: var(--button--FontFamily);
477473
font-size: var(--button--FontSize);
478474
font-weight: var(--button--FontWeight);
479475
line-height: var(--button--LineHeight);
@@ -483,6 +479,7 @@
483479
border: 0;
484480
border-radius: var(--button--BorderRadius);
485481
position: relative;
482+
font-family: var(--button--FontFamily);
486483
}
487484

488485
[part="button"]::after {
@@ -549,17 +546,17 @@
549546
--button--FontSize: var(--button--m-small--FontSize);
550547
}
551548

549+
:host([size="sm"]) {
550+
--button--FontSize: var(--button--m-small--FontSize);
551+
}
552+
552553
:host([narrow]) {
553554
--button--PaddingTop: var(--button--m-narrow--PaddingTop);
554555
--button--PaddingRight: var(--button--m-narrow--PaddingRight);
555556
--button--PaddingBottom: var(--button--m-narrow--PaddingBottom);
556557
--button--PaddingLeft: var(--button--m-narrow--PaddingLeft);
557558
}
558559

559-
:host([size="sm"]) {
560-
--button--FontSize: var(--button--m-small--FontSize);
561-
}
562-
563560
:host([size="lg"]) {
564561
--button--PaddingTop: var(--button--m-display-lg--PaddingTop);
565562
--button--PaddingRight: var(--button--m-display-lg--PaddingRight);
@@ -834,6 +831,64 @@
834831
margin-inline-start: var(--button__icon--m-end--MarginLeft);
835832
}
836833

834+
:host([theme="dark"]) {
835+
--button--disabled--Color: var(--pf-v5-global--disabled-color--300);
836+
--button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
837+
--button--m-primary--Color: var(--pf-v5-global--primary-color--400);
838+
--button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100);
839+
--button--m-tertiary--Color: var(--pf-v5-global--palette--black-100);
840+
--button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--100);
841+
--button--m-tertiary--hover--Color: var(--pf-v5-global--palette--black-100);
842+
--button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--BorderColor--100);
843+
--button--m-tertiary--focus--Color: var(--pf-v5-global--palette--black-100);
844+
--button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--BorderColor--100);
845+
--button--m-tertiary--active--Color: var(--pf-v5-global--palette--black-100);
846+
--button--m-warning--Color: var(--pf-v5-global--palette--black-900);
847+
--button--m-warning--hover--Color: var(--pf-v5-global--palette--black-900);
848+
--button--m-warning--focus--Color: var(--pf-v5-global--palette--black-900);
849+
--button--m-warning--active--Color: var(--pf-v5-global--palette--black-900);
850+
--button--m-warning--hover--BackgroundColor: var(--pf-v5-global--warning-color--200);
851+
--button--m-warning--focus--BackgroundColor: var(--pf-v5-global--warning-color--200);
852+
--button--m-warning--active--BackgroundColor: var(--pf-v5-global--warning-color--200);
853+
--button--m-danger--Color: var(--pf-v5-global--palette--black-900);
854+
--button--m-danger--hover--Color: var(--pf-v5-global--palette--black-900);
855+
--button--m-danger--focus--Color: var(--pf-v5-global--palette--black-900);
856+
--button--m-danger--active--Color: var(--pf-v5-global--palette--black-900);
857+
--button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
858+
--button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
859+
--button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
860+
--button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
861+
--button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
862+
--button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
863+
--button--m-control--after--BorderTopColor: transparent;
864+
--button--m-control--after--BorderRightColor: transparent;
865+
--button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
866+
--button--m-control--after--BorderLeftColor: transparent;
867+
--button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
868+
--button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
869+
--button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
870+
--button--m-control--m-expanded--after--BorderBottomColor: var(
871+
--pf-v5-global--primary-color--100
872+
);
873+
--button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
874+
--button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
875+
}
876+
877+
:host([theme="dark"][variant="control"][disabled]) #main::after {
878+
border: 0;
879+
border-block-end: var(--pf-v5-global--BorderWidth--sm) solid
880+
var(--pf-v5-global--palette--black-700);
881+
}
882+
883+
:host:disabled {
884+
color: var(--button--disabled--Color);
885+
background-color: var(--button--disabled--BackgroundColor);
886+
}
887+
888+
:host:disabled #main::after {
889+
border-color: var(--button--disabled--after--BorderColor);
890+
}
891+
837892
:host([variant="link"]:not[inline]):hover #main {
838893
--button--m-link--Color: var(--button--m-link--hover--Color);
839894
--button--m-link--BackgroundColor: var(--button--m-link--hover--BackgroundColor);

‎src/ak-button/ak-button.root.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
--pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
44
--pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
55
--pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
6-
--pf-v5-c-button--FontFamily: var(--pf-v5-global--FontFamily--text);
76
--pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
87
--pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
98
--pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
@@ -179,10 +178,6 @@
179178
--pf-v5-global--active-color--100
180179
);
181180
--pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
182-
--pf-v5-c-button--m-narrow--PaddingTop: var(--pf-v5-global--spacer--form-element);
183-
--pf-v5-c-button--m-narrow--PaddingRight: var(--pf-v5-global--spacer--sm);
184-
--pf-v5-c-button--m-narrow--PaddingBottom: var(--pf-v5-global--spacer--form-element);
185-
--pf-v5-c-button--m-narrow--PaddingLeft: var(--pf-v5-global--spacer--sm);
186181
--pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
187182
--pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
188183
--pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -221,8 +216,6 @@
221216
--pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
222217
}
223218

224-
/* OVERRIDDEN Because WCC doesn't quite understand dark mode yet */
225-
226219
.pf-v5-theme-dark,
227220
html[theme="dark"],
228221
html[data-theme="dark"] {

src/ak-button/ak-button.overridden.yaml renamed to src/ak-button/ak-button.wcc.yaml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@ host:
77
":host":
88
$from: $base
99
$include: position, display
10+
--button-_FontFamily--fallback: redhattext, helvetica, arial, sans-serif
11+
--button--FontFamily: var(--pf-v5-c-button--FontFamily, var(--button-_FontFamily--fallback))
12+
--button--m-narrow--PaddingTop: var(--pf-v5-c-button--m-narrow--PaddingTop, 0.375rem)
13+
--button--m-narrow--PaddingRight: var(--pf-v5-c-button--m-narrow--PaddingRight, 0.5)
14+
--button--m-narrow--PaddingBottom: var(--pf-v5-c-button--m-narrow--PaddingBottom, 0.375rem)
15+
--button--m-narrow--PaddingLeft: var(--pf-v5-c-button--m-narrow--PaddingLeft, 0.5)
1016
'[part="button"]':
1117
$from: $base
1218
$exclude: /^--/, position, display
1319
position: relative;
20+
"font-family": "var(--button--FontFamily)"
1421
'[part="button"]::after':
1522
$from: "::after"
1623
'[part="anchor"]':
@@ -24,6 +31,11 @@ host:
2431
$from: /\.pf-m-(active|small|block)/
2532
':host([size="sm"])':
2633
$from: /\.pf-m-small/
34+
":host([narrow])":
35+
"--button--PaddingTop": "var(--button--m-narrow--PaddingTop)"
36+
"--button--PaddingRight": "var(--button--m-narrow--PaddingRight)"
37+
"--button--PaddingBottom": "var(--button--m-narrow--PaddingBottom)"
38+
"--button--PaddingLeft": "var(--button--m-narrow--PaddingLeft)"
2739
':host([size="lg"])':
2840
$from: /\.pf-m-(primary|secondary|tertiary|link)\.pf-m-display-lg/
2941
':host([variant="\1"]) #main':
@@ -81,3 +93,11 @@ host:
8193
$from: /\.pf-m-link\.pf-m-inline/
8294
':host([variant="\2"][severity="\1"]) #main':
8395
$from: /\.pf-m-(danger)\.pf-m-(link)/
96+
":is(:host:disabled, :host([disabled])) #main":
97+
pointer-events: none
98+
color: var(--button--disabled--Color)
99+
background-color: var(--button--disabled--BackgroundColor)
100+
":is(:host:disabled, :host([disabled])) #main::after":
101+
border-color: var(--button--disabled--after--BorderColor);
102+
':is(:host:disabled, :host([disabled])) [part="anchor"]':
103+
text-decoration: underline;

0 commit comments

Comments
 (0)