Skip to content

Commit cfd97e3

Browse files
arai-aarai-a
committed
Fix HCM coloring on dark mode
1 parent e2e172e commit cfd97e3

File tree

13 files changed

+78
-78
lines changed

13 files changed

+78
-78
lines changed

‎res/css/style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ body {
4646
* These variable can be declared in any rule, as long as their value is still
4747
* a valid color (which means we can use `light-dark()` or any other color functions).
4848
* The colors can be applied on SVG icons with `filter: url(#--var-name)` */
49-
--button-icon-color: ButtonText;
50-
--button-icon-hover-color: SelectedItem;
51-
--button-icon-active-color: SelectedItem;
49+
--button-icon-color: ButtonText !important;
50+
--button-icon-hover-color: SelectedItem !important;
51+
--button-icon-active-color: SelectedItem !important;
5252
}
5353
}
5454

‎src/components/app/KeyboardShortcut.css‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -141,25 +141,25 @@
141141

142142
@media (forced-colors: active) {
143143
.appKeyboardShortcutsBox {
144-
border: 1px solid CanvasText;
144+
border: 1px solid CanvasText !important;
145145
}
146146

147147
.appKeyboardShortcutsHeaderClose {
148-
border: 1px solid ButtonText;
149-
background-color: ButtonFace;
150-
color: ButtonText;
148+
border: 1px solid ButtonText !important;
149+
background-color: ButtonFace !important;
150+
color: ButtonText !important;
151151
}
152152

153153
.appKeyboardShortcutsHeaderClose:hover {
154-
border-color: SelectedItem;
155-
background-color: SelectedItemText;
156-
color: SelectedItem;
154+
border-color: SelectedItem !important;
155+
background-color: SelectedItemText !important;
156+
color: SelectedItem !important;
157157
}
158158

159159
.appKeyboardShortcutsShortcut {
160-
background: SelectedItemText;
161-
color: SelectedItem;
162-
outline: 1px solid CanvasText;
160+
background: SelectedItemText !important;
161+
color: SelectedItem !important;
162+
outline: 1px solid CanvasText !important;
163163
}
164164
}
165165

‎src/components/app/ProfileFilterNavigator.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343

4444
@media (forced-colors: active) {
4545
.profileFilterNavigator--tab-selector::before {
46-
color: currentcolor;
46+
color: currentcolor !important;
4747
}
4848

4949
.profilefilternavigator--tab-selector:not(.button)::before {
50-
color: GrayText;
50+
color: GrayText !important;
5151
}
5252
}

‎src/components/app/TabBar.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,19 +112,19 @@
112112
}
113113

114114
.tabBarTab.selected {
115-
background: SelectedItem;
115+
background: SelectedItem !important;
116116
}
117117

118118
.tabBarTab.selected button {
119-
color: SelectedItemText;
119+
color: SelectedItemText !important;
120120
}
121121

122122
.tabBarTab:not(.selected):hover {
123-
border-color: SelectedItem;
124-
background-color: SelectedItemText;
123+
border-color: SelectedItem !important;
124+
background-color: SelectedItemText !important;
125125
}
126126

127127
.tabBarTab:not(.selected):hover button {
128-
color: SelectedItem;
128+
color: SelectedItem !important;
129129
}
130130
}

‎src/components/shared/CallNodeContextMenu.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262

6363
@media (forced-colors: active) {
6464
.callNodeContextMenuShortcut {
65-
background: SelectedItemText;
66-
color: SelectedItem;
67-
outline: 1px solid CanvasText;
65+
background: SelectedItemText !important;
66+
color: SelectedItem !important;
67+
outline: 1px solid CanvasText !important;
6868
}
6969
}

‎src/components/shared/ContextMenu.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -177,16 +177,16 @@
177177

