From 622b16802df80f0fbf7f28028dbb9a6692ac5e0f Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Fri, 28 Jun 2024 18:40:20 +0500 Subject: [PATCH] feat(caldera-online-themes): Update themes and deps --- .../themes/caldera-online-themes/lib/index.ts | 9 +- .../caldera-online-themes/package-lock.json | 871 ------- .../themes/caldera-online-themes/package.json | 6 +- .../src/css/caldera_online.module.css | 723 +++--- .../src/css/caldera_online__dark.css | 218 +- .../src/css/caldera_online__light.css | 188 +- .../src/themes/caldera_online__dark.ts | 219 +- .../src/themes/caldera_online__light.ts | 189 +- .../caldera-online-themes/src/themes/index.ts | 2 +- .../src/tokens/caldera_online/index.ts | 715 +++++- .../caldera-online-themes/src/tokens/index.ts | 2166 ++++++++++------- .../caldera-online-themes/tsconfig.json | 2 +- 12 files changed, 2734 insertions(+), 2574 deletions(-) diff --git a/packages/themes/caldera-online-themes/lib/index.ts b/packages/themes/caldera-online-themes/lib/index.ts index 7c83cf0c1a..8a37186e35 100644 --- a/packages/themes/caldera-online-themes/lib/index.ts +++ b/packages/themes/caldera-online-themes/lib/index.ts @@ -1,3 +1,8 @@ -import { generate } from '@salutejs/data-themes'; +import { generate } from '@salutejs/core-themes'; -generate(['caldera_online'], 'mage'); +generate([ + { + name: 'caldera_online', + version: 'latest', + }, +]); diff --git a/packages/themes/caldera-online-themes/package-lock.json b/packages/themes/caldera-online-themes/package-lock.json index 1b4b631929..541a58d60b 100644 --- a/packages/themes/caldera-online-themes/package-lock.json +++ b/packages/themes/caldera-online-themes/package-lock.json @@ -8,194 +8,12 @@ "name": "@salutejs/caldera-online-themes", "version": "0.12.0", "license": "MIT", - "dependencies": { - "@salutejs/plasma-typo": "0.40.0", - "styled-components": "5.3.1" - }, "devDependencies": { - "@salutejs/data-themes": "0.11.0", "@types/node": "16.7.13", "ts-node": "10.2.1", "typescript": "4.2.4" } }, - "node_modules/@babel/code-frame": { - "version": "7.24.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", - "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", - "dependencies": { - "@babel/highlight": "^7.24.2", - "picocolors": "^1.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/generator": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz", - "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==", - "dependencies": { - "@babel/types": "^7.24.0", - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.25", - "jsesc": "^2.5.1" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-annotate-as-pure": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", - "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-environment-visitor": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", - "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-function-name": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", - "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", - "dependencies": { - "@babel/template": "^7.22.15", - "@babel/types": "^7.23.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-hoist-variables": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", - "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-imports": { - "version": "7.24.3", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", - "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", - "dependencies": { - "@babel/types": "^7.24.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-split-export-declaration": { - "version": "7.22.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", - "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", - "dependencies": { - "@babel/types": "^7.22.5" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "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==", - "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.24.2", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", - "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/parser": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz", - "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==", - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@babel/template": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", - "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", - "dependencies": { - "@babel/code-frame": "^7.23.5", - "@babel/parser": "^7.24.0", - "@babel/types": "^7.24.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/traverse": { - "version": "7.24.1", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz", - "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==", - "dependencies": { - "@babel/code-frame": "^7.24.1", - "@babel/generator": "^7.24.1", - "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-function-name": "^7.23.0", - "@babel/helper-hoist-variables": "^7.22.5", - "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.24.1", - "@babel/types": "^7.24.0", - "debug": "^4.3.1", - "globals": "^11.1.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/types": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", - "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", - "dependencies": { - "@babel/helper-string-parser": "^7.23.4", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@cspotcode/source-map-consumer": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz", @@ -217,88 +35,6 @@ "node": ">=12" } }, - "node_modules/@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "dependencies": { - "@emotion/memoize": "0.7.4" - } - }, - "node_modules/@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" - }, - "node_modules/@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, - "node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" - }, - "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "dependencies": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.24" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" - }, - "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==", - "dependencies": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" - } - }, - "node_modules/@salutejs/data-themes": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@salutejs/data-themes/-/data-themes-0.11.0.tgz", - "integrity": "sha512-thx8Mmxu1vpe70vhYh6rgIYJpkSSYQOmb1ilLcurfCbwT92wM7KMwpsH1Kd9fPMJ5gOi6SP4HBv2d2dWF4bdqQ==", - "dev": true - }, - "node_modules/@salutejs/plasma-typo": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-typo/-/plasma-typo-0.40.0.tgz", - "integrity": "sha512-wjIJwHb/N5wFyTwTKt4bimt0UpM0/TS3ZsKtJVBS5foqxxJFgv32Ma75RCnnqol38M+KHDa6Lrnu2po0jiicow==", - "peerDependencies": { - "react": ">=16.13.1", - "react-dom": ">=16.13.1", - "styled-components": "^5.1.1" - } - }, "node_modules/@tsconfig/node10": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz", @@ -341,116 +77,17 @@ "node": ">=0.4.0" } }, - "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/arg": { "version": "4.1.3", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", "dev": true }, - "node_modules/babel-plugin-styled-components": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", - "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.11", - "picomatch": "^2.3.0" - }, - "peerDependencies": { - "styled-components": ">= 2" - } - }, - "node_modules/babel-plugin-syntax-jsx": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" - }, - "node_modules/camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "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==", - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "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/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/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "dev": true }, - "node_modules/css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", - "engines": { - "node": ">=4" - } - }, - "node_modules/css-to-react-native": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", - "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "dependencies": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, - "node_modules/debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, "node_modules/diff": { "version": "4.0.2", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", @@ -459,148 +96,11 @@ "node": ">=0.3.1" } }, - "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/globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "engines": { - "node": ">=4" - } - }, - "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/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "dependencies": { - "react-is": "^16.7.0" - } - }, - "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==" - }, - "node_modules/jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "bin": { - "jsesc": "bin/jsesc" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, "node_modules/make-error": { "version": "1.3.6", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", "dev": true }, - "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, - "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, - "node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, - "node_modules/styled-components": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz", - "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==", - "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^0.8.8", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/styled-components" - }, - "peerDependencies": { - "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" - } - }, - "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" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "engines": { - "node": ">=4" - } - }, "node_modules/ts-node": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.2.1.tgz", @@ -677,135 +177,6 @@ } }, "dependencies": { - "@babel/code-frame": { - "version": "7.24.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", - "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", - "requires": { - "@babel/highlight": "^7.24.2", - "picocolors": "^1.0.0" - } - }, - "@babel/generator": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz", - "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==", - "requires": { - "@babel/types": "^7.24.0", - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.25", - "jsesc": "^2.5.1" - } - }, - "@babel/helper-annotate-as-pure": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", - "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", - "requires": { - "@babel/types": "^7.22.5" - } - }, - "@babel/helper-environment-visitor": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", - "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==" - }, - "@babel/helper-function-name": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", - "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", - "requires": { - "@babel/template": "^7.22.15", - "@babel/types": "^7.23.0" - } - }, - "@babel/helper-hoist-variables": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", - "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", - "requires": { - "@babel/types": "^7.22.5" - } - }, - "@babel/helper-module-imports": { - "version": "7.24.3", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", - "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", - "requires": { - "@babel/types": "^7.24.0" - } - }, - "@babel/helper-split-export-declaration": { - "version": "7.22.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", - "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", - "requires": { - "@babel/types": "^7.22.5" - } - }, - "@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==" - }, - "@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==" - }, - "@babel/highlight": { - "version": "7.24.2", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", - "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", - "requires": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" - } - }, - "@babel/parser": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz", - "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==" - }, - "@babel/template": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", - "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", - "requires": { - "@babel/code-frame": "^7.23.5", - "@babel/parser": "^7.24.0", - "@babel/types": "^7.24.0" - } - }, - "@babel/traverse": { - "version": "7.24.1", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz", - "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==", - "requires": { - "@babel/code-frame": "^7.24.1", - "@babel/generator": "^7.24.1", - "@babel/helper-environment-visitor": "^7.22.20", - "@babel/helper-function-name": "^7.23.0", - "@babel/helper-hoist-variables": "^7.22.5", - "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.24.1", - "@babel/types": "^7.24.0", - "debug": "^4.3.1", - "globals": "^11.1.0" - } - }, - "@babel/types": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", - "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", - "requires": { - "@babel/helper-string-parser": "^7.23.4", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" - } - }, "@cspotcode/source-map-consumer": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz", @@ -821,74 +192,6 @@ "@cspotcode/source-map-consumer": "0.8.0" } }, - "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "requires": { - "@emotion/memoize": "0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" - }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, - "@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" - }, - "@jridgewell/gen-mapping": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", - "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "requires": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.24" - } - }, - "@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==" - }, - "@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==" - }, - "@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" - }, - "@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==", - "requires": { - "@jridgewell/resolve-uri": "^3.1.0", - "@jridgewell/sourcemap-codec": "^1.4.14" - } - }, - "@salutejs/data-themes": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@salutejs/data-themes/-/data-themes-0.11.0.tgz", - "integrity": "sha512-thx8Mmxu1vpe70vhYh6rgIYJpkSSYQOmb1ilLcurfCbwT92wM7KMwpsH1Kd9fPMJ5gOi6SP4HBv2d2dWF4bdqQ==", - "dev": true - }, - "@salutejs/plasma-typo": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-typo/-/plasma-typo-0.40.0.tgz", - "integrity": "sha512-wjIJwHb/N5wFyTwTKt4bimt0UpM0/TS3ZsKtJVBS5foqxxJFgv32Ma75RCnnqol38M+KHDa6Lrnu2po0jiicow==" - }, "@tsconfig/node10": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz", @@ -925,201 +228,27 @@ "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true }, - "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==", - "requires": { - "color-convert": "^1.9.0" - } - }, "arg": { "version": "4.1.3", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", "dev": true }, - "babel-plugin-styled-components": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", - "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", - "requires": { - "@babel/helper-annotate-as-pure": "^7.16.0", - "@babel/helper-module-imports": "^7.16.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.11", - "picomatch": "^2.3.0" - } - }, - "babel-plugin-syntax-jsx": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" - }, - "camelize": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", - "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "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==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "dev": true }, - "css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" - }, - "css-to-react-native": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", - "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "requires": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, - "debug": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", - "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", - "requires": { - "ms": "2.1.2" - } - }, "diff": { "version": "4.0.2", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", "dev": true }, - "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==" - }, - "globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" - }, - "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==" - }, - "hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "requires": { - "react-is": "^16.7.0" - } - }, - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" - }, - "jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" - }, - "lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, "make-error": { "version": "1.3.6", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", "dev": true }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, - "picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" - }, - "postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, - "styled-components": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz", - "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==", - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^0.8.8", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - } - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "requires": { - "has-flag": "^3.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" - }, "ts-node": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.2.1.tgz", diff --git a/packages/themes/caldera-online-themes/package.json b/packages/themes/caldera-online-themes/package.json index 3754ea2b11..0558295200 100644 --- a/packages/themes/caldera-online-themes/package.json +++ b/packages/themes/caldera-online-themes/package.json @@ -30,12 +30,8 @@ "index.js", "index.js.map" ], - "dependencies": { - "@salutejs/plasma-typo": "0.40.0", - "styled-components": "5.3.1" - }, "devDependencies": { - "@salutejs/data-themes": "0.11.0", + "@salutejs/core-themes": "0.11.0", "@types/node": "16.7.13", "ts-node": "10.2.1", "typescript": "4.2.4" diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online.module.css b/packages/themes/caldera-online-themes/src/css/caldera_online.module.css index cbe781be1c..a7ffcb3e75 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online.module.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online.module.css @@ -3,22 +3,19 @@ .dark { --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; - --text-primary: #f5f5f5F5; + --text-primary: #F5F5F5F5; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; - --text-secondary: #F5f5f58F; + --text-secondary: #F5F5F58F; --text-tertiary-hover: #F5F5F5FF; --text-tertiary-active: #F5F5F556; - --text-tertiary: #F5f5f548; + --text-tertiary: #F5F5F548; --text-paragraph-hover: #F5F5F57A; --text-paragraph-active: #F5F5F5A3; - --text-paragraph: #f5f5f5cc; + --text-paragraph: #F5F5F5CC; --text-accent-hover: #2ACB47FF; --text-accent-active: #1F9835FF; --text-accent: #24B23E; - --text-accent-gradient-hover: #CCCCCCFF; - --text-accent-gradient-active: #E6E6E6FF; - --text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --text-positive-hover: #2ACB47FF; --text-positive-active: #1F9835FF; --text-positive: #24B23E; @@ -30,22 +27,19 @@ --text-negative: #FF3D51; --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; - --on-dark-text-primary: #f5f5f5F5; + --on-dark-text-primary: #F5F5F5F5; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; - --on-dark-text-secondary: #F5f5f58F; + --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary-hover: #F5F5F5FF; --on-dark-text-tertiary-active: #F5F5F556; - --on-dark-text-tertiary: #F5f5f548; + --on-dark-text-tertiary: #F5F5F548; --on-dark-text-paragraph-hover: #F5F5F57A; --on-dark-text-paragraph-active: #F5F5F5A3; - --on-dark-text-paragraph: #f5f5f5CC; + --on-dark-text-paragraph: #F5F5F5CC; --on-dark-text-accent-hover: #2ACB47FF; --on-dark-text-accent-active: #1F9835FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #CCCCCCFF; - --on-dark-text-accent-gradient-active: #E6E6E6FF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-text-positive-hover: #2ACB47FF; --on-dark-text-positive-active: #1F9835FF; --on-dark-text-positive: #24B23E; @@ -70,9 +64,6 @@ --on-light-text-accent-hover: #13AA2CFF; --on-light-text-accent-active: #0D731EFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #CCCCCCFF; - --on-light-text-accent-gradient-active: #E6E6E6FF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --on-light-text-positive-hover: #13AA2CFF; --on-light-text-positive-active: #0D731EFF; --on-light-text-positive: #108E26; @@ -97,9 +88,6 @@ --inverse-text-accent-hover: #13AA2CFF; --inverse-text-accent-active: #0D731EFF; --inverse-text-accent: #108E26; - --inverse-text-accent-gradient-hover: #CCCCCCFF; - --inverse-text-accent-gradient-active: #E6E6E6FF; - --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --inverse-text-positive-hover: #13AA2CFF; --inverse-text-positive-active: #0D731EFF; --inverse-text-positive: #108E26; @@ -129,10 +117,10 @@ --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary-hover: #FFFFFF3D; --surface-transparent-secondary-active: #FFFFFF0F; - --surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary-hover: #FFFFFF52; --surface-transparent-tertiary-active: #FFFFFF24; - --surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --surface-transparent-tertiary: #FFFFFF33; --surface-transparent-deep-hover: #FFFFFFC2; --surface-transparent-deep-active: #FFFFFF94; --surface-transparent-deep: #FFFFFFA3; @@ -141,13 +129,10 @@ --surface-transparent-card: #FFFFFF0F; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); + --surface-clear: #00000000; --surface-accent-hover: #1DAF37FF; --surface-accent-active: #18952FFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --surface-positive-hover: #1DAF37FF; --surface-positive-active: #18952FFF; --surface-positive: #1A9E32; @@ -174,13 +159,13 @@ --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-transparent-primary-hover: #FFFFFF1F; --on-dark-surface-transparent-primary-active: #FFFFFF0A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary-hover: #FFFFFF3D; --on-dark-surface-transparent-secondary-active: #FFFFFF0F; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary-hover: #FFFFFF52; --on-dark-surface-transparent-tertiary-active: #FFFFFF24; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep-hover: #FFFFFFC2; --on-dark-surface-transparent-deep-active: #FFFFFF94; --on-dark-surface-transparent-deep: #FFFFFFA3; @@ -189,13 +174,10 @@ --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); + --on-dark-surface-clear: #00000000; --on-dark-surface-accent-hover: #1DAF37FF; --on-dark-surface-accent-active: #18952FFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -222,28 +204,25 @@ --on-light-surface-solid-default: #080808; --on-light-surface-transparent-primary-hover: #0808080F; --on-light-surface-transparent-primary-active: #08080800; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary-hover: #0808081F; --on-light-surface-transparent-secondary-active: #0808080A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary-hover: #0808083D; --on-light-surface-transparent-tertiary-active: #0808080F; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --on-light-surface-transparent-tertiary: #0808081F; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; --on-light-surface-transparent-deep: #080808A3; --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; - --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-card: #0808080F; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); + --on-light-surface-clear: #00000000; --on-light-surface-accent-hover: #1DAF37FF; --on-light-surface-accent-active: #18952FFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -270,13 +249,13 @@ --inverse-surface-solid-default: #080808; --inverse-surface-transparent-primary-hover: #0808080F; --inverse-surface-transparent-primary-active: #08080800; - --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary-hover: #0808081F; --inverse-surface-transparent-secondary-active: #0808080A; - --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary-hover: #0808083D; --inverse-surface-transparent-tertiary-active: #0808080F; - --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --inverse-surface-transparent-tertiary: #0808081F; --inverse-surface-transparent-deep-hover: #080808C2; --inverse-surface-transparent-deep-active: #08080894; --inverse-surface-transparent-deep: #080808A3; @@ -285,13 +264,10 @@ --inverse-surface-transparent-card: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); + --inverse-surface-clear: #00000000; --inverse-surface-accent-hover: #1DAF37FF; --inverse-surface-accent-active: #18952FFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-surface-positive-hover: #1DAF37FF; --inverse-surface-positive-active: #18952FFF; --inverse-surface-positive: #1A9E32; @@ -306,51 +282,97 @@ --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; - --overlay-hard: #080808f5; - --overlay-blur: rgba(8,8,8,0.28); - --on-dark-overlay-soft: #0808088f; - --on-dark-overlay-hard: #080808f5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); - --on-light-overlay-soft: rgba(249,249,249,0.56); - --on-light-overlay-hard: #f9f9f9f5; - --on-light-overlay-blur: rgba(249,249,249,0.28); - --inverse-overlay-soft: #f9f9f98F; - --inverse-overlay-hard: #f9f9f9f5; - --inverse-overlay-blur: rgba(249,249,249,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% ); + --overlay-hard: #080808F5; + --overlay-blur: #08080847; + --on-dark-overlay-soft: #0808088F; + --on-dark-overlay-hard: #080808F5; + --on-dark-overlay-blur: #08080847; + --on-light-overlay-soft: #F9F9F98F; + --on-light-overlay-hard: #F9F9F9F5; + --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); } +.dark { + --text-accent-gradient-hover: #CCCCCCFF; + --text-accent-gradient-active: #E6E6E6FF; + --text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-text-accent-gradient-hover: #CCCCCCFF; + --on-dark-text-accent-gradient-active: #E6E6E6FF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #CCCCCCFF; + --on-light-text-accent-gradient-active: #E6E6E6FF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + .light { - --text-primary-hover: #17171793; - --text-primary-active: #171717C4; - --text-primary: #171717F5; - --text-secondary-hover: #171717FF; - --text-secondary-active: #171717AB; - --text-secondary: #1717178F; - --text-tertiary-hover: #171717FF; - --text-tertiary-active: #17171756; - --text-tertiary: #17171748; - --text-paragraph-hover: #1717177A; - --text-paragraph-active: #171717A3; - --text-paragraph: #171717CC; - --text-accent-hover: #14B32EFF; - --text-accent-active: #0C6A1BFF; - --text-accent: #108E26; - --text-accent-gradient-hover: #000000FF; - --text-accent-gradient-active: #CCCCCCFF; - --text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); - --text-positive-hover: #14B32EFF; - --text-positive-active: #0C6A1BFF; - --text-positive: #108E26; - --text-warning-hover: #FD6B17FF; - --text-warning-active: #C04802FF; - --text-warning: #E85702; - --text-negative-hover: #F54254FF; - --text-negative-active: #DA0B20FF; - --text-negative: #F31B31; + --text-primary-hover: #F5F5F593; + --text-primary-active: #F5F5F5C4; + --text-primary: #F5F5F5F5; + --text-secondary-hover: #F5F5F5FF; + --text-secondary-active: #F5F5F5AB; + --text-secondary: #F5F5F58F; + --text-tertiary-hover: #F5F5F5FF; + --text-tertiary-active: #F5F5F556; + --text-tertiary: #F5F5F548; + --text-paragraph-hover: #F5F5F57A; + --text-paragraph-active: #F5F5F5A3; + --text-paragraph: #F5F5F5CC; + --text-accent-hover: #2ACB47FF; + --text-accent-active: #1F9835FF; + --text-accent: #24B23E; + --text-positive-hover: #2ACB47FF; + --text-positive-active: #1F9835FF; + --text-positive: #24B23E; + --text-warning-hover: #FF8442FF; + --text-warning-active: #FF5D05FF; + --text-warning: #FF7024; + --text-negative-hover: #FF5C6CFF; + --text-negative-active: #FF1F35FF; + --text-negative: #FF3D51; --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; --on-dark-text-primary: #F5F5F5F5; @@ -363,20 +385,17 @@ --on-dark-text-paragraph-hover: #F5F5F57A; --on-dark-text-paragraph-active: #F5F5F5A3; --on-dark-text-paragraph: #F5F5F5CC; - --on-dark-text-accent-hover: #2BD44AFF; - --on-dark-text-accent-active: #1D9032FF; + --on-dark-text-accent-hover: #2ACB47FF; + --on-dark-text-accent-active: #1F9835FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #000000FF; - --on-dark-text-accent-gradient-active: #CCCCCCFF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); - --on-dark-text-positive-hover: #2BD44AFF; - --on-dark-text-positive-active: #1D9032FF; + --on-dark-text-positive-hover: #2ACB47FF; + --on-dark-text-positive-active: #1F9835FF; --on-dark-text-positive: #24B23E; - --on-dark-text-warning-hover: #FF8B4DFF; - --on-dark-text-warning-active: #FA5700FF; + --on-dark-text-warning-hover: #FF8442FF; + --on-dark-text-warning-active: #FF5D05FF; --on-dark-text-warning: #FF7024; - --on-dark-text-negative-hover: #FF6675FF; - --on-dark-text-negative-active: #FF142CFF; + --on-dark-text-negative-hover: #FF5C6CFF; + --on-dark-text-negative-active: #FF1F35FF; --on-dark-text-negative: #FF3D51; --on-light-text-primary-hover: #17171793; --on-light-text-primary-active: #171717C4; @@ -390,143 +409,131 @@ --on-light-text-paragraph-hover: #1717177A; --on-light-text-paragraph-active: #171717A3; --on-light-text-paragraph: #171717CC; - --on-light-text-accent-hover: #14B32EFF; - --on-light-text-accent-active: #0C6A1BFF; + --on-light-text-accent-hover: #13AA2CFF; + --on-light-text-accent-active: #0D731EFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #000000FF; - --on-light-text-accent-gradient-active: #CCCCCCFF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); - --on-light-text-positive-hover: #14B32EFF; - --on-light-text-positive-active: #0C6A1BFF; + --on-light-text-positive-hover: #13AA2CFF; + --on-light-text-positive-active: #0D731EFF; --on-light-text-positive: #108E26; - --on-light-text-warning-hover: #FD6B17FF; - --on-light-text-warning-active: #C04802FF; + --on-light-text-warning-hover: #FD650DFF; + --on-light-text-warning-active: #CA4B02FF; --on-light-text-warning: #E85702; - --on-light-text-negative-hover: #F54254FF; - --on-light-text-negative-active: #DA0B20FF; + --on-light-text-negative-hover: #F5384BFF; + --on-light-text-negative-active: #E40C22FF; --on-light-text-negative: #F31B31; - --inverse-text-primary-hover: #F5F5F593; - --inverse-text-primary-active: #F5F5F5C4; - --inverse-text-primary: #F5F5F5F5; - --inverse-text-secondary-hover: #F5F5F5FF; - --inverse-text-secondary-active: #F5F5F5AB; - --inverse-text-secondary: #F5F5F58F; - --inverse-text-tertiary-hover: #F5F5F5FF; - --inverse-text-tertiary-active: #F5F5F556; - --inverse-text-tertiary: #F5F5F548; - --inverse-text-paragraph-hover: #F5F5F57A; - --inverse-text-paragraph-active: #F5F5F5A3; - --inverse-text-paragraph: #F5F5F5CC; - --inverse-text-accent-hover: #2BD44AFF; - --inverse-text-accent-active: #1D9032FF; - --inverse-text-accent: #24B23E; - --inverse-text-accent-gradient-hover: #000000FF; - --inverse-text-accent-gradient-active: #CCCCCCFF; - --inverse-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); - --inverse-text-positive-hover: #2BD44AFF; - --inverse-text-positive-active: #1D9032FF; - --inverse-text-positive: #24B23E; - --inverse-text-warning-hover: #FF8B4DFF; - --inverse-text-warning-active: #FA5700FF; - --inverse-text-warning: #FF7024; - --inverse-text-negative-hover: #FF6675FF; - --inverse-text-negative-active: #FF142CFF; - --inverse-text-negative: #FF3D51; - --surface-solid-primary-hover: #FAFAFAFF; - --surface-solid-primary-active: #F0F0F0FF; - --surface-solid-primary: #F5F5F5; - --surface-solid-secondary-hover: #F7F7F7FF; - --surface-solid-secondary-active: #E8E8E8FF; - --surface-solid-secondary: #ECECEC; - --surface-solid-tertiary-hover: #EDEDEDFF; - --surface-solid-tertiary-active: #D4D4D4FF; - --surface-solid-tertiary: #DDDDDD; - --surface-solid-card-hover: #FFFFFFFF; - --surface-solid-card-active: #FFFFFFFF; - --surface-solid-card: #FFFFFFFF; - --surface-solid-default-hover: #262626FF; - --surface-solid-default-active: #030303FF; - --surface-solid-default: #080808; - --surface-transparent-primary-hover: #08080800; - --surface-transparent-primary-active: #0808080A; - --surface-transparent-primary: rgba(8, 8, 8, 0.02); - --surface-transparent-secondary-hover: #08080805; - --surface-transparent-secondary-active: #0808081A; - --surface-transparent-secondary: rgba(8, 8, 8, 0.06); - --surface-transparent-tertiary-hover: #0808080A; - --surface-transparent-tertiary-active: #08080829; - --surface-transparent-tertiary: rgba(8, 8, 8, 0.12); - --surface-transparent-deep-hover: #0808088F; - --surface-transparent-deep-active: #080808AD; - --surface-transparent-deep: #080808A3; - --surface-transparent-card-hover: #FFFFFFFF; - --surface-transparent-card-active: #FFFFFFFF; - --surface-transparent-card: #FFFFFFFF; + --inverse-text-primary-hover: #17171793; + --inverse-text-primary-active: #171717C4; + --inverse-text-primary: #171717F5; + --inverse-text-secondary-hover: #171717FF; + --inverse-text-secondary-active: #171717AB; + --inverse-text-secondary: #1717178F; + --inverse-text-tertiary-hover: #171717FF; + --inverse-text-tertiary-active: #17171756; + --inverse-text-tertiary: #17171748; + --inverse-text-paragraph-hover: #1717177A; + --inverse-text-paragraph-active: #171717A3; + --inverse-text-paragraph: #171717CC; + --inverse-text-accent-hover: #13AA2CFF; + --inverse-text-accent-active: #0D731EFF; + --inverse-text-accent: #108E26; + --inverse-text-positive-hover: #13AA2CFF; + --inverse-text-positive-active: #0D731EFF; + --inverse-text-positive: #108E26; + --inverse-text-warning-hover: #FD650DFF; + --inverse-text-warning-active: #CA4B02FF; + --inverse-text-warning: #E85702; + --inverse-text-negative-hover: #F5384BFF; + --inverse-text-negative-active: #E40C22FF; + --inverse-text-negative: #F31B31; + --surface-solid-primary-hover: #1C1C1CFF; + --surface-solid-primary-active: #121212FF; + --surface-solid-primary: #171717; + --surface-solid-secondary-hover: #303030FF; + --surface-solid-secondary-active: #212121FF; + --surface-solid-secondary: #262626; + --surface-solid-tertiary-hover: #404040FF; + --surface-solid-tertiary-active: #303030FF; + --surface-solid-tertiary: #363636; + --surface-solid-card-hover: #1C1C1CFF; + --surface-solid-card-active: #121212FF; + --surface-solid-card: #171717; + --surface-solid-default-hover: #FFFFFFFF; + --surface-solid-default-active: #F5F5F5FF; + --surface-solid-default: #F9F9F9; + --surface-transparent-primary-hover: #FFFFFF1F; + --surface-transparent-primary-active: #FFFFFF0A; + --surface-transparent-primary: #FFFFFF0F; + --surface-transparent-secondary-hover: #FFFFFF3D; + --surface-transparent-secondary-active: #FFFFFF0F; + --surface-transparent-secondary: #FFFFFF1F; + --surface-transparent-tertiary-hover: #FFFFFF52; + --surface-transparent-tertiary-active: #FFFFFF24; + --surface-transparent-tertiary: #FFFFFF33; + --surface-transparent-deep-hover: #FFFFFFC2; + --surface-transparent-deep-active: #FFFFFF94; + --surface-transparent-deep: #FFFFFFA3; + --surface-transparent-card-hover: #FFFFFF1F; + --surface-transparent-card-active: #FFFFFF0A; + --surface-transparent-card: #FFFFFF0F; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); - --surface-accent-hover: #1EB83AFF; - --surface-accent-active: #178C2CFF; + --surface-clear: #00000000; + --surface-accent-hover: #1DAF37FF; + --surface-accent-active: #18952FFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); - --surface-positive-hover: #1EB83AFF; - --surface-positive-active: #178C2CFF; + --surface-positive-hover: #1DAF37FF; + --surface-positive-active: #18952FFF; --surface-positive: #1A9E32; - --surface-warning-hover: #FB782DFF; - --surface-warning-active: #E65705FF; + --surface-warning-hover: #FB7223FF; + --surface-warning-active: #F05B05FF; --surface-warning: #FA5F05; - --surface-negative-hover: #FF5263FF; - --surface-negative-active: #FF142CFF; + --surface-negative-hover: #FF475AFF; + --surface-negative-active: #FF1F35FF; --surface-negative: #FF293E; - --on-dark-surface-solid-primary-hover: #363636FF; - --on-dark-surface-solid-primary-active: #0D0D0DFF; + --on-dark-surface-solid-primary-hover: #1C1C1CFF; + --on-dark-surface-solid-primary-active: #121212FF; --on-dark-surface-solid-primary: #171717; - --on-dark-surface-solid-secondary-hover: #3B3B3BFF; - --on-dark-surface-solid-secondary-active: #1C1C1CFF; + --on-dark-surface-solid-secondary-hover: #303030FF; + --on-dark-surface-solid-secondary-active: #212121FF; --on-dark-surface-solid-secondary: #262626; - --on-dark-surface-solid-tertiary-hover: #4A4A4AFF; - --on-dark-surface-solid-tertiary-active: #2B2B2BFF; + --on-dark-surface-solid-tertiary-hover: #404040FF; + --on-dark-surface-solid-tertiary-active: #303030FF; --on-dark-surface-solid-tertiary: #363636; - --on-dark-surface-solid-card-hover: #363636FF; - --on-dark-surface-solid-card-active: #0D0D0DFF; + --on-dark-surface-solid-card-hover: #1C1C1CFF; + --on-dark-surface-solid-card-active: #121212FF; --on-dark-surface-solid-card: #171717; --on-dark-surface-solid-default-hover: #FFFFFFFF; --on-dark-surface-solid-default-active: #F5F5F5FF; --on-dark-surface-solid-default: #F9F9F9; - --on-dark-surface-transparent-primary-hover: #FFFFFF05; - --on-dark-surface-transparent-primary-active: #FFFFFF1A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); - --on-dark-surface-transparent-secondary-hover: #FFFFFF0A; - --on-dark-surface-transparent-secondary-active: #FFFFFF29; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); - --on-dark-surface-transparent-tertiary-hover: #FFFFFF1F; - --on-dark-surface-transparent-tertiary-active: #FFFFFF3D; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); - --on-dark-surface-transparent-deep-hover: #FFFFFF8F; - --on-dark-surface-transparent-deep-active: #FFFFFFAD; + --on-dark-surface-transparent-primary-hover: #FFFFFF1F; + --on-dark-surface-transparent-primary-active: #FFFFFF0A; + --on-dark-surface-transparent-primary: #FFFFFF0F; + --on-dark-surface-transparent-secondary-hover: #FFFFFF3D; + --on-dark-surface-transparent-secondary-active: #FFFFFF0F; + --on-dark-surface-transparent-secondary: #FFFFFF1F; + --on-dark-surface-transparent-tertiary-hover: #FFFFFF52; + --on-dark-surface-transparent-tertiary-active: #FFFFFF24; + --on-dark-surface-transparent-tertiary: #FFFFFF33; + --on-dark-surface-transparent-deep-hover: #FFFFFFC2; + --on-dark-surface-transparent-deep-active: #FFFFFF94; --on-dark-surface-transparent-deep: #FFFFFFA3; - --on-dark-surface-transparent-card-hover: #FFFFFF05; - --on-dark-surface-transparent-card-active: #FFFFFF1A; + --on-dark-surface-transparent-card-hover: #FFFFFF1F; + --on-dark-surface-transparent-card-active: #FFFFFF0A; --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); - --on-dark-surface-accent-hover: #1EB83AFF; - --on-dark-surface-accent-active: #178C2CFF; + --on-dark-surface-clear: #00000000; + --on-dark-surface-accent-hover: #1DAF37FF; + --on-dark-surface-accent-active: #18952FFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); - --on-dark-surface-positive-hover: #1EB83AFF; - --on-dark-surface-positive-active: #178C2CFF; + --on-dark-surface-positive-hover: #1DAF37FF; + --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; - --on-dark-surface-warning-hover: #FB782DFF; - --on-dark-surface-warning-active: #E65705FF; + --on-dark-surface-warning-hover: #FB7223FF; + --on-dark-surface-warning-active: #F05B05FF; --on-dark-surface-warning: #FA5F05; - --on-dark-surface-negative-hover: #FF5263FF; - --on-dark-surface-negative-active: #FF142CFF; + --on-dark-surface-negative-hover: #FF475AFF; + --on-dark-surface-negative-active: #FF1F35FF; --on-dark-surface-negative: #FF293E; --on-light-surface-solid-primary-hover: #FAFAFAFF; --on-light-surface-solid-primary-active: #F0F0F0FF; @@ -534,124 +541,193 @@ --on-light-surface-solid-secondary-hover: #F7F7F7FF; --on-light-surface-solid-secondary-active: #E8E8E8FF; --on-light-surface-solid-secondary: #ECECEC; - --on-light-surface-solid-tertiary-hover: #EDEDEDFF; - --on-light-surface-solid-tertiary-active: #D4D4D4FF; + --on-light-surface-solid-tertiary-hover: #E8E8E8FF; + --on-light-surface-solid-tertiary-active: #D9D9D9FF; --on-light-surface-solid-tertiary: #DDDDDD; --on-light-surface-solid-card-hover: #FFFFFFFF; --on-light-surface-solid-card-active: #FFFFFFFF; --on-light-surface-solid-card: #FFFFFFFF; - --on-light-surface-solid-default-hover: #262626FF; + --on-light-surface-solid-default-hover: #0D0D0DFF; --on-light-surface-solid-default-active: #030303FF; --on-light-surface-solid-default: #080808; - --on-light-surface-transparent-primary-hover: #08080800; - --on-light-surface-transparent-primary-active: #0808080A; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); - --on-light-surface-transparent-secondary-hover: #08080805; - --on-light-surface-transparent-secondary-active: #0808081A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); - --on-light-surface-transparent-tertiary-hover: #0808080A; - --on-light-surface-transparent-tertiary-active: #08080829; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); - --on-light-surface-transparent-deep-hover: #0808088F; - --on-light-surface-transparent-deep-active: #080808AD; + --on-light-surface-transparent-primary-hover: #0808080F; + --on-light-surface-transparent-primary-active: #08080800; + --on-light-surface-transparent-primary: #08080805; + --on-light-surface-transparent-secondary-hover: #0808081F; + --on-light-surface-transparent-secondary-active: #0808080A; + --on-light-surface-transparent-secondary: #0808080F; + --on-light-surface-transparent-tertiary-hover: #0808083D; + --on-light-surface-transparent-tertiary-active: #0808080F; + --on-light-surface-transparent-tertiary: #0808081F; + --on-light-surface-transparent-deep-hover: #080808C2; + --on-light-surface-transparent-deep-active: #08080894; --on-light-surface-transparent-deep: #080808A3; - --on-light-surface-transparent-card-hover: #FFFFFFFF; - --on-light-surface-transparent-card-active: #FFFFFFFF; - --on-light-surface-transparent-card: #FFFFFFFF; + --on-light-surface-transparent-card-hover: #0808081F; + --on-light-surface-transparent-card-active: #0808080A; + --on-light-surface-transparent-card: #0808080F; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); - --on-light-surface-accent-hover: #1EB83AFF; - --on-light-surface-accent-active: #178C2CFF; + --on-light-surface-clear: #00000000; + --on-light-surface-accent-hover: #1DAF37FF; + --on-light-surface-accent-active: #18952FFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); - --on-light-surface-positive-hover: #1EB83AFF; - --on-light-surface-positive-active: #178C2CFF; + --on-light-surface-positive-hover: #1DAF37FF; + --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; - --on-light-surface-warning-hover: #FB782DFF; - --on-light-surface-warning-active: #E65705FF; + --on-light-surface-warning-hover: #FB7223FF; + --on-light-surface-warning-active: #F05B05FF; --on-light-surface-warning: #FA5F05; - --on-light-surface-negative-hover: #FF5263FF; - --on-light-surface-negative-active: #FF142CFF; + --on-light-surface-negative-hover: #FF475AFF; + --on-light-surface-negative-active: #FF1F35FF; --on-light-surface-negative: #FF293E; - --inverse-surface-solid-primary-hover: #363636FF; - --inverse-surface-solid-primary-active: #0D0D0DFF; - --inverse-surface-solid-primary: #171717; - --inverse-surface-solid-secondary-hover: #3B3B3BFF; - --inverse-surface-solid-secondary-active: #1C1C1CFF; - --inverse-surface-solid-secondary: #262626; - --inverse-surface-solid-tertiary-hover: #4A4A4AFF; - --inverse-surface-solid-tertiary-active: #2B2B2BFF; - --inverse-surface-solid-tertiary: #363636; - --inverse-surface-solid-card-hover: #363636FF; - --inverse-surface-solid-card-active: #0D0D0DFF; - --inverse-surface-solid-card: #171717; - --inverse-surface-solid-default-hover: #FFFFFFFF; - --inverse-surface-solid-default-active: #F5F5F5FF; - --inverse-surface-solid-default: #F9F9F9; - --inverse-surface-transparent-primary-hover: #FFFFFF05; - --inverse-surface-transparent-primary-active: #FFFFFF1A; - --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06); - --inverse-surface-transparent-secondary-hover: #FFFFFF0A; - --inverse-surface-transparent-secondary-active: #FFFFFF29; - --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12); - --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; - --inverse-surface-transparent-tertiary-active: #FFFFFF3D; - --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); - --inverse-surface-transparent-deep-hover: #FFFFFF8F; - --inverse-surface-transparent-deep-active: #FFFFFFAD; - --inverse-surface-transparent-deep: #FFFFFFA3; - --inverse-surface-transparent-card-hover: #FFFFFF05; - --inverse-surface-transparent-card-active: #FFFFFF1A; - --inverse-surface-transparent-card: #FFFFFF0F; + --inverse-surface-solid-primary-hover: #FAFAFAFF; + --inverse-surface-solid-primary-active: #F0F0F0FF; + --inverse-surface-solid-primary: #F5F5F5; + --inverse-surface-solid-secondary-hover: #F7F7F7FF; + --inverse-surface-solid-secondary-active: #E8E8E8FF; + --inverse-surface-solid-secondary: #ECECEC; + --inverse-surface-solid-tertiary-hover: #E8E8E8FF; + --inverse-surface-solid-tertiary-active: #D9D9D9FF; + --inverse-surface-solid-tertiary: #DDDDDD; + --inverse-surface-solid-card-hover: #FFFFFFFF; + --inverse-surface-solid-card-active: #FFFFFFFF; + --inverse-surface-solid-card: #FFFFFFFF; + --inverse-surface-solid-default-hover: #0D0D0DFF; + --inverse-surface-solid-default-active: #030303FF; + --inverse-surface-solid-default: #080808; + --inverse-surface-transparent-primary-hover: #0808080F; + --inverse-surface-transparent-primary-active: #08080800; + --inverse-surface-transparent-primary: #08080805; + --inverse-surface-transparent-secondary-hover: #0808081F; + --inverse-surface-transparent-secondary-active: #0808080A; + --inverse-surface-transparent-secondary: #0808080F; + --inverse-surface-transparent-tertiary-hover: #0808083D; + --inverse-surface-transparent-tertiary-active: #0808080F; + --inverse-surface-transparent-tertiary: #0808081F; + --inverse-surface-transparent-deep-hover: #080808C2; + --inverse-surface-transparent-deep-active: #08080894; + --inverse-surface-transparent-deep: #080808A3; + --inverse-surface-transparent-card-hover: #FFFFFFFF; + --inverse-surface-transparent-card-active: #FFFFFFFF; + --inverse-surface-transparent-card: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); - --inverse-surface-accent-hover: #1EB83AFF; - --inverse-surface-accent-active: #178C2CFF; + --inverse-surface-clear: #00000000; + --inverse-surface-accent-hover: #1DAF37FF; + --inverse-surface-accent-active: #18952FFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); - --inverse-surface-positive-hover: #1EB83AFF; - --inverse-surface-positive-active: #178C2CFF; + --inverse-surface-positive-hover: #1DAF37FF; + --inverse-surface-positive-active: #18952FFF; --inverse-surface-positive: #1A9E32; - --inverse-surface-warning-hover: #FB782DFF; - --inverse-surface-warning-active: #E65705FF; + --inverse-surface-warning-hover: #FB7223FF; + --inverse-surface-warning-active: #F05B05FF; --inverse-surface-warning: #FA5F05; - --inverse-surface-negative-hover: #FF5263FF; - --inverse-surface-negative-active: #FF142CFF; + --inverse-surface-negative-hover: #FF475AFF; + --inverse-surface-negative-active: #FF1F35FF; --inverse-surface-negative: #FF293E; - --background-primary: #F9F9F9; + --background-primary: #080808; --dark-background-primary: #080808; --light-background-primary: #F9F9F9; - --inverse-background-primary: #080808; - --overlay-soft: #F9F9F98F; - --overlay-hard: #F9F9F9F5; - --overlay-blur: rgba(249,249,249,0.28); + --inverse-background-primary: #F9F9F9; + --overlay-soft: #0808088F; + --overlay-hard: #080808F5; + --overlay-blur: #08080847; --on-dark-overlay-soft: #0808088F; --on-dark-overlay-hard: #080808F5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); + --on-dark-overlay-blur: #08080847; --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; - --on-light-overlay-blur: rgba(249,249,249,0.28); - --inverse-overlay-soft: #0808088F; - --inverse-overlay-hard: #080808F5; - --inverse-overlay-blur: rgba(8,8,8,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% ); + --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); } -.light, - .dark { +.light { + --text-accent-gradient-hover: #CCCCCCFF; + --text-accent-gradient-active: #E6E6E6FF; + --text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-text-accent-gradient-hover: #CCCCCCFF; + --on-dark-text-accent-gradient-active: #E6E6E6FF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #CCCCCCFF; + --on-light-text-accent-gradient-active: #E6E6E6FF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + +.dark, .light { + --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A; + --shadow-down-soft-m: 0px 24px 48px -8px #00000014; + --shadow-down-soft-l: 0px 60px 112px -8px #00000014; + --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014; + --shadow-down-hard-m: 0px 16px 32px -8px #0000003D; + --shadow-down-hard-l: 0px 60px 112px -8px #00000066; + --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008; + --shadow-up-soft-m: 0px -24px 48px -8px #00000014; + --shadow-up-soft-l: 0px -60px 112px -8px #00000014; + --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008; + --shadow-up-hard-m: 0px -16px 32px -8px #0000003D; + --shadow-up-hard-l: 0px -60px 112px -8px #00000066; +} + +.dark, .light { + --border-radius-xxs: 4px; + --border-radius-xs: 8px; + --border-radius-s: 12px; + --border-radius-m: 16px; + --border-radius-l: 20px; + --border-radius-xl: 24px; + --border-radius-xxl: 32px; +} + +.dark, .light { font-size: 16px; --plasma-typo-overflow-wrap: break-word; --plasma-typo-hyphens: auto; --plasma-typo-display-font-family: 'SB Sans Display', sans-serif; + --plasma-typo-body-font-family: 'SB Sans Text', sans-serif; + --plasma-typo-header-font-family: 'SB Sans Display', sans-serif; --plasma-typo-text-font-family: 'SB Sans Text', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-letter-spacing: normal; @@ -671,64 +747,64 @@ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-s-bold-letter-spacing: normal; --plasma-typo-dspl-s-bold-font-style: normal; - --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-letter-spacing: normal; --plasma-typo-h1-font-style: normal; - --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-bold-letter-spacing: normal; --plasma-typo-h1-bold-font-style: normal; - --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-letter-spacing: normal; --plasma-typo-h2-font-style: normal; - --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-bold-letter-spacing: normal; --plasma-typo-h2-bold-font-style: normal; - --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-letter-spacing: normal; --plasma-typo-h3-font-style: normal; - --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-bold-letter-spacing: normal; --plasma-typo-h3-bold-font-style: normal; - --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-letter-spacing: normal; --plasma-typo-h4-font-style: normal; - --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-bold-letter-spacing: normal; --plasma-typo-h4-bold-font-style: normal; - --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-letter-spacing: normal; --plasma-typo-h5-font-style: normal; - --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-bold-letter-spacing: normal; --plasma-typo-h5-bold-font-style: normal; - --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-letter-spacing: -0.02em; --plasma-typo-body-l-font-style: normal; - --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-bold-letter-spacing: -0.02em; --plasma-typo-body-l-bold-font-style: normal; - --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-letter-spacing: -0.02em; --plasma-typo-body-m-font-style: normal; - --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-bold-letter-spacing: -0.02em; --plasma-typo-body-m-bold-font-style: normal; - --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-letter-spacing: -0.02em; --plasma-typo-body-s-font-style: normal; - --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-bold-letter-spacing: -0.02em; --plasma-typo-body-s-bold-font-style: normal; - --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-letter-spacing: -0.02em; --plasma-typo-body-xs-font-style: normal; - --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-bold-letter-spacing: -0.02em; --plasma-typo-body-xs-bold-font-style: normal; - --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-letter-spacing: -0.02em; --plasma-typo-body-xxs-font-style: normal; - --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-bold-letter-spacing: -0.02em; --plasma-typo-body-xxs-bold-font-style: normal; --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family); @@ -747,7 +823,7 @@ --plasma-typo-text-s-letter-spacing: -0.02em; --plasma-typo-text-s-font-style: normal; --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family); - --plasma-typo-text-s-bold-letter-spacing: -0.02emm; + --plasma-typo-text-s-bold-letter-spacing: -0.02em; --plasma-typo-text-s-bold-font-style: normal; --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family); --plasma-typo-text-xs-letter-spacing: -0.02em; @@ -758,8 +834,7 @@ } @media (max-width: 559px) { - .light, - .dark { + .dark, .light { --plasma-typo-dspl-l-font-size: 5.5rem; --plasma-typo-dspl-l-font-weight: 300; --plasma-typo-dspl-l-line-height: 5.75rem; @@ -866,8 +941,7 @@ } @media (min-width: 560px) and (max-width: 959px) { - .light, - .dark { + .dark, .light { --plasma-typo-dspl-l-font-size: 7rem; --plasma-typo-dspl-l-font-weight: 300; --plasma-typo-dspl-l-line-height: 7rem; @@ -974,8 +1048,7 @@ } @media (min-width: 960px) { - .light, - .dark { + .dark, .light { --plasma-typo-dspl-l-font-size: 8rem; --plasma-typo-dspl-l-font-weight: 300; --plasma-typo-dspl-l-line-height: 8rem; @@ -1079,4 +1152,4 @@ --plasma-typo-text-xs-bold-font-weight: 600; --plasma-typo-text-xs-bold-line-height: 1rem; } -} +} \ No newline at end of file diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css b/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css index 604f102274..fa94a1d9f6 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online__dark.css @@ -3,22 +3,19 @@ :root { --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; - --text-primary: #f5f5f5F5; + --text-primary: #F5F5F5F5; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; - --text-secondary: #F5f5f58F; + --text-secondary: #F5F5F58F; --text-tertiary-hover: #F5F5F5FF; --text-tertiary-active: #F5F5F556; - --text-tertiary: #F5f5f548; + --text-tertiary: #F5F5F548; --text-paragraph-hover: #F5F5F57A; --text-paragraph-active: #F5F5F5A3; - --text-paragraph: #f5f5f5cc; + --text-paragraph: #F5F5F5CC; --text-accent-hover: #2ACB47FF; --text-accent-active: #1F9835FF; --text-accent: #24B23E; - --text-accent-gradient-hover: #CCCCCCFF; - --text-accent-gradient-active: #E6E6E6FF; - --text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --text-positive-hover: #2ACB47FF; --text-positive-active: #1F9835FF; --text-positive: #24B23E; @@ -30,22 +27,19 @@ --text-negative: #FF3D51; --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; - --on-dark-text-primary: #f5f5f5F5; + --on-dark-text-primary: #F5F5F5F5; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; - --on-dark-text-secondary: #F5f5f58F; + --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary-hover: #F5F5F5FF; --on-dark-text-tertiary-active: #F5F5F556; - --on-dark-text-tertiary: #F5f5f548; + --on-dark-text-tertiary: #F5F5F548; --on-dark-text-paragraph-hover: #F5F5F57A; --on-dark-text-paragraph-active: #F5F5F5A3; - --on-dark-text-paragraph: #f5f5f5CC; + --on-dark-text-paragraph: #F5F5F5CC; --on-dark-text-accent-hover: #2ACB47FF; --on-dark-text-accent-active: #1F9835FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #CCCCCCFF; - --on-dark-text-accent-gradient-active: #E6E6E6FF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-text-positive-hover: #2ACB47FF; --on-dark-text-positive-active: #1F9835FF; --on-dark-text-positive: #24B23E; @@ -70,9 +64,6 @@ --on-light-text-accent-hover: #13AA2CFF; --on-light-text-accent-active: #0D731EFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #CCCCCCFF; - --on-light-text-accent-gradient-active: #E6E6E6FF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --on-light-text-positive-hover: #13AA2CFF; --on-light-text-positive-active: #0D731EFF; --on-light-text-positive: #108E26; @@ -97,9 +88,6 @@ --inverse-text-accent-hover: #13AA2CFF; --inverse-text-accent-active: #0D731EFF; --inverse-text-accent: #108E26; - --inverse-text-accent-gradient-hover: #CCCCCCFF; - --inverse-text-accent-gradient-active: #E6E6E6FF; - --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --inverse-text-positive-hover: #13AA2CFF; --inverse-text-positive-active: #0D731EFF; --inverse-text-positive: #108E26; @@ -129,10 +117,10 @@ --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary-hover: #FFFFFF3D; --surface-transparent-secondary-active: #FFFFFF0F; - --surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary-hover: #FFFFFF52; --surface-transparent-tertiary-active: #FFFFFF24; - --surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --surface-transparent-tertiary: #FFFFFF33; --surface-transparent-deep-hover: #FFFFFFC2; --surface-transparent-deep-active: #FFFFFF94; --surface-transparent-deep: #FFFFFFA3; @@ -141,13 +129,10 @@ --surface-transparent-card: #FFFFFF0F; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); + --surface-clear: #00000000; --surface-accent-hover: #1DAF37FF; --surface-accent-active: #18952FFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --surface-positive-hover: #1DAF37FF; --surface-positive-active: #18952FFF; --surface-positive: #1A9E32; @@ -174,13 +159,13 @@ --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-transparent-primary-hover: #FFFFFF1F; --on-dark-surface-transparent-primary-active: #FFFFFF0A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary-hover: #FFFFFF3D; --on-dark-surface-transparent-secondary-active: #FFFFFF0F; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary-hover: #FFFFFF52; --on-dark-surface-transparent-tertiary-active: #FFFFFF24; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep-hover: #FFFFFFC2; --on-dark-surface-transparent-deep-active: #FFFFFF94; --on-dark-surface-transparent-deep: #FFFFFFA3; @@ -189,13 +174,10 @@ --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); + --on-dark-surface-clear: #00000000; --on-dark-surface-accent-hover: #1DAF37FF; --on-dark-surface-accent-active: #18952FFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -222,28 +204,25 @@ --on-light-surface-solid-default: #080808; --on-light-surface-transparent-primary-hover: #0808080F; --on-light-surface-transparent-primary-active: #08080800; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary-hover: #0808081F; --on-light-surface-transparent-secondary-active: #0808080A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary-hover: #0808083D; --on-light-surface-transparent-tertiary-active: #0808080F; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --on-light-surface-transparent-tertiary: #0808081F; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; --on-light-surface-transparent-deep: #080808A3; --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; - --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-card: #0808080F; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); + --on-light-surface-clear: #00000000; --on-light-surface-accent-hover: #1DAF37FF; --on-light-surface-accent-active: #18952FFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -270,13 +249,13 @@ --inverse-surface-solid-default: #080808; --inverse-surface-transparent-primary-hover: #0808080F; --inverse-surface-transparent-primary-active: #08080800; - --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary-hover: #0808081F; --inverse-surface-transparent-secondary-active: #0808080A; - --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary-hover: #0808083D; --inverse-surface-transparent-tertiary-active: #0808080F; - --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --inverse-surface-transparent-tertiary: #0808081F; --inverse-surface-transparent-deep-hover: #080808C2; --inverse-surface-transparent-deep-active: #08080894; --inverse-surface-transparent-deep: #080808A3; @@ -285,13 +264,10 @@ --inverse-surface-transparent-card: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); + --inverse-surface-clear: #00000000; --inverse-surface-accent-hover: #1DAF37FF; --inverse-surface-accent-active: #18952FFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-surface-positive-hover: #1DAF37FF; --inverse-surface-positive-active: #18952FFF; --inverse-surface-positive: #1A9E32; @@ -306,28 +282,104 @@ --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; - --overlay-hard: #080808f5; - --overlay-blur: rgba(8,8,8,0.28); - --on-dark-overlay-soft: #0808088f; - --on-dark-overlay-hard: #080808f5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); - --on-light-overlay-soft: rgba(249,249,249,0.56); - --on-light-overlay-hard: #f9f9f9f5; - --on-light-overlay-blur: rgba(249,249,249,0.28); - --inverse-overlay-soft: #f9f9f98F; - --inverse-overlay-hard: #f9f9f9f5; - --inverse-overlay-blur: rgba(249,249,249,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% ); + --overlay-hard: #080808F5; + --overlay-blur: #08080847; + --on-dark-overlay-soft: #0808088F; + --on-dark-overlay-hard: #080808F5; + --on-dark-overlay-blur: #08080847; + --on-light-overlay-soft: #F9F9F98F; + --on-light-overlay-hard: #F9F9F9F5; + --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); } +:root { + --text-accent-gradient-hover: #CCCCCCFF; + --text-accent-gradient-active: #E6E6E6FF; + --text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-text-accent-gradient-hover: #CCCCCCFF; + --on-dark-text-accent-gradient-active: #E6E6E6FF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #CCCCCCFF; + --on-light-text-accent-gradient-active: #E6E6E6FF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + +:root { + --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A; + --shadow-down-soft-m: 0px 24px 48px -8px #00000014; + --shadow-down-soft-l: 0px 60px 112px -8px #00000014; + --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014; + --shadow-down-hard-m: 0px 16px 32px -8px #0000003D; + --shadow-down-hard-l: 0px 60px 112px -8px #00000066; + --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008; + --shadow-up-soft-m: 0px -24px 48px -8px #00000014; + --shadow-up-soft-l: 0px -60px 112px -8px #00000014; + --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008; + --shadow-up-hard-m: 0px -16px 32px -8px #0000003D; + --shadow-up-hard-l: 0px -60px 112px -8px #00000066; +} + +:root { + --border-radius-xxs: 4px; + --border-radius-xs: 8px; + --border-radius-s: 12px; + --border-radius-m: 16px; + --border-radius-l: 20px; + --border-radius-xl: 24px; + --border-radius-xxl: 32px; +} + :root { font-size: 16px; --plasma-typo-overflow-wrap: break-word; --plasma-typo-hyphens: auto; --plasma-typo-display-font-family: 'SB Sans Display', sans-serif; + --plasma-typo-body-font-family: 'SB Sans Text', sans-serif; + --plasma-typo-header-font-family: 'SB Sans Display', sans-serif; --plasma-typo-text-font-family: 'SB Sans Text', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-letter-spacing: normal; @@ -347,64 +399,64 @@ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-s-bold-letter-spacing: normal; --plasma-typo-dspl-s-bold-font-style: normal; - --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-letter-spacing: normal; --plasma-typo-h1-font-style: normal; - --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-bold-letter-spacing: normal; --plasma-typo-h1-bold-font-style: normal; - --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-letter-spacing: normal; --plasma-typo-h2-font-style: normal; - --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-bold-letter-spacing: normal; --plasma-typo-h2-bold-font-style: normal; - --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-letter-spacing: normal; --plasma-typo-h3-font-style: normal; - --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-bold-letter-spacing: normal; --plasma-typo-h3-bold-font-style: normal; - --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-letter-spacing: normal; --plasma-typo-h4-font-style: normal; - --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-bold-letter-spacing: normal; --plasma-typo-h4-bold-font-style: normal; - --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-letter-spacing: normal; --plasma-typo-h5-font-style: normal; - --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-bold-letter-spacing: normal; --plasma-typo-h5-bold-font-style: normal; - --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-letter-spacing: -0.02em; --plasma-typo-body-l-font-style: normal; - --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-bold-letter-spacing: -0.02em; --plasma-typo-body-l-bold-font-style: normal; - --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-letter-spacing: -0.02em; --plasma-typo-body-m-font-style: normal; - --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-bold-letter-spacing: -0.02em; --plasma-typo-body-m-bold-font-style: normal; - --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-letter-spacing: -0.02em; --plasma-typo-body-s-font-style: normal; - --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-bold-letter-spacing: -0.02em; --plasma-typo-body-s-bold-font-style: normal; - --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-letter-spacing: -0.02em; --plasma-typo-body-xs-font-style: normal; - --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-bold-letter-spacing: -0.02em; --plasma-typo-body-xs-bold-font-style: normal; - --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-letter-spacing: -0.02em; --plasma-typo-body-xxs-font-style: normal; - --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-bold-letter-spacing: -0.02em; --plasma-typo-body-xxs-bold-font-style: normal; --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family); @@ -423,7 +475,7 @@ --plasma-typo-text-s-letter-spacing: -0.02em; --plasma-typo-text-s-font-style: normal; --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family); - --plasma-typo-text-s-bold-letter-spacing: -0.02emm; + --plasma-typo-text-s-bold-letter-spacing: -0.02em; --plasma-typo-text-s-bold-font-style: normal; --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family); --plasma-typo-text-xs-letter-spacing: -0.02em; @@ -752,4 +804,4 @@ --plasma-typo-text-xs-bold-font-weight: 600; --plasma-typo-text-xs-bold-line-height: 1rem; } -} +} \ No newline at end of file diff --git a/packages/themes/caldera-online-themes/src/css/caldera_online__light.css b/packages/themes/caldera-online-themes/src/css/caldera_online__light.css index 400911f67d..ab85b3fe6f 100644 --- a/packages/themes/caldera-online-themes/src/css/caldera_online__light.css +++ b/packages/themes/caldera-online-themes/src/css/caldera_online__light.css @@ -16,9 +16,6 @@ --text-accent-hover: #14B32EFF; --text-accent-active: #0C6A1BFF; --text-accent: #108E26; - --text-accent-gradient-hover: #000000FF; - --text-accent-gradient-active: #CCCCCCFF; - --text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --text-positive-hover: #14B32EFF; --text-positive-active: #0C6A1BFF; --text-positive: #108E26; @@ -43,9 +40,6 @@ --on-dark-text-accent-hover: #2BD44AFF; --on-dark-text-accent-active: #1D9032FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #000000FF; - --on-dark-text-accent-gradient-active: #CCCCCCFF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-text-positive-hover: #2BD44AFF; --on-dark-text-positive-active: #1D9032FF; --on-dark-text-positive: #24B23E; @@ -70,9 +64,6 @@ --on-light-text-accent-hover: #14B32EFF; --on-light-text-accent-active: #0C6A1BFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #000000FF; - --on-light-text-accent-gradient-active: #CCCCCCFF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --on-light-text-positive-hover: #14B32EFF; --on-light-text-positive-active: #0C6A1BFF; --on-light-text-positive: #108E26; @@ -97,9 +88,6 @@ --inverse-text-accent-hover: #2BD44AFF; --inverse-text-accent-active: #1D9032FF; --inverse-text-accent: #24B23E; - --inverse-text-accent-gradient-hover: #000000FF; - --inverse-text-accent-gradient-active: #CCCCCCFF; - --inverse-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-text-positive-hover: #2BD44AFF; --inverse-text-positive-active: #1D9032FF; --inverse-text-positive: #24B23E; @@ -126,13 +114,13 @@ --surface-solid-default: #080808; --surface-transparent-primary-hover: #08080800; --surface-transparent-primary-active: #0808080A; - --surface-transparent-primary: rgba(8, 8, 8, 0.02); + --surface-transparent-primary: #08080805; --surface-transparent-secondary-hover: #08080805; --surface-transparent-secondary-active: #0808081A; - --surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --surface-transparent-secondary: #0808080F; --surface-transparent-tertiary-hover: #0808080A; --surface-transparent-tertiary-active: #08080829; - --surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --surface-transparent-tertiary: #0808081F; --surface-transparent-deep-hover: #0808088F; --surface-transparent-deep-active: #080808AD; --surface-transparent-deep: #080808A3; @@ -141,13 +129,10 @@ --surface-transparent-card: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); + --surface-clear: #00000000; --surface-accent-hover: #1EB83AFF; --surface-accent-active: #178C2CFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --surface-positive-hover: #1EB83AFF; --surface-positive-active: #178C2CFF; --surface-positive: #1A9E32; @@ -174,13 +159,13 @@ --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-transparent-primary-hover: #FFFFFF05; --on-dark-surface-transparent-primary-active: #FFFFFF1A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary-hover: #FFFFFF0A; --on-dark-surface-transparent-secondary-active: #FFFFFF29; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary-hover: #FFFFFF1F; --on-dark-surface-transparent-tertiary-active: #FFFFFF3D; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep-hover: #FFFFFF8F; --on-dark-surface-transparent-deep-active: #FFFFFFAD; --on-dark-surface-transparent-deep: #FFFFFFA3; @@ -189,13 +174,10 @@ --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); + --on-dark-surface-clear: #00000000; --on-dark-surface-accent-hover: #1EB83AFF; --on-dark-surface-accent-active: #178C2CFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-surface-positive-hover: #1EB83AFF; --on-dark-surface-positive-active: #178C2CFF; --on-dark-surface-positive: #1A9E32; @@ -222,13 +204,13 @@ --on-light-surface-solid-default: #080808; --on-light-surface-transparent-primary-hover: #08080800; --on-light-surface-transparent-primary-active: #0808080A; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary-hover: #08080805; --on-light-surface-transparent-secondary-active: #0808081A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary-hover: #0808080A; --on-light-surface-transparent-tertiary-active: #08080829; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --on-light-surface-transparent-tertiary: #0808081F; --on-light-surface-transparent-deep-hover: #0808088F; --on-light-surface-transparent-deep-active: #080808AD; --on-light-surface-transparent-deep: #080808A3; @@ -237,13 +219,10 @@ --on-light-surface-transparent-card: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); + --on-light-surface-clear: #00000000; --on-light-surface-accent-hover: #1EB83AFF; --on-light-surface-accent-active: #178C2CFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-light-surface-positive-hover: #1EB83AFF; --on-light-surface-positive-active: #178C2CFF; --on-light-surface-positive: #1A9E32; @@ -270,13 +249,13 @@ --inverse-surface-solid-default: #F9F9F9; --inverse-surface-transparent-primary-hover: #FFFFFF05; --inverse-surface-transparent-primary-active: #FFFFFF1A; - --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --inverse-surface-transparent-primary: #FFFFFF0F; --inverse-surface-transparent-secondary-hover: #FFFFFF0A; --inverse-surface-transparent-secondary-active: #FFFFFF29; - --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --inverse-surface-transparent-secondary: #FFFFFF1F; --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; --inverse-surface-transparent-tertiary-active: #FFFFFF3D; - --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --inverse-surface-transparent-tertiary: #FFFFFF33; --inverse-surface-transparent-deep-hover: #FFFFFF8F; --inverse-surface-transparent-deep-active: #FFFFFFAD; --inverse-surface-transparent-deep: #FFFFFFA3; @@ -285,13 +264,10 @@ --inverse-surface-transparent-card: #FFFFFF0F; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); + --inverse-surface-clear: #00000000; --inverse-surface-accent-hover: #1EB83AFF; --inverse-surface-accent-active: #178C2CFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-surface-positive-hover: #1EB83AFF; --inverse-surface-positive-active: #178C2CFF; --inverse-surface-positive: #1A9E32; @@ -307,27 +283,103 @@ --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; - --overlay-blur: rgba(249,249,249,0.28); + --overlay-blur: #F9F9F947; --on-dark-overlay-soft: #0808088F; --on-dark-overlay-hard: #080808F5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); + --on-dark-overlay-blur: #08080847; --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; - --on-light-overlay-blur: rgba(249,249,249,0.28); + --on-light-overlay-blur: #F9F9F947; --inverse-overlay-soft: #0808088F; --inverse-overlay-hard: #080808F5; - --inverse-overlay-blur: rgba(8,8,8,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% ); + --inverse-overlay-blur: #08080847; color: var(--text-primary); background-color: var(--background-primary); } +:root { + --text-accent-gradient-hover: #000000FF; + --text-accent-gradient-active: #CCCCCCFF; + --text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --on-dark-text-accent-gradient-hover: #000000FF; + --on-dark-text-accent-gradient-active: #CCCCCCFF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #000000FF; + --on-light-text-accent-gradient-active: #CCCCCCFF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #000000FF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + +:root { + --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A; + --shadow-down-soft-m: 0px 24px 48px -8px #00000014; + --shadow-down-soft-l: 0px 60px 112px -8px #00000014; + --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014; + --shadow-down-hard-m: 0px 16px 32px -8px #0000003D; + --shadow-down-hard-l: 0px 60px 112px -8px #00000066; + --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008; + --shadow-up-soft-m: 0px -24px 48px -8px #00000014; + --shadow-up-soft-l: 0px -60px 112px -8px #00000014; + --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008; + --shadow-up-hard-m: 0px -16px 32px -8px #0000003D; + --shadow-up-hard-l: 0px -60px 112px -8px #00000066; +} + +:root { + --border-radius-xxs: 4px; + --border-radius-xs: 8px; + --border-radius-s: 12px; + --border-radius-m: 16px; + --border-radius-l: 20px; + --border-radius-xl: 24px; + --border-radius-xxl: 32px; +} + :root { font-size: 16px; --plasma-typo-overflow-wrap: break-word; --plasma-typo-hyphens: auto; --plasma-typo-display-font-family: 'SB Sans Display', sans-serif; + --plasma-typo-body-font-family: 'SB Sans Text', sans-serif; + --plasma-typo-header-font-family: 'SB Sans Display', sans-serif; --plasma-typo-text-font-family: 'SB Sans Text', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-letter-spacing: normal; @@ -347,64 +399,64 @@ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-s-bold-letter-spacing: normal; --plasma-typo-dspl-s-bold-font-style: normal; - --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-letter-spacing: normal; --plasma-typo-h1-font-style: normal; - --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-bold-letter-spacing: normal; --plasma-typo-h1-bold-font-style: normal; - --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-letter-spacing: normal; --plasma-typo-h2-font-style: normal; - --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-bold-letter-spacing: normal; --plasma-typo-h2-bold-font-style: normal; - --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-letter-spacing: normal; --plasma-typo-h3-font-style: normal; - --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-bold-letter-spacing: normal; --plasma-typo-h3-bold-font-style: normal; - --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-letter-spacing: normal; --plasma-typo-h4-font-style: normal; - --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-bold-letter-spacing: normal; --plasma-typo-h4-bold-font-style: normal; - --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-letter-spacing: normal; --plasma-typo-h5-font-style: normal; - --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-bold-letter-spacing: normal; --plasma-typo-h5-bold-font-style: normal; - --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-letter-spacing: -0.02em; --plasma-typo-body-l-font-style: normal; - --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-bold-letter-spacing: -0.02em; --plasma-typo-body-l-bold-font-style: normal; - --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-letter-spacing: -0.02em; --plasma-typo-body-m-font-style: normal; - --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-bold-letter-spacing: -0.02em; --plasma-typo-body-m-bold-font-style: normal; - --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-letter-spacing: -0.02em; --plasma-typo-body-s-font-style: normal; - --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-bold-letter-spacing: -0.02em; --plasma-typo-body-s-bold-font-style: normal; - --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-letter-spacing: -0.02em; --plasma-typo-body-xs-font-style: normal; - --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-bold-letter-spacing: -0.02em; --plasma-typo-body-xs-bold-font-style: normal; - --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-letter-spacing: -0.02em; --plasma-typo-body-xxs-font-style: normal; - --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-bold-letter-spacing: -0.02em; --plasma-typo-body-xxs-bold-font-style: normal; --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family); @@ -423,7 +475,7 @@ --plasma-typo-text-s-letter-spacing: -0.02em; --plasma-typo-text-s-font-style: normal; --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family); - --plasma-typo-text-s-bold-letter-spacing: -0.02emm; + --plasma-typo-text-s-bold-letter-spacing: -0.02em; --plasma-typo-text-s-bold-font-style: normal; --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family); --plasma-typo-text-xs-letter-spacing: -0.02em; @@ -752,4 +804,4 @@ --plasma-typo-text-xs-bold-font-weight: 600; --plasma-typo-text-xs-bold-line-height: 1rem; } -} +} \ No newline at end of file diff --git a/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts b/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts index 4341367d80..11e0e24c6c 100644 --- a/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts +++ b/packages/themes/caldera-online-themes/src/themes/caldera_online__dark.ts @@ -5,22 +5,19 @@ export const caldera_online__dark = ([ :root { --text-primary-hover: #F5F5F593; --text-primary-active: #F5F5F5C4; - --text-primary: #f5f5f5F5; + --text-primary: #F5F5F5F5; --text-secondary-hover: #F5F5F5FF; --text-secondary-active: #F5F5F5AB; - --text-secondary: #F5f5f58F; + --text-secondary: #F5F5F58F; --text-tertiary-hover: #F5F5F5FF; --text-tertiary-active: #F5F5F556; - --text-tertiary: #F5f5f548; + --text-tertiary: #F5F5F548; --text-paragraph-hover: #F5F5F57A; --text-paragraph-active: #F5F5F5A3; - --text-paragraph: #f5f5f5cc; + --text-paragraph: #F5F5F5CC; --text-accent-hover: #2ACB47FF; --text-accent-active: #1F9835FF; --text-accent: #24B23E; - --text-accent-gradient-hover: #CCCCCCFF; - --text-accent-gradient-active: #E6E6E6FF; - --text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --text-positive-hover: #2ACB47FF; --text-positive-active: #1F9835FF; --text-positive: #24B23E; @@ -32,22 +29,19 @@ export const caldera_online__dark = ([ --text-negative: #FF3D51; --on-dark-text-primary-hover: #F5F5F593; --on-dark-text-primary-active: #F5F5F5C4; - --on-dark-text-primary: #f5f5f5F5; + --on-dark-text-primary: #F5F5F5F5; --on-dark-text-secondary-hover: #F5F5F5FF; --on-dark-text-secondary-active: #F5F5F5AB; - --on-dark-text-secondary: #F5f5f58F; + --on-dark-text-secondary: #F5F5F58F; --on-dark-text-tertiary-hover: #F5F5F5FF; --on-dark-text-tertiary-active: #F5F5F556; - --on-dark-text-tertiary: #F5f5f548; + --on-dark-text-tertiary: #F5F5F548; --on-dark-text-paragraph-hover: #F5F5F57A; --on-dark-text-paragraph-active: #F5F5F5A3; - --on-dark-text-paragraph: #f5f5f5CC; + --on-dark-text-paragraph: #F5F5F5CC; --on-dark-text-accent-hover: #2ACB47FF; --on-dark-text-accent-active: #1F9835FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #CCCCCCFF; - --on-dark-text-accent-gradient-active: #E6E6E6FF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-text-positive-hover: #2ACB47FF; --on-dark-text-positive-active: #1F9835FF; --on-dark-text-positive: #24B23E; @@ -72,9 +66,6 @@ export const caldera_online__dark = ([ --on-light-text-accent-hover: #13AA2CFF; --on-light-text-accent-active: #0D731EFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #CCCCCCFF; - --on-light-text-accent-gradient-active: #E6E6E6FF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --on-light-text-positive-hover: #13AA2CFF; --on-light-text-positive-active: #0D731EFF; --on-light-text-positive: #108E26; @@ -99,9 +90,6 @@ export const caldera_online__dark = ([ --inverse-text-accent-hover: #13AA2CFF; --inverse-text-accent-active: #0D731EFF; --inverse-text-accent: #108E26; - --inverse-text-accent-gradient-hover: #CCCCCCFF; - --inverse-text-accent-gradient-active: #E6E6E6FF; - --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --inverse-text-positive-hover: #13AA2CFF; --inverse-text-positive-active: #0D731EFF; --inverse-text-positive: #108E26; @@ -131,10 +119,10 @@ export const caldera_online__dark = ([ --surface-transparent-primary: #FFFFFF0F; --surface-transparent-secondary-hover: #FFFFFF3D; --surface-transparent-secondary-active: #FFFFFF0F; - --surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --surface-transparent-secondary: #FFFFFF1F; --surface-transparent-tertiary-hover: #FFFFFF52; --surface-transparent-tertiary-active: #FFFFFF24; - --surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --surface-transparent-tertiary: #FFFFFF33; --surface-transparent-deep-hover: #FFFFFFC2; --surface-transparent-deep-active: #FFFFFF94; --surface-transparent-deep: #FFFFFFA3; @@ -143,13 +131,10 @@ export const caldera_online__dark = ([ --surface-transparent-card: #FFFFFF0F; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); + --surface-clear: #00000000; --surface-accent-hover: #1DAF37FF; --surface-accent-active: #18952FFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --surface-positive-hover: #1DAF37FF; --surface-positive-active: #18952FFF; --surface-positive: #1A9E32; @@ -176,13 +161,13 @@ export const caldera_online__dark = ([ --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-transparent-primary-hover: #FFFFFF1F; --on-dark-surface-transparent-primary-active: #FFFFFF0A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary-hover: #FFFFFF3D; --on-dark-surface-transparent-secondary-active: #FFFFFF0F; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary-hover: #FFFFFF52; --on-dark-surface-transparent-tertiary-active: #FFFFFF24; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep-hover: #FFFFFFC2; --on-dark-surface-transparent-deep-active: #FFFFFF94; --on-dark-surface-transparent-deep: #FFFFFFA3; @@ -191,13 +176,10 @@ export const caldera_online__dark = ([ --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); + --on-dark-surface-clear: #00000000; --on-dark-surface-accent-hover: #1DAF37FF; --on-dark-surface-accent-active: #18952FFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-surface-positive-hover: #1DAF37FF; --on-dark-surface-positive-active: #18952FFF; --on-dark-surface-positive: #1A9E32; @@ -224,28 +206,25 @@ export const caldera_online__dark = ([ --on-light-surface-solid-default: #080808; --on-light-surface-transparent-primary-hover: #0808080F; --on-light-surface-transparent-primary-active: #08080800; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary-hover: #0808081F; --on-light-surface-transparent-secondary-active: #0808080A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary-hover: #0808083D; --on-light-surface-transparent-tertiary-active: #0808080F; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --on-light-surface-transparent-tertiary: #0808081F; --on-light-surface-transparent-deep-hover: #080808C2; --on-light-surface-transparent-deep-active: #08080894; --on-light-surface-transparent-deep: #080808A3; --on-light-surface-transparent-card-hover: #0808081F; --on-light-surface-transparent-card-active: #0808080A; - --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-card: #0808080F; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); + --on-light-surface-clear: #00000000; --on-light-surface-accent-hover: #1DAF37FF; --on-light-surface-accent-active: #18952FFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-light-surface-positive-hover: #1DAF37FF; --on-light-surface-positive-active: #18952FFF; --on-light-surface-positive: #1A9E32; @@ -272,13 +251,13 @@ export const caldera_online__dark = ([ --inverse-surface-solid-default: #080808; --inverse-surface-transparent-primary-hover: #0808080F; --inverse-surface-transparent-primary-active: #08080800; - --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --inverse-surface-transparent-primary: #08080805; --inverse-surface-transparent-secondary-hover: #0808081F; --inverse-surface-transparent-secondary-active: #0808080A; - --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --inverse-surface-transparent-secondary: #0808080F; --inverse-surface-transparent-tertiary-hover: #0808083D; --inverse-surface-transparent-tertiary-active: #0808080F; - --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --inverse-surface-transparent-tertiary: #0808081F; --inverse-surface-transparent-deep-hover: #080808C2; --inverse-surface-transparent-deep-active: #08080894; --inverse-surface-transparent-deep: #080808A3; @@ -287,13 +266,10 @@ export const caldera_online__dark = ([ --inverse-surface-transparent-card: #FFFFFFFF; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); + --inverse-surface-clear: #00000000; --inverse-surface-accent-hover: #1DAF37FF; --inverse-surface-accent-active: #18952FFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-surface-positive-hover: #1DAF37FF; --inverse-surface-positive-active: #18952FFF; --inverse-surface-positive: #1A9E32; @@ -308,28 +284,104 @@ export const caldera_online__dark = ([ --light-background-primary: #F9F9F9; --inverse-background-primary: #F9F9F9; --overlay-soft: #0808088F; - --overlay-hard: #080808f5; - --overlay-blur: rgba(8,8,8,0.28); - --on-dark-overlay-soft: #0808088f; - --on-dark-overlay-hard: #080808f5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); - --on-light-overlay-soft: rgba(249,249,249,0.56); - --on-light-overlay-hard: #f9f9f9f5; - --on-light-overlay-blur: rgba(249,249,249,0.28); - --inverse-overlay-soft: #f9f9f98F; - --inverse-overlay-hard: #f9f9f9f5; - --inverse-overlay-blur: rgba(249,249,249,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% ); + --overlay-hard: #080808F5; + --overlay-blur: #08080847; + --on-dark-overlay-soft: #0808088F; + --on-dark-overlay-hard: #080808F5; + --on-dark-overlay-blur: #08080847; + --on-light-overlay-soft: #F9F9F98F; + --on-light-overlay-hard: #F9F9F9F5; + --on-light-overlay-blur: #F9F9F947; + --inverse-overlay-soft: #F9F9F98F; + --inverse-overlay-hard: #F9F9F9F5; + --inverse-overlay-blur: #F9F9F947; color: var(--text-primary); background-color: var(--background-primary); } +:root { + --text-accent-gradient-hover: #CCCCCCFF; + --text-accent-gradient-active: #E6E6E6FF; + --text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-text-accent-gradient-hover: #CCCCCCFF; + --on-dark-text-accent-gradient-active: #E6E6E6FF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #CCCCCCFF; + --on-light-text-accent-gradient-active: #E6E6E6FF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #CCCCCCFF; + --inverse-text-accent-gradient-active: #E6E6E6FF; + --inverse-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + +:root { + --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A; + --shadow-down-soft-m: 0px 24px 48px -8px #00000014; + --shadow-down-soft-l: 0px 60px 112px -8px #00000014; + --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014; + --shadow-down-hard-m: 0px 16px 32px -8px #0000003D; + --shadow-down-hard-l: 0px 60px 112px -8px #00000066; + --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008; + --shadow-up-soft-m: 0px -24px 48px -8px #00000014; + --shadow-up-soft-l: 0px -60px 112px -8px #00000014; + --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008; + --shadow-up-hard-m: 0px -16px 32px -8px #0000003D; + --shadow-up-hard-l: 0px -60px 112px -8px #00000066; +} + +:root { + --border-radius-xxs: 4px; + --border-radius-xs: 8px; + --border-radius-s: 12px; + --border-radius-m: 16px; + --border-radius-l: 20px; + --border-radius-xl: 24px; + --border-radius-xxl: 32px; +} + :root { font-size: 16px; --plasma-typo-overflow-wrap: break-word; --plasma-typo-hyphens: auto; --plasma-typo-display-font-family: 'SB Sans Display', sans-serif; + --plasma-typo-body-font-family: 'SB Sans Text', sans-serif; + --plasma-typo-header-font-family: 'SB Sans Display', sans-serif; --plasma-typo-text-font-family: 'SB Sans Text', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-letter-spacing: normal; @@ -349,64 +401,64 @@ export const caldera_online__dark = ([ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-s-bold-letter-spacing: normal; --plasma-typo-dspl-s-bold-font-style: normal; - --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-letter-spacing: normal; --plasma-typo-h1-font-style: normal; - --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-bold-letter-spacing: normal; --plasma-typo-h1-bold-font-style: normal; - --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-letter-spacing: normal; --plasma-typo-h2-font-style: normal; - --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-bold-letter-spacing: normal; --plasma-typo-h2-bold-font-style: normal; - --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-letter-spacing: normal; --plasma-typo-h3-font-style: normal; - --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-bold-letter-spacing: normal; --plasma-typo-h3-bold-font-style: normal; - --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-letter-spacing: normal; --plasma-typo-h4-font-style: normal; - --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-bold-letter-spacing: normal; --plasma-typo-h4-bold-font-style: normal; - --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-letter-spacing: normal; --plasma-typo-h5-font-style: normal; - --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-bold-letter-spacing: normal; --plasma-typo-h5-bold-font-style: normal; - --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-letter-spacing: -0.02em; --plasma-typo-body-l-font-style: normal; - --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-bold-letter-spacing: -0.02em; --plasma-typo-body-l-bold-font-style: normal; - --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-letter-spacing: -0.02em; --plasma-typo-body-m-font-style: normal; - --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-bold-letter-spacing: -0.02em; --plasma-typo-body-m-bold-font-style: normal; - --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-letter-spacing: -0.02em; --plasma-typo-body-s-font-style: normal; - --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-bold-letter-spacing: -0.02em; --plasma-typo-body-s-bold-font-style: normal; - --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-letter-spacing: -0.02em; --plasma-typo-body-xs-font-style: normal; - --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-bold-letter-spacing: -0.02em; --plasma-typo-body-xs-bold-font-style: normal; - --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-letter-spacing: -0.02em; --plasma-typo-body-xxs-font-style: normal; - --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-bold-letter-spacing: -0.02em; --plasma-typo-body-xxs-bold-font-style: normal; --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family); @@ -425,7 +477,7 @@ export const caldera_online__dark = ([ --plasma-typo-text-s-letter-spacing: -0.02em; --plasma-typo-text-s-font-style: normal; --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family); - --plasma-typo-text-s-bold-letter-spacing: -0.02emm; + --plasma-typo-text-s-bold-letter-spacing: -0.02em; --plasma-typo-text-s-bold-font-style: normal; --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family); --plasma-typo-text-xs-letter-spacing: -0.02em; @@ -754,6 +806,5 @@ export const caldera_online__dark = ([ --plasma-typo-text-xs-bold-font-weight: 600; --plasma-typo-text-xs-bold-line-height: 1rem; } -} -`, +}`, ] as unknown) as TemplateStringsArray; diff --git a/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts b/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts index 24d516a7e8..991727882c 100644 --- a/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts +++ b/packages/themes/caldera-online-themes/src/themes/caldera_online__light.ts @@ -18,9 +18,6 @@ export const caldera_online__light = ([ --text-accent-hover: #14B32EFF; --text-accent-active: #0C6A1BFF; --text-accent: #108E26; - --text-accent-gradient-hover: #000000FF; - --text-accent-gradient-active: #CCCCCCFF; - --text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --text-positive-hover: #14B32EFF; --text-positive-active: #0C6A1BFF; --text-positive: #108E26; @@ -45,9 +42,6 @@ export const caldera_online__light = ([ --on-dark-text-accent-hover: #2BD44AFF; --on-dark-text-accent-active: #1D9032FF; --on-dark-text-accent: #24B23E; - --on-dark-text-accent-gradient-hover: #000000FF; - --on-dark-text-accent-gradient-active: #CCCCCCFF; - --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-text-positive-hover: #2BD44AFF; --on-dark-text-positive-active: #1D9032FF; --on-dark-text-positive: #24B23E; @@ -72,9 +66,6 @@ export const caldera_online__light = ([ --on-light-text-accent-hover: #14B32EFF; --on-light-text-accent-active: #0C6A1BFF; --on-light-text-accent: #108E26; - --on-light-text-accent-gradient-hover: #000000FF; - --on-light-text-accent-gradient-active: #CCCCCCFF; - --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --on-light-text-positive-hover: #14B32EFF; --on-light-text-positive-active: #0C6A1BFF; --on-light-text-positive: #108E26; @@ -99,9 +90,6 @@ export const caldera_online__light = ([ --inverse-text-accent-hover: #2BD44AFF; --inverse-text-accent-active: #1D9032FF; --inverse-text-accent: #24B23E; - --inverse-text-accent-gradient-hover: #000000FF; - --inverse-text-accent-gradient-active: #CCCCCCFF; - --inverse-text-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-text-positive-hover: #2BD44AFF; --inverse-text-positive-active: #1D9032FF; --inverse-text-positive: #24B23E; @@ -128,13 +116,13 @@ export const caldera_online__light = ([ --surface-solid-default: #080808; --surface-transparent-primary-hover: #08080800; --surface-transparent-primary-active: #0808080A; - --surface-transparent-primary: rgba(8, 8, 8, 0.02); + --surface-transparent-primary: #08080805; --surface-transparent-secondary-hover: #08080805; --surface-transparent-secondary-active: #0808081A; - --surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --surface-transparent-secondary: #0808080F; --surface-transparent-tertiary-hover: #0808080A; --surface-transparent-tertiary-active: #08080829; - --surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --surface-transparent-tertiary: #0808081F; --surface-transparent-deep-hover: #0808088F; --surface-transparent-deep-active: #080808AD; --surface-transparent-deep: #080808A3; @@ -143,13 +131,10 @@ export const caldera_online__light = ([ --surface-transparent-card: #FFFFFFFF; --surface-clear-hover: #00000000; --surface-clear-active: #00000000; - --surface-clear: rgba(0, 0, 0, 0); + --surface-clear: #00000000; --surface-accent-hover: #1EB83AFF; --surface-accent-active: #178C2CFF; --surface-accent: #1A9E32; - --surface-accent-gradient-hover: #FFFFFFFF; - --surface-accent-gradient-active: #FFFFFFFF; - --surface-accent-gradient: linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%); --surface-positive-hover: #1EB83AFF; --surface-positive-active: #178C2CFF; --surface-positive: #1A9E32; @@ -176,13 +161,13 @@ export const caldera_online__light = ([ --on-dark-surface-solid-default: #F9F9F9; --on-dark-surface-transparent-primary-hover: #FFFFFF05; --on-dark-surface-transparent-primary-active: #FFFFFF1A; - --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --on-dark-surface-transparent-primary: #FFFFFF0F; --on-dark-surface-transparent-secondary-hover: #FFFFFF0A; --on-dark-surface-transparent-secondary-active: #FFFFFF29; - --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --on-dark-surface-transparent-secondary: #FFFFFF1F; --on-dark-surface-transparent-tertiary-hover: #FFFFFF1F; --on-dark-surface-transparent-tertiary-active: #FFFFFF3D; - --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --on-dark-surface-transparent-tertiary: #FFFFFF33; --on-dark-surface-transparent-deep-hover: #FFFFFF8F; --on-dark-surface-transparent-deep-active: #FFFFFFAD; --on-dark-surface-transparent-deep: #FFFFFFA3; @@ -191,13 +176,10 @@ export const caldera_online__light = ([ --on-dark-surface-transparent-card: #FFFFFF0F; --on-dark-surface-clear-hover: #00000000; --on-dark-surface-clear-active: #00000000; - --on-dark-surface-clear: rgba(0, 0, 0, 0); + --on-dark-surface-clear: #00000000; --on-dark-surface-accent-hover: #1EB83AFF; --on-dark-surface-accent-active: #178C2CFF; --on-dark-surface-accent: #1A9E32; - --on-dark-surface-accent-gradient-hover: #FFFFFFFF; - --on-dark-surface-accent-gradient-active: #FFFFFFFF; - --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-dark-surface-positive-hover: #1EB83AFF; --on-dark-surface-positive-active: #178C2CFF; --on-dark-surface-positive: #1A9E32; @@ -224,13 +206,13 @@ export const caldera_online__light = ([ --on-light-surface-solid-default: #080808; --on-light-surface-transparent-primary-hover: #08080800; --on-light-surface-transparent-primary-active: #0808080A; - --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02); + --on-light-surface-transparent-primary: #08080805; --on-light-surface-transparent-secondary-hover: #08080805; --on-light-surface-transparent-secondary-active: #0808081A; - --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06); + --on-light-surface-transparent-secondary: #0808080F; --on-light-surface-transparent-tertiary-hover: #0808080A; --on-light-surface-transparent-tertiary-active: #08080829; - --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12); + --on-light-surface-transparent-tertiary: #0808081F; --on-light-surface-transparent-deep-hover: #0808088F; --on-light-surface-transparent-deep-active: #080808AD; --on-light-surface-transparent-deep: #080808A3; @@ -239,13 +221,10 @@ export const caldera_online__light = ([ --on-light-surface-transparent-card: #FFFFFFFF; --on-light-surface-clear-hover: #00000000; --on-light-surface-clear-active: #00000000; - --on-light-surface-clear: rgba(0, 0, 0, 0); + --on-light-surface-clear: #00000000; --on-light-surface-accent-hover: #1EB83AFF; --on-light-surface-accent-active: #178C2CFF; --on-light-surface-accent: #1A9E32; - --on-light-surface-accent-gradient-hover: #FFFFFFFF; - --on-light-surface-accent-gradient-active: #FFFFFFFF; - --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --on-light-surface-positive-hover: #1EB83AFF; --on-light-surface-positive-active: #178C2CFF; --on-light-surface-positive: #1A9E32; @@ -272,13 +251,13 @@ export const caldera_online__light = ([ --inverse-surface-solid-default: #F9F9F9; --inverse-surface-transparent-primary-hover: #FFFFFF05; --inverse-surface-transparent-primary-active: #FFFFFF1A; - --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06); + --inverse-surface-transparent-primary: #FFFFFF0F; --inverse-surface-transparent-secondary-hover: #FFFFFF0A; --inverse-surface-transparent-secondary-active: #FFFFFF29; - --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12); + --inverse-surface-transparent-secondary: #FFFFFF1F; --inverse-surface-transparent-tertiary-hover: #FFFFFF1F; --inverse-surface-transparent-tertiary-active: #FFFFFF3D; - --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2); + --inverse-surface-transparent-tertiary: #FFFFFF33; --inverse-surface-transparent-deep-hover: #FFFFFF8F; --inverse-surface-transparent-deep-active: #FFFFFFAD; --inverse-surface-transparent-deep: #FFFFFFA3; @@ -287,13 +266,10 @@ export const caldera_online__light = ([ --inverse-surface-transparent-card: #FFFFFF0F; --inverse-surface-clear-hover: #00000000; --inverse-surface-clear-active: #00000000; - --inverse-surface-clear: rgba(0, 0, 0, 0); + --inverse-surface-clear: #00000000; --inverse-surface-accent-hover: #1EB83AFF; --inverse-surface-accent-active: #178C2CFF; --inverse-surface-accent: #1A9E32; - --inverse-surface-accent-gradient-hover: #FFFFFFFF; - --inverse-surface-accent-gradient-active: #FFFFFFFF; - --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%); --inverse-surface-positive-hover: #1EB83AFF; --inverse-surface-positive-active: #178C2CFF; --inverse-surface-positive: #1A9E32; @@ -309,27 +285,103 @@ export const caldera_online__light = ([ --inverse-background-primary: #080808; --overlay-soft: #F9F9F98F; --overlay-hard: #F9F9F9F5; - --overlay-blur: rgba(249,249,249,0.28); + --overlay-blur: #F9F9F947; --on-dark-overlay-soft: #0808088F; --on-dark-overlay-hard: #080808F5; - --on-dark-overlay-blur: rgba(8,8,8,0.28); + --on-dark-overlay-blur: #08080847; --on-light-overlay-soft: #F9F9F98F; --on-light-overlay-hard: #F9F9F9F5; - --on-light-overlay-blur: rgba(249,249,249,0.28); + --on-light-overlay-blur: #F9F9F947; --inverse-overlay-soft: #0808088F; --inverse-overlay-hard: #080808F5; - --inverse-overlay-blur: rgba(8,8,8,0.28); - --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% ); - --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% ); + --inverse-overlay-blur: #08080847; color: var(--text-primary); background-color: var(--background-primary); } +:root { + --text-accent-gradient-hover: #000000FF; + --text-accent-gradient-active: #CCCCCCFF; + --text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --on-dark-text-accent-gradient-hover: #000000FF; + --on-dark-text-accent-gradient-active: #CCCCCCFF; + --on-dark-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-text-accent-gradient-hover: #000000FF; + --on-light-text-accent-gradient-active: #CCCCCCFF; + --on-light-text-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --inverse-text-accent-gradient-hover: #000000FF; + --inverse-text-accent-gradient-active: #CCCCCCFF; + --inverse-text-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --surface-accent-gradient-hover: #FFFFFFFF; + --surface-accent-gradient-active: #FFFFFFFF; + --surface-accent-gradient: linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%); + --surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --surface-skeleton-gradient-hover: #FFFFFFFF; + --surface-skeleton-gradient-active: #FFFFFFFF; + --surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient-hover: #FFFFFFFF; + --on-dark-surface-accent-gradient-active: #FFFFFFFF; + --on-dark-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-gradient-active: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient-hover: #FFFFFFFF; + --on-light-surface-accent-gradient-active: #FFFFFFFF; + --on-light-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%); + --on-light-surface-skeleton-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-gradient-active: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%); + --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient-hover: #FFFFFFFF; + --inverse-surface-accent-gradient-active: #FFFFFFFF; + --inverse-surface-accent-gradient: linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%); + --inverse-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%); + --inverse-surface-skeleton-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-gradient-active: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%); + --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF; + --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF; +} + +:root { + --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A; + --shadow-down-soft-m: 0px 24px 48px -8px #00000014; + --shadow-down-soft-l: 0px 60px 112px -8px #00000014; + --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014; + --shadow-down-hard-m: 0px 16px 32px -8px #0000003D; + --shadow-down-hard-l: 0px 60px 112px -8px #00000066; + --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008; + --shadow-up-soft-m: 0px -24px 48px -8px #00000014; + --shadow-up-soft-l: 0px -60px 112px -8px #00000014; + --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008; + --shadow-up-hard-m: 0px -16px 32px -8px #0000003D; + --shadow-up-hard-l: 0px -60px 112px -8px #00000066; +} + +:root { + --border-radius-xxs: 4px; + --border-radius-xs: 8px; + --border-radius-s: 12px; + --border-radius-m: 16px; + --border-radius-l: 20px; + --border-radius-xl: 24px; + --border-radius-xxl: 32px; +} + :root { font-size: 16px; --plasma-typo-overflow-wrap: break-word; --plasma-typo-hyphens: auto; --plasma-typo-display-font-family: 'SB Sans Display', sans-serif; + --plasma-typo-body-font-family: 'SB Sans Text', sans-serif; + --plasma-typo-header-font-family: 'SB Sans Display', sans-serif; --plasma-typo-text-font-family: 'SB Sans Text', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-letter-spacing: normal; @@ -349,64 +401,64 @@ export const caldera_online__light = ([ --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-s-bold-letter-spacing: normal; --plasma-typo-dspl-s-bold-font-style: normal; - --plasma-typo-h1-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-letter-spacing: normal; --plasma-typo-h1-font-style: normal; - --plasma-typo-h1-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h1-bold-letter-spacing: normal; --plasma-typo-h1-bold-font-style: normal; - --plasma-typo-h2-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-letter-spacing: normal; --plasma-typo-h2-font-style: normal; - --plasma-typo-h2-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h2-bold-letter-spacing: normal; --plasma-typo-h2-bold-font-style: normal; - --plasma-typo-h3-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-letter-spacing: normal; --plasma-typo-h3-font-style: normal; - --plasma-typo-h3-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h3-bold-letter-spacing: normal; --plasma-typo-h3-bold-font-style: normal; - --plasma-typo-h4-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-letter-spacing: normal; --plasma-typo-h4-font-style: normal; - --plasma-typo-h4-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h4-bold-letter-spacing: normal; --plasma-typo-h4-bold-font-style: normal; - --plasma-typo-h5-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-letter-spacing: normal; --plasma-typo-h5-font-style: normal; - --plasma-typo-h5-bold-font-family: var(--plasma-typo-display-font-family); + --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family); --plasma-typo-h5-bold-letter-spacing: normal; --plasma-typo-h5-bold-font-style: normal; - --plasma-typo-body-l-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-letter-spacing: -0.02em; --plasma-typo-body-l-font-style: normal; - --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-l-bold-letter-spacing: -0.02em; --plasma-typo-body-l-bold-font-style: normal; - --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-letter-spacing: -0.02em; --plasma-typo-body-m-font-style: normal; - --plasma-typo-body-m-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-m-bold-letter-spacing: -0.02em; --plasma-typo-body-m-bold-font-style: normal; - --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-letter-spacing: -0.02em; --plasma-typo-body-s-font-style: normal; - --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-s-bold-letter-spacing: -0.02em; --plasma-typo-body-s-bold-font-style: normal; - --plasma-typo-body-xs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-letter-spacing: -0.02em; --plasma-typo-body-xs-font-style: normal; - --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xs-bold-letter-spacing: -0.02em; --plasma-typo-body-xs-bold-font-style: normal; - --plasma-typo-body-xxs-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-letter-spacing: -0.02em; --plasma-typo-body-xxs-font-style: normal; - --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family); + --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family); --plasma-typo-body-xxs-bold-letter-spacing: -0.02em; --plasma-typo-body-xxs-bold-font-style: normal; --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family); @@ -425,7 +477,7 @@ export const caldera_online__light = ([ --plasma-typo-text-s-letter-spacing: -0.02em; --plasma-typo-text-s-font-style: normal; --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family); - --plasma-typo-text-s-bold-letter-spacing: -0.02emm; + --plasma-typo-text-s-bold-letter-spacing: -0.02em; --plasma-typo-text-s-bold-font-style: normal; --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family); --plasma-typo-text-xs-letter-spacing: -0.02em; @@ -754,6 +806,5 @@ export const caldera_online__light = ([ --plasma-typo-text-xs-bold-font-weight: 600; --plasma-typo-text-xs-bold-line-height: 1rem; } -} -`, +}`, ] as unknown) as TemplateStringsArray; diff --git a/packages/themes/caldera-online-themes/src/themes/index.ts b/packages/themes/caldera-online-themes/src/themes/index.ts index 8e1c85e74d..a541f19c7e 100644 --- a/packages/themes/caldera-online-themes/src/themes/index.ts +++ b/packages/themes/caldera-online-themes/src/themes/index.ts @@ -1,4 +1,4 @@ // Generated by robots, do not change this manually! -export { caldera_online__light } from './caldera_online__light'; export { caldera_online__dark } from './caldera_online__dark'; +export { caldera_online__light } from './caldera_online__light'; diff --git a/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts b/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts index cb43bdf5d9..fc2c246b6b 100644 --- a/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts +++ b/packages/themes/caldera-online-themes/src/tokens/caldera_online/index.ts @@ -7,7 +7,7 @@ export const textPrimaryHover = 'var(--text-primary-hover, #F5F5F593)'; export const textPrimaryActive = 'var(--text-primary-active, #F5F5F5C4)'; /** Основной цвет текста */ -export const textPrimary = 'var(--text-primary, #f5f5f5F5)'; +export const textPrimary = 'var(--text-primary, #F5F5F5F5)'; /** Вторичный цвет текста */ export const textSecondaryHover = 'var(--text-secondary-hover, #F5F5F5FF)'; @@ -16,7 +16,7 @@ export const textSecondaryHover = 'var(--text-secondary-hover, #F5F5F5FF)'; export const textSecondaryActive = 'var(--text-secondary-active, #F5F5F5AB)'; /** Вторичный цвет текста */ -export const textSecondary = 'var(--text-secondary, #F5f5f58F)'; +export const textSecondary = 'var(--text-secondary, #F5F5F58F)'; /** Третичный цвет текста */ export const textTertiaryHover = 'var(--text-tertiary-hover, #F5F5F5FF)'; @@ -25,7 +25,7 @@ export const textTertiaryHover = 'var(--text-tertiary-hover, #F5F5F5FF)'; export const textTertiaryActive = 'var(--text-tertiary-active, #F5F5F556)'; /** Третичный цвет текста */ -export const textTertiary = 'var(--text-tertiary, #F5f5f548)'; +export const textTertiary = 'var(--text-tertiary, #F5F5F548)'; /** Сплошной наборный текст */ export const textParagraphHover = 'var(--text-paragraph-hover, #F5F5F57A)'; @@ -34,7 +34,7 @@ export const textParagraphHover = 'var(--text-paragraph-hover, #F5F5F57A)'; export const textParagraphActive = 'var(--text-paragraph-active, #F5F5F5A3)'; /** Сплошной наборный текст */ -export const textParagraph = 'var(--text-paragraph, #f5f5f5cc)'; +export const textParagraph = 'var(--text-paragraph, #F5F5F5CC)'; /** Акцентный цвет */ export const textAccentHover = 'var(--text-accent-hover, #2ACB47FF)'; @@ -45,15 +45,6 @@ export const textAccentActive = 'var(--text-accent-active, #1F9835FF)'; /** Акцентный цвет */ export const textAccent = 'var(--text-accent, #24B23E)'; -/** Акцентный цвет с градиентом */ -export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)'; - -/** Акцентный цвет с градиентом */ -export const textAccentGradientActive = 'var(--text-accent-gradient-active, #E6E6E6FF)'; - -/** Акцентный цвет с градиентом */ -export const textAccentGradient = 'var(--text-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Цвет успеха */ export const textPositiveHover = 'var(--text-positive-hover, #2ACB47FF)'; @@ -88,7 +79,7 @@ export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover, #F5F5F5 export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #F5F5F5C4)'; /** Основной цвет текста на темном фоне */ -export const onDarkTextPrimary = 'var(--on-dark-text-primary, #f5f5f5F5)'; +export const onDarkTextPrimary = 'var(--on-dark-text-primary, #F5F5F5F5)'; /** Вторичный цвет текста на темном фоне */ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #F5F5F5FF)'; @@ -97,7 +88,7 @@ export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #F5 export const onDarkTextSecondaryActive = 'var(--on-dark-text-secondary-active, #F5F5F5AB)'; /** Вторичный цвет текста на темном фоне */ -export const onDarkTextSecondary = 'var(--on-dark-text-secondary, #F5f5f58F)'; +export const onDarkTextSecondary = 'var(--on-dark-text-secondary, #F5F5F58F)'; /** Третичный цвет текста на темном фоне */ export const onDarkTextTertiaryHover = 'var(--on-dark-text-tertiary-hover, #F5F5F5FF)'; @@ -106,7 +97,7 @@ export const onDarkTextTertiaryHover = 'var(--on-dark-text-tertiary-hover, #F5F5 export const onDarkTextTertiaryActive = 'var(--on-dark-text-tertiary-active, #F5F5F556)'; /** Третичный цвет текста на темном фоне */ -export const onDarkTextTertiary = 'var(--on-dark-text-tertiary, #F5f5f548)'; +export const onDarkTextTertiary = 'var(--on-dark-text-tertiary, #F5F5F548)'; /** Сплошной наборный текст на темном фоне */ export const onDarkTextParagraphHover = 'var(--on-dark-text-paragraph-hover, #F5F5F57A)'; @@ -115,7 +106,7 @@ export const onDarkTextParagraphHover = 'var(--on-dark-text-paragraph-hover, #F5 export const onDarkTextParagraphActive = 'var(--on-dark-text-paragraph-active, #F5F5F5A3)'; /** Сплошной наборный текст на темном фоне */ -export const onDarkTextParagraph = 'var(--on-dark-text-paragraph, #f5f5f5CC)'; +export const onDarkTextParagraph = 'var(--on-dark-text-paragraph, #F5F5F5CC)'; /** Акцентный цвет на темном фоне */ export const onDarkTextAccentHover = 'var(--on-dark-text-accent-hover, #2ACB47FF)'; @@ -126,16 +117,6 @@ export const onDarkTextAccentActive = 'var(--on-dark-text-accent-active, #1F9835 /** Акцентный цвет на темном фоне */ export const onDarkTextAccent = 'var(--on-dark-text-accent, #24B23E)'; -/** Акцентный цвет с градиентом на темном фоне */ -export const onDarkTextAccentGradientHover = 'var(--on-dark-text-accent-gradient-hover, #CCCCCCFF)'; - -/** Акцентный цвет с градиентом на темном фоне */ -export const onDarkTextAccentGradientActive = 'var(--on-dark-text-accent-gradient-active, #E6E6E6FF)'; - -/** Акцентный цвет с градиентом на темном фоне */ -export const onDarkTextAccentGradient = - 'var(--on-dark-text-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Цвет успеха на темном фоне */ export const onDarkTextPositiveHover = 'var(--on-dark-text-positive-hover, #2ACB47FF)'; @@ -208,16 +189,6 @@ export const onLightTextAccentActive = 'var(--on-light-text-accent-active, #0D73 /** Акцентный цвет на светлом фоне */ export const onLightTextAccent = 'var(--on-light-text-accent, #108E26)'; -/** Акцентный цвет с градиентом на светлом фоне */ -export const onLightTextAccentGradientHover = 'var(--on-light-text-accent-gradient-hover, #CCCCCCFF)'; - -/** Акцентный цвет с градиентом на светлом фоне */ -export const onLightTextAccentGradientActive = 'var(--on-light-text-accent-gradient-active, #E6E6E6FF)'; - -/** Акцентный цвет с градиентом на светлом фоне */ -export const onLightTextAccentGradient = - 'var(--on-light-text-accent-gradient, linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%))'; - /** Цвет успеха на светлом фоне */ export const onLightTextPositiveHover = 'var(--on-light-text-positive-hover, #13AA2CFF)'; @@ -290,16 +261,6 @@ export const inverseTextAccentActive = 'var(--inverse-text-accent-active, #0D731 /** Инвертированный акцентный цвет */ export const inverseTextAccent = 'var(--inverse-text-accent, #108E26)'; -/** Инвертированный акцентный цвет с градиентом */ -export const inverseTextAccentGradientHover = 'var(--inverse-text-accent-gradient-hover, #CCCCCCFF)'; - -/** Инвертированный акцентный цвет с градиентом */ -export const inverseTextAccentGradientActive = 'var(--inverse-text-accent-gradient-active, #E6E6E6FF)'; - -/** Инвертированный акцентный цвет с градиентом */ -export const inverseTextAccentGradient = - 'var(--inverse-text-accent-gradient, linear-gradient(45deg, #0D8523 0%, #0DA8AB 100%))'; - /** Инвертированный цвет успеха */ export const inverseTextPositiveHover = 'var(--inverse-text-positive-hover, #13AA2CFF)'; @@ -388,7 +349,7 @@ export const surfaceTransparentSecondaryHover = 'var(--surface-transparent-secon export const surfaceTransparentSecondaryActive = 'var(--surface-transparent-secondary-active, #FFFFFF0F)'; /** Вторичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentSecondary = 'var(--surface-transparent-secondary, rgba(255, 255, 255, 0.12))'; +export const surfaceTransparentSecondary = 'var(--surface-transparent-secondary, #FFFFFF1F)'; /** Третичный прозрачный фон поверхности/контрола */ export const surfaceTransparentTertiaryHover = 'var(--surface-transparent-tertiary-hover, #FFFFFF52)'; @@ -397,7 +358,7 @@ export const surfaceTransparentTertiaryHover = 'var(--surface-transparent-tertia export const surfaceTransparentTertiaryActive = 'var(--surface-transparent-tertiary-active, #FFFFFF24)'; /** Третичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentTertiary = 'var(--surface-transparent-tertiary, rgba(255, 255, 255, 0.2))'; +export const surfaceTransparentTertiary = 'var(--surface-transparent-tertiary, #FFFFFF33)'; /** Прозрачный фон поверхности/контрола по умолчанию */ export const surfaceTransparentDeepHover = 'var(--surface-transparent-deep-hover, #FFFFFFC2)'; @@ -424,7 +385,7 @@ export const surfaceClearHover = 'var(--surface-clear-hover, #00000000)'; export const surfaceClearActive = 'var(--surface-clear-active, #00000000)'; /** Фон поверхности/контрола без заливки */ -export const surfaceClear = 'var(--surface-clear, rgba(0, 0, 0, 0))'; +export const surfaceClear = 'var(--surface-clear, #00000000)'; /** Акцентный фон поверхности/контрола */ export const surfaceAccentHover = 'var(--surface-accent-hover, #1DAF37FF)'; @@ -435,15 +396,6 @@ export const surfaceAccentActive = 'var(--surface-accent-active, #18952FFF)'; /** Акцентный фон поверхности/контрола */ export const surfaceAccent = 'var(--surface-accent, #1A9E32)'; -/** Акцентный фон поверхности/контрола с градиентом */ -export const surfaceAccentGradientHover = 'var(--surface-accent-gradient-hover, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом */ -export const surfaceAccentGradientActive = 'var(--surface-accent-gradient-active, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом */ -export const surfaceAccentGradient = 'var(--surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Цвет фона поверхности/контрола успех */ export const surfacePositiveHover = 'var(--surface-positive-hover, #1DAF37FF)'; @@ -523,7 +475,7 @@ export const onDarkSurfaceTransparentPrimaryHover = 'var(--on-dark-surface-trans export const onDarkSurfaceTransparentPrimaryActive = 'var(--on-dark-surface-transparent-primary-active, #FFFFFF0A)'; /** Основной прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary, rgba(255, 255, 255, 0.06))'; +export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary, #FFFFFF0F)'; /** Вторичный прозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceTransparentSecondaryHover = 'var(--on-dark-surface-transparent-secondary-hover, #FFFFFF3D)'; @@ -532,8 +484,7 @@ export const onDarkSurfaceTransparentSecondaryHover = 'var(--on-dark-surface-tra export const onDarkSurfaceTransparentSecondaryActive = 'var(--on-dark-surface-transparent-secondary-active, #FFFFFF0F)'; /** Вторичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentSecondary = - 'var(--on-dark-surface-transparent-secondary, rgba(255, 255, 255, 0.12))'; +export const onDarkSurfaceTransparentSecondary = 'var(--on-dark-surface-transparent-secondary, #FFFFFF1F)'; /** Третичный прозрачный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceTransparentTertiaryHover = 'var(--on-dark-surface-transparent-tertiary-hover, #FFFFFF52)'; @@ -542,7 +493,7 @@ export const onDarkSurfaceTransparentTertiaryHover = 'var(--on-dark-surface-tran export const onDarkSurfaceTransparentTertiaryActive = 'var(--on-dark-surface-transparent-tertiary-active, #FFFFFF24)'; /** Третичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentTertiary = 'var(--on-dark-surface-transparent-tertiary, rgba(255, 255, 255, 0.2))'; +export const onDarkSurfaceTransparentTertiary = 'var(--on-dark-surface-transparent-tertiary, #FFFFFF33)'; /** Прозрачный фон поверхности по умолчанию на темном фоне */ export const onDarkSurfaceTransparentDeepHover = 'var(--on-dark-surface-transparent-deep-hover, #FFFFFFC2)'; @@ -569,7 +520,7 @@ export const onDarkSurfaceClearHover = 'var(--on-dark-surface-clear-hover, #0000 export const onDarkSurfaceClearActive = 'var(--on-dark-surface-clear-active, #00000000)'; /** Фон поверхности/контрола без заливки на темном фоне */ -export const onDarkSurfaceClear = 'var(--on-dark-surface-clear, rgba(0, 0, 0, 0))'; +export const onDarkSurfaceClear = 'var(--on-dark-surface-clear, #00000000)'; /** Акцентный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceAccentHover = 'var(--on-dark-surface-accent-hover, #1DAF37FF)'; @@ -580,16 +531,6 @@ export const onDarkSurfaceAccentActive = 'var(--on-dark-surface-accent-active, # /** Акцентный фон поверхности/контрола на темном фоне */ export const onDarkSurfaceAccent = 'var(--on-dark-surface-accent, #1A9E32)'; -/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ -export const onDarkSurfaceAccentGradientHover = 'var(--on-dark-surface-accent-gradient-hover, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ -export const onDarkSurfaceAccentGradientActive = 'var(--on-dark-surface-accent-gradient-active, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ -export const onDarkSurfaceAccentGradient = - 'var(--on-dark-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Цвет фона поверхности/контрола успех на темном фоне */ export const onDarkSurfacePositiveHover = 'var(--on-dark-surface-positive-hover, #1DAF37FF)'; @@ -669,7 +610,7 @@ export const onLightSurfaceTransparentPrimaryHover = 'var(--on-light-surface-tra export const onLightSurfaceTransparentPrimaryActive = 'var(--on-light-surface-transparent-primary-active, #08080800)'; /** Основной прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary, rgba(8, 8, 8, 0.02))'; +export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary, #08080805)'; /** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceTransparentSecondaryHover = 'var(--on-light-surface-transparent-secondary-hover, #0808081F)'; @@ -679,7 +620,7 @@ export const onLightSurfaceTransparentSecondaryActive = 'var(--on-light-surface-transparent-secondary-active, #0808080A)'; /** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentSecondary = 'var(--on-light-surface-transparent-secondary, rgba(8, 8, 8, 0.06))'; +export const onLightSurfaceTransparentSecondary = 'var(--on-light-surface-transparent-secondary, #0808080F)'; /** Третичный прозрачный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceTransparentTertiaryHover = 'var(--on-light-surface-transparent-tertiary-hover, #0808083D)'; @@ -688,7 +629,7 @@ export const onLightSurfaceTransparentTertiaryHover = 'var(--on-light-surface-tr export const onLightSurfaceTransparentTertiaryActive = 'var(--on-light-surface-transparent-tertiary-active, #0808080F)'; /** Третичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentTertiary = 'var(--on-light-surface-transparent-tertiary, rgba(8, 8, 8, 0.12))'; +export const onLightSurfaceTransparentTertiary = 'var(--on-light-surface-transparent-tertiary, #0808081F)'; /** Прозрачный фон поверхности по умолчанию на светлом фоне */ export const onLightSurfaceTransparentDeepHover = 'var(--on-light-surface-transparent-deep-hover, #080808C2)'; @@ -706,7 +647,7 @@ export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transp export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-transparent-card-active, #0808080A)'; /** Прозрачный фон для карточек на светлом фоне */ -export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, rgba(8, 8, 8, 0.06))'; +export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #0808080F)'; /** Фон поверхности/контрола без заливки на светлом фоне */ export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover, #00000000)'; @@ -715,7 +656,7 @@ export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover, #00 export const onLightSurfaceClearActive = 'var(--on-light-surface-clear-active, #00000000)'; /** Фон поверхности/контрола без заливки на светлом фоне */ -export const onLightSurfaceClear = 'var(--on-light-surface-clear, rgba(0, 0, 0, 0))'; +export const onLightSurfaceClear = 'var(--on-light-surface-clear, #00000000)'; /** Акцентный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceAccentHover = 'var(--on-light-surface-accent-hover, #1DAF37FF)'; @@ -726,16 +667,6 @@ export const onLightSurfaceAccentActive = 'var(--on-light-surface-accent-active, /** Акцентный фон поверхности/контрола на светлом фоне */ export const onLightSurfaceAccent = 'var(--on-light-surface-accent, #1A9E32)'; -/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ -export const onLightSurfaceAccentGradientHover = 'var(--on-light-surface-accent-gradient-hover, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ -export const onLightSurfaceAccentGradientActive = 'var(--on-light-surface-accent-gradient-active, #FFFFFFFF)'; - -/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ -export const onLightSurfaceAccentGradient = - 'var(--on-light-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Цвет фона поверхности/контрола успех на светлом фоне */ export const onLightSurfacePositiveHover = 'var(--on-light-surface-positive-hover, #1DAF37FF)'; @@ -815,7 +746,7 @@ export const inverseSurfaceTransparentPrimaryHover = 'var(--inverse-surface-tran export const inverseSurfaceTransparentPrimaryActive = 'var(--inverse-surface-transparent-primary-active, #08080800)'; /** Инвертированный основной прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, rgba(8, 8, 8, 0.02))'; +export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, #08080805)'; /** Инвертированный вторичный прозрачный фон поверхности/контрола */ export const inverseSurfaceTransparentSecondaryHover = 'var(--inverse-surface-transparent-secondary-hover, #0808081F)'; @@ -825,7 +756,7 @@ export const inverseSurfaceTransparentSecondaryActive = 'var(--inverse-surface-transparent-secondary-active, #0808080A)'; /** Инвертированный вторичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, rgba(8, 8, 8, 0.06))'; +export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, #0808080F)'; /** Инвертированный третичный прозрачный фон поверхности/контрола */ export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-transparent-tertiary-hover, #0808083D)'; @@ -834,7 +765,7 @@ export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-tra export const inverseSurfaceTransparentTertiaryActive = 'var(--inverse-surface-transparent-tertiary-active, #0808080F)'; /** Инвертированный третичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, rgba(8, 8, 8, 0.12))'; +export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, #0808081F)'; /** Инвертированный прозрачный фон поверхности по умолчанию */ export const inverseSurfaceTransparentDeepHover = 'var(--inverse-surface-transparent-deep-hover, #080808C2)'; @@ -861,7 +792,7 @@ export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #000 export const inverseSurfaceClearActive = 'var(--inverse-surface-clear-active, #00000000)'; /** Инвертированный фон поверхности/контрола без заливки */ -export const inverseSurfaceClear = 'var(--inverse-surface-clear, rgba(0, 0, 0, 0))'; +export const inverseSurfaceClear = 'var(--inverse-surface-clear, #00000000)'; /** Инвертированный акцентный фон поверхности/контрола */ export const inverseSurfaceAccentHover = 'var(--inverse-surface-accent-hover, #1DAF37FF)'; @@ -872,16 +803,6 @@ export const inverseSurfaceAccentActive = 'var(--inverse-surface-accent-active, /** Инвертированный акцентный фон поверхности/контрола */ export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #1A9E32)'; -/** Инвертированный акцентный фон поверхности/контрола с градиентом */ -export const inverseSurfaceAccentGradientHover = 'var(--inverse-surface-accent-gradient-hover, #FFFFFFFF)'; - -/** Инвертированный акцентный фон поверхности/контрола с градиентом */ -export const inverseSurfaceAccentGradientActive = 'var(--inverse-surface-accent-gradient-active, #FFFFFFFF)'; - -/** Инвертированный акцентный фон поверхности/контрола с градиентом */ -export const inverseSurfaceAccentGradient = - 'var(--inverse-surface-accent-gradient, linear-gradient(45deg, #1A9E32 0%, #04C6C9 100%))'; - /** Инвертированный цвет фона поверхности/контрола успех */ export const inverseSurfacePositiveHover = 'var(--inverse-surface-positive-hover, #1DAF37FF)'; @@ -925,36 +846,594 @@ export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F9F9 export const overlaySoft = 'var(--overlay-soft, #0808088F)'; /** Цвет фона паранжи темный */ -export const overlayHard = 'var(--overlay-hard, #080808f5)'; +export const overlayHard = 'var(--overlay-hard, #080808F5)'; -export const overlayBlur = 'var(--overlay-blur, rgba(8,8,8,0.28))'; +/** dark overlay default overlayBlur */ +export const overlayBlur = 'var(--overlay-blur, #08080847)'; /** Цвет фона паранжи светлый на темном фоне */ -export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft, #0808088f)'; +export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft, #0808088F)'; /** Цвет фона паранжи темный на темном фоне */ -export const onDarkOverlayHard = 'var(--on-dark-overlay-hard, #080808f5)'; +export const onDarkOverlayHard = 'var(--on-dark-overlay-hard, #080808F5)'; -export const onDarkOverlayBlur = 'var(--on-dark-overlay-blur, rgba(8,8,8,0.28))'; +/** dark overlay onDark overlayBlur */ +export const onDarkOverlayBlur = 'var(--on-dark-overlay-blur, #08080847)'; /** Цвет фона паранжи светлый на светлом фоне */ -export const onLightOverlaySoft = 'var(--on-light-overlay-soft, rgba(249,249,249,0.56))'; +export const onLightOverlaySoft = 'var(--on-light-overlay-soft, #F9F9F98F)'; /** Цвет фона паранжи темный на светлом фоне */ -export const onLightOverlayHard = 'var(--on-light-overlay-hard, #f9f9f9f5)'; +export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; -export const onLightOverlayBlur = 'var(--on-light-overlay-blur, rgba(249,249,249,0.28))'; +/** dark overlay onLight overlayBlur */ +export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F947)'; /** Инвертированный цвет фона паранжи светлый */ -export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #f9f9f98F)'; +export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #F9F9F98F)'; /** Инвертированный цвет фона паранжи темный */ -export const inverseOverlayHard = 'var(--inverse-overlay-hard, #f9f9f9f5)'; +export const inverseOverlayHard = 'var(--inverse-overlay-hard, #F9F9F9F5)'; + +/** dark overlay inverse overlayBlur */ +export const inverseOverlayBlur = 'var(--inverse-overlay-blur, #F9F9F947)'; + +/** Акцентный цвет с градиентом */ +export const textAccentGradientHover = 'var(--text-accent-gradient-hover, #CCCCCCFF)'; + +/** Акцентный цвет с градиентом */ +export const textAccentGradientActive = 'var(--text-accent-gradient-active, #E6E6E6FF)'; + +/** Акцентный цвет с градиентом */ +export const textAccentGradient = 'var(--text-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Акцентный цвет с градиентом на темном фоне */ +export const onDarkTextAccentGradientHover = 'var(--on-dark-text-accent-gradient-hover, #CCCCCCFF)'; + +/** Акцентный цвет с градиентом на темном фоне */ +export const onDarkTextAccentGradientActive = 'var(--on-dark-text-accent-gradient-active, #E6E6E6FF)'; + +/** Акцентный цвет с градиентом на темном фоне */ +export const onDarkTextAccentGradient = + 'var(--on-dark-text-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Акцентный цвет с градиентом на светлом фоне */ +export const onLightTextAccentGradientHover = 'var(--on-light-text-accent-gradient-hover, #CCCCCCFF)'; + +/** Акцентный цвет с градиентом на светлом фоне */ +export const onLightTextAccentGradientActive = 'var(--on-light-text-accent-gradient-active, #E6E6E6FF)'; + +/** Акцентный цвет с градиентом на светлом фоне */ +export const onLightTextAccentGradient = + 'var(--on-light-text-accent-gradient, linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%))'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientHover = 'var(--inverse-text-accent-gradient-hover, #CCCCCCFF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradientActive = 'var(--inverse-text-accent-gradient-active, #E6E6E6FF)'; + +/** Инвертированный акцентный цвет с градиентом */ +export const inverseTextAccentGradient = + 'var(--inverse-text-accent-gradient, linear-gradient(45deg, #0D8523FF 0%, #0DA8ABFF 100%))'; + +/** Акцентный фон поверхности/контрола с градиентом */ +export const surfaceAccentGradientHover = 'var(--surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом */ +export const surfaceAccentGradientActive = 'var(--surface-accent-gradient-active, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом */ +export const surfaceAccentGradient = + 'var(--surface-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Фон для скелетона */ +export const surfaceSkeletonGradient = + 'var(--surface-skeleton-gradient, linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%))'; + +/** Фон для скелетона */ +export const surfaceSkeletonGradientHover = 'var(--surface-skeleton-gradient-hover, #FFFFFFFF)'; + +/** Фон для скелетона */ +export const surfaceSkeletonGradientActive = 'var(--surface-skeleton-gradient-active, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradient = + 'var(--surface-skeleton-deep-gradient, linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%))'; + +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradientHover = 'var(--surface-skeleton-deep-gradient-hover, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradientActive = 'var(--surface-skeleton-deep-gradient-active, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ +export const onDarkSurfaceAccentGradientHover = 'var(--on-dark-surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ +export const onDarkSurfaceAccentGradientActive = 'var(--on-dark-surface-accent-gradient-active, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на темном фоне */ +export const onDarkSurfaceAccentGradient = + 'var(--on-dark-surface-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradient = + 'var(--on-dark-surface-skeleton-gradient, linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%))'; + +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradientHover = 'var(--on-dark-surface-skeleton-gradient-hover, #FFFFFFFF)'; + +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradientActive = 'var(--on-dark-surface-skeleton-gradient-active, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradient = + 'var(--on-dark-surface-skeleton-deep-gradient, linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%))'; + +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradientHover = 'var(--on-dark-surface-skeleton-deep-gradient-hover, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradientActive = + 'var(--on-dark-surface-skeleton-deep-gradient-active, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ +export const onLightSurfaceAccentGradientHover = 'var(--on-light-surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ +export const onLightSurfaceAccentGradientActive = 'var(--on-light-surface-accent-gradient-active, #FFFFFFFF)'; + +/** Акцентный фон поверхности/контрола с градиентом на светлом фоне */ +export const onLightSurfaceAccentGradient = + 'var(--on-light-surface-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradient = + 'var(--on-light-surface-skeleton-gradient, linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%))'; + +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradientHover = 'var(--on-light-surface-skeleton-gradient-hover, #FFFFFFFF)'; + +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradientActive = 'var(--on-light-surface-skeleton-gradient-active, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradient = + 'var(--on-light-surface-skeleton-deep-gradient, linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%))'; + +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradientHover = + 'var(--on-light-surface-skeleton-deep-gradient-hover, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradientActive = + 'var(--on-light-surface-skeleton-deep-gradient-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientHover = 'var(--inverse-surface-accent-gradient-hover, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradientActive = 'var(--inverse-surface-accent-gradient-active, #FFFFFFFF)'; + +/** Инвертированный акцентный фон поверхности/контрола с градиентом */ +export const inverseSurfaceAccentGradient = + 'var(--inverse-surface-accent-gradient, linear-gradient(45deg, #1A9E32FF 0%, #04C6C9FF 100%))'; + +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradient = + 'var(--inverse-surface-skeleton-gradient, linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%))'; + +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradientHover = 'var(--inverse-surface-skeleton-gradient-hover, #FFFFFFFF)'; + +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradientActive = 'var(--inverse-surface-skeleton-gradient-active, #FFFFFFFF)'; + +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradient = + 'var(--inverse-surface-skeleton-deep-gradient, linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%))'; -export const inverseOverlayBlur = 'var(--inverse-overlay-blur, rgba(249,249,249,0.28))'; +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradientHover = 'var(--inverse-surface-skeleton-deep-gradient-hover, #FFFFFFFF)'; -export const skeletonGradient = - 'var(--skeleton-gradient, linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% ))'; +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradientActive = + 'var(--inverse-surface-skeleton-deep-gradient-active, #FFFFFFFF)'; -export const skeletonGradientLighter = - 'var(--skeleton-gradient-lighter, linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% ))'; +/** shadow down soft s */ +export const shadowDownSoftS = 'var(--shadow-down-soft-s, 0px 4px 14px -4px #08080814,0px 1px 4px -1px #0000000A)'; + +/** shadow down soft m */ +export const shadowDownSoftM = 'var(--shadow-down-soft-m, 0px 24px 48px -8px #00000014)'; + +/** shadow down soft l */ +export const shadowDownSoftL = 'var(--shadow-down-soft-l, 0px 60px 112px -8px #00000014)'; + +/** shadow down hard s */ +export const shadowDownHardS = 'var(--shadow-down-hard-s, 0px 4px 12px -3px #08080829,0px 1px 4px -2px #00000014)'; + +/** shadow down hard m */ +export const shadowDownHardM = 'var(--shadow-down-hard-m, 0px 16px 32px -8px #0000003D)'; + +/** shadow down hard l */ +export const shadowDownHardL = 'var(--shadow-down-hard-l, 0px 60px 112px -8px #00000066)'; + +/** shadow up soft s */ +export const shadowUpSoftS = 'var(--shadow-up-soft-s, 0px -4px 14px -4px #08080814,0px -1px 4px -1px #00000008)'; + +/** shadow up soft m */ +export const shadowUpSoftM = 'var(--shadow-up-soft-m, 0px -24px 48px -8px #00000014)'; + +/** shadow up soft l */ +export const shadowUpSoftL = 'var(--shadow-up-soft-l, 0px -60px 112px -8px #00000014)'; + +/** shadow up hard s */ +export const shadowUpHardS = 'var(--shadow-up-hard-s, 0px -4px 12px -3px #08080833,0px -1px 4px -1px #00000008)'; + +/** shadow up hard m */ +export const shadowUpHardM = 'var(--shadow-up-hard-m, 0px -16px 32px -8px #0000003D)'; + +/** shadow up hard l */ +export const shadowUpHardL = 'var(--shadow-up-hard-l, 0px -60px 112px -8px #00000066)'; + +/** borderRadius xxs */ +export const borderRadiusXxs = 'var(--border-radius-xxs, 4px)'; + +/** borderRadius xs */ +export const borderRadiusXs = 'var(--border-radius-xs, 8px)'; + +/** borderRadius s */ +export const borderRadiusS = 'var(--border-radius-s, 12px)'; + +/** borderRadius m */ +export const borderRadiusM = 'var(--border-radius-m, 16px)'; + +/** borderRadius l */ +export const borderRadiusL = 'var(--border-radius-l, 20px)'; + +/** borderRadius xl */ +export const borderRadiusXl = 'var(--border-radius-xl, 24px)'; + +/** borderRadius xxl */ +export const borderRadiusXxl = 'var(--border-radius-xxl, 32px)'; + +/** typography s display-l */ +export const dsplL = { + fontFamily: 'var(--plasma-typo-dspl-l-font-family)', + fontSize: 'var(--plasma-typo-dspl-l-font-size)', + fontStyle: 'var(--plasma-typo-dspl-l-font-style)', + fontWeight: 'var(--plasma-typo-dspl-l-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-l-line-height)', +}; + +/** typography s display-l-bold */ +export const dsplLBold = { + fontFamily: 'var(--plasma-typo-dspl-l-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-l-bold-line-height)', +}; + +/** typography s display-m */ +export const dsplM = { + fontFamily: 'var(--plasma-typo-dspl-m-font-family)', + fontSize: 'var(--plasma-typo-dspl-m-font-size)', + fontStyle: 'var(--plasma-typo-dspl-m-font-style)', + fontWeight: 'var(--plasma-typo-dspl-m-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-m-line-height)', +}; + +/** typography s display-m-bold */ +export const dsplMBold = { + fontFamily: 'var(--plasma-typo-dspl-m-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-m-bold-line-height)', +}; + +/** typography s display-s */ +export const dsplS = { + fontFamily: 'var(--plasma-typo-dspl-s-font-family)', + fontSize: 'var(--plasma-typo-dspl-s-font-size)', + fontStyle: 'var(--plasma-typo-dspl-s-font-style)', + fontWeight: 'var(--plasma-typo-dspl-s-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-s-line-height)', +}; + +/** typography s display-s-bold */ +export const dsplSBold = { + fontFamily: 'var(--plasma-typo-dspl-s-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-s-bold-line-height)', +}; + +/** typography s header-h1 */ +export const h1 = { + fontFamily: 'var(--plasma-typo-h1-font-family)', + fontSize: 'var(--plasma-typo-h1-font-size)', + fontStyle: 'var(--plasma-typo-h1-font-style)', + fontWeight: 'var(--plasma-typo-h1-font-weight)', + letterSpacing: 'var(--plasma-typo-h1-letter-spacing)', + lineHeight: 'var(--plasma-typo-h1-line-height)', +}; + +/** typography s header-h1-bold */ +export const h1Bold = { + fontFamily: 'var(--plasma-typo-h1-bold-font-family)', + fontSize: 'var(--plasma-typo-h1-bold-font-size)', + fontStyle: 'var(--plasma-typo-h1-bold-font-style)', + fontWeight: 'var(--plasma-typo-h1-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h1-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h1-bold-line-height)', +}; + +/** typography s header-h2 */ +export const h2 = { + fontFamily: 'var(--plasma-typo-h2-font-family)', + fontSize: 'var(--plasma-typo-h2-font-size)', + fontStyle: 'var(--plasma-typo-h2-font-style)', + fontWeight: 'var(--plasma-typo-h2-font-weight)', + letterSpacing: 'var(--plasma-typo-h2-letter-spacing)', + lineHeight: 'var(--plasma-typo-h2-line-height)', +}; + +/** typography s header-h2-bold */ +export const h2Bold = { + fontFamily: 'var(--plasma-typo-h2-bold-font-family)', + fontSize: 'var(--plasma-typo-h2-bold-font-size)', + fontStyle: 'var(--plasma-typo-h2-bold-font-style)', + fontWeight: 'var(--plasma-typo-h2-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h2-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h2-bold-line-height)', +}; + +/** typography s header-h3 */ +export const h3 = { + fontFamily: 'var(--plasma-typo-h3-font-family)', + fontSize: 'var(--plasma-typo-h3-font-size)', + fontStyle: 'var(--plasma-typo-h3-font-style)', + fontWeight: 'var(--plasma-typo-h3-font-weight)', + letterSpacing: 'var(--plasma-typo-h3-letter-spacing)', + lineHeight: 'var(--plasma-typo-h3-line-height)', +}; + +/** typography s header-h3-bold */ +export const h3Bold = { + fontFamily: 'var(--plasma-typo-h3-bold-font-family)', + fontSize: 'var(--plasma-typo-h3-bold-font-size)', + fontStyle: 'var(--plasma-typo-h3-bold-font-style)', + fontWeight: 'var(--plasma-typo-h3-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h3-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h3-bold-line-height)', +}; + +/** typography s header-h4 */ +export const h4 = { + fontFamily: 'var(--plasma-typo-h4-font-family)', + fontSize: 'var(--plasma-typo-h4-font-size)', + fontStyle: 'var(--plasma-typo-h4-font-style)', + fontWeight: 'var(--plasma-typo-h4-font-weight)', + letterSpacing: 'var(--plasma-typo-h4-letter-spacing)', + lineHeight: 'var(--plasma-typo-h4-line-height)', +}; + +/** typography s header-h4-bold */ +export const h4Bold = { + fontFamily: 'var(--plasma-typo-h4-bold-font-family)', + fontSize: 'var(--plasma-typo-h4-bold-font-size)', + fontStyle: 'var(--plasma-typo-h4-bold-font-style)', + fontWeight: 'var(--plasma-typo-h4-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h4-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h4-bold-line-height)', +}; + +/** typography s header-h5 */ +export const h5 = { + fontFamily: 'var(--plasma-typo-h5-font-family)', + fontSize: 'var(--plasma-typo-h5-font-size)', + fontStyle: 'var(--plasma-typo-h5-font-style)', + fontWeight: 'var(--plasma-typo-h5-font-weight)', + letterSpacing: 'var(--plasma-typo-h5-letter-spacing)', + lineHeight: 'var(--plasma-typo-h5-line-height)', +}; + +/** typography s header-h5-bold */ +export const h5Bold = { + fontFamily: 'var(--plasma-typo-h5-bold-font-family)', + fontSize: 'var(--plasma-typo-h5-bold-font-size)', + fontStyle: 'var(--plasma-typo-h5-bold-font-style)', + fontWeight: 'var(--plasma-typo-h5-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h5-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h5-bold-line-height)', +}; + +/** typography s body-l */ +export const bodyL = { + fontFamily: 'var(--plasma-typo-body-l-font-family)', + fontSize: 'var(--plasma-typo-body-l-font-size)', + fontStyle: 'var(--plasma-typo-body-l-font-style)', + fontWeight: 'var(--plasma-typo-body-l-font-weight)', + letterSpacing: 'var(--plasma-typo-body-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-l-line-height)', +}; + +/** typography s body-l-bold */ +export const bodyLBold = { + fontFamily: 'var(--plasma-typo-body-l-bold-font-family)', + fontSize: 'var(--plasma-typo-body-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-l-bold-line-height)', +}; + +/** typography s body-m */ +export const bodyM = { + fontFamily: 'var(--plasma-typo-body-m-font-family)', + fontSize: 'var(--plasma-typo-body-m-font-size)', + fontStyle: 'var(--plasma-typo-body-m-font-style)', + fontWeight: 'var(--plasma-typo-body-m-font-weight)', + letterSpacing: 'var(--plasma-typo-body-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-m-line-height)', +}; + +/** typography s body-m-bold */ +export const bodyMBold = { + fontFamily: 'var(--plasma-typo-body-m-bold-font-family)', + fontSize: 'var(--plasma-typo-body-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-m-bold-line-height)', +}; + +/** typography s body-s */ +export const bodyS = { + fontFamily: 'var(--plasma-typo-body-s-font-family)', + fontSize: 'var(--plasma-typo-body-s-font-size)', + fontStyle: 'var(--plasma-typo-body-s-font-style)', + fontWeight: 'var(--plasma-typo-body-s-font-weight)', + letterSpacing: 'var(--plasma-typo-body-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-s-line-height)', +}; + +/** typography s body-s-bold */ +export const bodySBold = { + fontFamily: 'var(--plasma-typo-body-s-bold-font-family)', + fontSize: 'var(--plasma-typo-body-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-s-bold-line-height)', +}; + +/** typography s body-xs */ +export const bodyXS = { + fontFamily: 'var(--plasma-typo-body-xs-font-family)', + fontSize: 'var(--plasma-typo-body-xs-font-size)', + fontStyle: 'var(--plasma-typo-body-xs-font-style)', + fontWeight: 'var(--plasma-typo-body-xs-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xs-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xs-line-height)', +}; + +/** typography s body-xs-bold */ +export const bodyXSBold = { + fontFamily: 'var(--plasma-typo-body-xs-bold-font-family)', + fontSize: 'var(--plasma-typo-body-xs-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-xs-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-xs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xs-bold-line-height)', +}; + +/** typography s body-xxs */ +export const bodyXXS = { + fontFamily: 'var(--plasma-typo-body-xxs-font-family)', + fontSize: 'var(--plasma-typo-body-xxs-font-size)', + fontStyle: 'var(--plasma-typo-body-xxs-font-style)', + fontWeight: 'var(--plasma-typo-body-xxs-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xxs-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xxs-line-height)', +}; + +/** typography s body-xxs-bold */ +export const bodyXXSBold = { + fontFamily: 'var(--plasma-typo-body-xxs-bold-font-family)', + fontSize: 'var(--plasma-typo-body-xxs-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-xxs-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-xxs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xxs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xxs-bold-line-height)', +}; + +/** typography s text-l */ +export const textL = { + fontFamily: 'var(--plasma-typo-text-l-font-family)', + fontSize: 'var(--plasma-typo-text-l-font-size)', + fontStyle: 'var(--plasma-typo-text-l-font-style)', + fontWeight: 'var(--plasma-typo-text-l-font-weight)', + letterSpacing: 'var(--plasma-typo-text-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-l-line-height)', +}; + +/** typography s text-l-bold */ +export const textLBold = { + fontFamily: 'var(--plasma-typo-text-l-bold-font-family)', + fontSize: 'var(--plasma-typo-text-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-l-bold-line-height)', +}; + +/** typography s text-m */ +export const textM = { + fontFamily: 'var(--plasma-typo-text-m-font-family)', + fontSize: 'var(--plasma-typo-text-m-font-size)', + fontStyle: 'var(--plasma-typo-text-m-font-style)', + fontWeight: 'var(--plasma-typo-text-m-font-weight)', + letterSpacing: 'var(--plasma-typo-text-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-m-line-height)', +}; + +/** typography s text-m-bold */ +export const textMBold = { + fontFamily: 'var(--plasma-typo-text-m-bold-font-family)', + fontSize: 'var(--plasma-typo-text-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-m-bold-line-height)', +}; + +/** typography s text-s */ +export const textS = { + fontFamily: 'var(--plasma-typo-text-s-font-family)', + fontSize: 'var(--plasma-typo-text-s-font-size)', + fontStyle: 'var(--plasma-typo-text-s-font-style)', + fontWeight: 'var(--plasma-typo-text-s-font-weight)', + letterSpacing: 'var(--plasma-typo-text-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-s-line-height)', +}; + +/** typography s text-s-bold */ +export const textSBold = { + fontFamily: 'var(--plasma-typo-text-s-bold-font-family)', + fontSize: 'var(--plasma-typo-text-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-s-bold-line-height)', +}; + +/** typography s text-xs */ +export const textXS = { + fontFamily: 'var(--plasma-typo-text-xs-font-family)', + fontSize: 'var(--plasma-typo-text-xs-font-size)', + fontStyle: 'var(--plasma-typo-text-xs-font-style)', + fontWeight: 'var(--plasma-typo-text-xs-font-weight)', + letterSpacing: 'var(--plasma-typo-text-xs-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-xs-line-height)', +}; + +/** typography s text-xs-bold */ +export const textXSBold = { + fontFamily: 'var(--plasma-typo-text-xs-bold-font-family)', + fontSize: 'var(--plasma-typo-text-xs-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-xs-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-xs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-xs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-xs-bold-line-height)', +}; diff --git a/packages/themes/caldera-online-themes/src/tokens/index.ts b/packages/themes/caldera-online-themes/src/tokens/index.ts index 74ecff3195..11f2e012df 100644 --- a/packages/themes/caldera-online-themes/src/tokens/index.ts +++ b/packages/themes/caldera-online-themes/src/tokens/index.ts @@ -1,2514 +1,2786 @@ // Generated by robots, do not change this manually! /** Основной цвет текста */ -export const textPrimary = 'var(--text-primary, #080808F5)'; +export const textPrimary = 'var(--text-primary)'; /** Основной цвет текста */ -export const textPrimaryHover = 'var(--text-primary-hover, #08080893)'; +export const textPrimaryHover = 'var(--text-primary-hover)'; /** Основной цвет текста */ -export const textPrimaryActive = 'var(--text-primary-active, #080808C4)'; +export const textPrimaryActive = 'var(--text-primary-active)'; /** Вторичный цвет текста */ -export const textSecondary = 'var(--text-secondary, #0808088F)'; +export const textSecondary = 'var(--text-secondary)'; /** Вторичный цвет текста */ -export const textSecondaryHover = 'var(--text-secondary-hover, #080808FF)'; +export const textSecondaryHover = 'var(--text-secondary-hover)'; /** Вторичный цвет текста */ -export const textSecondaryActive = 'var(--text-secondary-active, #080808AB)'; +export const textSecondaryActive = 'var(--text-secondary-active)'; /** Третичный цвет текста */ -export const textTertiary = 'var(--text-tertiary, #08080847)'; +export const textTertiary = 'var(--text-tertiary)'; /** Третичный цвет текста */ -export const textTertiaryHover = 'var(--text-tertiary-hover, #080808FF)'; +export const textTertiaryHover = 'var(--text-tertiary-hover)'; /** Третичный цвет текста */ -export const textTertiaryActive = 'var(--text-tertiary-active, #08080856)'; +export const textTertiaryActive = 'var(--text-tertiary-active)'; /** Сплошной наборный текст */ -export const textParagraph = 'var(--text-paragraph, #080808CC)'; +export const textParagraph = 'var(--text-paragraph)'; /** Сплошной наборный текст */ -export const textParagraphHover = 'var(--text-paragraph-hover, #0808087A)'; +export const textParagraphHover = 'var(--text-paragraph-hover)'; /** Сплошной наборный текст */ -export const textParagraphActive = 'var(--text-paragraph-active, #080808A3)'; +export const textParagraphActive = 'var(--text-paragraph-active)'; /** Акцентный цвет */ -export const textAccent = 'var(--text-accent, #108E26)'; +export const textAccent = 'var(--text-accent)'; /** Акцентный цвет */ -export const textAccentHover = 'var(--text-accent-hover, #14B32EFF)'; +export const textAccentHover = 'var(--text-accent-hover)'; /** Акцентный цвет */ -export const textAccentActive = 'var(--text-accent-active, #0C6A1BFF)'; +export const textAccentActive = 'var(--text-accent-active)'; /** Акцентный минорный цвет */ -export const textAccentMinor = 'var(--text-accent-minor, #0A2B10)'; +export const textAccentMinor = 'var(--text-accent-minor)'; /** Акцентный минорный цвет */ -export const textAccentMinorHover = 'var(--text-accent-minor-hover, #196B28FF)'; +export const textAccentMinorHover = 'var(--text-accent-minor-hover)'; /** Акцентный минорный цвет */ -export const textAccentMinorActive = 'var(--text-accent-minor-active, #114A1CFF)'; +export const textAccentMinorActive = 'var(--text-accent-minor-active)'; /** Цвет успеха */ -export const textPositive = 'var(--text-positive, #108E26)'; +export const textPositive = 'var(--text-positive)'; /** Цвет успеха */ -export const textPositiveHover = 'var(--text-positive-hover, #14B32EFF)'; +export const textPositiveHover = 'var(--text-positive-hover)'; /** Цвет успеха */ -export const textPositiveActive = 'var(--text-positive-active, #0C6A1BFF)'; +export const textPositiveActive = 'var(--text-positive-active)'; /** Цвет предупреждения */ -export const textWarning = 'var(--text-warning, #E85702)'; +export const textWarning = 'var(--text-warning)'; /** Цвет предупреждения */ -export const textWarningHover = 'var(--text-warning-hover, #FD6B17FF)'; +export const textWarningHover = 'var(--text-warning-hover)'; /** Цвет предупреждения */ -export const textWarningActive = 'var(--text-warning-active, #C04802FF)'; +export const textWarningActive = 'var(--text-warning-active)'; /** Цвет ошибки */ -export const textNegative = 'var(--text-negative, #F31B31)'; +export const textNegative = 'var(--text-negative)'; /** Цвет ошибки */ -export const textNegativeHover = 'var(--text-negative-hover, #F54254FF)'; +export const textNegativeHover = 'var(--text-negative-hover)'; /** Цвет ошибки */ -export const textNegativeActive = 'var(--text-negative-active, #DA0B20FF)'; +export const textNegativeActive = 'var(--text-negative-active)'; /** Цвет информации */ -export const textInfo = 'var(--text-info, #0B7ECB)'; +export const textInfo = 'var(--text-info)'; /** Цвет информации */ -export const textInfoHover = 'var(--text-info-hover, #0D96F2FF)'; +export const textInfoHover = 'var(--text-info-hover)'; /** Цвет информации */ -export const textInfoActive = 'var(--text-info-active, #0966A5FF)'; +export const textInfoActive = 'var(--text-info-active)'; /** Минорный цвет успеха */ -export const textPositiveMinor = 'var(--text-positive-minor, #0A2B10)'; +export const textPositiveMinor = 'var(--text-positive-minor)'; /** Минорный цвет успеха */ -export const textPositiveMinorHover = 'var(--text-positive-minor-hover, #196B28FF)'; +export const textPositiveMinorHover = 'var(--text-positive-minor-hover)'; /** Минорный цвет успеха */ -export const textPositiveMinorActive = 'var(--text-positive-minor-active, #114A1CFF)'; +export const textPositiveMinorActive = 'var(--text-positive-minor-active)'; /** Минорный цвет предупреждения */ -export const textWarningMinor = 'var(--text-warning-minor, #3D1D0A)'; +export const textWarningMinor = 'var(--text-warning-minor)'; /** Минорный цвет предупреждения */ -export const textWarningMinorHover = 'var(--text-warning-minor-hover, #843E15FF)'; +export const textWarningMinorHover = 'var(--text-warning-minor-hover)'; /** Минорный цвет предупреждения */ -export const textWarningMinorActive = 'var(--text-warning-minor-active, #602D10FF)'; +export const textWarningMinorActive = 'var(--text-warning-minor-active)'; /** Минорный цвет ошибки */ -export const textNegativeMinor = 'var(--text-negative-minor, #4A0D13)'; +export const textNegativeMinor = 'var(--text-negative-minor)'; /** Минорный цвет ошибки */ -export const textNegativeMinorHover = 'var(--text-negative-minor-hover, #8F1925FF)'; +export const textNegativeMinorHover = 'var(--text-negative-minor-hover)'; /** Минорный цвет ошибки */ -export const textNegativeMinorActive = 'var(--text-negative-minor-active, #6C131CFF)'; +export const textNegativeMinorActive = 'var(--text-negative-minor-active)'; /** Минорный цвет информации */ -export const textInfoMinor = 'var(--text-info-minor, #0C283B)'; +export const textInfoMinor = 'var(--text-info-minor)'; /** Минорный цвет информации */ -export const textInfoMinorHover = 'var(--text-info-minor-hover, #1A577FFF)'; +export const textInfoMinorHover = 'var(--text-info-minor-hover)'; /** Минорный цвет информации */ -export const textInfoMinorActive = 'var(--text-info-minor-active, #13405DFF)'; +export const textInfoMinorActive = 'var(--text-info-minor-active)'; /** Основной цвет текста на темном фоне */ -export const onDarkTextPrimary = 'var(--on-dark-text-primary, rgba(255, 255, 255, 0.96))'; +export const onDarkTextPrimary = 'var(--on-dark-text-primary)'; /** Основной цвет текста на темном фоне */ -export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover, #FFFFFF93)'; +export const onDarkTextPrimaryHover = 'var(--on-dark-text-primary-hover)'; /** Основной цвет текста на темном фоне */ -export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active, #FFFFFFC4)'; +export const onDarkTextPrimaryActive = 'var(--on-dark-text-primary-active)'; /** Вторичный цвет текста на темном фоне */ -export const onDarkTextSecondary = 'var(--on-dark-text-secondary, rgba(255, 255, 255, 0.56))'; +export const onDarkTextSecondary = 'var(--on-dark-text-secondary)'; /** Вторичный цвет текста на темном фоне */ -export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover, #FFFFFFFF)'; +export const onDarkTextSecondaryHover = 'var(--on-dark-text-secondary-hover)'; /** Вторичный цвет текста на темном фоне */ -export const onDarkTextSecondaryActive = 'var(--on-dark-text-secondary-active, #FFFFFFAB)'; +export const onDarkTextSecondaryActive = 'var(--on-dark-text-secondary-active)'; /** Третичный цвет текста на темном фоне */ -export const onDarkTextTertiary = 'var(--on-dark-text-tertiary, rgba(255, 255, 255, 0.28))'; +export const onDarkTextTertiary = 'var(--on-dark-text-tertiary)'; /** Третичный цвет текста на темном фоне */ -export const onDarkTextTertiaryHover = 'var(--on-dark-text-tertiary-hover, #FFFFFFFF)'; +export const onDarkTextTertiaryHover = 'var(--on-dark-text-tertiary-hover)'; /** Третичный цвет текста на темном фоне */ -export const onDarkTextTertiaryActive = 'var(--on-dark-text-tertiary-active, #FFFFFF56)'; +export const onDarkTextTertiaryActive = 'var(--on-dark-text-tertiary-active)'; /** Сплошной наборный текст на темном фоне */ -export const onDarkTextParagraph = 'var(--on-dark-text-paragraph, rgba(255, 255, 255, 0.8))'; +export const onDarkTextParagraph = 'var(--on-dark-text-paragraph)'; /** Сплошной наборный текст на темном фоне */ -export const onDarkTextParagraphHover = 'var(--on-dark-text-paragraph-hover, #FFFFFF7A)'; +export const onDarkTextParagraphHover = 'var(--on-dark-text-paragraph-hover)'; /** Сплошной наборный текст на темном фоне */ -export const onDarkTextParagraphActive = 'var(--on-dark-text-paragraph-active, #FFFFFFA3)'; +export const onDarkTextParagraphActive = 'var(--on-dark-text-paragraph-active)'; /** Акцентный цвет на темном фоне */ -export const onDarkTextAccent = 'var(--on-dark-text-accent, #1A9E32)'; +export const onDarkTextAccent = 'var(--on-dark-text-accent)'; /** Акцентный цвет на темном фоне */ -export const onDarkTextAccentHover = 'var(--on-dark-text-accent-hover, #1FC13DFF)'; +export const onDarkTextAccentHover = 'var(--on-dark-text-accent-hover)'; /** Акцентный цвет на темном фоне */ -export const onDarkTextAccentActive = 'var(--on-dark-text-accent-active, #147B27FF)'; +export const onDarkTextAccentActive = 'var(--on-dark-text-accent-active)'; /** Акцентный минорный цвет на темном фоне */ -export const onDarkTextAccentMinor = 'var(--on-dark-text-accent-minor, #9EFAAF)'; +export const onDarkTextAccentMinor = 'var(--on-dark-text-accent-minor)'; /** Акцентный минорный цвет на темном фоне */ -export const onDarkTextAccentMinorHover = 'var(--on-dark-text-accent-minor-hover, #C5FCCFFF)'; +export const onDarkTextAccentMinorHover = 'var(--on-dark-text-accent-minor-hover)'; /** Акцентный минорный цвет на темном фоне */ -export const onDarkTextAccentMinorActive = 'var(--on-dark-text-accent-minor-active, #77F88FFF)'; +export const onDarkTextAccentMinorActive = 'var(--on-dark-text-accent-minor-active)'; /** Цвет успеха на темном фоне */ -export const onDarkTextPositive = 'var(--on-dark-text-positive, #1A9E32)'; +export const onDarkTextPositive = 'var(--on-dark-text-positive)'; /** Цвет успеха на темном фоне */ -export const onDarkTextPositiveHover = 'var(--on-dark-text-positive-hover, #1FC13DFF)'; +export const onDarkTextPositiveHover = 'var(--on-dark-text-positive-hover)'; /** Цвет успеха на темном фоне */ -export const onDarkTextPositiveActive = 'var(--on-dark-text-positive-active, #147B27FF)'; +export const onDarkTextPositiveActive = 'var(--on-dark-text-positive-active)'; /** Цвет предупреждения на темном фоне */ -export const onDarkTextWarning = 'var(--on-dark-text-warning, #FA5F05)'; +export const onDarkTextWarning = 'var(--on-dark-text-warning)'; /** Цвет предупреждения на темном фоне */ -export const onDarkTextWarningHover = 'var(--on-dark-text-warning-hover, #FB782DFF)'; +export const onDarkTextWarningHover = 'var(--on-dark-text-warning-hover)'; /** Цвет предупреждения на темном фоне */ -export const onDarkTextWarningActive = 'var(--on-dark-text-warning-active, #D25004FF)'; +export const onDarkTextWarningActive = 'var(--on-dark-text-warning-active)'; /** Цвет ошибки на темном фоне */ -export const onDarkTextNegative = 'var(--on-dark-text-negative, #FF293E)'; +export const onDarkTextNegative = 'var(--on-dark-text-negative)'; /** Цвет ошибки на темном фоне */ -export const onDarkTextNegativeHover = 'var(--on-dark-text-negative-hover, #FF5263FF)'; +export const onDarkTextNegativeHover = 'var(--on-dark-text-negative-hover)'; /** Цвет ошибки на темном фоне */ -export const onDarkTextNegativeActive = 'var(--on-dark-text-negative-active, #FF001AFF)'; +export const onDarkTextNegativeActive = 'var(--on-dark-text-negative-active)'; /** Цвет информации на темном фоне */ -export const onDarkTextInfo = 'var(--on-dark-text-info, #118CDF)'; +export const onDarkTextInfo = 'var(--on-dark-text-info)'; /** Цвет информации на темном фоне */ -export const onDarkTextInfoHover = 'var(--on-dark-text-info-hover, #2AA0EFFF)'; +export const onDarkTextInfoHover = 'var(--on-dark-text-info-hover)'; /** Цвет информации на темном фоне */ -export const onDarkTextInfoActive = 'var(--on-dark-text-info-active, #0E75B9FF)'; +export const onDarkTextInfoActive = 'var(--on-dark-text-info-active)'; /** Минорный цвет успеха на темном фоне */ -export const onDarkTextPositiveMinor = 'var(--on-dark-text-positive-minor, #9EFAAF)'; +export const onDarkTextPositiveMinor = 'var(--on-dark-text-positive-minor)'; /** Минорный цвет успеха на темном фоне */ -export const onDarkTextPositiveMinorHover = 'var(--on-dark-text-positive-minor-hover, #C5FCCFFF)'; +export const onDarkTextPositiveMinorHover = 'var(--on-dark-text-positive-minor-hover)'; /** Минорный цвет успеха на темном фоне */ -export const onDarkTextPositiveMinorActive = 'var(--on-dark-text-positive-minor-active, #77F88FFF)'; +export const onDarkTextPositiveMinorActive = 'var(--on-dark-text-positive-minor-active)'; /** Минорный цвет предупреждения на темном фоне */ -export const onDarkTextWarningMinor = 'var(--on-dark-text-warning-minor, #FEE2D2)'; +export const onDarkTextWarningMinor = 'var(--on-dark-text-warning-minor)'; /** Минорный цвет предупреждения на темном фоне */ -export const onDarkTextWarningMinorHover = 'var(--on-dark-text-warning-minor-hover, #FFFCFAFF)'; +export const onDarkTextWarningMinorHover = 'var(--on-dark-text-warning-minor-hover)'; /** Минорный цвет предупреждения на темном фоне */ -export const onDarkTextWarningMinorActive = 'var(--on-dark-text-warning-minor-active, #FDC9AAFF)'; +export const onDarkTextWarningMinorActive = 'var(--on-dark-text-warning-minor-active)'; /** Минорный цвет ошибки на темном фоне */ -export const onDarkTextNegativeMinor = 'var(--on-dark-text-negative-minor, #FFE0E3)'; +export const onDarkTextNegativeMinor = 'var(--on-dark-text-negative-minor)'; /** Минорный цвет ошибки на темном фоне */ -export const onDarkTextNegativeMinorHover = 'var(--on-dark-text-negative-minor-hover, #FFFFFFFF)'; +export const onDarkTextNegativeMinorHover = 'var(--on-dark-text-negative-minor-hover)'; /** Минорный цвет ошибки на темном фоне */ -export const onDarkTextNegativeMinorActive = 'var(--on-dark-text-negative-minor-active, #FFB8BFFF)'; +export const onDarkTextNegativeMinorActive = 'var(--on-dark-text-negative-minor-active)'; /** Минорный цвет информации на темном фоне */ -export const onDarkTextInfoMinor = 'var(--on-dark-text-info-minor, #CFECFF)'; +export const onDarkTextInfoMinor = 'var(--on-dark-text-info-minor)'; /** Минорный цвет информации на темном фоне */ -export const onDarkTextInfoMinorHover = 'var(--on-dark-text-info-minor-hover, #FAFDFFFF)'; +export const onDarkTextInfoMinorHover = 'var(--on-dark-text-info-minor-hover)'; /** Минорный цвет информации на темном фоне */ -export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active, #A8DCFFFF)'; +export const onDarkTextInfoMinorActive = 'var(--on-dark-text-info-minor-active)'; /** Основной цвет текста на светлом фоне */ -export const onLightTextPrimary = 'var(--on-light-text-primary, #080808F5)'; +export const onLightTextPrimary = 'var(--on-light-text-primary)'; /** Основной цвет текста на светлом фоне */ -export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover, #08080893)'; +export const onLightTextPrimaryHover = 'var(--on-light-text-primary-hover)'; /** Основной цвет текста на светлом фоне */ -export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active, #080808C4)'; +export const onLightTextPrimaryActive = 'var(--on-light-text-primary-active)'; /** Вторичный цвет текста на светлом фоне */ -export const onLightTextSecondary = 'var(--on-light-text-secondary, #0808088F)'; +export const onLightTextSecondary = 'var(--on-light-text-secondary)'; /** Вторичный цвет текста на светлом фоне */ -export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover, #080808FF)'; +export const onLightTextSecondaryHover = 'var(--on-light-text-secondary-hover)'; /** Вторичный цвет текста на светлом фоне */ -export const onLightTextSecondaryActive = 'var(--on-light-text-secondary-active, #080808AB)'; +export const onLightTextSecondaryActive = 'var(--on-light-text-secondary-active)'; /** Третичный цвет текста на светлом фоне */ -export const onLightTextTertiary = 'var(--on-light-text-tertiary, #08080847)'; +export const onLightTextTertiary = 'var(--on-light-text-tertiary)'; /** Третичный цвет текста на светлом фоне */ -export const onLightTextTertiaryHover = 'var(--on-light-text-tertiary-hover, #080808FF)'; +export const onLightTextTertiaryHover = 'var(--on-light-text-tertiary-hover)'; /** Третичный цвет текста на светлом фоне */ -export const onLightTextTertiaryActive = 'var(--on-light-text-tertiary-active, #08080856)'; +export const onLightTextTertiaryActive = 'var(--on-light-text-tertiary-active)'; /** Сплошной наборный текст на светлом фоне */ -export const onLightTextParagraph = 'var(--on-light-text-paragraph, #080808CC)'; +export const onLightTextParagraph = 'var(--on-light-text-paragraph)'; /** Сплошной наборный текст на светлом фоне */ -export const onLightTextParagraphHover = 'var(--on-light-text-paragraph-hover, #0808087A)'; +export const onLightTextParagraphHover = 'var(--on-light-text-paragraph-hover)'; /** Сплошной наборный текст на светлом фоне */ -export const onLightTextParagraphActive = 'var(--on-light-text-paragraph-active, #080808A3)'; +export const onLightTextParagraphActive = 'var(--on-light-text-paragraph-active)'; /** Акцентный цвет на светлом фоне */ -export const onLightTextAccent = 'var(--on-light-text-accent, #108E26)'; +export const onLightTextAccent = 'var(--on-light-text-accent)'; /** Акцентный цвет на светлом фоне */ -export const onLightTextAccentHover = 'var(--on-light-text-accent-hover, #14B32EFF)'; +export const onLightTextAccentHover = 'var(--on-light-text-accent-hover)'; /** Акцентный цвет на светлом фоне */ -export const onLightTextAccentActive = 'var(--on-light-text-accent-active, #0C6A1BFF)'; +export const onLightTextAccentActive = 'var(--on-light-text-accent-active)'; /** Акцентный минорный цвет на светлом фоне */ -export const onLightTextAccentMinor = 'var(--on-light-text-accent-minor, #0A2B10)'; +export const onLightTextAccentMinor = 'var(--on-light-text-accent-minor)'; /** Акцентный минорный цвет на светлом фоне */ -export const onLightTextAccentMinorHover = 'var(--on-light-text-accent-minor-hover, #196B28FF)'; +export const onLightTextAccentMinorHover = 'var(--on-light-text-accent-minor-hover)'; /** Акцентный минорный цвет на светлом фоне */ -export const onLightTextAccentMinorActive = 'var(--on-light-text-accent-minor-active, #114A1CFF)'; +export const onLightTextAccentMinorActive = 'var(--on-light-text-accent-minor-active)'; /** Цвет успеха на светлом фоне */ -export const onLightTextPositive = 'var(--on-light-text-positive, #108E26)'; +export const onLightTextPositive = 'var(--on-light-text-positive)'; /** Цвет успеха на светлом фоне */ -export const onLightTextPositiveHover = 'var(--on-light-text-positive-hover, #14B32EFF)'; +export const onLightTextPositiveHover = 'var(--on-light-text-positive-hover)'; /** Цвет успеха на светлом фоне */ -export const onLightTextPositiveActive = 'var(--on-light-text-positive-active, #0C6A1BFF)'; +export const onLightTextPositiveActive = 'var(--on-light-text-positive-active)'; /** Цвет предупреждения на светлом фоне */ -export const onLightTextWarning = 'var(--on-light-text-warning, #E85702)'; +export const onLightTextWarning = 'var(--on-light-text-warning)'; /** Цвет предупреждения на светлом фоне */ -export const onLightTextWarningHover = 'var(--on-light-text-warning-hover, #FD6B17FF)'; +export const onLightTextWarningHover = 'var(--on-light-text-warning-hover)'; /** Цвет предупреждения на светлом фоне */ -export const onLightTextWarningActive = 'var(--on-light-text-warning-active, #C04802FF)'; +export const onLightTextWarningActive = 'var(--on-light-text-warning-active)'; /** Цвет ошибки на светлом фоне */ -export const onLightTextNegative = 'var(--on-light-text-negative, #F31B31)'; +export const onLightTextNegative = 'var(--on-light-text-negative)'; /** Цвет ошибки на светлом фоне */ -export const onLightTextNegativeHover = 'var(--on-light-text-negative-hover, #F54254FF)'; +export const onLightTextNegativeHover = 'var(--on-light-text-negative-hover)'; /** Цвет ошибки на светлом фоне */ -export const onLightTextNegativeActive = 'var(--on-light-text-negative-active, #DA0B20FF)'; +export const onLightTextNegativeActive = 'var(--on-light-text-negative-active)'; /** Цвет информации на светлом фоне */ -export const onLightTextInfo = 'var(--on-light-text-info, #0B7ECB)'; +export const onLightTextInfo = 'var(--on-light-text-info)'; /** Цвет информации на светлом фоне */ -export const onLightTextInfoHover = 'var(--on-light-text-info-hover, #0D96F2FF)'; +export const onLightTextInfoHover = 'var(--on-light-text-info-hover)'; /** Цвет информации на светлом фоне */ -export const onLightTextInfoActive = 'var(--on-light-text-info-active, #0966A5FF)'; +export const onLightTextInfoActive = 'var(--on-light-text-info-active)'; /** Минорный цвет успеха на светлом фоне */ -export const onLightTextPositiveMinor = 'var(--on-light-text-positive-minor, #0A2B10)'; +export const onLightTextPositiveMinor = 'var(--on-light-text-positive-minor)'; /** Минорный цвет успеха на светлом фоне */ -export const onLightTextPositiveMinorHover = 'var(--on-light-text-positive-minor-hover, #196B28FF)'; +export const onLightTextPositiveMinorHover = 'var(--on-light-text-positive-minor-hover)'; /** Минорный цвет успеха на светлом фоне */ -export const onLightTextPositiveMinorActive = 'var(--on-light-text-positive-minor-active, #114A1CFF)'; +export const onLightTextPositiveMinorActive = 'var(--on-light-text-positive-minor-active)'; /** Минорный цвет предупреждения на светлом фоне */ -export const onLightTextWarningMinor = 'var(--on-light-text-warning-minor, #3D1D0A)'; +export const onLightTextWarningMinor = 'var(--on-light-text-warning-minor)'; /** Минорный цвет предупреждения на светлом фоне */ -export const onLightTextWarningMinorHover = 'var(--on-light-text-warning-minor-hover, #843E15FF)'; +export const onLightTextWarningMinorHover = 'var(--on-light-text-warning-minor-hover)'; /** Минорный цвет предупреждения на светлом фоне */ -export const onLightTextWarningMinorActive = 'var(--on-light-text-warning-minor-active, #602D10FF)'; +export const onLightTextWarningMinorActive = 'var(--on-light-text-warning-minor-active)'; /** Минорный цвет ошибки на светлом фоне */ -export const onLightTextNegativeMinor = 'var(--on-light-text-negative-minor, #4A0D13)'; +export const onLightTextNegativeMinor = 'var(--on-light-text-negative-minor)'; /** Минорный цвет ошибки на светлом фоне */ -export const onLightTextNegativeMinorHover = 'var(--on-light-text-negative-minor-hover, #8F1925FF)'; +export const onLightTextNegativeMinorHover = 'var(--on-light-text-negative-minor-hover)'; /** Минорный цвет ошибки на светлом фоне */ -export const onLightTextNegativeMinorActive = 'var(--on-light-text-negative-minor-active, #6C131CFF)'; +export const onLightTextNegativeMinorActive = 'var(--on-light-text-negative-minor-active)'; /** Минорный цвет информации на светлом фоне */ -export const onLightTextInfoMinor = 'var(--on-light-text-info-minor, #0C283B)'; +export const onLightTextInfoMinor = 'var(--on-light-text-info-minor)'; /** Минорный цвет информации на светлом фоне */ -export const onLightTextInfoMinorHover = 'var(--on-light-text-info-minor-hover, #1A577FFF)'; +export const onLightTextInfoMinorHover = 'var(--on-light-text-info-minor-hover)'; /** Минорный цвет информации на светлом фоне */ -export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active, #13405DFF)'; +export const onLightTextInfoMinorActive = 'var(--on-light-text-info-minor-active)'; /** Инвертированный основной цвет текста */ -export const inverseTextPrimary = 'var(--inverse-text-primary, rgba(255, 255, 255, 0.96))'; +export const inverseTextPrimary = 'var(--inverse-text-primary)'; /** Инвертированный основной цвет текста */ -export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover, #FFFFFF93)'; +export const inverseTextPrimaryHover = 'var(--inverse-text-primary-hover)'; /** Инвертированный основной цвет текста */ -export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active, #FFFFFFC4)'; +export const inverseTextPrimaryActive = 'var(--inverse-text-primary-active)'; /** Инвертированный вторичный цвет текста */ -export const inverseTextSecondary = 'var(--inverse-text-secondary, rgba(255, 255, 255, 0.56))'; +export const inverseTextSecondary = 'var(--inverse-text-secondary)'; /** Инвертированный вторичный цвет текста */ -export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover, #FFFFFFFF)'; +export const inverseTextSecondaryHover = 'var(--inverse-text-secondary-hover)'; /** Инвертированный вторичный цвет текста */ -export const inverseTextSecondaryActive = 'var(--inverse-text-secondary-active, #FFFFFFAB)'; +export const inverseTextSecondaryActive = 'var(--inverse-text-secondary-active)'; /** Инвертированный третичный цвет текста */ -export const inverseTextTertiary = 'var(--inverse-text-tertiary, rgba(255, 255, 255, 0.28))'; +export const inverseTextTertiary = 'var(--inverse-text-tertiary)'; /** Инвертированный третичный цвет текста */ -export const inverseTextTertiaryHover = 'var(--inverse-text-tertiary-hover, #FFFFFFFF)'; +export const inverseTextTertiaryHover = 'var(--inverse-text-tertiary-hover)'; /** Инвертированный третичный цвет текста */ -export const inverseTextTertiaryActive = 'var(--inverse-text-tertiary-active, #FFFFFF56)'; +export const inverseTextTertiaryActive = 'var(--inverse-text-tertiary-active)'; /** Инвертированный сплошной наборный текст */ -export const inverseTextParagraph = 'var(--inverse-text-paragraph, rgba(255, 255, 255, 0.8))'; +export const inverseTextParagraph = 'var(--inverse-text-paragraph)'; /** Инвертированный сплошной наборный текст */ -export const inverseTextParagraphHover = 'var(--inverse-text-paragraph-hover, #FFFFFF7A)'; +export const inverseTextParagraphHover = 'var(--inverse-text-paragraph-hover)'; /** Инвертированный сплошной наборный текст */ -export const inverseTextParagraphActive = 'var(--inverse-text-paragraph-active, #FFFFFFA3)'; +export const inverseTextParagraphActive = 'var(--inverse-text-paragraph-active)'; /** Инвертированный акцентный цвет */ -export const inverseTextAccent = 'var(--inverse-text-accent, #1A9E32)'; +export const inverseTextAccent = 'var(--inverse-text-accent)'; /** Инвертированный акцентный цвет */ -export const inverseTextAccentHover = 'var(--inverse-text-accent-hover, #1FC13DFF)'; +export const inverseTextAccentHover = 'var(--inverse-text-accent-hover)'; /** Инвертированный акцентный цвет */ -export const inverseTextAccentActive = 'var(--inverse-text-accent-active, #147B27FF)'; +export const inverseTextAccentActive = 'var(--inverse-text-accent-active)'; /** Инвертированный минорный акцентный цвет */ -export const inverseTextAccentMinor = 'var(--inverse-text-accent-minor, #9EFAAF)'; +export const inverseTextAccentMinor = 'var(--inverse-text-accent-minor)'; /** Инвертированный минорный акцентный цвет */ -export const inverseTextAccentMinorHover = 'var(--inverse-text-accent-minor-hover, #C5FCCFFF)'; +export const inverseTextAccentMinorHover = 'var(--inverse-text-accent-minor-hover)'; /** Инвертированный минорный акцентный цвет */ -export const inverseTextAccentMinorActive = 'var(--inverse-text-accent-minor-active, #77F88FFF)'; +export const inverseTextAccentMinorActive = 'var(--inverse-text-accent-minor-active)'; /** Инвертированный цвет успеха */ -export const inverseTextPositive = 'var(--inverse-text-positive, #1A9E32)'; +export const inverseTextPositive = 'var(--inverse-text-positive)'; /** Инвертированный цвет успеха */ -export const inverseTextPositiveHover = 'var(--inverse-text-positive-hover, #1FC13DFF)'; +export const inverseTextPositiveHover = 'var(--inverse-text-positive-hover)'; /** Инвертированный цвет успеха */ -export const inverseTextPositiveActive = 'var(--inverse-text-positive-active, #147B27FF)'; +export const inverseTextPositiveActive = 'var(--inverse-text-positive-active)'; /** Инвертированный цвет предупреждения */ -export const inverseTextWarning = 'var(--inverse-text-warning, #FA5F05)'; +export const inverseTextWarning = 'var(--inverse-text-warning)'; /** Инвертированный цвет предупреждения */ -export const inverseTextWarningHover = 'var(--inverse-text-warning-hover, #FB782DFF)'; +export const inverseTextWarningHover = 'var(--inverse-text-warning-hover)'; /** Инвертированный цвет предупреждения */ -export const inverseTextWarningActive = 'var(--inverse-text-warning-active, #D25004FF)'; +export const inverseTextWarningActive = 'var(--inverse-text-warning-active)'; /** Инвертированный цвет ошибки */ -export const inverseTextNegative = 'var(--inverse-text-negative, #FF293E)'; +export const inverseTextNegative = 'var(--inverse-text-negative)'; /** Инвертированный цвет ошибки */ -export const inverseTextNegativeHover = 'var(--inverse-text-negative-hover, #FF5263FF)'; +export const inverseTextNegativeHover = 'var(--inverse-text-negative-hover)'; /** Инвертированный цвет ошибки */ -export const inverseTextNegativeActive = 'var(--inverse-text-negative-active, #FF001AFF)'; +export const inverseTextNegativeActive = 'var(--inverse-text-negative-active)'; /** Инвертированный цвет информации */ -export const inverseTextInfo = 'var(--inverse-text-info, #118CDF)'; +export const inverseTextInfo = 'var(--inverse-text-info)'; /** Инвертированный цвет информации */ -export const inverseTextInfoHover = 'var(--inverse-text-info-hover, #2AA0EFFF)'; +export const inverseTextInfoHover = 'var(--inverse-text-info-hover)'; /** Инвертированный цвет информации */ -export const inverseTextInfoActive = 'var(--inverse-text-info-active, #0E75B9FF)'; +export const inverseTextInfoActive = 'var(--inverse-text-info-active)'; /** Инвертированный минорный цвет успеха */ -export const inverseTextPositiveMinor = 'var(--inverse-text-positive-minor, #9EFAAF)'; +export const inverseTextPositiveMinor = 'var(--inverse-text-positive-minor)'; /** Инвертированный минорный цвет успеха */ -export const inverseTextPositiveMinorHover = 'var(--inverse-text-positive-minor-hover, #C5FCCFFF)'; +export const inverseTextPositiveMinorHover = 'var(--inverse-text-positive-minor-hover)'; /** Инвертированный минорный цвет успеха */ -export const inverseTextPositiveMinorActive = 'var(--inverse-text-positive-minor-active, #77F88FFF)'; +export const inverseTextPositiveMinorActive = 'var(--inverse-text-positive-minor-active)'; /** Инвертированный минорный цвет предупреждения */ -export const inverseTextWarningMinor = 'var(--inverse-text-warning-minor, #FEE2D2)'; +export const inverseTextWarningMinor = 'var(--inverse-text-warning-minor)'; /** Инвертированный минорный цвет предупреждения */ -export const inverseTextWarningMinorHover = 'var(--inverse-text-warning-minor-hover, #FFFCFAFF)'; +export const inverseTextWarningMinorHover = 'var(--inverse-text-warning-minor-hover)'; /** Инвертированный минорный цвет предупреждения */ -export const inverseTextWarningMinorActive = 'var(--inverse-text-warning-minor-active, #FDC9AAFF)'; +export const inverseTextWarningMinorActive = 'var(--inverse-text-warning-minor-active)'; /** Инвертированный минорный цвет ошибки */ -export const inverseTextNegativeMinor = 'var(--inverse-text-negative-minor, #FFE0E3)'; +export const inverseTextNegativeMinor = 'var(--inverse-text-negative-minor)'; /** Инвертированный минорный цвет ошибки */ -export const inverseTextNegativeMinorHover = 'var(--inverse-text-negative-minor-hover, #FFFFFFFF)'; +export const inverseTextNegativeMinorHover = 'var(--inverse-text-negative-minor-hover)'; /** Инвертированный минорный цвет ошибки */ -export const inverseTextNegativeMinorActive = 'var(--inverse-text-negative-minor-active, #FFB8BFFF)'; +export const inverseTextNegativeMinorActive = 'var(--inverse-text-negative-minor-active)'; /** Инвертированный минорный цвет информации */ -export const inverseTextInfoMinor = 'var(--inverse-text-info-minor, #CFECFF)'; +export const inverseTextInfoMinor = 'var(--inverse-text-info-minor)'; /** Инвертированный минорный цвет информации */ -export const inverseTextInfoMinorHover = 'var(--inverse-text-info-minor-hover, #FAFDFFFF)'; +export const inverseTextInfoMinorHover = 'var(--inverse-text-info-minor-hover)'; /** Инвертированный минорный цвет информации */ -export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active, #A8DCFFFF)'; +export const inverseTextInfoMinorActive = 'var(--inverse-text-info-minor-active)'; /** Основной непрозрачный фон поверхности/контрола */ -export const surfaceSolidPrimary = 'var(--surface-solid-primary, #F5F5F5)'; +export const surfaceSolidPrimary = 'var(--surface-solid-primary)'; /** Основной непрозрачный фон поверхности/контрола */ -export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover, #FAFAFAFF)'; +export const surfaceSolidPrimaryHover = 'var(--surface-solid-primary-hover)'; /** Основной непрозрачный фон поверхности/контрола */ -export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active, #F0F0F0FF)'; +export const surfaceSolidPrimaryActive = 'var(--surface-solid-primary-active)'; /** Вторичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidSecondary = 'var(--surface-solid-secondary, #ECECEC)'; +export const surfaceSolidSecondary = 'var(--surface-solid-secondary)'; /** Вторичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover, #F7F7F7FF)'; +export const surfaceSolidSecondaryHover = 'var(--surface-solid-secondary-hover)'; /** Вторичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidSecondaryActive = 'var(--surface-solid-secondary-active, #E8E8E8FF)'; +export const surfaceSolidSecondaryActive = 'var(--surface-solid-secondary-active)'; /** Третичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidTertiary = 'var(--surface-solid-tertiary, #DDDDDD)'; +export const surfaceSolidTertiary = 'var(--surface-solid-tertiary)'; /** Третичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidTertiaryHover = 'var(--surface-solid-tertiary-hover, #EDEDEDFF)'; +export const surfaceSolidTertiaryHover = 'var(--surface-solid-tertiary-hover)'; /** Третичный непрозрачный фон поверхности/контрола */ -export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active, #D4D4D4FF)'; +export const surfaceSolidTertiaryActive = 'var(--surface-solid-tertiary-active)'; /** Основной фон для карточек */ -export const surfaceSolidCard = 'var(--surface-solid-card, #FFFFFF)'; +export const surfaceSolidCard = 'var(--surface-solid-card)'; /** Основной фон для карточек */ -export const surfaceSolidCardHover = 'var(--surface-solid-card-hover, #FFFFFFFF)'; +export const surfaceSolidCardHover = 'var(--surface-solid-card-hover)'; /** Основной фон для карточек */ -export const surfaceSolidCardActive = 'var(--surface-solid-card-active, #FFFFFFFF)'; +export const surfaceSolidCardActive = 'var(--surface-solid-card-active)'; /** Непрозрачный фон поверхности/контрола по умолчанию */ -export const surfaceSolidDefault = 'var(--surface-solid-default, #080808)'; +export const surfaceSolidDefault = 'var(--surface-solid-default)'; /** Непрозрачный фон поверхности/контрола по умолчанию */ -export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover, #262626FF)'; +export const surfaceSolidDefaultHover = 'var(--surface-solid-default-hover)'; /** Непрозрачный фон поверхности/контрола по умолчанию */ -export const surfaceSolidDefaultActive = 'var(--surface-solid-default-active, #030303FF)'; +export const surfaceSolidDefaultActive = 'var(--surface-solid-default-active)'; /** Основной прозрачный фон поверхности/контрола */ -export const surfaceTransparentPrimary = 'var(--surface-transparent-primary, #08080808)'; +export const surfaceTransparentPrimary = 'var(--surface-transparent-primary)'; /** Основной прозрачный фон поверхности/контрола */ -export const surfaceTransparentPrimaryHover = 'var(--surface-transparent-primary-hover, #08080803)'; +export const surfaceTransparentPrimaryHover = 'var(--surface-transparent-primary-hover)'; /** Основной прозрачный фон поверхности/контрола */ -export const surfaceTransparentPrimaryActive = 'var(--surface-transparent-primary-active, #0808080D)'; +export const surfaceTransparentPrimaryActive = 'var(--surface-transparent-primary-active)'; /** Вторичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentSecondary = 'var(--surface-transparent-secondary, #0808080F)'; +export const surfaceTransparentSecondary = 'var(--surface-transparent-secondary)'; /** Вторичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentSecondaryHover = 'var(--surface-transparent-secondary-hover, #08080805)'; +export const surfaceTransparentSecondaryHover = 'var(--surface-transparent-secondary-hover)'; /** Вторичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentSecondaryActive = 'var(--surface-transparent-secondary-active, #0808081A)'; +export const surfaceTransparentSecondaryActive = 'var(--surface-transparent-secondary-active)'; /** Третичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentTertiary = 'var(--surface-transparent-tertiary, #0808081F)'; +export const surfaceTransparentTertiary = 'var(--surface-transparent-tertiary)'; /** Третичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentTertiaryHover = 'var(--surface-transparent-tertiary-hover, #0808080A)'; +export const surfaceTransparentTertiaryHover = 'var(--surface-transparent-tertiary-hover)'; /** Третичный прозрачный фон поверхности/контрола */ -export const surfaceTransparentTertiaryActive = 'var(--surface-transparent-tertiary-active, #08080829)'; +export const surfaceTransparentTertiaryActive = 'var(--surface-transparent-tertiary-active)'; /** Глубокий прозрачный фон поверхности/контрола */ -export const surfaceTransparentDeep = 'var(--surface-transparent-deep, #080808A3)'; +export const surfaceTransparentDeep = 'var(--surface-transparent-deep)'; /** Глубокий прозрачный фон поверхности/контрола */ -export const surfaceTransparentDeepHover = 'var(--surface-transparent-deep-hover, #0808088F)'; +export const surfaceTransparentDeepHover = 'var(--surface-transparent-deep-hover)'; /** Глубокий прозрачный фон поверхности/контрола */ -export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-active, #080808AD)'; +export const surfaceTransparentDeepActive = 'var(--surface-transparent-deep-active)'; /** Прозрачный фон для карточек */ -export const surfaceTransparentCard = 'var(--surface-transparent-card, #0808080F)'; +export const surfaceTransparentCard = 'var(--surface-transparent-card)'; /** Прозрачный фон для карточек */ -export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover, #08080805)'; +export const surfaceTransparentCardHover = 'var(--surface-transparent-card-hover)'; /** Прозрачный фон для карточек */ -export const surfaceTransparentCardActive = 'var(--surface-transparent-card-active, #0808081A)'; +export const surfaceTransparentCardActive = 'var(--surface-transparent-card-active)'; /** Фон поверхности/контрола без заливки */ -export const surfaceClear = 'var(--surface-clear, #FFFFFF00)'; +export const surfaceClear = 'var(--surface-clear)'; /** Фон поверхности/контрола без заливки */ -export const surfaceClearHover = 'var(--surface-clear-hover, #FFFFFF00)'; +export const surfaceClearHover = 'var(--surface-clear-hover)'; /** Фон поверхности/контрола без заливки */ -export const surfaceClearActive = 'var(--surface-clear-active, #FFFFFF00)'; +export const surfaceClearActive = 'var(--surface-clear-active)'; /** Акцентный фон поверхности/контрола */ -export const surfaceAccent = 'var(--surface-accent, #108E26)'; +export const surfaceAccent = 'var(--surface-accent)'; /** Акцентный фон поверхности/контрола */ -export const surfaceAccentHover = 'var(--surface-accent-hover, #12A12AFF)'; +export const surfaceAccentHover = 'var(--surface-accent-hover)'; /** Акцентный фон поверхности/контрола */ -export const surfaceAccentActive = 'var(--surface-accent-active, #0E7C20FF)'; +export const surfaceAccentActive = 'var(--surface-accent-active)'; /** Акцентный минорный непрозрачный фон поверхности/контрола */ -export const surfaceAccentMinor = 'var(--surface-accent-minor, #77F38E)'; +export const surfaceAccentMinor = 'var(--surface-accent-minor)'; /** Акцентный минорный непрозрачный фон поверхности/контрола */ -export const surfaceAccentMinorHover = 'var(--surface-accent-minor-hover, #93F6A5FF)'; +export const surfaceAccentMinorHover = 'var(--surface-accent-minor-hover)'; /** Акцентный минорный непрозрачный фон поверхности/контрола */ -export const surfaceAccentMinorActive = 'var(--surface-accent-minor-active, #64F27EFF)'; +export const surfaceAccentMinorActive = 'var(--surface-accent-minor-active)'; /** Прозрачный акцентный фон поверхности/контрола */ -export const surfaceTransparentAccent = 'var(--surface-transparent-accent, #108E2647)'; +export const surfaceTransparentAccent = 'var(--surface-transparent-accent)'; /** Прозрачный акцентный фон поверхности/контрола */ -export const surfaceTransparentAccentHover = 'var(--surface-transparent-accent-hover, #108E2533)'; +export const surfaceTransparentAccentHover = 'var(--surface-transparent-accent-hover)'; /** Прозрачный акцентный фон поверхности/контрола */ -export const surfaceTransparentAccentActive = 'var(--surface-transparent-accent-active, #108E2552)'; +export const surfaceTransparentAccentActive = 'var(--surface-transparent-accent-active)'; /** Цвет фона поверхности/контрола успех */ -export const surfacePositive = 'var(--surface-positive, #1A9E32)'; +export const surfacePositive = 'var(--surface-positive)'; /** Цвет фона поверхности/контрола успех */ -export const surfacePositiveHover = 'var(--surface-positive-hover, #1EB83AFF)'; +export const surfacePositiveHover = 'var(--surface-positive-hover)'; /** Цвет фона поверхности/контрола успех */ -export const surfacePositiveActive = 'var(--surface-positive-active, #178C2CFF)'; +export const surfacePositiveActive = 'var(--surface-positive-active)'; /** Цвет фона поверхности/контрола предупреждение */ -export const surfaceWarning = 'var(--surface-warning, #FA5F05)'; +export const surfaceWarning = 'var(--surface-warning)'; /** Цвет фона поверхности/контрола предупреждение */ -export const surfaceWarningHover = 'var(--surface-warning-hover, #FB782DFF)'; +export const surfaceWarningHover = 'var(--surface-warning-hover)'; /** Цвет фона поверхности/контрола предупреждение */ -export const surfaceWarningActive = 'var(--surface-warning-active, #E65705FF)'; +export const surfaceWarningActive = 'var(--surface-warning-active)'; /** Цвет фона поверхности/контрола ошибка */ -export const surfaceNegative = 'var(--surface-negative, #FF293E)'; +export const surfaceNegative = 'var(--surface-negative)'; /** Цвет фона поверхности/контрола ошибка */ -export const surfaceNegativeHover = 'var(--surface-negative-hover, #FF5263FF)'; +export const surfaceNegativeHover = 'var(--surface-negative-hover)'; /** Цвет фона поверхности/контрола ошибка */ -export const surfaceNegativeActive = 'var(--surface-negative-active, #FF142CFF)'; +export const surfaceNegativeActive = 'var(--surface-negative-active)'; /** Цвет фона поверхности/контрола информация */ -export const surfaceInfo = 'var(--surface-info, #118CDF)'; +export const surfaceInfo = 'var(--surface-info)'; /** Цвет фона поверхности/контрола информация */ -export const surfaceInfoHover = 'var(--surface-info-hover, #1798EEFF)'; +export const surfaceInfoHover = 'var(--surface-info-hover)'; /** Цвет фона поверхности/контрола информация */ -export const surfaceInfoActive = 'var(--surface-info-active, #0F81CCFF)'; +export const surfaceInfoActive = 'var(--surface-info-active)'; /** Минорный цвет фона поверхности/контрола успех */ -export const surfacePositiveMinor = 'var(--surface-positive-minor, #77F38E)'; +export const surfacePositiveMinor = 'var(--surface-positive-minor)'; /** Минорный цвет фона поверхности/контрола успех */ -export const surfacePositiveMinorHover = 'var(--surface-positive-minor-hover, #93F6A5FF)'; +export const surfacePositiveMinorHover = 'var(--surface-positive-minor-hover)'; /** Минорный цвет фона поверхности/контрола успех */ -export const surfacePositiveMinorActive = 'var(--surface-positive-minor-active, #64F27EFF)'; +export const surfacePositiveMinorActive = 'var(--surface-positive-minor-active)'; /** Минорный цвет фона поверхности/контрола предупреждение */ -export const surfaceWarningMinor = 'var(--surface-warning-minor, #FFD1B8)'; +export const surfaceWarningMinor = 'var(--surface-warning-minor)'; /** Минорный цвет фона поверхности/контрола предупреждение */ -export const surfaceWarningMinorHover = 'var(--surface-warning-minor-hover, #FFDECCFF)'; +export const surfaceWarningMinorHover = 'var(--surface-warning-minor-hover)'; /** Минорный цвет фона поверхности/контрола предупреждение */ -export const surfaceWarningMinorActive = 'var(--surface-warning-minor-active, #FFC3A3FF)'; +export const surfaceWarningMinorActive = 'var(--surface-warning-minor-active)'; /** Минорный цвет фона поверхности/контрола ошибка */ -export const surfaceNegativeMinor = 'var(--surface-negative-minor, #FECDD2)'; +export const surfaceNegativeMinor = 'var(--surface-negative-minor)'; /** Минорный цвет фона поверхности/контрола ошибка */ -export const surfaceNegativeMinorHover = 'var(--surface-negative-minor-hover, #FEE1E4FF)'; +export const surfaceNegativeMinorHover = 'var(--surface-negative-minor-hover)'; /** Минорный цвет фона поверхности/контрола ошибка */ -export const surfaceNegativeMinorActive = 'var(--surface-negative-minor-active, #FEC3C9FF)'; +export const surfaceNegativeMinorActive = 'var(--surface-negative-minor-active)'; /** Минорный цвет фона поверхности/контрола информация */ -export const surfaceInfoMinor = 'var(--surface-info-minor, #B0DFFF)'; +export const surfaceInfoMinor = 'var(--surface-info-minor)'; /** Минорный цвет фона поверхности/контрола информация */ -export const surfaceInfoMinorHover = 'var(--surface-info-minor-hover, #C7E9FFFF)'; +export const surfaceInfoMinorHover = 'var(--surface-info-minor-hover)'; /** Минорный цвет фона поверхности/контрола информация */ -export const surfaceInfoMinorActive = 'var(--surface-info-minor-active, #9ED8FFFF)'; +export const surfaceInfoMinorActive = 'var(--surface-info-minor-active)'; /** Прозрачный цвет фона поверхности/контрола успех */ -export const surfaceTransparentPositive = 'var(--surface-transparent-positive, #1A9E3247)'; +export const surfaceTransparentPositive = 'var(--surface-transparent-positive)'; /** Прозрачный цвет фона поверхности/контрола успех */ -export const surfaceTransparentPositiveHover = 'var(--surface-transparent-positive-hover, #1A9E3233)'; +export const surfaceTransparentPositiveHover = 'var(--surface-transparent-positive-hover)'; /** Прозрачный цвет фона поверхности/контрола успех */ -export const surfaceTransparentPositiveActive = 'var(--surface-transparent-positive-active, #1A9E3252)'; +export const surfaceTransparentPositiveActive = 'var(--surface-transparent-positive-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentWarning = 'var(--surface-transparent-warning, #FA5F0547)'; +export const surfaceTransparentWarning = 'var(--surface-transparent-warning)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentWarningHover = 'var(--surface-transparent-warning-hover, #FA5F0533)'; +export const surfaceTransparentWarningHover = 'var(--surface-transparent-warning-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentWarningActive = 'var(--surface-transparent-warning-active, #FA5F0552)'; +export const surfaceTransparentWarningActive = 'var(--surface-transparent-warning-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentNegative = 'var(--surface-transparent-negative, #FF293E47)'; +export const surfaceTransparentNegative = 'var(--surface-transparent-negative)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentNegativeHover = 'var(--surface-transparent-negative-hover, #FF293E33)'; +export const surfaceTransparentNegativeHover = 'var(--surface-transparent-negative-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение */ -export const surfaceTransparentNegativeActive = 'var(--surface-transparent-negative-active, #FF293E52)'; +export const surfaceTransparentNegativeActive = 'var(--surface-transparent-negative-active)'; /** Прозрачный цвет фона поверхности/контрола информация */ -export const surfaceTransparentInfo = 'var(--surface-transparent-info, #118CDF47)'; +export const surfaceTransparentInfo = 'var(--surface-transparent-info)'; /** Прозрачный цвет фона поверхности/контрола информация */ -export const surfaceTransparentInfoHover = 'var(--surface-transparent-info-hover, #118CDF33)'; +export const surfaceTransparentInfoHover = 'var(--surface-transparent-info-hover)'; /** Прозрачный цвет фона поверхности/контрола информация */ -export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-active, #118CDF52)'; +export const surfaceTransparentInfoActive = 'var(--surface-transparent-info-active)'; /** Основной непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #171717)'; +export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary)'; /** Основной непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover, #363636FF)'; +export const onDarkSurfaceSolidPrimaryHover = 'var(--on-dark-surface-solid-primary-hover)'; /** Основной непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-primary-active, #0D0D0DFF)'; +export const onDarkSurfaceSolidPrimaryActive = 'var(--on-dark-surface-solid-primary-active)'; /** Вторичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidSecondary = 'var(--on-dark-surface-solid-secondary, #262626)'; +export const onDarkSurfaceSolidSecondary = 'var(--on-dark-surface-solid-secondary)'; /** Вторичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover, #3B3B3BFF)'; +export const onDarkSurfaceSolidSecondaryHover = 'var(--on-dark-surface-solid-secondary-hover)'; /** Вторичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidSecondaryActive = 'var(--on-dark-surface-solid-secondary-active, #1C1C1CFF)'; +export const onDarkSurfaceSolidSecondaryActive = 'var(--on-dark-surface-solid-secondary-active)'; /** Третичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidTertiary = 'var(--on-dark-surface-solid-tertiary, #363636)'; +export const onDarkSurfaceSolidTertiary = 'var(--on-dark-surface-solid-tertiary)'; /** Третичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidTertiaryHover = 'var(--on-dark-surface-solid-tertiary-hover, #4A4A4AFF)'; +export const onDarkSurfaceSolidTertiaryHover = 'var(--on-dark-surface-solid-tertiary-hover)'; /** Третичный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-tertiary-active, #2B2B2BFF)'; +export const onDarkSurfaceSolidTertiaryActive = 'var(--on-dark-surface-solid-tertiary-active)'; /** Основной фон для карточек на темном фоне */ -export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #171717)'; +export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card)'; /** Основной фон для карточек на темном фоне */ -export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover, #363636FF)'; +export const onDarkSurfaceSolidCardHover = 'var(--on-dark-surface-solid-card-hover)'; /** Основной фон для карточек на темном фоне */ -export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-active, #0D0D0DFF)'; +export const onDarkSurfaceSolidCardActive = 'var(--on-dark-surface-solid-card-active)'; /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ -export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default, #F9F9F9)'; +export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default)'; /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ -export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover, #FFFFFFFF)'; +export const onDarkSurfaceSolidDefaultHover = 'var(--on-dark-surface-solid-default-hover)'; /** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ -export const onDarkSurfaceSolidDefaultActive = 'var(--on-dark-surface-solid-default-active, #F5F5F5FF)'; +export const onDarkSurfaceSolidDefaultActive = 'var(--on-dark-surface-solid-default-active)'; /** Основной прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary, #F9F9F90F)'; +export const onDarkSurfaceTransparentPrimary = 'var(--on-dark-surface-transparent-primary)'; /** Основной прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentPrimaryHover = 'var(--on-dark-surface-transparent-primary-hover, #FAFAFA05)'; +export const onDarkSurfaceTransparentPrimaryHover = 'var(--on-dark-surface-transparent-primary-hover)'; /** Основной прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentPrimaryActive = 'var(--on-dark-surface-transparent-primary-active, #FAFAFA1A)'; +export const onDarkSurfaceTransparentPrimaryActive = 'var(--on-dark-surface-transparent-primary-active)'; /** Вторичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentSecondary = 'var(--on-dark-surface-transparent-secondary, #F9F9F91F)'; +export const onDarkSurfaceTransparentSecondary = 'var(--on-dark-surface-transparent-secondary)'; /** Вторичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentSecondaryHover = 'var(--on-dark-surface-transparent-secondary-hover, #FAFAFA0A)'; +export const onDarkSurfaceTransparentSecondaryHover = 'var(--on-dark-surface-transparent-secondary-hover)'; /** Вторичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentSecondaryActive = 'var(--on-dark-surface-transparent-secondary-active, #FAFAFA29)'; +export const onDarkSurfaceTransparentSecondaryActive = 'var(--on-dark-surface-transparent-secondary-active)'; /** Третичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentTertiary = 'var(--on-dark-surface-transparent-tertiary, #F9F9F933)'; +export const onDarkSurfaceTransparentTertiary = 'var(--on-dark-surface-transparent-tertiary)'; /** Третичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentTertiaryHover = 'var(--on-dark-surface-transparent-tertiary-hover, #FAFAFA1F)'; +export const onDarkSurfaceTransparentTertiaryHover = 'var(--on-dark-surface-transparent-tertiary-hover)'; /** Третичный прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentTertiaryActive = 'var(--on-dark-surface-transparent-tertiary-active, #FAFAFA3D)'; +export const onDarkSurfaceTransparentTertiaryActive = 'var(--on-dark-surface-transparent-tertiary-active)'; /** Глубокий прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentDeep = 'var(--on-dark-surface-transparent-deep, #F9F9F9A3)'; +export const onDarkSurfaceTransparentDeep = 'var(--on-dark-surface-transparent-deep)'; /** Глубокий прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentDeepHover = 'var(--on-dark-surface-transparent-deep-hover, #FAFAFA8F)'; +export const onDarkSurfaceTransparentDeepHover = 'var(--on-dark-surface-transparent-deep-hover)'; /** Глубокий прозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transparent-deep-active, #FAFAFAAD)'; +export const onDarkSurfaceTransparentDeepActive = 'var(--on-dark-surface-transparent-deep-active)'; /** Прозрачный фон для карточек на темном фоне */ -export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card, #F9F9F90F)'; +export const onDarkSurfaceTransparentCard = 'var(--on-dark-surface-transparent-card)'; /** Прозрачный фон для карточек на темном фоне */ -export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover, #FAFAFA05)'; +export const onDarkSurfaceTransparentCardHover = 'var(--on-dark-surface-transparent-card-hover)'; /** Прозрачный фон для карточек на темном фоне */ -export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transparent-card-active, #FAFAFA1A)'; +export const onDarkSurfaceTransparentCardActive = 'var(--on-dark-surface-transparent-card-active)'; /** Фон поверхности/контрола без заливки на темном фоне */ -export const onDarkSurfaceClear = 'var(--on-dark-surface-clear, #FFFFFF00)'; +export const onDarkSurfaceClear = 'var(--on-dark-surface-clear)'; /** Фон поверхности/контрола без заливки на темном фоне */ -export const onDarkSurfaceClearHover = 'var(--on-dark-surface-clear-hover, #FFFFFF00)'; +export const onDarkSurfaceClearHover = 'var(--on-dark-surface-clear-hover)'; /** Фон поверхности/контрола без заливки на темном фоне */ -export const onDarkSurfaceClearActive = 'var(--on-dark-surface-clear-active, #FFFFFF00)'; +export const onDarkSurfaceClearActive = 'var(--on-dark-surface-clear-active)'; /** Акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccent = 'var(--on-dark-surface-accent, #1A9E32)'; +export const onDarkSurfaceAccent = 'var(--on-dark-surface-accent)'; /** Акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccentHover = 'var(--on-dark-surface-accent-hover, #1EB83AFF)'; +export const onDarkSurfaceAccentHover = 'var(--on-dark-surface-accent-hover)'; /** Акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccentActive = 'var(--on-dark-surface-accent-active, #178C2CFF)'; +export const onDarkSurfaceAccentActive = 'var(--on-dark-surface-accent-active)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccentMinor = 'var(--on-dark-surface-accent-minor, #0A2B10)'; +export const onDarkSurfaceAccentMinor = 'var(--on-dark-surface-accent-minor)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccentMinorHover = 'var(--on-dark-surface-accent-minor-hover, #0E3A16FF)'; +export const onDarkSurfaceAccentMinorHover = 'var(--on-dark-surface-accent-minor-hover)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceAccentMinorActive = 'var(--on-dark-surface-accent-minor-active, #061909FF)'; +export const onDarkSurfaceAccentMinorActive = 'var(--on-dark-surface-accent-minor-active)'; /** Прозрачный акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentAccent = 'var(--on-dark-surface-transparent-accent, #1A9E3247)'; +export const onDarkSurfaceTransparentAccent = 'var(--on-dark-surface-transparent-accent)'; /** Прозрачный акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentAccentHover = 'var(--on-dark-surface-transparent-accent-hover, #1A9E3233)'; +export const onDarkSurfaceTransparentAccentHover = 'var(--on-dark-surface-transparent-accent-hover)'; /** Прозрачный акцентный фон поверхности/контрола на темном фоне */ -export const onDarkSurfaceTransparentAccentActive = 'var(--on-dark-surface-transparent-accent-active, #1A9E3252)'; +export const onDarkSurfaceTransparentAccentActive = 'var(--on-dark-surface-transparent-accent-active)'; /** Цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositive = 'var(--on-dark-surface-positive, #1A9E32)'; +export const onDarkSurfacePositive = 'var(--on-dark-surface-positive)'; /** Цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositiveHover = 'var(--on-dark-surface-positive-hover, #1EB83AFF)'; +export const onDarkSurfacePositiveHover = 'var(--on-dark-surface-positive-hover)'; /** Цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositiveActive = 'var(--on-dark-surface-positive-active, #178C2CFF)'; +export const onDarkSurfacePositiveActive = 'var(--on-dark-surface-positive-active)'; /** Цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarning = 'var(--on-dark-surface-warning, #FA5F05)'; +export const onDarkSurfaceWarning = 'var(--on-dark-surface-warning)'; /** Цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarningHover = 'var(--on-dark-surface-warning-hover, #FB782DFF)'; +export const onDarkSurfaceWarningHover = 'var(--on-dark-surface-warning-hover)'; /** Цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarningActive = 'var(--on-dark-surface-warning-active, #E65705FF)'; +export const onDarkSurfaceWarningActive = 'var(--on-dark-surface-warning-active)'; /** Цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegative = 'var(--on-dark-surface-negative, #FF293E)'; +export const onDarkSurfaceNegative = 'var(--on-dark-surface-negative)'; /** Цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegativeHover = 'var(--on-dark-surface-negative-hover, #FF5263FF)'; +export const onDarkSurfaceNegativeHover = 'var(--on-dark-surface-negative-hover)'; /** Цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegativeActive = 'var(--on-dark-surface-negative-active, #FF142CFF)'; +export const onDarkSurfaceNegativeActive = 'var(--on-dark-surface-negative-active)'; /** Цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfo = 'var(--on-dark-surface-info, #118CDF)'; +export const onDarkSurfaceInfo = 'var(--on-dark-surface-info)'; /** Цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfoHover = 'var(--on-dark-surface-info-hover, #1798EEFF)'; +export const onDarkSurfaceInfoHover = 'var(--on-dark-surface-info-hover)'; /** Цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfoActive = 'var(--on-dark-surface-info-active, #0F81CCFF)'; +export const onDarkSurfaceInfoActive = 'var(--on-dark-surface-info-active)'; /** Минорный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositiveMinor = 'var(--on-dark-surface-positive-minor, #0A2B10)'; +export const onDarkSurfacePositiveMinor = 'var(--on-dark-surface-positive-minor)'; /** Минорный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositiveMinorHover = 'var(--on-dark-surface-positive-minor-hover, #0E3A16FF)'; +export const onDarkSurfacePositiveMinorHover = 'var(--on-dark-surface-positive-minor-hover)'; /** Минорный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfacePositiveMinorActive = 'var(--on-dark-surface-positive-minor-active, #061909FF)'; +export const onDarkSurfacePositiveMinorActive = 'var(--on-dark-surface-positive-minor-active)'; /** Минорный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarningMinor = 'var(--on-dark-surface-warning-minor, #3D1D0A)'; +export const onDarkSurfaceWarningMinor = 'var(--on-dark-surface-warning-minor)'; /** Минорный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarningMinorHover = 'var(--on-dark-surface-warning-minor-hover, #58290EFF)'; +export const onDarkSurfaceWarningMinorHover = 'var(--on-dark-surface-warning-minor-hover)'; /** Минорный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceWarningMinorActive = 'var(--on-dark-surface-warning-minor-active, #2C1507FF)'; +export const onDarkSurfaceWarningMinorActive = 'var(--on-dark-surface-warning-minor-active)'; /** Минорный цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegativeMinor = 'var(--on-dark-surface-negative-minor, #4A0D13)'; +export const onDarkSurfaceNegativeMinor = 'var(--on-dark-surface-negative-minor)'; /** Минорный цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegativeMinorHover = 'var(--on-dark-surface-negative-minor-hover, #64121AFF)'; +export const onDarkSurfaceNegativeMinorHover = 'var(--on-dark-surface-negative-minor-hover)'; /** Минорный цвет фона поверхности/контрола ошибка на темном фоне */ -export const onDarkSurfaceNegativeMinorActive = 'var(--on-dark-surface-negative-minor-active, #380A0FFF)'; +export const onDarkSurfaceNegativeMinorActive = 'var(--on-dark-surface-negative-minor-active)'; /** Минорный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfoMinor = 'var(--on-dark-surface-info-minor, #0C283B)'; +export const onDarkSurfaceInfoMinor = 'var(--on-dark-surface-info-minor)'; /** Минорный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfoMinorHover = 'var(--on-dark-surface-info-minor-hover, #10344CFF)'; +export const onDarkSurfaceInfoMinorHover = 'var(--on-dark-surface-info-minor-hover)'; /** Минорный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceInfoMinorActive = 'var(--on-dark-surface-info-minor-active, #091D2AFF)'; +export const onDarkSurfaceInfoMinorActive = 'var(--on-dark-surface-info-minor-active)'; /** Прозрачный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfaceTransparentPositive = 'var(--on-dark-surface-transparent-positive, #1A9E3247)'; +export const onDarkSurfaceTransparentPositive = 'var(--on-dark-surface-transparent-positive)'; /** Прозрачный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfaceTransparentPositiveHover = 'var(--on-dark-surface-transparent-positive-hover, #1A9E3233)'; +export const onDarkSurfaceTransparentPositiveHover = 'var(--on-dark-surface-transparent-positive-hover)'; /** Прозрачный цвет фона поверхности/контрола успех на темном фоне */ -export const onDarkSurfaceTransparentPositiveActive = 'var(--on-dark-surface-transparent-positive-active, #1A9E3252)'; +export const onDarkSurfaceTransparentPositiveActive = 'var(--on-dark-surface-transparent-positive-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentWarning = 'var(--on-dark-surface-transparent-warning, #FA5F0547)'; +export const onDarkSurfaceTransparentWarning = 'var(--on-dark-surface-transparent-warning)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentWarningHover = 'var(--on-dark-surface-transparent-warning-hover, #FA5F0533)'; +export const onDarkSurfaceTransparentWarningHover = 'var(--on-dark-surface-transparent-warning-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentWarningActive = 'var(--on-dark-surface-transparent-warning-active, #FA5F0552)'; +export const onDarkSurfaceTransparentWarningActive = 'var(--on-dark-surface-transparent-warning-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentNegative = 'var(--on-dark-surface-transparent-negative, #FF293E47)'; +export const onDarkSurfaceTransparentNegative = 'var(--on-dark-surface-transparent-negative)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentNegativeHover = 'var(--on-dark-surface-transparent-negative-hover, #FF293E33)'; +export const onDarkSurfaceTransparentNegativeHover = 'var(--on-dark-surface-transparent-negative-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне */ -export const onDarkSurfaceTransparentNegativeActive = 'var(--on-dark-surface-transparent-negative-active, #FF293E52)'; +export const onDarkSurfaceTransparentNegativeActive = 'var(--on-dark-surface-transparent-negative-active)'; /** Прозрачный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceTransparentInfo = 'var(--on-dark-surface-transparent-info, #118CDF47)'; +export const onDarkSurfaceTransparentInfo = 'var(--on-dark-surface-transparent-info)'; /** Прозрачный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceTransparentInfoHover = 'var(--on-dark-surface-transparent-info-hover, #118CDF33)'; +export const onDarkSurfaceTransparentInfoHover = 'var(--on-dark-surface-transparent-info-hover)'; /** Прозрачный цвет фона поверхности/контрола информация на темном фоне */ -export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transparent-info-active, #118CDF52)'; +export const onDarkSurfaceTransparentInfoActive = 'var(--on-dark-surface-transparent-info-active)'; /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F5F5F5)'; +export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary)'; /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover, #FAFAFAFF)'; +export const onLightSurfaceSolidPrimaryHover = 'var(--on-light-surface-solid-primary-hover)'; /** Основной непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-primary-active, #F0F0F0FF)'; +export const onLightSurfaceSolidPrimaryActive = 'var(--on-light-surface-solid-primary-active)'; /** Вторичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidSecondary = 'var(--on-light-surface-solid-secondary, #ECECEC)'; +export const onLightSurfaceSolidSecondary = 'var(--on-light-surface-solid-secondary)'; /** Вторичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover, #F7F7F7FF)'; +export const onLightSurfaceSolidSecondaryHover = 'var(--on-light-surface-solid-secondary-hover)'; /** Вторичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidSecondaryActive = 'var(--on-light-surface-solid-secondary-active, #E8E8E8FF)'; +export const onLightSurfaceSolidSecondaryActive = 'var(--on-light-surface-solid-secondary-active)'; /** Третичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidTertiary = 'var(--on-light-surface-solid-tertiary, #DDDDDD)'; +export const onLightSurfaceSolidTertiary = 'var(--on-light-surface-solid-tertiary)'; /** Третичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidTertiaryHover = 'var(--on-light-surface-solid-tertiary-hover, #EDEDEDFF)'; +export const onLightSurfaceSolidTertiaryHover = 'var(--on-light-surface-solid-tertiary-hover)'; /** Третичный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-tertiary-active, #D4D4D4FF)'; +export const onLightSurfaceSolidTertiaryActive = 'var(--on-light-surface-solid-tertiary-active)'; /** Основной фон для карточек на светлом фоне */ -export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFF)'; +export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card)'; /** Основной фон для карточек на светлом фоне */ -export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover, #FFFFFFFF)'; +export const onLightSurfaceSolidCardHover = 'var(--on-light-surface-solid-card-hover)'; /** Основной фон для карточек на светлом фоне */ -export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card-active, #FFFFFFFF)'; +export const onLightSurfaceSolidCardActive = 'var(--on-light-surface-solid-card-active)'; /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ -export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default, #080808)'; +export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default)'; /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ -export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover, #262626FF)'; +export const onLightSurfaceSolidDefaultHover = 'var(--on-light-surface-solid-default-hover)'; /** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ -export const onLightSurfaceSolidDefaultActive = 'var(--on-light-surface-solid-default-active, #030303FF)'; +export const onLightSurfaceSolidDefaultActive = 'var(--on-light-surface-solid-default-active)'; /** Основной прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary, #08080808)'; +export const onLightSurfaceTransparentPrimary = 'var(--on-light-surface-transparent-primary)'; /** Основной прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentPrimaryHover = 'var(--on-light-surface-transparent-primary-hover, #08080803)'; +export const onLightSurfaceTransparentPrimaryHover = 'var(--on-light-surface-transparent-primary-hover)'; /** Основной прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentPrimaryActive = 'var(--on-light-surface-transparent-primary-active, #0808080D)'; +export const onLightSurfaceTransparentPrimaryActive = 'var(--on-light-surface-transparent-primary-active)'; /** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentSecondary = 'var(--on-light-surface-transparent-secondary, #0808080F)'; +export const onLightSurfaceTransparentSecondary = 'var(--on-light-surface-transparent-secondary)'; /** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentSecondaryHover = 'var(--on-light-surface-transparent-secondary-hover, #08080805)'; +export const onLightSurfaceTransparentSecondaryHover = 'var(--on-light-surface-transparent-secondary-hover)'; /** Вторичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentSecondaryActive = - 'var(--on-light-surface-transparent-secondary-active, #0808081A)'; +export const onLightSurfaceTransparentSecondaryActive = 'var(--on-light-surface-transparent-secondary-active)'; /** Третичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentTertiary = 'var(--on-light-surface-transparent-tertiary, #0808081F)'; +export const onLightSurfaceTransparentTertiary = 'var(--on-light-surface-transparent-tertiary)'; /** Третичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentTertiaryHover = 'var(--on-light-surface-transparent-tertiary-hover, #0808080A)'; +export const onLightSurfaceTransparentTertiaryHover = 'var(--on-light-surface-transparent-tertiary-hover)'; /** Третичный прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentTertiaryActive = 'var(--on-light-surface-transparent-tertiary-active, #08080829)'; +export const onLightSurfaceTransparentTertiaryActive = 'var(--on-light-surface-transparent-tertiary-active)'; /** Глубокий прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentDeep = 'var(--on-light-surface-transparent-deep, #080808A3)'; +export const onLightSurfaceTransparentDeep = 'var(--on-light-surface-transparent-deep)'; /** Глубокий прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentDeepHover = 'var(--on-light-surface-transparent-deep-hover, #0808088F)'; +export const onLightSurfaceTransparentDeepHover = 'var(--on-light-surface-transparent-deep-hover)'; /** Глубокий прозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-transparent-deep-active, #080808AD)'; +export const onLightSurfaceTransparentDeepActive = 'var(--on-light-surface-transparent-deep-active)'; /** Прозрачный фон для карточек на светлом фоне */ -export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card, #0808080F)'; +export const onLightSurfaceTransparentCard = 'var(--on-light-surface-transparent-card)'; /** Прозрачный фон для карточек на светлом фоне */ -export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover, #08080805)'; +export const onLightSurfaceTransparentCardHover = 'var(--on-light-surface-transparent-card-hover)'; /** Прозрачный фон для карточек на светлом фоне */ -export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-transparent-card-active, #0808081A)'; +export const onLightSurfaceTransparentCardActive = 'var(--on-light-surface-transparent-card-active)'; /** Фон поверхности/контрола без заливки на светлом фоне */ -export const onLightSurfaceClear = 'var(--on-light-surface-clear, #FFFFFF00)'; +export const onLightSurfaceClear = 'var(--on-light-surface-clear)'; /** Фон поверхности/контрола без заливки на светлом фоне */ -export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover, #FFFFFF00)'; +export const onLightSurfaceClearHover = 'var(--on-light-surface-clear-hover)'; /** Фон поверхности/контрола без заливки на светлом фоне */ -export const onLightSurfaceClearActive = 'var(--on-light-surface-clear-active, #FFFFFF00)'; +export const onLightSurfaceClearActive = 'var(--on-light-surface-clear-active)'; /** Акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccent = 'var(--on-light-surface-accent, #108E26)'; +export const onLightSurfaceAccent = 'var(--on-light-surface-accent)'; /** Акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccentHover = 'var(--on-light-surface-accent-hover, #12A12AFF)'; +export const onLightSurfaceAccentHover = 'var(--on-light-surface-accent-hover)'; /** Акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccentActive = 'var(--on-light-surface-accent-active, #0E7C20FF)'; +export const onLightSurfaceAccentActive = 'var(--on-light-surface-accent-active)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccentMinor = 'var(--on-light-surface-accent-minor, #77F38E)'; +export const onLightSurfaceAccentMinor = 'var(--on-light-surface-accent-minor)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccentMinorHover = 'var(--on-light-surface-accent-minor-hover, #93F6A5FF)'; +export const onLightSurfaceAccentMinorHover = 'var(--on-light-surface-accent-minor-hover)'; /** Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceAccentMinorActive = 'var(--on-light-surface-accent-minor-active, #64F27EFF)'; +export const onLightSurfaceAccentMinorActive = 'var(--on-light-surface-accent-minor-active)'; /** Прозрачный акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentAccent = 'var(--on-light-surface-transparent-accent, #108E2647)'; +export const onLightSurfaceTransparentAccent = 'var(--on-light-surface-transparent-accent)'; /** Прозрачный акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentAccentHover = 'var(--on-light-surface-transparent-accent-hover, #108E2533)'; +export const onLightSurfaceTransparentAccentHover = 'var(--on-light-surface-transparent-accent-hover)'; /** Прозрачный акцентный фон поверхности/контрола на светлом фоне */ -export const onLightSurfaceTransparentAccentActive = 'var(--on-light-surface-transparent-accent-active, #108E2552)'; +export const onLightSurfaceTransparentAccentActive = 'var(--on-light-surface-transparent-accent-active)'; /** Цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositive = 'var(--on-light-surface-positive, #1A9E32)'; +export const onLightSurfacePositive = 'var(--on-light-surface-positive)'; /** Цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositiveHover = 'var(--on-light-surface-positive-hover, #1EB83AFF)'; +export const onLightSurfacePositiveHover = 'var(--on-light-surface-positive-hover)'; /** Цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositiveActive = 'var(--on-light-surface-positive-active, #178C2CFF)'; +export const onLightSurfacePositiveActive = 'var(--on-light-surface-positive-active)'; /** Цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarning = 'var(--on-light-surface-warning, #FA5F05)'; +export const onLightSurfaceWarning = 'var(--on-light-surface-warning)'; /** Цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarningHover = 'var(--on-light-surface-warning-hover, #FB782DFF)'; +export const onLightSurfaceWarningHover = 'var(--on-light-surface-warning-hover)'; /** Цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarningActive = 'var(--on-light-surface-warning-active, #E65705FF)'; +export const onLightSurfaceWarningActive = 'var(--on-light-surface-warning-active)'; /** Цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #FF293E)'; +export const onLightSurfaceNegative = 'var(--on-light-surface-negative)'; /** Цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegativeHover = 'var(--on-light-surface-negative-hover, #FF5263FF)'; +export const onLightSurfaceNegativeHover = 'var(--on-light-surface-negative-hover)'; /** Цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegativeActive = 'var(--on-light-surface-negative-active, #FF142CFF)'; +export const onLightSurfaceNegativeActive = 'var(--on-light-surface-negative-active)'; /** Цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfo = 'var(--on-light-surface-info, #118CDF)'; +export const onLightSurfaceInfo = 'var(--on-light-surface-info)'; /** Цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfoHover = 'var(--on-light-surface-info-hover, #1798EEFF)'; +export const onLightSurfaceInfoHover = 'var(--on-light-surface-info-hover)'; /** Цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfoActive = 'var(--on-light-surface-info-active, #0F81CCFF)'; +export const onLightSurfaceInfoActive = 'var(--on-light-surface-info-active)'; /** Минорный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositiveMinor = 'var(--on-light-surface-positive-minor, #77F38E)'; +export const onLightSurfacePositiveMinor = 'var(--on-light-surface-positive-minor)'; /** Минорный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositiveMinorHover = 'var(--on-light-surface-positive-minor-hover, #93F6A5FF)'; +export const onLightSurfacePositiveMinorHover = 'var(--on-light-surface-positive-minor-hover)'; /** Минорный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfacePositiveMinorActive = 'var(--on-light-surface-positive-minor-active, #64F27EFF)'; +export const onLightSurfacePositiveMinorActive = 'var(--on-light-surface-positive-minor-active)'; /** Минорный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarningMinor = 'var(--on-light-surface-warning-minor, #FFD1B8)'; +export const onLightSurfaceWarningMinor = 'var(--on-light-surface-warning-minor)'; /** Минорный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarningMinorHover = 'var(--on-light-surface-warning-minor-hover, #FFDECCFF)'; +export const onLightSurfaceWarningMinorHover = 'var(--on-light-surface-warning-minor-hover)'; /** Минорный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceWarningMinorActive = 'var(--on-light-surface-warning-minor-active, #FFC3A3FF)'; +export const onLightSurfaceWarningMinorActive = 'var(--on-light-surface-warning-minor-active)'; /** Минорный цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegativeMinor = 'var(--on-light-surface-negative-minor, #FECDD2)'; +export const onLightSurfaceNegativeMinor = 'var(--on-light-surface-negative-minor)'; /** Минорный цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegativeMinorHover = 'var(--on-light-surface-negative-minor-hover, #FEE1E4FF)'; +export const onLightSurfaceNegativeMinorHover = 'var(--on-light-surface-negative-minor-hover)'; /** Минорный цвет фона поверхности/контрола ошибка на светлом фоне */ -export const onLightSurfaceNegativeMinorActive = 'var(--on-light-surface-negative-minor-active, #FEC3C9FF)'; +export const onLightSurfaceNegativeMinorActive = 'var(--on-light-surface-negative-minor-active)'; /** Минорный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfoMinor = 'var(--on-light-surface-info-minor, #B0DFFF)'; +export const onLightSurfaceInfoMinor = 'var(--on-light-surface-info-minor)'; /** Минорный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfoMinorHover = 'var(--on-light-surface-info-minor-hover, #C7E9FFFF)'; +export const onLightSurfaceInfoMinorHover = 'var(--on-light-surface-info-minor-hover)'; /** Минорный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceInfoMinorActive = 'var(--on-light-surface-info-minor-active, #9ED8FFFF)'; +export const onLightSurfaceInfoMinorActive = 'var(--on-light-surface-info-minor-active)'; /** Прозрачный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfaceTransparentPositive = 'var(--on-light-surface-transparent-positive, #1A9E3247)'; +export const onLightSurfaceTransparentPositive = 'var(--on-light-surface-transparent-positive)'; /** Прозрачный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfaceTransparentPositiveHover = 'var(--on-light-surface-transparent-positive-hover, #1A9E3233)'; +export const onLightSurfaceTransparentPositiveHover = 'var(--on-light-surface-transparent-positive-hover)'; /** Прозрачный цвет фона поверхности/контрола успех на светлом фоне */ -export const onLightSurfaceTransparentPositiveActive = 'var(--on-light-surface-transparent-positive-active, #1A9E3252)'; +export const onLightSurfaceTransparentPositiveActive = 'var(--on-light-surface-transparent-positive-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentWarning = 'var(--on-light-surface-transparent-warning, #FA5F0547)'; +export const onLightSurfaceTransparentWarning = 'var(--on-light-surface-transparent-warning)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentWarningHover = 'var(--on-light-surface-transparent-warning-hover, #FA5F0533)'; +export const onLightSurfaceTransparentWarningHover = 'var(--on-light-surface-transparent-warning-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentWarningActive = 'var(--on-light-surface-transparent-warning-active, #FA5F0552)'; +export const onLightSurfaceTransparentWarningActive = 'var(--on-light-surface-transparent-warning-active)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentNegative = 'var(--on-light-surface-transparent-negative, #FF293E47)'; +export const onLightSurfaceTransparentNegative = 'var(--on-light-surface-transparent-negative)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentNegativeHover = 'var(--on-light-surface-transparent-negative-hover, #FF293E33)'; +export const onLightSurfaceTransparentNegativeHover = 'var(--on-light-surface-transparent-negative-hover)'; /** Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне */ -export const onLightSurfaceTransparentNegativeActive = 'var(--on-light-surface-transparent-negative-active, #FF293E52)'; +export const onLightSurfaceTransparentNegativeActive = 'var(--on-light-surface-transparent-negative-active)'; /** Прозрачный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceTransparentInfo = 'var(--on-light-surface-transparent-info, #118CDF47)'; +export const onLightSurfaceTransparentInfo = 'var(--on-light-surface-transparent-info)'; /** Прозрачный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceTransparentInfoHover = 'var(--on-light-surface-transparent-info-hover, #118CDF33)'; +export const onLightSurfaceTransparentInfoHover = 'var(--on-light-surface-transparent-info-hover)'; /** Прозрачный цвет фона поверхности/контрола информация на светлом фоне */ -export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-transparent-info-active, #118CDF52)'; +export const onLightSurfaceTransparentInfoActive = 'var(--on-light-surface-transparent-info-active)'; /** Инвертированный основной непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #171717)'; +export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary)'; /** Инвертированный основной непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover, #363636FF)'; +export const inverseSurfaceSolidPrimaryHover = 'var(--inverse-surface-solid-primary-hover)'; /** Инвертированный основной непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-primary-active, #0D0D0DFF)'; +export const inverseSurfaceSolidPrimaryActive = 'var(--inverse-surface-solid-primary-active)'; /** Инвертированный вторичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary, #262626)'; +export const inverseSurfaceSolidSecondary = 'var(--inverse-surface-solid-secondary)'; /** Инвертированный вторичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover, #3B3B3BFF)'; +export const inverseSurfaceSolidSecondaryHover = 'var(--inverse-surface-solid-secondary-hover)'; /** Инвертированный вторичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidSecondaryActive = 'var(--inverse-surface-solid-secondary-active, #1C1C1CFF)'; +export const inverseSurfaceSolidSecondaryActive = 'var(--inverse-surface-solid-secondary-active)'; /** Инвертированный третичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary, #363636)'; +export const inverseSurfaceSolidTertiary = 'var(--inverse-surface-solid-tertiary)'; /** Инвертированный третичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidTertiaryHover = 'var(--inverse-surface-solid-tertiary-hover, #4A4A4AFF)'; +export const inverseSurfaceSolidTertiaryHover = 'var(--inverse-surface-solid-tertiary-hover)'; /** Инвертированный третичный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-tertiary-active, #2B2B2BFF)'; +export const inverseSurfaceSolidTertiaryActive = 'var(--inverse-surface-solid-tertiary-active)'; /** Инвертированный основной фон для карточек */ -export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #171717)'; +export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card)'; /** Инвертированный основной фон для карточек */ -export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover, #363636FF)'; +export const inverseSurfaceSolidCardHover = 'var(--inverse-surface-solid-card-hover)'; /** Инвертированный основной фон для карточек */ -export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-active, #0D0D0DFF)'; +export const inverseSurfaceSolidCardActive = 'var(--inverse-surface-solid-card-active)'; /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ -export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #F9F9F9)'; +export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default)'; /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ -export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover, #FFFFFFFF)'; +export const inverseSurfaceSolidDefaultHover = 'var(--inverse-surface-solid-default-hover)'; /** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ -export const inverseSurfaceSolidDefaultActive = 'var(--inverse-surface-solid-default-active, #F5F5F5FF)'; +export const inverseSurfaceSolidDefaultActive = 'var(--inverse-surface-solid-default-active)'; /** Инвертированный основной прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary, #F9F9F90F)'; +export const inverseSurfaceTransparentPrimary = 'var(--inverse-surface-transparent-primary)'; /** Инвертированный основной прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentPrimaryHover = 'var(--inverse-surface-transparent-primary-hover, #FAFAFA05)'; +export const inverseSurfaceTransparentPrimaryHover = 'var(--inverse-surface-transparent-primary-hover)'; /** Инвертированный основной прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentPrimaryActive = 'var(--inverse-surface-transparent-primary-active, #FAFAFA1A)'; +export const inverseSurfaceTransparentPrimaryActive = 'var(--inverse-surface-transparent-primary-active)'; /** Инвертированный вторичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary, #F9F9F91F)'; +export const inverseSurfaceTransparentSecondary = 'var(--inverse-surface-transparent-secondary)'; /** Инвертированный вторичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentSecondaryHover = 'var(--inverse-surface-transparent-secondary-hover, #FAFAFA0A)'; +export const inverseSurfaceTransparentSecondaryHover = 'var(--inverse-surface-transparent-secondary-hover)'; /** Инвертированный вторичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentSecondaryActive = - 'var(--inverse-surface-transparent-secondary-active, #FAFAFA29)'; +export const inverseSurfaceTransparentSecondaryActive = 'var(--inverse-surface-transparent-secondary-active)'; /** Инвертированный третичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary, #F9F9F933)'; +export const inverseSurfaceTransparentTertiary = 'var(--inverse-surface-transparent-tertiary)'; /** Инвертированный третичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-transparent-tertiary-hover, #FAFAFA1F)'; +export const inverseSurfaceTransparentTertiaryHover = 'var(--inverse-surface-transparent-tertiary-hover)'; /** Инвертированный третичный прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentTertiaryActive = 'var(--inverse-surface-transparent-tertiary-active, #FAFAFA3D)'; +export const inverseSurfaceTransparentTertiaryActive = 'var(--inverse-surface-transparent-tertiary-active)'; /** Инвертированный глубокий прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentDeep = 'var(--inverse-surface-transparent-deep, #F9F9F9A3)'; +export const inverseSurfaceTransparentDeep = 'var(--inverse-surface-transparent-deep)'; /** Инвертированный глубокий прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentDeepHover = 'var(--inverse-surface-transparent-deep-hover, #FAFAFA8F)'; +export const inverseSurfaceTransparentDeepHover = 'var(--inverse-surface-transparent-deep-hover)'; /** Инвертированный глубокий прозрачный фон поверхности/контрола */ -export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transparent-deep-active, #FAFAFAAD)'; +export const inverseSurfaceTransparentDeepActive = 'var(--inverse-surface-transparent-deep-active)'; /** Инвертированный прозрачный фон для карточек */ -export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card, #F9F9F90F)'; +export const inverseSurfaceTransparentCard = 'var(--inverse-surface-transparent-card)'; /** Инвертированный прозрачный фон для карточек */ -export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover, #FAFAFA05)'; +export const inverseSurfaceTransparentCardHover = 'var(--inverse-surface-transparent-card-hover)'; /** Инвертированный прозрачный фон для карточек */ -export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transparent-card-active, #FAFAFA1A)'; +export const inverseSurfaceTransparentCardActive = 'var(--inverse-surface-transparent-card-active)'; /** Инвертированный фон поверхности/контрола без заливки */ -export const inverseSurfaceClear = 'var(--inverse-surface-clear, #FFFFFF00)'; +export const inverseSurfaceClear = 'var(--inverse-surface-clear)'; /** Инвертированный фон поверхности/контрола без заливки */ -export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover, #FFFFFF00)'; +export const inverseSurfaceClearHover = 'var(--inverse-surface-clear-hover)'; /** Инвертированный фон поверхности/контрола без заливки */ -export const inverseSurfaceClearActive = 'var(--inverse-surface-clear-active, #FFFFFF00)'; +export const inverseSurfaceClearActive = 'var(--inverse-surface-clear-active)'; /** Инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #1A9E32)'; +export const inverseSurfaceAccent = 'var(--inverse-surface-accent)'; /** Инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceAccentHover = 'var(--inverse-surface-accent-hover, #1EB83AFF)'; +export const inverseSurfaceAccentHover = 'var(--inverse-surface-accent-hover)'; /** Инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceAccentActive = 'var(--inverse-surface-accent-active, #178C2CFF)'; +export const inverseSurfaceAccentActive = 'var(--inverse-surface-accent-active)'; /** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceAccentMinor = 'var(--inverse-surface-accent-minor, #0A2B10)'; +export const inverseSurfaceAccentMinor = 'var(--inverse-surface-accent-minor)'; /** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceAccentMinorHover = 'var(--inverse-surface-accent-minor-hover, #0E3A16FF)'; +export const inverseSurfaceAccentMinorHover = 'var(--inverse-surface-accent-minor-hover)'; /** Инвертированный акцентный минорный непрозрачный фон поверхности/контрола */ -export const inverseSurfaceAccentMinorActive = 'var(--inverse-surface-accent-minor-active, #061909FF)'; +export const inverseSurfaceAccentMinorActive = 'var(--inverse-surface-accent-minor-active)'; /** Прозрачный инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceTransparentAccent = 'var(--inverse-surface-transparent-accent, #1A9E3247)'; +export const inverseSurfaceTransparentAccent = 'var(--inverse-surface-transparent-accent)'; /** Прозрачный инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceTransparentAccentHover = 'var(--inverse-surface-transparent-accent-hover, #1A9E3233)'; +export const inverseSurfaceTransparentAccentHover = 'var(--inverse-surface-transparent-accent-hover)'; /** Прозрачный инвертированный акцентный фон поверхности/контрола */ -export const inverseSurfaceTransparentAccentActive = 'var(--inverse-surface-transparent-accent-active, #1A9E3252)'; +export const inverseSurfaceTransparentAccentActive = 'var(--inverse-surface-transparent-accent-active)'; /** Инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositive = 'var(--inverse-surface-positive, #1A9E32)'; +export const inverseSurfacePositive = 'var(--inverse-surface-positive)'; /** Инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositiveHover = 'var(--inverse-surface-positive-hover, #1EB83AFF)'; +export const inverseSurfacePositiveHover = 'var(--inverse-surface-positive-hover)'; /** Инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositiveActive = 'var(--inverse-surface-positive-active, #178C2CFF)'; +export const inverseSurfacePositiveActive = 'var(--inverse-surface-positive-active)'; /** Инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarning = 'var(--inverse-surface-warning, #FA5F05)'; +export const inverseSurfaceWarning = 'var(--inverse-surface-warning)'; /** Инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarningHover = 'var(--inverse-surface-warning-hover, #FB782DFF)'; +export const inverseSurfaceWarningHover = 'var(--inverse-surface-warning-hover)'; /** Инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarningActive = 'var(--inverse-surface-warning-active, #E65705FF)'; +export const inverseSurfaceWarningActive = 'var(--inverse-surface-warning-active)'; /** Инвертированный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)'; +export const inverseSurfaceNegative = 'var(--inverse-surface-negative)'; /** Инвертированный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegativeHover = 'var(--inverse-surface-negative-hover, #FF5263FF)'; +export const inverseSurfaceNegativeHover = 'var(--inverse-surface-negative-hover)'; /** Инвертированный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegativeActive = 'var(--inverse-surface-negative-active, #FF142CFF)'; +export const inverseSurfaceNegativeActive = 'var(--inverse-surface-negative-active)'; /** Инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfo = 'var(--inverse-surface-info, #118CDF)'; +export const inverseSurfaceInfo = 'var(--inverse-surface-info)'; /** Инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfoHover = 'var(--inverse-surface-info-hover, #1798EEFF)'; +export const inverseSurfaceInfoHover = 'var(--inverse-surface-info-hover)'; /** Инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfoActive = 'var(--inverse-surface-info-active, #0F81CCFF)'; +export const inverseSurfaceInfoActive = 'var(--inverse-surface-info-active)'; /** Инвертированный минорный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositiveMinor = 'var(--inverse-surface-positive-minor, #0A2B10)'; +export const inverseSurfacePositiveMinor = 'var(--inverse-surface-positive-minor)'; /** Инвертированный минорный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositiveMinorHover = 'var(--inverse-surface-positive-minor-hover, #0E3A16FF)'; +export const inverseSurfacePositiveMinorHover = 'var(--inverse-surface-positive-minor-hover)'; /** Инвертированный минорный цвет фона поверхности/контрола успех */ -export const inverseSurfacePositiveMinorActive = 'var(--inverse-surface-positive-minor-active, #061909FF)'; +export const inverseSurfacePositiveMinorActive = 'var(--inverse-surface-positive-minor-active)'; /** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarningMinor = 'var(--inverse-surface-warning-minor, #3D1D0A)'; +export const inverseSurfaceWarningMinor = 'var(--inverse-surface-warning-minor)'; /** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarningMinorHover = 'var(--inverse-surface-warning-minor-hover, #58290EFF)'; +export const inverseSurfaceWarningMinorHover = 'var(--inverse-surface-warning-minor-hover)'; /** Инвертированный минорный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceWarningMinorActive = 'var(--inverse-surface-warning-minor-active, #2C1507FF)'; +export const inverseSurfaceWarningMinorActive = 'var(--inverse-surface-warning-minor-active)'; /** Инвертированный минорный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegativeMinor = 'var(--inverse-surface-negative-minor, #4A0D13)'; +export const inverseSurfaceNegativeMinor = 'var(--inverse-surface-negative-minor)'; /** Инвертированный минорный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegativeMinorHover = 'var(--inverse-surface-negative-minor-hover, #64121AFF)'; +export const inverseSurfaceNegativeMinorHover = 'var(--inverse-surface-negative-minor-hover)'; /** Инвертированный минорный цвет фона поверхности/контрола ошибка */ -export const inverseSurfaceNegativeMinorActive = 'var(--inverse-surface-negative-minor-active, #380A0FFF)'; +export const inverseSurfaceNegativeMinorActive = 'var(--inverse-surface-negative-minor-active)'; /** Инвертированный минорный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfoMinor = 'var(--inverse-surface-info-minor, #0C283B)'; +export const inverseSurfaceInfoMinor = 'var(--inverse-surface-info-minor)'; /** Инвертированный минорный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfoMinorHover = 'var(--inverse-surface-info-minor-hover, #10344CFF)'; +export const inverseSurfaceInfoMinorHover = 'var(--inverse-surface-info-minor-hover)'; /** Инвертированный минорный цвет фона поверхности/контрола информация */ -export const inverseSurfaceInfoMinorActive = 'var(--inverse-surface-info-minor-active, #091D2AFF)'; +export const inverseSurfaceInfoMinorActive = 'var(--inverse-surface-info-minor-active)'; /** Прозрачный инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfaceTransparentPositive = 'var(--inverse-surface-transparent-positive, #1A9E3247)'; +export const inverseSurfaceTransparentPositive = 'var(--inverse-surface-transparent-positive)'; /** Прозрачный инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfaceTransparentPositiveHover = 'var(--inverse-surface-transparent-positive-hover, #1A9E3233)'; +export const inverseSurfaceTransparentPositiveHover = 'var(--inverse-surface-transparent-positive-hover)'; /** Прозрачный инвертированный цвет фона поверхности/контрола успех */ -export const inverseSurfaceTransparentPositiveActive = 'var(--inverse-surface-transparent-positive-active, #1A9E3252)'; +export const inverseSurfaceTransparentPositiveActive = 'var(--inverse-surface-transparent-positive-active)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentWarning = 'var(--inverse-surface-transparent-warning, #FA5F0547)'; +export const inverseSurfaceTransparentWarning = 'var(--inverse-surface-transparent-warning)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentWarningHover = 'var(--inverse-surface-transparent-warning-hover, #FA5F0533)'; +export const inverseSurfaceTransparentWarningHover = 'var(--inverse-surface-transparent-warning-hover)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentWarningActive = 'var(--inverse-surface-transparent-warning-active, #FA5F0552)'; +export const inverseSurfaceTransparentWarningActive = 'var(--inverse-surface-transparent-warning-active)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentNegative = 'var(--inverse-surface-transparent-negative, #FF293E47)'; +export const inverseSurfaceTransparentNegative = 'var(--inverse-surface-transparent-negative)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentNegativeHover = 'var(--inverse-surface-transparent-negative-hover, #FF293E33)'; +export const inverseSurfaceTransparentNegativeHover = 'var(--inverse-surface-transparent-negative-hover)'; /** Прозрачный инвертированный цвет фона поверхности/контрола предупреждение */ -export const inverseSurfaceTransparentNegativeActive = 'var(--inverse-surface-transparent-negative-active, #FF293E52)'; +export const inverseSurfaceTransparentNegativeActive = 'var(--inverse-surface-transparent-negative-active)'; /** Прозрачный инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceTransparentInfo = 'var(--inverse-surface-transparent-info, #118CDF47)'; +export const inverseSurfaceTransparentInfo = 'var(--inverse-surface-transparent-info)'; /** Прозрачный инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceTransparentInfoHover = 'var(--inverse-surface-transparent-info-hover, #118CDF33)'; +export const inverseSurfaceTransparentInfoHover = 'var(--inverse-surface-transparent-info-hover)'; /** Прозрачный инвертированный цвет фона поверхности/контрола информация */ -export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transparent-info-active, #118CDF52)'; +export const inverseSurfaceTransparentInfoActive = 'var(--inverse-surface-transparent-info-active)'; /** Основной фон */ -export const backgroundPrimary = 'var(--background-primary, #F9F9F9)'; +export const backgroundPrimary = 'var(--background-primary)'; /** Основной фон на темном фоне */ -export const darkBackgroundPrimary = 'var(--dark-background-primary, #080808)'; +export const darkBackgroundPrimary = 'var(--dark-background-primary)'; /** Основной фон на светлом фоне */ -export const lightBackgroundPrimary = 'var(--light-background-primary, #F9F9F9)'; +export const lightBackgroundPrimary = 'var(--light-background-primary)'; /** Инвертированный основной фон */ -export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #080808)'; +export const inverseBackgroundPrimary = 'var(--inverse-background-primary)'; /** Цвет фона паранжи светлый */ -export const overlaySoft = 'var(--overlay-soft, #F9F9F98F)'; +export const overlaySoft = 'var(--overlay-soft)'; /** Цвет фона паранжи темный */ -export const overlayHard = 'var(--overlay-hard, #F9F9F9F5)'; +export const overlayHard = 'var(--overlay-hard)'; /** Цвет фона паранжи размытый */ -export const overlayBlur = 'var(--overlay-blur, #F9F9F933)'; +export const overlayBlur = 'var(--overlay-blur)'; /** Цвет фона паранжи светлый на темном фоне */ -export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft, #0808088F)'; +export const onDarkOverlaySoft = 'var(--on-dark-overlay-soft)'; /** Цвет фона паранжи темный на темном фоне */ -export const onDarkOverlayHard = 'var(--on-dark-overlay-hard, #080808F5)'; +export const onDarkOverlayHard = 'var(--on-dark-overlay-hard)'; /** Цвет фона паранжи размытый на темном фоне */ -export const onDarkOverlayBlur = 'var(--on-dark-overlay-blur, #08080833)'; +export const onDarkOverlayBlur = 'var(--on-dark-overlay-blur)'; /** Цвет фона паранжи светлый на светлом фоне */ -export const onLightOverlaySoft = 'var(--on-light-overlay-soft, #F9F9F98F)'; +export const onLightOverlaySoft = 'var(--on-light-overlay-soft)'; /** Цвет фона паранжи темный на светлом фоне */ -export const onLightOverlayHard = 'var(--on-light-overlay-hard, #F9F9F9F5)'; +export const onLightOverlayHard = 'var(--on-light-overlay-hard)'; /** Цвет фона паранжи размытый на светлом фоне */ -export const onLightOverlayBlur = 'var(--on-light-overlay-blur, #F9F9F933)'; +export const onLightOverlayBlur = 'var(--on-light-overlay-blur)'; /** Инвертированный цвет фона паранжи светлый */ -export const inverseOverlaySoft = 'var(--inverse-overlay-soft, #0808088F)'; +export const inverseOverlaySoft = 'var(--inverse-overlay-soft)'; /** Инвертированный цвет фона паранжи темный */ -export const inverseOverlayHard = 'var(--inverse-overlay-hard, #080808F5)'; +export const inverseOverlayHard = 'var(--inverse-overlay-hard)'; /** Инвертированный цвет фона паранжи размытый */ -export const inverseOverlayBlur = 'var(--inverse-overlay-blur, #08080833)'; +export const inverseOverlayBlur = 'var(--inverse-overlay-blur)'; /** Основной непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidPrimary = 'var(--outline-default-outline-solid-primary, #DDDDDD)'; +export const outlineSolidPrimary = 'var(--outline-solid-primary)'; /** Основной непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidPrimaryHover = 'var(--outline-default-outline-solid-primary-hover, #000000FF)'; +export const outlineSolidPrimaryHover = 'var(--outline-solid-primary-hover)'; /** Основной непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidPrimaryActive = 'var(--outline-default-outline-solid-primary-active, #B3B3B3FF)'; +export const outlineSolidPrimaryActive = 'var(--outline-solid-primary-active)'; /** Вторичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidSecondary = 'var(--outline-default-outline-solid-secondary, #B3B3B3)'; +export const outlineSolidSecondary = 'var(--outline-solid-secondary)'; /** Вторичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidSecondaryHover = - 'var(--outline-default-outline-solid-secondary-hover, #000000FF)'; +export const outlineSolidSecondaryHover = 'var(--outline-solid-secondary-hover)'; /** Вторичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidSecondaryActive = - 'var(--outline-default-outline-solid-secondary-active, #8F8F8FFF)'; +export const outlineSolidSecondaryActive = 'var(--outline-solid-secondary-active)'; /** Третичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidTertiary = 'var(--outline-default-outline-solid-tertiary, #707070)'; +export const outlineSolidTertiary = 'var(--outline-solid-tertiary)'; /** Третичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidTertiaryHover = 'var(--outline-default-outline-solid-tertiary-hover, #000000FF)'; +export const outlineSolidTertiaryHover = 'var(--outline-solid-tertiary-hover)'; /** Третичный непрозрачный цвет обводки */ -export const outlineDefaultOutlineSolidTertiaryActive = - 'var(--outline-default-outline-solid-tertiary-active, #595959FF)'; +export const outlineSolidTertiaryActive = 'var(--outline-solid-tertiary-active)'; /** Прозрачный цвет обводки по умолчанию */ -export const outlineDefaultOutlineTransparentDefault = 'var(--outline-default-outline-transparent-default, #080808F5)'; +export const outlineTransparentDefault = 'var(--outline-transparent-default)'; /** Прозрачный цвет обводки по умолчанию */ -export const outlineDefaultOutlineTransparentDefaultHover = - 'var(--outline-default-outline-transparent-default-hover, #08080893)'; +export const outlineTransparentDefaultHover = 'var(--outline-transparent-default-hover)'; /** Прозрачный цвет обводки по умолчанию */ -export const outlineDefaultOutlineTransparentDefaultActive = - 'var(--outline-default-outline-transparent-default-active, #080808C4)'; +export const outlineTransparentDefaultActive = 'var(--outline-transparent-default-active)'; /** Основной прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentPrimary = 'var(--outline-default-outline-transparent-primary, #0808081F)'; +export const outlineTransparentPrimary = 'var(--outline-transparent-primary)'; /** Основной прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentPrimaryHover = - 'var(--outline-default-outline-transparent-primary-hover, #080808FF)'; +export const outlineTransparentPrimaryHover = 'var(--outline-transparent-primary-hover)'; /** Основной прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentPrimaryActive = - 'var(--outline-default-outline-transparent-primary-active, #08080825)'; +export const outlineTransparentPrimaryActive = 'var(--outline-transparent-primary-active)'; /** Вторичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentSecondary = - 'var(--outline-default-outline-transparent-secondary, #08080847)'; +export const outlineTransparentSecondary = 'var(--outline-transparent-secondary)'; /** Вторичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentSecondaryHover = - 'var(--outline-default-outline-transparent-secondary-hover, #080808FF)'; +export const outlineTransparentSecondaryHover = 'var(--outline-transparent-secondary-hover)'; /** Вторичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentSecondaryActive = - 'var(--outline-default-outline-transparent-secondary-active, #08080856)'; +export const outlineTransparentSecondaryActive = 'var(--outline-transparent-secondary-active)'; /** Третичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentTertiary = - 'var(--outline-default-outline-transparent-tertiary, #0808088F)'; +export const outlineTransparentTertiary = 'var(--outline-transparent-tertiary)'; /** Третичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentTertiaryHover = - 'var(--outline-default-outline-transparent-tertiary-hover, #080808FF)'; +export const outlineTransparentTertiaryHover = 'var(--outline-transparent-tertiary-hover)'; /** Третичный прозрачный цвет обводки */ -export const outlineDefaultOutlineTransparentTertiaryActive = - 'var(--outline-default-outline-transparent-tertiary-active, #080808AB)'; +export const outlineTransparentTertiaryActive = 'var(--outline-transparent-tertiary-active)'; /** Бесцветная обводка */ -export const outlineDefaultOutlineClear = 'var(--outline-default-outline-clear, #FFFFFF00)'; +export const outlineClear = 'var(--outline-clear)'; /** Бесцветная обводка */ -export const outlineDefaultOutlineClearHover = 'var(--outline-default-outline-clear-hover, #FFFFFF00)'; +export const outlineClearHover = 'var(--outline-clear-hover)'; /** Бесцветная обводка */ -export const outlineDefaultOutlineClearActive = 'var(--outline-default-outline-clear-active, #FFFFFF00)'; +export const outlineClearActive = 'var(--outline-clear-active)'; /** Акцентный цвет обводки */ -export const outlineDefaultOutlineAccent = 'var(--outline-default-outline-accent, #108E26)'; +export const outlineAccent = 'var(--outline-accent)'; /** Акцентный цвет обводки */ -export const outlineDefaultOutlineAccentHover = 'var(--outline-default-outline-accent-hover, #14B32EFF)'; +export const outlineAccentHover = 'var(--outline-accent-hover)'; /** Акцентный цвет обводки */ -export const outlineDefaultOutlineAccentActive = 'var(--outline-default-outline-accent-active, #0C6A1BFF)'; +export const outlineAccentActive = 'var(--outline-accent-active)'; /** Акцентный минорный непрозрачный цвет обводки */ -export const outlineDefaultOutlineAccentMinor = 'var(--outline-default-outline-accent-minor, #45E362)'; +export const outlineAccentMinor = 'var(--outline-accent-minor)'; /** Акцентный минорный непрозрачный цвет обводки */ -export const outlineDefaultOutlineAccentMinorHover = 'var(--outline-default-outline-accent-minor-hover, #68E880FF)'; +export const outlineAccentMinorHover = 'var(--outline-accent-minor-hover)'; /** Акцентный минорный непрозрачный цвет обводки */ -export const outlineDefaultOutlineAccentMinorActive = 'var(--outline-default-outline-accent-minor-active, #21DE44FF)'; +export const outlineAccentMinorActive = 'var(--outline-accent-minor-active)'; /** Прозрачный акцентный цвет обводки */ -export const outlineDefaultOutlineTransparentAccent = 'var(--outline-default-outline-transparent-accent, #108E2666)'; +export const outlineTransparentAccent = 'var(--outline-transparent-accent)'; /** Прозрачный акцентный цвет обводки */ -export const outlineDefaultOutlineTransparentAccentHover = - 'var(--outline-default-outline-transparent-accent-hover, #108E25FF)'; +export const outlineTransparentAccentHover = 'var(--outline-transparent-accent-hover)'; /** Прозрачный акцентный цвет обводки */ -export const outlineDefaultOutlineTransparentAccentActive = - 'var(--outline-default-outline-transparent-accent-active, #108E257A)'; +export const outlineTransparentAccentActive = 'var(--outline-transparent-accent-active)'; /** Цвет обводки успех */ -export const outlineDefaultOutlinePositive = 'var(--outline-default-outline-positive, #108E26)'; +export const outlinePositive = 'var(--outline-positive)'; /** Цвет обводки успех */ -export const outlineDefaultOutlinePositiveHover = 'var(--outline-default-outline-positive-hover, #14B32EFF)'; +export const outlinePositiveHover = 'var(--outline-positive-hover)'; /** Цвет обводки успех */ -export const outlineDefaultOutlinePositiveActive = 'var(--outline-default-outline-positive-active, #0C6A1BFF)'; +export const outlinePositiveActive = 'var(--outline-positive-active)'; /** Цвет обводки предупреждение */ -export const outlineDefaultOutlineWarning = 'var(--outline-default-outline-warning, #E85702)'; +export const outlineWarning = 'var(--outline-warning)'; /** Цвет обводки предупреждение */ -export const outlineDefaultOutlineWarningHover = 'var(--outline-default-outline-warning-hover, #FD6B17FF)'; +export const outlineWarningHover = 'var(--outline-warning-hover)'; /** Цвет обводки предупреждение */ -export const outlineDefaultOutlineWarningActive = 'var(--outline-default-outline-warning-active, #C04802FF)'; +export const outlineWarningActive = 'var(--outline-warning-active)'; /** Цвет обводки ошибка */ -export const outlineDefaultOutlineNegative = 'var(--outline-default-outline-negative, #F31B31)'; +export const outlineNegative = 'var(--outline-negative)'; /** Цвет обводки ошибка */ -export const outlineDefaultOutlineNegativeHover = 'var(--outline-default-outline-negative-hover, #F54254FF)'; +export const outlineNegativeHover = 'var(--outline-negative-hover)'; /** Цвет обводки ошибка */ -export const outlineDefaultOutlineNegativeActive = 'var(--outline-default-outline-negative-active, #DA0B20FF)'; +export const outlineNegativeActive = 'var(--outline-negative-active)'; /** Цвет обводки информация */ -export const outlineDefaultOutlineInfo = 'var(--outline-default-outline-info, #0B7ECB)'; +export const outlineInfo = 'var(--outline-info)'; /** Цвет обводки информация */ -export const outlineDefaultOutlineInfoHover = 'var(--outline-default-outline-info-hover, #0D96F2FF)'; +export const outlineInfoHover = 'var(--outline-info-hover)'; /** Цвет обводки информация */ -export const outlineDefaultOutlineInfoActive = 'var(--outline-default-outline-info-active, #0966A5FF)'; +export const outlineInfoActive = 'var(--outline-info-active)'; /** Минорный цвет обводки успех */ -export const outlineDefaultOutlinePositiveMinor = 'var(--outline-default-outline-positive-minor, #45E362)'; +export const outlinePositiveMinor = 'var(--outline-positive-minor)'; /** Минорный цвет обводки успех */ -export const outlineDefaultOutlinePositiveMinorHover = 'var(--outline-default-outline-positive-minor-hover, #68E880FF)'; +export const outlinePositiveMinorHover = 'var(--outline-positive-minor-hover)'; /** Минорный цвет обводки успех */ -export const outlineDefaultOutlinePositiveMinorActive = - 'var(--outline-default-outline-positive-minor-active, #21DE44FF)'; +export const outlinePositiveMinorActive = 'var(--outline-positive-minor-active)'; /** Минорный цвет обводки предупреждение */ -export const outlineDefaultOutlineWarningMinor = 'var(--outline-default-outline-warning-minor, #FFB38A)'; +export const outlineWarningMinor = 'var(--outline-warning-minor)'; /** Минорный цвет обводки предупреждение */ -export const outlineDefaultOutlineWarningMinorHover = 'var(--outline-default-outline-warning-minor-hover, #FFCDB3FF)'; +export const outlineWarningMinorHover = 'var(--outline-warning-minor-hover)'; /** Минорный цвет обводки предупреждение */ -export const outlineDefaultOutlineWarningMinorActive = 'var(--outline-default-outline-warning-minor-active, #FF9861FF)'; +export const outlineWarningMinorActive = 'var(--outline-warning-minor-active)'; /** Минорный цвет обводки ошибка */ -export const outlineDefaultOutlineNegativeMinor = 'var(--outline-default-outline-negative-minor, #FEB3BB)'; +export const outlineNegativeMinor = 'var(--outline-negative-minor)'; /** Минорный цвет обводки ошибка */ -export const outlineDefaultOutlineNegativeMinorHover = 'var(--outline-default-outline-negative-minor-hover, #FEDCDFFF)'; +export const outlineNegativeMinorHover = 'var(--outline-negative-minor-hover)'; /** Минорный цвет обводки ошибка */ -export const outlineDefaultOutlineNegativeMinorActive = - 'var(--outline-default-outline-negative-minor-active, #FD8B97FF)'; +export const outlineNegativeMinorActive = 'var(--outline-negative-minor-active)'; /** Минорный цвет обводки информация */ -export const outlineDefaultOutlineInfoMinor = 'var(--outline-default-outline-info-minor, #85CEFF)'; +export const outlineInfoMinor = 'var(--outline-info-minor)'; /** Минорный цвет обводки информация */ -export const outlineDefaultOutlineInfoMinorHover = 'var(--outline-default-outline-info-minor-hover, #ADDEFFFF)'; +export const outlineInfoMinorHover = 'var(--outline-info-minor-hover)'; /** Минорный цвет обводки информация */ -export const outlineDefaultOutlineInfoMinorActive = 'var(--outline-default-outline-info-minor-active, #5CBEFFFF)'; +export const outlineInfoMinorActive = 'var(--outline-info-minor-active)'; /** Прозрачный цвет обводки успех */ -export const outlineDefaultOutlineTransparentPositive = - 'var(--outline-default-outline-transparent-positive, #108E2647)'; +export const outlineTransparentPositive = 'var(--outline-transparent-positive)'; /** Прозрачный цвет обводки успех */ -export const outlineDefaultOutlineTransparentPositiveHover = - 'var(--outline-default-outline-transparent-positive-hover, #108E25FF)'; +export const outlineTransparentPositiveHover = 'var(--outline-transparent-positive-hover)'; /** Прозрачный цвет обводки успех */ -export const outlineDefaultOutlineTransparentPositiveActive = - 'var(--outline-default-outline-transparent-positive-active, #108E2556)'; +export const outlineTransparentPositiveActive = 'var(--outline-transparent-positive-active)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentWarning = 'var(--outline-default-outline-transparent-warning, #E8570247)'; +export const outlineTransparentWarning = 'var(--outline-transparent-warning)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentWarningHover = - 'var(--outline-default-outline-transparent-warning-hover, #E85702FF)'; +export const outlineTransparentWarningHover = 'var(--outline-transparent-warning-hover)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentWarningActive = - 'var(--outline-default-outline-transparent-warning-active, #E8570256)'; +export const outlineTransparentWarningActive = 'var(--outline-transparent-warning-active)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentNegative = - 'var(--outline-default-outline-transparent-negative, #F31B3147)'; +export const outlineTransparentNegative = 'var(--outline-transparent-negative)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentNegativeHover = - 'var(--outline-default-outline-transparent-negative-hover, #F31B31FF)'; +export const outlineTransparentNegativeHover = 'var(--outline-transparent-negative-hover)'; /** Прозрачный цвет обводки предупреждение */ -export const outlineDefaultOutlineTransparentNegativeActive = - 'var(--outline-default-outline-transparent-negative-active, #F31B3156)'; +export const outlineTransparentNegativeActive = 'var(--outline-transparent-negative-active)'; /** Прозрачный цвет обводки информация */ -export const outlineDefaultOutlineTransparentInfo = 'var(--outline-default-outline-transparent-info, #0B7ECB47)'; +export const outlineTransparentInfo = 'var(--outline-transparent-info)'; /** Прозрачный цвет обводки информация */ -export const outlineDefaultOutlineTransparentInfoHover = - 'var(--outline-default-outline-transparent-info-hover, #0B7ECBFF)'; +export const outlineTransparentInfoHover = 'var(--outline-transparent-info-hover)'; /** Прозрачный цвет обводки информация */ -export const outlineDefaultOutlineTransparentInfoActive = - 'var(--outline-default-outline-transparent-info-active, #0B7ECB56)'; +export const outlineTransparentInfoActive = 'var(--outline-transparent-info-active)'; /** Основной непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidPrimary = 'var(--outline-on-dark-outline-solid-primary, #262626)'; +export const onDarkOutlineSolidPrimary = 'var(--on-dark-outline-solid-primary)'; /** Основной непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidPrimaryHover = 'var(--outline-on-dark-outline-solid-primary-hover, #787878FF)'; +export const onDarkOutlineSolidPrimaryHover = 'var(--on-dark-outline-solid-primary-hover)'; /** Основной непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidPrimaryActive = 'var(--outline-on-dark-outline-solid-primary-active, #4F4F4FFF)'; +export const onDarkOutlineSolidPrimaryActive = 'var(--on-dark-outline-solid-primary-active)'; /** Вторичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidSecondary = 'var(--outline-on-dark-outline-solid-secondary, #363636)'; +export const onDarkOutlineSolidSecondary = 'var(--on-dark-outline-solid-secondary)'; /** Вторичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidSecondaryHover = - 'var(--outline-on-dark-outline-solid-secondary-hover, #878787FF)'; +export const onDarkOutlineSolidSecondaryHover = 'var(--on-dark-outline-solid-secondary-hover)'; /** Вторичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidSecondaryActive = - 'var(--outline-on-dark-outline-solid-secondary-active, #5E5E5EFF)'; +export const onDarkOutlineSolidSecondaryActive = 'var(--on-dark-outline-solid-secondary-active)'; /** Третичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidTertiary = 'var(--outline-on-dark-outline-solid-tertiary, #4E4E4E)'; +export const onDarkOutlineSolidTertiary = 'var(--on-dark-outline-solid-tertiary)'; /** Третичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidTertiaryHover = 'var(--outline-on-dark-outline-solid-tertiary-hover, #000000FF)'; +export const onDarkOutlineSolidTertiaryHover = 'var(--on-dark-outline-solid-tertiary-hover)'; /** Третичный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineSolidTertiaryActive = - 'var(--outline-on-dark-outline-solid-tertiary-active, #404040FF)'; +export const onDarkOutlineSolidTertiaryActive = 'var(--on-dark-outline-solid-tertiary-active)'; /** Прозрачный цвет обводки по умолчанию на темном фоне */ -export const outlineOnDarkOutlineTransparentDefault = 'var(--outline-on-dark-outline-transparent-default, #F9F9F9F5)'; +export const onDarkOutlineTransparentDefault = 'var(--on-dark-outline-transparent-default)'; /** Прозрачный цвет обводки по умолчанию на темном фоне */ -export const outlineOnDarkOutlineTransparentDefaultHover = - 'var(--outline-on-dark-outline-transparent-default-hover, #FAFAFA93)'; +export const onDarkOutlineTransparentDefaultHover = 'var(--on-dark-outline-transparent-default-hover)'; /** Прозрачный цвет обводки по умолчанию на темном фоне */ -export const outlineOnDarkOutlineTransparentDefaultActive = - 'var(--outline-on-dark-outline-transparent-default-active, #FAFAFAC4)'; +export const onDarkOutlineTransparentDefaultActive = 'var(--on-dark-outline-transparent-default-active)'; /** Основной прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentPrimary = 'var(--outline-on-dark-outline-transparent-primary, #F9F9F91F)'; +export const onDarkOutlineTransparentPrimary = 'var(--on-dark-outline-transparent-primary)'; /** Основной прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentPrimaryHover = - 'var(--outline-on-dark-outline-transparent-primary-hover, #FAFAFAFF)'; +export const onDarkOutlineTransparentPrimaryHover = 'var(--on-dark-outline-transparent-primary-hover)'; /** Основной прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentPrimaryActive = - 'var(--outline-on-dark-outline-transparent-primary-active, #FAFAFA25)'; +export const onDarkOutlineTransparentPrimaryActive = 'var(--on-dark-outline-transparent-primary-active)'; /** Вторичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentSecondary = - 'var(--outline-on-dark-outline-transparent-secondary, #F9F9F933)'; +export const onDarkOutlineTransparentSecondary = 'var(--on-dark-outline-transparent-secondary)'; /** Вторичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentSecondaryHover = - 'var(--outline-on-dark-outline-transparent-secondary-hover, #FAFAFAFF)'; +export const onDarkOutlineTransparentSecondaryHover = 'var(--on-dark-outline-transparent-secondary-hover)'; /** Вторичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentSecondaryActive = - 'var(--outline-on-dark-outline-transparent-secondary-active, #FAFAFA3D)'; +export const onDarkOutlineTransparentSecondaryActive = 'var(--on-dark-outline-transparent-secondary-active)'; /** Третичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentTertiary = 'var(--outline-on-dark-outline-transparent-tertiary, #F9F9F947)'; +export const onDarkOutlineTransparentTertiary = 'var(--on-dark-outline-transparent-tertiary)'; /** Третичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentTertiaryHover = - 'var(--outline-on-dark-outline-transparent-tertiary-hover, #FAFAFAFF)'; +export const onDarkOutlineTransparentTertiaryHover = 'var(--on-dark-outline-transparent-tertiary-hover)'; /** Третичный прозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentTertiaryActive = - 'var(--outline-on-dark-outline-transparent-tertiary-active, #FAFAFA56)'; +export const onDarkOutlineTransparentTertiaryActive = 'var(--on-dark-outline-transparent-tertiary-active)'; /** Бесцветная обводка на темном фоне */ -export const outlineOnDarkOutlineClear = 'var(--outline-on-dark-outline-clear, #FFFFFF00)'; +export const onDarkOutlineClear = 'var(--on-dark-outline-clear)'; /** Бесцветная обводка на темном фоне */ -export const outlineOnDarkOutlineClearHover = 'var(--outline-on-dark-outline-clear-hover, #FFFFFF00)'; +export const onDarkOutlineClearHover = 'var(--on-dark-outline-clear-hover)'; /** Бесцветная обводка на темном фоне */ -export const outlineOnDarkOutlineClearActive = 'var(--outline-on-dark-outline-clear-active, #FFFFFF00)'; +export const onDarkOutlineClearActive = 'var(--on-dark-outline-clear-active)'; /** Акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccent = 'var(--outline-on-dark-outline-accent, #1A9E32)'; +export const onDarkOutlineAccent = 'var(--on-dark-outline-accent)'; /** Акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccentHover = 'var(--outline-on-dark-outline-accent-hover, #1FC13DFF)'; +export const onDarkOutlineAccentHover = 'var(--on-dark-outline-accent-hover)'; /** Акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccentActive = 'var(--outline-on-dark-outline-accent-active, #147B27FF)'; +export const onDarkOutlineAccentActive = 'var(--on-dark-outline-accent-active)'; /** Акцентный минорный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccentMinor = 'var(--outline-on-dark-outline-accent-minor, #0A4014)'; +export const onDarkOutlineAccentMinor = 'var(--on-dark-outline-accent-minor)'; /** Акцентный минорный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccentMinorHover = 'var(--outline-on-dark-outline-accent-minor-hover, #15892BFF)'; +export const onDarkOutlineAccentMinorHover = 'var(--on-dark-outline-accent-minor-hover)'; /** Акцентный минорный непрозрачный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineAccentMinorActive = 'var(--outline-on-dark-outline-accent-minor-active, #106520FF)'; +export const onDarkOutlineAccentMinorActive = 'var(--on-dark-outline-accent-minor-active)'; /** Прозрачный акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentAccent = 'var(--outline-on-dark-outline-transparent-accent, #1A9E3266)'; +export const onDarkOutlineTransparentAccent = 'var(--on-dark-outline-transparent-accent)'; /** Прозрачный акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentAccentHover = - 'var(--outline-on-dark-outline-transparent-accent-hover, #1A9E32FF)'; +export const onDarkOutlineTransparentAccentHover = 'var(--on-dark-outline-transparent-accent-hover)'; /** Прозрачный акцентный цвет обводки на темном фоне */ -export const outlineOnDarkOutlineTransparentAccentActive = - 'var(--outline-on-dark-outline-transparent-accent-active, #1A9E327A)'; +export const onDarkOutlineTransparentAccentActive = 'var(--on-dark-outline-transparent-accent-active)'; /** Цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositive = 'var(--outline-on-dark-outline-positive, #1A9E32)'; +export const onDarkOutlinePositive = 'var(--on-dark-outline-positive)'; /** Цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositiveHover = 'var(--outline-on-dark-outline-positive-hover, #1FC13DFF)'; +export const onDarkOutlinePositiveHover = 'var(--on-dark-outline-positive-hover)'; /** Цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositiveActive = 'var(--outline-on-dark-outline-positive-active, #147B27FF)'; +export const onDarkOutlinePositiveActive = 'var(--on-dark-outline-positive-active)'; /** Цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarning = 'var(--outline-on-dark-outline-warning, #FA5F05)'; +export const onDarkOutlineWarning = 'var(--on-dark-outline-warning)'; /** Цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarningHover = 'var(--outline-on-dark-outline-warning-hover, #FB782DFF)'; +export const onDarkOutlineWarningHover = 'var(--on-dark-outline-warning-hover)'; /** Цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarningActive = 'var(--outline-on-dark-outline-warning-active, #D25004FF)'; +export const onDarkOutlineWarningActive = 'var(--on-dark-outline-warning-active)'; /** Цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegative = 'var(--outline-on-dark-outline-negative, #FF293E)'; +export const onDarkOutlineNegative = 'var(--on-dark-outline-negative)'; /** Цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegativeHover = 'var(--outline-on-dark-outline-negative-hover, #FF5263FF)'; +export const onDarkOutlineNegativeHover = 'var(--on-dark-outline-negative-hover)'; /** Цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegativeActive = 'var(--outline-on-dark-outline-negative-active, #FF001AFF)'; +export const onDarkOutlineNegativeActive = 'var(--on-dark-outline-negative-active)'; /** Цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfo = 'var(--outline-on-dark-outline-info, #118CDF)'; +export const onDarkOutlineInfo = 'var(--on-dark-outline-info)'; /** Цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfoHover = 'var(--outline-on-dark-outline-info-hover, #2AA0EFFF)'; +export const onDarkOutlineInfoHover = 'var(--on-dark-outline-info-hover)'; /** Цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfoActive = 'var(--outline-on-dark-outline-info-active, #0E75B9FF)'; +export const onDarkOutlineInfoActive = 'var(--on-dark-outline-info-active)'; /** Минорный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositiveMinor = 'var(--outline-on-dark-outline-positive-minor, #0A4014)'; +export const onDarkOutlinePositiveMinor = 'var(--on-dark-outline-positive-minor)'; /** Минорный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositiveMinorHover = 'var(--outline-on-dark-outline-positive-minor-hover, #15892BFF)'; +export const onDarkOutlinePositiveMinorHover = 'var(--on-dark-outline-positive-minor-hover)'; /** Минорный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlinePositiveMinorActive = - 'var(--outline-on-dark-outline-positive-minor-active, #106520FF)'; +export const onDarkOutlinePositiveMinorActive = 'var(--on-dark-outline-positive-minor-active)'; /** Минорный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarningMinor = 'var(--outline-on-dark-outline-warning-minor, #5C2709)'; +export const onDarkOutlineWarningMinor = 'var(--on-dark-outline-warning-minor)'; /** Минорный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarningMinorHover = 'var(--outline-on-dark-outline-warning-minor-hover, #A74811FF)'; +export const onDarkOutlineWarningMinorHover = 'var(--on-dark-outline-warning-minor-hover)'; /** Минорный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineWarningMinorActive = 'var(--outline-on-dark-outline-warning-minor-active, #82380DFF)'; +export const onDarkOutlineWarningMinorActive = 'var(--on-dark-outline-warning-minor-active)'; /** Минорный цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegativeMinor = 'var(--outline-on-dark-outline-negative-minor, #6B1019)'; +export const onDarkOutlineNegativeMinor = 'var(--on-dark-outline-negative-minor)'; /** Минорный цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegativeMinorHover = 'var(--outline-on-dark-outline-negative-minor-hover, #B11B2AFF)'; +export const onDarkOutlineNegativeMinorHover = 'var(--on-dark-outline-negative-minor-hover)'; /** Минорный цвет обводки ошибка на темном фоне */ -export const outlineOnDarkOutlineNegativeMinorActive = - 'var(--outline-on-dark-outline-negative-minor-active, #8E1521FF)'; +export const onDarkOutlineNegativeMinorActive = 'var(--on-dark-outline-negative-minor-active)'; /** Минорный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfoMinor = 'var(--outline-on-dark-outline-info-minor, #0D3B59)'; +export const onDarkOutlineInfoMinor = 'var(--on-dark-outline-info-minor)'; /** Минорный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfoMinorHover = 'var(--outline-on-dark-outline-info-minor-hover, #176AA1FF)'; +export const onDarkOutlineInfoMinorHover = 'var(--on-dark-outline-info-minor-hover)'; /** Минорный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineInfoMinorActive = 'var(--outline-on-dark-outline-info-minor-active, #12527DFF)'; +export const onDarkOutlineInfoMinorActive = 'var(--on-dark-outline-info-minor-active)'; /** Прозрачный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlineTransparentPositive = 'var(--outline-on-dark-outline-transparent-positive, #1A9E3247)'; +export const onDarkOutlineTransparentPositive = 'var(--on-dark-outline-transparent-positive)'; /** Прозрачный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlineTransparentPositiveHover = - 'var(--outline-on-dark-outline-transparent-positive-hover, #1A9E32FF)'; +export const onDarkOutlineTransparentPositiveHover = 'var(--on-dark-outline-transparent-positive-hover)'; /** Прозрачный цвет обводки успех на темном фоне */ -export const outlineOnDarkOutlineTransparentPositiveActive = - 'var(--outline-on-dark-outline-transparent-positive-active, #1A9E3256)'; +export const onDarkOutlineTransparentPositiveActive = 'var(--on-dark-outline-transparent-positive-active)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentWarning = 'var(--outline-on-dark-outline-transparent-warning, #FA5F0547)'; +export const onDarkOutlineTransparentWarning = 'var(--on-dark-outline-transparent-warning)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentWarningHover = - 'var(--outline-on-dark-outline-transparent-warning-hover, #FA5F05FF)'; +export const onDarkOutlineTransparentWarningHover = 'var(--on-dark-outline-transparent-warning-hover)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentWarningActive = - 'var(--outline-on-dark-outline-transparent-warning-active, #FA5F0556)'; +export const onDarkOutlineTransparentWarningActive = 'var(--on-dark-outline-transparent-warning-active)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentNegative = 'var(--outline-on-dark-outline-transparent-negative, #FF293E47)'; +export const onDarkOutlineTransparentNegative = 'var(--on-dark-outline-transparent-negative)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentNegativeHover = - 'var(--outline-on-dark-outline-transparent-negative-hover, #FF293EFF)'; +export const onDarkOutlineTransparentNegativeHover = 'var(--on-dark-outline-transparent-negative-hover)'; /** Прозрачный цвет обводки предупреждение на темном фоне */ -export const outlineOnDarkOutlineTransparentNegativeActive = - 'var(--outline-on-dark-outline-transparent-negative-active, #FF293E56)'; +export const onDarkOutlineTransparentNegativeActive = 'var(--on-dark-outline-transparent-negative-active)'; /** Прозрачный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineTransparentInfo = 'var(--outline-on-dark-outline-transparent-info, #118CDF47)'; +export const onDarkOutlineTransparentInfo = 'var(--on-dark-outline-transparent-info)'; /** Прозрачный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineTransparentInfoHover = - 'var(--outline-on-dark-outline-transparent-info-hover, #118CDFFF)'; +export const onDarkOutlineTransparentInfoHover = 'var(--on-dark-outline-transparent-info-hover)'; /** Прозрачный цвет обводки информация на темном фоне */ -export const outlineOnDarkOutlineTransparentInfoActive = - 'var(--outline-on-dark-outline-transparent-info-active, #118CDF56)'; +export const onDarkOutlineTransparentInfoActive = 'var(--on-dark-outline-transparent-info-active)'; /** Основной непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidPrimary = 'var(--outline-on-light-outline-solid-primary, #DDDDDD)'; +export const onLightOutlineSolidPrimary = 'var(--on-light-outline-solid-primary)'; /** Основной непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidPrimaryHover = 'var(--outline-on-light-outline-solid-primary-hover, #000000FF)'; +export const onLightOutlineSolidPrimaryHover = 'var(--on-light-outline-solid-primary-hover)'; /** Основной непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidPrimaryActive = - 'var(--outline-on-light-outline-solid-primary-active, #B3B3B3FF)'; +export const onLightOutlineSolidPrimaryActive = 'var(--on-light-outline-solid-primary-active)'; /** Вторичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidSecondary = 'var(--outline-on-light-outline-solid-secondary, #B3B3B3)'; +export const onLightOutlineSolidSecondary = 'var(--on-light-outline-solid-secondary)'; /** Вторичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidSecondaryHover = - 'var(--outline-on-light-outline-solid-secondary-hover, #000000FF)'; +export const onLightOutlineSolidSecondaryHover = 'var(--on-light-outline-solid-secondary-hover)'; /** Вторичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidSecondaryActive = - 'var(--outline-on-light-outline-solid-secondary-active, #8F8F8FFF)'; +export const onLightOutlineSolidSecondaryActive = 'var(--on-light-outline-solid-secondary-active)'; /** Третичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidTertiary = 'var(--outline-on-light-outline-solid-tertiary, #707070)'; +export const onLightOutlineSolidTertiary = 'var(--on-light-outline-solid-tertiary)'; /** Третичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidTertiaryHover = - 'var(--outline-on-light-outline-solid-tertiary-hover, #000000FF)'; +export const onLightOutlineSolidTertiaryHover = 'var(--on-light-outline-solid-tertiary-hover)'; /** Третичный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineSolidTertiaryActive = - 'var(--outline-on-light-outline-solid-tertiary-active, #595959FF)'; +export const onLightOutlineSolidTertiaryActive = 'var(--on-light-outline-solid-tertiary-active)'; /** Прозрачный цвет обводки по умолчанию на светлом фоне */ -export const outlineOnLightOutlineTransparentDefault = 'var(--outline-on-light-outline-transparent-default, #080808F5)'; +export const onLightOutlineTransparentDefault = 'var(--on-light-outline-transparent-default)'; /** Прозрачный цвет обводки по умолчанию на светлом фоне */ -export const outlineOnLightOutlineTransparentDefaultHover = - 'var(--outline-on-light-outline-transparent-default-hover, #08080893)'; +export const onLightOutlineTransparentDefaultHover = 'var(--on-light-outline-transparent-default-hover)'; /** Прозрачный цвет обводки по умолчанию на светлом фоне */ -export const outlineOnLightOutlineTransparentDefaultActive = - 'var(--outline-on-light-outline-transparent-default-active, #080808C4)'; +export const onLightOutlineTransparentDefaultActive = 'var(--on-light-outline-transparent-default-active)'; /** Основной прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentPrimary = 'var(--outline-on-light-outline-transparent-primary, #0808081F)'; +export const onLightOutlineTransparentPrimary = 'var(--on-light-outline-transparent-primary)'; /** Основной прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentPrimaryHover = - 'var(--outline-on-light-outline-transparent-primary-hover, #080808FF)'; +export const onLightOutlineTransparentPrimaryHover = 'var(--on-light-outline-transparent-primary-hover)'; /** Основной прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentPrimaryActive = - 'var(--outline-on-light-outline-transparent-primary-active, #08080825)'; +export const onLightOutlineTransparentPrimaryActive = 'var(--on-light-outline-transparent-primary-active)'; /** Вторичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentSecondary = - 'var(--outline-on-light-outline-transparent-secondary, #08080847)'; +export const onLightOutlineTransparentSecondary = 'var(--on-light-outline-transparent-secondary)'; /** Вторичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentSecondaryHover = - 'var(--outline-on-light-outline-transparent-secondary-hover, #080808FF)'; +export const onLightOutlineTransparentSecondaryHover = 'var(--on-light-outline-transparent-secondary-hover)'; /** Вторичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentSecondaryActive = - 'var(--outline-on-light-outline-transparent-secondary-active, #08080856)'; +export const onLightOutlineTransparentSecondaryActive = 'var(--on-light-outline-transparent-secondary-active)'; /** Третичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentTertiary = - 'var(--outline-on-light-outline-transparent-tertiary, #0808088F)'; +export const onLightOutlineTransparentTertiary = 'var(--on-light-outline-transparent-tertiary)'; /** Третичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentTertiaryHover = - 'var(--outline-on-light-outline-transparent-tertiary-hover, #080808FF)'; +export const onLightOutlineTransparentTertiaryHover = 'var(--on-light-outline-transparent-tertiary-hover)'; /** Третичный прозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentTertiaryActive = - 'var(--outline-on-light-outline-transparent-tertiary-active, #080808AB)'; +export const onLightOutlineTransparentTertiaryActive = 'var(--on-light-outline-transparent-tertiary-active)'; /** Бесцветная обводка на светлом фоне */ -export const outlineOnLightOutlineClear = 'var(--outline-on-light-outline-clear, #FFFFFF00)'; +export const onLightOutlineClear = 'var(--on-light-outline-clear)'; /** Бесцветная обводка на светлом фоне */ -export const outlineOnLightOutlineClearHover = 'var(--outline-on-light-outline-clear-hover, #FFFFFF00)'; +export const onLightOutlineClearHover = 'var(--on-light-outline-clear-hover)'; /** Бесцветная обводка на светлом фоне */ -export const outlineOnLightOutlineClearActive = 'var(--outline-on-light-outline-clear-active, #FFFFFF00)'; +export const onLightOutlineClearActive = 'var(--on-light-outline-clear-active)'; /** Акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccent = 'var(--outline-on-light-outline-accent, #108E26)'; +export const onLightOutlineAccent = 'var(--on-light-outline-accent)'; /** Акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccentHover = 'var(--outline-on-light-outline-accent-hover, #14B32EFF)'; +export const onLightOutlineAccentHover = 'var(--on-light-outline-accent-hover)'; /** Акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccentActive = 'var(--outline-on-light-outline-accent-active, #0C6A1BFF)'; +export const onLightOutlineAccentActive = 'var(--on-light-outline-accent-active)'; /** Акцентный минорный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccentMinor = 'var(--outline-on-light-outline-accent-minor, #45E362)'; +export const onLightOutlineAccentMinor = 'var(--on-light-outline-accent-minor)'; /** Акцентный минорный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccentMinorHover = 'var(--outline-on-light-outline-accent-minor-hover, #68E880FF)'; +export const onLightOutlineAccentMinorHover = 'var(--on-light-outline-accent-minor-hover)'; /** Акцентный минорный непрозрачный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineAccentMinorActive = 'var(--outline-on-light-outline-accent-minor-active, #21DE44FF)'; +export const onLightOutlineAccentMinorActive = 'var(--on-light-outline-accent-minor-active)'; /** Прозрачный акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentAccent = 'var(--outline-on-light-outline-transparent-accent, #108E2666)'; +export const onLightOutlineTransparentAccent = 'var(--on-light-outline-transparent-accent)'; /** Прозрачный акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentAccentHover = - 'var(--outline-on-light-outline-transparent-accent-hover, #108E25FF)'; +export const onLightOutlineTransparentAccentHover = 'var(--on-light-outline-transparent-accent-hover)'; /** Прозрачный акцентный цвет обводки на светлом фоне */ -export const outlineOnLightOutlineTransparentAccentActive = - 'var(--outline-on-light-outline-transparent-accent-active, #108E257A)'; +export const onLightOutlineTransparentAccentActive = 'var(--on-light-outline-transparent-accent-active)'; /** Цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositive = 'var(--outline-on-light-outline-positive, #108E26)'; +export const onLightOutlinePositive = 'var(--on-light-outline-positive)'; /** Цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositiveHover = 'var(--outline-on-light-outline-positive-hover, #14B32EFF)'; +export const onLightOutlinePositiveHover = 'var(--on-light-outline-positive-hover)'; /** Цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositiveActive = 'var(--outline-on-light-outline-positive-active, #0C6A1BFF)'; +export const onLightOutlinePositiveActive = 'var(--on-light-outline-positive-active)'; /** Цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarning = 'var(--outline-on-light-outline-warning, #E85702)'; +export const onLightOutlineWarning = 'var(--on-light-outline-warning)'; /** Цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarningHover = 'var(--outline-on-light-outline-warning-hover, #FD6B17FF)'; +export const onLightOutlineWarningHover = 'var(--on-light-outline-warning-hover)'; /** Цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarningActive = 'var(--outline-on-light-outline-warning-active, #C04802FF)'; +export const onLightOutlineWarningActive = 'var(--on-light-outline-warning-active)'; /** Цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegative = 'var(--outline-on-light-outline-negative, #F31B31)'; +export const onLightOutlineNegative = 'var(--on-light-outline-negative)'; /** Цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegativeHover = 'var(--outline-on-light-outline-negative-hover, #F54254FF)'; +export const onLightOutlineNegativeHover = 'var(--on-light-outline-negative-hover)'; /** Цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegativeActive = 'var(--outline-on-light-outline-negative-active, #DA0B20FF)'; +export const onLightOutlineNegativeActive = 'var(--on-light-outline-negative-active)'; /** Цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfo = 'var(--outline-on-light-outline-info, #0B7ECB)'; +export const onLightOutlineInfo = 'var(--on-light-outline-info)'; /** Цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfoHover = 'var(--outline-on-light-outline-info-hover, #0D96F2FF)'; +export const onLightOutlineInfoHover = 'var(--on-light-outline-info-hover)'; /** Цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfoActive = 'var(--outline-on-light-outline-info-active, #0966A5FF)'; +export const onLightOutlineInfoActive = 'var(--on-light-outline-info-active)'; /** Минорный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositiveMinor = 'var(--outline-on-light-outline-positive-minor, #45E362)'; +export const onLightOutlinePositiveMinor = 'var(--on-light-outline-positive-minor)'; /** Минорный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositiveMinorHover = - 'var(--outline-on-light-outline-positive-minor-hover, #68E880FF)'; +export const onLightOutlinePositiveMinorHover = 'var(--on-light-outline-positive-minor-hover)'; /** Минорный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlinePositiveMinorActive = - 'var(--outline-on-light-outline-positive-minor-active, #21DE44FF)'; +export const onLightOutlinePositiveMinorActive = 'var(--on-light-outline-positive-minor-active)'; /** Минорный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarningMinor = 'var(--outline-on-light-outline-warning-minor, #FFB38A)'; +export const onLightOutlineWarningMinor = 'var(--on-light-outline-warning-minor)'; /** Минорный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarningMinorHover = 'var(--outline-on-light-outline-warning-minor-hover, #FFCDB3FF)'; +export const onLightOutlineWarningMinorHover = 'var(--on-light-outline-warning-minor-hover)'; /** Минорный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineWarningMinorActive = - 'var(--outline-on-light-outline-warning-minor-active, #FF9861FF)'; +export const onLightOutlineWarningMinorActive = 'var(--on-light-outline-warning-minor-active)'; /** Минорный цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegativeMinor = 'var(--outline-on-light-outline-negative-minor, #FEB3BB)'; +export const onLightOutlineNegativeMinor = 'var(--on-light-outline-negative-minor)'; /** Минорный цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegativeMinorHover = - 'var(--outline-on-light-outline-negative-minor-hover, #FEDCDFFF)'; +export const onLightOutlineNegativeMinorHover = 'var(--on-light-outline-negative-minor-hover)'; /** Минорный цвет обводки ошибка на светлом фоне */ -export const outlineOnLightOutlineNegativeMinorActive = - 'var(--outline-on-light-outline-negative-minor-active, #FD8B97FF)'; +export const onLightOutlineNegativeMinorActive = 'var(--on-light-outline-negative-minor-active)'; /** Минорный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfoMinor = 'var(--outline-on-light-outline-info-minor, #85CEFF)'; +export const onLightOutlineInfoMinor = 'var(--on-light-outline-info-minor)'; /** Минорный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfoMinorHover = 'var(--outline-on-light-outline-info-minor-hover, #ADDEFFFF)'; +export const onLightOutlineInfoMinorHover = 'var(--on-light-outline-info-minor-hover)'; /** Минорный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineInfoMinorActive = 'var(--outline-on-light-outline-info-minor-active, #5CBEFFFF)'; +export const onLightOutlineInfoMinorActive = 'var(--on-light-outline-info-minor-active)'; /** Прозрачный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlineTransparentPositive = - 'var(--outline-on-light-outline-transparent-positive, #108E2647)'; +export const onLightOutlineTransparentPositive = 'var(--on-light-outline-transparent-positive)'; /** Прозрачный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlineTransparentPositiveHover = - 'var(--outline-on-light-outline-transparent-positive-hover, #108E25FF)'; +export const onLightOutlineTransparentPositiveHover = 'var(--on-light-outline-transparent-positive-hover)'; /** Прозрачный цвет обводки успех на светлом фоне */ -export const outlineOnLightOutlineTransparentPositiveActive = - 'var(--outline-on-light-outline-transparent-positive-active, #108E2556)'; +export const onLightOutlineTransparentPositiveActive = 'var(--on-light-outline-transparent-positive-active)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentWarning = 'var(--outline-on-light-outline-transparent-warning, #E8570247)'; +export const onLightOutlineTransparentWarning = 'var(--on-light-outline-transparent-warning)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentWarningHover = - 'var(--outline-on-light-outline-transparent-warning-hover, #E85702FF)'; +export const onLightOutlineTransparentWarningHover = 'var(--on-light-outline-transparent-warning-hover)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentWarningActive = - 'var(--outline-on-light-outline-transparent-warning-active, #E8570256)'; +export const onLightOutlineTransparentWarningActive = 'var(--on-light-outline-transparent-warning-active)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentNegative = - 'var(--outline-on-light-outline-transparent-negative, #F31B3147)'; +export const onLightOutlineTransparentNegative = 'var(--on-light-outline-transparent-negative)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentNegativeHover = - 'var(--outline-on-light-outline-transparent-negative-hover, #F31B31FF)'; +export const onLightOutlineTransparentNegativeHover = 'var(--on-light-outline-transparent-negative-hover)'; /** Прозрачный цвет обводки предупреждение на светлом фоне */ -export const outlineOnLightOutlineTransparentNegativeActive = - 'var(--outline-on-light-outline-transparent-negative-active, #F31B3156)'; +export const onLightOutlineTransparentNegativeActive = 'var(--on-light-outline-transparent-negative-active)'; /** Прозрачный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineTransparentInfo = 'var(--outline-on-light-outline-transparent-info, #0B7ECB47)'; +export const onLightOutlineTransparentInfo = 'var(--on-light-outline-transparent-info)'; /** Прозрачный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineTransparentInfoHover = - 'var(--outline-on-light-outline-transparent-info-hover, #0B7ECBFF)'; +export const onLightOutlineTransparentInfoHover = 'var(--on-light-outline-transparent-info-hover)'; /** Прозрачный цвет обводки информация на светлом фоне */ -export const outlineOnLightOutlineTransparentInfoActive = - 'var(--outline-on-light-outline-transparent-info-active, #0B7ECB56)'; +export const onLightOutlineTransparentInfoActive = 'var(--on-light-outline-transparent-info-active)'; /** Инвертированный основной непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidPrimary = 'var(--outline-inverse-outline-solid-primary, #262626)'; +export const inverseOutlineSolidPrimary = 'var(--inverse-outline-solid-primary)'; /** Инвертированный основной непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidPrimaryHover = 'var(--outline-inverse-outline-solid-primary-hover, #787878FF)'; +export const inverseOutlineSolidPrimaryHover = 'var(--inverse-outline-solid-primary-hover)'; /** Инвертированный основной непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidPrimaryActive = 'var(--outline-inverse-outline-solid-primary-active, #4F4F4FFF)'; +export const inverseOutlineSolidPrimaryActive = 'var(--inverse-outline-solid-primary-active)'; /** Инвертированный вторичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidSecondary = 'var(--outline-inverse-outline-solid-secondary, #363636)'; +export const inverseOutlineSolidSecondary = 'var(--inverse-outline-solid-secondary)'; /** Инвертированный вторичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidSecondaryHover = - 'var(--outline-inverse-outline-solid-secondary-hover, #878787FF)'; +export const inverseOutlineSolidSecondaryHover = 'var(--inverse-outline-solid-secondary-hover)'; /** Инвертированный вторичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidSecondaryActive = - 'var(--outline-inverse-outline-solid-secondary-active, #5E5E5EFF)'; +export const inverseOutlineSolidSecondaryActive = 'var(--inverse-outline-solid-secondary-active)'; /** Инвертированный третичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidTertiary = 'var(--outline-inverse-outline-solid-tertiary, #4E4E4E)'; +export const inverseOutlineSolidTertiary = 'var(--inverse-outline-solid-tertiary)'; /** Инвертированный третичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidTertiaryHover = 'var(--outline-inverse-outline-solid-tertiary-hover, #000000FF)'; +export const inverseOutlineSolidTertiaryHover = 'var(--inverse-outline-solid-tertiary-hover)'; /** Инвертированный третичный непрозрачный цвет обводки */ -export const outlineInverseOutlineSolidTertiaryActive = - 'var(--outline-inverse-outline-solid-tertiary-active, #404040FF)'; +export const inverseOutlineSolidTertiaryActive = 'var(--inverse-outline-solid-tertiary-active)'; /** Инвертированный прозрачный цвет обводки по умолчанию */ -export const outlineInverseOutlineTransparentDefault = 'var(--outline-inverse-outline-transparent-default, #F9F9F9F5)'; +export const inverseOutlineTransparentDefault = 'var(--inverse-outline-transparent-default)'; /** Инвертированный прозрачный цвет обводки по умолчанию */ -export const outlineInverseOutlineTransparentDefaultHover = - 'var(--outline-inverse-outline-transparent-default-hover, #FAFAFA93)'; +export const inverseOutlineTransparentDefaultHover = 'var(--inverse-outline-transparent-default-hover)'; /** Инвертированный прозрачный цвет обводки по умолчанию */ -export const outlineInverseOutlineTransparentDefaultActive = - 'var(--outline-inverse-outline-transparent-default-active, #FAFAFAC4)'; +export const inverseOutlineTransparentDefaultActive = 'var(--inverse-outline-transparent-default-active)'; /** Инвертированный основной прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentPrimary = 'var(--outline-inverse-outline-transparent-primary, #F9F9F91F)'; +export const inverseOutlineTransparentPrimary = 'var(--inverse-outline-transparent-primary)'; /** Инвертированный основной прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentPrimaryHover = - 'var(--outline-inverse-outline-transparent-primary-hover, #FAFAFAFF)'; +export const inverseOutlineTransparentPrimaryHover = 'var(--inverse-outline-transparent-primary-hover)'; /** Инвертированный основной прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentPrimaryActive = - 'var(--outline-inverse-outline-transparent-primary-active, #FAFAFA25)'; +export const inverseOutlineTransparentPrimaryActive = 'var(--inverse-outline-transparent-primary-active)'; /** Инвертированный вторичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentSecondary = - 'var(--outline-inverse-outline-transparent-secondary, #F9F9F933)'; +export const inverseOutlineTransparentSecondary = 'var(--inverse-outline-transparent-secondary)'; /** Инвертированный вторичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentSecondaryHover = - 'var(--outline-inverse-outline-transparent-secondary-hover, #FAFAFAFF)'; +export const inverseOutlineTransparentSecondaryHover = 'var(--inverse-outline-transparent-secondary-hover)'; /** Инвертированный вторичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentSecondaryActive = - 'var(--outline-inverse-outline-transparent-secondary-active, #FAFAFA3D)'; +export const inverseOutlineTransparentSecondaryActive = 'var(--inverse-outline-transparent-secondary-active)'; /** Инвертированный третичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentTertiary = - 'var(--outline-inverse-outline-transparent-tertiary, #F9F9F947)'; +export const inverseOutlineTransparentTertiary = 'var(--inverse-outline-transparent-tertiary)'; /** Инвертированный третичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentTertiaryHover = - 'var(--outline-inverse-outline-transparent-tertiary-hover, #FAFAFAFF)'; +export const inverseOutlineTransparentTertiaryHover = 'var(--inverse-outline-transparent-tertiary-hover)'; /** Инвертированный третичный прозрачный цвет обводки */ -export const outlineInverseOutlineTransparentTertiaryActive = - 'var(--outline-inverse-outline-transparent-tertiary-active, #FAFAFA56)'; +export const inverseOutlineTransparentTertiaryActive = 'var(--inverse-outline-transparent-tertiary-active)'; /** Инвертированная бесцветная обводка */ -export const outlineInverseOutlineClear = 'var(--outline-inverse-outline-clear, #FFFFFF00)'; +export const inverseOutlineClear = 'var(--inverse-outline-clear)'; /** Инвертированная бесцветная обводка */ -export const outlineInverseOutlineClearHover = 'var(--outline-inverse-outline-clear-hover, #FFFFFF00)'; +export const inverseOutlineClearHover = 'var(--inverse-outline-clear-hover)'; /** Инвертированная бесцветная обводка */ -export const outlineInverseOutlineClearActive = 'var(--outline-inverse-outline-clear-active, #FFFFFF00)'; +export const inverseOutlineClearActive = 'var(--inverse-outline-clear-active)'; /** Инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineAccent = 'var(--outline-inverse-outline-accent, #1A9E32)'; +export const inverseOutlineAccent = 'var(--inverse-outline-accent)'; /** Инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineAccentHover = 'var(--outline-inverse-outline-accent-hover, #1FC13DFF)'; +export const inverseOutlineAccentHover = 'var(--inverse-outline-accent-hover)'; /** Инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineAccentActive = 'var(--outline-inverse-outline-accent-active, #147B27FF)'; +export const inverseOutlineAccentActive = 'var(--inverse-outline-accent-active)'; /** Инвертированный акцентный минорный непрозрачный цвет обводки */ -export const outlineInverseOutlineAccentMinor = 'var(--outline-inverse-outline-accent-minor, #0A4014)'; +export const inverseOutlineAccentMinor = 'var(--inverse-outline-accent-minor)'; /** Инвертированный акцентный минорный непрозрачный цвет обводки */ -export const outlineInverseOutlineAccentMinorHover = 'var(--outline-inverse-outline-accent-minor-hover, #15892BFF)'; +export const inverseOutlineAccentMinorHover = 'var(--inverse-outline-accent-minor-hover)'; /** Инвертированный акцентный минорный непрозрачный цвет обводки */ -export const outlineInverseOutlineAccentMinorActive = 'var(--outline-inverse-outline-accent-minor-active, #106520FF)'; +export const inverseOutlineAccentMinorActive = 'var(--inverse-outline-accent-minor-active)'; /** Прозрачный инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineTransparentAccent = 'var(--outline-inverse-outline-transparent-accent, #1A9E3266)'; +export const inverseOutlineTransparentAccent = 'var(--inverse-outline-transparent-accent)'; /** Прозрачный инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineTransparentAccentHover = - 'var(--outline-inverse-outline-transparent-accent-hover, #1A9E32FF)'; +export const inverseOutlineTransparentAccentHover = 'var(--inverse-outline-transparent-accent-hover)'; /** Прозрачный инвертированный акцентный цвет обводки */ -export const outlineInverseOutlineTransparentAccentActive = - 'var(--outline-inverse-outline-transparent-accent-active, #1A9E327A)'; +export const inverseOutlineTransparentAccentActive = 'var(--inverse-outline-transparent-accent-active)'; /** Инвертированный цвет обводки успех */ -export const outlineInverseOutlinePositive = 'var(--outline-inverse-outline-positive, #1A9E32)'; +export const inverseOutlinePositive = 'var(--inverse-outline-positive)'; /** Инвертированный цвет обводки успех */ -export const outlineInverseOutlinePositiveHover = 'var(--outline-inverse-outline-positive-hover, #1FC13DFF)'; +export const inverseOutlinePositiveHover = 'var(--inverse-outline-positive-hover)'; /** Инвертированный цвет обводки успех */ -export const outlineInverseOutlinePositiveActive = 'var(--outline-inverse-outline-positive-active, #147B27FF)'; +export const inverseOutlinePositiveActive = 'var(--inverse-outline-positive-active)'; /** Инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineWarning = 'var(--outline-inverse-outline-warning, #FA5F05)'; +export const inverseOutlineWarning = 'var(--inverse-outline-warning)'; /** Инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineWarningHover = 'var(--outline-inverse-outline-warning-hover, #FB782DFF)'; +export const inverseOutlineWarningHover = 'var(--inverse-outline-warning-hover)'; /** Инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineWarningActive = 'var(--outline-inverse-outline-warning-active, #D25004FF)'; +export const inverseOutlineWarningActive = 'var(--inverse-outline-warning-active)'; /** Инвертированный цвет обводки ошибка */ -export const outlineInverseOutlineNegative = 'var(--outline-inverse-outline-negative, #FF293E)'; +export const inverseOutlineNegative = 'var(--inverse-outline-negative)'; /** Инвертированный цвет обводки ошибка */ -export const outlineInverseOutlineNegativeHover = 'var(--outline-inverse-outline-negative-hover, #FF5263FF)'; +export const inverseOutlineNegativeHover = 'var(--inverse-outline-negative-hover)'; /** Инвертированный цвет обводки ошибка */ -export const outlineInverseOutlineNegativeActive = 'var(--outline-inverse-outline-negative-active, #FF001AFF)'; +export const inverseOutlineNegativeActive = 'var(--inverse-outline-negative-active)'; /** Инвертированный цвет обводки информация */ -export const outlineInverseOutlineInfo = 'var(--outline-inverse-outline-info, #118CDF)'; +export const inverseOutlineInfo = 'var(--inverse-outline-info)'; /** Инвертированный цвет обводки информация */ -export const outlineInverseOutlineInfoHover = 'var(--outline-inverse-outline-info-hover, #2AA0EFFF)'; +export const inverseOutlineInfoHover = 'var(--inverse-outline-info-hover)'; /** Инвертированный цвет обводки информация */ -export const outlineInverseOutlineInfoActive = 'var(--outline-inverse-outline-info-active, #0E75B9FF)'; +export const inverseOutlineInfoActive = 'var(--inverse-outline-info-active)'; /** Инвертированный минорный цвет обводки успех */ -export const outlineInverseOutlinePositiveMinor = 'var(--outline-inverse-outline-positive-minor, #0A4014)'; +export const inverseOutlinePositiveMinor = 'var(--inverse-outline-positive-minor)'; /** Инвертированный минорный цвет обводки успех */ -export const outlineInverseOutlinePositiveMinorHover = 'var(--outline-inverse-outline-positive-minor-hover, #15892BFF)'; +export const inverseOutlinePositiveMinorHover = 'var(--inverse-outline-positive-minor-hover)'; /** Инвертированный минорный цвет обводки успех */ -export const outlineInverseOutlinePositiveMinorActive = - 'var(--outline-inverse-outline-positive-minor-active, #106520FF)'; +export const inverseOutlinePositiveMinorActive = 'var(--inverse-outline-positive-minor-active)'; /** Инвертированный минорный цвет обводки предупреждение */ -export const outlineInverseOutlineWarningMinor = 'var(--outline-inverse-outline-warning-minor, #5C2709)'; +export const inverseOutlineWarningMinor = 'var(--inverse-outline-warning-minor)'; /** Инвертированный минорный цвет обводки предупреждение */ -export const outlineInverseOutlineWarningMinorHover = 'var(--outline-inverse-outline-warning-minor-hover, #A74811FF)'; +export const inverseOutlineWarningMinorHover = 'var(--inverse-outline-warning-minor-hover)'; /** Инвертированный минорный цвет обводки предупреждение */ -export const outlineInverseOutlineWarningMinorActive = 'var(--outline-inverse-outline-warning-minor-active, #82380DFF)'; +export const inverseOutlineWarningMinorActive = 'var(--inverse-outline-warning-minor-active)'; /** Инвертированный минорный цвет обводки ошибка */ -export const outlineInverseOutlineNegativeMinor = 'var(--outline-inverse-outline-negative-minor, #6B1019)'; +export const inverseOutlineNegativeMinor = 'var(--inverse-outline-negative-minor)'; /** Инвертированный минорный цвет обводки ошибка */ -export const outlineInverseOutlineNegativeMinorHover = 'var(--outline-inverse-outline-negative-minor-hover, #B11B2AFF)'; +export const inverseOutlineNegativeMinorHover = 'var(--inverse-outline-negative-minor-hover)'; /** Инвертированный минорный цвет обводки ошибка */ -export const outlineInverseOutlineNegativeMinorActive = - 'var(--outline-inverse-outline-negative-minor-active, #8E1521FF)'; +export const inverseOutlineNegativeMinorActive = 'var(--inverse-outline-negative-minor-active)'; /** Инвертированный минорный цвет обводки информация */ -export const outlineInverseOutlineInfoMinor = 'var(--outline-inverse-outline-info-minor, #0D3B59)'; +export const inverseOutlineInfoMinor = 'var(--inverse-outline-info-minor)'; /** Инвертированный минорный цвет обводки информация */ -export const outlineInverseOutlineInfoMinorHover = 'var(--outline-inverse-outline-info-minor-hover, #176AA1FF)'; +export const inverseOutlineInfoMinorHover = 'var(--inverse-outline-info-minor-hover)'; /** Инвертированный минорный цвет обводки информация */ -export const outlineInverseOutlineInfoMinorActive = 'var(--outline-inverse-outline-info-minor-active, #12527DFF)'; +export const inverseOutlineInfoMinorActive = 'var(--inverse-outline-info-minor-active)'; /** Прозрачный инвертированный цвет обводки успех */ -export const outlineInverseOutlineTransparentPositive = - 'var(--outline-inverse-outline-transparent-positive, #1A9E3247)'; +export const inverseOutlineTransparentPositive = 'var(--inverse-outline-transparent-positive)'; /** Прозрачный инвертированный цвет обводки успех */ -export const outlineInverseOutlineTransparentPositiveHover = - 'var(--outline-inverse-outline-transparent-positive-hover, #1A9E32FF)'; +export const inverseOutlineTransparentPositiveHover = 'var(--inverse-outline-transparent-positive-hover)'; /** Прозрачный инвертированный цвет обводки успех */ -export const outlineInverseOutlineTransparentPositiveActive = - 'var(--outline-inverse-outline-transparent-positive-active, #1A9E3256)'; +export const inverseOutlineTransparentPositiveActive = 'var(--inverse-outline-transparent-positive-active)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentWarning = 'var(--outline-inverse-outline-transparent-warning, #FA5F0547)'; +export const inverseOutlineTransparentWarning = 'var(--inverse-outline-transparent-warning)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentWarningHover = - 'var(--outline-inverse-outline-transparent-warning-hover, #FA5F05FF)'; +export const inverseOutlineTransparentWarningHover = 'var(--inverse-outline-transparent-warning-hover)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentWarningActive = - 'var(--outline-inverse-outline-transparent-warning-active, #FA5F0556)'; +export const inverseOutlineTransparentWarningActive = 'var(--inverse-outline-transparent-warning-active)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentNegative = - 'var(--outline-inverse-outline-transparent-negative, #FF293E47)'; +export const inverseOutlineTransparentNegative = 'var(--inverse-outline-transparent-negative)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentNegativeHover = - 'var(--outline-inverse-outline-transparent-negative-hover, #FF293EFF)'; +export const inverseOutlineTransparentNegativeHover = 'var(--inverse-outline-transparent-negative-hover)'; /** Прозрачный инвертированный цвет обводки предупреждение */ -export const outlineInverseOutlineTransparentNegativeActive = - 'var(--outline-inverse-outline-transparent-negative-active, #FF293E56)'; +export const inverseOutlineTransparentNegativeActive = 'var(--inverse-outline-transparent-negative-active)'; /** Прозрачный инвертированный цвет обводки информация */ -export const outlineInverseOutlineTransparentInfo = 'var(--outline-inverse-outline-transparent-info, #118CDF47)'; +export const inverseOutlineTransparentInfo = 'var(--inverse-outline-transparent-info)'; /** Прозрачный инвертированный цвет обводки информация */ -export const outlineInverseOutlineTransparentInfoHover = - 'var(--outline-inverse-outline-transparent-info-hover, #118CDFFF)'; +export const inverseOutlineTransparentInfoHover = 'var(--inverse-outline-transparent-info-hover)'; /** Прозрачный инвертированный цвет обводки информация */ -export const outlineInverseOutlineTransparentInfoActive = - 'var(--outline-inverse-outline-transparent-info-active, #118CDF56)'; +export const inverseOutlineTransparentInfoActive = 'var(--inverse-outline-transparent-info-active)'; -export const skeletonGradient = - 'var(--skeleton-gradient, linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% ))'; +/** Фон для скелетона */ +export const surfaceSkeletonGradient = 'var(--surface-skeleton-gradient)'; -export const skeletonGradientLighter = - 'var(--skeleton-gradient-lighter, linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% ))'; +/** Фон для скелетона */ +export const surfaceSkeletonGradientHover = 'var(--surface-skeleton-gradient-hover)'; -export const shadowDownSoftS = - 'var(--shadow-down-soft-s, 0px 4px 14px -4px rgba(8, 8, 8, 0.08)), var(--shadow-down-soft-s, 0px 1px 4px -1px rgba(0, 0, 0, 0.04))'; +/** Фон для скелетона */ +export const surfaceSkeletonGradientActive = 'var(--surface-skeleton-gradient-active)'; -export const shadowDownSoftM = 'var(--shadow-down-soft-m, 0px 24px 48px -8px rgba(0, 0, 0, 0.08))'; +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradient = 'var(--surface-skeleton-deep-gradient)'; -export const shadowDownSoftL = 'var(--shadow-down-soft-l, 0px 60px 112px -8px rgba(0, 0, 0, 0.08))'; +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradientHover = 'var(--surface-skeleton-deep-gradient-hover)'; -export const shadowDownHardS = - 'var(--shadow-down-hard-s, 0px 4px 12px -3px rgba(8, 8, 8, 0.16)), var(--shadow-down-hard-s, 0px 1px 4px -2px rgba(0, 0, 0, 0.08))'; +/** Яркий фон для скелетона */ +export const surfaceSkeletonDeepGradientActive = 'var(--surface-skeleton-deep-gradient-active)'; -export const shadowDownHardM = 'var(--shadow-down-hard-m, 0px 16px 32px -8px rgba(0, 0, 0, 0.24))'; +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradient = 'var(--on-dark-surface-skeleton-gradient)'; -export const shadowDownHardL = 'var(--shadow-down-hard-l, 0px 60px 112px -8px rgba(0, 0, 0, 0.40))'; +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradientHover = 'var(--on-dark-surface-skeleton-gradient-hover)'; -export const shadowUpSoftS = - 'var(--shadow-up-soft-s, 0px -4px 14px -4px rgba(8, 8, 8, 0.08)), var(--shadow-up-soft-s, 0px -1px 4px -1px rgba(0, 0, 0, 0.03))'; +/** Фон для скелетона */ +export const onDarkSurfaceSkeletonGradientActive = 'var(--on-dark-surface-skeleton-gradient-active)'; -export const shadowUpSoftM = 'var(--shadow-up-soft-m, 0px -24px 48px -8px rgba(0, 0, 0, 0.08))'; +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradient = 'var(--on-dark-surface-skeleton-deep-gradient)'; -export const shadowUpSoftL = 'var(--shadow-up-soft-l, 0px -60px 112px -8px rgba(0, 0, 0, 0.08))'; +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradientHover = 'var(--on-dark-surface-skeleton-deep-gradient-hover)'; -export const shadowUpHardS = - 'var(--shadow-up-hard-s, 0px -4px 12px -3px rgba(8, 8, 8, 0.20)), var(--shadow-up-hard-s, 0px -1px 4px -1px rgba(0, 0, 0, 0.03))'; +/** Яркий фон для скелетона */ +export const onDarkSurfaceSkeletonDeepGradientActive = 'var(--on-dark-surface-skeleton-deep-gradient-active)'; -export const shadowUpHardM = 'var(--shadow-up-hard-m, 0px -16px 32px -8px rgba(0, 0, 0, 0.24))'; +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradient = 'var(--on-light-surface-skeleton-gradient)'; -export const shadowUpHardL = 'var(--shadow-up-hard-l, 0px -60px 112px -8px rgba(0, 0, 0, 0.40))'; +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradientHover = 'var(--on-light-surface-skeleton-gradient-hover)'; -export const borderRadiusXxs = 'var(--border-radius-xxs, 4px)'; +/** Фон для скелетона */ +export const onLightSurfaceSkeletonGradientActive = 'var(--on-light-surface-skeleton-gradient-active)'; -export const borderRadiusXs = 'var(--border-radius-xs, 6px)'; +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradient = 'var(--on-light-surface-skeleton-deep-gradient)'; -export const borderRadiusS = 'var(--border-radius-s, 8px)'; +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradientHover = 'var(--on-light-surface-skeleton-deep-gradient-hover)'; -export const borderRadiusM = 'var(--border-radius-m, 12px)'; +/** Яркий фон для скелетона */ +export const onLightSurfaceSkeletonDeepGradientActive = 'var(--on-light-surface-skeleton-deep-gradient-active)'; -export const borderRadiusL = 'var(--border-radius-l, 16px)'; +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradient = 'var(--inverse-surface-skeleton-gradient)'; -export const borderRadiusXl = 'var(--border-radius-xl, 20px)'; +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradientHover = 'var(--inverse-surface-skeleton-gradient-hover)'; -export const borderRadiusXxl = 'var(--border-radius-xxl, 40px)'; +/** Фон для скелетона */ +export const inverseSurfaceSkeletonGradientActive = 'var(--inverse-surface-skeleton-gradient-active)'; -export { - dsplL, - dsplLBold, - dsplM, - dsplMBold, - dsplS, - dsplSBold, - h1, - h1Bold, - h2, - h2Bold, - h3, - h3Bold, - h4, - h4Bold, - h5, - h5Bold, - bodyL, - bodyLBold, - bodyM, - bodyMBold, - bodyS, - bodySBold, - bodyXS, - bodyXSBold, - bodyXXS, - bodyXXSBold, - textL, - textLBold, - textM, - textMBold, - textS, - textSBold, - textXS, - textXSBold, -} from '@salutejs/plasma-typo'; +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradient = 'var(--inverse-surface-skeleton-deep-gradient)'; + +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradientHover = 'var(--inverse-surface-skeleton-deep-gradient-hover)'; + +/** Яркий фон для скелетона */ +export const inverseSurfaceSkeletonDeepGradientActive = 'var(--inverse-surface-skeleton-deep-gradient-active)'; + +/** shadow down soft s */ +export const shadowDownSoftS = 'var(--shadow-down-soft-s)'; + +/** shadow down soft m */ +export const shadowDownSoftM = 'var(--shadow-down-soft-m)'; + +/** shadow down soft l */ +export const shadowDownSoftL = 'var(--shadow-down-soft-l)'; + +/** shadow down hard s */ +export const shadowDownHardS = 'var(--shadow-down-hard-s)'; + +/** shadow down hard m */ +export const shadowDownHardM = 'var(--shadow-down-hard-m)'; + +/** shadow down hard l */ +export const shadowDownHardL = 'var(--shadow-down-hard-l)'; + +/** shadow up soft s */ +export const shadowUpSoftS = 'var(--shadow-up-soft-s)'; + +/** shadow up soft m */ +export const shadowUpSoftM = 'var(--shadow-up-soft-m)'; + +/** shadow up soft l */ +export const shadowUpSoftL = 'var(--shadow-up-soft-l)'; + +/** shadow up hard s */ +export const shadowUpHardS = 'var(--shadow-up-hard-s)'; + +/** shadow up hard m */ +export const shadowUpHardM = 'var(--shadow-up-hard-m)'; + +/** shadow up hard l */ +export const shadowUpHardL = 'var(--shadow-up-hard-l)'; + +/** borderRadius xxs */ +export const borderRadiusXxs = 'var(--border-radius-xxs)'; + +/** borderRadius xs */ +export const borderRadiusXs = 'var(--border-radius-xs)'; + +/** borderRadius s */ +export const borderRadiusS = 'var(--border-radius-s)'; + +/** borderRadius m */ +export const borderRadiusM = 'var(--border-radius-m)'; + +/** borderRadius l */ +export const borderRadiusL = 'var(--border-radius-l)'; + +/** borderRadius xl */ +export const borderRadiusXl = 'var(--border-radius-xl)'; + +/** borderRadius xxl */ +export const borderRadiusXxl = 'var(--border-radius-xxl)'; + +/** typography s display-l */ +export const dsplL = { + fontFamily: 'var(--plasma-typo-dspl-l-font-family)', + fontSize: 'var(--plasma-typo-dspl-l-font-size)', + fontStyle: 'var(--plasma-typo-dspl-l-font-style)', + fontWeight: 'var(--plasma-typo-dspl-l-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-l-line-height)', +}; + +/** typography s display-l-bold */ +export const dsplLBold = { + fontFamily: 'var(--plasma-typo-dspl-l-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-l-bold-line-height)', +}; + +/** typography s display-m */ +export const dsplM = { + fontFamily: 'var(--plasma-typo-dspl-m-font-family)', + fontSize: 'var(--plasma-typo-dspl-m-font-size)', + fontStyle: 'var(--plasma-typo-dspl-m-font-style)', + fontWeight: 'var(--plasma-typo-dspl-m-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-m-line-height)', +}; + +/** typography s display-m-bold */ +export const dsplMBold = { + fontFamily: 'var(--plasma-typo-dspl-m-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-m-bold-line-height)', +}; + +/** typography s display-s */ +export const dsplS = { + fontFamily: 'var(--plasma-typo-dspl-s-font-family)', + fontSize: 'var(--plasma-typo-dspl-s-font-size)', + fontStyle: 'var(--plasma-typo-dspl-s-font-style)', + fontWeight: 'var(--plasma-typo-dspl-s-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-s-line-height)', +}; + +/** typography s display-s-bold */ +export const dsplSBold = { + fontFamily: 'var(--plasma-typo-dspl-s-bold-font-family)', + fontSize: 'var(--plasma-typo-dspl-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-dspl-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-dspl-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-dspl-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-dspl-s-bold-line-height)', +}; + +/** typography s header-h1 */ +export const h1 = { + fontFamily: 'var(--plasma-typo-h1-font-family)', + fontSize: 'var(--plasma-typo-h1-font-size)', + fontStyle: 'var(--plasma-typo-h1-font-style)', + fontWeight: 'var(--plasma-typo-h1-font-weight)', + letterSpacing: 'var(--plasma-typo-h1-letter-spacing)', + lineHeight: 'var(--plasma-typo-h1-line-height)', +}; + +/** typography s header-h1-bold */ +export const h1Bold = { + fontFamily: 'var(--plasma-typo-h1-bold-font-family)', + fontSize: 'var(--plasma-typo-h1-bold-font-size)', + fontStyle: 'var(--plasma-typo-h1-bold-font-style)', + fontWeight: 'var(--plasma-typo-h1-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h1-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h1-bold-line-height)', +}; + +/** typography s header-h2 */ +export const h2 = { + fontFamily: 'var(--plasma-typo-h2-font-family)', + fontSize: 'var(--plasma-typo-h2-font-size)', + fontStyle: 'var(--plasma-typo-h2-font-style)', + fontWeight: 'var(--plasma-typo-h2-font-weight)', + letterSpacing: 'var(--plasma-typo-h2-letter-spacing)', + lineHeight: 'var(--plasma-typo-h2-line-height)', +}; + +/** typography s header-h2-bold */ +export const h2Bold = { + fontFamily: 'var(--plasma-typo-h2-bold-font-family)', + fontSize: 'var(--plasma-typo-h2-bold-font-size)', + fontStyle: 'var(--plasma-typo-h2-bold-font-style)', + fontWeight: 'var(--plasma-typo-h2-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h2-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h2-bold-line-height)', +}; + +/** typography s header-h3 */ +export const h3 = { + fontFamily: 'var(--plasma-typo-h3-font-family)', + fontSize: 'var(--plasma-typo-h3-font-size)', + fontStyle: 'var(--plasma-typo-h3-font-style)', + fontWeight: 'var(--plasma-typo-h3-font-weight)', + letterSpacing: 'var(--plasma-typo-h3-letter-spacing)', + lineHeight: 'var(--plasma-typo-h3-line-height)', +}; + +/** typography s header-h3-bold */ +export const h3Bold = { + fontFamily: 'var(--plasma-typo-h3-bold-font-family)', + fontSize: 'var(--plasma-typo-h3-bold-font-size)', + fontStyle: 'var(--plasma-typo-h3-bold-font-style)', + fontWeight: 'var(--plasma-typo-h3-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h3-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h3-bold-line-height)', +}; + +/** typography s header-h4 */ +export const h4 = { + fontFamily: 'var(--plasma-typo-h4-font-family)', + fontSize: 'var(--plasma-typo-h4-font-size)', + fontStyle: 'var(--plasma-typo-h4-font-style)', + fontWeight: 'var(--plasma-typo-h4-font-weight)', + letterSpacing: 'var(--plasma-typo-h4-letter-spacing)', + lineHeight: 'var(--plasma-typo-h4-line-height)', +}; + +/** typography s header-h4-bold */ +export const h4Bold = { + fontFamily: 'var(--plasma-typo-h4-bold-font-family)', + fontSize: 'var(--plasma-typo-h4-bold-font-size)', + fontStyle: 'var(--plasma-typo-h4-bold-font-style)', + fontWeight: 'var(--plasma-typo-h4-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h4-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h4-bold-line-height)', +}; + +/** typography s header-h5 */ +export const h5 = { + fontFamily: 'var(--plasma-typo-h5-font-family)', + fontSize: 'var(--plasma-typo-h5-font-size)', + fontStyle: 'var(--plasma-typo-h5-font-style)', + fontWeight: 'var(--plasma-typo-h5-font-weight)', + letterSpacing: 'var(--plasma-typo-h5-letter-spacing)', + lineHeight: 'var(--plasma-typo-h5-line-height)', +}; + +/** typography s header-h5-bold */ +export const h5Bold = { + fontFamily: 'var(--plasma-typo-h5-bold-font-family)', + fontSize: 'var(--plasma-typo-h5-bold-font-size)', + fontStyle: 'var(--plasma-typo-h5-bold-font-style)', + fontWeight: 'var(--plasma-typo-h5-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-h5-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-h5-bold-line-height)', +}; + +/** typography s body-l */ +export const bodyL = { + fontFamily: 'var(--plasma-typo-body-l-font-family)', + fontSize: 'var(--plasma-typo-body-l-font-size)', + fontStyle: 'var(--plasma-typo-body-l-font-style)', + fontWeight: 'var(--plasma-typo-body-l-font-weight)', + letterSpacing: 'var(--plasma-typo-body-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-l-line-height)', +}; + +/** typography s body-l-bold */ +export const bodyLBold = { + fontFamily: 'var(--plasma-typo-body-l-bold-font-family)', + fontSize: 'var(--plasma-typo-body-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-l-bold-line-height)', +}; + +/** typography s body-m */ +export const bodyM = { + fontFamily: 'var(--plasma-typo-body-m-font-family)', + fontSize: 'var(--plasma-typo-body-m-font-size)', + fontStyle: 'var(--plasma-typo-body-m-font-style)', + fontWeight: 'var(--plasma-typo-body-m-font-weight)', + letterSpacing: 'var(--plasma-typo-body-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-m-line-height)', +}; + +/** typography s body-m-bold */ +export const bodyMBold = { + fontFamily: 'var(--plasma-typo-body-m-bold-font-family)', + fontSize: 'var(--plasma-typo-body-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-m-bold-line-height)', +}; + +/** typography s body-s */ +export const bodyS = { + fontFamily: 'var(--plasma-typo-body-s-font-family)', + fontSize: 'var(--plasma-typo-body-s-font-size)', + fontStyle: 'var(--plasma-typo-body-s-font-style)', + fontWeight: 'var(--plasma-typo-body-s-font-weight)', + letterSpacing: 'var(--plasma-typo-body-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-s-line-height)', +}; + +/** typography s body-s-bold */ +export const bodySBold = { + fontFamily: 'var(--plasma-typo-body-s-bold-font-family)', + fontSize: 'var(--plasma-typo-body-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-s-bold-line-height)', +}; + +/** typography s body-xs */ +export const bodyXS = { + fontFamily: 'var(--plasma-typo-body-xs-font-family)', + fontSize: 'var(--plasma-typo-body-xs-font-size)', + fontStyle: 'var(--plasma-typo-body-xs-font-style)', + fontWeight: 'var(--plasma-typo-body-xs-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xs-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xs-line-height)', +}; + +/** typography s body-xs-bold */ +export const bodyXSBold = { + fontFamily: 'var(--plasma-typo-body-xs-bold-font-family)', + fontSize: 'var(--plasma-typo-body-xs-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-xs-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-xs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xs-bold-line-height)', +}; + +/** typography s body-xxs */ +export const bodyXXS = { + fontFamily: 'var(--plasma-typo-body-xxs-font-family)', + fontSize: 'var(--plasma-typo-body-xxs-font-size)', + fontStyle: 'var(--plasma-typo-body-xxs-font-style)', + fontWeight: 'var(--plasma-typo-body-xxs-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xxs-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xxs-line-height)', +}; + +/** typography s body-xxs-bold */ +export const bodyXXSBold = { + fontFamily: 'var(--plasma-typo-body-xxs-bold-font-family)', + fontSize: 'var(--plasma-typo-body-xxs-bold-font-size)', + fontStyle: 'var(--plasma-typo-body-xxs-bold-font-style)', + fontWeight: 'var(--plasma-typo-body-xxs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-body-xxs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-body-xxs-bold-line-height)', +}; + +/** typography s text-l */ +export const textL = { + fontFamily: 'var(--plasma-typo-text-l-font-family)', + fontSize: 'var(--plasma-typo-text-l-font-size)', + fontStyle: 'var(--plasma-typo-text-l-font-style)', + fontWeight: 'var(--plasma-typo-text-l-font-weight)', + letterSpacing: 'var(--plasma-typo-text-l-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-l-line-height)', +}; + +/** typography s text-l-bold */ +export const textLBold = { + fontFamily: 'var(--plasma-typo-text-l-bold-font-family)', + fontSize: 'var(--plasma-typo-text-l-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-l-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-l-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-l-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-l-bold-line-height)', +}; + +/** typography s text-m */ +export const textM = { + fontFamily: 'var(--plasma-typo-text-m-font-family)', + fontSize: 'var(--plasma-typo-text-m-font-size)', + fontStyle: 'var(--plasma-typo-text-m-font-style)', + fontWeight: 'var(--plasma-typo-text-m-font-weight)', + letterSpacing: 'var(--plasma-typo-text-m-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-m-line-height)', +}; + +/** typography s text-m-bold */ +export const textMBold = { + fontFamily: 'var(--plasma-typo-text-m-bold-font-family)', + fontSize: 'var(--plasma-typo-text-m-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-m-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-m-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-m-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-m-bold-line-height)', +}; + +/** typography s text-s */ +export const textS = { + fontFamily: 'var(--plasma-typo-text-s-font-family)', + fontSize: 'var(--plasma-typo-text-s-font-size)', + fontStyle: 'var(--plasma-typo-text-s-font-style)', + fontWeight: 'var(--plasma-typo-text-s-font-weight)', + letterSpacing: 'var(--plasma-typo-text-s-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-s-line-height)', +}; + +/** typography s text-s-bold */ +export const textSBold = { + fontFamily: 'var(--plasma-typo-text-s-bold-font-family)', + fontSize: 'var(--plasma-typo-text-s-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-s-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-s-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-s-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-s-bold-line-height)', +}; + +/** typography s text-xs */ +export const textXS = { + fontFamily: 'var(--plasma-typo-text-xs-font-family)', + fontSize: 'var(--plasma-typo-text-xs-font-size)', + fontStyle: 'var(--plasma-typo-text-xs-font-style)', + fontWeight: 'var(--plasma-typo-text-xs-font-weight)', + letterSpacing: 'var(--plasma-typo-text-xs-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-xs-line-height)', +}; + +/** typography s text-xs-bold */ +export const textXSBold = { + fontFamily: 'var(--plasma-typo-text-xs-bold-font-family)', + fontSize: 'var(--plasma-typo-text-xs-bold-font-size)', + fontStyle: 'var(--plasma-typo-text-xs-bold-font-style)', + fontWeight: 'var(--plasma-typo-text-xs-bold-font-weight)', + letterSpacing: 'var(--plasma-typo-text-xs-bold-letter-spacing)', + lineHeight: 'var(--plasma-typo-text-xs-bold-line-height)', +}; diff --git a/packages/themes/caldera-online-themes/tsconfig.json b/packages/themes/caldera-online-themes/tsconfig.json index b708fb2826..fed3dbbcbc 100644 --- a/packages/themes/caldera-online-themes/tsconfig.json +++ b/packages/themes/caldera-online-themes/tsconfig.json @@ -14,5 +14,5 @@ "rootDir": "./src" }, "include": ["./src"], - "exclude": ["./data"] + "exclude": [] }