Skip to content

Commit 30984e7

Browse files
C-LodderC-Lodder
authored
[5.2] Fix Dart Sass deprecations (joomla#44129)
* Fix SASS deprecations * lint
1 parent 3e22969 commit 30984e7

File tree

6 files changed

+81
-70
lines changed

6 files changed

+81
-70
lines changed

‎build/media_source/templates/administrator/atum/scss/_variables-dark.scss‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12

23
// Color definitions for the dark theme - don't use it with the light theme
34
$btn-primary-dark: #007db0; // contrast ratio: 4.6 with #fff text
@@ -33,53 +34,53 @@ $atum-colors-dark: (
3334
media-manager-content-bg: var(--body-bg),
3435
media-manager-overlay-bg: var(--template-bg-dark-90), // fix this
3536
media-manager-infobar-dt-color: rgba(255, 255, 255, .54),
36-
media-manager-content-color: lighten($btn-primary-dark, 20%),
37+
media-manager-content-color: color.adjust($btn-primary-dark, $lightness: 20%),
3738
media-manager-overlay-header-bg: var(--template-bg-dark-80),
3839
media-manager-disk-name-color: var(--template-text-light),
3940
media-manager-border: 1px solid var(--gray-800),
4041
media-manager-file-icon-color: $btn-primary-dark,
4142
media-manager-tree-item-hover-bg: var(--gray-600),
42-
media-manager-toolbar-icon-color: lighten($btn-primary-dark, 20%),
43+
media-manager-toolbar-icon-color: color.adjust($btn-primary-dark, $lightness: 20%),
4344
media-manager-breadcrumb-item-bg: var(--gray-700),
4445

4546
media-tree-item-color: $btn-primary-dark,
46-
media-tree-active-icon-color: darken($btn-primary-dark, 10%),
47+
media-tree-active-icon-color: color.adjust($btn-primary-dark, $lightness: -10%),
4748

4849
media-browser-file-bg: var(--media-manager-bg),
4950
media-drive-bg: var(--media-manager-bg),
5051

5152
media-toolbar-bg: var(--media-manager-bg),
5253
media-toolbar-icon-bg: var(--media-manager-bg),
53-
media-toolbar-icon-color: lighten($btn-primary-dark, 10%),
54+
media-toolbar-icon-color: color.adjust($btn-primary-dark, $lightness: 10%),
5455
media-toolbar-icon-bg-hvr: var(--gray-800),
5556

5657
image-bg: #000,
5758
image-bg-image: (linear-gradient(45deg, var(--body-bg) 25%, transparent 25%, transparent 75%, #111 75%, var(--body-bg) 100%), linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, var(--body-bg) 75%, var(--body-bg) 100%)),
5859

5960
success-text: #418d52,
6061
success: $success-dark,
61-
successhvr: darken($success-dark, 15%),
62+
successhvr: color.adjust($success-dark, $lightness: -15%),
6263

6364
danger-text: #e0615c,
6465
danger: $danger-dark,
65-
dangerhvr: darken($danger-dark, 15%),
66+
dangerhvr: color.adjust($danger-dark, $lightness: -15%),
6667

6768
darkdanger: #941f1c,
68-
darkdangerhvr: darken(#941f1c, 15%),
69+
darkdangerhvr: color.adjust(#941f1c, $lightness: -15%),
6970

7071
error: #941f1c,
7172
errorhvr: #be2824,
7273

7374
warning-text: #000,
7475
warning: #f0ad4e,
75-
warninghvr: darken($warning, 15%),
76+
warninghvr: color.adjust($warning, $lightness: -15%),
7677

7778
dark-mode-text-light: rgba(255,255,255,.85),
7879

7980
template-link-color: $link-color-dark,
8081
link-color-rgb: (36,158,200),
8182
link-color: $link-color-dark,
82-
template-link-hover-color: lighten($link-color-dark, 10%),
83+
template-link-hover-color: color.adjust($link-color-dark, $lightness: 10%),
8384
link-color-rgb-hvr: var(--template-link-hover-color),
8485

8586
template-quickicon-bg: rgba(255, 255, 255, .1),
@@ -110,7 +111,7 @@ $atum-colors-dark: (
110111
form-select-option: var(--template-text-light),
111112
form-select-option-disabled-bg: var(--template-bg-dark-90),
112113
file-selector-btn-bg: $btn-primary-dark,
113-
file-selector-btn-bg-hvr: darken($btn-primary-dark, 10%),
114+
file-selector-btn-bg-hvr: color.adjust($btn-primary-dark, $lightness: -10%),
114115

115116
// Background styles
116117
bg-normal: var(--template-bg-dark),
@@ -158,7 +159,7 @@ $atum-colors-dark: (
158159
main-nav-divider-bg: #495057,
159160
main-nav-item-title: var(--template-bg-dark-30),
160161
main-nav-mm-active-bg: $btn-primary-dark,
161-
main-nav-mm-active-quicktask-bg: darken($btn-primary-dark, 10%),
162+
main-nav-mm-active-quicktask-bg: color.adjust($btn-primary-dark, $lightness: -10%),
162163
main-nav-badge: var(--template-bg-dark-60),
163164
main-nav-item-title-hvr-bg: $btn-primary-dark,
164165
mobile-menu-collapse-bg: var(--template-bg-dark-50),
@@ -169,7 +170,7 @@ $atum-colors-dark: (
169170
// Header content
170171
header-bg: #0a0e13,
171172
header-item-content-bg: $btn-primary-dark,
172-
header-item-content-bg-hvr: darken($btn-primary-dark, 10%),
173+
header-item-content-bg-hvr: color.adjust($btn-primary-dark, $lightness: -10%),
173174
header-item-content-border-radius: 22px,
174175
header-item-content-jversion-color: var(--dark-mode-text-light),
175176
header-item-content-jversion-bg: transparent,
@@ -224,7 +225,7 @@ $atum-colors-dark: (
224225
joomla-tab-btn-region-border: var(--atum-btn-bg),
225226

226227
joomla-tablist-btn-aria-exp: var(--template-text-light),
227-
joomla-tablist-btn-aria-exp-bg: darken($btn-primary-dark, 10%),
228+
joomla-tablist-btn-aria-exp-bg: color.adjust($btn-primary-dark, $lightness: -10%),
228229
joomla-tablist-btn-aria-exp-aft-bg: $btn-primary-dark,
229230
joomla-tablist-border-bottom: 1px solid var(--gray-800),
230231

@@ -273,17 +274,17 @@ $atum-colors-dark: (
273274
btn-primary-color: var(--text-normal),
274275
btn-primary-bg: $btn-primary-dark,
275276
primary: $btn-primary-dark,
276-
btn-primary-border: 1px solid lighten($btn-primary-dark, 10%),
277-
btn-primary-bg-hvr: darken($btn-primary-dark, 10%),
278-
btn-primary-border-hvr: 1px solid lighten($btn-primary-dark, 10%),
277+
btn-primary-border: 1px solid color.adjust($btn-primary-dark, $lightness: 10%),
278+
btn-primary-bg-hvr: color.adjust($btn-primary-dark, $lightness: -10%),
279+
btn-primary-border-hvr: 1px solid color.adjust($btn-primary-dark, $lightness: 10%),
279280
btn-primary-toggle-bg: var(--template-bg-dark),
280281
btn-primary-toggle-border: var(--template-bg-dark),
281282

282283
btn-secondary-color: var(--template-text-light),
283284
btn-secondary-bg: $info-dark,
284-
btn-secondary-border: 1px solid lighten($info-dark, 10%),
285-
btn-secondary-bg-hvr: darken($info-dark, 10%),
286-
btn-secondary-border-hvr: 1px solid lighten($info-dark, 10%),
285+
btn-secondary-border: 1px solid color.adjust($info-dark, $lightness: 10%),
286+
btn-secondary-bg-hvr: color.adjust($info-dark, $lightness: -10%),
287+
btn-secondary-border-hvr: 1px solid color.adjust($info-dark, $lightness: 10%),
287288

288289
btn-dark-border: 1px solid rgba(0,0,0,.85),
289290
btn-dark-bg: rgba(0,0,0,.9),
@@ -292,25 +293,25 @@ $atum-colors-dark: (
292293
btn-dark-color-hvr: #fff,
293294

294295
btn-light-bg: $btn-primary-dark,
295-
btn-light-border: 1px solid lighten($btn-primary-dark, 10%),
296+
btn-light-border: 1px solid color.adjust($btn-primary-dark, $lightness: 10%),
296297
btn-light-bg-hvr: $btn-primary-bg-hvr,
297298

298299

299300
btn-outline-secondary-color: var(--template-text-light),
300301
btn-outline-secondary-bg: #64676c,
301-
btn-outline-secondary-border: 1px solid lighten(#64676c, 10%),
302+
btn-outline-secondary-border: 1px solid color.adjust(#64676c, $lightness: 10%),
302303

303304
btn-info-color: var(--template-text-light),
304305
btn-info-bg: $info-dark,
305-
btn-info-border: 1px solid lighten($info-dark, 10%),
306-
btn-info-bg-hvr: darken($info-dark, 10%),
307-
btn-info-border-hvr: 1px solid darken($info-dark, 10%),
306+
btn-info-border: 1px solid color.adjust($info-dark, $lightness: 10%),
307+
btn-info-bg-hvr: color.adjust($info-dark, $lightness: -10%),
308+
btn-info-border-hvr: 1px solid color.adjust($info-dark, $lightness: -10%),
308309

309310
// Dropdown
310-
dropdown-header-bg: darken($btn-primary-dark, 10%),
311+
dropdown-header-bg: color.adjust($btn-primary-dark, $lightness: -10%),
311312
dropdown-divider-bg: 1px solid #fff,
312313
dropdown-item-bg: $btn-primary-dark,
313-
dropdown-item-bg-hvr: darken($btn-primary-dark, 10%),
314+
dropdown-item-bg-hvr: color.adjust($btn-primary-dark, $lightness: -10%),
314315
dropdown-item-border-bottom: 1px solid rgba(255, 255, 255, .1),
315316
atum-dropdown-link-hover-bg: var(--gray-700),
316317

@@ -335,7 +336,7 @@ $atum-colors-dark: (
335336
state-success-text: var(--text-normal),
336337
state-success-text-hvr: var(--text-normal),
337338
state-success-bg: $success-dark,
338-
state-success-bg-hvr: darken($success-dark, 15%),
339+
state-success-bg-hvr: color.adjust($success-dark, $lightness: -15%),
339340
state-success-border: var(--state-success-bg),
340341
state-success-btn-border: var(--state-success-bg),
341342
state-success-icon: var(--text-normal),
@@ -344,24 +345,24 @@ $atum-colors-dark: (
344345

345346
state-info-text: var(--text-normal),
346347
state-info-text-hvr: var(--text-normal),
347-
state-info-bg: darken($btn-primary-dark, 15%),
348-
state-info-bg-hvr: darken($btn-primary-dark, 25%),
348+
state-info-bg: color.adjust($btn-primary-dark, $lightness: -15%),
349+
state-info-bg-hvr: color.adjust($btn-primary-dark, $lightness: -25%),
349350
state-info-border: transparent,
350351
state-info-icon: var(--state-info-text),
351-
state-info-heading-bg: darken($btn-primary-dark, 5%),
352+
state-info-heading-bg: color.adjust($btn-primary-dark, $lightness: -5%),
352353

353354
state-warning-text: #000,
354355
state-warning-text-hvr: #000,
355356
state-warning-bg: $warning,
356-
state-warning-bg-hvr: darken($warning, 15%),
357-
state-warning-border: darken($warning, 15%),
357+
state-warning-bg-hvr: color.adjust($warning, $lightness: -15%),
358+
state-warning-border: color.adjust($warning, $lightness: -15%),
358359
state-warning-icon: #000,
359-
state-warning-heading-bg: darken($warning, 15%),
360+
state-warning-heading-bg: color.adjust($warning, $lightness: -15%),
360361

361362
state-danger-text: var(--text-normal),
362363
state-danger-text-hvr: var(--text-normal),
363364
state-danger-bg: $danger-dark,
364-
state-danger-bg-hvr: darken($danger-dark, 15%),
365+
state-danger-bg-hvr: color.adjust($danger-dark, $lightness: -15%),
365366
state-danger-border: var(--dangerhvr),
366367
state-danger-icon: var(--text-normal),
367368
state-danger-heading-bg: var(--dangerhvr),
@@ -386,51 +387,51 @@ $atum-colors-dark: (
386387
atum-btn-icon: var(--template-text-light),
387388
atum-btn-icon-hvr: $atum-text-dark,
388389
atum-btn-bg: $btn-primary-dark,
389-
atum-btn-bg-hvr: darken($btn-primary-dark, 15%),
390+
atum-btn-bg-hvr: color.adjust($btn-primary-dark, $lightness: -15%),
390391
atum-btn-border: 1px solid hsl(var(--hue),20%,80%),
391392
atum-btn-hvr: var(--template-text-light),
392393

393394
atum-btn-success: var(--atum-btn-success-hvr),
394395
atum-btn-success-icon: var(--template-text-light),
395396
atum-btn-success-icon-hvr: var(--atum-btn-success-hvr),
396397
atum-btn-success-bg: $success-dark,
397-
atum-btn-success-bg-hvr: darken($success-dark, 15%),
398-
atum-btn-success-border: 1px solid lighten($success-dark, 10%),
398+
atum-btn-success-bg-hvr: color.adjust($success-dark, $lightness: -15%),
399+
atum-btn-success-border: 1px solid color.adjust($success-dark, $lightness: 10%),
399400
atum-btn-success-hvr: var(--template-text-light),
400401

401402
atum-btn-danger: var(--dangerhvr),
402403
atum-btn-danger-color: var(--template-text-light),
403404
atum-btn-danger-icon: var(--template-text-light),
404405
atum-btn-danger-icon-hvr: var(--atum-btn-danger-hvr),
405406
atum-btn-danger-bg: $danger,
406-
atum-btn-danger-bg-hvr: darken($danger, 15%),
407-
atum-btn-danger-border: 1px solid lighten($danger, 10%),
407+
atum-btn-danger-bg-hvr: color.adjust($danger, $lightness: -15%),
408+
atum-btn-danger-border: 1px solid color.adjust($danger, $lightness: 10%),
408409
atum-btn-danger-hvr: var(--template-text-light),
409410

410-
atum-btn-info: lighten($info-dark, 50%),
411+
atum-btn-info: color.adjust($info-dark, $lightness: 50%),
411412
atum-btn-info-icon: var(--template-text-light),
412413
atum-btn-info-icon-hvr: var(--template-text-dark),
413414
atum-btn-info-bg: $info-dark,
414-
atum-btn-info-bg-hvr: darken($info-dark, 15%),
415-
atum-btn-info-border: 1px solid lighten($info-dark, 10%),
415+
atum-btn-info-bg-hvr: color.adjust($info-dark, $lightness: -15%),
416+
atum-btn-info-border: 1px solid color.adjust($info-dark, $lightness: 10%),
416417
atum-btn-info-hvr: var(--template-text-dark),
417418

418-
atum-btn-primary: lighten($btn-primary-dark, 25%),
419+
atum-btn-primary: color.adjust($btn-primary-dark, $lightness: 25%),
419420
atum-btn-primary-icon: var(--template-text-light),
420421
atum-btn-primary-icon-hvr: var(--template-text-dark),
421422
atum-btn-primary-bg: $btn-primary-dark, // var(--template-bg-dark),
422-
atum-btn-primary-bg-hvr: darken($btn-primary-dark, 15%),
423-
atum-btn-primary-border: 1px solid lighten($btn-primary-dark, 10%),
423+
atum-btn-primary-bg-hvr: color.adjust($btn-primary-dark, $lightness: -15%),
424+
atum-btn-primary-border: 1px solid color.adjust($btn-primary-dark, $lightness: 10%),
424425
atum-btn-primary-hvr: var(--template-text-light),
425426

426427
atum-btn-secondary: #f0f4fb,
427428

428-
atum-btn-action: darken($info-dark, 10%),
429+
atum-btn-action: color.adjust($info-dark, $lightness: -10%),
429430
atum-btn-action-icon: var(--template-text-light),
430431
atum-btn-action-icon-hvr: var(--atum-btn-action-hvr),
431432
atum-btn-action-bg: $info-dark,
432-
atum-btn-action-bg-hvr: darken($info-dark, 15%),
433-
atum-btn-action-border: 1px solid lighten($info-dark, 10%),
433+
atum-btn-action-bg-hvr: color.adjust($info-dark, $lightness: -15%),
434+
atum-btn-action-border: 1px solid color.adjust($info-dark, $lightness: 10%),
434435

435436
atum-list-group-bg: var(--template-sidebar-bg),
436437

0 commit comments

Comments
 (0)