<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[59656] trunk: Administration: Modernize admin color scheme SASS files.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/59656">59656</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/59656","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>desrosj</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2025-01-16 21:03:12 +0000 (Thu, 16 Jan 2025)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Administration: Modernize admin color scheme SASS files.

This updates the admin color scheme `.sass` files to address some deprecated notices caused by upstream changes.

- `string` and `colors` are no longer globally available functions.
- `@import` is deprecated in favor of `@use`.

There are still a few notices that are output, however this will require an update to the `grunt-sass` package to resolve.

Props MattyRob.
Fixes <a href="https://core.trac.wordpress.org/ticket/62323">#62323</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkpackagelockjson">trunk/package-lock.json</a></li>
<li><a href="#trunkpackagejson">trunk/package.json</a></li>
<li><a href="#trunksrcwpadmincsscolors_adminscss">trunk/src/wp-admin/css/colors/_admin.scss</a></li>
<li><a href="#trunksrcwpadmincsscolors_mixinsscss">trunk/src/wp-admin/css/colors/_mixins.scss</a></li>
<li><a href="#trunksrcwpadmincsscolors_variablesscss">trunk/src/wp-admin/css/colors/_variables.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsbluecolorsscss">trunk/src/wp-admin/css/colors/blue/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorscoffeecolorsscss">trunk/src/wp-admin/css/colors/coffee/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsectoplasmcolorsscss">trunk/src/wp-admin/css/colors/ectoplasm/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorslightcolorsscss">trunk/src/wp-admin/css/colors/light/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsmidnightcolorsscss">trunk/src/wp-admin/css/colors/midnight/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsmoderncolorsscss">trunk/src/wp-admin/css/colors/modern/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorsoceancolorsscss">trunk/src/wp-admin/css/colors/ocean/colors.scss</a></li>
<li><a href="#trunksrcwpadmincsscolorssunrisecolorsscss">trunk/src/wp-admin/css/colors/sunrise/colors.scss</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkpackagelockjson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package-lock.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package-lock.json   2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/package-lock.json     2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -144,7 +144,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                "prettier": "npm:wp-prettier@2.6.2",
</span><span class="cx" style="display: block; padding: 0 10px">                                "qunit": "~2.23.1",
</span><span class="cx" style="display: block; padding: 0 10px">                                "react-refresh": "0.14.0",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                "sass": "1.79.6",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         "sass": "1.83.4",
</ins><span class="cx" style="display: block; padding: 0 10px">                                 "sinon": "16.1.3",
</span><span class="cx" style="display: block; padding: 0 10px">                                "sinon-test": "~3.1.6",
</span><span class="cx" style="display: block; padding: 0 10px">                                "source-map-loader": "5.0.0",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3727,6 +3727,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "hasInstallScript": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "detect-libc": "^1.0.3",
</span><span class="cx" style="display: block; padding: 0 10px">                                "is-glob": "^4.0.3",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4035,6 +4036,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "fill-range": "^7.1.1"
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4048,6 +4050,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "to-regex-range": "^5.0.1"
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4061,6 +4064,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "engines": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "node": ">=0.12.0"
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4071,6 +4075,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "braces": "^3.0.3",
</span><span class="cx" style="display: block; padding: 0 10px">                                "picomatch": "^2.3.1"
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4085,6 +4090,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "is-number": "^7.0.0"
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -14205,6 +14211,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "Apache-2.0",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        "optional": true,
</ins><span class="cx" style="display: block; padding: 0 10px">                         "bin": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "detect-libc": "bin/detect-libc.js"
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -20090,9 +20097,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-jQ5Ql18hdCQ4qS+RCrbLfz1n+Pags27q5TwMKvZyhp5hh2UULUYZUy1keqj6k6SYsdqIYjnmz7xyyEY0V67B8Q=="
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px">                "node_modules/immutable": {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        "version": "4.3.7",
-                       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
-                       "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 "version": "5.0.3",
+                       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+                       "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT"
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -26229,7 +26236,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
</span><span class="cx" style="display: block; padding: 0 10px">                        "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dev": true,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        "license": "MIT"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 "license": "MIT",
+                       "optional": true
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px">                "node_modules/node-domexception": {
</span><span class="cx" style="display: block; padding: 0 10px">                        "version": "1.0.0",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30910,15 +30918,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px">                "node_modules/sass": {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        "version": "1.79.6",
-                       "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.6.tgz",
-                       "integrity": "sha512-PVVjeeiUGx6Nj4PtEE/ecwu8ltwfPKzHxbbVmmLj4l1FYHhOyfA0scuVF8sVaa+b+VY4z7BVKjKq0cPUQdUU3g==",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 "version": "1.83.4",
+                       "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz",
+                       "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==",
</ins><span class="cx" style="display: block; padding: 0 10px">                         "dev": true,
</span><span class="cx" style="display: block; padding: 0 10px">                        "license": "MIT",
</span><span class="cx" style="display: block; padding: 0 10px">                        "dependencies": {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                "@parcel/watcher": "^2.4.1",
</del><span class="cx" style="display: block; padding: 0 10px">                                 "chokidar": "^4.0.0",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                "immutable": "^4.0.0",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         "immutable": "^5.0.2",
</ins><span class="cx" style="display: block; padding: 0 10px">                                 "source-map-js": ">=0.6.2 <2.0.0"
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="cx" style="display: block; padding: 0 10px">                        "bin": {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30926,6 +30933,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="cx" style="display: block; padding: 0 10px">                        "engines": {
</span><span class="cx" style="display: block; padding: 0 10px">                                "node": ">=14.0.0"
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        },
+                       "optionalDependencies": {
+                               "@parcel/watcher": "^2.4.1"
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px">                "node_modules/sass-loader": {
</span></span></pre></div>
<a id="trunkpackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package.json        2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/package.json  2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -66,7 +66,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                "prettier": "npm:wp-prettier@2.6.2",
</span><span class="cx" style="display: block; padding: 0 10px">                "qunit": "~2.23.1",
</span><span class="cx" style="display: block; padding: 0 10px">                "react-refresh": "0.14.0",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                "sass": "1.79.6",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         "sass": "1.83.4",
</ins><span class="cx" style="display: block; padding: 0 10px">                 "sinon": "16.1.3",
</span><span class="cx" style="display: block; padding: 0 10px">                "sinon-test": "~3.1.6",
</span><span class="cx" style="display: block; padding: 0 10px">                "source-map-loader": "5.0.0",
</span></span></pre></div>
<a id="trunksrcwpadmincsscolors_adminscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/_admin.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/_admin.scss 2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/_admin.scss   2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,17 +1,19 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use 'sass:color';
+@use 'sass:string';
+@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;
+@use 'variables';
+@use 'mixins';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import 'variables';
-@import 'mixins';
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * This function name uses British English to maintain backward compatibility, as developers
</span><span class="cx" style="display: block; padding: 0 10px">  * may use the function in their own admin CSS files. See #56811.
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> @function url-friendly-colour( $color ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        @return '%23' + str-slice( '#{ $color }', 2, -1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ @return '%23' + string.slice( '#{ $color }', 2, -1 );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> body {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $body-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$body-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,12 +20,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Links */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        &:active,
</span><span class="cx" style="display: block; padding: 0 10px">        &:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link-focus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link-focus;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -36,12 +38,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui .button-link {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        &:active,
</span><span class="cx" style="display: block; padding: 0 10px">        &:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link-focus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link-focus;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -66,16 +68,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Forms */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=checkbox]:checked::before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($form-checked)}%27%2F%3E%3C%2Fsvg%3E");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> input[type=radio]:checked::before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $form-checked;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$form-checked;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui input[type="reset"]:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-core-ui input[type="reset"]:active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $link-focus;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$link-focus;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="text"]:focus,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -97,8 +99,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="radio"]:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> select:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> textarea:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-color: $highlight-color;
-       box-shadow: 0 0 0 1px $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: variables.$highlight-color;
+       box-shadow: 0 0 0 1px variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -135,9 +137,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">        .button.active,
</span><span class="cx" style="display: block; padding: 0 10px">        .button.active:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        .button.active:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">                 color: color.adjust(#32373c, $lightness: -5%);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                box-shadow: inset 0 2px 5px -3px $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         box-shadow: inset 0 2px 5px -3px variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .button.active:focus {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -144,26 +146,26 @@
</span><span class="cx" style="display: block; padding: 0 10px">                box-shadow: 0 0 0 1px #32373c;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        @if ( $low-contrast-theme != "true" ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ @if ( variables.$low-contrast-theme != "true" ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                 .button,
</span><span class="cx" style="display: block; padding: 0 10px">                .button-secondary {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        color: $highlight-color;
-                       border-color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 color: variables.$highlight-color;
+                       border-color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                .button.hover,
</span><span class="cx" style="display: block; padding: 0 10px">                .button:hover,
</span><span class="cx" style="display: block; padding: 0 10px">                .button-secondary:hover{
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        border-color: color.adjust($highlight-color, $lightness: -10%);
-                       color: color.adjust($highlight-color, $lightness: -10%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
+                       color: color.adjust(variables.$highlight-color, $lightness: -10%);
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                .button.focus,
</span><span class="cx" style="display: block; padding: 0 10px">                .button:focus,
</span><span class="cx" style="display: block; padding: 0 10px">                .button-secondary:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        border-color: color.adjust($highlight-color, $lightness: 10%);
-                       color: color.adjust($highlight-color, $lightness: -20%);
-                       box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
+                       color: color.adjust(variables.$highlight-color, $lightness: -20%);
+                       box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                .button-primary {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -174,74 +176,74 @@
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .button-primary {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                @include button( $button-color );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         @include mixins.button( variables.$button-color );
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .button-group > .button.active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-primary {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $text-color;
-               background-color: $base-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$text-color;
+               background-color: variables.$base-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-text-primary {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $base-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$base-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-highlight {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-highlight-text;
-               background-color: $menu-highlight-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-highlight-text;
+               background-color: variables.$menu-highlight-background;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-text-highlight {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-highlight-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-highlight-background;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-notification {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-bubble-text;
-               background-color: $menu-bubble-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-bubble-text;
+               background-color: variables.$menu-bubble-background;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-text-notification {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-bubble-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-bubble-background;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-ui-text-icon {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* List tables */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@if $low-contrast-theme == "true" {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@if variables.$low-contrast-theme == "true" {
</ins><span class="cx" style="display: block; padding: 0 10px">         .wrap .page-title-action:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-text;
-               background-color: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-text;
+               background-color: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> } @else {
</span><span class="cx" style="display: block; padding: 0 10px">        .wrap .page-title-action,
</span><span class="cx" style="display: block; padding: 0 10px">        .wrap .page-title-action:active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border: 1px solid $highlight-color;
-               color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border: 1px solid variables.$highlight-color;
+               color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wrap .page-title-action:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: color.adjust($highlight-color, $lightness: -10%);
-               border-color: color.adjust($highlight-color, $lightness: -10%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: color.adjust(variables.$highlight-color, $lightness: -10%);
+               border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wrap .page-title-action:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-color: color.adjust($highlight-color, $lightness: 10%);
-               color: color.adjust($highlight-color, $lightness: -20%);
-               box-shadow: 0 0 0 1px color.adjust($highlight-color, $lightness: 10%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
+               color: color.adjust(variables.$highlight-color, $lightness: -20%);
+               box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .view-switch a.current:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .view-switch a:hover:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-bubble-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-bubble-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -250,15 +252,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenuback,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenuwrap,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu div.wp-menu-image:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu a:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -265,13 +267,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.menu-top:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.opensub > a.menu-top,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li > a.menu-top:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-highlight-text;
-       background-color: $menu-highlight-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-highlight-text;
+       background-color: variables.$menu-highlight-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.menu-top:hover div.wp-menu-image:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-highlight-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-highlight-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -280,8 +282,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .about-wrap .nav-tab-active,
</span><span class="cx" style="display: block; padding: 0 10px"> .nav-tab-active,
</span><span class="cx" style="display: block; padding: 0 10px"> .nav-tab-active:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $body-background;
-       border-bottom-color: $body-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$body-background;
+       border-bottom-color: variables.$body-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -291,16 +293,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-has-current-submenu .wp-submenu,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-submenu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-submenu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-right-color: $menu-submenu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-right-color: variables.$menu-submenu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-submenu .wp-submenu-head {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-submenu a,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -307,10 +309,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-has-current-submenu .wp-submenu a,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &:focus, &:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -320,16 +322,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-submenu li.current a,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-current-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-current-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &:hover, &:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> ul#adminmenu a.wp-has-current-submenu:after,
</span><span class="cx" style="display: block; padding: 0 10px"> ul#adminmenu > li.current > a.current:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    border-right-color: $body-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    border-right-color: variables.$body-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.current a.menu-top,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -336,8 +338,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
</span><span class="cx" style="display: block; padding: 0 10px"> .folded #adminmenu li.current.menu-top {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-current-text;
-       background: $menu-current-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-current-text;
+       background: variables.$menu-current-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -348,7 +350,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li:hover div.wp-menu-image:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li a:focus div.wp-menu-image:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.opensub div.wp-menu-image:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-current-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-current-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -357,8 +359,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .menu-counter,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .awaiting-mod,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu .update-plugins {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-bubble-text;
-       background: $menu-bubble-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-bubble-text;
+       background: variables.$menu-bubble-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.current a .awaiting-mod,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -365,8 +367,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li a.wp-has-current-submenu .update-plugins,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li:hover a .awaiting-mod,
</span><span class="cx" style="display: block; padding: 0 10px"> #adminmenu li.menu-top:hover > a .update-plugins {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-bubble-current-text;
-       background: $menu-bubble-current-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-bubble-current-text;
+       background: variables.$menu-bubble-current-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -373,19 +375,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Menu: collapse button */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #collapse-button {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    color: $menu-collapse-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    color: variables.$menu-collapse-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #collapse-button:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> #collapse-button:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Bar */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
-       background: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
+       background: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-item,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -392,7 +394,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar a.ab-item,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar > #wp-toolbar span.ab-label,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar > #wp-toolbar span.noticon {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-icon,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -399,7 +401,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-icon:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-item:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-item:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -407,14 +409,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
-       background: $menu-submenu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
+       background: variables.$menu-submenu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) li:hover .ab-icon:before,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -421,7 +423,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) li:hover .ab-item:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) li:hover .ab-item:after,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) li:hover #adminbarsearch:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -428,12 +430,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Bar: submenu */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .menupop .ab-sub-wrapper {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-submenu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-submenu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-submenu-background-alt;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-submenu-background-alt;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-submenu .ab-item,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -440,12 +442,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks .menupop ul li a,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks .menupop.hover ul li a,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks li .blavatar,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .menupop .menupop > .ab-item:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks .menupop ul li a:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -466,7 +468,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar li.hover .ab-item:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar li:hover #adminbarsearch:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar li #adminbarsearch.adminbar-focused:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks li a:hover .blavatar,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -475,12 +477,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .menupop .menupop > .ab-item:hover:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.mobile .quicklinks .ab-icon:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.mobile .quicklinks .ab-item:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.mobile .quicklinks .hover .ab-icon:before,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.mobile .quicklinks .hover .ab-item:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -487,24 +489,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Bar: search */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #adminbarsearch:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
-       background: $adminbar-input-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
+       background: variables.$adminbar-input-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Bar: recovery mode */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-recovery-mode {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $adminbar-recovery-exit-text;
-       background-color: $adminbar-recovery-exit-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$adminbar-recovery-exit-text;
+       background-color: variables.$adminbar-recovery-exit-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-recovery-mode .ab-item,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-recovery-mode a.ab-item {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $adminbar-recovery-exit-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$adminbar-recovery-exit-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .ab-top-menu > #wp-admin-bar-recovery-mode.hover >.ab-item,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -511,27 +513,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar.nojq .quicklinks .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode:hover > .ab-item,
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar:not(.mobile) .ab-top-menu > #wp-admin-bar-recovery-mode > .ab-item:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $adminbar-recovery-exit-text;
-       background-color: $adminbar-recovery-exit-background-alt;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$adminbar-recovery-exit-text;
+       background-color: variables.$adminbar-recovery-exit-background-alt;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Admin Bar: my account */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-color: $adminbar-avatar-frame;
-       background-color: $adminbar-avatar-frame;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-color: variables.$adminbar-avatar-frame;
+       background-color: variables.$adminbar-avatar-frame;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-user-info .display-name {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-focus-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-focus-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> #wpadminbar #wp-admin-bar-user-info .username {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-submenu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-submenu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -538,12 +540,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Pointers */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer .wp-pointer-content h3 {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $highlight-color;
-       border-color: color.adjust($highlight-color, $lightness: -5%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$highlight-color;
+       border-color: color.adjust(variables.$highlight-color, $lightness: -5%);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer .wp-pointer-content h3:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer.wp-pointer-top .wp-pointer-arrow,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -550,7 +552,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer.wp-pointer-top .wp-pointer-arrow-inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer.wp-pointer-undefined .wp-pointer-arrow,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-pointer.wp-pointer-undefined .wp-pointer-arrow-inner {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-bottom-color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom-color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -558,22 +560,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .media-item .bar,
</span><span class="cx" style="display: block; padding: 0 10px"> .media-progress-bar div {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .details.attachment {
</span><span class="cx" style="display: block; padding: 0 10px">        box-shadow:
</span><span class="cx" style="display: block; padding: 0 10px">                inset 0 0 0 3px #fff,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                inset 0 0 0 7px $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         inset 0 0 0 7px variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .attachment.details .check {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $highlight-color;
-       box-shadow: 0 0 0 1px #fff, 0 0 0 2px $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$highlight-color;
+       box-shadow: 0 0 0 1px #fff, 0 0 0 2px variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .media-selection .attachment.selection.details .thumbnail {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        box-shadow: 0 0 0 1px #fff, 0 0 0 3px $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -582,49 +584,49 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-browser .theme.active .theme-name,
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-browser .theme.add-new-theme a:hover:after,
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-browser .theme.add-new-theme a:focus:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-browser .theme.add-new-theme a:hover span:after,
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-browser .theme.add-new-theme a:focus span:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-section.current,
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-filter.current {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-bottom-color: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom-color: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
-       background-color: $menu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
+       background-color: variables.$menu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $menu-highlight-background;
-       color: $menu-highlight-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$menu-highlight-background;
+       color: variables.$menu-highlight-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters:hover:before,
</span><span class="cx" style="display: block; padding: 0 10px"> body.more-filters-opened .more-filters:focus:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-highlight-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-highlight-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Widgets */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .widgets-chooser li.widgets-chooser-selected {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background-color: $menu-highlight-background;
-       color: $menu-highlight-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: variables.$menu-highlight-background;
+       color: variables.$menu-highlight-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .widgets-chooser li.widgets-chooser-selected:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .widgets-chooser li.widgets-chooser-selected:focus:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-highlight-text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-highlight-text;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -632,8 +634,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .nav-menus-php .item-edit:focus:before {
</span><span class="cx" style="display: block; padding: 0 10px">        box-shadow:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                0 0 0 1px color.adjust($button-color, $lightness: 10%),
-               0 0 2px 1px $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
+               0 0 2px 1px variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -640,21 +642,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Responsive Component */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> div#wp-responsive-toggle a:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-responsive-open div#wp-responsive-toggle a {
</span><span class="cx" style="display: block; padding: 0 10px">        // ToDo: make inset border
</span><span class="cx" style="display: block; padding: 0 10px">        border-color: transparent;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-highlight-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-highlight-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $menu-submenu-background;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$menu-submenu-background;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: $menu-icon;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: variables.$menu-icon;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* TinyMCE */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -664,7 +666,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-container.mce-menu .mce-menu-item:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-container.mce-menu .mce-menu-item-normal.mce-active,
</span><span class="cx" style="display: block; padding: 0 10px"> .mce-container.mce-menu .mce-menu-item-preview.mce-active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: variables.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Customizer */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -673,8 +675,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .control-section .accordion-section-title:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .control-section.open .accordion-section-title,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .control-section .accordion-section-title:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
-               border-left-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
+               border-left-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-controls-close:focus,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -681,8 +683,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-controls-close:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-controls-preview-toggle:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-controls-preview-toggle:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
-               border-top-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
+               border-top-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-panel-back:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -689,8 +691,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-panel-back:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-section-back:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-section-back:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
-               border-left-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
+               border-left-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-screen-options-toggle:hover,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -700,7 +702,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-screen-options-toggle:focus:before,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -711,28 +713,28 @@
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-save-button-wrapper .save:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        #publish-settings:focus {
</span><span class="cx" style="display: block; padding: 0 10px">                box-shadow:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        0 0 0 1px color.adjust($button-color, $lightness: 10%),
-                       0 0 2px 1px $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
+                       0 0 2px 1px variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info.open .customize-help-toggle,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info .customize-help-toggle:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-controls .customize-info .customize-help-toggle:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .control-panel-themes .customize-themes-section-title:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        .control-panel-themes .customize-themes-section-title:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-left-color: $button-color;
-               color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-left-color: variables.$button-color;
+               color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .control-panel-themes .theme-section .customize-themes-section-title.selected:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                background: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         background: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .control-panel-themes .customize-themes-section-title.selected {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-theme-controls .control-section:hover > .accordion-section-title:after,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -743,37 +745,37 @@
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-outer-theme-controls .control-section .accordion-section-title:hover:after,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-outer-theme-controls .control-section.open .accordion-section-title:after,
</span><span class="cx" style="display: block; padding: 0 10px">        #customize-outer-theme-controls .control-section .accordion-section-title:focus:after {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .customize-control .attachment-media-view .button-add-media:focus {
</span><span class="cx" style="display: block; padding: 0 10px">                background-color: #fbfbfc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">                 border-style: solid;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                box-shadow: 0 0 0 1px $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         box-shadow: 0 0 0 1px variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">                 outline: 2px solid transparent;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay-footer .devices button:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay-footer .devices button.active:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-bottom-color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-bottom-color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay-footer .devices button:hover:before,
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay-footer .devices button:focus:before {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay .collapse-sidebar:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay .collapse-sidebar:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
</span><span class="cx" style="display: block; padding: 0 10px">        .wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
</span><span class="cx" style="display: block; padding: 0 10px">                box-shadow:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        0 0 0 1px color.adjust($button-color, $lightness: 10%),
-                       0 0 2px 1px $button-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 0 0 0 1px color.adjust(variables.$button-color, $lightness: 10%),
+                       0 0 2px 1px variables.$button-color;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &.wp-customizer .theme-overlay .theme-header .close:focus,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -782,7 +784,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        &.wp-customizer .theme-overlay .theme-header .right:hover,
</span><span class="cx" style="display: block; padding: 0 10px">        &.wp-customizer .theme-overlay .theme-header .left:focus,
</span><span class="cx" style="display: block; padding: 0 10px">        &.wp-customizer .theme-overlay .theme-header .left:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                border-bottom-color: $button-color;
-               color: $link;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         border-bottom-color: variables.$button-color;
+               color: variables.$link;
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincsscolors_mixinsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/_mixins.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/_mixins.scss        2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/_mixins.scss  2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,3 +1,5 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use 'sass:color';
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px">  * Button mixin- creates a button effect with correct
</span><span class="cx" style="display: block; padding: 0 10px">  * highlights/shadows, based on a base color.
</span></span></pre></div>
<a id="trunksrcwpadmincsscolors_variablesscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/_variables.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/_variables.scss     2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/_variables.scss       2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,3 +1,5 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "sass:color";
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // assign default value to all undefined variables
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> $scheme-name: "default" !default;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -37,7 +39,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-current-icon: $menu-highlight-icon !default;
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-current-background: $menu-highlight-background !default;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$menu-submenu-text: color.mix( $base-color, $text-color, 30% ) !default;
</ins><span class="cx" style="display: block; padding: 0 10px"> $menu-submenu-background: color.adjust($base-color, $lightness: -7%) !default;
</span><span class="cx" style="display: block; padding: 0 10px"> $menu-submenu-background-alt: color.adjust(color.adjust($menu-background, $lightness: 7%), $saturation: -7%) !default;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -59,9 +61,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> $adminbar-recovery-exit-text: $menu-bubble-text !default;
</span><span class="cx" style="display: block; padding: 0 10px"> $adminbar-recovery-exit-background: $menu-bubble-background !default;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$adminbar-recovery-exit-background-alt: mix(black, $adminbar-recovery-exit-background, 10%) !default;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$adminbar-recovery-exit-background-alt: color.mix(black, $adminbar-recovery-exit-background, 10%) !default;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$menu-customizer-text: color.mix( $base-color, $text-color, 40% ) !default;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> // Dashboard Colors
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorsbluecolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/blue/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/blue/colors.scss    2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/blue/colors.scss      2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,16 +1,16 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@use "sass:color";
-
-$scheme-name: "blue";
-$base-color: #52accc;
-$icon-color: #e5f8ff;
</del><span class="cx" style="display: block; padding: 0 10px"> $highlight-color: #096484;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$notification-color: #e1a948;
-$button-color: #e1a948;
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-submenu-text: #e2ecf1;
-$menu-submenu-focus-text: #fff;
-$menu-submenu-background: #4796b3;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "blue",
+       $base-color: #52accc,
+       $icon-color: #e5f8ff,
+       $highlight-color: $highlight-color,
+       $notification-color: #e1a948,
+       $button-color: #e1a948,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$dashboard-icon-background: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $menu-submenu-text: #e2ecf1,
+       $menu-submenu-focus-text: #fff,
+       $menu-submenu-background: #4796b3,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $dashboard-icon-background: $highlight-color
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorscoffeecolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/coffee/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/coffee/colors.scss  2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/coffee/colors.scss    2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,11 +1,11 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@use "sass:color";
-
-$scheme-name: "coffee";
</del><span class="cx" style="display: block; padding: 0 10px"> $base-color: #59524c;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$highlight-color: #c7a589;
-$notification-color: #9ea476;
-$low-contrast-theme: "true";
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$form-checked: $base-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "coffee",
+       $base-color: $base-color,
+       $highlight-color: #c7a589,
+       $notification-color: #9ea476,
+       $form-checked: $base-color,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $low-contrast-theme: "true"
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorsectoplasmcolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/ectoplasm/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/ectoplasm/colors.scss       2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/ectoplasm/colors.scss 2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,11 +1,11 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@use "sass:color";
-
-$scheme-name: "ectoplasm";
</del><span class="cx" style="display: block; padding: 0 10px"> $base-color: #523f6d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$icon-color: #ece6f6;
-$highlight-color: #a3b745;
-$notification-color: #d46f15;
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$form-checked: $base-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "ectoplasm",
+       $base-color: $base-color,
+       $icon-color: #ece6f6,
+       $highlight-color: #a3b745,
+       $notification-color: #d46f15,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $form-checked: $base-color,
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorslightcolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/light/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/light/colors.scss   2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/light/colors.scss     2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,33 +1,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @use "sass:color";
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$scheme-name: "light";
-$base-color: #e5e5e5;
-$icon-color: #999;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$highlight-color: #04a4cc;
</ins><span class="cx" style="display: block; padding: 0 10px"> $text-color: #333;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$highlight-color: #04a4cc;
-$notification-color: #d64e07;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$menu-avatar-frame: #aaa;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$body-background: #f5f5f5;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "light",
+       $base-color: #e5e5e5,
+       $icon-color: #999,
+       $text-color: $text-color,
+       $highlight-color: $highlight-color,
+       $notification-color: #d64e07,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-highlight-text: #fff;
-$menu-highlight-icon: #ccc;
-$menu-highlight-background: #888;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $body-background: #f5f5f5,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-bubble-text: #fff;
-$menu-avatar-frame: #aaa;
-$menu-submenu-background: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $menu-highlight-text: #fff,
+       $menu-highlight-icon: #ccc,
+       $menu-highlight-background: #888,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-collapse-text: #777;
-$menu-collapse-focus-icon: #555;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $menu-bubble-text: #fff,
+       $menu-submenu-background: #fff,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$dashboard-accent-1: $highlight-color;
-$dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%);
-$dashboard-icon-background: $text-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $menu-collapse-text: #777,
+       $menu-collapse-focus-icon: #555,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $dashboard-accent-1: $highlight-color,
+       $dashboard-accent-2: color.adjust(color.adjust($highlight-color, $lightness: 7%), $saturation: -15%),
+       $dashboard-icon-background: $text-color
+);
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /* Override the theme filter highlight color for this scheme */
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-section.current,
</span><span class="cx" style="display: block; padding: 0 10px"> .theme-filter.current {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        border-bottom-color: $highlight-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-bottom-color: admin.$highlight-color;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadmincsscolorsmidnightcolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/midnight/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/midnight/colors.scss        2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/midnight/colors.scss  2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,10 +1,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @use "sass:color";
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$scheme-name: "midnight";
</del><span class="cx" style="display: block; padding: 0 10px"> $base-color: #363b3f;
</span><span class="cx" style="display: block; padding: 0 10px"> $highlight-color: #e14d43;
</span><span class="cx" style="display: block; padding: 0 10px"> $notification-color: #69a8bb;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$dashboard-accent-2: mix($base-color, $notification-color, 90%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "midnight",
+       $base-color: $base-color,
+       $highlight-color: $highlight-color,
+       $notification-color: $notification-color,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $dashboard-accent-2: color.mix($base-color, $notification-color, 90%),
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorsmoderncolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/modern/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/modern/colors.scss  2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/modern/colors.scss    2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,14 +1,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @use "sass:color";
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$scheme-name: "modern";
-$base-color: #1e1e1e;
</del><span class="cx" style="display: block; padding: 0 10px"> $highlight-color: #3858e9;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$menu-submenu-focus-text: #7b90ff;
-$notification-color: $highlight-color;
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$link: $highlight-color;
-$link-focus: color.adjust($highlight-color, $lightness: -10%);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "modern",
+       $base-color: #1e1e1e,
+       $highlight-color: #3858e9,
+       $menu-submenu-focus-text: #7b90ff,
+       $notification-color: $highlight-color,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$custom-welcome-panel: "false";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $link: $highlight-color,
+       $link-focus: color.adjust($highlight-color, $lightness: -10%),
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $custom-welcome-panel: "false"
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorsoceancolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/ocean/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/ocean/colors.scss   2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/ocean/colors.scss     2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,12 +1,12 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@use "sass:color";
-
-$scheme-name: "ocean";
</del><span class="cx" style="display: block; padding: 0 10px"> $base-color: #738e96;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$icon-color: #f2fcff;
-$highlight-color: #9ebaa0;
-$notification-color: #aa9d88;
-$low-contrast-theme: "true";
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$form-checked: $base-color;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+       $scheme-name: "ocean",
+       $base-color: $base-color,
+       $icon-color: #f2fcff,
+       $highlight-color: #9ebaa0,
+       $notification-color: #aa9d88,
+       $form-checked: $base-color,
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $low-contrast-theme: "true"
+);
</ins></span></pre></div>
<a id="trunksrcwpadmincsscolorssunrisecolorsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/colors/sunrise/colors.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/colors/sunrise/colors.scss 2025-01-16 20:48:57 UTC (rev 59655)
+++ trunk/src/wp-admin/css/colors/sunrise/colors.scss   2025-01-16 21:03:12 UTC (rev 59656)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,9 +1,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @use "sass:color";
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$scheme-name: "sunrise";
-$base-color: #cf4944;
</del><span class="cx" style="display: block; padding: 0 10px"> $highlight-color: #dd823b;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$notification-color: #ccaf0b;
-$menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%);
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@import "../_admin.scss";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@use "../_admin.scss" with (
+  $scheme-name: "sunrise",
+  $base-color: #cf4944,
+  $highlight-color: $highlight-color,
+  $notification-color: #ccaf0b,
+  $menu-submenu-focus-text: color.adjust($highlight-color, $lightness: 35%)
+);
</ins></span></pre>
</div>
</div>

</body>
</html>