diff --git a/.github/workflows/cypress-release-branch.yml b/.github/workflows/cypress-release-branch.yml new file mode 100644 index 0000000000..5979964de7 --- /dev/null +++ b/.github/workflows/cypress-release-branch.yml @@ -0,0 +1,40 @@ +# Run cypress tests in release branch without conditions for all packages +name: Cypress component testing on release branch + +on: + pull_request: + branches: + - master + +concurrency: + # New commit on branch cancels running workflows of the same branch + group: ${{ github.workflow }}-${{ github.head_ref }} + cancel-in-progress: true + +jobs: + cypress: + if: ${{ startsWith(github.head_ref, 'release') }} + strategy: + fail-fast: false + matrix: + scope: [web,b2c,ui] + + uses: ./.github/workflows/cypress-common.yml + with: + scope: ${{ matrix.scope }} + with-artifacts: true + secrets: inherit + + cypress-react-17: + if: ${{ startsWith(github.head_ref, 'release') }} + strategy: + fail-fast: false + matrix: + scope: [web,b2c,ui] + + uses: ./.github/workflows/cypress-common.yml + with: + scope: ${{ matrix.scope }} + with-react-17: true + with-artifacts: true + secrets: inherit diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index f62580b825..e5ff64e80f 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -13,6 +13,8 @@ concurrency: jobs: state: + # cypress checks for "release branch" run in cypress-release-branch.yml file + if: ${{ !startsWith(github.head_ref, 'release') }} uses: ./.github/workflows/change-detection.yml secrets: inherit diff --git a/packages/plasma-asdk/package-lock.json b/packages/plasma-asdk/package-lock.json index 3b1cdbe871..afe61c8d32 100644 --- a/packages/plasma-asdk/package-lock.json +++ b/packages/plasma-asdk/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-asdk", - "version": "0.85.0", + "version": "0.85.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-asdk", - "version": "0.85.0", + "version": "0.85.1-dev.0", "license": "MIT", "dependencies": { "@salutejs/plasma-new-hope": "0.87.0", @@ -26,7 +26,7 @@ "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-core": "1.160.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -4390,9 +4390,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -17043,9 +17043,9 @@ "dev": true }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-new-hope": { diff --git a/packages/plasma-asdk/package.json b/packages/plasma-asdk/package.json index cc7d8c1a3c..67004597dd 100644 --- a/packages/plasma-asdk/package.json +++ b/packages/plasma-asdk/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-asdk", - "version": "0.85.0", + "version": "0.85.1-dev.0", "description": "Salute Design System / React UI kit for Assistant web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -41,7 +41,7 @@ "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-core": "1.160.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -98,4 +98,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-b2c/package-lock.json b/packages/plasma-b2c/package-lock.json index d1b0821a6d..490505b3c5 100644 --- a/packages/plasma-b2c/package-lock.json +++ b/packages/plasma-b2c/package-lock.json @@ -1,16 +1,16 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.327.0", + "version": "1.327.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-b2c", - "version": "1.327.0", + "version": "1.327.1-dev.0", "license": "MIT", "dependencies": { "@salutejs/plasma-core": "1.160.0", - "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-hope": "1.280.1-dev.0", "@salutejs/plasma-new-hope": "0.87.0", "@salutejs/plasma-tokens-b2c": "0.50.0", "@salutejs/plasma-tokens-web": "1.55.0", @@ -32,7 +32,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -5019,9 +5019,9 @@ } }, "node_modules/@salutejs/plasma-hope": { - "version": "1.280.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", - "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", + "version": "1.280.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.1-dev.0.tgz", + "integrity": "sha512-yBbNJQgCp+uVm23Dfao/m69fyQSgdXc/0Fs8A3ooaz2F3PO8FYcgGJMik69856m5CGwDoQfkRNnVwnUE1UKmUg==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-core": "1.160.0", @@ -5039,9 +5039,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -19937,9 +19937,9 @@ "dev": true }, "@salutejs/plasma-hope": { - "version": "1.280.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", - "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", + "version": "1.280.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.1-dev.0.tgz", + "integrity": "sha512-yBbNJQgCp+uVm23Dfao/m69fyQSgdXc/0Fs8A3ooaz2F3PO8FYcgGJMik69856m5CGwDoQfkRNnVwnUE1UKmUg==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-core": "1.160.0", @@ -19951,9 +19951,9 @@ } }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-new-hope": { diff --git a/packages/plasma-b2c/package.json b/packages/plasma-b2c/package.json index 90ef94a13f..db585c8268 100644 --- a/packages/plasma-b2c/package.json +++ b/packages/plasma-b2c/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.327.0", + "version": "1.327.1-dev.0", "description": "Salute Design System / React UI kit for business-related web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -43,7 +43,7 @@ }, "dependencies": { "@salutejs/plasma-core": "1.160.0", - "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-hope": "1.280.1-dev.0", "@salutejs/plasma-new-hope": "0.87.0", "@salutejs/plasma-tokens-b2c": "0.50.0", "@salutejs/plasma-tokens-web": "1.55.0", @@ -71,7 +71,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -107,4 +107,4 @@ "react" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-hope/package-lock.json b/packages/plasma-hope/package-lock.json index 88fb44f293..18203595ee 100644 --- a/packages/plasma-hope/package-lock.json +++ b/packages/plasma-hope/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-hope", - "version": "1.280.0", + "version": "1.280.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-hope", - "version": "1.280.0", + "version": "1.280.1-dev.0", "license": "MIT", "dependencies": { "@popperjs/core": "2.9.2", @@ -28,7 +28,7 @@ "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", @@ -4412,9 +4412,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -17292,9 +17292,9 @@ "dev": true }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-sb-utils": { diff --git a/packages/plasma-hope/package.json b/packages/plasma-hope/package.json index 67f5dc7cd9..644a1396bb 100644 --- a/packages/plasma-hope/package.json +++ b/packages/plasma-hope/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-hope", - "version": "1.280.0", + "version": "1.280.1-dev.0", "description": "Salute Design System / Internal React UI kit for web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -58,7 +58,7 @@ "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", @@ -113,4 +113,4 @@ "Vasiliy Loginevskiy" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-icons/package-lock.json b/packages/plasma-icons/package-lock.json index 1ee08a416f..eaa054f58b 100644 --- a/packages/plasma-icons/package-lock.json +++ b/packages/plasma-icons/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-icons", - "version": "1.193.0", + "version": "1.193.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-icons", - "version": "1.193.0", + "version": "1.193.1-dev.0", "license": "MIT", "devDependencies": { "@babel/cli": "7.24.1", diff --git a/packages/plasma-icons/package.json b/packages/plasma-icons/package.json index 29115786f7..74c5719571 100644 --- a/packages/plasma-icons/package.json +++ b/packages/plasma-icons/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-icons", - "version": "1.193.0", + "version": "1.193.1-dev.0", "description": "Salute Design System Icons", "main": "index.js", "module": "es/index.js", @@ -76,4 +76,4 @@ "Чельцов Евгений Олегович" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-icons/scripts/utils.ts b/packages/plasma-icons/scripts/utils.ts index bdd6c4a439..426d074265 100644 --- a/packages/plasma-icons/scripts/utils.ts +++ b/packages/plasma-icons/scripts/utils.ts @@ -10,6 +10,8 @@ const removeFillOpacity = (source: string) => source.replace(/fill-opacity="(.*? const setFillCurrentColor = (source: string) => source.replace(/fill="(.*?)"/gm, 'fill="currentColor"'); +const setStrokeCurrentColor = (source: string) => source.replace(/stroke="(.*?)"/gm, 'stroke="currentColor"'); + const convertCSSProperty = (source: string) => source.replace( /([a-zA-Z-]*):(.*)/g, @@ -33,6 +35,7 @@ export const getIconAsset = (source: string, iconName: string) => { removeLineBreak, getSvgContent, setFillCurrentColor, + setStrokeCurrentColor, removeFillOpacity, convertInlineStyleToObject, camelizeAttributes, diff --git a/packages/plasma-ui/package-lock.json b/packages/plasma-ui/package-lock.json index 7fb7bb6e29..8c0d0192cd 100644 --- a/packages/plasma-ui/package-lock.json +++ b/packages/plasma-ui/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-ui", - "version": "1.249.0", + "version": "1.249.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-ui", - "version": "1.249.0", + "version": "1.249.1-dev.0", "license": "MIT", "dependencies": { "@salutejs/plasma-core": "1.160.0", @@ -24,7 +24,7 @@ "@babel/preset-react": "7.24.1", "@babel/preset-typescript": "7.24.1", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@salutejs/plasma-tokens": "1.81.0", "@salutejs/use-virtual": "2.0.0", @@ -4422,9 +4422,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -23483,9 +23483,9 @@ "dev": true }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-sb-utils": { diff --git a/packages/plasma-ui/package.json b/packages/plasma-ui/package.json index 4bc3e42c14..fa4410a1b9 100644 --- a/packages/plasma-ui/package.json +++ b/packages/plasma-ui/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-ui", - "version": "1.249.0", + "version": "1.249.1-dev.0", "description": "Salute Design System.", "main": "index.js", "module": "es/index.js", @@ -34,7 +34,7 @@ "@babel/preset-react": "7.24.1", "@babel/preset-typescript": "7.24.1", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@salutejs/plasma-tokens": "1.81.0", "@salutejs/use-virtual": "2.0.0", @@ -109,4 +109,4 @@ "Чельцов Евгений Олегович" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-web/package-lock.json b/packages/plasma-web/package-lock.json index 9d4669ab95..5a9363ad69 100644 --- a/packages/plasma-web/package-lock.json +++ b/packages/plasma-web/package-lock.json @@ -1,16 +1,16 @@ { "name": "@salutejs/plasma-web", - "version": "1.328.0", + "version": "1.328.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-web", - "version": "1.328.0", + "version": "1.328.1-dev.0", "license": "MIT", "dependencies": { "@salutejs/plasma-core": "1.160.0", - "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-hope": "1.280.1-dev.0", "@salutejs/plasma-new-hope": "0.87.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", @@ -33,7 +33,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -4797,9 +4797,9 @@ } }, "node_modules/@salutejs/plasma-hope": { - "version": "1.280.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", - "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", + "version": "1.280.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.1-dev.0.tgz", + "integrity": "sha512-yBbNJQgCp+uVm23Dfao/m69fyQSgdXc/0Fs8A3ooaz2F3PO8FYcgGJMik69856m5CGwDoQfkRNnVwnUE1UKmUg==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-core": "1.160.0", @@ -4817,9 +4817,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -18983,9 +18983,9 @@ "dev": true }, "@salutejs/plasma-hope": { - "version": "1.280.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", - "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", + "version": "1.280.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.1-dev.0.tgz", + "integrity": "sha512-yBbNJQgCp+uVm23Dfao/m69fyQSgdXc/0Fs8A3ooaz2F3PO8FYcgGJMik69856m5CGwDoQfkRNnVwnUE1UKmUg==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-core": "1.160.0", @@ -18997,9 +18997,9 @@ } }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-new-hope": { diff --git a/packages/plasma-web/package.json b/packages/plasma-web/package.json index ea125123f3..e2f007c0eb 100644 --- a/packages/plasma-web/package.json +++ b/packages/plasma-web/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-web", - "version": "1.328.0", + "version": "1.328.1-dev.0", "description": "Salute Design System / React UI kit for web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -20,7 +20,7 @@ }, "dependencies": { "@salutejs/plasma-core": "1.160.0", - "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-hope": "1.280.1-dev.0", "@salutejs/plasma-new-hope": "0.87.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", @@ -49,7 +49,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -110,4 +110,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/sdds-serv/package-lock.json b/packages/sdds-serv/package-lock.json index d7b0300fad..fba185585a 100644 --- a/packages/sdds-serv/package-lock.json +++ b/packages/sdds-serv/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/sdds-serv", - "version": "0.55.0", + "version": "0.55.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/sdds-serv", - "version": "0.55.0", + "version": "0.55.1-dev.0", "license": "MIT", "dependencies": { "@salutejs/plasma-new-hope": "0.87.0", @@ -24,7 +24,7 @@ "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-core": "1.160.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -5575,9 +5575,9 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -21384,9 +21384,9 @@ "dev": true }, "@salutejs/plasma-icons": { - "version": "1.193.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", - "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", + "version": "1.193.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.1-dev.0.tgz", + "integrity": "sha512-aKUlDGAkcjvsJlEp2KT6Sdrls1jK8MUbKITyOIIbLegv4lVQMNnCimWReeFfwCKDhDbflTqKRJIt38cj3s6kZg==", "dev": true }, "@salutejs/plasma-new-hope": { diff --git a/packages/sdds-serv/package.json b/packages/sdds-serv/package.json index 06ca6daeb2..8351b93cf7 100644 --- a/packages/sdds-serv/package.json +++ b/packages/sdds-serv/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/sdds-serv", - "version": "0.55.0", + "version": "0.55.1-dev.0", "description": "Salute Design System / React UI kit for SDDS SERV web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -39,7 +39,7 @@ "@salutejs/plasma-colors": "0.13.0", "@salutejs/plasma-core": "1.160.0", "@salutejs/plasma-cy-utils": "0.92.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-sb-utils": "0.158.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -95,4 +95,4 @@ "Anton Vinogradov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/utils/plasma-docs-ui/package.json b/utils/plasma-docs-ui/package.json index b16192f27e..13c4718c6e 100644 --- a/utils/plasma-docs-ui/package.json +++ b/utils/plasma-docs-ui/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-docs-ui", - "version": "0.239.0", + "version": "0.239.1-dev.0", "description": "Plasma Documentation.", "author": "Salute Frontend Team ", "license": "MIT", @@ -20,7 +20,7 @@ "dependencies": { "@salutejs/plasma-core": "1.160.0", "@salutejs/plasma-tokens-b2b": "1.40.0", - "@salutejs/plasma-web": "1.328.0", + "@salutejs/plasma-web": "1.328.1-dev.0", "@types/marked": "3.0.1", "codesandbox": "2.2.3", "marked": "3.0.7", @@ -49,4 +49,4 @@ "files": [ "lib" ] -} +} \ No newline at end of file diff --git a/website/plasma-theme-builder/package-lock.json b/website/plasma-theme-builder/package-lock.json index cd5b0ab388..f2d0e0b939 100644 --- a/website/plasma-theme-builder/package-lock.json +++ b/website/plasma-theme-builder/package-lock.json @@ -16,6 +16,7 @@ "@salutejs/plasma-tokens-utils": "0.42.0", "@salutejs/plasma-tokens-web": "1.55.0", "@salutejs/plasma-typo": "0.40.0", + "jszip": "^3.10.1", "octokit": "^1.7.1", "prettier": "^2.6.2", "react": "^18.2.0", @@ -56,20 +57,21 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.6.tgz", + "integrity": "sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==", "dependencies": { - "@babel/highlight": "^7.18.6" + "@babel/highlight": "^7.24.6", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/compat-data": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz", - "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.6.tgz", + "integrity": "sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==", "engines": { "node": ">=6.9.0" } @@ -113,12 +115,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz", - "integrity": "sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.6.tgz", + "integrity": "sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==", "dependencies": { - "@babel/types": "^7.20.5", - "@jridgewell/gen-mapping": "^0.3.2", + "@babel/types": "^7.24.6", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^2.5.1" }, "engines": { @@ -149,30 +152,41 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.20.0", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz", - "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.6.tgz", + "integrity": "sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==", "dependencies": { - "@babel/compat-data": "^7.20.0", - "@babel/helper-validator-option": "^7.18.6", - "browserslist": "^4.21.3", - "semver": "^6.3.0" + "@babel/compat-data": "^7.24.6", + "@babel/helper-validator-option": "^7.24.6", + "browserslist": "^4.22.2", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" }, "engines": { "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dependencies": { + "yallist": "^3.0.2" } }, "node_modules/@babel/helper-compilation-targets/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } }, + "node_modules/@babel/helper-compilation-targets/node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + }, "node_modules/@babel/helper-create-class-features-plugin": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.5.tgz", @@ -233,9 +247,9 @@ } }, "node_modules/@babel/helper-environment-visitor": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.6.tgz", + "integrity": "sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==", "engines": { "node": ">=6.9.0" } @@ -252,23 +266,23 @@ } }, "node_modules/@babel/helper-function-name": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", - "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.6.tgz", + "integrity": "sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==", "dependencies": { - "@babel/template": "^7.18.10", - "@babel/types": "^7.19.0" + "@babel/template": "^7.24.6", + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-hoist-variables": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", - "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.6.tgz", + "integrity": "sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" @@ -286,32 +300,32 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", - "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.6.tgz", + "integrity": "sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz", - "integrity": "sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.6.tgz", + "integrity": "sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==", "dependencies": { - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-module-imports": "^7.18.6", - "@babel/helper-simple-access": "^7.20.2", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/helper-validator-identifier": "^7.19.1", - "@babel/template": "^7.18.10", - "@babel/traverse": "^7.20.1", - "@babel/types": "^7.20.2" + "@babel/helper-environment-visitor": "^7.24.6", + "@babel/helper-module-imports": "^7.24.6", + "@babel/helper-simple-access": "^7.24.6", + "@babel/helper-split-export-declaration": "^7.24.6", + "@babel/helper-validator-identifier": "^7.24.6" }, "engines": { "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" } }, "node_modules/@babel/helper-optimise-call-expression": { @@ -326,9 +340,9 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", - "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.6.tgz", + "integrity": "sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==", "engines": { "node": ">=6.9.0" } @@ -366,11 +380,11 @@ } }, "node_modules/@babel/helper-simple-access": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", - "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.6.tgz", + "integrity": "sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==", "dependencies": { - "@babel/types": "^7.20.2" + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" @@ -388,36 +402,36 @@ } }, "node_modules/@babel/helper-split-export-declaration": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", - "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz", + "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz", + "integrity": "sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.19.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz", + "integrity": "sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", - "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz", + "integrity": "sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==", "engines": { "node": ">=6.9.0" } @@ -437,35 +451,35 @@ } }, "node_modules/@babel/helpers": { - "version": "7.20.6", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz", - "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.6.tgz", + "integrity": "sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==", "dependencies": { - "@babel/template": "^7.18.10", - "@babel/traverse": "^7.20.5", - "@babel/types": "^7.20.5" + "@babel/template": "^7.24.6", + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/highlight": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", - "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.6.tgz", + "integrity": "sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==", "dependencies": { - "@babel/helper-validator-identifier": "^7.18.6", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" + "@babel/helper-validator-identifier": "^7.24.6", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz", - "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz", + "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==", "bin": { "parser": "bin/babel-parser.js" }, @@ -1251,13 +1265,13 @@ } }, "node_modules/@babel/plugin-transform-modules-commonjs": { - "version": "7.19.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz", - "integrity": "sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.6.tgz", + "integrity": "sha512-JEV8l3MHdmmdb7S7Cmx6rbNEjRCgTQMZxllveHO0mx6uiclB0NflCawlQQ6+o5ZrwjUBYPzHm2XoK4wqGVUFuw==", "dependencies": { - "@babel/helper-module-transforms": "^7.19.6", - "@babel/helper-plugin-utils": "^7.19.0", - "@babel/helper-simple-access": "^7.19.4" + "@babel/helper-module-transforms": "^7.24.6", + "@babel/helper-plugin-utils": "^7.24.6", + "@babel/helper-simple-access": "^7.24.6" }, "engines": { "node": ">=6.9.0" @@ -1787,32 +1801,32 @@ } }, "node_modules/@babel/template": { - "version": "7.18.10", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", - "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.6.tgz", + "integrity": "sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==", "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/parser": "^7.18.10", - "@babel/types": "^7.18.10" + "@babel/code-frame": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/types": "^7.24.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.5.tgz", - "integrity": "sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==", - "dependencies": { - "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.20.5", - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-function-name": "^7.19.0", - "@babel/helper-hoist-variables": "^7.18.6", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.20.5", - "@babel/types": "^7.20.5", - "debug": "^4.1.0", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.6.tgz", + "integrity": "sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==", + "dependencies": { + "@babel/code-frame": "^7.24.6", + "@babel/generator": "^7.24.6", + "@babel/helper-environment-visitor": "^7.24.6", + "@babel/helper-function-name": "^7.24.6", + "@babel/helper-hoist-variables": "^7.24.6", + "@babel/helper-split-export-declaration": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/types": "^7.24.6", + "debug": "^4.3.1", "globals": "^11.1.0" }, "engines": { @@ -1820,12 +1834,12 @@ } }, "node_modules/@babel/types": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz", - "integrity": "sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.6.tgz", + "integrity": "sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==", "dependencies": { - "@babel/helper-string-parser": "^7.19.4", - "@babel/helper-validator-identifier": "^7.19.1", + "@babel/helper-string-parser": "^7.24.6", + "@babel/helper-validator-identifier": "^7.24.6", "to-fast-properties": "^2.0.0" }, "engines": { @@ -2649,13 +2663,13 @@ } }, "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", - "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "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.0.1", + "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/trace-mapping": "^0.3.24" }, "engines": { "node": ">=6.0.0" @@ -2670,9 +2684,9 @@ } }, "node_modules/@jridgewell/set-array": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", - "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", "engines": { "node": ">=6.0.0" } @@ -2692,12 +2706,233 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.17", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", - "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "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/@linaria/core": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/core/-/core-5.0.2.tgz", + "integrity": "sha512-l5jQq7w9kDvonfr/0MBF47Dagx9Y9f/o5Q8j3zv7GepwG/yHQdbjKr0tq07rx2fSDDX7Nbqlxk6k9Ymir/NGpg==", + "dependencies": { + "@linaria/logger": "^5.0.0", + "@linaria/tags": "^5.0.2", + "@linaria/utils": "^5.0.2" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/@linaria/logger": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@linaria/logger/-/logger-5.0.0.tgz", + "integrity": "sha512-PZd5H0I4F84U0kXSE+vD75ltIGDxEA6gMDNWS2aDZFitmdlQM5rIXqvKFrp5NsHa7a3AH+I2Hxm0dg60WZF7vg==", + "dependencies": { + "debug": "^4.3.4", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/@linaria/react": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@linaria/react/-/react-5.0.3.tgz", + "integrity": "sha512-faTQHnUlrAz0Lodu+rr6Yx59rX0nqFOrZ5/IdlfQcTRz9VebyVL4vtA3AOecmn1YFZjMpqjopT0OzNz6GknQSg==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.0", + "@linaria/core": "^5.0.2", + "@linaria/tags": "^5.0.2", + "@linaria/utils": "^5.0.2", + "minimatch": "^9.0.3", + "react-html-attributes": "^1.4.6", + "ts-invariant": "^0.10.3" + }, + "engines": { + "node": ">=16.0.0" + }, + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/@linaria/react/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@linaria/react/node_modules/minimatch": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", + "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@linaria/tags": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/tags/-/tags-5.0.2.tgz", + "integrity": "sha512-opcORl2sA6WkBjTNLHTgpet97dNKnwPRX/QGGZMykBsvGH3AsnEg/bT31cKBMBhL+YBGQsCdBmolxvCkWPOXQw==", "dependencies": { - "@jridgewell/resolve-uri": "3.1.0", - "@jridgewell/sourcemap-codec": "1.4.14" + "@babel/generator": "^7.22.15", + "@linaria/logger": "^5.0.0", + "@linaria/utils": "^5.0.2" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/@linaria/utils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/utils/-/utils-5.0.2.tgz", + "integrity": "sha512-ZL8Yz4IIr9A8a5+o5LRnEpgdzIkyj4yKJrhw5Zv8wwvL+d/MHUK0q+l/KvxBmuYdcF+YYVHZ9eeBHTQBSL7r/w==", + "dependencies": { + "@babel/core": "^7.22.15", + "@babel/generator": "^7.22.15", + "@babel/plugin-transform-modules-commonjs": "^7.22.15", + "@babel/template": "^7.22.15", + "@babel/traverse": "^7.22.15", + "@babel/types": "^7.22.15", + "@linaria/logger": "^5.0.0", + "babel-merge": "^3.0.0", + "find-up": "^5.0.0", + "minimatch": "^9.0.3" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/@linaria/utils/node_modules/@babel/core": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.6.tgz", + "integrity": "sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==", + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.6", + "@babel/generator": "^7.24.6", + "@babel/helper-compilation-targets": "^7.24.6", + "@babel/helper-module-transforms": "^7.24.6", + "@babel/helpers": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/template": "^7.24.6", + "@babel/traverse": "^7.24.6", + "@babel/types": "^7.24.6", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@linaria/utils/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@linaria/utils/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" + }, + "node_modules/@linaria/utils/node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@linaria/utils/node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@linaria/utils/node_modules/minimatch": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", + "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@linaria/utils/node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@linaria/utils/node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@linaria/utils/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "bin": { + "semver": "bin/semver.js" } }, "node_modules/@nodelib/fs.scandir": { @@ -3414,13 +3649,16 @@ "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" }, "node_modules/@salutejs/plasma-b2c": { - "version": "1.228.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.228.0-dev.0.tgz", - "integrity": "sha512-7mwPDdWWZpF14LkRZiUE6UhibIvADPJK6y9QDIHKdfXdRdOulRg2iconnSYpZB75PpEK4rtYBCbjGZIAy7Iz3Q==", + "version": "1.327.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.327.0.tgz", + "integrity": "sha512-yr16VXHkBQy9EC5FdQ72Uey+gH3D0UOu+WAtb7PvU7QnA7lu4EK3+bRBIHnpPRqzb+R7VCOHjowfbREr7xVmdA==", "dependencies": { - "@salutejs/plasma-core": "1.131.0-dev.0", - "@salutejs/plasma-hope": "1.228.0-dev.0", - "@salutejs/plasma-typo": "0.38.0" + "@salutejs/plasma-core": "1.160.0", + "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-new-hope": "0.87.0", + "@salutejs/plasma-tokens-b2c": "0.50.0", + "@salutejs/plasma-tokens-web": "1.55.0", + "@salutejs/plasma-typo": "0.40.0" }, "peerDependencies": { "@salutejs/plasma-icons": "^1.0.0", @@ -3430,17 +3668,17 @@ } }, "node_modules/@salutejs/plasma-colors": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-colors/-/plasma-colors-0.10.0.tgz", - "integrity": "sha512-MG9r/7whZgG7No0j4YXaGvizofWcFAWNLCOjHkNC4dws9EucPa6p9Csx//yYvpCoHVGlnKGhtWIqt3TJ4me0TA==" + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-colors/-/plasma-colors-0.13.0.tgz", + "integrity": "sha512-EUhA9QJ2/uTwGVrqH0He3qq+d7h3x5aEVb8VfOwDlT9oF5gpT6DMWfQ6dzJcEAnXIAY8TSXLYQJI4iWAwCAd+w==" }, "node_modules/@salutejs/plasma-core": { - "version": "1.131.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.131.0-dev.0.tgz", - "integrity": "sha512-pwnQAXT8dbkR7SfhR4Y1WECtT3qi6rHFaZK1wMI1Vd+yJ+1nMD2YDtt4cCfrwjoJJ/Ivxus2e0Ynlk1pSepWbQ==", + "version": "1.160.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.160.0.tgz", + "integrity": "sha512-ddpmy2lmCjPY0SQAcVma/rjqV+yzXY512MC6WtC6qq5RGZi+x/QKFGyL6eLVZbVE7QqxvvqSed/YiA22OaAXUA==", "dependencies": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-typo": "0.38.0", + "@salutejs/plasma-typo": "0.40.0", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", "react-draggable": "4.4.3", @@ -3453,14 +3691,14 @@ } }, "node_modules/@salutejs/plasma-hope": { - "version": "1.228.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.228.0-dev.0.tgz", - "integrity": "sha512-g1csPuWS9At1RFoZjahbXn1D1qwf0QABbw3rEQsIVO5y7qihDm77K9lroIluBekzI6ZG56J9wKow0W5hEz1FgA==", + "version": "1.280.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", + "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", "dependencies": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.131.0-dev.0", - "@salutejs/plasma-typo": "0.38.0", - "react-file-drop": "3.1.2", + "@salutejs/plasma-core": "1.160.0", + "@salutejs/plasma-typo": "0.40.0", + "react-file-drop": "3.1.6", "react-popper": "2.3.0", "react-sortable-hoc": "2.0.0", "storeon": "3.1.4" @@ -3473,32 +3711,80 @@ } }, "node_modules/@salutejs/plasma-icons": { - "version": "1.162.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.162.0-dev.0.tgz", - "integrity": "sha512-BqNyCaWGoqYCI1Q/+FGY78JWWBnnh1Gf7Vfk/k9GgF1HnywvZzIyql51b+WOzcdsiD0RTXxfM3ZBEnizjcDbGg==", + "version": "1.193.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", + "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==", "peerDependencies": { - "@salutejs/plasma-core": "^1.0.0", "react": ">=16.13.1", "react-dom": ">=16.13.1", "styled-components": "^5.1.1" } }, + "node_modules/@salutejs/plasma-new-hope": { + "version": "0.87.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.87.0.tgz", + "integrity": "sha512-5XkkQJ8D/IZmEaX/8poJYz0htDLcHVZHcRUQ+7/ADcHmyvZaLpvWtCLUgB/rfUxG4oy3RzCypEu0EEspDOhLFw==", + "dependencies": { + "@linaria/core": "5.0.2", + "@linaria/react": "5.0.3", + "@popperjs/core": "2.11.8", + "@salutejs/plasma-core": "1.160.0", + "focus-visible": "5.2.0", + "react-draggable": "4.4.3", + "react-popper": "2.3.0", + "storeon": "3.1.5" + }, + "peerDependencies": { + "react": ">=16.13.1", + "react-dom": ">=16.13.1" + } + }, + "node_modules/@salutejs/plasma-new-hope/node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@salutejs/plasma-new-hope/node_modules/storeon": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/storeon/-/storeon-3.1.5.tgz", + "integrity": "sha512-VuW4GQr3LGQr+gqscqsOz2c9asK9N+B+8+sWs7Pj4OqU7bngYIqsPF3IYpkbmccKNWjs7wwxUAlR+gtL9cEMEg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "preact": ">=10.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "preact": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/@salutejs/plasma-tokens-b2b": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.28.0.tgz", - "integrity": "sha512-dMlgAdWBOgkVKjJokJ5AGzphWAG+i4PkKkgWLG/WFDWvorCcB8OM5uuyKoDJipmVwr0QhUG6ruj+s3KYYZhtxQ==" + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.40.0.tgz", + "integrity": "sha512-/jN5XNEMv8zP1vRqHw2EndeyC6yVT6d+BD9HFnXpqmA7SYiuVfHF9NAtFnK1GvQqgu1uEdiG1AJmIaO/yr/fDA==" }, "node_modules/@salutejs/plasma-tokens-b2c": { - "version": "0.37.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.37.0.tgz", - "integrity": "sha512-pbxDt3xD8+8eaaAlvpX1aueOlwP0s5ccV34BENyp+39gouZTFJIEWXgMia0iSvRaG4QqhlUizW56PxLlYD/w4A==" + "version": "0.50.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.50.0.tgz", + "integrity": "sha512-gMn3NXuUJA46nNh7wMJydpQx4301Ozq7F46Pitwn5tG87IUIDlOU83QihyWqCKPQvp3bx5htx9TF/CjiDRtg6A==" }, "node_modules/@salutejs/plasma-tokens-utils": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-utils/-/plasma-tokens-utils-0.32.0.tgz", - "integrity": "sha512-3nvsz4jns988VSygdURnvz8HAm24e2k2mf2D2YAy8XmlPIgUwZ/mknqM0e+7uQXCvu/UB5Z83NbaU3JuqSZsOQ==", + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-utils/-/plasma-tokens-utils-0.42.0.tgz", + "integrity": "sha512-vLnmRVK+kI/73lwWRiJ4NU1Mbn+/YRe13urB4vpseqni2LE5MJyLOeZEcOnicT619O2jdUG7yt4/YyupUD9M2w==", "dependencies": { - "@salutejs/plasma-typo": "0.38.0", + "@salutejs/plasma-colors": "0.13.0", + "@salutejs/plasma-typo": "0.40.0", "@theme-ui/css": "0.3.1", "color": "^4.2.3", "csstype": "3.0.3", @@ -3553,14 +3839,14 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@salutejs/plasma-tokens-web": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-web/-/plasma-tokens-web-1.43.0.tgz", - "integrity": "sha512-Sbpqf62e/XWvJ5+29QLZiDtRs6S7uSmwOzTXZ3NXom2mx5cfwRpBPhsf1Xg9awkWVk8rshPT4zyghqLqf3yHOw==" + "version": "1.55.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-web/-/plasma-tokens-web-1.55.0.tgz", + "integrity": "sha512-B0gZeGaupBMiZpK02ZAIMFSOGDImd2D3qkwtpy51lb2InSuoG2qaxggqpQgQzKAvxKrz2boPebpN+vq4yaxNzQ==" }, "node_modules/@salutejs/plasma-typo": { - "version": "0.38.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-typo/-/plasma-typo-0.38.0.tgz", - "integrity": "sha512-KEBskn29jmYRKg3qefmGToKyP2+mKLqEMKyNc0M11MCcBrdSCwfh1O8K9wNZz+gIZGEfZnCtLV270IKsEcUyfw==", + "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", @@ -5286,6 +5572,27 @@ "node": ">=4.0.0" } }, + "node_modules/babel-merge": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/babel-merge/-/babel-merge-3.0.0.tgz", + "integrity": "sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dependencies": { + "deepmerge": "^2.2.1", + "object.omit": "^3.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/babel-merge/node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", @@ -5906,9 +6213,9 @@ } }, "node_modules/browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "funding": [ { "type": "opencollective", @@ -5917,13 +6224,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" }, "bin": { "browserslist": "cli.js" @@ -6147,9 +6458,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001435", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001435.tgz", - "integrity": "sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==", + "version": "1.0.30001627", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz", + "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==", "funding": [ { "type": "opencollective", @@ -6158,6 +6469,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -6294,9 +6609,9 @@ } }, "node_modules/classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "node_modules/clean-css": { "version": "4.2.4", @@ -7753,9 +8068,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" + "version": "1.4.788", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz", + "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==" }, "node_modules/elliptic": { "version": "6.5.4", @@ -7987,9 +8302,9 @@ } }, "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", + "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==", "engines": { "node": ">=6" } @@ -10319,6 +10634,11 @@ "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz", "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==" }, + "node_modules/html-element-attributes": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz", + "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==" + }, "node_modules/html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -10733,6 +11053,11 @@ "node": ">= 4" } }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" + }, "node_modules/immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -13477,9 +13802,9 @@ "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==" }, "node_modules/json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "bin": { "json5": "lib/cli.js" }, @@ -13539,6 +13864,17 @@ "node": ">=4.0" } }, + "node_modules/jszip": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", + "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", + "dependencies": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, "node_modules/jwa": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", @@ -13621,6 +13957,14 @@ "node": ">= 0.8.0" } }, + "node_modules/lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -14417,9 +14761,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", - "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==" + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" }, "node_modules/normalize-package-data": { "version": "2.5.0", @@ -14659,6 +15003,28 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/object.omit": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz", + "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==", + "dependencies": { + "is-extendable": "^1.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object.omit/node_modules/is-extendable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", + "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", + "dependencies": { + "is-plain-object": "^2.0.4" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object.pick": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", @@ -15063,9 +15429,9 @@ "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==" }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -17076,15 +17442,19 @@ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "node_modules/react-file-drop": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/react-file-drop/-/react-file-drop-3.1.2.tgz", - "integrity": "sha512-fhujAloK9AIDzu18ltGrYe8Pk9NuXdCc8MrFgLNPJJS22B/GdTwD7Pz4BCCUiX+4sFZr42L4AZM7RsJN2xu1BQ==", + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/react-file-drop/-/react-file-drop-3.1.6.tgz", + "integrity": "sha512-G1IKKP5ql0FYlWl7X5+ZEDQfzeF5bT4meV6vg3wySs1+NvPOZgoNxTZxAqayENzW+zOf/WVQ81FPaK+yLuryuw==", "dependencies": { "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + } + }, + "node_modules/react-html-attributes": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz", + "integrity": "sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==", + "dependencies": { + "html-element-attributes": "^1.0.0" } }, "node_modules/react-is": { @@ -19833,6 +20203,17 @@ "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, + "node_modules/ts-invariant": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz", + "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==", + "dependencies": { + "tslib": "^2.1.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/ts-pnp": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz", @@ -20160,9 +20541,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz", + "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==", "funding": [ { "type": "opencollective", @@ -20171,14 +20552,18 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.1.2", + "picocolors": "^1.0.1" }, "bin": { - "browserslist-lint": "cli.js" + "update-browserslist-db": "cli.js" }, "peerDependencies": { "browserslist": ">= 4.21.0" @@ -22254,17 +22639,18 @@ } }, "@babel/code-frame": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", - "integrity": "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.6.tgz", + "integrity": "sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==", "requires": { - "@babel/highlight": "^7.18.6" + "@babel/highlight": "^7.24.6", + "picocolors": "^1.0.0" } }, "@babel/compat-data": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.5.tgz", - "integrity": "sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.6.tgz", + "integrity": "sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==" }, "@babel/core": { "version": "7.12.3", @@ -22297,12 +22683,13 @@ } }, "@babel/generator": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.20.5.tgz", - "integrity": "sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.6.tgz", + "integrity": "sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==", "requires": { - "@babel/types": "^7.20.5", - "@jridgewell/gen-mapping": "^0.3.2", + "@babel/types": "^7.24.6", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^2.5.1" } }, @@ -22324,20 +22711,34 @@ } }, "@babel/helper-compilation-targets": { - "version": "7.20.0", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz", - "integrity": "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.6.tgz", + "integrity": "sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==", "requires": { - "@babel/compat-data": "^7.20.0", - "@babel/helper-validator-option": "^7.18.6", - "browserslist": "^4.21.3", - "semver": "^6.3.0" + "@babel/compat-data": "^7.24.6", + "@babel/helper-validator-option": "^7.24.6", + "browserslist": "^4.22.2", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" }, "dependencies": { + "lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "requires": { + "yallist": "^3.0.2" + } + }, "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==" + }, + "yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" } } }, @@ -22385,9 +22786,9 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz", - "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.6.tgz", + "integrity": "sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==" }, "@babel/helper-explode-assignable-expression": { "version": "7.18.6", @@ -22398,20 +22799,20 @@ } }, "@babel/helper-function-name": { - "version": "7.19.0", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz", - "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.6.tgz", + "integrity": "sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==", "requires": { - "@babel/template": "^7.18.10", - "@babel/types": "^7.19.0" + "@babel/template": "^7.24.6", + "@babel/types": "^7.24.6" } }, "@babel/helper-hoist-variables": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz", - "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.6.tgz", + "integrity": "sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==", "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" } }, "@babel/helper-member-expression-to-functions": { @@ -22423,26 +22824,23 @@ } }, "@babel/helper-module-imports": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", - "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.6.tgz", + "integrity": "sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==", "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" } }, "@babel/helper-module-transforms": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz", - "integrity": "sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.6.tgz", + "integrity": "sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==", "requires": { - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-module-imports": "^7.18.6", - "@babel/helper-simple-access": "^7.20.2", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/helper-validator-identifier": "^7.19.1", - "@babel/template": "^7.18.10", - "@babel/traverse": "^7.20.1", - "@babel/types": "^7.20.2" + "@babel/helper-environment-visitor": "^7.24.6", + "@babel/helper-module-imports": "^7.24.6", + "@babel/helper-simple-access": "^7.24.6", + "@babel/helper-split-export-declaration": "^7.24.6", + "@babel/helper-validator-identifier": "^7.24.6" } }, "@babel/helper-optimise-call-expression": { @@ -22454,9 +22852,9 @@ } }, "@babel/helper-plugin-utils": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz", - "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.6.tgz", + "integrity": "sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==" }, "@babel/helper-remap-async-to-generator": { "version": "7.18.9", @@ -22482,11 +22880,11 @@ } }, "@babel/helper-simple-access": { - "version": "7.20.2", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz", - "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.6.tgz", + "integrity": "sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==", "requires": { - "@babel/types": "^7.20.2" + "@babel/types": "^7.24.6" } }, "@babel/helper-skip-transparent-expression-wrappers": { @@ -22498,27 +22896,27 @@ } }, "@babel/helper-split-export-declaration": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz", - "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz", + "integrity": "sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==", "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.24.6" } }, "@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz", + "integrity": "sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==" }, "@babel/helper-validator-identifier": { - "version": "7.19.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz", - "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz", + "integrity": "sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==" }, "@babel/helper-validator-option": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz", - "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz", + "integrity": "sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==" }, "@babel/helper-wrap-function": { "version": "7.20.5", @@ -22532,29 +22930,29 @@ } }, "@babel/helpers": { - "version": "7.20.6", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.6.tgz", - "integrity": "sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.6.tgz", + "integrity": "sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==", "requires": { - "@babel/template": "^7.18.10", - "@babel/traverse": "^7.20.5", - "@babel/types": "^7.20.5" + "@babel/template": "^7.24.6", + "@babel/types": "^7.24.6" } }, "@babel/highlight": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz", - "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.6.tgz", + "integrity": "sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==", "requires": { - "@babel/helper-validator-identifier": "^7.18.6", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" + "@babel/helper-validator-identifier": "^7.24.6", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" } }, "@babel/parser": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.5.tgz", - "integrity": "sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==" + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz", + "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.18.6", @@ -23043,13 +23441,13 @@ } }, "@babel/plugin-transform-modules-commonjs": { - "version": "7.19.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz", - "integrity": "sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.6.tgz", + "integrity": "sha512-JEV8l3MHdmmdb7S7Cmx6rbNEjRCgTQMZxllveHO0mx6uiclB0NflCawlQQ6+o5ZrwjUBYPzHm2XoK4wqGVUFuw==", "requires": { - "@babel/helper-module-transforms": "^7.19.6", - "@babel/helper-plugin-utils": "^7.19.0", - "@babel/helper-simple-access": "^7.19.4" + "@babel/helper-module-transforms": "^7.24.6", + "@babel/helper-plugin-utils": "^7.24.6", + "@babel/helper-simple-access": "^7.24.6" } }, "@babel/plugin-transform-modules-systemjs": { @@ -23406,39 +23804,39 @@ } }, "@babel/template": { - "version": "7.18.10", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz", - "integrity": "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.6.tgz", + "integrity": "sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==", "requires": { - "@babel/code-frame": "^7.18.6", - "@babel/parser": "^7.18.10", - "@babel/types": "^7.18.10" + "@babel/code-frame": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/types": "^7.24.6" } }, "@babel/traverse": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.5.tgz", - "integrity": "sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==", - "requires": { - "@babel/code-frame": "^7.18.6", - "@babel/generator": "^7.20.5", - "@babel/helper-environment-visitor": "^7.18.9", - "@babel/helper-function-name": "^7.19.0", - "@babel/helper-hoist-variables": "^7.18.6", - "@babel/helper-split-export-declaration": "^7.18.6", - "@babel/parser": "^7.20.5", - "@babel/types": "^7.20.5", - "debug": "^4.1.0", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.6.tgz", + "integrity": "sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==", + "requires": { + "@babel/code-frame": "^7.24.6", + "@babel/generator": "^7.24.6", + "@babel/helper-environment-visitor": "^7.24.6", + "@babel/helper-function-name": "^7.24.6", + "@babel/helper-hoist-variables": "^7.24.6", + "@babel/helper-split-export-declaration": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/types": "^7.24.6", + "debug": "^4.3.1", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.20.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.5.tgz", - "integrity": "sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.6.tgz", + "integrity": "sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==", "requires": { - "@babel/helper-string-parser": "^7.19.4", - "@babel/helper-validator-identifier": "^7.19.1", + "@babel/helper-string-parser": "^7.24.6", + "@babel/helper-validator-identifier": "^7.24.6", "to-fast-properties": "^2.0.0" } }, @@ -24073,13 +24471,13 @@ } }, "@jridgewell/gen-mapping": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", - "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "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.0.1", + "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", - "@jridgewell/trace-mapping": "^0.3.9" + "@jridgewell/trace-mapping": "^0.3.24" } }, "@jridgewell/resolve-uri": { @@ -24088,9 +24486,9 @@ "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==" }, "@jridgewell/set-array": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", - "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==" }, "@jridgewell/source-map": { "version": "0.3.2", @@ -24107,12 +24505,173 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, "@jridgewell/trace-mapping": { - "version": "0.3.17", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", - "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", + "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" + } + }, + "@linaria/core": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/core/-/core-5.0.2.tgz", + "integrity": "sha512-l5jQq7w9kDvonfr/0MBF47Dagx9Y9f/o5Q8j3zv7GepwG/yHQdbjKr0tq07rx2fSDDX7Nbqlxk6k9Ymir/NGpg==", + "requires": { + "@linaria/logger": "^5.0.0", + "@linaria/tags": "^5.0.2", + "@linaria/utils": "^5.0.2" + } + }, + "@linaria/logger": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@linaria/logger/-/logger-5.0.0.tgz", + "integrity": "sha512-PZd5H0I4F84U0kXSE+vD75ltIGDxEA6gMDNWS2aDZFitmdlQM5rIXqvKFrp5NsHa7a3AH+I2Hxm0dg60WZF7vg==", + "requires": { + "debug": "^4.3.4", + "picocolors": "^1.0.0" + } + }, + "@linaria/react": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@linaria/react/-/react-5.0.3.tgz", + "integrity": "sha512-faTQHnUlrAz0Lodu+rr6Yx59rX0nqFOrZ5/IdlfQcTRz9VebyVL4vtA3AOecmn1YFZjMpqjopT0OzNz6GknQSg==", + "requires": { + "@emotion/is-prop-valid": "^1.2.0", + "@linaria/core": "^5.0.2", + "@linaria/tags": "^5.0.2", + "@linaria/utils": "^5.0.2", + "minimatch": "^9.0.3", + "react-html-attributes": "^1.4.6", + "ts-invariant": "^0.10.3" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "requires": { + "balanced-match": "^1.0.0" + } + }, + "minimatch": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", + "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "requires": { + "brace-expansion": "^2.0.1" + } + } + } + }, + "@linaria/tags": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/tags/-/tags-5.0.2.tgz", + "integrity": "sha512-opcORl2sA6WkBjTNLHTgpet97dNKnwPRX/QGGZMykBsvGH3AsnEg/bT31cKBMBhL+YBGQsCdBmolxvCkWPOXQw==", "requires": { - "@jridgewell/resolve-uri": "3.1.0", - "@jridgewell/sourcemap-codec": "1.4.14" + "@babel/generator": "^7.22.15", + "@linaria/logger": "^5.0.0", + "@linaria/utils": "^5.0.2" + } + }, + "@linaria/utils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@linaria/utils/-/utils-5.0.2.tgz", + "integrity": "sha512-ZL8Yz4IIr9A8a5+o5LRnEpgdzIkyj4yKJrhw5Zv8wwvL+d/MHUK0q+l/KvxBmuYdcF+YYVHZ9eeBHTQBSL7r/w==", + "requires": { + "@babel/core": "^7.22.15", + "@babel/generator": "^7.22.15", + "@babel/plugin-transform-modules-commonjs": "^7.22.15", + "@babel/template": "^7.22.15", + "@babel/traverse": "^7.22.15", + "@babel/types": "^7.22.15", + "@linaria/logger": "^5.0.0", + "babel-merge": "^3.0.0", + "find-up": "^5.0.0", + "minimatch": "^9.0.3" + }, + "dependencies": { + "@babel/core": { + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.6.tgz", + "integrity": "sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==", + "requires": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.24.6", + "@babel/generator": "^7.24.6", + "@babel/helper-compilation-targets": "^7.24.6", + "@babel/helper-module-transforms": "^7.24.6", + "@babel/helpers": "^7.24.6", + "@babel/parser": "^7.24.6", + "@babel/template": "^7.24.6", + "@babel/traverse": "^7.24.6", + "@babel/types": "^7.24.6", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + } + }, + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "requires": { + "balanced-match": "^1.0.0" + } + }, + "convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" + }, + "find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "requires": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + } + }, + "locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "requires": { + "p-locate": "^5.0.0" + } + }, + "minimatch": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", + "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "requires": { + "brace-expansion": "^2.0.1" + } + }, + "p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "requires": { + "yocto-queue": "^0.1.0" + } + }, + "p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "requires": { + "p-limit": "^3.0.2" + } + }, + "semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==" + } } }, "@nodelib/fs.scandir": { @@ -24722,27 +25281,30 @@ } }, "@salutejs/plasma-b2c": { - "version": "1.228.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.228.0-dev.0.tgz", - "integrity": "sha512-7mwPDdWWZpF14LkRZiUE6UhibIvADPJK6y9QDIHKdfXdRdOulRg2iconnSYpZB75PpEK4rtYBCbjGZIAy7Iz3Q==", + "version": "1.327.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.327.0.tgz", + "integrity": "sha512-yr16VXHkBQy9EC5FdQ72Uey+gH3D0UOu+WAtb7PvU7QnA7lu4EK3+bRBIHnpPRqzb+R7VCOHjowfbREr7xVmdA==", "requires": { - "@salutejs/plasma-core": "1.131.0-dev.0", - "@salutejs/plasma-hope": "1.228.0-dev.0", - "@salutejs/plasma-typo": "0.38.0" + "@salutejs/plasma-core": "1.160.0", + "@salutejs/plasma-hope": "1.280.0", + "@salutejs/plasma-new-hope": "0.87.0", + "@salutejs/plasma-tokens-b2c": "0.50.0", + "@salutejs/plasma-tokens-web": "1.55.0", + "@salutejs/plasma-typo": "0.40.0" } }, "@salutejs/plasma-colors": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-colors/-/plasma-colors-0.10.0.tgz", - "integrity": "sha512-MG9r/7whZgG7No0j4YXaGvizofWcFAWNLCOjHkNC4dws9EucPa6p9Csx//yYvpCoHVGlnKGhtWIqt3TJ4me0TA==" + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-colors/-/plasma-colors-0.13.0.tgz", + "integrity": "sha512-EUhA9QJ2/uTwGVrqH0He3qq+d7h3x5aEVb8VfOwDlT9oF5gpT6DMWfQ6dzJcEAnXIAY8TSXLYQJI4iWAwCAd+w==" }, "@salutejs/plasma-core": { - "version": "1.131.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.131.0-dev.0.tgz", - "integrity": "sha512-pwnQAXT8dbkR7SfhR4Y1WECtT3qi6rHFaZK1wMI1Vd+yJ+1nMD2YDtt4cCfrwjoJJ/Ivxus2e0Ynlk1pSepWbQ==", + "version": "1.160.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.160.0.tgz", + "integrity": "sha512-ddpmy2lmCjPY0SQAcVma/rjqV+yzXY512MC6WtC6qq5RGZi+x/QKFGyL6eLVZbVE7QqxvvqSed/YiA22OaAXUA==", "requires": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-typo": "0.38.0", + "@salutejs/plasma-typo": "0.40.0", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", "react-draggable": "4.4.3", @@ -24750,40 +25312,68 @@ } }, "@salutejs/plasma-hope": { - "version": "1.228.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.228.0-dev.0.tgz", - "integrity": "sha512-g1csPuWS9At1RFoZjahbXn1D1qwf0QABbw3rEQsIVO5y7qihDm77K9lroIluBekzI6ZG56J9wKow0W5hEz1FgA==", + "version": "1.280.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.280.0.tgz", + "integrity": "sha512-XPQUwNUUOSx7qZirGGowBnZY0d2plA5v2SIFA2JUfBZ5jeRAiK8lepNGQfnXGTfVtfanAKloIFNiS91ppGjF3A==", "requires": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.131.0-dev.0", - "@salutejs/plasma-typo": "0.38.0", - "react-file-drop": "3.1.2", + "@salutejs/plasma-core": "1.160.0", + "@salutejs/plasma-typo": "0.40.0", + "react-file-drop": "3.1.6", "react-popper": "2.3.0", "react-sortable-hoc": "2.0.0", "storeon": "3.1.4" } }, "@salutejs/plasma-icons": { - "version": "1.162.0-dev.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.162.0-dev.0.tgz", - "integrity": "sha512-BqNyCaWGoqYCI1Q/+FGY78JWWBnnh1Gf7Vfk/k9GgF1HnywvZzIyql51b+WOzcdsiD0RTXxfM3ZBEnizjcDbGg==" + "version": "1.193.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.193.0.tgz", + "integrity": "sha512-n5pwmsWJSFYnXmUa2Hmyx9CzvJnLbkIjCPhnDDva/ZRKmwqY08XkbO838aT96QUtOdCeRAf86HGuYdzxzwcJ2w==" + }, + "@salutejs/plasma-new-hope": { + "version": "0.87.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.87.0.tgz", + "integrity": "sha512-5XkkQJ8D/IZmEaX/8poJYz0htDLcHVZHcRUQ+7/ADcHmyvZaLpvWtCLUgB/rfUxG4oy3RzCypEu0EEspDOhLFw==", + "requires": { + "@linaria/core": "5.0.2", + "@linaria/react": "5.0.3", + "@popperjs/core": "2.11.8", + "@salutejs/plasma-core": "1.160.0", + "focus-visible": "5.2.0", + "react-draggable": "4.4.3", + "react-popper": "2.3.0", + "storeon": "3.1.5" + }, + "dependencies": { + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, + "storeon": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/storeon/-/storeon-3.1.5.tgz", + "integrity": "sha512-VuW4GQr3LGQr+gqscqsOz2c9asK9N+B+8+sWs7Pj4OqU7bngYIqsPF3IYpkbmccKNWjs7wwxUAlR+gtL9cEMEg==" + } + } }, "@salutejs/plasma-tokens-b2b": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.28.0.tgz", - "integrity": "sha512-dMlgAdWBOgkVKjJokJ5AGzphWAG+i4PkKkgWLG/WFDWvorCcB8OM5uuyKoDJipmVwr0QhUG6ruj+s3KYYZhtxQ==" + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2b/-/plasma-tokens-b2b-1.40.0.tgz", + "integrity": "sha512-/jN5XNEMv8zP1vRqHw2EndeyC6yVT6d+BD9HFnXpqmA7SYiuVfHF9NAtFnK1GvQqgu1uEdiG1AJmIaO/yr/fDA==" }, "@salutejs/plasma-tokens-b2c": { - "version": "0.37.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.37.0.tgz", - "integrity": "sha512-pbxDt3xD8+8eaaAlvpX1aueOlwP0s5ccV34BENyp+39gouZTFJIEWXgMia0iSvRaG4QqhlUizW56PxLlYD/w4A==" + "version": "0.50.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-b2c/-/plasma-tokens-b2c-0.50.0.tgz", + "integrity": "sha512-gMn3NXuUJA46nNh7wMJydpQx4301Ozq7F46Pitwn5tG87IUIDlOU83QihyWqCKPQvp3bx5htx9TF/CjiDRtg6A==" }, "@salutejs/plasma-tokens-utils": { - "version": "0.32.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-utils/-/plasma-tokens-utils-0.32.0.tgz", - "integrity": "sha512-3nvsz4jns988VSygdURnvz8HAm24e2k2mf2D2YAy8XmlPIgUwZ/mknqM0e+7uQXCvu/UB5Z83NbaU3JuqSZsOQ==", + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-utils/-/plasma-tokens-utils-0.42.0.tgz", + "integrity": "sha512-vLnmRVK+kI/73lwWRiJ4NU1Mbn+/YRe13urB4vpseqni2LE5MJyLOeZEcOnicT619O2jdUG7yt4/YyupUD9M2w==", "requires": { - "@salutejs/plasma-typo": "0.38.0", + "@salutejs/plasma-colors": "0.13.0", + "@salutejs/plasma-typo": "0.40.0", "@theme-ui/css": "0.3.1", "color": "^4.2.3", "csstype": "3.0.3", @@ -24834,14 +25424,14 @@ } }, "@salutejs/plasma-tokens-web": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-web/-/plasma-tokens-web-1.43.0.tgz", - "integrity": "sha512-Sbpqf62e/XWvJ5+29QLZiDtRs6S7uSmwOzTXZ3NXom2mx5cfwRpBPhsf1Xg9awkWVk8rshPT4zyghqLqf3yHOw==" + "version": "1.55.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens-web/-/plasma-tokens-web-1.55.0.tgz", + "integrity": "sha512-B0gZeGaupBMiZpK02ZAIMFSOGDImd2D3qkwtpy51lb2InSuoG2qaxggqpQgQzKAvxKrz2boPebpN+vq4yaxNzQ==" }, "@salutejs/plasma-typo": { - "version": "0.38.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-typo/-/plasma-typo-0.38.0.tgz", - "integrity": "sha512-KEBskn29jmYRKg3qefmGToKyP2+mKLqEMKyNc0M11MCcBrdSCwfh1O8K9wNZz+gIZGEfZnCtLV270IKsEcUyfw==" + "version": "0.40.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-typo/-/plasma-typo-0.40.0.tgz", + "integrity": "sha512-wjIJwHb/N5wFyTwTKt4bimt0UpM0/TS3ZsKtJVBS5foqxxJFgv32Ma75RCnnqol38M+KHDa6Lrnu2po0jiicow==" }, "@sinonjs/commons": { "version": "1.8.6", @@ -26176,6 +26766,22 @@ } } }, + "babel-merge": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/babel-merge/-/babel-merge-3.0.0.tgz", + "integrity": "sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==", + "requires": { + "deepmerge": "^2.2.1", + "object.omit": "^3.0.0" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + } + } + }, "babel-plugin-istanbul": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz", @@ -26687,14 +27293,14 @@ } }, "browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "requires": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" } }, "bser": { @@ -26871,9 +27477,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001435", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001435.tgz", - "integrity": "sha512-kdCkUTjR+v4YAJelyiDTqiu82BDr4W4CP5sgTA0ZBmqn30XfS2ZghPLMowik9TPhS+psWJiUNxsqLyurDbmutA==" + "version": "1.0.30001627", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz", + "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==" }, "capture-exit": { "version": "2.0.0", @@ -26975,9 +27581,9 @@ } }, "classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "clean-css": { "version": "4.2.4", @@ -28135,9 +28741,9 @@ "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==" }, "electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" + "version": "1.4.788", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.788.tgz", + "integrity": "sha512-ubp5+Ev/VV8KuRoWnfP2QF2Bg+O2ZFdb49DiiNbz2VmgkIqrnyYaqIOqj8A6K/3p1xV0QcU5hBQ1+BmB6ot1OA==" }, "elliptic": { "version": "6.5.4", @@ -28330,9 +28936,9 @@ } }, "escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", + "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==" }, "escape-html": { "version": "1.0.3", @@ -30041,6 +30647,11 @@ "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz", "integrity": "sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==" }, + "html-element-attributes": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz", + "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==" + }, "html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -30359,6 +30970,11 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz", "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA==" }, + "immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" + }, "immer": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz", @@ -32356,9 +32972,9 @@ "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==" }, "json5": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", - "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==" + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==" }, "jsonfile": { "version": "6.1.0", @@ -32402,6 +33018,17 @@ "object.assign": "^4.1.3" } }, + "jszip": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", + "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", + "requires": { + "lie": "~3.3.0", + "pako": "~1.0.2", + "readable-stream": "~2.3.6", + "setimmediate": "^1.0.5" + } + }, "jwa": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", @@ -32472,6 +33099,14 @@ "type-check": "~0.4.0" } }, + "lie": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", + "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", + "requires": { + "immediate": "~3.0.5" + } + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -33133,9 +33768,9 @@ } }, "node-releases": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz", - "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==" + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" }, "normalize-package-data": { "version": "2.5.0", @@ -33313,6 +33948,24 @@ "es-abstract": "^1.20.4" } }, + "object.omit": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz", + "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==", + "requires": { + "is-extendable": "^1.0.0" + }, + "dependencies": { + "is-extendable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", + "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", + "requires": { + "is-plain-object": "^2.0.4" + } + } + } + }, "object.pick": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", @@ -33620,9 +34273,9 @@ "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==" }, "picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "picomatch": { "version": "2.3.1", @@ -35223,13 +35876,21 @@ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "react-file-drop": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/react-file-drop/-/react-file-drop-3.1.2.tgz", - "integrity": "sha512-fhujAloK9AIDzu18ltGrYe8Pk9NuXdCc8MrFgLNPJJS22B/GdTwD7Pz4BCCUiX+4sFZr42L4AZM7RsJN2xu1BQ==", + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/react-file-drop/-/react-file-drop-3.1.6.tgz", + "integrity": "sha512-G1IKKP5ql0FYlWl7X5+ZEDQfzeF5bT4meV6vg3wySs1+NvPOZgoNxTZxAqayENzW+zOf/WVQ81FPaK+yLuryuw==", "requires": { "prop-types": "^15.7.2" } }, + "react-html-attributes": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.6.tgz", + "integrity": "sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==", + "requires": { + "html-element-attributes": "^1.0.0" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -37370,6 +38031,14 @@ "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, + "ts-invariant": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz", + "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==", + "requires": { + "tslib": "^2.1.0" + } + }, "ts-pnp": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz", @@ -37623,12 +38292,12 @@ "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==" }, "update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.16", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz", + "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==", "requires": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.1.2", + "picocolors": "^1.0.1" } }, "uri-js": { diff --git a/website/plasma-theme-builder/package.json b/website/plasma-theme-builder/package.json index 9ce261b475..d9213f07a8 100644 --- a/website/plasma-theme-builder/package.json +++ b/website/plasma-theme-builder/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-theme-builder", - "version": "1.179.0", + "version": "1.180.1-dev.0", "description": "Plasma Theme Builder.", "author": "Salute Frontend Team ", "private": true, @@ -10,14 +10,15 @@ "lint": "../../node_modules/.bin/eslint ./src --ext .ts,.tsx --quiet" }, "dependencies": { - "@salutejs/plasma-b2c": "1.327.0", + "@salutejs/plasma-b2c": "1.327.1-dev.0", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", "@salutejs/plasma-tokens-utils": "0.42.0", "@salutejs/plasma-tokens-web": "1.55.0", "@salutejs/plasma-typo": "0.40.0", + "jszip": "^3.10.1", "octokit": "^1.7.1", "prettier": "^2.6.2", "react": "^18.2.0", @@ -57,4 +58,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/website/plasma-theme-builder/src/_new/README.md b/website/plasma-theme-builder/src/_new/README.md new file mode 100644 index 0000000000..d51e75179c --- /dev/null +++ b/website/plasma-theme-builder/src/_new/README.md @@ -0,0 +1,572 @@ +# Модуль работы с темой + +Данный модуль предоставляет возможность взаимодействия с темой на уровне разработки. + +## Содержание + +- [Тема](#тема) + - [Мета токены](#мета-токены) + - [Платформы](#платформы) + - [Значения токенов](#значения-токенов) +- [Директория `themes`](#директория-themes) + - [Файл `theme`](#файл-theme) + - [Файл `builders`](#файл-builders) + - [Файл `createMetaTokens`](#файл-createmetatokens) + - [Файл `createVariationTokens`](#файл-createvariationtokens) + - [Файл `readTheme`](#файл-readtheme) + - [Файл `writeTheme`](#файл-writetheme) +- [Директория `tokens`](#директория-tokens) + - [Файл `platformToken`](#файл-platformToken) + - [Файл `token`](#файл-token) + - [Директория `color`](#директория-color) + - [Директория `gradient`](#директория-gradient) + - [Директория `shadow`](#директория-shadow) + - [Директория `shape`](#директория-shape) + - [Директория `fontFamily`](#директория-fontFamily) + - [Директория `typography`](#директория-typography) +- [Использование](#использование) + - [Создание базовой темы](#создание-базовой-темы) + - [Создание и изменение тестовой темы](#создание-и-изменение-тестовой-темы) + - [Чтение темы, билд экземпляра и запись zip-архива с темой](#чтение-темы-билд-экземпляра-и-запись-zip-архива-с-темой) + +## Тема + +Тема представляет собой набор файлов в формате `JSON`, которые упакованы в zip-архив и лежат в специальном [репозитории](https://github.com/salute-developers/theme-converter/tree/main/themes). + +Структура темы: + +```bash +. +└── theme/ + ├── web/ + │ ├── web_color.json + │ ├── web_fontFamily.json + │ ├── web_gradient.json + │ ├── web_shadow.json + │ ├── web_shape.json + │ └── web_typography.json + ├── ios/ + │ ├── ios_color.json + │ ├── ios_fontFamily.json + │ ├── ios_gradient.json + │ ├── ios_shadow.json + │ ├── ios_shape.json + │ └── ios_typography.json + ├── android/ + │ ├── android_color.json + │ ├── android_fontFamily.json + │ ├── android_gradient.json + │ ├── android_shadow.json + │ ├── android_shape.json + │ └── android_typography.json + └── meta.json +``` + +### Мета токены + +В файле `meta.json` в поле `tokens` хранится мета информация о токенах и описывается типом `TokenType`, который имеет такие поля: + +- `type` - один из вариацией токенов: `'color'` | `'gradient'` | `'shadow'` | `'shape'` | `'fontFamily'` | `'typography'`. +- `name` - имя токена в формате `'mode.category.subcategory.name?'`. Пример: `'dark.text.on-dark.primary'`. +- `tags` - набор тегов в виде массива, как правило совпадающий с полем `name`, но разделенный по точке: `['mode', 'category', 'subcategory', 'name']`. Пример: `['dark', 'text', 'on-dark', 'primary']`. +- `displayName` - имя токена в визуальном интерфейсе. Например: `'onDarkSurfaceTextPrimary'`. +- `description` - описание предназначение токена. Например: `Вторичный цвет текста на светлом фоне` +- `enabled` - логическое значение отвечающее за то, будет ли токен отображаться в итоговой теме. Пример: `false`. + +### Платформы + +Поддерживаются следующие типы платформ: + +- `web` - набор токенов для веб интерфейсов. +- `ios` - набор токенов для приложений, работающих под операционными системами `iPadOS` и `iOS`. +- `android` - набор токенов для приложений, работающих под операционной системой `android`. + +В каждой директории платформы лежат `JSON` файлы со значениями для всех видов токенов: + +- `color` - токен [цвета](#директория-color). Используется для покраски визуальных элементов. +- `gradient` - токен [градиента](#директория-gradient). Используется для покраски визуальных элементов. +- `shadow` - токен [тени](#директория-shadow). Используется для добавления эффекта глубины. +- `shape` - токен [формы](#директория-shape). Используется для задания форм / скруглений и т.д. +- `fontFamily` - токен [семейства шрифтов](#директория-fontFamily). Используется для формирования правил использования шрифтов. +- `typography` - токен [типографики](#директория-typography). Используется для создания типографической системы. + +### Значения токенов + +Для того, чтобы найти значение токена, необходимо сопоставить информацию из файла `meta.json`, а именно поля `name` и `type` в массиве `tokens`, с таким же именем в нужной платформе. + +> [!IMPORTANT] +> Гарантируется, что по имени (`name`) токена можно найти значение в каждой платформе. + +Например, необходимо получить значение токена c именем `'dark.text.on-light.secondary'` и типом `'color'` дл платформы `web`: + +```json +meta.json + +{ + "name": "default", + "version": "0.1.0", + "tokens": [ + ... + { + "type": "color", + "name": "dark.text.on-light.secondary", + "tags": [ + "dark", + "text", + "on-light", + "secondary" + ], + "displayName": "onLightTextSecondary", + "description": "Вторичный цвет текста на светлом фоне", + "enabled": true + } + ... + ], + ... +} +``` + +```json +web/web_color.json + +{ + ... + "dark.text.on-light.secondary": "#50B1F2FF", + ... +} +``` + +## Директория `themes` + +Содержит ряд классов и методов, которые позволяют загружать / редактировать и создавать темы. + +### Файл `theme` + +Класс `Theme`, который позволяет управлять объектом темы. + +- `getName` - возвращает название темы. +- `setName` - устанавливает название темы. +- `getVersion` - возвращает версию темы. +- `setVersion` - устанавливает версию темы. +- `getTokens` - возвращает все типы токенов / возвращает токены для конкретного типа если передан параметр. +- `addToken` - добавляет токен. +- `removeToken` - удаляет токен. +- `getTokenValue` - возвращает значение токенов для всех платформ / возвращает значение токенов для конкретной платформы если передан параметр. +- `setTokenValue` - устанавливает значение токенов для конкретной платформы / устанавливает значение токенов для всех платформ если не передан параметр. + +### Файл `builders` + +Содержит следующие методы: + +- `buildDefaultTheme` - отвечает за создание экземпляра базовой темы на основе выбранных пользователем параметров. +- `buildTheme` - отвечает за создание экземпляра темы на основе загруженных из хранилища zip-файлов. +- `buildMockTheme` - отвечает за создание экземпляра тестовой темы для демонстрации возможности взаимодействия посредством API. + +### Файл `createMetaTokens` + +Функция, которая создаёт объект с мета информацией на основе экземпляра темы: + +```ts +type MetaVariations = Variations; + +interface TokenType { + type: Variation; + name: string; + tags: Array; + displayName: string; + description?: string; + enabled: boolean; +} + +interface ThemeMeta extends MetaVariations { + name: string; + version: string; + tokens: Array; +} +``` + +Так же метод позволяет применять кастомные обработчики, которые могут добавлять дополнительные токены. Например, с помощью метода `getHoverAndActiveMetaTokens` добавляются токены для `active` и `hover` состояний. + +### Файл `createVariationTokens` + +Функция, которая создаёт объект с набором всех типов токенов для всех поддерживаемых платформ: + +```ts +type PlatformsVariations = Variations< + ColorPlatforms, + GradientPlatforms, + ShadowPlatforms, + ShapePlatforms, + TypographyPlatforms, + FontFamilyPlatforms +>; +``` + +Так же метод позволяет применять кастомные обработчики, которые могут добавлять дополнительные токены. Например, с помощью метода `getHoverAndActiveColorThemeTokens` добавляются токены для `active` и `hover` состояний. + +### Файл `readTheme` + +Метод, который считывает тему в формате zip-архива из [репозитория](https://github.com/salute-developers/theme-converter/tree/main/themes) и возвращает объект с мета информацией (`ThemeMeta`), а так же объект с набором всех типов токенов для всех поддерживаемых платформ (`PlatformsVariations`). + +### Файл `writeTheme` + +Метод, который создаёт тему в формате zip-архива используя объект с мета информацией (`ThemeMeta`), а так же объект с набором всех типов токенов для всех поддерживаемых платформ (`PlatformsVariations`). + +## Директория `tokens` + +Содержит ряд классов для всех типов токенов и для всех платформ, экземпляры которых используются в классе `Theme`. + +### Файл `token` + +Абстрактный класс `Token`, позволяющий управлять содержимым токена для всех платформ. + +- `getType` - возвращает вид токена. +- `getName` - возвращает имя токена. +- `setName` - задает имя токена. +- `getTags` - возвращает набор тегов. +- `setTags` - задаёт набор тегов. +- `getDisplayName` - возвращает имя токена, которое будет отображаться в интерфейсе. +- `setDisplayName` - задаёт имя токена, которое будет отображаться в интерфейсе. +- `getDescription` - возвращает описание токена. +- `setDescription` - задаёт описание токена. +- `getEnabled` - возвращает состояние токена. +- `setEnabled` - задаёт состояние токена. +- `getPlatforms` - возвращает экземпляры классов для всех платформ. +- `getValue` - возвращает значение токена для конкретной платформы. +- `setValue` - задаёт значение токена для конкретной платформы. +- `getTokenData` - возвращает набор всех параметров токена. + +### Файл `platformToken` + +Абстрактный класс `PlatformToken`, отвечающий за хранения значения у конкретной платформы. + +- `getValue` - возвращает значение токена для конкретной платформы. +- `setValue` - задаёт значение токена для конкретной платформы. + +### Директория `color` + +- `default` - директория, которая содержит набор токенов вида 'цвет' для генерации базовой темы. +- `color` - содержит класс типа токена `ColorToken`, а также классы платформ `WebColor`, `IOSColor`, `AndroidColor`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `ColorToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +interface WebColorToken { + [k: string]: string; +} + +/* IOS */ + +interface IOSColorToken { + [k: string]: string; +} + +/* ANDROID */ + +interface AndroidColorToken { + [k: string]: string; +} +``` + +### Директория `gradient` + +- `default` - директория, которая содержит набор токенов вида 'градиент' для генерации базовой темы. +- `gradient` - содержит класс типа токена `GradientToken`, а также классы платформ `WebGradient`, `IOSGradient`, `AndroidGradient`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `GradientToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +interface WebGradientToken { + [k: string]: Array; +} + +/* IOS */ + +interface IOSLinearGradient { + kind: 'linear'; + locations: Array; + colors: Array; + angle: number; +} + +interface IOSRadialGradient { + kind: 'radial'; + locations: Array; + colors: Array; + startPointX: number; + startPointY: number; + endPointX: number; + endPointY: number; +} + +interface IOSAngularGradient { + kind: 'angular'; + locations: Array; + colors: Array; + startAngle: number; + endAngle: number; + centerX: number; + centerY: number; +} + +interface IOSColorGradient { + kind: 'color'; + background: string; +} + +interface IOSGradientToken { + [k: string]: Array; +} + +/* ANDROID */ + +interface AndroidLinearGradient { + kind: 'linear'; + locations: Array; + colors: Array; + angle: number; +} + +interface AndroidRadialGradient { + kind: 'radial'; + locations: Array; + colors: Array; + centerX: number; + centerY: number; + radius: number; +} + +interface AndroidAngularGradient { + kind: 'angular'; + locations: Array; + colors: Array; + centerX: number; + centerY: number; +} + +interface AndroidColorGradient { + kind: 'color'; + background: string; +} + +interface AndroidGradientToken { + [k: string]: Array; +} +``` + +### Директория `shadow` + +- `default` - директория, которая содержит набор токенов вида 'тень' для генерации базовой темы. +- `shadow` - содержит класс типа токена `ShadowToken`, а также классы платформ `WebShadow`, `IOSShadow`, `AndroidShadow`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `ShadowToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +interface WebShadowToken { + [k: string]: Array; +} + +/* IOS */ + +interface IOSShadowToken { + [k: string]: { + color: string; + offset: { + width: number; + height: number; + }; + opacity: number; + radius: number; + }; +} + +/* ANDROID */ + +interface AndroidShadowToken { + [k: string]: { + color: string; + elevation: number; + }; +} +``` + +### Директория `shape` + +- `default` - директория, которая содержит набор токенов вида 'форма' для генерации базовой темы. +- `shape` - содержит класс типа токена `ShapeToken`, а также классы платформ `WebShape`, `IOSShape`, `AndroidShape`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `ShapeToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +interface WebShapeToken { + [k: string]: string; +} + +/* IOS */ + +interface IOSShapeToken { + [k: string]: { + kind: 'round'; + cornerRadius: number; + }; +} + +/* ANDROID */ + +interface AndroidShapeToken { + [k: string]: { + kind: 'round'; + cornerRadius: number; + }; +} +``` + +### Директория `fontFamily` + +- `default` - директория, которая содержит набор токенов вида 'семейства шрифтов' для генерации базовой темы. +- `fontFamily` - содержит класс типа токена `FontFamilyToken`, а также классы платформ `WebFontFamily`, `IOSFontFamily`, `AndroidFontFamily`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `FontFamilyToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +type WebFontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; + +type WebFontStyle = 'normal' | 'italic'; + +interface WebFont { + src: Array; + fontWeight: WebFontWeight; + fontStyle: WebFontStyle; +} + +interface WebFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} + +/* IOS */ + +type IOSFontWeight = 'black' | 'bold' | 'heavy' | 'light' | 'medium' | 'regular' | 'semibold' | 'thin' | 'ultraLight'; + +type IOSFontStyle = 'normal' | 'italic'; + +interface IOSFont { + link: string; + weight: IOSFontWeight; + style: IOSFontStyle; +} + +interface IOSFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} + +/* ANDROID */ + +type AndroidFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + +type AndroidFontStyle = 'normal' | 'italic'; + +interface AndroidFont { + link: string; + fontWeight: AndroidFontWeight; + fontStyle: AndroidFontStyle; +} + +interface AndroidFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} +``` + +### Директория `typography` + +- `default` - директория, которая содержит набор токенов вида 'семейства шрифтов' для генерации базовой темы. +- `typography` - содержит класс типа токена `TypographyToken`, а также классы платформ `WebTypography`, `IOSTypography`, `AndroidTypography`. +- `creators` - содержит методы для генерации токенов, которые возвращают экземпляр класса `TypographyToken`. +- `types` - содержит типы для всех платформ. + +Типы токенов для всех платформ. + +```ts +/* WEB */ + +interface WebTypographyToken { + [k: string]: { + fontFamilyRef: string; + fontWeight: WebFontWeight; + fontStyle: WebFontStyle; + fontSize: string; + lineHeight: string; + letterSpacing: string; + }; +} + +/* IOS */ + +interface IOSTypographyToken { + [k: string]: { + fontFamilyRef: string; + weight: IOSFontWeight; + style: IOSFontStyle; + size: number; + lineHeight: number; + kerning: number; + }; +} + +/* ANDROID */ + +interface AndroidTypographyToken { + [k: string]: { + fontFamilyRef: string; + fontWeight: AndroidFontWeight; + fontStyle: AndroidFontStyle; + textSize: number; + lineHeight: number; + letterSpacing: number; + }; +} +``` + +## Использование + +Примеры основных сценариев использования модуля. + +### Создание базовой темы + +В файле `examples/buildDefaultThemeWithUserConfig.ts` реализован пример создания базовой темы на основе пользовательских выборов с использованием метода `buildDefaultTheme`. + +### Создание и изменение тестовой темы + +В файле `examples/buildAndModifyMockTheme.ts` реализован пример создания тестовой темы и различные способы модификации токенов с использованием метода `buildMockTheme`. + +### Чтение темы, билд экземпляра и запись zip-архива с темой + +В файле `examples/readThemeBuildInstanceAndWrite.ts` реализован пример чтения существующей темы с помощью метода `readTheme`, затем создание экземпляра темы с помощью `buildTheme`, и создание zip-архива с итоговой темой с помощью `writeTheme`. diff --git a/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts b/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts new file mode 100644 index 0000000000..02a1f02ed4 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts @@ -0,0 +1,283 @@ +import { buildMockTheme } from '../themes'; +import { AndroidGradient, GradientToken, IOSGradient, WebGradient } from '../tokens'; + +const fixture = { + name: 'mock', + version: '0.1.0', + tokens: { + color: [ + { + type: 'color', + name: 'color.name.new.test', + tags: ['color', 'name'], + displayName: 'colorName', + description: 'Description', + enabled: true, + platforms: { + web: { + value: '#aboba1', + }, + ios: { + value: '#aboba2', + }, + android: { + value: '#hehehaha', + }, + }, + }, + ], + gradient: [ + { + type: 'gradient', + name: 'gradient.name', + tags: ['gradient', 'name'], + displayName: 'gradientName', + description: 'Description', + enabled: true, + platforms: { + web: { + value: [], + }, + ios: { + value: [ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ], + }, + android: { + value: [ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ], + }, + }, + }, + { + type: 'gradient', + name: 'new.gradient.name', + tags: ['new', 'gradient', 'name'], + displayName: 'newGradientName', + description: 'New Description', + enabled: false, + platforms: { + web: { + value: [], + }, + ios: { + value: [ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ], + }, + android: { + value: [ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ], + }, + }, + }, + ], + shadow: [ + { + type: 'shadow', + name: 'shadow.name', + tags: ['shadow', 'name'], + displayName: 'shadowName', + description: 'Description', + enabled: true, + platforms: { + web: { + value: [], + }, + ios: { + value: { + color: '#FFF', + offset: { + width: 0, + height: 0, + }, + opacity: 0, + radius: 9, + }, + }, + android: { + value: { + color: 'red', + elevation: 0, + }, + }, + }, + }, + ], + shape: [ + { + type: 'shape', + name: 'shape.name', + tags: ['shape', 'name'], + displayName: 'shapeName', + description: 'Description', + enabled: true, + platforms: { + web: { + value: '777', + }, + ios: { + value: { + cornerRadius: -999, + kind: 'round', + }, + }, + android: { + value: { + cornerRadius: 999, + kind: 'round', + }, + }, + }, + }, + ], + typography: [], + fontFamily: [ + { + type: 'fontFamily', + name: 'fontFamily.name', + tags: ['fontFamily', 'name'], + displayName: 'fontFamilyName', + description: 'Description', + enabled: true, + platforms: { + web: { + value: { + name: '', + fonts: [ + { + src: [], + fontWeight: '100', + fontStyle: 'normal', + }, + ], + }, + }, + ios: { + value: { + name: '', + fonts: [ + { + link: '', + weight: 'bold', + style: 'normal', + }, + ], + }, + }, + android: { + value: { + name: '', + fonts: [ + { + link: '', + fontWeight: 100, + fontStyle: 'normal', + }, + ], + }, + }, + }, + }, + ], + }, +}; + +export const buildAndModifyMockTheme = async () => { + const mockTheme = buildMockTheme(); + + const beforeModify = JSON.parse(JSON.stringify(mockTheme)); + console.log('BEFORE mockTheme', beforeModify); + + mockTheme.setTokenValue('color.name', 'color', 'android', '#aboba'); + mockTheme.setTokenValue('color.name', 'color', 'web', '#aboba1'); + mockTheme.setTokenValue('color.name', 'color', 'ios', '#aboba2'); + + mockTheme.addToken( + 'gradient', + new GradientToken( + { + displayName: 'newGradientName', + enabled: false, + name: 'new.gradient.name', + tags: ['new', 'gradient', 'name'], + description: 'New Description', + }, + { + web: new WebGradient([]), + ios: new IOSGradient([ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ]), + android: new AndroidGradient([ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ]), + }, + ), + ); + + const token = mockTheme.getToken('color.name', 'color'); + token?.setName('color.name.new.test'); + token?.setValue('android', '#hehehaha'); + + mockTheme.setTokenValue('shape.name', 'shape', { + web: '777', + android: { + cornerRadius: 999, + kind: 'round', + }, + ios: { + cornerRadius: -999, + kind: 'round', + }, + }); + + mockTheme.setTokenValue('shadow.name', 'shadow', 'android', { color: 'red', elevation: 0 }); + + const value = mockTheme.getTokenValue('shape.name', 'shape', 'ios'); + const values = mockTheme.getTokenValue('shape.name', 'shape'); + console.log('VALUE', value); + console.log('VALUES', values); + + mockTheme.removeToken('typography.name', 'typography'); + + const afterModify = JSON.parse(JSON.stringify(mockTheme)); + console.log('AFTER mockTheme', afterModify); + + if (JSON.stringify(afterModify) === JSON.stringify(fixture)) { + console.log('they are same'); + } else { + console.error('they are different'); + } +}; diff --git a/website/plasma-theme-builder/src/_new/examples/buildDefaultThemeWithUserConfig.ts b/website/plasma-theme-builder/src/_new/examples/buildDefaultThemeWithUserConfig.ts new file mode 100644 index 0000000000..89459f2c95 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/examples/buildDefaultThemeWithUserConfig.ts @@ -0,0 +1,21 @@ +import { Grayscale, ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { buildDefaultTheme } from '../themes'; + +export const buildDefaultThemeWithUserConfig = async () => { + const userConfig: ThemeConfig = { + name: 'default', + accentColor: { + dark: '[general.green.500]', + light: '[general.green.600]', + }, + grayscale: { + dark: Grayscale.gray, + light: Grayscale.gray, + }, + }; + + const defaultTheme = buildDefaultTheme(userConfig); + + console.log('defaultTheme', JSON.parse(JSON.stringify(defaultTheme))); +}; diff --git a/website/plasma-theme-builder/src/_new/examples/readThemeBuildInstanceAndWrite.ts b/website/plasma-theme-builder/src/_new/examples/readThemeBuildInstanceAndWrite.ts new file mode 100644 index 0000000000..004063bd82 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/examples/readThemeBuildInstanceAndWrite.ts @@ -0,0 +1,13 @@ +import { buildTheme, readTheme, writeTheme } from '../themes'; + +export const readThemeBuildInstanceAndWrite = async () => { + const { meta, variation } = await readTheme('plasma_b2c', 'latest'); + const theme = buildTheme(meta, variation); + const zipArchive = await writeTheme(theme); + + // Создаем ссылку для скачивания архива + const link = document.createElement('a'); + link.download = 'theme.zip'; + link.href = window.URL.createObjectURL(zipArchive); + link.click(); +}; diff --git a/website/plasma-theme-builder/src/_new/index.ts b/website/plasma-theme-builder/src/_new/index.ts new file mode 100644 index 0000000000..c9799de1e4 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/index.ts @@ -0,0 +1,3 @@ +export * from './tokens'; +export * from './types'; +export * from './themes'; diff --git a/website/plasma-theme-builder/src/_new/themes/builders.ts b/website/plasma-theme-builder/src/_new/themes/builders.ts new file mode 100644 index 0000000000..fb00d3eb6b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/builders.ts @@ -0,0 +1,86 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { + createColorTokens, + createDefaultColorTokens, + createMockColorTokens, + createGradientTokens, + createDefaultGradientTokens, + createMockGradientTokens, + createMockShadowTokens, + createDefaultShadowTokens, + createShadowTokens, + createMockShapeTokens, + createDefaultShapeTokens, + createShapeTokens, + createMockTypographyTokens, + createDefaultTypographyTokens, + createTypographyTokens, + createFontFamilyTokens, + createDefaultFontFamilyTokens, + createMockFontFamilyTokens, +} from '../tokens'; +import { Theme } from './'; +import { PlatformsVariations, ThemeMeta, TokenType } from '../types'; + +export const buildDefaultTheme = (config: ThemeConfig) => { + const color = createDefaultColorTokens(config); + const gradient = createDefaultGradientTokens(config); + const shadow = createDefaultShadowTokens(config); + const shape = createDefaultShapeTokens(config); + const typography = createDefaultTypographyTokens(config); + const fontFamily = createDefaultFontFamilyTokens(config); + + return new Theme(config.name, '0.1.0', { + color, + gradient, + shadow, + shape, + typography, + fontFamily, + }); +}; + +export const buildTheme = (meta: ThemeMeta, variations: PlatformsVariations) => { + const metaGrouped = meta.tokens.reduce((acc, token) => { + return { + ...acc, + [token.type]: [...(acc[token.type] || []), token], + }; + }, {} as Record>); + + const color = createColorTokens(metaGrouped.color, variations.color); + const gradient = createGradientTokens(metaGrouped.gradient, variations.gradient); + const shadow = createShadowTokens(metaGrouped.shadow, variations.shadow); + const shape = createShapeTokens(metaGrouped.shape, variations.shape); + const typography = createTypographyTokens(metaGrouped.typography, variations.typography); + const fontFamily = createFontFamilyTokens(metaGrouped.fontFamily, variations.fontFamily); + + return new Theme(meta.name, meta.version, { + color, + gradient, + shadow, + shape, + typography, + fontFamily, + }); +}; + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const buildMockTheme = () => { + const color = createMockColorTokens(); + const gradient = createMockGradientTokens(); + const shadow = createMockShadowTokens(); + const shape = createMockShapeTokens(); + const typography = createMockTypographyTokens(); + const fontFamily = createMockFontFamilyTokens(); + + return new Theme('mock', '0.1.0', { + color, + gradient, + shadow, + shape, + typography, + fontFamily, + }); +}; diff --git a/website/plasma-theme-builder/src/_new/themes/createMetaTokens.ts b/website/plasma-theme-builder/src/_new/themes/createMetaTokens.ts new file mode 100644 index 0000000000..de16c8d4cc --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/createMetaTokens.ts @@ -0,0 +1,82 @@ +import { MetaTupleVariations, MetaVariations, ThemeMeta, TokenType, Variation } from '../types'; +import { Theme } from '../themes'; + +export type ExtraMetaTokensGetters = Partial Array>>; + +const getMetaTokens = (theme: Theme, extraMetaTokenGetters?: ExtraMetaTokensGetters) => { + const tokens: Array = []; + + Object.values(theme.getTokens()).forEach((variation) => { + variation.forEach((token) => { + const data = token.getTokenData(); + + tokens.push(data); + + const extraTokensGetter = extraMetaTokenGetters?.[data.type]; + if (extraTokensGetter) { + const newTokensData = extraTokensGetter(data); + tokens.push(...newTokensData); + } + }); + }); + + return tokens; +}; + +const getMetaTokenKinds = ( + type: K, + fields: MetaTupleVariations[K], + theme: Theme, +): MetaVariations[K] => { + const tokens = theme.getTokens('color'); + + if (!tokens?.length) { + return {} as MetaVariations[K]; + } + + const sets = fields.map(() => new Set()); + + tokens.forEach((token) => { + fields.forEach((_, index) => { + const tag = token.getTags()[index]; + sets[index].add(tag); + }); + }); + + return fields.reduce( + (acc, field, index) => ({ + ...acc, + [field]: Array.from(sets[index]), + }), + {} as MetaVariations[K], + ); +}; + +// INFO: Функция, которая создаёт объект с мета информацией на основе экземпляра темы. +// Так же метод позволяет применять кастомные обработчики, которые могут добавлять дополнительные токены. +// Например, с помощью метода `getHoverAndActiveMetaTokens` добавляются токены для `active` и `hover` состояний. +export const createMetaTokens = (theme: Theme, extraMetaTokenGetters?: ExtraMetaTokensGetters): ThemeMeta => { + const name = theme.getName(); + const version = theme.getVersion(); + + const tokens = getMetaTokens(theme, extraMetaTokenGetters); + + const color = getMetaTokenKinds('color', ['mode', 'category', 'subcategory'], theme); + const gradient = getMetaTokenKinds('gradient', ['mode', 'category', 'subcategory'], theme); + const shadow = getMetaTokenKinds('shadow', ['direction', 'kind', 'size'], theme); + const shape = getMetaTokenKinds('shape', ['kind', 'size'], theme); + const typography = getMetaTokenKinds('typography', ['screen', 'kind', 'size', 'weight'], theme); + const fontFamily = getMetaTokenKinds('fontFamily', ['kind'], theme); + + return { + name, + version, + tokens, + color, + gradient, + shadow, + shape, + typography, + fontFamily, + }; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/createVariationTokens.ts b/website/plasma-theme-builder/src/_new/themes/createVariationTokens.ts new file mode 100644 index 0000000000..374d35f560 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/createVariationTokens.ts @@ -0,0 +1,49 @@ +import { PlatformsVariations, TokenVariations, Variation } from '../types'; +import { Theme } from '../themes'; + +export type ExtraThemeTokensGetters = { + [variationKey in Variation]?: { + [platformKey in keyof PlatformsVariations[variationKey]]: ( + token: TokenVariations[variationKey], + ) => PlatformsVariations[variationKey][platformKey] | undefined; + }; +}; + +// INFO: Функция, которая создаёт объект с набором всех типов токенов для всех поддерживаемых платформ. +// Так же метод позволяет применять кастомные обработчики, которые могут добавлять дополнительные токены. +// Например, с помощью метода `getHoverAndActiveColorThemeTokens` добавляются токены для `active` и `hover` состояний. +export const createVariationTokens = (theme: Theme, extraThemeTokenGetters?: ExtraThemeTokensGetters) => { + const tokens = theme.getTokens(); + + let variations = {} as PlatformsVariations; + + Object.entries(tokens).forEach(([variation, values]) => { + values.forEach((token) => { + Object.keys(token.getPlatforms()).forEach((platform) => { + const extraTokens = ( + extraThemeTokenGetters?.[variation]?.[platform] as ( + token: TokenVariations[typeof variation], + ) => PlatformsVariations[typeof variation][typeof platform] | undefined + )?.(token); + + const tokenName = token.getName(); + const tokenValue = token.getValue(platform); + + // TODO: Подумать, как можно упростить этот код + variations = { + ...variations, + [variation]: { + ...variations?.[variation], + [platform]: { + ...variations?.[variation]?.[platform], + [tokenName]: tokenValue, + ...extraTokens, + }, + }, + }; + }); + }); + }); + + return variations; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/index.ts b/website/plasma-theme-builder/src/_new/themes/index.ts new file mode 100644 index 0000000000..378f1379a8 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/index.ts @@ -0,0 +1,4 @@ +export * from './theme'; +export * from './builders'; +export * from './readTheme'; +export * from './writeTheme'; diff --git a/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/getHoverAndActiveMetaTokens.ts b/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/getHoverAndActiveMetaTokens.ts new file mode 100644 index 0000000000..abb4e66526 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/getHoverAndActiveMetaTokens.ts @@ -0,0 +1,28 @@ +import { sectionToFormulaMap } from '../../../utils'; +import { TokenType } from '../../types'; + +export const getHoverAndActiveMetaTokens = (data: TokenType) => { + const [mode, category, subcategory, name] = data.name.split('.'); + + if (!sectionToFormulaMap[category]) { + return []; + } + + const hover = [mode, category, subcategory, `${name}-hover`]; + const active = [mode, category, subcategory, `${name}-active`]; + + return [ + { + ...data, + name: hover.join('.'), + tags: hover, + displayName: `${data.displayName}Hover`, + }, + { + ...data, + name: active.join('.'), + tags: active, + displayName: `${data.displayName}Active`, + }, + ]; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/index.ts b/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/index.ts new file mode 100644 index 0000000000..fe486f339a --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/metaTokensGetters/index.ts @@ -0,0 +1,7 @@ +import { getHoverAndActiveMetaTokens } from './getHoverAndActiveMetaTokens'; +import { ExtraMetaTokensGetters } from '../createMetaTokens'; + +export const extraMetaTokenGetters: ExtraMetaTokensGetters = { + color: getHoverAndActiveMetaTokens, + gradient: getHoverAndActiveMetaTokens, +}; diff --git a/website/plasma-theme-builder/src/_new/themes/readTheme.ts b/website/plasma-theme-builder/src/_new/themes/readTheme.ts new file mode 100644 index 0000000000..7eee80aea9 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/readTheme.ts @@ -0,0 +1,72 @@ +import JSZip from 'jszip'; + +import { getFileSource } from '../../api'; +import { PlatformsVariations, ThemeMeta } from '../types'; + +const deserializeZip = async (content: string) => { + const buf = Buffer.from(content, 'base64'); + + return await JSZip.loadAsync(buf); +}; + +const getAllRelativePath = async (zip: JSZip) => { + const allFiles: Array = []; + + zip.forEach((relativePath) => { + allFiles.push(relativePath); + }); + + return allFiles; +}; + +const getThemeContent = async (zip: JSZip, allFiles: Array) => { + let meta = {} as ThemeMeta; + let variation = {} as PlatformsVariations; + + for (const relativePath of allFiles) { + const data = await zip.file(relativePath)?.async('string'); + + if (!data) { + continue; + } + + const res = JSON.parse(data); + + const [, platform, variant] = relativePath.match(/\/(.*)_(.*)\.json/im) || []; + + if (!platform || !variant) { + meta = res; + continue; + } + + variation = { + ...variation, + [variant]: { + ...variation[variant as keyof PlatformsVariations], + [platform]: res, + }, + }; + } + + return { meta, variation }; +}; + +export const readTheme = async (themeName: string, themeVersion: string) => { + const response = await getFileSource( + undefined, + 'salute-developers', + 'theme-converter', + `themes/${themeName}/${themeVersion}.zip`, + 'main', + '', + 'full', + ); + + const content = (response && 'content' in response && response.content) || ''; + + const zip = await deserializeZip(content); + + const allFiles = await getAllRelativePath(zip); + + return await getThemeContent(zip, allFiles); +}; diff --git a/website/plasma-theme-builder/src/_new/themes/theme.ts b/website/plasma-theme-builder/src/_new/themes/theme.ts new file mode 100644 index 0000000000..30751bf973 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/theme.ts @@ -0,0 +1,130 @@ +import { Platforms, PlatformsByVariationsMap, PlatformsVariations, TokenVariations, VariationsClasses } from '../types'; + +export class Theme { + private name: string; + private version: string; + private tokens: VariationsClasses; + + constructor(name: string, version: string, tokens: VariationsClasses) { + this.name = name; + this.version = version; + this.tokens = tokens; + } + + public getName() { + return this.name; + } + + public setName(value: string) { + this.name = value; + } + + public getVersion() { + return this.version; + } + + public setVersion(value: string) { + this.version = value; + } + + public getTokens(): VariationsClasses; + public getTokens(type: U): VariationsClasses[U]; + public getTokens(type?: U): VariationsClasses | VariationsClasses[U] { + if (type) { + return this.tokens[type]; + } + + return this.tokens; + } + + public addToken( + type: U, + token: K, + ): void { + (this.tokens[type] as Array).push(token); + } + + public removeToken(name: string, type: U) { + this.tokens[type] = this.tokens[type].filter((item) => item.getName() !== name) as K; + } + + public getToken(name: string, type: U): TokenVariations[U] | undefined { + const token = this.tokens[type].find((item) => item.getName() === name); + + if (!token) { + return; + } + + return token; + } + + public getTokenValue( + name: string, + type: U, + ): PlatformsVariations[U] | undefined; + public getTokenValue>( + name: string, + type: U, + platform: T, + ): PlatformsVariations[U][T][string] | undefined; + public getTokenValue>( + name: string, + type: U, + platform?: T, + ): PlatformsVariations[U] | PlatformsVariations[U][T][string] | undefined { + const token = this.getToken(name, type); + + if (!token) { + return; + } + + if (platform) { + return token.getValue(platform); + } + + const platforms = token.getPlatforms(); + + return Object.keys(platforms).reduce( + (acc, platform) => ({ + ...acc, + [platform]: token.getValue(platform), + }), + {} as PlatformsVariations[U], + ); + } + + public setTokenValue>( + name: string, + type: U, + platform: PlatformsByVariationsMap, + ): void; + public setTokenValue>( + name: string, + type: U, + platform: T, + value: PlatformsVariations[U][T][string], + ): void; + public setTokenValue>( + name: string, + type: U, + platform: PlatformsByVariationsMap | T, + value?: PlatformsVariations[U][T][string], + ): void { + const token = this.getToken(name, type); + + if (!token) { + return; + } + + if (typeof platform === 'string' && value) { + token.setValue(platform, value); + return; + } + + if (typeof platform !== 'string') { + Object.entries(platform).forEach(([key, value]) => { + token.setValue(key, value); + }); + } + } +} diff --git a/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveColorThemeTokens.ts b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveColorThemeTokens.ts new file mode 100644 index 0000000000..6377ab86d4 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveColorThemeTokens.ts @@ -0,0 +1,26 @@ +import { ThemeMode, getRestoredColorFromPalette } from '@salutejs/plasma-tokens-utils'; + +import { getStateColor, sectionToFormulaMap } from '../../../utils'; +import { ColorToken } from '../../tokens'; +import { Platform, PlatformsVariations } from '../../types'; + +export const getHoverAndActiveColorThemeTokens = ( + token: ColorToken, +): PlatformsVariations['color'][Platform] | undefined => { + const [mode, category] = token.getName().split('.'); + + const sectionName = sectionToFormulaMap[category]; + + if (!sectionName) { + return undefined; + } + + const value = token.getValue('web'); + const restoredValue = getRestoredColorFromPalette(value); + const getDefaultStateToken = getStateColor(restoredValue, sectionName, mode as ThemeMode); + + return { + [`${token.getName()}-hover`]: getDefaultStateToken('hover'), + [`${token.getName()}-active`]: getDefaultStateToken('active'), + }; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientAndroidThemeTokens.ts b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientAndroidThemeTokens.ts new file mode 100644 index 0000000000..f1cc4b68a8 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientAndroidThemeTokens.ts @@ -0,0 +1,12 @@ +import { GradientToken } from '../../tokens'; +import { PlatformsVariations } from '../../types'; + +export const getHoverAndActiveGradientAndroidThemeTokens = ( + token: GradientToken, +): PlatformsVariations['gradient']['android'] | undefined => { + // TODO: Добавить генерацию токенов для градиентов + return { + [`${token.getName()}-hover`]: token.getValue('android'), + [`${token.getName()}-active`]: token.getValue('android'), + }; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientIOSThemeTokens.ts b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientIOSThemeTokens.ts new file mode 100644 index 0000000000..c9f7bd9f08 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientIOSThemeTokens.ts @@ -0,0 +1,12 @@ +import { GradientToken } from '../../tokens'; +import { PlatformsVariations } from '../../types'; + +export const getHoverAndActiveGradientIOSThemeTokens = ( + token: GradientToken, +): PlatformsVariations['gradient']['ios'] | undefined => { + // TODO: Добавить генерацию токенов для градиентов + return { + [`${token.getName()}-hover`]: token.getValue('ios'), + [`${token.getName()}-active`]: token.getValue('ios'), + }; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientWebThemeTokens.ts b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientWebThemeTokens.ts new file mode 100644 index 0000000000..4ff3ba7806 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/getHoverAndActiveGradientWebThemeTokens.ts @@ -0,0 +1,12 @@ +import { GradientToken } from '../../tokens'; +import { PlatformsVariations } from '../../types'; + +export const getHoverAndActiveGradientWebThemeTokens = ( + token: GradientToken, +): PlatformsVariations['gradient']['web'] | undefined => { + // TODO: Добавить генерацию токенов для градиентов + return { + [`${token.getName()}-hover`]: token.getValue('web'), + [`${token.getName()}-active`]: token.getValue('web'), + }; +}; diff --git a/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/index.ts b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/index.ts new file mode 100644 index 0000000000..b98194b1a6 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/variationTokensGetters/index.ts @@ -0,0 +1,18 @@ +import { getHoverAndActiveColorThemeTokens } from './getHoverAndActiveColorThemeTokens'; +import { getHoverAndActiveGradientAndroidThemeTokens } from './getHoverAndActiveGradientAndroidThemeTokens'; +import { getHoverAndActiveGradientIOSThemeTokens } from './getHoverAndActiveGradientIOSThemeTokens'; +import { getHoverAndActiveGradientWebThemeTokens } from './getHoverAndActiveGradientWebThemeTokens'; +import { ExtraThemeTokensGetters } from '../createVariationTokens'; + +export const extraThemeTokenGetters: ExtraThemeTokensGetters = { + color: { + web: getHoverAndActiveColorThemeTokens, + ios: getHoverAndActiveColorThemeTokens, + android: getHoverAndActiveColorThemeTokens, + }, + gradient: { + web: getHoverAndActiveGradientWebThemeTokens, + ios: getHoverAndActiveGradientIOSThemeTokens, + android: getHoverAndActiveGradientAndroidThemeTokens, + }, +}; diff --git a/website/plasma-theme-builder/src/_new/themes/writeTheme.ts b/website/plasma-theme-builder/src/_new/themes/writeTheme.ts new file mode 100644 index 0000000000..58d9e2ecdd --- /dev/null +++ b/website/plasma-theme-builder/src/_new/themes/writeTheme.ts @@ -0,0 +1,59 @@ +import JSZip from 'jszip'; + +import { Platform, PlatformsVariations, ThemeMeta } from '../types'; +import { Theme } from '../themes'; +import { createMetaTokens } from './createMetaTokens'; +import { createVariationTokens } from './createVariationTokens'; +import { extraMetaTokenGetters } from './metaTokensGetters'; +import { extraThemeTokenGetters } from './variationTokensGetters'; + +type ThemeFileStructure = { + 'meta.json': string; +} & Record>; + +const createZip = async (content: ThemeFileStructure) => { + var zip = new JSZip(); + + Object.entries(content).forEach(([item, value]) => { + if (typeof value === 'string') { + zip.file(item, value); + return; + } + + const folder = zip.folder(item); + + Object.entries(value).forEach(([fileName, value]) => { + folder?.file(fileName, value); + }); + }); + + return await zip.generateAsync({ type: 'blob' }); +}; + +const getFileStructure = (meta: ThemeMeta, variations: PlatformsVariations) => { + let tokens = { + 'meta.json': JSON.stringify(meta), + } as ThemeFileStructure; + + Object.entries(variations).forEach(([variation, platforms]) => { + Object.entries(platforms).forEach(([platform, value]) => { + tokens = { + ...tokens, + [platform]: { + ...tokens[platform], + [`${platform}_${variation}.json`]: JSON.stringify(value), + }, + }; + }); + }); + + return tokens; +}; + +export const writeTheme = async (theme: Theme) => { + const metaTokens = createMetaTokens(theme, extraMetaTokenGetters); + const variationTokens = createVariationTokens(theme, extraThemeTokenGetters); + const fileStructure = getFileStructure(metaTokens, variationTokens); + + return await createZip(fileStructure); +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/color/color.ts b/website/plasma-theme-builder/src/_new/tokens/color/color.ts new file mode 100644 index 0000000000..75a294f8e0 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/color.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebColorToken, IOSColorToken, AndroidColorToken } from './types'; + +export type ColorPlatforms = Platforms; + +export class WebColor extends PlatformToken { + public setValue(value: WebColorToken[string]) { + this.value = value; + } +} + +export class IOSColor extends PlatformToken { + public setValue(value: IOSColorToken[string]) { + this.value = value; + } +} + +export class AndroidColor extends PlatformToken { + public setValue(value: AndroidColorToken[string]) { + this.value = value; + } +} + +export class ColorToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'color', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/color/creators.ts b/website/plasma-theme-builder/src/_new/tokens/color/creators.ts new file mode 100644 index 0000000000..4c06397fb5 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/creators.ts @@ -0,0 +1,71 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidColor, ColorToken, IOSColor, WebColor } from './color'; +import { colorTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultColorTokens = (config: ThemeConfig) => + colorTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebColor(web), + ios: new IOSColor(ios), + android: new AndroidColor(android), + }; + + return new ColorToken(token, values); + }); + + +// INFO: Данный метод нужен для того, чтобы на момент формирования инстанса класса Theme +// не добавлять технические токены состояний active / hover в память объекта, +// т.к. они никак не используются в визуальном интефрейсе +const removeHoverAndActiveTokens = (token: TokenType) => + !token.name.includes('-hover') && !token.name.includes('-active'); + +export const createColorTokens = (tokens: Array, platforms: PlatformsVariations['color']) => + tokens.filter(removeHoverAndActiveTokens).map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebColor(web), + ios: new IOSColor(ios), + android: new AndroidColor(android), + }; + + return new ColorToken(token, values); + }); + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const createMockColorTokens = () => { + const token = { + displayName: 'colorName', + enabled: true, + name: 'color.name', + tags: ['color', 'name'], + description: 'Description', + }; + + const values = { + web: new WebColor(''), + ios: new IOSColor(''), + android: new AndroidColor(''), + }; + + const color = new ColorToken(token, values); + + return [color]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/color/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/color/default/android.ts new file mode 100644 index 0000000000..5824e51ab4 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/default/android.ts @@ -0,0 +1,616 @@ +import { ThemeConfig, alphenColor } from '@salutejs/plasma-tokens-utils'; + +import { updateColorSaturation } from '../../../../utils'; +import { baseColors } from '../../../../types'; +import { AndroidColorToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidColorToken => ({ + 'dark.text.default.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.default.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.default.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.default.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.default.accent': config.accentColor.dark, + 'dark.text.default.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.default.promo': baseColors.white.value, + 'dark.text.default.promo-minor': baseColors.white.value, + 'dark.text.default.positive': '[general.green.500]', + 'dark.text.default.warning': '[general.orange.500]', + 'dark.text.default.negative': '[general.red.500]', + 'dark.text.default.info': '[general.blue.500]', + 'dark.text.default.positive-minor': '[general.green.150]', + 'dark.text.default.warning-minor': '[general.orange.150]', + 'dark.text.default.negative-minor': '[general.red.150]', + 'dark.text.default.info-minor': '[general.blue.150]', + 'dark.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.on-dark.accent': config.accentColor.dark, + 'dark.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.on-dark.promo': baseColors.white.value, + 'dark.text.on-dark.promo-minor': baseColors.white.value, + 'dark.text.on-dark.positive': '[general.green.500]', + 'dark.text.on-dark.warning': '[general.orange.500]', + 'dark.text.on-dark.negative': '[general.red.500]', + 'dark.text.on-dark.info': '[general.blue.500]', + 'dark.text.on-dark.positive-minor': '[general.green.150]', + 'dark.text.on-dark.warning-minor': '[general.orange.150]', + 'dark.text.on-dark.negative-minor': '[general.red.150]', + 'dark.text.on-dark.info-minor': '[general.blue.150]', + 'dark.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.on-light.accent': config.accentColor.light, + 'dark.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.on-light.promo': baseColors.white.value, + 'dark.text.on-light.promo-minor': baseColors.white.value, + 'dark.text.on-light.positive': '[general.green.600]', + 'dark.text.on-light.warning': '[general.orange.600]', + 'dark.text.on-light.negative': '[general.red.600]', + 'dark.text.on-light.info': '[general.blue.600]', + 'dark.text.on-light.positive-minor': '[general.green.900]', + 'dark.text.on-light.warning-minor': '[general.orange.900]', + 'dark.text.on-light.negative-minor': '[general.red.900]', + 'dark.text.on-light.info-minor': '[general.blue.900]', + 'dark.text.inverse.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.inverse.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.inverse.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.inverse.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.inverse.accent': config.accentColor.light, + 'dark.text.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.inverse.promo': baseColors.white.value, + 'dark.text.inverse.promo-minor': baseColors.white.value, + 'dark.text.inverse.positive': '[general.green.600]', + 'dark.text.inverse.warning': '[general.orange.600]', + 'dark.text.inverse.negative': '[general.red.600]', + 'dark.text.inverse.info': '[general.blue.600]', + 'dark.text.inverse.positive-minor': '[general.green.900]', + 'dark.text.inverse.warning-minor': '[general.orange.900]', + 'dark.text.inverse.negative-minor': '[general.red.900]', + 'dark.text.inverse.info-minor': '[general.blue.900]', + 'dark.surface.default.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.default.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.default.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.default.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.default.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.default.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.clear': baseColors.clear.value, + 'dark.surface.default.accent': config.accentColor.dark, + 'dark.surface.default.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.default.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.default.promo': baseColors.white.value, + 'dark.surface.default.promo-minor': baseColors.white.value, + 'dark.surface.default.transparent-promo': baseColors.white.value, + 'dark.surface.default.positive': '[general.green.500]', + 'dark.surface.default.warning': '[general.orange.500]', + 'dark.surface.default.negative': '[general.red.500]', + 'dark.surface.default.info': '[general.blue.500]', + 'dark.surface.default.positive-minor': '[general.green.900]', + 'dark.surface.default.warning-minor': '[general.orange.900]', + 'dark.surface.default.negative-minor': '[general.red.900]', + 'dark.surface.default.info-minor': '[general.blue.900]', + 'dark.surface.default.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.default.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.default.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.clear': baseColors.clear.value, + 'dark.surface.on-dark.accent': config.accentColor.dark, + 'dark.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.on-dark.promo': baseColors.white.value, + 'dark.surface.on-dark.promo-minor': baseColors.white.value, + 'dark.surface.on-dark.transparent-promo': baseColors.white.value, + 'dark.surface.on-dark.positive': '[general.green.500]', + 'dark.surface.on-dark.warning': '[general.orange.500]', + 'dark.surface.on-dark.negative': '[general.red.500]', + 'dark.surface.on-dark.info': '[general.blue.500]', + 'dark.surface.on-dark.positive-minor': '[general.green.900]', + 'dark.surface.on-dark.warning-minor': '[general.orange.900]', + 'dark.surface.on-dark.negative-minor': '[general.red.900]', + 'dark.surface.on-dark.info-minor': '[general.blue.900]', + 'dark.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.on-light.solid-card': baseColors.white.value, + 'dark.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.clear': baseColors.clear.value, + 'dark.surface.on-light.accent': config.accentColor.light, + 'dark.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.on-light.promo': baseColors.white.value, + 'dark.surface.on-light.promo-minor': baseColors.white.value, + 'dark.surface.on-light.transparent-promo': baseColors.white.value, + 'dark.surface.on-light.positive': '[general.green.500]', + 'dark.surface.on-light.warning': '[general.orange.500]', + 'dark.surface.on-light.negative': '[general.red.500]', + 'dark.surface.on-light.info': '[general.blue.500]', + 'dark.surface.on-light.positive-minor': '[general.green.200]', + 'dark.surface.on-light.warning-minor': '[general.orange.200]', + 'dark.surface.on-light.negative-minor': '[general.red.200]', + 'dark.surface.on-light.info-minor': '[general.blue.200]', + 'dark.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.inverse.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.inverse.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.inverse.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.inverse.solid-card': baseColors.white.value, + 'dark.surface.inverse.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.inverse.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.inverse.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.clear': baseColors.clear.value, + 'dark.surface.inverse.accent': config.accentColor.light, + 'dark.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.inverse.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.inverse.promo': baseColors.white.value, + 'dark.surface.inverse.promo-minor': baseColors.white.value, + 'dark.surface.inverse.transparent-promo': baseColors.white.value, + 'dark.surface.inverse.positive': '[general.green.500]', + 'dark.surface.inverse.warning': '[general.orange.500]', + 'dark.surface.inverse.negative': '[general.red.500]', + 'dark.surface.inverse.info': '[general.blue.500]', + 'dark.surface.inverse.positive-minor': '[general.green.200]', + 'dark.surface.inverse.warning-minor': '[general.orange.200]', + 'dark.surface.inverse.negative-minor': '[general.red.200]', + 'dark.surface.inverse.info-minor': '[general.blue.200]', + 'dark.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'dark.background.default.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.default.secondary': baseColors.white.value, + 'dark.background.default.tertiary': baseColors.white.value, + 'dark.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.dark.secondary': baseColors.white.value, + 'dark.background.dark.tertiary': baseColors.white.value, + 'dark.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.light.secondary': baseColors.white.value, + 'dark.background.light.tertiary': baseColors.white.value, + 'dark.background.inverse.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.inverse.secondary': baseColors.white.value, + 'dark.background.inverse.tertiary': baseColors.white.value, + 'dark.overlay.default.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.default.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.default.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-dark.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.on-dark.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.on-dark.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-light.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.on-light.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.on-light.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.overlay.inverse.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.inverse.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.inverse.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.outline.default.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.default.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.default.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.default.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.default.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.default.clear': baseColors.clear.value, + 'dark.outline.default.accent': config.accentColor.dark, + 'dark.outline.default.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.default.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.default.promo': baseColors.white.value, + 'dark.outline.default.promo-minor': baseColors.white.value, + 'dark.outline.default.positive': '[general.green.500]', + 'dark.outline.default.warning': '[general.orange.500]', + 'dark.outline.default.negative': '[general.red.500]', + 'dark.outline.default.info': '[general.blue.500]', + 'dark.outline.default.positive-minor': '[general.green.850]', + 'dark.outline.default.warning-minor': '[general.orange.850]', + 'dark.outline.default.negative-minor': '[general.red.850]', + 'dark.outline.default.info-minor': '[general.blue.850]', + 'dark.outline.default.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.default.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.default.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.on-dark.clear': baseColors.clear.value, + 'dark.outline.on-dark.accent': config.accentColor.dark, + 'dark.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.on-dark.promo': baseColors.white.value, + 'dark.outline.on-dark.promo-minor': baseColors.white.value, + 'dark.outline.on-dark.positive': '[general.green.500]', + 'dark.outline.on-dark.warning': '[general.orange.500]', + 'dark.outline.on-dark.negative': '[general.red.500]', + 'dark.outline.on-dark.info': '[general.blue.500]', + 'dark.outline.on-dark.positive-minor': '[general.green.850]', + 'dark.outline.on-dark.warning-minor': '[general.orange.850]', + 'dark.outline.on-dark.negative-minor': '[general.red.850]', + 'dark.outline.on-dark.info-minor': '[general.blue.850]', + 'dark.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.on-light.clear': baseColors.clear.value, + 'dark.outline.on-light.accent': config.accentColor.light, + 'dark.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.on-light.promo': baseColors.white.value, + 'dark.outline.on-light.promo-minor': baseColors.white.value, + 'dark.outline.on-light.positive': '[general.green.600]', + 'dark.outline.on-light.warning': '[general.orange.600]', + 'dark.outline.on-light.negative': '[general.red.600]', + 'dark.outline.on-light.info': '[general.blue.600]', + 'dark.outline.on-light.positive-minor': '[general.green.250]', + 'dark.outline.on-light.warning-minor': '[general.orange.250]', + 'dark.outline.on-light.negative-minor': '[general.red.250]', + 'dark.outline.on-light.info-minor': '[general.blue.250]', + 'dark.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'dark.outline.inverse.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.inverse.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.inverse.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.inverse.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.inverse.clear': baseColors.clear.value, + 'dark.outline.inverse.accent': config.accentColor.light, + 'dark.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.inverse.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.inverse.promo': baseColors.white.value, + 'dark.outline.inverse.promo-minor': baseColors.white.value, + 'dark.outline.inverse.positive': '[general.green.600]', + 'dark.outline.inverse.warning': '[general.orange.600]', + 'dark.outline.inverse.negative': '[general.red.600]', + 'dark.outline.inverse.info': '[general.blue.600]', + 'dark.outline.inverse.positive-minor': '[general.green.250]', + 'dark.outline.inverse.warning-minor': '[general.orange.250]', + 'dark.outline.inverse.negative-minor': '[general.red.250]', + 'dark.outline.inverse.info-minor': '[general.blue.250]', + 'dark.outline.inverse.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.inverse.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.inverse.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.inverse.transparent-info': '[general.blue.600][0.28]', + 'light.text.default.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.default.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.default.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.default.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.default.accent': config.accentColor.light, + 'light.text.default.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.default.promo': baseColors.white.value, + 'light.text.default.promo-minor': baseColors.white.value, + 'light.text.default.positive': '[general.green.600]', + 'light.text.default.warning': '[general.orange.600]', + 'light.text.default.negative': '[general.red.600]', + 'light.text.default.info': '[general.blue.600]', + 'light.text.default.positive-minor': '[general.green.900]', + 'light.text.default.warning-minor': '[general.orange.900]', + 'light.text.default.negative-minor': '[general.red.900]', + 'light.text.default.info-minor': '[general.blue.900]', + 'light.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.on-dark.accent': config.accentColor.dark, + 'light.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.on-dark.promo': baseColors.white.value, + 'light.text.on-dark.promo-minor': baseColors.white.value, + 'light.text.on-dark.positive': '[general.green.500]', + 'light.text.on-dark.warning': '[general.orange.500]', + 'light.text.on-dark.negative': '[general.red.500]', + 'light.text.on-dark.info': '[general.blue.500]', + 'light.text.on-dark.positive-minor': '[general.green.150]', + 'light.text.on-dark.warning-minor': '[general.orange.150]', + 'light.text.on-dark.negative-minor': '[general.red.150]', + 'light.text.on-dark.info-minor': '[general.blue.150]', + 'light.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.on-light.accent': config.accentColor.light, + 'light.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.on-light.promo': baseColors.white.value, + 'light.text.on-light.promo-minor': baseColors.white.value, + 'light.text.on-light.positive': '[general.green.600]', + 'light.text.on-light.warning': '[general.orange.600]', + 'light.text.on-light.negative': '[general.red.600]', + 'light.text.on-light.info': '[general.blue.600]', + 'light.text.on-light.positive-minor': '[general.green.900]', + 'light.text.on-light.warning-minor': '[general.orange.900]', + 'light.text.on-light.negative-minor': '[general.red.900]', + 'light.text.on-light.info-minor': '[general.blue.900]', + 'light.text.inverse.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.inverse.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.inverse.accent': config.accentColor.dark, + 'light.text.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.inverse.promo': baseColors.white.value, + 'light.text.inverse.promo-minor': baseColors.white.value, + 'light.text.inverse.positive': '[general.green.500]', + 'light.text.inverse.warning': '[general.orange.500]', + 'light.text.inverse.negative': '[general.red.500]', + 'light.text.inverse.info': '[general.blue.500]', + 'light.text.inverse.positive-minor': '[general.green.150]', + 'light.text.inverse.warning-minor': '[general.orange.150]', + 'light.text.inverse.negative-minor': '[general.red.150]', + 'light.text.inverse.info-minor': '[general.blue.150]', + 'light.surface.default.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.default.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.default.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.default.solid-card': baseColors.white.value, + 'light.surface.default.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.default.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.default.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.clear': baseColors.clear.value, + 'light.surface.default.accent': config.accentColor.light, + 'light.surface.default.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.default.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.default.promo': baseColors.white.value, + 'light.surface.default.promo-minor': baseColors.white.value, + 'light.surface.default.transparent-promo': baseColors.white.value, + 'light.surface.default.positive': '[general.green.500]', + 'light.surface.default.warning': '[general.orange.500]', + 'light.surface.default.negative': '[general.red.500]', + 'light.surface.default.info': '[general.blue.500]', + 'light.surface.default.positive-minor': '[general.green.200]', + 'light.surface.default.warning-minor': '[general.orange.200]', + 'light.surface.default.negative-minor': '[general.red.200]', + 'light.surface.default.info-minor': '[general.blue.200]', + 'light.surface.default.transparent-positive': '[general.green.500][0.28]', + 'light.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.default.transparent-negative': '[general.red.500][0.28]', + 'light.surface.default.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.clear': baseColors.clear.value, + 'light.surface.on-dark.accent': config.accentColor.dark, + 'light.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.on-dark.promo': baseColors.white.value, + 'light.surface.on-dark.promo-minor': baseColors.white.value, + 'light.surface.on-dark.transparent-promo': baseColors.white.value, + 'light.surface.on-dark.positive': '[general.green.500]', + 'light.surface.on-dark.warning': '[general.orange.500]', + 'light.surface.on-dark.negative': '[general.red.500]', + 'light.surface.on-dark.info': '[general.blue.500]', + 'light.surface.on-dark.positive-minor': '[general.green.900]', + 'light.surface.on-dark.warning-minor': '[general.orange.900]', + 'light.surface.on-dark.negative-minor': '[general.red.900]', + 'light.surface.on-dark.info-minor': '[general.blue.900]', + 'light.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.on-light.solid-card': baseColors.white.value, + 'light.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.clear': baseColors.clear.value, + 'light.surface.on-light.accent': config.accentColor.light, + 'light.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.on-light.promo': baseColors.white.value, + 'light.surface.on-light.promo-minor': baseColors.white.value, + 'light.surface.on-light.transparent-promo': baseColors.white.value, + 'light.surface.on-light.positive': '[general.green.500]', + 'light.surface.on-light.warning': '[general.orange.500]', + 'light.surface.on-light.negative': '[general.red.500]', + 'light.surface.on-light.info': '[general.blue.500]', + 'light.surface.on-light.positive-minor': '[general.green.200]', + 'light.surface.on-light.warning-minor': '[general.orange.200]', + 'light.surface.on-light.negative-minor': '[general.red.200]', + 'light.surface.on-light.info-minor': '[general.blue.200]', + 'light.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'light.surface.inverse.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.inverse.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.inverse.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.inverse.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.inverse.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.clear': baseColors.clear.value, + 'light.surface.inverse.accent': config.accentColor.dark, + 'light.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.inverse.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.inverse.promo': baseColors.white.value, + 'light.surface.inverse.promo-minor': baseColors.white.value, + 'light.surface.inverse.transparent-promo': baseColors.white.value, + 'light.surface.inverse.positive': '[general.green.500]', + 'light.surface.inverse.warning': '[general.orange.500]', + 'light.surface.inverse.negative': '[general.red.500]', + 'light.surface.inverse.info': '[general.blue.500]', + 'light.surface.inverse.positive-minor': '[general.green.900]', + 'light.surface.inverse.warning-minor': '[general.orange.900]', + 'light.surface.inverse.negative-minor': '[general.red.900]', + 'light.surface.inverse.info-minor': '[general.blue.900]', + 'light.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'light.background.default.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.default.secondary': baseColors.white.value, + 'light.background.default.tertiary': baseColors.white.value, + 'light.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.dark.secondary': baseColors.white.value, + 'light.background.dark.tertiary': baseColors.white.value, + 'light.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.light.secondary': baseColors.white.value, + 'light.background.light.tertiary': baseColors.white.value, + 'light.background.inverse.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.inverse.secondary': baseColors.white.value, + 'light.background.inverse.tertiary': baseColors.white.value, + 'light.overlay.default.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.default.hard': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.default.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.on-dark.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.on-dark.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.on-dark.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.overlay.on-light.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.on-light.hard': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.overlay.on-light.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.inverse.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.inverse.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.inverse.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.outline.default.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.default.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.default.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.default.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.default.clear': baseColors.clear.value, + 'light.outline.default.accent': config.accentColor.light, + 'light.outline.default.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.default.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.default.promo': baseColors.white.value, + 'light.outline.default.promo-minor': baseColors.white.value, + 'light.outline.default.positive': '[general.green.600]', + 'light.outline.default.warning': '[general.orange.600]', + 'light.outline.default.negative': '[general.red.600]', + 'light.outline.default.info': '[general.blue.600]', + 'light.outline.default.positive-minor': '[general.green.250]', + 'light.outline.default.warning-minor': '[general.orange.250]', + 'light.outline.default.negative-minor': '[general.red.250]', + 'light.outline.default.info-minor': '[general.blue.250]', + 'light.outline.default.transparent-positive': '[general.green.600][0.28]', + 'light.outline.default.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.default.transparent-negative': '[general.red.600][0.28]', + 'light.outline.default.transparent-info': '[general.blue.600][0.28]', + 'light.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.on-dark.clear': baseColors.clear.value, + 'light.outline.on-dark.accent': config.accentColor.dark, + 'light.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.on-dark.promo': baseColors.white.value, + 'light.outline.on-dark.promo-minor': baseColors.white.value, + 'light.outline.on-dark.positive': '[general.green.500]', + 'light.outline.on-dark.warning': '[general.orange.500]', + 'light.outline.on-dark.negative': '[general.red.500]', + 'light.outline.on-dark.info': '[general.blue.500]', + 'light.outline.on-dark.positive-minor': '[general.green.850]', + 'light.outline.on-dark.warning-minor': '[general.orange.850]', + 'light.outline.on-dark.negative-minor': '[general.red.850]', + 'light.outline.on-dark.info-minor': '[general.blue.850]', + 'light.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.on-light.clear': baseColors.clear.value, + 'light.outline.on-light.accent': config.accentColor.light, + 'light.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.on-light.promo': baseColors.white.value, + 'light.outline.on-light.promo-minor': baseColors.white.value, + 'light.outline.on-light.positive': '[general.green.600]', + 'light.outline.on-light.warning': '[general.orange.600]', + 'light.outline.on-light.negative': '[general.red.600]', + 'light.outline.on-light.info': '[general.blue.600]', + 'light.outline.on-light.positive-minor': '[general.green.250]', + 'light.outline.on-light.warning-minor': '[general.orange.250]', + 'light.outline.on-light.negative-minor': '[general.red.250]', + 'light.outline.on-light.info-minor': '[general.blue.250]', + 'light.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'light.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'light.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'light.outline.inverse.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.inverse.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.inverse.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.inverse.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.inverse.clear': baseColors.clear.value, + 'light.outline.inverse.accent': config.accentColor.dark, + 'light.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.inverse.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.inverse.promo': baseColors.white.value, + 'light.outline.inverse.promo-minor': baseColors.white.value, + 'light.outline.inverse.positive': '[general.green.500]', + 'light.outline.inverse.warning': '[general.orange.500]', + 'light.outline.inverse.negative': '[general.red.500]', + 'light.outline.inverse.info': '[general.blue.500]', + 'light.outline.inverse.positive-minor': '[general.green.850]', + 'light.outline.inverse.warning-minor': '[general.orange.850]', + 'light.outline.inverse.negative-minor': '[general.red.850]', + 'light.outline.inverse.info-minor': '[general.blue.850]', + 'light.outline.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.outline.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.outline.inverse.transparent-info': '[general.blue.500][0.28]', +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/color/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/color/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/color/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/color/default/ios.ts new file mode 100644 index 0000000000..fc9b64a5ac --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/default/ios.ts @@ -0,0 +1,616 @@ +import { ThemeConfig, alphenColor } from '@salutejs/plasma-tokens-utils'; + +import { updateColorSaturation } from '../../../../utils'; +import { baseColors } from '../../../../types'; +import { IOSColorToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSColorToken => ({ + 'dark.text.default.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.default.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.default.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.default.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.default.accent': config.accentColor.dark, + 'dark.text.default.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.default.promo': baseColors.white.value, + 'dark.text.default.promo-minor': baseColors.white.value, + 'dark.text.default.positive': '[general.green.500]', + 'dark.text.default.warning': '[general.orange.500]', + 'dark.text.default.negative': '[general.red.500]', + 'dark.text.default.info': '[general.blue.500]', + 'dark.text.default.positive-minor': '[general.green.150]', + 'dark.text.default.warning-minor': '[general.orange.150]', + 'dark.text.default.negative-minor': '[general.red.150]', + 'dark.text.default.info-minor': '[general.blue.150]', + 'dark.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.on-dark.accent': config.accentColor.dark, + 'dark.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.on-dark.promo': baseColors.white.value, + 'dark.text.on-dark.promo-minor': baseColors.white.value, + 'dark.text.on-dark.positive': '[general.green.500]', + 'dark.text.on-dark.warning': '[general.orange.500]', + 'dark.text.on-dark.negative': '[general.red.500]', + 'dark.text.on-dark.info': '[general.blue.500]', + 'dark.text.on-dark.positive-minor': '[general.green.150]', + 'dark.text.on-dark.warning-minor': '[general.orange.150]', + 'dark.text.on-dark.negative-minor': '[general.red.150]', + 'dark.text.on-dark.info-minor': '[general.blue.150]', + 'dark.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.on-light.accent': config.accentColor.light, + 'dark.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.on-light.promo': baseColors.white.value, + 'dark.text.on-light.promo-minor': baseColors.white.value, + 'dark.text.on-light.positive': '[general.green.600]', + 'dark.text.on-light.warning': '[general.orange.600]', + 'dark.text.on-light.negative': '[general.red.600]', + 'dark.text.on-light.info': '[general.blue.600]', + 'dark.text.on-light.positive-minor': '[general.green.900]', + 'dark.text.on-light.warning-minor': '[general.orange.900]', + 'dark.text.on-light.negative-minor': '[general.red.900]', + 'dark.text.on-light.info-minor': '[general.blue.900]', + 'dark.text.inverse.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.inverse.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.inverse.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.inverse.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.inverse.accent': config.accentColor.light, + 'dark.text.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.inverse.promo': baseColors.white.value, + 'dark.text.inverse.promo-minor': baseColors.white.value, + 'dark.text.inverse.positive': '[general.green.600]', + 'dark.text.inverse.warning': '[general.orange.600]', + 'dark.text.inverse.negative': '[general.red.600]', + 'dark.text.inverse.info': '[general.blue.600]', + 'dark.text.inverse.positive-minor': '[general.green.900]', + 'dark.text.inverse.warning-minor': '[general.orange.900]', + 'dark.text.inverse.negative-minor': '[general.red.900]', + 'dark.text.inverse.info-minor': '[general.blue.900]', + 'dark.surface.default.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.default.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.default.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.default.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.default.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.default.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.clear': baseColors.clear.value, + 'dark.surface.default.accent': config.accentColor.dark, + 'dark.surface.default.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.default.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.default.promo': baseColors.white.value, + 'dark.surface.default.promo-minor': baseColors.white.value, + 'dark.surface.default.transparent-promo': baseColors.white.value, + 'dark.surface.default.positive': '[general.green.500]', + 'dark.surface.default.warning': '[general.orange.500]', + 'dark.surface.default.negative': '[general.red.500]', + 'dark.surface.default.info': '[general.blue.500]', + 'dark.surface.default.positive-minor': '[general.green.900]', + 'dark.surface.default.warning-minor': '[general.orange.900]', + 'dark.surface.default.negative-minor': '[general.red.900]', + 'dark.surface.default.info-minor': '[general.blue.900]', + 'dark.surface.default.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.default.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.default.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.clear': baseColors.clear.value, + 'dark.surface.on-dark.accent': config.accentColor.dark, + 'dark.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.on-dark.promo': baseColors.white.value, + 'dark.surface.on-dark.promo-minor': baseColors.white.value, + 'dark.surface.on-dark.transparent-promo': baseColors.white.value, + 'dark.surface.on-dark.positive': '[general.green.500]', + 'dark.surface.on-dark.warning': '[general.orange.500]', + 'dark.surface.on-dark.negative': '[general.red.500]', + 'dark.surface.on-dark.info': '[general.blue.500]', + 'dark.surface.on-dark.positive-minor': '[general.green.900]', + 'dark.surface.on-dark.warning-minor': '[general.orange.900]', + 'dark.surface.on-dark.negative-minor': '[general.red.900]', + 'dark.surface.on-dark.info-minor': '[general.blue.900]', + 'dark.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.on-light.solid-card': baseColors.white.value, + 'dark.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.clear': baseColors.clear.value, + 'dark.surface.on-light.accent': config.accentColor.light, + 'dark.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.on-light.promo': baseColors.white.value, + 'dark.surface.on-light.promo-minor': baseColors.white.value, + 'dark.surface.on-light.transparent-promo': baseColors.white.value, + 'dark.surface.on-light.positive': '[general.green.500]', + 'dark.surface.on-light.warning': '[general.orange.500]', + 'dark.surface.on-light.negative': '[general.red.500]', + 'dark.surface.on-light.info': '[general.blue.500]', + 'dark.surface.on-light.positive-minor': '[general.green.200]', + 'dark.surface.on-light.warning-minor': '[general.orange.200]', + 'dark.surface.on-light.negative-minor': '[general.red.200]', + 'dark.surface.on-light.info-minor': '[general.blue.200]', + 'dark.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.inverse.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.inverse.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.inverse.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.inverse.solid-card': baseColors.white.value, + 'dark.surface.inverse.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.inverse.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.inverse.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.clear': baseColors.clear.value, + 'dark.surface.inverse.accent': config.accentColor.light, + 'dark.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.inverse.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.inverse.promo': baseColors.white.value, + 'dark.surface.inverse.promo-minor': baseColors.white.value, + 'dark.surface.inverse.transparent-promo': baseColors.white.value, + 'dark.surface.inverse.positive': '[general.green.500]', + 'dark.surface.inverse.warning': '[general.orange.500]', + 'dark.surface.inverse.negative': '[general.red.500]', + 'dark.surface.inverse.info': '[general.blue.500]', + 'dark.surface.inverse.positive-minor': '[general.green.200]', + 'dark.surface.inverse.warning-minor': '[general.orange.200]', + 'dark.surface.inverse.negative-minor': '[general.red.200]', + 'dark.surface.inverse.info-minor': '[general.blue.200]', + 'dark.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'dark.background.default.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.default.secondary': baseColors.white.value, + 'dark.background.default.tertiary': baseColors.white.value, + 'dark.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.dark.secondary': baseColors.white.value, + 'dark.background.dark.tertiary': baseColors.white.value, + 'dark.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.light.secondary': baseColors.white.value, + 'dark.background.light.tertiary': baseColors.white.value, + 'dark.background.inverse.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.inverse.secondary': baseColors.white.value, + 'dark.background.inverse.tertiary': baseColors.white.value, + 'dark.overlay.default.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.default.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.default.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-dark.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.on-dark.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.on-dark.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-light.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.on-light.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.on-light.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.overlay.inverse.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.inverse.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.inverse.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.outline.default.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.default.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.default.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.default.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.default.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.default.clear': baseColors.clear.value, + 'dark.outline.default.accent': config.accentColor.dark, + 'dark.outline.default.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.default.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.default.promo': baseColors.white.value, + 'dark.outline.default.promo-minor': baseColors.white.value, + 'dark.outline.default.positive': '[general.green.500]', + 'dark.outline.default.warning': '[general.orange.500]', + 'dark.outline.default.negative': '[general.red.500]', + 'dark.outline.default.info': '[general.blue.500]', + 'dark.outline.default.positive-minor': '[general.green.850]', + 'dark.outline.default.warning-minor': '[general.orange.850]', + 'dark.outline.default.negative-minor': '[general.red.850]', + 'dark.outline.default.info-minor': '[general.blue.850]', + 'dark.outline.default.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.default.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.default.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.on-dark.clear': baseColors.clear.value, + 'dark.outline.on-dark.accent': config.accentColor.dark, + 'dark.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.on-dark.promo': baseColors.white.value, + 'dark.outline.on-dark.promo-minor': baseColors.white.value, + 'dark.outline.on-dark.positive': '[general.green.500]', + 'dark.outline.on-dark.warning': '[general.orange.500]', + 'dark.outline.on-dark.negative': '[general.red.500]', + 'dark.outline.on-dark.info': '[general.blue.500]', + 'dark.outline.on-dark.positive-minor': '[general.green.850]', + 'dark.outline.on-dark.warning-minor': '[general.orange.850]', + 'dark.outline.on-dark.negative-minor': '[general.red.850]', + 'dark.outline.on-dark.info-minor': '[general.blue.850]', + 'dark.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.on-light.clear': baseColors.clear.value, + 'dark.outline.on-light.accent': config.accentColor.light, + 'dark.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.on-light.promo': baseColors.white.value, + 'dark.outline.on-light.promo-minor': baseColors.white.value, + 'dark.outline.on-light.positive': '[general.green.600]', + 'dark.outline.on-light.warning': '[general.orange.600]', + 'dark.outline.on-light.negative': '[general.red.600]', + 'dark.outline.on-light.info': '[general.blue.600]', + 'dark.outline.on-light.positive-minor': '[general.green.250]', + 'dark.outline.on-light.warning-minor': '[general.orange.250]', + 'dark.outline.on-light.negative-minor': '[general.red.250]', + 'dark.outline.on-light.info-minor': '[general.blue.250]', + 'dark.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'dark.outline.inverse.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.inverse.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.inverse.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.inverse.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.inverse.clear': baseColors.clear.value, + 'dark.outline.inverse.accent': config.accentColor.light, + 'dark.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.inverse.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.inverse.promo': baseColors.white.value, + 'dark.outline.inverse.promo-minor': baseColors.white.value, + 'dark.outline.inverse.positive': '[general.green.600]', + 'dark.outline.inverse.warning': '[general.orange.600]', + 'dark.outline.inverse.negative': '[general.red.600]', + 'dark.outline.inverse.info': '[general.blue.600]', + 'dark.outline.inverse.positive-minor': '[general.green.250]', + 'dark.outline.inverse.warning-minor': '[general.orange.250]', + 'dark.outline.inverse.negative-minor': '[general.red.250]', + 'dark.outline.inverse.info-minor': '[general.blue.250]', + 'dark.outline.inverse.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.inverse.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.inverse.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.inverse.transparent-info': '[general.blue.600][0.28]', + 'light.text.default.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.default.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.default.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.default.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.default.accent': config.accentColor.light, + 'light.text.default.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.default.promo': baseColors.white.value, + 'light.text.default.promo-minor': baseColors.white.value, + 'light.text.default.positive': '[general.green.600]', + 'light.text.default.warning': '[general.orange.600]', + 'light.text.default.negative': '[general.red.600]', + 'light.text.default.info': '[general.blue.600]', + 'light.text.default.positive-minor': '[general.green.900]', + 'light.text.default.warning-minor': '[general.orange.900]', + 'light.text.default.negative-minor': '[general.red.900]', + 'light.text.default.info-minor': '[general.blue.900]', + 'light.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.on-dark.accent': config.accentColor.dark, + 'light.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.on-dark.promo': baseColors.white.value, + 'light.text.on-dark.promo-minor': baseColors.white.value, + 'light.text.on-dark.positive': '[general.green.500]', + 'light.text.on-dark.warning': '[general.orange.500]', + 'light.text.on-dark.negative': '[general.red.500]', + 'light.text.on-dark.info': '[general.blue.500]', + 'light.text.on-dark.positive-minor': '[general.green.150]', + 'light.text.on-dark.warning-minor': '[general.orange.150]', + 'light.text.on-dark.negative-minor': '[general.red.150]', + 'light.text.on-dark.info-minor': '[general.blue.150]', + 'light.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.on-light.accent': config.accentColor.light, + 'light.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.on-light.promo': baseColors.white.value, + 'light.text.on-light.promo-minor': baseColors.white.value, + 'light.text.on-light.positive': '[general.green.600]', + 'light.text.on-light.warning': '[general.orange.600]', + 'light.text.on-light.negative': '[general.red.600]', + 'light.text.on-light.info': '[general.blue.600]', + 'light.text.on-light.positive-minor': '[general.green.900]', + 'light.text.on-light.warning-minor': '[general.orange.900]', + 'light.text.on-light.negative-minor': '[general.red.900]', + 'light.text.on-light.info-minor': '[general.blue.900]', + 'light.text.inverse.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.inverse.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.inverse.accent': config.accentColor.dark, + 'light.text.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.inverse.promo': baseColors.white.value, + 'light.text.inverse.promo-minor': baseColors.white.value, + 'light.text.inverse.positive': '[general.green.500]', + 'light.text.inverse.warning': '[general.orange.500]', + 'light.text.inverse.negative': '[general.red.500]', + 'light.text.inverse.info': '[general.blue.500]', + 'light.text.inverse.positive-minor': '[general.green.150]', + 'light.text.inverse.warning-minor': '[general.orange.150]', + 'light.text.inverse.negative-minor': '[general.red.150]', + 'light.text.inverse.info-minor': '[general.blue.150]', + 'light.surface.default.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.default.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.default.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.default.solid-card': baseColors.white.value, + 'light.surface.default.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.default.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.default.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.clear': baseColors.clear.value, + 'light.surface.default.accent': config.accentColor.light, + 'light.surface.default.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.default.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.default.promo': baseColors.white.value, + 'light.surface.default.promo-minor': baseColors.white.value, + 'light.surface.default.transparent-promo': baseColors.white.value, + 'light.surface.default.positive': '[general.green.500]', + 'light.surface.default.warning': '[general.orange.500]', + 'light.surface.default.negative': '[general.red.500]', + 'light.surface.default.info': '[general.blue.500]', + 'light.surface.default.positive-minor': '[general.green.200]', + 'light.surface.default.warning-minor': '[general.orange.200]', + 'light.surface.default.negative-minor': '[general.red.200]', + 'light.surface.default.info-minor': '[general.blue.200]', + 'light.surface.default.transparent-positive': '[general.green.500][0.28]', + 'light.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.default.transparent-negative': '[general.red.500][0.28]', + 'light.surface.default.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.clear': baseColors.clear.value, + 'light.surface.on-dark.accent': config.accentColor.dark, + 'light.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.on-dark.promo': baseColors.white.value, + 'light.surface.on-dark.promo-minor': baseColors.white.value, + 'light.surface.on-dark.transparent-promo': baseColors.white.value, + 'light.surface.on-dark.positive': '[general.green.500]', + 'light.surface.on-dark.warning': '[general.orange.500]', + 'light.surface.on-dark.negative': '[general.red.500]', + 'light.surface.on-dark.info': '[general.blue.500]', + 'light.surface.on-dark.positive-minor': '[general.green.900]', + 'light.surface.on-dark.warning-minor': '[general.orange.900]', + 'light.surface.on-dark.negative-minor': '[general.red.900]', + 'light.surface.on-dark.info-minor': '[general.blue.900]', + 'light.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.on-light.solid-card': baseColors.white.value, + 'light.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.clear': baseColors.clear.value, + 'light.surface.on-light.accent': config.accentColor.light, + 'light.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.on-light.promo': baseColors.white.value, + 'light.surface.on-light.promo-minor': baseColors.white.value, + 'light.surface.on-light.transparent-promo': baseColors.white.value, + 'light.surface.on-light.positive': '[general.green.500]', + 'light.surface.on-light.warning': '[general.orange.500]', + 'light.surface.on-light.negative': '[general.red.500]', + 'light.surface.on-light.info': '[general.blue.500]', + 'light.surface.on-light.positive-minor': '[general.green.200]', + 'light.surface.on-light.warning-minor': '[general.orange.200]', + 'light.surface.on-light.negative-minor': '[general.red.200]', + 'light.surface.on-light.info-minor': '[general.blue.200]', + 'light.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'light.surface.inverse.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.inverse.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.inverse.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.inverse.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.inverse.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.clear': baseColors.clear.value, + 'light.surface.inverse.accent': config.accentColor.dark, + 'light.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.inverse.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.inverse.promo': baseColors.white.value, + 'light.surface.inverse.promo-minor': baseColors.white.value, + 'light.surface.inverse.transparent-promo': baseColors.white.value, + 'light.surface.inverse.positive': '[general.green.500]', + 'light.surface.inverse.warning': '[general.orange.500]', + 'light.surface.inverse.negative': '[general.red.500]', + 'light.surface.inverse.info': '[general.blue.500]', + 'light.surface.inverse.positive-minor': '[general.green.900]', + 'light.surface.inverse.warning-minor': '[general.orange.900]', + 'light.surface.inverse.negative-minor': '[general.red.900]', + 'light.surface.inverse.info-minor': '[general.blue.900]', + 'light.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'light.background.default.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.default.secondary': baseColors.white.value, + 'light.background.default.tertiary': baseColors.white.value, + 'light.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.dark.secondary': baseColors.white.value, + 'light.background.dark.tertiary': baseColors.white.value, + 'light.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.light.secondary': baseColors.white.value, + 'light.background.light.tertiary': baseColors.white.value, + 'light.background.inverse.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.inverse.secondary': baseColors.white.value, + 'light.background.inverse.tertiary': baseColors.white.value, + 'light.overlay.default.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.default.hard': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.default.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.on-dark.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.on-dark.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.on-dark.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.overlay.on-light.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.on-light.hard': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.overlay.on-light.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.inverse.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.inverse.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.inverse.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.outline.default.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.default.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.default.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.default.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.default.clear': baseColors.clear.value, + 'light.outline.default.accent': config.accentColor.light, + 'light.outline.default.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.default.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.default.promo': baseColors.white.value, + 'light.outline.default.promo-minor': baseColors.white.value, + 'light.outline.default.positive': '[general.green.600]', + 'light.outline.default.warning': '[general.orange.600]', + 'light.outline.default.negative': '[general.red.600]', + 'light.outline.default.info': '[general.blue.600]', + 'light.outline.default.positive-minor': '[general.green.250]', + 'light.outline.default.warning-minor': '[general.orange.250]', + 'light.outline.default.negative-minor': '[general.red.250]', + 'light.outline.default.info-minor': '[general.blue.250]', + 'light.outline.default.transparent-positive': '[general.green.600][0.28]', + 'light.outline.default.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.default.transparent-negative': '[general.red.600][0.28]', + 'light.outline.default.transparent-info': '[general.blue.600][0.28]', + 'light.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.on-dark.clear': baseColors.clear.value, + 'light.outline.on-dark.accent': config.accentColor.dark, + 'light.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.on-dark.promo': baseColors.white.value, + 'light.outline.on-dark.promo-minor': baseColors.white.value, + 'light.outline.on-dark.positive': '[general.green.500]', + 'light.outline.on-dark.warning': '[general.orange.500]', + 'light.outline.on-dark.negative': '[general.red.500]', + 'light.outline.on-dark.info': '[general.blue.500]', + 'light.outline.on-dark.positive-minor': '[general.green.850]', + 'light.outline.on-dark.warning-minor': '[general.orange.850]', + 'light.outline.on-dark.negative-minor': '[general.red.850]', + 'light.outline.on-dark.info-minor': '[general.blue.850]', + 'light.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.on-light.clear': baseColors.clear.value, + 'light.outline.on-light.accent': config.accentColor.light, + 'light.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.on-light.promo': baseColors.white.value, + 'light.outline.on-light.promo-minor': baseColors.white.value, + 'light.outline.on-light.positive': '[general.green.600]', + 'light.outline.on-light.warning': '[general.orange.600]', + 'light.outline.on-light.negative': '[general.red.600]', + 'light.outline.on-light.info': '[general.blue.600]', + 'light.outline.on-light.positive-minor': '[general.green.250]', + 'light.outline.on-light.warning-minor': '[general.orange.250]', + 'light.outline.on-light.negative-minor': '[general.red.250]', + 'light.outline.on-light.info-minor': '[general.blue.250]', + 'light.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'light.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'light.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'light.outline.inverse.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.inverse.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.inverse.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.inverse.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.inverse.clear': baseColors.clear.value, + 'light.outline.inverse.accent': config.accentColor.dark, + 'light.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.inverse.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.inverse.promo': baseColors.white.value, + 'light.outline.inverse.promo-minor': baseColors.white.value, + 'light.outline.inverse.positive': '[general.green.500]', + 'light.outline.inverse.warning': '[general.orange.500]', + 'light.outline.inverse.negative': '[general.red.500]', + 'light.outline.inverse.info': '[general.blue.500]', + 'light.outline.inverse.positive-minor': '[general.green.850]', + 'light.outline.inverse.warning-minor': '[general.orange.850]', + 'light.outline.inverse.negative-minor': '[general.red.850]', + 'light.outline.inverse.info-minor': '[general.blue.850]', + 'light.outline.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.outline.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.outline.inverse.transparent-info': '[general.blue.500][0.28]', +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/color/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/color/default/meta.ts new file mode 100644 index 0000000000..c94e0bae76 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/default/meta.ts @@ -0,0 +1,4988 @@ +import { TokenType } from '../../../types'; + +export const colorTokens: Array = [ + { + type: 'color', + name: 'dark.text.default.primary', + tags: ['dark', 'text', 'default', 'primary'], + displayName: 'textPrimary', + description: 'Основной цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.secondary', + tags: ['dark', 'text', 'default', 'secondary'], + displayName: 'textSecondary', + description: 'Вторичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.tertiary', + tags: ['dark', 'text', 'default', 'tertiary'], + displayName: 'textTertiary', + description: 'Третичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.paragraph', + tags: ['dark', 'text', 'default', 'paragraph'], + displayName: 'textParagraph', + description: 'Сплошной наборный текст', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.accent', + tags: ['dark', 'text', 'default', 'accent'], + displayName: 'textAccent', + description: 'Акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.default.accent-minor', + tags: ['dark', 'text', 'default', 'accent-minor'], + displayName: 'textAccentMinor', + description: 'Акцентный минорный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.default.promo', + tags: ['dark', 'text', 'default', 'promo'], + displayName: 'textPromo', + description: 'Промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.default.promo-minor', + tags: ['dark', 'text', 'default', 'promo-minor'], + displayName: 'textPromoMinor', + description: 'Минорный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.default.positive', + tags: ['dark', 'text', 'default', 'positive'], + displayName: 'textPositive', + description: 'Цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.warning', + tags: ['dark', 'text', 'default', 'warning'], + displayName: 'textWarning', + description: 'Цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.negative', + tags: ['dark', 'text', 'default', 'negative'], + displayName: 'textNegative', + description: 'Цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.info', + tags: ['dark', 'text', 'default', 'info'], + displayName: 'textInfo', + description: 'Цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.positive-minor', + tags: ['dark', 'text', 'default', 'positive-minor'], + displayName: 'textPositiveMinor', + description: 'Минорный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.warning-minor', + tags: ['dark', 'text', 'default', 'warning-minor'], + displayName: 'textWarningMinor', + description: 'Минорный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.negative-minor', + tags: ['dark', 'text', 'default', 'negative-minor'], + displayName: 'textNegativeMinor', + description: 'Минорный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.default.info-minor', + tags: ['dark', 'text', 'default', 'info-minor'], + displayName: 'textInfoMinor', + description: 'Минорный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.primary', + tags: ['dark', 'text', 'on-dark', 'primary'], + displayName: 'onDarkTextPrimary', + description: 'Основной цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.secondary', + tags: ['dark', 'text', 'on-dark', 'secondary'], + displayName: 'onDarkTextSecondary', + description: 'Вторичный цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.tertiary', + tags: ['dark', 'text', 'on-dark', 'tertiary'], + displayName: 'onDarkTextTertiary', + description: 'Третичный цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.paragraph', + tags: ['dark', 'text', 'on-dark', 'paragraph'], + displayName: 'onDarkTextParagraph', + description: 'Сплошной наборный текст на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.accent', + tags: ['dark', 'text', 'on-dark', 'accent'], + displayName: 'onDarkTextAccent', + description: 'Акцентный цвет на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.on-dark.accent-minor', + tags: ['dark', 'text', 'on-dark', 'accent-minor'], + displayName: 'onDarkTextAccentMinor', + description: 'Акцентный минорный цвет на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.on-dark.promo', + tags: ['dark', 'text', 'on-dark', 'promo'], + displayName: 'onDarkTextPromo', + description: 'Промо цвет на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.on-dark.promo-minor', + tags: ['dark', 'text', 'on-dark', 'promo-minor'], + displayName: 'onDarkTextPromoMinor', + description: 'Минорный промо цвет на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.on-dark.positive', + tags: ['dark', 'text', 'on-dark', 'positive'], + displayName: 'onDarkTextPositive', + description: 'Цвет успеха на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.warning', + tags: ['dark', 'text', 'on-dark', 'warning'], + displayName: 'onDarkTextWarning', + description: 'Цвет предупреждения на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.negative', + tags: ['dark', 'text', 'on-dark', 'negative'], + displayName: 'onDarkTextNegative', + description: 'Цвет ошибки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.info', + tags: ['dark', 'text', 'on-dark', 'info'], + displayName: 'onDarkTextInfo', + description: 'Цвет информации на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.positive-minor', + tags: ['dark', 'text', 'on-dark', 'positive-minor'], + displayName: 'onDarkTextPositiveMinor', + description: 'Минорный цвет успеха на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.warning-minor', + tags: ['dark', 'text', 'on-dark', 'warning-minor'], + displayName: 'onDarkTextWarningMinor', + description: 'Минорный цвет предупреждения на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.negative-minor', + tags: ['dark', 'text', 'on-dark', 'negative-minor'], + displayName: 'onDarkTextNegativeMinor', + description: 'Минорный цвет ошибки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-dark.info-minor', + tags: ['dark', 'text', 'on-dark', 'info-minor'], + displayName: 'onDarkTextInfoMinor', + description: 'Минорный цвет информации на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.primary', + tags: ['dark', 'text', 'on-light', 'primary'], + displayName: 'onLightTextPrimary', + description: 'Основной цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.secondary', + tags: ['dark', 'text', 'on-light', 'secondary'], + displayName: 'onLightTextSecondary', + description: 'Вторичный цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.tertiary', + tags: ['dark', 'text', 'on-light', 'tertiary'], + displayName: 'onLightTextTertiary', + description: 'Третичный цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.paragraph', + tags: ['dark', 'text', 'on-light', 'paragraph'], + displayName: 'onLightTextParagraph', + description: 'Сплошной наборный текст на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.accent', + tags: ['dark', 'text', 'on-light', 'accent'], + displayName: 'onLightTextAccent', + description: 'Акцентный цвет на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.on-light.accent-minor', + tags: ['dark', 'text', 'on-light', 'accent-minor'], + displayName: 'onLightTextAccentMinor', + description: 'Акцентный минорный цвет на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.on-light.promo', + tags: ['dark', 'text', 'on-light', 'promo'], + displayName: 'onLightTextPromo', + description: 'Промо цвет на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.on-light.promo-minor', + tags: ['dark', 'text', 'on-light', 'promo-minor'], + displayName: 'onLightTextPromoMinor', + description: 'Минорный промо цвет на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.on-light.positive', + tags: ['dark', 'text', 'on-light', 'positive'], + displayName: 'onLightTextPositive', + description: 'Цвет успеха на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.warning', + tags: ['dark', 'text', 'on-light', 'warning'], + displayName: 'onLightTextWarning', + description: 'Цвет предупреждения на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.negative', + tags: ['dark', 'text', 'on-light', 'negative'], + displayName: 'onLightTextNegative', + description: 'Цвет ошибки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.info', + tags: ['dark', 'text', 'on-light', 'info'], + displayName: 'onLightTextInfo', + description: 'Цвет информации на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.positive-minor', + tags: ['dark', 'text', 'on-light', 'positive-minor'], + displayName: 'onLightTextPositiveMinor', + description: 'Минорный цвет успеха на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.warning-minor', + tags: ['dark', 'text', 'on-light', 'warning-minor'], + displayName: 'onLightTextWarningMinor', + description: 'Минорный цвет предупреждения на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.negative-minor', + tags: ['dark', 'text', 'on-light', 'negative-minor'], + displayName: 'onLightTextNegativeMinor', + description: 'Минорный цвет ошибки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.on-light.info-minor', + tags: ['dark', 'text', 'on-light', 'info-minor'], + displayName: 'onLightTextInfoMinor', + description: 'Минорный цвет информации на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.primary', + tags: ['dark', 'text', 'inverse', 'primary'], + displayName: 'inverseTextPrimary', + description: 'Инвертированный основной цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.secondary', + tags: ['dark', 'text', 'inverse', 'secondary'], + displayName: 'inverseTextSecondary', + description: 'Инвертированный вторичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.tertiary', + tags: ['dark', 'text', 'inverse', 'tertiary'], + displayName: 'inverseTextTertiary', + description: 'Инвертированный третичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.paragraph', + tags: ['dark', 'text', 'inverse', 'paragraph'], + displayName: 'inverseTextParagraph', + description: 'Инвертированный сплошной наборный текст', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.accent', + tags: ['dark', 'text', 'inverse', 'accent'], + displayName: 'inverseTextAccent', + description: 'Инвертированный акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.inverse.accent-minor', + tags: ['dark', 'text', 'inverse', 'accent-minor'], + displayName: 'inverseTextAccentMinor', + description: 'Инвертированный минорный акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'dark.text.inverse.promo', + tags: ['dark', 'text', 'inverse', 'promo'], + displayName: 'inverseTextPromo', + description: 'Инвертированный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.inverse.promo-minor', + tags: ['dark', 'text', 'inverse', 'promo-minor'], + displayName: 'inverseTextPromoMinor', + description: 'Инвертированный минорный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'dark.text.inverse.positive', + tags: ['dark', 'text', 'inverse', 'positive'], + displayName: 'inverseTextPositive', + description: 'Инвертированный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.warning', + tags: ['dark', 'text', 'inverse', 'warning'], + displayName: 'inverseTextWarning', + description: 'Инвертированный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.negative', + tags: ['dark', 'text', 'inverse', 'negative'], + displayName: 'inverseTextNegative', + description: 'Инвертированный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.info', + tags: ['dark', 'text', 'inverse', 'info'], + displayName: 'inverseTextInfo', + description: 'Инвертированный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.positive-minor', + tags: ['dark', 'text', 'inverse', 'positive-minor'], + displayName: 'inverseTextPositiveMinor', + description: 'Инвертированный минорный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.warning-minor', + tags: ['dark', 'text', 'inverse', 'warning-minor'], + displayName: 'inverseTextWarningMinor', + description: 'Инвертированный минорный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.negative-minor', + tags: ['dark', 'text', 'inverse', 'negative-minor'], + displayName: 'inverseTextNegativeMinor', + description: 'Инвертированный минорный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'dark.text.inverse.info-minor', + tags: ['dark', 'text', 'inverse', 'info-minor'], + displayName: 'inverseTextInfoMinor', + description: 'Инвертированный минорный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.solid-primary', + tags: ['dark', 'surface', 'default', 'solid-primary'], + displayName: 'surfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.solid-secondary', + tags: ['dark', 'surface', 'default', 'solid-secondary'], + displayName: 'surfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.solid-tertiary', + tags: ['dark', 'surface', 'default', 'solid-tertiary'], + displayName: 'surfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.solid-card', + tags: ['dark', 'surface', 'default', 'solid-card'], + displayName: 'surfaceSolidCard', + description: 'Основной фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.solid-default', + tags: ['dark', 'surface', 'default', 'solid-default'], + displayName: 'surfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-primary', + tags: ['dark', 'surface', 'default', 'transparent-primary'], + displayName: 'surfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-secondary', + tags: ['dark', 'surface', 'default', 'transparent-secondary'], + displayName: 'surfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-tertiary', + tags: ['dark', 'surface', 'default', 'transparent-tertiary'], + displayName: 'surfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-deep', + tags: ['dark', 'surface', 'default', 'transparent-deep'], + displayName: 'surfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-card', + tags: ['dark', 'surface', 'default', 'transparent-card'], + displayName: 'surfaceTransparentCard', + description: 'Прозрачный фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.clear', + tags: ['dark', 'surface', 'default', 'clear'], + displayName: 'surfaceClear', + description: 'Фон поверхности/контрола без заливки', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.accent', + tags: ['dark', 'surface', 'default', 'accent'], + displayName: 'surfaceAccent', + description: 'Акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.default.accent-minor', + tags: ['dark', 'surface', 'default', 'accent-minor'], + displayName: 'surfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.default.transparent-accent', + tags: ['dark', 'surface', 'default', 'transparent-accent'], + displayName: 'surfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.default.promo', + tags: ['dark', 'surface', 'default', 'promo'], + displayName: 'surfacePromo', + description: 'Промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.default.promo-minor', + tags: ['dark', 'surface', 'default', 'promo-minor'], + displayName: 'surfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.default.transparent-promo', + tags: ['dark', 'surface', 'default', 'transparent-promo'], + displayName: 'surfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.default.positive', + tags: ['dark', 'surface', 'default', 'positive'], + displayName: 'surfacePositive', + description: 'Цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.warning', + tags: ['dark', 'surface', 'default', 'warning'], + displayName: 'surfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.negative', + tags: ['dark', 'surface', 'default', 'negative'], + displayName: 'surfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.info', + tags: ['dark', 'surface', 'default', 'info'], + displayName: 'surfaceInfo', + description: 'Цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.positive-minor', + tags: ['dark', 'surface', 'default', 'positive-minor'], + displayName: 'surfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.warning-minor', + tags: ['dark', 'surface', 'default', 'warning-minor'], + displayName: 'surfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.negative-minor', + tags: ['dark', 'surface', 'default', 'negative-minor'], + displayName: 'surfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.info-minor', + tags: ['dark', 'surface', 'default', 'info-minor'], + displayName: 'surfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-positive', + tags: ['dark', 'surface', 'default', 'transparent-positive'], + displayName: 'surfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-warning', + tags: ['dark', 'surface', 'default', 'transparent-warning'], + displayName: 'surfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-negative', + tags: ['dark', 'surface', 'default', 'transparent-negative'], + displayName: 'surfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.default.transparent-info', + tags: ['dark', 'surface', 'default', 'transparent-info'], + displayName: 'surfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.solid-primary', + tags: ['dark', 'surface', 'on-dark', 'solid-primary'], + displayName: 'onDarkSurfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.solid-secondary', + tags: ['dark', 'surface', 'on-dark', 'solid-secondary'], + displayName: 'onDarkSurfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.solid-tertiary', + tags: ['dark', 'surface', 'on-dark', 'solid-tertiary'], + displayName: 'onDarkSurfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.solid-card', + tags: ['dark', 'surface', 'on-dark', 'solid-card'], + displayName: 'onDarkSurfaceSolidCard', + description: 'Основной фон для карточек на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.solid-default', + tags: ['dark', 'surface', 'on-dark', 'solid-default'], + displayName: 'onDarkSurfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-primary', + tags: ['dark', 'surface', 'on-dark', 'transparent-primary'], + displayName: 'onDarkSurfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-secondary', + tags: ['dark', 'surface', 'on-dark', 'transparent-secondary'], + displayName: 'onDarkSurfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-tertiary', + tags: ['dark', 'surface', 'on-dark', 'transparent-tertiary'], + displayName: 'onDarkSurfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-deep', + tags: ['dark', 'surface', 'on-dark', 'transparent-deep'], + displayName: 'onDarkSurfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-card', + tags: ['dark', 'surface', 'on-dark', 'transparent-card'], + displayName: 'onDarkSurfaceTransparentCard', + description: 'Прозрачный фон для карточек на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.clear', + tags: ['dark', 'surface', 'on-dark', 'clear'], + displayName: 'onDarkSurfaceClear', + description: 'Фон поверхности/контрола без заливки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.accent', + tags: ['dark', 'surface', 'on-dark', 'accent'], + displayName: 'onDarkSurfaceAccent', + description: 'Акцентный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.accent-minor', + tags: ['dark', 'surface', 'on-dark', 'accent-minor'], + displayName: 'onDarkSurfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.transparent-accent', + tags: ['dark', 'surface', 'on-dark', 'transparent-accent'], + displayName: 'onDarkSurfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.promo', + tags: ['dark', 'surface', 'on-dark', 'promo'], + displayName: 'onDarkSurfacePromo', + description: 'Промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.promo-minor', + tags: ['dark', 'surface', 'on-dark', 'promo-minor'], + displayName: 'onDarkSurfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.transparent-promo', + tags: ['dark', 'surface', 'on-dark', 'transparent-promo'], + displayName: 'onDarkSurfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-dark.positive', + tags: ['dark', 'surface', 'on-dark', 'positive'], + displayName: 'onDarkSurfacePositive', + description: 'Цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.warning', + tags: ['dark', 'surface', 'on-dark', 'warning'], + displayName: 'onDarkSurfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.negative', + tags: ['dark', 'surface', 'on-dark', 'negative'], + displayName: 'onDarkSurfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.info', + tags: ['dark', 'surface', 'on-dark', 'info'], + displayName: 'onDarkSurfaceInfo', + description: 'Цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.positive-minor', + tags: ['dark', 'surface', 'on-dark', 'positive-minor'], + displayName: 'onDarkSurfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.warning-minor', + tags: ['dark', 'surface', 'on-dark', 'warning-minor'], + displayName: 'onDarkSurfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.negative-minor', + tags: ['dark', 'surface', 'on-dark', 'negative-minor'], + displayName: 'onDarkSurfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.info-minor', + tags: ['dark', 'surface', 'on-dark', 'info-minor'], + displayName: 'onDarkSurfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-positive', + tags: ['dark', 'surface', 'on-dark', 'transparent-positive'], + displayName: 'onDarkSurfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-warning', + tags: ['dark', 'surface', 'on-dark', 'transparent-warning'], + displayName: 'onDarkSurfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-negative', + tags: ['dark', 'surface', 'on-dark', 'transparent-negative'], + displayName: 'onDarkSurfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-dark.transparent-info', + tags: ['dark', 'surface', 'on-dark', 'transparent-info'], + displayName: 'onDarkSurfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.solid-primary', + tags: ['dark', 'surface', 'on-light', 'solid-primary'], + displayName: 'onLightSurfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.solid-secondary', + tags: ['dark', 'surface', 'on-light', 'solid-secondary'], + displayName: 'onLightSurfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.solid-tertiary', + tags: ['dark', 'surface', 'on-light', 'solid-tertiary'], + displayName: 'onLightSurfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.solid-card', + tags: ['dark', 'surface', 'on-light', 'solid-card'], + displayName: 'onLightSurfaceSolidCard', + description: 'Основной фон для карточек на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.solid-default', + tags: ['dark', 'surface', 'on-light', 'solid-default'], + displayName: 'onLightSurfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-primary', + tags: ['dark', 'surface', 'on-light', 'transparent-primary'], + displayName: 'onLightSurfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-secondary', + tags: ['dark', 'surface', 'on-light', 'transparent-secondary'], + displayName: 'onLightSurfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-tertiary', + tags: ['dark', 'surface', 'on-light', 'transparent-tertiary'], + displayName: 'onLightSurfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-deep', + tags: ['dark', 'surface', 'on-light', 'transparent-deep'], + displayName: 'onLightSurfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-card', + tags: ['dark', 'surface', 'on-light', 'transparent-card'], + displayName: 'onLightSurfaceTransparentCard', + description: 'Прозрачный фон для карточек на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.clear', + tags: ['dark', 'surface', 'on-light', 'clear'], + displayName: 'onLightSurfaceClear', + description: 'Фон поверхности/контрола без заливки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.accent', + tags: ['dark', 'surface', 'on-light', 'accent'], + displayName: 'onLightSurfaceAccent', + description: 'Акцентный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-light.accent-minor', + tags: ['dark', 'surface', 'on-light', 'accent-minor'], + displayName: 'onLightSurfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-light.transparent-accent', + tags: ['dark', 'surface', 'on-light', 'transparent-accent'], + displayName: 'onLightSurfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.on-light.promo', + tags: ['dark', 'surface', 'on-light', 'promo'], + displayName: 'onLightSurfacePromo', + description: 'Промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-light.promo-minor', + tags: ['dark', 'surface', 'on-light', 'promo-minor'], + displayName: 'onLightSurfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-light.transparent-promo', + tags: ['dark', 'surface', 'on-light', 'transparent-promo'], + displayName: 'onLightSurfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.on-light.positive', + tags: ['dark', 'surface', 'on-light', 'positive'], + displayName: 'onLightSurfacePositive', + description: 'Цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.warning', + tags: ['dark', 'surface', 'on-light', 'warning'], + displayName: 'onLightSurfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.negative', + tags: ['dark', 'surface', 'on-light', 'negative'], + displayName: 'onLightSurfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.info', + tags: ['dark', 'surface', 'on-light', 'info'], + displayName: 'onLightSurfaceInfo', + description: 'Цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.positive-minor', + tags: ['dark', 'surface', 'on-light', 'positive-minor'], + displayName: 'onLightSurfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.warning-minor', + tags: ['dark', 'surface', 'on-light', 'warning-minor'], + displayName: 'onLightSurfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.negative-minor', + tags: ['dark', 'surface', 'on-light', 'negative-minor'], + displayName: 'onLightSurfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.info-minor', + tags: ['dark', 'surface', 'on-light', 'info-minor'], + displayName: 'onLightSurfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-positive', + tags: ['dark', 'surface', 'on-light', 'transparent-positive'], + displayName: 'onLightSurfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-warning', + tags: ['dark', 'surface', 'on-light', 'transparent-warning'], + displayName: 'onLightSurfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-negative', + tags: ['dark', 'surface', 'on-light', 'transparent-negative'], + displayName: 'onLightSurfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.on-light.transparent-info', + tags: ['dark', 'surface', 'on-light', 'transparent-info'], + displayName: 'onLightSurfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.solid-primary', + tags: ['dark', 'surface', 'inverse', 'solid-primary'], + displayName: 'inverseSurfaceSolidPrimary', + description: 'Инвертированный основной непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.solid-secondary', + tags: ['dark', 'surface', 'inverse', 'solid-secondary'], + displayName: 'inverseSurfaceSolidSecondary', + description: 'Инвертированный вторичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.solid-tertiary', + tags: ['dark', 'surface', 'inverse', 'solid-tertiary'], + displayName: 'inverseSurfaceSolidTertiary', + description: 'Инвертированный третичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.solid-card', + tags: ['dark', 'surface', 'inverse', 'solid-card'], + displayName: 'inverseSurfaceSolidCard', + description: 'Инвертированный основной фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.solid-default', + tags: ['dark', 'surface', 'inverse', 'solid-default'], + displayName: 'inverseSurfaceSolidDefault', + description: 'Инвертированный непрозрачный фон поверхности/контрола по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-primary', + tags: ['dark', 'surface', 'inverse', 'transparent-primary'], + displayName: 'inverseSurfaceTransparentPrimary', + description: 'Инвертированный основной прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-secondary', + tags: ['dark', 'surface', 'inverse', 'transparent-secondary'], + displayName: 'inverseSurfaceTransparentSecondary', + description: 'Инвертированный вторичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-tertiary', + tags: ['dark', 'surface', 'inverse', 'transparent-tertiary'], + displayName: 'inverseSurfaceTransparentTertiary', + description: 'Инвертированный третичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-deep', + tags: ['dark', 'surface', 'inverse', 'transparent-deep'], + displayName: 'inverseSurfaceTransparentDeep', + description: 'Инвертированный глубокий прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-card', + tags: ['dark', 'surface', 'inverse', 'transparent-card'], + displayName: 'inverseSurfaceTransparentCard', + description: 'Инвертированный прозрачный фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.clear', + tags: ['dark', 'surface', 'inverse', 'clear'], + displayName: 'inverseSurfaceClear', + description: 'Инвертированный фон поверхности/контрола без заливки', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.accent', + tags: ['dark', 'surface', 'inverse', 'accent'], + displayName: 'inverseSurfaceAccent', + description: 'Инвертированный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.inverse.accent-minor', + tags: ['dark', 'surface', 'inverse', 'accent-minor'], + displayName: 'inverseSurfaceAccentMinor', + description: 'Инвертированный акцентный минорный непрозрачный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.inverse.transparent-accent', + tags: ['dark', 'surface', 'inverse', 'transparent-accent'], + displayName: 'inverseSurfaceTransparentAccent', + description: 'Прозрачный инвертированный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'dark.surface.inverse.promo', + tags: ['dark', 'surface', 'inverse', 'promo'], + displayName: 'inverseSurfacePromo', + description: 'Инвертированный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.inverse.promo-minor', + tags: ['dark', 'surface', 'inverse', 'promo-minor'], + displayName: 'inverseSurfacePromoMinor', + description: 'Инвертированный минорный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.inverse.transparent-promo', + tags: ['dark', 'surface', 'inverse', 'transparent-promo'], + displayName: 'inverseSurfaceTransparentPromo', + description: 'Инвертированный прозрачный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'dark.surface.inverse.positive', + tags: ['dark', 'surface', 'inverse', 'positive'], + displayName: 'inverseSurfacePositive', + description: 'Инвертированный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.warning', + tags: ['dark', 'surface', 'inverse', 'warning'], + displayName: 'inverseSurfaceWarning', + description: 'Инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.negative', + tags: ['dark', 'surface', 'inverse', 'negative'], + displayName: 'inverseSurfaceNegative', + description: 'Инвертированный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.info', + tags: ['dark', 'surface', 'inverse', 'info'], + displayName: 'inverseSurfaceInfo', + description: 'Инвертированный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.positive-minor', + tags: ['dark', 'surface', 'inverse', 'positive-minor'], + displayName: 'inverseSurfacePositiveMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.warning-minor', + tags: ['dark', 'surface', 'inverse', 'warning-minor'], + displayName: 'inverseSurfaceWarningMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.negative-minor', + tags: ['dark', 'surface', 'inverse', 'negative-minor'], + displayName: 'inverseSurfaceNegativeMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.info-minor', + tags: ['dark', 'surface', 'inverse', 'info-minor'], + displayName: 'inverseSurfaceInfoMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-positive', + tags: ['dark', 'surface', 'inverse', 'transparent-positive'], + displayName: 'inverseSurfaceTransparentPositive', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-warning', + tags: ['dark', 'surface', 'inverse', 'transparent-warning'], + displayName: 'inverseSurfaceTransparentWarning', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-negative', + tags: ['dark', 'surface', 'inverse', 'transparent-negative'], + displayName: 'inverseSurfaceTransparentNegative', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.surface.inverse.transparent-info', + tags: ['dark', 'surface', 'inverse', 'transparent-info'], + displayName: 'inverseSurfaceTransparentInfo', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.background.default.primary', + tags: ['dark', 'background', 'default', 'primary'], + displayName: 'backgroundPrimary', + description: 'Основной фон', + enabled: true, + }, + { + type: 'color', + name: 'dark.background.default.secondary', + tags: ['dark', 'background', 'default', 'secondary'], + displayName: 'backgroundSecondary', + description: 'Вторичный фон', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.default.tertiary', + tags: ['dark', 'background', 'default', 'tertiary'], + displayName: 'backgroundTertiary', + description: 'Третичный фон', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.dark.primary', + tags: ['dark', 'background', 'dark', 'primary'], + displayName: 'darkBackgroundPrimary', + description: 'Основной фон на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.background.dark.secondary', + tags: ['dark', 'background', 'dark', 'secondary'], + displayName: 'darkBackgroundSecondary', + description: 'Вторичный фон на темном фоне', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.dark.tertiary', + tags: ['dark', 'background', 'dark', 'tertiary'], + displayName: 'darkBackgroundTertiary', + description: 'Третичный фон на темном фоне', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.light.primary', + tags: ['dark', 'background', 'light', 'primary'], + displayName: 'lightBackgroundPrimary', + description: 'Основной фон на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.background.light.secondary', + tags: ['dark', 'background', 'light', 'secondary'], + displayName: 'lightBackgroundSecondary', + description: 'Вторичный фон на светлом фоне', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.light.tertiary', + tags: ['dark', 'background', 'light', 'tertiary'], + displayName: 'lightBackgroundTertiary', + description: 'Третичный фон на светлом фоне', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.inverse.primary', + tags: ['dark', 'background', 'inverse', 'primary'], + displayName: 'inverseBackgroundPrimary', + description: 'Инвертированный основной фон', + enabled: true, + }, + { + type: 'color', + name: 'dark.background.inverse.secondary', + tags: ['dark', 'background', 'inverse', 'secondary'], + displayName: 'inverseBackgroundSecondary', + description: 'Инвертированный вторичный фон', + enabled: false, + }, + { + type: 'color', + name: 'dark.background.inverse.tertiary', + tags: ['dark', 'background', 'inverse', 'tertiary'], + displayName: 'inverseBackgroundTertiary', + description: 'Инвертированный третичный фон', + enabled: false, + }, + { + type: 'color', + name: 'dark.overlay.default.soft', + tags: ['dark', 'overlay', 'default', 'soft'], + displayName: 'overlaySoft', + description: 'Цвет фона паранжи светлый', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.default.hard', + tags: ['dark', 'overlay', 'default', 'hard'], + displayName: 'overlayHard', + description: 'Цвет фона паранжи темный', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.default.blur', + tags: ['dark', 'overlay', 'default', 'blur'], + displayName: 'overlayBlur', + description: 'Цвет фона паранжи размытый', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-dark.soft', + tags: ['dark', 'overlay', 'on-dark', 'soft'], + displayName: 'onDarkOverlaySoft', + description: 'Цвет фона паранжи светлый на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-dark.hard', + tags: ['dark', 'overlay', 'on-dark', 'hard'], + displayName: 'onDarkOverlayHard', + description: 'Цвет фона паранжи темный на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-dark.blur', + tags: ['dark', 'overlay', 'on-dark', 'blur'], + displayName: 'onDarkOverlayBlur', + description: 'Цвет фона паранжи размытый на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-light.soft', + tags: ['dark', 'overlay', 'on-light', 'soft'], + displayName: 'onLightOverlaySoft', + description: 'Цвет фона паранжи светлый на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-light.hard', + tags: ['dark', 'overlay', 'on-light', 'hard'], + displayName: 'onLightOverlayHard', + description: 'Цвет фона паранжи темный на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.on-light.blur', + tags: ['dark', 'overlay', 'on-light', 'blur'], + displayName: 'onLightOverlayBlur', + description: 'Цвет фона паранжи размытый на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.inverse.soft', + tags: ['dark', 'overlay', 'inverse', 'soft'], + displayName: 'inverseOverlaySoft', + description: 'Инвертированный цвет фона паранжи светлый', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.inverse.hard', + tags: ['dark', 'overlay', 'inverse', 'hard'], + displayName: 'inverseOverlayHard', + description: 'Инвертированный цвет фона паранжи темный', + enabled: true, + }, + { + type: 'color', + name: 'dark.overlay.inverse.blur', + tags: ['dark', 'overlay', 'inverse', 'blur'], + displayName: 'inverseOverlayBlur', + description: 'Инвертированный цвет фона паранжи размытый', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.solid-primary', + tags: ['dark', 'outline', 'default', 'solid-primary'], + displayName: 'outlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.solid-secondary', + tags: ['dark', 'outline', 'default', 'solid-secondary'], + displayName: 'outlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.solid-tertiary', + tags: ['dark', 'outline', 'default', 'solid-tertiary'], + displayName: 'outlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-default', + tags: ['dark', 'outline', 'default', 'transparent-default'], + displayName: 'outlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-primary', + tags: ['dark', 'outline', 'default', 'transparent-primary'], + displayName: 'outlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-secondary', + tags: ['dark', 'outline', 'default', 'transparent-secondary'], + displayName: 'outlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-tertiary', + tags: ['dark', 'outline', 'default', 'transparent-tertiary'], + displayName: 'outlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.clear', + tags: ['dark', 'outline', 'default', 'clear'], + displayName: 'outlineClear', + description: 'Бесцветная обводка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.accent', + tags: ['dark', 'outline', 'default', 'accent'], + displayName: 'outlineAccent', + description: 'Акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.default.accent-minor', + tags: ['dark', 'outline', 'default', 'accent-minor'], + displayName: 'outlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.default.transparent-accent', + tags: ['dark', 'outline', 'default', 'transparent-accent'], + displayName: 'outlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.default.promo', + tags: ['dark', 'outline', 'default', 'promo'], + displayName: 'outlinePromo', + description: 'Промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.default.promo-minor', + tags: ['dark', 'outline', 'default', 'promo-minor'], + displayName: 'outlinePromoMinor', + description: 'Минорный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.default.positive', + tags: ['dark', 'outline', 'default', 'positive'], + displayName: 'outlinePositive', + description: 'Цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.warning', + tags: ['dark', 'outline', 'default', 'warning'], + displayName: 'outlineWarning', + description: 'Цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.negative', + tags: ['dark', 'outline', 'default', 'negative'], + displayName: 'outlineNegative', + description: 'Цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.info', + tags: ['dark', 'outline', 'default', 'info'], + displayName: 'outlineInfo', + description: 'Цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.positive-minor', + tags: ['dark', 'outline', 'default', 'positive-minor'], + displayName: 'outlinePositiveMinor', + description: 'Минорный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.warning-minor', + tags: ['dark', 'outline', 'default', 'warning-minor'], + displayName: 'outlineWarningMinor', + description: 'Минорный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.negative-minor', + tags: ['dark', 'outline', 'default', 'negative-minor'], + displayName: 'outlineNegativeMinor', + description: 'Минорный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.info-minor', + tags: ['dark', 'outline', 'default', 'info-minor'], + displayName: 'outlineInfoMinor', + description: 'Минорный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-positive', + tags: ['dark', 'outline', 'default', 'transparent-positive'], + displayName: 'outlineTransparentPositive', + description: 'Прозрачный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-warning', + tags: ['dark', 'outline', 'default', 'transparent-warning'], + displayName: 'outlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-negative', + tags: ['dark', 'outline', 'default', 'transparent-negative'], + displayName: 'outlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.default.transparent-info', + tags: ['dark', 'outline', 'default', 'transparent-info'], + displayName: 'outlineTransparentInfo', + description: 'Прозрачный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.solid-primary', + tags: ['dark', 'outline', 'on-dark', 'solid-primary'], + displayName: 'onDarkOutlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.solid-secondary', + tags: ['dark', 'outline', 'on-dark', 'solid-secondary'], + displayName: 'onDarkOutlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.solid-tertiary', + tags: ['dark', 'outline', 'on-dark', 'solid-tertiary'], + displayName: 'onDarkOutlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-default', + tags: ['dark', 'outline', 'on-dark', 'transparent-default'], + displayName: 'onDarkOutlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-primary', + tags: ['dark', 'outline', 'on-dark', 'transparent-primary'], + displayName: 'onDarkOutlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-secondary', + tags: ['dark', 'outline', 'on-dark', 'transparent-secondary'], + displayName: 'onDarkOutlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-tertiary', + tags: ['dark', 'outline', 'on-dark', 'transparent-tertiary'], + displayName: 'onDarkOutlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.clear', + tags: ['dark', 'outline', 'on-dark', 'clear'], + displayName: 'onDarkOutlineClear', + description: 'Бесцветная обводка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.accent', + tags: ['dark', 'outline', 'on-dark', 'accent'], + displayName: 'onDarkOutlineAccent', + description: 'Акцентный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-dark.accent-minor', + tags: ['dark', 'outline', 'on-dark', 'accent-minor'], + displayName: 'onDarkOutlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-dark.transparent-accent', + tags: ['dark', 'outline', 'on-dark', 'transparent-accent'], + displayName: 'onDarkOutlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-dark.promo', + tags: ['dark', 'outline', 'on-dark', 'promo'], + displayName: 'onDarkOutlinePromo', + description: 'Промо цвет обводки на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.on-dark.promo-minor', + tags: ['dark', 'outline', 'on-dark', 'promo-minor'], + displayName: 'onDarkOutlinePromoMinor', + description: 'Минорный промо цвет обводки на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.on-dark.positive', + tags: ['dark', 'outline', 'on-dark', 'positive'], + displayName: 'onDarkOutlinePositive', + description: 'Цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.warning', + tags: ['dark', 'outline', 'on-dark', 'warning'], + displayName: 'onDarkOutlineWarning', + description: 'Цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.negative', + tags: ['dark', 'outline', 'on-dark', 'negative'], + displayName: 'onDarkOutlineNegative', + description: 'Цвет обводки ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.info', + tags: ['dark', 'outline', 'on-dark', 'info'], + displayName: 'onDarkOutlineInfo', + description: 'Цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.positive-minor', + tags: ['dark', 'outline', 'on-dark', 'positive-minor'], + displayName: 'onDarkOutlinePositiveMinor', + description: 'Минорный цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.warning-minor', + tags: ['dark', 'outline', 'on-dark', 'warning-minor'], + displayName: 'onDarkOutlineWarningMinor', + description: 'Минорный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.negative-minor', + tags: ['dark', 'outline', 'on-dark', 'negative-minor'], + displayName: 'onDarkOutlineNegativeMinor', + description: 'Минорный цвет обводки ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.info-minor', + tags: ['dark', 'outline', 'on-dark', 'info-minor'], + displayName: 'onDarkOutlineInfoMinor', + description: 'Минорный цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-positive', + tags: ['dark', 'outline', 'on-dark', 'transparent-positive'], + displayName: 'onDarkOutlineTransparentPositive', + description: 'Прозрачный цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-warning', + tags: ['dark', 'outline', 'on-dark', 'transparent-warning'], + displayName: 'onDarkOutlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-negative', + tags: ['dark', 'outline', 'on-dark', 'transparent-negative'], + displayName: 'onDarkOutlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-dark.transparent-info', + tags: ['dark', 'outline', 'on-dark', 'transparent-info'], + displayName: 'onDarkOutlineTransparentInfo', + description: 'Прозрачный цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.solid-primary', + tags: ['dark', 'outline', 'on-light', 'solid-primary'], + displayName: 'onLightOutlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.solid-secondary', + tags: ['dark', 'outline', 'on-light', 'solid-secondary'], + displayName: 'onLightOutlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.solid-tertiary', + tags: ['dark', 'outline', 'on-light', 'solid-tertiary'], + displayName: 'onLightOutlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-default', + tags: ['dark', 'outline', 'on-light', 'transparent-default'], + displayName: 'onLightOutlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-primary', + tags: ['dark', 'outline', 'on-light', 'transparent-primary'], + displayName: 'onLightOutlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-secondary', + tags: ['dark', 'outline', 'on-light', 'transparent-secondary'], + displayName: 'onLightOutlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-tertiary', + tags: ['dark', 'outline', 'on-light', 'transparent-tertiary'], + displayName: 'onLightOutlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.clear', + tags: ['dark', 'outline', 'on-light', 'clear'], + displayName: 'onLightOutlineClear', + description: 'Бесцветная обводка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.accent', + tags: ['dark', 'outline', 'on-light', 'accent'], + displayName: 'onLightOutlineAccent', + description: 'Акцентный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-light.accent-minor', + tags: ['dark', 'outline', 'on-light', 'accent-minor'], + displayName: 'onLightOutlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-light.transparent-accent', + tags: ['dark', 'outline', 'on-light', 'transparent-accent'], + displayName: 'onLightOutlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.on-light.promo', + tags: ['dark', 'outline', 'on-light', 'promo'], + displayName: 'onLightOutlinePromo', + description: 'Промо цвет обводки на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.on-light.promo-minor', + tags: ['dark', 'outline', 'on-light', 'promo-minor'], + displayName: 'onLightOutlinePromoMinor', + description: 'Минорный промо цвет обводки на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.on-light.positive', + tags: ['dark', 'outline', 'on-light', 'positive'], + displayName: 'onLightOutlinePositive', + description: 'Цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.warning', + tags: ['dark', 'outline', 'on-light', 'warning'], + displayName: 'onLightOutlineWarning', + description: 'Цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.negative', + tags: ['dark', 'outline', 'on-light', 'negative'], + displayName: 'onLightOutlineNegative', + description: 'Цвет обводки ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.info', + tags: ['dark', 'outline', 'on-light', 'info'], + displayName: 'onLightOutlineInfo', + description: 'Цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.positive-minor', + tags: ['dark', 'outline', 'on-light', 'positive-minor'], + displayName: 'onLightOutlinePositiveMinor', + description: 'Минорный цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.warning-minor', + tags: ['dark', 'outline', 'on-light', 'warning-minor'], + displayName: 'onLightOutlineWarningMinor', + description: 'Минорный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.negative-minor', + tags: ['dark', 'outline', 'on-light', 'negative-minor'], + displayName: 'onLightOutlineNegativeMinor', + description: 'Минорный цвет обводки ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.info-minor', + tags: ['dark', 'outline', 'on-light', 'info-minor'], + displayName: 'onLightOutlineInfoMinor', + description: 'Минорный цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-positive', + tags: ['dark', 'outline', 'on-light', 'transparent-positive'], + displayName: 'onLightOutlineTransparentPositive', + description: 'Прозрачный цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-warning', + tags: ['dark', 'outline', 'on-light', 'transparent-warning'], + displayName: 'onLightOutlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-negative', + tags: ['dark', 'outline', 'on-light', 'transparent-negative'], + displayName: 'onLightOutlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.on-light.transparent-info', + tags: ['dark', 'outline', 'on-light', 'transparent-info'], + displayName: 'onLightOutlineTransparentInfo', + description: 'Прозрачный цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.solid-primary', + tags: ['dark', 'outline', 'inverse', 'solid-primary'], + displayName: 'inverseOutlineSolidPrimary', + description: 'Инвертированный основной непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.solid-secondary', + tags: ['dark', 'outline', 'inverse', 'solid-secondary'], + displayName: 'inverseOutlineSolidSecondary', + description: 'Инвертированный вторичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.solid-tertiary', + tags: ['dark', 'outline', 'inverse', 'solid-tertiary'], + displayName: 'inverseOutlineSolidTertiary', + description: 'Инвертированный третичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-default', + tags: ['dark', 'outline', 'inverse', 'transparent-default'], + displayName: 'inverseOutlineTransparentDefault', + description: 'Инвертированный прозрачный цвет обводки по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-primary', + tags: ['dark', 'outline', 'inverse', 'transparent-primary'], + displayName: 'inverseOutlineTransparentPrimary', + description: 'Инвертированный основной прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-secondary', + tags: ['dark', 'outline', 'inverse', 'transparent-secondary'], + displayName: 'inverseOutlineTransparentSecondary', + description: 'Инвертированный вторичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-tertiary', + tags: ['dark', 'outline', 'inverse', 'transparent-tertiary'], + displayName: 'inverseOutlineTransparentTertiary', + description: 'Инвертированный третичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.clear', + tags: ['dark', 'outline', 'inverse', 'clear'], + displayName: 'inverseOutlineClear', + description: 'Инвертированная бесцветная обводка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.accent', + tags: ['dark', 'outline', 'inverse', 'accent'], + displayName: 'inverseOutlineAccent', + description: 'Инвертированный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.inverse.accent-minor', + tags: ['dark', 'outline', 'inverse', 'accent-minor'], + displayName: 'inverseOutlineAccentMinor', + description: 'Инвертированный акцентный минорный непрозрачный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.inverse.transparent-accent', + tags: ['dark', 'outline', 'inverse', 'transparent-accent'], + displayName: 'inverseOutlineTransparentAccent', + description: 'Прозрачный инвертированный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'dark.outline.inverse.promo', + tags: ['dark', 'outline', 'inverse', 'promo'], + displayName: 'inverseOutlinePromo', + description: 'Инвертированный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.inverse.promo-minor', + tags: ['dark', 'outline', 'inverse', 'promo-minor'], + displayName: 'inverseOutlinePromoMinor', + description: 'Инвертированный минорный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'dark.outline.inverse.positive', + tags: ['dark', 'outline', 'inverse', 'positive'], + displayName: 'inverseOutlinePositive', + description: 'Инвертированный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.warning', + tags: ['dark', 'outline', 'inverse', 'warning'], + displayName: 'inverseOutlineWarning', + description: 'Инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.negative', + tags: ['dark', 'outline', 'inverse', 'negative'], + displayName: 'inverseOutlineNegative', + description: 'Инвертированный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.info', + tags: ['dark', 'outline', 'inverse', 'info'], + displayName: 'inverseOutlineInfo', + description: 'Инвертированный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.positive-minor', + tags: ['dark', 'outline', 'inverse', 'positive-minor'], + displayName: 'inverseOutlinePositiveMinor', + description: 'Инвертированный минорный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.warning-minor', + tags: ['dark', 'outline', 'inverse', 'warning-minor'], + displayName: 'inverseOutlineWarningMinor', + description: 'Инвертированный минорный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.negative-minor', + tags: ['dark', 'outline', 'inverse', 'negative-minor'], + displayName: 'inverseOutlineNegativeMinor', + description: 'Инвертированный минорный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.info-minor', + tags: ['dark', 'outline', 'inverse', 'info-minor'], + displayName: 'inverseOutlineInfoMinor', + description: 'Инвертированный минорный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-positive', + tags: ['dark', 'outline', 'inverse', 'transparent-positive'], + displayName: 'inverseOutlineTransparentPositive', + description: 'Прозрачный инвертированный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-warning', + tags: ['dark', 'outline', 'inverse', 'transparent-warning'], + displayName: 'inverseOutlineTransparentWarning', + description: 'Прозрачный инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-negative', + tags: ['dark', 'outline', 'inverse', 'transparent-negative'], + displayName: 'inverseOutlineTransparentNegative', + description: 'Прозрачный инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'dark.outline.inverse.transparent-info', + tags: ['dark', 'outline', 'inverse', 'transparent-info'], + displayName: 'inverseOutlineTransparentInfo', + description: 'Прозрачный инвертированный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.primary', + tags: ['light', 'text', 'default', 'primary'], + displayName: 'textPrimary', + description: 'Основной цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.secondary', + tags: ['light', 'text', 'default', 'secondary'], + displayName: 'textSecondary', + description: 'Вторичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.tertiary', + tags: ['light', 'text', 'default', 'tertiary'], + displayName: 'textTertiary', + description: 'Третичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.paragraph', + tags: ['light', 'text', 'default', 'paragraph'], + displayName: 'textParagraph', + description: 'Сплошной наборный текст', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.accent', + tags: ['light', 'text', 'default', 'accent'], + displayName: 'textAccent', + description: 'Акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.default.accent-minor', + tags: ['light', 'text', 'default', 'accent-minor'], + displayName: 'textAccentMinor', + description: 'Акцентный минорный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.default.promo', + tags: ['light', 'text', 'default', 'promo'], + displayName: 'textPromo', + description: 'Промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.default.promo-minor', + tags: ['light', 'text', 'default', 'promo-minor'], + displayName: 'textPromoMinor', + description: 'Минорный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.default.positive', + tags: ['light', 'text', 'default', 'positive'], + displayName: 'textPositive', + description: 'Цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.warning', + tags: ['light', 'text', 'default', 'warning'], + displayName: 'textWarning', + description: 'Цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.negative', + tags: ['light', 'text', 'default', 'negative'], + displayName: 'textNegative', + description: 'Цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.info', + tags: ['light', 'text', 'default', 'info'], + displayName: 'textInfo', + description: 'Цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.positive-minor', + tags: ['light', 'text', 'default', 'positive-minor'], + displayName: 'textPositiveMinor', + description: 'Минорный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.warning-minor', + tags: ['light', 'text', 'default', 'warning-minor'], + displayName: 'textWarningMinor', + description: 'Минорный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.negative-minor', + tags: ['light', 'text', 'default', 'negative-minor'], + displayName: 'textNegativeMinor', + description: 'Минорный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'light.text.default.info-minor', + tags: ['light', 'text', 'default', 'info-minor'], + displayName: 'textInfoMinor', + description: 'Минорный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.primary', + tags: ['light', 'text', 'on-dark', 'primary'], + displayName: 'onDarkTextPrimary', + description: 'Основной цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.secondary', + tags: ['light', 'text', 'on-dark', 'secondary'], + displayName: 'onDarkTextSecondary', + description: 'Вторичный цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.tertiary', + tags: ['light', 'text', 'on-dark', 'tertiary'], + displayName: 'onDarkTextTertiary', + description: 'Третичный цвет текста на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.paragraph', + tags: ['light', 'text', 'on-dark', 'paragraph'], + displayName: 'onDarkTextParagraph', + description: 'Сплошной наборный текст на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.accent', + tags: ['light', 'text', 'on-dark', 'accent'], + displayName: 'onDarkTextAccent', + description: 'Акцентный цвет на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.on-dark.accent-minor', + tags: ['light', 'text', 'on-dark', 'accent-minor'], + displayName: 'onDarkTextAccentMinor', + description: 'Акцентный минорный цвет на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.on-dark.promo', + tags: ['light', 'text', 'on-dark', 'promo'], + displayName: 'onDarkTextPromo', + description: 'Промо цвет на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.on-dark.promo-minor', + tags: ['light', 'text', 'on-dark', 'promo-minor'], + displayName: 'onDarkTextPromoMinor', + description: 'Минорный промо цвет на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.on-dark.positive', + tags: ['light', 'text', 'on-dark', 'positive'], + displayName: 'onDarkTextPositive', + description: 'Цвет успеха на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.warning', + tags: ['light', 'text', 'on-dark', 'warning'], + displayName: 'onDarkTextWarning', + description: 'Цвет предупреждения на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.negative', + tags: ['light', 'text', 'on-dark', 'negative'], + displayName: 'onDarkTextNegative', + description: 'Цвет ошибки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.info', + tags: ['light', 'text', 'on-dark', 'info'], + displayName: 'onDarkTextInfo', + description: 'Цвет информации на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.positive-minor', + tags: ['light', 'text', 'on-dark', 'positive-minor'], + displayName: 'onDarkTextPositiveMinor', + description: 'Минорный цвет успеха на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.warning-minor', + tags: ['light', 'text', 'on-dark', 'warning-minor'], + displayName: 'onDarkTextWarningMinor', + description: 'Минорный цвет предупреждения на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.negative-minor', + tags: ['light', 'text', 'on-dark', 'negative-minor'], + displayName: 'onDarkTextNegativeMinor', + description: 'Минорный цвет ошибки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-dark.info-minor', + tags: ['light', 'text', 'on-dark', 'info-minor'], + displayName: 'onDarkTextInfoMinor', + description: 'Минорный цвет информации на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.primary', + tags: ['light', 'text', 'on-light', 'primary'], + displayName: 'onLightTextPrimary', + description: 'Основной цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.secondary', + tags: ['light', 'text', 'on-light', 'secondary'], + displayName: 'onLightTextSecondary', + description: 'Вторичный цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.tertiary', + tags: ['light', 'text', 'on-light', 'tertiary'], + displayName: 'onLightTextTertiary', + description: 'Третичный цвет текста на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.paragraph', + tags: ['light', 'text', 'on-light', 'paragraph'], + displayName: 'onLightTextParagraph', + description: 'Сплошной наборный текст на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.accent', + tags: ['light', 'text', 'on-light', 'accent'], + displayName: 'onLightTextAccent', + description: 'Акцентный цвет на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.on-light.accent-minor', + tags: ['light', 'text', 'on-light', 'accent-minor'], + displayName: 'onLightTextAccentMinor', + description: 'Акцентный минорный цвет на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.on-light.promo', + tags: ['light', 'text', 'on-light', 'promo'], + displayName: 'onLightTextPromo', + description: 'Промо цвет на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.on-light.promo-minor', + tags: ['light', 'text', 'on-light', 'promo-minor'], + displayName: 'onLightTextPromoMinor', + description: 'Минорный промо цвет на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.on-light.positive', + tags: ['light', 'text', 'on-light', 'positive'], + displayName: 'onLightTextPositive', + description: 'Цвет успеха на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.warning', + tags: ['light', 'text', 'on-light', 'warning'], + displayName: 'onLightTextWarning', + description: 'Цвет предупреждения на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.negative', + tags: ['light', 'text', 'on-light', 'negative'], + displayName: 'onLightTextNegative', + description: 'Цвет ошибки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.info', + tags: ['light', 'text', 'on-light', 'info'], + displayName: 'onLightTextInfo', + description: 'Цвет информации на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.positive-minor', + tags: ['light', 'text', 'on-light', 'positive-minor'], + displayName: 'onLightTextPositiveMinor', + description: 'Минорный цвет успеха на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.warning-minor', + tags: ['light', 'text', 'on-light', 'warning-minor'], + displayName: 'onLightTextWarningMinor', + description: 'Минорный цвет предупреждения на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.negative-minor', + tags: ['light', 'text', 'on-light', 'negative-minor'], + displayName: 'onLightTextNegativeMinor', + description: 'Минорный цвет ошибки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.on-light.info-minor', + tags: ['light', 'text', 'on-light', 'info-minor'], + displayName: 'onLightTextInfoMinor', + description: 'Минорный цвет информации на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.primary', + tags: ['light', 'text', 'inverse', 'primary'], + displayName: 'inverseTextPrimary', + description: 'Инвертированный основной цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.secondary', + tags: ['light', 'text', 'inverse', 'secondary'], + displayName: 'inverseTextSecondary', + description: 'Инвертированный вторичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.tertiary', + tags: ['light', 'text', 'inverse', 'tertiary'], + displayName: 'inverseTextTertiary', + description: 'Инвертированный третичный цвет текста', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.paragraph', + tags: ['light', 'text', 'inverse', 'paragraph'], + displayName: 'inverseTextParagraph', + description: 'Инвертированный сплошной наборный текст', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.accent', + tags: ['light', 'text', 'inverse', 'accent'], + displayName: 'inverseTextAccent', + description: 'Инвертированный акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.inverse.accent-minor', + tags: ['light', 'text', 'inverse', 'accent-minor'], + displayName: 'inverseTextAccentMinor', + description: 'Инвертированный минорный акцентный цвет', + enabled: true, + }, + + { + type: 'color', + name: 'light.text.inverse.promo', + tags: ['light', 'text', 'inverse', 'promo'], + displayName: 'inverseTextPromo', + description: 'Инвертированный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.inverse.promo-minor', + tags: ['light', 'text', 'inverse', 'promo-minor'], + displayName: 'inverseTextPromoMinor', + description: 'Инвертированный минорный промо цвет', + enabled: false, + }, + + { + type: 'color', + name: 'light.text.inverse.positive', + tags: ['light', 'text', 'inverse', 'positive'], + displayName: 'inverseTextPositive', + description: 'Инвертированный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.warning', + tags: ['light', 'text', 'inverse', 'warning'], + displayName: 'inverseTextWarning', + description: 'Инвертированный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.negative', + tags: ['light', 'text', 'inverse', 'negative'], + displayName: 'inverseTextNegative', + description: 'Инвертированный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.info', + tags: ['light', 'text', 'inverse', 'info'], + displayName: 'inverseTextInfo', + description: 'Инвертированный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.positive-minor', + tags: ['light', 'text', 'inverse', 'positive-minor'], + displayName: 'inverseTextPositiveMinor', + description: 'Инвертированный минорный цвет успеха', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.warning-minor', + tags: ['light', 'text', 'inverse', 'warning-minor'], + displayName: 'inverseTextWarningMinor', + description: 'Инвертированный минорный цвет предупреждения', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.negative-minor', + tags: ['light', 'text', 'inverse', 'negative-minor'], + displayName: 'inverseTextNegativeMinor', + description: 'Инвертированный минорный цвет ошибки', + enabled: true, + }, + { + type: 'color', + name: 'light.text.inverse.info-minor', + tags: ['light', 'text', 'inverse', 'info-minor'], + displayName: 'inverseTextInfoMinor', + description: 'Инвертированный минорный цвет информации', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.solid-primary', + tags: ['light', 'surface', 'default', 'solid-primary'], + displayName: 'surfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.solid-secondary', + tags: ['light', 'surface', 'default', 'solid-secondary'], + displayName: 'surfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.solid-tertiary', + tags: ['light', 'surface', 'default', 'solid-tertiary'], + displayName: 'surfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.solid-card', + tags: ['light', 'surface', 'default', 'solid-card'], + displayName: 'surfaceSolidCard', + description: 'Основной фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.solid-default', + tags: ['light', 'surface', 'default', 'solid-default'], + displayName: 'surfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-primary', + tags: ['light', 'surface', 'default', 'transparent-primary'], + displayName: 'surfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-secondary', + tags: ['light', 'surface', 'default', 'transparent-secondary'], + displayName: 'surfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-tertiary', + tags: ['light', 'surface', 'default', 'transparent-tertiary'], + displayName: 'surfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-deep', + tags: ['light', 'surface', 'default', 'transparent-deep'], + displayName: 'surfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-card', + tags: ['light', 'surface', 'default', 'transparent-card'], + displayName: 'surfaceTransparentCard', + description: 'Прозрачный фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.clear', + tags: ['light', 'surface', 'default', 'clear'], + displayName: 'surfaceClear', + description: 'Фон поверхности/контрола без заливки', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.accent', + tags: ['light', 'surface', 'default', 'accent'], + displayName: 'surfaceAccent', + description: 'Акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.default.accent-minor', + tags: ['light', 'surface', 'default', 'accent-minor'], + displayName: 'surfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.default.transparent-accent', + tags: ['light', 'surface', 'default', 'transparent-accent'], + displayName: 'surfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.default.promo', + tags: ['light', 'surface', 'default', 'promo'], + displayName: 'surfacePromo', + description: 'Промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.default.promo-minor', + tags: ['light', 'surface', 'default', 'promo-minor'], + displayName: 'surfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.default.transparent-promo', + tags: ['light', 'surface', 'default', 'transparent-promo'], + displayName: 'surfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.default.positive', + tags: ['light', 'surface', 'default', 'positive'], + displayName: 'surfacePositive', + description: 'Цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.warning', + tags: ['light', 'surface', 'default', 'warning'], + displayName: 'surfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.negative', + tags: ['light', 'surface', 'default', 'negative'], + displayName: 'surfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.info', + tags: ['light', 'surface', 'default', 'info'], + displayName: 'surfaceInfo', + description: 'Цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.positive-minor', + tags: ['light', 'surface', 'default', 'positive-minor'], + displayName: 'surfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.warning-minor', + tags: ['light', 'surface', 'default', 'warning-minor'], + displayName: 'surfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.negative-minor', + tags: ['light', 'surface', 'default', 'negative-minor'], + displayName: 'surfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.info-minor', + tags: ['light', 'surface', 'default', 'info-minor'], + displayName: 'surfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-positive', + tags: ['light', 'surface', 'default', 'transparent-positive'], + displayName: 'surfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-warning', + tags: ['light', 'surface', 'default', 'transparent-warning'], + displayName: 'surfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-negative', + tags: ['light', 'surface', 'default', 'transparent-negative'], + displayName: 'surfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.default.transparent-info', + tags: ['light', 'surface', 'default', 'transparent-info'], + displayName: 'surfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.solid-primary', + tags: ['light', 'surface', 'on-dark', 'solid-primary'], + displayName: 'onDarkSurfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.solid-secondary', + tags: ['light', 'surface', 'on-dark', 'solid-secondary'], + displayName: 'onDarkSurfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.solid-tertiary', + tags: ['light', 'surface', 'on-dark', 'solid-tertiary'], + displayName: 'onDarkSurfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.solid-card', + tags: ['light', 'surface', 'on-dark', 'solid-card'], + displayName: 'onDarkSurfaceSolidCard', + description: 'Основной фон для карточек на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.solid-default', + tags: ['light', 'surface', 'on-dark', 'solid-default'], + displayName: 'onDarkSurfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-primary', + tags: ['light', 'surface', 'on-dark', 'transparent-primary'], + displayName: 'onDarkSurfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-secondary', + tags: ['light', 'surface', 'on-dark', 'transparent-secondary'], + displayName: 'onDarkSurfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-tertiary', + tags: ['light', 'surface', 'on-dark', 'transparent-tertiary'], + displayName: 'onDarkSurfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-deep', + tags: ['light', 'surface', 'on-dark', 'transparent-deep'], + displayName: 'onDarkSurfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-card', + tags: ['light', 'surface', 'on-dark', 'transparent-card'], + displayName: 'onDarkSurfaceTransparentCard', + description: 'Прозрачный фон для карточек на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.clear', + tags: ['light', 'surface', 'on-dark', 'clear'], + displayName: 'onDarkSurfaceClear', + description: 'Фон поверхности/контрола без заливки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.accent', + tags: ['light', 'surface', 'on-dark', 'accent'], + displayName: 'onDarkSurfaceAccent', + description: 'Акцентный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-dark.accent-minor', + tags: ['light', 'surface', 'on-dark', 'accent-minor'], + displayName: 'onDarkSurfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-dark.transparent-accent', + tags: ['light', 'surface', 'on-dark', 'transparent-accent'], + displayName: 'onDarkSurfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-dark.promo', + tags: ['light', 'surface', 'on-dark', 'promo'], + displayName: 'onDarkSurfacePromo', + description: 'Промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-dark.promo-minor', + tags: ['light', 'surface', 'on-dark', 'promo-minor'], + displayName: 'onDarkSurfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-dark.transparent-promo', + tags: ['light', 'surface', 'on-dark', 'transparent-promo'], + displayName: 'onDarkSurfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-dark.positive', + tags: ['light', 'surface', 'on-dark', 'positive'], + displayName: 'onDarkSurfacePositive', + description: 'Цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.warning', + tags: ['light', 'surface', 'on-dark', 'warning'], + displayName: 'onDarkSurfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.negative', + tags: ['light', 'surface', 'on-dark', 'negative'], + displayName: 'onDarkSurfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.info', + tags: ['light', 'surface', 'on-dark', 'info'], + displayName: 'onDarkSurfaceInfo', + description: 'Цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.positive-minor', + tags: ['light', 'surface', 'on-dark', 'positive-minor'], + displayName: 'onDarkSurfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.warning-minor', + tags: ['light', 'surface', 'on-dark', 'warning-minor'], + displayName: 'onDarkSurfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.negative-minor', + tags: ['light', 'surface', 'on-dark', 'negative-minor'], + displayName: 'onDarkSurfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.info-minor', + tags: ['light', 'surface', 'on-dark', 'info-minor'], + displayName: 'onDarkSurfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-positive', + tags: ['light', 'surface', 'on-dark', 'transparent-positive'], + displayName: 'onDarkSurfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-warning', + tags: ['light', 'surface', 'on-dark', 'transparent-warning'], + displayName: 'onDarkSurfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-negative', + tags: ['light', 'surface', 'on-dark', 'transparent-negative'], + displayName: 'onDarkSurfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-dark.transparent-info', + tags: ['light', 'surface', 'on-dark', 'transparent-info'], + displayName: 'onDarkSurfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.solid-primary', + tags: ['light', 'surface', 'on-light', 'solid-primary'], + displayName: 'onLightSurfaceSolidPrimary', + description: 'Основной непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.solid-secondary', + tags: ['light', 'surface', 'on-light', 'solid-secondary'], + displayName: 'onLightSurfaceSolidSecondary', + description: 'Вторичный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.solid-tertiary', + tags: ['light', 'surface', 'on-light', 'solid-tertiary'], + displayName: 'onLightSurfaceSolidTertiary', + description: 'Третичный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.solid-card', + tags: ['light', 'surface', 'on-light', 'solid-card'], + displayName: 'onLightSurfaceSolidCard', + description: 'Основной фон для карточек на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.solid-default', + tags: ['light', 'surface', 'on-light', 'solid-default'], + displayName: 'onLightSurfaceSolidDefault', + description: 'Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-primary', + tags: ['light', 'surface', 'on-light', 'transparent-primary'], + displayName: 'onLightSurfaceTransparentPrimary', + description: 'Основной прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-secondary', + tags: ['light', 'surface', 'on-light', 'transparent-secondary'], + displayName: 'onLightSurfaceTransparentSecondary', + description: 'Вторичный прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-tertiary', + tags: ['light', 'surface', 'on-light', 'transparent-tertiary'], + displayName: 'onLightSurfaceTransparentTertiary', + description: 'Третичный прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-deep', + tags: ['light', 'surface', 'on-light', 'transparent-deep'], + displayName: 'onLightSurfaceTransparentDeep', + description: 'Глубокий прозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-card', + tags: ['light', 'surface', 'on-light', 'transparent-card'], + displayName: 'onLightSurfaceTransparentCard', + description: 'Прозрачный фон для карточек на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.clear', + tags: ['light', 'surface', 'on-light', 'clear'], + displayName: 'onLightSurfaceClear', + description: 'Фон поверхности/контрола без заливки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.accent', + tags: ['light', 'surface', 'on-light', 'accent'], + displayName: 'onLightSurfaceAccent', + description: 'Акцентный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-light.accent-minor', + tags: ['light', 'surface', 'on-light', 'accent-minor'], + displayName: 'onLightSurfaceAccentMinor', + description: 'Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-light.transparent-accent', + tags: ['light', 'surface', 'on-light', 'transparent-accent'], + displayName: 'onLightSurfaceTransparentAccent', + description: 'Прозрачный акцентный фон поверхности/контрола на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.on-light.promo', + tags: ['light', 'surface', 'on-light', 'promo'], + displayName: 'onLightSurfacePromo', + description: 'Промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-light.promo-minor', + tags: ['light', 'surface', 'on-light', 'promo-minor'], + displayName: 'onLightSurfacePromoMinor', + description: 'Минорный промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-light.transparent-promo', + tags: ['light', 'surface', 'on-light', 'transparent-promo'], + displayName: 'onLightSurfaceTransparentPromo', + description: 'Прозрачный промо фон поверхности/контрола на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.on-light.positive', + tags: ['light', 'surface', 'on-light', 'positive'], + displayName: 'onLightSurfacePositive', + description: 'Цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.warning', + tags: ['light', 'surface', 'on-light', 'warning'], + displayName: 'onLightSurfaceWarning', + description: 'Цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.negative', + tags: ['light', 'surface', 'on-light', 'negative'], + displayName: 'onLightSurfaceNegative', + description: 'Цвет фона поверхности/контрола ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.info', + tags: ['light', 'surface', 'on-light', 'info'], + displayName: 'onLightSurfaceInfo', + description: 'Цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.positive-minor', + tags: ['light', 'surface', 'on-light', 'positive-minor'], + displayName: 'onLightSurfacePositiveMinor', + description: 'Минорный цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.warning-minor', + tags: ['light', 'surface', 'on-light', 'warning-minor'], + displayName: 'onLightSurfaceWarningMinor', + description: 'Минорный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.negative-minor', + tags: ['light', 'surface', 'on-light', 'negative-minor'], + displayName: 'onLightSurfaceNegativeMinor', + description: 'Минорный цвет фона поверхности/контрола ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.info-minor', + tags: ['light', 'surface', 'on-light', 'info-minor'], + displayName: 'onLightSurfaceInfoMinor', + description: 'Минорный цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-positive', + tags: ['light', 'surface', 'on-light', 'transparent-positive'], + displayName: 'onLightSurfaceTransparentPositive', + description: 'Прозрачный цвет фона поверхности/контрола успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-warning', + tags: ['light', 'surface', 'on-light', 'transparent-warning'], + displayName: 'onLightSurfaceTransparentWarning', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-negative', + tags: ['light', 'surface', 'on-light', 'transparent-negative'], + displayName: 'onLightSurfaceTransparentNegative', + description: 'Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.on-light.transparent-info', + tags: ['light', 'surface', 'on-light', 'transparent-info'], + displayName: 'onLightSurfaceTransparentInfo', + description: 'Прозрачный цвет фона поверхности/контрола информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.solid-primary', + tags: ['light', 'surface', 'inverse', 'solid-primary'], + displayName: 'inverseSurfaceSolidPrimary', + description: 'Инвертированный основной непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.solid-secondary', + tags: ['light', 'surface', 'inverse', 'solid-secondary'], + displayName: 'inverseSurfaceSolidSecondary', + description: 'Инвертированный вторичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.solid-tertiary', + tags: ['light', 'surface', 'inverse', 'solid-tertiary'], + displayName: 'inverseSurfaceSolidTertiary', + description: 'Инвертированный третичный непрозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.solid-card', + tags: ['light', 'surface', 'inverse', 'solid-card'], + displayName: 'inverseSurfaceSolidCard', + description: 'Инвертированный основной фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.solid-default', + tags: ['light', 'surface', 'inverse', 'solid-default'], + displayName: 'inverseSurfaceSolidDefault', + description: 'Инвертированный непрозрачный фон поверхности/контрола по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-primary', + tags: ['light', 'surface', 'inverse', 'transparent-primary'], + displayName: 'inverseSurfaceTransparentPrimary', + description: 'Инвертированный основной прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-secondary', + tags: ['light', 'surface', 'inverse', 'transparent-secondary'], + displayName: 'inverseSurfaceTransparentSecondary', + description: 'Инвертированный вторичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-tertiary', + tags: ['light', 'surface', 'inverse', 'transparent-tertiary'], + displayName: 'inverseSurfaceTransparentTertiary', + description: 'Инвертированный третичный прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-deep', + tags: ['light', 'surface', 'inverse', 'transparent-deep'], + displayName: 'inverseSurfaceTransparentDeep', + description: 'Инвертированный глубокий прозрачный фон поверхности/контрола', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-card', + tags: ['light', 'surface', 'inverse', 'transparent-card'], + displayName: 'inverseSurfaceTransparentCard', + description: 'Инвертированный прозрачный фон для карточек', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.clear', + tags: ['light', 'surface', 'inverse', 'clear'], + displayName: 'inverseSurfaceClear', + description: 'Инвертированный фон поверхности/контрола без заливки', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.accent', + tags: ['light', 'surface', 'inverse', 'accent'], + displayName: 'inverseSurfaceAccent', + description: 'Инвертированный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.inverse.accent-minor', + tags: ['light', 'surface', 'inverse', 'accent-minor'], + displayName: 'inverseSurfaceAccentMinor', + description: 'Инвертированный акцентный минорный непрозрачный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.inverse.transparent-accent', + tags: ['light', 'surface', 'inverse', 'transparent-accent'], + displayName: 'inverseSurfaceTransparentAccent', + description: 'Прозрачный инвертированный акцентный фон поверхности/контрола', + enabled: true, + }, + + { + type: 'color', + name: 'light.surface.inverse.promo', + tags: ['light', 'surface', 'inverse', 'promo'], + displayName: 'inverseSurfacePromo', + description: 'Инвертированный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.inverse.promo-minor', + tags: ['light', 'surface', 'inverse', 'promo-minor'], + displayName: 'inverseSurfacePromoMinor', + description: 'Инвертированный минорный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.inverse.transparent-promo', + tags: ['light', 'surface', 'inverse', 'transparent-promo'], + displayName: 'inverseSurfaceTransparentPromo', + description: 'Инвертированный прозрачный промо фон поверхности/контрола', + enabled: false, + }, + + { + type: 'color', + name: 'light.surface.inverse.positive', + tags: ['light', 'surface', 'inverse', 'positive'], + displayName: 'inverseSurfacePositive', + description: 'Инвертированный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.warning', + tags: ['light', 'surface', 'inverse', 'warning'], + displayName: 'inverseSurfaceWarning', + description: 'Инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.negative', + tags: ['light', 'surface', 'inverse', 'negative'], + displayName: 'inverseSurfaceNegative', + description: 'Инвертированный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.info', + tags: ['light', 'surface', 'inverse', 'info'], + displayName: 'inverseSurfaceInfo', + description: 'Инвертированный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.positive-minor', + tags: ['light', 'surface', 'inverse', 'positive-minor'], + displayName: 'inverseSurfacePositiveMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.warning-minor', + tags: ['light', 'surface', 'inverse', 'warning-minor'], + displayName: 'inverseSurfaceWarningMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.negative-minor', + tags: ['light', 'surface', 'inverse', 'negative-minor'], + displayName: 'inverseSurfaceNegativeMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.info-minor', + tags: ['light', 'surface', 'inverse', 'info-minor'], + displayName: 'inverseSurfaceInfoMinor', + description: 'Инвертированный минорный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-positive', + tags: ['light', 'surface', 'inverse', 'transparent-positive'], + displayName: 'inverseSurfaceTransparentPositive', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола успех', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-warning', + tags: ['light', 'surface', 'inverse', 'transparent-warning'], + displayName: 'inverseSurfaceTransparentWarning', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-negative', + tags: ['light', 'surface', 'inverse', 'transparent-negative'], + displayName: 'inverseSurfaceTransparentNegative', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.surface.inverse.transparent-info', + tags: ['light', 'surface', 'inverse', 'transparent-info'], + displayName: 'inverseSurfaceTransparentInfo', + description: 'Прозрачный инвертированный цвет фона поверхности/контрола информация', + enabled: true, + }, + { + type: 'color', + name: 'light.background.default.primary', + tags: ['light', 'background', 'default', 'primary'], + displayName: 'backgroundPrimary', + description: 'Основной фон', + enabled: true, + }, + { + type: 'color', + name: 'light.background.default.secondary', + tags: ['light', 'background', 'default', 'secondary'], + displayName: 'backgroundSecondary', + description: 'Вторичный фон', + enabled: false, + }, + { + type: 'color', + name: 'light.background.default.tertiary', + tags: ['light', 'background', 'default', 'tertiary'], + displayName: 'backgroundTertiary', + description: 'Третичный фон', + enabled: false, + }, + { + type: 'color', + name: 'light.background.dark.primary', + tags: ['light', 'background', 'dark', 'primary'], + displayName: 'darkBackgroundPrimary', + description: 'Основной фон на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.background.dark.secondary', + tags: ['light', 'background', 'dark', 'secondary'], + displayName: 'darkBackgroundSecondary', + description: 'Вторичный фон на темном фоне', + enabled: false, + }, + { + type: 'color', + name: 'light.background.dark.tertiary', + tags: ['light', 'background', 'dark', 'tertiary'], + displayName: 'darkBackgroundTertiary', + description: 'Третичный фон на темном фоне', + enabled: false, + }, + { + type: 'color', + name: 'light.background.light.primary', + tags: ['light', 'background', 'light', 'primary'], + displayName: 'lightBackgroundPrimary', + description: 'Основной фон на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.background.light.secondary', + tags: ['light', 'background', 'light', 'secondary'], + displayName: 'lightBackgroundSecondary', + description: 'Вторичный фон на светлом фоне', + enabled: false, + }, + { + type: 'color', + name: 'light.background.light.tertiary', + tags: ['light', 'background', 'light', 'tertiary'], + displayName: 'lightBackgroundTertiary', + description: 'Третичный фон на светлом фоне', + enabled: false, + }, + { + type: 'color', + name: 'light.background.inverse.primary', + tags: ['light', 'background', 'inverse', 'primary'], + displayName: 'inverseBackgroundPrimary', + description: 'Инвертированный основной фон', + enabled: true, + }, + { + type: 'color', + name: 'light.background.inverse.secondary', + tags: ['light', 'background', 'inverse', 'secondary'], + displayName: 'inverseBackgroundSecondary', + description: 'Инвертированный вторичный фон', + enabled: false, + }, + { + type: 'color', + name: 'light.background.inverse.tertiary', + tags: ['light', 'background', 'inverse', 'tertiary'], + displayName: 'inverseBackgroundTertiary', + description: 'Инвертированный третичный фон', + enabled: false, + }, + { + type: 'color', + name: 'light.overlay.default.soft', + tags: ['light', 'overlay', 'default', 'soft'], + displayName: 'overlaySoft', + description: 'Цвет фона паранжи светлый', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.default.hard', + tags: ['light', 'overlay', 'default', 'hard'], + displayName: 'overlayHard', + description: 'Цвет фона паранжи темный', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.default.blur', + tags: ['light', 'overlay', 'default', 'blur'], + displayName: 'overlayBlur', + description: 'Цвет фона паранжи размытый', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-dark.soft', + tags: ['light', 'overlay', 'on-dark', 'soft'], + displayName: 'onDarkOverlaySoft', + description: 'Цвет фона паранжи светлый на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-dark.hard', + tags: ['light', 'overlay', 'on-dark', 'hard'], + displayName: 'onDarkOverlayHard', + description: 'Цвет фона паранжи темный на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-dark.blur', + tags: ['light', 'overlay', 'on-dark', 'blur'], + displayName: 'onDarkOverlayBlur', + description: 'Цвет фона паранжи размытый на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-light.soft', + tags: ['light', 'overlay', 'on-light', 'soft'], + displayName: 'onLightOverlaySoft', + description: 'Цвет фона паранжи светлый на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-light.hard', + tags: ['light', 'overlay', 'on-light', 'hard'], + displayName: 'onLightOverlayHard', + description: 'Цвет фона паранжи темный на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.on-light.blur', + tags: ['light', 'overlay', 'on-light', 'blur'], + displayName: 'onLightOverlayBlur', + description: 'Цвет фона паранжи размытый на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.inverse.soft', + tags: ['light', 'overlay', 'inverse', 'soft'], + displayName: 'inverseOverlaySoft', + description: 'Инвертированный цвет фона паранжи светлый', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.inverse.hard', + tags: ['light', 'overlay', 'inverse', 'hard'], + displayName: 'inverseOverlayHard', + description: 'Инвертированный цвет фона паранжи темный', + enabled: true, + }, + { + type: 'color', + name: 'light.overlay.inverse.blur', + tags: ['light', 'overlay', 'inverse', 'blur'], + displayName: 'inverseOverlayBlur', + description: 'Инвертированный цвет фона паранжи размытый', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.solid-primary', + tags: ['light', 'outline', 'default', 'solid-primary'], + displayName: 'outlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.solid-secondary', + tags: ['light', 'outline', 'default', 'solid-secondary'], + displayName: 'outlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.solid-tertiary', + tags: ['light', 'outline', 'default', 'solid-tertiary'], + displayName: 'outlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-default', + tags: ['light', 'outline', 'default', 'transparent-default'], + displayName: 'outlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-primary', + tags: ['light', 'outline', 'default', 'transparent-primary'], + displayName: 'outlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-secondary', + tags: ['light', 'outline', 'default', 'transparent-secondary'], + displayName: 'outlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-tertiary', + tags: ['light', 'outline', 'default', 'transparent-tertiary'], + displayName: 'outlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.clear', + tags: ['light', 'outline', 'default', 'clear'], + displayName: 'outlineClear', + description: 'Бесцветная обводка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.accent', + tags: ['light', 'outline', 'default', 'accent'], + displayName: 'outlineAccent', + description: 'Акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.default.accent-minor', + tags: ['light', 'outline', 'default', 'accent-minor'], + displayName: 'outlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.default.transparent-accent', + tags: ['light', 'outline', 'default', 'transparent-accent'], + displayName: 'outlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.default.promo', + tags: ['light', 'outline', 'default', 'promo'], + displayName: 'outlinePromo', + description: 'Промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.default.promo-minor', + tags: ['light', 'outline', 'default', 'promo-minor'], + displayName: 'outlinePromoMinor', + description: 'Минорный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.default.positive', + tags: ['light', 'outline', 'default', 'positive'], + displayName: 'outlinePositive', + description: 'Цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.warning', + tags: ['light', 'outline', 'default', 'warning'], + displayName: 'outlineWarning', + description: 'Цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.negative', + tags: ['light', 'outline', 'default', 'negative'], + displayName: 'outlineNegative', + description: 'Цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.info', + tags: ['light', 'outline', 'default', 'info'], + displayName: 'outlineInfo', + description: 'Цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.positive-minor', + tags: ['light', 'outline', 'default', 'positive-minor'], + displayName: 'outlinePositiveMinor', + description: 'Минорный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.warning-minor', + tags: ['light', 'outline', 'default', 'warning-minor'], + displayName: 'outlineWarningMinor', + description: 'Минорный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.negative-minor', + tags: ['light', 'outline', 'default', 'negative-minor'], + displayName: 'outlineNegativeMinor', + description: 'Минорный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.info-minor', + tags: ['light', 'outline', 'default', 'info-minor'], + displayName: 'outlineInfoMinor', + description: 'Минорный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-positive', + tags: ['light', 'outline', 'default', 'transparent-positive'], + displayName: 'outlineTransparentPositive', + description: 'Прозрачный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-warning', + tags: ['light', 'outline', 'default', 'transparent-warning'], + displayName: 'outlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-negative', + tags: ['light', 'outline', 'default', 'transparent-negative'], + displayName: 'outlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.default.transparent-info', + tags: ['light', 'outline', 'default', 'transparent-info'], + displayName: 'outlineTransparentInfo', + description: 'Прозрачный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.solid-primary', + tags: ['light', 'outline', 'on-dark', 'solid-primary'], + displayName: 'onDarkOutlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.solid-secondary', + tags: ['light', 'outline', 'on-dark', 'solid-secondary'], + displayName: 'onDarkOutlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.solid-tertiary', + tags: ['light', 'outline', 'on-dark', 'solid-tertiary'], + displayName: 'onDarkOutlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-default', + tags: ['light', 'outline', 'on-dark', 'transparent-default'], + displayName: 'onDarkOutlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-primary', + tags: ['light', 'outline', 'on-dark', 'transparent-primary'], + displayName: 'onDarkOutlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-secondary', + tags: ['light', 'outline', 'on-dark', 'transparent-secondary'], + displayName: 'onDarkOutlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-tertiary', + tags: ['light', 'outline', 'on-dark', 'transparent-tertiary'], + displayName: 'onDarkOutlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.clear', + tags: ['light', 'outline', 'on-dark', 'clear'], + displayName: 'onDarkOutlineClear', + description: 'Бесцветная обводка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.accent', + tags: ['light', 'outline', 'on-dark', 'accent'], + displayName: 'onDarkOutlineAccent', + description: 'Акцентный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-dark.accent-minor', + tags: ['light', 'outline', 'on-dark', 'accent-minor'], + displayName: 'onDarkOutlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-dark.transparent-accent', + tags: ['light', 'outline', 'on-dark', 'transparent-accent'], + displayName: 'onDarkOutlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки на темном фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-dark.promo', + tags: ['light', 'outline', 'on-dark', 'promo'], + displayName: 'onDarkOutlinePromo', + description: 'Промо цвет обводки на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.on-dark.promo-minor', + tags: ['light', 'outline', 'on-dark', 'promo-minor'], + displayName: 'onDarkOutlinePromoMinor', + description: 'Минорный промо цвет обводки на темном фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.on-dark.positive', + tags: ['light', 'outline', 'on-dark', 'positive'], + displayName: 'onDarkOutlinePositive', + description: 'Цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.warning', + tags: ['light', 'outline', 'on-dark', 'warning'], + displayName: 'onDarkOutlineWarning', + description: 'Цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.negative', + tags: ['light', 'outline', 'on-dark', 'negative'], + displayName: 'onDarkOutlineNegative', + description: 'Цвет обводки ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.info', + tags: ['light', 'outline', 'on-dark', 'info'], + displayName: 'onDarkOutlineInfo', + description: 'Цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.positive-minor', + tags: ['light', 'outline', 'on-dark', 'positive-minor'], + displayName: 'onDarkOutlinePositiveMinor', + description: 'Минорный цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.warning-minor', + tags: ['light', 'outline', 'on-dark', 'warning-minor'], + displayName: 'onDarkOutlineWarningMinor', + description: 'Минорный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.negative-minor', + tags: ['light', 'outline', 'on-dark', 'negative-minor'], + displayName: 'onDarkOutlineNegativeMinor', + description: 'Минорный цвет обводки ошибка на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.info-minor', + tags: ['light', 'outline', 'on-dark', 'info-minor'], + displayName: 'onDarkOutlineInfoMinor', + description: 'Минорный цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-positive', + tags: ['light', 'outline', 'on-dark', 'transparent-positive'], + displayName: 'onDarkOutlineTransparentPositive', + description: 'Прозрачный цвет обводки успех на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-warning', + tags: ['light', 'outline', 'on-dark', 'transparent-warning'], + displayName: 'onDarkOutlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-negative', + tags: ['light', 'outline', 'on-dark', 'transparent-negative'], + displayName: 'onDarkOutlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-dark.transparent-info', + tags: ['light', 'outline', 'on-dark', 'transparent-info'], + displayName: 'onDarkOutlineTransparentInfo', + description: 'Прозрачный цвет обводки информация на темном фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.solid-primary', + tags: ['light', 'outline', 'on-light', 'solid-primary'], + displayName: 'onLightOutlineSolidPrimary', + description: 'Основной непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.solid-secondary', + tags: ['light', 'outline', 'on-light', 'solid-secondary'], + displayName: 'onLightOutlineSolidSecondary', + description: 'Вторичный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.solid-tertiary', + tags: ['light', 'outline', 'on-light', 'solid-tertiary'], + displayName: 'onLightOutlineSolidTertiary', + description: 'Третичный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-default', + tags: ['light', 'outline', 'on-light', 'transparent-default'], + displayName: 'onLightOutlineTransparentDefault', + description: 'Прозрачный цвет обводки по умолчанию на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-primary', + tags: ['light', 'outline', 'on-light', 'transparent-primary'], + displayName: 'onLightOutlineTransparentPrimary', + description: 'Основной прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-secondary', + tags: ['light', 'outline', 'on-light', 'transparent-secondary'], + displayName: 'onLightOutlineTransparentSecondary', + description: 'Вторичный прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-tertiary', + tags: ['light', 'outline', 'on-light', 'transparent-tertiary'], + displayName: 'onLightOutlineTransparentTertiary', + description: 'Третичный прозрачный цвет обводки на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.clear', + tags: ['light', 'outline', 'on-light', 'clear'], + displayName: 'onLightOutlineClear', + description: 'Бесцветная обводка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.accent', + tags: ['light', 'outline', 'on-light', 'accent'], + displayName: 'onLightOutlineAccent', + description: 'Акцентный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-light.accent-minor', + tags: ['light', 'outline', 'on-light', 'accent-minor'], + displayName: 'onLightOutlineAccentMinor', + description: 'Акцентный минорный непрозрачный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-light.transparent-accent', + tags: ['light', 'outline', 'on-light', 'transparent-accent'], + displayName: 'onLightOutlineTransparentAccent', + description: 'Прозрачный акцентный цвет обводки на светлом фоне', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.on-light.promo', + tags: ['light', 'outline', 'on-light', 'promo'], + displayName: 'onLightOutlinePromo', + description: 'Промо цвет обводки на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.on-light.promo-minor', + tags: ['light', 'outline', 'on-light', 'promo-minor'], + displayName: 'onLightOutlinePromoMinor', + description: 'Минорный промо цвет обводки на светлом фоне', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.on-light.positive', + tags: ['light', 'outline', 'on-light', 'positive'], + displayName: 'onLightOutlinePositive', + description: 'Цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.warning', + tags: ['light', 'outline', 'on-light', 'warning'], + displayName: 'onLightOutlineWarning', + description: 'Цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.negative', + tags: ['light', 'outline', 'on-light', 'negative'], + displayName: 'onLightOutlineNegative', + description: 'Цвет обводки ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.info', + tags: ['light', 'outline', 'on-light', 'info'], + displayName: 'onLightOutlineInfo', + description: 'Цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.positive-minor', + tags: ['light', 'outline', 'on-light', 'positive-minor'], + displayName: 'onLightOutlinePositiveMinor', + description: 'Минорный цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.warning-minor', + tags: ['light', 'outline', 'on-light', 'warning-minor'], + displayName: 'onLightOutlineWarningMinor', + description: 'Минорный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.negative-minor', + tags: ['light', 'outline', 'on-light', 'negative-minor'], + displayName: 'onLightOutlineNegativeMinor', + description: 'Минорный цвет обводки ошибка на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.info-minor', + tags: ['light', 'outline', 'on-light', 'info-minor'], + displayName: 'onLightOutlineInfoMinor', + description: 'Минорный цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-positive', + tags: ['light', 'outline', 'on-light', 'transparent-positive'], + displayName: 'onLightOutlineTransparentPositive', + description: 'Прозрачный цвет обводки успех на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-warning', + tags: ['light', 'outline', 'on-light', 'transparent-warning'], + displayName: 'onLightOutlineTransparentWarning', + description: 'Прозрачный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-negative', + tags: ['light', 'outline', 'on-light', 'transparent-negative'], + displayName: 'onLightOutlineTransparentNegative', + description: 'Прозрачный цвет обводки предупреждение на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.on-light.transparent-info', + tags: ['light', 'outline', 'on-light', 'transparent-info'], + displayName: 'onLightOutlineTransparentInfo', + description: 'Прозрачный цвет обводки информация на светлом фоне', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.solid-primary', + tags: ['light', 'outline', 'inverse', 'solid-primary'], + displayName: 'inverseOutlineSolidPrimary', + description: 'Инвертированный основной непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.solid-secondary', + tags: ['light', 'outline', 'inverse', 'solid-secondary'], + displayName: 'inverseOutlineSolidSecondary', + description: 'Инвертированный вторичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.solid-tertiary', + tags: ['light', 'outline', 'inverse', 'solid-tertiary'], + displayName: 'inverseOutlineSolidTertiary', + description: 'Инвертированный третичный непрозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-default', + tags: ['light', 'outline', 'inverse', 'transparent-default'], + displayName: 'inverseOutlineTransparentDefault', + description: 'Инвертированный прозрачный цвет обводки по умолчанию', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-primary', + tags: ['light', 'outline', 'inverse', 'transparent-primary'], + displayName: 'inverseOutlineTransparentPrimary', + description: 'Инвертированный основной прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-secondary', + tags: ['light', 'outline', 'inverse', 'transparent-secondary'], + displayName: 'inverseOutlineTransparentSecondary', + description: 'Инвертированный вторичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-tertiary', + tags: ['light', 'outline', 'inverse', 'transparent-tertiary'], + displayName: 'inverseOutlineTransparentTertiary', + description: 'Инвертированный третичный прозрачный цвет обводки', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.clear', + tags: ['light', 'outline', 'inverse', 'clear'], + displayName: 'inverseOutlineClear', + description: 'Инвертированная бесцветная обводка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.accent', + tags: ['light', 'outline', 'inverse', 'accent'], + displayName: 'inverseOutlineAccent', + description: 'Инвертированный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.inverse.accent-minor', + tags: ['light', 'outline', 'inverse', 'accent-minor'], + displayName: 'inverseOutlineAccentMinor', + description: 'Инвертированный акцентный минорный непрозрачный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.inverse.transparent-accent', + tags: ['light', 'outline', 'inverse', 'transparent-accent'], + displayName: 'inverseOutlineTransparentAccent', + description: 'Прозрачный инвертированный акцентный цвет обводки', + enabled: true, + }, + + { + type: 'color', + name: 'light.outline.inverse.promo', + tags: ['light', 'outline', 'inverse', 'promo'], + displayName: 'inverseOutlinePromo', + description: 'Инвертированный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.inverse.promo-minor', + tags: ['light', 'outline', 'inverse', 'promo-minor'], + displayName: 'inverseOutlinePromoMinor', + description: 'Инвертированный минорный промо цвет обводки', + enabled: false, + }, + + { + type: 'color', + name: 'light.outline.inverse.positive', + tags: ['light', 'outline', 'inverse', 'positive'], + displayName: 'inverseOutlinePositive', + description: 'Инвертированный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.warning', + tags: ['light', 'outline', 'inverse', 'warning'], + displayName: 'inverseOutlineWarning', + description: 'Инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.negative', + tags: ['light', 'outline', 'inverse', 'negative'], + displayName: 'inverseOutlineNegative', + description: 'Инвертированный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.info', + tags: ['light', 'outline', 'inverse', 'info'], + displayName: 'inverseOutlineInfo', + description: 'Инвертированный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.positive-minor', + tags: ['light', 'outline', 'inverse', 'positive-minor'], + displayName: 'inverseOutlinePositiveMinor', + description: 'Инвертированный минорный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.warning-minor', + tags: ['light', 'outline', 'inverse', 'warning-minor'], + displayName: 'inverseOutlineWarningMinor', + description: 'Инвертированный минорный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.negative-minor', + tags: ['light', 'outline', 'inverse', 'negative-minor'], + displayName: 'inverseOutlineNegativeMinor', + description: 'Инвертированный минорный цвет обводки ошибка', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.info-minor', + tags: ['light', 'outline', 'inverse', 'info-minor'], + displayName: 'inverseOutlineInfoMinor', + description: 'Инвертированный минорный цвет обводки информация', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-positive', + tags: ['light', 'outline', 'inverse', 'transparent-positive'], + displayName: 'inverseOutlineTransparentPositive', + description: 'Прозрачный инвертированный цвет обводки успех', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-warning', + tags: ['light', 'outline', 'inverse', 'transparent-warning'], + displayName: 'inverseOutlineTransparentWarning', + description: 'Прозрачный инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-negative', + tags: ['light', 'outline', 'inverse', 'transparent-negative'], + displayName: 'inverseOutlineTransparentNegative', + description: 'Прозрачный инвертированный цвет обводки предупреждение', + enabled: true, + }, + { + type: 'color', + name: 'light.outline.inverse.transparent-info', + tags: ['light', 'outline', 'inverse', 'transparent-info'], + displayName: 'inverseOutlineTransparentInfo', + description: 'Прозрачный инвертированный цвет обводки информация', + enabled: true, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/color/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/color/default/web.ts new file mode 100644 index 0000000000..237bec1b8a --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/default/web.ts @@ -0,0 +1,616 @@ +import { ThemeConfig, alphenColor } from '@salutejs/plasma-tokens-utils'; + +import { baseColors } from '../../../../types'; +import { updateColorSaturation } from '../../../../utils'; +import { WebColorToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebColorToken => ({ + 'dark.text.default.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.default.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.default.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.default.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.default.accent': config.accentColor.dark, + 'dark.text.default.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.default.promo': baseColors.white.value, + 'dark.text.default.promo-minor': baseColors.white.value, + 'dark.text.default.positive': '[general.green.500]', + 'dark.text.default.warning': '[general.orange.500]', + 'dark.text.default.negative': '[general.red.500]', + 'dark.text.default.info': '[general.blue.500]', + 'dark.text.default.positive-minor': '[general.green.150]', + 'dark.text.default.warning-minor': '[general.orange.150]', + 'dark.text.default.negative-minor': '[general.red.150]', + 'dark.text.default.info-minor': '[general.blue.150]', + 'dark.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'dark.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.44), + 'dark.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'dark.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'dark.text.on-dark.accent': config.accentColor.dark, + 'dark.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'dark.text.on-dark.promo': baseColors.white.value, + 'dark.text.on-dark.promo-minor': baseColors.white.value, + 'dark.text.on-dark.positive': '[general.green.500]', + 'dark.text.on-dark.warning': '[general.orange.500]', + 'dark.text.on-dark.negative': '[general.red.500]', + 'dark.text.on-dark.info': '[general.blue.500]', + 'dark.text.on-dark.positive-minor': '[general.green.150]', + 'dark.text.on-dark.warning-minor': '[general.orange.150]', + 'dark.text.on-dark.negative-minor': '[general.red.150]', + 'dark.text.on-dark.info-minor': '[general.blue.150]', + 'dark.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.on-light.accent': config.accentColor.light, + 'dark.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.on-light.promo': baseColors.white.value, + 'dark.text.on-light.promo-minor': baseColors.white.value, + 'dark.text.on-light.positive': '[general.green.600]', + 'dark.text.on-light.warning': '[general.orange.600]', + 'dark.text.on-light.negative': '[general.red.600]', + 'dark.text.on-light.info': '[general.blue.600]', + 'dark.text.on-light.positive-minor': '[general.green.900]', + 'dark.text.on-light.warning-minor': '[general.orange.900]', + 'dark.text.on-light.negative-minor': '[general.red.900]', + 'dark.text.on-light.info-minor': '[general.blue.900]', + 'dark.text.inverse.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.text.inverse.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.text.inverse.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.text.inverse.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'dark.text.inverse.accent': config.accentColor.light, + 'dark.text.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'dark.text.inverse.promo': baseColors.white.value, + 'dark.text.inverse.promo-minor': baseColors.white.value, + 'dark.text.inverse.positive': '[general.green.600]', + 'dark.text.inverse.warning': '[general.orange.600]', + 'dark.text.inverse.negative': '[general.red.600]', + 'dark.text.inverse.info': '[general.blue.600]', + 'dark.text.inverse.positive-minor': '[general.green.900]', + 'dark.text.inverse.warning-minor': '[general.orange.900]', + 'dark.text.inverse.negative-minor': '[general.red.900]', + 'dark.text.inverse.info-minor': '[general.blue.900]', + 'dark.surface.default.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.default.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.default.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.default.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.default.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.default.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.default.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.default.clear': baseColors.clear.value, + 'dark.surface.default.accent': config.accentColor.dark, + 'dark.surface.default.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.default.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.default.promo': baseColors.white.value, + 'dark.surface.default.promo-minor': baseColors.white.value, + 'dark.surface.default.transparent-promo': baseColors.white.value, + 'dark.surface.default.positive': '[general.green.500]', + 'dark.surface.default.warning': '[general.orange.500]', + 'dark.surface.default.negative': '[general.red.500]', + 'dark.surface.default.info': '[general.blue.500]', + 'dark.surface.default.positive-minor': '[general.green.900]', + 'dark.surface.default.warning-minor': '[general.orange.900]', + 'dark.surface.default.negative-minor': '[general.red.900]', + 'dark.surface.default.info-minor': '[general.blue.900]', + 'dark.surface.default.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.default.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.default.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'dark.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'dark.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'dark.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'dark.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'dark.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'dark.surface.on-dark.clear': baseColors.clear.value, + 'dark.surface.on-dark.accent': config.accentColor.dark, + 'dark.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'dark.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'dark.surface.on-dark.promo': baseColors.white.value, + 'dark.surface.on-dark.promo-minor': baseColors.white.value, + 'dark.surface.on-dark.transparent-promo': baseColors.white.value, + 'dark.surface.on-dark.positive': '[general.green.500]', + 'dark.surface.on-dark.warning': '[general.orange.500]', + 'dark.surface.on-dark.negative': '[general.red.500]', + 'dark.surface.on-dark.info': '[general.blue.500]', + 'dark.surface.on-dark.positive-minor': '[general.green.900]', + 'dark.surface.on-dark.warning-minor': '[general.orange.900]', + 'dark.surface.on-dark.negative-minor': '[general.red.900]', + 'dark.surface.on-dark.info-minor': '[general.blue.900]', + 'dark.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.on-light.solid-card': baseColors.white.value, + 'dark.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.on-light.clear': baseColors.clear.value, + 'dark.surface.on-light.accent': config.accentColor.light, + 'dark.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.on-light.promo': baseColors.white.value, + 'dark.surface.on-light.promo-minor': baseColors.white.value, + 'dark.surface.on-light.transparent-promo': baseColors.white.value, + 'dark.surface.on-light.positive': '[general.green.500]', + 'dark.surface.on-light.warning': '[general.orange.500]', + 'dark.surface.on-light.negative': '[general.red.500]', + 'dark.surface.on-light.info': '[general.blue.500]', + 'dark.surface.on-light.positive-minor': '[general.green.200]', + 'dark.surface.on-light.warning-minor': '[general.orange.200]', + 'dark.surface.on-light.negative-minor': '[general.red.200]', + 'dark.surface.on-light.info-minor': '[general.blue.200]', + 'dark.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'dark.surface.inverse.solid-primary': `[general.${config.grayscale.light}.100]`, + 'dark.surface.inverse.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'dark.surface.inverse.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'dark.surface.inverse.solid-card': baseColors.white.value, + 'dark.surface.inverse.solid-default': `[general.${config.grayscale.light}.1000]`, + 'dark.surface.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'dark.surface.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.surface.inverse.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'dark.surface.inverse.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'dark.surface.inverse.clear': baseColors.clear.value, + 'dark.surface.inverse.accent': config.accentColor.light, + 'dark.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'dark.surface.inverse.transparent-accent': `${config.accentColor.light}[0.28]`, + 'dark.surface.inverse.promo': baseColors.white.value, + 'dark.surface.inverse.promo-minor': baseColors.white.value, + 'dark.surface.inverse.transparent-promo': baseColors.white.value, + 'dark.surface.inverse.positive': '[general.green.500]', + 'dark.surface.inverse.warning': '[general.orange.500]', + 'dark.surface.inverse.negative': '[general.red.500]', + 'dark.surface.inverse.info': '[general.blue.500]', + 'dark.surface.inverse.positive-minor': '[general.green.200]', + 'dark.surface.inverse.warning-minor': '[general.orange.200]', + 'dark.surface.inverse.negative-minor': '[general.red.200]', + 'dark.surface.inverse.info-minor': '[general.blue.200]', + 'dark.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'dark.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'dark.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'dark.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'dark.background.default.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.default.secondary': baseColors.white.value, + 'dark.background.default.tertiary': baseColors.white.value, + 'dark.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'dark.background.dark.secondary': baseColors.white.value, + 'dark.background.dark.tertiary': baseColors.white.value, + 'dark.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.light.secondary': baseColors.white.value, + 'dark.background.light.tertiary': baseColors.white.value, + 'dark.background.inverse.primary': `[general.${config.grayscale.light}.50]`, + 'dark.background.inverse.secondary': baseColors.white.value, + 'dark.background.inverse.tertiary': baseColors.white.value, + 'dark.overlay.default.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.default.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.default.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-dark.soft': `[general.${config.grayscale.dark}.1000][0.56]`, + 'dark.overlay.on-dark.hard': `[general.${config.grayscale.dark}.1000][0.96]`, + 'dark.overlay.on-dark.blur': `[general.${config.grayscale.dark}.1000][0.2]`, + 'dark.overlay.on-light.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.on-light.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.on-light.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.overlay.inverse.soft': `[general.${config.grayscale.light}.50][0.56]`, + 'dark.overlay.inverse.hard': `[general.${config.grayscale.light}.50][0.96]`, + 'dark.overlay.inverse.blur': `[general.${config.grayscale.light}.50][0.2]`, + 'dark.outline.default.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.default.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.default.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.default.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.default.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.default.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.default.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.default.clear': baseColors.clear.value, + 'dark.outline.default.accent': config.accentColor.dark, + 'dark.outline.default.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.default.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.default.promo': baseColors.white.value, + 'dark.outline.default.promo-minor': baseColors.white.value, + 'dark.outline.default.positive': '[general.green.500]', + 'dark.outline.default.warning': '[general.orange.500]', + 'dark.outline.default.negative': '[general.red.500]', + 'dark.outline.default.info': '[general.blue.500]', + 'dark.outline.default.positive-minor': '[general.green.850]', + 'dark.outline.default.warning-minor': '[general.orange.850]', + 'dark.outline.default.negative-minor': '[general.red.850]', + 'dark.outline.default.info-minor': '[general.blue.850]', + 'dark.outline.default.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.default.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.default.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.default.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'dark.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'dark.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'dark.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'dark.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'dark.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'dark.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'dark.outline.on-dark.clear': baseColors.clear.value, + 'dark.outline.on-dark.accent': config.accentColor.dark, + 'dark.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'dark.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'dark.outline.on-dark.promo': baseColors.white.value, + 'dark.outline.on-dark.promo-minor': baseColors.white.value, + 'dark.outline.on-dark.positive': '[general.green.500]', + 'dark.outline.on-dark.warning': '[general.orange.500]', + 'dark.outline.on-dark.negative': '[general.red.500]', + 'dark.outline.on-dark.info': '[general.blue.500]', + 'dark.outline.on-dark.positive-minor': '[general.green.850]', + 'dark.outline.on-dark.warning-minor': '[general.orange.850]', + 'dark.outline.on-dark.negative-minor': '[general.red.850]', + 'dark.outline.on-dark.info-minor': '[general.blue.850]', + 'dark.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'dark.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'dark.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'dark.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'dark.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.on-light.clear': baseColors.clear.value, + 'dark.outline.on-light.accent': config.accentColor.light, + 'dark.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.on-light.promo': baseColors.white.value, + 'dark.outline.on-light.promo-minor': baseColors.white.value, + 'dark.outline.on-light.positive': '[general.green.600]', + 'dark.outline.on-light.warning': '[general.orange.600]', + 'dark.outline.on-light.negative': '[general.red.600]', + 'dark.outline.on-light.info': '[general.blue.600]', + 'dark.outline.on-light.positive-minor': '[general.green.250]', + 'dark.outline.on-light.warning-minor': '[general.orange.250]', + 'dark.outline.on-light.negative-minor': '[general.red.250]', + 'dark.outline.on-light.info-minor': '[general.blue.250]', + 'dark.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'dark.outline.inverse.solid-primary': `[general.${config.grayscale.light}.200]`, + 'dark.outline.inverse.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'dark.outline.inverse.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'dark.outline.inverse.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'dark.outline.inverse.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'dark.outline.inverse.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'dark.outline.inverse.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'dark.outline.inverse.clear': baseColors.clear.value, + 'dark.outline.inverse.accent': config.accentColor.light, + 'dark.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'dark.outline.inverse.transparent-accent': `${config.accentColor.light}[0.4]`, + 'dark.outline.inverse.promo': baseColors.white.value, + 'dark.outline.inverse.promo-minor': baseColors.white.value, + 'dark.outline.inverse.positive': '[general.green.600]', + 'dark.outline.inverse.warning': '[general.orange.600]', + 'dark.outline.inverse.negative': '[general.red.600]', + 'dark.outline.inverse.info': '[general.blue.600]', + 'dark.outline.inverse.positive-minor': '[general.green.250]', + 'dark.outline.inverse.warning-minor': '[general.orange.250]', + 'dark.outline.inverse.negative-minor': '[general.red.250]', + 'dark.outline.inverse.info-minor': '[general.blue.250]', + 'dark.outline.inverse.transparent-positive': '[general.green.600][0.28]', + 'dark.outline.inverse.transparent-warning': '[general.orange.600][0.28]', + 'dark.outline.inverse.transparent-negative': '[general.red.600][0.28]', + 'dark.outline.inverse.transparent-info': '[general.blue.600][0.28]', + 'light.text.default.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.default.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.default.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.default.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.default.accent': config.accentColor.light, + 'light.text.default.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.default.promo': baseColors.white.value, + 'light.text.default.promo-minor': baseColors.white.value, + 'light.text.default.positive': '[general.green.600]', + 'light.text.default.warning': '[general.orange.600]', + 'light.text.default.negative': '[general.red.600]', + 'light.text.default.info': '[general.blue.600]', + 'light.text.default.positive-minor': '[general.green.900]', + 'light.text.default.warning-minor': '[general.orange.900]', + 'light.text.default.negative-minor': '[general.red.900]', + 'light.text.default.info-minor': '[general.blue.900]', + 'light.text.on-dark.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.on-dark.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.on-dark.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.on-dark.accent': config.accentColor.dark, + 'light.text.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.on-dark.promo': baseColors.white.value, + 'light.text.on-dark.promo-minor': baseColors.white.value, + 'light.text.on-dark.positive': '[general.green.500]', + 'light.text.on-dark.warning': '[general.orange.500]', + 'light.text.on-dark.negative': '[general.red.500]', + 'light.text.on-dark.info': '[general.blue.500]', + 'light.text.on-dark.positive-minor': '[general.green.150]', + 'light.text.on-dark.warning-minor': '[general.orange.150]', + 'light.text.on-dark.negative-minor': '[general.red.150]', + 'light.text.on-dark.info-minor': '[general.blue.150]', + 'light.text.on-light.primary': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.text.on-light.secondary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.text.on-light.tertiary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.text.on-light.paragraph': `[general.${config.grayscale.light}.1000][0.8]`, + 'light.text.on-light.accent': config.accentColor.light, + 'light.text.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 900), + 'light.text.on-light.promo': baseColors.white.value, + 'light.text.on-light.promo-minor': baseColors.white.value, + 'light.text.on-light.positive': '[general.green.600]', + 'light.text.on-light.warning': '[general.orange.600]', + 'light.text.on-light.negative': '[general.red.600]', + 'light.text.on-light.info': '[general.blue.600]', + 'light.text.on-light.positive-minor': '[general.green.900]', + 'light.text.on-light.warning-minor': '[general.orange.900]', + 'light.text.on-light.negative-minor': '[general.red.900]', + 'light.text.on-light.info-minor': '[general.blue.900]', + 'light.text.inverse.primary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.secondary': alphenColor(baseColors.white.value, -0.04), + 'light.text.inverse.tertiary': alphenColor(baseColors.white.value, -0.72), + 'light.text.inverse.paragraph': alphenColor(baseColors.white.value, -0.2), + 'light.text.inverse.accent': config.accentColor.dark, + 'light.text.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 150), + 'light.text.inverse.promo': baseColors.white.value, + 'light.text.inverse.promo-minor': baseColors.white.value, + 'light.text.inverse.positive': '[general.green.500]', + 'light.text.inverse.warning': '[general.orange.500]', + 'light.text.inverse.negative': '[general.red.500]', + 'light.text.inverse.info': '[general.blue.500]', + 'light.text.inverse.positive-minor': '[general.green.150]', + 'light.text.inverse.warning-minor': '[general.orange.150]', + 'light.text.inverse.negative-minor': '[general.red.150]', + 'light.text.inverse.info-minor': '[general.blue.150]', + 'light.surface.default.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.default.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.default.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.default.solid-card': baseColors.white.value, + 'light.surface.default.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.default.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.default.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.default.clear': baseColors.clear.value, + 'light.surface.default.accent': config.accentColor.light, + 'light.surface.default.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.default.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.default.promo': baseColors.white.value, + 'light.surface.default.promo-minor': baseColors.white.value, + 'light.surface.default.transparent-promo': baseColors.white.value, + 'light.surface.default.positive': '[general.green.500]', + 'light.surface.default.warning': '[general.orange.500]', + 'light.surface.default.negative': '[general.red.500]', + 'light.surface.default.info': '[general.blue.500]', + 'light.surface.default.positive-minor': '[general.green.200]', + 'light.surface.default.warning-minor': '[general.orange.200]', + 'light.surface.default.negative-minor': '[general.red.200]', + 'light.surface.default.info-minor': '[general.blue.200]', + 'light.surface.default.transparent-positive': '[general.green.500][0.28]', + 'light.surface.default.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.default.transparent-negative': '[general.red.500][0.28]', + 'light.surface.default.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-dark.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.on-dark.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.on-dark.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.on-dark.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.on-dark.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.on-dark.clear': baseColors.clear.value, + 'light.surface.on-dark.accent': config.accentColor.dark, + 'light.surface.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.on-dark.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.on-dark.promo': baseColors.white.value, + 'light.surface.on-dark.promo-minor': baseColors.white.value, + 'light.surface.on-dark.transparent-promo': baseColors.white.value, + 'light.surface.on-dark.positive': '[general.green.500]', + 'light.surface.on-dark.warning': '[general.orange.500]', + 'light.surface.on-dark.negative': '[general.red.500]', + 'light.surface.on-dark.info': '[general.blue.500]', + 'light.surface.on-dark.positive-minor': '[general.green.900]', + 'light.surface.on-dark.warning-minor': '[general.orange.900]', + 'light.surface.on-dark.negative-minor': '[general.red.900]', + 'light.surface.on-dark.info-minor': '[general.blue.900]', + 'light.surface.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.surface.on-light.solid-primary': `[general.${config.grayscale.light}.100]`, + 'light.surface.on-light.solid-secondary': `[general.${config.grayscale.light}.150]`, + 'light.surface.on-light.solid-tertiary': `[general.${config.grayscale.light}.200]`, + 'light.surface.on-light.solid-card': baseColors.white.value, + 'light.surface.on-light.solid-default': `[general.${config.grayscale.light}.1000]`, + 'light.surface.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.03]`, + 'light.surface.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.surface.on-light.transparent-deep': `[general.${config.grayscale.light}.1000][0.64]`, + 'light.surface.on-light.transparent-card': `[general.${config.grayscale.light}.1000][0.06]`, + 'light.surface.on-light.clear': baseColors.clear.value, + 'light.surface.on-light.accent': config.accentColor.light, + 'light.surface.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 200), + 'light.surface.on-light.transparent-accent': `${config.accentColor.light}[0.28]`, + 'light.surface.on-light.promo': baseColors.white.value, + 'light.surface.on-light.promo-minor': baseColors.white.value, + 'light.surface.on-light.transparent-promo': baseColors.white.value, + 'light.surface.on-light.positive': '[general.green.500]', + 'light.surface.on-light.warning': '[general.orange.500]', + 'light.surface.on-light.negative': '[general.red.500]', + 'light.surface.on-light.info': '[general.blue.500]', + 'light.surface.on-light.positive-minor': '[general.green.200]', + 'light.surface.on-light.warning-minor': '[general.orange.200]', + 'light.surface.on-light.negative-minor': '[general.red.200]', + 'light.surface.on-light.info-minor': '[general.blue.200]', + 'light.surface.on-light.transparent-positive': '[general.green.500][0.28]', + 'light.surface.on-light.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.on-light.transparent-negative': '[general.red.500][0.28]', + 'light.surface.on-light.transparent-info': '[general.blue.500][0.28]', + 'light.surface.inverse.solid-primary': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-secondary': `[general.${config.grayscale.dark}.900]`, + 'light.surface.inverse.solid-tertiary': `[general.${config.grayscale.dark}.850]`, + 'light.surface.inverse.solid-card': `[general.${config.grayscale.dark}.950]`, + 'light.surface.inverse.solid-default': `[general.${config.grayscale.dark}.50]`, + 'light.surface.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.surface.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.1000][0.2]`, + 'light.surface.inverse.transparent-deep': `[general.${config.grayscale.dark}.50][0.64]`, + 'light.surface.inverse.transparent-card': `[general.${config.grayscale.dark}.50][0.06]`, + 'light.surface.inverse.clear': baseColors.clear.value, + 'light.surface.inverse.accent': config.accentColor.dark, + 'light.surface.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 900), + 'light.surface.inverse.transparent-accent': `${config.accentColor.dark}[0.28]`, + 'light.surface.inverse.promo': baseColors.white.value, + 'light.surface.inverse.promo-minor': baseColors.white.value, + 'light.surface.inverse.transparent-promo': baseColors.white.value, + 'light.surface.inverse.positive': '[general.green.500]', + 'light.surface.inverse.warning': '[general.orange.500]', + 'light.surface.inverse.negative': '[general.red.500]', + 'light.surface.inverse.info': '[general.blue.500]', + 'light.surface.inverse.positive-minor': '[general.green.900]', + 'light.surface.inverse.warning-minor': '[general.orange.900]', + 'light.surface.inverse.negative-minor': '[general.red.900]', + 'light.surface.inverse.info-minor': '[general.blue.900]', + 'light.surface.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.surface.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.surface.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.surface.inverse.transparent-info': '[general.blue.500][0.28]', + 'light.background.default.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.default.secondary': baseColors.white.value, + 'light.background.default.tertiary': baseColors.white.value, + 'light.background.dark.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.dark.secondary': baseColors.white.value, + 'light.background.dark.tertiary': baseColors.white.value, + 'light.background.light.primary': `[general.${config.grayscale.light}.50]`, + 'light.background.light.secondary': baseColors.white.value, + 'light.background.light.tertiary': baseColors.white.value, + 'light.background.inverse.primary': `[general.${config.grayscale.dark}.1000]`, + 'light.background.inverse.secondary': baseColors.white.value, + 'light.background.inverse.tertiary': baseColors.white.value, + 'light.overlay.default.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.default.hard': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.default.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.on-dark.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.on-dark.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.on-dark.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.overlay.on-light.soft': `[general.${config.grayscale.dark}.50][0.56]`, + 'light.overlay.on-light.hard': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.overlay.on-light.blur': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.overlay.inverse.soft': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.overlay.inverse.hard': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.overlay.inverse.blur': `[general.${config.grayscale.light}.1000][0.2]`, + 'light.outline.default.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.default.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.default.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.default.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.default.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.default.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.default.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.default.clear': baseColors.clear.value, + 'light.outline.default.accent': config.accentColor.light, + 'light.outline.default.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.default.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.default.promo': baseColors.white.value, + 'light.outline.default.promo-minor': baseColors.white.value, + 'light.outline.default.positive': '[general.green.600]', + 'light.outline.default.warning': '[general.orange.600]', + 'light.outline.default.negative': '[general.red.600]', + 'light.outline.default.info': '[general.blue.600]', + 'light.outline.default.positive-minor': '[general.green.250]', + 'light.outline.default.warning-minor': '[general.orange.250]', + 'light.outline.default.negative-minor': '[general.red.250]', + 'light.outline.default.info-minor': '[general.blue.250]', + 'light.outline.default.transparent-positive': '[general.green.600][0.28]', + 'light.outline.default.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.default.transparent-negative': '[general.red.600][0.28]', + 'light.outline.default.transparent-info': '[general.blue.600][0.28]', + 'light.outline.on-dark.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.on-dark.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.on-dark.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.on-dark.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.on-dark.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.on-dark.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.on-dark.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.on-dark.clear': baseColors.clear.value, + 'light.outline.on-dark.accent': config.accentColor.dark, + 'light.outline.on-dark.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.on-dark.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.on-dark.promo': baseColors.white.value, + 'light.outline.on-dark.promo-minor': baseColors.white.value, + 'light.outline.on-dark.positive': '[general.green.500]', + 'light.outline.on-dark.warning': '[general.orange.500]', + 'light.outline.on-dark.negative': '[general.red.500]', + 'light.outline.on-dark.info': '[general.blue.500]', + 'light.outline.on-dark.positive-minor': '[general.green.850]', + 'light.outline.on-dark.warning-minor': '[general.orange.850]', + 'light.outline.on-dark.negative-minor': '[general.red.850]', + 'light.outline.on-dark.info-minor': '[general.blue.850]', + 'light.outline.on-dark.transparent-positive': '[general.green.500][0.28]', + 'light.outline.on-dark.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.on-dark.transparent-negative': '[general.red.500][0.28]', + 'light.outline.on-dark.transparent-info': '[general.blue.500][0.28]', + 'light.outline.on-light.solid-primary': `[general.${config.grayscale.light}.200]`, + 'light.outline.on-light.solid-secondary': `[general.${config.grayscale.light}.300]`, + 'light.outline.on-light.solid-tertiary': `[general.${config.grayscale.light}.700]`, + 'light.outline.on-light.transparent-default': `[general.${config.grayscale.light}.1000][0.96]`, + 'light.outline.on-light.transparent-primary': `[general.${config.grayscale.light}.1000][0.12]`, + 'light.outline.on-light.transparent-secondary': `[general.${config.grayscale.light}.1000][0.28]`, + 'light.outline.on-light.transparent-tertiary': `[general.${config.grayscale.light}.1000][0.56]`, + 'light.outline.on-light.clear': baseColors.clear.value, + 'light.outline.on-light.accent': config.accentColor.light, + 'light.outline.on-light.accent-minor': updateColorSaturation(config.accentColor.light, 250), + 'light.outline.on-light.transparent-accent': `${config.accentColor.light}[0.4]`, + 'light.outline.on-light.promo': baseColors.white.value, + 'light.outline.on-light.promo-minor': baseColors.white.value, + 'light.outline.on-light.positive': '[general.green.600]', + 'light.outline.on-light.warning': '[general.orange.600]', + 'light.outline.on-light.negative': '[general.red.600]', + 'light.outline.on-light.info': '[general.blue.600]', + 'light.outline.on-light.positive-minor': '[general.green.250]', + 'light.outline.on-light.warning-minor': '[general.orange.250]', + 'light.outline.on-light.negative-minor': '[general.red.250]', + 'light.outline.on-light.info-minor': '[general.blue.250]', + 'light.outline.on-light.transparent-positive': '[general.green.600][0.28]', + 'light.outline.on-light.transparent-warning': '[general.orange.600][0.28]', + 'light.outline.on-light.transparent-negative': '[general.red.600][0.28]', + 'light.outline.on-light.transparent-info': '[general.blue.600][0.28]', + 'light.outline.inverse.solid-primary': `[general.${config.grayscale.dark}.900]`, + 'light.outline.inverse.solid-secondary': `[general.${config.grayscale.dark}.850]`, + 'light.outline.inverse.solid-tertiary': `[general.${config.grayscale.dark}.800]`, + 'light.outline.inverse.transparent-default': `[general.${config.grayscale.dark}.50][0.96]`, + 'light.outline.inverse.transparent-primary': `[general.${config.grayscale.dark}.50][0.12]`, + 'light.outline.inverse.transparent-secondary': `[general.${config.grayscale.dark}.50][0.2]`, + 'light.outline.inverse.transparent-tertiary': `[general.${config.grayscale.dark}.50][0.28]`, + 'light.outline.inverse.clear': baseColors.clear.value, + 'light.outline.inverse.accent': config.accentColor.dark, + 'light.outline.inverse.accent-minor': updateColorSaturation(config.accentColor.dark, 850), + 'light.outline.inverse.transparent-accent': `${config.accentColor.dark}[0.4]`, + 'light.outline.inverse.promo': baseColors.white.value, + 'light.outline.inverse.promo-minor': baseColors.white.value, + 'light.outline.inverse.positive': '[general.green.500]', + 'light.outline.inverse.warning': '[general.orange.500]', + 'light.outline.inverse.negative': '[general.red.500]', + 'light.outline.inverse.info': '[general.blue.500]', + 'light.outline.inverse.positive-minor': '[general.green.850]', + 'light.outline.inverse.warning-minor': '[general.orange.850]', + 'light.outline.inverse.negative-minor': '[general.red.850]', + 'light.outline.inverse.info-minor': '[general.blue.850]', + 'light.outline.inverse.transparent-positive': '[general.green.500][0.28]', + 'light.outline.inverse.transparent-warning': '[general.orange.500][0.28]', + 'light.outline.inverse.transparent-negative': '[general.red.500][0.28]', + 'light.outline.inverse.transparent-info': '[general.blue.500][0.28]', +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/color/index.ts b/website/plasma-theme-builder/src/_new/tokens/color/index.ts new file mode 100644 index 0000000000..fe487d77b3 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/index.ts @@ -0,0 +1,3 @@ +export * from './color'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/color/types.ts b/website/plasma-theme-builder/src/_new/tokens/color/types.ts new file mode 100644 index 0000000000..f0a8912a82 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/color/types.ts @@ -0,0 +1,17 @@ +/* WEB */ + +export interface WebColorToken { + [k: string]: string; +} + +/* IOS */ + +export interface IOSColorToken { + [k: string]: string; +} + +/* ANDROID */ + +export interface AndroidColorToken { + [k: string]: string; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/creators.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/creators.ts new file mode 100644 index 0000000000..15a16af1b5 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/creators.ts @@ -0,0 +1,91 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidFontFamily, FontFamilyToken, IOSFontFamily, WebFontFamily } from './fontFamily'; +import { fontFamilyTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultFontFamilyTokens = (config: ThemeConfig) => + fontFamilyTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebFontFamily(web), + ios: new IOSFontFamily(ios), + android: new AndroidFontFamily(android), + }; + + return new FontFamilyToken(token, values); + }); + +export const createFontFamilyTokens = (tokens: Array, platforms: PlatformsVariations['fontFamily']) => + tokens.map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebFontFamily(web), + ios: new IOSFontFamily(ios), + android: new AndroidFontFamily(android), + }; + + return new FontFamilyToken(token, values); + }); + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const createMockFontFamilyTokens = () => { + const token = { + displayName: 'fontFamilyName', + enabled: true, + name: 'fontFamily.name', + tags: ['fontFamily', 'name'], + description: 'Description', + }; + + const values = { + web: new WebFontFamily({ + name: '', + fonts: [ + { + src: [], + fontWeight: '100', + fontStyle: 'normal', + }, + ], + }), + ios: new IOSFontFamily({ + name: '', + fonts: [ + { + link: '', + weight: 'bold', + style: 'normal', + }, + ], + }), + android: new AndroidFontFamily({ + name: '', + fonts: [ + { + link: '', + fontWeight: 100, + fontStyle: 'normal', + }, + ], + }), + }; + + const fontFamily = new FontFamilyToken(token, values); + + return [fontFamily]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/android.ts new file mode 100644 index 0000000000..17a49dfe83 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/android.ts @@ -0,0 +1,196 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidFontFamilyToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidFontFamilyToken => ({ + display: { + name: 'SB Sans Display', + fonts: [ + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.otf', + fontWeight: 100, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.otf', + fontWeight: 600, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.otf', + fontWeight: 500, + fontStyle: 'normal', + }, + ], + }, + header: { + name: 'SB Sans Display', + fonts: [ + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.otf', + fontWeight: 100, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.otf', + fontWeight: 600, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.otf', + fontWeight: 500, + fontStyle: 'normal', + }, + ], + }, + text: { + name: 'SB Sans Text', + fonts: [ + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.otf', + fontWeight: 300, + fontStyle: 'normal', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.otf', + fontWeight: 400, + fontStyle: 'italic', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.otf', + fontWeight: 600, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.otf', + fontWeight: 100, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.otf', + fontWeight: 600, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.otf', + fontWeight: 300, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.otf', + fontWeight: 400, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.otf', + fontWeight: 500, + fontStyle: 'normal', + }, + ], + }, + body: { + name: 'SB Sans Text', + fonts: [ + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.otf', + fontWeight: 300, + fontStyle: 'normal', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.otf', + fontWeight: 400, + fontStyle: 'italic', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.otf', + fontWeight: 600, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.otf', + fontWeight: 100, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.otf', + fontWeight: 600, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.otf', + fontWeight: 300, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.otf', + fontWeight: 400, + fontStyle: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.otf', + fontWeight: 400, + fontStyle: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.otf', + fontWeight: 500, + fontStyle: 'normal', + }, + ], + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/ios.ts new file mode 100644 index 0000000000..927a33c62d --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/ios.ts @@ -0,0 +1,196 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { IOSFontFamilyToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSFontFamilyToken => ({ + display: { + name: 'SB Sans Display', + fonts: [ + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.otf', + weight: 'ultraLight', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.otf', + weight: 'light', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.otf', + weight: 'medium', + style: 'normal', + }, + ], + }, + header: { + name: 'SB Sans Display', + fonts: [ + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.otf', + weight: 'ultraLight', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.otf', + weight: 'light', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.otf', + weight: 'medium', + style: 'normal', + }, + ], + }, + text: { + name: 'SB Sans Text', + fonts: [ + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.otf', + weight: 'semibold', + style: 'normal', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.otf', + weight: 'regular', + style: 'italic', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.otf', + weight: 'light', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.otf', + weight: 'ultraLight', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.otf', + weight: 'light', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.otf', + weight: 'semibold', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.otf', + weight: 'regular', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.otf', + weight: 'medium', + style: 'normal', + }, + ], + }, + body: { + name: 'SB Sans Text', + fonts: [ + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.otf', + weight: 'semibold', + style: 'normal', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.otf', + weight: 'regular', + style: 'italic', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.otf', + weight: 'light', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.otf', + weight: 'ultraLight', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.otf', + weight: 'light', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.otf', + weight: 'semibold', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.otf', + weight: 'regular', + style: 'normal', + }, + { + link: + 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.otf', + weight: 'regular', + style: 'italic', + }, + { + link: 'https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.otf', + weight: 'medium', + style: 'normal', + }, + ], + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/meta.ts new file mode 100644 index 0000000000..0d27a0d798 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/meta.ts @@ -0,0 +1,36 @@ +import { TokenType } from '../../../types'; + +export const fontFamilyTokens: Array = [ + { + type: 'fontFamily', + name: 'display', + tags: ['display'], + displayName: 'fontFamilyDisplay', + description: 'fontFamily display', + enabled: true, + }, + { + type: 'fontFamily', + name: 'header', + tags: ['header'], + displayName: 'fontFamilyHeader', + description: 'fontFamily header', + enabled: true, + }, + { + type: 'fontFamily', + name: 'text', + tags: ['text'], + displayName: 'fontFamilyText', + description: 'fontFamily text', + enabled: true, + }, + { + type: 'fontFamily', + name: 'body', + tags: ['body'], + displayName: 'fontFamilyBody', + description: 'fontFamily body', + enabled: true, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/web.ts new file mode 100644 index 0000000000..b006f494ca --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/default/web.ts @@ -0,0 +1,266 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { WebFontFamilyToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebFontFamilyToken => ({ + display: { + name: 'SB Sans Display', + fonts: [ + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.woff') format('woff')", + ], + fontWeight: '100', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.woff') format('woff')", + ], + fontWeight: '500', + fontStyle: 'normal', + }, + ], + }, + header: { + name: 'SB Sans Display', + fonts: [ + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Thin.woff') format('woff')", + ], + fontWeight: '100', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Bold.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Regular.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Semibold.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansDisplay.0.2.0/SBSansDisplay-Medium.woff') format('woff')", + ], + fontWeight: '500', + fontStyle: 'normal', + }, + ], + }, + text: { + name: 'SB Sans Text', + fonts: [ + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.woff') format('woff')", + ], + fontWeight: '300', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.woff') format('woff')", + ], + fontWeight: '100', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.woff') format('woff')", + ], + fontWeight: '300', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.woff') format('woff')", + ], + fontWeight: '500', + fontStyle: 'normal', + }, + ], + }, + body: { + name: 'SB Sans Text', + fonts: [ + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Light.woff') format('woff')", + ], + fontWeight: '300', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Italic.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-SemiboldItalic.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Thin.woff') format('woff')", + ], + fontWeight: '100', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Regular.woff') format('woff')", + ], + fontWeight: '400', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Semibold.woff') format('woff')", + ], + fontWeight: '600', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-LightItalic.woff') format('woff')", + ], + fontWeight: '300', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Bold.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'normal', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-BoldItalic.woff') format('woff')", + ], + fontWeight: '700', + fontStyle: 'italic', + }, + { + src: [ + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.woff2') format('woff2')", + "url('https://cdn-app.sberdevices.ru/shared-static/0.0.0/fonts/SBSansText.0.2.0/SBSansText-Medium.woff') format('woff')", + ], + fontWeight: '500', + fontStyle: 'normal', + }, + ], + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/fontFamily.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/fontFamily.ts new file mode 100644 index 0000000000..ebcf39254c --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/fontFamily.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebFontFamilyToken, IOSFontFamilyToken, AndroidFontFamilyToken } from './types'; + +export type FontFamilyPlatforms = Platforms; + +export class WebFontFamily extends PlatformToken { + public setValue(value: WebFontFamilyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class IOSFontFamily extends PlatformToken { + public setValue(value: IOSFontFamilyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class AndroidFontFamily extends PlatformToken { + public setValue(value: AndroidFontFamilyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class FontFamilyToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'fontFamily', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/index.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/index.ts new file mode 100644 index 0000000000..82faf2b898 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/index.ts @@ -0,0 +1,3 @@ +export * from './fontFamily'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/fontFamily/types.ts b/website/plasma-theme-builder/src/_new/tokens/fontFamily/types.ts new file mode 100644 index 0000000000..e18eb3e3e7 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/fontFamily/types.ts @@ -0,0 +1,65 @@ +/* WEB */ + +export type WebFontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; + +export type WebFontStyle = 'normal' | 'italic'; + +export interface WebFont { + src: Array; + fontWeight: WebFontWeight; + fontStyle: WebFontStyle; +} + +export interface WebFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} + +/* IOS */ + +export type IOSFontWeight = + | 'black' + | 'bold' + | 'heavy' + | 'light' + | 'medium' + | 'regular' + | 'semibold' + | 'thin' + | 'ultraLight'; + +export type IOSFontStyle = 'normal' | 'italic'; + +export interface IOSFont { + link: string; + weight: IOSFontWeight; + style: IOSFontStyle; +} + +export interface IOSFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} + +/* ANDROID */ + +export type AndroidFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + +export type AndroidFontStyle = 'normal' | 'italic'; + +export interface AndroidFont { + link: string; + fontWeight: AndroidFontWeight; + fontStyle: AndroidFontStyle; +} + +export interface AndroidFontFamilyToken { + [k: string]: { + name: string; + fonts: Array; + }; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/creators.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/creators.ts new file mode 100644 index 0000000000..0e4eea406b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/creators.ts @@ -0,0 +1,84 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidGradient, GradientToken, IOSGradient, WebGradient } from './gradient'; +import { gradientTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultGradientTokens = (config: ThemeConfig) => + gradientTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebGradient(web), + ios: new IOSGradient(ios), + android: new AndroidGradient(android), + }; + + return new GradientToken(token, values); + }); + +// INFO: Данный метод нужен для того, чтобы на момент формирования инстанса класса Theme +// не добавлять технические токены состояний active / hover в память объекта, +// т.к. они никак не используются в визуальном интефрейсе +const removeHoverAndActiveTokens = (token: TokenType) => + !token.name.includes('-hover') && !token.name.includes('-active'); + +export const createGradientTokens = (tokens: Array, platforms: PlatformsVariations['gradient']) => + tokens.filter(removeHoverAndActiveTokens).map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebGradient(web), + ios: new IOSGradient(ios), + android: new AndroidGradient(android), + }; + + return new GradientToken(token, values); + }); + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const createMockGradientTokens = () => { + const token = { + displayName: 'gradientName', + enabled: true, + name: 'gradient.name', + tags: ['gradient', 'name'], + description: 'Description', + }; + + const values = { + web: new WebGradient([]), + ios: new IOSGradient([ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ]), + android: new AndroidGradient([ + { + kind: 'linear', + angle: 90, + colors: [], + locations: [], + }, + ]), + }; + + const gradient = new GradientToken(token, values); + + return [gradient]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/default/android.ts new file mode 100644 index 0000000000..85572e7ed4 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/default/android.ts @@ -0,0 +1,966 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidGradientToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidGradientToken => ({ + 'dark.text.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/default/ios.ts new file mode 100644 index 0000000000..e5bb5fdfd3 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/default/ios.ts @@ -0,0 +1,966 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { IOSGradientToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSGradientToken => ({ + 'dark.text.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.text.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.default.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-dark.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.on-light.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.surface.inverse.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'dark.outline.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.text.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.default.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-dark.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.on-light.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.surface.inverse.transparent-promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.default.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-dark.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.on-light.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.accent-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.transparent-accent-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.promo-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], + 'light.outline.inverse.promo-minor-gradient': [ + { + kind: 'linear', + locations: [0, 1], + colors: ['#FFFFFF', '#000000'], + angle: 90, + }, + ], +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/default/meta.ts new file mode 100644 index 0000000000..3af4f769bb --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/default/meta.ts @@ -0,0 +1,964 @@ +import { TokenType } from '../../../types'; + +export const gradientTokens: Array = [ + { + type: 'gradient', + name: 'dark.text.default.accent-gradient', + tags: ['dark', 'text', 'default', 'accent-gradient'], + displayName: 'textAccentGradient', + description: 'Акцентный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.default.accent-minor-gradient', + tags: ['dark', 'text', 'default', 'accent-minor-gradient'], + displayName: 'textAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.default.promo-gradient', + tags: ['dark', 'text', 'default', 'promo-gradient'], + displayName: 'textPromoGradient', + description: 'Промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.default.promo-minor-gradient', + tags: ['dark', 'text', 'default', 'promo-minor-gradient'], + displayName: 'textPromoMinorGradient', + description: 'Минорный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-dark.accent-gradient', + tags: ['dark', 'text', 'on-dark', 'accent-gradient'], + displayName: 'onDarkTextAccentGradient', + description: 'Акцентный цвет с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-dark.accent-minor-gradient', + tags: ['dark', 'text', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkTextAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-dark.promo-gradient', + tags: ['dark', 'text', 'on-dark', 'promo-gradient'], + displayName: 'onDarkTextPromoGradient', + description: 'Промо цвет на темном фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-dark.promo-minor-gradient', + tags: ['dark', 'text', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkTextPromoMinorGradient', + description: 'Минорный промо цвет на темном фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-light.accent-gradient', + tags: ['dark', 'text', 'on-light', 'accent-gradient'], + displayName: 'onLightTextAccentGradient', + description: 'Акцентный цвет с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-light.accent-minor-gradient', + tags: ['dark', 'text', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightTextAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-light.promo-gradient', + tags: ['dark', 'text', 'on-light', 'promo-gradient'], + displayName: 'onLightTextPromoGradient', + description: 'Промо цвет на светлом фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.on-light.promo-minor-gradient', + tags: ['dark', 'text', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightTextPromoMinorGradient', + description: 'Минорный промо цвет на светлом фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.inverse.accent-gradient', + tags: ['dark', 'text', 'inverse', 'accent-gradient'], + displayName: 'inverseTextAccentGradient', + description: 'Инвертированный акцентный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.inverse.accent-minor-gradient', + tags: ['dark', 'text', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseTextAccentMinorGradient', + description: 'Инвертированный акцентный минорный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.inverse.promo-gradient', + tags: ['dark', 'text', 'inverse', 'promo-gradient'], + displayName: 'inverseTextPromoGradient', + description: 'Инвертированный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.text.inverse.promo-minor-gradient', + tags: ['dark', 'text', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseTextPromoMinorGradient', + description: 'Инвертированный минорный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.accent-gradient', + tags: ['dark', 'surface', 'default', 'accent-gradient'], + displayName: 'surfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.accent-minor-gradient', + tags: ['dark', 'surface', 'default', 'accent-minor-gradient'], + displayName: 'surfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.transparent-accent-gradient', + tags: ['dark', 'surface', 'default', 'transparent-accent-gradient'], + displayName: 'surfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.promo-gradient', + tags: ['dark', 'surface', 'default', 'promo-gradient'], + displayName: 'surfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.promo-minor-gradient', + tags: ['dark', 'surface', 'default', 'promo-minor-gradient'], + displayName: 'surfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.default.transparent-promo-gradient', + tags: ['dark', 'surface', 'default', 'transparent-promo-gradient'], + displayName: 'surfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.accent-gradient', + tags: ['dark', 'surface', 'on-dark', 'accent-gradient'], + displayName: 'onDarkSurfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.accent-minor-gradient', + tags: ['dark', 'surface', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkSurfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.transparent-accent-gradient', + tags: ['dark', 'surface', 'on-dark', 'transparent-accent-gradient'], + displayName: 'onDarkSurfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.promo-gradient', + tags: ['dark', 'surface', 'on-dark', 'promo-gradient'], + displayName: 'onDarkSurfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.promo-minor-gradient', + tags: ['dark', 'surface', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkSurfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-dark.transparent-promo-gradient', + tags: ['dark', 'surface', 'on-dark', 'transparent-promo-gradient'], + displayName: 'onDarkSurfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.accent-gradient', + tags: ['dark', 'surface', 'on-light', 'accent-gradient'], + displayName: 'onLightSurfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.accent-minor-gradient', + tags: ['dark', 'surface', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightSurfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.transparent-accent-gradient', + tags: ['dark', 'surface', 'on-light', 'transparent-accent-gradient'], + displayName: 'onLightSurfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.promo-gradient', + tags: ['dark', 'surface', 'on-light', 'promo-gradient'], + displayName: 'onLightSurfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.promo-minor-gradient', + tags: ['dark', 'surface', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightSurfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.on-light.transparent-promo-gradient', + tags: ['dark', 'surface', 'on-light', 'transparent-promo-gradient'], + displayName: 'onLightSurfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.accent-gradient', + tags: ['dark', 'surface', 'inverse', 'accent-gradient'], + displayName: 'inverseSurfaceAccentGradient', + description: 'Инвертированный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.accent-minor-gradient', + tags: ['dark', 'surface', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseSurfaceAccentMinorGradient', + description: 'Инвертированный акцентный минорный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.transparent-accent-gradient', + tags: ['dark', 'surface', 'inverse', 'transparent-accent-gradient'], + displayName: 'inverseSurfaceTransparentAccentGradient', + description: 'Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.promo-gradient', + tags: ['dark', 'surface', 'inverse', 'promo-gradient'], + displayName: 'inverseSurfacePromoGradient', + description: 'Инвертированный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.promo-minor-gradient', + tags: ['dark', 'surface', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseSurfacePromoMinorGradient', + description: 'Инвертированный минорный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.surface.inverse.transparent-promo-gradient', + tags: ['dark', 'surface', 'inverse', 'transparent-promo-gradient'], + displayName: 'inverseSurfaceTransparentPromoGradient', + description: 'Инвертированный прозрачный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.default.accent-gradient', + tags: ['dark', 'outline', 'default', 'accent-gradient'], + displayName: 'outlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.default.accent-minor-gradient', + tags: ['dark', 'outline', 'default', 'accent-minor-gradient'], + displayName: 'outlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.default.transparent-accent-gradient', + tags: ['dark', 'outline', 'default', 'transparent-accent-gradient'], + displayName: 'outlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.default.promo-gradient', + tags: ['dark', 'outline', 'default', 'promo-gradient'], + displayName: 'outlinePromoGradient', + description: 'Промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.default.promo-minor-gradient', + tags: ['dark', 'outline', 'default', 'promo-minor-gradient'], + displayName: 'outlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-dark.accent-gradient', + tags: ['dark', 'outline', 'on-dark', 'accent-gradient'], + displayName: 'onDarkOutlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-dark.accent-minor-gradient', + tags: ['dark', 'outline', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkOutlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-dark.transparent-accent-gradient', + tags: ['dark', 'outline', 'on-dark', 'transparent-accent-gradient'], + displayName: 'onDarkOutlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-dark.promo-gradient', + tags: ['dark', 'outline', 'on-dark', 'promo-gradient'], + displayName: 'onDarkOutlinePromoGradient', + description: 'Промо цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-dark.promo-minor-gradient', + tags: ['dark', 'outline', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkOutlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-light.accent-gradient', + tags: ['dark', 'outline', 'on-light', 'accent-gradient'], + displayName: 'onLightOutlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-light.accent-minor-gradient', + tags: ['dark', 'outline', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightOutlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-light.transparent-accent-gradient', + tags: ['dark', 'outline', 'on-light', 'transparent-accent-gradient'], + displayName: 'onLightOutlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-light.promo-gradient', + tags: ['dark', 'outline', 'on-light', 'promo-gradient'], + displayName: 'onLightOutlinePromoGradient', + description: 'Промо цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.on-light.promo-minor-gradient', + tags: ['dark', 'outline', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightOutlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.inverse.accent-gradient', + tags: ['dark', 'outline', 'inverse', 'accent-gradient'], + displayName: 'inverseOutlineAccentGradient', + description: 'Инвертированный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.inverse.accent-minor-gradient', + tags: ['dark', 'outline', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseOutlineAccentMinorGradient', + description: 'Инвертированный акцентный минорный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.inverse.transparent-accent-gradient', + tags: ['dark', 'outline', 'inverse', 'transparent-accent-gradient'], + displayName: 'inverseOutlineTransparentAccentGradient', + description: 'Прозрачный инвертированный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.inverse.promo-gradient', + tags: ['dark', 'outline', 'inverse', 'promo-gradient'], + displayName: 'inverseOutlinePromoGradient', + description: 'Инвертированный промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'dark.outline.inverse.promo-minor-gradient', + tags: ['dark', 'outline', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseOutlinePromoMinorGradient', + description: 'Инвертированный минорный промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.default.accent-gradient', + tags: ['light', 'text', 'default', 'accent-gradient'], + displayName: 'textAccentGradient', + description: 'Акцентный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.default.accent-minor-gradient', + tags: ['light', 'text', 'default', 'accent-minor-gradient'], + displayName: 'textAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.default.promo-gradient', + tags: ['light', 'text', 'default', 'promo-gradient'], + displayName: 'textPromoGradient', + description: 'Промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.default.promo-minor-gradient', + tags: ['light', 'text', 'default', 'promo-minor-gradient'], + displayName: 'textPromoMinorGradient', + description: 'Минорный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-dark.accent-gradient', + tags: ['light', 'text', 'on-dark', 'accent-gradient'], + displayName: 'onDarkTextAccentGradient', + description: 'Акцентный цвет с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-dark.accent-minor-gradient', + tags: ['light', 'text', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkTextAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-dark.promo-gradient', + tags: ['light', 'text', 'on-dark', 'promo-gradient'], + displayName: 'onDarkTextPromoGradient', + description: 'Промо цвет на темном фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-dark.promo-minor-gradient', + tags: ['light', 'text', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkTextPromoMinorGradient', + description: 'Минорный промо цвет на темном фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-light.accent-gradient', + tags: ['light', 'text', 'on-light', 'accent-gradient'], + displayName: 'onLightTextAccentGradient', + description: 'Акцентный цвет с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-light.accent-minor-gradient', + tags: ['light', 'text', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightTextAccentMinorGradient', + description: 'Акцентный минорный цвет с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-light.promo-gradient', + tags: ['light', 'text', 'on-light', 'promo-gradient'], + displayName: 'onLightTextPromoGradient', + description: 'Промо цвет на светлом фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.on-light.promo-minor-gradient', + tags: ['light', 'text', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightTextPromoMinorGradient', + description: 'Минорный промо цвет на светлом фоне с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.inverse.accent-gradient', + tags: ['light', 'text', 'inverse', 'accent-gradient'], + displayName: 'inverseTextAccentGradient', + description: 'Инвертированный акцентный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.inverse.accent-minor-gradient', + tags: ['light', 'text', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseTextAccentMinorGradient', + description: 'Инвертированный акцентный минорный цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.inverse.promo-gradient', + tags: ['light', 'text', 'inverse', 'promo-gradient'], + displayName: 'inverseTextPromoGradient', + description: 'Инвертированный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.text.inverse.promo-minor-gradient', + tags: ['light', 'text', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseTextPromoMinorGradient', + description: 'Инвертированный минорный промо цвет с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.accent-gradient', + tags: ['light', 'surface', 'default', 'accent-gradient'], + displayName: 'surfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.accent-minor-gradient', + tags: ['light', 'surface', 'default', 'accent-minor-gradient'], + displayName: 'surfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.transparent-accent-gradient', + tags: ['light', 'surface', 'default', 'transparent-accent-gradient'], + displayName: 'surfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.promo-gradient', + tags: ['light', 'surface', 'default', 'promo-gradient'], + displayName: 'surfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.promo-minor-gradient', + tags: ['light', 'surface', 'default', 'promo-minor-gradient'], + displayName: 'surfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.default.transparent-promo-gradient', + tags: ['light', 'surface', 'default', 'transparent-promo-gradient'], + displayName: 'surfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.accent-gradient', + tags: ['light', 'surface', 'on-dark', 'accent-gradient'], + displayName: 'onDarkSurfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.accent-minor-gradient', + tags: ['light', 'surface', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkSurfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.transparent-accent-gradient', + tags: ['light', 'surface', 'on-dark', 'transparent-accent-gradient'], + displayName: 'onDarkSurfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.promo-gradient', + tags: ['light', 'surface', 'on-dark', 'promo-gradient'], + displayName: 'onDarkSurfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.promo-minor-gradient', + tags: ['light', 'surface', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkSurfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-dark.transparent-promo-gradient', + tags: ['light', 'surface', 'on-dark', 'transparent-promo-gradient'], + displayName: 'onDarkSurfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.accent-gradient', + tags: ['light', 'surface', 'on-light', 'accent-gradient'], + displayName: 'onLightSurfaceAccentGradient', + description: 'Акцентный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.accent-minor-gradient', + tags: ['light', 'surface', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightSurfaceAccentMinorGradient', + description: 'Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.transparent-accent-gradient', + tags: ['light', 'surface', 'on-light', 'transparent-accent-gradient'], + displayName: 'onLightSurfaceTransparentAccentGradient', + description: 'Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.promo-gradient', + tags: ['light', 'surface', 'on-light', 'promo-gradient'], + displayName: 'onLightSurfacePromoGradient', + description: 'Промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.promo-minor-gradient', + tags: ['light', 'surface', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightSurfacePromoMinorGradient', + description: 'Минорный промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.on-light.transparent-promo-gradient', + tags: ['light', 'surface', 'on-light', 'transparent-promo-gradient'], + displayName: 'onLightSurfaceTransparentPromoGradient', + description: 'Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.accent-gradient', + tags: ['light', 'surface', 'inverse', 'accent-gradient'], + displayName: 'inverseSurfaceAccentGradient', + description: 'Инвертированный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.accent-minor-gradient', + tags: ['light', 'surface', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseSurfaceAccentMinorGradient', + description: 'Инвертированный акцентный минорный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.transparent-accent-gradient', + tags: ['light', 'surface', 'inverse', 'transparent-accent-gradient'], + displayName: 'inverseSurfaceTransparentAccentGradient', + description: 'Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.promo-gradient', + tags: ['light', 'surface', 'inverse', 'promo-gradient'], + displayName: 'inverseSurfacePromoGradient', + description: 'Инвертированный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.promo-minor-gradient', + tags: ['light', 'surface', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseSurfacePromoMinorGradient', + description: 'Инвертированный минорный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.surface.inverse.transparent-promo-gradient', + tags: ['light', 'surface', 'inverse', 'transparent-promo-gradient'], + displayName: 'inverseSurfaceTransparentPromoGradient', + description: 'Инвертированный прозрачный промо фон поверхности/контрола с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.default.accent-gradient', + tags: ['light', 'outline', 'default', 'accent-gradient'], + displayName: 'outlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.default.accent-minor-gradient', + tags: ['light', 'outline', 'default', 'accent-minor-gradient'], + displayName: 'outlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.default.transparent-accent-gradient', + tags: ['light', 'outline', 'default', 'transparent-accent-gradient'], + displayName: 'outlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.default.promo-gradient', + tags: ['light', 'outline', 'default', 'promo-gradient'], + displayName: 'outlinePromoGradient', + description: 'Промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.default.promo-minor-gradient', + tags: ['light', 'outline', 'default', 'promo-minor-gradient'], + displayName: 'outlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-dark.accent-gradient', + tags: ['light', 'outline', 'on-dark', 'accent-gradient'], + displayName: 'onDarkOutlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-dark.accent-minor-gradient', + tags: ['light', 'outline', 'on-dark', 'accent-minor-gradient'], + displayName: 'onDarkOutlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-dark.transparent-accent-gradient', + tags: ['light', 'outline', 'on-dark', 'transparent-accent-gradient'], + displayName: 'onDarkOutlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-dark.promo-gradient', + tags: ['light', 'outline', 'on-dark', 'promo-gradient'], + displayName: 'onDarkOutlinePromoGradient', + description: 'Промо цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-dark.promo-minor-gradient', + tags: ['light', 'outline', 'on-dark', 'promo-minor-gradient'], + displayName: 'onDarkOutlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом на темном фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-light.accent-gradient', + tags: ['light', 'outline', 'on-light', 'accent-gradient'], + displayName: 'onLightOutlineAccentGradient', + description: 'Акцентный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-light.accent-minor-gradient', + tags: ['light', 'outline', 'on-light', 'accent-minor-gradient'], + displayName: 'onLightOutlineAccentMinorGradient', + description: 'Акцентный минорный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-light.transparent-accent-gradient', + tags: ['light', 'outline', 'on-light', 'transparent-accent-gradient'], + displayName: 'onLightOutlineTransparentAccentGradient', + description: 'Прозрачный акцентный цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-light.promo-gradient', + tags: ['light', 'outline', 'on-light', 'promo-gradient'], + displayName: 'onLightOutlinePromoGradient', + description: 'Промо цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.on-light.promo-minor-gradient', + tags: ['light', 'outline', 'on-light', 'promo-minor-gradient'], + displayName: 'onLightOutlinePromoMinorGradient', + description: 'Минорный промо цвет обводки с градиентом на светлом фоне', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.inverse.accent-gradient', + tags: ['light', 'outline', 'inverse', 'accent-gradient'], + displayName: 'inverseOutlineAccentGradient', + description: 'Инвертированный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.inverse.accent-minor-gradient', + tags: ['light', 'outline', 'inverse', 'accent-minor-gradient'], + displayName: 'inverseOutlineAccentMinorGradient', + description: 'Инвертированный акцентный минорный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.inverse.transparent-accent-gradient', + tags: ['light', 'outline', 'inverse', 'transparent-accent-gradient'], + displayName: 'inverseOutlineTransparentAccentGradient', + description: 'Прозрачный инвертированный акцентный цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.inverse.promo-gradient', + tags: ['light', 'outline', 'inverse', 'promo-gradient'], + displayName: 'inverseOutlinePromoGradient', + description: 'Инвертированный промо цвет обводки с градиентом', + enabled: false, + }, + { + type: 'gradient', + name: 'light.outline.inverse.promo-minor-gradient', + tags: ['light', 'outline', 'inverse', 'promo-minor-gradient'], + displayName: 'inverseOutlinePromoMinorGradient', + description: 'Инвертированный минорный промо цвет обводки с градиентом', + enabled: false, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/default/web.ts new file mode 100644 index 0000000000..d340416e74 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/default/web.ts @@ -0,0 +1,126 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { WebGradientToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebGradientToken => ({ + 'dark.text.default.accent-gradient': ['#FFFFFF'], + 'dark.text.default.accent-minor-gradient': ['#FFFFFF'], + 'dark.text.default.promo-gradient': ['#FFFFFF'], + 'dark.text.default.promo-minor-gradient': ['#FFFFFF'], + 'dark.text.on-dark.accent-gradient': ['#FFFFFF'], + 'dark.text.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'dark.text.on-dark.promo-gradient': ['#FFFFFF'], + 'dark.text.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'dark.text.on-light.accent-gradient': ['#FFFFFF'], + 'dark.text.on-light.accent-minor-gradient': ['#FFFFFF'], + 'dark.text.on-light.promo-gradient': ['#FFFFFF'], + 'dark.text.on-light.promo-minor-gradient': ['#FFFFFF'], + 'dark.text.inverse.accent-gradient': ['#FFFFFF'], + 'dark.text.inverse.accent-minor-gradient': ['#FFFFFF'], + 'dark.text.inverse.promo-gradient': ['#FFFFFF'], + 'dark.text.inverse.promo-minor-gradient': ['#FFFFFF'], + 'dark.surface.default.accent-gradient': ['#FFFFFF'], + 'dark.surface.default.accent-minor-gradient': ['#FFFFFF'], + 'dark.surface.default.transparent-accent-gradient': ['#FFFFFF'], + 'dark.surface.default.promo-gradient': ['#FFFFFF'], + 'dark.surface.default.promo-minor-gradient': ['#FFFFFF'], + 'dark.surface.default.transparent-promo-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.accent-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.transparent-accent-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.promo-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'dark.surface.on-dark.transparent-promo-gradient': ['#FFFFFF'], + 'dark.surface.on-light.accent-gradient': ['#FFFFFF'], + 'dark.surface.on-light.accent-minor-gradient': ['#FFFFFF'], + 'dark.surface.on-light.transparent-accent-gradient': ['#FFFFFF'], + 'dark.surface.on-light.promo-gradient': ['#FFFFFF'], + 'dark.surface.on-light.promo-minor-gradient': ['#FFFFFF'], + 'dark.surface.on-light.transparent-promo-gradient': ['#FFFFFF'], + 'dark.surface.inverse.accent-gradient': ['#FFFFFF'], + 'dark.surface.inverse.accent-minor-gradient': ['#FFFFFF'], + 'dark.surface.inverse.transparent-accent-gradient': ['#FFFFFF'], + 'dark.surface.inverse.promo-gradient': ['#FFFFFF'], + 'dark.surface.inverse.promo-minor-gradient': ['#FFFFFF'], + 'dark.surface.inverse.transparent-promo-gradient': ['#FFFFFF'], + 'dark.outline.default.accent-gradient': ['#FFFFFF'], + 'dark.outline.default.accent-minor-gradient': ['#FFFFFF'], + 'dark.outline.default.transparent-accent-gradient': ['#FFFFFF'], + 'dark.outline.default.promo-gradient': ['#FFFFFF'], + 'dark.outline.default.promo-minor-gradient': ['#FFFFFF'], + 'dark.outline.on-dark.accent-gradient': ['#FFFFFF'], + 'dark.outline.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'dark.outline.on-dark.transparent-accent-gradient': ['#FFFFFF'], + 'dark.outline.on-dark.promo-gradient': ['#FFFFFF'], + 'dark.outline.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'dark.outline.on-light.accent-gradient': ['#FFFFFF'], + 'dark.outline.on-light.accent-minor-gradient': ['#FFFFFF'], + 'dark.outline.on-light.transparent-accent-gradient': ['#FFFFFF'], + 'dark.outline.on-light.promo-gradient': ['#FFFFFF'], + 'dark.outline.on-light.promo-minor-gradient': ['#FFFFFF'], + 'dark.outline.inverse.accent-gradient': ['#FFFFFF'], + 'dark.outline.inverse.accent-minor-gradient': ['#FFFFFF'], + 'dark.outline.inverse.transparent-accent-gradient': ['#FFFFFF'], + 'dark.outline.inverse.promo-gradient': ['#FFFFFF'], + 'dark.outline.inverse.promo-minor-gradient': ['#FFFFFF'], + 'light.text.default.accent-gradient': ['#FFFFFF'], + 'light.text.default.accent-minor-gradient': ['#FFFFFF'], + 'light.text.default.promo-gradient': ['#FFFFFF'], + 'light.text.default.promo-minor-gradient': ['#FFFFFF'], + 'light.text.on-dark.accent-gradient': ['#FFFFFF'], + 'light.text.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'light.text.on-dark.promo-gradient': ['#FFFFFF'], + 'light.text.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'light.text.on-light.accent-gradient': ['#FFFFFF'], + 'light.text.on-light.accent-minor-gradient': ['#FFFFFF'], + 'light.text.on-light.promo-gradient': ['#FFFFFF'], + 'light.text.on-light.promo-minor-gradient': ['#FFFFFF'], + 'light.text.inverse.accent-gradient': ['#FFFFFF'], + 'light.text.inverse.accent-minor-gradient': ['#FFFFFF'], + 'light.text.inverse.promo-gradient': ['#FFFFFF'], + 'light.text.inverse.promo-minor-gradient': ['#FFFFFF'], + 'light.surface.default.accent-gradient': ['#FFFFFF'], + 'light.surface.default.accent-minor-gradient': ['#FFFFFF'], + 'light.surface.default.transparent-accent-gradient': ['#FFFFFF'], + 'light.surface.default.promo-gradient': ['#FFFFFF'], + 'light.surface.default.promo-minor-gradient': ['#FFFFFF'], + 'light.surface.default.transparent-promo-gradient': ['#FFFFFF'], + 'light.surface.on-dark.accent-gradient': ['#FFFFFF'], + 'light.surface.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'light.surface.on-dark.transparent-accent-gradient': ['#FFFFFF'], + 'light.surface.on-dark.promo-gradient': ['#FFFFFF'], + 'light.surface.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'light.surface.on-dark.transparent-promo-gradient': ['#FFFFFF'], + 'light.surface.on-light.accent-gradient': ['#FFFFFF'], + 'light.surface.on-light.accent-minor-gradient': ['#FFFFFF'], + 'light.surface.on-light.transparent-accent-gradient': ['#FFFFFF'], + 'light.surface.on-light.promo-gradient': ['#FFFFFF'], + 'light.surface.on-light.promo-minor-gradient': ['#FFFFFF'], + 'light.surface.on-light.transparent-promo-gradient': ['#FFFFFF'], + 'light.surface.inverse.accent-gradient': ['#FFFFFF'], + 'light.surface.inverse.accent-minor-gradient': ['#FFFFFF'], + 'light.surface.inverse.transparent-accent-gradient': ['#FFFFFF'], + 'light.surface.inverse.promo-gradient': ['#FFFFFF'], + 'light.surface.inverse.promo-minor-gradient': ['#FFFFFF'], + 'light.surface.inverse.transparent-promo-gradient': ['#FFFFFF'], + 'light.outline.default.accent-gradient': ['#FFFFFF'], + 'light.outline.default.accent-minor-gradient': ['#FFFFFF'], + 'light.outline.default.transparent-accent-gradient': ['#FFFFFF'], + 'light.outline.default.promo-gradient': ['#FFFFFF'], + 'light.outline.default.promo-minor-gradient': ['#FFFFFF'], + 'light.outline.on-dark.accent-gradient': ['#FFFFFF'], + 'light.outline.on-dark.accent-minor-gradient': ['#FFFFFF'], + 'light.outline.on-dark.transparent-accent-gradient': ['#FFFFFF'], + 'light.outline.on-dark.promo-gradient': ['#FFFFFF'], + 'light.outline.on-dark.promo-minor-gradient': ['#FFFFFF'], + 'light.outline.on-light.accent-gradient': ['#FFFFFF'], + 'light.outline.on-light.accent-minor-gradient': ['#FFFFFF'], + 'light.outline.on-light.transparent-accent-gradient': ['#FFFFFF'], + 'light.outline.on-light.promo-gradient': ['#FFFFFF'], + 'light.outline.on-light.promo-minor-gradient': ['#FFFFFF'], + 'light.outline.inverse.accent-gradient': ['#FFFFFF'], + 'light.outline.inverse.accent-minor-gradient': ['#FFFFFF'], + 'light.outline.inverse.transparent-accent-gradient': ['#FFFFFF'], + 'light.outline.inverse.promo-gradient': ['#FFFFFF'], + 'light.outline.inverse.promo-minor-gradient': ['#FFFFFF'], +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/gradient.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/gradient.ts new file mode 100644 index 0000000000..759e5e0487 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/gradient.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebGradientToken, IOSGradientToken, AndroidGradientToken } from './types'; + +export type GradientPlatforms = Platforms; + +export class WebGradient extends PlatformToken { + public setValue(value: WebGradientToken[string]) { + this.value = value; + } +} + +export class IOSGradient extends PlatformToken { + public setValue(value: IOSGradientToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class AndroidGradient extends PlatformToken { + public setValue(value: AndroidGradientToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class GradientToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'gradient', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/index.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/index.ts new file mode 100644 index 0000000000..85b2edd44b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/index.ts @@ -0,0 +1,3 @@ +export * from './gradient'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/gradient/types.ts b/website/plasma-theme-builder/src/_new/tokens/gradient/types.ts new file mode 100644 index 0000000000..0a331e089a --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/gradient/types.ts @@ -0,0 +1,78 @@ +/* WEB */ + +export interface WebGradientToken { + [k: string]: Array; +} + +/* IOS */ + +export interface IOSLinearGradient { + kind: 'linear'; + locations: Array; + colors: Array; + angle: number; +} + +export interface IOSRadialGradient { + kind: 'radial'; + locations: Array; + colors: Array; + startPointX: number; + startPointY: number; + endPointX: number; + endPointY: number; +} + +export interface IOSAngularGradient { + kind: 'angular'; + locations: Array; + colors: Array; + startAngle: number; + endAngle: number; + centerX: number; + centerY: number; +} + +export interface IOSColorGradient { + kind: 'color'; + background: string; +} + +export interface IOSGradientToken { + [k: string]: Array; +} + +/* ANDROID */ + +export interface AndroidLinearGradient { + kind: 'linear'; + locations: Array; + colors: Array; + angle: number; +} + +export interface AndroidRadialGradient { + kind: 'radial'; + locations: Array; + colors: Array; + centerX: number; + centerY: number; + radius: number; +} + +export interface AndroidAngularGradient { + kind: 'angular'; + locations: Array; + colors: Array; + centerX: number; + centerY: number; +} + +export interface AndroidColorGradient { + kind: 'color'; + background: string; +} + +export interface AndroidGradientToken { + [k: string]: Array; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/index.ts b/website/plasma-theme-builder/src/_new/tokens/index.ts new file mode 100644 index 0000000000..13da6ede0c --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/index.ts @@ -0,0 +1,6 @@ +export * from './color'; +export * from './fontFamily'; +export * from './gradient'; +export * from './shadow'; +export * from './shape'; +export * from './typography'; diff --git a/website/plasma-theme-builder/src/_new/tokens/platformToken.ts b/website/plasma-theme-builder/src/_new/tokens/platformToken.ts new file mode 100644 index 0000000000..f51a6282e1 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/platformToken.ts @@ -0,0 +1,19 @@ +import { Platform, Platforms } from '../types'; + +export type PlatformClasses = { + [key in Platform]: PlatformToken; +}; + +export abstract class PlatformToken { + protected value: T[string]; + + constructor(value: T[string]) { + this.value = value; + } + + public getValue(): T[string] { + return this.value; + } + + abstract setValue(value: T[string]): void; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/creators.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/creators.ts new file mode 100644 index 0000000000..dc6b4b1513 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/creators.ts @@ -0,0 +1,72 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidShadow, ShadowToken, IOSShadow, WebShadow } from './shadow'; +import { shadowTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultShadowTokens = (config: ThemeConfig) => + shadowTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebShadow(web), + ios: new IOSShadow(ios), + android: new AndroidShadow(android), + }; + + return new ShadowToken(token, values); + }); + +export const createShadowTokens = (tokens: Array, platforms: PlatformsVariations['shadow']) => + tokens.map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebShadow(web), + ios: new IOSShadow(ios), + android: new AndroidShadow(android), + }; + + return new ShadowToken(token, values); + }); + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const createMockShadowTokens = () => { + const token = { + displayName: 'shadowName', + enabled: true, + name: 'shadow.name', + tags: ['shadow', 'name'], + description: 'Description', + }; + + const values = { + web: new WebShadow([]), + ios: new IOSShadow({ + color: '#FFF', + offset: { width: 0, height: 0 }, + opacity: 0, + radius: 9, + }), + android: new AndroidShadow({ + color: '#FFF', + elevation: 0, + }), + }; + + const shadow = new ShadowToken(token, values); + + return [shadow]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/default/android.ts new file mode 100644 index 0000000000..c1bd1c4c40 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/default/android.ts @@ -0,0 +1,54 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidShadowToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidShadowToken => ({ + 'down.soft.s': { + color: '#000000', + elevation: 4, + }, + 'down.soft.m': { + color: '#000000', + elevation: 4, + }, + 'down.soft.l': { + color: '#000000', + elevation: 4, + }, + 'down.hard.s': { + color: '#000000', + elevation: 4, + }, + 'down.hard.m': { + color: '#000000', + elevation: 4, + }, + 'down.hard.l': { + color: '#000000', + elevation: 4, + }, + 'up.soft.s': { + color: '#000000', + elevation: 4, + }, + 'up.soft.m': { + color: '#000000', + elevation: 4, + }, + 'up.soft.l': { + color: '#000000', + elevation: 4, + }, + 'up.hard.s': { + color: '#000000', + elevation: 4, + }, + 'up.hard.m': { + color: '#000000', + elevation: 4, + }, + 'up.hard.l': { + color: '#000000', + elevation: 4, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/default/ios.ts new file mode 100644 index 0000000000..85cab0e445 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/default/ios.ts @@ -0,0 +1,114 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { IOSShadowToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSShadowToken => ({ + 'down.soft.s': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'down.soft.m': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'down.soft.l': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'down.hard.s': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'down.hard.m': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'down.hard.l': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.soft.s': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.soft.m': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.soft.l': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.hard.s': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.hard.m': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, + 'up.hard.l': { + color: '#000000', + offset: { + width: 0, + height: 5, + }, + opacity: 0.5, + radius: 1.5, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/default/meta.ts new file mode 100644 index 0000000000..d70893f2a5 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/default/meta.ts @@ -0,0 +1,100 @@ +import { TokenType } from '../../../types'; + +export const shadowTokens: Array = [ + { + type: 'shadow', + name: 'down.soft.s', + tags: ['down', 'soft', 's'], + displayName: 'shadowDownSoftS', + description: 'shadow down soft s', + enabled: true, + }, + { + type: 'shadow', + name: 'down.soft.m', + tags: ['down', 'soft', 'm'], + displayName: 'shadowDownSoftM', + description: 'shadow down soft m', + enabled: true, + }, + { + type: 'shadow', + name: 'down.soft.l', + tags: ['down', 'soft', 'l'], + displayName: 'shadowDownSoftL', + description: 'shadow down soft l', + enabled: true, + }, + { + type: 'shadow', + name: 'down.hard.s', + tags: ['down', 'hard', 's'], + displayName: 'shadowDownHardS', + description: 'shadow down hard s', + enabled: true, + }, + { + type: 'shadow', + name: 'down.hard.m', + tags: ['down', 'hard', 'm'], + displayName: 'shadowDownHardM', + description: 'shadow down hard m', + enabled: true, + }, + { + type: 'shadow', + name: 'down.hard.l', + tags: ['down', 'hard', 'l'], + displayName: 'shadowDownHardL', + description: 'shadow down hard l', + enabled: true, + }, + { + type: 'shadow', + name: 'up.soft.s', + tags: ['up', 'soft', 's'], + displayName: 'shadowUpSoftS', + description: 'shadow up soft s', + enabled: true, + }, + { + type: 'shadow', + name: 'up.soft.m', + tags: ['up', 'soft', 'm'], + displayName: 'shadowUpSoftM', + description: 'shadow up soft m', + enabled: true, + }, + { + type: 'shadow', + name: 'up.soft.l', + tags: ['up', 'soft', 'l'], + displayName: 'shadowUpSoftL', + description: 'shadow up soft l', + enabled: true, + }, + { + type: 'shadow', + name: 'up.hard.s', + tags: ['up', 'hard', 's'], + displayName: 'shadowUpHardS', + description: 'shadow up hard s', + enabled: true, + }, + { + type: 'shadow', + name: 'up.hard.m', + tags: ['up', 'hard', 'm'], + displayName: 'shadowUpHardM', + description: 'shadow up hard m', + enabled: true, + }, + { + type: 'shadow', + name: 'up.hard.l', + tags: ['up', 'hard', 'l'], + displayName: 'shadowUpHardL', + description: 'shadow up hard l', + enabled: true, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/default/web.ts new file mode 100644 index 0000000000..3466faf0a0 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/default/web.ts @@ -0,0 +1,18 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { WebShadowToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebShadowToken => ({ + 'down.soft.s': ['0px 4px 14px -4px rgba(8, 8, 8, 0.08)', '0px 1px 4px -1px rgba(0, 0, 0, 0.04)'], + 'down.soft.m': ['0px 24px 48px -8px rgba(0, 0, 0, 0.08)'], + 'down.soft.l': ['0px 60px 112px -8px rgba(0, 0, 0, 0.08)'], + 'down.hard.s': ['0px 4px 12px -3px rgba(8, 8, 8, 0.16)', '0px 1px 4px -2px rgba(0, 0, 0, 0.08)'], + 'down.hard.m': ['0px 16px 32px -8px rgba(0, 0, 0, 0.24)'], + 'down.hard.l': ['0px 60px 112px -8px rgba(0, 0, 0, 0.40)'], + 'up.soft.s': ['0px -4px 14px -4px rgba(8, 8, 8, 0.08)', '0px -1px 4px -1px rgba(0, 0, 0, 0.03)'], + 'up.soft.m': ['0px -24px 48px -8px rgba(0, 0, 0, 0.08)'], + 'up.soft.l': ['0px -60px 112px -8px rgba(0, 0, 0, 0.08)'], + 'up.hard.s': ['0px -4px 12px -3px rgba(8, 8, 8, 0.20)', '0px -1px 4px -1px rgba(0, 0, 0, 0.03)'], + 'up.hard.m': ['0px -16px 32px -8px rgba(0, 0, 0, 0.24)'], + 'up.hard.l': ['0px -60px 112px -8px rgba(0, 0, 0, 0.40)'], +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/index.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/index.ts new file mode 100644 index 0000000000..8d63815da5 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/index.ts @@ -0,0 +1,3 @@ +export * from './shadow'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/shadow.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/shadow.ts new file mode 100644 index 0000000000..26e45946e6 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/shadow.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebShadowToken, IOSShadowToken, AndroidShadowToken } from './types'; + +export type ShadowPlatforms = Platforms; + +export class WebShadow extends PlatformToken { + public setValue(value: WebShadowToken[string]) { + this.value = value; + } +} + +export class IOSShadow extends PlatformToken { + public setValue(value: IOSShadowToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class AndroidShadow extends PlatformToken { + public setValue(value: AndroidShadowToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class ShadowToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'shadow', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/shadow/types.ts b/website/plasma-theme-builder/src/_new/tokens/shadow/types.ts new file mode 100644 index 0000000000..4d08a0347b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shadow/types.ts @@ -0,0 +1,28 @@ +/* WEB */ + +export interface WebShadowToken { + [k: string]: Array; +} + +/* IOS */ + +export interface IOSShadowToken { + [k: string]: { + color: string; + offset: { + width: number; + height: number; + }; + opacity: number; + radius: number; + }; +} + +/* ANDROID */ + +export interface AndroidShadowToken { + [k: string]: { + color: string; + elevation: number; + }; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/creators.ts b/website/plasma-theme-builder/src/_new/tokens/shape/creators.ts new file mode 100644 index 0000000000..885219e450 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/creators.ts @@ -0,0 +1,70 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidShape, ShapeToken, IOSShape, WebShape } from './shape'; +import { shapeTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultShapeTokens = (config: ThemeConfig) => + shapeTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebShape(web), + ios: new IOSShape(ios), + android: new AndroidShape(android), + }; + + return new ShapeToken(token, values); + }); + +export const createShapeTokens = (tokens: Array, platforms: PlatformsVariations['shape']) => + tokens.map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebShape(web), + ios: new IOSShape(ios), + android: new AndroidShape(android), + }; + + return new ShapeToken(token, values); + }); + +// TODO: Удалить метод после завершения разработки разделов с токенами +export const createMockShapeTokens = () => { + const token = { + displayName: 'shapeName', + enabled: true, + name: 'shape.name', + tags: ['shape', 'name'], + description: 'Description', + }; + + const values = { + web: new WebShape(''), + ios: new IOSShape({ + cornerRadius: 0, + kind: 'round', + }), + android: new AndroidShape({ + cornerRadius: 0, + kind: 'round', + }), + }; + + const shape = new ShapeToken(token, values); + + return [shape]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/shape/default/android.ts new file mode 100644 index 0000000000..621b331dd9 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/default/android.ts @@ -0,0 +1,34 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidShapeToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidShapeToken => ({ + 'round.xxs': { + kind: 'round', + cornerRadius: 4, + }, + 'round.xs': { + kind: 'round', + cornerRadius: 6, + }, + 'round.s': { + kind: 'round', + cornerRadius: 8, + }, + 'round.m': { + kind: 'round', + cornerRadius: 12, + }, + 'round.l': { + kind: 'round', + cornerRadius: 16, + }, + 'round.xl': { + kind: 'round', + cornerRadius: 20, + }, + 'round.xxl': { + kind: 'round', + cornerRadius: 40, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/shape/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/shape/default/ios.ts new file mode 100644 index 0000000000..fb208a47c0 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/default/ios.ts @@ -0,0 +1,34 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { IOSShapeToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSShapeToken => ({ + 'round.xxs': { + kind: 'round', + cornerRadius: 4, + }, + 'round.xs': { + kind: 'round', + cornerRadius: 6, + }, + 'round.s': { + kind: 'round', + cornerRadius: 8, + }, + 'round.m': { + kind: 'round', + cornerRadius: 12, + }, + 'round.l': { + kind: 'round', + cornerRadius: 16, + }, + 'round.xl': { + kind: 'round', + cornerRadius: 20, + }, + 'round.xxl': { + kind: 'round', + cornerRadius: 40, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/shape/default/meta.ts new file mode 100644 index 0000000000..c83e6b7aad --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/default/meta.ts @@ -0,0 +1,60 @@ +import { TokenType } from '../../../types'; + +export const shapeTokens: Array = [ + { + type: 'shape', + name: 'round.xxs', + tags: ['round', 'xxs'], + displayName: 'roundXxs', + description: 'borderRadius xxs', + enabled: true, + }, + { + type: 'shape', + name: 'round.xs', + tags: ['round', 'xs'], + displayName: 'roundXs', + description: 'borderRadius xs', + enabled: true, + }, + { + type: 'shape', + name: 'round.s', + tags: ['round', 's'], + displayName: 'roundS', + description: 'borderRadius s', + enabled: true, + }, + { + type: 'shape', + name: 'round.m', + tags: ['round', 'm'], + displayName: 'roundM', + description: 'borderRadius m', + enabled: true, + }, + { + type: 'shape', + name: 'round.l', + tags: ['round', 'l'], + displayName: 'roundL', + description: 'borderRadius l', + enabled: true, + }, + { + type: 'shape', + name: 'round.xl', + tags: ['round', 'xl'], + displayName: 'roundXl', + description: 'borderRadius xl', + enabled: true, + }, + { + type: 'shape', + name: 'round.xxl', + tags: ['round', 'xxl'], + displayName: 'roundXxl', + description: 'borderRadius xxl', + enabled: true, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/shape/default/web.ts new file mode 100644 index 0000000000..51de986437 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/default/web.ts @@ -0,0 +1,13 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { WebShapeToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebShapeToken => ({ + 'round.xxs': '4px', + 'round.xs': '6px', + 'round.s': '8px', + 'round.m': '12px', + 'round.l': '16px', + 'round.xl': '20px', + 'round.xxl': '40px', +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/index.ts b/website/plasma-theme-builder/src/_new/tokens/shape/index.ts new file mode 100644 index 0000000000..5fa15e9b87 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/index.ts @@ -0,0 +1,3 @@ +export * from './shape'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/shape.ts b/website/plasma-theme-builder/src/_new/tokens/shape/shape.ts new file mode 100644 index 0000000000..c00049a47e --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/shape.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebShapeToken, IOSShapeToken, AndroidShapeToken } from './types'; + +export type ShapePlatforms = Platforms; + +export class WebShape extends PlatformToken { + public setValue(value: WebShapeToken[string]) { + this.value = value; + } +} + +export class IOSShape extends PlatformToken { + public setValue(value: IOSShapeToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class AndroidShape extends PlatformToken { + public setValue(value: AndroidShapeToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class ShapeToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'shape', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/shape/types.ts b/website/plasma-theme-builder/src/_new/tokens/shape/types.ts new file mode 100644 index 0000000000..7e05b2fd0d --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/shape/types.ts @@ -0,0 +1,23 @@ +/* WEB */ + +export interface WebShapeToken { + [k: string]: string; +} + +/* IOS */ + +export interface IOSShapeToken { + [k: string]: { + kind: 'round'; + cornerRadius: number; + }; +} + +/* ANDROID */ + +export interface AndroidShapeToken { + [k: string]: { + kind: 'round'; + cornerRadius: number; + }; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/token.ts b/website/plasma-theme-builder/src/_new/tokens/token.ts new file mode 100644 index 0000000000..55ffef21f9 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/token.ts @@ -0,0 +1,98 @@ +import { MetaVariations, TokenType, Platform, Platforms } from '../types'; +import { PlatformToken } from './platformToken'; + +export type PlatformClasses = { + [key in Platform]: PlatformToken; +}; + +export abstract class Token { + private readonly type: keyof MetaVariations; + private name: string; + + private tags: string[]; + private displayName: string; + private description?: string | undefined; + private enabled: boolean; + + private readonly platforms: PlatformClasses; + + constructor(data: TokenType, platforms: PlatformClasses) { + const { name, type, tags, displayName, description, enabled } = data; + + this.type = type; + this.name = name; + this.tags = tags; + this.displayName = displayName; + this.description = description; + this.enabled = enabled; + + this.platforms = platforms; + } + + getType() { + return this.type; + } + + getName() { + return this.name; + } + + setName(value: string) { + this.name = value; + } + + getTags() { + return this.tags; + } + + setTags(value: string[]) { + this.tags = value; + } + + getDisplayName() { + return this.displayName; + } + + setDisplayName(value: string) { + this.displayName = value; + } + + getDescription() { + return this.description; + } + + setDescription(value?: string) { + this.description = value; + } + + getEnabled() { + return this.enabled; + } + + setEnabled(value: boolean) { + this.enabled = value; + } + + getPlatforms() { + return this.platforms; + } + + getValue(platform: U): K[U][string] { + return this.platforms[platform].getValue(); + } + + setValue(platform: U, value: K[U][string]): void { + this.platforms[platform].setValue(value); + } + + getTokenData(): TokenType { + return { + type: this.type, + name: this.name, + tags: this.tags, + displayName: this.displayName, + description: this.description, + enabled: this.enabled, + }; + } +} diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/creators.ts b/website/plasma-theme-builder/src/_new/tokens/typography/creators.ts new file mode 100644 index 0000000000..16e0063d2b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/creators.ts @@ -0,0 +1,84 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidTypography, TypographyToken, IOSTypography, WebTypography } from './typography'; +import { typographyTokens, getWebTokens, getIOSTokens, getAndroidTokens } from './default'; +import { PlatformsVariations, TokenType } from '../../types'; + +export const createDefaultTypographyTokens = (config: ThemeConfig) => + typographyTokens.map((token) => { + const web = getWebTokens(config)[token.name]; + const ios = getIOSTokens(config)[token.name]; + const android = getAndroidTokens(config)[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebTypography(web), + ios: new IOSTypography(ios), + android: new AndroidTypography(android), + }; + + return new TypographyToken(token, values); + }); + +export const createTypographyTokens = (tokens: Array, platforms: PlatformsVariations['typography']) => + tokens.map((token) => { + const web = platforms.web[token.name]; + const ios = platforms.ios[token.name]; + const android = platforms.android[token.name]; + + if (!web || !ios || !android) { + throw new Error(`Токен '${token.name}' не найден`); + } + + const values = { + web: new WebTypography(web), + ios: new IOSTypography(ios), + android: new AndroidTypography(android), + }; + + return new TypographyToken(token, values); + }); + +export const createMockTypographyTokens = () => { + const token = { + displayName: 'typographyName', + enabled: true, + name: 'typography.name', + tags: ['typography', 'name'], + description: 'Description', + }; + + const values = { + web: new WebTypography({ + fontFamilyRef: '', + fontWeight: '100', + fontStyle: 'normal', + fontSize: '0', + lineHeight: '0', + letterSpacing: '0', + }), + ios: new IOSTypography({ + fontFamilyRef: '', + weight: 'black', + style: 'normal', + size: 0, + lineHeight: 0, + kerning: 0, + }), + android: new AndroidTypography({ + fontFamilyRef: '', + fontWeight: 100, + fontStyle: 'normal', + textSize: 0, + lineHeight: 0, + letterSpacing: 0, + }), + }; + + const typography = new TypographyToken(token, values); + + return [typography]; +}; diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/default/android.ts b/website/plasma-theme-builder/src/_new/tokens/typography/default/android.ts new file mode 100644 index 0000000000..6667a4f279 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/default/android.ts @@ -0,0 +1,822 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { AndroidTypographyToken } from '../types'; + +export const getAndroidTokens = (config: ThemeConfig): AndroidTypographyToken => ({ + 'screen-s.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + 'screen-s.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + 'screen-s.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 56, + lineHeight: 62, + letterSpacing: 0, + }, + 'screen-s.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 56, + lineHeight: 62, + letterSpacing: 0, + }, + 'screen-s.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + 'screen-s.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + 'screen-s.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + 'screen-s.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + 'screen-s.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + 'screen-s.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + 'screen-s.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-s.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-s.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-s.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-s.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + 'screen-s.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + 'screen-s.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-s.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-s.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-s.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-s.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-s.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-s.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-s.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-s.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-s.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-s.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + 'screen-s.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + 'screen-s.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + 'screen-s.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + 'screen-s.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-s.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-s.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, + 'screen-s.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, + 'screen-m.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 112, + lineHeight: 112, + letterSpacing: 0, + }, + 'screen-m.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 112, + lineHeight: 112, + letterSpacing: 0, + }, + 'screen-m.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 72, + lineHeight: 76, + letterSpacing: 0, + }, + 'screen-m.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 72, + lineHeight: 76, + letterSpacing: 0, + }, + 'screen-m.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + 'screen-m.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + 'screen-m.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + 'screen-m.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 40, + lineHeight: 46, + letterSpacing: 0, + }, + 'screen-m.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + 'screen-m.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 28, + lineHeight: 34, + letterSpacing: 0, + }, + 'screen-m.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-m.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-m.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-m.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-m.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + 'screen-m.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 22, + letterSpacing: 0, + }, + 'screen-m.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-m.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-m.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-m.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-m.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-m.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-m.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-m.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-m.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-m.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-m.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 20, + lineHeight: 28, + letterSpacing: -0.02, + }, + 'screen-m.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 20, + lineHeight: 28, + letterSpacing: -0.02, + }, + 'screen-m.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + 'screen-m.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 24, + letterSpacing: -0.02, + }, + 'screen-m.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-m.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-m.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, + 'screen-m.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, + 'screen-l.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 128, + lineHeight: 128, + letterSpacing: 0, + }, + 'screen-l.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 128, + lineHeight: 128, + letterSpacing: 0, + }, + 'screen-l.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + 'screen-l.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 88, + lineHeight: 92, + letterSpacing: 0, + }, + 'screen-l.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 300, + fontStyle: 'normal', + textSize: 64, + lineHeight: 68, + letterSpacing: 0, + }, + 'screen-l.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 64, + lineHeight: 68, + letterSpacing: 0, + }, + 'screen-l.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + 'screen-l.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 48, + lineHeight: 54, + letterSpacing: 0, + }, + 'screen-l.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 32, + lineHeight: 38, + letterSpacing: 0, + }, + 'screen-l.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 32, + lineHeight: 38, + letterSpacing: 0, + }, + 'screen-l.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + 'screen-l.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 24, + lineHeight: 30, + letterSpacing: 0, + }, + 'screen-l.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-l.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 20, + lineHeight: 26, + letterSpacing: 0, + }, + 'screen-l.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-l.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 24, + letterSpacing: 0, + }, + 'screen-l.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-l.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 22, + letterSpacing: -0.02, + }, + 'screen-l.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-l.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 16, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-l.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-l.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 18, + letterSpacing: -0.02, + }, + 'screen-l.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-l.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 14, + letterSpacing: -0.02, + }, + 'screen-l.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-l.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 10, + lineHeight: 12, + letterSpacing: -0.02, + }, + 'screen-l.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 24, + lineHeight: 32, + letterSpacing: -0.02, + }, + 'screen-l.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 24, + lineHeight: 32, + letterSpacing: -0.02, + }, + 'screen-l.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + 'screen-l.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 18, + lineHeight: 26, + letterSpacing: -0.02, + }, + 'screen-l.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-l.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 14, + lineHeight: 20, + letterSpacing: -0.02, + }, + 'screen-l.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 400, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, + 'screen-l.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: 600, + fontStyle: 'normal', + textSize: 12, + lineHeight: 16, + letterSpacing: -0.02, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/default/index.ts b/website/plasma-theme-builder/src/_new/tokens/typography/default/index.ts new file mode 100644 index 0000000000..846caf5a5f --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/default/index.ts @@ -0,0 +1,4 @@ +export * from './web'; +export * from './ios'; +export * from './android'; +export * from './meta'; diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/default/ios.ts b/website/plasma-theme-builder/src/_new/tokens/typography/default/ios.ts new file mode 100644 index 0000000000..059e8ab048 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/default/ios.ts @@ -0,0 +1,822 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { IOSTypographyToken } from '../types'; + +export const getIOSTokens = (config: ThemeConfig): IOSTypographyToken => ({ + 'screen-s.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 88, + lineHeight: 92, + kerning: 0, + }, + 'screen-s.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 88, + lineHeight: 92, + kerning: 0, + }, + 'screen-s.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 56, + lineHeight: 62, + kerning: 0, + }, + 'screen-s.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 56, + lineHeight: 62, + kerning: 0, + }, + 'screen-s.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 40, + lineHeight: 46, + kerning: 0, + }, + 'screen-s.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 40, + lineHeight: 46, + kerning: 0, + }, + 'screen-s.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 28, + lineHeight: 34, + kerning: 0, + }, + 'screen-s.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 28, + lineHeight: 34, + kerning: 0, + }, + 'screen-s.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 24, + lineHeight: 30, + kerning: 0, + }, + 'screen-s.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 24, + lineHeight: 30, + kerning: 0, + }, + 'screen-s.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-s.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-s.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-s.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-s.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 22, + kerning: 0, + }, + 'screen-s.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 22, + kerning: 0, + }, + 'screen-s.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-s.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-s.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-s.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-s.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-s.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-s.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-s.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-s.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-s.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-s.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 26, + kerning: -0.02, + }, + 'screen-s.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 26, + kerning: -0.02, + }, + 'screen-s.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 24, + kerning: -0.02, + }, + 'screen-s.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 24, + kerning: -0.02, + }, + 'screen-s.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-s.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-s.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, + 'screen-s.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, + 'screen-m.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 112, + lineHeight: 112, + kerning: 0, + }, + 'screen-m.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 112, + lineHeight: 112, + kerning: 0, + }, + 'screen-m.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 72, + lineHeight: 76, + kerning: 0, + }, + 'screen-m.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 72, + lineHeight: 76, + kerning: 0, + }, + 'screen-m.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 48, + lineHeight: 54, + kerning: 0, + }, + 'screen-m.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 48, + lineHeight: 54, + kerning: 0, + }, + 'screen-m.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 40, + lineHeight: 46, + kerning: 0, + }, + 'screen-m.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 40, + lineHeight: 46, + kerning: 0, + }, + 'screen-m.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 28, + lineHeight: 34, + kerning: 0, + }, + 'screen-m.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 28, + lineHeight: 34, + kerning: 0, + }, + 'screen-m.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-m.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-m.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-m.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-m.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 22, + kerning: 0, + }, + 'screen-m.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 22, + kerning: 0, + }, + 'screen-m.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-m.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-m.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-m.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-m.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-m.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-m.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-m.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-m.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-m.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-m.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 20, + lineHeight: 28, + kerning: -0.02, + }, + 'screen-m.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 20, + lineHeight: 28, + kerning: -0.02, + }, + 'screen-m.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 24, + kerning: -0.02, + }, + 'screen-m.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 24, + kerning: -0.02, + }, + 'screen-m.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-m.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-m.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, + 'screen-m.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, + 'screen-l.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 128, + lineHeight: 128, + kerning: 0, + }, + 'screen-l.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 128, + lineHeight: 128, + kerning: 0, + }, + 'screen-l.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 88, + lineHeight: 92, + kerning: 0, + }, + 'screen-l.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 88, + lineHeight: 92, + kerning: 0, + }, + 'screen-l.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'semibold', + style: 'normal', + size: 64, + lineHeight: 68, + kerning: 0, + }, + 'screen-l.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 64, + lineHeight: 68, + kerning: 0, + }, + 'screen-l.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 48, + lineHeight: 54, + kerning: 0, + }, + 'screen-l.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 48, + lineHeight: 54, + kerning: 0, + }, + 'screen-l.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 32, + lineHeight: 38, + kerning: 0, + }, + 'screen-l.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 32, + lineHeight: 38, + kerning: 0, + }, + 'screen-l.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 24, + lineHeight: 30, + kerning: 0, + }, + 'screen-l.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 24, + lineHeight: 30, + kerning: 0, + }, + 'screen-l.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-l.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 20, + lineHeight: 26, + kerning: 0, + }, + 'screen-l.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-l.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 24, + kerning: 0, + }, + 'screen-l.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-l.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 22, + kerning: -0.02, + }, + 'screen-l.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-l.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 16, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-l.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-l.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 18, + kerning: -0.02, + }, + 'screen-l.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-l.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 14, + kerning: -0.02, + }, + 'screen-l.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-l.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 10, + lineHeight: 12, + kerning: -0.02, + }, + 'screen-l.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 24, + lineHeight: 32, + kerning: -0.02, + }, + 'screen-l.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 24, + lineHeight: 32, + kerning: -0.02, + }, + 'screen-l.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 18, + lineHeight: 26, + kerning: -0.02, + }, + 'screen-l.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 18, + lineHeight: 26, + kerning: -0.02, + }, + 'screen-l.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-l.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 14, + lineHeight: 20, + kerning: -0.02, + }, + 'screen-l.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + weight: 'regular', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, + 'screen-l.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + weight: 'light', + style: 'normal', + size: 12, + lineHeight: 16, + kerning: -0.02, + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/default/meta.ts b/website/plasma-theme-builder/src/_new/tokens/typography/default/meta.ts new file mode 100644 index 0000000000..f1ba98691b --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/default/meta.ts @@ -0,0 +1,820 @@ +import { TokenType } from '../../../types'; + +export const typographyTokens: Array = [ + { + type: 'typography', + name: 'screen-s.display.l.normal', + tags: ['screen-s', 'display', 'l', 'normal'], + displayName: 'screenSDisplayL', + description: 'typography s display-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.display.l.bold', + tags: ['screen-s', 'display', 'l', 'bold'], + displayName: 'screenSDisplayLBold', + description: 'typography s display-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.display.m.normal', + tags: ['screen-s', 'display', 'm', 'normal'], + displayName: 'screenSDisplayM', + description: 'typography s display-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.display.m.bold', + tags: ['screen-s', 'display', 'm', 'bold'], + displayName: 'screenSDisplayMBold', + description: 'typography s display-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.display.s.normal', + tags: ['screen-s', 'display', 's', 'normal'], + displayName: 'screenSDisplayS', + description: 'typography s display-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.display.s.bold', + tags: ['screen-s', 'display', 's', 'bold'], + displayName: 'screenSDisplaySBold', + description: 'typography s display-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h1.normal', + tags: ['screen-s', 'header', 'h1', 'normal'], + displayName: 'screenSHeaderH1', + description: 'typography s header-h1', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h1.bold', + tags: ['screen-s', 'header', 'h1', 'bold'], + displayName: 'screenSHeaderH1Bold', + description: 'typography s header-h1-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h2.normal', + tags: ['screen-s', 'header', 'h2', 'normal'], + displayName: 'screenSHeaderH2', + description: 'typography s header-h2', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h2.bold', + tags: ['screen-s', 'header', 'h2', 'bold'], + displayName: 'screenSHeaderH2Bold', + description: 'typography s header-h2-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h3.normal', + tags: ['screen-s', 'header', 'h3', 'normal'], + displayName: 'screenSHeaderH3', + description: 'typography s header-h3', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h3.bold', + tags: ['screen-s', 'header', 'h3', 'bold'], + displayName: 'screenSHeaderH3Bold', + description: 'typography s header-h3-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h4.normal', + tags: ['screen-s', 'header', 'h4', 'normal'], + displayName: 'screenSHeaderH4', + description: 'typography s header-h4', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h4.bold', + tags: ['screen-s', 'header', 'h4', 'bold'], + displayName: 'screenSHeaderH4Bold', + description: 'typography s header-h4-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h5.normal', + tags: ['screen-s', 'header', 'h5', 'normal'], + displayName: 'screenSHeaderH5', + description: 'typography s header-h5', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.header.h5.bold', + tags: ['screen-s', 'header', 'h5', 'bold'], + displayName: 'screenSHeaderH5Bold', + description: 'typography s header-h5-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.l.normal', + tags: ['screen-s', 'body', 'l', 'normal'], + displayName: 'screenSBodyL', + description: 'typography s body-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.l.bold', + tags: ['screen-s', 'body', 'l', 'bold'], + displayName: 'screenSBodyLBold', + description: 'typography s body-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.m.normal', + tags: ['screen-s', 'body', 'm', 'normal'], + displayName: 'screenSBodyM', + description: 'typography s body-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.m.bold', + tags: ['screen-s', 'body', 'm', 'bold'], + displayName: 'screenSBodyMBold', + description: 'typography s body-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.s.normal', + tags: ['screen-s', 'body', 's', 'normal'], + displayName: 'screenSBodyS', + description: 'typography s body-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.s.bold', + tags: ['screen-s', 'body', 's', 'bold'], + displayName: 'screenSBodySBold', + description: 'typography s body-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.xs.normal', + tags: ['screen-s', 'body', 'xs', 'normal'], + displayName: 'screenSBodyXs', + description: 'typography s body-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.xs.bold', + tags: ['screen-s', 'body', 'xs', 'bold'], + displayName: 'screenSBodyXsBold', + description: 'typography s body-xs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.xxs.normal', + tags: ['screen-s', 'body', 'xxs', 'normal'], + displayName: 'screenSBodyXxs', + description: 'typography s body-xxs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.body.xxs.bold', + tags: ['screen-s', 'body', 'xxs', 'bold'], + displayName: 'screenSBodyXxsBold', + description: 'typography s body-xxs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.l.normal', + tags: ['screen-s', 'text', 'l', 'normal'], + displayName: 'screenSTextL', + description: 'typography s text-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.l.bold', + tags: ['screen-s', 'text', 'l', 'bold'], + displayName: 'screenSTextLBold', + description: 'typography s text-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.m.normal', + tags: ['screen-s', 'text', 'm', 'normal'], + displayName: 'screenSTextM', + description: 'typography s text-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.m.bold', + tags: ['screen-s', 'text', 'm', 'bold'], + displayName: 'screenSTextMBold', + description: 'typography s text-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.s.normal', + tags: ['screen-s', 'text', 's', 'normal'], + displayName: 'screenSTextS', + description: 'typography s text-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.s.bold', + tags: ['screen-s', 'text', 's', 'bold'], + displayName: 'screenSTextSBold', + description: 'typography s text-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.xs.normal', + tags: ['screen-s', 'text', 'xs', 'normal'], + displayName: 'screenSTextXs', + description: 'typography s text-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-s.text.xs.bold', + tags: ['screen-s', 'text', 'xs', 'bold'], + displayName: 'screenSTextXsBold', + description: 'typography s text-xs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.l.normal', + tags: ['screen-m', 'display', 'l', 'normal'], + displayName: 'screenMDisplayL', + description: 'typography m display-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.l.bold', + tags: ['screen-m', 'display', 'l', 'bold'], + displayName: 'screenMDisplayLBold', + description: 'typography m display-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.m.normal', + tags: ['screen-m', 'display', 'm', 'normal'], + displayName: 'screenMDisplayM', + description: 'typography m display-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.m.bold', + tags: ['screen-m', 'display', 'm', 'bold'], + displayName: 'screenMDisplayMBold', + description: 'typography m display-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.s.normal', + tags: ['screen-m', 'display', 's', 'normal'], + displayName: 'screenMDisplayS', + description: 'typography m display-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.display.s.bold', + tags: ['screen-m', 'display', 's', 'bold'], + displayName: 'screenMDisplaySBold', + description: 'typography m display-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h1.normal', + tags: ['screen-m', 'header', 'h1', 'normal'], + displayName: 'screenMHeaderH1', + description: 'typography m header-h1', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h1.bold', + tags: ['screen-m', 'header', 'h1', 'bold'], + displayName: 'screenMHeaderH1Bold', + description: 'typography m header-h1-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h2.normal', + tags: ['screen-m', 'header', 'h2', 'normal'], + displayName: 'screenMHeaderH2', + description: 'typography m header-h2', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h2.bold', + tags: ['screen-m', 'header', 'h2', 'bold'], + displayName: 'screenMHeaderH2Bold', + description: 'typography m header-h2-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h3.normal', + tags: ['screen-m', 'header', 'h3', 'normal'], + displayName: 'screenMHeaderH3', + description: 'typography m header-h3', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h3.bold', + tags: ['screen-m', 'header', 'h3', 'bold'], + displayName: 'screenMHeaderH3Bold', + description: 'typography m header-h3-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h4.normal', + tags: ['screen-m', 'header', 'h4', 'normal'], + displayName: 'screenMHeaderH4', + description: 'typography m header-h4', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h4.bold', + tags: ['screen-m', 'header', 'h4', 'bold'], + displayName: 'screenMHeaderH4Bold', + description: 'typography m header-h4-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h5.normal', + tags: ['screen-m', 'header', 'h5', 'normal'], + displayName: 'screenMHeaderH5', + description: 'typography m header-h5', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.header.h5.bold', + tags: ['screen-m', 'header', 'h5', 'bold'], + displayName: 'screenMHeaderH5Bold', + description: 'typography m header-h5-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.l.normal', + tags: ['screen-m', 'body', 'l', 'normal'], + displayName: 'screenMBodyL', + description: 'typography m body-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.l.bold', + tags: ['screen-m', 'body', 'l', 'bold'], + displayName: 'screenMBodyLBold', + description: 'typography m body-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.m.normal', + tags: ['screen-m', 'body', 'm', 'normal'], + displayName: 'screenMBodyM', + description: 'typography m body-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.m.bold', + tags: ['screen-m', 'body', 'm', 'bold'], + displayName: 'screenMBodyMBold', + description: 'typography m body-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.s.normal', + tags: ['screen-m', 'body', 's', 'normal'], + displayName: 'screenMBodyS', + description: 'typography m body-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.s.bold', + tags: ['screen-m', 'body', 's', 'bold'], + displayName: 'screenMBodySBold', + description: 'typography m body-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.xs.normal', + tags: ['screen-m', 'body', 'xs', 'normal'], + displayName: 'screenMBodyXs', + description: 'typography m body-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.xs.bold', + tags: ['screen-m', 'body', 'xs', 'bold'], + displayName: 'screenMBodyXsBold', + description: 'typography m body-xs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.xxs.normal', + tags: ['screen-m', 'body', 'xxs', 'normal'], + displayName: 'screenMBodyXxs', + description: 'typography m body-xxs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.body.xxs.bold', + tags: ['screen-m', 'body', 'xxs', 'bold'], + displayName: 'screenMBodyXxsBold', + description: 'typography m body-xxs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.l.normal', + tags: ['screen-m', 'text', 'l', 'normal'], + displayName: 'screenMTextL', + description: 'typography m text-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.l.bold', + tags: ['screen-m', 'text', 'l', 'bold'], + displayName: 'screenMTextLBold', + description: 'typography m text-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.m.normal', + tags: ['screen-m', 'text', 'm', 'normal'], + displayName: 'screenMTextM', + description: 'typography m text-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.m.bold', + tags: ['screen-m', 'text', 'm', 'bold'], + displayName: 'screenMTextMBold', + description: 'typography m text-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.s.normal', + tags: ['screen-m', 'text', 's', 'normal'], + displayName: 'screenMTextS', + description: 'typography m text-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.s.bold', + tags: ['screen-m', 'text', 's', 'bold'], + displayName: 'screenMTextSBold', + description: 'typography m text-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.xs.normal', + tags: ['screen-m', 'text', 'xs', 'normal'], + displayName: 'screenMTextXs', + description: 'typography m text-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-m.text.xs.bold', + tags: ['screen-m', 'text', 'xs', 'bold'], + displayName: 'screenMTextXsBold', + description: 'typography m text-xs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.l.normal', + tags: ['screen-l', 'display', 'l', 'normal'], + displayName: 'screenLDisplayL', + description: 'typography l display-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.l.bold', + tags: ['screen-l', 'display', 'l', 'bold'], + displayName: 'screenLDisplayLBold', + description: 'typography l display-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.m.normal', + tags: ['screen-l', 'display', 'm', 'normal'], + displayName: 'screenLDisplayM', + description: 'typography l display-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.m.bold', + tags: ['screen-l', 'display', 'm', 'bold'], + displayName: 'screenLDisplayMBold', + description: 'typography l display-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.s.normal', + tags: ['screen-l', 'display', 's', 'normal'], + displayName: 'screenLDisplayS', + description: 'typography l display-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.display.s.bold', + tags: ['screen-l', 'display', 's', 'bold'], + displayName: 'screenLDisplaySBold', + description: 'typography l display-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h1.normal', + tags: ['screen-l', 'header', 'h1', 'normal'], + displayName: 'screenLHeaderH1', + description: 'typography l header-h1', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h1.bold', + tags: ['screen-l', 'header', 'h1', 'bold'], + displayName: 'screenLHeaderH1Bold', + description: 'typography l header-h1-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h2.normal', + tags: ['screen-l', 'header', 'h2', 'normal'], + displayName: 'screenLHeaderH2', + description: 'typography l header-h2', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h2.bold', + tags: ['screen-l', 'header', 'h2', 'bold'], + displayName: 'screenLHeaderH2Bold', + description: 'typography l header-h2-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h3.normal', + tags: ['screen-l', 'header', 'h3', 'normal'], + displayName: 'screenLHeaderH3', + description: 'typography l header-h3', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h3.bold', + tags: ['screen-l', 'header', 'h3', 'bold'], + displayName: 'screenLHeaderH3Bold', + description: 'typography l header-h3-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h4.normal', + tags: ['screen-l', 'header', 'h4', 'normal'], + displayName: 'screenLHeaderH4', + description: 'typography l header-h4', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h4.bold', + tags: ['screen-l', 'header', 'h4', 'bold'], + displayName: 'screenLHeaderH4Bold', + description: 'typography l header-h4-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h5.normal', + tags: ['screen-l', 'header', 'h5', 'normal'], + displayName: 'screenLHeaderH5', + description: 'typography l header-h5', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.header.h5.bold', + tags: ['screen-l', 'header', 'h5', 'bold'], + displayName: 'screenLHeaderH5Bold', + description: 'typography l header-h5-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.l.normal', + tags: ['screen-l', 'body', 'l', 'normal'], + displayName: 'screenLBodyL', + description: 'typography l body-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.l.bold', + tags: ['screen-l', 'body', 'l', 'bold'], + displayName: 'screenLBodyLBold', + description: 'typography l body-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.m.normal', + tags: ['screen-l', 'body', 'm', 'normal'], + displayName: 'screenLBodyM', + description: 'typography l body-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.m.bold', + tags: ['screen-l', 'body', 'm', 'bold'], + displayName: 'screenLBodyMBold', + description: 'typography l body-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.s.normal', + tags: ['screen-l', 'body', 's', 'normal'], + displayName: 'screenLBodyS', + description: 'typography l body-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.s.bold', + tags: ['screen-l', 'body', 's', 'bold'], + displayName: 'screenLBodySBold', + description: 'typography l body-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.xs.normal', + tags: ['screen-l', 'body', 'xs', 'normal'], + displayName: 'screenLBodyXs', + description: 'typography l body-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.xs.bold', + tags: ['screen-l', 'body', 'xs', 'bold'], + displayName: 'screenLBodyXsBold', + description: 'typography l body-xs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.xxs.normal', + tags: ['screen-l', 'body', 'xxs', 'normal'], + displayName: 'screenLBodyXxs', + description: 'typography l body-xxs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.body.xxs.bold', + tags: ['screen-l', 'body', 'xxs', 'bold'], + displayName: 'screenLBodyXxsBold', + description: 'typography l body-xxs-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.l.normal', + tags: ['screen-l', 'text', 'l', 'normal'], + displayName: 'screenLTextL', + description: 'typography l text-l', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.l.bold', + tags: ['screen-l', 'text', 'l', 'bold'], + displayName: 'screenLTextLBold', + description: 'typography l text-l-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.m.normal', + tags: ['screen-l', 'text', 'm', 'normal'], + displayName: 'screenLTextM', + description: 'typography l text-m', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.m.bold', + tags: ['screen-l', 'text', 'm', 'bold'], + displayName: 'screenLTextMBold', + description: 'typography l text-m-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.s.normal', + tags: ['screen-l', 'text', 's', 'normal'], + displayName: 'screenLTextS', + description: 'typography l text-s', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.s.bold', + tags: ['screen-l', 'text', 's', 'bold'], + displayName: 'screenLTextSBold', + description: 'typography l text-s-bold', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.xs.normal', + tags: ['screen-l', 'text', 'xs', 'normal'], + displayName: 'screenLTextXs', + description: 'typography l text-xs', + enabled: true, + }, + { + type: 'typography', + name: 'screen-l.text.xs.bold', + tags: ['screen-l', 'text', 'xs', 'bold'], + displayName: 'screenLTextXsBold', + description: 'typography l text-xs-bold', + enabled: true, + }, +]; diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/default/web.ts b/website/plasma-theme-builder/src/_new/tokens/typography/default/web.ts new file mode 100644 index 0000000000..4e1156b938 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/default/web.ts @@ -0,0 +1,822 @@ +import { ThemeConfig } from '@salutejs/plasma-tokens-utils'; + +import { WebTypographyToken } from '../types'; + +export const getWebTokens = (config: ThemeConfig): WebTypographyToken => ({ + 'screen-s.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '5.5rem', + lineHeight: '5.75rem', + letterSpacing: 'normal', + }, + 'screen-s.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '5.5rem', + lineHeight: '5.75rem', + letterSpacing: 'normal', + }, + 'screen-s.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '3.5rem', + lineHeight: '3.875rem', + letterSpacing: 'normal', + }, + 'screen-s.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '3.5rem', + lineHeight: '3.875rem', + letterSpacing: 'normal', + }, + 'screen-s.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '2.5rem', + lineHeight: '2.875rem', + letterSpacing: 'normal', + }, + 'screen-s.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '2.5rem', + lineHeight: '2.875rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.75rem', + lineHeight: '2.125rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.75rem', + lineHeight: '2.125rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '1.875rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '1.875rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.375rem', + letterSpacing: 'normal', + }, + 'screen-s.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.375rem', + letterSpacing: 'normal', + }, + 'screen-s.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-s.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.625rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.625rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.5rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.5rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, + 'screen-s.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, + 'screen-m.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '7rem', + lineHeight: '7rem', + letterSpacing: 'normal', + }, + 'screen-m.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '7rem', + lineHeight: '7rem', + letterSpacing: 'normal', + }, + 'screen-m.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '4.5rem', + lineHeight: '4.75rem', + letterSpacing: 'normal', + }, + 'screen-m.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '4.5rem', + lineHeight: '4.75rem', + letterSpacing: 'normal', + }, + 'screen-m.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '3rem', + lineHeight: '3.375rem', + letterSpacing: 'normal', + }, + 'screen-m.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '3rem', + lineHeight: '3.375rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '2.5rem', + lineHeight: '2.875rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '2.5rem', + lineHeight: '2.875rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.75rem', + lineHeight: '2.125rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.75rem', + lineHeight: '2.125rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.375rem', + letterSpacing: 'normal', + }, + 'screen-m.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.375rem', + letterSpacing: 'normal', + }, + 'screen-m.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-m.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.75rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.75rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.5rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.5rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, + 'screen-m.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, + 'screen-l.display.l.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '8rem', + lineHeight: '8rem', + letterSpacing: 'normal', + }, + 'screen-l.display.l.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '8rem', + lineHeight: '8rem', + letterSpacing: 'normal', + }, + 'screen-l.display.m.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '5.5rem', + lineHeight: '5.75rem', + letterSpacing: 'normal', + }, + 'screen-l.display.m.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '5.5rem', + lineHeight: '5.75rem', + letterSpacing: 'normal', + }, + 'screen-l.display.s.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '300', + fontStyle: 'normal', + fontSize: '4rem', + lineHeight: '4.25rem', + letterSpacing: 'normal', + }, + 'screen-l.display.s.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '4rem', + lineHeight: '4.25rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h1.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '3rem', + lineHeight: '3.375rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h1.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '3rem', + lineHeight: '3.375rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h2.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '2rem', + lineHeight: '2.375rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h2.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '2rem', + lineHeight: '2.375rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h3.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '1.875rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h3.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '1.875rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h4.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h4.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.25rem', + lineHeight: '1.625rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h5.normal': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-l.header.h5.bold': { + fontFamilyRef: 'fontFamily.display', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.5rem', + letterSpacing: 'normal', + }, + 'screen-l.body.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.375rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.125rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '0.875rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.xxs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-l.body.xxs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.625rem', + lineHeight: '0.75rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.l.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '2rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.l.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.5rem', + lineHeight: '2rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.m.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.625rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.m.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '1.125rem', + lineHeight: '1.625rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.s.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.s.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.875rem', + lineHeight: '1.25rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.xs.normal': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '400', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, + 'screen-l.text.xs.bold': { + fontFamilyRef: 'fontFamily.text', + fontWeight: '600', + fontStyle: 'normal', + fontSize: '0.75rem', + lineHeight: '1rem', + letterSpacing: '-0.02em', + }, +}); diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/index.ts b/website/plasma-theme-builder/src/_new/tokens/typography/index.ts new file mode 100644 index 0000000000..1b938883d7 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/index.ts @@ -0,0 +1,3 @@ +export * from './typography'; +export * from './creators'; +export * from './types'; diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/types.ts b/website/plasma-theme-builder/src/_new/tokens/typography/types.ts new file mode 100644 index 0000000000..d28655268c --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/types.ts @@ -0,0 +1,47 @@ +import { + AndroidFontStyle, + AndroidFontWeight, + IOSFontStyle, + IOSFontWeight, + WebFontStyle, + WebFontWeight, +} from '../fontFamily'; + +/* WEB */ + +export interface WebTypographyToken { + [k: string]: { + fontFamilyRef: string; + fontWeight: WebFontWeight; + fontStyle: WebFontStyle; + fontSize: string; + lineHeight: string; + letterSpacing: string; + }; +} + +/* IOS */ + +export interface IOSTypographyToken { + [k: string]: { + fontFamilyRef: string; + weight: IOSFontWeight; + style: IOSFontStyle; + size: number; + lineHeight: number; + kerning: number; + }; +} + +/* ANDROID */ + +export interface AndroidTypographyToken { + [k: string]: { + fontFamilyRef: string; + fontWeight: AndroidFontWeight; + fontStyle: AndroidFontStyle; + textSize: number; + lineHeight: number; + letterSpacing: number; + }; +} diff --git a/website/plasma-theme-builder/src/_new/tokens/typography/typography.ts b/website/plasma-theme-builder/src/_new/tokens/typography/typography.ts new file mode 100644 index 0000000000..57d06faeaa --- /dev/null +++ b/website/plasma-theme-builder/src/_new/tokens/typography/typography.ts @@ -0,0 +1,36 @@ +import { PlatformClasses, Token } from '../token'; +import { PlatformToken } from '../platformToken'; + +import type { Platforms, TokenType } from '../../types'; +import type { WebTypographyToken, IOSTypographyToken, AndroidTypographyToken } from './types'; + +export type TypographyPlatforms = Platforms; + +export class WebTypography extends PlatformToken { + public setValue(value: WebTypographyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class IOSTypography extends PlatformToken { + public setValue(value: IOSTypographyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class AndroidTypography extends PlatformToken { + public setValue(value: AndroidTypographyToken[string]) { + this.value = { ...this.value, ...value }; + } +} + +export class TypographyToken extends Token { + constructor(meta: Omit, values: PlatformClasses) { + const data: TokenType = { + type: 'typography', + ...meta, + }; + + super(data, values); + } +} diff --git a/website/plasma-theme-builder/src/_new/types/index.ts b/website/plasma-theme-builder/src/_new/types/index.ts new file mode 100644 index 0000000000..8eedb29a12 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/types/index.ts @@ -0,0 +1,4 @@ +export * from './meta'; +export * from './token'; +export * from './theme'; +export * from './other'; diff --git a/website/plasma-theme-builder/src/_new/types/meta.ts b/website/plasma-theme-builder/src/_new/types/meta.ts new file mode 100644 index 0000000000..62bb187671 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/types/meta.ts @@ -0,0 +1,42 @@ +import { TokenType, Variations } from './token'; + +const colorTuple = ['mode', 'category', 'subcategory'] as const; +export type ColorMetaTuple = typeof colorTuple; +export type ColorMeta = Record>; + +const gradientTuple = ['mode', 'category', 'subcategory'] as const; +export type GradientMetaTuple = typeof gradientTuple; +export type GradientMeta = Record>; + +const shadowTuple = ['direction', 'kind', 'size'] as const; +export type ShadowMetaTuple = typeof shadowTuple; +export type ShadowMeta = Record>; + +const shapeTuple = ['kind', 'size'] as const; +export type ShapeMetaTuple = typeof shapeTuple; +export type ShapeMeta = Record>; + +const typographyTuple = ['screen', 'kind', 'size', 'weight'] as const; +export type TypographyMetaTuple = typeof typographyTuple; +export type TypographyMeta = Record>; + +const fontFamilyTuple = ['kind'] as const; +export type FontFamilyMetaTuple = typeof fontFamilyTuple; +export type FontFamilyMeta = Record>; + +export type MetaTupleVariations = Variations< + ColorMetaTuple, + GradientMetaTuple, + ShadowMetaTuple, + ShapeMetaTuple, + TypographyMetaTuple, + FontFamilyMetaTuple +>; + +export type MetaVariations = Variations; + +export interface ThemeMeta extends MetaVariations { + name: string; + version: string; + tokens: Array; +} diff --git a/website/plasma-theme-builder/src/_new/types/other.ts b/website/plasma-theme-builder/src/_new/types/other.ts new file mode 100644 index 0000000000..3120a5f024 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/types/other.ts @@ -0,0 +1,12 @@ +export type Entries = { + [K in keyof T]: [K, T[K]]; +}[keyof T][]; + +export type ValueOf = T[keyof T]; + +declare global { + interface ObjectConstructor { + entries(o: T): Entries; + keys(o: T): Array; + } +} diff --git a/website/plasma-theme-builder/src/_new/types/theme.ts b/website/plasma-theme-builder/src/_new/types/theme.ts new file mode 100644 index 0000000000..46e1c8b2a7 --- /dev/null +++ b/website/plasma-theme-builder/src/_new/types/theme.ts @@ -0,0 +1,42 @@ +import { Platform, Variation, Variations } from './token'; + +import { + ColorPlatforms, + ColorToken, + FontFamilyPlatforms, + FontFamilyToken, + GradientPlatforms, + GradientToken, + ShadowPlatforms, + ShadowToken, + ShapePlatforms, + ShapeToken, + TypographyPlatforms, + TypographyToken, +} from '../tokens'; + +export type PlatformsVariations = Variations< + ColorPlatforms, + GradientPlatforms, + ShadowPlatforms, + ShapePlatforms, + TypographyPlatforms, + FontFamilyPlatforms +>; + +export type TokenVariations = Variations< + ColorToken, + GradientToken, + ShadowToken, + ShapeToken, + TypographyToken, + FontFamilyToken +>; + +export type VariationsClasses = { + [key in keyof TokenVariations]: Array; +}; + +export type PlatformsByVariationsMap = { + [key in U]: PlatformsVariations[T][key][string]; +}; diff --git a/website/plasma-theme-builder/src/_new/types/token.ts b/website/plasma-theme-builder/src/_new/types/token.ts new file mode 100644 index 0000000000..5f328e095e --- /dev/null +++ b/website/plasma-theme-builder/src/_new/types/token.ts @@ -0,0 +1,38 @@ +export interface Variations< + T1 extends any = any, + T2 extends any = any, + T3 extends any = any, + T4 extends any = any, + T5 extends any = any, + T6 extends any = any +> { + color: T1; + gradient: T2; + shape: T4; + shadow: T3; + typography: T5; + fontFamily: T6; +} + +export interface Platforms< + T1 extends Record = Record, + T2 extends Record = Record, + T3 extends Record = Record +> { + web: T1; + ios: T2; + android: T3; +} + +export type Variation = keyof Variations; + +export type Platform = keyof Platforms; + +export interface TokenType { + type: Variation; + name: string; + tags: Array; + displayName: string; + description?: string; + enabled: boolean; +} diff --git a/website/plasma-theme-builder/src/api/getFilesSource.ts b/website/plasma-theme-builder/src/api/getFilesSource.ts index e5d417d4e0..e6a2e2e848 100644 --- a/website/plasma-theme-builder/src/api/getFilesSource.ts +++ b/website/plasma-theme-builder/src/api/getFilesSource.ts @@ -1,41 +1,34 @@ import { Octokit } from 'octokit'; -const isString = (value: unknown): value is string => typeof value === 'string'; - -export const getFilesSource = async ( +export const getFileSource = async ( octokit: Octokit | undefined, owner: string, repo: string, path: string, branchName?: string, token?: string, -): Promise => { + type: 'raw' | 'full' = 'raw', +) => { const octokitInstance = octokit ?? new Octokit({ auth: token, }); - const getFileSource = async (path: string) => { - try { - const result = await octokitInstance.rest.repos.getContent({ - headers: { - accept: 'application/vnd.github.v3.raw', - }, - owner, - repo, - path, - ref: branchName, - }); - - return result.data; - } catch (error) { - // eslint-disable-next-line no-console - console.error(error); - } - }; - - const filesSource = await getFileSource(path); + try { + const result = await octokitInstance.rest.repos.getContent({ + headers: { + accept: `application/vnd.github.v3.${type}`, + }, + owner, + repo, + path, + ref: branchName, + }); - return isString(filesSource) ? filesSource : ''; + return result.data; + } catch (error) { + // eslint-disable-next-line no-console + console.error(error); + } }; diff --git a/website/plasma-theme-builder/src/api/index.ts b/website/plasma-theme-builder/src/api/index.ts index 35284f4aa8..64e86abb1e 100644 --- a/website/plasma-theme-builder/src/api/index.ts +++ b/website/plasma-theme-builder/src/api/index.ts @@ -1,6 +1,6 @@ export { getEnv } from './getEnv'; export { getAuthToken } from './getAuthToken'; -export { getFilesSource } from './getFilesSource'; +export { getFileSource } from './getFilesSource'; export { createBlob, createBranch, diff --git a/website/plasma-theme-builder/src/utils/generate.ts b/website/plasma-theme-builder/src/utils/generate.ts index a8e534763a..23438d0079 100644 --- a/website/plasma-theme-builder/src/utils/generate.ts +++ b/website/plasma-theme-builder/src/utils/generate.ts @@ -9,8 +9,8 @@ import { import type { ThemeTokenDataGroups } from '@salutejs/plasma-tokens-utils'; -import { prettify } from '.'; -import { getFilesSource } from '../api'; +import { isString, prettify } from '.'; +import { getFileSource } from '../api'; const getFilesPath = (name?: string) => ({ theme: `packages/plasma-tokens/data/themes/${name}.json`, @@ -57,7 +57,8 @@ export const getThemes = async ( defaultBranch: string, ) => { const pathToIndex = getFilesPath().themesIndex; - const tokensThemeIndex = await getFilesSource(undefined, owner, repo, pathToIndex, defaultBranch); + const filesSource = await getFileSource(undefined, owner, repo, pathToIndex, defaultBranch); + const tokensThemeIndex = isString(filesSource) ? filesSource : ''; const themes = generateThemes(tokensSet, undefined, true, true); const [darkTokens, lightTokens, newExports] = themes.map((item) => prettify(item.content)); diff --git a/website/plasma-theme-builder/src/utils/other.tsx b/website/plasma-theme-builder/src/utils/other.tsx index fe5aabacd4..0dc813c6e6 100644 --- a/website/plasma-theme-builder/src/utils/other.tsx +++ b/website/plasma-theme-builder/src/utils/other.tsx @@ -1,3 +1,5 @@ +export const isString = (value: unknown): value is string => typeof value === 'string'; + export const getUUID = () => { const value = window.localStorage.getItem('uuid'); diff --git a/website/plasma-theme-builder/src/utils/themes.tsx b/website/plasma-theme-builder/src/utils/themes.tsx index 3c183473da..d3dacc0077 100644 --- a/website/plasma-theme-builder/src/utils/themes.tsx +++ b/website/plasma-theme-builder/src/utils/themes.tsx @@ -2,10 +2,10 @@ import React from 'react'; import styled from 'styled-components'; import { createTheme } from '../builder/createTheme'; -import { getFilesSource } from '../api'; -import { getFormatDate, loadTheme } from '.'; +import { getFormatDate, isString, loadTheme } from '.'; import { THEME_BUILDER_PREFIX, BASE_PREFIX } from '../types'; import type { FormulaMode, Theme as ThemeType } from '../types'; +import { getFileSource } from '../api'; const StyledDate = styled.div` opacity: 0.5; @@ -28,7 +28,7 @@ export const getNormalizeThemeSections = (data?: ThemeType): ThemeType | undefin }; const legacySections = Object.keys(legacySectionMap); - const themeSections = Object.keys(data.light).filter((key) => legacySections.includes(key)) as Array< + const themeSections = Object.keys(data.light).filter((key) => legacySections.includes(key as string)) as Array< keyof ThemeType['dark' | 'light'] >; @@ -62,7 +62,7 @@ export const getThemeData = async ( repo = 'plasma', token?: string, ): Promise => { - const response = await getFilesSource( + const filesSource = await getFileSource( undefined, owner, repo, @@ -70,6 +70,7 @@ export const getThemeData = async ( branchName, token, ); + const response = isString(filesSource) ? filesSource : ''; return JSON.parse(response); }; @@ -111,7 +112,7 @@ export const createThemeURLParams = (name: string) => { }; export const loadAllThemeNames = (): (readonly [string, string])[] => { - const themes = Object.keys(localStorage) + const themes = Object.keys((localStorage as unknown) as Array[number]) .filter((key) => key.startsWith('$')) .map((item) => { const name = item.replace(`$`, ''); diff --git a/website/plasma-ui-docs/package.json b/website/plasma-ui-docs/package.json index 7d72302885..a4a0649d7c 100644 --- a/website/plasma-ui-docs/package.json +++ b/website/plasma-ui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-ui-docs", - "version": "0.315.0", + "version": "0.315.1-dev.0", "description": "Plasma Documentation.", "author": "Salute Frontend Team ", "license": "MIT", @@ -30,10 +30,10 @@ "@docusaurus/preset-classic": "3.1.1", "@docusaurus/theme-live-codeblock": "3.1.1", "@mdx-js/react": "3.0.0", - "@salutejs/plasma-docs-ui": "0.239.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-docs-ui": "0.239.1-dev.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-tokens": "1.81.0", - "@salutejs/plasma-ui": "1.249.0", + "@salutejs/plasma-ui": "1.249.1-dev.0", "@salutejs/use-virtual": "2.0.0", "@svgr/webpack": "8.1.0", "clsx": "^1.1.1", @@ -66,4 +66,4 @@ "react-docgen-typescript": "2.2.2", "typescript": "5.2.2" } -} +} \ No newline at end of file diff --git a/website/plasma-web-docs/package.json b/website/plasma-web-docs/package.json index d2cec80639..06d0f73a65 100644 --- a/website/plasma-web-docs/package.json +++ b/website/plasma-web-docs/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-web-docs", - "version": "0.282.0", + "version": "0.282.1-dev.0", "description": "Plasma Documentation.", "author": "Salute Frontend Team ", "license": "MIT", @@ -30,13 +30,13 @@ "@docusaurus/preset-classic": "3.1.1", "@docusaurus/theme-live-codeblock": "3.1.1", "@mdx-js/react": "3.0.0", - "@salutejs/plasma-docs-ui": "0.239.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-docs-ui": "0.239.1-dev.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-tokens-b2b": "1.40.0", "@salutejs/plasma-tokens-b2c": "0.50.0", "@salutejs/plasma-tokens-web": "1.55.0", "@salutejs/plasma-typo": "0.40.0", - "@salutejs/plasma-web": "1.328.0", + "@salutejs/plasma-web": "1.328.1-dev.0", "@svgr/webpack": "8.1.0", "clsx": "^1.1.1", "file-loader": "^6.2.0", @@ -70,4 +70,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/website/plasma-website/components/roster/AnimationSlideUp.tsx b/website/plasma-website/components/roster/AnimationSlideUp.tsx new file mode 100644 index 0000000000..cd50a77925 --- /dev/null +++ b/website/plasma-website/components/roster/AnimationSlideUp.tsx @@ -0,0 +1,17 @@ +import { css } from 'styled-components'; + +export const AnimationSlideUp = css` + animation: slideUp 120ms ease-in forwards; + + @keyframes slideUp { + 0% { + transform: translateY(0.5rem); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } + } +`; diff --git a/website/plasma-website/components/roster/Footer.tsx b/website/plasma-website/components/roster/Footer.tsx new file mode 100644 index 0000000000..c4fc320e74 --- /dev/null +++ b/website/plasma-website/components/roster/Footer.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; +import { TextS } from '@salutejs/plasma-b2c'; +import { secondary } from '@salutejs/plasma-tokens-b2c'; + +import { IconGitHub, MainCommunityMenu } from '../index'; + +const community = [ + { + title: 'GitHub', + contentLeft: , + href: 'https://github.com/salute-developers/plasma', + }, +]; + +const currentYear = new Date().getFullYear(); + +const StyledFooter = styled.footer` + padding-bottom: 2rem; +`; + +const StyledMainCommunityMenu = styled(MainCommunityMenu)` + margin-bottom: 1.5rem; + margin-top: 3.5rem; +`; + +const CopyrightText = styled(TextS)` + color: ${secondary}; +`; + +export const Footer = () => { + return ( + + + {`©${currentYear} СалютДевайсы`} + + ); +}; diff --git a/website/plasma-website/components/roster/Grid.tsx b/website/plasma-website/components/roster/Grid.tsx index e5ed9c3e42..171eb5fd93 100644 --- a/website/plasma-website/components/roster/Grid.tsx +++ b/website/plasma-website/components/roster/Grid.tsx @@ -2,6 +2,8 @@ import styled from 'styled-components'; export const Grid = styled.div` display: grid; - grid-template-columns: repeat(8, calc(12.5% - 0.5rem + 0.5rem / 8)); - gap: 0.5rem; + grid-template-columns: repeat(auto-fit, 3.75rem); + gap: 0.25rem; + + box-sizing: border-box; `; diff --git a/website/plasma-website/components/roster/IconClipboard.tsx b/website/plasma-website/components/roster/IconClipboard.tsx new file mode 100644 index 0000000000..9591fa682e --- /dev/null +++ b/website/plasma-website/components/roster/IconClipboard.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import styled from 'styled-components'; +import { IconCopyOutline } from '@salutejs/plasma-icons'; +import { useToast } from '@salutejs/plasma-b2c'; +import type { ShowToastArgs } from '@salutejs/plasma-b2c'; + +const StyledClipboardIcon = styled(IconCopyOutline)` + margin-left: -1.375rem; + margin-right: 0.313rem; + color: rgba(255, 255, 255, 0.28); + visibility: hidden; + opacity: 0; + + transition: visibility 120ms ease-in, opacity 120ms ease-in; +`; + +const StyledClipboard = styled.div` + display: inline-flex; + flex-direction: column; + row-gap: 0.5rem; + + cursor: pointer; + + &:hover { + ${StyledClipboardIcon} { + visibility: visible; + opacity: 1; + } + } + + &:last-child { + margin-top: 1.25rem; + } +`; + +const StyledHeading = styled.span` + font-size: 0.75rem; + line-height: 0.875rem; + color: rgba(255, 255, 255, 0.8); +`; + +const StyledTitle = styled(StyledHeading)` + color: rgba(255, 255, 255, 0.28); +`; + +const StyledSource = styled.div` + display: inline-flex; +`; + +const toastData: ShowToastArgs = { + text: '', + position: 'bottom', + role: 'status', + size: 'm', + view: 'dark', + timeout: 250, +}; + +export const IconClipboard = ({ source, title }: { source: string; title: string }) => { + const { showToast } = useToast(); + + const copyToClipboard = async () => { + try { + await navigator.clipboard.writeText(source); + + showToast({ + ...toastData, + text: 'Скопировано', + }); + } catch (err) { + showToast({ + ...toastData, + text: 'Ошибка при копировании текста', + }); + } + }; + + return ( + + {title} + + + {source} + + + ); +}; diff --git a/website/plasma-website/components/roster/IconExtendedInfo.tsx b/website/plasma-website/components/roster/IconExtendedInfo.tsx new file mode 100644 index 0000000000..83979eff11 --- /dev/null +++ b/website/plasma-website/components/roster/IconExtendedInfo.tsx @@ -0,0 +1,108 @@ +import React, { useContext, useState } from 'react'; +import styled, { css } from 'styled-components'; +import { IconClose } from '@salutejs/plasma-icons'; +import { H2 } from '@salutejs/plasma-b2c'; + +import { Context } from '../../store'; +import { capitalize } from '../../utils'; +import { multipleMediaQuery } from '../../mixins'; + +import { IconClipboard } from './IconClipboard'; +import { IconOptionsSize } from './IconOptionsSize'; +import { IconOptionsColors } from './IconOptionsColors'; + +type IconInfoProps = { + onClose: () => void; + offset: number; +}; + +const StyledHeader = styled.header` + display: flex; + align-items: center; + padding-bottom: 1.5rem; +`; + +const StyledExtendInfo = styled.div<{ offset?: number }>` + position: relative; + z-index: 1; + left: ${({ offset = 1 }) => { + // INFO: Смещение для cell grid (60px размер cell) + const cellOffset = 60 * (offset - 1); + // INFO: Смещение для gap grid (4px размер gap cell) + const gapOffset = 4 * (offset - 2); + + return -(cellOffset + gapOffset); + }}px; + display: block; + padding-top: 3rem; + margin-bottom: 1.5rem; + width: 60rem; + box-sizing: border-box; + + ${multipleMediaQuery(['M', 'S'])(css` + padding-top: 2rem; + `)} +`; + +const StyledIconOptions = styled.div` + display: flex; + align-items: center; + column-gap: 1.875rem; + margin-bottom: 2rem; +`; + +const StyledIconClose = styled.span` + height: 2.25rem; + margin-right: 1.5rem; + color: rgba(255, 255, 255, 0.28); + transition: color 120ms ease-in; + + cursor: pointer; + + &:hover { + color: rgba(255, 255, 255, 1); + } +`; + +const StyledContent = styled.div` + padding-left: 3.75rem; +`; + +const StyledClipboardWrapper = styled.div` + display: inline-flex; + flex-direction: column; +`; + +export const IconExtendedInfo = ({ offset, onClose }: IconInfoProps) => { + const { state } = useContext(Context); + const [iconSize, setIconSize] = useState('xs'); + + if (!state.wizardItemName) { + return null; + } + + const iconComponent = `Icon${capitalize(state.wizardItemName)}`; + const importCode = `import { ${iconComponent} } from '@salutejs/plasma-icons';`; + const codeSnippet = `<${iconComponent} size="${iconSize}" color="${state.color?.value}" />`; + + return ( + + + + + +

{state.wizardItemName}

+ + + + + + + + + + + + + ); +}; diff --git a/website/plasma-website/components/roster/IconGroupHeading.tsx b/website/plasma-website/components/roster/IconGroupHeading.tsx new file mode 100644 index 0000000000..5052e19a3a --- /dev/null +++ b/website/plasma-website/components/roster/IconGroupHeading.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import styled from 'styled-components'; + +import type { IconGroup } from '../../types'; + +type IconGroupHeadingProps = IconGroup & { count: number }; + +const StyledIconGroupHeading = styled.div` + display: flex; + column-gap: 0.5rem; + margin-bottom: 1rem; +`; + +const StyledCommonTitle = styled.span` + font-size: 0.75rem; + line-height: 0.875rem; +`; + +const StyledTitle = styled(StyledCommonTitle)` + color: rgba(255, 255, 255, 0.56); +`; + +const StyledSubtitle = styled(StyledCommonTitle)` + color: rgba(255, 255, 255, 0.28); +`; + +export const IconGroupHeading = ({ title, subtitle, count }: IconGroupHeadingProps) => { + return ( + + {title} + {subtitle} + {count} + + ); +}; diff --git a/website/plasma-website/components/roster/IconHoverDetails.tsx b/website/plasma-website/components/roster/IconHoverDetails.tsx new file mode 100644 index 0000000000..576a0cedb4 --- /dev/null +++ b/website/plasma-website/components/roster/IconHoverDetails.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; + +type IconInfoProps = { + name: string; + sizes: Record<'16' | '24' | '36', boolean>; +}; + +const StyledSizeList = styled.div` + display: flex; + column-gap: 0.75rem; + padding-top: 0.5rem; +`; + +const StyleSizeItem = styled.span<{ isDisable?: boolean }>` + ${({ isDisable }) => + isDisable && + css` + color: rgba(255, 255, 255, 0.28); + transition: color 120ms ease-in; + `} +`; + +export const IconHoverDetails = ({ name, sizes }: IconInfoProps) => { + return ( + <> + {name} + + {Object.entries(sizes).map(([key, value]) => ( + + {key} + + ))} + + + ); +}; diff --git a/website/plasma-website/components/roster/IconOptionsColors.tsx b/website/plasma-website/components/roster/IconOptionsColors.tsx new file mode 100644 index 0000000000..3782df9676 --- /dev/null +++ b/website/plasma-website/components/roster/IconOptionsColors.tsx @@ -0,0 +1,128 @@ +import React, { useContext } from 'react'; +import styled, { css } from 'styled-components'; +import { accent, primary, secondary, tertiary } from '@salutejs/plasma-tokens-b2c'; + +import { Context, setIconColor, initColorState } from '../../store'; + +import { AnimationSlideUp } from './AnimationSlideUp'; + +const colorsList = Object.entries({ accent, primary, secondary, tertiary }).map(([key, value]) => ({ + value, + label: key, +})); + +const StyledOptionsColors = styled.div` + display: flex; + column-gap: 0.75rem; +`; + +const StyledOptions = styled.div` + display: flex; + column-gap: 0.125rem; +`; + +const StyledOptionInfo = styled.span` + position: absolute; + top: -2.375rem; + left: 0; + display: none; + align-items: center; + justify-content: center; + padding: 0.563rem 0.5rem; + height: 2rem; + border-radius: 1.75rem; + background-color: rgba(23, 23, 23, 1); + + box-sizing: border-box; + + ${AnimationSlideUp}; +`; + +const StyledOptionCommon = styled.div<{ isActive?: boolean }>` + position: relative; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + line-height: 0.875rem; + padding: 0.313rem 0.5rem; + border-radius: 0.75rem; + color: rgba(255, 255, 255, 0.56); + + transition: color 120ms ease-in, background-color 120ms ease-in; + + cursor: pointer; + + ${({ isActive }) => + isActive && + css` + color: rgba(255, 255, 255, 0.96); + background-color: rgba(255, 255, 255, 0.06); + + cursor: default; + + &:hover { + background-color: rgba(255, 255, 255, 0.06); + } + `} +`; + +const StyledOption = styled(StyledOptionCommon)<{ color: string }>` + width: 1.5rem; + height: 1.5rem; + padding: unset; + border-radius: 50%; + + &::before { + content: ''; + margin-top: 0.063rem; + width: 0.75rem; + height: 0.75rem; + border-radius: 50%; + background-color: ${({ color }) => color}; + } + + &:hover { + color: rgba(255, 255, 255, 0.96); + background-color: rgba(255, 255, 255, 0.06); + border-radius: 50%; + + ${StyledOptionInfo} { + display: flex; + } + } +`; + +export const IconOptionsColors = () => { + const { dispatch, state } = useContext(Context); + + return ( + + { + dispatch(setIconColor(initColorState)); + }} + > + {initColorState.value} + + + {colorsList.map(({ value, label }) => { + return ( + { + dispatch(setIconColor({ value, label })); + }} + color={value} + > + {label} + + ); + })} + + + ); +}; diff --git a/website/plasma-website/components/roster/IconOptionsSize.tsx b/website/plasma-website/components/roster/IconOptionsSize.tsx new file mode 100644 index 0000000000..0708def177 --- /dev/null +++ b/website/plasma-website/components/roster/IconOptionsSize.tsx @@ -0,0 +1,117 @@ +import React, { useState } from 'react'; +import styled, { css } from 'styled-components'; + +import { AnimationSlideUp } from './AnimationSlideUp'; + +type IconOptionsSizeProps = { + onChange: (value: string) => void; + defaultSize: string; +}; + +const options = [ + { value: 'xs', label: '16' }, + { value: 's', label: '24' }, + { value: 'm', label: '36' }, +]; + +const StyledOptions = styled.div` + display: flex; + gap: 0.125rem; +`; + +const StyledOptionInfo = styled.span` + position: absolute; + top: -2.375rem; + left: 0; + display: none; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2rem; + padding: 0.563rem 0.5rem; + border-radius: 1.75rem; + background-color: rgba(23, 23, 23, 1); + + box-sizing: border-box; + + ${AnimationSlideUp}; +`; + +const StyledOption = styled.div<{ isActive?: boolean; isXS?: boolean }>` + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 0.313rem 0.5rem; + width: 1.5rem; + max-height: 1.5rem; + font-size: 0.75rem; + line-height: 0.875rem; + color: rgba(255, 255, 255, 0.56); + border-radius: 50%; + + box-sizing: border-box; + + cursor: pointer; + + transition: color 120ms ease-in, background-color 120ms ease-in, border-radius 120ms ease-in; + + &:hover { + color: rgba(255, 255, 255, 0.96); + background-color: rgba(255, 255, 255, 0.06); + border-radius: 50%; + + ${StyledOptionInfo} { + display: flex; + } + } + + ${({ isActive }) => + isActive && + css` + color: rgba(255, 255, 255, 0.96); + background-color: rgba(255, 255, 255, 0.06); + + cursor: default; + + &:hover { + background-color: rgba(255, 255, 255, 0.06); + } + `} + + ${({ isXS }) => + isXS && + css` + width: 2rem; + border-radius: 0.75rem; + + &:hover { + border-radius: 0.75rem; + } + `} +`; + +export const IconOptionsSize = ({ onChange, defaultSize }: IconOptionsSizeProps) => { + const [currentSizeOption, setCurrentSizeOption] = useState(defaultSize); + + return ( + + {options.map(({ value, label }) => { + return ( + { + setCurrentSizeOption(value); + onChange(value); + }} + > + {label} + {value} + + ); + })} + + ); +}; diff --git a/website/plasma-website/components/roster/IconsList.tsx b/website/plasma-website/components/roster/IconsList.tsx index 090565bef8..9ab1104b0f 100644 --- a/website/plasma-website/components/roster/IconsList.tsx +++ b/website/plasma-website/components/roster/IconsList.tsx @@ -1,124 +1,253 @@ -import { Fragment, useMemo, useContext } from 'react'; -import type { FC } from 'react'; +import React, { useMemo, useContext, useRef, useState, useEffect } from 'react'; +import type { FC, MutableRefObject } from 'react'; import styled, { css } from 'styled-components'; -import { Headline4, Footnote1, applyNoSelect, applyEllipsis } from '@salutejs/plasma-b2c'; -import { IconRoot, iconSectionsSet } from '@salutejs/plasma-icons/scalable'; -import { surfaceLiquid01, surfaceLiquid02, secondary, white } from '@salutejs/plasma-tokens-b2c'; -import { link, linkHover } from '@salutejs/plasma-b2c/tokens'; +import { Headline4, applyNoSelect } from '@salutejs/plasma-b2c'; +import { IconRoot } from '@salutejs/plasma-icons'; +import { secondary } from '@salutejs/plasma-tokens-b2c'; -import { Context, setWizardItem } from '../../store'; -import type { Data, Item } from '../../types'; +import { Context, setWizardItem, setIconColor, initColorState } from '../../store'; +import { iconsList } from '../../utils'; +import { IconGroupHeading } from './IconGroupHeading'; +import { IconHoverDetails } from './IconHoverDetails'; +import { IconExtendedInfo } from './IconExtendedInfo'; +import { AnimationSlideUp } from './AnimationSlideUp'; import { Grid } from './Grid'; export interface IconsListProps { searchQuery?: string; /** - * Обработчик клика по айтему. + * Item click handler */ onItemClick?: React.HTMLAttributes['onClick']; } +const size = 's'; + +const getGridCellPosition = (ref: MutableRefObject, index: number) => { + if (!ref || !ref?.current) { + return 1; + } + + const gridContainer = ref?.current; + + if (!gridContainer) { + return 1; + } + + const gridContainerStyle = window.getComputedStyle(gridContainer); + + const columns = gridContainerStyle.getPropertyValue('grid-template-columns').split(' ').length; + + const currentRow = Math.floor(index / columns); + const offset = index % columns; + + return offset === 0 ? index / currentRow : offset; +}; + +const StyledGridWrapper = styled.div` + &:not(:last-child) { + margin-bottom: 3.5rem; + } +`; + +const StyledIconList = styled.div` + margin-top: 4rem; +`; + const StyledHeadline4 = styled(Headline4).attrs(() => ({ as: 'h4', mt: '8x', mb: '6x' }))` color: ${secondary}; `; -const StyledCard = styled.div<{ isActive?: boolean }>` + +const StyledCell = styled.div` + position: relative; +`; + +const StyledIconHoverDetails = styled.div` + position: absolute; + z-index: 2; + top: -4.25rem; + left: 0.625rem; + display: none; + flex-direction: column; + padding: 0.75rem; + border-radius: 1rem; + + font-size: 0.75rem; + line-height: 0.875rem; + + background-color: rgba(23, 23, 23, 1); + + ${AnimationSlideUp}; +`; + +const StyledIcon = styled.div<{ isActive?: boolean; color?: string; hasOpacity?: boolean }>` ${applyNoSelect}; display: flex; - flex-direction: column; align-items: center; justify-content: center; - text-align: center; + padding: 1.125rem; + height: 3.75rem; + width: 3.75rem; + border-radius: 50%; - padding: 1rem; - background: ${surfaceLiquid01}; - border-radius: 1rem; + background-color: transparent; + box-sizing: border-box; cursor: pointer; + transition: box-shadow 120ms ease-in, opacity 120ms ease-in, color 120ms ease-in; + &:hover { - background: ${surfaceLiquid02}; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); + opacity: 1; + + & + ${StyledIconHoverDetails} { + display: flex; + } } - ${({ isActive }) => + ${({ isActive, color = 'inherit' }) => isActive && css` - background: ${link}; - color: ${white}; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 1); + color: ${color}; &:hover { - background: ${linkHover}; + box-shadow: 0 0 0 1px rgba(255, 255, 255, 1); } `} -`; -const StyledIconName = styled(Footnote1).attrs(() => ({ mt: '4x' }))` - ${applyEllipsis}; - width: 100%; -`; - -const size = 's'; -const icons = Object.entries(iconSectionsSet) - .sort() - .reduce((acc, [groupName, group]) => { - acc.push({ - name: groupName, - items: Object.entries(group) - .sort() - .reduce((a, [iconName, component]) => { - a.push({ name: iconName, component }); - - return a; - }, [] as Item[]), - }); - return acc; - }, [] as Data); + ${({ isActive, hasOpacity }) => + !isActive && + hasOpacity && + css` + opacity: 28%; + `} +`; export const IconsList: FC = ({ searchQuery, onItemClick }) => { const { state, dispatch } = useContext(Context); + const [offset, setOffset] = useState(0); + const [cellIndex, setCellIndex] = useState(1); + const [currentGridRow, setCurrentGridRow] = useState(''); + const gridRef = useRef(null); const items = useMemo(() => { if (!searchQuery) { - return icons; + return iconsList; } + const regExp = new RegExp(searchQuery.toLocaleLowerCase().replace(/\W/g, '')); - return icons + + return iconsList .map((group) => ({ ...group, - items: group.items.filter((item) => item.name.toLocaleLowerCase().search(regExp) !== -1), + items: group.items.filter((item) => { + return item.name.toLocaleLowerCase().search(regExp) !== -1; + }), })) - .filter((group) => group.items.length); - }, [searchQuery]); + .filter((group) => { + const currentIndex = group.items.findIndex(({ name }) => name === state.wizardItemName); + + if (currentIndex !== -1) { + setOffset(getGridCellPosition(gridRef, currentIndex + 1)); + } + + return group.items.length; + }); + }, [searchQuery, offset]); + + useEffect(() => { + const container = gridRef?.current; + + const observer = new window.ResizeObserver((entries) => { + for (const entry of entries) { + if (entry.target === container) { + setOffset(getGridCellPosition(gridRef, cellIndex)); + } + } + }); + + if (container) { + observer.observe(container); + } + + return () => { + if (container) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + observer.unobserve(container); + } + }; + }, [cellIndex, items]); + + const handleCloseExtendInfo = () => { + dispatch(setWizardItem('icon', '')); + + dispatch(setIconColor(initColorState)); + + setCurrentGridRow(''); + }; if (!items.length) { return Nothing found; } return ( - <> + {items.map((group) => ( - - {group.name} - - {group.items.map(({ name, component: Component }) => ( - { - event.stopPropagation(); - onItemClick?.(event); - dispatch(setWizardItem('icon', name)); - }} - > - - {name} - + + + + {group.items.map(({ name, component: Component, groupName }, index) => ( + + { + event.stopPropagation(); + + onItemClick?.(event); + + dispatch(setWizardItem('icon', name)); + + setCurrentGridRow(group.iconGroup.subtitle); + + dispatch(setIconColor(initColorState)); + + const currentIndex = index + 1; + + setCellIndex(currentIndex); + + setOffset(getGridCellPosition(gridRef, currentIndex)); + + // Info: Close by double click + if (name === state.wizardItemName) { + handleCloseExtendInfo(); + } + }} + color={state.color?.value} + > + + + + + + {name === state.wizardItemName && ( + + )} + ))} - + ))} - + ); }; diff --git a/website/plasma-website/components/roster/index.ts b/website/plasma-website/components/roster/index.ts index a56d069d2e..0b8417dac6 100644 --- a/website/plasma-website/components/roster/index.ts +++ b/website/plasma-website/components/roster/index.ts @@ -7,3 +7,4 @@ export { Panel } from './Panel'; export { RadioGroup } from './RadioGroup'; export { SearchForm } from './SearchForm'; export { ThemeSwitcher } from './ThemeSwitcher'; +export { Footer } from './Footer'; diff --git a/website/plasma-website/package.json b/website/plasma-website/package.json index 39fd8cee89..55f84c141a 100644 --- a/website/plasma-website/package.json +++ b/website/plasma-website/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-website", - "version": "0.289.0", + "version": "0.289.1-dev.0", "description": "Plasma Main App", "author": "Salute Frontend Team ", "license": "MIT", @@ -19,8 +19,8 @@ "lint": "next lint" }, "dependencies": { - "@salutejs/plasma-b2c": "1.327.0", - "@salutejs/plasma-icons": "1.193.0", + "@salutejs/plasma-b2c": "1.327.1-dev.0", + "@salutejs/plasma-icons": "1.193.1-dev.0", "@salutejs/plasma-tokens-b2c": "0.50.0", "@salutejs/plasma-typo": "0.40.0", "next": "^12.3.4", @@ -36,4 +36,4 @@ "eslint-config-next": "11.0.1", "typescript": "4.3.4" } -} +} \ No newline at end of file diff --git a/website/plasma-website/pages/icons.tsx b/website/plasma-website/pages/icons.tsx index e0e96899ff..ded0be539d 100644 --- a/website/plasma-website/pages/icons.tsx +++ b/website/plasma-website/pages/icons.tsx @@ -1,32 +1,33 @@ -import { useState, useCallback } from 'react'; +import React, { useState, useCallback } from 'react'; +import styled from 'styled-components'; +import { ToastProvider } from '@salutejs/plasma-b2c'; import Head from 'next/head'; -import { Header, Main, SearchForm, IconsList, Panel, IconForm } from '../components/roster'; +import { Header, Main, SearchForm, IconsList, Footer } from '../components/roster'; + +const StyledMain = styled(Main)` + max-width: 100%; +`; export default function Home() { const [searchQuery, setSearchQuery] = useState(''); - const [isPanelOpen, setIsPanelOpen] = useState(false); const onSearchInput = useCallback>( (e) => setSearchQuery(e.currentTarget.value), [setSearchQuery], ); - const onItemClick = useCallback(() => setIsPanelOpen(true), [setIsPanelOpen]); - const onPanelClose = useCallback(() => setIsPanelOpen(false), [setIsPanelOpen]); return ( - <> + Plasma Icons
-
+ - - - - -
- + +