Skip to content

Commit 0bab187

Browse files
Klath123Klath123
committed
fix var names
1 parent 20a576a commit 0bab187

1 file changed

Lines changed: 28 additions & 31 deletions

File tree

‎src/custom-theme.scss‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -112,25 +112,22 @@ body.dark-theme {
112112
@include apply-theme($custom-dark-theme);
113113
@include mat.all-component-themes($DSOMM-dark-theme);
114114

115-
--surface-base: #323436;
115+
--background-base: #323436;
116116
/* page background */
117-
--surface-01: #383A3C;
117+
--background-primary: #383A3C;
118118
/* cards, panels */
119-
--surface-02: #3E4042;
119+
--background-secondary: #3E4042;
120120
/* elevated cards */
121-
--surface-03: #444648;
121+
--background-tertiary: #444648;
122122
/* dialogs, dropdowns */
123-
--surface-04: #2C2E30;
123+
--background-hover: #2C2E30;
124124
/* hover states */
125125
--border-subtle: rgba(255, 255, 255, 0.08);
126126
--border-medium: rgba(255, 255, 255, 0.12);
127127

128128
--text-primary: #e8e8e8;
129129
--text-secondary: #a0a0a0;
130130
--text-tertiary: #616161;
131-
--background-primary: var(--surface-base);
132-
--background-secondary: var(--surface-01);
133-
--background-tertiary: var(--surface-02);
134131

135132
--primary-color: #{mat.get-color-from-palette($DSOMM-dark-primary)};
136133

@@ -147,7 +144,7 @@ body.dark-theme {
147144
--dependency-predecessor-fill: rgb(160, 200, 160);
148145
--dependency-successor-fill: rgb(185, 185, 185);
149146

150-
background-color: var(--surface-base);
147+
background-color: var(--background-base);
151148
color: var(--text-primary);
152149

153150
.title-button,
@@ -182,7 +179,7 @@ body.dark-theme {
182179
//cards and panels
183180
mat-card,
184181
.mat-card {
185-
background-color: var(--surface-01);
182+
background-color: var(--background-primary);
186183
color: var(--text-primary);
187184
border: 1px solid var(--border-subtle);
188185
border-radius: 12px;
@@ -200,17 +197,17 @@ body.dark-theme {
200197
//sidenav
201198
.mat-drawer,
202199
.mat-sidenav {
203-
background-color: var(--surface-01);
200+
background-color: var(--background-primary);
204201
border-right: 1px solid var(--border-subtle);
205202
}
206203

207204
.mat-drawer-container {
208-
background-color: var(--surface-base);
205+
background-color: var(--background-base);
209206
}
210207

211208
//navbar
212209
.mat-toolbar {
213-
background-color: var(--surface-01) ;
210+
background-color: var(--background-primary);
214211
border-bottom: 1px solid var(--border-subtle);
215212
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
216213
}
@@ -219,22 +216,22 @@ body.dark-theme {
219216
// Toolbar / Navbar
220217
// ----------------------------------------------
221218
.mat-toolbar {
222-
background-color: var(--surface-01) ;
219+
background-color: var(--background-primary);
223220
border-bottom: 1px solid var(--border-subtle);
224221
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
225222
}
226223

227224
//Tables
228225
.mat-table,
229226
table[mat-table] {
230-
background-color: var(--surface-01);
227+
background-color: var(--background-primary);
231228
border: 1px solid var(--border-subtle);
232229
border-radius: 8px;
233230
overflow: hidden;
234231
}
235232

236233
.mat-header-row {
237-
background-color: var(--surface-02);
234+
background-color: var(--background-secondary);
238235
border-bottom: 1px solid var(--border-medium);
239236
}
240237

@@ -244,12 +241,12 @@ body.dark-theme {
244241
}
245242

246243
.mat-row {
247-
background-color: var(--surface-01);
244+
background-color: var(--background-primary);
248245
border-bottom: 1px solid var(--border-subtle);
249246
transition: background-color 0.15s ease;
250247

251248
&:hover {
252-
background-color: var(--surface-04);
249+
background-color: var(--background-hover);
253250
}
254251
}
255252

@@ -259,7 +256,7 @@ body.dark-theme {
259256

260257
// Dialog styling
261258
.mat-dialog-container {
262-
background-color: var(--surface-03);
259+
background-color: var(--background-tertiary);
263260
color: var(--text-primary);
264261
border: 1px solid var(--border-medium);
265262
border-radius: 12px;
@@ -269,31 +266,31 @@ body.dark-theme {
269266
// Expansion panels and accordion
270267
.mat-expansion-panel,
271268
.mat-accordion {
272-
background-color: var(--surface-01);
269+
background-color: var(--background-primary);
273270
color: var(--text-primary);
274271
border: 1px solid var(--border-subtle);
275272
border-radius: 8px ;
276273

277274
.mat-expansion-panel-header {
278-
background-color: var(--surface-02);
275+
background-color: var(--background-secondary);
279276
border-radius: 8px;
280277

281278
&:hover {
282-
background-color: var(--surface-04);
279+
background-color: var(--background-hover);
283280
}
284281
}
285282
}
286283

287284
//chips
288285
.mat-chip.mat-standard-chip {
289-
background-color: var(--surface-03);
286+
background-color: var(--background-tertiary);
290287
color: var(--text-secondary);
291288
border: 1px solid var(--border-subtle);
292289
border-radius: 16px;
293290
transition: background-color 0.2s ease, border-color 0.2s ease;
294291

295292
&:hover {
296-
background-color: var(--surface-04);
293+
background-color: var(--background-hover);
297294
border-color: var(--border-medium);
298295
}
299296
}
@@ -319,23 +316,23 @@ body.dark-theme {
319316

320317
// Buttons
321318
.mat-icon-button:hover {
322-
background-color: var(--surface-04);
319+
background-color: var(--background-hover);
323320
}
324321

325322
.mat-raised-button {
326-
background-color: var(--surface-02);
323+
background-color: var(--background-secondary);
327324
color: var(--text-primary);
328325
border: 1px solid var(--border-subtle);
329326

330327
&:hover {
331-
background-color: var(--surface-04);
328+
background-color: var(--background-hover);
332329
}
333330
}
334331

335332
// Modal override
336333
.overlay-wrapper,
337334
.overlay-modal {
338-
background-color: var(--surface-03);
335+
background-color: var(--background-tertiary);
339336
color: var(--text-primary);
340337
border: 1px solid var(--border-medium);
341338
border-radius: 12px;
@@ -372,7 +369,7 @@ body.dark-theme {
372369
transition: background-color 0.15s ease, color 0.15s ease;
373370

374371
&:hover {
375-
background-color: var(--surface-04);
372+
background-color: var(--background-hover);
376373
color: var(--text-primary);
377374
}
378375

@@ -385,7 +382,7 @@ body.dark-theme {
385382
//select and menu
386383
.mat-select-panel,
387384
.mat-menu-panel {
388-
background-color: var(--surface-03);
385+
background-color: var(--background-tertiary);
389386
border: 1px solid var(--border-medium);
390387
border-radius: 8px;
391388
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
@@ -396,7 +393,7 @@ body.dark-theme {
396393

397394
&:hover,
398395
&.mat-active {
399-
background-color: var(--surface-04);
396+
background-color: var(--background-hover);
400397
}
401398
}
402399
}

0 commit comments

Comments
 (0)