fix(tokens): updated to the latest design tokens and fixed skeleton (#530)

Author: agliga

.changeset/mighty-peas-bathe.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+fix: updated to the latest tokens and fixed skeleton tokens

package-lock.json

@@ -53,7 +53,7 @@
     "@docsearch/css": "^4.4.0",
     "@docsearch/js": "^4.4.0",
     "@ebay/browserslist-config": "^2.13.0",
-    "@ebay/design-tokens": "^2.0.2",
+    "@ebay/design-tokens": "^2.2.2",
     "@ebay/skin": "^19",
     "@floating-ui/dom": "^1.7.4",
     "@marko-tags/subscribe": "npm:noist@^1.0.0",

package.json

@@ -137,18 +137,18 @@ div.skeleton__textbox:not(:last-child) {
 @media (prefers-reduced-motion: no-preference) {
     @keyframes on-primary {
         0% {
-            background-color: var(--color-loading-first);
+            background-color: var(--color-loading-on-primary-state-1);
         }
         to {
-            background-color: var(--color-loading-second);
+            background-color: var(--color-loading-on-primary-state-2);
         }
     }
     @keyframes on-secondary {
         0% {
-            background-color: var(--color-loading-on-secondary-first);
+            background-color: var(--color-loading-on-secondary-state-1);
         }
         to {
-            background-color: var(--color-loading-on-secondary-second);
+            background-color: var(--color-loading-on-secondary-state-2);
         }
     }
     .skeleton__avatar,

packages/skin/dist/skeleton/skeleton.css

@@ -125,6 +125,10 @@
         );
         --color-loading-fill-on-secondary: #353535;
         --color-loading-fill: #2d2d2d;
+        --color-loading-on-primary-state-1: var(--color-neutral-800);
+        --color-loading-on-primary-state-2: var(--color-neutral-700);
+        --color-loading-on-secondary-state-1: var(--color-neutral-700);
+        --color-loading-on-secondary-state-2: var(--color-neutral-600);
         --color-scrim-background: rgba(0, 0, 0, 0.64);
         --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
         --color-state-layer-focus: rgba(255, 255, 255, 0.08);