178178
@media (forced-colors: active) {
179179
.react-contextmenu {
180-
border: 1px solid CanvasText;
180+
border: 1px solid CanvasText !important;
181181
}
182182

183183
.react-contextmenu-item:not(.react-contextmenu-item--disabled):hover {
184-
background-color: SelectedItem;
185-
color: SelectedItemText;
184+
background-color: SelectedItem !important;
185+
color: SelectedItemText !important;
186186
}
187187

188188
.react-contextmenu-item.react-contextmenu-item--disabled,
189189
.react-contextmenu-item.react-contextmenu-item--disabled:hover {
190-
color: GrayText;
190+
color: GrayText !important;
191191
}
192192
}

‎src/components/shared/FilterNavigatorBar.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -162,31 +162,31 @@
162162

163163
@media (forced-colors: active) {
164164
.filterNavigatorBar {
165-
--internal-background-color: ButtonFace;
166-
--internal-hover-background-color: SelectedItemText;
167-
--internal-hover-color: SelectedItem;
168-
--internal-active-background-color: SelectedItemText;
169-
--internal-selected-background-color: SelectedItem;
170-
--internal-selected-color: SelectedItemText;
171-
--internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
165+
--internal-background-color: ButtonFace !important;
166+
--internal-hover-background-color: SelectedItemText !important;
167+
--internal-hover-color: SelectedItem !important;
168+
--internal-active-background-color: SelectedItemText !important;
169+
--internal-selected-background-color: SelectedItem !important;
170+
--internal-selected-color: SelectedItemText !important;
171+
--internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg) !important;
172172
}
173173

174174
.filterNavigatorBarItem {
175-
color: ButtonText;
175+
color: ButtonText !important;
176176
}
177177

178178
/* When the tab selector is active, we want the item to look like a button */
179179
.filterNavigatorBarSelectedItem:has(
180180
.profileFilterNavigator--tab-selector.button
181181
) {
182-
background-color: ButtonFace;
183-
color: ButtonText;
182+
background-color: ButtonFace !important;
183+
color: ButtonText !important;
184184
}
185185

186186
/* In regular mode, the opacity is tweaked, which isn't suited for High Contrast Mode.
187187
Here we want the full opacity and a gray text */
188188
.filterNavigatorBarUncommittedItem {
189-
color: GrayText;
189+
color: GrayText !important;
190190
opacity: 1;
191191
}
192192

‎src/components/shared/TreeView.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@
3838

3939
@media (forced-colors: active) {
4040
.treeView {
41-
--internal-row-toggle-button-color: ButtonText;
42-
--internal-row-toggle-button-active-color: SelectedItem;
43-
--internal-selected-row-toggle-button-color: SelectedItemText;
44-
--internal-selected-row-toggle-button-active-color: ButtonText;
41+
--internal-row-toggle-button-color: ButtonText !important;
42+
--internal-row-toggle-button-active-color: SelectedItem !important;
43+
--internal-selected-row-toggle-button-color: SelectedItemText !important;
44+
--internal-selected-row-toggle-button-active-color: ButtonText !important;
4545
}
4646
}
4747

‎src/components/sidebar/sidebar.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,12 +207,12 @@
207207
@media (forced-colors: active) {
208208
.sidebar-toggle,
209209
.sidebar-toggle::before {
210-
color: ButtonText;
210+
color: ButtonText !important;
211211
}
212212

213213
.sidebar-label:hover .sidebar-toggle,
214214
.sidebar-label:hover .sidebar-toggle::before {
215-
color: SelectedItem;
215+
color: SelectedItem !important;
216216
}
217217
}
218218

‎src/components/timeline/Ruler.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,13 @@
6767
/* The background gradient we use to display the notch are not visible in HCM.
6868
We need to use a plain color. */
6969
.timelineRulerNotch {
70-
background-color: CanvasText;
70+
background-color: CanvasText !important;
7171
}
7272

7373
/* With the background-color, the span text get CanvasText backplating, which
7474
makes the text disappear. Opt-out of forced-colors to remove the backplating */
7575
.timelineRulerNotchText {
76-
color: CanvasText;
76+
color: CanvasText !important;
7777
forced-color-adjust: none;
7878
}
7979
}

0 commit comments

Comments
 (0)