diff --git a/.gitignore b/.gitignore index b7a52c8f57..fa02727338 100644 --- a/.gitignore +++ b/.gitignore @@ -64,7 +64,6 @@ web_modules/ .node_repl_history # Output of 'npm pack' -*.tgz # Allow pandora-book offline package !documents/tools/*.tgz @@ -130,6 +129,8 @@ packages/solar-theme/charcoal packages/solar-theme/pearl packages/halo-theme/dark packages/halo-theme/light +packages/ds-theme/dark +packages/ds-theme/light # Doc custom-elements.json @@ -148,4 +149,4 @@ packages/**/node_modules certs # nx -.nx \ No newline at end of file +.nx diff --git a/documents/src/pages/elements/email-field.md b/documents/src/pages/elements/email-field.md index d2a86412ac..15cbbd51f3 100644 --- a/documents/src/pages/elements/email-field.md +++ b/documents/src/pages/elements/email-field.md @@ -129,8 +129,11 @@ emailField.addEventListener("input", () => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-email-field { width: 275px; @@ -217,8 +220,11 @@ emailField.addEventListener("input", () => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-email-field { width: 275px; @@ -305,6 +311,7 @@ save.addEventListener("tap", () => { responseText.innerHTML = "Full name & email must be provided together"; } else if (email.value && !/^\w+@mail.com$/.test(email.value)) { email.error = true; + responseText.classList.add('error'); responseText.innerHTML = "Email must be valid and end with @mail.com"; } else { responseText.innerHTML = "Saved"; @@ -323,8 +330,11 @@ email.addEventListener("input", inputHandler); ``` ```css -.error { - color: #d94255; +html[prefers-color-scheme="light"] .error { + color:#b70300; +} +html[prefers-color-scheme="dark"] .error { + color:#ff5540; } ef-text-field, ef-email-field { width: 250px; diff --git a/documents/src/pages/elements/number-field.md b/documents/src/pages/elements/number-field.md index 68947f280d..2f6974d58f 100644 --- a/documents/src/pages/elements/number-field.md +++ b/documents/src/pages/elements/number-field.md @@ -144,6 +144,14 @@ numberField.addEventListener("input", () => { } }); ``` +```css +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; +} +``` ```html { ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-number-field { width: 250px; diff --git a/documents/src/pages/elements/password-field.md b/documents/src/pages/elements/password-field.md index 65e98e8bd0..fcce741e80 100644 --- a/documents/src/pages/elements/password-field.md +++ b/documents/src/pages/elements/password-field.md @@ -51,8 +51,11 @@ label { ul { padding-inline-start: 24px; } -#password-error, #pattern-error { - color: #d94255; +html[prefers-color-scheme="light"] #password-error, #pattern-error { + color:#b70300; +} +html[prefers-color-scheme="dark"] #password-error, #pattern-error{ + color:#ff5540; } ``` ```html @@ -188,8 +191,11 @@ passwordField.addEventListener("input", () => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-password-field { width: 200px; @@ -276,8 +282,11 @@ passwordField.addEventListener("input", (event) => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-password-field { width: 275px; @@ -387,8 +396,11 @@ confirmPassword.addEventListener("input", inputHandler); ``` ```css -.error { - color: #d94255; +html[prefers-color-scheme="light"] .error { + color:#b70300; +} +html[prefers-color-scheme="dark"] .error { + color:#ff5540; } ef-password-field { width: 250px; diff --git a/documents/src/pages/elements/search-field.md b/documents/src/pages/elements/search-field.md index 68e649c1da..34cd8c5a0f 100644 --- a/documents/src/pages/elements/search-field.md +++ b/documents/src/pages/elements/search-field.md @@ -117,8 +117,11 @@ searchField.addEventListener("input", () => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-search-field { width: 200px; @@ -205,8 +208,11 @@ searchField.addEventListener("input", () => { }); ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-search-field { width: 280px; @@ -303,8 +309,11 @@ searchField.addEventListener("input", () => { ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-search-field { width: 250px; diff --git a/documents/src/pages/elements/text-field.md b/documents/src/pages/elements/text-field.md index 5cfccdbef4..519f262367 100644 --- a/documents/src/pages/elements/text-field.md +++ b/documents/src/pages/elements/text-field.md @@ -118,8 +118,11 @@ textField.addEventListener("input", () => { ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-text-field { width: 200px; @@ -212,8 +215,11 @@ textField.addEventListener("input", () => { ``` ```css -#error-text { - color:#d94255; +html[prefers-color-scheme="light"] #error-text { + color:#b70300; +} +html[prefers-color-scheme="dark"] #error-text { + color:#ff5540; } ef-text-field { width: 300px; @@ -320,8 +326,11 @@ lastName.addEventListener("input", inputHandler); ``` ```css -.error { - color: #d94255; +html[prefers-color-scheme="light"] .error { + color:#b70300; +} +html[prefers-color-scheme="dark"] .error { + color:#ff5540; } ef-text-field { width: 300px; diff --git a/package-lock.json b/package-lock.json index 7096016f32..f633057aa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,37 @@ "npm": ">=10.0.0" } }, + "documents/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "documents/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "documents/node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -98,89 +129,55 @@ "@esbuild/win32-x64": "0.18.20" } }, - "node_modules/@aashutoshrathi/word-wrap": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", - "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@babel/code-frame": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", - "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", + "documents/node_modules/pandora-book": { + "version": "3.0.0-74", + "resolved": "file:documents/tools/pandora-book-3.0.0-74.tgz", + "integrity": "sha512-t3wP2dn2obJedsm93I3PAX0G8Z1FtiTRc8lLuxbx9yT06xtUjKhWDFR+kAsWk8FXxpbKWujU7Gp0Xkft4ZsciA==", + "dev": true, "dependencies": { - "@babel/highlight": "^7.23.4", - "chalk": "^2.4.2" + "chalk": "^4.1.1", + "yargs": "^17.0.1" }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/code-frame/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dependencies": { - "color-convert": "^1.9.0" + "bin": { + "pandora": "bin/cli.js" }, "engines": { - "node": ">=4" + "node": ">=13.14.0" } }, - "node_modules/@babel/code-frame/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "documents/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" + "has-flag": "^4.0.0" }, "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/code-frame/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, - "node_modules/@babel/code-frame/node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "engines": { - "node": ">=0.8.0" + "node": ">=8" } }, - "node_modules/@babel/code-frame/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "node_modules/@aashutoshrathi/word-wrap": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", + "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", + "peer": true, "engines": { - "node": ">=4" + "node": ">=0.10.0" } }, - "node_modules/@babel/code-frame/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/@babel/code-frame": { + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", + "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "@babel/helper-validator-identifier": "^7.25.9", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" }, "engines": { - "node": ">=4" + "node": ">=6.9.0" } }, "node_modules/@babel/generator": { @@ -295,109 +292,52 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", - "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", + "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "license": "MIT", "peer": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", - "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0" - }, + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", + "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "license": "MIT", "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/highlight/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "node_modules/@babel/parser": { + "version": "7.26.2", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", + "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", + "license": "MIT", + "peer": true, "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" + "@babel/types": "^7.26.0" }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/highlight/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, - "node_modules/@babel/highlight/node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/@babel/highlight/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dependencies": { - "has-flag": "^3.0.0" + "bin": { + "parser": "bin/babel-parser.js" }, "engines": { - "node": ">=4" + "node": ">=6.0.0" } }, - "node_modules/@babel/parser": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", - "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", + "node_modules/@babel/parser/node_modules/@babel/types": { + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", + "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", + "license": "MIT", "peer": true, - "bin": { - "parser": "bin/babel-parser.js" + "dependencies": { + "@babel/helper-string-parser": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9" }, "engines": { - "node": ">=6.0.0" + "node": ">=6.9.0" } }, "node_modules/@babel/runtime": { @@ -412,28 +352,29 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", - "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz", + "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==", + "license": "MIT", "peer": true, "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.25.9", + "@babel/parser": "^7.25.9", + "@babel/types": "^7.25.9" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/template/node_modules/@babel/types": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", - "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz", + "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==", + "license": "MIT", "peer": true, "dependencies": { - "@babel/helper-string-parser": "^7.23.4", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.25.9", + "@babel/helper-validator-identifier": "^7.25.9" }, "engines": { "node": ">=6.9.0" @@ -1626,19 +1567,31 @@ } }, "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", - "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "license": "MIT", "peer": true, "dependencies": { - "@jridgewell/set-array": "^1.0.1", + "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/trace-mapping": "^0.3.24" }, "engines": { "node": ">=6.0.0" } }, + "node_modules/@jridgewell/gen-mapping/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", @@ -1648,14 +1601,41 @@ } }, "node_modules/@jridgewell/set-array": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", - "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "license": "MIT", "peer": true, "engines": { "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", + "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, + "node_modules/@jridgewell/source-map/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", @@ -1665,6 +1645,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -2930,6 +2911,10 @@ "resolved": "documents", "link": true }, + "node_modules/@refinitiv-ui/ds-theme": { + "resolved": "packages/ds-theme", + "link": true + }, "node_modules/@refinitiv-ui/elemental-theme": { "resolved": "packages/elemental-theme", "link": true @@ -5095,9 +5080,10 @@ } }, "node_modules/acorn": { - "version": "8.11.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", - "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", + "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "license": "MIT", "bin": { "acorn": "bin/acorn" }, @@ -5970,9 +5956,9 @@ "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==" }, "node_modules/browserslist": { - "version": "4.22.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz", - "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==", + "version": "4.24.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz", + "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==", "funding": [ { "type": "opencollective", @@ -5987,11 +5973,12 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001565", - "electron-to-chromium": "^1.4.601", - "node-releases": "^2.0.14", - "update-browserslist-db": "^1.0.13" + "caniuse-lite": "^1.0.30001669", + "electron-to-chromium": "^1.5.41", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" @@ -6328,9 +6315,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001636", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", - "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", + "version": "1.0.30001669", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz", + "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==", "funding": [ { "type": "opencollective", @@ -6344,7 +6331,8 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ] + ], + "license": "CC-BY-4.0" }, "node_modules/chai": { "version": "4.4.0", @@ -8665,9 +8653,10 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.625", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.625.tgz", - "integrity": "sha512-DENMhh3MFgaPDoXWrVIqSPInQoLImywfCwrSmVl3cf9QHzoZSiutHwGaB/Ql3VkqcQV30rzgdM+BjKqBAJxo5Q==" + "version": "1.5.45", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.45.tgz", + "integrity": "sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==", + "license": "ISC" }, "node_modules/element-framework-snippets": { "resolved": "vscode-extensions/snippets", @@ -9292,9 +9281,10 @@ } }, "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -11860,6 +11850,15 @@ "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", "dev": true }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -12955,7 +12954,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "license": "MIT" }, "node_modules/js-yaml": { "version": "4.1.0", @@ -16043,9 +16043,10 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", - "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==", + "license": "MIT" }, "node_modules/nopt": { "version": "6.0.0", @@ -17552,66 +17553,6 @@ "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", "dev": true }, - "node_modules/pandora-book": { - "version": "3.0.0-74", - "resolved": "file:documents/tools/pandora-book-3.0.0-74.tgz", - "integrity": "sha512-t3wP2dn2obJedsm93I3PAX0G8Z1FtiTRc8lLuxbx9yT06xtUjKhWDFR+kAsWk8FXxpbKWujU7Gp0Xkft4ZsciA==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "chalk": "^4.1.1", - "yargs": "^17.0.1" - }, - "bin": { - "pandora": "bin/cli.js" - }, - "engines": { - "node": ">=13.14.0" - } - }, - "node_modules/pandora-book/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/pandora-book/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/pandora-book/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -19381,6 +19322,60 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.79.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.4.tgz", + "integrity": "sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", @@ -20038,6 +20033,31 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/source-map-support/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/spacetrim": { "version": "0.11.59", "resolved": "https://registry.npmjs.org/spacetrim/-/spacetrim-0.11.59.tgz", @@ -20617,6 +20637,36 @@ "rimraf": "bin.js" } }, + "node_modules/terser": { + "version": "5.36.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz", + "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==", + "dev": true, + "license": "BSD-2-Clause", + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/text-extensions": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz", @@ -21398,9 +21448,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.13", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", - "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz", + "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==", "funding": [ { "type": "opencollective", @@ -21415,9 +21465,10 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.2.0", + "picocolors": "^1.1.0" }, "bin": { "update-browserslist-db": "cli.js" @@ -21560,10 +21611,11 @@ } }, "node_modules/vite": { - "version": "5.4.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz", - "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==", + "version": "5.4.10", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz", + "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -23096,6 +23148,17 @@ "@refinitiv-ui/core": "^7.5.1" } }, + "packages/ds-theme": { + "name": "@refinitiv-ui/ds-theme", + "version": "7.0.0", + "license": "SEE LICENSE IN LICENSE", + "dependencies": { + "@refinitiv-ui/halo-theme": "^7.5.1" + }, + "devDependencies": { + "@refinitiv-ui/theme-compiler": "^7.1.4" + } + }, "packages/elemental-theme": { "name": "@refinitiv-ui/elemental-theme", "version": "7.5.1", @@ -23110,6 +23173,7 @@ "license": "Apache-2.0", "dependencies": { "@lit-labs/context": "^0.3.1", + "@refinitiv-ui/ds-theme": "^7.0.0", "@refinitiv-ui/halo-theme": "^7.5.2", "@refinitiv-ui/solar-theme": "^7.3.3", "chart.js": "^4.4.2", @@ -23209,6 +23273,22 @@ "@refinitiv-ui/theme-compiler": "^7.1.4" } }, + "packages/test-app": { + "name": "efv7-test-app", + "version": "0.0.0", + "extraneous": true, + "devDependencies": { + "@babel/core": "^7.25.8", + "@babel/preset-env": "^7.25.8", + "@refinitiv-ui/ds-theme": "7.0.0", + "@refinitiv-ui/elements": "^7.13.5", + "babel-loader": "^9.2.1", + "prettier": "^3.3.3", + "vite": "^5.4.8", + "webpack": "^5.95.0", + "webpack-cli": "^5.1.4" + } + }, "packages/test-helpers": { "name": "@refinitiv-ui/test-helpers", "version": "7.1.2", diff --git a/packages/demo-block/demo.css b/packages/demo-block/demo.css index 65cb5ed03a..10547d6be5 100644 --- a/packages/demo-block/demo.css +++ b/packages/demo-block/demo.css @@ -2,7 +2,8 @@ html { font-family: Arial, Helvetica, sans-serif; background: #515c61; height: 100%; - --demo-block-background: var(--color-scheme-ticktext, 'transparent'); + /* --color-scheme-background-color is available in DS Theme only*/ + --demo-block-background: var(--color-scheme-background-color, var(--color-scheme-ticktext, 'transparent')); } body { diff --git a/packages/demo-block/src/demo-block.ts b/packages/demo-block/src/demo-block.ts index b2476da34e..9b77ffc287 100644 --- a/packages/demo-block/src/demo-block.ts +++ b/packages/demo-block/src/demo-block.ts @@ -3,7 +3,7 @@ import { BasicElement, CSSResultGroup, TemplateResult, css, html } from '@refini import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js'; import { property } from '@refinitiv-ui/core/decorators/property.js'; -const Themes = ['halo/light', 'halo/dark', 'solar/pearl', 'solar/charcoal']; +const Themes = ['ds/light', 'ds/dark', 'halo/light', 'halo/dark', 'solar/pearl', 'solar/charcoal']; const url = new URL(window.location as unknown as string); diff --git a/packages/ds-theme/.npmignore b/packages/ds-theme/.npmignore new file mode 100644 index 0000000000..b1a0fb08ec --- /dev/null +++ b/packages/ds-theme/.npmignore @@ -0,0 +1,38 @@ +## miscellaneous +.editorconfig +.eslintignore +.eslintrc +tsconfig.* +.gitlab/ +.gitlab-ci.yml +*.lock +*.log + +## editors +/.idea +/.vscode + +## system files +.DS_Store +._.DS_Store + +## npm +/node_modules/ +/npm-debug.log +*.lock +*.log + +## testing +/test/ +/__test__/ +/coverage/ + +## temp folders +/.tmp/ + +# build +/_site/ +/dist/ + +# demo +/__demo__/ diff --git a/packages/ds-theme/LICENSE b/packages/ds-theme/LICENSE new file mode 100644 index 0000000000..0a0ad7eb9c --- /dev/null +++ b/packages/ds-theme/LICENSE @@ -0,0 +1,13 @@ +Copyright (C) 2024 LSEG. All rights reserved. + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + +4. The font "Proxima Vara" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text diff --git a/packages/ds-theme/README.md b/packages/ds-theme/README.md new file mode 100644 index 0000000000..8cca69d2b3 --- /dev/null +++ b/packages/ds-theme/README.md @@ -0,0 +1 @@ +# Design System Theme diff --git a/packages/ds-theme/exports/all.less b/packages/ds-theme/exports/all.less new file mode 100644 index 0000000000..0680a49508 --- /dev/null +++ b/packages/ds-theme/exports/all.less @@ -0,0 +1,2 @@ +@import 'native'; +@import 'custom'; diff --git a/packages/ds-theme/exports/bare.less b/packages/ds-theme/exports/bare.less new file mode 100644 index 0000000000..fe8d8e6c0a --- /dev/null +++ b/packages/ds-theme/exports/bare.less @@ -0,0 +1,5 @@ +@import (reference) '@refinitiv-ui/halo-theme/exports/bare'; +@import (reference) '../src/defaults'; + +// Modify theme based on variant +@import (reference, optional) '../src/variants/@{variant}/variables'; diff --git a/packages/ds-theme/exports/custom.less b/packages/ds-theme/exports/custom.less new file mode 100644 index 0000000000..3700897e78 --- /dev/null +++ b/packages/ds-theme/exports/custom.less @@ -0,0 +1,3 @@ +@import '@refinitiv-ui/halo-theme/exports/custom'; +@import 'elements:../src/custom-elements/*'; +@import 'bare'; diff --git a/packages/ds-theme/exports/native.less b/packages/ds-theme/exports/native.less new file mode 100644 index 0000000000..640ce8a414 --- /dev/null +++ b/packages/ds-theme/exports/native.less @@ -0,0 +1,3 @@ +@import '@refinitiv-ui/halo-theme/exports/native'; +@import 'elements:../src/native-elements/*'; +@import 'bare'; diff --git a/packages/ds-theme/index.less b/packages/ds-theme/index.less new file mode 100644 index 0000000000..8f24f63da2 --- /dev/null +++ b/packages/ds-theme/index.less @@ -0,0 +1,13 @@ +// Important! you should not need to modify this file +// first, you need to inherit halo theme +@import '@refinitiv-ui/halo-theme/exports/all'; + +// include theme of all element framework element and native styles +@import 'elements:src/{native,custom}-elements/*'; + +// include additional colour palette that you define +@import (reference) 'src/colors'; +@import (reference) 'src/variables'; + +// include variables from all variants +@import (reference) 'src/variants/@{variant}/variables'; diff --git a/packages/ds-theme/package.json b/packages/ds-theme/package.json new file mode 100644 index 0000000000..bd9f910284 --- /dev/null +++ b/packages/ds-theme/package.json @@ -0,0 +1,36 @@ +{ + "name": "@refinitiv-ui/ds-theme", + "version": "7.0.0", + "description": "Design System theme for Element Framework Components", + "author": "LSEG", + "license": "SEE LICENSE IN LICENSE", + "type": "module", + "main": "index.less", + "repository": { + "type": "git", + "url": "git@github.com:Refinitiv/refinitiv-ui.git", + "directory": "packages/ds-theme" + }, + "files": [ + "*", + "!.*" + ], + "scripts": { + "build:light": "theme-compiler light --variant=light --registration=event", + "build:dark": "theme-compiler dark --variant=dark --registration=event", + "build": "npm run build:light && npm run build:dark && node ../../scripts/release/theme-extractor.js ../elements", + "build:prod": "npm run build", + "watch": "chokidar \"**/*.less\" --command \"npm run build\" --debounce=5000", + "prepack": "npm run version", + "version": "node ../../scripts/version/index.js" + }, + "devDependencies": { + "@refinitiv-ui/theme-compiler": "^7.1.4" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@refinitiv-ui/halo-theme": "^7.5.1" + } +} diff --git a/packages/ds-theme/src/colors.less b/packages/ds-theme/src/colors.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/ds-theme/src/custom-elements/ef-accordion.less b/packages/ds-theme/src/custom-elements/ef-accordion.less new file mode 100644 index 0000000000..967b0f6254 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-accordion.less @@ -0,0 +1,10 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-accordion'; + +:host { + &:extend(:host all); + border-radius: @comp-accordion-container-radius-md; + + ::slotted(ef-collapse:not(:last-child):not([expanded])) { + border-bottom: 1px solid @comp-accordion-item-header-container-color-border-divider-enabled; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-appstate-bar.less b/packages/ds-theme/src/custom-elements/ef-appstate-bar.less new file mode 100644 index 0000000000..52679418a2 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-appstate-bar.less @@ -0,0 +1,38 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-appstate-bar'; + +:host { + --heading-text-color: @cont-color-status-fg-on-neutral-base; + --heading-background-color: @cont-color-status-bg-neutral-base; + --text-color: @cont-color-common-fg-generic-bold; + --background-color: @cont-color-common-container-surface-on-layer-1-minimal; + --border-color: @cont-color-common-container-surface-on-layer-1-moderate; + + &[state='info'] { + --heading-background-color: @cont-color-status-bg-info-base; + } + + &[state='highlight'] { + --heading-background-color: @cont-color-common-container-primary-base; + } + + [part='heading'] { + text-transform: none; + font-weight: @core-typography-font-weight-semi-bold; + } + + [part='close'] { + stroke-width: unset; + } + + /** + * This style affect to children element no nested, which is limitation of ::slotted selector + * to make the style affect to nested elements we must implement in the global scope + */ + ::slotted(a), + ::slotted(a:visited), + ::slotted(a:hover), + ::slotted(a:focus) { + color: @cont-color-common-fg-primary-moderate !important; + text-decoration: underline !important; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-autosuggest.less b/packages/ds-theme/src/custom-elements/ef-autosuggest.less new file mode 100644 index 0000000000..db79c3a36d --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-autosuggest.less @@ -0,0 +1,17 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-autosuggest'; +@import '../native-elements/kbd'; + +:host { + border-radius: @comp-menu-container-radius; + border: 1px solid @comp-menu-container-color-border; + + [part='content'] { + ::slotted(ef-item:not([part='more-results']):not(:first-child)) { + box-shadow: none; + } + ::slotted(ef-item:not([part='more-results']):focus), + ::slotted(ef-item:not([part='more-results'])[highlighted]) { + background-color: @comp-menu-item-container-color-bg-single-hover; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-button-bar.less b/packages/ds-theme/src/custom-elements/ef-button-bar.less new file mode 100644 index 0000000000..c6859c28dd --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-button-bar.less @@ -0,0 +1,48 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-button-bar'; + +:host { + --left-radius: @comp-button-container-radius-md; + --right-radius: @comp-button-container-radius-md; + + ::slotted(ef-button:not(:first-child)) { + margin-left: inherit; + } + + ::slotted(ef-button:not(:first-child):not([disabled])) { + margin-left: -@button-border-width; + } + + // using default border color when hover ef-button + ::slotted(ef-button:not(:focus):hover), + ::slotted(ef-button:not(:focus)[active][toggles]:hover), + ::slotted(ef-button[active][toggles]) { + border-color: @button-border-color; + } + + ::slotted(ef-button-bar:not(:last-child)) { + --right-radius: 0; + } + + ::slotted(ef-button-bar:last-child) { + --left-radius: 0; + --right-radius: inherit; + } + + ::slotted(ef-button-bar:not(:first-child):not(:last-child)) { + --left-radius: 0; + --right-radius: 0; + } + + ::slotted(ef-button) { + border-radius: unset; + border-top-left-radius: var(--left-radius); + border-bottom-left-radius: var(--left-radius); + border-top-right-radius: var(--right-radius); + border-bottom-right-radius: var(--right-radius); + } + + ::slotted(ef-button:not(:last-child)) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-button.less b/packages/ds-theme/src/custom-elements/ef-button.less new file mode 100644 index 0000000000..d35f99aaff --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-button.less @@ -0,0 +1,116 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-button'; + +// TODO: Need to double check states that @comp cannot be used + +:host { + &:extend(:host all); + + &[toggles]:hover:not(:focus) { + color: @comp-toggle-button-label-color-fg-neutral-hover; + background-color: @comp-toggle-button-container-color-bg-neutral-hover; + border-color: @comp-toggle-button-container-color-border-neutral-hover; + box-shadow: @comp-toggle-button-container-elevation-neutral-hover; + } + + @media (pointer: fine) { + &[toggles][active]:hover:not(:focus) { + border-color: @comp-toggle-button-container-color-border-neutral-checked-hover; + } + } + + &[toggles][active]:hover { + color: @comp-toggle-button-label-color-fg-neutral-checked-hover; + background-color: @comp-toggle-button-container-color-bg-neutral-checked-hover; + border-color: @comp-toggle-button-container-color-border-neutral-checked-hover; + box-shadow: @comp-toggle-button-container-elevation-neutral-checked-hover; + } + &[toggles][active][focused='visible'] { + color: @comp-toggle-button-label-color-fg-neutral-checked-enabled; + background-color: @comp-toggle-button-container-color-bg-neutral-checked-enabled; + border-color: @comp-toggle-button-container-color-border-neutral-checked-enabled; + } + &[toggles][focused='visible']:hover, + &[toggles][active][focused='visible']:hover { + color: @comp-button-label-color-fg-neutral-focus-hover; + background-color: @comp-button-container-color-bg-neutral-focus-hover; + border-color: @comp-button-container-color-border-neutral-focus-hover; + box-shadow: @comp-toggle-button-container-elevation-neutral-checked-focus; + } + &[toggles][active]:active { + color: @comp-toggle-button-label-color-fg-neutral-checked-pressed; + background-color: @comp-toggle-button-container-color-bg-neutral-checked-pressed; + border-color: @comp-toggle-button-container-color-border-neutral-checked-pressed; + box-shadow: @comp-toggle-button-container-elevation-neutral-checked-pressed; + } + + // TODO: Looks weird + &[toggles][active][transparent][cta] { + color: @button-toggle-active-text-color; + } + + &[cta]:hover:not(:active) { + color: @comp-button-label-color-fg-primary-hover; + background-color: @comp-button-container-color-bg-primary-hover; + border-color: @comp-button-container-color-border-primary-hover; + box-shadow: @comp-button-container-elevation-primary-hover; + } + &[cta]:active { + color: @comp-button-label-color-fg-primary-pressed; + background-color: @comp-button-container-color-bg-primary-pressed; + border-color: @comp-button-container-color-border-primary-pressed; + box-shadow: @comp-button-container-elevation-primary-pressed; + } + &[cta][focused='visible'] { + color: @comp-button-label-color-fg-primary-focus-enabled; + background-color: @comp-button-container-color-bg-primary-focus-enabled; + border-color: @comp-button-container-color-border-primary-focus-enabled; + box-shadow: @comp-button-container-elevation-primary-focus; + } + &[cta][focused='visible']:active { + color: @comp-button-label-color-fg-primary-focus-pressed; + background-color: @comp-button-container-color-bg-primary-focus-pressed; + border-color: @comp-button-container-color-border-primary-focus-pressed; + } + &[cta][focused='visible']:hover:not(:active) { + color: @comp-button-label-color-fg-primary-focus-hover; + background-color: @comp-button-container-color-bg-primary-focus-hover; + border-color: @comp-button-container-color-border-primary-focus-hover; + box-shadow: @comp-button-container-elevation-primary-focus; + } + &[cta][disabled]:not([empty]) { + color: @comp-button-label-color-fg-primary-disabled; + background-color: @comp-button-container-color-bg-primary-disabled; + border-color: @comp-button-container-color-border-primary-disabled; + box-shadow: @comp-button-container-elevation-primary-disabled; + } + &[disabled] { + opacity: @cont-opacity-common-full; + } + + // TODO: cta + toggles + + &:hover:not(:active) { + color: @button-hover-text-color; + background-color: @button-hover-background-color; + border-color: @button-hover-border-color; + box-shadow: @button-hover-box-shadow; + } + &[focused='visible'], + &[toggles][focused='visible'] { + color: @button-focused-text-color; + background-color: @button-focused-background-color; + border-color: @button-focused-border-color; + box-shadow: @button-focused-box-shadow; + } + &[focused='visible']:hover, + &[focused='visible']:active { + box-shadow: @button-focused-box-shadow; + } + &[focused='visible']:active, + &[toggles][focused='visible']:active, + &[toggles][active][focused='visible']:active { + color: @button-pressed-text-color; + background-color: @button-pressed-background-color; + border-color: @button-pressed-border-color; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-calendar.less b/packages/ds-theme/src/custom-elements/ef-calendar.less new file mode 100644 index 0000000000..b419dd819a --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-calendar.less @@ -0,0 +1,67 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-calendar'; + +:host { + border-radius: @cont-radius-common-md; + border: 1px solid @cont-color-common-container-surface-on-layer-4-minimal; + box-shadow: @cont-elevation-common-level-4; + [part~='day-name-row'] { + background-color: unset; + } + [part='btn-view'] { + font-weight: @core-typography-font-weight-semi-bold; + } + + [part~='cell'][today]:not(:active) [part~='selection']:hover { + border: none; + background-color: @calendar-cell-hover-background-color; + } + + [part~='cell'][selected] [part~='selection'] { + border: none; + } + + [part~='cell'][selected]:not(:active) [part~='selection']:hover { + border-color: transparent; + background-color: @comp-button-container-color-bg-primary-hover; + } + + &[focused='visible'] [part~='cell'] [part~='selection']:focus { + outline: 1px solid @scheme-color-primary; + } + + [part~='cell'][range] [part~='selection'] { + border-color: @calendar-selected-range-border-color; + color: @calendar-selected-range-text-color; + background-color: @calendar-selected-range-background-color; + } + + [part~='cell'][range]:not(:active) [part~='selection']:hover { + border-color: @calendar-selected-range-hover-border-color; + color: @calendar-selected-range-hover-text-color; + background-color: @calendar-selected-range-hover-background-color; + } + + [part~='cell'] { + &:not([selected]):not([range]):not([disabled])[idle] [part~='selection'] { + opacity: @cont-opacity-common-full; + background-color: @calendar-cell-idle-background-color; + color: @calendar-cell-idle-text-color; + border-color: @calendar-cell-idle-background-color; + } + &:not([selected]):not([range]):not([disabled])[idle] [part~='selection']:hover { + background-color: @calendar-cell-idle-hover-background-color; + color: @calendar-cell-idle-hover-text-color; + border-color: @calendar-cell-idle-hover-border-color; + } + } + [part~='cell'][today]:not(:active) [part~='selection']:hover { + color: @calendar-cell-today-hover-text-color; + background-color: @calendar-cell-hover-background-color; + } + + [part~='cell'][disabled] { + opacity: @cont-opacity-common-full; + background-color: @cont-color-common-container-misc-disabled; + color: @cont-color-common-fg-generic-disabled-on-disabled-bold; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-canvas.less b/packages/ds-theme/src/custom-elements/ef-canvas.less new file mode 100644 index 0000000000..64294dc05d --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-canvas.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-canvas'; diff --git a/packages/ds-theme/src/custom-elements/ef-card.less b/packages/ds-theme/src/custom-elements/ef-card.less new file mode 100644 index 0000000000..7ed8c89595 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-card.less @@ -0,0 +1,13 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-card'; + +:host { + color: @cont-color-common-fg-generic-bold; + background-color: @cont-color-common-container-surface-layer-1; + border-radius: @cont-radius-common-md; + box-shadow: @cont-elevation-common-level-1; + font-weight: @core-typography-font-weight-regular; + + [part='header'] { + font-size: @core-typography-size-productive-400; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-chart.less b/packages/ds-theme/src/custom-elements/ef-chart.less new file mode 100644 index 0000000000..e646a8b69b --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-chart.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-chart'; diff --git a/packages/ds-theme/src/custom-elements/ef-checkbox.less b/packages/ds-theme/src/custom-elements/ef-checkbox.less new file mode 100644 index 0000000000..004cf83ef8 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-checkbox.less @@ -0,0 +1,76 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-checkbox'; + +:host { + &:not([readonly]) [part='container']:hover { + border-color: @comp-checkbox-control-container-color-border-hover; + } + + [part='container'] { + background-color: @comp-checkbox-control-container-color-bg-enabled; + border-radius: @comp-checkbox-control-container-radius-md; + border: @comp-checkbox-control-border-width-md solid @comp-checkbox-control-container-color-border-enabled; + box-shadow: @comp-checkbox-control-container-elevation-enabled; + } + + [part='container'], + &:hover:not([checked]):not([indeterminate]):not([readonly]) [part='container'] { + border-color: @comp-checkbox-control-container-color-border-enabled; + } + + [part='label'] { + color: @comp-checkbox-label-color-fg-enabled; + } + + [part='label']:hover { + color: @comp-checkbox-label-color-fg-hover; + } + + &[indeterminate] [part='container'], + &[checked] [part='container'] { + border-color: @comp-checkbox-control-container-color-border-checked-enabled; + background-color: @comp-checkbox-control-container-color-bg-checked-enabled; + } + + [checked] [part='check'], + [indeterminate] [part='check'] { + color: @comp-checkbox-checkmark-container-color-fg-enabled; + } + + &[disabled], + &[disabled] [part='label'], + &[disabled][checked] [part='check'], + &[disabled][indeterminate] [part='check'] { + opacity: @cont-opacity-common-full; + } + + &[disabled] [part='container'] { + border-color: @comp-checkbox-control-container-color-border-disabled; + background-color: @comp-checkbox-control-container-color-bg-disabled; + } + + &[disabled] [part='label'] { + color: @comp-checkbox-label-color-fg-disabled; + } + + &[disabled][checked] [part='check'], + &[disabled][indeterminate] [part='check'] { + color: @comp-checkbox-checkmark-container-color-fg-disabled; + } + + &[readonly][checked] [part='check'], + &[readonly][indeterminate] [part='check'] { + color: @comp-checkbox-checkmark-container-color-fg-read-only; + } + + &[readonly] [part='container'] { + border-color: @comp-checkbox-control-container-color-border-read-only; + background-color: @comp-checkbox-control-container-color-bg-read-only; + } + + &:focus[readonly]:not([checked]):not([indeterminate]) [part='container'], + &[readonly][checked] [part='container'], + &[readonly][indeterminate] [part='container'] { + border-color: @comp-checkbox-control-container-color-border-read-only; + background-color: @comp-checkbox-control-container-color-bg-checked-read-only; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-clock.less b/packages/ds-theme/src/custom-elements/ef-clock.less new file mode 100644 index 0000000000..d3f22fd916 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-clock.less @@ -0,0 +1,30 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-clock'; + +:host { + color: @cont-color-common-fg-generic-bold; + + &:not([analogue]) [part~='seconds'] { + color: @cont-color-common-fg-generic-moderate; + } + + // Analogue clock + &[analogue] { + [part='hands']::after { + border-color: @scheme-color-tertiary; + } + + [part~='minute']::after { + background-color: @scheme-color-tertiary; + } + + [part~='hour']::after { + background-color: @scheme-color-tertiary; + } + + &[size='small'] { + [part='hands']::after { + background-color: @scheme-color-tertiary; + } + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-collapse.less b/packages/ds-theme/src/custom-elements/ef-collapse.less new file mode 100644 index 0000000000..fd5d32ef78 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-collapse.less @@ -0,0 +1,37 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-collapse'; + +:host { + &:extend(:host all); + + text-transform: none; + + [part='header'], + &[expanded] [part='header'], + [part='header'][focused='visible'] { + color: @comp-accordion-item-header-label-color-fg-enabled; + // default is header level 3 + background-color: @comp-accordion-item-header-container-color-bg-enabled; + + // header level 1 + &[level='1'] { + background-color: @comp-accordion-item-header-container-color-bg-enabled; + } + + // header level 2 + &[level='2'] { + background-color: @comp-accordion-item-header-container-color-bg-enabled; + } + + // header level 4 + &[level='4'] { + background-color: @comp-accordion-item-header-container-color-bg-enabled; + } + } + + [part='header']:hover, + [part='header'][level='1']:hover, + [part='header'][level='2']:hover { + color: @comp-accordion-item-header-label-color-fg-hover; + background-color: @comp-accordion-item-header-container-color-bg-hover; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-color-dialog.less b/packages/ds-theme/src/custom-elements/ef-color-dialog.less new file mode 100644 index 0000000000..3a5fb8c9bd --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-color-dialog.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-color-dialog'; diff --git a/packages/ds-theme/src/custom-elements/ef-color-picker.less b/packages/ds-theme/src/custom-elements/ef-color-picker.less new file mode 100644 index 0000000000..693bafb803 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-color-picker.less @@ -0,0 +1,9 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-color-picker'; + +:host { + border-radius: @cont-radius-common-full; + + [part='color-item'] { + border-radius: @cont-radius-common-full; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-combo-box.less b/packages/ds-theme/src/custom-elements/ef-combo-box.less new file mode 100644 index 0000000000..d913a20dfa --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-combo-box.less @@ -0,0 +1,12 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-combo-box'; + +:host { + [part='list'] { + border-radius: @comp-menu-container-radius; + border: 1px solid @comp-menu-container-color-border; + + ef-list-item:not(:first-child):not([type='divider']) { + box-shadow: none; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-counter.less b/packages/ds-theme/src/custom-elements/ef-counter.less new file mode 100644 index 0000000000..7294d83d4a --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-counter.less @@ -0,0 +1,15 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-counter'; + +:host { + color: @cont-color-status-fg-on-neutral-base; + background: @cont-color-status-bg-negative-base; + border-color: @cont-color-common-container-surface-on-layer-1-minimal; + border-radius: @cont-radius-common-full; + border-width: @cont-border-width-common-subtle; + + &:hover { + color: @cont-color-status-fg-on-neutral-base; + background: @cont-color-status-bg-negative-base; + border-color: @cont-color-common-container-surface-on-layer-1-minimal; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-datetime-picker.less b/packages/ds-theme/src/custom-elements/ef-datetime-picker.less new file mode 100644 index 0000000000..dadf0e43ca --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-datetime-picker.less @@ -0,0 +1,9 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-datetime-picker'; + +:host { + [part='list'] { + border: none; + background-color: @comp-dialog-container-color-bg-non-modal-enabled; + box-shadow: @comp-dialog-container-elevation-non-modal-enabled; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-dialog.less b/packages/ds-theme/src/custom-elements/ef-dialog.less new file mode 100644 index 0000000000..ef8faf77d6 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-dialog.less @@ -0,0 +1,51 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-dialog'; + +:host { + border-radius: @comp-dialog-container-radius-modal; + border-style: solid; + border-color: @cont-color-common-container-surface-on-layer-3-subtle; + border-width: @comp-dialog-container-border-width-modal; + background-color: @comp-dialog-container-color-bg-modal-enabled; + + &[with-shadow] { + box-shadow: @comp-dialog-container-elevation-modal-enabled; + } + + [part='header'] { + color: @comp-dialog-header-label-color-fg; + background-color: @cont-color-common-container-surface-on-layer-3-subtle; + border: 1px solid @comp-dialog-header-container-color-border-modal-enabled; + border-radius: @cont-radius-modal @cont-radius-modal @cont-radius-common-none @cont-radius-common-none; + } + + [part='close'] { + color: @comp-close-button-icon-color-fg-enabled; + background-color: @comp-close-button-container-color-bg-enabled; + border-color: @comp-close-button-container-color-border-enabled; + border-radius: @comp-close-button-container-radius-md; + box-shadow: @comp-close-button-container-elevation-enabled; + opacity: @cont-opacity-common-full; + + &:hover { + color: @comp-close-button-icon-color-fg-hover; + background-color: @comp-close-button-container-color-bg-hover; + border-color: @comp-close-button-container-color-border-hover; + box-shadow: @comp-close-button-container-elevation-hover; + } + &:active { + color: @comp-close-button-icon-color-fg-pressed; + background-color: @comp-close-button-container-color-bg-pressed; + border-color: @comp-close-button-container-color-border-pressed; + box-shadow: @comp-close-button-container-elevation-pressed; + } + } + + [part~='default-button'] { + text-transform: none; + } + + [part='footer'] { + border-bottom-left-radius: @comp-dialog-container-radius-modal; + border-bottom-right-radius: @comp-dialog-container-radius-modal; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-email-field.less b/packages/ds-theme/src/custom-elements/ef-email-field.less new file mode 100644 index 0000000000..7857a24877 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-email-field.less @@ -0,0 +1 @@ +@import './ef-text-field'; diff --git a/packages/ds-theme/src/custom-elements/ef-flag.less b/packages/ds-theme/src/custom-elements/ef-flag.less new file mode 100644 index 0000000000..b24b9cfc37 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-flag.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-flag'; diff --git a/packages/ds-theme/src/custom-elements/ef-header.less b/packages/ds-theme/src/custom-elements/ef-header.less new file mode 100644 index 0000000000..5d43547a0f --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-header.less @@ -0,0 +1,7 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-header'; + +:host { + text-transform: none; + font-weight: @core-typography-font-weight-medium; + color: @cont-color-common-fg-generic-bold; +} diff --git a/packages/ds-theme/src/custom-elements/ef-heatmap.less b/packages/ds-theme/src/custom-elements/ef-heatmap.less new file mode 100644 index 0000000000..b4f7974a01 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-heatmap.less @@ -0,0 +1,6 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-heatmap'; + +:host { + --below-point-color: @dataviz-color-scale-negative; + --above-point-color: @dataviz-color-scale-positive; +} diff --git a/packages/ds-theme/src/custom-elements/ef-icon.less b/packages/ds-theme/src/custom-elements/ef-icon.less new file mode 100644 index 0000000000..997c8c3713 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-icon.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-icon'; diff --git a/packages/ds-theme/src/custom-elements/ef-interactive-chart.less b/packages/ds-theme/src/custom-elements/ef-interactive-chart.less new file mode 100644 index 0000000000..e0e6d8635d --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-interactive-chart.less @@ -0,0 +1,26 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-interactive-chart'; + +:host { + @jump-button-background-color: @button-background-color; + @jump-button-hover-background-color: @button-hover-background-color; + @jump-button-border-color: @button-border-color; + + [part='jump-button-container'] { + background-color: @jump-button-background-color; + color: @button-text-color; + } + + [part='jump-button-container']:hover { + background-color: @jump-button-hover-background-color; + color: @button-hover-text-color; + border-color: @button-hover-border-color; + } + + [part='jump-button'] { + border-color: @button-text-color; + } + + [part='jump-button']:hover { + border-color: @button-hover-text-color; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-item.less b/packages/ds-theme/src/custom-elements/ef-item.less new file mode 100644 index 0000000000..9f246c5508 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-item.less @@ -0,0 +1,31 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-item'; + +:host { + &:extend(:host all); + + &[selected] { + &:not([highlighted]):not([focused]):not([multiple]) { + background-image: none; + } + } + + &[type='header'] { + text-transform: none; + font-weight: @core-typography-font-weight-semi-bold; + } + + &:not([type='header']) { + font-weight: @core-typography-font-weight-regular; + } + + &[selected]:not([highlighted]), + &[selected][highlighted] { + background-color: @list-item-selected-background-color; + color: @list-item-selected-text-color; + } + + &[highlighted]:not([selected]) { + background-color: @list-item-highlighted-background-color; + color: @list-item-text-highlighted-color; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-label.less b/packages/ds-theme/src/custom-elements/ef-label.less new file mode 100644 index 0000000000..f049602b2e --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-label.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-label'; diff --git a/packages/ds-theme/src/custom-elements/ef-layout.less b/packages/ds-theme/src/custom-elements/ef-layout.less new file mode 100644 index 0000000000..d925d36981 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-layout.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-layout'; diff --git a/packages/ds-theme/src/custom-elements/ef-led-gauge.less b/packages/ds-theme/src/custom-elements/ef-led-gauge.less new file mode 100644 index 0000000000..aec635f344 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-led-gauge.less @@ -0,0 +1,16 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-led-gauge'; + +:host { + --neutral-color: @cont-color-common-container-surface-on-layer-1-subtle; + --led-spacing: 1px; + --top-selected-color: @cont-color-common-container-neutral-base; + --bottom-selected-color: @cont-color-data-viz-categorical-bg-category-1; + + --left-segment-color: @cont-color-data-viz-diverging-bg-positive-negative-negative-800; + --center-left-segment-color: @cont-color-data-viz-diverging-bg-positive-negative-negative-500; + + --center-segment-color: @cont-color-common-container-neutral-base; + --center-right-segment-color: @cont-color-data-viz-diverging-bg-positive-negative-positive-500; + --right-segment-color: @cont-color-data-viz-diverging-bg-positive-negative-positive-800; + --range-color: @cont-color-data-viz-categorical-bg-category-1; +} diff --git a/packages/ds-theme/src/custom-elements/ef-list-item.less b/packages/ds-theme/src/custom-elements/ef-list-item.less new file mode 100644 index 0000000000..9c2f6ba955 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-list-item.less @@ -0,0 +1 @@ +@import 'ef-item'; diff --git a/packages/ds-theme/src/custom-elements/ef-list.less b/packages/ds-theme/src/custom-elements/ef-list.less new file mode 100644 index 0000000000..919dccf097 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-list.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-list'; diff --git a/packages/ds-theme/src/custom-elements/ef-loader.less b/packages/ds-theme/src/custom-elements/ef-loader.less new file mode 100644 index 0000000000..403683a203 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-loader.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-loader'; diff --git a/packages/ds-theme/src/custom-elements/ef-multi-input.less b/packages/ds-theme/src/custom-elements/ef-multi-input.less new file mode 100644 index 0000000000..250f509c65 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-multi-input.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-multi-input'; diff --git a/packages/ds-theme/src/custom-elements/ef-notification.less b/packages/ds-theme/src/custom-elements/ef-notification.less new file mode 100644 index 0000000000..c902877285 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-notification.less @@ -0,0 +1,24 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-notification'; + +:host { + color: var(--color, @cont-color-status-fg-on-info-base); + &[confirm] { + color: var(--color, @cont-color-status-fg-on-positive-base); + } + + &[warning] { + color: var(--color, @cont-color-status-fg-on-warning-base); + } + + &[error] { + color: var(--color, @cont-color-status-fg-on-negative-base); + } + + [part='clear'] { + opacity: @cont-opacity-common-bolder; + } + + [part='clear']:hover { + opacity: @cont-opacity-common-full; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-number-field.less b/packages/ds-theme/src/custom-elements/ef-number-field.less new file mode 100644 index 0000000000..db9a5db546 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-number-field.less @@ -0,0 +1,13 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-number-field'; + +:host { + &[readonly]:not([focused]) { + background-color: @input-readonly-background-color; + } + + &[readonly]:not([focused]), + &[error]:not([focused]), + &[warning]:not([focused]) { + color: @cont-color-common-fg-generic-bold; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-overlay-backdrop.less b/packages/ds-theme/src/custom-elements/ef-overlay-backdrop.less new file mode 100644 index 0000000000..ace3c91ce3 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-overlay-backdrop.less @@ -0,0 +1,5 @@ +@import '@refinitiv-ui/elemental-theme/src/custom-elements/ef-item'; + +:host { + background-color: @cont-color-common-container-surface-layer-overlay; +} diff --git a/packages/ds-theme/src/custom-elements/ef-overlay-menu.less b/packages/ds-theme/src/custom-elements/ef-overlay-menu.less new file mode 100644 index 0000000000..8bf2bd0660 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-overlay-menu.less @@ -0,0 +1,8 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-overlay-menu'; + +:host { + &:extend(:host all); + + border: 1px solid @comp-menu-container-color-border; + border-radius: @comp-menu-container-radius; +} diff --git a/packages/ds-theme/src/custom-elements/ef-overlay.less b/packages/ds-theme/src/custom-elements/ef-overlay.less new file mode 100644 index 0000000000..c04e21d408 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-overlay.less @@ -0,0 +1,9 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-overlay'; + +:host { + border-radius: @cont-radius-common-md; + + &[with-shadow] { + box-shadow: @cont-elevation-common-level-3; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-pagination.less b/packages/ds-theme/src/custom-elements/ef-pagination.less new file mode 100644 index 0000000000..c8c88f558a --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-pagination.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-pagination'; + +:host { + [part='input'] { + height: 24px; + margin: 0 1px; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-panel.less b/packages/ds-theme/src/custom-elements/ef-panel.less new file mode 100644 index 0000000000..20ec11c685 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-panel.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-panel'; diff --git a/packages/ds-theme/src/custom-elements/ef-password-field.less b/packages/ds-theme/src/custom-elements/ef-password-field.less new file mode 100644 index 0000000000..ef597d6866 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-password-field.less @@ -0,0 +1,2 @@ +@import './ef-text-field'; +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-password-field'; diff --git a/packages/ds-theme/src/custom-elements/ef-pill.less b/packages/ds-theme/src/custom-elements/ef-pill.less new file mode 100644 index 0000000000..d4b54d7dfc --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-pill.less @@ -0,0 +1,119 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-pill'; + +:host { + color: @comp-toggle-tag-inner-label-color-fg-enabled; + background-color: @comp-toggle-tag-inner-container-color-bg-enabled; + border-color: @comp-toggle-tag-inner-container-color-border-enabled; + border-radius: @comp-toggle-tag-inner-container-radius-md; + box-shadow: @comp-toggle-tag-inner-container-elevation-enabled; + + &:hover { + color: @comp-toggle-tag-inner-label-color-fg-hover; + background-color: @comp-toggle-tag-inner-container-color-bg-hover; + border-color: @comp-toggle-tag-inner-container-color-border-hover; + box-shadow: @comp-toggle-tag-inner-container-elevation-hover; + + [part='close'] { + // TODO: There's no remove button hover color + color: @comp-toggle-tag-inner-label-color-fg-enabled; + } + } + + &:active { + color: @comp-toggle-tag-inner-label-color-fg-pressed; + background-color: @comp-toggle-tag-inner-container-color-bg-pressed; + border-color: @comp-toggle-tag-inner-container-color-border-pressed; + box-shadow: @comp-toggle-tag-inner-container-elevation-pressed; + } + + [part='close'] { + color: @comp-remove-button-icon-color-fg-enabled; + background-color: @comp-remove-button-container-color-bg-enabled; + border-color: @comp-remove-button-container-color-border-enabled; + border-radius: @comp-remove-button-container-radius-md; + box-shadow: @comp-remove-button-container-elevation-enabled; + opacity: @cont-opacity-common-full; + + &:hover { + color: @comp-remove-button-icon-color-fg-hover; + background-color: @comp-remove-button-container-color-bg-hover; + border-color: @comp-remove-button-container-color-border-hover; + box-shadow: @comp-remove-button-container-elevation-hover; + } + &:active { + color: @comp-remove-button-icon-color-fg-pressed; + background-color: @comp-remove-button-container-color-bg-pressed; + border-color: @comp-remove-button-container-color-border-pressed; + box-shadow: @comp-remove-button-container-elevation-pressed; + } + &[disabled] { + color: @comp-remove-button-icon-color-fg-disabled; + background-color: @comp-remove-button-container-color-bg-disabled; + border-color: @comp-remove-button-container-color-border-disabled; + box-shadow: @comp-remove-button-container-elevation-disabled; + } + } + + &[focused='visible'] { + box-shadow: @comp-toggle-tag-inner-container-elevation-focus; + } + &[toggles][active][focused='visible'] { + box-shadow: @comp-toggle-tag-inner-container-elevation-checked-focus; + } + + &[disabled] { + color: @comp-toggle-tag-inner-label-color-fg-disabled; + background-color: @comp-toggle-tag-inner-container-color-bg-disabled; + border-color: @comp-toggle-tag-inner-container-color-border-disabled; + } + + &[toggles][active] { + color: @comp-toggle-tag-inner-label-color-fg-checked-enabled; + background-color: @comp-toggle-tag-inner-container-color-bg-checked-enabled; + border-color: @comp-toggle-tag-inner-container-color-border-checked-enabled; + box-shadow: @comp-toggle-tag-inner-container-elevation-checked-enabled; + + &:hover { + color: @comp-toggle-tag-inner-label-color-fg-checked-hover; + background-color: @comp-toggle-tag-inner-container-color-bg-checked-hover; + border-color: @comp-toggle-tag-inner-container-color-border-checked-hover; + box-shadow: @comp-toggle-tag-inner-container-elevation-checked-hover; + } + &:active { + color: @comp-toggle-tag-inner-label-color-fg-checked-pressed; + background-color: @comp-toggle-tag-inner-container-color-bg-checked-pressed; + border-color: @comp-toggle-tag-inner-container-color-border-checked-pressed; + box-shadow: @comp-toggle-tag-inner-container-elevation-checked-pressed; + } + &[disabled] { + color: @comp-toggle-tag-inner-label-color-fg-checked-disabled; + background-color: @comp-toggle-tag-inner-container-color-bg-checked-disabled; + border-color: @comp-toggle-tag-inner-container-color-border-checked-disabled; + box-shadow: @comp-toggle-tag-inner-container-elevation-checked-disabled; + } + } + + &[toggles][active] [part='close'] { + color: @comp-toggle-tag-remove-button-icon-color-fg-checked-enabled; + background-color: @comp-toggle-tag-remove-button-container-color-bg-checked-enabled; + border-color: @comp-toggle-tag-remove-button-container-color-border-checked-enabled; + + &:hover { + color: @comp-toggle-tag-remove-button-icon-color-fg-checked-hover; + background-color: @comp-toggle-tag-remove-button-container-color-bg-checked-hover; + border-color: @comp-toggle-tag-remove-button-container-color-border-checked-hover; + } + + &:active { + color: @comp-toggle-tag-remove-button-icon-color-fg-checked-pressed; + background-color: @comp-toggle-tag-remove-button-container-color-bg-checked-pressed; + border-color: @comp-toggle-tag-remove-button-container-color-border-checked-pressed; + } + } + + &[toggles][active][disabled] [part='close'] { + color: @comp-toggle-tag-remove-button-icon-color-fg-checked-disabled; + background-color: @comp-toggle-tag-remove-button-container-color-bg-checked-disabled; + border-color: @comp-toggle-tag-remove-button-container-color-border-checked-disabled; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-progress-bar.less b/packages/ds-theme/src/custom-elements/ef-progress-bar.less new file mode 100644 index 0000000000..7e61a0018d --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-progress-bar.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-progress-bar'; diff --git a/packages/ds-theme/src/custom-elements/ef-radio-button.less b/packages/ds-theme/src/custom-elements/ef-radio-button.less new file mode 100644 index 0000000000..702f35a58c --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-radio-button.less @@ -0,0 +1,64 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-radio-button'; + +:host { + &:not([checked]):not([readonly]) [part='container']:hover { + border-color: @comp-radio-control-container-color-border-hover; + background-color: @comp-radio-control-container-color-bg-hover; + } + + [part='container'], + &:hover:not([checked]):not([indeterminate]):not([readonly]) [part='container'] { + border-color: @comp-radio-control-container-color-border-enabled; + } + + &[checked] [part='container'] { + border-color: @comp-radio-control-container-color-border-checked-enabled; + background-color: @comp-radio-control-container-color-bg-checked-enabled; + } + + &[checked] [part='check'] { + background-color: @comp-radio-indicator-container-color-bg-enabled; + } + + [part='label'] { + color: @comp-radio-label-color-fg-enabled; + } + + [part='label']:hover { + color: @comp-radio-label-color-fg-hover; + } + + &[disabled], + &[disabled] [part='label'], + &[disabled][checked] [part='check'] { + opacity: @cont-opacity-common-full; + } + + &[disabled] [part='container'] { + border-color: @comp-radio-control-container-color-border-disabled; + background-color: @comp-radio-control-container-color-bg-disabled; + } + + &[disabled] [part='label'] { + color: @comp-radio-label-color-fg-disabled; + } + + &:focus[readonly]:not([checked]) [part='container'], + &[readonly] [part='container'] { + border-color: @comp-radio-control-container-color-border-read-only; + background-color: @comp-radio-control-container-color-bg-read-only; + } + + &[readonly][checked] [part='container'] { + border-color: @comp-radio-control-container-color-border-checked-read-only; + background-color: @comp-radio-control-container-color-bg-checked-read-only; + } + + &[readonly][checked] [part='check'] { + background-color: @comp-radio-indicator-container-color-bg-read-only; + } + + &[readonly] [part='label'] { + color: @comp-radio-label-color-fg-read-only; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-rating.less b/packages/ds-theme/src/custom-elements/ef-rating.less new file mode 100644 index 0000000000..887b2c60ce --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-rating.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-rating'; diff --git a/packages/ds-theme/src/custom-elements/ef-search-field.less b/packages/ds-theme/src/custom-elements/ef-search-field.less new file mode 100644 index 0000000000..7857a24877 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-search-field.less @@ -0,0 +1 @@ +@import './ef-text-field'; diff --git a/packages/ds-theme/src/custom-elements/ef-select.less b/packages/ds-theme/src/custom-elements/ef-select.less new file mode 100644 index 0000000000..a7a2c72799 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-select.less @@ -0,0 +1,17 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-select'; + +@import (reference) 'ef-text-field'; + +:host { + &:extend(:host all); + + [part='list'] { + border-radius: @comp-menu-container-radius; + border: 1px solid @comp-menu-container-color-border; + + ef-item:not(:first-child):not([type='divider']), + ::slotted(ef-item:not(:first-child):not([type='divider'])) { + box-shadow: none; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less b/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less new file mode 100644 index 0000000000..5470e1b306 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-sidebar-layout.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-sidebar-layout'; diff --git a/packages/ds-theme/src/custom-elements/ef-slider.less b/packages/ds-theme/src/custom-elements/ef-slider.less new file mode 100644 index 0000000000..1fe0b1e223 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-slider.less @@ -0,0 +1,27 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-slider'; + +:host { + [part='thumb'] { + border-radius: @cont-radius-common-2xl; + } + &:hover { + [part='thumb'] { + border-color: @slider-thumb-hover-border-color; + } + } + &[disabled] { + [part='track-wrapper'] { + background-color: @slider-track-disabled-color; + } + + [part='track-fill'] { + height: inherit; + background-color: @cont-color-common-fg-generic-disabled-on-disabled-bold; + } + + [part='thumb'] { + background-color: @cont-color-common-fg-generic-disabled-bold; + border-color: @cont-color-control-border-subtle; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-sparkline.less b/packages/ds-theme/src/custom-elements/ef-sparkline.less new file mode 100644 index 0000000000..5ab23b6706 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-sparkline.less @@ -0,0 +1,6 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-sparkline'; + +:host { + --upper-line-color: @cont-color-status-bg-positive-base; + --lower-line-color: @cont-color-status-bg-negative-base; +} diff --git a/packages/ds-theme/src/custom-elements/ef-swing-gauge.less b/packages/ds-theme/src/custom-elements/ef-swing-gauge.less new file mode 100644 index 0000000000..9437713457 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-swing-gauge.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-swing-gauge'; + +:host { + --primary-color: @dataviz-color-primary; + --secondary-color: @cont-color-common-container-surface-on-layer-1-minimal; + --center-line-color: @comp-divider-line-color-border-on-layer-1-moderate; + --border-color: @separator-color; +} diff --git a/packages/ds-theme/src/custom-elements/ef-tab-bar.less b/packages/ds-theme/src/custom-elements/ef-tab-bar.less new file mode 100644 index 0000000000..57079c7fec --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tab-bar.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tab-bar'; + +:host { + [part='left-btn'], + [part='right-btn'] { + background-color: @cont-color-common-container-surface-on-layer-1-minimal; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-tab.less b/packages/ds-theme/src/custom-elements/ef-tab.less new file mode 100644 index 0000000000..4dce16ed5c --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tab.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tab'; + +:host { + &[active][level='1']:hover, + &[active][level='2']:hover { + color: @comp-button-label-color-fg-primary-hover; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-text-field.less b/packages/ds-theme/src/custom-elements/ef-text-field.less new file mode 100644 index 0000000000..8c6861371a --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-text-field.less @@ -0,0 +1,37 @@ +@import (reference) '@refinitiv-ui/halo-theme/src/custom-elements/ef-text-field'; +@import '../shared-styles/placeholder'; + +:host { + &:extend(:host all); + + [part='icon'] { + color: @input-text-color; + } + &[disabled] [part='icon'] { + color: @input-disabled-text-color; + } + + &[readonly]:not([focused]) { + background-color: @input-readonly-background-color; + + [part='icon'] { + color: @input-text-color; + } + } + + &[focused] [part='icon'], + &[focused][error][warning] [part='icon'], + &:not([readonly]):not([error]):not([warning]):not([focused]):hover [part='icon'] { + color: @scheme-color-primary; + } + + &[readonly]:not([focused]), + &[error]:not([focused]), + &[warning]:not([focused]) { + color: @input-text-color; + } + + input { + .placeholder; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-time-picker.less b/packages/ds-theme/src/custom-elements/ef-time-picker.less new file mode 100644 index 0000000000..ed2a72aec1 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-time-picker.less @@ -0,0 +1,9 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-time-picker'; + +:host { + &:hover, + &[readonly]:not([focused]), + &[error]:not([focused]) { + color: @cont-color-common-fg-generic-bold; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-toggle.less b/packages/ds-theme/src/custom-elements/ef-toggle.less new file mode 100644 index 0000000000..06336c558e --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-toggle.less @@ -0,0 +1,87 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-toggle'; + +:host { + text-transform: none; + border-radius: @cont-radius-common-full; + color: @cont-color-control-fg-on-subtle; + + &[label], + &[checked-label] { + width: 56px; + } + + &:hover:not([readonly]) { + background-color: @cont-color-control-bg-subtle; + } + + [part='toggle'] { + border-color: @cont-color-control-border-minimal; + } + + [part='toggle']::after { + background-color: @cont-color-control-bg-bold; + border-color: @cont-color-control-bg-bold; + } + + &[disabled] { + color: @cont-color-common-fg-generic-disabled-on-disabled-bold; + [part='toggle'] { + background-color: @cont-color-common-container-misc-disabled; + border-color: @cont-color-common-container-misc-disabled; + } + [part='toggle']::after { + background-color: @cont-color-common-fg-generic-disabled-on-disabled-bold; + border-color: @cont-color-common-fg-generic-disabled-on-disabled-bold; + } + } + + &[readonly] { + [part='toggle'] { + background-color: @core-color-palette-misc-transparent; + border-color: @cont-color-common-container-misc-disabled; + } + [part='toggle']::after { + background-color: @cont-color-control-bg-base; + border-color: @cont-color-control-bg-base; + } + } + + &[checked]:not([readonly]) { + background-color: @cont-color-control-bg-base; + [part='toggle']::after { + background-color: @cont-color-control-bg-minimal; + } + [part='toggle'] { + color: @cont-color-control-fg-on-bold; + border-color: @cont-color-control-border-base; + } + } + + .desktop-specific({ + &:hover:not([readonly]) { + [part=toggle] { + border-color: @cont-color-control-border-moderate; + &::after { + background-color: @cont-color-control-bg-moderate; + border-color: @cont-color-control-bg-moderate; + } + } + &[checked] { + background-color: @cont-color-control-bg-moderate; + [part=toggle] { + border-color: @cont-color-control-border-moderate; + &::after { + background-color: @cont-color-control-bg-minimal; + border-color: @cont-color-control-bg-minimal; + } + } + } + } + }); + + & when (@variant = dark) { + &[disabled] [part='toggle']::after { + opacity: @cont-opacity-common-full; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-tooltip.less b/packages/ds-theme/src/custom-elements/ef-tooltip.less new file mode 100644 index 0000000000..99387d87f4 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tooltip.less @@ -0,0 +1,15 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tooltip'; + +:host { + &:extend(:host all); + + [part='tooltip'] { + border: @panel-border; + border-color: @tooltip-border-color; + border-radius: @comp-tooltip-container-radius-md; + + &[with-shadow] { + box-shadow: @comp-tooltip-container-elevation; + } + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-chart.less b/packages/ds-theme/src/custom-elements/ef-tornado-chart.less new file mode 100644 index 0000000000..1122f5233e --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tornado-chart.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tornado-chart'; diff --git a/packages/ds-theme/src/custom-elements/ef-tornado-item.less b/packages/ds-theme/src/custom-elements/ef-tornado-item.less new file mode 100644 index 0000000000..05f9c7be9a --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tornado-item.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tornado-item'; diff --git a/packages/ds-theme/src/custom-elements/ef-tree-item.less b/packages/ds-theme/src/custom-elements/ef-tree-item.less new file mode 100644 index 0000000000..4f17113043 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tree-item.less @@ -0,0 +1,7 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tree-item'; +@import (reference) 'ef-item'; + +:host { + margin: (@comp-tree-item-container-inner-spacing-gap-md / 2) 0; + border-width: @comp-tree-item-container-border-width-md; +} diff --git a/packages/ds-theme/src/custom-elements/ef-tree-select.less b/packages/ds-theme/src/custom-elements/ef-tree-select.less new file mode 100644 index 0000000000..f6e87bbc75 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tree-select.less @@ -0,0 +1,15 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tree-select'; + +:host { + [part~='control'] { + color: @cont-color-common-fg-generic-subtle; + + &[part~='active'] { + color: @cont-color-common-fg-generic-bold; + } + } + + [part='list'] { + border: none; + } +} diff --git a/packages/ds-theme/src/custom-elements/ef-tree.less b/packages/ds-theme/src/custom-elements/ef-tree.less new file mode 100644 index 0000000000..7abb7ea7b6 --- /dev/null +++ b/packages/ds-theme/src/custom-elements/ef-tree.less @@ -0,0 +1,5 @@ +@import '@refinitiv-ui/halo-theme/src/custom-elements/ef-tree'; + +:host { + border-radius: @comp-tree-container-radius-md; +} diff --git a/packages/ds-theme/src/defaults.less b/packages/ds-theme/src/defaults.less new file mode 100644 index 0000000000..4671df14d9 --- /dev/null +++ b/packages/ds-theme/src/defaults.less @@ -0,0 +1,3 @@ +// This file is here to import default settings from ../exports/bare.less +@import (reference) 'colors'; +@import (reference) 'variables'; diff --git a/packages/ds-theme/src/fonts.less b/packages/ds-theme/src/fonts.less new file mode 100644 index 0000000000..ecca1ec91d --- /dev/null +++ b/packages/ds-theme/src/fonts.less @@ -0,0 +1,5 @@ +@font-face { + font-family: 'Proxima Vara'; + font-display: swap; + src: url('https://cdn.ppe.refinitiv.com/public/ds-assets/fonts/ProximaVara.woff2'); +} diff --git a/packages/ds-theme/src/native-elements/a.less b/packages/ds-theme/src/native-elements/a.less new file mode 100644 index 0000000000..f18a850b9c --- /dev/null +++ b/packages/ds-theme/src/native-elements/a.less @@ -0,0 +1,7 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/a'; + +a { + &:hover { + text-decoration-color: @link-hover-text-color; + } +} diff --git a/packages/ds-theme/src/native-elements/body.less b/packages/ds-theme/src/native-elements/body.less new file mode 100644 index 0000000000..8f54dadbfc --- /dev/null +++ b/packages/ds-theme/src/native-elements/body.less @@ -0,0 +1,34 @@ +@import '../fonts'; + +body { + font-family: 'Proxima Vara', Arial, 'Helvetica Nue', Helvetica, sans-serif; + font-size: @global-text-size; + font-weight: 340; + color: @global-text-color; + line-height: @global-text-line-height; + background: @global-background-color; + padding: 0; + margin: 0 auto; + visibility: visible; + + :lang(ja) & { + font-family: 'Proxima Vara', Meiryo, 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', + 'MS PGothic', 'ＭＳ Ｐゴシック', Arial; + pre { + font-family: 'MS Gothic', 'ＭＳ ゴシック', 'MS PGothic', 'Osaka－等幅', 'Osaka-等幅', Osaka-mono, + monospace, 'ＭＳ Ｐゴシック', Arial; + } + } + + :lang(zh-CN) & { + font-family: 'Proxima Vara', 'Microsoft YaHei', '微软雅黑', 'STXihei', '华文细黑', Simsun, '宋体', Arial; + } + + :lang(zh-Hant) & { + font-family: 'Proxima Vara', 'Heiti TC', '黑體-繁', 'Microsoft JhengHei', '微軟正黑體', Pmingliu, + '新細明體', Arial; + pre { + font-family: 'Heiti TC', '黑體-繁', Pmingliu, '新細明體', monospace, Arial; + } + } +} diff --git a/packages/ds-theme/src/native-elements/h4.less b/packages/ds-theme/src/native-elements/h4.less new file mode 100644 index 0000000000..42c812911f --- /dev/null +++ b/packages/ds-theme/src/native-elements/h4.less @@ -0,0 +1,5 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/h4'; + +h4 { + text-transform: none; +} diff --git a/packages/ds-theme/src/native-elements/h5.less b/packages/ds-theme/src/native-elements/h5.less new file mode 100644 index 0000000000..bd5410edd0 --- /dev/null +++ b/packages/ds-theme/src/native-elements/h5.less @@ -0,0 +1,5 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/h5'; + +h5 { + text-transform: none; +} diff --git a/packages/ds-theme/src/native-elements/h6.less b/packages/ds-theme/src/native-elements/h6.less new file mode 100644 index 0000000000..cbb8e4c0c0 --- /dev/null +++ b/packages/ds-theme/src/native-elements/h6.less @@ -0,0 +1,5 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/h6'; + +h6 { + text-transform: none; +} diff --git a/packages/ds-theme/src/native-elements/html.less b/packages/ds-theme/src/native-elements/html.less new file mode 100644 index 0000000000..8e028129f7 --- /dev/null +++ b/packages/ds-theme/src/native-elements/html.less @@ -0,0 +1,12 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/html'; + +// Expose global background color in DS Theme +// This helps to solve background color in demo page and several users requested for this +@css-properties-extra: { + --color-scheme-background-color: @global-background-color; + --color-scheme-text-color: @global-text-color; +}; + +html { + @css-properties-extra(); +} diff --git a/packages/ds-theme/src/native-elements/input.less b/packages/ds-theme/src/native-elements/input.less new file mode 100644 index 0000000000..a3800992a0 --- /dev/null +++ b/packages/ds-theme/src/native-elements/input.less @@ -0,0 +1,6 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/input'; +@import '../shared-styles/placeholder'; + +input { + .placeholder; +} diff --git a/packages/ds-theme/src/native-elements/kbd.less b/packages/ds-theme/src/native-elements/kbd.less new file mode 100644 index 0000000000..ccf8c77ed5 --- /dev/null +++ b/packages/ds-theme/src/native-elements/kbd.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/kbd'; + +kbd { + color: @comp-badge-label-color-fg-neutral-bold; + background: @comp-badge-container-color-bg-neutral-bold; + border-radius: @comp-badge-container-radius-md; + box-shadow: none; +} diff --git a/packages/ds-theme/src/native-elements/mark.less b/packages/ds-theme/src/native-elements/mark.less new file mode 100644 index 0000000000..8f5d85a54d --- /dev/null +++ b/packages/ds-theme/src/native-elements/mark.less @@ -0,0 +1,8 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/mark'; + +kbd { + color: @comp-badge-label-color-fg-neutral-bold; + background: @comp-badge-container-color-bg-neutral-bold; + border-radius: @comp-badge-container-radius-md; + box-shadow: none; +} diff --git a/packages/ds-theme/src/native-elements/textarea.less b/packages/ds-theme/src/native-elements/textarea.less new file mode 100644 index 0000000000..facc9b0fd7 --- /dev/null +++ b/packages/ds-theme/src/native-elements/textarea.less @@ -0,0 +1,6 @@ +@import '@refinitiv-ui/halo-theme/src/native-elements/textarea'; +@import '../shared-styles/placeholder'; + +textarea { + .placeholder; +} diff --git a/packages/ds-theme/src/shared-styles/button.less b/packages/ds-theme/src/shared-styles/button.less new file mode 100644 index 0000000000..8f26690b36 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/button.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/button'; diff --git a/packages/ds-theme/src/shared-styles/checkbox.less b/packages/ds-theme/src/shared-styles/checkbox.less new file mode 100644 index 0000000000..aff270bc8a --- /dev/null +++ b/packages/ds-theme/src/shared-styles/checkbox.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/checkbox'; diff --git a/packages/ds-theme/src/shared-styles/close-button.less b/packages/ds-theme/src/shared-styles/close-button.less new file mode 100644 index 0000000000..521d3d8345 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/close-button.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/close-button'; diff --git a/packages/ds-theme/src/shared-styles/defaults.less b/packages/ds-theme/src/shared-styles/defaults.less new file mode 100644 index 0000000000..8b756e6780 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/defaults.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/defaults'; diff --git a/packages/ds-theme/src/shared-styles/grid.less b/packages/ds-theme/src/shared-styles/grid.less new file mode 100644 index 0000000000..46d5e731f4 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/grid.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/grid'; diff --git a/packages/ds-theme/src/shared-styles/header.less b/packages/ds-theme/src/shared-styles/header.less new file mode 100644 index 0000000000..2707695749 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/header.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/header'; diff --git a/packages/ds-theme/src/shared-styles/headings.less b/packages/ds-theme/src/shared-styles/headings.less new file mode 100644 index 0000000000..fdecbe60c8 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/headings.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/headings'; diff --git a/packages/ds-theme/src/shared-styles/icon.less b/packages/ds-theme/src/shared-styles/icon.less new file mode 100644 index 0000000000..49b24397ef --- /dev/null +++ b/packages/ds-theme/src/shared-styles/icon.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/icon'; diff --git a/packages/ds-theme/src/shared-styles/input.less b/packages/ds-theme/src/shared-styles/input.less new file mode 100644 index 0000000000..e61a225853 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/input.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/input'; diff --git a/packages/ds-theme/src/shared-styles/placeholder.less b/packages/ds-theme/src/shared-styles/placeholder.less new file mode 100644 index 0000000000..c031c97312 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/placeholder.less @@ -0,0 +1,41 @@ +.placeholder() { + &::placeholder { + color: @cont-color-common-fg-generic-subtle; + } + &::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + color: @cont-color-common-fg-generic-subtle; + } + &::-moz-placeholder { + /* Firefox 19+ */ + color: @cont-color-common-fg-generic-subtle; + } + &:-ms-input-placeholder { + /* IE 10+ */ + color: @cont-color-common-fg-generic-subtle; + } + &:-moz-placeholder { + /* Firefox 18- */ + color: @cont-color-common-fg-generic-subtle; + } + + &[disabled]::placeholder { + color: @input-disabled-text-color; + } + &[disabled]::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + color: @input-disabled-text-color; + } + &[disabled]::-moz-placeholder { + /* Firefox 19+ */ + color: @input-disabled-text-color; + } + &[disabled]:-ms-input-placeholder { + /* IE 10+ */ + color: @input-disabled-text-color; + } + &[disabled]:-moz-placeholder { + /* Firefox 18- */ + color: @input-disabled-text-color; + } +} diff --git a/packages/ds-theme/src/shared-styles/scrollbar.less b/packages/ds-theme/src/shared-styles/scrollbar.less new file mode 100644 index 0000000000..0048d2b5b7 --- /dev/null +++ b/packages/ds-theme/src/shared-styles/scrollbar.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/scrollbar'; diff --git a/packages/ds-theme/src/shared-styles/shapes.less b/packages/ds-theme/src/shared-styles/shapes.less new file mode 100644 index 0000000000..faedadcabe --- /dev/null +++ b/packages/ds-theme/src/shared-styles/shapes.less @@ -0,0 +1 @@ +@import '@refinitiv-ui/halo-theme/src/shared-styles/shapes'; diff --git a/packages/ds-theme/src/variables.less b/packages/ds-theme/src/variables.less new file mode 100644 index 0000000000..aafbc410a5 --- /dev/null +++ b/packages/ds-theme/src/variables.less @@ -0,0 +1,24 @@ +// Core +@import './web-design-tokens/core.less'; +@import './web-design-tokens/contextual.less'; + +// Component Tokens +@import './web-design-tokens/component/accordion.less'; +@import './web-design-tokens/component/badge.less'; +@import './web-design-tokens/component/button.less'; +@import './web-design-tokens/component/close-button.less'; +@import './web-design-tokens/component/checkbox.less'; +@import './web-design-tokens/component/dialog.less'; +@import './web-design-tokens/component/dialog-header.less'; +@import './web-design-tokens/component/divider.less'; +@import './web-design-tokens/component/icon.less'; +@import './web-design-tokens/component/menu.less'; +@import './web-design-tokens/component/popover.less'; +@import './web-design-tokens/component/radio.less'; +@import './web-design-tokens/component/remove-button.less'; +@import './web-design-tokens/component/toggle-button.less'; +@import './web-design-tokens/component/toggle-tag.less'; +@import './web-design-tokens/component/tooltip.less'; +@import './web-design-tokens/component/tree.less'; + + diff --git a/packages/ds-theme/src/variants/dark/variables.less b/packages/ds-theme/src/variants/dark/variables.less new file mode 100644 index 0000000000..0e11116004 --- /dev/null +++ b/packages/ds-theme/src/variants/dark/variables.less @@ -0,0 +1,8 @@ +@import (reference) '../../variables'; +@import '../light/variables'; +@import '../../web-design-tokens/overrides/color/dark.less'; + +@global-text-selection-background : #5d84b3; +@scrollbar-thumb-background-color : #9a9a9a; +@scrollbar-thumb-hover-background-color : #9a9a9a; +@scrollbar-thumb-active-background-color : #9a9a9a; diff --git a/packages/ds-theme/src/variants/light/variables.less b/packages/ds-theme/src/variants/light/variables.less new file mode 100644 index 0000000000..28b89e89cd --- /dev/null +++ b/packages/ds-theme/src/variants/light/variables.less @@ -0,0 +1,470 @@ +@import (reference) '../../variables'; + +// Primary colours +@scheme-color-primary : @cont-color-common-container-brand-base; +@scheme-color-secondary : @cont-color-common-container-secondary-base; +@scheme-color-tertiary : @cont-color-common-container-tertiary-base; +@scheme-color-complementary : @cont-color-common-container-neutral-subtle; + +// States +@scheme-color-info : @cont-color-status-bg-info-base; +@scheme-color-confirm : @cont-color-status-bg-positive-base; +@scheme-color-warning : @cont-color-status-bg-warning-base; +@scheme-color-error : @cont-color-status-bg-negative-base; + +// Globals +@global-text-color : @cont-color-common-fg-generic-moderate; +@global-background-color : @cont-color-common-container-surface-layer-1; + +@global-text-selection-color : currentColor; +@global-text-selection-background : #B4D5FE; // Unable to reset to default. Fix to default chrome/safari + +@global-text-mark-color : @global-text-selection-color; +@global-text-mark-background : @global-text-selection-background; + +// Controls +// TODO: All on layer-1 ? +@control-text-color : @cont-color-field-fg-on-layer-1-moderate; +@control-background-color : @cont-color-field-bg-on-layer-1-base; +@control-border-color : @cont-color-field-border-on-layer-1-moderate; + +@control-border-radius : @cont-radius-control; + +@control-error-color : @cont-color-common-container-negative-base; +@control-warning-color : @cont-color-common-container-warning-base; + +// TODO: Double check +@control-hover-error-color : lighten(@control-error-color, 20%); +@control-hover-warning-color : lighten(@control-warning-color, 20%); + +// Buttons +@button-border-width : @comp-button-container-border-width-md; +@button-border-radius : @comp-button-container-radius-md; +@button-icon-color : @comp-button-icon-color-fg-neutral-enabled; +@button-text-color : @comp-button-label-color-fg-neutral-enabled; +@button-border-color : @comp-button-container-color-border-neutral-enabled; +@button-background-color : @comp-button-container-color-bg-neutral-enabled; +@button-box-shadow : @comp-button-container-elevation-neutral-enabled; + +@button-disabled-text-color : @comp-button-label-color-fg-neutral-disabled; +@button-disabled-background-color : @comp-button-container-color-bg-neutral-disabled; +@button-disabled-border-color : @comp-button-container-color-border-neutral-disabled; +@button-disabled-box-shadow : @comp-button-container-elevation-neutral-disabled; + +@button-hover-text-color : @comp-button-label-color-fg-neutral-hover; +@button-hover-background-color : @comp-button-container-color-bg-neutral-hover; +@button-hover-border-color : @comp-button-container-color-border-neutral-hover; +@button-hover-box-shadow : @comp-button-container-elevation-neutral-hover; + +@button-pressed-text-color : @comp-button-label-color-fg-neutral-pressed; +@button-pressed-background-color : @comp-button-container-color-bg-neutral-pressed; +@button-pressed-border-color : @comp-button-container-color-border-neutral-pressed; +@button-pressed-box-shadow : @comp-button-container-elevation-neutral-pressed; + +@button-focused-text-color : @comp-button-label-color-fg-neutral-focus-enabled; +@button-focused-background-color : @comp-button-container-color-bg-neutral-focus-enabled; +@button-focused-border-color : @comp-button-container-color-border-neutral-focus-enabled; +@button-focused-box-shadow : @comp-button-container-elevation-neutral-focus; + +@button-toggle-text-color : @comp-toggle-button-label-color-fg-neutral-enabled; +@button-toggle-background-color : @comp-toggle-button-container-color-bg-neutral-enabled; +@button-toggle-border-color : @comp-toggle-button-container-color-border-neutral-enabled; +@button-toggle-box-shadow : @comp-toggle-button-container-elevation-neutral-enabled; + +@button-toggle-active-text-color : @comp-toggle-button-label-color-fg-neutral-checked-enabled; +@button-toggle-active-background-color : @comp-toggle-button-container-color-bg-neutral-checked-enabled; +@button-toggle-active-border-color : @comp-toggle-button-container-color-border-neutral-checked-enabled; +@button-toggle-active-box-shadow : @comp-toggle-button-container-elevation-neutral-checked-enabled; + +// CTA +// TODO: Is CTA = primary ? +@button-cta-text-color : @comp-button-label-color-fg-primary-enabled; +@button-cta-background-color : @comp-button-container-color-bg-primary-enabled; +@button-cta-border-color : @comp-button-container-color-border-primary-enabled; +@button-cta-box-shadow : @comp-button-container-elevation-primary-enabled; + +// List +@list-text-color : @comp-menu-item-label-color-fg-single-enabled; +@list-background-color : @cont-color-common-container-misc-transparent; + +// List item +@list-item-focus-text-color : @comp-menu-item-label-color-fg-single-pressed; +@list-item-focus-background-color : @comp-menu-item-container-color-bg-single-pressed; // TODO: No focus token in tree item +@list-item-selected-text-color : @comp-menu-item-label-color-fg-single-pressed; +@list-item-selected-background-color : @comp-menu-item-container-color-bg-single-pressed; +@list-item-disabled-text-color : @comp-menu-item-label-color-fg-single-disabled; +@list-item-header-text-color : @comp-menu-group-header-label-color-fg; +@list-item-header-background-color : @comp-menu-item-container-color-bg-single-enabled; +@list-item-header-border : @comp-menu-item-container-color-border-single-enabled; +@list-item-text-highlighted-color : @comp-menu-item-label-color-fg-single-hover; +@list-item-highlighted-background-color : @comp-menu-item-container-color-bg-single-hover; + +// Tree +@tree-item-highlighted-text-color : @list-item-text-highlighted-color; + +// Tree Item +@tree-menu-item-background-color : @comp-tree-item-container-color-bg-leaf-child-enabled; +@tree-menu-item-group-background-color : @comp-tree-item-container-color-bg-leaf-parent-enabled; +@tree-menu-item-group-hover-text-color : @comp-tree-item-label-color-fg-leaf-parent-hover; +@tree-menu-item-group-hover-background-color : @comp-tree-item-container-color-bg-leaf-parent-hover; // TODO: Looks weird, it looks like there's no highlight on parent ? + +// Tooltip +@tooltip-text-color : @comp-tooltip-message-color-fg-base; +@tooltip-background-color : @comp-tooltip-container-color-bg-base; +@tooltip-border-color : @comp-tooltip-container-color-border-base; + +// Panel +@panel-background-color : @cont-color-common-container-surface-layer-4; // TODO: Need to double check (Same as @comp-menu-container-color-bg) + +// Overlay +@overlay-background-color : @comp-popover-container-color-bg-base; + +// Overlay Menu +@overlay-menu-background-color : @comp-menu-container-color-bg; + +// Input +@input-box-shadow : @cont-elevation-field-base; +@input-border-radius : @cont-radius-field; +@input-text-color : @cont-color-common-fg-generic-bold; +@input-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@input-border-color : @cont-color-common-container-surface-on-layer-1-moderate; +@input-hover-text-color : @cont-color-common-fg-generic-bold ; +@input-hover-border-color : @cont-color-common-container-surface-on-layer-1-bold; +@input-hover-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@input-focused-text-color : @cont-color-common-fg-generic-bold; +@input-focused-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@input-focused-border-color : @cont-color-common-container-misc-focus; +@input-disabled-text-color : @cont-color-common-fg-generic-disabled-on-disabled-bold; +@input-disabled-border-color : @cont-color-common-container-surface-on-layer-1-moderate; +@input-disabled-background-color : @cont-color-common-container-surface-on-layer-1-subtle; +@input-readonly-border-color : @cont-color-common-container-surface-on-layer-1-moderate; +@input-readonly-background-color : @cont-color-common-container-surface-on-layer-1-minimal; + +// Separators +@separator-color : @comp-divider-line-color-border-on-layer-1-subtle; + +// Select +@select-background-color : @overlay-background-color; + +// Checkbox and Radio +@checkbox-checked-color : @comp-checkbox-checkmark-container-color-fg-enabled; + +// Headers +@header-level1-bg-color : @cont-color-common-container-surface-on-layer-1-minimal; +@header-level2-bg-color : @cont-color-common-container-surface-on-layer-1-minimal; +@header-level3-bg-color : @cont-color-common-container-surface-on-layer-1-minimal; +@header-level4-bg-color : @cont-color-common-container-surface-on-layer-1-minimal; + +// Calendar +@calendar-background-color : @cont-color-common-container-surface-layer-4; +@calendar-body-background-color : @cont-color-common-container-surface-on-layer-4-subtle; +@calendar-header-text-color : @cont-color-common-fg-generic-subtle; +@calendar-header-background-color : @calendar-cell-background-color; +@calendar-header-border-color : @scheme-color-tertiary; +@calendar-cell-text-color : @cont-color-common-fg-generic-bold; +@calendar-cell-background-color : @cont-color-common-container-surface-on-layer-4-minimal; +@calendar-cell-hover-text-color : @cont-color-control-fg-on-moderate; +@calendar-cell-hover-background-color : @cont-color-control-bg-bold; +@calendar-selected-text-color : @cont-color-control-fg-on-moderate; +@calendar-selected-background-color : @cont-color-control-bg-base; +@calendar-selected-range-border-color : @cont-color-control-border-bold; +@calendar-selected-range-text-color : @cont-color-common-fg-neutral-on-neutral-bold-alt; +@calendar-selected-range-background-color : @cont-color-common-container-neutral-subtle; +@calendar-selected-range-hover-border-color : @cont-color-control-border-base; +@calendar-selected-range-hover-text-color : @cont-color-common-fg-primary-on-primary-bold-alt; +@calendar-selected-range-hover-background-color : @cont-color-common-container-neutral-minimal; +@calendar-cell-today-text-color : @cont-color-common-fg-generic-bold; +@calendar-cell-today-background-color : @cont-color-common-container-surface-on-layer-4-moderate; +@calendar-cell-today-hover-text-color : @cont-color-control-fg-on-moderate; +@calendar-cell-idle-text-color : @cont-color-common-fg-generic-subtle; +@calendar-cell-idle-background-color : @cont-color-common-container-surface-on-layer-4-subtle; +@calendar-cell-idle-hover-border-color : @cont-color-common-container-surface-on-layer-4-minimal; +@calendar-cell-idle-hover-text-color : @cont-color-common-fg-primary-on-primary-bold-alt; +@calendar-cell-idle-hover-background-color : @cont-color-common-container-surface-on-layer-4-minimal; +@calendar-cell-range-today-text-color : @button-cta-text-color; +@calendar-cell-press-background-color : @cont-color-control-bg-moderate; + +// Search List Item (for auto-suggest) +// TODO: WIP +@search-list-background-color : @overlay-background-color; +@search-list-hover-background-color : @list-item-selected-background-color; +@search-list-hover-color : @list-item-selected-text-color; +@search-list-color : @global-text-color; +@search-list-description-color : @control-text-color; +@search-list-description-hover-color : @global-text-color; +@search-list-more-search-background-color : @panel-background-color; +@search-list-more-search-hover-background-color : @search-list-hover-background-color; +@search-list-more-search-color : @global-text-color; + + +// Dialog +@dialog-content-background-color : @comp-dialog-container-color-bg-modal-enabled; +@dialog-footer-background-color : @comp-dialog-container-color-bg-modal-enabled; +@dialog-border-color : @cont-color-common-container-misc-transparent; + +// Toggle +@toggle-switch-background-color : @cont-color-control-bg-minimal; +@toggle-border-color : @cont-color-control-border-minimal; +@toggle-font-weight : @core-typography-font-weight-medium; + +// Pill +@pill-background-color : @comp-toggle-tag-inner-container-color-bg-enabled; +@pill-border-color : @comp-toggle-tag-inner-container-color-border-enabled; +@pill-toggle-active-border-color : @comp-toggle-tag-inner-container-color-border-pressed; +@pill-default-close-color : @comp-toggle-tag-remove-button-icon-color-fg-checked-enabled; + +// Slider +@slider-track-color : @cont-color-common-container-surface-on-layer-1-subtle; +@slider-track-disabled-color : @cont-color-common-container-misc-disabled; +@slider-step-color : @cont-color-control-bg-base; +@slider-thumb-color : @cont-color-control-bg-base; +@slider-marker-background-color : @slider-thumb-color; +@slider-marker-text-color : @control-text-color; + +@slider-track-fill-color : @cont-color-control-bg-base; +@slider-thumb-hover-color : @cont-color-control-bg-moderate; +@slider-thumb-active-color : @cont-color-control-bg-bold; // @button-pressed-background-color is transparent; +@slider-thumb-border-color : @cont-color-control-border-minimal; +@slider-thumb-hover-border-color : @cont-color-action-border-neutral-base; +@slider-thumb-active-border-color : @cont-color-control-border-subtle ; + + +// Table/Grid +@grid-border-color : @cont-color-common-container-surface-on-layer-1-subtle; +@grid-header-text-color : @cont-color-common-fg-generic-bold; +@grid-header-background-color : @cont-color-common-container-surface-layer-1; +@grid-header-border-color : @grid-header-background-color; +@grid-header-hover-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@grid-row-text-color : @global-text-color; +@grid-row-background-color : @global-background-color; +@grid-row-hover-text-color : @grid-row-text-color; +@grid-row-hover-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@grid-row-active-text-color : @grid-row-text-color; +@grid-row-active-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@grid-row-active-border-width : @grid-border-width; +@grid-row-active-border-color : @scheme-color-primary; +@grid-row-focus-border-color : @cont-color-common-container-neutral-bold; +@grid-row-focus-border : @grid-row-focus-border-width solid @grid-row-focus-border-color; + +// Grid +@grid-text-color : @global-text-color; +@grid-header-alt-background-color : @header-background-color; +@grid-row-alternate-background-color : darken(@grid-row-background-color, 2%); + +// Grid column +// - Column selection +@grid-column-active-title-border-color : invalidColor; // selected column title divider +@grid-column-active-border-color : @cont-color-common-container-primary-base; // selection boundary, overrides global-focus-bordercolor + +// - Column separator (between pined and unpined column) +@grid-column-separator-background-color : @cont-color-common-container-surface-on-layer-1-bold; + +// Grid row +// - Row group header +@grid-row-header-background-color : @cont-color-common-container-surface-layer-1; +@grid-expended-row-header-color : @global-text-color; + +// - Row group tag +@grid-tag-background-color : @cont-color-common-container-neutral-bold; +@grid-expanded-tag-background-color : @cont-color-common-container-neutral-bold; + +// Grid dragging UI +@grid-guideline-background-color : @cont-color-action-bg-primary-base; // Placeholder guide +@grid-drag-box-border-color : @cont-color-common-container-neutral-bold; +@grid-drag-box-background-color : @cont-color-common-container-surface-on-layer-1-minimal; +@grid-drag-indicator-border-color : @cont-color-common-container-neutral-bold; // Border of dragging selected column + +// Grid icons +// - Filter icon, Stack icon +@grid-title-icon-color : @cont-color-common-fg-primary-moderate; +@grid-title-icon-hover-color : @cont-color-common-fg-primary-bold; +@grid-title-icon-active-color : @cont-color-common-container-primary-base; // active filtering + +// - Sort icon +@grid-title-sort-icon-color : @cont-color-common-container-primary-base; + +// - Tiny filter icon +@grid-title-dot-icon-color : @cont-color-common-container-primary-base; + +// - Row menu icon, column menu icon +@grid-menu-icon-color : @cont-color-common-fg-generic-bold-inverse; +@grid-menu-icon-hover-color : @cont-color-common-fg-generic-subtle-inverse; +@grid-menu-icon-background-color : @cont-color-common-container-neutral-bold; +@grid-menu-icon-hover-background-color : @cont-color-common-container-neutral-bold; + +// - Row more icon +@grid-row-more-icon-color : @grid-header-text-color; +@grid-row-more-icon-hover-color : @cont-color-common-fg-generic-bold; + +// - In cell editor +@grid-input-text-color : @grid-row-text-color; +@grid-input-background-color : @cont-color-common-container-surface-layer-1; +@grid-input-selection-text-color : @cont-color-common-fg-generic-bold-inverse; +@grid-input-selection-background-color : @cont-color-common-container-misc-focus; + +// Tabs +@tab-background-color : @cont-color-navigation-bg-on-layer-1-minimal; +@tab-text-color : @cont-color-navigation-fg-on-minimal; +@tab-border-color : @cont-color-common-container-surface-layer-1; +@tab-outline : @control-outline; +@tab-box-shadow : @global-box-shadow; +@tab-hover-text-color : @cont-color-navigation-fg-on-minimal; +@tab-hover-background-color : @cont-color-navigation-bg-on-layer-1-moderate; +@tab-hover-box-shadow : @button-hover-box-shadow; +@tab-disabled-text-color : @cont-color-common-fg-generic-disabled-on-disabled-bold; +@tab-disabled-background-color : @cont-color-common-container-misc-disabled; +@tab-active-text-color : @cont-color-common-fg-primary-on-primary-bold-inverse; +@tab-active-background-color : @cont-color-common-container-primary-base; +@tab-active-hover-background-color : @cont-color-common-container-primary-moderate; +@tab-active-focused-background-color : @comp-button-container-color-bg-primary-hover; +@tab-active-pressed-background-color : @cont-color-common-container-primary-bold; +@tab-pressed-text-color : @cont-color-navigation-fg-on-minimal; +@tab-pressed-background-color : @cont-color-navigation-bg-on-layer-1-bold; +@tab-focused-text-color : @cont-color-navigation-fg-on-minimal; +@tab-focused-box-shadow : none; +@tab-vertical-border-color : @control-border-color; + +@tab-level2-border-color : @tab-border-color; +@tab-level2-bg-color : @header-level4-bg-color; +@tab-level2-active-bg-color : @scheme-color-primary; +@tab-level3-text-color : @tab-text-color; +@tab-level3-active-text-color : @tab-text-color; + +// Tab bar +@tab-bar-background-color : @cont-color-common-container-surface-on-layer-1-minimal; + +// Data viz +@dataviz-color-primary : @scheme-color-primary; +@dataviz-color-secondary : @scheme-color-secondary; +@dataviz-color-complementary : @scheme-color-complementary; +@dataviz-color-tertiary : @scheme-color-tertiary; + +// Loader +@loader-accent-color : @scheme-color-primary; +@loader-bar-color : @separator-color; +@loader-shape-color : @cont-color-common-container-surface-on-layer-1-moderate; + +// Data viz - standard +// Keep the mapping as these vars shouldn't be used +// Consider to use contextual tokens directly e.g. @cont-color-action-bg-positive-base +@dataviz-color-red : @color-dataviz-red; +@dataviz-color-orange : @color-dataviz-orange; +@dataviz-color-yellow : @color-dataviz-yellow; +@dataviz-color-green : @color-dataviz-green; +@dataviz-color-blue : @color-dataviz-blue; +@dataviz-color-cyan : @color-dataviz-cyan; +@dataviz-color-purple : @color-dataviz-purple; +@dataviz-color-pink : @color-dataviz-pink; +@dataviz-color-coral : @color-dataviz-coral; +@dataviz-color-grey : @color-dataviz-grey; +@dataviz-color-black : @color-black; +@dataviz-color-white : @color-white; + +// Data viz - light +// Keep the mapping as these vars shouldn't be used +// Consider to use contextual tokens directly e.g. @cont-color-action-bg-positive-minimal +@dataviz-color-lightred : @color-dataviz-lightred; +@dataviz-color-lightorange : @color-dataviz-lightorange; +@dataviz-color-lightyellow : @color-dataviz-lightyellow; +@dataviz-color-lightgreen : @color-dataviz-lightgreen; +@dataviz-color-lightblue : @color-dataviz-lightblue; +@dataviz-color-lightcyan : @color-dataviz-lightcyan; +@dataviz-color-lightpurple : @color-dataviz-lightpurple; +@dataviz-color-lightpink : @color-dataviz-lightpink; +@dataviz-color-lightgrey : @color-dataviz-lightgrey; +@dataviz-color-lightcoral : @color-dataviz-lightcoral; + +// Data viz - dark +// Keep the mapping as these vars shouldn't be used +// Consider to use contextual tokens directly e.g. @cont-color-action-bg-positive-moderate +@dataviz-color-darkred : @color-dataviz-darkred; +@dataviz-color-darkorange : @color-dataviz-darkorange; +@dataviz-color-darkyellow : @color-dataviz-darkyellow; +@dataviz-color-darkgreen : @color-dataviz-darkgreen; +@dataviz-color-darkblue : @color-dataviz-darkblue; +@dataviz-color-darkcyan : @color-dataviz-darkcyan; +@dataviz-color-darkpurple : @color-dataviz-darkpurple; +@dataviz-color-darkpink : @color-dataviz-darkpink; +@dataviz-color-darkcoral : @color-dataviz-darkcoral; +@dataviz-color-darkgrey : @color-dataviz-darkgrey; + +// Data viz - standard, numbered +@dataviz-color-1 : @cont-color-data-viz-categorical-bg-category-1; +@dataviz-color-2 : @cont-color-data-viz-categorical-bg-category-2; +@dataviz-color-3 : @cont-color-data-viz-categorical-bg-category-3; +@dataviz-color-4 : @cont-color-data-viz-categorical-bg-category-4; +@dataviz-color-5 : @cont-color-data-viz-categorical-bg-category-5; +@dataviz-color-6 : @cont-color-data-viz-categorical-bg-category-6; +@dataviz-color-7 : @cont-color-data-viz-categorical-bg-category-7; +@dataviz-color-8 : @cont-color-data-viz-categorical-bg-category-8; +@dataviz-color-9 : @cont-color-data-viz-categorical-bg-category-9; +@dataviz-color-10 : @cont-color-data-viz-categorical-bg-category-10; +@dataviz-color-11 : @cont-color-data-viz-categorical-bg-category-11; +@dataviz-color-12 : @cont-color-data-viz-categorical-bg-category-12; +@dataviz-color-13 : @cont-color-data-viz-categorical-bg-category-13; +@dataviz-color-14 : @cont-color-data-viz-categorical-bg-category-14; +@dataviz-color-15 : @cont-color-data-viz-categorical-bg-category-15; +@dataviz-color-16 : @cont-color-data-viz-categorical-bg-category-16; +@dataviz-color-17 : @cont-color-data-viz-categorical-bg-category-17; +@dataviz-color-18 : @cont-color-data-viz-categorical-bg-category-18; +@dataviz-color-19 : @cont-color-data-viz-categorical-bg-category-19; +@dataviz-color-20 : @cont-color-data-viz-categorical-bg-category-20; +@dataviz-color-21 : @cont-color-data-viz-categorical-bg-category-21; +@dataviz-color-22 : @cont-color-data-viz-categorical-bg-category-22; +@dataviz-color-23 : @cont-color-data-viz-categorical-bg-category-23; +@dataviz-color-24 : @cont-color-data-viz-categorical-bg-category-24; +@dataviz-color-25 : @cont-color-data-viz-categorical-bg-category-6; // workaround as only 24 colors in DS + +@dataviz-color-scale-negative : @cont-color-data-viz-diverging-bg-positive-negative-negative-600; +@dataviz-color-scale-positive : @cont-color-data-viz-diverging-bg-positive-negative-positive-600; +@dataviz-color-scale-neutral : @cont-color-status-bg-neutral-base; +@dataviz-color-scale-low-negative : @cont-color-data-viz-diverging-bg-positive-negative-negative-400; +@dataviz-color-scale-low-positive : @cont-color-data-viz-diverging-bg-positive-negative-positive-400; +@dataviz-color-scale-range : @cont-color-data-viz-categorical-bg-category-1; + +// Movement colours profile (NEGATIVE) +@negative-color-american : @cont-color-status-bg-negative-base; +@negative-color-asian1 : @cont-color-status-bg-positive-base; +@negative-color-asian2 : @cont-color-status-bg-negative-base; +@negative-color-european : @cont-color-status-bg-negative-base; + +// Movement colours profile (NEUTRAL) +@neutral-color-american : @cont-color-status-bg-neutral-base; +@neutral-color-asian1 : @cont-color-status-bg-neutral-base; +@neutral-color-asian2 : @cont-color-status-bg-positive-base; +@neutral-color-european : @cont-color-status-bg-positive-base; + +// Movement colours profile (POSITIVE) +@positive-color-american : @cont-color-status-bg-positive-base; +@positive-color-asian1 : @cont-color-status-bg-negative-base; +@positive-color-asian2 : @color-dataviz-cyan; +@positive-color-european : @color-dataviz-cyan; + +// Tick colours (NEGATIVE) +@tickdown-color-american : @cont-color-status-bg-negative-base; +@tickdown-color-asian1 : @cont-color-status-bg-positive-base; +@tickdown-color-asian2 : @cont-color-status-bg-negative-base; +@tickdown-color-european : @cont-color-status-bg-negative-base; + +// Tick colours (POSITIVE) +@tickup-color-american : @cont-color-status-bg-positive-base; +@tickup-color-asian1 : @cont-color-status-bg-negative-base; +@tickup-color-asian2 : @cont-color-status-bg-positive-base; +@tickup-color-european : @cont-color-status-bg-positive-base; + +// Tick text colour +@tick-text-color : @cont-color-status-fg-on-positive-base; // very likely that all statuses can use the same color + +// Links +@link-hover-text-color : @cont-color-common-fg-primary-moderate; +@link-text-color : @cont-color-common-fg-primary-bold; +@link-visited-text-color : @cont-color-common-fg-tertiary-moderate; + +// Scrollbar +@scrollbar-size : 10px; +@scrollbar-thumb-border-radius : 6px; +@scrollbar-thumb-background-color : #7d7d7d; +@scrollbar-thumb-hover-background-color : #7d7d7d; +@scrollbar-thumb-active-background-color : #7d7d7d; +@scrollbar-track-border-color : transparent; +@scrollbar-track-background-color : transparent; diff --git a/packages/ds-theme/src/web-design-tokens/component/accordion.less b/packages/ds-theme/src/web-design-tokens/component/accordion.less new file mode 100644 index 0000000000..c4f383fb78 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/accordion.less @@ -0,0 +1,76 @@ +// Do not edit directly, this file was auto-generated. + +@comp-accordion-item-header-indicator-motion-transform-rotate-collapsed: 0deg; +@comp-accordion-item-header-indicator-motion-transform-rotate-expanded: 180deg; +@comp-accordion-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-accordion-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-accordion-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-accordion-container-color-bg-base: @cont-color-common-container-misc-transparent; +@comp-accordion-container-color-border-base: @cont-color-common-container-misc-transparent; +@comp-accordion-container-border-width-sm: @cont-border-width-common-none; +@comp-accordion-container-border-width-md: @cont-border-width-common-none; +@comp-accordion-container-border-width-lg: @cont-border-width-common-none; +@comp-accordion-container-radius-sm: @cont-radius-common-none; +@comp-accordion-container-radius-md: @cont-radius-common-none; +@comp-accordion-container-radius-lg: @cont-radius-common-none; +@comp-accordion-item-header-container-color-bg-enabled: @cont-color-menu-bg-on-layer-1-minimal; +@comp-accordion-item-header-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-accordion-item-header-container-color-border-base-enabled: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-border-base-hover: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-border-base-pressed: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-border-base-disabled: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-border-base-first-child: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-border-divider-first-child: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-radius-sm: @cont-radius-common-none; +@comp-accordion-item-header-container-radius-md: @cont-radius-common-none; +@comp-accordion-item-header-container-radius-lg: @cont-radius-common-none; +@comp-accordion-item-header-container-elevation-focus: @cont-elevation-common-focus-inset-base; +@comp-accordion-item-header-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-accordion-item-header-indicator-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-accordion-item-header-indicator-typography-sm: @cont-typography-common-icon-base-sm; +@comp-accordion-item-header-indicator-typography-md: @cont-typography-common-icon-base-md; +@comp-accordion-item-header-indicator-typography-lg: @cont-typography-common-icon-base-lg; +@comp-accordion-item-header-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-accordion-item-header-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-accordion-item-header-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-accordion-item-header-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-accordion-item-panel-container-color-bg-base: @cont-color-common-container-misc-transparent; +@comp-accordion-item-header-container-color-bg-hover: @cont-color-menu-bg-on-layer-1-subtle; +@comp-accordion-item-header-container-color-bg-pressed: @cont-color-menu-bg-on-layer-1-moderate; +@comp-accordion-item-header-container-color-border-divider-enabled: @cont-color-menu-border-on-layer-1-moderate; +@comp-accordion-item-header-container-color-border-divider-hover: @cont-color-menu-border-on-layer-1-moderate; +@comp-accordion-item-header-container-color-border-divider-pressed: @cont-color-menu-border-on-layer-1-moderate; +@comp-accordion-item-header-container-color-border-divider-disabled: @cont-color-menu-border-on-layer-1-moderate; +@comp-accordion-item-header-container-border-width-block-start-sm: @cont-border-width-menu-base; +@comp-accordion-item-header-container-border-width-block-start-md: @cont-border-width-menu-base; +@comp-accordion-item-header-container-border-width-block-start-lg: @cont-border-width-menu-base; +@comp-accordion-item-header-label-color-fg-enabled: @cont-color-menu-fg-on-minimal; +@comp-accordion-item-header-label-color-fg-hover: @cont-color-menu-fg-on-moderate; +@comp-accordion-item-header-label-color-fg-pressed: @cont-color-menu-fg-on-bold; +@comp-accordion-item-header-label-typography-sm: @cont-typography-menu-bold-sm; +@comp-accordion-item-header-label-typography-md: @cont-typography-menu-bold-md; +@comp-accordion-item-header-label-typography-lg: @cont-typography-menu-bold-lg; +@comp-accordion-item-header-indicator-color-fg-enabled: @cont-color-menu-fg-on-minimal; +@comp-accordion-item-header-indicator-color-fg-hover: @cont-color-menu-fg-on-moderate; +@comp-accordion-item-header-indicator-color-fg-pressed: @cont-color-menu-fg-on-bold; +@comp-accordion-item-header-icon-color-fg-enabled: @cont-color-menu-fg-on-minimal; +@comp-accordion-item-header-icon-color-fg-hover: @cont-color-menu-fg-on-moderate; +@comp-accordion-item-header-icon-color-fg-pressed: @cont-color-menu-fg-on-bold; +@comp-accordion-item-panel-container-spacing-padding-inline-sm: @cont-spacing-common-padding-inset-200; +@comp-accordion-item-panel-container-spacing-padding-inline-md: @cont-spacing-common-padding-inset-300; +@comp-accordion-item-panel-container-spacing-padding-inline-lg: @cont-spacing-common-padding-inset-300; +@comp-accordion-item-panel-container-spacing-padding-block-start-sm: @cont-spacing-common-padding-inset-100; +@comp-accordion-item-panel-container-spacing-padding-block-start-md: @cont-spacing-common-padding-inset-200; +@comp-accordion-item-panel-container-spacing-padding-block-start-lg: @cont-spacing-common-padding-inset-200; +@comp-accordion-item-panel-container-spacing-padding-block-end-sm: @cont-spacing-common-padding-inset-400; +@comp-accordion-item-panel-container-spacing-padding-block-end-md: @cont-spacing-common-padding-inset-500; +@comp-accordion-item-panel-container-spacing-padding-block-end-lg: @cont-spacing-common-padding-inset-600; +@comp-accordion-item-header-container-spacing-padding-sm: @cont-spacing-menu-padding-sm; +@comp-accordion-item-header-container-spacing-padding-md: @cont-spacing-menu-padding-md; +@comp-accordion-item-header-container-spacing-padding-lg: @cont-spacing-menu-padding-lg; +@comp-accordion-item-header-container-spacing-gap-sm: @cont-spacing-menu-gap-sm; +@comp-accordion-item-header-container-spacing-gap-md: @cont-spacing-menu-gap-md; +@comp-accordion-item-header-container-spacing-gap-lg: @cont-spacing-menu-gap-lg; +@comp-accordion-item-header-container-sizing-min-block-sm: @cont-sizing-menu-sm; +@comp-accordion-item-header-container-sizing-min-block-md: @cont-sizing-menu-md; +@comp-accordion-item-header-container-sizing-min-block-lg: @cont-sizing-menu-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/avatar.less b/packages/ds-theme/src/web-design-tokens/component/avatar.less new file mode 100644 index 0000000000..276a421d4c --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/avatar.less @@ -0,0 +1,56 @@ +// Do not edit directly, this file was auto-generated. + +@comp-avatar-image-container-sizing-sm: 100%; +@comp-avatar-image-container-sizing-md: 100%; +@comp-avatar-image-container-sizing-lg: 100%; +@comp-avatar-container-color-bg-neutral: @cont-color-common-container-surface-on-layer-1-minimal; +@comp-avatar-container-color-bg-category-1: @cont-color-common-container-category-1-minimal; +@comp-avatar-container-color-bg-category-2: @cont-color-common-container-category-2-minimal; +@comp-avatar-container-color-bg-category-3: @cont-color-common-container-category-3-minimal; +@comp-avatar-container-color-bg-category-4: @cont-color-common-container-category-4-minimal; +@comp-avatar-container-color-bg-category-5: @cont-color-common-container-category-5-minimal; +@comp-avatar-container-color-bg-category-6: @cont-color-common-container-category-6-minimal; +@comp-avatar-container-color-bg-category-7: @cont-color-common-container-category-7-minimal; +@comp-avatar-container-color-bg-category-8: @cont-color-common-container-category-8-minimal; +@comp-avatar-container-color-border-neutral: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-avatar-container-color-border-category-1: @cont-color-common-container-category-1-subtle; +@comp-avatar-container-color-border-category-2: @cont-color-common-container-category-2-subtle; +@comp-avatar-container-color-border-category-3: @cont-color-common-container-category-3-subtle; +@comp-avatar-container-color-border-category-4: @cont-color-common-container-category-4-subtle; +@comp-avatar-container-color-border-category-5: @cont-color-common-container-category-5-subtle; +@comp-avatar-container-color-border-category-6: @cont-color-common-container-category-6-subtle; +@comp-avatar-container-color-border-category-7: @cont-color-common-container-category-7-subtle; +@comp-avatar-container-color-border-category-8: @cont-color-common-container-category-8-subtle; +@comp-avatar-container-radius-sm: @cont-radius-common-full; +@comp-avatar-container-radius-md: @cont-radius-common-full; +@comp-avatar-container-radius-lg: @cont-radius-common-full; +@comp-avatar-container-border-width-sm: @cont-border-width-common-subtle; +@comp-avatar-container-border-width-md: @cont-border-width-common-subtle; +@comp-avatar-container-border-width-lg: @cont-border-width-common-subtle; +@comp-avatar-initials-color-fg-neutral: @cont-color-common-fg-generic-subtle; +@comp-avatar-initials-color-fg-category-1: @cont-color-common-fg-category-1-moderate; +@comp-avatar-initials-color-fg-category-2: @cont-color-common-fg-category-2-moderate; +@comp-avatar-initials-color-fg-category-3: @cont-color-common-fg-category-3-moderate; +@comp-avatar-initials-color-fg-category-4: @cont-color-common-fg-category-4-moderate; +@comp-avatar-initials-color-fg-category-5: @cont-color-common-fg-category-5-moderate; +@comp-avatar-initials-color-fg-category-6: @cont-color-common-fg-category-6-moderate; +@comp-avatar-initials-color-fg-category-7: @cont-color-common-fg-category-7-moderate; +@comp-avatar-initials-color-fg-category-8: @cont-color-common-fg-category-8-moderate; +@comp-avatar-initials-typography-sm: @cont-typography-common-label-100-bold; +@comp-avatar-initials-typography-md: @cont-typography-common-label-200-bold; +@comp-avatar-initials-typography-lg: @cont-typography-common-label-300-bold; +@comp-avatar-icon-color-fg-neutral: @cont-color-common-fg-generic-subtle; +@comp-avatar-icon-color-fg-category-1: @cont-color-common-fg-category-1-moderate; +@comp-avatar-icon-color-fg-category-2: @cont-color-common-fg-category-2-moderate; +@comp-avatar-icon-color-fg-category-3: @cont-color-common-fg-category-3-moderate; +@comp-avatar-icon-color-fg-category-4: @cont-color-common-fg-category-4-moderate; +@comp-avatar-icon-color-fg-category-5: @cont-color-common-fg-category-5-moderate; +@comp-avatar-icon-color-fg-category-6: @cont-color-common-fg-category-6-moderate; +@comp-avatar-icon-color-fg-category-7: @cont-color-common-fg-category-7-moderate; +@comp-avatar-icon-color-fg-category-8: @cont-color-common-fg-category-8-moderate; +@comp-avatar-icon-typography-sm: @cont-typography-common-icon-emphasized-sm; +@comp-avatar-icon-typography-md: @cont-typography-common-icon-emphasized-md; +@comp-avatar-icon-typography-lg: @cont-typography-common-icon-emphasized-lg; +@comp-avatar-container-sizing-sm: @cont-sizing-component-sm; +@comp-avatar-container-sizing-md: @cont-sizing-component-md; +@comp-avatar-container-sizing-lg: @cont-sizing-component-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/badge.less b/packages/ds-theme/src/web-design-tokens/component/badge.less new file mode 100644 index 0000000000..e78b98a03a --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/badge.less @@ -0,0 +1,344 @@ +// Do not edit directly, this file was auto-generated. + +@comp-badge-container-icon-only-spacing-padding-xs: @cont-spacing-common-padding-inset-000; +@comp-badge-container-icon-only-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-badge-container-icon-only-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-badge-container-icon-only-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-badge-container-icon-only-spacing-gap-xs: @cont-spacing-common-gap-000; +@comp-badge-container-icon-only-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-badge-container-icon-only-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-badge-container-icon-only-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-badge-container-indicator-spacing-padding-xs: @cont-spacing-common-padding-inset-000; +@comp-badge-container-indicator-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-badge-container-indicator-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-badge-container-indicator-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-badge-container-indicator-spacing-gap-xs: @cont-spacing-common-gap-000; +@comp-badge-container-indicator-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-badge-container-indicator-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-badge-container-indicator-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-badge-container-color-border-neutral-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-neutral-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-positive-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-positive-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-warning-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-warning-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-negative-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-negative-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-info-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-info-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-buy-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-buy-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-sell-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-sell-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-1-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-1-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-2-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-2-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-3-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-3-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-4-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-4-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-5-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-5-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-6-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-6-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-7-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-7-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-8-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-color-border-category-8-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-radius-xs: @cont-radius-common-full; +@comp-badge-container-radius-sm: @cont-radius-common-full; +@comp-badge-container-radius-md: @cont-radius-common-full; +@comp-badge-container-radius-lg: @cont-radius-common-full; +@comp-badge-container-border-width-xs: @cont-border-width-common-subtle; +@comp-badge-container-border-width-sm: @cont-border-width-common-subtle; +@comp-badge-container-border-width-md: @cont-border-width-common-subtle; +@comp-badge-container-border-width-lg: @cont-border-width-common-subtle; +@comp-badge-container-indicator-radius-xs: @cont-radius-common-full; +@comp-badge-container-indicator-radius-sm: @cont-radius-common-full; +@comp-badge-container-indicator-radius-md: @cont-radius-common-full; +@comp-badge-container-indicator-radius-lg: @cont-radius-common-full; +@comp-badge-container-indicator-border-width-xs: @cont-border-width-common-none; +@comp-badge-container-indicator-border-width-sm: @cont-border-width-common-none; +@comp-badge-container-indicator-border-width-md: @cont-border-width-common-none; +@comp-badge-container-indicator-border-width-lg: @cont-border-width-common-none; +@comp-badge-container-indicator-color-border-neutral-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-neutral-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-neutral-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-positive-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-positive-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-positive-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-warning-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-warning-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-warning-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-negative-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-negative-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-negative-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-info-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-info-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-info-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-buy-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-buy-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-buy-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-sell-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-sell-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-sell-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-1-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-1-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-1-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-2-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-2-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-2-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-3-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-3-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-3-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-4-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-4-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-4-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-5-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-5-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-5-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-6-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-6-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-6-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-7-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-7-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-7-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-8-bold: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-8-moderate: @cont-color-common-container-misc-transparent; +@comp-badge-container-indicator-color-border-category-8-subtle: @cont-color-common-container-misc-transparent; +@comp-badge-icon-typography-xs: @cont-typography-common-icon-emphasized-xs; +@comp-badge-icon-typography-sm: @cont-typography-common-icon-emphasized-sm; +@comp-badge-icon-typography-md: @cont-typography-common-icon-emphasized-md; +@comp-badge-icon-typography-lg: @cont-typography-common-icon-emphasized-lg; +@comp-badge-container-color-bg-neutral-bold: @cont-color-status-bg-neutral-base; +@comp-badge-container-color-bg-neutral-moderate: @cont-color-status-bg-neutral-minimal; +@comp-badge-container-color-bg-neutral-subtle: @cont-color-status-bg-neutral-minimal; +@comp-badge-container-color-bg-positive-bold: @cont-color-status-bg-positive-base; +@comp-badge-container-color-bg-positive-moderate: @cont-color-status-bg-positive-minimal; +@comp-badge-container-color-bg-positive-subtle: @cont-color-status-bg-positive-minimal; +@comp-badge-container-color-bg-warning-bold: @cont-color-status-bg-warning-base; +@comp-badge-container-color-bg-warning-moderate: @cont-color-status-bg-warning-minimal; +@comp-badge-container-color-bg-warning-subtle: @cont-color-status-bg-warning-minimal; +@comp-badge-container-color-bg-negative-bold: @cont-color-status-bg-negative-base; +@comp-badge-container-color-bg-negative-moderate: @cont-color-status-bg-negative-minimal; +@comp-badge-container-color-bg-negative-subtle: @cont-color-status-bg-negative-minimal; +@comp-badge-container-color-bg-info-bold: @cont-color-status-bg-info-base; +@comp-badge-container-color-bg-info-moderate: @cont-color-status-bg-info-minimal; +@comp-badge-container-color-bg-info-subtle: @cont-color-status-bg-info-minimal; +@comp-badge-container-color-bg-buy-bold: @cont-color-status-bg-buy-base; +@comp-badge-container-color-bg-buy-moderate: @cont-color-status-bg-buy-minimal; +@comp-badge-container-color-bg-buy-subtle: @cont-color-status-bg-buy-minimal; +@comp-badge-container-color-bg-sell-bold: @cont-color-status-bg-sell-base; +@comp-badge-container-color-bg-sell-moderate: @cont-color-status-bg-sell-minimal; +@comp-badge-container-color-bg-sell-subtle: @cont-color-status-bg-sell-minimal; +@comp-badge-container-color-bg-category-1-bold: @cont-color-data-viz-status-bg-category-1-base; +@comp-badge-container-color-bg-category-1-moderate: @cont-color-data-viz-status-bg-category-1-subtle; +@comp-badge-container-color-bg-category-1-subtle: @cont-color-data-viz-status-bg-category-1-subtle; +@comp-badge-container-color-bg-category-2-bold: @cont-color-data-viz-status-bg-category-2-base; +@comp-badge-container-color-bg-category-2-moderate: @cont-color-data-viz-status-bg-category-2-subtle; +@comp-badge-container-color-bg-category-2-subtle: @cont-color-data-viz-status-bg-category-2-subtle; +@comp-badge-container-color-bg-category-3-bold: @cont-color-data-viz-status-bg-category-3-base; +@comp-badge-container-color-bg-category-3-moderate: @cont-color-data-viz-status-bg-category-3-subtle; +@comp-badge-container-color-bg-category-3-subtle: @cont-color-data-viz-status-bg-category-3-subtle; +@comp-badge-container-color-bg-category-4-bold: @cont-color-data-viz-status-bg-category-4-base; +@comp-badge-container-color-bg-category-4-moderate: @cont-color-data-viz-status-bg-category-4-subtle; +@comp-badge-container-color-bg-category-4-subtle: @cont-color-data-viz-status-bg-category-4-subtle; +@comp-badge-container-color-bg-category-5-bold: @cont-color-data-viz-status-bg-category-5-base; +@comp-badge-container-color-bg-category-5-moderate: @cont-color-data-viz-status-bg-category-5-subtle; +@comp-badge-container-color-bg-category-5-subtle: @cont-color-data-viz-status-bg-category-5-subtle; +@comp-badge-container-color-bg-category-6-bold: @cont-color-data-viz-status-bg-category-6-base; +@comp-badge-container-color-bg-category-6-moderate: @cont-color-data-viz-status-bg-category-6-subtle; +@comp-badge-container-color-bg-category-6-subtle: @cont-color-data-viz-status-bg-category-6-subtle; +@comp-badge-container-color-bg-category-7-bold: @cont-color-data-viz-status-bg-category-7-base; +@comp-badge-container-color-bg-category-7-moderate: @cont-color-data-viz-status-bg-category-7-subtle; +@comp-badge-container-color-bg-category-7-subtle: @cont-color-data-viz-status-bg-category-7-subtle; +@comp-badge-container-color-bg-category-8-bold: @cont-color-data-viz-status-bg-category-8-base; +@comp-badge-container-color-bg-category-8-moderate: @cont-color-data-viz-status-bg-category-8-subtle; +@comp-badge-container-color-bg-category-8-subtle: @cont-color-data-viz-status-bg-category-8-subtle; +@comp-badge-container-color-border-neutral-moderate: @cont-color-status-border-neutral-base; +@comp-badge-container-color-border-positive-moderate: @cont-color-status-border-positive-base; +@comp-badge-container-color-border-warning-moderate: @cont-color-status-border-warning-base; +@comp-badge-container-color-border-negative-moderate: @cont-color-status-border-negative-base; +@comp-badge-container-color-border-info-moderate: @cont-color-status-border-info-base; +@comp-badge-container-color-border-buy-moderate: @cont-color-status-border-buy-base; +@comp-badge-container-color-border-sell-moderate: @cont-color-status-border-sell-base; +@comp-badge-container-color-border-category-1-moderate: @cont-color-data-viz-status-border-category-1-base; +@comp-badge-container-color-border-category-2-moderate: @cont-color-data-viz-status-border-category-2-base; +@comp-badge-container-color-border-category-3-moderate: @cont-color-data-viz-status-border-category-3-base; +@comp-badge-container-color-border-category-4-moderate: @cont-color-data-viz-status-border-category-4-base; +@comp-badge-container-color-border-category-5-moderate: @cont-color-data-viz-status-border-category-5-base; +@comp-badge-container-color-border-category-6-moderate: @cont-color-data-viz-status-border-category-6-base; +@comp-badge-container-color-border-category-7-moderate: @cont-color-data-viz-status-border-category-7-base; +@comp-badge-container-color-border-category-8-moderate: @cont-color-data-viz-status-border-category-8-base; +@comp-badge-container-spacing-padding-xs: @cont-spacing-common-padding-inline-200; +@comp-badge-container-spacing-padding-sm: @cont-spacing-common-padding-inline-200; +@comp-badge-container-spacing-padding-md: @cont-spacing-common-padding-inline-300; +@comp-badge-container-spacing-padding-lg: @cont-spacing-common-padding-inline-400; +@comp-badge-container-indicator-color-bg-neutral-bold: @cont-color-status-bg-neutral-base; +@comp-badge-container-indicator-color-bg-neutral-moderate: @cont-color-status-bg-neutral-base; +@comp-badge-container-indicator-color-bg-neutral-subtle: @cont-color-status-bg-neutral-base; +@comp-badge-container-indicator-color-bg-positive-bold: @cont-color-status-bg-positive-base; +@comp-badge-container-indicator-color-bg-positive-moderate: @cont-color-status-bg-positive-base; +@comp-badge-container-indicator-color-bg-positive-subtle: @cont-color-status-bg-positive-base; +@comp-badge-container-indicator-color-bg-warning-bold: @cont-color-status-bg-warning-base; +@comp-badge-container-indicator-color-bg-warning-moderate: @cont-color-status-bg-warning-base; +@comp-badge-container-indicator-color-bg-warning-subtle: @cont-color-status-bg-warning-base; +@comp-badge-container-indicator-color-bg-negative-bold: @cont-color-status-bg-negative-base; +@comp-badge-container-indicator-color-bg-negative-moderate: @cont-color-status-bg-negative-base; +@comp-badge-container-indicator-color-bg-negative-subtle: @cont-color-status-bg-negative-base; +@comp-badge-container-indicator-color-bg-info-bold: @cont-color-status-bg-info-base; +@comp-badge-container-indicator-color-bg-info-moderate: @cont-color-status-bg-info-base; +@comp-badge-container-indicator-color-bg-info-subtle: @cont-color-status-bg-info-base; +@comp-badge-container-indicator-color-bg-buy-bold: @cont-color-status-bg-buy-base; +@comp-badge-container-indicator-color-bg-buy-moderate: @cont-color-status-bg-buy-base; +@comp-badge-container-indicator-color-bg-buy-subtle: @cont-color-status-bg-buy-base; +@comp-badge-container-indicator-color-bg-sell-bold: @cont-color-status-bg-sell-base; +@comp-badge-container-indicator-color-bg-sell-moderate: @cont-color-status-bg-sell-base; +@comp-badge-container-indicator-color-bg-sell-subtle: @cont-color-status-bg-sell-base; +@comp-badge-container-indicator-color-bg-category-1-bold: @cont-color-data-viz-status-bg-category-1-base; +@comp-badge-container-indicator-color-bg-category-1-moderate: @cont-color-data-viz-status-bg-category-1-base; +@comp-badge-container-indicator-color-bg-category-1-subtle: @cont-color-data-viz-status-bg-category-1-base; +@comp-badge-container-indicator-color-bg-category-2-bold: @cont-color-data-viz-status-bg-category-2-base; +@comp-badge-container-indicator-color-bg-category-2-moderate: @cont-color-data-viz-status-bg-category-2-base; +@comp-badge-container-indicator-color-bg-category-2-subtle: @cont-color-data-viz-status-bg-category-2-base; +@comp-badge-container-indicator-color-bg-category-3-bold: @cont-color-data-viz-status-bg-category-3-base; +@comp-badge-container-indicator-color-bg-category-3-moderate: @cont-color-data-viz-status-bg-category-3-base; +@comp-badge-container-indicator-color-bg-category-3-subtle: @cont-color-data-viz-status-bg-category-3-base; +@comp-badge-container-indicator-color-bg-category-4-bold: @cont-color-data-viz-status-bg-category-4-base; +@comp-badge-container-indicator-color-bg-category-4-moderate: @cont-color-data-viz-status-bg-category-4-base; +@comp-badge-container-indicator-color-bg-category-4-subtle: @cont-color-data-viz-status-bg-category-4-base; +@comp-badge-container-indicator-color-bg-category-5-bold: @cont-color-data-viz-status-bg-category-5-base; +@comp-badge-container-indicator-color-bg-category-5-moderate: @cont-color-data-viz-status-bg-category-5-base; +@comp-badge-container-indicator-color-bg-category-5-subtle: @cont-color-data-viz-status-bg-category-5-base; +@comp-badge-container-indicator-color-bg-category-6-bold: @cont-color-data-viz-status-bg-category-6-base; +@comp-badge-container-indicator-color-bg-category-6-moderate: @cont-color-data-viz-status-bg-category-6-base; +@comp-badge-container-indicator-color-bg-category-6-subtle: @cont-color-data-viz-status-bg-category-6-base; +@comp-badge-container-indicator-color-bg-category-7-bold: @cont-color-data-viz-status-bg-category-7-base; +@comp-badge-container-indicator-color-bg-category-7-moderate: @cont-color-data-viz-status-bg-category-7-base; +@comp-badge-container-indicator-color-bg-category-7-subtle: @cont-color-data-viz-status-bg-category-7-base; +@comp-badge-container-indicator-color-bg-category-8-bold: @cont-color-data-viz-status-bg-category-8-base; +@comp-badge-container-indicator-color-bg-category-8-moderate: @cont-color-data-viz-status-bg-category-8-base; +@comp-badge-container-indicator-color-bg-category-8-subtle: @cont-color-data-viz-status-bg-category-8-base; +@comp-badge-label-color-fg-neutral-moderate: @cont-color-status-fg-on-neutral-minimal; +@comp-badge-label-color-fg-neutral-subtle: @cont-color-status-fg-on-neutral-minimal; +@comp-badge-label-color-fg-positive-moderate: @cont-color-status-fg-on-positive-minimal; +@comp-badge-label-color-fg-positive-subtle: @cont-color-status-fg-on-positive-minimal; +@comp-badge-label-color-fg-warning-bold: @cont-color-status-fg-on-warning-base; +@comp-badge-label-color-fg-warning-moderate: @cont-color-status-fg-on-warning-minimal; +@comp-badge-label-color-fg-warning-subtle: @cont-color-status-fg-on-warning-minimal; +@comp-badge-label-color-fg-negative-moderate: @cont-color-status-fg-on-negative-minimal; +@comp-badge-label-color-fg-negative-subtle: @cont-color-status-fg-on-negative-minimal; +@comp-badge-label-color-fg-info-moderate: @cont-color-status-fg-on-info-minimal; +@comp-badge-label-color-fg-info-subtle: @cont-color-status-fg-on-info-minimal; +@comp-badge-label-color-fg-buy-moderate: @cont-color-status-fg-on-buy-minimal; +@comp-badge-label-color-fg-buy-subtle: @cont-color-status-fg-on-buy-minimal; +@comp-badge-label-color-fg-sell-moderate: @cont-color-status-fg-on-sell-minimal; +@comp-badge-label-color-fg-sell-subtle: @cont-color-status-fg-on-sell-minimal; +@comp-badge-label-color-fg-category-1-bold: @cont-color-data-viz-status-fg-on-category-1-base; +@comp-badge-label-color-fg-category-1-moderate: @cont-color-data-viz-status-fg-on-category-1-minimal; +@comp-badge-label-color-fg-category-1-subtle: @cont-color-data-viz-status-fg-on-category-1-minimal; +@comp-badge-label-color-fg-category-2-bold: @cont-color-data-viz-status-fg-on-category-2-base; +@comp-badge-label-color-fg-category-2-moderate: @cont-color-data-viz-status-fg-on-category-2-minimal; +@comp-badge-label-color-fg-category-2-subtle: @cont-color-data-viz-status-fg-on-category-2-minimal; +@comp-badge-label-color-fg-category-3-bold: @cont-color-data-viz-status-fg-on-category-3-base; +@comp-badge-label-color-fg-category-3-moderate: @cont-color-data-viz-status-fg-on-category-3-minimal; +@comp-badge-label-color-fg-category-3-subtle: @cont-color-data-viz-status-fg-on-category-3-minimal; +@comp-badge-label-color-fg-category-4-bold: @cont-color-data-viz-status-fg-on-category-4-base; +@comp-badge-label-color-fg-category-4-moderate: @cont-color-data-viz-status-fg-on-category-4-minimal; +@comp-badge-label-color-fg-category-4-subtle: @cont-color-data-viz-status-fg-on-category-4-minimal; +@comp-badge-label-color-fg-category-5-bold: @cont-color-data-viz-status-fg-on-category-5-base; +@comp-badge-label-color-fg-category-5-moderate: @cont-color-data-viz-status-fg-on-category-5-minimal; +@comp-badge-label-color-fg-category-5-subtle: @cont-color-data-viz-status-fg-on-category-5-minimal; +@comp-badge-label-color-fg-category-6-bold: @cont-color-data-viz-status-fg-on-category-6-base; +@comp-badge-label-color-fg-category-6-moderate: @cont-color-data-viz-status-fg-on-category-6-minimal; +@comp-badge-label-color-fg-category-6-subtle: @cont-color-data-viz-status-fg-on-category-6-minimal; +@comp-badge-label-color-fg-category-7-bold: @cont-color-data-viz-status-fg-on-category-7-base; +@comp-badge-label-color-fg-category-7-moderate: @cont-color-data-viz-status-fg-on-category-7-minimal; +@comp-badge-label-color-fg-category-7-subtle: @cont-color-data-viz-status-fg-on-category-7-minimal; +@comp-badge-label-color-fg-category-8-bold: @cont-color-data-viz-status-fg-on-category-8-base; +@comp-badge-label-color-fg-category-8-moderate: @cont-color-data-viz-status-fg-on-category-8-minimal; +@comp-badge-label-color-fg-category-8-subtle: @cont-color-data-viz-status-fg-on-category-8-minimal; +@comp-badge-label-typography-xs: @cont-typography-badge-sm; +@comp-badge-label-typography-sm: @cont-typography-badge-sm; +@comp-badge-label-typography-md: @cont-typography-badge-md; +@comp-badge-label-typography-lg: @cont-typography-badge-lg; +@comp-badge-icon-color-fg-neutral-moderate: @cont-color-status-fg-on-neutral-minimal; +@comp-badge-icon-color-fg-neutral-subtle: @cont-color-status-fg-on-neutral-minimal; +@comp-badge-icon-color-fg-positive-moderate: @cont-color-status-fg-on-positive-minimal; +@comp-badge-icon-color-fg-positive-subtle: @cont-color-status-fg-on-positive-minimal; +@comp-badge-icon-color-fg-warning-bold: @cont-color-status-fg-on-warning-base; +@comp-badge-icon-color-fg-warning-moderate: @cont-color-status-fg-on-warning-minimal; +@comp-badge-icon-color-fg-warning-subtle: @cont-color-status-fg-on-warning-minimal; +@comp-badge-icon-color-fg-negative-moderate: @cont-color-status-fg-on-negative-minimal; +@comp-badge-icon-color-fg-negative-subtle: @cont-color-status-fg-on-negative-minimal; +@comp-badge-icon-color-fg-info-moderate: @cont-color-status-fg-on-info-minimal; +@comp-badge-icon-color-fg-info-subtle: @cont-color-status-fg-on-info-minimal; +@comp-badge-icon-color-fg-buy-moderate: @cont-color-status-fg-on-buy-minimal; +@comp-badge-icon-color-fg-buy-subtle: @cont-color-status-fg-on-buy-minimal; +@comp-badge-icon-color-fg-sell-moderate: @cont-color-status-fg-on-sell-minimal; +@comp-badge-icon-color-fg-sell-subtle: @cont-color-status-fg-on-sell-minimal; +@comp-badge-icon-color-fg-category-1-bold: @cont-color-data-viz-status-fg-on-category-1-base; +@comp-badge-icon-color-fg-category-1-moderate: @cont-color-data-viz-status-fg-on-category-1-minimal; +@comp-badge-icon-color-fg-category-1-subtle: @cont-color-data-viz-status-fg-on-category-1-minimal; +@comp-badge-icon-color-fg-category-2-bold: @cont-color-data-viz-status-fg-on-category-2-base; +@comp-badge-icon-color-fg-category-2-moderate: @cont-color-data-viz-status-fg-on-category-2-minimal; +@comp-badge-icon-color-fg-category-2-subtle: @cont-color-data-viz-status-fg-on-category-2-minimal; +@comp-badge-icon-color-fg-category-3-bold: @cont-color-data-viz-status-fg-on-category-3-base; +@comp-badge-icon-color-fg-category-3-moderate: @cont-color-data-viz-status-fg-on-category-3-minimal; +@comp-badge-icon-color-fg-category-3-subtle: @cont-color-data-viz-status-fg-on-category-3-minimal; +@comp-badge-icon-color-fg-category-4-bold: @cont-color-data-viz-status-fg-on-category-4-base; +@comp-badge-icon-color-fg-category-4-moderate: @cont-color-data-viz-status-fg-on-category-4-minimal; +@comp-badge-icon-color-fg-category-4-subtle: @cont-color-data-viz-status-fg-on-category-4-minimal; +@comp-badge-icon-color-fg-category-5-bold: @cont-color-data-viz-status-fg-on-category-5-base; +@comp-badge-icon-color-fg-category-5-moderate: @cont-color-data-viz-status-fg-on-category-5-minimal; +@comp-badge-icon-color-fg-category-5-subtle: @cont-color-data-viz-status-fg-on-category-5-minimal; +@comp-badge-icon-color-fg-category-6-bold: @cont-color-data-viz-status-fg-on-category-6-base; +@comp-badge-icon-color-fg-category-6-moderate: @cont-color-data-viz-status-fg-on-category-6-minimal; +@comp-badge-icon-color-fg-category-6-subtle: @cont-color-data-viz-status-fg-on-category-6-minimal; +@comp-badge-icon-color-fg-category-7-bold: @cont-color-data-viz-status-fg-on-category-7-base; +@comp-badge-icon-color-fg-category-7-moderate: @cont-color-data-viz-status-fg-on-category-7-minimal; +@comp-badge-icon-color-fg-category-7-subtle: @cont-color-data-viz-status-fg-on-category-7-minimal; +@comp-badge-icon-color-fg-category-8-bold: @cont-color-data-viz-status-fg-on-category-8-base; +@comp-badge-icon-color-fg-category-8-moderate: @cont-color-data-viz-status-fg-on-category-8-minimal; +@comp-badge-icon-color-fg-category-8-subtle: @cont-color-data-viz-status-fg-on-category-8-minimal; +@comp-badge-container-icon-only-sizing-min-inline-xs: @cont-sizing-status-2xs; +@comp-badge-container-icon-only-sizing-min-inline-sm: @cont-sizing-status-xs; +@comp-badge-container-icon-only-sizing-min-inline-md: @cont-sizing-status-sm; +@comp-badge-container-icon-only-sizing-min-inline-lg: @cont-sizing-status-md; +@comp-badge-container-icon-only-sizing-min-block-xs: @cont-sizing-status-2xs; +@comp-badge-container-icon-only-sizing-min-block-sm: @cont-sizing-status-xs; +@comp-badge-container-icon-only-sizing-min-block-md: @cont-sizing-status-sm; +@comp-badge-container-icon-only-sizing-min-block-lg: @cont-sizing-status-md; +@comp-badge-container-sizing-min-block-xs: @cont-sizing-status-2xs; +@comp-badge-container-sizing-min-block-sm: @cont-sizing-status-xs; +@comp-badge-container-sizing-min-block-md: @cont-sizing-status-sm; +@comp-badge-container-sizing-min-inline-xs: @cont-sizing-status-2xs * 2; +@comp-badge-container-sizing-min-inline-sm: @cont-sizing-status-xs * 2; +@comp-badge-container-sizing-min-inline-md: @cont-sizing-status-sm * 2; +@comp-badge-container-spacing-gap-xs: @cont-spacing-status-gap-sm; +@comp-badge-container-spacing-gap-sm: @cont-spacing-status-gap-sm; +@comp-badge-container-spacing-gap-md: @cont-spacing-status-gap-sm; +@comp-badge-container-spacing-gap-lg: @cont-spacing-status-gap-sm; +@comp-badge-container-indicator-sizing-min-block-xs: @cont-sizing-status-4xs; +@comp-badge-container-indicator-sizing-min-block-sm: @cont-sizing-status-3xs; +@comp-badge-container-indicator-sizing-min-block-md: @cont-sizing-status-2xs; +@comp-badge-container-indicator-sizing-min-block-lg: @cont-sizing-status-xs; +@comp-badge-container-indicator-sizing-min-inline-xs: @cont-sizing-status-4xs; +@comp-badge-container-indicator-sizing-min-inline-sm: @cont-sizing-status-3xs; +@comp-badge-container-indicator-sizing-min-inline-md: @cont-sizing-status-2xs; +@comp-badge-container-indicator-sizing-min-inline-lg: @cont-sizing-status-xs; +@comp-badge-label-color-fg-neutral-bold: @cont-color-status-fg-on-neutral-base; +@comp-badge-label-color-fg-positive-bold: @cont-color-status-fg-on-positive-base; +@comp-badge-label-color-fg-negative-bold: @cont-color-status-fg-on-negative-base; +@comp-badge-label-color-fg-info-bold: @cont-color-status-fg-on-info-base; +@comp-badge-label-color-fg-buy-bold: @cont-color-status-fg-on-buy-base; +@comp-badge-label-color-fg-sell-bold: @cont-color-status-fg-on-sell-base; +@comp-badge-icon-color-fg-neutral-bold: @cont-color-status-fg-on-neutral-base; +@comp-badge-icon-color-fg-positive-bold: @cont-color-status-fg-on-positive-base; +@comp-badge-icon-color-fg-negative-bold: @cont-color-status-fg-on-negative-base; +@comp-badge-icon-color-fg-info-bold: @cont-color-status-fg-on-info-base; +@comp-badge-icon-color-fg-buy-bold: @cont-color-status-fg-on-buy-base; +@comp-badge-icon-color-fg-sell-bold: @cont-color-status-fg-on-sell-base; +@comp-badge-container-sizing-min-block-lg: @cont-sizing-action-md; +@comp-badge-container-sizing-min-inline-lg: @cont-sizing-action-md * 2; diff --git a/packages/ds-theme/src/web-design-tokens/component/button.less b/packages/ds-theme/src/web-design-tokens/component/button.less new file mode 100644 index 0000000000..9a6bcedae8 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/button.less @@ -0,0 +1,1190 @@ +// Do not edit directly, this file was auto-generated. + +@comp-button-container-color-bg-persist-on-light-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-focus-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-focus-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-moderate-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-moderate-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-moderate-focus-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-moderate-focus-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-subtle-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-subtle-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-subtle-focus-loading: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-light-subtle-focus-disabled: @core-color-palette-neutral-200; +@comp-button-container-color-bg-persist-on-dark-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-disabled: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-focus-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-moderate-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-moderate-disabled: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-moderate-focus-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-moderate-focus-disabled: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-subtle-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-subtle-disabled: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-subtle-focus-loading: @core-color-palette-neutral-1100; +@comp-button-container-color-bg-persist-on-dark-subtle-focus-disabled: @core-color-palette-neutral-1100; +@comp-button-container-icon-only-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-button-label-color-fg-persist-on-light-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-light-focus-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-light-moderate-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-light-moderate-focus-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-light-subtle-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-light-subtle-focus-disabled: @core-color-palette-neutral-700; +@comp-button-label-color-fg-persist-on-dark-disabled: @core-color-palette-neutral-1400; +@comp-button-label-color-fg-persist-on-dark-focus-disabled: @core-color-palette-neutral-1400; +@comp-button-label-color-fg-persist-on-dark-moderate-disabled: @core-color-palette-neutral-1400; +@comp-button-label-color-fg-persist-on-dark-moderate-focus-disabled: @core-color-palette-neutral-1400; +@comp-button-label-color-fg-persist-on-dark-subtle-disabled: @core-color-palette-neutral-1400; +@comp-button-label-color-fg-persist-on-dark-subtle-focus-disabled: @core-color-palette-neutral-1400; +@comp-button-container-color-bg-neutral-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-neutral-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-neutral-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-neutral-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-primary-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-primary-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-primary-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-primary-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-secondary-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-secondary-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-secondary-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-secondary-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-secondary-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-secondary-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-tertiary-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-tertiary-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-tertiary-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-tertiary-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-tertiary-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-positive-moderate-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-moderate-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-positive-moderate-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-moderate-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-positive-subtle-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-subtle-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-positive-subtle-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-positive-subtle-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-negative-moderate-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-moderate-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-negative-moderate-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-moderate-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-negative-subtle-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-subtle-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-negative-subtle-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-negative-subtle-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-buy-moderate-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-moderate-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-buy-moderate-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-moderate-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-buy-subtle-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-subtle-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-buy-subtle-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-buy-subtle-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-sell-moderate-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-moderate-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-sell-moderate-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-moderate-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-sell-subtle-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-subtle-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-sell-subtle-focus-loading: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-sell-subtle-focus-disabled: @cont-color-common-container-misc-disabled; +@comp-button-container-color-bg-inverse-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-inverse-moderate-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-moderate-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-inverse-moderate-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-moderate-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-inverse-subtle-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-subtle-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-inverse-subtle-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-inverse-subtle-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-button-container-color-bg-persist-on-light-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-light-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-light-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-light-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-dark-moderate-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-dark-moderate-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-dark-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-bg-persist-on-dark-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-neutral-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-neutral-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-neutral-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-primary-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-secondary-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-secondary-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-secondary-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-secondary-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-tertiary-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-positive-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-negative-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-buy-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-sell-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-inverse-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-light-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-moderate-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-moderate-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-moderate-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-moderate-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-focus-hover: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-focus-loading: @cont-color-common-container-misc-transparent; +@comp-button-container-color-border-persist-on-dark-subtle-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-button-container-elevation-neutral-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-primary-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-secondary-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-tertiary-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-positive-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-positive-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-positive-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-negative-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-negative-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-negative-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-buy-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-buy-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-buy-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-sell-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-sell-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-sell-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-inverse-focus: @cont-elevation-common-focus-outset-inverse; +@comp-button-container-elevation-inverse-moderate-focus: @cont-elevation-common-focus-outset-inverse; +@comp-button-container-elevation-inverse-subtle-focus: @cont-elevation-common-focus-outset-inverse; +@comp-button-container-elevation-persist-on-light-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-persist-on-light-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-persist-on-light-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-persist-on-dark-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-persist-on-dark-moderate-focus: @cont-elevation-common-focus-outset-base; +@comp-button-container-elevation-persist-on-dark-subtle-focus: @cont-elevation-common-focus-outset-base; +@comp-button-label-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-neutral-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-primary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-secondary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-tertiary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-positive-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-negative-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-buy-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-sell-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-label-color-fg-inverse-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-label-color-fg-inverse-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-label-color-fg-inverse-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-label-color-fg-inverse-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-label-color-fg-inverse-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-label-color-fg-inverse-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-button-icon-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-neutral-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-primary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-secondary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-tertiary-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-positive-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-negative-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-buy-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-sell-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-inverse-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-inverse-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-inverse-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-inverse-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-inverse-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-inverse-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-light-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-light-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-light-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-light-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-light-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-light-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-button-icon-color-fg-persist-on-dark-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-dark-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-dark-moderate-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-dark-moderate-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-dark-subtle-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-icon-color-fg-persist-on-dark-subtle-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-button-container-color-bg-neutral-enabled: @cont-color-action-bg-neutral-base; +@comp-button-container-color-bg-neutral-hover: @cont-color-action-bg-neutral-moderate; +@comp-button-container-color-bg-neutral-pressed: @cont-color-action-bg-neutral-bold; +@comp-button-container-color-bg-neutral-focus-enabled: @cont-color-action-bg-neutral-base; +@comp-button-container-color-bg-neutral-focus-hover: @cont-color-action-bg-neutral-moderate; +@comp-button-container-color-bg-neutral-focus-pressed: @cont-color-action-bg-neutral-bold; +@comp-button-container-color-bg-primary-enabled: @cont-color-action-bg-primary-base; +@comp-button-container-color-bg-primary-hover: @cont-color-action-bg-primary-moderate; +@comp-button-container-color-bg-primary-pressed: @cont-color-action-bg-primary-bold; +@comp-button-container-color-bg-primary-focus-enabled: @cont-color-action-bg-primary-base; +@comp-button-container-color-bg-primary-focus-hover: @cont-color-action-bg-primary-moderate; +@comp-button-container-color-bg-primary-focus-pressed: @cont-color-action-bg-primary-bold; +@comp-button-container-color-bg-secondary-hover: @cont-color-action-bg-secondary-minimal; +@comp-button-container-color-bg-secondary-pressed: @cont-color-action-bg-secondary-subtle; +@comp-button-container-color-bg-secondary-focus-hover: @cont-color-action-bg-secondary-minimal; +@comp-button-container-color-bg-secondary-focus-pressed: @cont-color-action-bg-secondary-subtle; +@comp-button-container-color-bg-tertiary-hover: @cont-color-action-bg-tertiary-minimal; +@comp-button-container-color-bg-tertiary-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-button-container-color-bg-tertiary-focus-hover: @cont-color-action-bg-tertiary-minimal; +@comp-button-container-color-bg-tertiary-focus-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-button-container-color-bg-positive-enabled: @cont-color-action-bg-positive-base; +@comp-button-container-color-bg-positive-hover: @cont-color-action-bg-positive-moderate; +@comp-button-container-color-bg-positive-pressed: @cont-color-action-bg-positive-bold; +@comp-button-container-color-bg-positive-focus-enabled: @cont-color-action-bg-positive-base; +@comp-button-container-color-bg-positive-focus-hover: @cont-color-action-bg-positive-moderate; +@comp-button-container-color-bg-positive-focus-pressed: @cont-color-action-bg-positive-bold; +@comp-button-container-color-bg-positive-moderate-hover: @cont-color-action-bg-positive-minimal; +@comp-button-container-color-bg-positive-moderate-pressed: @cont-color-action-bg-positive-subtle; +@comp-button-container-color-bg-positive-moderate-focus-hover: @cont-color-action-bg-positive-minimal; +@comp-button-container-color-bg-positive-moderate-focus-pressed: @cont-color-action-bg-positive-subtle; +@comp-button-container-color-bg-positive-subtle-hover: @cont-color-action-bg-positive-minimal; +@comp-button-container-color-bg-positive-subtle-pressed: @cont-color-action-bg-positive-subtle; +@comp-button-container-color-bg-positive-subtle-focus-hover: @cont-color-action-bg-positive-minimal; +@comp-button-container-color-bg-positive-subtle-focus-pressed: @cont-color-action-bg-positive-subtle; +@comp-button-container-color-bg-negative-enabled: @cont-color-action-bg-negative-base; +@comp-button-container-color-bg-negative-hover: @cont-color-action-bg-negative-moderate; +@comp-button-container-color-bg-negative-pressed: @cont-color-action-bg-negative-bold; +@comp-button-container-color-bg-negative-focus-enabled: @cont-color-action-bg-negative-base; +@comp-button-container-color-bg-negative-focus-hover: @cont-color-action-bg-negative-moderate; +@comp-button-container-color-bg-negative-focus-pressed: @cont-color-action-bg-negative-bold; +@comp-button-container-color-bg-negative-moderate-hover: @cont-color-action-bg-negative-minimal; +@comp-button-container-color-bg-negative-moderate-pressed: @cont-color-action-bg-negative-subtle; +@comp-button-container-color-bg-negative-moderate-focus-hover: @cont-color-action-bg-negative-minimal; +@comp-button-container-color-bg-negative-moderate-focus-pressed: @cont-color-action-bg-negative-subtle; +@comp-button-container-color-bg-negative-subtle-hover: @cont-color-action-bg-negative-minimal; +@comp-button-container-color-bg-negative-subtle-pressed: @cont-color-action-bg-negative-subtle; +@comp-button-container-color-bg-negative-subtle-focus-hover: @cont-color-action-bg-negative-minimal; +@comp-button-container-color-bg-negative-subtle-focus-pressed: @cont-color-action-bg-negative-subtle; +@comp-button-container-color-bg-buy-enabled: @cont-color-action-bg-buy-base; +@comp-button-container-color-bg-buy-hover: @cont-color-action-bg-buy-moderate; +@comp-button-container-color-bg-buy-pressed: @cont-color-action-bg-buy-bold; +@comp-button-container-color-bg-buy-focus-enabled: @cont-color-action-bg-buy-base; +@comp-button-container-color-bg-buy-focus-hover: @cont-color-action-bg-buy-moderate; +@comp-button-container-color-bg-buy-focus-pressed: @cont-color-action-bg-buy-bold; +@comp-button-container-color-bg-buy-moderate-hover: @cont-color-action-bg-buy-minimal; +@comp-button-container-color-bg-buy-moderate-pressed: @cont-color-action-bg-buy-subtle; +@comp-button-container-color-bg-buy-moderate-focus-hover: @cont-color-action-bg-buy-minimal; +@comp-button-container-color-bg-buy-moderate-focus-pressed: @cont-color-action-bg-buy-subtle; +@comp-button-container-color-bg-buy-subtle-hover: @cont-color-action-bg-buy-minimal; +@comp-button-container-color-bg-buy-subtle-pressed: @cont-color-action-bg-buy-subtle; +@comp-button-container-color-bg-buy-subtle-focus-hover: @cont-color-action-bg-buy-minimal; +@comp-button-container-color-bg-buy-subtle-focus-pressed: @cont-color-action-bg-buy-subtle; +@comp-button-container-color-bg-sell-enabled: @cont-color-action-bg-sell-base; +@comp-button-container-color-bg-sell-hover: @cont-color-action-bg-sell-moderate; +@comp-button-container-color-bg-sell-pressed: @cont-color-action-bg-sell-bold; +@comp-button-container-color-bg-sell-focus-enabled: @cont-color-action-bg-sell-base; +@comp-button-container-color-bg-sell-focus-hover: @cont-color-action-bg-sell-moderate; +@comp-button-container-color-bg-sell-focus-pressed: @cont-color-action-bg-sell-bold; +@comp-button-container-color-bg-sell-moderate-hover: @cont-color-action-bg-sell-minimal; +@comp-button-container-color-bg-sell-moderate-pressed: @cont-color-action-bg-sell-subtle; +@comp-button-container-color-bg-sell-moderate-focus-hover: @cont-color-action-bg-sell-minimal; +@comp-button-container-color-bg-sell-moderate-focus-pressed: @cont-color-action-bg-sell-subtle; +@comp-button-container-color-bg-sell-subtle-hover: @cont-color-action-bg-sell-minimal; +@comp-button-container-color-bg-sell-subtle-pressed: @cont-color-action-bg-sell-subtle; +@comp-button-container-color-bg-sell-subtle-focus-hover: @cont-color-action-bg-sell-minimal; +@comp-button-container-color-bg-sell-subtle-focus-pressed: @cont-color-action-bg-sell-subtle; +@comp-button-container-color-bg-inverse-enabled: @cont-color-action-bg-inverse-base; +@comp-button-container-color-bg-inverse-hover: @cont-color-action-bg-inverse-moderate; +@comp-button-container-color-bg-inverse-pressed: @cont-color-action-bg-inverse-bold; +@comp-button-container-color-bg-inverse-focus-enabled: @cont-color-action-bg-inverse-base; +@comp-button-container-color-bg-inverse-focus-hover: @cont-color-action-bg-inverse-moderate; +@comp-button-container-color-bg-inverse-focus-pressed: @cont-color-action-bg-inverse-bold; +@comp-button-container-color-bg-inverse-moderate-hover: @cont-color-action-bg-inverse-minimal; +@comp-button-container-color-bg-inverse-moderate-pressed: @cont-color-action-bg-inverse-subtle; +@comp-button-container-color-bg-inverse-moderate-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-button-container-color-bg-inverse-moderate-focus-pressed: @cont-color-action-bg-inverse-subtle; +@comp-button-container-color-bg-inverse-subtle-hover: @cont-color-action-bg-inverse-minimal; +@comp-button-container-color-bg-inverse-subtle-pressed: @cont-color-action-bg-inverse-subtle; +@comp-button-container-color-bg-inverse-subtle-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-button-container-color-bg-inverse-subtle-focus-pressed: @cont-color-action-bg-inverse-subtle; +@comp-button-container-color-bg-persist-on-light-enabled: @cont-color-action-bg-persist-on-light-base; +@comp-button-container-color-bg-persist-on-light-hover: @cont-color-action-bg-persist-on-light-moderate; +@comp-button-container-color-bg-persist-on-light-pressed: @cont-color-action-bg-persist-on-light-bold; +@comp-button-container-color-bg-persist-on-light-focus-enabled: @cont-color-action-bg-persist-on-light-base; +@comp-button-container-color-bg-persist-on-light-focus-hover: @cont-color-action-bg-persist-on-light-moderate; +@comp-button-container-color-bg-persist-on-light-focus-pressed: @cont-color-action-bg-persist-on-light-bold; +@comp-button-container-color-bg-persist-on-light-moderate-hover: @cont-color-action-bg-persist-on-light-minimal; +@comp-button-container-color-bg-persist-on-light-moderate-pressed: @cont-color-action-bg-persist-on-light-subtle; +@comp-button-container-color-bg-persist-on-light-moderate-focus-hover: @cont-color-action-bg-persist-on-light-minimal; +@comp-button-container-color-bg-persist-on-light-moderate-focus-pressed: @cont-color-action-bg-persist-on-light-subtle; +@comp-button-container-color-bg-persist-on-light-subtle-hover: @cont-color-action-bg-persist-on-light-minimal; +@comp-button-container-color-bg-persist-on-light-subtle-pressed: @cont-color-action-bg-persist-on-light-subtle; +@comp-button-container-color-bg-persist-on-light-subtle-focus-hover: @cont-color-action-bg-persist-on-light-minimal; +@comp-button-container-color-bg-persist-on-light-subtle-focus-pressed: @cont-color-action-bg-persist-on-light-subtle; +@comp-button-container-color-bg-persist-on-dark-enabled: @cont-color-action-bg-persist-on-dark-base; +@comp-button-container-color-bg-persist-on-dark-hover: @cont-color-action-bg-persist-on-dark-moderate; +@comp-button-container-color-bg-persist-on-dark-pressed: @cont-color-action-bg-persist-on-dark-bold; +@comp-button-container-color-bg-persist-on-dark-focus-enabled: @cont-color-action-bg-persist-on-dark-base; +@comp-button-container-color-bg-persist-on-dark-focus-hover: @cont-color-action-bg-persist-on-dark-moderate; +@comp-button-container-color-bg-persist-on-dark-focus-pressed: @cont-color-action-bg-persist-on-dark-bold; +@comp-button-container-color-bg-persist-on-dark-moderate-hover: @cont-color-action-bg-persist-on-dark-minimal; +@comp-button-container-color-bg-persist-on-dark-moderate-pressed: @cont-color-action-bg-persist-on-dark-subtle; +@comp-button-container-color-bg-persist-on-dark-moderate-focus-hover: @cont-color-action-bg-persist-on-dark-minimal; +@comp-button-container-color-bg-persist-on-dark-moderate-focus-pressed: @cont-color-action-bg-persist-on-dark-subtle; +@comp-button-container-color-bg-persist-on-dark-subtle-hover: @cont-color-action-bg-persist-on-dark-minimal; +@comp-button-container-color-bg-persist-on-dark-subtle-pressed: @cont-color-action-bg-persist-on-dark-subtle; +@comp-button-container-color-bg-persist-on-dark-subtle-focus-hover: @cont-color-action-bg-persist-on-dark-minimal; +@comp-button-container-color-bg-persist-on-dark-subtle-focus-pressed: @cont-color-action-bg-persist-on-dark-subtle; +@comp-button-container-color-border-neutral-enabled: @cont-color-action-border-neutral-base; +@comp-button-container-color-border-neutral-hover: @cont-color-action-border-neutral-moderate; +@comp-button-container-color-border-neutral-pressed: @cont-color-action-border-neutral-bold; +@comp-button-container-color-border-neutral-focus-enabled: @cont-color-action-border-neutral-base; +@comp-button-container-color-border-neutral-focus-hover: @cont-color-action-border-neutral-moderate; +@comp-button-container-color-border-neutral-focus-pressed: @cont-color-action-border-neutral-bold; +@comp-button-container-color-border-secondary-enabled: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-secondary-hover: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-secondary-pressed: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-secondary-focus-enabled: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-secondary-focus-hover: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-secondary-focus-pressed: @cont-color-action-border-secondary-moderate; +@comp-button-container-color-border-positive-moderate-enabled: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-positive-moderate-hover: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-positive-moderate-pressed: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-positive-moderate-focus-enabled: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-positive-moderate-focus-hover: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-positive-moderate-focus-pressed: @cont-color-action-border-positive-moderate; +@comp-button-container-color-border-negative-moderate-enabled: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-negative-moderate-hover: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-negative-moderate-pressed: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-negative-moderate-focus-enabled: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-negative-moderate-focus-hover: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-negative-moderate-focus-pressed: @cont-color-action-border-negative-moderate; +@comp-button-container-color-border-buy-moderate-enabled: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-buy-moderate-hover: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-buy-moderate-pressed: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-buy-moderate-focus-enabled: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-buy-moderate-focus-hover: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-buy-moderate-focus-pressed: @cont-color-action-border-buy-moderate; +@comp-button-container-color-border-sell-moderate-enabled: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-sell-moderate-hover: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-sell-moderate-pressed: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-sell-moderate-focus-enabled: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-sell-moderate-focus-hover: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-sell-moderate-focus-pressed: @cont-color-action-border-sell-moderate; +@comp-button-container-color-border-inverse-moderate-enabled: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-inverse-moderate-hover: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-inverse-moderate-pressed: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-inverse-moderate-focus-enabled: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-inverse-moderate-focus-hover: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-inverse-moderate-focus-pressed: @cont-color-action-border-inverse-moderate; +@comp-button-container-color-border-persist-on-light-moderate-enabled: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-light-moderate-hover: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-light-moderate-pressed: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-light-moderate-focus-enabled: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-light-moderate-focus-hover: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-light-moderate-focus-pressed: @cont-color-action-border-persist-on-light-base; +@comp-button-container-color-border-persist-on-dark-moderate-enabled: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-color-border-persist-on-dark-moderate-hover: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-color-border-persist-on-dark-moderate-pressed: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-color-border-persist-on-dark-moderate-focus-enabled: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-color-border-persist-on-dark-moderate-focus-hover: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-color-border-persist-on-dark-moderate-focus-pressed: @cont-color-action-border-persist-on-dark-base; +@comp-button-container-elevation-neutral-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-neutral-hover: @cont-elevation-action-base; +@comp-button-container-elevation-neutral-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-neutral-loading: @cont-elevation-action-base; +@comp-button-container-elevation-neutral-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-primary-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-primary-hover: @cont-elevation-action-base; +@comp-button-container-elevation-primary-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-primary-loading: @cont-elevation-action-base; +@comp-button-container-elevation-primary-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-secondary-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-secondary-hover: @cont-elevation-action-base; +@comp-button-container-elevation-secondary-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-secondary-loading: @cont-elevation-action-base; +@comp-button-container-elevation-secondary-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-tertiary-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-tertiary-hover: @cont-elevation-action-base; +@comp-button-container-elevation-tertiary-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-tertiary-loading: @cont-elevation-action-base; +@comp-button-container-elevation-tertiary-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-hover: @cont-elevation-action-base; +@comp-button-container-elevation-positive-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-positive-loading: @cont-elevation-action-base; +@comp-button-container-elevation-positive-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-positive-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-positive-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-positive-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-positive-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-positive-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-positive-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-positive-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-hover: @cont-elevation-action-base; +@comp-button-container-elevation-negative-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-negative-loading: @cont-elevation-action-base; +@comp-button-container-elevation-negative-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-negative-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-negative-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-negative-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-negative-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-negative-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-negative-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-negative-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-hover: @cont-elevation-action-base; +@comp-button-container-elevation-buy-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-buy-loading: @cont-elevation-action-base; +@comp-button-container-elevation-buy-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-buy-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-buy-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-buy-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-buy-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-buy-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-buy-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-buy-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-hover: @cont-elevation-action-base; +@comp-button-container-elevation-sell-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-sell-loading: @cont-elevation-action-base; +@comp-button-container-elevation-sell-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-sell-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-sell-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-sell-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-sell-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-sell-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-sell-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-sell-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-hover: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-loading: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-inverse-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-light-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-moderate-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-moderate-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-moderate-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-moderate-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-moderate-disabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-subtle-enabled: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-subtle-hover: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-subtle-pressed: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-subtle-loading: @cont-elevation-action-base; +@comp-button-container-elevation-persist-on-dark-subtle-disabled: @cont-elevation-action-base; +@comp-button-container-icon-only-border-width-sm: @cont-border-width-action-base; +@comp-button-container-icon-only-border-width-md: @cont-border-width-action-base; +@comp-button-container-icon-only-border-width-lg: @cont-border-width-action-base; +@comp-button-container-icon-only-spacing-padding-md: @cont-spacing-common-padding-inset-100; +@comp-button-container-icon-only-spacing-padding-lg: @cont-spacing-common-padding-inset-200; +@comp-button-container-border-width-sm: @cont-border-width-action-base; +@comp-button-container-border-width-md: @cont-border-width-action-base; +@comp-button-container-border-width-lg: @cont-border-width-action-base; +@comp-button-label-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-button-label-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-button-label-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-button-label-color-fg-neutral-loading: @cont-color-action-fg-on-neutral-base; +@comp-button-label-color-fg-neutral-focus-enabled: @cont-color-action-fg-on-neutral-base; +@comp-button-label-color-fg-neutral-focus-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-button-label-color-fg-neutral-focus-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-button-label-color-fg-neutral-focus-loading: @cont-color-action-fg-on-neutral-base; +@comp-button-label-color-fg-primary-loading: @cont-color-action-fg-on-primary-minimal; +@comp-button-label-color-fg-primary-focus-loading: @cont-color-action-fg-on-primary-minimal; +@comp-button-label-color-fg-positive-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-focus-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-focus-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-focus-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-moderate-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-focus-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-focus-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-focus-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-positive-subtle-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-label-color-fg-negative-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-focus-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-focus-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-focus-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-moderate-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-focus-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-focus-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-focus-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-negative-subtle-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-label-color-fg-buy-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-focus-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-focus-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-focus-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-moderate-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-focus-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-focus-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-focus-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-buy-subtle-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-label-color-fg-sell-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-focus-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-focus-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-focus-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-moderate-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-focus-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-focus-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-focus-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-sell-subtle-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-label-color-fg-inverse-enabled: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-hover: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-pressed: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-focus-enabled: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-focus-hover: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-focus-pressed: @cont-color-action-fg-on-inverse-base; +@comp-button-label-color-fg-inverse-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-moderate-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-inverse-subtle-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-label-color-fg-persist-on-light-enabled: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-hover: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-pressed: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-focus-enabled: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-focus-hover: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-focus-pressed: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-label-color-fg-persist-on-light-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-moderate-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-light-subtle-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-label-color-fg-persist-on-dark-enabled: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-hover: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-pressed: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-focus-enabled: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-focus-hover: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-focus-pressed: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-label-color-fg-persist-on-dark-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-focus-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-focus-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-focus-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-moderate-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-focus-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-focus-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-focus-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-color-fg-persist-on-dark-subtle-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-label-typography-sm: @cont-typography-action-sm; +@comp-button-label-typography-md: @cont-typography-action-md; +@comp-button-label-typography-lg: @cont-typography-action-lg; +@comp-button-icon-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-button-icon-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-button-icon-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-button-icon-color-fg-neutral-loading: @cont-color-action-fg-on-neutral-base; +@comp-button-icon-color-fg-neutral-focus-enabled: @cont-color-action-fg-on-neutral-base; +@comp-button-icon-color-fg-neutral-focus-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-button-icon-color-fg-neutral-focus-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-button-icon-color-fg-neutral-focus-loading: @cont-color-action-fg-on-neutral-base; +@comp-button-icon-color-fg-primary-loading: @cont-color-action-fg-on-primary-minimal; +@comp-button-icon-color-fg-primary-focus-loading: @cont-color-action-fg-on-primary-minimal; +@comp-button-icon-color-fg-positive-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-focus-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-focus-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-focus-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-moderate-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-focus-enabled: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-focus-hover: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-focus-pressed: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-positive-subtle-focus-loading: @cont-color-action-fg-on-positive-minimal; +@comp-button-icon-color-fg-negative-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-focus-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-focus-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-focus-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-moderate-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-focus-enabled: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-focus-hover: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-focus-pressed: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-negative-subtle-focus-loading: @cont-color-action-fg-on-negative-minimal; +@comp-button-icon-color-fg-buy-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-focus-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-focus-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-focus-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-moderate-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-focus-enabled: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-focus-hover: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-focus-pressed: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-buy-subtle-focus-loading: @cont-color-action-fg-on-buy-minimal; +@comp-button-icon-color-fg-sell-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-focus-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-focus-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-focus-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-moderate-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-focus-enabled: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-focus-hover: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-focus-pressed: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-sell-subtle-focus-loading: @cont-color-action-fg-on-sell-minimal; +@comp-button-icon-color-fg-inverse-enabled: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-hover: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-pressed: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-focus-enabled: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-focus-hover: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-focus-pressed: @cont-color-action-fg-on-inverse-base; +@comp-button-icon-color-fg-inverse-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-moderate-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-inverse-subtle-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-button-icon-color-fg-persist-on-light-enabled: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-hover: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-pressed: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-focus-enabled: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-focus-hover: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-focus-pressed: @cont-color-action-fg-on-persist-on-light-base; +@comp-button-icon-color-fg-persist-on-light-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-moderate-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-light-subtle-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-button-icon-color-fg-persist-on-dark-enabled: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-hover: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-pressed: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-focus-enabled: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-focus-hover: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-focus-pressed: @cont-color-action-fg-on-persist-on-dark-base; +@comp-button-icon-color-fg-persist-on-dark-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-focus-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-focus-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-focus-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-moderate-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-focus-enabled: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-focus-hover: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-focus-pressed: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-icon-color-fg-persist-on-dark-subtle-focus-loading: @cont-color-action-fg-on-persist-on-dark-minimal; +@comp-button-container-radius-sm: @cont-radius-action; +@comp-button-container-radius-md: @cont-radius-action; +@comp-button-container-radius-lg: @cont-radius-action; +@comp-button-container-icon-only-radius-sm: @cont-radius-action; +@comp-button-container-icon-only-radius-md: @cont-radius-action; +@comp-button-container-icon-only-radius-lg: @cont-radius-action; +@comp-button-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-button-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-button-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-button-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-button-container-spacing-gap-md: @cont-spacing-action-gap-sm; +@comp-button-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-button-label-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-primary-focus-enabled: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-primary-focus-hover: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-primary-focus-pressed: @cont-color-action-fg-on-primary-base; +@comp-button-label-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-focus-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-focus-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-focus-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-secondary-focus-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-loading: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-focus-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-button-label-color-fg-tertiary-focus-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-focus-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-tertiary-focus-loading: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-label-color-fg-positive-enabled: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-positive-hover: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-positive-pressed: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-positive-focus-enabled: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-positive-focus-hover: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-positive-focus-pressed: @cont-color-action-fg-on-positive-base; +@comp-button-label-color-fg-negative-enabled: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-negative-hover: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-negative-pressed: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-negative-focus-enabled: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-negative-focus-hover: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-negative-focus-pressed: @cont-color-action-fg-on-negative-base; +@comp-button-label-color-fg-buy-enabled: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-buy-hover: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-buy-pressed: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-buy-focus-enabled: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-buy-focus-hover: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-buy-focus-pressed: @cont-color-action-fg-on-buy-base; +@comp-button-label-color-fg-sell-enabled: @cont-color-action-fg-on-sell-base; +@comp-button-label-color-fg-sell-hover: @cont-color-action-fg-on-sell-base; +@comp-button-label-color-fg-sell-pressed: @cont-color-action-fg-on-sell-base; +@comp-button-label-color-fg-sell-focus-enabled: @cont-color-action-fg-on-sell-base; +@comp-button-label-color-fg-sell-focus-hover: @cont-color-action-fg-on-sell-base; +@comp-button-label-color-fg-sell-focus-pressed: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-primary-focus-enabled: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-primary-focus-hover: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-primary-focus-pressed: @cont-color-action-fg-on-primary-base; +@comp-button-icon-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-focus-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-focus-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-focus-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-secondary-focus-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-button-icon-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-loading: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-focus-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-focus-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-focus-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-tertiary-focus-loading: @cont-color-action-fg-on-tertiary-minimal; +@comp-button-icon-color-fg-positive-enabled: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-positive-hover: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-positive-pressed: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-positive-focus-enabled: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-positive-focus-hover: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-positive-focus-pressed: @cont-color-action-fg-on-positive-base; +@comp-button-icon-color-fg-negative-enabled: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-negative-hover: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-negative-pressed: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-negative-focus-enabled: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-negative-focus-hover: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-negative-focus-pressed: @cont-color-action-fg-on-negative-base; +@comp-button-icon-color-fg-buy-enabled: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-buy-hover: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-buy-pressed: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-buy-focus-enabled: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-buy-focus-hover: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-buy-focus-pressed: @cont-color-action-fg-on-buy-base; +@comp-button-icon-color-fg-sell-enabled: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-sell-hover: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-sell-pressed: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-sell-focus-enabled: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-sell-focus-hover: @cont-color-action-fg-on-sell-base; +@comp-button-icon-color-fg-sell-focus-pressed: @cont-color-action-fg-on-sell-base; +@comp-button-container-icon-only-sizing-min-inline-sm: @cont-sizing-action-sm; +@comp-button-container-icon-only-sizing-min-inline-md: @cont-sizing-action-md; +@comp-button-container-icon-only-sizing-min-inline-lg: @cont-sizing-action-lg; +@comp-button-container-icon-only-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-button-container-icon-only-sizing-min-block-md: @cont-sizing-action-md; +@comp-button-container-icon-only-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-button-container-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-button-container-sizing-min-block-md: @cont-sizing-action-md; +@comp-button-container-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-button-container-sizing-min-inline-sm: @cont-sizing-action-sm * 2; +@comp-button-container-sizing-min-inline-md: @cont-sizing-action-md * 2; +@comp-button-container-sizing-min-inline-lg: @cont-sizing-action-lg * 2; diff --git a/packages/ds-theme/src/web-design-tokens/component/checkbox.less b/packages/ds-theme/src/web-design-tokens/component/checkbox.less new file mode 100644 index 0000000000..3568be41e9 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/checkbox.less @@ -0,0 +1,94 @@ +// Do not edit directly, this file was auto-generated. + +@comp-checkbox-control-container-color-bg-enabled: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-hover: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-pressed: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-read-only: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-invalid-enabled: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-invalid-hover: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-invalid-pressed: @core-color-palette-misc-transparent; +@comp-checkbox-control-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-checkbox-control-container-color-bg-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-checkbox-control-container-color-bg-checked-read-only: @cont-color-common-container-misc-transparent; +@comp-checkbox-control-container-color-bg-checked-invalid-enabled: @cont-color-common-container-negative-base; +@comp-checkbox-control-container-color-bg-checked-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-checkbox-control-container-color-bg-checked-invalid-pressed: @cont-color-common-container-negative-bold; +@comp-checkbox-control-container-color-border-disabled: @cont-color-common-container-misc-disabled; +@comp-checkbox-control-container-color-border-invalid-enabled: @cont-color-common-container-negative-base; +@comp-checkbox-control-container-color-border-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-checkbox-control-container-color-border-invalid-pressed: @cont-color-common-container-negative-bold; +@comp-checkbox-control-container-color-border-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-checkbox-control-container-color-border-checked-invalid-enabled: @cont-color-common-container-negative-base; +@comp-checkbox-control-container-color-border-checked-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-checkbox-control-container-color-border-checked-invalid-pressed: @cont-color-common-container-negative-moderate; +@comp-checkbox-control-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-checkbox-control-container-elevation-read-only: @cont-elevation-common-level-0; +@comp-checkbox-control-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-checkbox-checkmark-container-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-checkbox-checkmark-container-color-fg-read-only: @cont-color-common-fg-generic-bold; +@comp-checkbox-checkmark-typography-sm: @cont-typography-common-icon-base-xs; +@comp-checkbox-checkmark-typography-md: @cont-typography-common-icon-base-sm; +@comp-checkbox-checkmark-typography-lg: @cont-typography-common-icon-base-md; +@comp-checkbox-label-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-checkbox-label-color-fg-read-only: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-invalid-enabled: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-invalid-hover: @cont-color-common-fg-generic-bold; +@comp-checkbox-label-color-fg-invalid-pressed: @cont-color-common-fg-generic-bold; +@comp-checkbox-description-color-fg-enabled: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-hover: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-pressed: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-checkbox-description-color-fg-read-only: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-invalid-enabled: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-invalid-hover: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-color-fg-invalid-pressed: @cont-color-common-fg-generic-subtle; +@comp-checkbox-description-typography-sm: @cont-typography-common-label-100-subtle; +@comp-checkbox-description-typography-md: @cont-typography-common-label-100-subtle; +@comp-checkbox-description-typography-lg: @cont-typography-common-label-100-subtle; +@comp-checkbox-control-container-color-bg-checked-enabled: @cont-color-control-bg-base; +@comp-checkbox-control-container-color-bg-checked-hover: @cont-color-control-bg-moderate; +@comp-checkbox-control-container-color-bg-checked-pressed: @cont-color-control-bg-bold; +@comp-checkbox-control-container-color-border-enabled: @cont-color-control-border-moderate; +@comp-checkbox-control-container-color-border-hover: @cont-color-control-border-base; +@comp-checkbox-control-container-color-border-pressed: @cont-color-control-border-base; +@comp-checkbox-control-container-color-border-read-only: @cont-color-control-border-subtle; +@comp-checkbox-control-container-color-border-checked-enabled: @cont-color-control-border-base; +@comp-checkbox-control-container-color-border-checked-hover: @cont-color-control-bg-moderate; +@comp-checkbox-control-container-color-border-checked-pressed: @cont-color-control-bg-bold; +@comp-checkbox-control-container-color-border-checked-read-only: @cont-color-control-border-subtle; +@comp-checkbox-control-container-elevation-enabled: @cont-elevation-control-base; +@comp-checkbox-control-container-elevation-hover: @cont-elevation-control-base; +@comp-checkbox-control-container-elevation-pressed: @cont-elevation-control-base; +@comp-checkbox-control-border-width-sm: @cont-border-width-control-base; +@comp-checkbox-control-border-width-md: @cont-border-width-control-base; +@comp-checkbox-control-border-width-lg: @cont-border-width-control-base; +@comp-checkbox-control-before-container-sizing-sm: @cont-sizing-common-600; +@comp-checkbox-control-before-container-sizing-md: @cont-sizing-common-600; +@comp-checkbox-control-before-container-sizing-lg: @cont-sizing-common-600; +@comp-checkbox-checkmark-container-color-fg-enabled: @cont-color-control-fg-on-base; +@comp-checkbox-checkmark-container-color-fg-hover: @cont-color-control-fg-on-moderate; +@comp-checkbox-checkmark-container-color-fg-pressed: @cont-color-control-fg-on-bold; +@comp-checkbox-checkmark-container-color-fg-invalid-enabled: @cont-color-common-fg-negative-on-negative-bold-inverse; +@comp-checkbox-checkmark-container-color-fg-invalid-hover: @cont-color-common-fg-negative-on-negative-bold-inverse; +@comp-checkbox-checkmark-container-color-fg-invalid-pressed: @cont-color-common-fg-negative-on-negative-bold-inverse; +@comp-checkbox-label-typography-sm: @cont-typography-control-subtle-sm; +@comp-checkbox-label-typography-md: @cont-typography-control-subtle-md; +@comp-checkbox-label-typography-lg: @cont-typography-control-subtle-lg; +@comp-checkbox-container-spacing-gap-sm: @cont-spacing-control-gap-sm; +@comp-checkbox-container-spacing-gap-md: @cont-spacing-control-gap-md; +@comp-checkbox-container-spacing-gap-lg: @cont-spacing-control-gap-lg; +@comp-checkbox-inner-container-spacing-gap-sm: @cont-spacing-control-gap-sm; +@comp-checkbox-inner-container-spacing-gap-md: @cont-spacing-control-gap-md; +@comp-checkbox-inner-container-spacing-gap-lg: @cont-spacing-control-gap-lg; +@comp-checkbox-control-container-sizing-sm: @cont-sizing-control-sm; +@comp-checkbox-control-container-sizing-md: @cont-sizing-control-md; +@comp-checkbox-control-container-sizing-lg: @cont-sizing-control-lg; +@comp-checkbox-control-container-radius-sm: @cont-radius-control; +@comp-checkbox-control-container-radius-md: @cont-radius-control; +@comp-checkbox-control-container-radius-lg: @cont-radius-control; +@comp-checkbox-label-sizing-min-block-sm: @cont-sizing-control-sm; +@comp-checkbox-label-sizing-min-block-md: @cont-sizing-control-md; +@comp-checkbox-label-sizing-min-block-lg: @cont-sizing-control-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/close-button.less b/packages/ds-theme/src/web-design-tokens/component/close-button.less new file mode 100644 index 0000000000..506ba0ac65 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/close-button.less @@ -0,0 +1,47 @@ +// Do not edit directly, this file was auto-generated. + +@comp-close-button-target-container-sizing-sm: 100%; +@comp-close-button-target-container-sizing-md: 100%; +@comp-close-button-target-container-sizing-lg: 100%; +@comp-close-button-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-close-button-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-close-button-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-close-button-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-bg-hover: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-bg-pressed: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-bg-loading: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-bg-disabled: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-border-loading: @cont-color-common-container-misc-transparent; +@comp-close-button-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-close-button-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-close-button-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-close-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-close-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-close-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-close-button-container-elevation-enabled: @cont-elevation-action-base; +@comp-close-button-container-elevation-hover: @cont-elevation-action-base; +@comp-close-button-container-elevation-pressed: @cont-elevation-action-base; +@comp-close-button-container-elevation-loading: @cont-elevation-action-base; +@comp-close-button-container-elevation-disabled: @cont-elevation-action-base; +@comp-close-button-container-border-width-sm: @cont-border-width-action-base; +@comp-close-button-container-border-width-md: @cont-border-width-action-base; +@comp-close-button-container-border-width-lg: @cont-border-width-action-base; +@comp-close-button-icon-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-close-button-icon-color-fg-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-close-button-icon-color-fg-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-close-button-icon-color-fg-loading: @cont-color-action-fg-on-neutral-bold; +@comp-close-button-container-radius-sm: @cont-radius-action; +@comp-close-button-container-radius-md: @cont-radius-action; +@comp-close-button-container-radius-lg: @cont-radius-action; +@comp-close-button-container-sizing-min-inline-sm: @cont-sizing-action-2xs; +@comp-close-button-container-sizing-min-inline-md: @cont-sizing-action-xs; +@comp-close-button-container-sizing-min-inline-lg: @cont-sizing-action-sm; +@comp-close-button-container-sizing-min-block-sm: @cont-sizing-action-2xs; +@comp-close-button-container-sizing-min-block-md: @cont-sizing-action-xs; +@comp-close-button-container-sizing-min-block-lg: @cont-sizing-action-sm; +@comp-close-button-target-container-before-sizing-sm: @cont-sizing-action-sm; +@comp-close-button-target-container-before-sizing-md: @cont-sizing-action-sm; +@comp-close-button-target-container-before-sizing-lg: @cont-sizing-action-sm; diff --git a/packages/ds-theme/src/web-design-tokens/component/content-panel-header.less b/packages/ds-theme/src/web-design-tokens/component/content-panel-header.less new file mode 100644 index 0000000000..eda195f4e4 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/content-panel-header.less @@ -0,0 +1,26 @@ +// Do not edit directly, this file was auto-generated. + +@comp-content-panel-header-base-label-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-base-label-typography-enabled: @cont-typography-common-label-300-subtle; +@comp-content-panel-header-base-icon-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-base-icon-typography-enabled: @cont-typography-common-icon-base-lg; +@comp-content-panel-header-link-container-elevation-box-shadow-enabled: @cont-elevation-common-level-0; +@comp-content-panel-header-link-container-elevation-box-shadow-hover: @cont-elevation-common-level-0; +@comp-content-panel-header-link-container-elevation-box-shadow-pressed: @cont-elevation-common-level-0; +@comp-content-panel-header-link-container-elevation-box-shadow-focus: @cont-elevation-common-level-0; +@comp-content-panel-header-link-label-typography-enabled: @cont-typography-common-label-300-subtle; +@comp-content-panel-header-link-label-typography-hover: @cont-typography-common-label-300-subtle; +@comp-content-panel-header-link-label-typography-pressed: @cont-typography-common-label-300-subtle; +@comp-content-panel-header-link-label-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-label-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-label-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-icon-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-icon-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-icon-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-content-panel-header-link-icon-typography-enabled: @cont-typography-common-icon-base-lg; +@comp-content-panel-header-link-icon-typography-hover: @cont-typography-common-icon-base-lg; +@comp-content-panel-header-link-icon-typography-pressed: @cont-typography-common-icon-base-lg; +@comp-content-panel-header-container-sizing-min-block: @cont-sizing-common-700; +@comp-content-panel-header-container-spacing-gap: @cont-spacing-common-gap-200; +@comp-content-panel-header-link-container-spacing-gap: @cont-spacing-common-gap-100; +@comp-content-panel-header-link-container-radius: @cont-radius-common-xs; diff --git a/packages/ds-theme/src/web-design-tokens/component/content-panel.less b/packages/ds-theme/src/web-design-tokens/component/content-panel.less new file mode 100644 index 0000000000..8d60a7b798 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/content-panel.less @@ -0,0 +1,30 @@ +// Do not edit directly, this file was auto-generated. + +@comp-content-panel-container-spacing-padding: @cont-spacing-common-padding-inset-000; +@comp-content-panel-main-container-spacing-padding-block-start: @cont-spacing-common-padding-inset-000; +@comp-content-panel-footer-container-spacing-padding-block-start: @cont-spacing-common-padding-inset-000; +@comp-content-panel-container-color-bg-enabled: @cont-color-common-container-surface-layer-1; +@comp-content-panel-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-container-border-width-block-start: @cont-border-width-common-none; +@comp-content-panel-container-border-width-inline-end: @cont-border-width-common-none; +@comp-content-panel-container-border-width-block-end: @cont-border-width-common-none; +@comp-content-panel-container-border-width-inline-start: @cont-border-width-common-none; +@comp-content-panel-container-elevation-box-shadow-enabled: @cont-elevation-common-level-0; +@comp-content-panel-container-elevation-box-shadow-hover: @cont-elevation-common-level-0; +@comp-content-panel-container-elevation-box-shadow-pressed: @cont-elevation-common-level-0; +@comp-content-panel-container-elevation-box-shadow-focus: @cont-elevation-common-level-0; +@comp-content-panel-header-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-header-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-header-border-width-block-end: @cont-border-width-common-none; +@comp-content-panel-main-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-footer-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-footer-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-content-panel-footer-border-width-block-start: @cont-border-width-common-none; +@comp-content-panel-header-container-spacing-padding-inline: @cont-spacing-common-padding-inset-600; +@comp-content-panel-header-container-spacing-padding-block-start: @cont-spacing-common-padding-inset-300; +@comp-content-panel-header-container-spacing-padding-block-end: @cont-spacing-common-padding-inset-300; +@comp-content-panel-main-container-spacing-padding-inline: @cont-spacing-common-padding-inset-600; +@comp-content-panel-main-container-spacing-padding-block-end: @cont-spacing-common-padding-inset-600; +@comp-content-panel-footer-container-spacing-padding-inline: @cont-spacing-common-padding-inset-600; +@comp-content-panel-footer-container-spacing-padding-block-end: @cont-spacing-common-padding-inset-600; +@comp-content-panel-container-radius: @cont-radius-panel; diff --git a/packages/ds-theme/src/web-design-tokens/component/context-menu.less b/packages/ds-theme/src/web-design-tokens/component/context-menu.less new file mode 100644 index 0000000000..79c8de058a --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/context-menu.less @@ -0,0 +1,4 @@ +// Do not edit directly, this file was auto-generated. + +@comp-context-menu-container-sizing-max-inline: @cont-sizing-common-1800; +@comp-context-menu-spacing-gap: @cont-spacing-common-gap-100; diff --git a/packages/ds-theme/src/web-design-tokens/component/dialog-header.less b/packages/ds-theme/src/web-design-tokens/component/dialog-header.less new file mode 100644 index 0000000000..c756cd7154 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/dialog-header.less @@ -0,0 +1,8 @@ +// Do not edit directly, this file was auto-generated. + +@comp-dialog-header-label-typography: @cont-typography-common-sub-heading-100; +@comp-dialog-header-label-color-fg: @cont-color-common-fg-generic-bold; +@comp-dialog-header-icon-typography: @cont-typography-common-icon-base-lg; +@comp-dialog-header-icon-color-fg: @cont-color-common-fg-generic-bold; +@comp-dialog-header-container-sizing-min-block: @cont-sizing-common-600; +@comp-dialog-header-container-spacing-gap: @cont-spacing-common-gap-200; diff --git a/packages/ds-theme/src/web-design-tokens/component/dialog.less b/packages/ds-theme/src/web-design-tokens/component/dialog.less new file mode 100644 index 0000000000..6701a13bbe --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/dialog.less @@ -0,0 +1,58 @@ +// Do not edit directly, this file was auto-generated. + +@comp-dialog-container-sizing-inline: 400px; +@comp-dialog-container-spacing-padding-modal: @cont-spacing-common-padding-inset-000; +@comp-dialog-container-spacing-padding-non-modal: @cont-spacing-common-padding-inset-000; +@comp-dialog-container-color-bg-modal-enabled: @cont-color-common-container-surface-layer-3; +@comp-dialog-container-color-bg-non-modal-enabled: @cont-color-common-container-surface-layer-3; +@comp-dialog-container-color-bg-non-modal-focus-within: @cont-color-common-container-surface-layer-3; +@comp-dialog-container-color-border-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-container-color-border-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-container-color-border-non-modal-focus-within: @cont-color-common-container-surface-on-layer-3-moderate; +@comp-dialog-container-color-border-non-modal-drag: @cont-color-common-container-misc-transparent; +@comp-dialog-container-elevation-modal-enabled: @cont-elevation-common-overlay-top; +@comp-dialog-container-elevation-non-modal-enabled: @cont-elevation-common-overlay-top; +@comp-dialog-container-elevation-non-modal-focus-within: @cont-elevation-common-overlay-top; +@comp-dialog-container-elevation-non-modal-drag: @cont-elevation-common-overlay-top; +@comp-dialog-header-container-color-bg-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-header-container-color-bg-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-header-container-color-bg-non-modal-focus-within: @cont-color-common-container-misc-transparent; +@comp-dialog-header-container-color-border-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-header-container-color-border-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-header-container-color-border-non-modal-focus-within: @cont-color-common-container-misc-transparent; +@comp-dialog-header-border-width-block-end-modal: @cont-border-width-common-none; +@comp-dialog-header-border-width-block-end-non-modal: @cont-border-width-common-none; +@comp-dialog-body-container-color-bg-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-body-container-color-bg-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-body-container-color-bg-non-modal-focus-within: @cont-color-common-container-misc-transparent; +@comp-dialog-body-content-typography: @cont-typography-common-body-200-base; +@comp-dialog-body-content-color-fg: @cont-color-common-fg-generic-moderate; +@comp-dialog-footer-container-color-bg-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-color-bg-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-color-bg-non-modal-focus-within: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-color-border-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-color-border-non-modal-enabled: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-color-border-non-modal-focus-within: @cont-color-common-container-misc-transparent; +@comp-dialog-footer-container-border-width-block-start-modal: @cont-border-width-common-none; +@comp-dialog-footer-container-border-width-block-start-non-modal: @cont-border-width-common-none; +@comp-dialog-footer-container-opacity-non-modal-enabled: @cont-opacity-common-moderate; +@comp-dialog-footer-container-opacity-non-modal-focus-within: @cont-opacity-common-full; +@comp-dialog-backdrop-container-color-bg-modal: @cont-color-common-container-surface-layer-overlay; +@comp-dialog-backdrop-container-color-bg-non-modal: @cont-color-common-container-misc-transparent; +@comp-dialog-dialog-header-label-color-fg-focus-within: @cont-color-common-fg-generic-bold; +@comp-dialog-dialog-header-icon-color-fg-focus-within: @cont-color-common-fg-generic-bold; +@comp-dialog-container-border-width-modal: @cont-border-width-modal-base; +@comp-dialog-container-border-width-non-modal: @cont-border-width-modal-base; +@comp-dialog-header-container-spacing-padding-inline-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-header-container-spacing-padding-inline-non-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-header-container-spacing-padding-block-start-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-header-container-spacing-padding-block-start-non-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-header-container-spacing-padding-block-end-modal: @cont-spacing-common-padding-inset-300; +@comp-dialog-header-container-spacing-padding-block-end-non-modal: @cont-spacing-common-padding-inset-300; +@comp-dialog-body-container-spacing-padding-modal: @cont-spacing-common-padding-inline-600; +@comp-dialog-body-container-spacing-padding-non-modal: @cont-spacing-common-padding-inline-600; +@comp-dialog-footer-container-sizing-min-block: @cont-sizing-common-1000; +@comp-dialog-footer-container-spacing-padding-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-footer-container-spacing-padding-non-modal: @cont-spacing-common-padding-inset-600; +@comp-dialog-container-radius-modal: @cont-radius-modal; +@comp-dialog-container-radius-non-modal: @cont-radius-modal; diff --git a/packages/ds-theme/src/web-design-tokens/component/disclosure.less b/packages/ds-theme/src/web-design-tokens/component/disclosure.less new file mode 100644 index 0000000000..8471fe7e35 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/disclosure.less @@ -0,0 +1,94 @@ +// Do not edit directly, this file was auto-generated. + +@comp-disclosure-button-indicator-motion-transform-rotate-collapsed: 0deg; +@comp-disclosure-button-indicator-motion-transform-rotate-expanded: 90deg; +@comp-disclosure-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-disclosure-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-disclosure-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-disclosure-container-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-disclosure-container-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-disclosure-container-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-disclosure-panel-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-disclosure-panel-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-disclosure-panel-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-disclosure-container-color-bg-base: @cont-color-common-container-misc-transparent; +@comp-disclosure-container-color-border-base: @cont-color-common-container-misc-transparent; +@comp-disclosure-container-border-width-sm: @cont-border-width-common-none; +@comp-disclosure-container-border-width-md: @cont-border-width-common-none; +@comp-disclosure-container-border-width-lg: @cont-border-width-common-none; +@comp-disclosure-container-radius-sm: @cont-radius-common-none; +@comp-disclosure-container-radius-md: @cont-radius-common-none; +@comp-disclosure-container-radius-lg: @cont-radius-common-none; +@comp-disclosure-container-elevation-base: @cont-elevation-common-level-0; +@comp-disclosure-button-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-bg-hover: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-bg-pressed: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-bg-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-bg-selected-hover: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-bg-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-selected-hover: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-color-border-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-disclosure-button-container-border-width-sm: @cont-border-width-common-none; +@comp-disclosure-button-container-border-width-md: @cont-border-width-common-none; +@comp-disclosure-button-container-border-width-lg: @cont-border-width-common-none; +@comp-disclosure-button-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-disclosure-button-container-elevation-selected-focus: @cont-elevation-common-focus-outset-base; +@comp-disclosure-button-indicator-typography-sm: @cont-typography-common-icon-base-sm; +@comp-disclosure-button-indicator-typography-md: @cont-typography-common-icon-base-md; +@comp-disclosure-button-indicator-typography-lg: @cont-typography-common-icon-base-lg; +@comp-disclosure-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-disclosure-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-disclosure-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-disclosure-panel-container-color-bg-base: @cont-color-common-container-misc-transparent; +@comp-disclosure-panel-container-color-border-base: @cont-color-common-container-misc-transparent; +@comp-disclosure-panel-container-border-width-sm: @cont-border-width-common-none; +@comp-disclosure-panel-container-border-width-md: @cont-border-width-common-none; +@comp-disclosure-panel-container-border-width-lg: @cont-border-width-common-none; +@comp-disclosure-panel-container-radius-sm: @cont-radius-common-none; +@comp-disclosure-panel-container-radius-md: @cont-radius-common-none; +@comp-disclosure-panel-container-radius-lg: @cont-radius-common-none; +@comp-disclosure-panel-container-elevation-base: @cont-elevation-common-level-0; +@comp-disclosure-panel-content-color-fg-base: @cont-color-common-fg-generic-moderate; +@comp-disclosure-button-container-elevation-enabled: @cont-elevation-action-base; +@comp-disclosure-button-container-elevation-hover: @cont-elevation-action-base; +@comp-disclosure-button-container-elevation-pressed: @cont-elevation-action-base; +@comp-disclosure-button-container-elevation-selected-enabled: @cont-elevation-action-base; +@comp-disclosure-button-container-elevation-selected-hover: @cont-elevation-action-base; +@comp-disclosure-button-container-elevation-selected-pressed: @cont-elevation-action-base; +@comp-disclosure-button-indicator-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-indicator-color-fg-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-indicator-color-fg-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-indicator-color-fg-selected-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-indicator-color-fg-selected-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-indicator-color-fg-selected-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-selected-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-selected-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-color-fg-selected-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-label-typography-sm: @cont-typography-action-sm; +@comp-disclosure-button-label-typography-md: @cont-typography-action-md; +@comp-disclosure-button-label-typography-lg: @cont-typography-action-lg; +@comp-disclosure-button-icon-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-icon-color-fg-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-icon-color-fg-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-icon-color-fg-selected-enabled: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-icon-color-fg-selected-hover: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-icon-color-fg-selected-pressed: @cont-color-action-fg-on-neutral-base; +@comp-disclosure-button-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-disclosure-button-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-disclosure-button-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-disclosure-button-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-disclosure-button-container-spacing-gap-md: @cont-spacing-action-gap-md; +@comp-disclosure-button-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-disclosure-button-container-radius-sm: @cont-radius-action; +@comp-disclosure-button-container-radius-md: @cont-radius-action; +@comp-disclosure-button-container-radius-lg: @cont-radius-action; +@comp-disclosure-button-container-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-disclosure-button-container-sizing-min-block-md: @cont-sizing-action-md; +@comp-disclosure-button-container-sizing-min-block-lg: @cont-sizing-action-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/dismiss-button.less b/packages/ds-theme/src/web-design-tokens/component/dismiss-button.less new file mode 100644 index 0000000000..131f5f2905 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/dismiss-button.less @@ -0,0 +1,63 @@ +// Do not edit directly, this file was auto-generated. + +@comp-dismiss-button-container-radius-xs: @cont-radius-common-full; +@comp-dismiss-button-container-radius-sm: @cont-radius-common-full; +@comp-dismiss-button-container-radius-md: @cont-radius-common-full; +@comp-dismiss-button-container-radius-lg: @cont-radius-common-full; +@comp-dismiss-button-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-dismiss-button-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-dismiss-button-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-dismiss-button-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-dismiss-button-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-dismiss-button-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-dismiss-button-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-dismiss-button-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-dismiss-button-icon-typography-xs: @cont-typography-common-icon-base-xs; +@comp-dismiss-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-dismiss-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-dismiss-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-dismiss-button-icon-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-dismiss-button-icon-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-dismiss-button-icon-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-dismiss-button-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-dismiss-button-container-sizing-min-block-xs: @cont-sizing-common-400; +@comp-dismiss-button-container-sizing-min-block-sm: @cont-sizing-common-400; +@comp-dismiss-button-container-sizing-min-block-md: @cont-sizing-common-500; +@comp-dismiss-button-container-sizing-min-block-lg: @cont-sizing-common-600; +@comp-dismiss-button-container-sizing-min-inline-xs: @cont-sizing-common-400; +@comp-dismiss-button-container-sizing-min-inline-sm: @cont-sizing-common-400; +@comp-dismiss-button-container-sizing-min-inline-md: @cont-sizing-common-500; +@comp-dismiss-button-container-sizing-min-inline-lg: @cont-sizing-common-600; +@comp-dismiss-button-container-color-bg-hover: @cont-color-action-bg-tertiary-minimal; +@comp-dismiss-button-container-color-bg-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-dismiss-button-container-elevation-enabled: @cont-elevation-control-base; +@comp-dismiss-button-container-elevation-hover: @cont-elevation-control-base; +@comp-dismiss-button-container-elevation-pressed: @cont-elevation-control-base; +@comp-dismiss-button-container-before-sizing-xs: @cont-sizing-common-600; +@comp-dismiss-button-container-before-sizing-sm: @cont-sizing-common-600; +@comp-dismiss-button-container-before-sizing-md: @cont-sizing-common-600; +@comp-dismiss-button-container-before-sizing-lg: @cont-sizing-common-600; +@comp-dismiss-button-container-before-position-inset-inline-start-xs: ( + @comp-dismiss-button-container-sizing-min-inline-xs - @comp-dismiss-button-container-before-sizing-xs + )/2; +@comp-dismiss-button-container-before-position-inset-inline-start-sm: ( + @comp-dismiss-button-container-sizing-min-inline-sm - @comp-dismiss-button-container-before-sizing-sm + )/2; +@comp-dismiss-button-container-before-position-inset-inline-start-md: ( + @comp-dismiss-button-container-sizing-min-inline-md - @comp-dismiss-button-container-before-sizing-md + )/2; +@comp-dismiss-button-container-before-position-inset-inline-start-lg: ( + @comp-dismiss-button-container-sizing-min-inline-lg - @comp-dismiss-button-container-before-sizing-lg + )/2; +@comp-dismiss-button-container-before-position-inset-block-start-xs: ( + @comp-dismiss-button-container-sizing-min-block-xs - @comp-dismiss-button-container-before-sizing-xs + )/2; +@comp-dismiss-button-container-before-position-inset-block-start-sm: ( + @comp-dismiss-button-container-sizing-min-block-sm - @comp-dismiss-button-container-before-sizing-sm + )/2; +@comp-dismiss-button-container-before-position-inset-block-start-md: ( + @comp-dismiss-button-container-sizing-min-block-md - @comp-dismiss-button-container-before-sizing-md + )/2; +@comp-dismiss-button-container-before-position-inset-block-start-lg: ( + @comp-dismiss-button-container-sizing-min-block-lg - @comp-dismiss-button-container-before-sizing-lg + )/2; diff --git a/packages/ds-theme/src/web-design-tokens/component/divider.less b/packages/ds-theme/src/web-design-tokens/component/divider.less new file mode 100644 index 0000000000..f1149fa5aa --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/divider.less @@ -0,0 +1,26 @@ +// Do not edit directly, this file was auto-generated. + +@comp-divider-line-horizontal-border-width-block-start-thin: @cont-border-width-common-subtle; +@comp-divider-line-horizontal-border-width-block-start-medium: @cont-border-width-common-moderate; +@comp-divider-line-horizontal-border-width-block-start-thick: @cont-border-width-common-bold; +@comp-divider-line-color-border-on-canvas-subtle: @cont-color-common-container-surface-on-canvas-subtle; +@comp-divider-line-color-border-on-canvas-moderate: @cont-color-common-container-surface-on-canvas-moderate; +@comp-divider-line-color-border-on-canvas-bold: @cont-color-common-container-surface-on-canvas-bold; +@comp-divider-line-color-border-on-layer-1-subtle: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-divider-line-color-border-on-layer-1-moderate: @cont-color-common-container-surface-on-layer-1-moderate; +@comp-divider-line-color-border-on-layer-1-bold: @cont-color-common-container-surface-on-layer-1-bold; +@comp-divider-line-color-border-on-layer-2-subtle: @cont-color-common-container-surface-on-layer-2-subtle; +@comp-divider-line-color-border-on-layer-2-moderate: @cont-color-common-container-surface-on-layer-2-moderate; +@comp-divider-line-color-border-on-layer-2-bold: @cont-color-common-container-surface-on-layer-2-bold; +@comp-divider-line-color-border-on-layer-3-subtle: @cont-color-common-container-surface-on-layer-3-subtle; +@comp-divider-line-color-border-on-layer-3-moderate: @cont-color-common-container-surface-on-layer-3-moderate; +@comp-divider-line-color-border-on-layer-3-bold: @cont-color-common-container-surface-on-layer-3-bold; +@comp-divider-line-color-border-on-layer-4-subtle: @cont-color-common-container-surface-on-layer-4-subtle; +@comp-divider-line-color-border-on-layer-4-moderate: @cont-color-common-container-surface-on-layer-4-moderate; +@comp-divider-line-color-border-on-layer-4-bold: @cont-color-common-container-surface-on-layer-4-bold; +@comp-divider-line-color-border-on-layer-inverse-subtle: @cont-color-common-container-surface-on-layer-inverse-subtle; +@comp-divider-line-color-border-on-layer-inverse-moderate: @cont-color-common-container-surface-on-layer-inverse-moderate; +@comp-divider-line-color-border-on-layer-inverse-bold: @cont-color-common-container-surface-on-layer-inverse-bold; +@comp-divider-line-vertical-border-width-inline-start-thin: @cont-border-width-common-subtle; +@comp-divider-line-vertical-border-width-inline-start-medium: @cont-border-width-common-moderate; +@comp-divider-line-vertical-border-width-inline-start-thick: @cont-border-width-common-bold; diff --git a/packages/ds-theme/src/web-design-tokens/component/drawer-header.less b/packages/ds-theme/src/web-design-tokens/component/drawer-header.less new file mode 100644 index 0000000000..b9de9f03f0 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/drawer-header.less @@ -0,0 +1,6 @@ +// Do not edit directly, this file was auto-generated. + +@comp-drawer-header-label-typography: @cont-typography-common-sub-heading-100; +@comp-drawer-header-label-color-fg: @cont-color-common-fg-generic-bold; +@comp-drawer-header-container-sizing-min-block: @cont-sizing-common-700; +@comp-drawer-header-container-spacing-gap: @cont-spacing-common-gap-200; diff --git a/packages/ds-theme/src/web-design-tokens/component/drawer.less b/packages/ds-theme/src/web-design-tokens/component/drawer.less new file mode 100644 index 0000000000..32b411ce8f --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/drawer.less @@ -0,0 +1,76 @@ +// Do not edit directly, this file was auto-generated. + +@comp-drawer-container-sizing-inline-start: 400px; +@comp-drawer-container-sizing-inline-end: 400px; +@comp-drawer-container-sizing-block-top: 400px; +@comp-drawer-container-sizing-block-bottom: 400px; +@comp-drawer-container-spacing-padding-overlay: @cont-spacing-common-padding-inset-000; +@comp-drawer-container-spacing-padding-push: @cont-spacing-common-padding-inset-000; +@comp-drawer-container-color-bg-overlay: @cont-color-common-container-surface-layer-3; +@comp-drawer-container-color-bg-push: @cont-color-common-container-misc-transparent; +@comp-drawer-container-color-border-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-container-color-border-push: @cont-color-common-container-misc-transparent; +@comp-drawer-container-border-width-overlay: @cont-border-width-common-none; +@comp-drawer-container-border-width-push: @cont-border-width-common-none; +@comp-drawer-container-radius-overlay-top: @cont-radius-common-none; +@comp-drawer-container-radius-overlay-end: @cont-radius-common-none; +@comp-drawer-container-radius-overlay-bottom: @cont-radius-common-none; +@comp-drawer-container-radius-overlay-start: @cont-radius-common-none; +@comp-drawer-container-radius-push-top: @cont-radius-common-none; +@comp-drawer-container-radius-push-end: @cont-radius-common-none; +@comp-drawer-container-radius-push-bottom: @cont-radius-common-none; +@comp-drawer-container-radius-push-start: @cont-radius-common-none; +@comp-drawer-container-elevation-overlay-top: @cont-elevation-common-overlay-top; +@comp-drawer-container-elevation-overlay-end: @cont-elevation-common-overlay-end; +@comp-drawer-container-elevation-overlay-bottom: @cont-elevation-common-overlay-bottom; +@comp-drawer-container-elevation-overlay-start: @cont-elevation-common-overlay-start; +@comp-drawer-container-elevation-push-top: @cont-elevation-common-level-0; +@comp-drawer-container-elevation-push-end: @cont-elevation-common-level-0; +@comp-drawer-container-elevation-push-bottom: @cont-elevation-common-level-0; +@comp-drawer-container-elevation-push-start: @cont-elevation-common-level-0; +@comp-drawer-header-container-color-bg-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-header-container-color-bg-push: @cont-color-common-container-misc-transparent; +@comp-drawer-header-container-color-border-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-header-container-color-border-push: @cont-color-common-container-misc-transparent; +@comp-drawer-header-container-border-width-block-end-overlay: @cont-border-width-common-none; +@comp-drawer-header-container-border-width-block-end-push: @cont-border-width-common-none; +@comp-drawer-body-container-color-bg-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-body-container-color-bg-push: @cont-color-common-container-misc-transparent; +@comp-drawer-footer-container-color-bg-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-footer-container-color-bg-push: @cont-color-common-container-misc-transparent; +@comp-drawer-footer-container-color-border-overlay: @cont-color-common-container-misc-transparent; +@comp-drawer-footer-container-color-border-push: @cont-color-common-container-misc-transparent; +@comp-drawer-footer-container-border-width-block-start-overlay: @cont-border-width-common-none; +@comp-drawer-footer-container-border-width-block-start-push: @cont-border-width-common-none; +@comp-drawer-backdrop-container-color-bg-overlay: @cont-color-common-container-surface-layer-overlay; +@comp-drawer-backdrop-container-color-bg-push: @cont-color-common-container-misc-transparent; +@comp-drawer-resize-trigger-container-color-border-enabed: @cont-color-common-container-surface-on-layer-3-subtle; +@comp-drawer-resize-trigger-container-color-border-hover: @cont-color-common-container-primary-base; +@comp-drawer-resize-trigger-container-color-border-pressed: @cont-color-common-container-primary-moderate; +@comp-drawer-resize-trigger-border-width-inline-start-end-enabled: @cont-border-width-common-subtle; +@comp-drawer-resize-trigger-border-width-inline-start-end-hover: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-inline-start-end-pressed: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-inline-end-start-enabled: @cont-border-width-common-subtle; +@comp-drawer-resize-trigger-border-width-inline-end-start-hover: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-inline-end-start-pressed: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-block-start-bottom-enabled: @cont-border-width-common-subtle; +@comp-drawer-resize-trigger-border-width-block-start-bottom-hover: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-block-start-bottom-pressed: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-block-end-top-enabled: @cont-border-width-common-subtle; +@comp-drawer-resize-trigger-border-width-block-end-top-hover: @cont-border-width-common-bold; +@comp-drawer-resize-trigger-border-width-block-end-top-pressed: @cont-border-width-common-bold; +@comp-drawer-header-container-spacing-padding-inline-overlay: @cont-spacing-common-padding-inset-600; +@comp-drawer-header-container-spacing-padding-inline-push: @cont-spacing-common-padding-inset-600; +@comp-drawer-header-container-spacing-padding-block-start-overlay: @cont-spacing-common-padding-inset-600; +@comp-drawer-header-container-spacing-padding-block-start-push: @cont-spacing-common-padding-inset-600; +@comp-drawer-header-container-spacing-padding-block-end-overlay: @cont-spacing-common-padding-inset-400; +@comp-drawer-header-container-spacing-padding-block-end-push: @cont-spacing-common-padding-inset-400; +@comp-drawer-body-container-spacing-padding-overlay: @cont-spacing-common-padding-inline-600; +@comp-drawer-body-container-spacing-padding-push: @cont-spacing-common-padding-inline-600; +@comp-drawer-footer-container-sizing-min-block: @cont-sizing-common-1300; +@comp-drawer-footer-container-spacing-padding-overlay: @cont-spacing-common-padding-inset-600; +@comp-drawer-footer-container-spacing-padding-push: @cont-spacing-common-padding-inset-600; +@comp-drawer-resize-trigger-container-sizing-inline-start: @cont-sizing-common-200; +@comp-drawer-resize-trigger-container-sizing-inline-end: @cont-sizing-common-200; +@comp-drawer-resize-trigger-container-sizing-block-top: @cont-sizing-common-200; +@comp-drawer-resize-trigger-container-sizing-block-bottom: @cont-sizing-common-200; diff --git a/packages/ds-theme/src/web-design-tokens/component/flag.less b/packages/ds-theme/src/web-design-tokens/component/flag.less new file mode 100644 index 0000000000..386ded46fb --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/flag.less @@ -0,0 +1,25 @@ +// Do not edit directly, this file was auto-generated. + +@comp-flag-container-radius-circle-xs: @cont-radius-common-full; +@comp-flag-container-radius-circle-sm: @cont-radius-common-full; +@comp-flag-container-radius-circle-md: @cont-radius-common-full; +@comp-flag-container-radius-circle-lg: @cont-radius-common-full; +@comp-flag-container-color-bg-base: @cont-color-common-container-surface-on-layer-1-minimal; +@comp-flag-container-color-border-base: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-flag-container-border-width-xs: @cont-border-width-common-subtle; +@comp-flag-container-border-width-sm: @cont-border-width-common-subtle; +@comp-flag-container-border-width-md: @cont-border-width-common-subtle; +@comp-flag-container-border-width-lg: @cont-border-width-common-subtle; +@comp-flag-icon-typography-xs: @cont-typography-common-icon-emphasized-xs; +@comp-flag-icon-typography-sm: @cont-typography-common-icon-emphasized-sm; +@comp-flag-icon-typography-md: @cont-typography-common-icon-emphasized-md; +@comp-flag-icon-typography-lg: @cont-typography-common-icon-emphasized-lg; +@comp-flag-icon-color-fg-base: @cont-color-common-fg-generic-subtle; +@comp-flag-container-sizing-xs: @cont-sizing-common-400; +@comp-flag-container-sizing-sm: @cont-sizing-common-500; +@comp-flag-container-sizing-md: @cont-sizing-common-600; +@comp-flag-container-sizing-lg: @cont-sizing-common-700; +@comp-flag-container-radius-rectangle-xs: @cont-radius-common-xs; +@comp-flag-container-radius-rectangle-sm: @cont-radius-common-xs; +@comp-flag-container-radius-rectangle-md: @cont-radius-common-xs; +@comp-flag-container-radius-rectangle-lg: @cont-radius-common-xs; diff --git a/packages/ds-theme/src/web-design-tokens/component/icon.less b/packages/ds-theme/src/web-design-tokens/component/icon.less new file mode 100644 index 0000000000..91462fe557 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/icon.less @@ -0,0 +1,10 @@ +// Do not edit directly, this file was auto-generated. + +@comp-icon-typography-xs-base: @cont-typography-common-icon-base-xs; +@comp-icon-typography-xs-filled: @cont-typography-common-icon-emphasized-xs; +@comp-icon-typography-sm-base: @cont-typography-common-icon-base-sm; +@comp-icon-typography-sm-filled: @cont-typography-common-icon-emphasized-sm; +@comp-icon-typography-md-base: @cont-typography-common-icon-base-md; +@comp-icon-typography-md-filled: @cont-typography-common-icon-emphasized-md; +@comp-icon-typography-lg-base: @cont-typography-common-icon-base-lg; +@comp-icon-typography-lg-filled: @cont-typography-common-icon-emphasized-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/menu-button.less b/packages/ds-theme/src/web-design-tokens/component/menu-button.less new file mode 100644 index 0000000000..c4e9719cfc --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/menu-button.less @@ -0,0 +1,205 @@ +// Do not edit directly, this file was auto-generated. + +@comp-menu-button-container-icon-only-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-menu-button-container-color-bg-neutral-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-neutral-selected-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-primary-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-primary-selected-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-secondary-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-bg-secondary-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-secondary-selected-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-bg-tertiary-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-bg-tertiary-selected-disabled: @cont-color-common-container-misc-disabled; +@comp-menu-button-container-color-border-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-neutral-selected-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-hover: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-pressed: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-selected-hover: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-primary-selected-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-secondary-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-secondary-selected-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-hover: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-pressed: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-selected-hover: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-color-border-tertiary-selected-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-button-container-elevation-neutral-focus: @cont-elevation-common-focus-outset-base; +@comp-menu-button-container-elevation-primary-focus: @cont-elevation-common-focus-outset-base; +@comp-menu-button-container-elevation-secondary-focus: @cont-elevation-common-focus-outset-base; +@comp-menu-button-container-elevation-tertiary-focus: @cont-elevation-common-focus-outset-base; +@comp-menu-button-label-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-neutral-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-primary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-secondary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-label-color-fg-tertiary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-neutral-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-primary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-secondary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-color-fg-tertiary-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-menu-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-menu-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-menu-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-menu-button-container-color-bg-neutral-enabled: @cont-color-action-bg-neutral-base; +@comp-menu-button-container-color-bg-neutral-hover: @cont-color-action-bg-neutral-moderate; +@comp-menu-button-container-color-bg-neutral-pressed: @cont-color-action-bg-neutral-bold; +@comp-menu-button-container-color-bg-neutral-selected-enabled: @cont-color-action-bg-neutral-bold; +@comp-menu-button-container-color-bg-neutral-selected-hover: @cont-color-action-bg-neutral-moderate; +@comp-menu-button-container-color-bg-neutral-selected-pressed: @cont-color-action-bg-neutral-bold; +@comp-menu-button-container-color-bg-primary-enabled: @cont-color-action-bg-primary-base; +@comp-menu-button-container-color-bg-primary-hover: @cont-color-action-bg-primary-moderate; +@comp-menu-button-container-color-bg-primary-pressed: @cont-color-action-bg-primary-bold; +@comp-menu-button-container-color-bg-primary-selected-enabled: @cont-color-action-bg-primary-bold; +@comp-menu-button-container-color-bg-primary-selected-hover: @cont-color-action-bg-primary-moderate; +@comp-menu-button-container-color-bg-primary-selected-pressed: @cont-color-action-bg-primary-bold; +@comp-menu-button-container-color-bg-secondary-hover: @cont-color-action-bg-secondary-minimal; +@comp-menu-button-container-color-bg-secondary-pressed: @cont-color-action-bg-secondary-subtle; +@comp-menu-button-container-color-bg-secondary-selected-enabled: @cont-color-action-bg-secondary-subtle; +@comp-menu-button-container-color-bg-secondary-selected-hover: @cont-color-action-bg-secondary-minimal; +@comp-menu-button-container-color-bg-secondary-selected-pressed: @cont-color-action-bg-secondary-subtle; +@comp-menu-button-container-color-bg-tertiary-hover: @cont-color-action-bg-tertiary-minimal; +@comp-menu-button-container-color-bg-tertiary-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-menu-button-container-color-bg-tertiary-selected-enabled: @cont-color-action-bg-tertiary-subtle; +@comp-menu-button-container-color-bg-tertiary-selected-hover: @cont-color-action-bg-tertiary-minimal; +@comp-menu-button-container-color-bg-tertiary-selected-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-menu-button-container-color-border-neutral-enabled: @cont-color-action-border-neutral-base; +@comp-menu-button-container-color-border-neutral-hover: @cont-color-action-border-neutral-moderate; +@comp-menu-button-container-color-border-neutral-pressed: @cont-color-action-border-neutral-bold; +@comp-menu-button-container-color-border-neutral-selected-enabled: @cont-color-action-border-neutral-bold; +@comp-menu-button-container-color-border-neutral-selected-hover: @cont-color-action-border-neutral-moderate; +@comp-menu-button-container-color-border-neutral-selected-pressed: @cont-color-action-border-neutral-bold; +@comp-menu-button-container-color-border-secondary-enabled: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-color-border-secondary-hover: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-color-border-secondary-pressed: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-color-border-secondary-selected-enabled: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-color-border-secondary-selected-hover: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-color-border-secondary-selected-pressed: @cont-color-action-border-secondary-moderate; +@comp-menu-button-container-elevation-neutral-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-selected-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-selected-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-selected-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-neutral-selected-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-selected-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-selected-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-selected-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-primary-selected-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-selected-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-selected-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-selected-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-secondary-selected-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-disabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-selected-enabled: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-selected-hover: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-selected-pressed: @cont-elevation-action-base; +@comp-menu-button-container-elevation-tertiary-selected-disabled: @cont-elevation-action-base; +@comp-menu-button-container-icon-only-border-width-sm: @cont-border-width-action-base; +@comp-menu-button-container-icon-only-border-width-md: @cont-border-width-action-base; +@comp-menu-button-container-icon-only-border-width-lg: @cont-border-width-action-base; +@comp-menu-button-container-icon-only-spacing-padding-md: @cont-spacing-common-padding-inset-100; +@comp-menu-button-container-icon-only-spacing-padding-lg: @cont-spacing-common-padding-inset-200; +@comp-menu-button-container-border-width-sm: @cont-border-width-action-base; +@comp-menu-button-container-border-width-md: @cont-border-width-action-base; +@comp-menu-button-container-border-width-lg: @cont-border-width-action-base; +@comp-menu-button-label-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-menu-button-label-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-menu-button-label-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-label-color-fg-neutral-selected-enabled: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-label-color-fg-neutral-selected-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-menu-button-label-color-fg-neutral-selected-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-label-typography-sm: @cont-typography-action-sm; +@comp-menu-button-label-typography-md: @cont-typography-action-md; +@comp-menu-button-label-typography-lg: @cont-typography-action-lg; +@comp-menu-button-icon-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-menu-button-icon-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-menu-button-icon-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-icon-color-fg-neutral-selected-enabled: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-icon-color-fg-neutral-selected-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-menu-button-icon-color-fg-neutral-selected-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-menu-button-container-radius-sm: @cont-radius-action; +@comp-menu-button-container-radius-md: @cont-radius-action; +@comp-menu-button-container-radius-lg: @cont-radius-action; +@comp-menu-button-container-icon-only-radius-sm: @cont-radius-action; +@comp-menu-button-container-icon-only-radius-md: @cont-radius-action; +@comp-menu-button-container-icon-only-radius-lg: @cont-radius-action; +@comp-menu-button-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-menu-button-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-menu-button-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-menu-button-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-menu-button-container-spacing-gap-md: @cont-spacing-action-gap-sm; +@comp-menu-button-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-menu-button-label-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-primary-selected-enabled: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-primary-selected-hover: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-primary-selected-pressed: @cont-color-action-fg-on-primary-base; +@comp-menu-button-label-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-secondary-selected-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-secondary-selected-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-secondary-selected-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-label-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-label-color-fg-tertiary-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-label-color-fg-tertiary-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-label-color-fg-tertiary-selected-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-label-color-fg-tertiary-selected-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-label-color-fg-tertiary-selected-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-primary-selected-enabled: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-primary-selected-hover: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-primary-selected-pressed: @cont-color-action-fg-on-primary-base; +@comp-menu-button-icon-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-secondary-selected-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-secondary-selected-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-secondary-selected-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-menu-button-icon-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-tertiary-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-tertiary-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-tertiary-selected-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-tertiary-selected-hover: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-icon-color-fg-tertiary-selected-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-menu-button-container-icon-only-sizing-min-inline-sm: @cont-sizing-action-sm; +@comp-menu-button-container-icon-only-sizing-min-inline-md: @cont-sizing-action-md; +@comp-menu-button-container-icon-only-sizing-min-inline-lg: @cont-sizing-action-lg; +@comp-menu-button-container-icon-only-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-menu-button-container-icon-only-sizing-min-block-md: @cont-sizing-action-md; +@comp-menu-button-container-icon-only-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-menu-button-container-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-menu-button-container-sizing-min-block-md: @cont-sizing-action-md; +@comp-menu-button-container-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-menu-button-container-sizing-min-inline-sm: @cont-sizing-action-sm * 2; +@comp-menu-button-container-sizing-min-inline-md: @cont-sizing-action-md * 2; +@comp-menu-button-container-sizing-min-inline-lg: @cont-sizing-action-lg * 2; diff --git a/packages/ds-theme/src/web-design-tokens/component/menu.less b/packages/ds-theme/src/web-design-tokens/component/menu.less new file mode 100644 index 0000000000..6ee01c0018 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/menu.less @@ -0,0 +1,67 @@ +// Do not edit directly, this file was auto-generated. + +@comp-menu-container-spacing-gap: @cont-spacing-common-gap-000; +@comp-menu-group-header-container-color-bg: @core-color-palette-misc-transparent; +@comp-menu-group-container-color-bg: @core-color-palette-misc-transparent; +@comp-menu-group-container-spacing-padding: @cont-spacing-common-padding-inset-000; +@comp-menu-group-container-spacing-gap: @cont-spacing-common-gap-000; +@comp-menu-container-color-bg: @cont-color-common-container-surface-layer-4; +@comp-menu-container-color-border: @cont-color-common-container-surface-on-layer-4-subtle; +@comp-menu-group-header-label-color-fg: @cont-color-common-fg-generic-subtle; // +@comp-menu-group-header-icon-color-fg: @cont-color-common-fg-generic-subtle; // +@comp-menu-group-header-icon-typography: @cont-typography-common-icon-base-sm; +@comp-menu-item-container-color-bg-single-enabled: @cont-color-menu-bg-on-layer-1-minimal; +@comp-menu-item-container-color-bg-single-loading: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-bg-single-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-enabled: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-hover: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-pressed: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-active: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-loading: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-color-border-single-disabled: @cont-color-common-container-misc-transparent; +@comp-menu-item-container-elevation-enabled: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-hover: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-pressed: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-active: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-loading: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-menu-item-container-elevation-focus: @cont-elevation-common-focus-inset-base; +@comp-menu-item-container-border-width: @cont-border-width-common-none; +@comp-menu-item-label-color-fg-single-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-menu-item-indicator-color-fg-single-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-menu-item-indicator-typography: @cont-typography-common-icon-base-md; +@comp-menu-item-icon-color-fg-single-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-menu-container-spacing-padding: @cont-spacing-common-padding-inset-100; +@comp-menu-container-border-width: @cont-border-width-menu-base; +@comp-menu-container-elevation: @cont-elevation-menu-bold; +@comp-menu-group-header-label-typography: @cont-typography-menu-bold-sm; +@comp-menu-group-divider-container-spacing-padding: @cont-spacing-common-padding-inset-100; +@comp-menu-item-container-color-bg-single-hover: @cont-color-menu-bg-on-layer-4-subtle; +@comp-menu-item-container-color-bg-single-pressed: @cont-color-menu-bg-on-layer-4-moderate; +@comp-menu-item-container-color-bg-single-active: @cont-color-menu-bg-on-layer-4-subtle; +@comp-menu-item-label-color-fg-single-enabled: @cont-color-menu-fg-on-minimal; +@comp-menu-item-label-color-fg-single-hover: @cont-color-menu-fg-on-subtle; +@comp-menu-item-label-color-fg-single-pressed: @cont-color-menu-fg-on-moderate; +@comp-menu-item-label-color-fg-single-active: @cont-color-menu-fg-on-subtle; +@comp-menu-item-label-color-fg-single-loading: @cont-color-menu-fg-on-minimal; +@comp-menu-item-label-typography: @cont-typography-menu-subtle-md; +@comp-menu-item-indicator-color-fg-single-enabled: @cont-color-menu-fg-on-minimal; +@comp-menu-item-indicator-color-fg-single-hover: @cont-color-menu-fg-on-subtle; +@comp-menu-item-indicator-color-fg-single-pressed: @cont-color-menu-fg-on-moderate; +@comp-menu-item-indicator-color-fg-single-active: @cont-color-menu-fg-on-subtle; +@comp-menu-item-indicator-color-fg-single-loading: @cont-color-menu-fg-on-minimal; +@comp-menu-item-icon-color-fg-single-enabled: @cont-color-menu-fg-on-minimal; +@comp-menu-item-icon-color-fg-single-hover: @cont-color-menu-fg-on-subtle; +@comp-menu-item-icon-color-fg-single-pressed: @cont-color-menu-fg-on-moderate; +@comp-menu-item-icon-color-fg-single-active: @cont-color-menu-fg-on-subtle; +@comp-menu-item-icon-color-fg-single-loading: @cont-color-menu-fg-on-minimal; +@comp-menu-container-radius: @cont-radius-popover; +@comp-menu-group-header-container-spacing-padding: @cont-spacing-menu-padding-sm; +@comp-menu-group-header-container-spacing-gap: @cont-spacing-menu-gap-sm; +@comp-menu-group-header-container-radius: @cont-radius-menu; +@comp-menu-group-container-radius: @cont-radius-menu; +@comp-menu-item-container-spacing-padding: @cont-spacing-menu-padding-sm; +@comp-menu-item-container-spacing-gap: @cont-spacing-menu-gap-md; +@comp-menu-item-container-radius: @cont-radius-menu; +@comp-menu-group-header-container-sizing-min-block: @cont-sizing-menu-sm; +@comp-menu-item-container-sizing-block: @cont-sizing-menu-sm; diff --git a/packages/ds-theme/src/web-design-tokens/component/nav.less b/packages/ds-theme/src/web-design-tokens/component/nav.less new file mode 100644 index 0000000000..bf87c105cb --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/nav.less @@ -0,0 +1,108 @@ +// Do not edit directly, this file was auto-generated. + +@comp-nav-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-nav-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-nav-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-nav-container-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-nav-container-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-nav-container-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-nav-group-container-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-nav-group-container-spacing-padding-md: @cont-spacing-common-padding-inset-000; +@comp-nav-group-container-spacing-padding-lg: @cont-spacing-common-padding-inset-000; +@comp-nav-group-container-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-nav-group-container-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-nav-group-container-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-nav-item-inner-container-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-nav-item-inner-container-spacing-gap-md: @cont-spacing-common-gap-000; +@comp-nav-item-inner-container-spacing-gap-lg: @cont-spacing-common-gap-000; +@comp-nav-container-color-bg: @cont-color-common-container-misc-transparent; +@comp-nav-container-color-border: @cont-color-common-container-misc-transparent; +@comp-nav-container-radius-sm: @cont-radius-common-none; +@comp-nav-container-radius-md: @cont-radius-common-none; +@comp-nav-container-radius-lg: @cont-radius-common-none; +@comp-nav-container-border-width-sm: @cont-border-width-common-none; +@comp-nav-container-border-width-md: @cont-border-width-common-none; +@comp-nav-container-border-width-lg: @cont-border-width-common-none; +@comp-nav-group-container-color-bg: @cont-color-common-container-misc-transparent; +@comp-nav-group-container-radius-sm: @cont-radius-common-none; +@comp-nav-group-container-radius-md: @cont-radius-common-none; +@comp-nav-group-container-radius-lg: @cont-radius-common-none; +@comp-nav-group-label-container-color-bg: @cont-color-common-container-misc-transparent; +@comp-nav-group-label-container-radius-sm: @cont-radius-common-none; +@comp-nav-group-label-container-radius-md: @cont-radius-common-none; +@comp-nav-group-label-container-radius-lg: @cont-radius-common-none; +@comp-nav-group-label-color-fg: @cont-color-common-fg-generic-subtle; +@comp-nav-item-container-color-bg-enabled: @cont-color-navigation-bg-on-layer-3-minimal; +@comp-nav-item-container-color-bg-loading: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-bg-disabled: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-active: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-loading: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-nav-item-container-border-width-sm: @cont-border-width-common-none; +@comp-nav-item-container-border-width-md: @cont-border-width-common-none; +@comp-nav-item-container-border-width-lg: @cont-border-width-common-none; +@comp-nav-item-container-elevation-enabled: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-hover: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-pressed: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-active: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-loading: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-nav-item-container-elevation-focus: @cont-elevation-common-focus-inset-base; +@comp-nav-item-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-nav-item-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-nav-item-actions-opacity-enabled: @cont-opacity-common-transparent; +@comp-nav-item-actions-opacity-hover: @cont-opacity-common-full; +@comp-nav-item-actions-opacity-pressed: @cont-opacity-common-full; +@comp-nav-item-actions-opacity-active: @cont-opacity-common-transparent; +@comp-nav-item-actions-opacity-disabled: @cont-opacity-common-transparent; +@comp-nav-item-actions-opacity-focus: @cont-opacity-common-full; +@comp-nav-container-elevation: @cont-elevation-navigation-moderate; +@comp-nav-group-label-typography-sm: @cont-typography-navigation-bold-sm; +@comp-nav-group-label-typography-md: @cont-typography-navigation-bold-sm; +@comp-nav-group-label-typography-lg: @cont-typography-navigation-bold-md; +@comp-nav-group-divider-container-spacing-padding-sm: @cont-spacing-common-padding-block-200; +@comp-nav-group-divider-container-spacing-padding-md: @cont-spacing-common-padding-block-200; +@comp-nav-group-divider-container-spacing-padding-lg: @cont-spacing-common-padding-block-200; +@comp-nav-item-container-color-bg-hover: @cont-color-navigation-bg-on-layer-3-subtle; +@comp-nav-item-container-color-bg-pressed: @cont-color-navigation-bg-on-layer-3-moderate; +@comp-nav-item-container-color-bg-active: @cont-color-navigation-bg-on-layer-3-subtle; +@comp-nav-item-label-color-fg-enabled: @cont-color-navigation-fg-on-minimal; +@comp-nav-item-label-color-fg-hover: @cont-color-navigation-fg-on-subtle; +@comp-nav-item-label-color-fg-pressed: @cont-color-navigation-fg-on-moderate; +@comp-nav-item-label-color-fg-active: @cont-color-navigation-fg-on-subtle; +@comp-nav-item-label-color-fg-loading: @cont-color-navigation-fg-on-minimal; +@comp-nav-item-label-typography-sm: @cont-typography-navigation-subtle-sm; +@comp-nav-item-label-typography-md: @cont-typography-navigation-subtle-md; +@comp-nav-item-label-typography-lg: @cont-typography-navigation-subtle-lg; +@comp-nav-item-icon-color-fg-enabled: @cont-color-navigation-fg-on-minimal; +@comp-nav-item-icon-color-fg-hover: @cont-color-navigation-fg-on-subtle; +@comp-nav-item-icon-color-fg-pressed: @cont-color-navigation-fg-on-moderate; +@comp-nav-item-icon-color-fg-active: @cont-color-navigation-fg-on-subtle; +@comp-nav-item-icon-color-fg-loading: @cont-color-navigation-fg-on-minimal; +@comp-nav-item-inner-container-spacing-padding-sm: @cont-spacing-common-padding-block-100; +@comp-nav-item-inner-container-spacing-padding-md: @cont-spacing-common-padding-block-200; +@comp-nav-item-inner-container-spacing-padding-lg: @cont-spacing-common-padding-block-300; +@comp-nav-group-label-container-spacing-padding-sm: @cont-spacing-navigation-padding-sm; +@comp-nav-group-label-container-spacing-padding-md: @cont-spacing-navigation-padding-md; +@comp-nav-group-label-container-spacing-padding-lg: @cont-spacing-navigation-padding-lg; +@comp-nav-group-label-container-spacing-gap-sm: @cont-spacing-navigation-gap-sm; +@comp-nav-group-label-container-spacing-gap-md: @cont-spacing-navigation-gap-sm; +@comp-nav-group-label-container-spacing-gap-lg: @cont-spacing-navigation-gap-md; +@comp-nav-item-container-spacing-padding-sm: @cont-spacing-navigation-padding-sm; +@comp-nav-item-container-spacing-padding-md: @cont-spacing-navigation-padding-md; +@comp-nav-item-container-spacing-padding-lg: @cont-spacing-navigation-padding-lg; +@comp-nav-item-container-spacing-gap-sm: @cont-spacing-navigation-gap-sm; +@comp-nav-item-container-spacing-gap-md: @cont-spacing-navigation-gap-md; +@comp-nav-item-container-spacing-gap-lg: @cont-spacing-navigation-gap-lg; +@comp-nav-item-container-radius-sm: @cont-radius-navigation; +@comp-nav-item-container-radius-md: @cont-radius-navigation; +@comp-nav-item-container-radius-lg: @cont-radius-navigation; +@comp-nav-group-label-container-sizing-min-block-sm: @cont-sizing-navigation-sm; +@comp-nav-group-label-container-sizing-min-block-md: @cont-sizing-navigation-md; +@comp-nav-group-label-container-sizing-min-block-lg: @cont-sizing-navigation-md; +@comp-nav-item-container-sizing-min-block-sm: @cont-sizing-navigation-sm; +@comp-nav-item-container-sizing-min-block-md: @cont-sizing-navigation-md; +@comp-nav-item-container-sizing-min-block-lg: @cont-sizing-navigation-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/persona.less b/packages/ds-theme/src/web-design-tokens/component/persona.less new file mode 100644 index 0000000000..c9c728dff4 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/persona.less @@ -0,0 +1,31 @@ +// Do not edit directly, this file was auto-generated. + +@comp-persona-container-spacing-padding-sm: @cont-spacing-common-padding-squish-000; +@comp-persona-container-spacing-padding-md: @cont-spacing-common-padding-squish-000; +@comp-persona-container-spacing-padding-lg: @cont-spacing-common-padding-squish-000; +@comp-persona-inner-spacing-gap-sm: @cont-spacing-common-gap-000; +@comp-persona-container-color-bg-base: @cont-color-common-container-misc-transparent; +@comp-persona-container-color-border-base: @cont-color-common-container-misc-transparent; +@comp-persona-container-border-radius-sm: @cont-radius-common-none; +@comp-persona-container-border-radius-md: @cont-radius-common-none; +@comp-persona-container-border-radius-lg: @cont-radius-common-none; +@comp-persona-container-border-width-sm: @cont-border-width-common-none; +@comp-persona-container-border-width-md: @cont-border-width-common-none; +@comp-persona-container-border-width-lg: @cont-border-width-common-none; +@comp-persona-label-color-fg: @cont-color-common-fg-generic-bold; +@comp-persona-label-typography-sm: @cont-typography-common-label-100-bold; +@comp-persona-label-typography-md: @cont-typography-common-label-200-bold; +@comp-persona-label-typography-lg: @cont-typography-common-label-300-bold; +@comp-persona-secondary-label-color-fg: @cont-color-common-fg-generic-subtle; +@comp-persona-secondary-label-typography-sm: @cont-typography-common-label-050-base; +@comp-persona-secondary-label-typography-md: @cont-typography-common-label-050-base; +@comp-persona-secondary-label-typography-lg: @cont-typography-common-label-050-base; +@comp-persona-tertiary-label-color-fg: @cont-color-common-fg-generic-subtle; +@comp-persona-tertiary-label-typography-sm: @cont-typography-common-label-050-base; +@comp-persona-tertiary-label-typography-md: @cont-typography-common-label-050-base; +@comp-persona-tertiary-label-typography-lg: @cont-typography-common-label-050-base; +@comp-persona-container-spacing-gap-sm: @cont-spacing-common-gap-100; +@comp-persona-container-spacing-gap-md: @cont-spacing-common-gap-100; +@comp-persona-container-spacing-gap-lg: @cont-spacing-common-gap-200; +@comp-persona-inner-spacing-gap-md: @cont-spacing-common-gap-050; +@comp-persona-inner-spacing-gap-lg: @cont-spacing-common-gap-050; diff --git a/packages/ds-theme/src/web-design-tokens/component/popover.less b/packages/ds-theme/src/web-design-tokens/component/popover.less new file mode 100644 index 0000000000..7bcad02e8e --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/popover.less @@ -0,0 +1,33 @@ +// Do not edit directly, this file was auto-generated. + +@comp-popover-arrow-container-transform-rotate: 135deg; +@comp-popover-container-color-bg-base: @cont-color-common-container-surface-layer-4; +@comp-popover-container-color-border-base: @cont-color-common-container-surface-on-layer-4-minimal; +@comp-popover-arrow-container-color-bg-base: @cont-color-common-container-surface-layer-4; +@comp-popover-arrow-container-color-border-base: @cont-color-common-container-surface-on-layer-4-minimal; +@comp-popover-container-border-width-sm: @cont-border-width-popover-base; +@comp-popover-container-border-width-md: @cont-border-width-popover-base; +@comp-popover-container-border-width-lg: @cont-border-width-popover-base; +@comp-popover-container-elevation: @cont-elevation-popover-base; +@comp-popover-arrow-backdrop-elevation: @cont-elevation-popover-base; +@comp-popover-arrow-container-sizing-sm: @cont-sizing-common-200*0.7071; +@comp-popover-arrow-container-sizing-md: @cont-sizing-common-300*0.7071; +@comp-popover-arrow-container-sizing-lg: @cont-sizing-common-300*0.7071; +@comp-popover-arrow-container-border-radius-start-end-sm: @cont-radius-common-xs; +@comp-popover-arrow-container-border-radius-start-end-md: @cont-radius-common-xs; +@comp-popover-arrow-container-border-radius-start-end-lg: @cont-radius-common-xs; +@comp-popover-arrow-container-border-width-block-start-sm: @cont-border-width-popover-base; +@comp-popover-arrow-container-border-width-block-start-md: @cont-border-width-popover-base; +@comp-popover-arrow-container-border-width-block-start-lg: @cont-border-width-popover-base; +@comp-popover-arrow-container-border-width-inline-end-sm: @cont-border-width-popover-base; +@comp-popover-arrow-container-border-width-inline-end-md: @cont-border-width-popover-base; +@comp-popover-arrow-container-border-width-inline-end-lg: @cont-border-width-popover-base; +@comp-popover-offset-spacing-gap-sm: @cont-spacing-common-gap-100; +@comp-popover-offset-spacing-gap-md: @cont-spacing-common-gap-100; +@comp-popover-offset-spacing-gap-lg: @cont-spacing-common-gap-100; +@comp-popover-container-spacing-padding-sm: @cont-spacing-popover-padding-sm; +@comp-popover-container-spacing-padding-md: @cont-spacing-popover-padding-md; +@comp-popover-container-spacing-padding-lg: @cont-spacing-popover-padding-lg; +@comp-popover-container-radius-sm: @cont-radius-popover; +@comp-popover-container-radius-md: @cont-radius-popover; +@comp-popover-container-radius-lg: @cont-radius-popover; diff --git a/packages/ds-theme/src/web-design-tokens/component/radio.less b/packages/ds-theme/src/web-design-tokens/component/radio.less new file mode 100644 index 0000000000..9fd055c8b8 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/radio.less @@ -0,0 +1,97 @@ +// Do not edit directly, this file was auto-generated. + +@comp-radio-control-container-color-bg-enabled: @core-color-palette-misc-transparent; +@comp-radio-control-container-color-bg-hover: @core-color-palette-misc-transparent; +@comp-radio-control-container-color-bg-pressed: @core-color-palette-misc-transparent; +@comp-radio-control-container-color-bg-read-only: @core-color-palette-misc-transparent; +@comp-radio-control-container-color-bg-checked-read-only: @core-color-palette-misc-transparent; +@comp-radio-control-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-radio-control-container-color-bg-invalid-enabled: @cont-color-common-container-misc-transparent; +@comp-radio-control-container-color-bg-invalid-hover: @cont-color-common-container-misc-transparent; +@comp-radio-control-container-color-bg-invalid-pressed: @cont-color-common-container-misc-transparent; +@comp-radio-control-container-color-bg-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-radio-control-container-color-bg-checked-invalid-enabled: @cont-color-common-container-negative-base; +@comp-radio-control-container-color-bg-checked-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-radio-control-container-color-bg-checked-invalid-pressed: @cont-color-common-container-negative-bold; +@comp-radio-control-container-color-border-disabled: @cont-color-common-container-misc-disabled; +@comp-radio-control-container-color-border-invalid-enabled: @cont-color-common-container-negative-base; +@comp-radio-control-container-color-border-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-radio-control-container-color-border-invalid-pressed: @cont-color-common-container-negative-bold; +@comp-radio-control-container-color-border-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-radio-control-container-color-border-checked-invalid-enabled: @cont-color-common-container-negative-base; +@comp-radio-control-container-color-border-checked-invalid-hover: @cont-color-common-container-negative-moderate; +@comp-radio-control-container-color-border-checked-invalid-pressed: @cont-color-common-container-negative-bold; +@comp-radio-control-container-radius-sm: @cont-radius-common-full; +@comp-radio-control-container-radius-md: @cont-radius-common-full; +@comp-radio-control-container-radius-lg: @cont-radius-common-full; +@comp-radio-control-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-radio-control-container-elevation-read-only: @cont-elevation-common-level-0; +@comp-radio-control-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-radio-indicator-container-color-bg-enabled: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-hover: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-pressed: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-disabled: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-read-only: @cont-color-common-container-neutral-bold; +@comp-radio-indicator-container-color-bg-invalid-enabled: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-invalid-hover: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-color-bg-invalid-pressed: @cont-color-common-container-inverse-base; +@comp-radio-indicator-container-radius-sm: @cont-radius-common-full; +@comp-radio-indicator-container-radius-md: @cont-radius-common-full; +@comp-radio-indicator-container-radius-lg: @cont-radius-common-full; +@comp-radio-label-color-fg-enabled: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-radio-label-color-fg-read-only: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-invalid-enabled: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-invalid-hover: @cont-color-common-fg-generic-bold; +@comp-radio-label-color-fg-invalid-pressed: @cont-color-common-fg-generic-bold; +@comp-radio-description-color-fg-enabled: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-hover: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-pressed: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-radio-description-color-fg-read-only: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-invalid-enabled: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-invalid-hover: @cont-color-common-fg-generic-subtle; +@comp-radio-description-color-fg-invalid-pressed: @cont-color-common-fg-generic-subtle; +@comp-radio-description-typography-sm: @cont-typography-common-label-100-subtle; +@comp-radio-description-typography-md: @cont-typography-common-label-100-subtle; +@comp-radio-description-typography-lg: @cont-typography-common-label-100-subtle; +@comp-radio-control-container-color-bg-checked-enabled: @cont-color-control-bg-base; +@comp-radio-control-container-color-bg-checked-hover: @cont-color-control-bg-base; +@comp-radio-control-container-color-bg-checked-pressed: @cont-color-control-bg-base; +@comp-radio-control-container-color-border-enabled: @cont-color-control-border-moderate; +@comp-radio-control-container-color-border-hover: @cont-color-control-border-base; +@comp-radio-control-container-color-border-pressed: @cont-color-control-border-base; +@comp-radio-control-container-color-border-read-only: @cont-color-control-border-subtle; +@comp-radio-control-container-color-border-checked-enabled: @cont-color-control-border-base; +@comp-radio-control-container-color-border-checked-hover: @cont-color-control-border-base; +@comp-radio-control-container-color-border-checked-pressed: @cont-color-control-border-base; +@comp-radio-control-container-color-border-checked-read-only: @cont-color-control-border-subtle; +@comp-radio-control-container-elevation-enabled: @cont-elevation-control-base; +@comp-radio-control-container-elevation-hover: @cont-elevation-control-base; +@comp-radio-control-container-elevation-pressed: @cont-elevation-control-base; +@comp-radio-control-border-width-sm: @cont-border-width-control-base; +@comp-radio-control-border-width-md: @cont-border-width-control-base; +@comp-radio-control-border-width-lg: @cont-border-width-control-base; +@comp-radio-control-before-container-sizing-sm: @cont-sizing-common-600; +@comp-radio-control-before-container-sizing-md: @cont-sizing-common-600; +@comp-radio-control-before-container-sizing-lg: @cont-sizing-common-600; +@comp-radio-label-typography-sm: @cont-typography-control-subtle-sm; +@comp-radio-label-typography-md: @cont-typography-control-subtle-md; +@comp-radio-label-typography-lg: @cont-typography-control-subtle-lg; +@comp-radio-container-spacing-gap-sm: @cont-spacing-control-gap-sm; +@comp-radio-container-spacing-gap-md: @cont-spacing-control-gap-md; +@comp-radio-container-spacing-gap-lg: @cont-spacing-control-gap-lg; +@comp-radio-inner-container-spacing-gap-sm: @cont-spacing-control-gap-sm; +@comp-radio-inner-container-spacing-gap-md: @cont-spacing-control-gap-md; +@comp-radio-inner-container-spacing-gap-lg: @cont-spacing-control-gap-lg; +@comp-radio-control-container-sizing-sm: @cont-sizing-control-sm; +@comp-radio-control-container-sizing-md: @cont-sizing-control-md; +@comp-radio-control-container-sizing-lg: @cont-sizing-control-lg; +@comp-radio-indicator-container-sizing-sm: @cont-sizing-control-sm / 2; +@comp-radio-indicator-container-sizing-md: @cont-sizing-control-md / 2; +@comp-radio-indicator-container-sizing-lg: @cont-sizing-control-lg / 2; +@comp-radio-label-sizing-min-block-sm: @cont-sizing-control-sm; +@comp-radio-label-sizing-min-block-md: @cont-sizing-control-md; +@comp-radio-label-sizing-min-block-lg: @cont-sizing-control-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/remove-button.less b/packages/ds-theme/src/web-design-tokens/component/remove-button.less new file mode 100644 index 0000000000..6c8e64e3f2 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/remove-button.less @@ -0,0 +1,63 @@ +// Do not edit directly, this file was auto-generated. + +@comp-remove-button-container-radius-xs: @cont-radius-common-full; +@comp-remove-button-container-radius-sm: @cont-radius-common-full; +@comp-remove-button-container-radius-md: @cont-radius-common-full; +@comp-remove-button-container-radius-lg: @cont-radius-common-full; +@comp-remove-button-container-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-remove-button-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-remove-button-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-remove-button-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-remove-button-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-remove-button-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-remove-button-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-remove-button-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-remove-button-icon-typography-xs: @cont-typography-common-icon-base-xs; +@comp-remove-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-remove-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-remove-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-remove-button-icon-color-fg-enabled: @cont-color-common-fg-generic-subtle; +@comp-remove-button-icon-color-fg-hover: @cont-color-common-fg-generic-bold; +@comp-remove-button-icon-color-fg-pressed: @cont-color-common-fg-generic-bold; +@comp-remove-button-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-remove-button-container-sizing-min-block-xs: @cont-sizing-common-400; +@comp-remove-button-container-sizing-min-block-sm: @cont-sizing-common-400; +@comp-remove-button-container-sizing-min-block-md: @cont-sizing-common-500; +@comp-remove-button-container-sizing-min-block-lg: @cont-sizing-common-600; +@comp-remove-button-container-sizing-min-inline-xs: @cont-sizing-common-400; +@comp-remove-button-container-sizing-min-inline-sm: @cont-sizing-common-400; +@comp-remove-button-container-sizing-min-inline-md: @cont-sizing-common-500; +@comp-remove-button-container-sizing-min-inline-lg: @cont-sizing-common-600; +@comp-remove-button-container-color-bg-hover: @cont-color-action-bg-tertiary-minimal; +@comp-remove-button-container-color-bg-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-remove-button-container-elevation-enabled: @cont-elevation-control-base; +@comp-remove-button-container-elevation-hover: @cont-elevation-control-base; +@comp-remove-button-container-elevation-pressed: @cont-elevation-control-base; +@comp-remove-button-container-before-sizing-xs: @cont-sizing-common-600; +@comp-remove-button-container-before-sizing-sm: @cont-sizing-common-600; +@comp-remove-button-container-before-sizing-md: @cont-sizing-common-600; +@comp-remove-button-container-before-sizing-lg: @cont-sizing-common-600; +@comp-remove-button-container-before-position-inset-inline-start-xs: ( + @comp-remove-button-container-sizing-min-inline-xs - @comp-remove-button-container-before-sizing-xs + )/2; +@comp-remove-button-container-before-position-inset-inline-start-sm: ( + @comp-remove-button-container-sizing-min-inline-sm - @comp-remove-button-container-before-sizing-sm + )/2; +@comp-remove-button-container-before-position-inset-inline-start-md: ( + @comp-remove-button-container-sizing-min-inline-md - @comp-remove-button-container-before-sizing-md + )/2; +@comp-remove-button-container-before-position-inset-inline-start-lg: ( + @comp-remove-button-container-sizing-min-inline-lg - @comp-remove-button-container-before-sizing-lg + )/2; +@comp-remove-button-container-before-position-inset-block-start-xs: ( + @comp-remove-button-container-sizing-min-block-xs - @comp-remove-button-container-before-sizing-xs + )/2; +@comp-remove-button-container-before-position-inset-block-start-sm: ( + @comp-remove-button-container-sizing-min-block-sm - @comp-remove-button-container-before-sizing-sm + )/2; +@comp-remove-button-container-before-position-inset-block-start-md: ( + @comp-remove-button-container-sizing-min-block-md - @comp-remove-button-container-before-sizing-md + )/2; +@comp-remove-button-container-before-position-inset-block-start-lg: ( + @comp-remove-button-container-sizing-min-block-lg - @comp-remove-button-container-before-sizing-lg + )/2; diff --git a/packages/ds-theme/src/web-design-tokens/component/shell-header.less b/packages/ds-theme/src/web-design-tokens/component/shell-header.less new file mode 100644 index 0000000000..825bf5981f --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/shell-header.less @@ -0,0 +1,145 @@ +// Do not edit directly, this file was auto-generated. + +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-md: 440px; +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-lg: 720px; +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-xl: 720px; +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-xxl: 720px; +@comp-shell-header-container-color-bg: @core-color-palette-misc-transparent; +@comp-shell-header-container-color-border: @core-color-palette-misc-transparent; +@comp-shell-header-container-spacing-padding-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-padding-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-padding-breakpoint-md: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-padding-breakpoint-lg: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-padding-breakpoint-xl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-padding-breakpoint-xxl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-spacing-gap-breakpoint-xs: @cont-spacing-common-gap-000; +@comp-shell-header-container-spacing-gap-breakpoint-sm: @cont-spacing-common-gap-000; +@comp-shell-header-container-spacing-gap-breakpoint-md: @cont-spacing-common-gap-000; +@comp-shell-header-container-spacing-gap-breakpoint-lg: @cont-spacing-common-gap-000; +@comp-shell-header-container-spacing-gap-breakpoint-xl: @cont-spacing-common-gap-000; +@comp-shell-header-container-spacing-gap-breakpoint-xxl: @cont-spacing-common-gap-000; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-md: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-lg: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-xl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-start-breakpoint-xxl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-xs: @cont-sizing-common-000; +@comp-shell-header-inner-center-container-sizing-min-inline-breakpoint-sm: @cont-sizing-common-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-xs: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-sm: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-md: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-lg: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-xl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-inner-center-container-spacing-padding-breakpoint-xxl: @cont-spacing-common-padding-inset-000; +@comp-shell-header-container-radius-breakpoint-xs: @cont-radius-common-none; +@comp-shell-header-container-radius-breakpoint-sm: @cont-radius-common-none; +@comp-shell-header-container-radius-breakpoint-md: @cont-radius-common-none; +@comp-shell-header-container-radius-breakpoint-lg: @cont-radius-common-none; +@comp-shell-header-container-radius-breakpoint-xl: @cont-radius-common-none; +@comp-shell-header-container-radius-breakpoint-xxl: @cont-radius-common-none; +@comp-shell-header-container-border-width-breakpoint-xs: @cont-border-width-common-none; +@comp-shell-header-container-border-width-breakpoint-sm: @cont-border-width-common-none; +@comp-shell-header-container-border-width-breakpoint-md: @cont-border-width-common-none; +@comp-shell-header-container-border-width-breakpoint-lg: @cont-border-width-common-none; +@comp-shell-header-container-border-width-breakpoint-xl: @cont-border-width-common-none; +@comp-shell-header-container-border-width-breakpoint-xxl: @cont-border-width-common-none; +@comp-shell-header-inner-container-radius-breakpoint-xs: @cont-radius-common-none; +@comp-shell-header-inner-container-radius-breakpoint-sm: @cont-radius-common-none; +@comp-shell-header-inner-container-radius-breakpoint-md: @cont-radius-common-none; +@comp-shell-header-inner-container-radius-breakpoint-lg: @cont-radius-common-none; +@comp-shell-header-inner-container-radius-breakpoint-xl: @cont-radius-common-none; +@comp-shell-header-inner-container-radius-breakpoint-xxl: @cont-radius-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-xs: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-sm: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-md: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-lg: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-xl: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-start-breakpoint-xxl: @cont-border-width-common-none; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-xs: @cont-border-width-common-subtle; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-sm: @cont-border-width-common-subtle; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-md: @cont-border-width-common-subtle; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-lg: @cont-border-width-common-subtle; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-xl: @cont-border-width-common-subtle; +@comp-shell-header-inner-container-border-width-block-end-breakpoint-xxl: @cont-border-width-common-subtle; +@comp-shell-header-badge-container-radius-breakpoint-xs: @cont-radius-common-none; +@comp-shell-header-badge-container-radius-breakpoint-sm: @cont-radius-common-none; +@comp-shell-header-badge-container-radius-breakpoint-md: @cont-radius-common-full; +@comp-shell-header-badge-container-radius-breakpoint-lg: @cont-radius-common-full; +@comp-shell-header-badge-container-radius-breakpoint-xl: @cont-radius-common-full; +@comp-shell-header-badge-container-radius-breakpoint-xxl: @cont-radius-common-full; +@comp-shell-header-badge-container-border-width-breakpoint-xs: @cont-border-width-common-none; +@comp-shell-header-badge-container-border-width-breakpoint-sm: @cont-border-width-common-none; +@comp-shell-header-badge-container-border-width-breakpoint-md: @cont-border-width-common-none; +@comp-shell-header-badge-container-border-width-breakpoint-lg: @cont-border-width-common-none; +@comp-shell-header-badge-container-border-width-breakpoint-xl: @cont-border-width-common-none; +@comp-shell-header-badge-container-border-width-breakpoint-xxl: @cont-border-width-common-none; +@comp-shell-header-label-color-fg: @cont-color-common-fg-generic-bold; +@comp-shell-header-label-typography-breakpoint-xs: @cont-typography-common-label-300-base; +@comp-shell-header-label-typography-breakpoint-sm: @cont-typography-common-label-300-base; +@comp-shell-header-label-typography-breakpoint-md: @cont-typography-common-label-300-base; +@comp-shell-header-label-typography-breakpoint-lg: @cont-typography-common-label-300-base; +@comp-shell-header-label-typography-breakpoint-xl: @cont-typography-common-label-300-base; +@comp-shell-header-label-typography-breakpoint-xxl: @cont-typography-common-label-300-base; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-xs: @cont-sizing-common-900; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-sm: @cont-sizing-common-900; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-md: @cont-sizing-common-900; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-lg: @cont-sizing-common-900; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-xl: @cont-sizing-common-900; +@comp-shell-header-inner-container-sizing-min-block-breakpoint-xxl: @cont-sizing-common-900; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-md: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-lg: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-xl: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-container-spacing-padding-block-breakpoint-xxl: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-container-spacing-gap-breakpoint-xs: @cont-spacing-common-gap-200; +@comp-shell-header-inner-container-spacing-gap-breakpoint-sm: @cont-spacing-common-gap-200; +@comp-shell-header-inner-container-spacing-gap-breakpoint-md: @cont-spacing-common-gap-400; +@comp-shell-header-inner-container-spacing-gap-breakpoint-lg: @cont-spacing-common-gap-400; +@comp-shell-header-inner-container-spacing-gap-breakpoint-xl: @cont-spacing-common-gap-400; +@comp-shell-header-inner-container-spacing-gap-breakpoint-xxl: @cont-spacing-common-gap-400; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-xs: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-sm: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-md: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-lg: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-xl: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-container-spacing-padding-inline-breakpoint-xxl: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-container-color-bg: @cont-color-shell-bg-layer-1; +@comp-shell-header-inner-container-color-border: @cont-color-shell-border-on-layer-1-subtle; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-xs: @cont-spacing-common-gap-100; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-sm: @cont-spacing-common-gap-100; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-md: @cont-spacing-common-gap-200; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-lg: @cont-spacing-common-gap-200; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-xl: @cont-spacing-common-gap-200; +@comp-shell-header-inner-start-container-spacing-gap-breakpoint-xxl: @cont-spacing-common-gap-200; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-md: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-lg: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-xl: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-start-container-spacing-padding-inline-end-breakpoint-xxl: @cont-spacing-common-padding-inset-400; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-md: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-lg: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-xl: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-start-container-spacing-padding-inline-start-breakpoint-xxl: @cont-spacing-common-padding-inset-100; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-xs: @cont-spacing-common-gap-100; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-sm: @cont-spacing-common-gap-100; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-md: @cont-spacing-common-gap-200; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-lg: @cont-spacing-common-gap-200; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-xl: @cont-spacing-common-gap-200; +@comp-shell-header-inner-end-container-spacing-gap-breakpoint-xxl: @cont-spacing-common-gap-200; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-md: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-lg: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-xl: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-end-container-spacing-padding-inline-end-breakpoint-xxl: @cont-spacing-common-padding-inset-200; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-xs: @cont-spacing-common-gap-100; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-sm: @cont-spacing-common-gap-100; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-md: @cont-spacing-common-gap-200; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-lg: @cont-spacing-common-gap-200; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-xl: @cont-spacing-common-gap-200; +@comp-shell-header-inner-app-actions-container-spacing-gap-breakpoint-xxl: @cont-spacing-common-gap-200; diff --git a/packages/ds-theme/src/web-design-tokens/component/shell-nav-rail.less b/packages/ds-theme/src/web-design-tokens/component/shell-nav-rail.less new file mode 100644 index 0000000000..df89541299 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/shell-nav-rail.less @@ -0,0 +1,115 @@ +// Do not edit directly, this file was auto-generated. + +@comp-shell-nav-rail-item-counter-container-position-inset-inline-start-base: 50%; +@comp-shell-nav-rail-item-counter-container-position-inset-inline-start-minimal: 50%; +@comp-shell-nav-rail-item-counter-container-position-inset-block-end-base: 50%; +@comp-shell-nav-rail-item-counter-container-position-inset-block-end-minimal: 50%; +@comp-shell-nav-rail-container-spacing-padding-base: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-container-spacing-padding-minimal: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-container-spacing-gap-base: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-container-spacing-gap-minimal: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-inline-base: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-inline-minimal: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-block-start-base: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-block-start-minimal: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-block-end-base: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-padding-block-end-minimal: @cont-spacing-common-padding-inset-000; +@comp-shell-nav-rail-item-list-container-spacing-gap-base: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-item-list-container-spacing-gap-minimal: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-item-indicator-container-spacing-padding-base: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-item-indicator-container-spacing-padding-minimal: @cont-spacing-common-gap-000; +@comp-shell-nav-rail-container-color-bg-base: @cont-color-common-container-surface-layer-1; +@comp-shell-nav-rail-container-color-bg-minimal: @cont-color-common-container-surface-layer-1; +@comp-shell-nav-rail-container-color-border-base: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-shell-nav-rail-container-color-border-minimal: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-shell-nav-rail-container-radius-base: @cont-radius-common-none; +@comp-shell-nav-rail-container-radius-minimal: @cont-radius-common-none; +@comp-shell-nav-rail-item-container-color-bg-enabled: @cont-color-navigation-bg-on-layer-1-minimal; +@comp-shell-nav-rail-item-container-color-bg-selected-enabled: @cont-color-navigation-bg-on-layer-1-minimal; +@comp-shell-nav-rail-item-container-color-border-enabled: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-color-border-hover: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-color-border-pressed: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-color-border-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-color-border-selected-hover: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-color-border-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-container-radius-base: @cont-radius-common-none; +@comp-shell-nav-rail-item-container-radius-minimal: @cont-radius-common-none; +@comp-shell-nav-rail-item-container-border-width-base: @cont-border-width-common-none; +@comp-shell-nav-rail-item-container-border-width-minimal: @cont-border-width-common-none; +@comp-shell-nav-rail-item-container-elevation-focus: @cont-elevation-common-focus-inset-base; +@comp-shell-nav-rail-item-container-elevation-selected-focus: @cont-elevation-common-focus-inset-base; +@comp-shell-nav-rail-item-label-color-fg-enabled: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-label-color-fg-hover: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-label-color-fg-pressed: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-label-color-fg-selected-enabled: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-label-color-fg-selected-hover: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-label-color-fg-selected-pressed: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-label-typography: @cont-typography-common-label-050-base; +@comp-shell-nav-rail-item-icon-color-fg-enabled: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-icon-color-fg-hover: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-icon-color-fg-pressed: @cont-color-common-fg-generic-moderate; +@comp-shell-nav-rail-item-icon-color-fg-selected-enabled: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-icon-color-fg-selected-hover: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-icon-color-fg-selected-pressed: @cont-color-common-fg-brand-bold; +@comp-shell-nav-rail-item-icon-typography-base-enabled: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-base-pressed: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-base-hover: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-base-selected-enabled: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-icon-typography-base-selected-pressed: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-icon-typography-base-selected-hover: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-enabled: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-hover: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-pressed: @cont-typography-common-icon-base-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-selected-enabled: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-selected-pressed: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-icon-typography-minimal-selected-hover: @cont-typography-common-icon-emphasized-lg; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-selected-enabled: @cont-color-common-container-primary-base; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-selected-hover: @cont-color-common-container-primary-base; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-selected-pressed: @cont-color-common-container-primary-base; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-enabled: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-hover: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-indicator-container-after-color-bg-pressed: @cont-color-common-container-misc-transparent; +@comp-shell-nav-rail-item-indicator-container-after-radius-base: @cont-radius-common-none; +@comp-shell-nav-rail-item-indicator-container-after-radius-minimal: @cont-radius-common-none; +@comp-shell-nav-rail-container-sizing-inline-base: @cont-sizing-common-1200; +@comp-shell-nav-rail-container-sizing-inline-minimal: @cont-sizing-common-900; +@comp-shell-nav-rail-container-border-width-inline-end-base: @cont-border-width-navigation-base; +@comp-shell-nav-rail-container-border-width-inline-end-minimal: @cont-border-width-navigation-base; +@comp-shell-nav-rail-item-list-divider-container-spacing-padding-base: @cont-spacing-common-padding-squish-200; +@comp-shell-nav-rail-item-list-divider-container-spacing-padding-minimal: @cont-spacing-common-padding-inset-100; +@comp-shell-nav-rail-item-container-sizing-inline-base: @cont-sizing-common-1200; +@comp-shell-nav-rail-item-container-sizing-inline-minimal: @cont-sizing-common-900; +@comp-shell-nav-rail-item-container-sizing-block-base: @cont-sizing-common-1100; +@comp-shell-nav-rail-item-container-sizing-block-minimal: @cont-sizing-common-800; +@comp-shell-nav-rail-item-container-spacing-padding-base: @cont-spacing-common-padding-inset-100; +@comp-shell-nav-rail-item-container-spacing-padding-minimal: @cont-spacing-common-padding-inset-100; +@comp-shell-nav-rail-item-container-color-bg-hover: @cont-color-navigation-bg-on-layer-1-subtle; +@comp-shell-nav-rail-item-container-color-bg-pressed: @cont-color-navigation-bg-on-layer-1-moderate; +@comp-shell-nav-rail-item-container-color-bg-selected-hover: @cont-color-navigation-bg-on-layer-1-subtle; +@comp-shell-nav-rail-item-container-color-bg-selected-pressed: @cont-color-navigation-bg-on-layer-1-moderate; +@comp-shell-nav-rail-item-container-elevation-enabled: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-container-elevation-hover: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-container-elevation-pressed: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-container-elevation-selected-enabled: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-container-elevation-selected-hover: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-container-elevation-selected-pressed: @cont-elevation-navigation-base; +@comp-shell-nav-rail-item-indicator-container-position-inset-inline-start-base: @cont-sizing-common-050; +@comp-shell-nav-rail-item-indicator-container-position-inset-inline-start-minimal: @cont-sizing-common-050; +@comp-shell-nav-rail-item-indicator-container-after-sizing-inline-base: @cont-sizing-common-050; +@comp-shell-nav-rail-item-indicator-container-after-sizing-inline-minimal: @cont-sizing-common-050; +@comp-shell-nav-rail-item-indicator-container-after-sizing-block-base: @cont-sizing-common-1000; +@comp-shell-nav-rail-item-indicator-container-after-sizing-block-minimal: @cont-sizing-common-700; +@comp-shell-nav-rail-item-counter-container-sizing-min-block-base: @cont-sizing-common-400; +@comp-shell-nav-rail-item-counter-container-sizing-min-block-minimal: @cont-sizing-common-400; +@comp-shell-nav-rail-item-counter-container-sizing-min-inline-base: @cont-sizing-common-400; +@comp-shell-nav-rail-item-counter-container-sizing-min-inline-minimal: @cont-sizing-common-400; +@comp-shell-nav-rail-start-container-sizing-min-block-base: @cont-sizing-common-1100; +@comp-shell-nav-rail-start-container-sizing-min-block-minimal: @cont-sizing-common-800; +@comp-shell-nav-rail-start-container-spacing-padding-base: @cont-spacing-common-padding-block-400; +@comp-shell-nav-rail-start-container-spacing-padding-minimal: @cont-spacing-common-padding-block-200; +@comp-shell-nav-rail-end-container-sizing-min-block-base: @cont-sizing-common-1100; +@comp-shell-nav-rail-end-container-sizing-min-block-minimal: @cont-sizing-common-800; +@comp-shell-nav-rail-end-container-spacing-padding-base: @cont-spacing-common-padding-block-400; +@comp-shell-nav-rail-end-container-spacing-padding-minimal: @cont-spacing-common-padding-block-200; +@comp-shell-nav-rail-item-container-spacing-gap-base: @cont-spacing-navigation-gap-sm; +@comp-shell-nav-rail-item-container-spacing-gap-minimal: @cont-spacing-navigation-gap-sm; diff --git a/packages/ds-theme/src/web-design-tokens/component/tag-group.less b/packages/ds-theme/src/web-design-tokens/component/tag-group.less new file mode 100644 index 0000000000..fc104b7a69 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/tag-group.less @@ -0,0 +1,8 @@ +// Do not edit directly, this file was auto-generated. + +@comp-tag-group-container-spacing-gap-column-sm: @cont-spacing-action-gap-md; +@comp-tag-group-container-spacing-gap-column-md: @cont-spacing-action-gap-md; +@comp-tag-group-container-spacing-gap-column-lg: @cont-spacing-action-gap-md; +@comp-tag-group-container-spacing-gap-row-sm: @cont-spacing-action-gap-md; +@comp-tag-group-container-spacing-gap-row-md: @cont-spacing-action-gap-md; +@comp-tag-group-container-spacing-gap-row-lg: @cont-spacing-action-gap-md; diff --git a/packages/ds-theme/src/web-design-tokens/component/tag.less b/packages/ds-theme/src/web-design-tokens/component/tag.less new file mode 100644 index 0000000000..a0f5672f25 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/tag.less @@ -0,0 +1,59 @@ +// Do not edit directly, this file was auto-generated. + +@comp-tag-inner-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-tag-inner-container-color-border-enabled: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-tag-inner-container-color-border-hover: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-tag-inner-container-color-border-pressed: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-tag-inner-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-tag-inner-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-tag-inner-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-tag-inner-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-tag-inner-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-tag-inner-icon-typography-xs: @cont-typography-common-icon-base-xs; +@comp-tag-inner-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-tag-inner-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-tag-inner-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-tag-inner-container-color-bg-enabled: @cont-color-action-bg-neutral-base; +@comp-tag-inner-container-color-bg-hover: @cont-color-action-bg-neutral-moderate; +@comp-tag-inner-container-color-bg-pressed: @cont-color-action-bg-neutral-bold; +@comp-tag-inner-container-border-width-xs: @cont-border-width-action-base; +@comp-tag-inner-container-border-width-sm: @cont-border-width-action-base; +@comp-tag-inner-container-border-width-md: @cont-border-width-action-base; +@comp-tag-inner-container-border-width-lg: @cont-border-width-action-base; +@comp-tag-inner-container-elevation-enabled: @cont-elevation-action-base; +@comp-tag-inner-container-elevation-hover: @cont-elevation-action-base; +@comp-tag-inner-container-elevation-pressed: @cont-elevation-action-base; +@comp-tag-inner-label-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-tag-inner-label-color-fg-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-tag-inner-label-color-fg-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-tag-inner-label-typography-xs: @cont-typography-control-base-sm; +@comp-tag-inner-label-typography-sm: @cont-typography-control-base-sm; +@comp-tag-inner-label-typography-md: @cont-typography-control-base-md; +@comp-tag-inner-label-typography-lg: @cont-typography-control-base-lg; +@comp-tag-inner-icon-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-tag-inner-icon-color-fg-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-tag-inner-icon-color-fg-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-tag-inner-indent-sizing-inline-xs: @cont-sizing-common-400; +@comp-tag-inner-indent-sizing-inline-sm: @cont-sizing-common-400; +@comp-tag-inner-indent-sizing-inline-md: @cont-sizing-common-500; +@comp-tag-inner-indent-sizing-inline-lg: @cont-sizing-common-600; +@comp-tag-remove-button-wrapper-container-position-inset-inline-end-xs: @cont-sizing-common-200; +@comp-tag-remove-button-wrapper-container-position-inset-inline-end-sm: @cont-sizing-common-200; +@comp-tag-remove-button-wrapper-container-position-inset-inline-end-md: @cont-sizing-common-200; +@comp-tag-remove-button-wrapper-container-position-inset-inline-end-lg: @cont-sizing-common-300; +@comp-tag-inner-container-spacing-padding-xs: @cont-spacing-action-padding-xs; +@comp-tag-inner-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-tag-inner-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-tag-inner-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-tag-inner-container-spacing-gap-xs: @cont-spacing-action-gap-xs; +@comp-tag-inner-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-tag-inner-container-spacing-gap-md: @cont-spacing-action-gap-md; +@comp-tag-inner-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-tag-inner-container-radius-xs: @cont-radius-action; +@comp-tag-inner-container-radius-sm: @cont-radius-action; +@comp-tag-inner-container-radius-md: @cont-radius-action; +@comp-tag-inner-container-radius-lg: @cont-radius-action; +@comp-tag-inner-container-sizing-block-xs: @cont-sizing-action-xs; +@comp-tag-inner-container-sizing-block-sm: @cont-sizing-action-sm; +@comp-tag-inner-container-sizing-block-md: @cont-sizing-action-md; +@comp-tag-inner-container-sizing-block-lg: @cont-sizing-action-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/toast.less b/packages/ds-theme/src/web-design-tokens/component/toast.less new file mode 100644 index 0000000000..3c616855f1 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/toast.less @@ -0,0 +1,293 @@ +// Do not edit directly, this file was auto-generated. + +@comp-toast-inner-typography-line-clamp: 3; +@comp-toast-container-color-border-neutral: @cont-color-common-container-misc-transparent; +@comp-toast-container-color-border-positive: @cont-color-common-container-misc-transparent; +@comp-toast-container-color-border-warning: @cont-color-common-container-misc-transparent; +@comp-toast-container-color-border-negative: @cont-color-common-container-misc-transparent; +@comp-toast-container-color-border-info: @cont-color-common-container-misc-transparent; +@comp-toast-container-border-width: @cont-border-width-common-none; +@comp-toast-icon-typography: @cont-typography-common-icon-emphasized-md; +@comp-toast-dismiss-button-container-color-bg-neutral-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-positive-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-positive-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-warning-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-warning-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-negative-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-negative-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-info-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-bg-info-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-neutral-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-neutral-hover: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-neutral-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-positive-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-positive-hover: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-positive-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-positive-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-warning-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-warning-hover: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-warning-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-warning-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-negative-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-negative-hover: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-negative-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-negative-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-info-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-info-hover: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-info-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-container-color-border-info-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-dismiss-button-icon-color-fg-neutral-enabled: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-neutral-hover: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-neutral-pressed: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-neutral-disabled: @cont-color-common-fg-inverse-subtle; +@comp-toast-dismiss-button-icon-color-fg-positive-enabled: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-positive-hover: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-positive-pressed: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-positive-disabled: @cont-color-common-fg-inverse-subtle; +@comp-toast-dismiss-button-icon-color-fg-warning-enabled: @cont-color-common-fg-generic-persist-on-light-bold; +@comp-toast-dismiss-button-icon-color-fg-warning-hover: @cont-color-common-fg-generic-persist-on-light-bold; +@comp-toast-dismiss-button-icon-color-fg-warning-pressed: @cont-color-common-fg-generic-persist-on-light-bold; +@comp-toast-dismiss-button-icon-color-fg-warning-disabled: @cont-color-common-fg-persist-on-dark-subtle; +@comp-toast-dismiss-button-icon-color-fg-negative-enabled: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-negative-hover: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-negative-pressed: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-negative-disabled: @cont-color-common-fg-inverse-subtle; +@comp-toast-dismiss-button-icon-color-fg-info-enabled: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-info-hover: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-info-pressed: @cont-color-common-fg-generic-bold-inverse; +@comp-toast-dismiss-button-icon-color-fg-info-disabled: @cont-color-common-fg-inverse-subtle; +@comp-toast-action-button-container-color-bg-neutral-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-neutral-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-neutral-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-neutral-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-neutral-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-neutral-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-neutral-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-neutral-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-positive-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-positive-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-positive-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-positive-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-positive-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-positive-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-positive-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-positive-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-warning-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-warning-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-warning-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-warning-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-warning-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-warning-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-warning-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-warning-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-negative-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-negative-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-negative-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-negative-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-negative-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-negative-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-negative-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-negative-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-info-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-info-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-info-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-info-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-info-focus-enabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-info-focus-pressed: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-bg-info-focus-loading: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-bg-info-focus-disabled: @cont-color-common-container-misc-disabled-inverse; +@comp-toast-action-button-container-color-border-neutral-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-neutral-focus-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-neutral-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-positive-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-positive-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-positive-focus-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-positive-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-warning-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-warning-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-warning-focus-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-warning-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-negative-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-negative-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-negative-focus-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-negative-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-info-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-info-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-info-focus-loading: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-container-color-border-info-focus-disabled: @cont-color-common-container-misc-transparent; +@comp-toast-action-button-label-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-neutral-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-positive-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-positive-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-warning-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-warning-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-negative-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-negative-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-info-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-label-color-fg-info-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-neutral-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-positive-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-positive-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-warning-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-warning-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-negative-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-negative-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-info-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-action-button-icon-color-fg-info-focus-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold-inverse; +@comp-toast-container-color-bg-neutral: @cont-color-status-bg-neutral-base; +@comp-toast-container-color-bg-positive: @cont-color-status-bg-positive-base; +@comp-toast-container-color-bg-warning: @cont-color-status-bg-warning-base; +@comp-toast-container-color-bg-negative: @cont-color-status-bg-negative-base; +@comp-toast-container-color-bg-info: @cont-color-status-bg-info-base; +@comp-toast-container-elevation: @cont-elevation-status-base; +@comp-toast-container-sizing-min-block: @cont-sizing-common-900; +@comp-toast-inner-container-spacing-padding-inline-end: @cont-spacing-common-gap-400; +@comp-toast-message-color-fg-warning: @cont-color-status-fg-on-warning-base; +@comp-toast-message-typography: @cont-typography-status-base-md; +@comp-toast-icon-color-fg-warning: @cont-color-status-fg-on-warning-base; +@comp-toast-dismiss-button-container-color-bg-neutral-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-dismiss-button-container-color-bg-neutral-pressed: @cont-color-action-bg-inverse-subtle; +@comp-toast-dismiss-button-container-color-bg-positive-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-dismiss-button-container-color-bg-positive-pressed: @cont-color-action-bg-inverse-subtle; +@comp-toast-dismiss-button-container-color-bg-warning-hover: @cont-color-action-bg-tertiary-minimal; +@comp-toast-dismiss-button-container-color-bg-warning-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-toast-dismiss-button-container-color-bg-negative-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-dismiss-button-container-color-bg-negative-pressed: @cont-color-action-bg-inverse-subtle; +@comp-toast-dismiss-button-container-color-bg-info-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-dismiss-button-container-color-bg-info-pressed: @cont-color-action-bg-inverse-subtle; +@comp-toast-action-button-container-color-bg-neutral-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-neutral-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-positive-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-positive-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-warning-hover: @cont-color-action-bg-tertiary-minimal; +@comp-toast-action-button-container-color-bg-warning-focus-hover: @cont-color-action-bg-tertiary-minimal; +@comp-toast-action-button-container-color-bg-negative-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-negative-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-info-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-bg-info-focus-hover: @cont-color-action-bg-inverse-minimal; +@comp-toast-action-button-container-color-border-neutral-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-neutral-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-neutral-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-neutral-focus-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-neutral-focus-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-neutral-focus-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-focus-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-focus-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-positive-focus-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-warning-enabled: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-warning-hover: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-warning-pressed: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-warning-focus-enabled: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-warning-focus-hover: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-warning-focus-pressed: @cont-color-action-border-persist-on-light-base; +@comp-toast-action-button-container-color-border-negative-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-negative-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-negative-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-negative-focus-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-negative-focus-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-negative-focus-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-focus-enabled: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-focus-hover: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-container-color-border-info-focus-pressed: @cont-color-action-border-inverse-moderate; +@comp-toast-action-button-label-color-fg-neutral-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-neutral-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-positive-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-warning-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-warning-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-label-color-fg-negative-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-negative-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-label-color-fg-info-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-neutral-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-positive-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-warning-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-focus-enabled: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-focus-hover: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-focus-pressed: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-warning-focus-loading: @cont-color-action-fg-on-persist-on-light-minimal; +@comp-toast-action-button-icon-color-fg-negative-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-negative-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-focus-enabled: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-focus-hover: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-focus-pressed: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-action-button-icon-color-fg-info-focus-loading: @cont-color-action-fg-on-inverse-minimal; +@comp-toast-container-spacing-padding: @cont-spacing-status-padding-lg; +@comp-toast-container-spacing-gap: @cont-spacing-status-gap-lg; +@comp-toast-container-radius: @cont-radius-status; +@comp-toast-inner-container-spacing-gap: @cont-spacing-status-gap-lg; +@comp-toast-message-color-fg-neutral: @cont-color-status-fg-on-neutral-base; +@comp-toast-message-color-fg-positive: @cont-color-status-fg-on-positive-base; +@comp-toast-message-color-fg-negative: @cont-color-status-fg-on-negative-base; +@comp-toast-message-color-fg-info: @cont-color-status-fg-on-info-base; +@comp-toast-icon-color-fg-neutral: @cont-color-status-fg-on-neutral-base; +@comp-toast-icon-color-fg-positive: @cont-color-status-fg-on-positive-base; +@comp-toast-icon-color-fg-negative: @cont-color-status-fg-on-negative-base; +@comp-toast-icon-color-fg-info: @cont-color-status-fg-on-info-base; diff --git a/packages/ds-theme/src/web-design-tokens/component/toaster.less b/packages/ds-theme/src/web-design-tokens/component/toaster.less new file mode 100644 index 0000000000..5d603a2e00 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/toaster.less @@ -0,0 +1,10 @@ +// Do not edit directly, this file was auto-generated. + +@comp-toaster-inner-container-spacing-padding: @cont-spacing-common-padding-inset-000; +@comp-toaster-inner-container-color-bg-neutral: @cont-color-common-container-misc-transparent; +@comp-toaster-inner-container-color-border-neutral: @cont-color-common-container-misc-transparent; +@comp-toaster-inner-container-border-width: @cont-border-width-common-none; +@comp-toaster-inner-container-sizing-inline: @cont-sizing-common-1600 * 2; +@comp-toaster-container-position-inset: @cont-sizing-common-400; +@comp-toaster-inner-container-radius: @cont-radius-status; +@comp-toaster-inner-container-spacing-gap: @cont-spacing-status-gap-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/toggle-button.less b/packages/ds-theme/src/web-design-tokens/component/toggle-button.less new file mode 100644 index 0000000000..67bb9e7bde --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/toggle-button.less @@ -0,0 +1,255 @@ +// Do not edit directly, this file was auto-generated. + +@comp-toggle-button-container-icon-only-spacing-padding-sm: @cont-spacing-common-padding-inset-000; +@comp-toggle-button-container-color-bg-neutral-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-neutral-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-primary-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-primary-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-secondary-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-secondary-loading: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-secondary-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-secondary-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-tertiary-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-tertiary-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-tertiary-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-button-container-color-bg-transparent-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-bg-transparent-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-neutral-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-neutral-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-neutral-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-neutral-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-neutral-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-primary-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-loading: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-secondary-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-tertiary-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-color-border-transparent-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-button-container-elevation-neutral-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-neutral-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-primary-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-primary-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-secondary-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-secondary-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-tertiary-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-tertiary-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-transparent-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-container-elevation-transparent-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-button-label-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-neutral-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-primary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-secondary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-tertiary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-transparent-enabled: @cont-color-common-fg-generic-subtle; +@comp-toggle-button-label-color-fg-transparent-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-label-color-fg-transparent-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-neutral-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-neutral-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-primary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-primary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-secondary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-secondary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-tertiary-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-tertiary-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-transparent-enabled: @cont-color-common-fg-generic-subtle; +@comp-toggle-button-icon-color-fg-transparent-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-color-fg-transparent-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-button-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-toggle-button-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-toggle-button-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-toggle-button-container-color-bg-neutral-enabled: @cont-color-action-bg-neutral-base; +@comp-toggle-button-container-color-bg-neutral-hover: @cont-color-action-bg-neutral-moderate; +@comp-toggle-button-container-color-bg-neutral-pressed: @cont-color-action-bg-neutral-bold; +@comp-toggle-button-container-color-bg-neutral-checked-enabled: @cont-color-control-bg-base; +@comp-toggle-button-container-color-bg-neutral-checked-hover: @cont-color-control-bg-moderate; +@comp-toggle-button-container-color-bg-neutral-checked-pressed: @cont-color-control-bg-bold; +@comp-toggle-button-container-color-bg-primary-enabled: @cont-color-action-bg-primary-base; +@comp-toggle-button-container-color-bg-primary-hover: @cont-color-action-bg-primary-moderate; +@comp-toggle-button-container-color-bg-primary-pressed: @cont-color-action-bg-primary-bold; +@comp-toggle-button-container-color-bg-primary-checked-enabled: @cont-color-control-bg-base; +@comp-toggle-button-container-color-bg-primary-checked-hover: @cont-color-control-bg-moderate; +@comp-toggle-button-container-color-bg-primary-checked-pressed: @cont-color-control-bg-bold; +@comp-toggle-button-container-color-bg-secondary-hover: @cont-color-action-bg-secondary-minimal; +@comp-toggle-button-container-color-bg-secondary-pressed: @cont-color-action-bg-secondary-subtle; +@comp-toggle-button-container-color-bg-secondary-checked-enabled: @cont-color-control-bg-base; +@comp-toggle-button-container-color-bg-secondary-checked-hover: @cont-color-control-bg-moderate; +@comp-toggle-button-container-color-bg-secondary-checked-pressed: @cont-color-control-bg-bold; +@comp-toggle-button-container-color-bg-tertiary-hover: @cont-color-action-bg-tertiary-minimal; +@comp-toggle-button-container-color-bg-tertiary-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-toggle-button-container-color-bg-tertiary-checked-hover: @cont-color-action-bg-tertiary-minimal; +@comp-toggle-button-container-color-bg-tertiary-checked-pressed: @cont-color-action-bg-tertiary-subtle; +@comp-toggle-button-container-color-border-neutral-enabled: @cont-color-action-border-neutral-base; +@comp-toggle-button-container-color-border-neutral-hover: @cont-color-action-border-neutral-moderate; +@comp-toggle-button-container-color-border-neutral-pressed: @cont-color-action-border-neutral-bold; +@comp-toggle-button-container-color-border-secondary-enabled: @cont-color-action-border-secondary-moderate; +@comp-toggle-button-container-color-border-secondary-hover: @cont-color-action-border-secondary-moderate; +@comp-toggle-button-container-color-border-secondary-pressed: @cont-color-action-border-secondary-moderate; +@comp-toggle-button-container-elevation-neutral-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-checked-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-checked-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-checked-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-neutral-checked-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-checked-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-checked-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-checked-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-primary-checked-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-checked-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-checked-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-checked-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-secondary-checked-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-checked-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-checked-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-checked-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-tertiary-checked-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-checked-enabled: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-checked-hover: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-checked-pressed: @cont-elevation-action-base; +@comp-toggle-button-container-elevation-transparent-checked-disabled: @cont-elevation-action-base; +@comp-toggle-button-container-icon-only-border-width-sm: @cont-border-width-action-base; +@comp-toggle-button-container-icon-only-border-width-md: @cont-border-width-action-base; +@comp-toggle-button-container-icon-only-border-width-lg: @cont-border-width-action-base; +@comp-toggle-button-container-icon-only-spacing-padding-md: @cont-spacing-common-padding-inset-100; +@comp-toggle-button-container-icon-only-spacing-padding-lg: @cont-spacing-common-padding-inset-200; +@comp-toggle-button-container-border-width-sm: @cont-border-width-action-base; +@comp-toggle-button-container-border-width-md: @cont-border-width-action-base; +@comp-toggle-button-container-border-width-lg: @cont-border-width-action-base; +@comp-toggle-button-label-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-toggle-button-label-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-toggle-button-label-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-toggle-button-label-color-fg-neutral-checked-enabled: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-label-color-fg-neutral-checked-hover: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-label-color-fg-neutral-checked-pressed: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-label-color-fg-tertiary-hover: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-label-color-fg-tertiary-pressed: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-label-color-fg-tertiary-checked-enabled: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-label-color-fg-tertiary-checked-hover: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-label-color-fg-transparent-hover: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-label-color-fg-transparent-pressed: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-label-color-fg-transparent-checked-enabled: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-label-color-fg-transparent-checked-hover: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-label-color-fg-transparent-checked-pressed: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-label-typography-sm: @cont-typography-action-sm; +@comp-toggle-button-label-typography-md: @cont-typography-action-md; +@comp-toggle-button-label-typography-lg: @cont-typography-action-lg; +@comp-toggle-button-icon-color-fg-neutral-enabled: @cont-color-action-fg-on-neutral-base; +@comp-toggle-button-icon-color-fg-neutral-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-toggle-button-icon-color-fg-neutral-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-toggle-button-icon-color-fg-neutral-checked-enabled: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-icon-color-fg-neutral-checked-hover: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-icon-color-fg-neutral-checked-pressed: @cont-color-action-fg-on-neutral-minimal; +@comp-toggle-button-icon-color-fg-tertiary-hover: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-icon-color-fg-tertiary-pressed: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-icon-color-fg-tertiary-checked-enabled: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-icon-color-fg-tertiary-checked-hover: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-icon-color-fg-transparent-hover: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-icon-color-fg-transparent-pressed: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-icon-color-fg-transparent-checked-enabled: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-icon-color-fg-transparent-checked-hover: @cont-color-action-fg-on-transparent-bold; +@comp-toggle-button-icon-color-fg-transparent-checked-pressed: @cont-color-action-fg-on-transparent-minimal; +@comp-toggle-button-container-radius-sm: @cont-radius-action; +@comp-toggle-button-container-radius-md: @cont-radius-action; +@comp-toggle-button-container-radius-lg: @cont-radius-action; +@comp-toggle-button-container-icon-only-radius-sm: @cont-radius-action; +@comp-toggle-button-container-icon-only-radius-md: @cont-radius-action; +@comp-toggle-button-container-icon-only-radius-lg: @cont-radius-action; +@comp-toggle-button-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-toggle-button-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-toggle-button-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-toggle-button-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-toggle-button-container-spacing-gap-md: @cont-spacing-action-gap-sm; +@comp-toggle-button-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-toggle-button-label-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-primary-checked-enabled: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-primary-checked-hover: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-primary-checked-pressed: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-label-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-label-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-label-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-label-color-fg-secondary-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-label-color-fg-secondary-checked-enabled: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-label-color-fg-secondary-checked-hover: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-label-color-fg-secondary-checked-pressed: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-label-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-toggle-button-label-color-fg-tertiary-checked-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-toggle-button-icon-color-fg-primary-enabled: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-primary-hover: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-primary-pressed: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-primary-checked-enabled: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-primary-checked-hover: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-primary-checked-pressed: @cont-color-action-fg-on-primary-base; +@comp-toggle-button-icon-color-fg-secondary-enabled: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-icon-color-fg-secondary-hover: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-icon-color-fg-secondary-pressed: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-icon-color-fg-secondary-loading: @cont-color-action-fg-on-secondary-minimal; +@comp-toggle-button-icon-color-fg-secondary-checked-enabled: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-icon-color-fg-secondary-checked-hover: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-icon-color-fg-secondary-checked-pressed: @cont-color-action-fg-on-secondary-bold; +@comp-toggle-button-icon-color-fg-tertiary-enabled: @cont-color-action-fg-on-tertiary-minimal; +@comp-toggle-button-icon-color-fg-tertiary-checked-pressed: @cont-color-action-fg-on-tertiary-minimal; +@comp-toggle-button-container-icon-only-sizing-min-inline-sm: @cont-sizing-action-sm; +@comp-toggle-button-container-icon-only-sizing-min-inline-md: @cont-sizing-action-md; +@comp-toggle-button-container-icon-only-sizing-min-inline-lg: @cont-sizing-action-lg; +@comp-toggle-button-container-icon-only-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-toggle-button-container-icon-only-sizing-min-block-md: @cont-sizing-action-md; +@comp-toggle-button-container-icon-only-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-toggle-button-container-sizing-min-block-sm: @cont-sizing-action-sm; +@comp-toggle-button-container-sizing-min-block-md: @cont-sizing-action-md; +@comp-toggle-button-container-sizing-min-block-lg: @cont-sizing-action-lg; +@comp-toggle-button-container-sizing-min-inline-sm: @cont-sizing-action-sm * 2; +@comp-toggle-button-container-sizing-min-inline-md: @cont-sizing-action-md * 2; +@comp-toggle-button-container-sizing-min-inline-lg: @cont-sizing-action-lg * 2; diff --git a/packages/ds-theme/src/web-design-tokens/component/toggle-tag.less b/packages/ds-theme/src/web-design-tokens/component/toggle-tag.less new file mode 100644 index 0000000000..8f22ce8aad --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/toggle-tag.less @@ -0,0 +1,92 @@ +// Do not edit directly, this file was auto-generated. + +@comp-toggle-tag-inner-container-color-bg-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-tag-inner-container-color-bg-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-tag-inner-container-color-border-enabled: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-toggle-tag-inner-container-color-border-hover: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-toggle-tag-inner-container-color-border-pressed: @cont-color-common-container-surface-on-layer-1-subtle; +@comp-toggle-tag-inner-container-color-border-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-inner-container-color-border-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-inner-container-color-border-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-inner-container-color-border-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-inner-container-color-border-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-inner-container-elevation-disabled: @cont-elevation-common-level-0; +@comp-toggle-tag-inner-container-elevation-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-tag-inner-container-elevation-checked-disabled: @cont-elevation-common-level-0; +@comp-toggle-tag-inner-container-elevation-checked-focus: @cont-elevation-common-focus-outset-base; +@comp-toggle-tag-inner-label-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-tag-inner-label-color-fg-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-tag-inner-icon-color-fg-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-tag-inner-icon-color-fg-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-tag-inner-icon-typography-xs: @cont-typography-common-icon-base-xs; +@comp-toggle-tag-inner-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-toggle-tag-inner-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-toggle-tag-inner-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-toggle-tag-remove-button-container-color-bg-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-remove-button-container-color-bg-checked-disabled: @cont-color-common-container-misc-disabled; +@comp-toggle-tag-remove-button-container-color-border-checked-enabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-remove-button-container-color-border-checked-hover: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-remove-button-container-color-border-checked-pressed: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-remove-button-container-color-border-checked-disabled: @cont-color-common-container-misc-transparent; +@comp-toggle-tag-remove-button-icon-color-fg-checked-enabled: @cont-color-common-fg-generic-moderate-inverse; +@comp-toggle-tag-remove-button-icon-color-fg-checked-pressed: @cont-color-common-fg-generic-bold-inverse; +@comp-toggle-tag-remove-button-icon-color-fg-checked-hover: @cont-color-common-fg-generic-bold-inverse; +@comp-toggle-tag-remove-button-icon-color-fg-checked-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-toggle-tag-inner-container-color-bg-enabled: @cont-color-action-bg-neutral-base; +@comp-toggle-tag-inner-container-color-bg-hover: @cont-color-action-bg-neutral-moderate; +@comp-toggle-tag-inner-container-color-bg-pressed: @cont-color-action-bg-neutral-bold; +@comp-toggle-tag-inner-container-color-bg-checked-enabled: @cont-color-control-bg-base; +@comp-toggle-tag-inner-container-color-bg-checked-hover: @cont-color-control-bg-moderate; +@comp-toggle-tag-inner-container-color-bg-checked-pressed: @cont-color-control-bg-bold; +@comp-toggle-tag-inner-container-border-width-xs: @cont-border-width-action-base; +@comp-toggle-tag-inner-container-border-width-sm: @cont-border-width-action-base; +@comp-toggle-tag-inner-container-border-width-md: @cont-border-width-action-base; +@comp-toggle-tag-inner-container-border-width-lg: @cont-border-width-action-base; +@comp-toggle-tag-inner-container-elevation-enabled: @cont-elevation-action-base; +@comp-toggle-tag-inner-container-elevation-hover: @cont-elevation-action-base; +@comp-toggle-tag-inner-container-elevation-pressed: @cont-elevation-action-base; +@comp-toggle-tag-inner-container-elevation-checked-enabled: @cont-elevation-action-base; +@comp-toggle-tag-inner-container-elevation-checked-hover: @cont-elevation-action-base; +@comp-toggle-tag-inner-container-elevation-checked-pressed: @cont-elevation-action-base; +@comp-toggle-tag-inner-label-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-toggle-tag-inner-label-color-fg-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-toggle-tag-inner-label-color-fg-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-toggle-tag-inner-label-color-fg-checked-enabled: @cont-color-control-fg-on-bold; +@comp-toggle-tag-inner-label-color-fg-checked-hover: @cont-color-control-fg-on-moderate; +@comp-toggle-tag-inner-label-color-fg-checked-pressed: @cont-color-control-fg-on-bold; +@comp-toggle-tag-inner-label-typography-xs: @cont-typography-control-base-sm; +@comp-toggle-tag-inner-label-typography-sm: @cont-typography-control-base-sm; +@comp-toggle-tag-inner-label-typography-md: @cont-typography-control-base-md; +@comp-toggle-tag-inner-label-typography-lg: @cont-typography-control-base-lg; +@comp-toggle-tag-inner-icon-color-fg-enabled: @cont-color-action-fg-on-neutral-base; +@comp-toggle-tag-inner-icon-color-fg-hover: @cont-color-action-fg-on-neutral-moderate; +@comp-toggle-tag-inner-icon-color-fg-pressed: @cont-color-action-fg-on-neutral-bold; +@comp-toggle-tag-inner-icon-color-fg-checked-enabled: @cont-color-control-fg-on-bold; +@comp-toggle-tag-inner-icon-color-fg-checked-hover: @cont-color-control-fg-on-moderate; +@comp-toggle-tag-inner-icon-color-fg-checked-pressed: @cont-color-control-fg-on-bold; +@comp-toggle-tag-inner-indent-sizing-inline-xs: @cont-sizing-common-400; +@comp-toggle-tag-inner-indent-sizing-inline-sm: @cont-sizing-common-400; +@comp-toggle-tag-inner-indent-sizing-inline-md: @cont-sizing-common-500; +@comp-toggle-tag-inner-indent-sizing-inline-lg: @cont-sizing-common-600; +@comp-toggle-tag-remove-button-container-color-bg-checked-hover: @cont-color-action-bg-inverse-minimal; +@comp-toggle-tag-remove-button-container-color-bg-checked-pressed: @cont-color-action-bg-inverse-subtle; +@comp-toggle-tag-remove-button-wrapper-container-position-inset-inline-end-xs: @cont-sizing-common-200; +@comp-toggle-tag-remove-button-wrapper-container-position-inset-inline-end-sm: @cont-sizing-common-200; +@comp-toggle-tag-remove-button-wrapper-container-position-inset-inline-end-md: @cont-sizing-common-200; +@comp-toggle-tag-remove-button-wrapper-container-position-inset-inline-end-lg: @cont-sizing-common-300; +@comp-toggle-tag-inner-container-spacing-padding-xs: @cont-spacing-action-padding-xs; +@comp-toggle-tag-inner-container-spacing-padding-sm: @cont-spacing-action-padding-sm; +@comp-toggle-tag-inner-container-spacing-padding-md: @cont-spacing-action-padding-md; +@comp-toggle-tag-inner-container-spacing-padding-lg: @cont-spacing-action-padding-lg; +@comp-toggle-tag-inner-container-spacing-gap-xs: @cont-spacing-action-gap-xs; +@comp-toggle-tag-inner-container-spacing-gap-sm: @cont-spacing-action-gap-sm; +@comp-toggle-tag-inner-container-spacing-gap-md: @cont-spacing-action-gap-md; +@comp-toggle-tag-inner-container-spacing-gap-lg: @cont-spacing-action-gap-lg; +@comp-toggle-tag-inner-container-radius-xs: @cont-radius-action; +@comp-toggle-tag-inner-container-radius-sm: @cont-radius-action; +@comp-toggle-tag-inner-container-radius-md: @cont-radius-action; +@comp-toggle-tag-inner-container-radius-lg: @cont-radius-action; +@comp-toggle-tag-inner-container-sizing-block-xs: @cont-sizing-action-xs; +@comp-toggle-tag-inner-container-sizing-block-sm: @cont-sizing-action-sm; +@comp-toggle-tag-inner-container-sizing-block-md: @cont-sizing-action-md; +@comp-toggle-tag-inner-container-sizing-block-lg: @cont-sizing-action-lg; diff --git a/packages/ds-theme/src/web-design-tokens/component/tooltip.less b/packages/ds-theme/src/web-design-tokens/component/tooltip.less new file mode 100644 index 0000000000..5090c1e419 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/tooltip.less @@ -0,0 +1,37 @@ +// Do not edit directly, this file was auto-generated. + +@comp-tooltip-arrow-container-transform-rotate: 135deg; +@comp-tooltip-container-color-bg-base: @cont-color-common-container-surface-layer-4; +@comp-tooltip-container-color-border-base: @cont-color-common-container-surface-on-layer-4-minimal; +@comp-tooltip-arrow-container-color-bg-base: @cont-color-common-container-surface-layer-4; +@comp-tooltip-arrow-container-color-border-base: @cont-color-common-container-surface-on-layer-4-minimal; +@comp-tooltip-message-color-fg-base: @cont-color-common-fg-generic-bold; +@comp-tooltip-container-border-width-sm: @cont-border-width-popover-base; +@comp-tooltip-container-border-width-md: @cont-border-width-popover-base; +@comp-tooltip-container-border-width-lg: @cont-border-width-popover-base; +@comp-tooltip-container-elevation: @cont-elevation-popover-base; +@comp-tooltip-arrow-backdrop-elevation: @cont-elevation-popover-base; +@comp-tooltip-arrow-container-sizing-sm: @cont-sizing-common-200*0.7071; +@comp-tooltip-arrow-container-sizing-md: @cont-sizing-common-300*0.7071; +@comp-tooltip-arrow-container-sizing-lg: @cont-sizing-common-300*0.7071; +@comp-tooltip-arrow-container-border-radius-start-end-sm: @cont-radius-common-xs; +@comp-tooltip-arrow-container-border-radius-start-end-md: @cont-radius-common-xs; +@comp-tooltip-arrow-container-border-radius-start-end-lg: @cont-radius-common-xs; +@comp-tooltip-arrow-container-border-width-block-start-sm: @cont-border-width-popover-base; +@comp-tooltip-arrow-container-border-width-block-start-md: @cont-border-width-popover-base; +@comp-tooltip-arrow-container-border-width-block-start-lg: @cont-border-width-popover-base; +@comp-tooltip-arrow-container-border-width-inline-end-sm: @cont-border-width-popover-base; +@comp-tooltip-arrow-container-border-width-inline-end-md: @cont-border-width-popover-base; +@comp-tooltip-arrow-container-border-width-inline-end-lg: @cont-border-width-popover-base; +@comp-tooltip-offset-spacing-gap-sm: @cont-spacing-common-gap-100; +@comp-tooltip-offset-spacing-gap-md: @cont-spacing-common-gap-100; +@comp-tooltip-offset-spacing-gap-lg: @cont-spacing-common-gap-100; +@comp-tooltip-message-typography-sm: @cont-typography-status-subtle-sm; +@comp-tooltip-message-typography-md: @cont-typography-status-subtle-md; +@comp-tooltip-message-typography-lg: @cont-typography-status-subtle-lg; +@comp-tooltip-container-spacing-padding-sm: @cont-spacing-status-padding-md; +@comp-tooltip-container-spacing-padding-md: @cont-spacing-status-padding-md; +@comp-tooltip-container-spacing-padding-lg: @cont-spacing-status-padding-md; +@comp-tooltip-container-radius-sm: @cont-radius-popover; +@comp-tooltip-container-radius-md: @cont-radius-popover; +@comp-tooltip-container-radius-lg: @cont-radius-popover; diff --git a/packages/ds-theme/src/web-design-tokens/component/tree.less b/packages/ds-theme/src/web-design-tokens/component/tree.less new file mode 100644 index 0000000000..9c0c4dcd51 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/component/tree.less @@ -0,0 +1,127 @@ +// Do not edit directly, this file was auto-generated. + +@comp-tree-item-indicator-motion-transform-rotate-collapsed: 0deg; +@comp-tree-item-indicator-motion-transform-rotate-expanded: 90deg; +@comp-tree-container-color-bg: @cont-color-common-container-misc-transparent; +@comp-tree-container-color-border: @cont-color-common-container-misc-transparent; +@comp-tree-container-radius-sm: @cont-radius-common-none; +@comp-tree-container-radius-md: @cont-radius-common-none; +@comp-tree-container-radius-lg: @cont-radius-common-none; +@comp-tree-container-border-width-sm: @cont-border-width-common-none; +@comp-tree-container-border-width-md: @cont-border-width-common-none; +@comp-tree-container-border-width-lg: @cont-border-width-common-none; +@comp-tree-item-container-color-bg-leaf-parent-enabled: @cont-color-menu-bg-on-layer-3-minimal; +@comp-tree-item-container-color-bg-leaf-parent-hover: @cont-color-menu-bg-on-layer-3-minimal; +@comp-tree-item-container-color-bg-leaf-parent-pressed: @cont-color-menu-bg-on-layer-3-minimal; +@comp-tree-item-container-color-bg-leaf-parent-disabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-bg-leaf-child-enabled: @cont-color-menu-bg-on-layer-3-minimal; +@comp-tree-item-container-color-bg-leaf-child-disabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-bg-leaf-child-selected-disabled: @cont-color-common-container-misc-disabled; +@comp-tree-item-container-color-border-leaf-parent-enabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-parent-hover: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-parent-pressed: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-parent-disabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-enabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-hover: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-pressed: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-disabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-selected-enabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-selected-hover: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-selected-pressed: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-color-border-leaf-child-selected-disabled: @cont-color-common-container-misc-transparent; +@comp-tree-item-container-elevation-leaf-parent-focus: @cont-elevation-common-focus-inset-base; +@comp-tree-item-container-elevation-leaf-child-focus: @cont-elevation-common-focus-inset-base; +@comp-tree-item-container-elevation-leaf-child-selected-focus: @cont-elevation-common-focus-inset-base; +@comp-tree-item-container-border-width-sm: @cont-border-width-common-none; +@comp-tree-item-container-border-width-md: @cont-border-width-common-none; +@comp-tree-item-container-border-width-lg: @cont-border-width-common-none; +@comp-tree-item-indicator-color-fg-leaf-parent-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-tree-item-indicator-typography-sm: @cont-typography-common-icon-base-sm; +@comp-tree-item-indicator-typography-md: @cont-typography-common-icon-base-md; +@comp-tree-item-indicator-typography-lg: @cont-typography-common-icon-base-lg; +@comp-tree-item-label-color-fg-leaf-parent-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-tree-item-label-color-fg-leaf-child-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-tree-item-label-color-fg-leaf-child-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-tree-item-icon-color-fg-leaf-parent-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-tree-item-icon-color-fg-leaf-child-disabled: @cont-color-common-fg-generic-disabled-bold; +@comp-tree-item-icon-color-fg-leaf-child-selected-disabled: @cont-color-common-fg-generic-disabled-on-disabled-bold; +@comp-tree-item-icon-typography-sm: @cont-typography-common-icon-base-sm; +@comp-tree-item-icon-typography-md: @cont-typography-common-icon-base-md; +@comp-tree-item-icon-typography-lg: @cont-typography-common-icon-base-lg; +@comp-tree-item-actions-opacity-enabled: @cont-opacity-common-transparent; +@comp-tree-item-actions-opacity-hover: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-pressed: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-disabled: @cont-opacity-common-transparent; +@comp-tree-item-actions-opacity-persistent: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-focus: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-selected-enabled: @cont-opacity-common-transparent; +@comp-tree-item-actions-opacity-selected-hover: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-selected-pressed: @cont-opacity-common-full; +@comp-tree-item-actions-opacity-selected-disabled: @cont-opacity-common-transparent; +@comp-tree-item-actions-opacity-selected-focus: @cont-opacity-common-full; +@comp-tree-container-spacing-gap-sm: @cont-spacing-common-gap-100; +@comp-tree-container-spacing-gap-md: @cont-spacing-common-gap-100; +@comp-tree-container-spacing-gap-lg: @cont-spacing-common-gap-100; +@comp-tree-item-container-color-bg-leaf-child-hover: @cont-color-menu-bg-on-layer-3-subtle; +@comp-tree-item-container-color-bg-leaf-child-pressed: @cont-color-menu-bg-on-layer-3-moderate; +@comp-tree-item-container-color-bg-leaf-child-selected-enabled: @cont-color-menu-bg-on-layer-3-moderate; +@comp-tree-item-container-color-bg-leaf-child-selected-hover: @cont-color-menu-bg-on-layer-3-moderate; +@comp-tree-item-container-color-bg-leaf-child-selected-pressed: @cont-color-menu-bg-on-layer-3-moderate; +@comp-tree-item-container-elevation-leaf-parent-enabled: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-parent-hover: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-parent-pressed: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-parent-disabled: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-enabled: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-hover: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-pressed: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-disabled: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-selected-enabled: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-selected-hover: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-selected-pressed: @cont-elevation-menu-base; +@comp-tree-item-container-elevation-leaf-child-selected-disabled: @cont-elevation-menu-base; +@comp-tree-item-indent-sizing: @cont-sizing-common-600; +@comp-tree-item-indicator-color-fg-leaf-parent-enabled: @cont-color-menu-fg-on-minimal; +@comp-tree-item-indicator-color-fg-leaf-parent-hover: @cont-color-menu-fg-on-moderate; +@comp-tree-item-indicator-color-fg-leaf-parent-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-label-typography-parent-sm: @cont-typography-menu-bold-sm; +@comp-tree-item-label-typography-parent-md: @cont-typography-menu-bold-md; +@comp-tree-item-label-typography-parent-lg: @cont-typography-menu-bold-lg; +@comp-tree-item-label-typography-child-sm: @cont-typography-menu-subtle-sm; +@comp-tree-item-label-typography-child-md: @cont-typography-menu-subtle-md; +@comp-tree-item-label-typography-child-lg: @cont-typography-menu-subtle-lg; +@comp-tree-item-label-color-fg-leaf-parent-enabled: @cont-color-menu-fg-on-minimal; +@comp-tree-item-label-color-fg-leaf-parent-hover: @cont-color-menu-fg-on-minimal; +@comp-tree-item-label-color-fg-leaf-parent-pressed: @cont-color-menu-fg-on-minimal; +@comp-tree-item-label-color-fg-leaf-child-enabled: @cont-color-menu-fg-on-minimal; +@comp-tree-item-label-color-fg-leaf-child-hover: @cont-color-menu-fg-on-subtle; +@comp-tree-item-label-color-fg-leaf-child-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-label-color-fg-leaf-child-selected-enabled: @cont-color-menu-fg-on-moderate; +@comp-tree-item-label-color-fg-leaf-child-selected-hover: @cont-color-menu-fg-on-moderate; +@comp-tree-item-label-color-fg-leaf-child-selected-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-parent-enabled: @cont-color-menu-fg-on-minimal; +@comp-tree-item-icon-color-fg-leaf-parent-hover: @cont-color-menu-fg-on-subtle; +@comp-tree-item-icon-color-fg-leaf-parent-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-child-enabled: @cont-color-menu-fg-on-minimal; +@comp-tree-item-icon-color-fg-leaf-child-hover: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-child-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-child-selected-enabled: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-child-selected-hover: @cont-color-menu-fg-on-moderate; +@comp-tree-item-icon-color-fg-leaf-child-selected-pressed: @cont-color-menu-fg-on-moderate; +@comp-tree-item-children-spacing-padding-block-start-md: @cont-spacing-common-padding-inset-100; +@comp-tree-item-children-spacing-padding-block-start-sm: @cont-spacing-common-padding-inset-100; +@comp-tree-item-children-spacing-padding-block-start-lg: @cont-spacing-common-padding-inset-100; +@comp-tree-item-children-spacing-gap-sm: @cont-spacing-common-gap-100; +@comp-tree-item-children-spacing-gap-md: @cont-spacing-common-gap-100; +@comp-tree-item-children-spacing-gap-lg: @cont-spacing-common-gap-100; +@comp-tree-item-container-radius-sm: @cont-radius-menu; +@comp-tree-item-container-radius-md: @cont-radius-menu; +@comp-tree-item-container-radius-lg: @cont-radius-menu; +@comp-tree-item-container-spacing-padding-sm: @cont-spacing-menu-padding-sm; +@comp-tree-item-container-spacing-padding-md: @cont-spacing-menu-padding-md; +@comp-tree-item-container-spacing-padding-lg: @cont-spacing-menu-padding-lg; +@comp-tree-item-container-inner-spacing-gap-sm: @cont-spacing-menu-gap-sm; +@comp-tree-item-container-inner-spacing-gap-md: @cont-spacing-menu-gap-md; +@comp-tree-item-container-inner-spacing-gap-lg: @cont-spacing-menu-gap-lg; +@comp-tree-item-container-sizing-block-sm: @cont-sizing-menu-sm; +@comp-tree-item-container-sizing-block-md: @cont-sizing-menu-md; +@comp-tree-item-container-sizing-block-lg: @cont-sizing-menu-lg; diff --git a/packages/ds-theme/src/web-design-tokens/contextual.less b/packages/ds-theme/src/web-design-tokens/contextual.less new file mode 100644 index 0000000000..e33999f8d5 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/contextual.less @@ -0,0 +1,1428 @@ +// Do not edit directly, this file was auto-generated. + +@cont-color-common-container-surface-canvas: #f6f7f9; // canvas +@cont-color-common-container-surface-layer-1: #ffffff; // layer-1 +@cont-color-common-container-surface-layer-2: #f6f7f9; // layer-2 +@cont-color-common-container-surface-layer-3: #ffffff; // layer-3 +@cont-color-common-container-surface-layer-4: #ffffff; // layer-4 +@cont-color-common-container-surface-layer-inverse: #141e29; // layer-inverse +@cont-color-common-container-surface-layer-overlay: rgba(20, 30, 41, 0.24); +@cont-color-common-container-surface-on-canvas-minimal: #ffffff; // minimal +@cont-color-common-container-surface-on-canvas-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-canvas-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-canvas-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-1-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-layer-1-subtle: #eceef4; // subtle +@cont-color-common-container-surface-on-layer-1-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-1-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-2-minimal: #ffffff; // minimal +@cont-color-common-container-surface-on-layer-2-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-2-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-2-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-3-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-layer-3-subtle: #eceef4; // subtle +@cont-color-common-container-surface-on-layer-3-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-3-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-4-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-layer-4-subtle: #eceef4; // subtle +@cont-color-common-container-surface-on-layer-4-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-4-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-inverse-minimal: #232d38; // minimal +@cont-color-common-container-surface-on-layer-inverse-subtle: #323c48; // subtle +@cont-color-common-container-surface-on-layer-inverse-moderate: #424c58; // moderate +@cont-color-common-container-surface-on-layer-inverse-bold: #75808c; // bold +@cont-color-common-container-brand-minimal: #f7f5ff; // minimal +@cont-color-common-container-brand-subtle: #bdc6ff; // subtle +@cont-color-common-container-brand-base: #2336fd; // base +@cont-color-common-container-brand-moderate: #001cf0; // moderate +@cont-color-common-container-brand-bold: #0014c2; // bold +@cont-color-common-container-accent-minimal: #f1f7ff; // minimal +@cont-color-common-container-accent-subtle: #e1f0ff; // subtle +@cont-color-common-container-accent-base: #002033; // base +@cont-color-common-container-accent-moderate: #002f49; // moderate +@cont-color-common-container-accent-bold: #003f60; // bold +@cont-color-common-container-primary-minimal: #f7f5ff; // minimal +@cont-color-common-container-primary-subtle: #ececff; // subtle +@cont-color-common-container-primary-base: #2336fd; // base +@cont-color-common-container-primary-moderate: #001cf0; // moderate +@cont-color-common-container-primary-bold: #0014c2; // bold +@cont-color-common-container-secondary-minimal: #f6f7f9; // minimal +@cont-color-common-container-secondary-subtle: #eceef4; // subtle +@cont-color-common-container-secondary-base: #505b67; // base +@cont-color-common-container-secondary-moderate: #424c58; // moderate +@cont-color-common-container-secondary-bold: #323c48; // bold +@cont-color-common-container-tertiary-minimal: rgba(80, 91, 103, 0.08); // minimal +@cont-color-common-container-tertiary-subtle: rgba(80, 91, 103, 0.16); // subtle +@cont-color-common-container-tertiary-moderate: rgba(80, 91, 103, 0.8); // moderate +@cont-color-common-container-tertiary-base: #505b67; // base +@cont-color-common-container-tertiary-bold: rgba(80, 91, 103, 0.56); // bold +@cont-color-common-container-neutral-minimal: #f6f7f9; // minimal +@cont-color-common-container-neutral-subtle: #eceef4; // subtle +@cont-color-common-container-neutral-base: #505b67; // base +@cont-color-common-container-neutral-moderate: #424c58; // moderate +@cont-color-common-container-neutral-bold: #141e29; // bold +@cont-color-common-container-negative-minimal: #fff4f2; // minimal +@cont-color-common-container-negative-subtle: #ffe9e5; // subtle +@cont-color-common-container-negative-base: #b70300; // base +@cont-color-common-container-negative-moderate: #9c0300; // moderate +@cont-color-common-container-negative-bold: #7d0200; // bold +@cont-color-common-container-warning-minimal: #fff5ea; // minimal +@cont-color-common-container-warning-subtle: #ffebd0; // subtle +@cont-color-common-container-warning-base: #ffbe42; // base +@cont-color-common-container-warning-moderate: #bb8400; // moderate +@cont-color-common-container-warning-bold: #906505; // bold +@cont-color-common-container-positive-minimal: #e9fbe9; // minimal +@cont-color-common-container-positive-subtle: #cdf9d3; // subtle +@cont-color-common-container-positive-base: #006835; // base +@cont-color-common-container-positive-moderate: #00582b; // moderate +@cont-color-common-container-positive-bold: #004521; // bold +@cont-color-common-container-info-minimal: #eff8ff; // minimal +@cont-color-common-container-info-subtle: #ddf1ff; // subtle +@cont-color-common-container-info-base: #006083; // base +@cont-color-common-container-info-moderate: #00516f; // moderate +@cont-color-common-container-info-bold: #004058; // bold +@cont-color-common-container-buy-minimal: #e9fbe9; // minimal +@cont-color-common-container-buy-subtle: #cdf9d3; // subtle +@cont-color-common-container-buy-base: #006835; // base +@cont-color-common-container-buy-moderate: #00582b; // moderate +@cont-color-common-container-buy-bold: #004521; // bold +@cont-color-common-container-sell-minimal: #fff4f2; // minimal +@cont-color-common-container-sell-subtle: #ffe9e5; // subtle +@cont-color-common-container-sell-base: #b70300; // base +@cont-color-common-container-sell-moderate: #9c0300; // moderate +@cont-color-common-container-sell-bold: #7d0200; // bold +@cont-color-common-container-category-1-minimal: #dfe0ff; // minimal +@cont-color-common-container-category-1-subtle: #c0c5ff; // subtle +@cont-color-common-container-category-1-base: #1935ef; // base +@cont-color-common-container-category-1-moderate: #0020c6; // moderate +@cont-color-common-container-category-1-bold: #001490; // bold +@cont-color-common-container-category-2-minimal: #eddcff; // minimal +@cont-color-common-container-category-2-subtle: #dabdff; // subtle +@cont-color-common-container-category-2-base: #693da4; // base +@cont-color-common-container-category-2-moderate: #53258d; // moderate +@cont-color-common-container-category-2-bold: #3e0679; // bold +@cont-color-common-container-category-3-minimal: #c4e9ea; // minimal +@cont-color-common-container-category-3-subtle: #8fd6d6; // subtle +@cont-color-common-container-category-3-base: #005f61; // base +@cont-color-common-container-category-3-moderate: #004849; // moderate +@cont-color-common-container-category-3-bold: #003233; // bold +@cont-color-common-container-category-4-minimal: #ffd9de; // minimal +@cont-color-common-container-category-4-subtle: #ffb6c1; // subtle +@cont-color-common-container-category-4-base: #aa0043; // base +@cont-color-common-container-category-4-moderate: #830032; // moderate +@cont-color-common-container-category-4-bold: #5e0022; // bold +@cont-color-common-container-category-5-minimal: #ffdbd0; // minimal +@cont-color-common-container-category-5-subtle: #ffb9a3; // subtle +@cont-color-common-container-category-5-base: #9c2e00; // base +@cont-color-common-container-category-5-moderate: #782100; // moderate +@cont-color-common-container-category-5-bold: #561500; // bold +@cont-color-common-container-category-6-minimal: #e3e2e2; // minimal +@cont-color-common-container-category-6-subtle: #cac9c9; // subtle +@cont-color-common-container-category-6-base: #545555; // base +@cont-color-common-container-category-6-moderate: #3f4040; // moderate +@cont-color-common-container-category-6-bold: #2b2c2c; // bold +@cont-color-common-container-category-7-minimal: #f6e0b3; // minimal +@cont-color-common-container-category-7-subtle: #eac661; // subtle +@cont-color-common-container-category-7-base: #6a5100; // base +@cont-color-common-container-category-7-moderate: #503d00; // moderate +@cont-color-common-container-category-7-bold: #382a00; // bold +@cont-color-common-container-category-8-minimal: #c9ead6; // minimal +@cont-color-common-container-category-8-subtle: #92d7b5; // subtle +@cont-color-common-container-category-8-base: #006142; // base +@cont-color-common-container-category-8-moderate: #004a31; // moderate +@cont-color-common-container-category-8-bold: #003321; // bold +@cont-color-common-container-misc-disabled: #eceef4; // disabled +@cont-color-common-container-misc-disabled-inverse: #424c58; // disabled-inverse +@cont-color-common-container-misc-focus: #2336fd; // focus +@cont-color-common-container-misc-focus-inverse: #ffffff; // focus-inverse +@cont-color-common-container-misc-transparent: rgba(0, 0, 0, 0); // transparent +@cont-color-common-container-inverse-minimal: rgba(255, 255, 255, 0.08); // minimal +@cont-color-common-container-inverse-subtle: rgba(255, 255, 255, 0.16); // subtle +@cont-color-common-container-inverse-base: #ffffff; // base +@cont-color-common-container-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-container-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-container-persist-on-light-minimal: #f6f7f9; // minimal +@cont-color-common-container-persist-on-light-subtle: #eceef4; // subtle +@cont-color-common-container-persist-on-light-base: #141e29; // base +@cont-color-common-container-persist-on-light-moderate: #232d38; // moderate +@cont-color-common-container-persist-on-light-bold: #323c48; // bold +@cont-color-common-container-persist-on-dark-minimal: #232d38; // minimal +@cont-color-common-container-persist-on-dark-subtle: #323c48; // subtle +@cont-color-common-container-persist-on-dark-base: #ffffff; // base +@cont-color-common-container-persist-on-dark-moderate: #f6f7f9; // moderate +@cont-color-common-container-persist-on-dark-bold: #eceef4; // bold +@cont-color-common-fg-generic-bold: #141e29; // bold +@cont-color-common-fg-generic-moderate: #323c48; // moderate +@cont-color-common-fg-generic-subtle: #505b67; // subtle +@cont-color-common-fg-generic-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-generic-moderate-inverse: #c0cadb; // moderate-inverse +@cont-color-common-fg-generic-subtle-inverse: #9ca7b4; // subtle-inverse +@cont-color-common-fg-generic-persist-on-light-bold: #141e29; // bold +@cont-color-common-fg-generic-persist-on-light-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-light-subtle: #ffffff; // subtle +@cont-color-common-fg-generic-persist-on-dark-bold: #ffffff; // bold +@cont-color-common-fg-generic-persist-on-dark-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-dark-subtle: #141e29; // subtle +@cont-color-common-fg-generic-disabled-bold: #adb7c5; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold: #9ca7b4; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-brand-bold: #2336fd; // bold +@cont-color-common-fg-brand-moderate: #3459ff; // moderate +@cont-color-common-fg-brand-on-brand-bold: #2336fd; // bold +@cont-color-common-fg-brand-on-brand-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-brand-on-brand-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-brand-on-brand-moderate: #3459ff; // moderate +@cont-color-common-fg-brand-on-brand-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-brand-on-brand-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-accent-bold: #005f8d; // bold +@cont-color-common-fg-accent-moderate: #0073aa; // moderate +@cont-color-common-fg-accent-on-accent-bold: #005f8d; // bold +@cont-color-common-fg-accent-on-accent-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-accent-on-accent-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-accent-on-accent-moderate: #0073aa; // moderate +@cont-color-common-fg-accent-on-accent-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-accent-on-accent-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-primary-bold: #0014c2; // bold +@cont-color-common-fg-primary-moderate: #2336fd; // moderate +@cont-color-common-fg-primary-on-primary-bold: #2336fd; // bold +@cont-color-common-fg-primary-on-primary-bold-alt: #141e29; // bolt-alt +@cont-color-common-fg-primary-on-primary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-primary-on-primary-moderate: #3459ff; // moderate +@cont-color-common-fg-primary-on-primary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-primary-on-primary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-secondary-bold: #505b67; // bold +@cont-color-common-fg-secondary-moderate: #646e7b; // moderate +@cont-color-common-fg-secondary-on-secondary-bold: #505b67; // bold +@cont-color-common-fg-secondary-on-secondary-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-secondary-on-secondary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-secondary-on-secondary-moderate: #646e7b; // moderare==te +@cont-color-common-fg-secondary-on-secondary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-secondary-on-secondary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-tertiary-bold: #505b67; // bold +@cont-color-common-fg-tertiary-moderate: #646e7b; // moderate +@cont-color-common-fg-tertiary-on-tertiary-bold: #505b67; // bold +@cont-color-common-fg-tertiary-on-tertiary-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-tertiary-on-tertiary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-tertiary-on-tertiary-moderate: #646e7b; // moderare==te +@cont-color-common-fg-tertiary-on-tertiary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-tertiary-on-tertiary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-neutral-bold: #505b67; // bold +@cont-color-common-fg-neutral-moderate: #646e7b; // moderate +@cont-color-common-fg-neutral-on-neutral-bold: #505b67; // bold +@cont-color-common-fg-neutral-on-neutral-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-neutral-on-neutral-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-neutral-on-neutral-moderate: #646e7b; // moderate +@cont-color-common-fg-neutral-on-neutral-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-neutral-on-neutral-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-negative-bold: #b70300; // bold +@cont-color-common-fg-negative-moderate: #d71c0f; // moderate +@cont-color-common-fg-negative-on-negative-bold: #b70300; // bold +@cont-color-common-fg-negative-on-negative-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-negative-on-negative-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-negative-on-negative-moderate: #d71c0f; // moderate +@cont-color-common-fg-negative-on-negative-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-negative-on-negative-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-warning-bold: #775300; // bold +@cont-color-common-fg-warning-moderate: #906505; // moderate +@cont-color-common-fg-warning-on-warning-bold: #775300; // bold +@cont-color-common-fg-warning-on-warning-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-warning-on-warning-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-warning-on-warning-moderate: #906505; // moderate +@cont-color-common-fg-warning-on-warning-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-warning-on-warning-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-positive-bold: #006835; // bold +@cont-color-common-fg-positive-moderate: #177d44; // moderate +@cont-color-common-fg-positive-on-positive-bold: #006835; // bold +@cont-color-common-fg-positive-on-positive-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-positive-on-positive-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-positive-on-positive-moderate: #177d44; // moderate +@cont-color-common-fg-positive-on-positive-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-positive-on-positive-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-info-bold: #006083; // bold +@cont-color-common-fg-info-moderate: #08759d; // moderate +@cont-color-common-fg-info-on-info-bold: #006083; // bold +@cont-color-common-fg-info-on-info-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-info-on-info-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-info-on-info-moderate: #08759d; // moderate +@cont-color-common-fg-info-on-info-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-info-on-info-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-buy-bold: #006835; // bold +@cont-color-common-fg-buy-moderate: #177d44; // moderate +@cont-color-common-fg-buy-on-buy-bold: #006835; // bold +@cont-color-common-fg-buy-on-buy-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-buy-on-buy-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-buy-on-buy-moderate: #177d44; // moderate +@cont-color-common-fg-buy-on-buy-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-buy-on-buy-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-sell-bold: #b70300; // bold +@cont-color-common-fg-sell-moderate: #d71c0f; // moderate +@cont-color-common-fg-sell-on-sell-bold: #b70300; // bold +@cont-color-common-fg-sell-on-sell-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-sell-on-sell-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-sell-on-sell-moderate: #d71c0f; // moderate +@cont-color-common-fg-sell-on-sell-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-sell-on-sell-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-1-bold: #0020c6; // bold +@cont-color-common-fg-category-1-moderate: #1935ef; // moderate +@cont-color-common-fg-category-1-on-category-1-bold: #0020c6; // bold +@cont-color-common-fg-category-1-on-category-1-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-1-on-category-1-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-1-on-category-1-moderate: #1935ef; // moderate +@cont-color-common-fg-category-1-on-category-1-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-1-on-category-1-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-2-bold: #53258d; // bold +@cont-color-common-fg-category-2-moderate: #693da4; // moderate +@cont-color-common-fg-category-2-on-category-2-bold: #53258d; // bold +@cont-color-common-fg-category-2-on-category-2-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-2-on-category-2-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-2-on-category-2-moderate: #693da4; // moderate +@cont-color-common-fg-category-2-on-category-2-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-2-on-category-2-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-3-bold: #004849; // bold +@cont-color-common-fg-category-3-moderate: #005f61; // moderate +@cont-color-common-fg-category-3-on-category-3-bold: #004849; // bold +@cont-color-common-fg-category-3-on-category-3-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-3-on-category-3-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-3-on-category-3-moderate: #005f61; // moderate +@cont-color-common-fg-category-3-on-category-3-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-3-on-category-3-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-4-bold: #830032; // bold +@cont-color-common-fg-category-4-moderate: #aa0043; // moderate +@cont-color-common-fg-category-4-on-category-4-bold: #830032; // bold +@cont-color-common-fg-category-4-on-category-4-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-4-on-category-4-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-4-on-category-4-moderate: #aa0043; // moderate +@cont-color-common-fg-category-4-on-category-4-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-4-on-category-4-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-5-bold: #782100; // bold +@cont-color-common-fg-category-5-moderate: #9c2e00; // moderate +@cont-color-common-fg-category-5-on-category-5-bold: #782100; // bold +@cont-color-common-fg-category-5-on-category-5-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-5-on-category-5-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-5-on-category-5-moderate: #9c2e00; // moderate +@cont-color-common-fg-category-5-on-category-5-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-5-on-category-5-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-6-bold: #3f4040; // bold +@cont-color-common-fg-category-6-moderate: #545555; // moderate +@cont-color-common-fg-category-6-on-category-6-bold: #3f4040; // bold +@cont-color-common-fg-category-6-on-category-6-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-6-on-category-6-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-6-on-category-6-moderate: #545555; // moderate +@cont-color-common-fg-category-6-on-category-6-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-6-on-category-6-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-7-bold: #503d00; // bold +@cont-color-common-fg-category-7-moderate: #6a5100; // moderate +@cont-color-common-fg-category-7-on-category-7-bold: #503d00; // bold +@cont-color-common-fg-category-7-on-category-7-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-7-on-category-7-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-7-on-category-7-moderate: #6a5100; // moderate +@cont-color-common-fg-category-7-on-category-7-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-7-on-category-7-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-8-bold: #004a31; // bold +@cont-color-common-fg-category-8-moderate: #006142; // moderate +@cont-color-common-fg-category-8-on-category-8-bold: #004a31; // bold +@cont-color-common-fg-category-8-on-category-8-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-8-on-category-8-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-8-on-category-8-moderate: #006142; // moderate +@cont-color-common-fg-category-8-on-category-8-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-8-on-category-8-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-inverse-minimal: rgba(255, 255, 255, 0.24); // minimal +@cont-color-common-fg-inverse-subtle: rgba(255, 255, 255, 0.4); // subtle +@cont-color-common-fg-inverse-base: #ffffff; // base +@cont-color-common-fg-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-fg-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-fg-persist-on-dark-minimal: rgba(20, 30, 41, 0.24); // minimal +@cont-color-common-fg-persist-on-dark-subtle: rgba(20, 30, 41, 0.4); // subtle +@cont-color-common-fg-persist-on-dark-base: #141e29; // base +@cont-color-common-fg-persist-on-dark-moderate: rgba(20, 30, 41, 0.8); // moderate +@cont-color-common-fg-persist-on-dark-bold: rgba(20, 30, 41, 0.56); // bold +@cont-color-shell-bg-layer-1: #ffffff; +@cont-color-shell-bg-layer-2: #f6f7f9; +@cont-color-shell-bg-layer-3: #ffffff; +@cont-color-shell-bg-layer-4: #ffffff; +@cont-color-shell-bg-layer-canvas: #f6f7f9; +@cont-color-shell-bg-layer-inverse: #141e29; +@cont-color-shell-border-on-layer-1-bold: #c0cadb; +@cont-color-shell-border-on-layer-1-subtle: #eceef4; +@cont-color-shell-border-on-layer-2-bold: #c0cadb; +@cont-color-shell-border-on-layer-2-subtle: #dee2eb; +@cont-color-shell-border-on-layer-3-bold: #c0cadb; +@cont-color-shell-border-on-layer-3-subtle: #eceef4; +@cont-color-shell-border-on-layer-4-bold: #c0cadb; +@cont-color-shell-border-on-layer-4-subtle: #eceef4; +@cont-color-shell-border-on-layer-canvas-bold: #c0cadb; +@cont-color-shell-border-on-layer-canvas-subtle: #dee2eb; +@cont-color-shell-border-on-layer-inverse-bold: #424c58; +@cont-color-shell-border-on-layer-inverse-subtle: #323c48; +@cont-color-shell-elevation-shadow-1: rgba(20, 30, 41, 0.08); +@cont-color-shell-elevation-shadow-2: rgba(20, 30, 41, 0.04); +@cont-color-action-bg-neutral-minimal: #f6f7f9; +@cont-color-action-bg-neutral-subtle: #eceef4; +@cont-color-action-bg-neutral-base: #f6f7f9; +@cont-color-action-bg-neutral-moderate: #eceef4; +@cont-color-action-bg-neutral-bold: rgba(0, 0, 0, 0); +@cont-color-action-bg-primary-minimal: #f7f5ff; +@cont-color-action-bg-primary-subtle: #ececff; +@cont-color-action-bg-primary-base: #2336fd; +@cont-color-action-bg-primary-moderate: #001cf0; +@cont-color-action-bg-primary-bold: #0014c2; +@cont-color-action-bg-secondary-minimal: #f6f7f9; +@cont-color-action-bg-secondary-subtle: #eceef4; +@cont-color-action-bg-secondary-base: #505b67; +@cont-color-action-bg-secondary-moderate: #424c58; +@cont-color-action-bg-secondary-bold: #323c48; +@cont-color-action-bg-tertiary-minimal: rgba(80, 91, 103, 0.08); +@cont-color-action-bg-tertiary-subtle: rgba(80, 91, 103, 0.16); +@cont-color-action-bg-tertiary-base: #505b67; +@cont-color-action-bg-tertiary-moderate: rgba(80, 91, 103, 0.8); +@cont-color-action-bg-tertiary-bold: rgba(80, 91, 103, 0.56); +@cont-color-action-bg-negative-minimal: #fff4f2; +@cont-color-action-bg-negative-subtle: #ffe9e5; +@cont-color-action-bg-negative-base: #b70300; +@cont-color-action-bg-negative-moderate: #9c0300; +@cont-color-action-bg-negative-bold: #7d0200; +@cont-color-action-bg-positive-minimal: #e9fbe9; +@cont-color-action-bg-positive-subtle: #cdf9d3; +@cont-color-action-bg-positive-base: #006835; +@cont-color-action-bg-positive-moderate: #00582b; +@cont-color-action-bg-positive-bold: #004521; +@cont-color-action-bg-buy-minimal: #e9fbe9; +@cont-color-action-bg-buy-subtle: #cdf9d3; +@cont-color-action-bg-buy-base: #006835; +@cont-color-action-bg-buy-moderate: #00582b; +@cont-color-action-bg-buy-bold: #004521; +@cont-color-action-bg-sell-minimal: #fff4f2; +@cont-color-action-bg-sell-subtle: #ffe9e5; +@cont-color-action-bg-sell-base: #b70300; +@cont-color-action-bg-sell-moderate: #9c0300; +@cont-color-action-bg-sell-bold: #7d0200; +@cont-color-action-bg-inverse-minimal: rgba(255, 255, 255, 0.08); +@cont-color-action-bg-inverse-subtle: rgba(255, 255, 255, 0.16); +@cont-color-action-bg-inverse-base: #ffffff; +@cont-color-action-bg-inverse-moderate: rgba(255, 255, 255, 0.8); +@cont-color-action-bg-inverse-bold: rgba(255, 255, 255, 0.56); +@cont-color-action-bg-persist-on-light-minimal: #f6f7f9; +@cont-color-action-bg-persist-on-light-subtle: #eceef4; +@cont-color-action-bg-persist-on-light-base: #141e29; +@cont-color-action-bg-persist-on-light-moderate: #232d38; +@cont-color-action-bg-persist-on-light-bold: #323c48; +@cont-color-action-bg-persist-on-dark-minimal: #232d38; +@cont-color-action-bg-persist-on-dark-subtle: #323c48; +@cont-color-action-bg-persist-on-dark-base: #ffffff; +@cont-color-action-bg-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-bg-persist-on-dark-bold: #eceef4; +@cont-color-action-fg-on-neutral-minimal: #ffffff; +@cont-color-action-fg-on-neutral-subtle: #ffffff; +@cont-color-action-fg-on-neutral-base: #141e29; +@cont-color-action-fg-on-neutral-moderate: #141e29; +@cont-color-action-fg-on-neutral-bold: #141e29; +@cont-color-action-fg-on-primary-minimal: #2336fd; +@cont-color-action-fg-on-primary-subtle: #2336fd; +@cont-color-action-fg-on-primary-base: #ffffff; +@cont-color-action-fg-on-primary-moderate: #ffffff; +@cont-color-action-fg-on-primary-bold: #ffffff; +@cont-color-action-fg-on-secondary-minimal: #141e29; +@cont-color-action-fg-on-secondary-subtle: #141e29; +@cont-color-action-fg-on-secondary-base: #ffffff; +@cont-color-action-fg-on-secondary-moderate: #ffffff; +@cont-color-action-fg-on-secondary-bold: #ffffff; +@cont-color-action-fg-on-tertiary-minimal: #141e29; +@cont-color-action-fg-on-tertiary-subtle: #141e29; +@cont-color-action-fg-on-tertiary-base: #ffffff; +@cont-color-action-fg-on-tertiary-moderate: #ffffff; +@cont-color-action-fg-on-tertiary-bold: #ffffff; +@cont-color-action-fg-on-negative-minimal: #b70300; +@cont-color-action-fg-on-negative-subtle: #b70300; +@cont-color-action-fg-on-negative-base: #ffffff; +@cont-color-action-fg-on-negative-moderate: #ffffff; +@cont-color-action-fg-on-negative-bold: #ffffff; +@cont-color-action-fg-on-positive-minimal: #006835; +@cont-color-action-fg-on-positive-subtle: #006835; +@cont-color-action-fg-on-positive-base: #ffffff; +@cont-color-action-fg-on-positive-moderate: #ffffff; +@cont-color-action-fg-on-positive-bold: #ffffff; +@cont-color-action-fg-on-buy-minimal: #006835; +@cont-color-action-fg-on-buy-subtle: #006835; +@cont-color-action-fg-on-buy-base: #ffffff; +@cont-color-action-fg-on-buy-moderate: #ffffff; +@cont-color-action-fg-on-buy-bold: #ffffff; +@cont-color-action-fg-on-sell-minimal: #b70300; +@cont-color-action-fg-on-sell-subtle: #b70300; +@cont-color-action-fg-on-sell-base: #ffffff; +@cont-color-action-fg-on-sell-moderate: #ffffff; +@cont-color-action-fg-on-sell-bold: #ffffff; +@cont-color-action-fg-on-inverse-minimal: #ffffff; +@cont-color-action-fg-on-inverse-subtle: #ffffff; +@cont-color-action-fg-on-inverse-base: #141e29; +@cont-color-action-fg-on-inverse-moderate: #141e29; +@cont-color-action-fg-on-inverse-bold: #141e29; +@cont-color-action-fg-on-persist-on-light-minimal: #141e29; +@cont-color-action-fg-on-persist-on-light-subtle: #141e29; +@cont-color-action-fg-on-persist-on-light-base: #ffffff; +@cont-color-action-fg-on-persist-on-light-moderate: #ffffff; +@cont-color-action-fg-on-persist-on-light-bold: #ffffff; +@cont-color-action-fg-on-persist-on-dark-minimal: #ffffff; +@cont-color-action-fg-on-persist-on-dark-subtle: #ffffff; +@cont-color-action-fg-on-persist-on-dark-base: #141e29; +@cont-color-action-fg-on-persist-on-dark-moderate: #141e29; +@cont-color-action-fg-on-persist-on-dark-bold: #141e29; +@cont-color-action-fg-on-transparent-minimal: #2336fd; +@cont-color-action-fg-on-transparent-subtle: #2336fd; +@cont-color-action-fg-on-transparent-base: #2336fd; +@cont-color-action-fg-on-transparent-moderate: #0014c2; +@cont-color-action-fg-on-transparent-bold: #0014c2; +@cont-color-action-border-neutral-minimal: #f6f7f9; +@cont-color-action-border-neutral-subtle: #eceef4; +@cont-color-action-border-neutral-base: #c0cadb; +@cont-color-action-border-neutral-moderate: #848f9c; +@cont-color-action-border-neutral-bold: #848f9c; +@cont-color-action-border-primary-minimal: #f7f5ff; +@cont-color-action-border-primary-subtle: #ececff; +@cont-color-action-border-primary-base: #2336fd; +@cont-color-action-border-primary-moderate: #001cf0; +@cont-color-action-border-primary-bold: #0014c2; +@cont-color-action-border-secondary-minimal: #f6f7f9; +@cont-color-action-border-secondary-subtle: #eceef4; +@cont-color-action-border-secondary-base: #505b67; +@cont-color-action-border-secondary-moderate: #424c58; +@cont-color-action-border-secondary-bold: #323c48; +@cont-color-action-border-tertiary-minimal: #f6f7f9; +@cont-color-action-border-tertiary-subtle: #eceef4; +@cont-color-action-border-tertiary-base: #505b67; +@cont-color-action-border-tertiary-moderate: #424c58; +@cont-color-action-border-tertiary-bold: #323c48; +@cont-color-action-border-negative-minimal: #fff4f2; +@cont-color-action-border-negative-subtle: #ffe9e5; +@cont-color-action-border-negative-base: #b70300; +@cont-color-action-border-negative-moderate: #9c0300; +@cont-color-action-border-negative-bold: #7d0200; +@cont-color-action-border-positive-minimal: #e9fbe9; +@cont-color-action-border-positive-subtle: #cdf9d3; +@cont-color-action-border-positive-base: #006835; +@cont-color-action-border-positive-moderate: #00582b; +@cont-color-action-border-positive-bold: #004521; +@cont-color-action-border-buy-minimal: #e9fbe9; +@cont-color-action-border-buy-subtle: #cdf9d3; +@cont-color-action-border-buy-base: #006835; +@cont-color-action-border-buy-moderate: #00582b; +@cont-color-action-border-buy-bold: #004521; +@cont-color-action-border-sell-minimal: #fff4f2; +@cont-color-action-border-sell-subtle: #ffe9e5; +@cont-color-action-border-sell-base: #b70300; +@cont-color-action-border-sell-moderate: #9c0300; +@cont-color-action-border-sell-bold: #7d0200; +@cont-color-action-border-inverse-minimal: rgba(255, 255, 255, 0.08); +@cont-color-action-border-inverse-subtle: rgba(255, 255, 255, 0.16); +@cont-color-action-border-inverse-base: #ffffff; +@cont-color-action-border-inverse-moderate: rgba(255, 255, 255, 0.8); +@cont-color-action-border-inverse-bold: rgba(255, 255, 255, 0.56); +@cont-color-action-border-persist-on-light-minimal: rgba(35, 45, 56, 0.24); +@cont-color-action-border-persist-on-light-subtle: rgba(35, 45, 56, 0.4); +@cont-color-action-border-persist-on-light-base: #141e29; +@cont-color-action-border-persist-on-light-moderate: rgba(35, 45, 56, 0.8); +@cont-color-action-border-persist-on-light-bold: rgba(35, 45, 56, 0.56); +@cont-color-action-border-persist-on-dark-minimal: #232d38; +@cont-color-action-border-persist-on-dark-subtle: #323c48; +@cont-color-action-border-persist-on-dark-base: #ffffff; +@cont-color-action-border-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-border-persist-on-dark-bold: #eceef4; +@cont-color-status-bg-neutral-base: #505b67; +@cont-color-status-bg-neutral-minimal: #f6f7f9; +@cont-color-status-bg-negative-base: #b70300; +@cont-color-status-bg-negative-minimal: #fff4f2; +@cont-color-status-bg-warning-base: #ffbe42; +@cont-color-status-bg-warning-minimal: #fff5ea; +@cont-color-status-bg-positive-base: #006835; +@cont-color-status-bg-positive-minimal: #e9fbe9; +@cont-color-status-bg-info-base: #006083; +@cont-color-status-bg-info-minimal: #eff8ff; +@cont-color-status-bg-buy-base: #006835; +@cont-color-status-bg-buy-minimal: #e9fbe9; +@cont-color-status-bg-sell-base: #b70300; +@cont-color-status-bg-sell-minimal: #fff4f2; +@cont-color-status-fg-neutral-base: #505b67; +@cont-color-status-fg-on-neutral-base: #ffffff; +@cont-color-status-fg-on-neutral-minimal: #505b67; +@cont-color-status-fg-negative-base: #b70300; +@cont-color-status-fg-on-negative-base: #ffffff; +@cont-color-status-fg-on-negative-minimal: #b70300; +@cont-color-status-fg-warning-base: #775300; +@cont-color-status-fg-on-warning-base: #141e29; +@cont-color-status-fg-on-warning-minimal: #775300; +@cont-color-status-fg-positive-base: #006835; +@cont-color-status-fg-on-positive-base: #ffffff; +@cont-color-status-fg-on-positive-minimal: #006835; +@cont-color-status-fg-info-base: #006083; +@cont-color-status-fg-on-info-base: #ffffff; +@cont-color-status-fg-on-info-minimal: #006083; +@cont-color-status-fg-buy-base: #006835; +@cont-color-status-fg-on-buy-base: #ffffff; +@cont-color-status-fg-on-buy-minimal: #006835; +@cont-color-status-fg-sell-base: #b70300; +@cont-color-status-fg-on-sell-base: #ffffff; +@cont-color-status-fg-on-sell-minimal: #b70300; +@cont-color-status-border-neutral-base: #505b67; +@cont-color-status-border-neutral-minimal: #f6f7f9; +@cont-color-status-border-negative-base: #b70300; +@cont-color-status-border-negative-minimal: #fff4f2; +@cont-color-status-border-warning-base: #ffbe42; +@cont-color-status-border-warning-minimal: #fff5ea; +@cont-color-status-border-positive-base: #006835; +@cont-color-status-border-positive-minimal: #e9fbe9; +@cont-color-status-border-info-base: #006083; +@cont-color-status-border-info-minimal: #eff8ff; +@cont-color-status-border-buy-base: #006835; +@cont-color-status-border-buy-minimal: #e9fbe9; +@cont-color-status-border-sell-base: #b70300; +@cont-color-status-border-sell-minimal: #fff4f2; +@cont-color-data-viz-categorical-bg-category-1: #3d54ff; +@cont-color-data-viz-categorical-bg-category-2: #260050; +@cont-color-data-viz-categorical-bg-category-3: #007779; +@cont-color-data-viz-categorical-bg-category-4: #3c0013; +@cont-color-data-viz-categorical-bg-category-5: #c23b00; +@cont-color-data-viz-categorical-bg-category-6: #221800; +@cont-color-data-viz-categorical-bg-category-7: #6a6b6b; +@cont-color-data-viz-categorical-bg-category-8: #001f12; +@cont-color-data-viz-categorical-bg-category-9: #00095d; +@cont-color-data-viz-categorical-bg-category-10: #8054bc; +@cont-color-data-viz-categorical-bg-category-11: #001e1e; +@cont-color-data-viz-categorical-bg-category-12: #d30055; +@cont-color-data-viz-categorical-bg-category-13: #360a00; +@cont-color-data-viz-categorical-bg-category-14: #846700; +@cont-color-data-viz-categorical-bg-category-15: #181a1a; +@cont-color-data-viz-categorical-bg-category-16: #007a54; +@cont-color-data-viz-categorical-bg-category-17: #0020c6; +@cont-color-data-viz-categorical-bg-category-18: #53258d; +@cont-color-data-viz-categorical-bg-category-19: #004849; +@cont-color-data-viz-categorical-bg-category-20: #830032; +@cont-color-data-viz-categorical-bg-category-21: #782100; +@cont-color-data-viz-categorical-bg-category-22: #503d00; +@cont-color-data-viz-categorical-bg-category-23: #3f4040; +@cont-color-data-viz-categorical-bg-category-24: #004a31; +@cont-color-data-viz-diverging-bg-positive-negative-positive-100: #b3f1bf; +@cont-color-data-viz-diverging-bg-positive-negative-positive-200: #7fde99; +@cont-color-data-viz-diverging-bg-positive-negative-positive-300: #6bc987; +@cont-color-data-viz-diverging-bg-positive-negative-positive-400: #58b675; +@cont-color-data-viz-diverging-bg-positive-negative-positive-500: #41a062; +@cont-color-data-viz-diverging-bg-positive-negative-positive-600: #177d44; +@cont-color-data-viz-diverging-bg-positive-negative-positive-700: #006835; +@cont-color-data-viz-diverging-bg-positive-negative-positive-800: #00582b; +@cont-color-data-viz-diverging-bg-positive-negative-positive-900: #003417; +@cont-color-data-viz-diverging-bg-positive-negative-positive-1000: #00230e; +@cont-color-data-viz-diverging-bg-positive-negative-negative-100: #ffdad4; +@cont-color-data-viz-diverging-bg-positive-negative-negative-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-positive-negative-negative-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-positive-negative-negative-400: #ff7c68; +@cont-color-data-viz-diverging-bg-positive-negative-negative-500: #ff5540; +@cont-color-data-viz-diverging-bg-positive-negative-negative-600: #d71c0f; +@cont-color-data-viz-diverging-bg-positive-negative-negative-700: #b70300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-800: #9c0300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-900: #600100; +@cont-color-data-viz-diverging-bg-positive-negative-negative-1000: #450100; +@cont-color-data-viz-diverging-bg-hot-cold-hot-100: #ffdad4; +@cont-color-data-viz-diverging-bg-hot-cold-hot-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-hot-cold-hot-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-hot-cold-hot-400: #ff7c68; +@cont-color-data-viz-diverging-bg-hot-cold-hot-500: #ff5540; +@cont-color-data-viz-diverging-bg-hot-cold-hot-600: #d71c0f; +@cont-color-data-viz-diverging-bg-hot-cold-hot-700: #b70300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-800: #9c0300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-900: #600100; +@cont-color-data-viz-diverging-bg-hot-cold-hot-1000: #450100; +@cont-color-data-viz-diverging-bg-hot-cold-cold-100: #dfe0ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-200: #c0c5ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-300: #a0aaff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-400: #818fff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-500: #6173ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-600: #3d54ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-700: #1935ef; +@cont-color-data-viz-diverging-bg-hot-cold-cold-800: #0020c6; +@cont-color-data-viz-diverging-bg-hot-cold-cold-900: #001490; +@cont-color-data-viz-diverging-bg-hot-cold-cold-1000: #00095d; +@cont-color-data-viz-diverging-bg-buy-sell-buy-100: #b3f1bf; +@cont-color-data-viz-diverging-bg-buy-sell-buy-200: #7fde99; +@cont-color-data-viz-diverging-bg-buy-sell-buy-300: #6bc987; +@cont-color-data-viz-diverging-bg-buy-sell-buy-400: #58b675; +@cont-color-data-viz-diverging-bg-buy-sell-buy-500: #41a062; +@cont-color-data-viz-diverging-bg-buy-sell-buy-600: #177d44; +@cont-color-data-viz-diverging-bg-buy-sell-buy-700: #006835; +@cont-color-data-viz-diverging-bg-buy-sell-buy-800: #00582b; +@cont-color-data-viz-diverging-bg-buy-sell-buy-900: #003417; +@cont-color-data-viz-diverging-bg-buy-sell-buy-1000: #00230e; +@cont-color-data-viz-diverging-bg-buy-sell-sell-100: #ffdad4; +@cont-color-data-viz-diverging-bg-buy-sell-sell-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-buy-sell-sell-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-buy-sell-sell-400: #ff816d; +@cont-color-data-viz-diverging-bg-buy-sell-sell-500: #ff5540; +@cont-color-data-viz-diverging-bg-buy-sell-sell-600: #d71c0f; +@cont-color-data-viz-diverging-bg-buy-sell-sell-700: #b70300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-800: #9c0300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-900: #600100; +@cont-color-data-viz-diverging-bg-buy-sell-sell-1000: #450100; +@cont-color-data-viz-sequencial-option-1-100: #dfe0ff; +@cont-color-data-viz-sequencial-option-1-200: #c0c5ff; +@cont-color-data-viz-sequencial-option-1-300: #a0aaff; +@cont-color-data-viz-sequencial-option-1-400: #818fff; +@cont-color-data-viz-sequencial-option-1-500: #6173ff; +@cont-color-data-viz-sequencial-option-1-600: #3d54ff; +@cont-color-data-viz-sequencial-option-1-700: #1935ef; +@cont-color-data-viz-sequencial-option-1-800: #0020c6; +@cont-color-data-viz-sequencial-option-1-900: #001490; +@cont-color-data-viz-sequencial-option-1-1000: #00095d; +@cont-color-data-viz-sequencial-option-2-100: #eddcff; +@cont-color-data-viz-sequencial-option-2-200: #dabdff; +@cont-color-data-viz-sequencial-option-2-300: #c79eff; +@cont-color-data-viz-sequencial-option-2-400: #b083ee; +@cont-color-data-viz-sequencial-option-2-500: #986bd5; +@cont-color-data-viz-sequencial-option-2-600: #8054bc; +@cont-color-data-viz-sequencial-option-2-700: #693da4; +@cont-color-data-viz-sequencial-option-2-800: #53258d; +@cont-color-data-viz-sequencial-option-2-900: #3e0679; +@cont-color-data-viz-sequencial-option-2-1000: #260050; +@cont-color-data-viz-sequencial-option-3-100: #c4e9ea; +@cont-color-data-viz-sequencial-option-3-200: #8fd6d6; +@cont-color-data-viz-sequencial-option-3-300: #3ac2c5; +@cont-color-data-viz-sequencial-option-3-400: #00aaad; +@cont-color-data-viz-sequencial-option-3-500: #009093; +@cont-color-data-viz-sequencial-option-3-600: #007779; +@cont-color-data-viz-sequencial-option-3-700: #005f61; +@cont-color-data-viz-sequencial-option-3-800: #004849; +@cont-color-data-viz-sequencial-option-3-900: #003233; +@cont-color-data-viz-sequencial-option-3-1000: #001e1e; +@cont-color-data-viz-sequencial-option-4-100: #ffd9de; +@cont-color-data-viz-sequencial-option-4-200: #ffb6c1; +@cont-color-data-viz-sequencial-option-4-300: #ff8fa4; +@cont-color-data-viz-sequencial-option-4-400: #ff6186; +@cont-color-data-viz-sequencial-option-4-500: #f42a6b; +@cont-color-data-viz-sequencial-option-4-600: #d30055; +@cont-color-data-viz-sequencial-option-4-700: #aa0043; +@cont-color-data-viz-sequencial-option-4-800: #830032; +@cont-color-data-viz-sequencial-option-4-900: #5e0022; +@cont-color-data-viz-sequencial-option-4-1000: #3c0013; +@cont-color-data-viz-sequencial-option-5-100: #ffdbd0; +@cont-color-data-viz-sequencial-option-5-200: #ffb9a3; +@cont-color-data-viz-sequencial-option-5-300: #ff9471; +@cont-color-data-viz-sequencial-option-5-400: #ff6935; +@cont-color-data-viz-sequencial-option-5-500: #e94800; +@cont-color-data-viz-sequencial-option-5-600: #c23b00; +@cont-color-data-viz-sequencial-option-5-700: #9c2e00; +@cont-color-data-viz-sequencial-option-5-800: #782100; +@cont-color-data-viz-sequencial-option-5-900: #561500; +@cont-color-data-viz-sequencial-option-5-1000: #360a00; +@cont-color-data-viz-sequencial-option-6-100: #e3e2e2; +@cont-color-data-viz-sequencial-option-6-200: #cac9c9; +@cont-color-data-viz-sequencial-option-6-300: #b1b0b0; +@cont-color-data-viz-sequencial-option-6-400: #999999; +@cont-color-data-viz-sequencial-option-6-500: #818181; +@cont-color-data-viz-sequencial-option-6-600: #6a6b6b; +@cont-color-data-viz-sequencial-option-6-700: #545555; +@cont-color-data-viz-sequencial-option-6-800: #3f4040; +@cont-color-data-viz-sequencial-option-6-900: #2b2c2c; +@cont-color-data-viz-sequencial-option-6-1000: #181a1a; +@cont-color-data-viz-sequencial-option-7-100: #f6e0b3; +@cont-color-data-viz-sequencial-option-7-200: #eac661; +@cont-color-data-viz-sequencial-option-7-300: #d9aa00; +@cont-color-data-viz-sequencial-option-7-400: #bc9300; +@cont-color-data-viz-sequencial-option-7-500: #a07c00; +@cont-color-data-viz-sequencial-option-7-600: #846700; +@cont-color-data-viz-sequencial-option-7-700: #6a5100; +@cont-color-data-viz-sequencial-option-7-800: #503d00; +@cont-color-data-viz-sequencial-option-7-900: #382a00; +@cont-color-data-viz-sequencial-option-7-1000: #221800; +@cont-color-data-viz-sequencial-option-8-100: #c9ead6; +@cont-color-data-viz-sequencial-option-8-200: #92d7b5; +@cont-color-data-viz-sequencial-option-8-300: #10c88e; +@cont-color-data-viz-sequencial-option-8-400: #00ae7a; +@cont-color-data-viz-sequencial-option-8-500: #009367; +@cont-color-data-viz-sequencial-option-8-600: #007a54; +@cont-color-data-viz-sequencial-option-8-700: #006142; +@cont-color-data-viz-sequencial-option-8-800: #004a31; +@cont-color-data-viz-sequencial-option-8-900: #003321; +@cont-color-data-viz-sequencial-option-8-1000: #001f12; +@cont-color-data-viz-status-bg-negative-base: #d71c0f; +@cont-color-data-viz-status-bg-negative-bold: #9c0300; +@cont-color-data-viz-status-bg-negative-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-warning-base: #ffbe42; +@cont-color-data-viz-status-bg-warning-bold: #906505; +@cont-color-data-viz-status-bg-warning-subtle: #ffdeab; +@cont-color-data-viz-status-bg-positive-base: #177d44; +@cont-color-data-viz-status-bg-positive-bold: #00582b; +@cont-color-data-viz-status-bg-positive-subtle: #6bc987; +@cont-color-data-viz-status-bg-info-base: #08759d; +@cont-color-data-viz-status-bg-info-bold: #00516f; +@cont-color-data-viz-status-bg-info-subtle: #7abfe5; +@cont-color-data-viz-status-bg-neutral-base: #646e7b; +@cont-color-data-viz-status-bg-neutral-bold: #424c58; +@cont-color-data-viz-status-bg-neutral-subtle: #adb7c5; +@cont-color-data-viz-status-bg-buy-base: #177d44; +@cont-color-data-viz-status-bg-buy-bold: #00582b; +@cont-color-data-viz-status-bg-buy-subtle: #6bc987; +@cont-color-data-viz-status-bg-sell-base: #d71c0f; +@cont-color-data-viz-status-bg-sell-bold: #9c0300; +@cont-color-data-viz-status-bg-sell-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-category-1-base: #1935ef; +@cont-color-data-viz-status-bg-category-1-bold: #001490; +@cont-color-data-viz-status-bg-category-1-subtle: #dfe0ff; +@cont-color-data-viz-status-bg-category-2-base: #693da4; +@cont-color-data-viz-status-bg-category-2-bold: #3e0679; +@cont-color-data-viz-status-bg-category-2-subtle: #eddcff; +@cont-color-data-viz-status-bg-category-3-base: #005f61; +@cont-color-data-viz-status-bg-category-3-bold: #003233; +@cont-color-data-viz-status-bg-category-3-subtle: #c4e9ea; +@cont-color-data-viz-status-bg-category-4-base: #aa0043; +@cont-color-data-viz-status-bg-category-4-bold: #5e0022; +@cont-color-data-viz-status-bg-category-4-subtle: #ffd9de; +@cont-color-data-viz-status-bg-category-5-base: #9c2e00; +@cont-color-data-viz-status-bg-category-5-bold: #561500; +@cont-color-data-viz-status-bg-category-5-subtle: #ffd9de; +@cont-color-data-viz-status-bg-category-6-base: #545555; +@cont-color-data-viz-status-bg-category-6-bold: #2b2c2c; +@cont-color-data-viz-status-bg-category-6-subtle: #e3e2e2; +@cont-color-data-viz-status-bg-category-7-base: #6a5100; +@cont-color-data-viz-status-bg-category-7-bold: #382a00; +@cont-color-data-viz-status-bg-category-7-subtle: #f6e0b3; +@cont-color-data-viz-status-bg-category-8-base: #006142; +@cont-color-data-viz-status-bg-category-8-bold: #003321; +@cont-color-data-viz-status-bg-category-8-subtle: #c9ead6; +@cont-color-data-viz-status-fg-neutral-base: #505b67; +@cont-color-data-viz-status-fg-on-neutral-base: #ffffff; +@cont-color-data-viz-status-fg-on-neutral-minimal: #505b67; +@cont-color-data-viz-status-fg-negative-base: #b70300; +@cont-color-data-viz-status-fg-on-negative-base: #ffffff; +@cont-color-data-viz-status-fg-on-negative-minimal: #b70300; +@cont-color-data-viz-status-fg-warning-base: #775300; +@cont-color-data-viz-status-fg-on-warning-base: #141e29; +@cont-color-data-viz-status-fg-on-warning-minimal: #775300; +@cont-color-data-viz-status-fg-positive-base: #006835; +@cont-color-data-viz-status-fg-on-positive-base: #ffffff; +@cont-color-data-viz-status-fg-on-positive-minimal: #006835; +@cont-color-data-viz-status-fg-info-base: #006083; +@cont-color-data-viz-status-fg-on-info-base: #ffffff; +@cont-color-data-viz-status-fg-on-info-minimal: #006083; +@cont-color-data-viz-status-fg-buy-base: #006835; +@cont-color-data-viz-status-fg-on-buy-base: #ffffff; +@cont-color-data-viz-status-fg-on-buy-minimal: #006835; +@cont-color-data-viz-status-fg-sell-base: #b70300; +@cont-color-data-viz-status-fg-on-sell-base: #ffffff; +@cont-color-data-viz-status-fg-on-sell-minimal: #b70300; +@cont-color-data-viz-status-fg-category-1-base: #0020c6; +@cont-color-data-viz-status-fg-on-category-1-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-1-minimal: #0020c6; +@cont-color-data-viz-status-fg-category-2-base: #53258d; +@cont-color-data-viz-status-fg-on-category-2-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-2-minimal: #53258d; +@cont-color-data-viz-status-fg-category-3-base: #004849; +@cont-color-data-viz-status-fg-on-category-3-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-3-minimal: #004849; +@cont-color-data-viz-status-fg-category-4-base: #830032; +@cont-color-data-viz-status-fg-on-category-4-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-4-minimal: #830032; +@cont-color-data-viz-status-fg-category-5-base: #782100; +@cont-color-data-viz-status-fg-on-category-5-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-5-minimal: #782100; +@cont-color-data-viz-status-fg-category-6-base: #3f4040; +@cont-color-data-viz-status-fg-on-category-6-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-6-minimal: #3f4040; +@cont-color-data-viz-status-fg-category-7-base: #503d00; +@cont-color-data-viz-status-fg-on-category-7-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-7-minimal: #503d00; +@cont-color-data-viz-status-fg-category-8-base: #004a31; +@cont-color-data-viz-status-fg-on-category-8-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-8-minimal: #004a31; +@cont-color-data-viz-status-border-neutral-base: #505b67; +@cont-color-data-viz-status-border-neutral-minimal: #f6f7f9; +@cont-color-data-viz-status-border-negative-base: #b70300; +@cont-color-data-viz-status-border-negative-minimal: #fff4f2; +@cont-color-data-viz-status-border-warning-base: #ffbe42; +@cont-color-data-viz-status-border-warning-minimal: #fff5ea; +@cont-color-data-viz-status-border-positive-base: #006835; +@cont-color-data-viz-status-border-positive-minimal: #e9fbe9; +@cont-color-data-viz-status-border-info-base: #006083; +@cont-color-data-viz-status-border-info-minimal: #eff8ff; +@cont-color-data-viz-status-border-buy-base: #006835; +@cont-color-data-viz-status-border-buy-minimal: #e9fbe9; +@cont-color-data-viz-status-border-sell-base: #b70300; +@cont-color-data-viz-status-border-sell-minimal: #fff4f2; +@cont-color-data-viz-status-border-category-1-base: #1935ef; +@cont-color-data-viz-status-border-category-1-minimal: #dfe0ff; +@cont-color-data-viz-status-border-category-2-base: #693da4; +@cont-color-data-viz-status-border-category-2-minimal: #eddcff; +@cont-color-data-viz-status-border-category-3-base: #005f61; +@cont-color-data-viz-status-border-category-3-minimal: #c4e9ea; +@cont-color-data-viz-status-border-category-4-base: #aa0043; +@cont-color-data-viz-status-border-category-4-minimal: #ffd9de; +@cont-color-data-viz-status-border-category-5-base: #9c2e00; +@cont-color-data-viz-status-border-category-5-minimal: #ffdbd0; +@cont-color-data-viz-status-border-category-6-base: #545555; +@cont-color-data-viz-status-border-category-6-minimal: #e3e2e2; +@cont-color-data-viz-status-border-category-7-base: #6a5100; +@cont-color-data-viz-status-border-category-7-minimal: #f6e0b3; +@cont-color-data-viz-status-border-category-8-base: #006142; +@cont-color-data-viz-status-border-category-8-minimal: #c9ead6; +@cont-color-control-bg-minimal: #f6f7f9; +@cont-color-control-bg-subtle: #eceef4; +@cont-color-control-bg-base: #141e29; +@cont-color-control-bg-moderate: #424c58; +@cont-color-control-bg-bold: #505b67; +@cont-color-control-border-minimal: #c0cadb; +@cont-color-control-border-subtle: #848f9c; +@cont-color-control-border-base: #141e29; +@cont-color-control-border-moderate: #424c58; +@cont-color-control-border-bold: #505b67; +@cont-color-control-fg-on-minimal: #505b67; +@cont-color-control-fg-on-subtle: #141e29; +@cont-color-control-fg-on-base: #ffffff; +@cont-color-control-fg-on-moderate: #ffffff; +@cont-color-control-fg-on-bold: #ffffff; +@cont-color-field-bg-on-canvas-base: #ffffff; +@cont-color-field-bg-on-layer-1-base: #f6f7f9; +@cont-color-field-bg-on-layer-2-base: #ffffff; +@cont-color-field-bg-on-layer-3-base: #f6f7f9; +@cont-color-field-bg-on-layer-4-base: #f6f7f9; +@cont-color-field-border-on-canvas-bold: #003f60; +@cont-color-field-border-on-canvas-moderate: #848f9c; +@cont-color-field-border-on-canvas-subtle: #848f9c; +@cont-color-field-border-on-layer-1-bold: #003f60; +@cont-color-field-border-on-layer-1-moderate: #848f9c; +@cont-color-field-border-on-layer-1-subtle: #848f9c; +@cont-color-field-border-on-layer-2-bold: #003f60; +@cont-color-field-border-on-layer-2-moderate: #848f9c; +@cont-color-field-border-on-layer-2-subtle: #848f9c; +@cont-color-field-border-on-layer-3-bold: #003f60; +@cont-color-field-border-on-layer-3-moderate: #848f9c; +@cont-color-field-border-on-layer-3-subtle: #848f9c; +@cont-color-field-border-on-layer-4-bold: #003f60; +@cont-color-field-border-on-layer-4-moderate: #848f9c; +@cont-color-field-border-on-layer-4-subtle: #848f9c; +@cont-color-field-fg-on-canvas-bold: #141e29; +@cont-color-field-fg-on-canvas-moderate: #323c48; +@cont-color-field-fg-on-canvas-subtle: #505b67; +@cont-color-field-fg-on-layer-1-bold: #141e29; +@cont-color-field-fg-on-layer-1-moderate: #323c48; +@cont-color-field-fg-on-layer-1-subtle: #505b67; +@cont-color-field-fg-on-layer-2-bold: #141e29; +@cont-color-field-fg-on-layer-2-moderate: #323c48; +@cont-color-field-fg-on-layer-2-subtle: #505b67; +@cont-color-field-fg-on-layer-3-bold: #141e29; +@cont-color-field-fg-on-layer-3-moderate: #323c48; +@cont-color-field-fg-on-layer-3-subtle: #505b67; +@cont-color-field-fg-on-layer-4-bold: #141e29; +@cont-color-field-fg-on-layer-4-moderate: #323c48; +@cont-color-field-fg-on-layer-4-subtle: #505b67; +@cont-color-menu-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-canvas-subtle: #ffffff; +@cont-color-menu-bg-on-canvas-moderate: #dee2eb; +@cont-color-menu-bg-on-canvas-bold: #848f9c; +@cont-color-menu-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-1-subtle: #f6f7f9; +@cont-color-menu-bg-on-layer-1-moderate: #eceef4; +@cont-color-menu-bg-on-layer-1-bold: #848f9c; +@cont-color-menu-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-2-subtle: #ffffff; +@cont-color-menu-bg-on-layer-2-moderate: #dee2eb; +@cont-color-menu-bg-on-layer-2-bold: #848f9c; +@cont-color-menu-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-3-subtle: #f6f7f9; +@cont-color-menu-bg-on-layer-3-moderate: #eceef4; +@cont-color-menu-bg-on-layer-3-bold: #848f9c; +@cont-color-menu-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-4-subtle: #f6f7f9; +@cont-color-menu-bg-on-layer-4-moderate: #eceef4; +@cont-color-menu-bg-on-layer-4-bold: #848f9c; +@cont-color-menu-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-canvas-moderate: #dee2eb; +@cont-color-menu-border-on-canvas-bold: #003f60; +@cont-color-menu-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-1-moderate: #eceef4; +@cont-color-menu-border-on-layer-1-bold: #003f60; +@cont-color-menu-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-2-moderate: #dee2eb; +@cont-color-menu-border-on-layer-2-bold: #003f60; +@cont-color-menu-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-3-moderate: #eceef4; +@cont-color-menu-border-on-layer-3-bold: #003f60; +@cont-color-menu-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-4-moderate: #eceef4; +@cont-color-menu-border-on-layer-4-bold: #003f60; +@cont-color-menu-fg-on-minimal: #141e29; +@cont-color-menu-fg-on-subtle: #141e29; +@cont-color-menu-fg-on-moderate: #141e29; +@cont-color-menu-fg-on-bold: #141e29; +@cont-color-navigation-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-canvas-subtle: #ffffff; +@cont-color-navigation-bg-on-canvas-moderate: #dee2eb; +@cont-color-navigation-bg-on-canvas-bold: #848f9c; +@cont-color-navigation-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-1-subtle: #f6f7f9; +@cont-color-navigation-bg-on-layer-1-moderate: #eceef4; +@cont-color-navigation-bg-on-layer-1-bold: #848f9c; +@cont-color-navigation-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-2-subtle: #ffffff; +@cont-color-navigation-bg-on-layer-2-moderate: #dee2eb; +@cont-color-navigation-bg-on-layer-2-bold: #848f9c; +@cont-color-navigation-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-3-subtle: #f6f7f9; +@cont-color-navigation-bg-on-layer-3-moderate: #eceef4; +@cont-color-navigation-bg-on-layer-3-bold: #848f9c; +@cont-color-navigation-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-4-subtle: #f6f7f9; +@cont-color-navigation-bg-on-layer-4-moderate: #eceef4; +@cont-color-navigation-bg-on-layer-4-bold: #848f9c; +@cont-color-navigation-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-canvas-moderate: #dee2eb; +@cont-color-navigation-border-on-canvas-bold: #003f60; +@cont-color-navigation-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-1-moderate: #eceef4; +@cont-color-navigation-border-on-layer-1-bold: #003f60; +@cont-color-navigation-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-2-moderate: #dee2eb; +@cont-color-navigation-border-on-layer-2-bold: #003f60; +@cont-color-navigation-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-3-moderate: #eceef4; +@cont-color-navigation-border-on-layer-3-bold: #003f60; +@cont-color-navigation-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-4-moderate: #eceef4; +@cont-color-navigation-border-on-layer-4-bold: #003f60; +@cont-color-navigation-fg-on-minimal: #141e29; +@cont-color-navigation-fg-on-subtle: #141e29; +@cont-color-navigation-fg-on-moderate: #141e29; +@cont-color-navigation-fg-on-bold: #141e29; +@cont-color-navigation-fg-description-on-minimal: #323c48; +@cont-color-navigation-fg-description-on-subtle: #323c48; +@cont-color-navigation-fg-description-on-moderate: #323c48; +@cont-color-navigation-fg-description-on-bold: #323c48; +@cont-typography-common-display-100: 500 96px/1.125 'Proxima Vara'; +@cont-typography-common-display-200: 500 128px/1.125 'Proxima Vara'; +@cont-typography-common-display-300: 500 160px/1.125 'Proxima Vara'; +@cont-typography-common-overline-100: 420 11px/1.25 'Proxima Vara'; +@cont-typography-common-overline-200: 420 12px/1.25 'Proxima Vara'; +@cont-typography-common-overline-300: 420 14px/1.25 'Proxima Vara'; +@cont-typography-common-heading-100: 500 28px/1.125 'Proxima Vara'; +@cont-typography-common-heading-200: 500 32px/1.125 'Proxima Vara'; +@cont-typography-common-heading-300: 500 40px/1.125 'Proxima Vara'; +@cont-typography-common-heading-400: 500 48px/1.125 'Proxima Vara'; +@cont-typography-common-heading-500: 500 56px/1.125 'Proxima Vara'; +@cont-typography-common-heading-600: 500 64px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-100: 420 20px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-200: 420 24px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-300: 420 28px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-400: 420 32px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-500: 420 40px/1.125 'Proxima Vara'; +@cont-typography-common-sub-heading-600: 420 48px/1.125 'Proxima Vara'; +@cont-typography-common-body-100-base: 340 12px/1.5 'Proxima Vara'; +@cont-typography-common-body-100-bold: 500 12px/1.5 'Proxima Vara'; +@cont-typography-common-body-100-link: 500 12px/1.5 'Proxima Vara'; +@cont-typography-common-body-200-base: 340 14px/1.5 'Proxima Vara'; +@cont-typography-common-body-200-bold: 500 14px/1.5 'Proxima Vara'; +@cont-typography-common-body-200-link: 500 14px/1.5 'Proxima Vara'; +@cont-typography-common-body-300-base: 340 16px/1.5 'Proxima Vara'; +@cont-typography-common-body-300-bold: 500 16px/1.5 'Proxima Vara'; +@cont-typography-common-body-300-link: 500 16px/1.5 'Proxima Vara'; +@cont-typography-common-label-100-subtle: 340 12px/1.125 'Proxima Vara'; +@cont-typography-common-label-100-base: 420 12px/1.125 'Proxima Vara'; +@cont-typography-common-label-100-bold: 500 12px/1.125 'Proxima Vara'; +@cont-typography-common-label-100-link: 340 12px/1.125 'Proxima Vara'; +@cont-typography-common-label-200-subtle: 340 14px/1.125 'Proxima Vara'; +@cont-typography-common-label-200-base: 420 14px/1.125 'Proxima Vara'; +@cont-typography-common-label-200-bold: 500 14px/1.125 'Proxima Vara'; +@cont-typography-common-label-200-link: 340 14px/1.125 'Proxima Vara'; +@cont-typography-common-label-300-subtle: 340 16px/1.125 'Proxima Vara'; +@cont-typography-common-label-300-base: 420 16px/1.125 'Proxima Vara'; +@cont-typography-common-label-300-bold: 500 16px/1.125 'Proxima Vara'; +@cont-typography-common-label-300-link: 340 16px/1.125 'Proxima Vara'; +@cont-typography-common-label-050-subtle: 340 10px/1.125 'Proxima Vara'; +@cont-typography-common-label-050-base: 420 10px/1.125 'Proxima Vara'; +@cont-typography-common-label-050-bold: 500 10px/1.125 'Proxima Vara'; +@cont-typography-common-caption-100: 420 11px/1.125 'Proxima Vara'; +@cont-typography-common-caption-200: 420 12px/1.125 'Proxima Vara'; +@cont-typography-common-caption-300: 420 14px/1.125 'Proxima Vara'; +@cont-typography-common-icon-base-xs: 340 14px LSEG-UI-icons; +@cont-typography-common-icon-base-sm: 340 16px LSEG-UI-icons; +@cont-typography-common-icon-base-md: 340 20px LSEG-UI-icons; +@cont-typography-common-icon-base-lg: 340 24px LSEG-UI-icons; +@cont-typography-common-icon-emphasized-xs: 340 14px LSEG-UI-icons-filled; +@cont-typography-common-icon-emphasized-sm: 340 16px LSEG-UI-icons-filled; +@cont-typography-common-icon-emphasized-md: 340 20px LSEG-UI-icons-filled; +@cont-typography-common-icon-emphasized-lg: 340 24px LSEG-UI-icons-filled; +@cont-typography-action-sm: 420 12px/1.125 'Proxima Vara'; +@cont-typography-action-md: 420 14px/1.125 'Proxima Vara'; +@cont-typography-action-lg: 420 16px/1.125 'Proxima Vara'; +@cont-typography-status-subtle-sm: 340 12px/1.125 'Proxima Vara'; +@cont-typography-status-subtle-md: 340 14px/1.125 'Proxima Vara'; +@cont-typography-status-subtle-lg: 340 16px/1.125 'Proxima Vara'; +@cont-typography-status-base-sm: 420 12px/1.125 'Proxima Vara'; +@cont-typography-status-base-md: 420 14px/1.125 'Proxima Vara'; +@cont-typography-status-base-lg: 420 16px/1.125 'Proxima Vara'; +@cont-typography-status-bold-sm: 500 12px/1.125 'Proxima Vara'; +@cont-typography-status-bold-md: 500 14px/1.125 'Proxima Vara'; +@cont-typography-status-bold-lg: 500 16px/1.125 'Proxima Vara'; +@cont-typography-field-sm: 340 12px/1.5 'Proxima Vara'; +@cont-typography-field-md: 340 14px/1.5 'Proxima Vara'; +@cont-typography-field-lg: 340 16px/1.5 'Proxima Vara'; +@cont-typography-menu-subtle-sm: 340 12px/1.125 'Proxima Vara'; +@cont-typography-menu-subtle-md: 340 14px/1.125 'Proxima Vara'; +@cont-typography-menu-subtle-lg: 340 16px/1.125 'Proxima Vara'; +@cont-typography-menu-base-sm: 420 12px/1.125 'Proxima Vara'; +@cont-typography-menu-base-md: 420 14px/1.125 'Proxima Vara'; +@cont-typography-menu-base-lg: 420 16px/1.125 'Proxima Vara'; +@cont-typography-menu-bold-sm: 500 12px/1.125 'Proxima Vara'; +@cont-typography-menu-bold-md: 500 14px/1.125 'Proxima Vara'; +@cont-typography-menu-bold-lg: 500 16px/1.125 'Proxima Vara'; +@cont-typography-navigation-base-sm: 420 12px/1.125 'Proxima Vara'; +@cont-typography-navigation-base-md: 420 14px/1.125 'Proxima Vara'; +@cont-typography-navigation-base-lg: 420 16px/1.125 'Proxima Vara'; +@cont-typography-navigation-bold-sm: 500 12px/1.125 'Proxima Vara'; +@cont-typography-navigation-bold-md: 500 14px/1.125 'Proxima Vara'; +@cont-typography-navigation-bold-lg: 500 16px/1.125 'Proxima Vara'; +@cont-typography-navigation-subtle-sm: 340 12px/1.125 'Proxima Vara'; +@cont-typography-navigation-subtle-md: 340 14px/1.125 'Proxima Vara'; +@cont-typography-navigation-subtle-lg: 340 16px/1.125 'Proxima Vara'; +@cont-typography-badge-sm: 420 11px/1.25 'Proxima Vara'; +@cont-typography-badge-md: 420 12px/1.25 'Proxima Vara'; +@cont-typography-badge-lg: 420 14px/1.25 'Proxima Vara'; +@cont-typography-control-subtle-sm: 340 12px/1.125 'Proxima Vara'; +@cont-typography-control-subtle-md: 340 14px/1.125 'Proxima Vara'; +@cont-typography-control-subtle-lg: 340 16px/1.125 'Proxima Vara'; +@cont-typography-control-base-sm: 420 12px/1.125 'Proxima Vara'; +@cont-typography-control-base-md: 420 14px/1.125 'Proxima Vara'; +@cont-typography-control-base-lg: 420 16px/1.125 'Proxima Vara'; +@cont-typography-control-bold-sm: 500 12px/1.125 'Proxima Vara'; +@cont-typography-control-bold-md: 500 14px/1.125 'Proxima Vara'; +@cont-typography-control-bold-lg: 500 16px/1.125 'Proxima Vara'; +@cont-spacing-common-padding-inset-100: 4px; +@cont-spacing-common-padding-inset-200: 8px; +@cont-spacing-common-padding-inset-300: 12px; +@cont-spacing-common-padding-inset-400: 16px; +@cont-spacing-common-padding-inset-500: 20px; +@cont-spacing-common-padding-inset-600: 24px; +@cont-spacing-common-padding-inset-700: 32px; +@cont-spacing-common-padding-inset-800: 40px; +@cont-spacing-common-padding-inset-900: 48px; +@cont-spacing-common-padding-inset-1000: 56px; +@cont-spacing-common-padding-inset-1100: 64px; +@cont-spacing-common-padding-inset-1200: 72px; +@cont-spacing-common-padding-inset-1300: 80px; +@cont-spacing-common-padding-inset-1400: 96px; +@cont-spacing-common-padding-inset-1500: 128px; +@cont-spacing-common-padding-inset-1600: 160px; +@cont-spacing-common-padding-inset-1700: 192px; +@cont-spacing-common-padding-inset-000: 0; +@cont-spacing-common-padding-squish-100: 0 4px 0; +@cont-spacing-common-padding-squish-200: 4px 8px 4px; +@cont-spacing-common-padding-squish-300: 8px 12px 8px; +@cont-spacing-common-padding-squish-400: 12px 16px 12px; +@cont-spacing-common-padding-squish-500: 16px 20px 16px; +@cont-spacing-common-padding-squish-600: 20px 24px 20px; +@cont-spacing-common-padding-squish-700: 24px 32px 24px; +@cont-spacing-common-padding-squish-800: 32px 40px 32px; +@cont-spacing-common-padding-squish-900: 40px 48px 40px; +@cont-spacing-common-padding-squish-1000: 48px 56px 48px; +@cont-spacing-common-padding-squish-1100: 56px 64px 56px; +@cont-spacing-common-padding-squish-1200: 64px 72px 64px; +@cont-spacing-common-padding-squish-1300: 72px 80px 72px; +@cont-spacing-common-padding-squish-1400: 80px 96px 80px; +@cont-spacing-common-padding-squish-1500: 96px 128px 96px; +@cont-spacing-common-padding-squish-1600: 128px 160px 128px; +@cont-spacing-common-padding-squish-1700: 160px 192px 160px; +@cont-spacing-common-padding-squish-000: 0; +@cont-spacing-common-padding-stretch-100: 4px 0 4px; +@cont-spacing-common-padding-stretch-200: 8px 4px 8px; +@cont-spacing-common-padding-stretch-300: 12px 8px 12px; +@cont-spacing-common-padding-stretch-400: 16px 12px 16px; +@cont-spacing-common-padding-stretch-500: 24px 16px 24px; +@cont-spacing-common-padding-stretch-600: 32px 24px 32px; +@cont-spacing-common-padding-stretch-700: 40px 32px 40px; +@cont-spacing-common-padding-stretch-800: 48px 40px 48px; +@cont-spacing-common-padding-stretch-900: 56px 48px 56px; +@cont-spacing-common-padding-stretch-1000: 64px 56px 64px; +@cont-spacing-common-padding-stretch-1100: 72px 64px 72px; +@cont-spacing-common-padding-stretch-1200: 80px 72px 80px; +@cont-spacing-common-padding-stretch-1300: 96px 80px 96px; +@cont-spacing-common-padding-stretch-1400: 128px 96px 128px; +@cont-spacing-common-padding-stretch-1500: 160px 128px 160px; +@cont-spacing-common-padding-stretch-1600: 192px 160px 192px; +@cont-spacing-common-padding-stretch-000: 0; +@cont-spacing-common-padding-inline-100: 0 4px 0 4px; +@cont-spacing-common-padding-inline-200: 0 8px 0 8px; +@cont-spacing-common-padding-inline-300: 0 12px 0 12px; +@cont-spacing-common-padding-inline-400: 0 16px 0 16px; +@cont-spacing-common-padding-inline-500: 0 20px 0 20px; +@cont-spacing-common-padding-inline-600: 0 24px 0 24px; +@cont-spacing-common-padding-inline-700: 0 32px 0 32px; +@cont-spacing-common-padding-inline-800: 0 40px 0 40px; +@cont-spacing-common-padding-inline-900: 0 48px 0 48px; +@cont-spacing-common-padding-inline-1000: 0 56px 0 56px; +@cont-spacing-common-padding-inline-1100: 0 64px 0 64px; +@cont-spacing-common-padding-inline-1200: 0 72px 0 72px; +@cont-spacing-common-padding-inline-1300: 0 80px 0 80px; +@cont-spacing-common-padding-inline-1400: 0 96px 0 96px; +@cont-spacing-common-padding-inline-1500: 0 128px 0 128px; +@cont-spacing-common-padding-inline-1600: 0 160px 0 160px; +@cont-spacing-common-padding-inline-1700: 0 192px 0 192px; +@cont-spacing-common-padding-inline-000: 0; +@cont-spacing-common-padding-block-100: 4px 0 4px 0; +@cont-spacing-common-padding-block-200: 8px 0 8px 0; +@cont-spacing-common-padding-block-300: 12px 0 12px 0; +@cont-spacing-common-padding-block-400: 16px 0 16px 0; +@cont-spacing-common-padding-block-500: 20px 0 20px 0; +@cont-spacing-common-padding-block-600: 24px 0 24px 0; +@cont-spacing-common-padding-block-700: 32px 0 32px 0; +@cont-spacing-common-padding-block-800: 40px 0 40px 0; +@cont-spacing-common-padding-block-900: 48px 0 48px 0; +@cont-spacing-common-padding-block-1000: 56px 0 56px 0; +@cont-spacing-common-padding-block-1100: 64px 0 64px 0; +@cont-spacing-common-padding-block-1200: 72px 0 72px 0; +@cont-spacing-common-padding-block-1300: 80px 0 80px 0; +@cont-spacing-common-padding-block-1400: 96px 0 96px 0; +@cont-spacing-common-padding-block-1500: 128px 0 128px 0; +@cont-spacing-common-padding-block-1600: 160px 0 160px 0; +@cont-spacing-common-padding-block-1700: 192px 0 192px 0; +@cont-spacing-common-padding-block-000: 0; +@cont-spacing-common-gap-100: 4px; // 100 +@cont-spacing-common-gap-200: 8px; // 200 +@cont-spacing-common-gap-300: 12px; // 300 +@cont-spacing-common-gap-400: 16px; // 400 +@cont-spacing-common-gap-500: 20px; // 500 +@cont-spacing-common-gap-600: 24px; // 600 +@cont-spacing-common-gap-700: 32px; // 700 +@cont-spacing-common-gap-800: 40px; // 800 +@cont-spacing-common-gap-900: 48px; // 900 +@cont-spacing-common-gap-1000: 56px; // 1000 +@cont-spacing-common-gap-1100: 64px; // 1100 +@cont-spacing-common-gap-1200: 72px; // 1200 +@cont-spacing-common-gap-1300: 80px; // 1300 +@cont-spacing-common-gap-1400: 96px; // 1400 +@cont-spacing-common-gap-1500: 128px; // 1500 +@cont-spacing-common-gap-1600: 160px; // 1600 +@cont-spacing-common-gap-1700: 192px; // 1700 +@cont-spacing-common-gap-050: 2px; // 050 +@cont-spacing-common-gap-000: 0; // 000 +@cont-spacing-action-padding-xs: 0 8px 0 8px; +@cont-spacing-action-padding-sm: 0 8px 0 8px; +@cont-spacing-action-padding-md: 4px 8px 4px; +@cont-spacing-action-padding-lg: 8px 12px 8px; +@cont-spacing-action-gap-xs: 4px; +@cont-spacing-action-gap-sm: 4px; +@cont-spacing-action-gap-md: 4px; +@cont-spacing-action-gap-lg: 8px; +@cont-spacing-control-padding-sm: 0; +@cont-spacing-control-padding-md: 4px; +@cont-spacing-control-padding-lg: 8px; +@cont-spacing-control-gap-sm: 8px; +@cont-spacing-control-gap-md: 8px; +@cont-spacing-control-gap-lg: 8px; +@cont-spacing-field-padding-sm: 0 8px 0 8px; +@cont-spacing-field-padding-md: 4px 8px 4px; +@cont-spacing-field-padding-lg: 8px 12px 8px; +@cont-spacing-field-gap-sm: 4px; +@cont-spacing-field-gap-md: 4px; +@cont-spacing-field-gap-lg: 8px; +@cont-spacing-field-gap-xs: 0; +@cont-spacing-menu-padding-sm: 0 8px 0 8px; +@cont-spacing-menu-padding-md: 0 12px 0 12px; +@cont-spacing-menu-padding-lg: 0 12px 0 12px; +@cont-spacing-menu-gap-sm: 4px; +@cont-spacing-menu-gap-md: 8px; +@cont-spacing-menu-gap-lg: 8px; +@cont-spacing-navigation-padding-sm: 0 8px 0 8px; +@cont-spacing-navigation-padding-md: 0 12px 0 12px; +@cont-spacing-navigation-padding-lg: 0 12px 0 12px; +@cont-spacing-navigation-gap-sm: 4px; +@cont-spacing-navigation-gap-md: 8px; +@cont-spacing-navigation-gap-lg: 8px; +@cont-spacing-status-padding-sm: 4px; +@cont-spacing-status-padding-md: 8px; +@cont-spacing-status-padding-lg: 12px; +@cont-spacing-status-gap-sm: 4px; +@cont-spacing-status-gap-md: 4px; +@cont-spacing-status-gap-lg: 8px; +@cont-spacing-popover-padding-sm: 4px; +@cont-spacing-popover-padding-md: 8px; +@cont-spacing-popover-padding-lg: 12px; +@cont-sizing-common-100: 4px; +@cont-sizing-common-200: 8px; +@cont-sizing-common-300: 12px; +@cont-sizing-common-400: 16px; +@cont-sizing-common-500: 20px; +@cont-sizing-common-600: 24px; +@cont-sizing-common-700: 32px; +@cont-sizing-common-800: 40px; +@cont-sizing-common-900: 48px; +@cont-sizing-common-1000: 56px; +@cont-sizing-common-1100: 64px; +@cont-sizing-common-1200: 72px; +@cont-sizing-common-1300: 80px; +@cont-sizing-common-1400: 96px; +@cont-sizing-common-1500: 128px; +@cont-sizing-common-1600: 160px; +@cont-sizing-common-1700: 192px; +@cont-sizing-common-1800: 256px; +@cont-sizing-common-050: 2px; +@cont-sizing-common-000: 0; +@cont-sizing-action-2xs: 16px; +@cont-sizing-action-xs: 20px; +@cont-sizing-action-sm: 24px; +@cont-sizing-action-md: 32px; +@cont-sizing-action-lg: 48px; +@cont-sizing-control-2xs: 8px; +@cont-sizing-control-xs: 12px; +@cont-sizing-control-sm: 16px; +@cont-sizing-control-md: 20px; +@cont-sizing-control-lg: 24px; +@cont-sizing-control-xl: 32px; +@cont-sizing-control-2xl: 40px; +@cont-sizing-control-3xl: 48px; +@cont-sizing-field-sm: 24px; +@cont-sizing-field-md: 32px; +@cont-sizing-field-lg: 48px; +@cont-sizing-menu-sm: 24px; +@cont-sizing-menu-md: 32px; +@cont-sizing-menu-lg: 48px; +@cont-sizing-navigation-sm: 24px; +@cont-sizing-navigation-md: 32px; +@cont-sizing-navigation-lg: 48px; +@cont-sizing-status-4xs: 8px; +@cont-sizing-status-3xs: 12px; +@cont-sizing-status-2xs: 16px; +@cont-sizing-status-xs: 20px; +@cont-sizing-status-sm: 24px; +@cont-sizing-status-md: 32px; +@cont-sizing-status-lg: 48px; +@cont-sizing-popover-xs: 24px; +@cont-sizing-popover-sm: 32px; +@cont-sizing-popover-md: 40px; +@cont-sizing-popover-lg: 64px; +@cont-sizing-popover-xl: 96px; +@cont-sizing-popover-2xl: 128px; +@cont-sizing-component-2xs: 16px; +@cont-sizing-component-xs: 20px; +@cont-sizing-component-sm: 24px; +@cont-sizing-component-md: 32px; +@cont-sizing-component-lg: 48px; +@cont-sizing-icon-xs: 14px; +@cont-sizing-icon-sm: 16px; +@cont-sizing-icon-md: 20px; +@cont-sizing-icon-lg: 24px; +@cont-opacity-common-disabled: 0.04; +@cont-opacity-common-loading: 0.24; +@cont-opacity-common-overlay: 0.24; +@cont-opacity-common-full: 1; +@cont-opacity-common-bolder: 0.8; +@cont-opacity-common-bold: 0.56; +@cont-opacity-common-moderate: 0.48; +@cont-opacity-common-subtle: 0.4; +@cont-opacity-common-subtler: 0.24; +@cont-opacity-common-minimal: 0.16; +@cont-opacity-common-muted: 0.08; +@cont-opacity-common-transparent: 0; +@cont-opacity-grid-bold: 0.08; +@cont-opacity-grid-moderate: 0.24; +@cont-opacity-grid-subtle: 0.4; +@cont-opacity-modal: 0.24; +@cont-elevation-common-focus-outset-base: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #2336fd; +@cont-elevation-common-focus-outset-inverse: 0px 0px 0px 2px #141e29, 0px 0px 0px 4px #ffffff; +@cont-elevation-common-focus-inset-base: inset 0px 0px 0px 2px #ffffff, inset 0px 0px 0px 4px #2336fd; +@cont-elevation-common-focus-inset-inverse: inset 0px 0px 0px 2px #141e29, inset 0px 0px 0px 4px #ffffff; +@cont-elevation-common-overlay-top: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 32px 48px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-overlay-bottom: 0px -1px 4px 0px rgba(20, 30, 41, 0.08), + 0px -32px 48px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-overlay-start: 1px 0px 4px 0px rgba(20, 30, 41, 0.08), + 32px 0px 48px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-overlay-end: -1px 0px 4px 0px rgba(20, 30, 41, 0.08), + -32px 0px 48px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-0: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-common-level-1: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 4px 8px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-2: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 8px 12px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-3: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-4: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 16px 24px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-5: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 24px 32px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-common-level-6: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 32px 48px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-action-base: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-action-bold: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-control-base: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-control-bold: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-field-base: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-field-bold: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-menu-base: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-menu-moderate: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-menu-bold: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-navigation-base: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-navigation-moderate: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-navigation-bold: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-status-base: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-status-bold: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 16px 24px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-popover-base: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-popover-bold: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 24px 32px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-modal-base: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 24px 32px 0px rgba(20, 30, 41, 0.04); +@cont-elevation-modal-bold: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 32px 48px 0px rgba(20, 30, 41, 0.04); +@cont-radius-common-xs: 2px; // xs +@cont-radius-common-sm: 4px; // sm +@cont-radius-common-md: 8px; // md +@cont-radius-common-lg: 12px; // lg +@cont-radius-common-xl: 16px; // xl +@cont-radius-common-2xl: 24px; // 2xl +@cont-radius-common-full: 10000px; // full +@cont-radius-common-none: 0; // none +@cont-radius-action: 4px; +@cont-radius-field: 4px; +@cont-radius-control: 2px; +@cont-radius-navigation: 4px; +@cont-radius-menu: 4px; +@cont-radius-status: 8px; +@cont-radius-popover: 4px; +@cont-radius-modal: 8px; +@cont-radius-panel: 8px; +@cont-border-width-common-none: 0px; // none +@cont-border-width-common-subtle: 1px; // subtle +@cont-border-width-common-moderate: 2px; // moderate +@cont-border-width-common-bold: 4px; // bold +@cont-border-width-action-base: 1px; +@cont-border-width-action-bold: 2px; +@cont-border-width-field-base: 1px; +@cont-border-width-field-bold: 2px; +@cont-border-width-control-base: 1px; +@cont-border-width-control-bold: 2px; +@cont-border-width-navigation-base: 1px; +@cont-border-width-navigation-bold: 2px; +@cont-border-width-menu-base: 1px; +@cont-border-width-menu-bold: 2px; +@cont-border-width-status-base: 1px; +@cont-border-width-status-bold: 2px; +@cont-border-width-popover-base: 1px; +@cont-border-width-popover-bold: 2px; +@cont-border-width-modal-base: 1px; +@cont-border-width-modal-bold: 2px; +@cont-border-width-panel-base: 1px; +@cont-border-width-panel-bold: 2px; +@cont-viewport-breakpoint-xs: 0px; // xs +@cont-viewport-breakpoint-sm: 768px; // sm +@cont-viewport-breakpoint-md: 1024px; // md +@cont-viewport-breakpoint-lg: 1280px; // lg +@cont-viewport-breakpoint-xl: 1440px; // xl +@cont-viewport-breakpoint-xxl: 1568px; // xxl +@cont-viewport-breakpoint-max: 1568px; // max +@cont-viewport-column-xs: 4; +@cont-viewport-column-sm: 4; +@cont-viewport-column-md: 8; +@cont-viewport-column-lg: 8; +@cont-viewport-column-xl: 16; +@cont-viewport-column-xxl: 16; +@cont-viewport-margin-xs: 16px; +@cont-viewport-margin-sm: 24px; +@cont-viewport-margin-md: 24px; +@cont-viewport-margin-lg: 24px; +@cont-viewport-margin-xl: 24px; +@cont-viewport-margin-xxl: 24px; +@cont-viewport-gutter-xs: 12px; +@cont-viewport-gutter-sm: 16px; +@cont-viewport-gutter-md: 16px; +@cont-viewport-gutter-lg: 16px; +@cont-viewport-gutter-xl: 16px; +@cont-viewport-gutter-xxl: 16px; diff --git a/packages/ds-theme/src/web-design-tokens/core.less b/packages/ds-theme/src/web-design-tokens/core.less new file mode 100644 index 0000000000..cc9155e1df --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/core.less @@ -0,0 +1,594 @@ +// Do not edit directly, this file was auto-generated. + +@core-color-role-surface: #29333e; // This colour is used for used for backgrounds, cards, and other large areas. It provides a base layer for content and UI elements. +@core-color-role-text-icon: #29333e; // This colour is used for common for text and icons. +@core-color-role-brand: #001eff; // This colour is used for representing the identity of the product or organisation. It's often associated with logos, headers, and other prominent elements. +@core-color-role-accent: #029be3; // This colour is used for specific UI elements, such as selection controls. +@core-color-role-primary: #001eff; // This colour is used for important UI elements like primary buttons. +@core-color-role-secondary: #29333e; // This colour is used for less critical UI elements, such as secondary buttons. It complements the primary colour. +@core-color-role-neutral: #29333e; // This colour is used for indicating a neutral sentiment. It's used for alerts, or other feedback. +@core-color-role-negative: #d91f11; // This colour is used for indicating errors or a negative sentiment. It's used for validation messages, alerts, or other critical feedback. +@core-color-role-warning: #ffcd2a; // This colour is used for indicating warnings. They're used for validation messages, alerts, or other non-critical feedback. +@core-color-role-positive: #309054; // This colour is used for indicating success or a positive sentiment. It's used for validation messages, alerts, or other feedback. +@core-color-role-info: #2a8ab5; // This colour is used for informative messages or tooltips. +@core-color-role-buy: #309054; // This colour is used for buy direction or intent. +@core-color-role-sell: #d91f11; // This colour is used for sell direction or intent. +@core-color-role-data-viz-1: #334bff; // This colour is used for used for backgrounds, cards, and other large areas. It provides a base layer for content and UI elements. +@core-color-role-data-viz-2: #9064cd; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-3: #00d0d4; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-4: #e91e63; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-5: #ff5000; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-6: #999999; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-7: #ffc800; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-role-data-viz-8: #00c389; // This colour is used for data visualisations, charts, or graphs. It represents a different data category. +@core-color-palette-surface-100: #f6f7f9; +@core-color-palette-surface-200: #eceef4; +@core-color-palette-surface-300: #dee2eb; +@core-color-palette-surface-400: #c0cadb; +@core-color-palette-surface-500: #adb7c5; +@core-color-palette-surface-600: #9ca7b4; +@core-color-palette-surface-700: #848f9c; +@core-color-palette-surface-800: #75808c; +@core-color-palette-surface-900: #646e7b; +@core-color-palette-surface-1000: #505b67; +@core-color-palette-surface-1100: #424c58; +@core-color-palette-surface-1200: #323c48; +@core-color-palette-surface-1300: #232d38; +@core-color-palette-surface-1400: #141e29; +@core-color-palette-surface-1500: #050f19; +@core-color-palette-text-icon-100: #f6f7f9; +@core-color-palette-text-icon-200: #eceef4; +@core-color-palette-text-icon-300: #dee2eb; +@core-color-palette-text-icon-400: #c0cadb; +@core-color-palette-text-icon-500: #adb7c5; +@core-color-palette-text-icon-600: #9ca7b4; +@core-color-palette-text-icon-700: #848f9c; +@core-color-palette-text-icon-800: #75808c; +@core-color-palette-text-icon-900: #646e7b; +@core-color-palette-text-icon-1000: #505b67; +@core-color-palette-text-icon-1100: #424c58; +@core-color-palette-text-icon-1200: #323c48; +@core-color-palette-text-icon-1300: #232d38; +@core-color-palette-text-icon-1400: #141e29; +@core-color-palette-text-icon-1500: #050f19; +@core-color-palette-brand-100: #f7f5ff; +@core-color-palette-brand-200: #ececff; +@core-color-palette-brand-300: #dee1ff; +@core-color-palette-brand-400: #bdc6ff; +@core-color-palette-brand-500: #a4b1ff; +@core-color-palette-brand-600: #8ea0ff; +@core-color-palette-brand-700: #6d84ff; +@core-color-palette-brand-800: #5572ff; +@core-color-palette-brand-900: #3459ff; +@core-color-palette-brand-1000: #2336fd; +@core-color-palette-brand-1100: #001cf0; +@core-color-palette-brand-1200: #0014c2; +@core-color-palette-brand-1300: #000d96; +@core-color-palette-brand-1400: #00076d; +@core-color-palette-brand-1500: #000342; +@core-color-palette-accent-100: #f1f7ff; +@core-color-palette-accent-200: #e1f0ff; +@core-color-palette-accent-300: #cbe6ff; +@core-color-palette-accent-400: #95cfff; +@core-color-palette-accent-500: #63beff; +@core-color-palette-accent-600: #35aef8; +@core-color-palette-accent-700: #0096dc; +@core-color-palette-accent-800: #0086c5; +@core-color-palette-accent-900: #0073aa; +@core-color-palette-accent-1000: #005f8d; +@core-color-palette-accent-1100: #005078; +@core-color-palette-accent-1200: #003f60; +@core-color-palette-accent-1300: #002f49; +@core-color-palette-accent-1400: #002033; +@core-color-palette-accent-1500: #00101c; +@core-color-palette-primary-100: #f7f5ff; +@core-color-palette-primary-200: #ececff; +@core-color-palette-primary-300: #dee1ff; +@core-color-palette-primary-400: #bdc6ff; +@core-color-palette-primary-500: #a4b1ff; +@core-color-palette-primary-600: #8ea0ff; +@core-color-palette-primary-700: #6d84ff; +@core-color-palette-primary-800: #5572ff; +@core-color-palette-primary-900: #3459ff; +@core-color-palette-primary-1000: #2336fd; +@core-color-palette-primary-1100: #001cf0; +@core-color-palette-primary-1200: #0014c2; +@core-color-palette-primary-1300: #000d96; +@core-color-palette-primary-1400: #00076d; +@core-color-palette-primary-1500: #000342; +@core-color-palette-secondary-100: #f6f7f9; +@core-color-palette-secondary-200: #eceef4; +@core-color-palette-secondary-300: #dee2eb; +@core-color-palette-secondary-400: #c0cadb; +@core-color-palette-secondary-500: #adb7c5; +@core-color-palette-secondary-600: #9ca7b4; +@core-color-palette-secondary-700: #848f9c; +@core-color-palette-secondary-800: #75808c; +@core-color-palette-secondary-900: #646e7b; +@core-color-palette-secondary-1000: #505b67; +@core-color-palette-secondary-1100: #424c58; +@core-color-palette-secondary-1200: #323c48; +@core-color-palette-secondary-1300: #232d38; +@core-color-palette-secondary-1400: #141e29; +@core-color-palette-secondary-1500: #050f19; +@core-color-palette-neutral-100: #f6f7f9; +@core-color-palette-neutral-200: #eceef4; +@core-color-palette-neutral-300: #dee2eb; +@core-color-palette-neutral-400: #c0cadb; +@core-color-palette-neutral-500: #adb7c5; +@core-color-palette-neutral-600: #9ca7b4; +@core-color-palette-neutral-700: #848f9c; +@core-color-palette-neutral-800: #75808c; +@core-color-palette-neutral-900: #646e7b; +@core-color-palette-neutral-1000: #505b67; +@core-color-palette-neutral-1100: #424c58; +@core-color-palette-neutral-1200: #323c48; +@core-color-palette-neutral-1300: #232d38; +@core-color-palette-neutral-1400: #141e29; +@core-color-palette-neutral-1500: #050f19; +@core-color-palette-negative-100: #fff4f2; +@core-color-palette-negative-200: #ffe9e5; +@core-color-palette-negative-300: #ffdad4; +@core-color-palette-negative-400: #ffb8ac; +@core-color-palette-negative-500: #ff9b8b; +@core-color-palette-negative-600: #ff7c68; +@core-color-palette-negative-700: #ff5540; +@core-color-palette-negative-800: #f13221; +@core-color-palette-negative-900: #d71c0f; +@core-color-palette-negative-1000: #b70300; +@core-color-palette-negative-1100: #9c0300; +@core-color-palette-negative-1200: #7d0200; +@core-color-palette-negative-1300: #600100; +@core-color-palette-negative-1400: #450100; +@core-color-palette-negative-1500: #270000; +@core-color-palette-warning-100: #fff5ea; +@core-color-palette-warning-200: #ffebd0; +@core-color-palette-warning-300: #ffdeab; +@core-color-palette-warning-400: #ffbe42; +@core-color-palette-warning-500: #efa900; +@core-color-palette-warning-600: #d99a05; +@core-color-palette-warning-700: #bb8400; +@core-color-palette-warning-800: #a77500; +@core-color-palette-warning-900: #906505; +@core-color-palette-warning-1000: #775300; +@core-color-palette-warning-1100: #654600; +@core-color-palette-warning-1200: #503700; +@core-color-palette-warning-1300: #3d2800; +@core-color-palette-warning-1400: #2a1b00; +@core-color-palette-warning-1500: #160c00; +@core-color-palette-positive-100: #e9fbe9; +@core-color-palette-positive-200: #cdf9d3; +@core-color-palette-positive-300: #b3f1bf; +@core-color-palette-positive-400: #7fde99; +@core-color-palette-positive-500: #6bc987; +@core-color-palette-positive-600: #58b675; +@core-color-palette-positive-700: #41a062; +@core-color-palette-positive-800: #309054; +@core-color-palette-positive-900: #177d44; +@core-color-palette-positive-1000: #006835; +@core-color-palette-positive-1100: #00582b; +@core-color-palette-positive-1200: #004521; +@core-color-palette-positive-1300: #003417; +@core-color-palette-positive-1400: #00230e; +@core-color-palette-positive-1500: #001205; +@core-color-palette-info-100: #eff8ff; +@core-color-palette-info-200: #ddf1ff; +@core-color-palette-info-300: #c4e7ff; +@core-color-palette-info-400: #97d1f3; +@core-color-palette-info-500: #7abfe5; +@core-color-palette-info-600: #58afdc; +@core-color-palette-info-700: #3b97c2; +@core-color-palette-info-800: #2687b2; +@core-color-palette-info-900: #08759d; +@core-color-palette-info-1000: #006083; +@core-color-palette-info-1100: #00516f; +@core-color-palette-info-1200: #004058; +@core-color-palette-info-1300: #003043; +@core-color-palette-info-1400: #00202f; +@core-color-palette-info-1500: #001019; +@core-color-palette-buy-100: #e9fbe9; +@core-color-palette-buy-200: #cdf9d3; +@core-color-palette-buy-300: #b3f1bf; +@core-color-palette-buy-400: #7fde99; +@core-color-palette-buy-500: #6bc987; +@core-color-palette-buy-600: #58b675; +@core-color-palette-buy-700: #41a062; +@core-color-palette-buy-800: #309054; +@core-color-palette-buy-900: #177d44; +@core-color-palette-buy-1000: #006835; +@core-color-palette-buy-1100: #00582b; +@core-color-palette-buy-1200: #004521; +@core-color-palette-buy-1300: #003417; +@core-color-palette-buy-1400: #00230e; +@core-color-palette-buy-1500: #001205; +@core-color-palette-sell-100: #fff4f2; +@core-color-palette-sell-200: #ffe9e5; +@core-color-palette-sell-300: #ffdad4; +@core-color-palette-sell-400: #ffb8ac; +@core-color-palette-sell-500: #ff9b8b; +@core-color-palette-sell-600: #ff816d; +@core-color-palette-sell-700: #ff5540; +@core-color-palette-sell-800: #f13221; +@core-color-palette-sell-900: #d71c0f; +@core-color-palette-sell-1000: #b70300; +@core-color-palette-sell-1100: #9c0300; +@core-color-palette-sell-1200: #7d0200; +@core-color-palette-sell-1300: #600100; +@core-color-palette-sell-1400: #450100; +@core-color-palette-sell-1500: #270000; +@core-color-palette-misc-white: #ffffff; +@core-color-palette-misc-black: #000000; +@core-color-palette-misc-transparent: rgba(0, 0, 0, 0); +@core-color-palette-data-viz-1-100: #dfe0ff; +@core-color-palette-data-viz-1-200: #c0c5ff; +@core-color-palette-data-viz-1-300: #a0aaff; +@core-color-palette-data-viz-1-400: #818fff; +@core-color-palette-data-viz-1-500: #6173ff; +@core-color-palette-data-viz-1-600: #3d54ff; +@core-color-palette-data-viz-1-700: #1935ef; +@core-color-palette-data-viz-1-800: #0020c6; +@core-color-palette-data-viz-1-900: #001490; +@core-color-palette-data-viz-1-1000: #00095d; +@core-color-palette-data-viz-2-100: #eddcff; +@core-color-palette-data-viz-2-200: #dabdff; +@core-color-palette-data-viz-2-300: #c79eff; +@core-color-palette-data-viz-2-400: #b083ee; +@core-color-palette-data-viz-2-500: #986bd5; +@core-color-palette-data-viz-2-600: #8054bc; +@core-color-palette-data-viz-2-700: #693da4; +@core-color-palette-data-viz-2-800: #53258d; +@core-color-palette-data-viz-2-900: #3e0679; +@core-color-palette-data-viz-2-1000: #260050; +@core-color-palette-data-viz-3-100: #c4e9ea; +@core-color-palette-data-viz-3-200: #8fd6d6; +@core-color-palette-data-viz-3-300: #3ac2c5; +@core-color-palette-data-viz-3-400: #00aaad; +@core-color-palette-data-viz-3-500: #009093; +@core-color-palette-data-viz-3-600: #007779; +@core-color-palette-data-viz-3-700: #005f61; +@core-color-palette-data-viz-3-800: #004849; +@core-color-palette-data-viz-3-900: #003233; +@core-color-palette-data-viz-3-1000: #001e1e; +@core-color-palette-data-viz-4-100: #ffd9de; +@core-color-palette-data-viz-4-200: #ffb6c1; +@core-color-palette-data-viz-4-300: #ff8fa4; +@core-color-palette-data-viz-4-400: #ff6186; +@core-color-palette-data-viz-4-500: #f42a6b; +@core-color-palette-data-viz-4-600: #d30055; +@core-color-palette-data-viz-4-700: #aa0043; +@core-color-palette-data-viz-4-800: #830032; +@core-color-palette-data-viz-4-900: #5e0022; +@core-color-palette-data-viz-4-1000: #3c0013; +@core-color-palette-data-viz-5-100: #ffdbd0; +@core-color-palette-data-viz-5-200: #ffb9a3; +@core-color-palette-data-viz-5-300: #ff9471; +@core-color-palette-data-viz-5-400: #ff6935; +@core-color-palette-data-viz-5-500: #e94800; +@core-color-palette-data-viz-5-600: #c23b00; +@core-color-palette-data-viz-5-700: #9c2e00; +@core-color-palette-data-viz-5-800: #782100; +@core-color-palette-data-viz-5-900: #561500; +@core-color-palette-data-viz-5-1000: #360a00; +@core-color-palette-data-viz-6-100: #e3e2e2; +@core-color-palette-data-viz-6-200: #cac9c9; +@core-color-palette-data-viz-6-300: #b1b0b0; +@core-color-palette-data-viz-6-400: #999999; +@core-color-palette-data-viz-6-500: #818181; +@core-color-palette-data-viz-6-600: #6a6b6b; +@core-color-palette-data-viz-6-700: #545555; +@core-color-palette-data-viz-6-800: #3f4040; +@core-color-palette-data-viz-6-900: #2b2c2c; +@core-color-palette-data-viz-6-1000: #181a1a; +@core-color-palette-data-viz-7-100: #f6e0b3; +@core-color-palette-data-viz-7-200: #eac661; +@core-color-palette-data-viz-7-300: #d9aa00; +@core-color-palette-data-viz-7-400: #bc9300; +@core-color-palette-data-viz-7-500: #a07c00; +@core-color-palette-data-viz-7-600: #846700; +@core-color-palette-data-viz-7-700: #6a5100; +@core-color-palette-data-viz-7-800: #503d00; +@core-color-palette-data-viz-7-900: #382a00; +@core-color-palette-data-viz-7-1000: #221800; +@core-color-palette-data-viz-8-100: #c9ead6; +@core-color-palette-data-viz-8-200: #92d7b5; +@core-color-palette-data-viz-8-300: #10c88e; +@core-color-palette-data-viz-8-400: #00ae7a; +@core-color-palette-data-viz-8-500: #009367; +@core-color-palette-data-viz-8-600: #007a54; +@core-color-palette-data-viz-8-700: #006142; +@core-color-palette-data-viz-8-800: #004a31; +@core-color-palette-data-viz-8-900: #003321; +@core-color-palette-data-viz-8-1000: #001f12; +@core-color-step-100: 97; +@core-color-step-200: 94; +@core-color-step-300: 90; +@core-color-step-400: 81; +@core-color-step-500: 74; +@core-color-step-600: 68; +@core-color-step-700: 59; +@core-color-step-800: 53; +@core-color-step-900: 46; +@core-color-step-1000: 38; +@core-color-step-1100: 32; +@core-color-step-1200: 25; +@core-color-step-1300: 18; +@core-color-step-1400: 11; +@core-color-step-1500: 4; +@core-typography-size-productive-100: 11; +@core-typography-size-productive-200: 12; +@core-typography-size-productive-300: 14; +@core-typography-size-productive-400: 16; +@core-typography-size-productive-500: 18; +@core-typography-size-productive-600: 20; +@core-typography-size-productive-700: 24; +@core-typography-size-productive-800: 28; +@core-typography-size-productive-900: 32; +@core-typography-size-productive-1000: 40; +@core-typography-size-productive-1100: 48; +@core-typography-size-productive-1200: 56; +@core-typography-size-productive-1300: 64; +@core-typography-size-productive-1400: 96; +@core-typography-size-productive-1500: 128; +@core-typography-size-productive-1600: 160; +@core-typography-size-productive-050: 10; +@core-typography-size-expressive-100: 11; +@core-typography-size-expressive-200: 12; +@core-typography-size-expressive-300: 14; +@core-typography-size-expressive-400: 16; +@core-typography-size-expressive-500: 18; +@core-typography-size-expressive-600: 20; +@core-typography-size-expressive-700: 24; +@core-typography-size-expressive-800: 28; +@core-typography-size-expressive-900: 32; +@core-typography-size-expressive-1000: 40; +@core-typography-size-expressive-1100: 48; +@core-typography-size-expressive-1200: 56; +@core-typography-size-expressive-1300: 64; +@core-typography-size-expressive-1400: 96; +@core-typography-size-expressive-1500: 128; +@core-typography-size-expressive-1600: 160; +@core-typography-size-expressive-050: 10; +@core-typography-letter-spacing-100: 8%; +@core-typography-letter-spacing-000: 0%; +@core-typography-line-height-100: 100%; +@core-typography-line-height-200: 112.5%; +@core-typography-line-height-300: 125%; +@core-typography-line-height-400: 137.5%; +@core-typography-line-height-500: 150%; +@core-typography-font-family-100: 'Proxima Vara'; +@core-typography-font-family-200: 'Proxima Vara'; +@core-typography-font-family-300: LSEG-UI-icons; +@core-typography-font-family-400: LSEG-UI-icons-filled; +@core-typography-font-weight-thin: 100; +@core-typography-font-weight-x-light: 156; +@core-typography-font-weight-light: 220; +@core-typography-font-weight-regular: 340; +@core-typography-font-weight-medium: 420; +@core-typography-font-weight-semi-bold: 500; +@core-typography-font-weight-bold: 620; +@core-typography-font-weight-x-bold: 760; +@core-typography-font-weight-heavy: 900; +@core-typography-font-weight-x-heavy: 950; +@core-typography-case-capitalize: uppercase; +@core-typography-case-none: none; +@core-typography-decoration-line-underline: underline; +@core-typography-decoration-line-none: none; +@core-typography-scale-base: 16; +@core-elevation-100: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 4px 8px 0px rgba(20, 30, 41, 0.04); +@core-elevation-200: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 8px 12px 0px rgba(20, 30, 41, 0.04); +@core-elevation-300: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 12px 16px 0px rgba(20, 30, 41, 0.04); +@core-elevation-400: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 16px 24px 0px rgba(20, 30, 41, 0.04); +@core-elevation-500: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 24px 32px 0px rgba(20, 30, 41, 0.04); +@core-elevation-600: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 32px 48px 0px rgba(20, 30, 41, 0.04); +@core-elevation-overlay-top: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 32px 48px 0px rgba(20, 30, 41, 0.04); +@core-elevation-overlay-bottom: 0px -1px 4px 0px rgba(20, 30, 41, 0.08), + 0px -32px 48px 0px rgba(20, 30, 41, 0.04); +@core-elevation-overlay-end: -1px 0px 4px 0px rgba(20, 30, 41, 0.08), + -32px 0px 48px 0px rgba(20, 30, 41, 0.04); +@core-elevation-overlay-start: 1px 0px 4px 0px rgba(20, 30, 41, 0.08), + 32px 0px 48px 0px rgba(20, 30, 41, 0.04); +@core-elevation-000: 0px 0px 0px 0px #141e29; +@core-motion-duration-scale-100: 1; +@core-motion-duration-scale-200: 2; +@core-motion-duration-scale-300: 3; +@core-motion-duration-scale-400: 4; +@core-motion-duration-scale-500: 5; +@core-motion-duration-scale-600: 6; +@core-motion-duration-scale-700: 7; +@core-motion-duration-scale-800: 8; +@core-motion-duration-scale-900: 9; +@core-motion-duration-scale-1000: 10; +@core-motion-duration-scale-1100: 11; +@core-motion-duration-scale-1200: 12; +@core-motion-duration-scale-base: 50; +@core-motion-duration-100: 50ms; +@core-motion-duration-200: 100ms; +@core-motion-duration-300: 150ms; +@core-motion-duration-400: 200ms; +@core-motion-duration-500: 250ms; +@core-motion-duration-600: 300ms; +@core-motion-duration-700: 350ms; +@core-motion-duration-800: 400ms; +@core-motion-duration-900: 450ms; +@core-motion-duration-1000: 500ms; +@core-motion-duration-1100: 550ms; +@core-motion-duration-1200: 600ms; +@core-motion-duration-000: 0ms; +@core-motion-timing-linear: cubic-bezier(0, 0, 1, 1); +@core-motion-timing-ease-in: cubic-bezier(0.42, 0, 1, 1); +@core-motion-timing-ease-out: cubic-bezier(0, 0, 0.58, 1); +@core-motion-timing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); +@core-motion-timing-ease-in-back: cubic-bezier(0.3, -0.05, 0.7, -0.5); +@core-motion-timing-ease-out-back: cubic-bezier(0.45, 1.45, 0.8, 1); +@core-motion-timing-ease-in-out-back: cubic-bezier(0.7, -0.4, 0.4, 1.4); +@core-opacity-100: 0.04; +@core-opacity-200: 0.08; +@core-opacity-300: 0.12; +@core-opacity-400: 0.16; +@core-opacity-500: 0.2; +@core-opacity-600: 0.24; +@core-opacity-700: 0.32; +@core-opacity-800: 0.4; +@core-opacity-900: 0.48; +@core-opacity-1000: 0.56; +@core-opacity-1100: 0.64; +@core-opacity-1200: 0.72; +@core-opacity-1300: 0.8; +@core-opacity-full: 1; +@core-opacity-transparent: 0; +@core-radius-100: 4; +@core-radius-200: 8; +@core-radius-300: 12; +@core-radius-400: 16; +@core-radius-500: 24; +@core-radius-050: 2; +@core-radius-000: 0; +@core-radius-full: 10000; +@core-radius-base: 16; +@core-border-width-100: 1px; +@core-border-width-200: 2px; +@core-border-width-300: 4px; +@core-border-width-000: 0px; +@core-spacing-scale-100: 0.25; +@core-spacing-scale-200: 0.5; +@core-spacing-scale-300: 0.75; +@core-spacing-scale-400: 1; +@core-spacing-scale-500: 1.25; +@core-spacing-scale-600: 1.5; +@core-spacing-scale-700: 2; +@core-spacing-scale-800: 2.5; +@core-spacing-scale-900: 3; +@core-spacing-scale-1000: 3.5; +@core-spacing-scale-1100: 4; +@core-spacing-scale-1200: 4.5; +@core-spacing-scale-1300: 5; +@core-spacing-scale-1400: 6; +@core-spacing-scale-1500: 8; +@core-spacing-scale-1600: 10; +@core-spacing-scale-1700: 12; +@core-spacing-scale-1800: 16; +@core-spacing-scale-050: 0.125; +@core-spacing-scale-base: 16; +@core-spacing-adaptive-100: 4px; +@core-spacing-adaptive-200: 8px; +@core-spacing-adaptive-300: 12px; +@core-spacing-adaptive-400: 16px; +@core-spacing-adaptive-500: 20px; +@core-spacing-adaptive-600: 24px; +@core-spacing-adaptive-700: 32px; +@core-spacing-adaptive-800: 40px; +@core-spacing-adaptive-900: 48px; +@core-spacing-adaptive-1000: 56px; +@core-spacing-adaptive-1100: 64px; +@core-spacing-adaptive-1200: 72px; +@core-spacing-adaptive-1300: 80px; +@core-spacing-adaptive-1400: 96px; +@core-spacing-adaptive-1500: 128px; +@core-spacing-adaptive-1600: 160px; +@core-spacing-adaptive-1700: 192px; +@core-spacing-adaptive-1800: 256px; +@core-spacing-adaptive-000: 0px; +@core-spacing-adaptive-050: 2px; +@core-spacing-fixed-100: 4px; +@core-spacing-fixed-200: 8px; +@core-spacing-fixed-300: 12px; +@core-spacing-fixed-400: 16px; +@core-spacing-fixed-500: 20px; +@core-spacing-fixed-600: 24px; +@core-spacing-fixed-700: 32px; +@core-spacing-fixed-800: 40px; +@core-spacing-fixed-900: 48px; +@core-spacing-fixed-1000: 56px; +@core-spacing-fixed-1100: 64px; +@core-spacing-fixed-1200: 72px; +@core-spacing-fixed-1300: 80px; +@core-spacing-fixed-1400: 96px; +@core-spacing-fixed-1500: 128px; +@core-spacing-fixed-1600: 160px; +@core-spacing-fixed-1700: 192px; +@core-spacing-fixed-1800: 256px; +@core-spacing-fixed-050: 2px; +@core-spacing-fixed-025: 1px; +@core-spacing-fixed-000: 0px; +@core-sizing-scale-100: 0.25; +@core-sizing-scale-200: 0.5; +@core-sizing-scale-300: 0.75; +@core-sizing-scale-400: 1; +@core-sizing-scale-500: 1.25; +@core-sizing-scale-600: 1.5; +@core-sizing-scale-700: 2; +@core-sizing-scale-800: 2.5; +@core-sizing-scale-900: 3; +@core-sizing-scale-1000: 3.5; +@core-sizing-scale-1100: 4; +@core-sizing-scale-1200: 4.5; +@core-sizing-scale-1300: 5; +@core-sizing-scale-1400: 6; +@core-sizing-scale-1500: 8; +@core-sizing-scale-1600: 10; +@core-sizing-scale-1700: 12; +@core-sizing-scale-1800: 16; +@core-sizing-scale-050: 0.125; +@core-sizing-scale-base: 16; +@core-sizing-adaptive-100: 4px; +@core-sizing-adaptive-200: 8px; +@core-sizing-adaptive-300: 12px; +@core-sizing-adaptive-400: 16px; +@core-sizing-adaptive-500: 20px; +@core-sizing-adaptive-600: 24px; +@core-sizing-adaptive-700: 32px; +@core-sizing-adaptive-800: 40px; +@core-sizing-adaptive-900: 48px; +@core-sizing-adaptive-1000: 56px; +@core-sizing-adaptive-1100: 64px; +@core-sizing-adaptive-1200: 72px; +@core-sizing-adaptive-1300: 80px; +@core-sizing-adaptive-1400: 96px; +@core-sizing-adaptive-1500: 128px; +@core-sizing-adaptive-1600: 160px; +@core-sizing-adaptive-1700: 192px; +@core-sizing-adaptive-1800: 256px; +@core-sizing-adaptive-050: 2px; +@core-sizing-adaptive-000: 0px; +@core-sizing-fixed-100: 4px; +@core-sizing-fixed-200: 8px; +@core-sizing-fixed-300: 12px; +@core-sizing-fixed-400: 16px; +@core-sizing-fixed-500: 20px; +@core-sizing-fixed-600: 24px; +@core-sizing-fixed-700: 32px; +@core-sizing-fixed-800: 40px; +@core-sizing-fixed-900: 48px; +@core-sizing-fixed-1000: 56px; +@core-sizing-fixed-1100: 64px; +@core-sizing-fixed-1200: 72px; +@core-sizing-fixed-1300: 80px; +@core-sizing-fixed-1400: 96px; +@core-sizing-fixed-1500: 128px; +@core-sizing-fixed-1600: 160px; +@core-sizing-fixed-1700: 192px; +@core-sizing-fixed-1800: 256px; +@core-sizing-fixed-050: 2px; +@core-sizing-fixed-025: 1px; +@core-sizing-fixed-000: 0px; +@core-sizing-fixed-negative-100: -4px; +@core-sizing-fixed-negative-200: -8px; +@core-sizing-fixed-negative-300: -12px; +@core-sizing-fixed-negative-400: -16px; +@core-sizing-fixed-negative-500: -20px; +@core-sizing-fixed-negative-600: -24px; +@core-sizing-fixed-negative-700: -32px; +@core-sizing-fixed-negative-800: -40px; +@core-sizing-fixed-negative-900: -48px; +@core-sizing-fixed-negative-1000: -56px; +@core-sizing-fixed-negative-1100: -64px; +@core-sizing-fixed-negative-1200: -72px; +@core-sizing-fixed-negative-1300: -80px; +@core-sizing-fixed-negative-1400: -96px; +@core-sizing-fixed-negative-1500: -128px; +@core-sizing-fixed-negative-1600: -160px; +@core-sizing-fixed-negative-1700: -192px; +@core-sizing-fixed-negative-1800: -256px; +@core-sizing-fixed-negative-050: -2px; +@core-sizing-fixed-negative-025: -1px; +@core-sizing-fixed-negative-000: 0px; diff --git a/packages/ds-theme/src/web-design-tokens/overrides/color/dark-alternative.less b/packages/ds-theme/src/web-design-tokens/overrides/color/dark-alternative.less new file mode 100644 index 0000000000..40f7af7fcc --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/overrides/color/dark-alternative.less @@ -0,0 +1,503 @@ +// Do not edit directly, this file was auto-generated. + +@cont-color-common-container-surface-canvas: #141e29; +@cont-color-common-container-surface-layer-1: #232d38; +@cont-color-common-container-surface-layer-2: #323c48; +@cont-color-common-container-surface-layer-3: #424c58; +@cont-color-common-container-surface-layer-4: #323c48; +@cont-color-common-container-surface-on-canvas-minimal: #232d38; +@cont-color-common-container-surface-on-canvas-subtle: #323c48; +@cont-color-common-container-surface-on-canvas-moderate: #424c58; +@cont-color-common-container-surface-on-canvas-bold: #646e7b; +@cont-color-common-container-surface-on-layer-1-minimal: #323c48; +@cont-color-common-container-surface-on-layer-1-subtle: #424c58; +@cont-color-common-container-surface-on-layer-1-moderate: #505b67; +@cont-color-common-container-surface-on-layer-1-bold: #75808c; +@cont-color-common-container-surface-on-layer-2-minimal: #424c58; +@cont-color-common-container-surface-on-layer-2-subtle: #505b67; +@cont-color-common-container-surface-on-layer-2-moderate: #646e7b; +@cont-color-common-container-surface-on-layer-2-bold: #848f9c; +@cont-color-common-container-surface-on-layer-3-minimal: #505b67; +@cont-color-common-container-surface-on-layer-3-subtle: #646e7b; +@cont-color-common-container-surface-on-layer-3-moderate: #75808c; +@cont-color-common-container-surface-on-layer-3-bold: #9ca7b4; +@cont-color-common-container-surface-on-layer-4-minimal: #424c58; +@cont-color-common-container-surface-on-layer-4-subtle: #505b67; +@cont-color-common-container-surface-on-layer-4-moderate: #646e7b; +@cont-color-common-container-surface-on-layer-4-bold: #848f9c; +@cont-color-common-container-misc-transparent: rgba(0, 0, 0, 0); // transparent +@cont-color-common-container-persist-on-light-minimal: #f6f7f9; // minimal +@cont-color-common-container-persist-on-light-subtle: #eceef4; // subtle +@cont-color-common-container-persist-on-light-base: #141e29; // base +@cont-color-common-container-persist-on-light-moderate: #232d38; // moderate +@cont-color-common-container-persist-on-light-bold: #323c48; // bold +@cont-color-common-container-persist-on-dark-minimal: #232d38; // minimal +@cont-color-common-container-persist-on-dark-subtle: #323c48; // subtle +@cont-color-common-container-persist-on-dark-base: #ffffff; // base +@cont-color-common-container-persist-on-dark-moderate: #f6f7f9; // moderate +@cont-color-common-container-persist-on-dark-bold: #eceef4; // bold +@cont-color-common-fg-generic-persist-on-light-bold: #141e29; // bold +@cont-color-common-fg-generic-persist-on-light-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-light-subtle: #ffffff; // subtle +@cont-color-common-fg-generic-persist-on-dark-bold: #ffffff; // bold +@cont-color-common-fg-generic-persist-on-dark-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-dark-subtle: #141e29; // subtle +@cont-color-common-fg-inverse-minimal: rgba(255, 255, 255, 0.24); // minimal +@cont-color-common-fg-inverse-subtle: rgba(255, 255, 255, 0.4); // subtle +@cont-color-common-fg-inverse-base: #ffffff; // base +@cont-color-common-fg-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-fg-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-fg-persist-on-dark-minimal: rgba(20, 30, 41, 0.24); // minimal +@cont-color-common-fg-persist-on-dark-subtle: rgba(20, 30, 41, 0.4); // subtle +@cont-color-common-fg-persist-on-dark-base: #141e29; // base +@cont-color-common-fg-persist-on-dark-moderate: rgba(20, 30, 41, 0.8); // moderate +@cont-color-common-fg-persist-on-dark-bold: rgba(20, 30, 41, 0.56); // bold +@cont-color-shell-bg-layer-1: #232d38; +@cont-color-shell-bg-layer-2: #323c48; +@cont-color-shell-bg-layer-3: #424c58; +@cont-color-shell-bg-layer-4: #323c48; +@cont-color-shell-bg-layer-canvas: #141e29; +@cont-color-shell-bg-layer-inverse: #ffffff; +@cont-color-shell-border-on-layer-1-bold: #505b67; +@cont-color-shell-border-on-layer-1-subtle: #424c58; +@cont-color-shell-border-on-layer-2-bold: #646e7b; +@cont-color-shell-border-on-layer-2-subtle: #505b67; +@cont-color-shell-border-on-layer-3-bold: #75808c; +@cont-color-shell-border-on-layer-3-subtle: #646e7b; +@cont-color-shell-border-on-layer-4-bold: #646e7b; +@cont-color-shell-border-on-layer-4-subtle: #505b67; +@cont-color-shell-border-on-layer-canvas-bold: #424c58; +@cont-color-shell-border-on-layer-canvas-subtle: #323c48; +@cont-color-shell-border-on-layer-inverse-bold: #c0cadb; +@cont-color-shell-border-on-layer-inverse-subtle: #dee2eb; +@cont-color-action-bg-neutral-minimal: #323c48; +@cont-color-action-bg-neutral-subtle: #424c58; +@cont-color-action-bg-neutral-base: #323c48; +@cont-color-action-bg-neutral-moderate: #424c58; +@cont-color-action-bg-neutral-bold: rgba(0, 0, 0, 0); +@cont-color-action-bg-primary-minimal: #00076d; +@cont-color-action-bg-primary-subtle: #000d96; +@cont-color-action-bg-primary-base: #6d84ff; +@cont-color-action-bg-primary-moderate: #8ea0ff; +@cont-color-action-bg-primary-bold: #a4b1ff; +@cont-color-action-bg-secondary-minimal: #141e29; +@cont-color-action-bg-secondary-subtle: #232d38; +@cont-color-action-bg-secondary-base: #848f9c; +@cont-color-action-bg-secondary-moderate: #9ca7b4; +@cont-color-action-bg-secondary-bold: #adb7c5; +@cont-color-action-bg-tertiary-minimal: rgba(132, 143, 156, 0.08); +@cont-color-action-bg-tertiary-subtle: rgba(132, 143, 156, 0.16); +@cont-color-action-bg-tertiary-base: #848f9c; +@cont-color-action-bg-tertiary-moderate: rgba(132, 143, 156, 0.8); +@cont-color-action-bg-tertiary-bold: rgba(132, 143, 156, 0.56); +@cont-color-action-bg-negative-minimal: #450100; +@cont-color-action-bg-negative-subtle: #600100; +@cont-color-action-bg-negative-base: #ff5540; +@cont-color-action-bg-negative-moderate: #ff7c68; +@cont-color-action-bg-negative-bold: #ff9b8b; +@cont-color-action-bg-positive-minimal: #00230e; +@cont-color-action-bg-positive-subtle: #003417; +@cont-color-action-bg-positive-base: #41a062; +@cont-color-action-bg-positive-moderate: #58b675; +@cont-color-action-bg-positive-bold: #6bc987; +@cont-color-action-bg-buy-minimal: #00230e; +@cont-color-action-bg-buy-subtle: #003417; +@cont-color-action-bg-buy-base: #41a062; +@cont-color-action-bg-buy-moderate: #58b675; +@cont-color-action-bg-buy-bold: #6bc987; +@cont-color-action-bg-sell-minimal: #450100; +@cont-color-action-bg-sell-subtle: #600100; +@cont-color-action-bg-sell-base: #ff5540; +@cont-color-action-bg-sell-moderate: #ff816d; +@cont-color-action-bg-sell-bold: #ff9b8b; +@cont-color-action-bg-inverse-minimal: rgba(20, 30, 41, 0.08); +@cont-color-action-bg-inverse-subtle: rgba(20, 30, 41, 0.16); +@cont-color-action-bg-inverse-base: #141e29; +@cont-color-action-bg-inverse-moderate: rgba(20, 30, 41, 0.8); +@cont-color-action-bg-inverse-bold: rgba(20, 30, 41, 0.56); +@cont-color-action-bg-persist-on-light-minimal: #f6f7f9; +@cont-color-action-bg-persist-on-light-subtle: #eceef4; +@cont-color-action-bg-persist-on-light-base: #141e29; +@cont-color-action-bg-persist-on-light-moderate: #232d38; +@cont-color-action-bg-persist-on-light-bold: #323c48; +@cont-color-action-bg-persist-on-dark-minimal: #232d38; +@cont-color-action-bg-persist-on-dark-subtle: #323c48; +@cont-color-action-bg-persist-on-dark-base: #ffffff; +@cont-color-action-bg-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-bg-persist-on-dark-bold: #eceef4; +@cont-color-action-fg-on-neutral-minimal: #141e29; +@cont-color-action-fg-on-neutral-subtle: #141e29; +@cont-color-action-fg-on-neutral-base: #ffffff; +@cont-color-action-fg-on-neutral-moderate: #ffffff; +@cont-color-action-fg-on-neutral-bold: #ffffff; +@cont-color-action-fg-on-primary-minimal: #8ea0ff; +@cont-color-action-fg-on-primary-subtle: #8ea0ff; +@cont-color-action-fg-on-primary-base: #141e29; +@cont-color-action-fg-on-primary-moderate: #141e29; +@cont-color-action-fg-on-primary-bold: #141e29; +@cont-color-action-fg-on-secondary-minimal: #ffffff; +@cont-color-action-fg-on-secondary-subtle: #ffffff; +@cont-color-action-fg-on-secondary-base: #141e29; +@cont-color-action-fg-on-secondary-moderate: #141e29; +@cont-color-action-fg-on-secondary-bold: #141e29; +@cont-color-action-fg-on-tertiary-minimal: #ffffff; +@cont-color-action-fg-on-tertiary-subtle: #ffffff; +@cont-color-action-fg-on-tertiary-base: #141e29; +@cont-color-action-fg-on-tertiary-moderate: #141e29; +@cont-color-action-fg-on-tertiary-bold: #141e29; +@cont-color-action-fg-on-negative-minimal: #ff7c68; +@cont-color-action-fg-on-negative-subtle: #ff7c68; +@cont-color-action-fg-on-negative-base: #141e29; +@cont-color-action-fg-on-negative-moderate: #141e29; +@cont-color-action-fg-on-negative-bold: #141e29; +@cont-color-action-fg-on-positive-minimal: #58b675; +@cont-color-action-fg-on-positive-subtle: #58b675; +@cont-color-action-fg-on-positive-base: #141e29; +@cont-color-action-fg-on-positive-moderate: #141e29; +@cont-color-action-fg-on-positive-bold: #141e29; +@cont-color-action-fg-on-buy-minimal: #58b675; +@cont-color-action-fg-on-buy-subtle: #58b675; +@cont-color-action-fg-on-buy-base: #141e29; +@cont-color-action-fg-on-buy-moderate: #141e29; +@cont-color-action-fg-on-buy-bold: #141e29; +@cont-color-action-fg-on-sell-minimal: #ff816d; +@cont-color-action-fg-on-sell-subtle: #ff816d; +@cont-color-action-fg-on-sell-base: #141e29; +@cont-color-action-fg-on-sell-moderate: #141e29; +@cont-color-action-fg-on-sell-bold: #141e29; +@cont-color-action-fg-on-inverse-minimal: #141e29; +@cont-color-action-fg-on-inverse-subtle: #141e29; +@cont-color-action-fg-on-inverse-base: #ffffff; +@cont-color-action-fg-on-inverse-moderate: #ffffff; +@cont-color-action-fg-on-inverse-bold: #ffffff; +@cont-color-action-fg-on-persist-on-light-minimal: #141e29; +@cont-color-action-fg-on-persist-on-light-subtle: #141e29; +@cont-color-action-fg-on-persist-on-light-base: #ffffff; +@cont-color-action-fg-on-persist-on-light-moderate: #ffffff; +@cont-color-action-fg-on-persist-on-light-bold: #ffffff; +@cont-color-action-fg-on-persist-on-dark-minimal: #ffffff; +@cont-color-action-fg-on-persist-on-dark-subtle: #ffffff; +@cont-color-action-fg-on-persist-on-dark-base: #141e29; +@cont-color-action-fg-on-persist-on-dark-moderate: #141e29; +@cont-color-action-fg-on-persist-on-dark-bold: #141e29; +@cont-color-action-fg-on-transparent-minimal: #8ea0ff; +@cont-color-action-fg-on-transparent-subtle: #8ea0ff; +@cont-color-action-fg-on-transparent-base: #8ea0ff; +@cont-color-action-fg-on-transparent-moderate: #bdc6ff; +@cont-color-action-fg-on-transparent-bold: #bdc6ff; +@cont-color-action-border-neutral-minimal: #323c48; +@cont-color-action-border-neutral-subtle: #424c58; +@cont-color-action-border-neutral-base: #505b67; +@cont-color-action-border-neutral-moderate: #75808c; +@cont-color-action-border-neutral-bold: #75808c; +@cont-color-action-border-primary-minimal: #00076d; +@cont-color-action-border-primary-subtle: #000d96; +@cont-color-action-border-primary-base: #6d84ff; +@cont-color-action-border-primary-moderate: #8ea0ff; +@cont-color-action-border-primary-bold: #a4b1ff; +@cont-color-action-border-secondary-minimal: #141e29; +@cont-color-action-border-secondary-subtle: #232d38; +@cont-color-action-border-secondary-base: #848f9c; +@cont-color-action-border-secondary-moderate: #9ca7b4; +@cont-color-action-border-secondary-bold: #adb7c5; +@cont-color-action-border-tertiary-minimal: #141e29; +@cont-color-action-border-tertiary-subtle: #232d38; +@cont-color-action-border-tertiary-base: #848f9c; +@cont-color-action-border-tertiary-moderate: #9ca7b4; +@cont-color-action-border-tertiary-bold: #adb7c5; +@cont-color-action-border-negative-minimal: #450100; +@cont-color-action-border-negative-subtle: #600100; +@cont-color-action-border-negative-base: #ff5540; +@cont-color-action-border-negative-moderate: #ff7c68; +@cont-color-action-border-negative-bold: #ff9b8b; +@cont-color-action-border-positive-minimal: #00230e; +@cont-color-action-border-positive-subtle: #003417; +@cont-color-action-border-positive-base: #41a062; +@cont-color-action-border-positive-moderate: #58b675; +@cont-color-action-border-positive-bold: #6bc987; +@cont-color-action-border-buy-minimal: #00230e; +@cont-color-action-border-buy-subtle: #003417; +@cont-color-action-border-buy-base: #41a062; +@cont-color-action-border-buy-moderate: #58b675; +@cont-color-action-border-buy-bold: #6bc987; +@cont-color-action-border-sell-minimal: #450100; +@cont-color-action-border-sell-subtle: #600100; +@cont-color-action-border-sell-base: #ff5540; +@cont-color-action-border-sell-moderate: #ff816d; +@cont-color-action-border-sell-bold: #ff9b8b; +@cont-color-action-border-inverse-minimal: rgba(20, 30, 41, 0.08); +@cont-color-action-border-inverse-subtle: rgba(20, 30, 41, 0.16); +@cont-color-action-border-inverse-base: #141e29; +@cont-color-action-border-inverse-moderate: rgba(20, 30, 41, 0.8); +@cont-color-action-border-inverse-bold: rgba(20, 30, 41, 0.56); +@cont-color-action-border-persist-on-light-minimal: rgba(35, 45, 56, 0.24); +@cont-color-action-border-persist-on-light-subtle: rgba(35, 45, 56, 0.4); +@cont-color-action-border-persist-on-light-base: #141e29; +@cont-color-action-border-persist-on-light-moderate: rgba(35, 45, 56, 0.8); +@cont-color-action-border-persist-on-light-bold: rgba(35, 45, 56, 0.56); +@cont-color-action-border-persist-on-dark-minimal: #232d38; +@cont-color-action-border-persist-on-dark-subtle: #323c48; +@cont-color-action-border-persist-on-dark-base: #ffffff; +@cont-color-action-border-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-border-persist-on-dark-bold: #eceef4; +@cont-color-status-bg-neutral-base: #848f9c; +@cont-color-status-bg-neutral-minimal: #141e29; +@cont-color-status-bg-negative-base: #ff5540; +@cont-color-status-bg-negative-minimal: #450100; +@cont-color-status-bg-warning-base: #ffbe42; +@cont-color-status-bg-warning-minimal: #2a1b00; +@cont-color-status-bg-positive-base: #41a062; +@cont-color-status-bg-positive-minimal: #00230e; +@cont-color-status-bg-info-base: #3b97c2; +@cont-color-status-bg-info-minimal: #00202f; +@cont-color-status-bg-buy-base: #41a062; +@cont-color-status-bg-buy-minimal: #00230e; +@cont-color-status-bg-sell-base: #ff5540; +@cont-color-status-bg-sell-minimal: #450100; +@cont-color-status-fg-neutral-base: #848f9c; +@cont-color-status-fg-on-neutral-base: #141e29; +@cont-color-status-fg-on-neutral-minimal: #848f9c; +@cont-color-status-fg-negative-base: #ff5540; +@cont-color-status-fg-on-negative-base: #141e29; +@cont-color-status-fg-on-negative-minimal: #ff7c68; +@cont-color-status-fg-warning-base: #bb8400; +@cont-color-status-fg-on-warning-base: #141e29; +@cont-color-status-fg-on-warning-minimal: #d99a05; +@cont-color-status-fg-positive-base: #41a062; +@cont-color-status-fg-on-positive-base: #141e29; +@cont-color-status-fg-on-positive-minimal: #58b675; +@cont-color-status-fg-info-base: #3b97c2; +@cont-color-status-fg-on-info-base: #141e29; +@cont-color-status-fg-on-info-minimal: #58afdc; +@cont-color-status-fg-buy-base: #41a062; +@cont-color-status-fg-on-buy-base: #141e29; +@cont-color-status-fg-on-buy-minimal: #58b675; +@cont-color-status-fg-sell-base: #ff5540; +@cont-color-status-fg-on-sell-base: #141e29; +@cont-color-status-fg-on-sell-minimal: #ff816d; +@cont-color-status-border-neutral-base: #848f9c; +@cont-color-status-border-neutral-minimal: #141e29; +@cont-color-status-border-negative-base: #ff5540; +@cont-color-status-border-negative-minimal: #450100; +@cont-color-status-border-warning-base: #ffbe42; +@cont-color-status-border-warning-minimal: #2a1b00; +@cont-color-status-border-positive-base: #41a062; +@cont-color-status-border-positive-minimal: #00230e; +@cont-color-status-border-info-base: #3b97c2; +@cont-color-status-border-info-minimal: #00202f; +@cont-color-status-border-buy-base: #41a062; +@cont-color-status-border-buy-minimal: #00230e; +@cont-color-status-border-sell-base: #ff5540; +@cont-color-status-border-sell-minimal: #450100; +@cont-color-data-viz-sequencial-option-1-100: #dfe0ff; +@cont-color-data-viz-sequencial-option-1-200: #c0c5ff; +@cont-color-data-viz-sequencial-option-1-300: #a0aaff; +@cont-color-data-viz-sequencial-option-1-400: #818fff; +@cont-color-data-viz-sequencial-option-1-500: #6173ff; +@cont-color-data-viz-sequencial-option-1-600: #3d54ff; +@cont-color-data-viz-sequencial-option-1-700: #1935ef; +@cont-color-data-viz-sequencial-option-1-800: #0020c6; +@cont-color-data-viz-sequencial-option-1-900: #001490; +@cont-color-data-viz-sequencial-option-1-1000: #00095d; +@cont-color-data-viz-sequencial-option-2-100: #eddcff; +@cont-color-data-viz-sequencial-option-2-200: #dabdff; +@cont-color-data-viz-sequencial-option-2-300: #c79eff; +@cont-color-data-viz-sequencial-option-2-400: #b083ee; +@cont-color-data-viz-sequencial-option-2-500: #986bd5; +@cont-color-data-viz-sequencial-option-2-600: #8054bc; +@cont-color-data-viz-sequencial-option-2-700: #693da4; +@cont-color-data-viz-sequencial-option-2-800: #53258d; +@cont-color-data-viz-sequencial-option-2-900: #3e0679; +@cont-color-data-viz-sequencial-option-2-1000: #260050; +@cont-color-data-viz-sequencial-option-3-100: #c4e9ea; +@cont-color-data-viz-sequencial-option-3-200: #8fd6d6; +@cont-color-data-viz-sequencial-option-3-300: #3ac2c5; +@cont-color-data-viz-sequencial-option-3-400: #00aaad; +@cont-color-data-viz-sequencial-option-3-500: #009093; +@cont-color-data-viz-sequencial-option-3-600: #007779; +@cont-color-data-viz-sequencial-option-3-700: #005f61; +@cont-color-data-viz-sequencial-option-3-800: #004849; +@cont-color-data-viz-sequencial-option-3-900: #003233; +@cont-color-data-viz-sequencial-option-3-1000: #001e1e; +@cont-color-data-viz-sequencial-option-4-100: #ffd9de; +@cont-color-data-viz-sequencial-option-4-200: #ffb6c1; +@cont-color-data-viz-sequencial-option-4-300: #ff8fa4; +@cont-color-data-viz-sequencial-option-4-400: #ff6186; +@cont-color-data-viz-sequencial-option-4-500: #f42a6b; +@cont-color-data-viz-sequencial-option-4-600: #d30055; +@cont-color-data-viz-sequencial-option-4-700: #aa0043; +@cont-color-data-viz-sequencial-option-4-800: #830032; +@cont-color-data-viz-sequencial-option-4-900: #5e0022; +@cont-color-data-viz-sequencial-option-4-1000: #3c0013; +@cont-color-data-viz-sequencial-option-5-100: #ffdbd0; +@cont-color-data-viz-sequencial-option-5-200: #ffb9a3; +@cont-color-data-viz-sequencial-option-5-300: #ff9471; +@cont-color-data-viz-sequencial-option-5-400: #ff6935; +@cont-color-data-viz-sequencial-option-5-500: #e94800; +@cont-color-data-viz-sequencial-option-5-600: #c23b00; +@cont-color-data-viz-sequencial-option-5-700: #9c2e00; +@cont-color-data-viz-sequencial-option-5-800: #782100; +@cont-color-data-viz-sequencial-option-5-900: #561500; +@cont-color-data-viz-sequencial-option-5-1000: #360a00; +@cont-color-data-viz-sequencial-option-6-100: #e3e2e2; +@cont-color-data-viz-sequencial-option-6-200: #cac9c9; +@cont-color-data-viz-sequencial-option-6-300: #b1b0b0; +@cont-color-data-viz-sequencial-option-6-400: #999999; +@cont-color-data-viz-sequencial-option-6-500: #818181; +@cont-color-data-viz-sequencial-option-6-600: #6a6b6b; +@cont-color-data-viz-sequencial-option-6-700: #545555; +@cont-color-data-viz-sequencial-option-6-800: #3f4040; +@cont-color-data-viz-sequencial-option-6-900: #2b2c2c; +@cont-color-data-viz-sequencial-option-6-1000: #181a1a; +@cont-color-data-viz-sequencial-option-7-100: #f6e0b3; +@cont-color-data-viz-sequencial-option-7-200: #eac661; +@cont-color-data-viz-sequencial-option-7-300: #d9aa00; +@cont-color-data-viz-sequencial-option-7-400: #bc9300; +@cont-color-data-viz-sequencial-option-7-500: #a07c00; +@cont-color-data-viz-sequencial-option-7-600: #846700; +@cont-color-data-viz-sequencial-option-7-700: #6a5100; +@cont-color-data-viz-sequencial-option-7-800: #503d00; +@cont-color-data-viz-sequencial-option-7-900: #382a00; +@cont-color-data-viz-sequencial-option-7-1000: #221800; +@cont-color-data-viz-sequencial-option-8-100: #c9ead6; +@cont-color-data-viz-sequencial-option-8-200: #92d7b5; +@cont-color-data-viz-sequencial-option-8-300: #10c88e; +@cont-color-data-viz-sequencial-option-8-400: #00ae7a; +@cont-color-data-viz-sequencial-option-8-500: #009367; +@cont-color-data-viz-sequencial-option-8-600: #007a54; +@cont-color-data-viz-sequencial-option-8-700: #006142; +@cont-color-data-viz-sequencial-option-8-800: #004a31; +@cont-color-data-viz-sequencial-option-8-900: #003321; +@cont-color-data-viz-sequencial-option-8-1000: #001f12; +@cont-color-control-bg-minimal: #323c48; +@cont-color-control-bg-subtle: #424c58; +@cont-color-control-bg-base: #ffffff; +@cont-color-control-bg-moderate: #9ca7b4; +@cont-color-control-bg-bold: #848f9c; +@cont-color-control-border-minimal: #505b67; +@cont-color-control-border-subtle: #75808c; +@cont-color-control-border-base: #ffffff; +@cont-color-control-border-moderate: #9ca7b4; +@cont-color-control-border-bold: #848f9c; +@cont-color-control-fg-on-minimal: #9ca7b4; +@cont-color-control-fg-on-subtle: #ffffff; +@cont-color-control-fg-on-base: #141e29; +@cont-color-control-fg-on-moderate: #141e29; +@cont-color-control-fg-on-bold: #141e29; +@cont-color-field-bg-on-canvas-base: #232d38; +@cont-color-field-bg-on-layer-1-base: #323c48; +@cont-color-field-bg-on-layer-2-base: #424c58; +@cont-color-field-bg-on-layer-3-base: #505b67; +@cont-color-field-bg-on-layer-4-base: #424c58; +@cont-color-field-border-on-canvas-bold: #e1f0ff; +@cont-color-field-border-on-canvas-moderate: #646e7b; +@cont-color-field-border-on-canvas-subtle: #646e7b; +@cont-color-field-border-on-layer-1-bold: #e1f0ff; +@cont-color-field-border-on-layer-1-moderate: #646e7b; +@cont-color-field-border-on-layer-1-subtle: #75808c; +@cont-color-field-border-on-layer-2-bold: #e1f0ff; +@cont-color-field-border-on-layer-2-moderate: #646e7b; +@cont-color-field-border-on-layer-2-subtle: #848f9c; +@cont-color-field-border-on-layer-3-bold: #e1f0ff; +@cont-color-field-border-on-layer-3-moderate: #646e7b; +@cont-color-field-border-on-layer-3-subtle: #9ca7b4; +@cont-color-field-border-on-layer-4-bold: #e1f0ff; +@cont-color-field-border-on-layer-4-moderate: #646e7b; +@cont-color-field-border-on-layer-4-subtle: #848f9c; +@cont-color-field-fg-on-canvas-bold: #ffffff; +@cont-color-field-fg-on-canvas-moderate: #c0cadb; +@cont-color-field-fg-on-canvas-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-1-bold: #ffffff; +@cont-color-field-fg-on-layer-1-moderate: #c0cadb; +@cont-color-field-fg-on-layer-1-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-2-bold: #ffffff; +@cont-color-field-fg-on-layer-2-moderate: #c0cadb; +@cont-color-field-fg-on-layer-2-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-3-bold: #ffffff; +@cont-color-field-fg-on-layer-3-moderate: #c0cadb; +@cont-color-field-fg-on-layer-3-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-4-bold: #ffffff; +@cont-color-field-fg-on-layer-4-moderate: #c0cadb; +@cont-color-field-fg-on-layer-4-subtle: #9ca7b4; +@cont-color-menu-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-canvas-subtle: #232d38; +@cont-color-menu-bg-on-canvas-moderate: #323c48; +@cont-color-menu-bg-on-canvas-bold: #646e7b; +@cont-color-menu-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-1-subtle: #323c48; +@cont-color-menu-bg-on-layer-1-moderate: #424c58; +@cont-color-menu-bg-on-layer-1-bold: #75808c; +@cont-color-menu-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-2-subtle: #424c58; +@cont-color-menu-bg-on-layer-2-moderate: #505b67; +@cont-color-menu-bg-on-layer-2-bold: #848f9c; +@cont-color-menu-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-3-subtle: #505b67; +@cont-color-menu-bg-on-layer-3-moderate: #646e7b; +@cont-color-menu-bg-on-layer-3-bold: #9ca7b4; +@cont-color-menu-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-4-subtle: #424c58; +@cont-color-menu-bg-on-layer-4-moderate: #505b67; +@cont-color-menu-bg-on-layer-4-bold: #848f9c; +@cont-color-menu-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-canvas-moderate: #323c48; +@cont-color-menu-border-on-canvas-bold: #e1f0ff; +@cont-color-menu-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-1-moderate: #424c58; +@cont-color-menu-border-on-layer-1-bold: #e1f0ff; +@cont-color-menu-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-2-moderate: #505b67; +@cont-color-menu-border-on-layer-2-bold: #e1f0ff; +@cont-color-menu-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-3-moderate: #646e7b; +@cont-color-menu-border-on-layer-3-bold: #e1f0ff; +@cont-color-menu-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-4-moderate: #505b67; +@cont-color-menu-border-on-layer-4-bold: #e1f0ff; +@cont-color-menu-fg-on-minimal: #ffffff; +@cont-color-menu-fg-on-subtle: #ffffff; +@cont-color-menu-fg-on-moderate: #ffffff; +@cont-color-menu-fg-on-bold: #ffffff; +@cont-color-navigation-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-canvas-subtle: #232d38; +@cont-color-navigation-bg-on-canvas-moderate: #323c48; +@cont-color-navigation-bg-on-canvas-bold: #646e7b; +@cont-color-navigation-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-1-subtle: #323c48; +@cont-color-navigation-bg-on-layer-1-moderate: #424c58; +@cont-color-navigation-bg-on-layer-1-bold: #75808c; +@cont-color-navigation-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-2-subtle: #424c58; +@cont-color-navigation-bg-on-layer-2-moderate: #505b67; +@cont-color-navigation-bg-on-layer-2-bold: #848f9c; +@cont-color-navigation-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-3-subtle: #505b67; +@cont-color-navigation-bg-on-layer-3-moderate: #646e7b; +@cont-color-navigation-bg-on-layer-3-bold: #9ca7b4; +@cont-color-navigation-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-4-subtle: #424c58; +@cont-color-navigation-bg-on-layer-4-moderate: #505b67; +@cont-color-navigation-bg-on-layer-4-bold: #848f9c; +@cont-color-navigation-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-canvas-moderate: #323c48; +@cont-color-navigation-border-on-canvas-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-1-moderate: #424c58; +@cont-color-navigation-border-on-layer-1-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-2-moderate: #505b67; +@cont-color-navigation-border-on-layer-2-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-3-moderate: #646e7b; +@cont-color-navigation-border-on-layer-3-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-4-moderate: #505b67; +@cont-color-navigation-border-on-layer-4-bold: #e1f0ff; +@cont-color-navigation-fg-on-minimal: #ffffff; +@cont-color-navigation-fg-on-subtle: #ffffff; +@cont-color-navigation-fg-on-moderate: #ffffff; +@cont-color-navigation-fg-on-bold: #ffffff; +@cont-color-navigation-fg-description-on-minimal: #c0cadb; +@cont-color-navigation-fg-description-on-subtle: #c0cadb; +@cont-color-navigation-fg-description-on-moderate: #c0cadb; +@cont-color-navigation-fg-description-on-bold: #c0cadb; diff --git a/packages/ds-theme/src/web-design-tokens/overrides/color/dark.less b/packages/ds-theme/src/web-design-tokens/overrides/color/dark.less new file mode 100644 index 0000000000..699290090e --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/overrides/color/dark.less @@ -0,0 +1,1017 @@ +// Do not edit directly, this file was auto-generated. + +@cont-color-common-container-surface-canvas: #232d38; // canvas +@cont-color-common-container-surface-layer-1: #141e29; // layer-1 +@cont-color-common-container-surface-layer-2: #323c48; // layer-2 +@cont-color-common-container-surface-layer-3: #323c48; // layer-3 +@cont-color-common-container-surface-layer-4: #232d38; // layer-4 +@cont-color-common-container-surface-layer-inverse: #ffffff; // layer-inverse +@cont-color-common-container-surface-layer-overlay: rgba(20, 30, 41, 0.24); +@cont-color-common-container-surface-on-canvas-minimal: #323c48; // minimal +@cont-color-common-container-surface-on-canvas-subtle: #424c58; // subtle +@cont-color-common-container-surface-on-canvas-moderate: #505b67; // moderate +@cont-color-common-container-surface-on-canvas-bold: #75808c; // bold +@cont-color-common-container-surface-on-layer-1-minimal: #232d38; // minimal +@cont-color-common-container-surface-on-layer-1-subtle: #323c48; // subtle +@cont-color-common-container-surface-on-layer-1-moderate: #424c58; // moderate +@cont-color-common-container-surface-on-layer-1-bold: #646e7b; // bold +@cont-color-common-container-surface-on-layer-2-minimal: #424c58; // minimal +@cont-color-common-container-surface-on-layer-2-subtle: #505b67; // subtle +@cont-color-common-container-surface-on-layer-2-moderate: #646e7b; // moderate +@cont-color-common-container-surface-on-layer-2-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-3-minimal: #424c58; // minimal +@cont-color-common-container-surface-on-layer-3-subtle: #505b67; // subtle +@cont-color-common-container-surface-on-layer-3-moderate: #646e7b; // moderate +@cont-color-common-container-surface-on-layer-3-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-4-minimal: #323c48; // minimal +@cont-color-common-container-surface-on-layer-4-subtle: #424c58; // subtle +@cont-color-common-container-surface-on-layer-4-moderate: #505b67; // moderate +@cont-color-common-container-surface-on-layer-4-bold: #75808c; // bold +@cont-color-common-container-surface-on-layer-inverse-minimal: #ffffff; // minimal +@cont-color-common-container-surface-on-layer-inverse-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-inverse-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-inverse-bold: #848f9c; // bold +@cont-color-common-container-brand-minimal: #00076d; // minimal +@cont-color-common-container-brand-subtle: #3459ff; // subtle +@cont-color-common-container-brand-base: #6d84ff; // base +@cont-color-common-container-brand-moderate: #8ea0ff; // moderate +@cont-color-common-container-brand-bold: #a4b1ff; // bold +@cont-color-common-container-accent-minimal: #002033; // minimal +@cont-color-common-container-accent-subtle: #002f49; // subtle +@cont-color-common-container-accent-base: #ffffff; // base +@cont-color-common-container-accent-moderate: #f1f7ff; // moderate +@cont-color-common-container-accent-bold: #e1f0ff; // bold +@cont-color-common-container-primary-minimal: #00076d; // minimal +@cont-color-common-container-primary-subtle: #000d96; // subtle +@cont-color-common-container-primary-base: #6d84ff; // base +@cont-color-common-container-primary-moderate: #8ea0ff; // moderate +@cont-color-common-container-primary-bold: #a4b1ff; // bold +@cont-color-common-container-secondary-minimal: #141e29; // minimal +@cont-color-common-container-secondary-subtle: #232d38; // subtle +@cont-color-common-container-secondary-base: #848f9c; // base +@cont-color-common-container-secondary-moderate: #9ca7b4; // moderate +@cont-color-common-container-secondary-bold: #adb7c5; // bold +@cont-color-common-container-tertiary-minimal: rgba(132, 143, 156, 0.08); // minimal +@cont-color-common-container-tertiary-subtle: rgba(132, 143, 156, 0.16); // subtle +@cont-color-common-container-tertiary-moderate: rgba(132, 143, 156, 0.8); // moderate +@cont-color-common-container-tertiary-base: #848f9c; // base +@cont-color-common-container-tertiary-bold: rgba(132, 143, 156, 0.56); // bold +@cont-color-common-container-neutral-minimal: #141e29; // minimal +@cont-color-common-container-neutral-subtle: #232d38; // subtle +@cont-color-common-container-neutral-base: #848f9c; // base +@cont-color-common-container-neutral-moderate: #9ca7b4; // moderate +@cont-color-common-container-neutral-bold: #ffffff; // bold +@cont-color-common-container-negative-minimal: #450100; // minimal +@cont-color-common-container-negative-subtle: #600100; // subtle +@cont-color-common-container-negative-base: #ff5540; // base +@cont-color-common-container-negative-moderate: #ff7c68; // moderate +@cont-color-common-container-negative-bold: #ff9b8b; // bold +@cont-color-common-container-warning-minimal: #2a1b00; // minimal +@cont-color-common-container-warning-subtle: #3d2800; // subtle +@cont-color-common-container-warning-base: #ffbe42; // base +@cont-color-common-container-warning-moderate: #ffdeab; // moderate +@cont-color-common-container-warning-bold: #ffebd0; // bold +@cont-color-common-container-positive-minimal: #00230e; // minimal +@cont-color-common-container-positive-subtle: #003417; // subtle +@cont-color-common-container-positive-base: #41a062; // base +@cont-color-common-container-positive-moderate: #58b675; // moderate +@cont-color-common-container-positive-bold: #6bc987; // bold +@cont-color-common-container-info-minimal: #00202f; // minimal +@cont-color-common-container-info-subtle: #003043; // subtle +@cont-color-common-container-info-base: #3b97c2; // base +@cont-color-common-container-info-moderate: #58afdc; // moderate +@cont-color-common-container-info-bold: #7abfe5; // bold +@cont-color-common-container-buy-minimal: #00230e; // minimal +@cont-color-common-container-buy-subtle: #003417; // subtle +@cont-color-common-container-buy-base: #41a062; // base +@cont-color-common-container-buy-moderate: #58b675; // moderate +@cont-color-common-container-buy-bold: #6bc987; // bold +@cont-color-common-container-sell-minimal: #450100; // minimal +@cont-color-common-container-sell-subtle: #600100; // subtle +@cont-color-common-container-sell-base: #ff5540; // base +@cont-color-common-container-sell-moderate: #ff816d; // moderate +@cont-color-common-container-sell-bold: #ff9b8b; // bold +@cont-color-common-container-category-1-minimal: #001490; // minimal +@cont-color-common-container-category-1-subtle: #0020c6; // subtle +@cont-color-common-container-category-1-base: #818fff; // base +@cont-color-common-container-category-1-moderate: #a0aaff; // moderate +@cont-color-common-container-category-1-bold: #c0c5ff; // bold +@cont-color-common-container-category-2-minimal: #3e0679; // minimal +@cont-color-common-container-category-2-subtle: #53258d; // subtle +@cont-color-common-container-category-2-base: #b083ee; // base +@cont-color-common-container-category-2-moderate: #c79eff; // moderate +@cont-color-common-container-category-2-bold: #dabdff; // bold +@cont-color-common-container-category-3-minimal: #003233; // minimal +@cont-color-common-container-category-3-subtle: #004849; // subtle +@cont-color-common-container-category-3-base: #00aaad; // base +@cont-color-common-container-category-3-moderate: #3ac2c5; // moderate +@cont-color-common-container-category-3-bold: #8fd6d6; // bold +@cont-color-common-container-category-4-minimal: #5e0022; // minimal +@cont-color-common-container-category-4-subtle: #830032; // subtle +@cont-color-common-container-category-4-base: #ff6186; // base +@cont-color-common-container-category-4-moderate: #ff8fa4; // moderate +@cont-color-common-container-category-4-bold: #ffb6c1; // bold +@cont-color-common-container-category-5-minimal: #561500; // minimal +@cont-color-common-container-category-5-subtle: #782100; // subtle +@cont-color-common-container-category-5-base: #ff6935; // base +@cont-color-common-container-category-5-moderate: #ff9471; // moderate +@cont-color-common-container-category-5-bold: #ffb9a3; // bold +@cont-color-common-container-category-6-minimal: #2b2c2c; // minimal +@cont-color-common-container-category-6-subtle: #3f4040; // subtle +@cont-color-common-container-category-6-base: #999999; // base +@cont-color-common-container-category-6-moderate: #b1b0b0; // moderate +@cont-color-common-container-category-6-bold: #cac9c9; // bold +@cont-color-common-container-category-7-minimal: #382a00; // minimal +@cont-color-common-container-category-7-subtle: #503d00; // subtle +@cont-color-common-container-category-7-base: #bc9300; // base +@cont-color-common-container-category-7-moderate: #d9aa00; // moderate +@cont-color-common-container-category-7-bold: #eac661; // bold +@cont-color-common-container-category-8-minimal: #003321; // minimal +@cont-color-common-container-category-8-subtle: #004a31; // subtle +@cont-color-common-container-category-8-base: #00ae7a; // base +@cont-color-common-container-category-8-moderate: #10c88e; // moderate +@cont-color-common-container-category-8-bold: #92d7b5; // bold +@cont-color-common-container-misc-disabled: #424c58; // disabled +@cont-color-common-container-misc-disabled-inverse: #eceef4; // disabled-inverse +@cont-color-common-container-misc-focus: #5572ff; // focus +@cont-color-common-container-misc-focus-inverse: #141e29; // focus-inverse +@cont-color-common-container-misc-transparent: rgba(0, 0, 0, 0); // transparent +@cont-color-common-container-inverse-minimal: rgba(20, 30, 41, 0.08); // minimal +@cont-color-common-container-inverse-subtle: rgba(20, 30, 41, 0.16); // subtle +@cont-color-common-container-inverse-base: #141e29; // base +@cont-color-common-container-inverse-moderate: rgba(20, 30, 41, 0.8); // moderate +@cont-color-common-container-inverse-bold: rgba(20, 30, 41, 0.56); // bold +@cont-color-common-container-persist-on-light-minimal: #f6f7f9; // minimal +@cont-color-common-container-persist-on-light-subtle: #eceef4; // subtle +@cont-color-common-container-persist-on-light-base: #141e29; // base +@cont-color-common-container-persist-on-light-moderate: #232d38; // moderate +@cont-color-common-container-persist-on-light-bold: #323c48; // bold +@cont-color-common-container-persist-on-dark-minimal: #232d38; // minimal +@cont-color-common-container-persist-on-dark-subtle: #323c48; // subtle +@cont-color-common-container-persist-on-dark-base: #ffffff; // base +@cont-color-common-container-persist-on-dark-moderate: #f6f7f9; // moderate +@cont-color-common-container-persist-on-dark-bold: #eceef4; // bold +@cont-color-common-fg-generic-bold: #ffffff; // bold +@cont-color-common-fg-generic-moderate: #c0cadb; // moderate +@cont-color-common-fg-generic-subtle: #9ca7b4; // subtle +@cont-color-common-fg-generic-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-generic-moderate-inverse: #323c48; // moderate-inverse +@cont-color-common-fg-generic-subtle-inverse: #505b67; // subtle-inverse +@cont-color-common-fg-generic-persist-on-light-bold: #141e29; // bold +@cont-color-common-fg-generic-persist-on-light-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-light-subtle: #ffffff; // subtle +@cont-color-common-fg-generic-persist-on-dark-bold: #ffffff; // bold +@cont-color-common-fg-generic-persist-on-dark-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-dark-subtle: #141e29; // subtle +@cont-color-common-fg-generic-disabled-bold: #505b67; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold: #75808c; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold-inverse: #848f9c; // bold-inverse +@cont-color-common-fg-brand-bold: #6d84ff; // bold +@cont-color-common-fg-brand-moderate: #001cf0; // moderate +@cont-color-common-fg-brand-on-brand-bold: #8ea0ff; // bold +@cont-color-common-fg-brand-on-brand-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-brand-on-brand-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-brand-on-brand-moderate: #001cf0; // moderate +@cont-color-common-fg-brand-on-brand-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-brand-on-brand-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-accent-bold: #0096dc; // bold +@cont-color-common-fg-accent-moderate: #005078; // moderate +@cont-color-common-fg-accent-on-accent-bold: #35aef8; // bold +@cont-color-common-fg-accent-on-accent-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-accent-on-accent-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-accent-on-accent-moderate: #005078; // moderate +@cont-color-common-fg-accent-on-accent-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-accent-on-accent-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-primary-bold: #bdc6ff; // bold +@cont-color-common-fg-primary-moderate: #8ea0ff; // moderate +@cont-color-common-fg-primary-on-primary-bold: #8ea0ff; // bold +@cont-color-common-fg-primary-on-primary-bold-alt: #ffffff; // bolt-alt +@cont-color-common-fg-primary-on-primary-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-primary-on-primary-moderate: #001cf0; // moderate +@cont-color-common-fg-primary-on-primary-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-primary-on-primary-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-secondary-bold: #848f9c; // bold +@cont-color-common-fg-secondary-moderate: #424c58; // moderate +@cont-color-common-fg-secondary-on-secondary-bold: #c0cadb; // bold +@cont-color-common-fg-secondary-on-secondary-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-secondary-on-secondary-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-secondary-on-secondary-moderate: #424c58; // moderare==te +@cont-color-common-fg-secondary-on-secondary-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-secondary-on-secondary-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-tertiary-bold: #848f9c; // bold +@cont-color-common-fg-tertiary-moderate: #424c58; // moderate +@cont-color-common-fg-tertiary-on-tertiary-bold: #c0cadb; // bold +@cont-color-common-fg-tertiary-on-tertiary-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-tertiary-on-tertiary-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-tertiary-on-tertiary-moderate: #424c58; // moderare==te +@cont-color-common-fg-tertiary-on-tertiary-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-tertiary-on-tertiary-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-neutral-bold: #848f9c; // bold +@cont-color-common-fg-neutral-moderate: #424c58; // moderate +@cont-color-common-fg-neutral-on-neutral-bold: #9ca7b4; // bold +@cont-color-common-fg-neutral-on-neutral-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-neutral-on-neutral-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-neutral-on-neutral-moderate: #424c58; // moderate +@cont-color-common-fg-neutral-on-neutral-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-neutral-on-neutral-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-negative-bold: #ff5540; // bold +@cont-color-common-fg-negative-moderate: #9c0300; // moderate +@cont-color-common-fg-negative-on-negative-bold: #ff7c68; // bold +@cont-color-common-fg-negative-on-negative-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-negative-on-negative-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-negative-on-negative-moderate: #9c0300; // moderate +@cont-color-common-fg-negative-on-negative-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-negative-on-negative-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-warning-bold: #bb8400; // bold +@cont-color-common-fg-warning-moderate: #654600; // moderate +@cont-color-common-fg-warning-on-warning-bold: #d99a05; // bold +@cont-color-common-fg-warning-on-warning-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-warning-on-warning-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-warning-on-warning-moderate: #654600; // moderate +@cont-color-common-fg-warning-on-warning-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-warning-on-warning-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-positive-bold: #41a062; // bold +@cont-color-common-fg-positive-moderate: #00582b; // moderate +@cont-color-common-fg-positive-on-positive-bold: #58b675; // bold +@cont-color-common-fg-positive-on-positive-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-positive-on-positive-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-positive-on-positive-moderate: #00582b; // moderate +@cont-color-common-fg-positive-on-positive-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-positive-on-positive-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-info-bold: #3b97c2; // bold +@cont-color-common-fg-info-moderate: #00516f; // moderate +@cont-color-common-fg-info-on-info-bold: #58afdc; // bold +@cont-color-common-fg-info-on-info-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-info-on-info-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-info-on-info-moderate: #00516f; // moderate +@cont-color-common-fg-info-on-info-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-info-on-info-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-buy-bold: #41a062; // bold +@cont-color-common-fg-buy-moderate: #00582b; // moderate +@cont-color-common-fg-buy-on-buy-bold: #58b675; // bold +@cont-color-common-fg-buy-on-buy-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-buy-on-buy-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-buy-on-buy-moderate: #00582b; // moderate +@cont-color-common-fg-buy-on-buy-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-buy-on-buy-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-sell-bold: #ff5540; // bold +@cont-color-common-fg-sell-moderate: #9c0300; // moderate +@cont-color-common-fg-sell-on-sell-bold: #ff816d; // bold +@cont-color-common-fg-sell-on-sell-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-sell-on-sell-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-sell-on-sell-moderate: #9c0300; // moderate +@cont-color-common-fg-sell-on-sell-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-sell-on-sell-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-1-bold: #a0aaff; // bold +@cont-color-common-fg-category-1-moderate: #818fff; // moderate +@cont-color-common-fg-category-1-on-category-1-bold: #a0aaff; // bold +@cont-color-common-fg-category-1-on-category-1-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-1-on-category-1-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-1-on-category-1-moderate: #818fff; // moderate +@cont-color-common-fg-category-1-on-category-1-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-1-on-category-1-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-2-bold: #c79eff; // bold +@cont-color-common-fg-category-2-moderate: #b083ee; // moderate +@cont-color-common-fg-category-2-on-category-2-bold: #c79eff; // bold +@cont-color-common-fg-category-2-on-category-2-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-2-on-category-2-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-2-on-category-2-moderate: #b083ee; // moderate +@cont-color-common-fg-category-2-on-category-2-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-2-on-category-2-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-3-bold: #3ac2c5; // bold +@cont-color-common-fg-category-3-moderate: #00aaad; // moderate +@cont-color-common-fg-category-3-on-category-3-bold: #3ac2c5; // bold +@cont-color-common-fg-category-3-on-category-3-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-3-on-category-3-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-3-on-category-3-moderate: #00aaad; // moderate +@cont-color-common-fg-category-3-on-category-3-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-3-on-category-3-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-4-bold: #ff8fa4; // bold +@cont-color-common-fg-category-4-moderate: #ff6186; // moderate +@cont-color-common-fg-category-4-on-category-4-bold: #ff8fa4; // bold +@cont-color-common-fg-category-4-on-category-4-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-4-on-category-4-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-4-on-category-4-moderate: #ff6186; // moderate +@cont-color-common-fg-category-4-on-category-4-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-4-on-category-4-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-5-bold: #ff9471; // bold +@cont-color-common-fg-category-5-moderate: #ff6935; // moderate +@cont-color-common-fg-category-5-on-category-5-bold: #ff9471; // bold +@cont-color-common-fg-category-5-on-category-5-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-5-on-category-5-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-5-on-category-5-moderate: #ff6935; // moderate +@cont-color-common-fg-category-5-on-category-5-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-5-on-category-5-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-6-bold: #b1b0b0; // bold +@cont-color-common-fg-category-6-moderate: #999999; // moderate +@cont-color-common-fg-category-6-on-category-6-bold: #b1b0b0; // bold +@cont-color-common-fg-category-6-on-category-6-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-6-on-category-6-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-6-on-category-6-moderate: #999999; // moderate +@cont-color-common-fg-category-6-on-category-6-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-6-on-category-6-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-7-bold: #d9aa00; // bold +@cont-color-common-fg-category-7-moderate: #bc9300; // moderate +@cont-color-common-fg-category-7-on-category-7-bold: #d9aa00; // bold +@cont-color-common-fg-category-7-on-category-7-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-7-on-category-7-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-7-on-category-7-moderate: #bc9300; // moderate +@cont-color-common-fg-category-7-on-category-7-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-7-on-category-7-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-category-8-bold: #10c88e; // bold +@cont-color-common-fg-category-8-moderate: #00ae7a; // moderate +@cont-color-common-fg-category-8-on-category-8-bold: #10c88e; // bold +@cont-color-common-fg-category-8-on-category-8-bold-alt: #ffffff; // bold-alt +@cont-color-common-fg-category-8-on-category-8-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-category-8-on-category-8-moderate: #00ae7a; // moderate +@cont-color-common-fg-category-8-on-category-8-moderate-alt: #c0cadb; // moderate-alt +@cont-color-common-fg-category-8-on-category-8-moderate-inverse: rgba(20, 30, 41, 0.8); // moderate-inverse +@cont-color-common-fg-inverse-minimal: rgba(255, 255, 255, 0.24); // minimal +@cont-color-common-fg-inverse-subtle: rgba(255, 255, 255, 0.4); // subtle +@cont-color-common-fg-inverse-base: #ffffff; // base +@cont-color-common-fg-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-fg-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-fg-persist-on-dark-minimal: rgba(20, 30, 41, 0.24); // minimal +@cont-color-common-fg-persist-on-dark-subtle: rgba(20, 30, 41, 0.4); // subtle +@cont-color-common-fg-persist-on-dark-base: #141e29; // base +@cont-color-common-fg-persist-on-dark-moderate: rgba(20, 30, 41, 0.8); // moderate +@cont-color-common-fg-persist-on-dark-bold: rgba(20, 30, 41, 0.56); // bold +@cont-color-shell-bg-layer-1: #141e29; +@cont-color-shell-bg-layer-2: #323c48; +@cont-color-shell-bg-layer-3: #323c48; +@cont-color-shell-bg-layer-4: #232d38; +@cont-color-shell-bg-layer-canvas: #232d38; +@cont-color-shell-bg-layer-inverse: #ffffff; +@cont-color-shell-border-on-layer-1-bold: #424c58; +@cont-color-shell-border-on-layer-1-subtle: #323c48; +@cont-color-shell-border-on-layer-2-bold: #646e7b; +@cont-color-shell-border-on-layer-2-subtle: #505b67; +@cont-color-shell-border-on-layer-3-bold: #646e7b; +@cont-color-shell-border-on-layer-3-subtle: #505b67; +@cont-color-shell-border-on-layer-4-bold: #646e7b; +@cont-color-shell-border-on-layer-4-subtle: #424c58; +@cont-color-shell-border-on-layer-canvas-bold: #505b67; +@cont-color-shell-border-on-layer-canvas-subtle: #424c58; +@cont-color-shell-border-on-layer-inverse-bold: #c0cadb; +@cont-color-shell-border-on-layer-inverse-subtle: #dee2eb; +@cont-color-shell-elevation-shadow-1: rgba(20, 30, 41, 0.08); +@cont-color-shell-elevation-shadow-2: rgba(20, 30, 41, 0.48); +@cont-color-action-bg-neutral-minimal: #232d38; +@cont-color-action-bg-neutral-subtle: #323c48; +@cont-color-action-bg-neutral-base: #232d38; +@cont-color-action-bg-neutral-moderate: #323c48; +@cont-color-action-bg-neutral-bold: rgba(0, 0, 0, 0); +@cont-color-action-bg-primary-minimal: #00076d; +@cont-color-action-bg-primary-subtle: #000d96; +@cont-color-action-bg-primary-base: #6d84ff; +@cont-color-action-bg-primary-moderate: #8ea0ff; +@cont-color-action-bg-primary-bold: #a4b1ff; +@cont-color-action-bg-secondary-minimal: #141e29; +@cont-color-action-bg-secondary-subtle: #232d38; +@cont-color-action-bg-secondary-base: #848f9c; +@cont-color-action-bg-secondary-moderate: #9ca7b4; +@cont-color-action-bg-secondary-bold: #adb7c5; +@cont-color-action-bg-tertiary-minimal: rgba(132, 143, 156, 0.08); +@cont-color-action-bg-tertiary-subtle: rgba(132, 143, 156, 0.16); +@cont-color-action-bg-tertiary-base: #848f9c; +@cont-color-action-bg-tertiary-moderate: rgba(132, 143, 156, 0.8); +@cont-color-action-bg-tertiary-bold: rgba(132, 143, 156, 0.56); +@cont-color-action-bg-negative-minimal: #450100; +@cont-color-action-bg-negative-subtle: #600100; +@cont-color-action-bg-negative-base: #ff5540; +@cont-color-action-bg-negative-moderate: #ff7c68; +@cont-color-action-bg-negative-bold: #ff9b8b; +@cont-color-action-bg-positive-minimal: #00230e; +@cont-color-action-bg-positive-subtle: #003417; +@cont-color-action-bg-positive-base: #41a062; +@cont-color-action-bg-positive-moderate: #58b675; +@cont-color-action-bg-positive-bold: #6bc987; +@cont-color-action-bg-buy-minimal: #00230e; +@cont-color-action-bg-buy-subtle: #003417; +@cont-color-action-bg-buy-base: #41a062; +@cont-color-action-bg-buy-moderate: #58b675; +@cont-color-action-bg-buy-bold: #6bc987; +@cont-color-action-bg-sell-minimal: #450100; +@cont-color-action-bg-sell-subtle: #600100; +@cont-color-action-bg-sell-base: #ff5540; +@cont-color-action-bg-sell-moderate: #ff816d; +@cont-color-action-bg-sell-bold: #ff9b8b; +@cont-color-action-bg-inverse-minimal: rgba(20, 30, 41, 0.08); +@cont-color-action-bg-inverse-subtle: rgba(20, 30, 41, 0.16); +@cont-color-action-bg-inverse-base: #141e29; +@cont-color-action-bg-inverse-moderate: rgba(20, 30, 41, 0.8); +@cont-color-action-bg-inverse-bold: rgba(20, 30, 41, 0.56); +@cont-color-action-bg-persist-on-light-minimal: #f6f7f9; +@cont-color-action-bg-persist-on-light-subtle: #eceef4; +@cont-color-action-bg-persist-on-light-base: #141e29; +@cont-color-action-bg-persist-on-light-moderate: #232d38; +@cont-color-action-bg-persist-on-light-bold: #323c48; +@cont-color-action-bg-persist-on-dark-minimal: #232d38; +@cont-color-action-bg-persist-on-dark-subtle: #323c48; +@cont-color-action-bg-persist-on-dark-base: #ffffff; +@cont-color-action-bg-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-bg-persist-on-dark-bold: #eceef4; +@cont-color-action-fg-on-neutral-minimal: #141e29; +@cont-color-action-fg-on-neutral-subtle: #141e29; +@cont-color-action-fg-on-neutral-base: #ffffff; +@cont-color-action-fg-on-neutral-moderate: #ffffff; +@cont-color-action-fg-on-neutral-bold: #ffffff; +@cont-color-action-fg-on-primary-minimal: #8ea0ff; +@cont-color-action-fg-on-primary-subtle: #8ea0ff; +@cont-color-action-fg-on-primary-base: #141e29; +@cont-color-action-fg-on-primary-moderate: #141e29; +@cont-color-action-fg-on-primary-bold: #141e29; +@cont-color-action-fg-on-secondary-minimal: #ffffff; +@cont-color-action-fg-on-secondary-subtle: #ffffff; +@cont-color-action-fg-on-secondary-base: #141e29; +@cont-color-action-fg-on-secondary-moderate: #141e29; +@cont-color-action-fg-on-secondary-bold: #141e29; +@cont-color-action-fg-on-tertiary-minimal: #ffffff; +@cont-color-action-fg-on-tertiary-subtle: #ffffff; +@cont-color-action-fg-on-tertiary-base: #141e29; +@cont-color-action-fg-on-tertiary-moderate: #141e29; +@cont-color-action-fg-on-tertiary-bold: #141e29; +@cont-color-action-fg-on-negative-minimal: #ff7c68; +@cont-color-action-fg-on-negative-subtle: #ff7c68; +@cont-color-action-fg-on-negative-base: #141e29; +@cont-color-action-fg-on-negative-moderate: #141e29; +@cont-color-action-fg-on-negative-bold: #141e29; +@cont-color-action-fg-on-positive-minimal: #58b675; +@cont-color-action-fg-on-positive-subtle: #58b675; +@cont-color-action-fg-on-positive-base: #141e29; +@cont-color-action-fg-on-positive-moderate: #141e29; +@cont-color-action-fg-on-positive-bold: #141e29; +@cont-color-action-fg-on-buy-minimal: #58b675; +@cont-color-action-fg-on-buy-subtle: #58b675; +@cont-color-action-fg-on-buy-base: #141e29; +@cont-color-action-fg-on-buy-moderate: #141e29; +@cont-color-action-fg-on-buy-bold: #141e29; +@cont-color-action-fg-on-sell-minimal: #ff816d; +@cont-color-action-fg-on-sell-subtle: #ff816d; +@cont-color-action-fg-on-sell-base: #141e29; +@cont-color-action-fg-on-sell-moderate: #141e29; +@cont-color-action-fg-on-sell-bold: #141e29; +@cont-color-action-fg-on-inverse-minimal: #141e29; +@cont-color-action-fg-on-inverse-subtle: #141e29; +@cont-color-action-fg-on-inverse-base: #ffffff; +@cont-color-action-fg-on-inverse-moderate: #ffffff; +@cont-color-action-fg-on-inverse-bold: #ffffff; +@cont-color-action-fg-on-persist-on-light-minimal: #141e29; +@cont-color-action-fg-on-persist-on-light-subtle: #141e29; +@cont-color-action-fg-on-persist-on-light-base: #ffffff; +@cont-color-action-fg-on-persist-on-light-moderate: #ffffff; +@cont-color-action-fg-on-persist-on-light-bold: #ffffff; +@cont-color-action-fg-on-persist-on-dark-minimal: #ffffff; +@cont-color-action-fg-on-persist-on-dark-subtle: #ffffff; +@cont-color-action-fg-on-persist-on-dark-base: #141e29; +@cont-color-action-fg-on-persist-on-dark-moderate: #141e29; +@cont-color-action-fg-on-persist-on-dark-bold: #141e29; +@cont-color-action-fg-on-transparent-minimal: #8ea0ff; +@cont-color-action-fg-on-transparent-subtle: #8ea0ff; +@cont-color-action-fg-on-transparent-base: #8ea0ff; +@cont-color-action-fg-on-transparent-moderate: #bdc6ff; +@cont-color-action-fg-on-transparent-bold: #bdc6ff; +@cont-color-action-border-neutral-minimal: #232d38; +@cont-color-action-border-neutral-subtle: #323c48; +@cont-color-action-border-neutral-base: #424c58; +@cont-color-action-border-neutral-moderate: #646e7b; +@cont-color-action-border-neutral-bold: #646e7b; +@cont-color-action-border-primary-minimal: #00076d; +@cont-color-action-border-primary-subtle: #000d96; +@cont-color-action-border-primary-base: #6d84ff; +@cont-color-action-border-primary-moderate: #8ea0ff; +@cont-color-action-border-primary-bold: #a4b1ff; +@cont-color-action-border-secondary-minimal: #141e29; +@cont-color-action-border-secondary-subtle: #232d38; +@cont-color-action-border-secondary-base: #848f9c; +@cont-color-action-border-secondary-moderate: #9ca7b4; +@cont-color-action-border-secondary-bold: #adb7c5; +@cont-color-action-border-tertiary-minimal: #141e29; +@cont-color-action-border-tertiary-subtle: #232d38; +@cont-color-action-border-tertiary-base: #848f9c; +@cont-color-action-border-tertiary-moderate: #9ca7b4; +@cont-color-action-border-tertiary-bold: #adb7c5; +@cont-color-action-border-negative-minimal: #450100; +@cont-color-action-border-negative-subtle: #600100; +@cont-color-action-border-negative-base: #ff5540; +@cont-color-action-border-negative-moderate: #ff7c68; +@cont-color-action-border-negative-bold: #ff9b8b; +@cont-color-action-border-positive-minimal: #00230e; +@cont-color-action-border-positive-subtle: #003417; +@cont-color-action-border-positive-base: #41a062; +@cont-color-action-border-positive-moderate: #58b675; +@cont-color-action-border-positive-bold: #6bc987; +@cont-color-action-border-buy-minimal: #00230e; +@cont-color-action-border-buy-subtle: #003417; +@cont-color-action-border-buy-base: #41a062; +@cont-color-action-border-buy-moderate: #58b675; +@cont-color-action-border-buy-bold: #6bc987; +@cont-color-action-border-sell-minimal: #450100; +@cont-color-action-border-sell-subtle: #600100; +@cont-color-action-border-sell-base: #ff5540; +@cont-color-action-border-sell-moderate: #ff816d; +@cont-color-action-border-sell-bold: #ff9b8b; +@cont-color-action-border-inverse-minimal: rgba(20, 30, 41, 0.08); +@cont-color-action-border-inverse-subtle: rgba(20, 30, 41, 0.16); +@cont-color-action-border-inverse-base: #141e29; +@cont-color-action-border-inverse-moderate: rgba(20, 30, 41, 0.8); +@cont-color-action-border-inverse-bold: rgba(20, 30, 41, 0.56); +@cont-color-action-border-persist-on-light-minimal: rgba(35, 45, 56, 0.24); +@cont-color-action-border-persist-on-light-subtle: rgba(35, 45, 56, 0.4); +@cont-color-action-border-persist-on-light-base: #141e29; +@cont-color-action-border-persist-on-light-moderate: rgba(35, 45, 56, 0.8); +@cont-color-action-border-persist-on-light-bold: rgba(35, 45, 56, 0.56); +@cont-color-action-border-persist-on-dark-minimal: #232d38; +@cont-color-action-border-persist-on-dark-subtle: #323c48; +@cont-color-action-border-persist-on-dark-base: #ffffff; +@cont-color-action-border-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-border-persist-on-dark-bold: #eceef4; +@cont-color-status-bg-neutral-base: #848f9c; +@cont-color-status-bg-neutral-minimal: #141e29; +@cont-color-status-bg-negative-base: #ff5540; +@cont-color-status-bg-negative-minimal: #450100; +@cont-color-status-bg-warning-base: #ffbe42; +@cont-color-status-bg-warning-minimal: #2a1b00; +@cont-color-status-bg-positive-base: #41a062; +@cont-color-status-bg-positive-minimal: #00230e; +@cont-color-status-bg-info-base: #3b97c2; +@cont-color-status-bg-info-minimal: #00202f; +@cont-color-status-bg-buy-base: #41a062; +@cont-color-status-bg-buy-minimal: #00230e; +@cont-color-status-bg-sell-base: #ff5540; +@cont-color-status-bg-sell-minimal: #450100; +@cont-color-status-fg-neutral-base: #848f9c; +@cont-color-status-fg-on-neutral-base: #141e29; +@cont-color-status-fg-on-neutral-minimal: #848f9c; +@cont-color-status-fg-negative-base: #ff5540; +@cont-color-status-fg-on-negative-base: #141e29; +@cont-color-status-fg-on-negative-minimal: #ff7c68; +@cont-color-status-fg-warning-base: #bb8400; +@cont-color-status-fg-on-warning-base: #141e29; +@cont-color-status-fg-on-warning-minimal: #d99a05; +@cont-color-status-fg-positive-base: #41a062; +@cont-color-status-fg-on-positive-base: #141e29; +@cont-color-status-fg-on-positive-minimal: #58b675; +@cont-color-status-fg-info-base: #3b97c2; +@cont-color-status-fg-on-info-base: #141e29; +@cont-color-status-fg-on-info-minimal: #58afdc; +@cont-color-status-fg-buy-base: #41a062; +@cont-color-status-fg-on-buy-base: #141e29; +@cont-color-status-fg-on-buy-minimal: #58b675; +@cont-color-status-fg-sell-base: #ff5540; +@cont-color-status-fg-on-sell-base: #141e29; +@cont-color-status-fg-on-sell-minimal: #ff816d; +@cont-color-status-border-neutral-base: #848f9c; +@cont-color-status-border-neutral-minimal: #141e29; +@cont-color-status-border-negative-base: #ff5540; +@cont-color-status-border-negative-minimal: #450100; +@cont-color-status-border-warning-base: #ffbe42; +@cont-color-status-border-warning-minimal: #2a1b00; +@cont-color-status-border-positive-base: #41a062; +@cont-color-status-border-positive-minimal: #00230e; +@cont-color-status-border-info-base: #3b97c2; +@cont-color-status-border-info-minimal: #00202f; +@cont-color-status-border-buy-base: #41a062; +@cont-color-status-border-buy-minimal: #00230e; +@cont-color-status-border-sell-base: #ff5540; +@cont-color-status-border-sell-minimal: #450100; +@cont-color-data-viz-categorical-bg-category-1: #6173ff; +@cont-color-data-viz-categorical-bg-category-2: #eddcff; +@cont-color-data-viz-categorical-bg-category-3: #009093; +@cont-color-data-viz-categorical-bg-category-4: #ffd9de; +@cont-color-data-viz-categorical-bg-category-5: #e94800; +@cont-color-data-viz-categorical-bg-category-6: #f6e0b3; +@cont-color-data-viz-categorical-bg-category-7: #818181; +@cont-color-data-viz-categorical-bg-category-8: #c9ead6; +@cont-color-data-viz-categorical-bg-category-9: #dfe0ff; +@cont-color-data-viz-categorical-bg-category-10: #986bd5; +@cont-color-data-viz-categorical-bg-category-11: #c4e9ea; +@cont-color-data-viz-categorical-bg-category-12: #f42a6b; +@cont-color-data-viz-categorical-bg-category-13: #ffdbd0; +@cont-color-data-viz-categorical-bg-category-14: #a07c00; +@cont-color-data-viz-categorical-bg-category-15: #e3e2e2; +@cont-color-data-viz-categorical-bg-category-16: #009367; +@cont-color-data-viz-categorical-bg-category-17: #a0aaff; +@cont-color-data-viz-categorical-bg-category-18: #c79eff; +@cont-color-data-viz-categorical-bg-category-19: #3ac2c5; +@cont-color-data-viz-categorical-bg-category-20: #ff8fa4; +@cont-color-data-viz-categorical-bg-category-21: #ff9471; +@cont-color-data-viz-categorical-bg-category-22: #d9aa00; +@cont-color-data-viz-categorical-bg-category-23: #b1b0b0; +@cont-color-data-viz-categorical-bg-category-24: #10c88e; +@cont-color-data-viz-diverging-bg-positive-negative-positive-100: #003417; +@cont-color-data-viz-diverging-bg-positive-negative-positive-200: #004521; +@cont-color-data-viz-diverging-bg-positive-negative-positive-300: #00582b; +@cont-color-data-viz-diverging-bg-positive-negative-positive-400: #006835; +@cont-color-data-viz-diverging-bg-positive-negative-positive-500: #177d44; +@cont-color-data-viz-diverging-bg-positive-negative-positive-600: #41a062; +@cont-color-data-viz-diverging-bg-positive-negative-positive-700: #58b675; +@cont-color-data-viz-diverging-bg-positive-negative-positive-800: #6bc987; +@cont-color-data-viz-diverging-bg-positive-negative-positive-900: #7fde99; +@cont-color-data-viz-diverging-bg-positive-negative-positive-1000: #b3f1bf; +@cont-color-data-viz-diverging-bg-positive-negative-negative-100: #600100; +@cont-color-data-viz-diverging-bg-positive-negative-negative-200: #7d0200; +@cont-color-data-viz-diverging-bg-positive-negative-negative-300: #9c0300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-400: #b70300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-500: #d71c0f; +@cont-color-data-viz-diverging-bg-positive-negative-negative-600: #ff5540; +@cont-color-data-viz-diverging-bg-positive-negative-negative-700: #ff7c68; +@cont-color-data-viz-diverging-bg-positive-negative-negative-800: #ff9b8b; +@cont-color-data-viz-diverging-bg-positive-negative-negative-900: #ffb8ac; +@cont-color-data-viz-diverging-bg-positive-negative-negative-1000: #ffdad4; +@cont-color-data-viz-diverging-bg-hot-cold-hot-100: #600100; +@cont-color-data-viz-diverging-bg-hot-cold-hot-200: #7d0200; +@cont-color-data-viz-diverging-bg-hot-cold-hot-300: #9c0300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-400: #b70300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-500: #d71c0f; +@cont-color-data-viz-diverging-bg-hot-cold-hot-600: #ff5540; +@cont-color-data-viz-diverging-bg-hot-cold-hot-700: #ff7c68; +@cont-color-data-viz-diverging-bg-hot-cold-hot-800: #ff9b8b; +@cont-color-data-viz-diverging-bg-hot-cold-hot-900: #ffb8ac; +@cont-color-data-viz-diverging-bg-hot-cold-hot-1000: #ffdad4; +@cont-color-data-viz-diverging-bg-hot-cold-cold-100: #00095d; +@cont-color-data-viz-diverging-bg-hot-cold-cold-200: #001490; +@cont-color-data-viz-diverging-bg-hot-cold-cold-300: #0020c6; +@cont-color-data-viz-diverging-bg-hot-cold-cold-400: #1935ef; +@cont-color-data-viz-diverging-bg-hot-cold-cold-500: #3d54ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-600: #6173ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-700: #818fff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-800: #a0aaff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-900: #c0c5ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-1000: #dfe0ff; +@cont-color-data-viz-diverging-bg-buy-sell-buy-100: #003417; +@cont-color-data-viz-diverging-bg-buy-sell-buy-200: #004521; +@cont-color-data-viz-diverging-bg-buy-sell-buy-300: #00582b; +@cont-color-data-viz-diverging-bg-buy-sell-buy-400: #006835; +@cont-color-data-viz-diverging-bg-buy-sell-buy-500: #177d44; +@cont-color-data-viz-diverging-bg-buy-sell-buy-600: #41a062; +@cont-color-data-viz-diverging-bg-buy-sell-buy-700: #58b675; +@cont-color-data-viz-diverging-bg-buy-sell-buy-800: #6bc987; +@cont-color-data-viz-diverging-bg-buy-sell-buy-900: #7fde99; +@cont-color-data-viz-diverging-bg-buy-sell-buy-1000: #b3f1bf; +@cont-color-data-viz-diverging-bg-buy-sell-sell-100: #600100; +@cont-color-data-viz-diverging-bg-buy-sell-sell-200: #7d0200; +@cont-color-data-viz-diverging-bg-buy-sell-sell-300: #9c0300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-400: #b70300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-500: #d71c0f; +@cont-color-data-viz-diverging-bg-buy-sell-sell-600: #ff5540; +@cont-color-data-viz-diverging-bg-buy-sell-sell-700: #ff816d; +@cont-color-data-viz-diverging-bg-buy-sell-sell-800: #ff9b8b; +@cont-color-data-viz-diverging-bg-buy-sell-sell-900: #ffb8ac; +@cont-color-data-viz-diverging-bg-buy-sell-sell-1000: #ffdad4; +@cont-color-data-viz-sequencial-option-1-100: #dfe0ff; +@cont-color-data-viz-sequencial-option-1-200: #c0c5ff; +@cont-color-data-viz-sequencial-option-1-300: #a0aaff; +@cont-color-data-viz-sequencial-option-1-400: #818fff; +@cont-color-data-viz-sequencial-option-1-500: #6173ff; +@cont-color-data-viz-sequencial-option-1-600: #3d54ff; +@cont-color-data-viz-sequencial-option-1-700: #1935ef; +@cont-color-data-viz-sequencial-option-1-800: #0020c6; +@cont-color-data-viz-sequencial-option-1-900: #001490; +@cont-color-data-viz-sequencial-option-1-1000: #00095d; +@cont-color-data-viz-sequencial-option-2-100: #eddcff; +@cont-color-data-viz-sequencial-option-2-200: #dabdff; +@cont-color-data-viz-sequencial-option-2-300: #c79eff; +@cont-color-data-viz-sequencial-option-2-400: #b083ee; +@cont-color-data-viz-sequencial-option-2-500: #986bd5; +@cont-color-data-viz-sequencial-option-2-600: #8054bc; +@cont-color-data-viz-sequencial-option-2-700: #693da4; +@cont-color-data-viz-sequencial-option-2-800: #53258d; +@cont-color-data-viz-sequencial-option-2-900: #3e0679; +@cont-color-data-viz-sequencial-option-2-1000: #260050; +@cont-color-data-viz-sequencial-option-3-100: #c4e9ea; +@cont-color-data-viz-sequencial-option-3-200: #8fd6d6; +@cont-color-data-viz-sequencial-option-3-300: #3ac2c5; +@cont-color-data-viz-sequencial-option-3-400: #00aaad; +@cont-color-data-viz-sequencial-option-3-500: #009093; +@cont-color-data-viz-sequencial-option-3-600: #007779; +@cont-color-data-viz-sequencial-option-3-700: #005f61; +@cont-color-data-viz-sequencial-option-3-800: #004849; +@cont-color-data-viz-sequencial-option-3-900: #003233; +@cont-color-data-viz-sequencial-option-3-1000: #001e1e; +@cont-color-data-viz-sequencial-option-4-100: #ffd9de; +@cont-color-data-viz-sequencial-option-4-200: #ffb6c1; +@cont-color-data-viz-sequencial-option-4-300: #ff8fa4; +@cont-color-data-viz-sequencial-option-4-400: #ff6186; +@cont-color-data-viz-sequencial-option-4-500: #f42a6b; +@cont-color-data-viz-sequencial-option-4-600: #d30055; +@cont-color-data-viz-sequencial-option-4-700: #aa0043; +@cont-color-data-viz-sequencial-option-4-800: #830032; +@cont-color-data-viz-sequencial-option-4-900: #5e0022; +@cont-color-data-viz-sequencial-option-4-1000: #3c0013; +@cont-color-data-viz-sequencial-option-5-100: #ffdbd0; +@cont-color-data-viz-sequencial-option-5-200: #ffb9a3; +@cont-color-data-viz-sequencial-option-5-300: #ff9471; +@cont-color-data-viz-sequencial-option-5-400: #ff6935; +@cont-color-data-viz-sequencial-option-5-500: #e94800; +@cont-color-data-viz-sequencial-option-5-600: #c23b00; +@cont-color-data-viz-sequencial-option-5-700: #9c2e00; +@cont-color-data-viz-sequencial-option-5-800: #782100; +@cont-color-data-viz-sequencial-option-5-900: #561500; +@cont-color-data-viz-sequencial-option-5-1000: #360a00; +@cont-color-data-viz-sequencial-option-6-100: #e3e2e2; +@cont-color-data-viz-sequencial-option-6-200: #cac9c9; +@cont-color-data-viz-sequencial-option-6-300: #b1b0b0; +@cont-color-data-viz-sequencial-option-6-400: #999999; +@cont-color-data-viz-sequencial-option-6-500: #818181; +@cont-color-data-viz-sequencial-option-6-600: #6a6b6b; +@cont-color-data-viz-sequencial-option-6-700: #545555; +@cont-color-data-viz-sequencial-option-6-800: #3f4040; +@cont-color-data-viz-sequencial-option-6-900: #2b2c2c; +@cont-color-data-viz-sequencial-option-6-1000: #181a1a; +@cont-color-data-viz-sequencial-option-7-100: #f6e0b3; +@cont-color-data-viz-sequencial-option-7-200: #eac661; +@cont-color-data-viz-sequencial-option-7-300: #d9aa00; +@cont-color-data-viz-sequencial-option-7-400: #bc9300; +@cont-color-data-viz-sequencial-option-7-500: #a07c00; +@cont-color-data-viz-sequencial-option-7-600: #846700; +@cont-color-data-viz-sequencial-option-7-700: #6a5100; +@cont-color-data-viz-sequencial-option-7-800: #503d00; +@cont-color-data-viz-sequencial-option-7-900: #382a00; +@cont-color-data-viz-sequencial-option-7-1000: #221800; +@cont-color-data-viz-sequencial-option-8-100: #c9ead6; +@cont-color-data-viz-sequencial-option-8-200: #92d7b5; +@cont-color-data-viz-sequencial-option-8-300: #10c88e; +@cont-color-data-viz-sequencial-option-8-400: #00ae7a; +@cont-color-data-viz-sequencial-option-8-500: #009367; +@cont-color-data-viz-sequencial-option-8-600: #007a54; +@cont-color-data-viz-sequencial-option-8-700: #006142; +@cont-color-data-viz-sequencial-option-8-800: #004a31; +@cont-color-data-viz-sequencial-option-8-900: #003321; +@cont-color-data-viz-sequencial-option-8-1000: #001f12; +@cont-color-data-viz-status-bg-negative-base: #d71c0f; +@cont-color-data-viz-status-bg-negative-bold: #9c0300; +@cont-color-data-viz-status-bg-negative-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-warning-base: #ffbe42; +@cont-color-data-viz-status-bg-warning-bold: #906505; +@cont-color-data-viz-status-bg-warning-subtle: #ffdeab; +@cont-color-data-viz-status-bg-positive-base: #177d44; +@cont-color-data-viz-status-bg-positive-bold: #00582b; +@cont-color-data-viz-status-bg-positive-subtle: #6bc987; +@cont-color-data-viz-status-bg-info-base: #08759d; +@cont-color-data-viz-status-bg-info-bold: #00516f; +@cont-color-data-viz-status-bg-info-subtle: #7abfe5; +@cont-color-data-viz-status-bg-neutral-base: #646e7b; +@cont-color-data-viz-status-bg-neutral-bold: #424c58; +@cont-color-data-viz-status-bg-neutral-subtle: #adb7c5; +@cont-color-data-viz-status-bg-buy-base: #177d44; +@cont-color-data-viz-status-bg-buy-bold: #00582b; +@cont-color-data-viz-status-bg-buy-subtle: #6bc987; +@cont-color-data-viz-status-bg-sell-base: #d71c0f; +@cont-color-data-viz-status-bg-sell-bold: #9c0300; +@cont-color-data-viz-status-bg-sell-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-category-1-base: #818fff; +@cont-color-data-viz-status-bg-category-1-bold: #001490; +@cont-color-data-viz-status-bg-category-1-subtle: #001490; +@cont-color-data-viz-status-bg-category-2-base: #b083ee; +@cont-color-data-viz-status-bg-category-2-bold: #3e0679; +@cont-color-data-viz-status-bg-category-2-subtle: #3e0679; +@cont-color-data-viz-status-bg-category-3-base: #00aaad; +@cont-color-data-viz-status-bg-category-3-bold: #003233; +@cont-color-data-viz-status-bg-category-3-subtle: #003233; +@cont-color-data-viz-status-bg-category-4-base: #ff6186; +@cont-color-data-viz-status-bg-category-4-bold: #5e0022; +@cont-color-data-viz-status-bg-category-4-subtle: #5e0022; +@cont-color-data-viz-status-bg-category-5-base: #ff6935; +@cont-color-data-viz-status-bg-category-5-bold: #561500; +@cont-color-data-viz-status-bg-category-5-subtle: #5e0022; +@cont-color-data-viz-status-bg-category-6-base: #999999; +@cont-color-data-viz-status-bg-category-6-bold: #2b2c2c; +@cont-color-data-viz-status-bg-category-6-subtle: #2b2c2c; +@cont-color-data-viz-status-bg-category-7-base: #bc9300; +@cont-color-data-viz-status-bg-category-7-bold: #382a00; +@cont-color-data-viz-status-bg-category-7-subtle: #382a00; +@cont-color-data-viz-status-bg-category-8-base: #00ae7a; +@cont-color-data-viz-status-bg-category-8-bold: #003321; +@cont-color-data-viz-status-bg-category-8-subtle: #003321; +@cont-color-data-viz-status-fg-neutral-base: #848f9c; +@cont-color-data-viz-status-fg-on-neutral-base: #141e29; +@cont-color-data-viz-status-fg-on-neutral-minimal: #848f9c; +@cont-color-data-viz-status-fg-negative-base: #ff5540; +@cont-color-data-viz-status-fg-on-negative-base: #141e29; +@cont-color-data-viz-status-fg-on-negative-minimal: #ff7c68; +@cont-color-data-viz-status-fg-warning-base: #bb8400; +@cont-color-data-viz-status-fg-on-warning-base: #141e29; +@cont-color-data-viz-status-fg-on-warning-minimal: #d99a05; +@cont-color-data-viz-status-fg-positive-base: #41a062; +@cont-color-data-viz-status-fg-on-positive-base: #141e29; +@cont-color-data-viz-status-fg-on-positive-minimal: #58b675; +@cont-color-data-viz-status-fg-info-base: #3b97c2; +@cont-color-data-viz-status-fg-on-info-base: #141e29; +@cont-color-data-viz-status-fg-on-info-minimal: #58afdc; +@cont-color-data-viz-status-fg-buy-base: #41a062; +@cont-color-data-viz-status-fg-on-buy-base: #141e29; +@cont-color-data-viz-status-fg-on-buy-minimal: #58b675; +@cont-color-data-viz-status-fg-sell-base: #ff5540; +@cont-color-data-viz-status-fg-on-sell-base: #141e29; +@cont-color-data-viz-status-fg-on-sell-minimal: #ff816d; +@cont-color-data-viz-status-fg-category-1-base: #818fff; +@cont-color-data-viz-status-fg-on-category-1-base: #141e29; +@cont-color-data-viz-status-fg-on-category-1-minimal: #818fff; +@cont-color-data-viz-status-fg-category-2-base: #b083ee; +@cont-color-data-viz-status-fg-on-category-2-base: #141e29; +@cont-color-data-viz-status-fg-on-category-2-minimal: #b083ee; +@cont-color-data-viz-status-fg-category-3-base: #00aaad; +@cont-color-data-viz-status-fg-on-category-3-base: #141e29; +@cont-color-data-viz-status-fg-on-category-3-minimal: #00aaad; +@cont-color-data-viz-status-fg-category-4-base: #ff6186; +@cont-color-data-viz-status-fg-on-category-4-base: #141e29; +@cont-color-data-viz-status-fg-on-category-4-minimal: #ff6186; +@cont-color-data-viz-status-fg-category-5-base: #ff6935; +@cont-color-data-viz-status-fg-on-category-5-base: #141e29; +@cont-color-data-viz-status-fg-on-category-5-minimal: #ff6935; +@cont-color-data-viz-status-fg-category-6-base: #999999; +@cont-color-data-viz-status-fg-on-category-6-base: #141e29; +@cont-color-data-viz-status-fg-on-category-6-minimal: #999999; +@cont-color-data-viz-status-fg-category-7-base: #bc9300; +@cont-color-data-viz-status-fg-on-category-7-base: #141e29; +@cont-color-data-viz-status-fg-on-category-7-minimal: #bc9300; +@cont-color-data-viz-status-fg-category-8-base: #00ae7a; +@cont-color-data-viz-status-fg-on-category-8-base: #141e29; +@cont-color-data-viz-status-fg-on-category-8-minimal: #00ae7a; +@cont-color-data-viz-status-border-neutral-base: #848f9c; +@cont-color-data-viz-status-border-neutral-minimal: #141e29; +@cont-color-data-viz-status-border-negative-base: #ff5540; +@cont-color-data-viz-status-border-negative-minimal: #450100; +@cont-color-data-viz-status-border-warning-base: #ffbe42; +@cont-color-data-viz-status-border-warning-minimal: #2a1b00; +@cont-color-data-viz-status-border-positive-base: #41a062; +@cont-color-data-viz-status-border-positive-minimal: #00230e; +@cont-color-data-viz-status-border-info-base: #3b97c2; +@cont-color-data-viz-status-border-info-minimal: #00202f; +@cont-color-data-viz-status-border-buy-base: #41a062; +@cont-color-data-viz-status-border-buy-minimal: #00230e; +@cont-color-data-viz-status-border-sell-base: #ff5540; +@cont-color-data-viz-status-border-sell-minimal: #450100; +@cont-color-data-viz-status-border-category-1-base: #818fff; +@cont-color-data-viz-status-border-category-1-minimal: #0020c6; +@cont-color-data-viz-status-border-category-2-base: #b083ee; +@cont-color-data-viz-status-border-category-2-minimal: #53258d; +@cont-color-data-viz-status-border-category-3-base: #00aaad; +@cont-color-data-viz-status-border-category-3-minimal: #004849; +@cont-color-data-viz-status-border-category-4-base: #ff6186; +@cont-color-data-viz-status-border-category-4-minimal: #830032; +@cont-color-data-viz-status-border-category-5-base: #ff6935; +@cont-color-data-viz-status-border-category-5-minimal: #782100; +@cont-color-data-viz-status-border-category-6-base: #999999; +@cont-color-data-viz-status-border-category-6-minimal: #3f4040; +@cont-color-data-viz-status-border-category-7-base: #bc9300; +@cont-color-data-viz-status-border-category-7-minimal: #503d00; +@cont-color-data-viz-status-border-category-8-base: #00ae7a; +@cont-color-data-viz-status-border-category-8-minimal: #004a31; +@cont-color-control-bg-minimal: #232d38; +@cont-color-control-bg-subtle: #323c48; +@cont-color-control-bg-base: #ffffff; +@cont-color-control-bg-moderate: #9ca7b4; +@cont-color-control-bg-bold: #848f9c; +@cont-color-control-border-minimal: #424c58; +@cont-color-control-border-subtle: #646e7b; +@cont-color-control-border-base: #ffffff; +@cont-color-control-border-moderate: #9ca7b4; +@cont-color-control-border-bold: #848f9c; +@cont-color-control-fg-on-minimal: #9ca7b4; +@cont-color-control-fg-on-subtle: #ffffff; +@cont-color-control-fg-on-base: #141e29; +@cont-color-control-fg-on-moderate: #141e29; +@cont-color-control-fg-on-bold: #141e29; +@cont-color-field-bg-on-canvas-base: #323c48; +@cont-color-field-bg-on-layer-1-base: #232d38; +@cont-color-field-bg-on-layer-2-base: #424c58; +@cont-color-field-bg-on-layer-3-base: #424c58; +@cont-color-field-bg-on-layer-4-base: #323c48; +@cont-color-field-border-on-canvas-bold: #e1f0ff; +@cont-color-field-border-on-canvas-moderate: #75808c; +@cont-color-field-border-on-canvas-subtle: #75808c; +@cont-color-field-border-on-layer-1-bold: #e1f0ff; +@cont-color-field-border-on-layer-1-moderate: #75808c; +@cont-color-field-border-on-layer-1-subtle: #646e7b; +@cont-color-field-border-on-layer-2-bold: #e1f0ff; +@cont-color-field-border-on-layer-2-moderate: #75808c; +@cont-color-field-border-on-layer-2-subtle: #848f9c; +@cont-color-field-border-on-layer-3-bold: #e1f0ff; +@cont-color-field-border-on-layer-3-moderate: #75808c; +@cont-color-field-border-on-layer-3-subtle: #848f9c; +@cont-color-field-border-on-layer-4-bold: #e1f0ff; +@cont-color-field-border-on-layer-4-moderate: #75808c; +@cont-color-field-border-on-layer-4-subtle: #75808c; +@cont-color-field-fg-on-canvas-bold: #ffffff; +@cont-color-field-fg-on-canvas-moderate: #c0cadb; +@cont-color-field-fg-on-canvas-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-1-bold: #ffffff; +@cont-color-field-fg-on-layer-1-moderate: #c0cadb; +@cont-color-field-fg-on-layer-1-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-2-bold: #ffffff; +@cont-color-field-fg-on-layer-2-moderate: #c0cadb; +@cont-color-field-fg-on-layer-2-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-3-bold: #ffffff; +@cont-color-field-fg-on-layer-3-moderate: #c0cadb; +@cont-color-field-fg-on-layer-3-subtle: #9ca7b4; +@cont-color-field-fg-on-layer-4-bold: #ffffff; +@cont-color-field-fg-on-layer-4-moderate: #c0cadb; +@cont-color-field-fg-on-layer-4-subtle: #9ca7b4; +@cont-color-menu-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-canvas-subtle: #323c48; +@cont-color-menu-bg-on-canvas-moderate: #424c58; +@cont-color-menu-bg-on-canvas-bold: #75808c; +@cont-color-menu-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-1-subtle: #232d38; +@cont-color-menu-bg-on-layer-1-moderate: #323c48; +@cont-color-menu-bg-on-layer-1-bold: #646e7b; +@cont-color-menu-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-2-subtle: #424c58; +@cont-color-menu-bg-on-layer-2-moderate: #505b67; +@cont-color-menu-bg-on-layer-2-bold: #848f9c; +@cont-color-menu-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-3-subtle: #424c58; +@cont-color-menu-bg-on-layer-3-moderate: #505b67; +@cont-color-menu-bg-on-layer-3-bold: #848f9c; +@cont-color-menu-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-4-subtle: #323c48; +@cont-color-menu-bg-on-layer-4-moderate: #424c58; +@cont-color-menu-bg-on-layer-4-bold: #75808c; +@cont-color-menu-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-canvas-moderate: #424c58; +@cont-color-menu-border-on-canvas-bold: #e1f0ff; +@cont-color-menu-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-1-moderate: #323c48; +@cont-color-menu-border-on-layer-1-bold: #e1f0ff; +@cont-color-menu-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-2-moderate: #505b67; +@cont-color-menu-border-on-layer-2-bold: #e1f0ff; +@cont-color-menu-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-3-moderate: #505b67; +@cont-color-menu-border-on-layer-3-bold: #e1f0ff; +@cont-color-menu-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-4-moderate: #424c58; +@cont-color-menu-border-on-layer-4-bold: #e1f0ff; +@cont-color-menu-fg-on-minimal: #ffffff; +@cont-color-menu-fg-on-subtle: #ffffff; +@cont-color-menu-fg-on-moderate: #ffffff; +@cont-color-menu-fg-on-bold: #ffffff; +@cont-color-navigation-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-canvas-subtle: #323c48; +@cont-color-navigation-bg-on-canvas-moderate: #424c58; +@cont-color-navigation-bg-on-canvas-bold: #75808c; +@cont-color-navigation-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-1-subtle: #232d38; +@cont-color-navigation-bg-on-layer-1-moderate: #323c48; +@cont-color-navigation-bg-on-layer-1-bold: #646e7b; +@cont-color-navigation-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-2-subtle: #424c58; +@cont-color-navigation-bg-on-layer-2-moderate: #505b67; +@cont-color-navigation-bg-on-layer-2-bold: #848f9c; +@cont-color-navigation-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-3-subtle: #424c58; +@cont-color-navigation-bg-on-layer-3-moderate: #505b67; +@cont-color-navigation-bg-on-layer-3-bold: #848f9c; +@cont-color-navigation-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-4-subtle: #323c48; +@cont-color-navigation-bg-on-layer-4-moderate: #424c58; +@cont-color-navigation-bg-on-layer-4-bold: #75808c; +@cont-color-navigation-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-canvas-moderate: #424c58; +@cont-color-navigation-border-on-canvas-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-1-moderate: #323c48; +@cont-color-navigation-border-on-layer-1-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-2-moderate: #505b67; +@cont-color-navigation-border-on-layer-2-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-3-moderate: #505b67; +@cont-color-navigation-border-on-layer-3-bold: #e1f0ff; +@cont-color-navigation-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-4-moderate: #424c58; +@cont-color-navigation-border-on-layer-4-bold: #e1f0ff; +@cont-color-navigation-fg-on-minimal: #ffffff; +@cont-color-navigation-fg-on-subtle: #ffffff; +@cont-color-navigation-fg-on-moderate: #ffffff; +@cont-color-navigation-fg-on-bold: #ffffff; +@cont-color-navigation-fg-description-on-minimal: #c0cadb; +@cont-color-navigation-fg-description-on-subtle: #c0cadb; +@cont-color-navigation-fg-description-on-moderate: #c0cadb; +@cont-color-navigation-fg-description-on-bold: #c0cadb; +@cont-elevation-common-focus-outset-base: 0px 0px 0px 2px #141e29, 0px 0px 0px 4px #5572ff; +@cont-elevation-common-focus-outset-inverse: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #141e29; +@cont-elevation-common-focus-inset-base: inset 0px 0px 0px 2px #141e29, inset 0px 0px 0px 4px #5572ff; +@cont-elevation-common-focus-inset-inverse: inset 0px 0px 0px 2px #ffffff, inset 0px 0px 0px 4px #141e29; +@cont-elevation-common-overlay-top: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 32px 48px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-overlay-bottom: 0px -1px 4px 0px rgba(20, 30, 41, 0.08), + 0px -32px 48px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-overlay-start: 1px 0px 4px 0px rgba(20, 30, 41, 0.08), + 32px 0px 48px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-overlay-end: -1px 0px 4px 0px rgba(20, 30, 41, 0.08), + -32px 0px 48px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-0: 0px 0px 0px 0px rgba(20, 30, 41, 0.08); +@cont-elevation-common-level-1: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), 0px 4px 8px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-2: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 8px 12px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-3: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 12px 16px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-4: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 16px 24px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-5: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 24px 32px 0px rgba(20, 30, 41, 0.48); +@cont-elevation-common-level-6: 0px 1px 4px 0px rgba(20, 30, 41, 0.08), + 0px 32px 48px 0px rgba(20, 30, 41, 0.48); diff --git a/packages/ds-theme/src/web-design-tokens/overrides/color/light-alternative.less b/packages/ds-theme/src/web-design-tokens/overrides/color/light-alternative.less new file mode 100644 index 0000000000..339a2c68a5 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/overrides/color/light-alternative.less @@ -0,0 +1,993 @@ +// Do not edit directly, this file was auto-generated. + +@cont-color-common-container-surface-canvas: #ffffff; // canvas +@cont-color-common-container-surface-layer-1: #f6f7f9; // layer-1 +@cont-color-common-container-surface-layer-2: #ffffff; // layer-2 +@cont-color-common-container-surface-layer-3: #f6f7f9; // layer-3 +@cont-color-common-container-surface-layer-4: #ffffff; // layer-4 +@cont-color-common-container-surface-layer-inverse: #141e29; // layer-inverse +@cont-color-common-container-surface-layer-overlay: rgba(20, 30, 41, 0.24); +@cont-color-common-container-surface-on-canvas-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-canvas-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-canvas-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-canvas-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-1-minimal: #ffffff; // minimal +@cont-color-common-container-surface-on-layer-1-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-1-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-1-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-2-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-layer-2-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-2-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-2-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-3-minimal: #ffffff; // minimal +@cont-color-common-container-surface-on-layer-3-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-3-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-3-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-4-minimal: #f6f7f9; // minimal +@cont-color-common-container-surface-on-layer-4-subtle: #dee2eb; // subtle +@cont-color-common-container-surface-on-layer-4-moderate: #c0cadb; // moderate +@cont-color-common-container-surface-on-layer-4-bold: #848f9c; // bold +@cont-color-common-container-surface-on-layer-inverse-minimal: #232d38; // minimal +@cont-color-common-container-surface-on-layer-inverse-subtle: #323c48; // subtle +@cont-color-common-container-surface-on-layer-inverse-moderate: #424c58; // moderate +@cont-color-common-container-surface-on-layer-inverse-bold: #75808c; // bold +@cont-color-common-container-brand-minimal: #f7f5ff; // minimal +@cont-color-common-container-brand-subtle: #bdc6ff; // subtle +@cont-color-common-container-brand-base: #2336fd; // base +@cont-color-common-container-brand-moderate: #001cf0; // moderate +@cont-color-common-container-brand-bold: #0014c2; // bold +@cont-color-common-container-accent-minimal: #f1f7ff; // minimal +@cont-color-common-container-accent-subtle: #e1f0ff; // subtle +@cont-color-common-container-accent-base: #002033; // base +@cont-color-common-container-accent-moderate: #002f49; // moderate +@cont-color-common-container-accent-bold: #003f60; // bold +@cont-color-common-container-primary-minimal: #f7f5ff; // minimal +@cont-color-common-container-primary-subtle: #ececff; // subtle +@cont-color-common-container-primary-base: #2336fd; // base +@cont-color-common-container-primary-moderate: #001cf0; // moderate +@cont-color-common-container-primary-bold: #0014c2; // bold +@cont-color-common-container-secondary-minimal: #f6f7f9; // minimal +@cont-color-common-container-secondary-subtle: #eceef4; // subtle +@cont-color-common-container-secondary-base: #505b67; // base +@cont-color-common-container-secondary-moderate: #424c58; // moderate +@cont-color-common-container-secondary-bold: #323c48; // bold +@cont-color-common-container-tertiary-minimal: rgba(80, 91, 103, 0.08); // minimal +@cont-color-common-container-tertiary-subtle: rgba(80, 91, 103, 0.16); // subtle +@cont-color-common-container-tertiary-moderate: rgba(80, 91, 103, 0.8); // moderate +@cont-color-common-container-tertiary-base: #505b67; // base +@cont-color-common-container-tertiary-bold: rgba(80, 91, 103, 0.56); // bold +@cont-color-common-container-neutral-minimal: #f6f7f9; // minimal +@cont-color-common-container-neutral-subtle: #eceef4; // subtle +@cont-color-common-container-neutral-base: #505b67; // base +@cont-color-common-container-neutral-moderate: #424c58; // moderate +@cont-color-common-container-neutral-bold: #141e29; // bold +@cont-color-common-container-negative-minimal: #fff4f2; // minimal +@cont-color-common-container-negative-subtle: #ffe9e5; // subtle +@cont-color-common-container-negative-base: #b70300; // base +@cont-color-common-container-negative-moderate: #9c0300; // moderate +@cont-color-common-container-negative-bold: #7d0200; // bold +@cont-color-common-container-warning-minimal: #fff5ea; // minimal +@cont-color-common-container-warning-subtle: #ffebd0; // subtle +@cont-color-common-container-warning-base: #ffbe42; // base +@cont-color-common-container-warning-moderate: #bb8400; // moderate +@cont-color-common-container-warning-bold: #906505; // bold +@cont-color-common-container-positive-minimal: #e9fbe9; // minimal +@cont-color-common-container-positive-subtle: #cdf9d3; // subtle +@cont-color-common-container-positive-base: #006835; // base +@cont-color-common-container-positive-moderate: #00582b; // moderate +@cont-color-common-container-positive-bold: #004521; // bold +@cont-color-common-container-info-minimal: #eff8ff; // minimal +@cont-color-common-container-info-subtle: #ddf1ff; // subtle +@cont-color-common-container-info-base: #006083; // base +@cont-color-common-container-info-moderate: #00516f; // moderate +@cont-color-common-container-info-bold: #004058; // bold +@cont-color-common-container-buy-minimal: #e9fbe9; // minimal +@cont-color-common-container-buy-subtle: #cdf9d3; // subtle +@cont-color-common-container-buy-base: #006835; // base +@cont-color-common-container-buy-moderate: #00582b; // moderate +@cont-color-common-container-buy-bold: #004521; // bold +@cont-color-common-container-sell-minimal: #fff4f2; // minimal +@cont-color-common-container-sell-subtle: #ffe9e5; // subtle +@cont-color-common-container-sell-base: #b70300; // base +@cont-color-common-container-sell-moderate: #9c0300; // moderate +@cont-color-common-container-sell-bold: #7d0200; // bold +@cont-color-common-container-category-1-minimal: #dfe0ff; // minimal +@cont-color-common-container-category-1-subtle: #c0c5ff; // subtle +@cont-color-common-container-category-1-base: #1935ef; // base +@cont-color-common-container-category-1-moderate: #0020c6; // moderate +@cont-color-common-container-category-1-bold: #001490; // bold +@cont-color-common-container-category-2-minimal: #eddcff; // minimal +@cont-color-common-container-category-2-subtle: #dabdff; // subtle +@cont-color-common-container-category-2-base: #693da4; // base +@cont-color-common-container-category-2-moderate: #53258d; // moderate +@cont-color-common-container-category-2-bold: #3e0679; // bold +@cont-color-common-container-category-3-minimal: #c4e9ea; // minimal +@cont-color-common-container-category-3-subtle: #8fd6d6; // subtle +@cont-color-common-container-category-3-base: #005f61; // base +@cont-color-common-container-category-3-moderate: #004849; // moderate +@cont-color-common-container-category-3-bold: #003233; // bold +@cont-color-common-container-category-4-minimal: #ffd9de; // minimal +@cont-color-common-container-category-4-subtle: #ffb6c1; // subtle +@cont-color-common-container-category-4-base: #aa0043; // base +@cont-color-common-container-category-4-moderate: #830032; // moderate +@cont-color-common-container-category-4-bold: #5e0022; // bold +@cont-color-common-container-category-5-minimal: #ffdbd0; // minimal +@cont-color-common-container-category-5-subtle: #ffb9a3; // subtle +@cont-color-common-container-category-5-base: #9c2e00; // base +@cont-color-common-container-category-5-moderate: #782100; // moderate +@cont-color-common-container-category-5-bold: #561500; // bold +@cont-color-common-container-category-6-minimal: #e3e2e2; // minimal +@cont-color-common-container-category-6-subtle: #cac9c9; // subtle +@cont-color-common-container-category-6-base: #545555; // base +@cont-color-common-container-category-6-moderate: #3f4040; // moderate +@cont-color-common-container-category-6-bold: #2b2c2c; // bold +@cont-color-common-container-category-7-minimal: #f6e0b3; // minimal +@cont-color-common-container-category-7-subtle: #eac661; // subtle +@cont-color-common-container-category-7-base: #6a5100; // base +@cont-color-common-container-category-7-moderate: #503d00; // moderate +@cont-color-common-container-category-7-bold: #382a00; // bold +@cont-color-common-container-category-8-minimal: #c9ead6; // minimal +@cont-color-common-container-category-8-subtle: #92d7b5; // subtle +@cont-color-common-container-category-8-base: #006142; // base +@cont-color-common-container-category-8-moderate: #004a31; // moderate +@cont-color-common-container-category-8-bold: #003321; // bold +@cont-color-common-container-misc-disabled: #eceef4; // disabled +@cont-color-common-container-misc-disabled-inverse: #424c58; // disabled-inverse +@cont-color-common-container-misc-focus: #2336fd; // focus +@cont-color-common-container-misc-focus-inverse: #ffffff; // focus-inverse +@cont-color-common-container-misc-transparent: rgba(0, 0, 0, 0); // transparent +@cont-color-common-container-inverse-minimal: rgba(255, 255, 255, 0.08); // minimal +@cont-color-common-container-inverse-subtle: rgba(255, 255, 255, 0.16); // subtle +@cont-color-common-container-inverse-base: #ffffff; // base +@cont-color-common-container-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-container-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-container-persist-on-light-minimal: #f6f7f9; // minimal +@cont-color-common-container-persist-on-light-subtle: #eceef4; // subtle +@cont-color-common-container-persist-on-light-base: #141e29; // base +@cont-color-common-container-persist-on-light-moderate: #232d38; // moderate +@cont-color-common-container-persist-on-light-bold: #323c48; // bold +@cont-color-common-container-persist-on-dark-minimal: #232d38; // minimal +@cont-color-common-container-persist-on-dark-subtle: #323c48; // subtle +@cont-color-common-container-persist-on-dark-base: #ffffff; // base +@cont-color-common-container-persist-on-dark-moderate: #f6f7f9; // moderate +@cont-color-common-container-persist-on-dark-bold: #eceef4; // bold +@cont-color-common-fg-generic-bold: #141e29; // bold +@cont-color-common-fg-generic-moderate: #323c48; // moderate +@cont-color-common-fg-generic-subtle: #505b67; // subtle +@cont-color-common-fg-generic-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-generic-moderate-inverse: #c0cadb; // moderate-inverse +@cont-color-common-fg-generic-subtle-inverse: #9ca7b4; // subtle-inverse +@cont-color-common-fg-generic-persist-on-light-bold: #141e29; // bold +@cont-color-common-fg-generic-persist-on-light-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-light-subtle: #ffffff; // subtle +@cont-color-common-fg-generic-persist-on-dark-bold: #ffffff; // bold +@cont-color-common-fg-generic-persist-on-dark-moderate: #323c48; // moderate +@cont-color-common-fg-generic-persist-on-dark-subtle: #141e29; // subtle +@cont-color-common-fg-generic-disabled-bold: #adb7c5; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold: #9ca7b4; // bold +@cont-color-common-fg-generic-disabled-on-disabled-bold-inverse: #141e29; // bold-inverse +@cont-color-common-fg-brand-bold: #2336fd; // bold +@cont-color-common-fg-brand-moderate: #3459ff; // moderate +@cont-color-common-fg-brand-on-brand-bold: #2336fd; // bold +@cont-color-common-fg-brand-on-brand-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-brand-on-brand-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-brand-on-brand-moderate: #3459ff; // moderate +@cont-color-common-fg-brand-on-brand-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-brand-on-brand-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-accent-bold: #005f8d; // bold +@cont-color-common-fg-accent-moderate: #0073aa; // moderate +@cont-color-common-fg-accent-on-accent-bold: #005f8d; // bold +@cont-color-common-fg-accent-on-accent-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-accent-on-accent-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-accent-on-accent-moderate: #0073aa; // moderate +@cont-color-common-fg-accent-on-accent-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-accent-on-accent-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-primary-bold: #0014c2; // bold +@cont-color-common-fg-primary-moderate: #2336fd; // moderate +@cont-color-common-fg-primary-on-primary-bold: #2336fd; // bold +@cont-color-common-fg-primary-on-primary-bold-alt: #141e29; // bolt-alt +@cont-color-common-fg-primary-on-primary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-primary-on-primary-moderate: #3459ff; // moderate +@cont-color-common-fg-primary-on-primary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-primary-on-primary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-secondary-bold: #505b67; // bold +@cont-color-common-fg-secondary-moderate: #646e7b; // moderate +@cont-color-common-fg-secondary-on-secondary-bold: #505b67; // bold +@cont-color-common-fg-secondary-on-secondary-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-secondary-on-secondary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-secondary-on-secondary-moderate: #646e7b; // moderare==te +@cont-color-common-fg-secondary-on-secondary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-secondary-on-secondary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-tertiary-bold: #505b67; // bold +@cont-color-common-fg-tertiary-moderate: #646e7b; // moderate +@cont-color-common-fg-tertiary-on-tertiary-bold: #505b67; // bold +@cont-color-common-fg-tertiary-on-tertiary-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-tertiary-on-tertiary-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-tertiary-on-tertiary-moderate: #646e7b; // moderare==te +@cont-color-common-fg-tertiary-on-tertiary-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-tertiary-on-tertiary-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-neutral-bold: #505b67; // bold +@cont-color-common-fg-neutral-moderate: #646e7b; // moderate +@cont-color-common-fg-neutral-on-neutral-bold: #505b67; // bold +@cont-color-common-fg-neutral-on-neutral-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-neutral-on-neutral-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-neutral-on-neutral-moderate: #646e7b; // moderate +@cont-color-common-fg-neutral-on-neutral-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-neutral-on-neutral-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-negative-bold: #b70300; // bold +@cont-color-common-fg-negative-moderate: #d71c0f; // moderate +@cont-color-common-fg-negative-on-negative-bold: #b70300; // bold +@cont-color-common-fg-negative-on-negative-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-negative-on-negative-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-negative-on-negative-moderate: #d71c0f; // moderate +@cont-color-common-fg-negative-on-negative-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-negative-on-negative-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-warning-bold: #775300; // bold +@cont-color-common-fg-warning-moderate: #906505; // moderate +@cont-color-common-fg-warning-on-warning-bold: #775300; // bold +@cont-color-common-fg-warning-on-warning-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-warning-on-warning-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-warning-on-warning-moderate: #906505; // moderate +@cont-color-common-fg-warning-on-warning-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-warning-on-warning-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-positive-bold: #006835; // bold +@cont-color-common-fg-positive-moderate: #177d44; // moderate +@cont-color-common-fg-positive-on-positive-bold: #006835; // bold +@cont-color-common-fg-positive-on-positive-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-positive-on-positive-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-positive-on-positive-moderate: #177d44; // moderate +@cont-color-common-fg-positive-on-positive-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-positive-on-positive-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-info-bold: #006083; // bold +@cont-color-common-fg-info-moderate: #08759d; // moderate +@cont-color-common-fg-info-on-info-bold: #006083; // bold +@cont-color-common-fg-info-on-info-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-info-on-info-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-info-on-info-moderate: #08759d; // moderate +@cont-color-common-fg-info-on-info-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-info-on-info-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-buy-bold: #006835; // bold +@cont-color-common-fg-buy-moderate: #177d44; // moderate +@cont-color-common-fg-buy-on-buy-bold: #006835; // bold +@cont-color-common-fg-buy-on-buy-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-buy-on-buy-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-buy-on-buy-moderate: #177d44; // moderate +@cont-color-common-fg-buy-on-buy-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-buy-on-buy-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-sell-bold: #b70300; // bold +@cont-color-common-fg-sell-moderate: #d71c0f; // moderate +@cont-color-common-fg-sell-on-sell-bold: #b70300; // bold +@cont-color-common-fg-sell-on-sell-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-sell-on-sell-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-sell-on-sell-moderate: #d71c0f; // moderate +@cont-color-common-fg-sell-on-sell-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-sell-on-sell-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-1-bold: #0020c6; // bold +@cont-color-common-fg-category-1-moderate: #1935ef; // moderate +@cont-color-common-fg-category-1-on-category-1-bold: #0020c6; // bold +@cont-color-common-fg-category-1-on-category-1-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-1-on-category-1-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-1-on-category-1-moderate: #1935ef; // moderate +@cont-color-common-fg-category-1-on-category-1-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-1-on-category-1-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-2-bold: #53258d; // bold +@cont-color-common-fg-category-2-moderate: #693da4; // moderate +@cont-color-common-fg-category-2-on-category-2-bold: #53258d; // bold +@cont-color-common-fg-category-2-on-category-2-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-2-on-category-2-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-2-on-category-2-moderate: #693da4; // moderate +@cont-color-common-fg-category-2-on-category-2-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-2-on-category-2-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-3-bold: #004849; // bold +@cont-color-common-fg-category-3-moderate: #005f61; // moderate +@cont-color-common-fg-category-3-on-category-3-bold: #004849; // bold +@cont-color-common-fg-category-3-on-category-3-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-3-on-category-3-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-3-on-category-3-moderate: #005f61; // moderate +@cont-color-common-fg-category-3-on-category-3-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-3-on-category-3-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-4-bold: #830032; // bold +@cont-color-common-fg-category-4-moderate: #aa0043; // moderate +@cont-color-common-fg-category-4-on-category-4-bold: #830032; // bold +@cont-color-common-fg-category-4-on-category-4-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-4-on-category-4-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-4-on-category-4-moderate: #aa0043; // moderate +@cont-color-common-fg-category-4-on-category-4-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-4-on-category-4-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-5-bold: #782100; // bold +@cont-color-common-fg-category-5-moderate: #9c2e00; // moderate +@cont-color-common-fg-category-5-on-category-5-bold: #782100; // bold +@cont-color-common-fg-category-5-on-category-5-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-5-on-category-5-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-5-on-category-5-moderate: #9c2e00; // moderate +@cont-color-common-fg-category-5-on-category-5-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-5-on-category-5-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-6-bold: #3f4040; // bold +@cont-color-common-fg-category-6-moderate: #545555; // moderate +@cont-color-common-fg-category-6-on-category-6-bold: #3f4040; // bold +@cont-color-common-fg-category-6-on-category-6-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-6-on-category-6-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-6-on-category-6-moderate: #545555; // moderate +@cont-color-common-fg-category-6-on-category-6-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-6-on-category-6-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-7-bold: #503d00; // bold +@cont-color-common-fg-category-7-moderate: #6a5100; // moderate +@cont-color-common-fg-category-7-on-category-7-bold: #503d00; // bold +@cont-color-common-fg-category-7-on-category-7-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-7-on-category-7-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-7-on-category-7-moderate: #6a5100; // moderate +@cont-color-common-fg-category-7-on-category-7-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-7-on-category-7-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-category-8-bold: #004a31; // bold +@cont-color-common-fg-category-8-moderate: #006142; // moderate +@cont-color-common-fg-category-8-on-category-8-bold: #004a31; // bold +@cont-color-common-fg-category-8-on-category-8-bold-alt: #141e29; // bold-alt +@cont-color-common-fg-category-8-on-category-8-bold-inverse: #ffffff; // bold-inverse +@cont-color-common-fg-category-8-on-category-8-moderate: #006142; // moderate +@cont-color-common-fg-category-8-on-category-8-moderate-alt: #323c48; // moderate-alt +@cont-color-common-fg-category-8-on-category-8-moderate-inverse: rgba(255, 255, 255, 0.8); // moderate-inverse +@cont-color-common-fg-inverse-minimal: rgba(255, 255, 255, 0.24); // minimal +@cont-color-common-fg-inverse-subtle: rgba(255, 255, 255, 0.4); // subtle +@cont-color-common-fg-inverse-base: #ffffff; // base +@cont-color-common-fg-inverse-moderate: rgba(255, 255, 255, 0.8); // moderate +@cont-color-common-fg-inverse-bold: rgba(255, 255, 255, 0.56); // bold +@cont-color-common-fg-persist-on-dark-minimal: rgba(20, 30, 41, 0.24); // minimal +@cont-color-common-fg-persist-on-dark-subtle: rgba(20, 30, 41, 0.4); // subtle +@cont-color-common-fg-persist-on-dark-base: #141e29; // base +@cont-color-common-fg-persist-on-dark-moderate: rgba(20, 30, 41, 0.8); // moderate +@cont-color-common-fg-persist-on-dark-bold: rgba(20, 30, 41, 0.56); // bold +@cont-color-shell-bg-layer-1: #f6f7f9; +@cont-color-shell-bg-layer-2: #ffffff; +@cont-color-shell-bg-layer-3: #f6f7f9; +@cont-color-shell-bg-layer-4: #ffffff; +@cont-color-shell-bg-layer-canvas: #ffffff; +@cont-color-shell-bg-layer-inverse: #141e29; +@cont-color-shell-border-on-layer-1-bold: #c0cadb; +@cont-color-shell-border-on-layer-1-subtle: #dee2eb; +@cont-color-shell-border-on-layer-2-bold: #c0cadb; +@cont-color-shell-border-on-layer-2-subtle: #dee2eb; +@cont-color-shell-border-on-layer-3-bold: #c0cadb; +@cont-color-shell-border-on-layer-3-subtle: #dee2eb; +@cont-color-shell-border-on-layer-4-bold: #c0cadb; +@cont-color-shell-border-on-layer-4-subtle: #dee2eb; +@cont-color-shell-border-on-layer-canvas-bold: #c0cadb; +@cont-color-shell-border-on-layer-canvas-subtle: #dee2eb; +@cont-color-shell-border-on-layer-inverse-bold: #424c58; +@cont-color-shell-border-on-layer-inverse-subtle: #323c48; +@cont-color-shell-elevation-shadow-1: rgba(20, 30, 41, 0.08); +@cont-color-shell-elevation-shadow-2: rgba(20, 30, 41, 0.04); +@cont-color-action-bg-neutral-minimal: #ffffff; +@cont-color-action-bg-neutral-subtle: #dee2eb; +@cont-color-action-bg-neutral-base: #ffffff; +@cont-color-action-bg-neutral-moderate: #dee2eb; +@cont-color-action-bg-neutral-bold: rgba(0, 0, 0, 0); +@cont-color-action-bg-primary-minimal: #f7f5ff; +@cont-color-action-bg-primary-subtle: #ececff; +@cont-color-action-bg-primary-base: #2336fd; +@cont-color-action-bg-primary-moderate: #001cf0; +@cont-color-action-bg-primary-bold: #0014c2; +@cont-color-action-bg-secondary-minimal: #f6f7f9; +@cont-color-action-bg-secondary-subtle: #eceef4; +@cont-color-action-bg-secondary-base: #505b67; +@cont-color-action-bg-secondary-moderate: #424c58; +@cont-color-action-bg-secondary-bold: #323c48; +@cont-color-action-bg-tertiary-minimal: rgba(80, 91, 103, 0.08); +@cont-color-action-bg-tertiary-subtle: rgba(80, 91, 103, 0.16); +@cont-color-action-bg-tertiary-base: #505b67; +@cont-color-action-bg-tertiary-moderate: rgba(80, 91, 103, 0.8); +@cont-color-action-bg-tertiary-bold: rgba(80, 91, 103, 0.56); +@cont-color-action-bg-negative-minimal: #fff4f2; +@cont-color-action-bg-negative-subtle: #ffe9e5; +@cont-color-action-bg-negative-base: #b70300; +@cont-color-action-bg-negative-moderate: #9c0300; +@cont-color-action-bg-negative-bold: #7d0200; +@cont-color-action-bg-positive-minimal: #e9fbe9; +@cont-color-action-bg-positive-subtle: #cdf9d3; +@cont-color-action-bg-positive-base: #006835; +@cont-color-action-bg-positive-moderate: #00582b; +@cont-color-action-bg-positive-bold: #004521; +@cont-color-action-bg-buy-minimal: #e9fbe9; +@cont-color-action-bg-buy-subtle: #cdf9d3; +@cont-color-action-bg-buy-base: #006835; +@cont-color-action-bg-buy-moderate: #00582b; +@cont-color-action-bg-buy-bold: #004521; +@cont-color-action-bg-sell-minimal: #fff4f2; +@cont-color-action-bg-sell-subtle: #ffe9e5; +@cont-color-action-bg-sell-base: #b70300; +@cont-color-action-bg-sell-moderate: #9c0300; +@cont-color-action-bg-sell-bold: #7d0200; +@cont-color-action-bg-inverse-minimal: rgba(255, 255, 255, 0.08); +@cont-color-action-bg-inverse-subtle: rgba(255, 255, 255, 0.16); +@cont-color-action-bg-inverse-base: #ffffff; +@cont-color-action-bg-inverse-moderate: rgba(255, 255, 255, 0.8); +@cont-color-action-bg-inverse-bold: rgba(255, 255, 255, 0.56); +@cont-color-action-bg-persist-on-light-minimal: #f6f7f9; +@cont-color-action-bg-persist-on-light-subtle: #eceef4; +@cont-color-action-bg-persist-on-light-base: #141e29; +@cont-color-action-bg-persist-on-light-moderate: #232d38; +@cont-color-action-bg-persist-on-light-bold: #323c48; +@cont-color-action-bg-persist-on-dark-minimal: #232d38; +@cont-color-action-bg-persist-on-dark-subtle: #323c48; +@cont-color-action-bg-persist-on-dark-base: #ffffff; +@cont-color-action-bg-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-bg-persist-on-dark-bold: #eceef4; +@cont-color-action-fg-on-neutral-minimal: #ffffff; +@cont-color-action-fg-on-neutral-subtle: #ffffff; +@cont-color-action-fg-on-neutral-base: #141e29; +@cont-color-action-fg-on-neutral-moderate: #141e29; +@cont-color-action-fg-on-neutral-bold: #141e29; +@cont-color-action-fg-on-primary-minimal: #2336fd; +@cont-color-action-fg-on-primary-subtle: #2336fd; +@cont-color-action-fg-on-primary-base: #ffffff; +@cont-color-action-fg-on-primary-moderate: #ffffff; +@cont-color-action-fg-on-primary-bold: #ffffff; +@cont-color-action-fg-on-secondary-minimal: #141e29; +@cont-color-action-fg-on-secondary-subtle: #141e29; +@cont-color-action-fg-on-secondary-base: #ffffff; +@cont-color-action-fg-on-secondary-moderate: #ffffff; +@cont-color-action-fg-on-secondary-bold: #ffffff; +@cont-color-action-fg-on-tertiary-minimal: #141e29; +@cont-color-action-fg-on-tertiary-subtle: #141e29; +@cont-color-action-fg-on-tertiary-base: #ffffff; +@cont-color-action-fg-on-tertiary-moderate: #ffffff; +@cont-color-action-fg-on-tertiary-bold: #ffffff; +@cont-color-action-fg-on-negative-minimal: #b70300; +@cont-color-action-fg-on-negative-subtle: #b70300; +@cont-color-action-fg-on-negative-base: #ffffff; +@cont-color-action-fg-on-negative-moderate: #ffffff; +@cont-color-action-fg-on-negative-bold: #ffffff; +@cont-color-action-fg-on-positive-minimal: #006835; +@cont-color-action-fg-on-positive-subtle: #006835; +@cont-color-action-fg-on-positive-base: #ffffff; +@cont-color-action-fg-on-positive-moderate: #ffffff; +@cont-color-action-fg-on-positive-bold: #ffffff; +@cont-color-action-fg-on-buy-minimal: #006835; +@cont-color-action-fg-on-buy-subtle: #006835; +@cont-color-action-fg-on-buy-base: #ffffff; +@cont-color-action-fg-on-buy-moderate: #ffffff; +@cont-color-action-fg-on-buy-bold: #ffffff; +@cont-color-action-fg-on-sell-minimal: #b70300; +@cont-color-action-fg-on-sell-subtle: #b70300; +@cont-color-action-fg-on-sell-base: #ffffff; +@cont-color-action-fg-on-sell-moderate: #ffffff; +@cont-color-action-fg-on-sell-bold: #ffffff; +@cont-color-action-fg-on-inverse-minimal: #ffffff; +@cont-color-action-fg-on-inverse-subtle: #ffffff; +@cont-color-action-fg-on-inverse-base: #141e29; +@cont-color-action-fg-on-inverse-moderate: #141e29; +@cont-color-action-fg-on-inverse-bold: #141e29; +@cont-color-action-fg-on-persist-on-light-minimal: #141e29; +@cont-color-action-fg-on-persist-on-light-subtle: #141e29; +@cont-color-action-fg-on-persist-on-light-base: #ffffff; +@cont-color-action-fg-on-persist-on-light-moderate: #ffffff; +@cont-color-action-fg-on-persist-on-light-bold: #ffffff; +@cont-color-action-fg-on-persist-on-dark-minimal: #ffffff; +@cont-color-action-fg-on-persist-on-dark-subtle: #ffffff; +@cont-color-action-fg-on-persist-on-dark-base: #141e29; +@cont-color-action-fg-on-persist-on-dark-moderate: #141e29; +@cont-color-action-fg-on-persist-on-dark-bold: #141e29; +@cont-color-action-fg-on-transparent-minimal: #2336fd; +@cont-color-action-fg-on-transparent-subtle: #2336fd; +@cont-color-action-fg-on-transparent-base: #2336fd; +@cont-color-action-fg-on-transparent-moderate: #0014c2; +@cont-color-action-fg-on-transparent-bold: #0014c2; +@cont-color-action-border-neutral-minimal: #ffffff; +@cont-color-action-border-neutral-subtle: #dee2eb; +@cont-color-action-border-neutral-base: #c0cadb; +@cont-color-action-border-neutral-moderate: #848f9c; +@cont-color-action-border-neutral-bold: #848f9c; +@cont-color-action-border-primary-minimal: #f7f5ff; +@cont-color-action-border-primary-subtle: #ececff; +@cont-color-action-border-primary-base: #2336fd; +@cont-color-action-border-primary-moderate: #001cf0; +@cont-color-action-border-primary-bold: #0014c2; +@cont-color-action-border-secondary-minimal: #f6f7f9; +@cont-color-action-border-secondary-subtle: #eceef4; +@cont-color-action-border-secondary-base: #505b67; +@cont-color-action-border-secondary-moderate: #424c58; +@cont-color-action-border-secondary-bold: #323c48; +@cont-color-action-border-tertiary-minimal: #f6f7f9; +@cont-color-action-border-tertiary-subtle: #eceef4; +@cont-color-action-border-tertiary-base: #505b67; +@cont-color-action-border-tertiary-moderate: #424c58; +@cont-color-action-border-tertiary-bold: #323c48; +@cont-color-action-border-negative-minimal: #fff4f2; +@cont-color-action-border-negative-subtle: #ffe9e5; +@cont-color-action-border-negative-base: #b70300; +@cont-color-action-border-negative-moderate: #9c0300; +@cont-color-action-border-negative-bold: #7d0200; +@cont-color-action-border-positive-minimal: #e9fbe9; +@cont-color-action-border-positive-subtle: #cdf9d3; +@cont-color-action-border-positive-base: #006835; +@cont-color-action-border-positive-moderate: #00582b; +@cont-color-action-border-positive-bold: #004521; +@cont-color-action-border-buy-minimal: #e9fbe9; +@cont-color-action-border-buy-subtle: #cdf9d3; +@cont-color-action-border-buy-base: #006835; +@cont-color-action-border-buy-moderate: #00582b; +@cont-color-action-border-buy-bold: #004521; +@cont-color-action-border-sell-minimal: #fff4f2; +@cont-color-action-border-sell-subtle: #ffe9e5; +@cont-color-action-border-sell-base: #b70300; +@cont-color-action-border-sell-moderate: #9c0300; +@cont-color-action-border-sell-bold: #7d0200; +@cont-color-action-border-inverse-minimal: rgba(255, 255, 255, 0.08); +@cont-color-action-border-inverse-subtle: rgba(255, 255, 255, 0.16); +@cont-color-action-border-inverse-base: #ffffff; +@cont-color-action-border-inverse-moderate: rgba(255, 255, 255, 0.8); +@cont-color-action-border-inverse-bold: rgba(255, 255, 255, 0.56); +@cont-color-action-border-persist-on-light-minimal: rgba(35, 45, 56, 0.24); +@cont-color-action-border-persist-on-light-subtle: rgba(35, 45, 56, 0.4); +@cont-color-action-border-persist-on-light-base: #141e29; +@cont-color-action-border-persist-on-light-moderate: rgba(35, 45, 56, 0.8); +@cont-color-action-border-persist-on-light-bold: rgba(35, 45, 56, 0.56); +@cont-color-action-border-persist-on-dark-minimal: #232d38; +@cont-color-action-border-persist-on-dark-subtle: #323c48; +@cont-color-action-border-persist-on-dark-base: #ffffff; +@cont-color-action-border-persist-on-dark-moderate: #f6f7f9; +@cont-color-action-border-persist-on-dark-bold: #eceef4; +@cont-color-status-bg-neutral-base: #505b67; +@cont-color-status-bg-neutral-minimal: #f6f7f9; +@cont-color-status-bg-negative-base: #b70300; +@cont-color-status-bg-negative-minimal: #fff4f2; +@cont-color-status-bg-warning-base: #ffbe42; +@cont-color-status-bg-warning-minimal: #fff5ea; +@cont-color-status-bg-positive-base: #006835; +@cont-color-status-bg-positive-minimal: #e9fbe9; +@cont-color-status-bg-info-base: #006083; +@cont-color-status-bg-info-minimal: #eff8ff; +@cont-color-status-bg-buy-base: #006835; +@cont-color-status-bg-buy-minimal: #e9fbe9; +@cont-color-status-bg-sell-base: #b70300; +@cont-color-status-bg-sell-minimal: #fff4f2; +@cont-color-status-fg-neutral-base: #505b67; +@cont-color-status-fg-on-neutral-base: #ffffff; +@cont-color-status-fg-on-neutral-minimal: #505b67; +@cont-color-status-fg-negative-base: #b70300; +@cont-color-status-fg-on-negative-base: #ffffff; +@cont-color-status-fg-on-negative-minimal: #b70300; +@cont-color-status-fg-warning-base: #775300; +@cont-color-status-fg-on-warning-base: #141e29; +@cont-color-status-fg-on-warning-minimal: #775300; +@cont-color-status-fg-positive-base: #006835; +@cont-color-status-fg-on-positive-base: #ffffff; +@cont-color-status-fg-on-positive-minimal: #006835; +@cont-color-status-fg-info-base: #006083; +@cont-color-status-fg-on-info-base: #ffffff; +@cont-color-status-fg-on-info-minimal: #006083; +@cont-color-status-fg-buy-base: #006835; +@cont-color-status-fg-on-buy-base: #ffffff; +@cont-color-status-fg-on-buy-minimal: #006835; +@cont-color-status-fg-sell-base: #b70300; +@cont-color-status-fg-on-sell-base: #ffffff; +@cont-color-status-fg-on-sell-minimal: #b70300; +@cont-color-status-border-neutral-base: #505b67; +@cont-color-status-border-neutral-minimal: #f6f7f9; +@cont-color-status-border-negative-base: #b70300; +@cont-color-status-border-negative-minimal: #fff4f2; +@cont-color-status-border-warning-base: #ffbe42; +@cont-color-status-border-warning-minimal: #fff5ea; +@cont-color-status-border-positive-base: #006835; +@cont-color-status-border-positive-minimal: #e9fbe9; +@cont-color-status-border-info-base: #006083; +@cont-color-status-border-info-minimal: #eff8ff; +@cont-color-status-border-buy-base: #006835; +@cont-color-status-border-buy-minimal: #e9fbe9; +@cont-color-status-border-sell-base: #b70300; +@cont-color-status-border-sell-minimal: #fff4f2; +@cont-color-data-viz-categorical-bg-category-1: #3d54ff; +@cont-color-data-viz-categorical-bg-category-2: #260050; +@cont-color-data-viz-categorical-bg-category-3: #007779; +@cont-color-data-viz-categorical-bg-category-4: #3c0013; +@cont-color-data-viz-categorical-bg-category-5: #c23b00; +@cont-color-data-viz-categorical-bg-category-6: #221800; +@cont-color-data-viz-categorical-bg-category-7: #6a6b6b; +@cont-color-data-viz-categorical-bg-category-8: #001f12; +@cont-color-data-viz-categorical-bg-category-9: #00095d; +@cont-color-data-viz-categorical-bg-category-10: #8054bc; +@cont-color-data-viz-categorical-bg-category-11: #001e1e; +@cont-color-data-viz-categorical-bg-category-12: #d30055; +@cont-color-data-viz-categorical-bg-category-13: #360a00; +@cont-color-data-viz-categorical-bg-category-14: #846700; +@cont-color-data-viz-categorical-bg-category-15: #181a1a; +@cont-color-data-viz-categorical-bg-category-16: #007a54; +@cont-color-data-viz-categorical-bg-category-17: #0020c6; +@cont-color-data-viz-categorical-bg-category-18: #53258d; +@cont-color-data-viz-categorical-bg-category-19: #004849; +@cont-color-data-viz-categorical-bg-category-20: #830032; +@cont-color-data-viz-categorical-bg-category-21: #782100; +@cont-color-data-viz-categorical-bg-category-22: #503d00; +@cont-color-data-viz-categorical-bg-category-23: #3f4040; +@cont-color-data-viz-categorical-bg-category-24: #004a31; +@cont-color-data-viz-diverging-bg-positive-negative-positive-100: #b3f1bf; +@cont-color-data-viz-diverging-bg-positive-negative-positive-200: #7fde99; +@cont-color-data-viz-diverging-bg-positive-negative-positive-300: #6bc987; +@cont-color-data-viz-diverging-bg-positive-negative-positive-400: #58b675; +@cont-color-data-viz-diverging-bg-positive-negative-positive-500: #41a062; +@cont-color-data-viz-diverging-bg-positive-negative-positive-600: #177d44; +@cont-color-data-viz-diverging-bg-positive-negative-positive-700: #006835; +@cont-color-data-viz-diverging-bg-positive-negative-positive-800: #00582b; +@cont-color-data-viz-diverging-bg-positive-negative-positive-900: #003417; +@cont-color-data-viz-diverging-bg-positive-negative-positive-1000: #00230e; +@cont-color-data-viz-diverging-bg-positive-negative-negative-100: #ffdad4; +@cont-color-data-viz-diverging-bg-positive-negative-negative-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-positive-negative-negative-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-positive-negative-negative-400: #ff7c68; +@cont-color-data-viz-diverging-bg-positive-negative-negative-500: #ff5540; +@cont-color-data-viz-diverging-bg-positive-negative-negative-600: #d71c0f; +@cont-color-data-viz-diverging-bg-positive-negative-negative-700: #b70300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-800: #9c0300; +@cont-color-data-viz-diverging-bg-positive-negative-negative-900: #600100; +@cont-color-data-viz-diverging-bg-positive-negative-negative-1000: #450100; +@cont-color-data-viz-diverging-bg-hot-cold-hot-100: #ffdad4; +@cont-color-data-viz-diverging-bg-hot-cold-hot-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-hot-cold-hot-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-hot-cold-hot-400: #ff7c68; +@cont-color-data-viz-diverging-bg-hot-cold-hot-500: #ff5540; +@cont-color-data-viz-diverging-bg-hot-cold-hot-600: #d71c0f; +@cont-color-data-viz-diverging-bg-hot-cold-hot-700: #b70300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-800: #9c0300; +@cont-color-data-viz-diverging-bg-hot-cold-hot-900: #600100; +@cont-color-data-viz-diverging-bg-hot-cold-hot-1000: #450100; +@cont-color-data-viz-diverging-bg-hot-cold-cold-100: #dfe0ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-200: #c0c5ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-300: #a0aaff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-400: #818fff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-500: #6173ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-600: #3d54ff; +@cont-color-data-viz-diverging-bg-hot-cold-cold-700: #1935ef; +@cont-color-data-viz-diverging-bg-hot-cold-cold-800: #0020c6; +@cont-color-data-viz-diverging-bg-hot-cold-cold-900: #001490; +@cont-color-data-viz-diverging-bg-hot-cold-cold-1000: #00095d; +@cont-color-data-viz-diverging-bg-buy-sell-buy-100: #b3f1bf; +@cont-color-data-viz-diverging-bg-buy-sell-buy-200: #7fde99; +@cont-color-data-viz-diverging-bg-buy-sell-buy-300: #6bc987; +@cont-color-data-viz-diverging-bg-buy-sell-buy-400: #58b675; +@cont-color-data-viz-diverging-bg-buy-sell-buy-500: #41a062; +@cont-color-data-viz-diverging-bg-buy-sell-buy-600: #177d44; +@cont-color-data-viz-diverging-bg-buy-sell-buy-700: #006835; +@cont-color-data-viz-diverging-bg-buy-sell-buy-800: #00582b; +@cont-color-data-viz-diverging-bg-buy-sell-buy-900: #003417; +@cont-color-data-viz-diverging-bg-buy-sell-buy-1000: #00230e; +@cont-color-data-viz-diverging-bg-buy-sell-sell-100: #ffdad4; +@cont-color-data-viz-diverging-bg-buy-sell-sell-200: #ffb8ac; +@cont-color-data-viz-diverging-bg-buy-sell-sell-300: #ff9b8b; +@cont-color-data-viz-diverging-bg-buy-sell-sell-400: #ff816d; +@cont-color-data-viz-diverging-bg-buy-sell-sell-500: #ff5540; +@cont-color-data-viz-diverging-bg-buy-sell-sell-600: #d71c0f; +@cont-color-data-viz-diverging-bg-buy-sell-sell-700: #b70300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-800: #9c0300; +@cont-color-data-viz-diverging-bg-buy-sell-sell-900: #600100; +@cont-color-data-viz-diverging-bg-buy-sell-sell-1000: #450100; +@cont-color-data-viz-sequencial-option-1-100: #dfe0ff; +@cont-color-data-viz-sequencial-option-1-200: #c0c5ff; +@cont-color-data-viz-sequencial-option-1-300: #a0aaff; +@cont-color-data-viz-sequencial-option-1-400: #818fff; +@cont-color-data-viz-sequencial-option-1-500: #6173ff; +@cont-color-data-viz-sequencial-option-1-600: #3d54ff; +@cont-color-data-viz-sequencial-option-1-700: #1935ef; +@cont-color-data-viz-sequencial-option-1-800: #0020c6; +@cont-color-data-viz-sequencial-option-1-900: #001490; +@cont-color-data-viz-sequencial-option-1-1000: #00095d; +@cont-color-data-viz-sequencial-option-2-100: #eddcff; +@cont-color-data-viz-sequencial-option-2-200: #dabdff; +@cont-color-data-viz-sequencial-option-2-300: #c79eff; +@cont-color-data-viz-sequencial-option-2-400: #b083ee; +@cont-color-data-viz-sequencial-option-2-500: #986bd5; +@cont-color-data-viz-sequencial-option-2-600: #8054bc; +@cont-color-data-viz-sequencial-option-2-700: #693da4; +@cont-color-data-viz-sequencial-option-2-800: #53258d; +@cont-color-data-viz-sequencial-option-2-900: #3e0679; +@cont-color-data-viz-sequencial-option-2-1000: #260050; +@cont-color-data-viz-sequencial-option-3-100: #c4e9ea; +@cont-color-data-viz-sequencial-option-3-200: #8fd6d6; +@cont-color-data-viz-sequencial-option-3-300: #3ac2c5; +@cont-color-data-viz-sequencial-option-3-400: #00aaad; +@cont-color-data-viz-sequencial-option-3-500: #009093; +@cont-color-data-viz-sequencial-option-3-600: #007779; +@cont-color-data-viz-sequencial-option-3-700: #005f61; +@cont-color-data-viz-sequencial-option-3-800: #004849; +@cont-color-data-viz-sequencial-option-3-900: #003233; +@cont-color-data-viz-sequencial-option-3-1000: #001e1e; +@cont-color-data-viz-sequencial-option-4-100: #ffd9de; +@cont-color-data-viz-sequencial-option-4-200: #ffb6c1; +@cont-color-data-viz-sequencial-option-4-300: #ff8fa4; +@cont-color-data-viz-sequencial-option-4-400: #ff6186; +@cont-color-data-viz-sequencial-option-4-500: #f42a6b; +@cont-color-data-viz-sequencial-option-4-600: #d30055; +@cont-color-data-viz-sequencial-option-4-700: #aa0043; +@cont-color-data-viz-sequencial-option-4-800: #830032; +@cont-color-data-viz-sequencial-option-4-900: #5e0022; +@cont-color-data-viz-sequencial-option-4-1000: #3c0013; +@cont-color-data-viz-sequencial-option-5-100: #ffdbd0; +@cont-color-data-viz-sequencial-option-5-200: #ffb9a3; +@cont-color-data-viz-sequencial-option-5-300: #ff9471; +@cont-color-data-viz-sequencial-option-5-400: #ff6935; +@cont-color-data-viz-sequencial-option-5-500: #e94800; +@cont-color-data-viz-sequencial-option-5-600: #c23b00; +@cont-color-data-viz-sequencial-option-5-700: #9c2e00; +@cont-color-data-viz-sequencial-option-5-800: #782100; +@cont-color-data-viz-sequencial-option-5-900: #561500; +@cont-color-data-viz-sequencial-option-5-1000: #360a00; +@cont-color-data-viz-sequencial-option-6-100: #e3e2e2; +@cont-color-data-viz-sequencial-option-6-200: #cac9c9; +@cont-color-data-viz-sequencial-option-6-300: #b1b0b0; +@cont-color-data-viz-sequencial-option-6-400: #999999; +@cont-color-data-viz-sequencial-option-6-500: #818181; +@cont-color-data-viz-sequencial-option-6-600: #6a6b6b; +@cont-color-data-viz-sequencial-option-6-700: #545555; +@cont-color-data-viz-sequencial-option-6-800: #3f4040; +@cont-color-data-viz-sequencial-option-6-900: #2b2c2c; +@cont-color-data-viz-sequencial-option-6-1000: #181a1a; +@cont-color-data-viz-sequencial-option-7-100: #f6e0b3; +@cont-color-data-viz-sequencial-option-7-200: #eac661; +@cont-color-data-viz-sequencial-option-7-300: #d9aa00; +@cont-color-data-viz-sequencial-option-7-400: #bc9300; +@cont-color-data-viz-sequencial-option-7-500: #a07c00; +@cont-color-data-viz-sequencial-option-7-600: #846700; +@cont-color-data-viz-sequencial-option-7-700: #6a5100; +@cont-color-data-viz-sequencial-option-7-800: #503d00; +@cont-color-data-viz-sequencial-option-7-900: #382a00; +@cont-color-data-viz-sequencial-option-7-1000: #221800; +@cont-color-data-viz-sequencial-option-8-100: #c9ead6; +@cont-color-data-viz-sequencial-option-8-200: #92d7b5; +@cont-color-data-viz-sequencial-option-8-300: #10c88e; +@cont-color-data-viz-sequencial-option-8-400: #00ae7a; +@cont-color-data-viz-sequencial-option-8-500: #009367; +@cont-color-data-viz-sequencial-option-8-600: #007a54; +@cont-color-data-viz-sequencial-option-8-700: #006142; +@cont-color-data-viz-sequencial-option-8-800: #004a31; +@cont-color-data-viz-sequencial-option-8-900: #003321; +@cont-color-data-viz-sequencial-option-8-1000: #001f12; +@cont-color-data-viz-status-bg-negative-base: #d71c0f; +@cont-color-data-viz-status-bg-negative-bold: #9c0300; +@cont-color-data-viz-status-bg-negative-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-warning-base: #ffbe42; +@cont-color-data-viz-status-bg-warning-bold: #906505; +@cont-color-data-viz-status-bg-warning-subtle: #ffdeab; +@cont-color-data-viz-status-bg-positive-base: #177d44; +@cont-color-data-viz-status-bg-positive-bold: #00582b; +@cont-color-data-viz-status-bg-positive-subtle: #6bc987; +@cont-color-data-viz-status-bg-info-base: #08759d; +@cont-color-data-viz-status-bg-info-bold: #00516f; +@cont-color-data-viz-status-bg-info-subtle: #7abfe5; +@cont-color-data-viz-status-bg-neutral-base: #646e7b; +@cont-color-data-viz-status-bg-neutral-bold: #424c58; +@cont-color-data-viz-status-bg-neutral-subtle: #adb7c5; +@cont-color-data-viz-status-bg-buy-base: #177d44; +@cont-color-data-viz-status-bg-buy-bold: #00582b; +@cont-color-data-viz-status-bg-buy-subtle: #6bc987; +@cont-color-data-viz-status-bg-sell-base: #d71c0f; +@cont-color-data-viz-status-bg-sell-bold: #9c0300; +@cont-color-data-viz-status-bg-sell-subtle: #ff9b8b; +@cont-color-data-viz-status-bg-category-1-base: #1935ef; +@cont-color-data-viz-status-bg-category-1-bold: #001490; +@cont-color-data-viz-status-bg-category-1-subtle: #dfe0ff; +@cont-color-data-viz-status-bg-category-2-base: #693da4; +@cont-color-data-viz-status-bg-category-2-bold: #3e0679; +@cont-color-data-viz-status-bg-category-2-subtle: #eddcff; +@cont-color-data-viz-status-bg-category-3-base: #005f61; +@cont-color-data-viz-status-bg-category-3-bold: #003233; +@cont-color-data-viz-status-bg-category-3-subtle: #c4e9ea; +@cont-color-data-viz-status-bg-category-4-base: #aa0043; +@cont-color-data-viz-status-bg-category-4-bold: #5e0022; +@cont-color-data-viz-status-bg-category-4-subtle: #ffd9de; +@cont-color-data-viz-status-bg-category-5-base: #9c2e00; +@cont-color-data-viz-status-bg-category-5-bold: #561500; +@cont-color-data-viz-status-bg-category-5-subtle: #ffd9de; +@cont-color-data-viz-status-bg-category-6-base: #545555; +@cont-color-data-viz-status-bg-category-6-bold: #2b2c2c; +@cont-color-data-viz-status-bg-category-6-subtle: #e3e2e2; +@cont-color-data-viz-status-bg-category-7-base: #6a5100; +@cont-color-data-viz-status-bg-category-7-bold: #382a00; +@cont-color-data-viz-status-bg-category-7-subtle: #f6e0b3; +@cont-color-data-viz-status-bg-category-8-base: #006142; +@cont-color-data-viz-status-bg-category-8-bold: #003321; +@cont-color-data-viz-status-bg-category-8-subtle: #c9ead6; +@cont-color-data-viz-status-fg-neutral-base: #505b67; +@cont-color-data-viz-status-fg-on-neutral-base: #ffffff; +@cont-color-data-viz-status-fg-on-neutral-minimal: #505b67; +@cont-color-data-viz-status-fg-negative-base: #b70300; +@cont-color-data-viz-status-fg-on-negative-base: #ffffff; +@cont-color-data-viz-status-fg-on-negative-minimal: #b70300; +@cont-color-data-viz-status-fg-warning-base: #775300; +@cont-color-data-viz-status-fg-on-warning-base: #141e29; +@cont-color-data-viz-status-fg-on-warning-minimal: #775300; +@cont-color-data-viz-status-fg-positive-base: #006835; +@cont-color-data-viz-status-fg-on-positive-base: #ffffff; +@cont-color-data-viz-status-fg-on-positive-minimal: #006835; +@cont-color-data-viz-status-fg-info-base: #006083; +@cont-color-data-viz-status-fg-on-info-base: #ffffff; +@cont-color-data-viz-status-fg-on-info-minimal: #006083; +@cont-color-data-viz-status-fg-buy-base: #006835; +@cont-color-data-viz-status-fg-on-buy-base: #ffffff; +@cont-color-data-viz-status-fg-on-buy-minimal: #006835; +@cont-color-data-viz-status-fg-sell-base: #b70300; +@cont-color-data-viz-status-fg-on-sell-base: #ffffff; +@cont-color-data-viz-status-fg-on-sell-minimal: #b70300; +@cont-color-data-viz-status-fg-category-1-base: #0020c6; +@cont-color-data-viz-status-fg-on-category-1-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-1-minimal: #0020c6; +@cont-color-data-viz-status-fg-category-2-base: #53258d; +@cont-color-data-viz-status-fg-on-category-2-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-2-minimal: #53258d; +@cont-color-data-viz-status-fg-category-3-base: #004849; +@cont-color-data-viz-status-fg-on-category-3-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-3-minimal: #004849; +@cont-color-data-viz-status-fg-category-4-base: #830032; +@cont-color-data-viz-status-fg-on-category-4-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-4-minimal: #830032; +@cont-color-data-viz-status-fg-category-5-base: #782100; +@cont-color-data-viz-status-fg-on-category-5-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-5-minimal: #782100; +@cont-color-data-viz-status-fg-category-6-base: #3f4040; +@cont-color-data-viz-status-fg-on-category-6-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-6-minimal: #3f4040; +@cont-color-data-viz-status-fg-category-7-base: #503d00; +@cont-color-data-viz-status-fg-on-category-7-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-7-minimal: #503d00; +@cont-color-data-viz-status-fg-category-8-base: #004a31; +@cont-color-data-viz-status-fg-on-category-8-base: #ffffff; +@cont-color-data-viz-status-fg-on-category-8-minimal: #004a31; +@cont-color-data-viz-status-border-neutral-base: #505b67; +@cont-color-data-viz-status-border-neutral-minimal: #f6f7f9; +@cont-color-data-viz-status-border-negative-base: #b70300; +@cont-color-data-viz-status-border-negative-minimal: #fff4f2; +@cont-color-data-viz-status-border-warning-base: #ffbe42; +@cont-color-data-viz-status-border-warning-minimal: #fff5ea; +@cont-color-data-viz-status-border-positive-base: #006835; +@cont-color-data-viz-status-border-positive-minimal: #e9fbe9; +@cont-color-data-viz-status-border-info-base: #006083; +@cont-color-data-viz-status-border-info-minimal: #eff8ff; +@cont-color-data-viz-status-border-buy-base: #006835; +@cont-color-data-viz-status-border-buy-minimal: #e9fbe9; +@cont-color-data-viz-status-border-sell-base: #b70300; +@cont-color-data-viz-status-border-sell-minimal: #fff4f2; +@cont-color-data-viz-status-border-category-1-base: #1935ef; +@cont-color-data-viz-status-border-category-1-minimal: #dfe0ff; +@cont-color-data-viz-status-border-category-2-base: #693da4; +@cont-color-data-viz-status-border-category-2-minimal: #eddcff; +@cont-color-data-viz-status-border-category-3-base: #005f61; +@cont-color-data-viz-status-border-category-3-minimal: #c4e9ea; +@cont-color-data-viz-status-border-category-4-base: #aa0043; +@cont-color-data-viz-status-border-category-4-minimal: #ffd9de; +@cont-color-data-viz-status-border-category-5-base: #9c2e00; +@cont-color-data-viz-status-border-category-5-minimal: #ffdbd0; +@cont-color-data-viz-status-border-category-6-base: #545555; +@cont-color-data-viz-status-border-category-6-minimal: #e3e2e2; +@cont-color-data-viz-status-border-category-7-base: #6a5100; +@cont-color-data-viz-status-border-category-7-minimal: #f6e0b3; +@cont-color-data-viz-status-border-category-8-base: #006142; +@cont-color-data-viz-status-border-category-8-minimal: #c9ead6; +@cont-color-control-bg-minimal: #ffffff; +@cont-color-control-bg-subtle: #dee2eb; +@cont-color-control-bg-base: #141e29; +@cont-color-control-bg-moderate: #424c58; +@cont-color-control-bg-bold: #505b67; +@cont-color-control-border-minimal: #c0cadb; +@cont-color-control-border-subtle: #848f9c; +@cont-color-control-border-base: #141e29; +@cont-color-control-border-moderate: #424c58; +@cont-color-control-border-bold: #505b67; +@cont-color-control-fg-on-minimal: #505b67; +@cont-color-control-fg-on-subtle: #141e29; +@cont-color-control-fg-on-base: #ffffff; +@cont-color-control-fg-on-moderate: #ffffff; +@cont-color-control-fg-on-bold: #ffffff; +@cont-color-field-bg-on-canvas-base: #f6f7f9; +@cont-color-field-bg-on-layer-1-base: #ffffff; +@cont-color-field-bg-on-layer-2-base: #f6f7f9; +@cont-color-field-bg-on-layer-3-base: #ffffff; +@cont-color-field-bg-on-layer-4-base: #f6f7f9; +@cont-color-field-border-on-canvas-bold: #003f60; +@cont-color-field-border-on-canvas-moderate: #848f9c; +@cont-color-field-border-on-canvas-subtle: #848f9c; +@cont-color-field-border-on-layer-1-bold: #003f60; +@cont-color-field-border-on-layer-1-moderate: #848f9c; +@cont-color-field-border-on-layer-1-subtle: #848f9c; +@cont-color-field-border-on-layer-2-bold: #003f60; +@cont-color-field-border-on-layer-2-moderate: #848f9c; +@cont-color-field-border-on-layer-2-subtle: #848f9c; +@cont-color-field-border-on-layer-3-bold: #003f60; +@cont-color-field-border-on-layer-3-moderate: #848f9c; +@cont-color-field-border-on-layer-3-subtle: #848f9c; +@cont-color-field-border-on-layer-4-bold: #003f60; +@cont-color-field-border-on-layer-4-moderate: #848f9c; +@cont-color-field-border-on-layer-4-subtle: #848f9c; +@cont-color-field-fg-on-canvas-bold: #141e29; +@cont-color-field-fg-on-canvas-moderate: #323c48; +@cont-color-field-fg-on-canvas-subtle: #505b67; +@cont-color-field-fg-on-layer-1-bold: #141e29; +@cont-color-field-fg-on-layer-1-moderate: #323c48; +@cont-color-field-fg-on-layer-1-subtle: #505b67; +@cont-color-field-fg-on-layer-2-bold: #141e29; +@cont-color-field-fg-on-layer-2-moderate: #323c48; +@cont-color-field-fg-on-layer-2-subtle: #505b67; +@cont-color-field-fg-on-layer-3-bold: #141e29; +@cont-color-field-fg-on-layer-3-moderate: #323c48; +@cont-color-field-fg-on-layer-3-subtle: #505b67; +@cont-color-field-fg-on-layer-4-bold: #141e29; +@cont-color-field-fg-on-layer-4-moderate: #323c48; +@cont-color-field-fg-on-layer-4-subtle: #505b67; +@cont-color-menu-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-canvas-subtle: #f6f7f9; +@cont-color-menu-bg-on-canvas-moderate: #dee2eb; +@cont-color-menu-bg-on-canvas-bold: #848f9c; +@cont-color-menu-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-1-subtle: #ffffff; +@cont-color-menu-bg-on-layer-1-moderate: #dee2eb; +@cont-color-menu-bg-on-layer-1-bold: #848f9c; +@cont-color-menu-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-2-subtle: #f6f7f9; +@cont-color-menu-bg-on-layer-2-moderate: #dee2eb; +@cont-color-menu-bg-on-layer-2-bold: #848f9c; +@cont-color-menu-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-3-subtle: #ffffff; +@cont-color-menu-bg-on-layer-3-moderate: #dee2eb; +@cont-color-menu-bg-on-layer-3-bold: #848f9c; +@cont-color-menu-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-menu-bg-on-layer-4-subtle: #f6f7f9; +@cont-color-menu-bg-on-layer-4-moderate: #dee2eb; +@cont-color-menu-bg-on-layer-4-bold: #848f9c; +@cont-color-menu-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-canvas-moderate: #dee2eb; +@cont-color-menu-border-on-canvas-bold: #003f60; +@cont-color-menu-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-1-moderate: #dee2eb; +@cont-color-menu-border-on-layer-1-bold: #003f60; +@cont-color-menu-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-2-moderate: #dee2eb; +@cont-color-menu-border-on-layer-2-bold: #003f60; +@cont-color-menu-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-3-moderate: #dee2eb; +@cont-color-menu-border-on-layer-3-bold: #003f60; +@cont-color-menu-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-menu-border-on-layer-4-moderate: #dee2eb; +@cont-color-menu-border-on-layer-4-bold: #003f60; +@cont-color-menu-fg-on-minimal: #141e29; +@cont-color-menu-fg-on-subtle: #141e29; +@cont-color-menu-fg-on-moderate: #141e29; +@cont-color-menu-fg-on-bold: #141e29; +@cont-color-navigation-bg-on-canvas-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-canvas-subtle: #f6f7f9; +@cont-color-navigation-bg-on-canvas-moderate: #dee2eb; +@cont-color-navigation-bg-on-canvas-bold: #848f9c; +@cont-color-navigation-bg-on-layer-1-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-1-subtle: #ffffff; +@cont-color-navigation-bg-on-layer-1-moderate: #dee2eb; +@cont-color-navigation-bg-on-layer-1-bold: #848f9c; +@cont-color-navigation-bg-on-layer-2-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-2-subtle: #f6f7f9; +@cont-color-navigation-bg-on-layer-2-moderate: #dee2eb; +@cont-color-navigation-bg-on-layer-2-bold: #848f9c; +@cont-color-navigation-bg-on-layer-3-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-3-subtle: #ffffff; +@cont-color-navigation-bg-on-layer-3-moderate: #dee2eb; +@cont-color-navigation-bg-on-layer-3-bold: #848f9c; +@cont-color-navigation-bg-on-layer-4-minimal: rgba(0, 0, 0, 0); +@cont-color-navigation-bg-on-layer-4-subtle: #f6f7f9; +@cont-color-navigation-bg-on-layer-4-moderate: #dee2eb; +@cont-color-navigation-bg-on-layer-4-bold: #848f9c; +@cont-color-navigation-border-on-canvas-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-canvas-moderate: #dee2eb; +@cont-color-navigation-border-on-canvas-bold: #003f60; +@cont-color-navigation-border-on-layer-1-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-1-moderate: #dee2eb; +@cont-color-navigation-border-on-layer-1-bold: #003f60; +@cont-color-navigation-border-on-layer-2-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-2-moderate: #dee2eb; +@cont-color-navigation-border-on-layer-2-bold: #003f60; +@cont-color-navigation-border-on-layer-3-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-3-moderate: #dee2eb; +@cont-color-navigation-border-on-layer-3-bold: #003f60; +@cont-color-navigation-border-on-layer-4-subtle: rgba(0, 0, 0, 0); +@cont-color-navigation-border-on-layer-4-moderate: #dee2eb; +@cont-color-navigation-border-on-layer-4-bold: #003f60; +@cont-color-navigation-fg-on-minimal: #141e29; +@cont-color-navigation-fg-on-subtle: #141e29; +@cont-color-navigation-fg-on-moderate: #141e29; +@cont-color-navigation-fg-on-bold: #141e29; +@cont-color-navigation-fg-description-on-minimal: #323c48; +@cont-color-navigation-fg-description-on-subtle: #323c48; +@cont-color-navigation-fg-description-on-moderate: #323c48; +@cont-color-navigation-fg-description-on-bold: #323c48; diff --git a/packages/ds-theme/src/web-design-tokens/version.txt b/packages/ds-theme/src/web-design-tokens/version.txt new file mode 100644 index 0000000000..ef8c7dc014 --- /dev/null +++ b/packages/ds-theme/src/web-design-tokens/version.txt @@ -0,0 +1 @@ +0.0.3-dev.16 \ No newline at end of file diff --git a/packages/elements/package.json b/packages/elements/package.json index 8c4736ee91..abc4e66eff 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -36,41 +36,57 @@ "./accordion/themes/halo/light": "./lib/accordion/themes/halo/light/index.js", "./accordion/themes/solar/charcoal": "./lib/accordion/themes/solar/charcoal/index.js", "./accordion/themes/solar/pearl": "./lib/accordion/themes/solar/pearl/index.js", + "./accordion/themes/ds/light": "./lib/accordion/themes/ds/light/index.js", + "./accordion/themes/ds/dark": "./lib/accordion/themes/ds/dark/index.js", "./appstate-bar": "./lib/appstate-bar/index.js", "./appstate-bar/themes/halo/dark": "./lib/appstate-bar/themes/halo/dark/index.js", "./appstate-bar/themes/halo/light": "./lib/appstate-bar/themes/halo/light/index.js", "./appstate-bar/themes/solar/charcoal": "./lib/appstate-bar/themes/solar/charcoal/index.js", "./appstate-bar/themes/solar/pearl": "./lib/appstate-bar/themes/solar/pearl/index.js", + "./appstate-bar/themes/ds/light": "./lib/appstate-bar/themes/ds/light/index.js", + "./appstate-bar/themes/ds/dark": "./lib/appstate-bar/themes/ds/dark/index.js", "./autosuggest": "./lib/autosuggest/index.js", "./autosuggest/themes/halo/dark": "./lib/autosuggest/themes/halo/dark/index.js", "./autosuggest/themes/halo/light": "./lib/autosuggest/themes/halo/light/index.js", "./autosuggest/themes/solar/charcoal": "./lib/autosuggest/themes/solar/charcoal/index.js", "./autosuggest/themes/solar/pearl": "./lib/autosuggest/themes/solar/pearl/index.js", + "./autosuggest/themes/ds/light": "./lib/autosuggest/themes/ds/light/index.js", + "./autosuggest/themes/ds/dark": "./lib/autosuggest/themes/ds/dark/index.js", "./button": "./lib/button/index.js", "./button/themes/halo/dark": "./lib/button/themes/halo/dark/index.js", "./button/themes/halo/light": "./lib/button/themes/halo/light/index.js", "./button/themes/solar/charcoal": "./lib/button/themes/solar/charcoal/index.js", "./button/themes/solar/pearl": "./lib/button/themes/solar/pearl/index.js", + "./button/themes/ds/light": "./lib/button/themes/ds/light/index.js", + "./button/themes/ds/dark": "./lib/button/themes/ds/dark/index.js", "./button-bar": "./lib/button-bar/index.js", "./button-bar/themes/halo/dark": "./lib/button-bar/themes/halo/dark/index.js", "./button-bar/themes/halo/light": "./lib/button-bar/themes/halo/light/index.js", "./button-bar/themes/solar/charcoal": "./lib/button-bar/themes/solar/charcoal/index.js", "./button-bar/themes/solar/pearl": "./lib/button-bar/themes/solar/pearl/index.js", + "./button-bar/themes/ds/light": "./lib/button-bar/themes/ds/light/index.js", + "./button-bar/themes/ds/dark": "./lib/button-bar/themes/ds/dark/index.js", "./calendar": "./lib/calendar/index.js", "./calendar/themes/halo/dark": "./lib/calendar/themes/halo/dark/index.js", "./calendar/themes/halo/light": "./lib/calendar/themes/halo/light/index.js", "./calendar/themes/solar/charcoal": "./lib/calendar/themes/solar/charcoal/index.js", "./calendar/themes/solar/pearl": "./lib/calendar/themes/solar/pearl/index.js", + "./calendar/themes/ds/light": "./lib/calendar/themes/ds/light/index.js", + "./calendar/themes/ds/dark": "./lib/calendar/themes/ds/dark/index.js", "./canvas": "./lib/canvas/index.js", "./canvas/themes/halo/dark": "./lib/canvas/themes/halo/dark/index.js", "./canvas/themes/halo/light": "./lib/canvas/themes/halo/light/index.js", "./canvas/themes/solar/charcoal": "./lib/canvas/themes/solar/charcoal/index.js", "./canvas/themes/solar/pearl": "./lib/canvas/themes/solar/pearl/index.js", + "./canvas/themes/ds/light": "./lib/canvas/themes/ds/light/index.js", + "./canvas/themes/ds/dark": "./lib/canvas/themes/ds/dark/index.js", "./card": "./lib/card/index.js", "./card/themes/halo/dark": "./lib/card/themes/halo/dark/index.js", "./card/themes/halo/light": "./lib/card/themes/halo/light/index.js", "./card/themes/solar/charcoal": "./lib/card/themes/solar/charcoal/index.js", "./card/themes/solar/pearl": "./lib/card/themes/solar/pearl/index.js", + "./card/themes/ds/light": "./lib/card/themes/ds/light/index.js", + "./card/themes/ds/dark": "./lib/card/themes/ds/dark/index.js", "./chart": "./lib/chart/index.js", "./chart/bare": "./lib/chart/bare.js", "./chart/plugins": "./lib/chart/plugins/index.js", @@ -78,252 +94,352 @@ "./chart/themes/halo/light": "./lib/chart/themes/halo/light/index.js", "./chart/themes/solar/charcoal": "./lib/chart/themes/solar/charcoal/index.js", "./chart/themes/solar/pearl": "./lib/chart/themes/solar/pearl/index.js", + "./chart/themes/ds/light": "./lib/chart/themes/ds/light/index.js", + "./chart/themes/ds/dark": "./lib/chart/themes/ds/dark/index.js", "./checkbox": "./lib/checkbox/index.js", "./checkbox/themes/halo/dark": "./lib/checkbox/themes/halo/dark/index.js", "./checkbox/themes/halo/light": "./lib/checkbox/themes/halo/light/index.js", "./checkbox/themes/solar/charcoal": "./lib/checkbox/themes/solar/charcoal/index.js", "./checkbox/themes/solar/pearl": "./lib/checkbox/themes/solar/pearl/index.js", + "./checkbox/themes/ds/light": "./lib/checkbox/themes/ds/light/index.js", + "./checkbox/themes/ds/dark": "./lib/checkbox/themes/ds/dark/index.js", "./clock": "./lib/clock/index.js", "./clock/themes/halo/dark": "./lib/clock/themes/halo/dark/index.js", "./clock/themes/halo/light": "./lib/clock/themes/halo/light/index.js", "./clock/themes/solar/charcoal": "./lib/clock/themes/solar/charcoal/index.js", "./clock/themes/solar/pearl": "./lib/clock/themes/solar/pearl/index.js", + "./clock/themes/ds/light": "./lib/clock/themes/ds/light/index.js", + "./clock/themes/ds/dark": "./lib/clock/themes/ds/dark/index.js", "./collapse": "./lib/collapse/index.js", "./collapse/themes/halo/dark": "./lib/collapse/themes/halo/dark/index.js", "./collapse/themes/halo/light": "./lib/collapse/themes/halo/light/index.js", "./collapse/themes/solar/charcoal": "./lib/collapse/themes/solar/charcoal/index.js", "./collapse/themes/solar/pearl": "./lib/collapse/themes/solar/pearl/index.js", + "./collapse/themes/ds/light": "./lib/collapse/themes/ds/light/index.js", + "./collapse/themes/ds/dark": "./lib/collapse/themes/ds/dark/index.js", "./color-dialog": "./lib/color-dialog/index.js", "./color-dialog/themes/halo/dark": "./lib/color-dialog/themes/halo/dark/index.js", "./color-dialog/themes/halo/light": "./lib/color-dialog/themes/halo/light/index.js", "./color-dialog/themes/solar/charcoal": "./lib/color-dialog/themes/solar/charcoal/index.js", "./color-dialog/themes/solar/pearl": "./lib/color-dialog/themes/solar/pearl/index.js", + "./color-dialog/themes/ds/light": "./lib/color-dialog/themes/ds/light/index.js", + "./color-dialog/themes/ds/dark": "./lib/color-dialog/themes/ds/dark/index.js", "./color-picker": "./lib/color-picker/index.js", "./color-picker/themes/halo/dark": "./lib/color-picker/themes/halo/dark/index.js", "./color-picker/themes/halo/light": "./lib/color-picker/themes/halo/light/index.js", "./color-picker/themes/solar/charcoal": "./lib/color-picker/themes/solar/charcoal/index.js", "./color-picker/themes/solar/pearl": "./lib/color-picker/themes/solar/pearl/index.js", + "./color-picker/themes/ds/light": "./lib/color-picker/themes/ds/light/index.js", + "./color-picker/themes/ds/dark": "./lib/color-picker/themes/ds/dark/index.js", "./combo-box": "./lib/combo-box/index.js", "./combo-box/themes/halo/dark": "./lib/combo-box/themes/halo/dark/index.js", "./combo-box/themes/halo/light": "./lib/combo-box/themes/halo/light/index.js", "./combo-box/themes/solar/charcoal": "./lib/combo-box/themes/solar/charcoal/index.js", "./combo-box/themes/solar/pearl": "./lib/combo-box/themes/solar/pearl/index.js", + "./combo-box/themes/ds/light": "./lib/combo-box/themes/ds/light/index.js", + "./combo-box/themes/ds/dark": "./lib/combo-box/themes/ds/dark/index.js", "./configuration": "./lib/configuration/index.js", "./counter": "./lib/counter/index.js", "./counter/themes/halo/dark": "./lib/counter/themes/halo/dark/index.js", "./counter/themes/halo/light": "./lib/counter/themes/halo/light/index.js", "./counter/themes/solar/charcoal": "./lib/counter/themes/solar/charcoal/index.js", "./counter/themes/solar/pearl": "./lib/counter/themes/solar/pearl/index.js", + "./counter/themes/ds/light": "./lib/counter/themes/ds/light/index.js", + "./counter/themes/ds/dark": "./lib/counter/themes/ds/dark/index.js", "./datetime-field": "./lib/datetime-field/index.js", "./datetime-field/themes/halo/dark": "./lib/datetime-field/themes/halo/dark/index.js", "./datetime-field/themes/halo/light": "./lib/datetime-field/themes/halo/light/index.js", "./datetime-field/themes/solar/charcoal": "./lib/datetime-field/themes/solar/charcoal/index.js", "./datetime-field/themes/solar/pearl": "./lib/datetime-field/themes/solar/pearl/index.js", + "./datetime-field/themes/ds/light": "./lib/datetime-field/themes/ds/light/index.js", + "./datetime-field/themes/ds/dark": "./lib/datetime-field/themes/ds/dark/index.js", "./datetime-picker": "./lib/datetime-picker/index.js", "./datetime-picker/themes/halo/dark": "./lib/datetime-picker/themes/halo/dark/index.js", "./datetime-picker/themes/halo/light": "./lib/datetime-picker/themes/halo/light/index.js", "./datetime-picker/themes/solar/charcoal": "./lib/datetime-picker/themes/solar/charcoal/index.js", "./datetime-picker/themes/solar/pearl": "./lib/datetime-picker/themes/solar/pearl/index.js", + "./datetime-picker/themes/ds/light": "./lib/datetime-picker/themes/ds/light/index.js", + "./datetime-picker/themes/ds/dark": "./lib/datetime-picker/themes/ds/dark/index.js", "./dialog": "./lib/dialog/index.js", "./dialog/themes/halo/dark": "./lib/dialog/themes/halo/dark/index.js", "./dialog/themes/halo/light": "./lib/dialog/themes/halo/light/index.js", "./dialog/themes/solar/charcoal": "./lib/dialog/themes/solar/charcoal/index.js", "./dialog/themes/solar/pearl": "./lib/dialog/themes/solar/pearl/index.js", + "./dialog/themes/ds/light": "./lib/dialog/themes/ds/light/index.js", + "./dialog/themes/ds/dark": "./lib/dialog/themes/ds/dark/index.js", "./email-field": "./lib/email-field/index.js", "./email-field/themes/halo/dark": "./lib/email-field/themes/halo/dark/index.js", "./email-field/themes/halo/light": "./lib/email-field/themes/halo/light/index.js", "./email-field/themes/solar/charcoal": "./lib/email-field/themes/solar/charcoal/index.js", "./email-field/themes/solar/pearl": "./lib/email-field/themes/solar/pearl/index.js", + "./email-field/themes/ds/light": "./lib/email-field/themes/ds/light/index.js", + "./email-field/themes/ds/dark": "./lib/email-field/themes/ds/dark/index.js", "./flag": "./lib/flag/index.js", "./flag/themes/halo/dark": "./lib/flag/themes/halo/dark/index.js", "./flag/themes/halo/light": "./lib/flag/themes/halo/light/index.js", "./flag/themes/solar/charcoal": "./lib/flag/themes/solar/charcoal/index.js", "./flag/themes/solar/pearl": "./lib/flag/themes/solar/pearl/index.js", + "./flag/themes/ds/light": "./lib/flag/themes/ds/light/index.js", + "./flag/themes/ds/dark": "./lib/flag/themes/ds/dark/index.js", "./header": "./lib/header/index.js", "./header/themes/halo/dark": "./lib/header/themes/halo/dark/index.js", "./header/themes/halo/light": "./lib/header/themes/halo/light/index.js", "./header/themes/solar/charcoal": "./lib/header/themes/solar/charcoal/index.js", "./header/themes/solar/pearl": "./lib/header/themes/solar/pearl/index.js", + "./header/themes/ds/light": "./lib/header/themes/ds/light/index.js", + "./header/themes/ds/dark": "./lib/header/themes/ds/dark/index.js", "./heatmap": "./lib/heatmap/index.js", "./heatmap/themes/halo/dark": "./lib/heatmap/themes/halo/dark/index.js", "./heatmap/themes/halo/light": "./lib/heatmap/themes/halo/light/index.js", "./heatmap/themes/solar/charcoal": "./lib/heatmap/themes/solar/charcoal/index.js", "./heatmap/themes/solar/pearl": "./lib/heatmap/themes/solar/pearl/index.js", + "./heatmap/themes/ds/light": "./lib/heatmap/themes/ds/light/index.js", + "./heatmap/themes/ds/dark": "./lib/heatmap/themes/ds/dark/index.js", "./icon": "./lib/icon/index.js", "./icon/themes/halo/dark": "./lib/icon/themes/halo/dark/index.js", "./icon/themes/halo/light": "./lib/icon/themes/halo/light/index.js", "./icon/themes/solar/charcoal": "./lib/icon/themes/solar/charcoal/index.js", "./icon/themes/solar/pearl": "./lib/icon/themes/solar/pearl/index.js", + "./icon/themes/ds/light": "./lib/icon/themes/ds/light/index.js", + "./icon/themes/ds/dark": "./lib/icon/themes/ds/dark/index.js", "./interactive-chart": "./lib/interactive-chart/index.js", "./interactive-chart/themes/halo/dark": "./lib/interactive-chart/themes/halo/dark/index.js", "./interactive-chart/themes/halo/light": "./lib/interactive-chart/themes/halo/light/index.js", "./interactive-chart/themes/solar/charcoal": "./lib/interactive-chart/themes/solar/charcoal/index.js", "./interactive-chart/themes/solar/pearl": "./lib/interactive-chart/themes/solar/pearl/index.js", + "./interactive-chart/themes/ds/light": "./lib/interactive-chart/themes/ds/light/index.js", + "./interactive-chart/themes/ds/dark": "./lib/interactive-chart/themes/ds/dark/index.js", "./item": "./lib/item/index.js", "./item/themes/halo/dark": "./lib/item/themes/halo/dark/index.js", "./item/themes/halo/light": "./lib/item/themes/halo/light/index.js", "./item/themes/solar/charcoal": "./lib/item/themes/solar/charcoal/index.js", "./item/themes/solar/pearl": "./lib/item/themes/solar/pearl/index.js", + "./item/themes/ds/light": "./lib/item/themes/ds/light/index.js", + "./item/themes/ds/dark": "./lib/item/themes/ds/dark/index.js", "./label": "./lib/label/index.js", "./label/themes/halo/dark": "./lib/label/themes/halo/dark/index.js", "./label/themes/halo/light": "./lib/label/themes/halo/light/index.js", "./label/themes/solar/charcoal": "./lib/label/themes/solar/charcoal/index.js", "./label/themes/solar/pearl": "./lib/label/themes/solar/pearl/index.js", + "./label/themes/ds/light": "./lib/label/themes/ds/light/index.js", + "./label/themes/ds/dark": "./lib/label/themes/ds/dark/index.js", "./layout": "./lib/layout/index.js", "./layout/themes/halo/dark": "./lib/layout/themes/halo/dark/index.js", "./layout/themes/halo/light": "./lib/layout/themes/halo/light/index.js", "./layout/themes/solar/charcoal": "./lib/layout/themes/solar/charcoal/index.js", "./layout/themes/solar/pearl": "./lib/layout/themes/solar/pearl/index.js", + "./layout/themes/ds/light": "./lib/layout/themes/ds/light/index.js", + "./layout/themes/ds/dark": "./lib/layout/themes/ds/dark/index.js", "./led-gauge": "./lib/led-gauge/index.js", "./led-gauge/themes/halo/dark": "./lib/led-gauge/themes/halo/dark/index.js", "./led-gauge/themes/halo/light": "./lib/led-gauge/themes/halo/light/index.js", "./led-gauge/themes/solar/charcoal": "./lib/led-gauge/themes/solar/charcoal/index.js", "./led-gauge/themes/solar/pearl": "./lib/led-gauge/themes/solar/pearl/index.js", + "./led-gauge/themes/ds/light": "./lib/led-gauge/themes/ds/light/index.js", + "./led-gauge/themes/ds/dark": "./lib/led-gauge/themes/ds/dark/index.js", "./list": "./lib/list/index.js", "./list/themes/halo/dark": "./lib/list/themes/halo/dark/index.js", "./list/themes/halo/light": "./lib/list/themes/halo/light/index.js", "./list/themes/solar/charcoal": "./lib/list/themes/solar/charcoal/index.js", "./list/themes/solar/pearl": "./lib/list/themes/solar/pearl/index.js", + "./list/themes/ds/light": "./lib/list/themes/ds/light/index.js", + "./list/themes/ds/dark": "./lib/list/themes/ds/dark/index.js", "./loader": "./lib/loader/index.js", "./loader/themes/halo/dark": "./lib/loader/themes/halo/dark/index.js", "./loader/themes/halo/light": "./lib/loader/themes/halo/light/index.js", "./loader/themes/solar/charcoal": "./lib/loader/themes/solar/charcoal/index.js", "./loader/themes/solar/pearl": "./lib/loader/themes/solar/pearl/index.js", + "./loader/themes/ds/light": "./lib/loader/themes/ds/light/index.js", + "./loader/themes/ds/dark": "./lib/loader/themes/ds/dark/index.js", "./multi-input": "./lib/multi-input/index.js", "./multi-input/themes/halo/dark": "./lib/multi-input/themes/halo/dark/index.js", "./multi-input/themes/halo/light": "./lib/multi-input/themes/halo/light/index.js", "./multi-input/themes/solar/charcoal": "./lib/multi-input/themes/solar/charcoal/index.js", "./multi-input/themes/solar/pearl": "./lib/multi-input/themes/solar/pearl/index.js", + "./multi-input/themes/ds/light": "./lib/multi-input/themes/ds/light/index.js", + "./multi-input/themes/ds/dark": "./lib/multi-input/themes/ds/dark/index.js", "./notification": "./lib/notification/index.js", "./notification/themes/halo/dark": "./lib/notification/themes/halo/dark/index.js", "./notification/themes/halo/light": "./lib/notification/themes/halo/light/index.js", "./notification/themes/solar/charcoal": "./lib/notification/themes/solar/charcoal/index.js", "./notification/themes/solar/pearl": "./lib/notification/themes/solar/pearl/index.js", + "./notification/themes/ds/light": "./lib/notification/themes/ds/light/index.js", + "./notification/themes/ds/dark": "./lib/notification/themes/ds/dark/index.js", "./number-field": "./lib/number-field/index.js", "./number-field/themes/halo/dark": "./lib/number-field/themes/halo/dark/index.js", "./number-field/themes/halo/light": "./lib/number-field/themes/halo/light/index.js", "./number-field/themes/solar/charcoal": "./lib/number-field/themes/solar/charcoal/index.js", "./number-field/themes/solar/pearl": "./lib/number-field/themes/solar/pearl/index.js", + "./number-field/themes/ds/light": "./lib/number-field/themes/ds/light/index.js", + "./number-field/themes/ds/dark": "./lib/number-field/themes/ds/dark/index.js", "./overlay": "./lib/overlay/index.js", "./overlay/themes/halo/dark": "./lib/overlay/themes/halo/dark/index.js", "./overlay/themes/halo/light": "./lib/overlay/themes/halo/light/index.js", "./overlay/themes/solar/charcoal": "./lib/overlay/themes/solar/charcoal/index.js", "./overlay/themes/solar/pearl": "./lib/overlay/themes/solar/pearl/index.js", + "./overlay/themes/ds/light": "./lib/overlay/themes/ds/light/index.js", + "./overlay/themes/ds/dark": "./lib/overlay/themes/ds/dark/index.js", "./overlay-menu": "./lib/overlay-menu/index.js", "./overlay-menu/themes/halo/dark": "./lib/overlay-menu/themes/halo/dark/index.js", "./overlay-menu/themes/halo/light": "./lib/overlay-menu/themes/halo/light/index.js", "./overlay-menu/themes/solar/charcoal": "./lib/overlay-menu/themes/solar/charcoal/index.js", "./overlay-menu/themes/solar/pearl": "./lib/overlay-menu/themes/solar/pearl/index.js", + "./overlay-menu/themes/ds/light": "./lib/overlay-menu/themes/ds/light/index.js", + "./overlay-menu/themes/ds/dark": "./lib/overlay-menu/themes/ds/dark/index.js", "./pagination": "./lib/pagination/index.js", "./pagination/themes/halo/dark": "./lib/pagination/themes/halo/dark/index.js", "./pagination/themes/halo/light": "./lib/pagination/themes/halo/light/index.js", "./pagination/themes/solar/charcoal": "./lib/pagination/themes/solar/charcoal/index.js", "./pagination/themes/solar/pearl": "./lib/pagination/themes/solar/pearl/index.js", + "./pagination/themes/ds/light": "./lib/pagination/themes/ds/light/index.js", + "./pagination/themes/ds/dark": "./lib/pagination/themes/ds/dark/index.js", "./panel": "./lib/panel/index.js", "./panel/themes/halo/dark": "./lib/panel/themes/halo/dark/index.js", "./panel/themes/halo/light": "./lib/panel/themes/halo/light/index.js", "./panel/themes/solar/charcoal": "./lib/panel/themes/solar/charcoal/index.js", "./panel/themes/solar/pearl": "./lib/panel/themes/solar/pearl/index.js", + "./panel/themes/ds/light": "./lib/panel/themes/ds/light/index.js", + "./panel/themes/ds/dark": "./lib/panel/themes/ds/dark/index.js", "./password-field": "./lib/password-field/index.js", "./password-field/themes/halo/dark": "./lib/password-field/themes/halo/dark/index.js", "./password-field/themes/halo/light": "./lib/password-field/themes/halo/light/index.js", "./password-field/themes/solar/charcoal": "./lib/password-field/themes/solar/charcoal/index.js", "./password-field/themes/solar/pearl": "./lib/password-field/themes/solar/pearl/index.js", + "./password-field/themes/ds/light": "./lib/password-field/themes/ds/light/index.js", + "./password-field/themes/ds/dark": "./lib/password-field/themes/ds/dark/index.js", "./pill": "./lib/pill/index.js", "./pill/themes/halo/dark": "./lib/pill/themes/halo/dark/index.js", "./pill/themes/halo/light": "./lib/pill/themes/halo/light/index.js", "./pill/themes/solar/charcoal": "./lib/pill/themes/solar/charcoal/index.js", "./pill/themes/solar/pearl": "./lib/pill/themes/solar/pearl/index.js", + "./pill/themes/ds/light": "./lib/pill/themes/ds/light/index.js", + "./pill/themes/ds/dark": "./lib/pill/themes/ds/dark/index.js", "./progress-bar": "./lib/progress-bar/index.js", "./progress-bar/themes/halo/dark": "./lib/progress-bar/themes/halo/dark/index.js", "./progress-bar/themes/halo/light": "./lib/progress-bar/themes/halo/light/index.js", "./progress-bar/themes/solar/charcoal": "./lib/progress-bar/themes/solar/charcoal/index.js", "./progress-bar/themes/solar/pearl": "./lib/progress-bar/themes/solar/pearl/index.js", + "./progress-bar/themes/ds/light": "./lib/progress-bar/themes/ds/light/index.js", + "./progress-bar/themes/ds/dark": "./lib/progress-bar/themes/ds/dark/index.js", "./radio-button": "./lib/radio-button/index.js", "./radio-button/themes/halo/dark": "./lib/radio-button/themes/halo/dark/index.js", "./radio-button/themes/halo/light": "./lib/radio-button/themes/halo/light/index.js", "./radio-button/themes/solar/charcoal": "./lib/radio-button/themes/solar/charcoal/index.js", "./radio-button/themes/solar/pearl": "./lib/radio-button/themes/solar/pearl/index.js", + "./radio-button/themes/ds/light": "./lib/radio-button/themes/ds/light/index.js", + "./radio-button/themes/ds/dark": "./lib/radio-button/themes/ds/dark/index.js", "./rating": "./lib/rating/index.js", "./rating/themes/halo/dark": "./lib/rating/themes/halo/dark/index.js", "./rating/themes/halo/light": "./lib/rating/themes/halo/light/index.js", "./rating/themes/solar/charcoal": "./lib/rating/themes/solar/charcoal/index.js", "./rating/themes/solar/pearl": "./lib/rating/themes/solar/pearl/index.js", + "./rating/themes/ds/light": "./lib/rating/themes/ds/light/index.js", + "./rating/themes/ds/dark": "./lib/rating/themes/ds/dark/index.js", "./search-field": "./lib/search-field/index.js", "./search-field/themes/halo/dark": "./lib/search-field/themes/halo/dark/index.js", "./search-field/themes/halo/light": "./lib/search-field/themes/halo/light/index.js", "./search-field/themes/solar/charcoal": "./lib/search-field/themes/solar/charcoal/index.js", "./search-field/themes/solar/pearl": "./lib/search-field/themes/solar/pearl/index.js", + "./search-field/themes/ds/light": "./lib/search-field/themes/ds/light/index.js", + "./search-field/themes/ds/dark": "./lib/search-field/themes/ds/dark/index.js", "./select": "./lib/select/index.js", "./select/themes/halo/dark": "./lib/select/themes/halo/dark/index.js", "./select/themes/halo/light": "./lib/select/themes/halo/light/index.js", "./select/themes/solar/charcoal": "./lib/select/themes/solar/charcoal/index.js", "./select/themes/solar/pearl": "./lib/select/themes/solar/pearl/index.js", + "./select/themes/ds/light": "./lib/select/themes/ds/light/index.js", + "./select/themes/ds/dark": "./lib/select/themes/ds/dark/index.js", "./sidebar-layout": "./lib/sidebar-layout/index.js", "./sidebar-layout/themes/halo/dark": "./lib/sidebar-layout/themes/halo/dark/index.js", "./sidebar-layout/themes/halo/light": "./lib/sidebar-layout/themes/halo/light/index.js", "./sidebar-layout/themes/solar/charcoal": "./lib/sidebar-layout/themes/solar/charcoal/index.js", "./sidebar-layout/themes/solar/pearl": "./lib/sidebar-layout/themes/solar/pearl/index.js", + "./sidebar-layout/themes/ds/light": "./lib/sidebar-layout/themes/ds/light/index.js", + "./sidebar-layout/themes/ds/dark": "./lib/sidebar-layout/themes/ds/dark/index.js", "./slider": "./lib/slider/index.js", "./slider/themes/halo/dark": "./lib/slider/themes/halo/dark/index.js", "./slider/themes/halo/light": "./lib/slider/themes/halo/light/index.js", "./slider/themes/solar/charcoal": "./lib/slider/themes/solar/charcoal/index.js", "./slider/themes/solar/pearl": "./lib/slider/themes/solar/pearl/index.js", + "./slider/themes/ds/light": "./lib/slider/themes/ds/light/index.js", + "./slider/themes/ds/dark": "./lib/slider/themes/ds/dark/index.js", "./sparkline": "./lib/sparkline/index.js", "./sparkline/themes/halo/dark": "./lib/sparkline/themes/halo/dark/index.js", "./sparkline/themes/halo/light": "./lib/sparkline/themes/halo/light/index.js", "./sparkline/themes/solar/charcoal": "./lib/sparkline/themes/solar/charcoal/index.js", "./sparkline/themes/solar/pearl": "./lib/sparkline/themes/solar/pearl/index.js", + "./sparkline/themes/ds/light": "./lib/sparkline/themes/ds/light/index.js", + "./sparkline/themes/ds/dark": "./lib/sparkline/themes/ds/dark/index.js", "./swing-gauge": "./lib/swing-gauge/index.js", "./swing-gauge/themes/halo/dark": "./lib/swing-gauge/themes/halo/dark/index.js", "./swing-gauge/themes/halo/light": "./lib/swing-gauge/themes/halo/light/index.js", "./swing-gauge/themes/solar/charcoal": "./lib/swing-gauge/themes/solar/charcoal/index.js", "./swing-gauge/themes/solar/pearl": "./lib/swing-gauge/themes/solar/pearl/index.js", + "./swing-gauge/themes/ds/light": "./lib/swing-gauge/themes/ds/light/index.js", + "./swing-gauge/themes/ds/dark": "./lib/swing-gauge/themes/ds/dark/index.js", "./tab": "./lib/tab/index.js", "./tab/themes/halo/dark": "./lib/tab/themes/halo/dark/index.js", "./tab/themes/halo/light": "./lib/tab/themes/halo/light/index.js", "./tab/themes/solar/charcoal": "./lib/tab/themes/solar/charcoal/index.js", "./tab/themes/solar/pearl": "./lib/tab/themes/solar/pearl/index.js", + "./tab/themes/ds/light": "./lib/tab/themes/ds/light/index.js", + "./tab/themes/ds/dark": "./lib/tab/themes/ds/dark/index.js", "./tab-bar": "./lib/tab-bar/index.js", "./tab-bar/themes/halo/dark": "./lib/tab-bar/themes/halo/dark/index.js", "./tab-bar/themes/halo/light": "./lib/tab-bar/themes/halo/light/index.js", "./tab-bar/themes/solar/charcoal": "./lib/tab-bar/themes/solar/charcoal/index.js", "./tab-bar/themes/solar/pearl": "./lib/tab-bar/themes/solar/pearl/index.js", + "./tab-bar/themes/ds/light": "./lib/tab-bar/themes/ds/light/index.js", + "./tab-bar/themes/ds/dark": "./lib/tab-bar/themes/ds/dark/index.js", "./text-field": "./lib/text-field/index.js", "./text-field/themes/halo/dark": "./lib/text-field/themes/halo/dark/index.js", "./text-field/themes/halo/light": "./lib/text-field/themes/halo/light/index.js", "./text-field/themes/solar/charcoal": "./lib/text-field/themes/solar/charcoal/index.js", "./text-field/themes/solar/pearl": "./lib/text-field/themes/solar/pearl/index.js", + "./text-field/themes/ds/light": "./lib/text-field/themes/ds/light/index.js", + "./text-field/themes/ds/dark": "./lib/text-field/themes/ds/dark/index.js", "./time-picker": "./lib/time-picker/index.js", "./time-picker/themes/halo/dark": "./lib/time-picker/themes/halo/dark/index.js", "./time-picker/themes/halo/light": "./lib/time-picker/themes/halo/light/index.js", "./time-picker/themes/solar/charcoal": "./lib/time-picker/themes/solar/charcoal/index.js", "./time-picker/themes/solar/pearl": "./lib/time-picker/themes/solar/pearl/index.js", + "./time-picker/themes/ds/light": "./lib/time-picker/themes/ds/light/index.js", + "./time-picker/themes/ds/dark": "./lib/time-picker/themes/ds/dark/index.js", "./toggle": "./lib/toggle/index.js", "./toggle/themes/halo/dark": "./lib/toggle/themes/halo/dark/index.js", "./toggle/themes/halo/light": "./lib/toggle/themes/halo/light/index.js", "./toggle/themes/solar/charcoal": "./lib/toggle/themes/solar/charcoal/index.js", "./toggle/themes/solar/pearl": "./lib/toggle/themes/solar/pearl/index.js", + "./toggle/themes/ds/light": "./lib/toggle/themes/ds/light/index.js", + "./toggle/themes/ds/dark": "./lib/toggle/themes/ds/dark/index.js", "./tooltip": "./lib/tooltip/index.js", "./tooltip/themes/halo/dark": "./lib/tooltip/themes/halo/dark/index.js", "./tooltip/themes/halo/light": "./lib/tooltip/themes/halo/light/index.js", "./tooltip/themes/solar/charcoal": "./lib/tooltip/themes/solar/charcoal/index.js", "./tooltip/themes/solar/pearl": "./lib/tooltip/themes/solar/pearl/index.js", + "./tooltip/themes/ds/light": "./lib/tooltip/themes/ds/light/index.js", + "./tooltip/themes/ds/dark": "./lib/tooltip/themes/ds/dark/index.js", "./tornado-chart": "./lib/tornado-chart/index.js", "./tornado-chart/themes/halo/dark": "./lib/tornado-chart/themes/halo/dark/index.js", "./tornado-chart/themes/halo/light": "./lib/tornado-chart/themes/halo/light/index.js", "./tornado-chart/themes/solar/charcoal": "./lib/tornado-chart/themes/solar/charcoal/index.js", "./tornado-chart/themes/solar/pearl": "./lib/tornado-chart/themes/solar/pearl/index.js", + "./tornado-chart/themes/ds/light": "./lib/tornado-chart/themes/ds/light/index.js", + "./tornado-chart/themes/ds/dark": "./lib/tornado-chart/themes/ds/dark/index.js", "./tree": "./lib/tree/index.js", "./tree/themes/halo/dark": "./lib/tree/themes/halo/dark/index.js", "./tree/themes/halo/light": "./lib/tree/themes/halo/light/index.js", "./tree/themes/solar/charcoal": "./lib/tree/themes/solar/charcoal/index.js", "./tree/themes/solar/pearl": "./lib/tree/themes/solar/pearl/index.js", + "./tree/themes/ds/light": "./lib/tree/themes/ds/light/index.js", + "./tree/themes/ds/dark": "./lib/tree/themes/ds/dark/index.js", "./tree-select": "./lib/tree-select/index.js", "./tree-select/themes/halo/dark": "./lib/tree-select/themes/halo/dark/index.js", "./tree-select/themes/halo/light": "./lib/tree-select/themes/halo/light/index.js", "./tree-select/themes/solar/charcoal": "./lib/tree-select/themes/solar/charcoal/index.js", - "./tree-select/themes/solar/pearl": "./lib/tree-select/themes/solar/pearl/index.js" + "./tree-select/themes/solar/pearl": "./lib/tree-select/themes/solar/pearl/index.js", + "./tree-select/themes/ds/light": "./lib/tree-select/themes/ds/light/index.js", + "./tree-select/themes/ds/dark": "./lib/tree-select/themes/ds/dark/index.js" }, "scripts": { "build": "node cli.js build --sourceMap --declarationMap", @@ -344,6 +460,7 @@ "@lit-labs/context": "^0.3.1", "@refinitiv-ui/halo-theme": "^7.5.2", "@refinitiv-ui/solar-theme": "^7.3.3", + "@refinitiv-ui/ds-theme": "^7.0.0", "chart.js": "^4.4.2", "chartjs-adapter-date-fns": "^3.0.0", "d3-interpolate": "^3.0.1", diff --git a/packages/elements/src/appstate-bar/__demo__/index.html b/packages/elements/src/appstate-bar/__demo__/index.html index f021eaad19..e3be55a0cc 100644 --- a/packages/elements/src/appstate-bar/__demo__/index.html +++ b/packages/elements/src/appstate-bar/__demo__/index.html @@ -9,12 +9,8 @@ } a ef-icon { - font-size: 20px; - vertical-align: middle; - } - - a span { - vertical-align: middle; + font-size: 18px; + vertical-align: bottom; } diff --git a/packages/halo-theme/LICENSE b/packages/halo-theme/LICENSE index c5972ecc2d..c3ed8e126f 100644 --- a/packages/halo-theme/LICENSE +++ b/packages/halo-theme/LICENSE @@ -1,4 +1,4 @@ -Copyright (C) 2023 LSEG. All rights reserved. +Copyright (C) 2024 LSEG. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: @@ -10,4 +10,4 @@ Redistribution and use in source and binary forms, with or without modification, THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -4. The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text +4. The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text diff --git a/packages/solar-theme/LICENSE b/packages/solar-theme/LICENSE index c5972ecc2d..c3ed8e126f 100644 --- a/packages/solar-theme/LICENSE +++ b/packages/solar-theme/LICENSE @@ -1,4 +1,4 @@ -Copyright (C) 2023 LSEG. All rights reserved. +Copyright (C) 2024 LSEG. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: @@ -10,4 +10,4 @@ Redistribution and use in source and binary forms, with or without modification, THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -4. The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text +4. The font "Proxima Nova Fin" shall only be used within LSEG products or services. The copyright owner must approve any use of such font outside of LSEG products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text diff --git a/packages/theme-compiler/src/fileManager.js b/packages/theme-compiler/src/fileManager.js index 2f909a6ff5..115836f6d4 100644 --- a/packages/theme-compiler/src/fileManager.js +++ b/packages/theme-compiler/src/fileManager.js @@ -39,9 +39,13 @@ export function ElementsFileManager(less, options) { ElementsFileManager.prototype.loadFile = function (filename, currentDirectory, options, environment) { if (this.options.isEntrypoint) { - return glob(filename.replace(prefix, ''), { cwd: currentDirectory }).then((files) => { + // Glob patterns should always use `/` as a path separator, even on Windows systems + const globPattern = path + .join(currentDirectory, filename.replace(prefix, '')) + .replaceAll(path.sep, path.posix.sep); + return glob(globPattern).then((files) => { for (const file of files) { - addElementFile(path.join(currentDirectory, file)); + addElementFile(file); } return { filename: '', contents: '' }; }); diff --git a/scripts/release/theme-extractor.js b/scripts/release/theme-extractor.js index ef998d7d63..155d78a853 100644 --- a/scripts/release/theme-extractor.js +++ b/scripts/release/theme-extractor.js @@ -14,11 +14,14 @@ import { normalizePathSeparators } from './util.js'; -// Element package scope +// Package name const PACKAGE_NAME = '@refinitiv-ui/elements'; +// Package scope +const PACKAGE_SCOPE_NAME = PACKAGE_NAME.split('/')[0]; + // Where to look for theme files -const THEME_SOURCE = normalizePathSeparators(`${ROOT}/node_modules/${PACKAGE_NAME.split('/')[0]}/`); +const THEME_SOURCE = normalizePathSeparators(path.join(ROOT, 'node_modules', PACKAGE_SCOPE_NAME)); // Post-fix of theme name const THEME_POSTFIX = '-theme'; @@ -38,7 +41,7 @@ const options = yargs(hideBin(process.argv)) alias: 't', describe: 'Themes separated by commas', type: 'string', - default: 'halo,solar' + default: 'ds,halo,solar' }).argv; // Extract the src and themes argument