From 73977f99101dbb8a043138f118e09a5f20a18948 Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Mon, 23 Feb 2026 15:35:27 -0800 Subject: [PATCH] fix(tokens): updated to the latest design tokens and fixed skeleton --- .changeset/mighty-peas-bathe.md | 5 ++ package-lock.json | 52 +++---------------- package.json | 2 +- packages/skin/dist/skeleton/skeleton.css | 8 +-- packages/skin/dist/tokens/evo-dark-class.css | 4 ++ packages/skin/dist/tokens/evo-dark.css | 4 ++ packages/skin/dist/tokens/evo-light-class.css | 4 ++ packages/skin/dist/tokens/evo-light.css | 4 ++ .../skin/dist/tokens/evo-live-dark-class.css | 4 ++ packages/skin/dist/tokens/evo-live-dark.css | 4 ++ .../skin/dist/tokens/evo-live-light-class.css | 4 ++ packages/skin/dist/tokens/evo-live-light.css | 4 ++ packages/skin/src/sass/skeleton/skeleton.scss | 8 +-- 13 files changed, 52 insertions(+), 55 deletions(-) create mode 100644 .changeset/mighty-peas-bathe.md diff --git a/.changeset/mighty-peas-bathe.md b/.changeset/mighty-peas-bathe.md new file mode 100644 index 0000000000..a523b2c8c8 --- /dev/null +++ b/.changeset/mighty-peas-bathe.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": patch +--- + +fix: updated to the latest tokens and fixed skeleton tokens diff --git a/package-lock.json b/package-lock.json index 8984a5a26e..733292de0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,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", @@ -294,7 +294,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -2133,7 +2132,6 @@ "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -2969,7 +2967,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=20.19.0" }, @@ -3010,7 +3007,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=20.19.0" } @@ -3071,9 +3067,9 @@ "license": "MIT" }, "node_modules/@ebay/design-tokens": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@ebay/design-tokens/-/design-tokens-2.2.1.tgz", - "integrity": "sha512-eDNCwnsZ/n0WtZ7WowJAzEeUna+3QPvQRbXxj2MyHH60eYD1ca1hlH0tG099EdnrOQ90Tlesad6DFmlC39BiMQ==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@ebay/design-tokens/-/design-tokens-2.2.2.tgz", + "integrity": "sha512-vwYxLsvxs/ipTfaE3QV2H7HibSFdEJXCrLCCoQIZYSpBFqKzkFD20LvP4ktkCY3iiMPFjWJpAVRio12D+jUp6g==", "dev": true, "license": "MIT", "dependencies": { @@ -4676,7 +4672,6 @@ "resolved": "https://registry.npmjs.org/@marko/compiler/-/compiler-5.39.50.tgz", "integrity": "sha512-vioiV1ViXvyztd7Yd4kmmM8lxvHMv5T8WusfGLKudRKOWlZFj4gOYnnieYbUPVKv82/P4CSi8iZWb0HTqW2yHg==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/core": "^7.29.0", @@ -4728,7 +4723,6 @@ "integrity": "sha512-BxsS7EnvsFeHK0O64y6wSKk+8Dfe3c1OKfMbmYd4+NpxgUw6dyY20iTttp+6RZWmoUYXF1VBBmRxiFLAOZpfyA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@marko/run-explorer": "^2.0.1", "@marko/vite": "^5.4.2", @@ -4935,7 +4929,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -4959,7 +4952,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -5568,7 +5560,6 @@ "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/auth-token": "^6.0.0", "@octokit/graphql": "^9.0.3", @@ -7513,7 +7504,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -7826,7 +7816,6 @@ "integrity": "sha512-CPrnr8voK8vC6eEtyRzvMpgp3VyVRhgclonE7qYi6P9sXwYb59ucfrnmFBTaP0yUi8Gk4yZg/LlTJULGxvTNsg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -7844,7 +7833,6 @@ "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -7855,7 +7843,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -7926,7 +7913,6 @@ "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.54.0", "@typescript-eslint/types": "8.54.0", @@ -8172,7 +8158,6 @@ "integrity": "sha512-gVQqh7paBz3gC+ZdcCmNSWJMk70IUjDeVqi+5m5vYpEHsIwRgw3Y545jljtajhkekIpIp5Gg8oK7bctgY0E2Ng==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/mocker": "4.0.18", "@vitest/utils": "4.0.18", @@ -8553,7 +8538,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -9478,7 +9462,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -9976,8 +9959,7 @@ "resolved": "https://registry.npmjs.org/cldr-core/-/cldr-core-48.1.0.tgz", "integrity": "sha512-Br9lHQHRhFVyQ/4dY2AnTOuJVEwzDSFR9tE4EzaZxdtux4BFZ4V6oY0SiSAe/8H9+CJ6njpBiPJdDv+vdXnvfA==", "dev": true, - "license": "Unicode-3.0", - "peer": true + "license": "Unicode-3.0" }, "node_modules/cldr-dates-full": { "version": "48.1.0", @@ -10649,7 +10631,6 @@ "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -12199,7 +12180,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -12321,7 +12301,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -12389,7 +12368,6 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", - "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -16399,7 +16377,6 @@ "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz", "integrity": "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==", "license": "BSD-3-Clause", - "peer": true, "dependencies": { "@lit/reactive-element": "^2.1.0", "lit-element": "^4.2.0", @@ -19248,7 +19225,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -20014,7 +19990,6 @@ "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -20102,7 +20077,6 @@ "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -20447,7 +20421,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -20502,7 +20475,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -21297,7 +21269,6 @@ "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -22371,7 +22342,6 @@ "integrity": "sha512-LFKSuZyF6EW2/Kkl5d7CvqgwhXXfuWv+aLBuoc616boLKJ3mxXuea+GxIgfk02NEyTKctJ0QsnSh5pAomf6Qkg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^2.0.1", @@ -22824,7 +22794,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -23094,7 +23063,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -23118,7 +23086,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -23711,8 +23678,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tsx": { "version": "4.21.0", @@ -23720,7 +23686,6 @@ "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "~0.27.0", "get-tsconfig": "^4.7.5" @@ -24383,7 +24348,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -24930,7 +24894,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -25742,7 +25705,6 @@ "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.18", "@vitest/mocker": "4.0.18", @@ -26520,7 +26482,6 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } @@ -26623,7 +26584,6 @@ "resolved": "https://registry.npmjs.org/marko/-/marko-5.38.20.tgz", "integrity": "sha512-bsiabDqyXP9wmllhAeBJBv2RsL1nEC8mxBA+fan8ykb5bxn/D3HHBlWBPA/mGgyup/1Xr9h6AhBfBMv0wUTKOw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.28.6", "@marko/compiler": "^5.39.50", diff --git a/package.json b/package.json index b1f28fae71..51a28ad15e 100644 --- a/package.json +++ b/package.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", diff --git a/packages/skin/dist/skeleton/skeleton.css b/packages/skin/dist/skeleton/skeleton.css index e26d61941a..d7c23d8e28 100644 --- a/packages/skin/dist/skeleton/skeleton.css +++ b/packages/skin/dist/skeleton/skeleton.css @@ -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, diff --git a/packages/skin/dist/tokens/evo-dark-class.css b/packages/skin/dist/tokens/evo-dark-class.css index a907d73328..055b423716 100644 --- a/packages/skin/dist/tokens/evo-dark-class.css +++ b/packages/skin/dist/tokens/evo-dark-class.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); diff --git a/packages/skin/dist/tokens/evo-dark.css b/packages/skin/dist/tokens/evo-dark.css index c997dd0fc7..c5056af68c 100644 --- a/packages/skin/dist/tokens/evo-dark.css +++ b/packages/skin/dist/tokens/evo-dark.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); diff --git a/packages/skin/dist/tokens/evo-light-class.css b/packages/skin/dist/tokens/evo-light-class.css index dbb91c0717..3c8e62548f 100644 --- a/packages/skin/dist/tokens/evo-light-class.css +++ b/packages/skin/dist/tokens/evo-light-class.css @@ -124,6 +124,10 @@ ); --color-loading-fill-on-secondary: #e4e4e4; --color-loading-fill: #ededed; + --color-loading-on-primary-state-1: var(--color-neutral-200); + --color-loading-on-primary-state-2: var(--color-neutral-300); + --color-loading-on-secondary-state-1: var(--color-neutral-300); + --color-loading-on-secondary-state-2: var(--color-neutral-400); --color-scrim-background: rgba(0, 0, 0, 0.3); --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12); --color-state-layer-focus: rgba(0, 0, 0, 0.04); diff --git a/packages/skin/dist/tokens/evo-light.css b/packages/skin/dist/tokens/evo-light.css index d0b15d96a4..a51354e6bc 100644 --- a/packages/skin/dist/tokens/evo-light.css +++ b/packages/skin/dist/tokens/evo-light.css @@ -124,6 +124,10 @@ ); --color-loading-fill-on-secondary: #e4e4e4; --color-loading-fill: #ededed; + --color-loading-on-primary-state-1: var(--color-neutral-200); + --color-loading-on-primary-state-2: var(--color-neutral-300); + --color-loading-on-secondary-state-1: var(--color-neutral-300); + --color-loading-on-secondary-state-2: var(--color-neutral-400); --color-scrim-background: rgba(0, 0, 0, 0.3); --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12); --color-state-layer-focus: rgba(0, 0, 0, 0.04); diff --git a/packages/skin/dist/tokens/evo-live-dark-class.css b/packages/skin/dist/tokens/evo-live-dark-class.css index caf60ba1d8..750fe24475 100644 --- a/packages/skin/dist/tokens/evo-live-dark-class.css +++ b/packages/skin/dist/tokens/evo-live-dark-class.css @@ -124,6 +124,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); diff --git a/packages/skin/dist/tokens/evo-live-dark.css b/packages/skin/dist/tokens/evo-live-dark.css index 1e15048137..9f86436c1c 100644 --- a/packages/skin/dist/tokens/evo-live-dark.css +++ b/packages/skin/dist/tokens/evo-live-dark.css @@ -124,6 +124,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); diff --git a/packages/skin/dist/tokens/evo-live-light-class.css b/packages/skin/dist/tokens/evo-live-light-class.css index 2a48b687eb..c33bc9a3a4 100644 --- a/packages/skin/dist/tokens/evo-live-light-class.css +++ b/packages/skin/dist/tokens/evo-live-light-class.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); diff --git a/packages/skin/dist/tokens/evo-live-light.css b/packages/skin/dist/tokens/evo-live-light.css index 4124d2f7c8..65235c108f 100644 --- a/packages/skin/dist/tokens/evo-live-light.css +++ b/packages/skin/dist/tokens/evo-live-light.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); diff --git a/packages/skin/src/sass/skeleton/skeleton.scss b/packages/skin/src/sass/skeleton/skeleton.scss index 04397cb8e6..eabdec49f4 100644 --- a/packages/skin/src/sass/skeleton/skeleton.scss +++ b/packages/skin/src/sass/skeleton/skeleton.scss @@ -190,19 +190,19 @@ 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); } 100% { - 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); } 100% { - background-color: var(--color-loading-on-secondary-second); + background-color: var(--color-loading-on-secondary-state-2); } }