fix: Correct color for spinner background (#212)

warp-ds · Mar 27, 2024 · 5720630 · 5720630
1 parent 56e3c68
commit 5720630
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/_rules/animations.js b/src/_rules/animations.js
@@ -6,7 +6,7 @@ const inProgress = 'background-image:linear-gradient(135deg,rgba(0,0,0,.05) 25%,
 const keyFrames = '@keyframes animate-inprogress {0% {background-position: 0 0;}to {background-position: 60px 0;}}';
 
 /*----SPINNER----*/
-const spinner = '--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid rgba(var(--w-s-rgb-border-primary),.5);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;';
+const spinner = '--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid rgba(var(--w-s-rgb-border-primary-subtle),.5);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;';
 const spinnerPseudo = `content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);`;
 const spinnerBefore = 'left:0;';
 const spinnerAfter = 'right:0;';

diff --git a/test/animations.js b/test/animations.js
@@ -16,6 +16,6 @@ test('animate spinner', async ({ uno }) => {
   const { css } = await uno.generate(classes);
   expect(css).toMatchInlineSnapshot(`
     "/* layer: default */
-    .animate-spinner{--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid rgba(var(--w-s-rgb-border-primary),.5);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;}.animate-spinner::before,.animate-spinner::after{content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);}.animate-spinner::after{right:0;}.animate-spinner::before{left:0;}@keyframes animate-spinner {to{transform:rotate(359deg);}}"
+    .animate-spinner{--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid rgba(var(--w-s-rgb-border-primary-subtle),.5);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;}.animate-spinner::before,.animate-spinner::after{content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);}.animate-spinner::after{right:0;}.animate-spinner::before{left:0;}@keyframes animate-spinner {to{transform:rotate(359deg);}}"
   `);
 });