Skip to content

Commit ce9c8d2

Browse files
peterwilsonccpeterwilsoncc
committed
Tests/Build Tools: Update SCSS files to use new color functions.
Replaces deprecated color functions with their updated equivalents, see [https://sass-lang.com/documentation/breaking-changes/color-functions/ the deprecation documentation]. This results in four changes in the built files, `hsl` colors with a negative lightness value are replaced with the keyword `black`. These changes are harmless as they have no effect on the rendered colors. Props aslamdoctor, veryard. Fixes #62142. git-svn-id: https://develop.svn.wordpress.org/trunk@59185 602fd350-edb4-49c9-b593-d223f7449a82
1 parent fde7b01 commit ce9c8d2

File tree

11 files changed

+50
-34
lines changed

11 files changed

+50
-34
lines changed

‎src/wp-admin/css/colors/_admin.scss‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -115,28 +115,28 @@ textarea:focus {
115115
.button:hover,
116116
.button.focus,
117117
.button:focus {
118-
border-color: darken( #7e8993, 5% );
119-
color: darken( #32373c, 5% );
118+
border-color: color.adjust(#7e8993, $lightness: -5%);
119+
color: color.adjust(#32373c, $lightness: -5%);
120120
}
121121

122122
.button.focus,
123123
.button:focus {
124124
border-color: #7e8993;
125-
color: darken( #32373c, 5% );
125+
color: color.adjust(#32373c, $lightness: -5%);
126126
box-shadow: 0 0 0 1px #32373c;
127127
}
128128

129129
.button:active {
130130
border-color: #7e8993;
131-
color: darken( #32373c, 5% );
131+
color: color.adjust(#32373c, $lightness: -5%);
132132
box-shadow: none;
133133
}
134134

135135
.button.active,
136136
.button.active:focus,
137137
.button.active:hover {
138138
border-color: $button-color;
139-
color: darken( #32373c, 5% );
139+
color: color.adjust(#32373c, $lightness: -5%);
140140
box-shadow: inset 0 2px 5px -3px $button-color;
141141
}
142142

@@ -154,16 +154,16 @@ textarea:focus {
154154
.button.hover,
155155
.button:hover,
156156
.button-secondary:hover{
157-
border-color: darken($highlight-color, 10);
158-
color: darken($highlight-color, 10);
157+
border-color: color.adjust($highlight-color, $lightness: -10%);
158+
color: color.adjust($highlight-color, $lightness: -10%);
159159
}
160160

161161
.button.focus,
162162
.button:focus,
163163
.button-secondary:focus {
164-
border-color: lighten($highlight-color, 10);
165-
color: darken($highlight-color, 20);;
166-
box-shadow: 0 0 0 1px lighten($highlight-color, 10);
164+
border-color: color.adjust($highlight-color, $lightness: 10%);
165+
color: color.adjust($highlight-color, $lightness: -20%);
166+
box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
167167
}
168168

169169
.button-primary {
@@ -225,14 +225,14 @@ textarea:focus {
225225
}
226226

227227
.wrap .page-title-action:hover {
228-
color: darken($highlight-color, 10);
229-
border-color: darken($highlight-color, 10);
228+
color: color.adjust($highlight-color, $lightness: -10%);
229+
border-color: color.adjust($highlight-color, $lightness: -10%);
230230
}
231231

232232
.wrap .page-title-action:focus {
233-
border-color: lighten($highlight-color, 10);
234-
color: darken($highlight-color, 20);;
235-
box-shadow: 0 0 0 1px lighten($highlight-color, 10);
233+
border-color: color.adjust($highlight-color, $lightness: 10%);
234+
color: color.adjust($highlight-color, $lightness: -20%);
235+
box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
236236
}
237237
}
238238

@@ -539,7 +539,7 @@ ul#adminmenu > li.current > a.current:after {
539539

540540
.wp-pointer .wp-pointer-content h3 {
541541
background-color: $highlight-color;
542-
border-color: darken( $highlight-color, 5% );
542+
border-color: color.adjust($highlight-color, $lightness: -5%);
543543
}
544544

545545
.wp-pointer .wp-pointer-content h3:before {
@@ -632,7 +632,7 @@ body.more-filters-opened .more-filters:focus:before {
632632

633633
.nav-menus-php .item-edit:focus:before {
634634
box-shadow:
635-
0 0 0 1px lighten($button-color, 10),
635+
0 0 0 1px color.adjust($button-color, $lightness: 10%),
636636
0 0 2px 1px $button-color;
637637
}
638638

@@ -711,7 +711,7 @@ div#wp-responsive-toggle a:before {
711711
#customize-save-button-wrapper .save:focus,
712712
#publish-settings:focus {
713713
box-shadow:
714-
0 0 0 1px lighten($button-color, 10),
714+
0 0 0 1px color.adjust($button-color, $lightness: 10%),
715715
0 0 2px 1px $button-color;
716716
}
717717

@@ -772,7 +772,7 @@ div#wp-responsive-toggle a:before {
772772
.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
773773
.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
774774
box-shadow:
775-
0 0 0 1px lighten($button-color, 10),
775+
0 0 0 1px color.adjust($button-color, $lightness: 10%),
776776
0 0 2px 1px $button-color;
777777
}
778778

‎src/wp-admin/css/colors/_mixins.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
&:hover,
1111
&:focus {
12-
background: lighten( $button-color, 3% );
13-
border-color: darken( $button-color, 3% );
12+
background: color.adjust($button-color, $lightness: 3%);
13+
border-color: color.adjust($button-color, $lightness: -3%);
1414
color: $button-text-color;
1515
}
1616

@@ -21,8 +21,8 @@
2121
}
2222

2323
&:active {
24-
background: darken( $button-color, 5% );
25-
border-color: darken( $button-color, 5% );
24+
background: color.adjust($button-color, $lightness: -5%);
25+
border-color: color.adjust($button-color, $lightness: -5%);
2626
color: $button-text-color;
2727
}
2828

@@ -31,7 +31,7 @@
3131
&.active:hover {
3232
background: $button-color;
3333
color: $button-text-color;
34-
border-color: darken( $button-color, 15% );
35-
box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
34+
border-color: color.adjust($button-color, $lightness: -15%);
35+
box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%);
3636
}
3737
}

‎src/wp-admin/css/colors/_variables.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $scheme-name: "default" !default;
66

77
$text-color: #fff !default;
88
$base-color: #23282d !default;
9-
$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
9+
$icon-color: hsl(color.channel($base-color, "hue", $space: hsl), 7%, 95%) !default;
1010
$highlight-color: #0073aa !default;
1111
$notification-color: #d54e21 !default;
1212

@@ -16,7 +16,7 @@ $notification-color: #d54e21 !default;
1616
$body-background: #f1f1f1 !default;
1717

1818
$link: #0073aa !default;
19-
$link-focus: lighten( $link, 10% ) !default;
19+
$link-focus: color.adjust($link, $lightness: 10%) !default;
2020

2121
$button-color: $highlight-color !default;
2222
$button-text-color: $text-color !default;
@@ -38,8 +38,8 @@ $menu-current-icon: $menu-highlight-icon !default;
3838
$menu-current-background: $menu-highlight-background !default;
3939

4040
$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
41-
$menu-submenu-background: darken( $base-color, 7% ) !default;
42-
$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
41+
$menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
42+
$menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
4343

4444
$menu-submenu-focus-text: $highlight-color !default;
4545
$menu-submenu-current-text: $text-color !default;
@@ -54,8 +54,8 @@ $menu-collapse-icon: $menu-icon !default;
5454
$menu-collapse-focus-text: $text-color !default;
5555
$menu-collapse-focus-icon: $menu-highlight-icon !default;
5656

57-
$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
58-
$adminbar-input-background: lighten( $menu-background, 7% ) !default;
57+
$adminbar-avatar-frame: color.adjust($menu-background, $lightness: 7%) !default;
58+
$adminbar-input-background: color.adjust($menu-background, $lightness: 7%) !default;
5959

6060
$adminbar-recovery-exit-text: $menu-bubble-text !default;
6161
$adminbar-recovery-exit-background: $menu-bubble-background !default;

‎src/wp-admin/css/colors/blue/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "blue";
24
$base-color: #52accc;
35
$icon-color: #e5f8ff;

‎src/wp-admin/css/colors/coffee/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "coffee";
24
$base-color: #59524c;
35
$highlight-color: #c7a589;

‎src/wp-admin/css/colors/ectoplasm/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "ectoplasm";
24
$base-color: #523f6d;
35
$icon-color: #ece6f6;

‎src/wp-admin/css/colors/light/colors.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "light";
24
$base-color: #e5e5e5;
35
$icon-color: #999;
@@ -19,7 +21,7 @@ $menu-collapse-text: #777;
1921
$menu-collapse-focus-icon: #555;
2022

2123
$dashboard-accent-1: $highlight-color;
22-
$dashboard-accent-2: desaturate( lighten( $highlight-color, 7% ), 15% );
24+
$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
2325
$dashboard-icon-background: $text-color;
2426

2527
@import "../_admin.scss";

‎src/wp-admin/css/colors/midnight/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "midnight";
24
$base-color: #363b3f;
35
$highlight-color: #e14d43;

‎src/wp-admin/css/colors/modern/colors.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use "sass:color";
2+
13
$scheme-name: "modern";
24
$base-color: #1e1e1e;
35
$highlight-color: #3858e9;
46
$menu-submenu-focus-text: #33f078;
57
$notification-color: $highlight-color;
68

79
$link: $highlight-color;
8-
$link-focus: darken($highlight-color, 10%);
10+
$link-focus: color.adjust($highlight-color, $lightness: -10%);
911

1012
$custom-welcome-panel: "false";
1113

‎src/wp-admin/css/colors/ocean/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "sass:color";
2+
13
$scheme-name: "ocean";
24
$base-color: #738e96;
35
$icon-color: #f2fcff;

0 commit comments

Comments
 (0)