Skip to content

Commit f9406aa

Browse files
tobiutobiu
committed
refactor: Dark Theme for Portal Ticket Component (#8741)
1 parent 152156d commit f9406aa

3 files changed

Lines changed: 51 additions & 25 deletions

File tree

‎resources/scss/src/apps/portal/news/tickets/Component.scss‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.portal-news-tickets-component {
22
.neo-badge {
33
align-items : center;
4-
background-color: #eff1f3; // Default fallback
5-
border : 1px solid rgba(0, 0, 0, 0.1);
4+
background-color: var(--gh-badge-bg); // Default fallback
5+
border : 1px solid var(--gh-badge-border);
66
border-radius : 2em;
7-
color : #24292f;
7+
color : var(--gh-text-primary);
88
display : inline-flex;
99
font-size : 12px;
1010
font-weight : 500;
@@ -14,16 +14,16 @@
1414

1515
&.neo-state-badge {
1616
border-radius: 2em;
17-
color : #ffffff;
17+
color : var(--gh-text-inverse);
1818
gap : 6px;
1919
padding : 2px 10px 2px 8px;
2020

2121
&.neo-state-closed {
22-
background-color : #8250df;
22+
background-color : var(--gh-state-closed-bg);
2323
}
2424

2525
&.neo-state-open {
26-
background-color: #2da44e;
26+
background-color: var(--gh-state-open-bg);
2727
}
2828
}
2929
}
@@ -59,11 +59,11 @@
5959

6060
i {
6161
&.fa-circle-check {
62-
color: #2da44e; // GitHub success green
62+
color: var(--gh-state-open-bg); // GitHub success green
6363
}
6464

6565
&.fa-circle {
66-
color: #8c959f; // GitHub muted grey
66+
color: var(--gh-icon-muted); // GitHub muted grey
6767
}
6868
}
6969
}
@@ -85,7 +85,7 @@
8585
// Vertical Line
8686
&::before {
8787
display: none; // Hiding it, since we use the canvas animation now
88-
background-color: #d0d7de;
88+
background-color: var(--gh-border-default);
8989
bottom : 0;
9090
content : '';
9191
left : 30px;
@@ -107,8 +107,8 @@
107107
&.event {
108108
.neo-timeline-badge {
109109
align-items : center;
110-
background : #eff1f3;
111-
border : 2px solid #fff; // visual gap from line
110+
background : var(--gh-badge-bg);
111+
border : 2px solid var(--gh-bg-default); // visual gap from line
112112
border-radius : 50%;
113113
display : flex;
114114
height : 28px;
@@ -122,18 +122,18 @@
122122
z-index : 1;
123123

124124
i {
125-
color : #57606a;
125+
color : var(--gh-text-secondary);
126126
font-size: 14px;
127127
}
128128
}
129129

130130
.neo-timeline-body {
131-
color : #57606a;
131+
color : var(--gh-text-secondary);
132132
font-size : 13px;
133133
padding-top: 2px;
134134

135135
.neo-timeline-user {
136-
color : #24292f;
136+
color : var(--gh-text-primary);
137137
cursor : pointer;
138138
font-weight : 600;
139139
text-decoration: none;
@@ -144,8 +144,8 @@
144144
}
145145
}
146146

147-
&.purple .neo-timeline-badge i { color: #8250df; }
148-
&.green .neo-timeline-badge i { color: #2da44e; }
147+
&.purple .neo-timeline-badge i { color: var(--gh-state-closed-bg); }
148+
&.green .neo-timeline-badge i { color: var(--gh-state-open-bg); }
149149
}
150150

151151
&.comment {
@@ -160,15 +160,15 @@
160160
z-index : 1;
161161

162162
img {
163-
border : 2px solid #fff;
163+
border : 2px solid var(--gh-bg-default);
164164
border-radius: 50%;
165165
width : 100%;
166166
}
167167
}
168168

169169
.neo-timeline-content {
170-
background : white;
171-
border : 1px solid #d0d7de;
170+
background : var(--gh-bg-default);
171+
border : 1px solid var(--gh-border-default);
172172
border-radius: 6px;
173173
position : relative;
174174

@@ -186,31 +186,31 @@
186186

187187
&::after {
188188
border-color : rgba(255, 255, 255, 0);
189-
border-right-color: #f6f8fa;
189+
border-right-color: var(--gh-bg-subtle);
190190
border-width : 7px;
191191
margin-top : -7px;
192192
}
193193

194194
&::before {
195195
border-color : rgba(208, 215, 222, 0);
196-
border-right-color: #d0d7de;
196+
border-right-color: var(--gh-border-default);
197197
border-width : 8px;
198198
margin-top : -8px;
199199
}
200200

201201
.neo-timeline-header {
202202
align-items : center;
203-
background-color: #f6f8fa;
204-
border-bottom : 1px solid #d0d7de;
203+
background-color: var(--gh-bg-subtle);
204+
border-bottom : 1px solid var(--gh-border-default);
205205
border-radius : 6px 6px 0 0;
206-
color : #57606a;
206+
color : var(--gh-text-secondary);
207207
display : flex;
208208
font-size : 13px;
209209
justify-content : space-between;
210210
padding : 8px 16px;
211211

212212
.neo-timeline-user {
213-
color : #24292f;
213+
color : var(--gh-text-primary);
214214
cursor : pointer;
215215
font-weight : 600;
216216
margin-right : 8px;

‎resources/scss/theme-neo-dark/apps/portal/news/tickets/Component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:root .neo-theme-neo-dark {
2+
--gh-badge-bg : var(--sem-color-bg-neutral-highlighted);
3+
--gh-badge-border : var(--sem-color-border-subtle);
4+
--gh-bg-default : var(--sem-color-bg-neutral-default);
5+
--gh-bg-subtle : var(--sem-color-bg-neutral-active);
6+
--gh-border-default : var(--sem-color-border-default);
7+
--gh-icon-muted : var(--sem-color-icon-neutral-subdued);
8+
--gh-state-closed-bg: #a371f7;
9+
--gh-state-open-bg : #3fb950;
10+
--gh-text-inverse : #ffffff;
11+
--gh-text-primary : var(--sem-color-text-neutral-default);
12+
--gh-text-secondary : var(--sem-color-text-neutral-subdued);
13+
}

‎resources/scss/theme-neo-light/apps/portal/news/tickets/Component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:root .neo-theme-neo-light {
2+
--gh-badge-bg : #eff1f3;
3+
--gh-badge-border : rgba(0, 0, 0, 0.1);
4+
--gh-bg-default : #ffffff;
5+
--gh-bg-subtle : #f6f8fa;
6+
--gh-border-default : #d0d7de;
7+
--gh-icon-muted : #8c959f;
8+
--gh-state-closed-bg: #8250df;
9+
--gh-state-open-bg : #2da44e;
10+
--gh-text-inverse : #ffffff;
11+
--gh-text-primary : #24292f;
12+
--gh-text-secondary : #57606a;
13+
}

0 commit comments

Comments
 (0)