diff --git a/.github/config-ci.json b/.github/config-ci.json index 48b88df2d68..bb26d5734ba 100644 --- a/.github/config-ci.json +++ b/.github/config-ci.json @@ -7,12 +7,12 @@ "plasma-new-hope", "plasma-asdk", "plasma-giga", + "plasma-homeds", "sdds-serv", "sdds-dfa", "sdds-cs", "sdds-finai", "sdds-insol", - "sdds-crm", "sdds-netology", "sdds-scan", "sdds-bizcom", @@ -23,7 +23,6 @@ "plasma-b2c", "plasma-web", "plasma-giga", - "sdds-crm", "sdds-cs", "sdds-dfa", "sdds-finai", diff --git a/.github/meta-prod.js b/.github/meta-prod.js index 52d200c1d7b..b82a80192d7 100644 --- a/.github/meta-prod.js +++ b/.github/meta-prod.js @@ -10,6 +10,9 @@ const commonScope = [ ]; module.exports = { + 'plasma-homeds': { + scope: [...commonScope, 'plasma-themes', 'plasma-core', 'plasma-docs-ui', 'plasma-giga-docs'], + }, 'plasma-giga': { scope: [...commonScope, 'plasma-themes', 'plasma-core', 'plasma-docs-ui', 'plasma-giga-docs'], }, @@ -72,9 +75,6 @@ module.exports = { 'sdds-insol': { scope: [...commonScope, 'sdds-themes', 'plasma-core', 'plasma-docs-ui', 'sdds-insol-docs'], }, - 'sdds-crm': { - scope: [...commonScope, 'sdds-themes', 'plasma-core', 'plasma-docs-ui', 'sdds-crm-docs'], - }, 'sdds-netology': { scope: [...commonScope, 'plasma-themes', 'plasma-core', 'plasma-docs-ui', 'sdds-netology-docs'], }, diff --git a/.github/meta.js b/.github/meta.js index 07e9f01c2cf..eca73b2f4dc 100644 --- a/.github/meta.js +++ b/.github/meta.js @@ -9,6 +9,11 @@ const commonScope = [ ]; module.exports = { + 'plasma-homeds': { + scope: [...commonScope, 'plasma-themes', 'plasma-new-hope'], + required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes'], + themes: 'plasma-themes', + }, 'plasma-giga': { scope: [...commonScope, 'plasma-themes', 'plasma-new-hope'], required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes'], @@ -88,11 +93,6 @@ module.exports = { required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'sdds-themes'], themes: 'sdds-themes', }, - 'sdds-crm': { - scope: [...commonScope, 'sdds-themes', 'plasma-new-hope'], - required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes'], - themes: 'sdds-themes', - }, 'sdds-netology': { scope: [...commonScope, 'plasma-themes', 'plasma-new-hope'], required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes'], diff --git a/.github/workflows/create-release-pr.yml b/.github/workflows/create-release-pr.yml index 5525f5c836d..0794018ce48 100644 --- a/.github/workflows/create-release-pr.yml +++ b/.github/workflows/create-release-pr.yml @@ -2,125 +2,133 @@ name: Create release PR and generate changelog on: - push: - branches: - - 'release_*' - workflow_dispatch: - inputs: - from-tag: - description: '' - required: false + push: + branches: + - 'release_*' + workflow_dispatch: + inputs: + from-tag: + description: '' + required: false + to-tag: + description: '' + required: true jobs: - release-pr: - name: Create release pull request - runs-on: ubuntu-22.04 - env: - GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} - - permissions: - contents: read - pull-requests: read - - steps: - - name: Checkout - uses: actions/checkout@v4 - with: - show-progress: false - fetch-depth: 0 - - - name: Computed envs - run: | - echo "DATE=$(date +'%d.%m.%Y')" >> $GITHUB_ENV - echo "FROM_TAG=$(git merge-base --fork-point origin/master)" >> $GITHUB_ENV - echo "FILE=${{ github.workspace }}/changelog_artifacts.md" >> $GITHUB_ENV - - - name: Build Changelog - id: github_release - uses: mikepenz/release-changelog-builder-action@v4.1.0 - with: - fromTag: ${{ github.event.inputs.from-tag || env.FROM_TAG }} - configuration: "./.github/changelog-builder-config.json" - - - name: List pull request - # List merged pull request into dev branch - run: echo "pull_requests --> ${{ steps.github_release.outputs.pull_requests }}" - - - name: Create "changelog_artifacts.md" - # Write multiple lines input stream - run: | - cat > ${{ env.FILE }} <<'EOF' - ${{ steps.github_release.outputs.changelog }} - - - name: Upload "changelog_artifacts.md" - uses: actions/upload-artifact@master - with: - name: release-changelog-artifacts - path: ${{ env.FILE }} - - - name: Install dependencies - run: | - cd .github/actions/preprocessing-release-changelog - npm ci - - - name: Processing changelog data - id: changelog - uses: ./.github/actions/preprocessing-release-changelog - with: - data: | - ${{ steps.github_release.outputs.changelog }} - - - name: Create release PR - run: | - changelog='${{ steps.changelog.outputs.changelog }}' - gh pr create --base master --head ${{ github.ref_name }} --title "Release by ${{ env.DATE }}" --body "$changelog" - - - name: Processing pull request by title - id: jira_tasks - uses: actions/github-script@v7 + release-pr: + name: Create release pull request + # github.event.created is true only on the first push when branch is created + # See: https://docs.github.com/en/webhooks/webhook-events-and-payloads#push + if: github.event.created || github.event_name == 'workflow_dispatch' + runs-on: ubuntu-22.04 env: - PULL_REQUESTS_IDS: ${{ steps.github_release.outputs.pull_requests }} - with: - script: | - const prIds = process.env.PULL_REQUESTS_IDS.split(',').map(id => parseInt(id, 10)); - const ids = []; - - for (const prId of prIds) { - try { - const { data: pr } = await github.rest.pulls.get({ - owner: 'salute-developers', - repo: 'plasma', - pull_number: prId - }); - - const jiraIdMatch = pr.title.toLocaleLowerCase().match(/plasma-\d+/); - const id = jiraIdMatch ? jiraIdMatch[0] : null; - - if (id) { - ids.push(id); - } - } catch (error) { - console.error(`Error fetching PR #${prId}:`, error); - } - } - - console.log('Found pull requests:', ids); - - return ids; - - - name: Send MM - uses: mattermost/action-mattermost-notify@master - with: - MATTERMOST_WEBHOOK_URL: ${{ secrets.WEBHOOKS_RELEASE_LF_MM }} - TEXT: |- - { - "name": "plasma", - "version": "Release ${{ env.DATE }}", - "applicationType": "web", - "hotfix": false, - "authorMmUser": "alex_czech", - "configurationElement": "${{ secrets.CE }}", - "distributionLink": "", - "tasks": ${{ steps.jira_tasks.outputs.result }}, - "jiraProject": "PLASMA" - } + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + + permissions: + contents: read + pull-requests: read + + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + show-progress: false + fetch-depth: 0 + + - name: Computed envs + run: | + echo "DATE=$(date +'%d.%m.%Y')" >> $GITHUB_ENV + echo "FROM_TAG=$(git merge-base --fork-point origin/master)" >> $GITHUB_ENV + echo "FILE=${{ github.workspace }}/changelog_artifacts.md" >> $GITHUB_ENV + + - name: Build Changelog + id: github_release + uses: mikepenz/release-changelog-builder-action@v4.1.0 + with: + fromTag: ${{ github.event.inputs.from-tag || env.FROM_TAG }} + toTag: ${{ github.event.inputs.to-tag }} + ignorePreReleases: true + configuration: './.github/changelog-builder-config.json' + + - name: List pull request + # List merged pull request into dev branch + run: echo "pull_requests --> ${{ steps.github_release.outputs.pull_requests }}" + + - name: Create "changelog_artifacts.md" + # Write multiple lines input stream + run: | + cat > ${{ env.FILE }} <<'EOF' + ${{ steps.github_release.outputs.changelog }} + + - name: Upload "changelog_artifacts.md" + uses: actions/upload-artifact@master + with: + name: release-changelog-artifacts + path: ${{ env.FILE }} + + - name: Install dependencies + run: | + cd .github/actions/preprocessing-release-changelog + npm ci + + - name: Processing changelog data + id: changelog + uses: ./.github/actions/preprocessing-release-changelog + with: + data: | + ${{ steps.github_release.outputs.changelog }} + + - name: Create release PR + run: | + changelog='${{ steps.changelog.outputs.changelog }}' + gh pr create --base master --head ${{ github.ref_name }} --title "Release by ${{ env.DATE }}" --body "$changelog" + + - name: Processing pull request by title + id: jira_tasks + uses: actions/github-script@v7 + env: + PULL_REQUESTS_IDS: ${{ steps.github_release.outputs.pull_requests }} + with: + script: | + const prIds = process.env.PULL_REQUESTS_IDS.split(',').map(id => parseInt(id, 10)); + const ids = []; + + for (const prId of prIds) { + try { + const { data: pr } = await github.rest.pulls.get({ + owner: 'salute-developers', + repo: 'plasma', + pull_number: prId + }); + + const jiraIdMatch = pr.title.toLocaleLowerCase().match(/plasma-\d+/); + const id = jiraIdMatch ? jiraIdMatch[0] : null; + + if (id) { + ids.push(id); + } + } catch (error) { + console.error(`Error fetching PR #${prId}:`, error); + } + } + + console.log('Found pull requests:', ids); + + return ids; + + - name: Send MM + uses: mattermost/action-mattermost-notify@master + with: + MATTERMOST_WEBHOOK_URL: ${{ secrets.WEBHOOKS_RELEASE_LF_MM }} + TEXT: |- + { + "name": "plasma", + "version": "Release ${{ env.DATE }}", + "applicationType": "web", + "hotfix": false, + "authorMmUser": "alex_czech", + "configurationElement": "${{ secrets.CE }}", + "distributionLink": "", + "tasks": ${{ steps.jira_tasks.outputs.result }}, + "jiraProject": "PLASMA" + } diff --git a/.github/workflows/cypress-by-cron-every-day.yml b/.github/workflows/cypress-by-cron-every-day.yml index db755254b29..37b1d84d89c 100644 --- a/.github/workflows/cypress-by-cron-every-day.yml +++ b/.github/workflows/cypress-by-cron-every-day.yml @@ -6,7 +6,7 @@ on: jobs: cypress_plasma: - name: "Cypress with React 17 for plasma packages" + name: "Cypress for plasma packages" strategy: fail-fast: false matrix: @@ -16,11 +16,10 @@ jobs: with: scope: ${{ matrix.scope }} prefix: "plasma" - with-react-17: true secrets: inherit cypress_sdds: - name: "Cypress with React 17 for sdds packages" + name: "Cypress for sdds packages" strategy: fail-fast: false matrix: @@ -30,5 +29,4 @@ jobs: with: scope: ${{ matrix.scope }} prefix: "sdds" - with-react-17: true secrets: inherit diff --git a/.github/workflows/cypress-by-cron.yml b/.github/workflows/cypress-by-cron.yml deleted file mode 100644 index de165cece3b..00000000000 --- a/.github/workflows/cypress-by-cron.yml +++ /dev/null @@ -1,58 +0,0 @@ -name: Cypress component testing by schedule - -on: - schedule: - - cron: 0 0 * * SUN - -jobs: - cypress_plasma: - strategy: - fail-fast: false - matrix: - scope: [web,b2c,ui,giga] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "plasma" - secrets: inherit - - cypress_plasma-react-17: - strategy: - fail-fast: false - matrix: - scope: [web,b2c,ui,giga] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "plasma" - with-react-17: true - secrets: inherit - - cypress_sdds: - strategy: - fail-fast: false - matrix: - scope: [cs,insol] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "sdds" - secrets: inherit - - cypress_sdds-react-17: - strategy: - fail-fast: false - matrix: - scope: [cs] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "sdds" - with-react-17: true - with-artifacts: true - secrets: inherit - diff --git a/.github/workflows/cypress-common.yml b/.github/workflows/cypress-common.yml index 9fffbcc65db..016802e1f16 100644 --- a/.github/workflows/cypress-common.yml +++ b/.github/workflows/cypress-common.yml @@ -11,9 +11,6 @@ on: description: 'package prefix (plasma or sdds)' required: true type: string - with-react-17: - type: boolean - default: false with-artifacts: type: boolean default: false @@ -60,11 +57,6 @@ jobs: scope: ${{ inputs.scope }} components: ${{ inputs.components }} - - name: Install React 17 - if: ${{ inputs.with-react-17 }} - run: | - npm i --no-progress react@17 react-dom@17 @types/react@17.0.40 @types/react-dom@17 --prefix="./packages/${{ inputs.prefix }}-${{ inputs.scope }}" - - name: Lerna bootstrap if: ${{ (inputs.components == '' || steps.check-test-files-exist.outputs.tests-exist == 'true') }} uses: nick-fields/retry@v3 diff --git a/.github/workflows/cypress-release-branch.yml b/.github/workflows/cypress-release-branch.yml index f90781b0dd1..ff791046577 100644 --- a/.github/workflows/cypress-release-branch.yml +++ b/.github/workflows/cypress-release-branch.yml @@ -18,26 +18,11 @@ jobs: fail-fast: false matrix: scope: [web,b2c,ui,giga] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "plasma" - with-artifacts: true - secrets: inherit - - cypress_plasma-react-17: - if: ${{ startsWith(github.head_ref, 'release') }} - strategy: - fail-fast: false - matrix: - scope: [web,b2c,ui,giga] - + uses: ./.github/workflows/cypress-common.yml with: scope: ${{ matrix.scope }} prefix: "plasma" - with-react-17: true with-artifacts: true secrets: inherit @@ -47,25 +32,10 @@ jobs: fail-fast: false matrix: scope: [cs,insol] - - uses: ./.github/workflows/cypress-common.yml - with: - scope: ${{ matrix.scope }} - prefix: "sdds" - with-artifacts: true - secrets: inherit - - cypress_sdds-react-17: - if: ${{ startsWith(github.head_ref, 'release') }} - strategy: - fail-fast: false - matrix: - scope: [cs,insol] - + uses: ./.github/workflows/cypress-common.yml with: scope: ${{ matrix.scope }} prefix: "sdds" - with-react-17: true with-artifacts: true secrets: inherit diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 5525a6f10d8..0ca3e4167a2 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -6,6 +6,8 @@ on: - master - dev - next-insol + paths-ignore: + - 'docs/**' concurrency: # New commit on branch cancels running workflows of the same branch diff --git a/.github/workflows/documentation-deploy-next-insol-stage.yml b/.github/workflows/documentation-deploy-next-insol-stage.yml new file mode 100644 index 00000000000..183f400c53b --- /dev/null +++ b/.github/workflows/documentation-deploy-next-insol-stage.yml @@ -0,0 +1,14 @@ +name: Deploy documentations [Feature] + +on: + workflow_dispatch: + +jobs: + run: + name: Deploy documentations [Feature] + uses: ./.github/workflows/documentation-deploy-common.yml + with: + path: 'next-insol' + ref: 'next-insol' + docusaurusURLPrefix: 'next-insol' + secrets: inherit diff --git a/.github/workflows/documentation-deploy-pr.yml b/.github/workflows/documentation-deploy-pr.yml index 9cb49c95ab3..2ac7766831f 100644 --- a/.github/workflows/documentation-deploy-pr.yml +++ b/.github/workflows/documentation-deploy-pr.yml @@ -5,9 +5,13 @@ on: branches: - dev - next-insol + paths-ignore: + - 'docs/**' pull_request: branches: - master + paths-ignore: + - 'docs/**' concurrency: # New commit on branch cancels running workflows of the same branch diff --git a/.github/workflows/publish-feature.yml b/.github/workflows/publish-feature.yml index 628009cc166..bb0d0c7e22e 100644 --- a/.github/workflows/publish-feature.yml +++ b/.github/workflows/publish-feature.yml @@ -1,9 +1,7 @@ name: Release Next Tag on: - push: - branches: - - next-insol + workflow_dispatch: concurrency: group: ${{ github.workflow }}-${{ github.ref }} @@ -12,11 +10,10 @@ concurrency: jobs: publish: name: Publish feature version - if: ${{ github.actor == 'github-merge-queue[bot]' }} uses: ./.github/workflows/publish-common.yml with: with-update-package-lock: true auto-options: '--no-changelog' secrets: - gh_token: ${{ secrets.GH_TOKEN }} + gh_token: ${{ secrets.GH_TOKENS_SDDS }} npm_registry_token: ${{ secrets.NPM_REGISTRY_TOKEN }} diff --git a/.github/workflows/publish-latest.yml b/.github/workflows/publish-latest.yml index 5fc0c969ef5..90d34cef971 100644 --- a/.github/workflows/publish-latest.yml +++ b/.github/workflows/publish-latest.yml @@ -5,22 +5,17 @@ on: 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: publish: name: Release uses: ./.github/workflows/publish-common.yml with: - with-update-package-lock: true + with-update-package-lock: false auto-options: '--no-changelog' secrets: gh_token: ${{ secrets.GH_TOKEN }} npm_registry_token: ${{ secrets.NPM_REGISTRY_TOKEN }} - + changelog: runs-on: ubuntu-latest needs: [publish] @@ -33,7 +28,7 @@ jobs: show-progress: false fetch-depth: 0 ref: master - + - name: Get associated pull request by commit id: data uses: actions/github-script@v7 @@ -45,26 +40,26 @@ jobs: owner: context.repo.owner, repo: context.repo.repo, }); - + const data = res?.data[0].body || ''; - + return data; - + - name: Install dependencies run: | cd .github/actions/write-changelog npm ci - + - name: Write changelog uses: ./.github/actions/write-changelog with: data: ${{ steps.data.outputs.result }} - + - name: Extract branch name id: branch shell: bash run: echo "BRANCH=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_OUTPUT - + - name: Commit & Push changelog files uses: actions-js/push@master with: @@ -73,7 +68,7 @@ jobs: branch: ${{ steps.branch.outputs.BRANCH }} author_name: Salute Frontend Team author_email: salute.developers@gmail.com - + add_comment: name: 'Add comments to merged pull requests' runs-on: ubuntu-latest @@ -87,7 +82,7 @@ jobs: show-progress: false fetch-depth: 10 ref: master - + - name: Extract commit message env: COMMIT_SHA: ${{ github.sha }} @@ -97,7 +92,7 @@ jobs: echo "COMMIT_MESSAGE<> $GITHUB_ENV echo "$COMMIT_MESSAGE" >> $GITHUB_ENV echo "EOF" >> $GITHUB_ENV - + - name: Create comment with version id: comment uses: actions/github-script@v7 @@ -109,7 +104,7 @@ jobs: if (!process.env.DATA || !process.env.DATA.length) { console.log('Empty DATA') } - + const DATA = process.env.DATA .replace(/.*Bump independent versions.*\n?/g, '') .replace(/.*docs.*\n?/g, '') @@ -119,15 +114,15 @@ jobs: .trim() .split('\n') .map(line => line.trim()); - + const comment = ` This PR is included in version: - + ${DATA.join('\n')} ` - + return comment; - + - name: Get pull requests id's id: ids uses: actions/github-script@v7 @@ -138,23 +133,23 @@ jobs: owner: context.repo.owner, repo: context.repo.repo, }); - + const data = res?.data[0].body || ''; - + const prRegex = /\[PR\]\(https:\/\/github\.com\/[^\/]+\/[^\/]+\/pull\/(\d+)\)/g; - + const matches = Array.from(data.matchAll(prRegex)); - + const ids = matches.map(match => parseInt(match[1], 10)); - + return ids; - + - name: Add comments to pull request by ID uses: actions/github-script@v7 with: script: | const listID = ${{ steps.ids.outputs.result }}; - + for (const id of listID) { await github.rest.issues.createComment({ owner: context.repo.owner, diff --git a/cypress/snapshots/b2c/Button/plasma-b2c Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png b/cypress/snapshots/b2c/Button/plasma-b2c Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png index 27c5ed8b3fa..c591de4344e 100644 Binary files a/cypress/snapshots/b2c/Button/plasma-b2c Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png and b/cypress/snapshots/b2c/Button/plasma-b2c Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/Button/plasma-b2c Button -- with Loader.snap.png b/cypress/snapshots/b2c/Button/plasma-b2c Button -- with Loader.snap.png index 37e3736ca50..7715ebda4f8 100644 Binary files a/cypress/snapshots/b2c/Button/plasma-b2c Button -- with Loader.snap.png and b/cypress/snapshots/b2c/Button/plasma-b2c Button -- with Loader.snap.png differ diff --git a/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop flip.snap.png b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop flip.snap.png new file mode 100644 index 00000000000..f6f03964296 Binary files /dev/null and b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop flip.snap.png differ diff --git a/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop renderSelectionIcon.snap.png b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..eae91152836 Binary files /dev/null and b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop shift.snap.png b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop shift.snap.png new file mode 100644 index 00000000000..ed2264e1f85 Binary files /dev/null and b/cypress/snapshots/b2c/Combobox/plasma-b2c Combobox -- prop shift.snap.png differ diff --git a/cypress/snapshots/b2c/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/b2c/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png index 033eca42b48..5aad5e8fb4b 100644 Binary files a/cypress/snapshots/b2c/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/b2c/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/b2c/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png index b953c0b23b6..322725413a1 100644 Binary files a/cypress/snapshots/b2c/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/b2c/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png index 8912e8b315a..df0ffdb83c3 100644 Binary files a/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png b/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png index 6d1f25077c0..f116df0ce83 100644 Binary files a/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png and b/cypress/snapshots/b2c/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png differ diff --git a/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png new file mode 100644 index 00000000000..83e9c393bda Binary files /dev/null and b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png differ diff --git a/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png new file mode 100644 index 00000000000..2a226c6f61a Binary files /dev/null and b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png differ diff --git a/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List focused ListItem.snap.png b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List focused ListItem.snap.png new file mode 100644 index 00000000000..2a226c6f61a Binary files /dev/null and b/cypress/snapshots/b2c/List/plasma-b2c List -- [PLASMA-] List focused ListItem.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner, size=xl.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner, size=xl.snap.png index 693c6343e5f..cafd0a252bb 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner, size=xl.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner, size=xl.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner.snap.png index 0bb3d826417..1f0099f4804 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- Loader default type=spinner.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png index 560dcf8df30..7c2422a5442 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png index 8b2fd045947..883c835d6ee 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png index af9de0b5b0b..91d4b0e4471 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png index abef18343dd..89c69acfd83 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png index 38f2fe4d3fb..9fecb12140a 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png index 4bb77870311..0d7b9c4792a 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png differ diff --git a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png index 8b2fd045947..883c835d6ee 100644 Binary files a/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png and b/cypress/snapshots/b2c/Loader/plasma-b2c Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png differ diff --git a/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png b/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png index c66d2a24c00..5b734b646ce 100644 Binary files a/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png and b/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png b/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png index 2fa76bfe856..0d32016d0d8 100644 Binary files a/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png and b/cypress/snapshots/b2c/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png differ diff --git a/cypress/snapshots/b2c/Pagination/plasma-new-hope Pagination Content -- setSelect.snap.png b/cypress/snapshots/b2c/Pagination/plasma-new-hope Pagination Content -- setSelect.snap.png index e3f58386ed3..d221bad0586 100644 Binary files a/cypress/snapshots/b2c/Pagination/plasma-new-hope Pagination Content -- setSelect.snap.png and b/cypress/snapshots/b2c/Pagination/plasma-new-hope Pagination Content -- setSelect.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1006] Range firstField clicked.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1006] Range firstField clicked.snap.png index fa15cf6816d..ed51b6d7051 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1006] Range firstField clicked.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1006] Range firstField clicked.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1016] Range secondField clicked.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1016] Range secondField clicked.snap.png index dd15e904749..e2a5cf8cade 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1016] Range secondField clicked.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1016] Range secondField clicked.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png index 84a2b6deae7..5b7af76b255 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png index a6293cb52bc..56b7c484481 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png index 6d2cc060ffc..67e435aaefc 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png index e1961bcd43f..62004e46da2 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1537] Range readOnly.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1537] Range readOnly.snap.png index 7aad4472e8f..0d96c026608 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1537] Range readOnly.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1537] Range readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1538] Range disabled.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1538] Range disabled.snap.png index 1617377fb3e..98aa66984a4 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1538] Range disabled.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-T1538] Range disabled.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png index c3f4b244774..0f5ad479bd1 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png index 31831246d85..21c3c44e2d6 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png index d417b4c42a8..9926d968d4e 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _disabled & _readOnly.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _disabled & _readOnly.snap.png index 60b72f7c1cd..f81175f4f3f 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _disabled & _readOnly.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _disabled & _readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _error & _success.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _error & _success.snap.png index 78f01a1c65d..aa1ef70b852 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _error & _success.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _error & _success.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _required.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _required.snap.png index b6bbf6cb1a0..9cc53b8664b 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _required.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _required.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _size.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _size.snap.png index 90ddeb4d03b..433cbb53f62 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- _size.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple divider as icon.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple divider as icon.snap.png index 9b5a42107a8..ed4e149fbc2 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple divider as icon.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple divider as icon.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple filled value.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple filled value.snap.png index e82f23fa8b3..c0d1e6568de 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple filled value.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple filled value.snap.png differ diff --git a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple.snap.png b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple.snap.png index 1ebf1e67534..e6e7e662f96 100644 Binary files a/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple.snap.png and b/cypress/snapshots/b2c/Range/plasma-b2c Range -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/Rating/plasma-b2c Rating -- size.snap.png b/cypress/snapshots/b2c/Rating/plasma-b2c Rating -- size.snap.png index 2f20c772f75..496f88927a7 100644 Binary files a/cypress/snapshots/b2c/Rating/plasma-b2c Rating -- size.snap.png and b/cypress/snapshots/b2c/Rating/plasma-b2c Rating -- size.snap.png differ diff --git a/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop flip.snap.png b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop flip.snap.png new file mode 100644 index 00000000000..2fd131755ab Binary files /dev/null and b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop flip.snap.png differ diff --git a/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon multiple.snap.png b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon multiple.snap.png new file mode 100644 index 00000000000..62324a4f567 Binary files /dev/null and b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon multiple.snap.png differ diff --git a/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon single.snap.png b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon single.snap.png new file mode 100644 index 00000000000..a72a3cf7682 Binary files /dev/null and b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon single.snap.png differ diff --git a/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon.snap.png b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..580b15c1e7d Binary files /dev/null and b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop shift.snap.png b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop shift.snap.png new file mode 100644 index 00000000000..5ec599a99b0 Binary files /dev/null and b/cypress/snapshots/b2c/Select/plasma-b2c Select -- prop shift.snap.png differ diff --git a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- _size.snap.png b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- _size.snap.png index 19b43f1977d..d86edba2c6c 100644 Binary files a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- _size.snap.png and b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- id.snap.png b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- id.snap.png index 15065e09404..eea6a84407e 100644 Binary files a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- id.snap.png and b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- id.snap.png differ diff --git a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- many colors.snap.png b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- many colors.snap.png index 83a00698ec1..498bb0a1b16 100644 Binary files a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- many colors.snap.png and b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- many colors.snap.png differ diff --git a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- simple.snap.png b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- simple.snap.png index 9bf600bd2a3..db986ecac94 100644 Binary files a/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- simple.snap.png and b/cypress/snapshots/b2c/Spinner/plasma-core Spinner -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png new file mode 100644 index 00000000000..2994fa4915a Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png new file mode 100644 index 00000000000..877a0557192 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png new file mode 100644 index 00000000000..c87cb4d6498 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png new file mode 100644 index 00000000000..a61fee5454d Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png new file mode 100644 index 00000000000..b952cb58b3d Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png new file mode 100644 index 00000000000..86d6fc6080f Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png new file mode 100644 index 00000000000..d88df9978a7 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png new file mode 100644 index 00000000000..cf33eac443e Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png new file mode 100644 index 00000000000..4a97e31d50a Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png new file mode 100644 index 00000000000..278996da774 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png new file mode 100644 index 00000000000..138e5f47c59 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png new file mode 100644 index 00000000000..6b698f32e35 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png new file mode 100644 index 00000000000..cf1e5272977 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png new file mode 100644 index 00000000000..5c3ba5ae497 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png new file mode 100644 index 00000000000..5ebe02ef570 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png new file mode 100644 index 00000000000..297559674e6 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png new file mode 100644 index 00000000000..8e1a5563ff6 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png new file mode 100644 index 00000000000..fa781f46d67 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png new file mode 100644 index 00000000000..e8142f56944 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png new file mode 100644 index 00000000000..80feab202ff Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png new file mode 100644 index 00000000000..49a8bfa53cb Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png new file mode 100644 index 00000000000..bc24eb9fceb Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png new file mode 100644 index 00000000000..c2e82c454d7 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png new file mode 100644 index 00000000000..bdaa1c12c4d Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png new file mode 100644 index 00000000000..d6331b7950a Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png differ diff --git a/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png new file mode 100644 index 00000000000..d2ee773d6a8 Binary files /dev/null and b/cypress/snapshots/b2c/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png differ diff --git a/cypress/snapshots/b2c/Tree/plasma-b2c Tree -- flow async loading.snap.png b/cypress/snapshots/b2c/Tree/plasma-b2c Tree -- flow async loading.snap.png new file mode 100644 index 00000000000..9d0aacd3558 Binary files /dev/null and b/cypress/snapshots/b2c/Tree/plasma-b2c Tree -- flow async loading.snap.png differ diff --git a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @1366px.snap.png b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @1366px.snap.png index 20a3f3e933b..d93f3498fb8 100644 Binary files a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @1366px.snap.png and b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @1366px.snap.png differ diff --git a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @375px.snap.png b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @375px.snap.png index 956538e8dab..7e0e3f1ce13 100644 Binary files a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @375px.snap.png and b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @375px.snap.png differ diff --git a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @768px.snap.png b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @768px.snap.png index 5b1ecfb8b50..fa1740f9ee7 100644 Binary files a/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @768px.snap.png and b/cypress/snapshots/b2c/Typography/plasma-core ResponsiveTypography -- H @768px.snap.png differ diff --git a/cypress/snapshots/cs/Button/sdds-cs Button -- [PLASMA-T1330] Button view=secondary, isLoading.snap.png b/cypress/snapshots/cs/Button/sdds-cs Button -- [PLASMA-T1330] Button view=secondary, isLoading.snap.png index 6119b4b80fa..438063bd102 100644 Binary files a/cypress/snapshots/cs/Button/sdds-cs Button -- [PLASMA-T1330] Button view=secondary, isLoading.snap.png and b/cypress/snapshots/cs/Button/sdds-cs Button -- [PLASMA-T1330] Button view=secondary, isLoading.snap.png differ diff --git a/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop flip.snap.png b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop flip.snap.png new file mode 100644 index 00000000000..453f68642b5 Binary files /dev/null and b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop flip.snap.png differ diff --git a/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop renderSelectionIcon.snap.png b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..33d2063014f Binary files /dev/null and b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop shift.snap.png b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop shift.snap.png new file mode 100644 index 00000000000..38096381843 Binary files /dev/null and b/cypress/snapshots/cs/Combobox/sdds-cs Combobox -- prop shift.snap.png differ diff --git a/cypress/snapshots/cs/DatePicker/sdds-cs DatePickerRange -- [PLASMA-T1803] DatePickerRange readOnly.snap.png b/cypress/snapshots/cs/DatePicker/sdds-cs DatePickerRange -- [PLASMA-T1803] DatePickerRange readOnly.snap.png index 0c129ee9199..6547879e0ea 100644 Binary files a/cypress/snapshots/cs/DatePicker/sdds-cs DatePickerRange -- [PLASMA-T1803] DatePickerRange readOnly.snap.png and b/cypress/snapshots/cs/DatePicker/sdds-cs DatePickerRange -- [PLASMA-T1803] DatePickerRange readOnly.snap.png differ diff --git a/cypress/snapshots/cs/IconButton/sdds-cs IconButton -- [PLASMA-T1400] IconButton isLoading.snap.png b/cypress/snapshots/cs/IconButton/sdds-cs IconButton -- [PLASMA-T1400] IconButton isLoading.snap.png index 59d8985ed66..a74ecfb503c 100644 Binary files a/cypress/snapshots/cs/IconButton/sdds-cs IconButton -- [PLASMA-T1400] IconButton isLoading.snap.png and b/cypress/snapshots/cs/IconButton/sdds-cs IconButton -- [PLASMA-T1400] IconButton isLoading.snap.png differ diff --git a/cypress/snapshots/cs/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png b/cypress/snapshots/cs/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png index 96f2b03aa50..4db5ee88697 100644 Binary files a/cypress/snapshots/cs/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png and b/cypress/snapshots/cs/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png differ diff --git a/cypress/snapshots/cs/NumberInput/sdds-cs NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png b/cypress/snapshots/cs/NumberInput/sdds-cs NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png index 3184724840b..7af2467c39f 100644 Binary files a/cypress/snapshots/cs/NumberInput/sdds-cs NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png and b/cypress/snapshots/cs/NumberInput/sdds-cs NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- behavior nesting lists within scroll.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- behavior nesting lists within scroll.snap.png index b11a61df28a..0886742a3e4 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- behavior nesting lists within scroll.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- behavior nesting lists within scroll.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- flow, multiselect missing value in items.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- flow, multiselect missing value in items.snap.png index 8d521cad862..fed9638759a 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- flow, multiselect missing value in items.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- flow, multiselect missing value in items.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop afterList.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop afterList.snap.png index a0b61349406..ae6ab84c839 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- prop afterList.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop afterList.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop beforeList.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop beforeList.snap.png index fb3979ca459..f5a9b2920f2 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- prop beforeList.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop beforeList.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop flip.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop flip.snap.png new file mode 100644 index 00000000000..3807460a57f Binary files /dev/null and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop flip.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon multiple.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon multiple.snap.png new file mode 100644 index 00000000000..fc405f5d2a7 Binary files /dev/null and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon multiple.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon single.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon single.snap.png new file mode 100644 index 00000000000..e241594c598 Binary files /dev/null and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop renderSelectionIcon single.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop selectAll button.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop selectAll button.snap.png index 84aab560186..5b259a88c49 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- prop selectAll button.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop selectAll button.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- prop shift.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- prop shift.snap.png new file mode 100644 index 00000000000..d92e914791b Binary files /dev/null and b/cypress/snapshots/cs/Select/sdds-cs Select -- prop shift.snap.png differ diff --git a/cypress/snapshots/cs/Select/sdds-cs Select -- snapshot missing value in items.snap.png b/cypress/snapshots/cs/Select/sdds-cs Select -- snapshot missing value in items.snap.png index a12a3f280b2..e74e2fc77ee 100644 Binary files a/cypress/snapshots/cs/Select/sdds-cs Select -- snapshot missing value in items.snap.png and b/cypress/snapshots/cs/Select/sdds-cs Select -- snapshot missing value in items.snap.png differ diff --git a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- LineSkeleton -- _roundness.snap.png b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- LineSkeleton -- _roundness.snap.png index 640290e3938..80ea94bfb04 100644 Binary files a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- LineSkeleton -- _roundness.snap.png and b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- LineSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- RectSkeleton -- _roundness.snap.png b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- RectSkeleton -- _roundness.snap.png index 898bf2aaa27..86e3b386640 100644 Binary files a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- RectSkeleton -- _roundness.snap.png and b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- RectSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- TextSkeleton -- _roundness.snap.png b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- TextSkeleton -- _roundness.snap.png index 8a343539520..98e19c649e1 100644 Binary files a/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- TextSkeleton -- _roundness.snap.png and b/cypress/snapshots/cs/Skeleton/sddds-cs Skeleton -- TextSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- _size.snap.png b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- _size.snap.png index f8a2ed43db9..6b3acd44825 100644 Binary files a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- _size.snap.png and b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- _size.snap.png differ diff --git a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- id.snap.png b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- id.snap.png index 5c574f61ac3..1112748bad7 100644 Binary files a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- id.snap.png and b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- id.snap.png differ diff --git a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- many colors.snap.png b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- many colors.snap.png index aa799c443f4..19010d14846 100644 Binary files a/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- many colors.snap.png and b/cypress/snapshots/cs/Spinner/sdds-cs Spinner -- many colors.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2299] TimePicker size=s, enableContentLeft, enableContentRight.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2299] TimePicker size=s, enableContentLeft, enableContentRight.snap.png new file mode 100644 index 00000000000..02265ca079f Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2299] TimePicker size=s, enableContentLeft, enableContentRight.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2300] TimePicker size=s, enableContentRight.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2300] TimePicker size=s, enableContentRight.snap.png new file mode 100644 index 00000000000..868f336822b Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2300] TimePicker size=s, enableContentRight.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2301] TimePicker size=s, enableContentLeft.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2301] TimePicker size=s, enableContentLeft.snap.png new file mode 100644 index 00000000000..3b64caa45c5 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2301] TimePicker size=s, enableContentLeft.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png new file mode 100644 index 00000000000..86c33aa869d Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png new file mode 100644 index 00000000000..d64940c0525 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png new file mode 100644 index 00000000000..89f9f4208a7 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2306] TimePicker readOnly.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2306] TimePicker readOnly.snap.png new file mode 100644 index 00000000000..e18d44826e4 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2306] TimePicker readOnly.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2307] TimePicker disabled.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2307] TimePicker disabled.snap.png new file mode 100644 index 00000000000..d85388b1299 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2307] TimePicker disabled.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png new file mode 100644 index 00000000000..20bac2228ce Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png new file mode 100644 index 00000000000..b6f07dce5a7 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png differ diff --git a/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png new file mode 100644 index 00000000000..ecbc63e8aa7 Binary files /dev/null and b/cypress/snapshots/cs/TimePicker/sdds-cs TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png differ diff --git a/cypress/snapshots/cs/Tree/sdds-cs Tree -- flow async loading.snap.png b/cypress/snapshots/cs/Tree/sdds-cs Tree -- flow async loading.snap.png new file mode 100644 index 00000000000..dfd5cc74f20 Binary files /dev/null and b/cypress/snapshots/cs/Tree/sdds-cs Tree -- flow async loading.snap.png differ diff --git a/cypress/snapshots/giga/Button/plasma-giga Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png b/cypress/snapshots/giga/Button/plasma-giga Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png index 96d5ddf8daf..82456887364 100644 Binary files a/cypress/snapshots/giga/Button/plasma-giga Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png and b/cypress/snapshots/giga/Button/plasma-giga Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop flip.snap.png b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop flip.snap.png new file mode 100644 index 00000000000..dd78ac530d7 Binary files /dev/null and b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop flip.snap.png differ diff --git a/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop renderSelectionIcon.snap.png b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..9cc83a60012 Binary files /dev/null and b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop shift.snap.png b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop shift.snap.png new file mode 100644 index 00000000000..b9ba80e794e Binary files /dev/null and b/cypress/snapshots/giga/Combobox/plasma-giga Combobox -- prop shift.snap.png differ diff --git a/cypress/snapshots/giga/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/giga/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png index 0a179b982e3..3597fccddd3 100644 Binary files a/cypress/snapshots/giga/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/giga/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/giga/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/giga/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png index 48533c54b30..a13e3c7817a 100644 Binary files a/cypress/snapshots/giga/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/giga/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png index c3b95367287..29d13a4ef1d 100644 Binary files a/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- with Loader.snap.png b/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- with Loader.snap.png index aef36a3ab27..3908ca9829d 100644 Binary files a/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- with Loader.snap.png and b/cypress/snapshots/giga/LinkButton/plasma-giga LinkButton -- with Loader.snap.png differ diff --git a/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png new file mode 100644 index 00000000000..242802a9494 Binary files /dev/null and b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png differ diff --git a/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png new file mode 100644 index 00000000000..228ff26fabf Binary files /dev/null and b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png differ diff --git a/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List focused ListItem.snap.png b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List focused ListItem.snap.png new file mode 100644 index 00000000000..d5b9a00bd0e Binary files /dev/null and b/cypress/snapshots/giga/List/plasma-giga List -- [PLASMA-] List focused ListItem.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner, size=xl.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner, size=xl.snap.png index c8265dcd090..94db25443d0 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner, size=xl.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner, size=xl.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner.snap.png index 09d83776666..4773e221d9a 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- Loader default type=spinner.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png index 9ad9349f8df..af7f3751b0e 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png index 367e9fce812..f8b4233041a 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png index 2594638e272..5ea5d47b224 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png index 1c0f100ea7a..c00b3678330 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png index 38f2fe4d3fb..9fecb12140a 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png index 4cf76b7f6d1..9466fa151c1 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png differ diff --git a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png index 1e037cee319..01db06c2925 100644 Binary files a/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png and b/cypress/snapshots/giga/Loader/plasma-giga Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png differ diff --git a/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png b/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png index 13236d82ba3..250184a6138 100644 Binary files a/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png and b/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png differ diff --git a/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- isLoading.snap.png b/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- isLoading.snap.png index df0ed586caf..01764dc3ca7 100644 Binary files a/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- isLoading.snap.png and b/cypress/snapshots/giga/NumberInput/plasma-giga NumberInput -- isLoading.snap.png differ diff --git a/cypress/snapshots/giga/Pagination/plasma-giga Pagination Content -- setSelect.snap.png b/cypress/snapshots/giga/Pagination/plasma-giga Pagination Content -- setSelect.snap.png index 0323653d4d6..ecda8acc584 100644 Binary files a/cypress/snapshots/giga/Pagination/plasma-giga Pagination Content -- setSelect.snap.png and b/cypress/snapshots/giga/Pagination/plasma-giga Pagination Content -- setSelect.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- Range size=xl.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- Range size=xl.snap.png index c3be9ea2a34..03df2b58d9c 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- Range size=xl.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- Range size=xl.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1006] Range firstField clicked.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1006] Range firstField clicked.snap.png index 5a1f476de41..2468394e627 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1006] Range firstField clicked.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1006] Range firstField clicked.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1016] Range secondField clicked.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1016] Range secondField clicked.snap.png index 747e27f914b..d94f77ac5b6 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1016] Range secondField clicked.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1016] Range secondField clicked.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png index f8d595f03af..cae55590a7d 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png index 12017ac242c..ff3930de185 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png index f52ed8e5a21..c553bffa04e 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png index df4a71ab991..17ec1c926b8 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1537] Range readOnly.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1537] Range readOnly.snap.png index d3b63e5b99f..4247f748df0 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1537] Range readOnly.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1537] Range readOnly.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1538] Range disabled.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1538] Range disabled.snap.png index cf3b0d4e2ee..ba4c554aa13 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1538] Range disabled.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-T1538] Range disabled.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png index b8507b5c821..045071ceddb 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png index 81b836e5e3e..40b248e9f92 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png index e7b518f897f..d94410de02e 100644 Binary files a/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png and b/cypress/snapshots/giga/Range/plasma-giga Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png differ diff --git a/cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png b/cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png index 936e7b06a89..b11eac3d099 100644 Binary files a/cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png and b/cypress/snapshots/giga/Rating/plasma-giga Rating -- size.snap.png differ diff --git a/cypress/snapshots/giga/Select/plasma-giga Select -- prop flip.snap.png b/cypress/snapshots/giga/Select/plasma-giga Select -- prop flip.snap.png new file mode 100644 index 00000000000..49d17dbf22d Binary files /dev/null and b/cypress/snapshots/giga/Select/plasma-giga Select -- prop flip.snap.png differ diff --git a/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon multiple.snap.png b/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon multiple.snap.png new file mode 100644 index 00000000000..655753df2e6 Binary files /dev/null and b/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon multiple.snap.png differ diff --git a/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon single.snap.png b/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon single.snap.png new file mode 100644 index 00000000000..fb5f10e1bfa Binary files /dev/null and b/cypress/snapshots/giga/Select/plasma-giga Select -- prop renderSelectionIcon single.snap.png differ diff --git a/cypress/snapshots/giga/Select/plasma-giga Select -- prop shift.snap.png b/cypress/snapshots/giga/Select/plasma-giga Select -- prop shift.snap.png new file mode 100644 index 00000000000..845230e79b4 Binary files /dev/null and b/cypress/snapshots/giga/Select/plasma-giga Select -- prop shift.snap.png differ diff --git a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png index ed7709368fa..0d31dc8d8fc 100644 Binary files a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png and b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png index 12941fc81df..60acd0de5fd 100644 Binary files a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png and b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png index 00806cf9a9e..9436a4a9449 100644 Binary files a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png and b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png index f3c3d038077..5c450de6b06 100644 Binary files a/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png and b/cypress/snapshots/giga/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- _size.snap.png b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- _size.snap.png index 4ee79935c02..7c38a6df7bf 100644 Binary files a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- _size.snap.png and b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- _size.snap.png differ diff --git a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- id.snap.png b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- id.snap.png index 551e6d55ae9..07113b38d3d 100644 Binary files a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- id.snap.png and b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- id.snap.png differ diff --git a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- many colors.snap.png b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- many colors.snap.png index 2d136b95f42..11866e435cd 100644 Binary files a/cypress/snapshots/giga/Spinner/plasma-core Spinner -- many colors.snap.png and b/cypress/snapshots/giga/Spinner/plasma-core Spinner -- many colors.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png new file mode 100644 index 00000000000..86424e67f22 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png new file mode 100644 index 00000000000..a5a82ec74e6 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png new file mode 100644 index 00000000000..66862272980 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png new file mode 100644 index 00000000000..f20bfd7588d Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png new file mode 100644 index 00000000000..f45167f4560 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png new file mode 100644 index 00000000000..70239f838b3 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png new file mode 100644 index 00000000000..1f34c8883ed Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png new file mode 100644 index 00000000000..c19ae4daf28 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png new file mode 100644 index 00000000000..8f421e3d219 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png new file mode 100644 index 00000000000..45b3b2dc7d6 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png new file mode 100644 index 00000000000..aabb26c8d56 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png new file mode 100644 index 00000000000..a2f3bf46a90 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png new file mode 100644 index 00000000000..aee1892e266 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png new file mode 100644 index 00000000000..9c4d2f26f0f Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png new file mode 100644 index 00000000000..80b9efa26e7 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png new file mode 100644 index 00000000000..7fe95bfdf82 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png new file mode 100644 index 00000000000..d7705e7e492 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png new file mode 100644 index 00000000000..27e3207453c Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png new file mode 100644 index 00000000000..5b99e32eb6b Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png new file mode 100644 index 00000000000..a6371b18b4c Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png new file mode 100644 index 00000000000..b0d784355d3 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png new file mode 100644 index 00000000000..9a514ab43cd Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png new file mode 100644 index 00000000000..6a042dfdb81 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png new file mode 100644 index 00000000000..8154d7851ed Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png new file mode 100644 index 00000000000..248ccbb70f9 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png differ diff --git a/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png new file mode 100644 index 00000000000..b1a3a18a897 Binary files /dev/null and b/cypress/snapshots/giga/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- input time.snap.png b/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- input time.snap.png index b2600b4e9e4..0db9475532a 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- input time.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- input time.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png b/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png index 2bb9ab02ff1..679071b8531 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png index 858f767a8be..163256af8fd 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png index 3aa5ecc75a1..e2a6dc55515 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png index 2b66cd508a4..20659d4492d 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png index 0df13d01deb..5014509e8d6 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png index 8db037e11b6..975e3044956 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png differ diff --git a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png index 182451ee47c..8c5d7c84116 100644 Binary files a/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png and b/cypress/snapshots/giga/TimePicker/plasma-giga TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png differ diff --git a/cypress/snapshots/giga/Tree/plasma-giga Tree -- flow async loading.snap.png b/cypress/snapshots/giga/Tree/plasma-giga Tree -- flow async loading.snap.png new file mode 100644 index 00000000000..95bc266c494 Binary files /dev/null and b/cypress/snapshots/giga/Tree/plasma-giga Tree -- flow async loading.snap.png differ diff --git a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @1366px.snap.png b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @1366px.snap.png index f426d6b2cdb..4a36027c9ee 100644 Binary files a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @1366px.snap.png and b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @1366px.snap.png differ diff --git a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @375px.snap.png b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @375px.snap.png index 8b8d3092360..0bb9a8aa45e 100644 Binary files a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @375px.snap.png and b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @375px.snap.png differ diff --git a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @768px.snap.png b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @768px.snap.png index b04694c4c26..597daab3c9e 100644 Binary files a/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @768px.snap.png and b/cypress/snapshots/giga/Typography/plasma-giga ResponsiveTypography -- H @768px.snap.png differ diff --git a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- default.snap.png b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- default.snap.png index 9b599983d84..632dab5fe07 100644 Binary files a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- default.snap.png and b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- default.snap.png differ diff --git a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listMaxHeight.snap.png b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listMaxHeight.snap.png index bf36df77ecb..9a4f986d14e 100644 Binary files a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listMaxHeight.snap.png and b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listMaxHeight.snap.png differ diff --git a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listWidth.snap.png b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listWidth.snap.png index 24d90216725..ecbedbdb739 100644 Binary files a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listWidth.snap.png and b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop readOnly.snap.png b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop readOnly.snap.png index 910ba7961c9..67f21f572e2 100644 Binary files a/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop readOnly.snap.png and b/cypress/snapshots/insol/Autocomplete/sdds-insol Autocomplete -- prop readOnly.snap.png differ diff --git a/cypress/snapshots/insol/Button/sdds-insol Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png b/cypress/snapshots/insol/Button/sdds-insol Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png index 0c7797e4707..26de66249f0 100644 Binary files a/cypress/snapshots/insol/Button/sdds-insol Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png and b/cypress/snapshots/insol/Button/sdds-insol Button -- [PLASMA-T1330] Button size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- common readOnly.snap.png b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- common readOnly.snap.png index 72f635a7148..a7a3f11b716 100644 Binary files a/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- common readOnly.snap.png and b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- common readOnly.snap.png differ diff --git a/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop flip.snap.png b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop flip.snap.png new file mode 100644 index 00000000000..8e220ec1199 Binary files /dev/null and b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop flip.snap.png differ diff --git a/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop renderSelectionIcon.snap.png b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..0045fd4ca74 Binary files /dev/null and b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop shift.snap.png b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop shift.snap.png new file mode 100644 index 00000000000..e2f30217be4 Binary files /dev/null and b/cypress/snapshots/insol/Combobox/sdds-insol Combobox -- prop shift.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png index c639e2e053f..88057b9561b 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2361] DateTimePicker input masked date and time.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2361] DateTimePicker input masked date and time.snap.png index 9db3debb834..86192e4da7e 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2361] DateTimePicker input masked date and time.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- [PLASMA-T2361] DateTimePicker input masked date and time.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop disabled, readOnly.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop disabled, readOnly.snap.png index 710f80223d6..cf16c604ad2 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop disabled, readOnly.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop label, leftHelper, placeholder.snap.png index 8d0dbc711f3..8d84305db78 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop label, leftHelper, placeholder.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size m.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size m.snap.png index d4a7e9da980..0aee6962a93 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size m.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size m.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size s.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size s.snap.png index d5c30f6b717..15b5708d0a4 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size s.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size s.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size xs.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size xs.snap.png index bbe8c2029fe..ea222592734 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size xs.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop size xs.snap.png differ diff --git a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop stretch.snap.png b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop stretch.snap.png index 9cc922f86d7..f7ca2fa6d68 100644 Binary files a/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop stretch.snap.png and b/cypress/snapshots/insol/DateTimePicker/sdds-insol DateTimePicker -- prop stretch.snap.png differ diff --git a/cypress/snapshots/insol/EmbedIconButton/sdds-insol EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/insol/EmbedIconButton/sdds-insol EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png index c93bf73c632..68ba81f2a63 100644 Binary files a/cypress/snapshots/insol/EmbedIconButton/sdds-insol EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/insol/EmbedIconButton/sdds-insol EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/insol/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/insol/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png index db45b47c805..8b57ae28936 100644 Binary files a/cypress/snapshots/insol/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/insol/IconButton/plasma-b2c IconButton -- [PLASMA-T1400] IconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png index a041f7f2cfa..f812c291609 100644 Binary files a/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- with Loader.snap.png b/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- with Loader.snap.png index 4aeaa0449c5..a767958bc8c 100644 Binary files a/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- with Loader.snap.png and b/cypress/snapshots/insol/LinkButton/sdds-insol LinkButton -- with Loader.snap.png differ diff --git a/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png new file mode 100644 index 00000000000..6b95bf7805b Binary files /dev/null and b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png differ diff --git a/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png new file mode 100644 index 00000000000..dc424a91086 Binary files /dev/null and b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png differ diff --git a/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List focused ListItem.snap.png b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List focused ListItem.snap.png new file mode 100644 index 00000000000..ce22b9a7fe5 Binary files /dev/null and b/cypress/snapshots/insol/List/sdds-insol List -- [PLASMA-] List focused ListItem.snap.png differ diff --git a/cypress/snapshots/insol/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png b/cypress/snapshots/insol/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png index 33e81847318..b1f47a966c2 100644 Binary files a/cypress/snapshots/insol/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png and b/cypress/snapshots/insol/NumberInput/plasma-b2c NumberInput -- isLoading.snap.png differ diff --git a/cypress/snapshots/insol/NumberInput/sdds-insol NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png b/cypress/snapshots/insol/NumberInput/sdds-insol NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png index 92fef16bfdc..184f21eba1e 100644 Binary files a/cypress/snapshots/insol/NumberInput/sdds-insol NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png and b/cypress/snapshots/insol/NumberInput/sdds-insol NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png differ diff --git a/cypress/snapshots/insol/Pagination/sdds-insol Pagination Content -- setSelect.snap.png b/cypress/snapshots/insol/Pagination/sdds-insol Pagination Content -- setSelect.snap.png index ee556219672..daacf92ef06 100644 Binary files a/cypress/snapshots/insol/Pagination/sdds-insol Pagination Content -- setSelect.snap.png and b/cypress/snapshots/insol/Pagination/sdds-insol Pagination Content -- setSelect.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1006] Range firstField clicked.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1006] Range firstField clicked.snap.png index 4860b4f411f..089d341f668 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1006] Range firstField clicked.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1006] Range firstField clicked.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1016] Range secondField clicked.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1016] Range secondField clicked.snap.png index 44197e26407..c50bacd1230 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1016] Range secondField clicked.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1016] Range secondField clicked.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png index e62e4c423f6..3d35ee29526 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1383] Range size=l, dividerVariant=none.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png index 1de37f85870..64f8b3480f8 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1533] Range size=xs, firstValueSuccess.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png index 8cb6664e030..9ab117d77f1 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1534] Range secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png index 8570ccaf637..f63451a034c 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1535] Range firstValueError, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1537] Range readOnly.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1537] Range readOnly.snap.png index 80486fba9bd..95dc3360ceb 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1537] Range readOnly.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1537] Range readOnly.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1538] Range disabled.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1538] Range disabled.snap.png index c9d3c2567dc..3ebb9326d0d 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1538] Range disabled.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-T1538] Range disabled.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png index ea7fb607cbf..fb2934f3d9a 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png index 5c6806001f9..4d7f460e208 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png index 518fbd88f82..030c21f8803 100644 Binary files a/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png and b/cypress/snapshots/insol/Range/sdds-insol Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png differ diff --git a/cypress/snapshots/insol/Rating/sdds-insol Rating -- size.snap.png b/cypress/snapshots/insol/Rating/sdds-insol Rating -- size.snap.png index 4a1696d66be..a2bbc47c826 100644 Binary files a/cypress/snapshots/insol/Rating/sdds-insol Rating -- size.snap.png and b/cypress/snapshots/insol/Rating/sdds-insol Rating -- size.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png index 455b515bf91..e90cd9d0fe9 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png index 4e8d9f04d09..43bbd14cc87 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png index d816a53dd85..adeecf31485 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png index 87971c326ea..84859076469 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- behavior nesting lists within scroll.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- behavior nesting lists within scroll.snap.png index a8d430dfa83..a774d7fd41b 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- behavior nesting lists within scroll.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- behavior nesting lists within scroll.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- default.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- default.snap.png index 6ddafb12992..6022f3504cc 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- default.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- default.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop afterList.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop afterList.snap.png index de3d7bc8c80..707d6f79a17 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop afterList.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop afterList.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop beforeList.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop beforeList.snap.png index c4d1014c233..e03abcc538e 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop beforeList.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop beforeList.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView accent.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView accent.snap.png index 28c67896ef9..d9a853c9f84 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView accent.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView secondary.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView secondary.snap.png index dd61594b76b..9f552b5e1ca 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView secondary.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop contentLeft.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop contentLeft.snap.png index 9fe92ea1283..b6ae8e01702 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop contentLeft.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop flip.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop flip.snap.png new file mode 100644 index 00000000000..a13376e96ab Binary files /dev/null and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop flip.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop isTargetAmount.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop isTargetAmount.snap.png index 17b0a09c20e..144488d04fc 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop isTargetAmount.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop labelPlacement.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop labelPlacement.snap.png index dc7c9c97a00..33149545d3e 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop labelPlacement.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon multiple.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon multiple.snap.png new file mode 100644 index 00000000000..ff7442a05b8 Binary files /dev/null and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon multiple.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon single.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon single.snap.png new file mode 100644 index 00000000000..d0e9604e260 Binary files /dev/null and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop renderSelectionIcon single.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop selectAll button.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop selectAll button.snap.png index 93f212491ae..bb585768355 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop selectAll button.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop selectAll button.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop shift.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop shift.snap.png new file mode 100644 index 00000000000..f4bb786837e Binary files /dev/null and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop shift.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size l.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size l.snap.png index dc00a731b9e..58eabeb13b6 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size l.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size l.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size m.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size m.snap.png index 6ddafb12992..6022f3504cc 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size m.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size m.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size s.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size s.snap.png index d808faeb2ba..67bdc128905 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size s.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size s.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xl.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xl.snap.png index 9876138c536..046b4c8bc7d 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xl.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xl.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xs.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xs.snap.png index 6e18781f113..7cfb0227977 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xs.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop size xs.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, multiple mode.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, multiple mode.snap.png index 0d4f0a1e974..24e2b13f118 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, multiple mode.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, multiple mode.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, single mode.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, single mode.snap.png index be948869777..b290ce37571 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, single mode.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- prop treeView, single mode.snap.png differ diff --git a/cypress/snapshots/insol/Select/sdds-insol Select -- snapshot missing value in items.snap.png b/cypress/snapshots/insol/Select/sdds-insol Select -- snapshot missing value in items.snap.png index 2b17fafdb86..40246ecfc4d 100644 Binary files a/cypress/snapshots/insol/Select/sdds-insol Select -- snapshot missing value in items.snap.png and b/cypress/snapshots/insol/Select/sdds-insol Select -- snapshot missing value in items.snap.png differ diff --git a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png index fa048bdd9bc..3849aa6b583 100644 Binary files a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png and b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png index f1f1524d9c9..f14d3446a06 100644 Binary files a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png and b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- LineSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png index 6f75482f819..1baa2cd24a3 100644 Binary files a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png and b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- RectSkeleton -- _roundness.snap.png differ diff --git a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png index 1a64c86b144..a64d8164c4d 100644 Binary files a/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png and b/cypress/snapshots/insol/Skeleton/plasma-core Skeleton -- TextSkeleton -- _size.snap.png differ diff --git a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- _size.snap.png b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- _size.snap.png index f9073da2432..a99db16c455 100644 Binary files a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- _size.snap.png and b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- _size.snap.png differ diff --git a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- id.snap.png b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- id.snap.png index 842e569cd42..809594cdfa6 100644 Binary files a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- id.snap.png and b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- id.snap.png differ diff --git a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- many colors.snap.png b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- many colors.snap.png index 2f6b3f0bd79..43d15c04e86 100644 Binary files a/cypress/snapshots/insol/Spinner/plasma-core Spinner -- many colors.snap.png and b/cypress/snapshots/insol/Spinner/plasma-core Spinner -- many colors.snap.png differ diff --git a/cypress/snapshots/insol/Tree/sdds-insol Tree -- flow async loading.snap.png b/cypress/snapshots/insol/Tree/sdds-insol Tree -- flow async loading.snap.png new file mode 100644 index 00000000000..849db963c2f Binary files /dev/null and b/cypress/snapshots/insol/Tree/sdds-insol Tree -- flow async loading.snap.png differ diff --git a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @1366px.snap.png b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @1366px.snap.png index 09bfa4424b8..31e24f506bb 100644 Binary files a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @1366px.snap.png and b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @1366px.snap.png differ diff --git a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @375px.snap.png b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @375px.snap.png index d88323c334f..6782b3cb6ca 100644 Binary files a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @375px.snap.png and b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @375px.snap.png differ diff --git a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @768px.snap.png b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @768px.snap.png index bf69a4660ad..e6583ae9d34 100644 Binary files a/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @768px.snap.png and b/cypress/snapshots/insol/Typography/sdds-insol ResponsiveTypography -- H @768px.snap.png differ diff --git a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- default.snap.png b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- default.snap.png index 4068a42bda4..c3cf00fe8fe 100644 Binary files a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- default.snap.png and b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- default.snap.png differ diff --git a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listMaxHeight.snap.png b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listMaxHeight.snap.png index bad129a4f0e..7ff61eb01cf 100644 Binary files a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listMaxHeight.snap.png and b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listMaxHeight.snap.png differ diff --git a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listWidth.snap.png b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listWidth.snap.png index 1f0382230b3..96dfceaf9eb 100644 Binary files a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listWidth.snap.png and b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop readOnly.snap.png b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop readOnly.snap.png index f2d90773c6a..bc6848f33b2 100644 Binary files a/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop readOnly.snap.png and b/cypress/snapshots/web/Autocomplete/plasma-web Autocomplete -- prop readOnly.snap.png differ diff --git a/cypress/snapshots/web/Button/plasma-web Button -- with Loader.snap.png b/cypress/snapshots/web/Button/plasma-web Button -- with Loader.snap.png index 02ff01d47ea..33105b65922 100644 Binary files a/cypress/snapshots/web/Button/plasma-web Button -- with Loader.snap.png and b/cypress/snapshots/web/Button/plasma-web Button -- with Loader.snap.png differ diff --git a/cypress/snapshots/web/Combobox/plasma-web Combobox -- common readOnly.snap.png b/cypress/snapshots/web/Combobox/plasma-web Combobox -- common readOnly.snap.png index 70e164488d5..156a3cbb45d 100644 Binary files a/cypress/snapshots/web/Combobox/plasma-web Combobox -- common readOnly.snap.png and b/cypress/snapshots/web/Combobox/plasma-web Combobox -- common readOnly.snap.png differ diff --git a/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop flip.snap.png b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop flip.snap.png new file mode 100644 index 00000000000..f57ef9f5af2 Binary files /dev/null and b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop flip.snap.png differ diff --git a/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop renderSelectionIcon.snap.png b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop renderSelectionIcon.snap.png new file mode 100644 index 00000000000..6963d895458 Binary files /dev/null and b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop renderSelectionIcon.snap.png differ diff --git a/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop shift.snap.png b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop shift.snap.png new file mode 100644 index 00000000000..1d23059966e Binary files /dev/null and b/cypress/snapshots/web/Combobox/plasma-web Combobox -- prop shift.snap.png differ diff --git a/cypress/snapshots/web/DatePicker/plasma-web DatePicker -- prop disabled, readOnly.snap.png b/cypress/snapshots/web/DatePicker/plasma-web DatePicker -- prop disabled, readOnly.snap.png index 53fc088016d..4fd1d9126bc 100644 Binary files a/cypress/snapshots/web/DatePicker/plasma-web DatePicker -- prop disabled, readOnly.snap.png and b/cypress/snapshots/web/DatePicker/plasma-web DatePicker -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/web/DatePicker/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png b/cypress/snapshots/web/DatePicker/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png index 9fc41cd65c7..40290f19819 100644 Binary files a/cypress/snapshots/web/DatePicker/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png and b/cypress/snapshots/web/DatePicker/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png index 5012802e4d2..8f869125a88 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2348] DateTimePicker readOnly.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2349] DateTimePicker lang=ru.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2349] DateTimePicker lang=ru.snap.png index be7d76e5a7f..9706f2ebf03 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2349] DateTimePicker lang=ru.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2349] DateTimePicker lang=ru.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2350] DateTimePicker lang=en, isDouble.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2350] DateTimePicker lang=en, isDouble.snap.png index e43d9672a57..6fef0e16215 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2350] DateTimePicker lang=en, isDouble.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2350] DateTimePicker lang=en, isDouble.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2351] DateTimePicker input date and time.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2351] DateTimePicker input date and time.snap.png index d4500ba9cd0..930a816375a 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2351] DateTimePicker input date and time.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2351] DateTimePicker input date and time.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2365] DateTimePicker calendarContainerWidth, calendarContainerHeight.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2365] DateTimePicker calendarContainerWidth, calendarContainerHeight.snap.png index 94e827dd8be..09fea91cf22 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2365] DateTimePicker calendarContainerWidth, calendarContainerHeight.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- [PLASMA-T2365] DateTimePicker calendarContainerWidth, calendarContainerHeight.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop disabled, readOnly.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop disabled, readOnly.snap.png index ade7d94e5c8..c1452ab60ef 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop disabled, readOnly.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop label, leftHelper, placeholder.snap.png index 85dd9a6235f..82b782e074f 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop label, leftHelper, placeholder.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size m.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size m.snap.png index 00570490f9c..f8c4cbda5ec 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size m.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size s.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size s.snap.png index f8e91b51df4..40c8fa00b29 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size s.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size xs.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size xs.snap.png index 8a73e66c8a0..258f778d4ed 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size xs.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop stretch.snap.png b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop stretch.snap.png index d2c0065fb92..0da42c9b241 100644 Binary files a/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop stretch.snap.png and b/cypress/snapshots/web/DateTimePicker/plasma-web DateTimePicker -- prop stretch.snap.png differ diff --git a/cypress/snapshots/web/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/web/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png index 844745da473..efd5598db74 100644 Binary files a/cypress/snapshots/web/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/web/EmbedIconButton/plasma-b2c EmbedIconButton -- [PLASMA-T1400] EmbedIconButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/web/IconButton/plasma-web IconButton -- with Loader.snap.png b/cypress/snapshots/web/IconButton/plasma-web IconButton -- with Loader.snap.png index 32ac5d9bbe8..b9b4dc7dc56 100644 Binary files a/cypress/snapshots/web/IconButton/plasma-web IconButton -- with Loader.snap.png and b/cypress/snapshots/web/IconButton/plasma-web IconButton -- with Loader.snap.png differ diff --git a/cypress/snapshots/web/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png b/cypress/snapshots/web/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png index 284f64ad64f..79e06ab06ae 100644 Binary files a/cypress/snapshots/web/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png and b/cypress/snapshots/web/LinkButton/plasma-b2c LinkButton -- with Loader.snap.png differ diff --git a/cypress/snapshots/web/LinkButton/plasma-web LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png b/cypress/snapshots/web/LinkButton/plasma-web LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png index 1380d52d7b5..100753c2f49 100644 Binary files a/cypress/snapshots/web/LinkButton/plasma-web LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png and b/cypress/snapshots/web/LinkButton/plasma-web LinkButton -- [PLASMA-T1467] LinkButton size=l, view=default, isLoading.snap.png differ diff --git a/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png new file mode 100644 index 00000000000..9013bf58486 Binary files /dev/null and b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled List.snap.png differ diff --git a/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png new file mode 100644 index 00000000000..9620316f014 Binary files /dev/null and b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List cannot focus ListItem if disabled ListItem.snap.png differ diff --git a/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List focused ListItem.snap.png b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List focused ListItem.snap.png new file mode 100644 index 00000000000..abcc98992ac Binary files /dev/null and b/cypress/snapshots/web/List/plasma-web List -- [PLASMA-] List focused ListItem.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner, size=xl.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner, size=xl.snap.png index 5ade203463d..c6b50c38233 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner, size=xl.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner, size=xl.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner.snap.png index 7ff2305ef81..07f3ddf0265 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- Loader default type=spinner.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png index 804ce7623f6..355ff7ffb49 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2396] Loader type=spinner, view=default, size=l.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png index ad5546ed3ee..38a9c7e9e55 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2397] Loader type=spinner, view=accent, size=m.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png index 228d9150444..bf4b7622289 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2398] Loader type=spinner, view=secondary, size=s.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png index 4366e19f3c9..3f6a01dc00d 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2399] Loader type=spinner, view=warning, size=l.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png index 38f2fe4d3fb..9fecb12140a 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2400] Loader type=spinner, view=positive.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png index 1b08642d200..85030c6df41 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2401] Loader type=spinner, view=negative.snap.png differ diff --git a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png index ad5546ed3ee..38a9c7e9e55 100644 Binary files a/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png and b/cypress/snapshots/web/Loader/plasma-web Loader -- [PLASMA-T2402] Loader type=spinner, view=info.snap.png differ diff --git a/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png b/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png index 2b27ea8e72f..f507c1cbae6 100644 Binary files a/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png and b/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- [PLASMA-T1677] NumberInput isLoading.snap.png differ diff --git a/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- isLoading.snap.png b/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- isLoading.snap.png index 723f882054e..4c7585858d1 100644 Binary files a/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- isLoading.snap.png and b/cypress/snapshots/web/NumberInput/plasma-web NumberInput -- isLoading.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png index d720293544e..4b64d1820c7 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueError, secondValueError.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png index bfcb6c54a40..30ec53f9afb 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, firstValueSuccess, secondValueSuccess.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png index 71455a01493..111c37bfa70 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- [PLASMA-] Range appearance=clear, hasClearDivider.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- _disabled & _readOnly.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- _disabled & _readOnly.snap.png index eb9d90fac10..01937d9a5f0 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- _disabled & _readOnly.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- _disabled & _readOnly.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- _error & _success.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- _error & _success.snap.png index ce60e9b76b0..9915329847e 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- _error & _success.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- _error & _success.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- _required.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- _required.snap.png index fa01af9f8c2..c6d90d0b78e 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- _required.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- _required.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- _size.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- _size.snap.png index 86123242dad..679ad30aa8b 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- _size.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- _size.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- simple divider as icon.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- simple divider as icon.snap.png index bf38f4af3a8..15189f94e8c 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- simple divider as icon.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- simple divider as icon.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- simple filled value.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- simple filled value.snap.png index 33062099693..e0149e66270 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- simple filled value.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- simple filled value.snap.png differ diff --git a/cypress/snapshots/web/Range/plasma-web Range -- simple.snap.png b/cypress/snapshots/web/Range/plasma-web Range -- simple.snap.png index 56b18cb8a34..b24dbc8afca 100644 Binary files a/cypress/snapshots/web/Range/plasma-web Range -- simple.snap.png and b/cypress/snapshots/web/Range/plasma-web Range -- simple.snap.png differ diff --git a/cypress/snapshots/web/Rating/plasma-b2c Rating -- size.snap.png b/cypress/snapshots/web/Rating/plasma-b2c Rating -- size.snap.png index 444fc50ed83..7e412caa557 100644 Binary files a/cypress/snapshots/web/Rating/plasma-b2c Rating -- size.snap.png and b/cypress/snapshots/web/Rating/plasma-b2c Rating -- size.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png index d6b062914e5..e138595657d 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2328] Select treeView, arrowPlacement=left.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png index 10e7efe7ab1..d59e9941a21 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2329] Select treeView, arrowPlacement=right.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png index 1af37029f2b..91af2fd484f 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2330] Multiselect treeView, arrowPlacement=left.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png index d47469a9baa..9ccd90a6511 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- [PLASMA-T2331] Multiselect treeView, multiSelect arrowPlacement=right.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- behavior nesting lists within scroll.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- behavior nesting lists within scroll.snap.png index 91f67f7eb9b..b60c0515358 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- behavior nesting lists within scroll.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- behavior nesting lists within scroll.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- behaviour isTargetAmount.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- behaviour isTargetAmount.snap.png index ee6b7cf00fd..5238b79c83c 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- behaviour isTargetAmount.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- behaviour isTargetAmount.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- default.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- default.snap.png index 6b0219a34f8..223e504b761 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- default.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- default.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- flow, multiselect missing value in items.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- flow, multiselect missing value in items.snap.png index 4065197cbf0..84695617a3f 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- flow, multiselect missing value in items.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- flow, multiselect missing value in items.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- flow, single missing value in items.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- flow, single missing value in items.snap.png index e80a08dd288..372749f01b5 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- flow, single missing value in items.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- flow, single missing value in items.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop afterList.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop afterList.snap.png index 9855300348b..28002dc5f30 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop afterList.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop afterList.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop beforeList.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop beforeList.snap.png index cf733db89cf..321e10748ee 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop beforeList.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop beforeList.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop chipType.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop chipType.snap.png index 7ef425eef90..5a765b90c3f 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop chipType.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop chipType.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop chipView accent.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop chipView accent.snap.png index 9e90aa7893a..7b9e0be86bb 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop chipView accent.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop chipView secondary.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop chipView secondary.snap.png index ae93247f8df..13997ec446c 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop chipView secondary.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop contentLeft.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop contentLeft.snap.png index b3464a3910e..9a5039876e4 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop contentLeft.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop flip.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop flip.snap.png new file mode 100644 index 00000000000..312af6bc3ac Binary files /dev/null and b/cypress/snapshots/web/Select/plasma-web Select -- prop flip.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop isTargetAmount.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop isTargetAmount.snap.png index 0d03c86a1b4..bf1730d91fe 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop isTargetAmount.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop item disabled.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop item disabled.snap.png index a6399c037d0..e196d042b3f 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop item disabled.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop item disabled.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop labelPlacement.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop labelPlacement.snap.png index f88d57a60c1..02e15206eb6 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop labelPlacement.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop optional.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop optional.snap.png index 67a329f8380..6fedab51528 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop optional.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop optional.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon multiple.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon multiple.snap.png new file mode 100644 index 00000000000..d21b75ac0a1 Binary files /dev/null and b/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon multiple.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon single.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon single.snap.png new file mode 100644 index 00000000000..a0acb6d0a46 Binary files /dev/null and b/cypress/snapshots/web/Select/plasma-web Select -- prop renderSelectionIcon single.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop renderValue.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop renderValue.snap.png index f4903e3d5bd..c614d78b7ca 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop renderValue.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop renderValue.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop required, requiredPlacement.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop required, requiredPlacement.snap.png index a803643ab1f..0e494931834 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop required, requiredPlacement.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop required, requiredPlacement.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop selectAll button.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop selectAll button.snap.png index c8dd7c3aff1..61a05a9b5f6 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop selectAll button.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop selectAll button.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop shift.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop shift.snap.png new file mode 100644 index 00000000000..1f4f67a62a8 Binary files /dev/null and b/cypress/snapshots/web/Select/plasma-web Select -- prop shift.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop size l.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop size l.snap.png index 6a411fc79a5..5dc4cb7aa26 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop size l.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop size l.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop size m.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop size m.snap.png index 6b0219a34f8..223e504b761 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop size m.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop size s.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop size s.snap.png index 3d42ccf8532..8803cd815bd 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop size s.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop size xs.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop size xs.snap.png index 817633212ce..330b757a4cd 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop size xs.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, multiple mode.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, multiple mode.snap.png index e439d54a864..052dc4b6b7a 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, multiple mode.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, multiple mode.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, single mode.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, single mode.snap.png index 4497e09ab94..e8c77d44628 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, single mode.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- prop treeView, single mode.snap.png differ diff --git a/cypress/snapshots/web/Select/plasma-web Select -- snapshot missing value in items.snap.png b/cypress/snapshots/web/Select/plasma-web Select -- snapshot missing value in items.snap.png index 641d6080e0d..6b3143c226c 100644 Binary files a/cypress/snapshots/web/Select/plasma-web Select -- snapshot missing value in items.snap.png and b/cypress/snapshots/web/Select/plasma-web Select -- snapshot missing value in items.snap.png differ diff --git a/cypress/snapshots/web/Spinner/plasma-core Spinner -- _size.snap.png b/cypress/snapshots/web/Spinner/plasma-core Spinner -- _size.snap.png index 4b1568ee910..2a24c15b648 100644 Binary files a/cypress/snapshots/web/Spinner/plasma-core Spinner -- _size.snap.png and b/cypress/snapshots/web/Spinner/plasma-core Spinner -- _size.snap.png differ diff --git a/cypress/snapshots/web/Spinner/plasma-core Spinner -- id.snap.png b/cypress/snapshots/web/Spinner/plasma-core Spinner -- id.snap.png index bf4c92584e2..743da6cd8f3 100644 Binary files a/cypress/snapshots/web/Spinner/plasma-core Spinner -- id.snap.png and b/cypress/snapshots/web/Spinner/plasma-core Spinner -- id.snap.png differ diff --git a/cypress/snapshots/web/Spinner/plasma-core Spinner -- many colors.snap.png b/cypress/snapshots/web/Spinner/plasma-core Spinner -- many colors.snap.png index e6f0dee4158..7fb3767e9d7 100644 Binary files a/cypress/snapshots/web/Spinner/plasma-core Spinner -- many colors.snap.png and b/cypress/snapshots/web/Spinner/plasma-core Spinner -- many colors.snap.png differ diff --git a/cypress/snapshots/web/Spinner/plasma-core Spinner -- simple.snap.png b/cypress/snapshots/web/Spinner/plasma-core Spinner -- simple.snap.png index 4909c0698c7..3495d13861e 100644 Binary files a/cypress/snapshots/web/Spinner/plasma-core Spinner -- simple.snap.png and b/cypress/snapshots/web/Spinner/plasma-core Spinner -- simple.snap.png differ diff --git a/cypress/snapshots/web/TextField/plasma-web TextField -- _maxLength.snap.png b/cypress/snapshots/web/TextField/plasma-web TextField -- _maxLength.snap.png index 1df8860647d..6c31a634f06 100644 Binary files a/cypress/snapshots/web/TextField/plasma-web TextField -- _maxLength.snap.png and b/cypress/snapshots/web/TextField/plasma-web TextField -- _maxLength.snap.png differ diff --git a/cypress/snapshots/web/TextField/plasma-web TextField -- focused.snap.png b/cypress/snapshots/web/TextField/plasma-web TextField -- focused.snap.png index a93f81bb524..f79e46d3b4a 100644 Binary files a/cypress/snapshots/web/TextField/plasma-web TextField -- focused.snap.png and b/cypress/snapshots/web/TextField/plasma-web TextField -- focused.snap.png differ diff --git a/cypress/snapshots/web/TextField/plasma-web TextField -- readOnly.snap.png b/cypress/snapshots/web/TextField/plasma-web TextField -- readOnly.snap.png index 4ba818c60af..b904aaaaa71 100644 Binary files a/cypress/snapshots/web/TextField/plasma-web TextField -- readOnly.snap.png and b/cypress/snapshots/web/TextField/plasma-web TextField -- readOnly.snap.png differ diff --git a/cypress/snapshots/web/TextField/plasma-web TextField keyboard navigation -- chips.snap.png b/cypress/snapshots/web/TextField/plasma-web TextField keyboard navigation -- chips.snap.png index d37fbc70709..c51974c9ef3 100644 Binary files a/cypress/snapshots/web/TextField/plasma-web TextField keyboard navigation -- chips.snap.png and b/cypress/snapshots/web/TextField/plasma-web TextField keyboard navigation -- chips.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png new file mode 100644 index 00000000000..7ff1c2411fe Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider size=xs.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png new file mode 100644 index 00000000000..0b78409ca1e Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=default, sliderView=default, size=xl.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png new file mode 100644 index 00000000000..6a8cbe0fc41 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=negative, size=s.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png new file mode 100644 index 00000000000..ba9d0c51d8d Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=positive, sliderView=accent, size=l.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png new file mode 100644 index 00000000000..02b0867481a Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- [PLASMA-]TextFieldSlider view=warning, sliderView=gradient, size=m.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png new file mode 100644 index 00000000000..1cc0773c65c Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- appearance=clear.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png new file mode 100644 index 00000000000..e7de40bf118 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- disabled.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png new file mode 100644 index 00000000000..e9230b720c5 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- fixedDecimalScale.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png new file mode 100644 index 00000000000..9aa3074429d Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasPointer=false.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png new file mode 100644 index 00000000000..3783c5c0e2d Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- hasScale.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png new file mode 100644 index 00000000000..e0dbadb1a00 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type valid value.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png new file mode 100644 index 00000000000..c1922cfd554 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value greater than max.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png new file mode 100644 index 00000000000..f30264dad2f Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- manual input type value less than min.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png new file mode 100644 index 00000000000..c633b4334ae Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- optional.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png new file mode 100644 index 00000000000..3113599f1cf Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- readOnly.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png new file mode 100644 index 00000000000..1ce393066db Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- required.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png new file mode 100644 index 00000000000..f3cc76316e0 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- rounded value to step.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png new file mode 100644 index 00000000000..049cb53bdfb Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move to different position.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png new file mode 100644 index 00000000000..b101bf6a13b Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- slider move with step.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png new file mode 100644 index 00000000000..8d4810b9147 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- step values.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png new file mode 100644 index 00000000000..a93d12ec224 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with contentLeft and contentRight.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png new file mode 100644 index 00000000000..4514c178fec Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with decimalScale.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png new file mode 100644 index 00000000000..0576331db39 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with step.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png new file mode 100644 index 00000000000..f5454e51fd4 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with textBefore and textAfter.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png new file mode 100644 index 00000000000..3090712339a Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with thousandSeparator.snap.png differ diff --git a/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png new file mode 100644 index 00000000000..a1fc57d6b34 Binary files /dev/null and b/cypress/snapshots/web/TextFieldSlider/plasma-new-hope TextFieldSlider -- with titleCaption.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- input time.snap.png b/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- input time.snap.png index fcca7b1136d..23a5abc4db5 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- input time.snap.png and b/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- input time.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png b/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png index c437495c889..91e264ee665 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png and b/cypress/snapshots/web/TimePicker/plasma-b2c TimePicker -- select time from popover.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png index f59c3daf806..621df1e92ff 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2303] TimePicker dropdownAlign=left, columnsQuantity=3.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png index d2cc5990ba5..a13925cb452 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2304] TimePicker dropdownAlign=right, columnsQuantity=2, dropdownWidth=fixed.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png index 1243e66e522..2ef9e20352a 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2305] TimePicker dropdownWidth=fullWidth.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png index 3ea9fa86a17..bc2af561df7 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2308] TimePicker input time.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png index bd610a78451..4ed380535b7 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-T2309] TimePicker select time from popover.snap.png differ diff --git a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png index 8b3f3b77da4..dfd88eb61fb 100644 Binary files a/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png and b/cypress/snapshots/web/TimePicker/plasma-web TimePicker -- [PLASMA-] TimePicker dropdownWidth=35rem, dropdownHeight=10rem.snap.png differ diff --git a/cypress/snapshots/web/Tree/plasma-web Tree -- flow async loading.snap.png b/cypress/snapshots/web/Tree/plasma-web Tree -- flow async loading.snap.png new file mode 100644 index 00000000000..ce217fd9d1e Binary files /dev/null and b/cypress/snapshots/web/Tree/plasma-web Tree -- flow async loading.snap.png differ diff --git a/package-lock.json b/package-lock.json index 47867f65838..a7b237d023c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -90,8 +90,8 @@ "lint-staged": "13.1.2", "nyc": "15.1.0", "prettier": "2.0.5", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "19.2.4", + "react-dom": "19.2.4", "required-path": "1.0.1", "semver": "7.3.7", "simple-scaffold": "2.2.0", @@ -32561,13 +32561,11 @@ } }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "dev": true, - "dependencies": { - "loose-envify": "^1.1.0" - }, + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -32732,16 +32730,16 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "dev": true, + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^19.2.4" } }, "node_modules/react-is": { @@ -33847,13 +33845,11 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", "dev": true, - "dependencies": { - "loose-envify": "^1.1.0" - } + "license": "MIT" }, "node_modules/schema-utils": { "version": "3.3.0", @@ -64202,13 +64198,10 @@ } }, "react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0" - } + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", + "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "dev": true }, "react-base16-styling": { "version": "0.10.0", @@ -64325,13 +64318,12 @@ "dev": true }, "react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.27.0" } }, "react-is": { @@ -65174,13 +65166,10 @@ "dev": true }, "scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dev": true, - "requires": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true }, "schema-utils": { "version": "3.3.0", diff --git a/package.json b/package.json index aa41f53a208..f9619fabcaf 100644 --- a/package.json +++ b/package.json @@ -135,8 +135,8 @@ "lint-staged": "13.1.2", "nyc": "15.1.0", "prettier": "2.0.5", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "19.2.4", + "react-dom": "19.2.4", "required-path": "1.0.1", "semver": "7.3.7", "simple-scaffold": "2.2.0", diff --git a/packages/plasma-asdk/package-lock.json b/packages/plasma-asdk/package-lock.json index 9840e61f60d..225fe6b5f3c 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.361.0", + "version": "0.365.2-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-asdk", - "version": "0.361.0", + "version": "0.365.2-dev.0", "license": "MIT", "devDependencies": { "@babel/cli": "7.24.1", diff --git a/packages/plasma-asdk/package.json b/packages/plasma-asdk/package.json index 883e0093cf9..974a947deff 100644 --- a/packages/plasma-asdk/package.json +++ b/packages/plasma-asdk/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-asdk", - "version": "0.361.0", + "version": "0.365.2-dev.0", "description": "Salute Design System / React UI kit for Assistant web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -19,8 +19,8 @@ "directory": "packages/plasma-asdk" }, "dependencies": { - "@salutejs/plasma-new-hope": "0.347.0", - "@salutejs/plasma-tokens": "1.127.0", + "@salutejs/plasma-new-hope": "0.351.2-dev.0", + "@salutejs/plasma-tokens": "1.129.0-dev.0", "@salutejs/plasma-tokens-b2b": "1.54.0", "@salutejs/plasma-typo": "0.42.0" }, @@ -39,10 +39,10 @@ "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.16.0", - "@salutejs/plasma-core": "1.214.0", - "@salutejs/plasma-cy-utils": "0.144.0", - "@salutejs/plasma-icons": "1.228.0", - "@salutejs/plasma-sb-utils": "0.214.0", + "@salutejs/plasma-core": "1.216.1-dev.0", + "@salutejs/plasma-cy-utils": "0.146.1-dev.0", + "@salutejs/plasma-icons": "1.229.0-dev.0", + "@salutejs/plasma-sb-utils": "0.216.2-dev.0", "@storybook/addon-docs": "8.6.14", "@storybook/addon-essentials": "8.6.14", "@storybook/manager-api": "8.6.14", @@ -97,4 +97,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-asdk/src/components/Typography/Heading.config.ts b/packages/plasma-asdk/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-asdk/src/components/Typography/Heading.config.ts +++ b/packages/plasma-asdk/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx index 2fdf77496c8..a3b9de6a1bf 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-asdk/src/components/Typography/Typography.tsx b/packages/plasma-asdk/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-asdk/src/components/Typography/index.ts b/packages/plasma-asdk/src/components/Typography/index.ts index 402cd635f52..58b513eee33 100644 --- a/packages/plasma-asdk/src/components/Typography/index.ts +++ b/packages/plasma-asdk/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-asdk/src/tokens/typography.ts b/packages/plasma-asdk/src/tokens/typography.ts index 8fbc20a4dea..b8555b813a0 100644 --- a/packages/plasma-asdk/src/tokens/typography.ts +++ b/packages/plasma-asdk/src/tokens/typography.ts @@ -17,6 +17,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, diff --git a/packages/plasma-b2c/package-lock.json b/packages/plasma-b2c/package-lock.json index e89e75ab546..8bb14443fa3 100644 --- a/packages/plasma-b2c/package-lock.json +++ b/packages/plasma-b2c/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.603.0", + "version": "1.607.2-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-b2c", - "version": "1.603.0", + "version": "1.607.2-dev.0", "license": "MIT", "devDependencies": { "@babel/cli": "7.24.1", diff --git a/packages/plasma-b2c/package.json b/packages/plasma-b2c/package.json index 4287a31a6b9..08deb71d7f3 100644 --- a/packages/plasma-b2c/package.json +++ b/packages/plasma-b2c/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.603.0", + "version": "1.607.2-dev.0", "description": "Salute Design System / React UI kit for business-related web applications.", "author": "Salute Frontend Team ", "exports": { @@ -55,10 +55,10 @@ "atLeast": 99.97 }, "dependencies": { - "@salutejs/plasma-core": "1.214.0", - "@salutejs/plasma-hope": "1.360.0", - "@salutejs/plasma-new-hope": "0.347.0", - "@salutejs/plasma-themes": "0.40.0", + "@salutejs/plasma-core": "1.216.1-dev.0", + "@salutejs/plasma-hope": "1.362.2-dev.0", + "@salutejs/plasma-new-hope": "0.351.2-dev.0", + "@salutejs/plasma-themes": "0.41.0-dev.0", "@salutejs/plasma-tokens-b2c": "0.65.0", "@salutejs/plasma-tokens-web": "1.69.0", "@salutejs/plasma-typo": "0.42.0" @@ -84,9 +84,9 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.16.0", - "@salutejs/plasma-cy-utils": "0.144.0", - "@salutejs/plasma-icons": "1.228.0", - "@salutejs/plasma-sb-utils": "0.214.0", + "@salutejs/plasma-cy-utils": "0.146.1-dev.0", + "@salutejs/plasma-icons": "1.229.0-dev.0", + "@salutejs/plasma-sb-utils": "0.216.2-dev.0", "@types/node": "16.7.13", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", @@ -113,4 +113,4 @@ "sideEffects": [ "*.css" ] -} +} \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts index 3b308904785..6f3fa4f9cab 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts @@ -222,6 +222,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx index fcf63f599a6..3336be6b5a3 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx @@ -7,7 +7,7 @@ import { IconButton } from '../IconButton/IconButton'; import { Accordion, AccordionItem } from '.'; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; @@ -84,6 +84,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx index 91a4b3134c8..40a7114f450 100644 --- a/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx +++ b/packages/plasma-b2c/src/components/Combobox/Combobox.component-test.tsx @@ -1740,6 +1740,127 @@ describe('plasma-b2c: Combobox', () => { cy.get('@onChangeValue').should('have.been.calledThrice'); }); + it('prop: renderSelectionIcon', () => { + cy.viewport(1200, 400); + + const Component = () => { + const [singleValue1, setSingleValue1] = useState('bogota'); + const [singleValue2, setSingleValue2] = useState('north_america'); + const [multipleValue1, setMultipleValue1] = useState(['bogota']); + const [multipleValue2, setMultipleValue2] = useState(['north_america']); + + const renderSelectionIcon = (selected: boolean | 'indeterminate') => { + if (selected === true) { + return
; + } + + if (selected === 'indeterminate') { + return
; + } + + return null; + }; + + return ( + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); + }; + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: shift', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+
+ +
+
+ + ); + }; + + mount(); + + cy.get('#combobox').click(); + cy.window().scrollTo(200, 0); + + cy.matchImageSnapshot(); + }); + + it('prop: flip', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+ +
+ + ); + }; + + mount(); + + cy.get('#combobox').click(); + + cy.matchImageSnapshot(); + }); + it('behavior: disabled unselected item', () => { const items = [ { diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts index 11d25b1d2f4..c2e334a638a 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts @@ -29,6 +29,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -339,6 +340,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -505,6 +511,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 2.375rem; + ${tokens.embedIconButtonPadding}: 0 0 0.875rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -671,6 +682,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -837,6 +853,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 1.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts index 086a332c9ef..6de2794285d 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts @@ -4,7 +4,6 @@ export const config = { defaults: { view: 'default', size: 'm', - hintSize: 'm', }, variations: { view: { @@ -28,6 +27,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -306,6 +306,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 3.5rem; + ${tokens.embedIconButtonPadding}: 1rem; + ${tokens.embedIconButtonRadius}: 0.875rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -471,6 +476,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 3rem; + ${tokens.embedIconButtonPadding}: 0.75rem; + ${tokens.embedIconButtonRadius}: 0.75rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -636,6 +646,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -801,6 +816,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 2rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePickerRange.stories.tsx b/packages/plasma-b2c/src/components/DatePicker/DatePickerRange.stories.tsx index 5d84232291e..aa443c82229 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePickerRange.stories.tsx +++ b/packages/plasma-b2c/src/components/DatePicker/DatePickerRange.stories.tsx @@ -2,25 +2,15 @@ import React from 'react'; import type { ComponentProps } from 'react'; import type { Meta } from '@storybook/react-vite'; import { getDatePickerRangeStories } from '@salutejs/plasma-sb-utils'; -import styled from 'styled-components'; - -import { IconButton } from '../IconButton/IconButton'; -import { EmbedIconButton } from '../EmbedIconButton/EmbedIconButton'; import { DatePickerRange } from './DatePicker'; import { config } from './DatePicker.config'; type DatePickerRangeProps = ComponentProps; -const StyledEmbedIconButton = styled(EmbedIconButton)` - margin-right: 0; -`; - const { meta: META, Range } = getDatePickerRangeStories({ component: DatePickerRange, componentConfig: config, - iconButton: IconButton, - embedIconButton: StyledEmbedIconButton, }); const meta: Meta = { diff --git a/packages/plasma-b2c/src/components/List/List.config.ts b/packages/plasma-b2c/src/components/List/List.config.ts index 8eced558176..b0a7acc37b0 100644 --- a/packages/plasma-b2c/src/components/List/List.config.ts +++ b/packages/plasma-b2c/src/components/List/List.config.ts @@ -14,6 +14,7 @@ export const config = { ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; + ${listTokens.listItemFocusColor}: var(--surface-accent); ${listTokens.listDisabledOpacity}: 0.4; `, }, diff --git a/packages/plasma-b2c/src/components/List/List.stories.tsx b/packages/plasma-b2c/src/components/List/List.stories.tsx index d7c1589fb3d..f2f657a2728 100644 --- a/packages/plasma-b2c/src/components/List/List.stories.tsx +++ b/packages/plasma-b2c/src/components/List/List.stories.tsx @@ -1,13 +1,19 @@ -import React from 'react'; -import type { Meta } from '@storybook/react-vite'; +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; import { IconChevronRight } from '@salutejs/plasma-icons'; import styled from 'styled-components'; +import { action } from 'storybook/actions'; import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils'; import { config } from './List.config'; import { List, ListItem } from '.'; +type StoryPropsDefault = ComponentProps; + +const onKeyDown = action('onKeyDown'); +const onKeyListDown = action('onKeyListDown'); + const { views, sizes } = getConfigVariations(config); const ChevronRight = styled(IconChevronRight)` @@ -42,22 +48,28 @@ const meta: Meta = { export default meta; -export const Default: Story = { +export const Default: StoryObj = { args: { view: 'default', size: 'm', variant: 'normal', disabled: false, }, - render: ({ view, size, ...rest }: StoryProps) => { + render: ({ view, size, ...rest }) => { return ( - - }>Test Item 1 - }>Test Item 2 + + } onKeyDown={onKeyDown}> + Test Item 1 + + } onKeyDown={onKeyDown}> + Test Item 2 + } disabled> Test Item 3 - }>Test Item 4 + } onKeyDown={onKeyDown}> + Test Item 4 + ); }, diff --git a/packages/plasma-b2c/src/components/List/List.update-test.component-test.tsx b/packages/plasma-b2c/src/components/List/List.update-test.component-test.tsx index e71edf5644c..e39990c653e 100644 --- a/packages/plasma-b2c/src/components/List/List.update-test.component-test.tsx +++ b/packages/plasma-b2c/src/components/List/List.update-test.component-test.tsx @@ -100,4 +100,43 @@ describe('plasma-b2c: List', () => { cy.matchImageSnapshot(); }); + + it('[PLASMA-] List: focused ListItem', () => { + mount( + + + , + ); + + cy.get('li').first().focus(); + cy.get('li').first().should('be.focused'); + + cy.matchImageSnapshot(); + }); + + it('[PLASMA-] List: cannot focus ListItem if disabled ListItem', () => { + mount( + + + , + ); + + cy.get('ul').press('Tab').press('Tab').press('Tab'); + cy.get('li').eq(2).should('not.be.focused'); + + cy.matchImageSnapshot(); + }); + + it('[PLASMA-] List: cannot focus ListItem if disabled List', () => { + mount( + + + , + ); + + cy.get('ul').press('Tab'); + cy.get('li').first().should('not.be.focused'); + + cy.matchImageSnapshot(); + }); }); diff --git a/packages/plasma-b2c/src/components/Range/Range.clear.config.ts b/packages/plasma-b2c/src/components/Range/Range.clear.config.ts index 9322e8904af..53faca3d526 100644 --- a/packages/plasma-b2c/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-b2c/src/components/Range/Range.clear.config.ts @@ -28,6 +28,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -122,6 +123,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 4rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -194,6 +200,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -266,6 +277,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 2.375rem; + ${tokens.embedIconButtonPadding}: 0 0 0.875rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -338,6 +354,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -410,6 +431,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 1.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; diff --git a/packages/plasma-b2c/src/components/Range/Range.config.ts b/packages/plasma-b2c/src/components/Range/Range.config.ts index 2bdfff6a433..af1793bb835 100644 --- a/packages/plasma-b2c/src/components/Range/Range.config.ts +++ b/packages/plasma-b2c/src/components/Range/Range.config.ts @@ -26,6 +26,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -97,6 +98,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 4rem; + ${tokens.embedIconButtonWidth}: 4rem; + ${tokens.embedIconButtonPadding}: 1.25rem; + ${tokens.embedIconButtonRadius}: 1rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -168,6 +174,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 3.5rem; + ${tokens.embedIconButtonPadding}: 1rem; + ${tokens.embedIconButtonRadius}: 0.875rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -239,6 +250,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 3rem; + ${tokens.embedIconButtonPadding}: 0.75rem; + ${tokens.embedIconButtonRadius}: 0.75rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -310,6 +326,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -381,6 +402,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 2rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; diff --git a/packages/plasma-b2c/src/components/Range/Range.stories.tsx b/packages/plasma-b2c/src/components/Range/Range.stories.tsx index 7bf494315bd..d917970206a 100644 --- a/packages/plasma-b2c/src/components/Range/Range.stories.tsx +++ b/packages/plasma-b2c/src/components/Range/Range.stories.tsx @@ -1,25 +1,15 @@ import React, { ComponentProps } from 'react'; import type { Meta } from '@storybook/react-vite'; import { getRangeStories } from '@salutejs/plasma-sb-utils'; -import styled from 'styled-components'; - -import { IconButton } from '../IconButton'; -import { EmbedIconButton } from '../EmbedIconButton'; import { Range } from './Range'; import { config } from './Range.config'; type RangeProps = ComponentProps; -const StyledEmbedIconButton = styled(EmbedIconButton)` - margin-right: 0; -`; - const { meta: META, Default } = getRangeStories({ component: Range, componentConfig: config, - iconButton: IconButton, - embedIconButton: StyledEmbedIconButton, }); const meta: Meta = { diff --git a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx index 6a371c18b68..f58dcf9473b 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.component-test.tsx @@ -18,7 +18,7 @@ type RatingDemoProps = { iconSlotHalf?: ReactNode; }; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('plasma-b2c: Rating', () => { const Rating = getComponent('Rating'); @@ -143,7 +143,7 @@ describe('plasma-b2c: Rating', () => { , ); - cy.viewport(500, 1633); + cy.viewport(500, 1750); cy.matchImageSnapshot(); }); }); diff --git a/packages/plasma-b2c/src/components/Rating/Rating.config.ts b/packages/plasma-b2c/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.config.ts +++ b/packages/plasma-b2c/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-b2c/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx index a6c0f525bb7..7882b9ae5a8 100644 --- a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx @@ -1138,6 +1138,144 @@ describe('plasma-b2c: Select', () => { cy.get('@onChange').its('lastCall.args.1').should('include', { value: 'item4', label: 'Item 4' }); }); + it('prop: renderSelectionIcon single', () => { + cy.viewport(1000, 400); + + const Component = () => { + const [value, setValue] = useState('bogota'); + + const renderSelectionIcon = (selected: boolean | 'indeterminate') => { + if (selected === true) { + return
; + } + + if (selected === 'indeterminate') { + return
; + } + + return null; + }; + + return ( + +
+
+ +
+
+ + ); + }; + + mount(); + + cy.get('#select').click(); + cy.contains('Южная Америка').click(); + cy.contains('Колумбия').click(); + + cy.matchImageSnapshot(); + }); + + it('prop: shift', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+
+ +
+ + ); + }; + + mount(); + + cy.get('#select').click(); + + cy.matchImageSnapshot(); + }); + it('basic logic', () => { cy.viewport(1000, 500); diff --git a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts index 79e93b27661..8eb698da331 100644 --- a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts @@ -139,6 +139,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx index 162f9e0e48c..d12ce4f7458 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx index 7b7efe0cfec..20f3b3be53a 100644 --- a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx @@ -55,6 +55,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-b2c/src/components/Table/Table.component-test.tsx b/packages/plasma-b2c/src/components/Table/Table.component-test.tsx index 6cba0b8c178..eee2c41a771 100644 --- a/packages/plasma-b2c/src/components/Table/Table.component-test.tsx +++ b/packages/plasma-b2c/src/components/Table/Table.component-test.tsx @@ -593,4 +593,30 @@ describe('plasma-b2c: Table', () => { cy.matchImageSnapshot(); }); + + it('semantic DOM', () => { + mount( + + + , + ); + + cy.get('.table__root-element').should('be.visible').should('have.class', 'root-class'); + cy.get('.table__table-element').should('be.visible').should('have.class', 'table-class'); + cy.get('.table__header-wrapper-element').should('be.visible').should('have.class', 'header-wrapper-class'); + cy.get('.table__header-row-element').should('be.visible').should('have.class', 'header-row-class'); + cy.get('.table__header-cell-element').should('be.visible').should('have.class', 'header-cell-class'); + cy.get('.table__body-wrapper-element').should('be.visible').should('have.class', 'body-wrapper-class'); + cy.get('.table__body-row-element').should('be.visible').should('have.class', 'body-row-class'); + cy.get('.table__body-cell-element').should('be.visible').should('have.class', 'body-cell-class'); + }); }); diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..eae5e738796 100644 --- a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx @@ -32,7 +32,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; -const labels = ['Label', 'Middle label', 'Very long label']; +const labels = ['Label', 'Middle label', 'Disabled', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -78,18 +78,18 @@ const getIconSizes = (size: string) => { return sizeProp; }; -const StyledIconClose = styled(IconClose)` +const StyledIconClose = styled(IconClose)<{ disabled?: boolean }>` color: var(--text-secondary); &:hover { - color: var(--text-primary); + color: ${({ disabled }) => (disabled ? 'var(--text-secondary)' : 'var(--text-primary)')}; } `; -const getAction = (hasAction: boolean, size: string) => { +const getAction = (hasAction: boolean, size: string, disabled?: boolean) => { const sizeProp = getIconSizes(size); - return hasAction ? : undefined; + return hasAction ? : undefined; }; const getIconContent = (size: string, CustomIcon?: ComponentType) => { @@ -206,7 +206,6 @@ const StoryDefault = (props: HorizontalStoryTabsProps) => { disabled, view: 'divider', tabIndex: !disabled ? 0 : -1, - actionContent: getAction(hasAction, size as Size), size: size as Size, }; @@ -226,6 +225,8 @@ const StoryDefault = (props: HorizontalStoryTabsProps) => { {...(commonTabsItemProps as typeof orientation extends 'horizontal' ? Omit : Omit)} + {...(i === 2 ? { disabled: true } : { disabled })} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} {...(helperText !== '' ? { value: helperText } : { contentRight: getContentRight(contentRightOption, size as Size) })} @@ -269,6 +270,8 @@ const StoryDefault = (props: HorizontalStoryTabsProps) => { selected={i === iconIndex} onClick={() => !disabled && setIconIndex(i)} {...(commonTabsItemProps as IconTabItemProps)} + {...(i === 2 ? { disabled: true } : { disabled })} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} > {getIconContent(size as Size)} @@ -367,11 +370,11 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { selected={i === index} onClick={() => !disabled && setIndex(i)} tabIndex={!disabled ? 0 : -1} - disabled={disabled} + {...(i === 2 ? { disabled: true } : { disabled })} value={helperText} size={size as HeaderSize} maxItemWidth={maxItemWidth} - actionContent={getAction(hasAction, size as Size)} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} > {`${labels[i % labels.length]} ${i + 1}`} @@ -394,11 +397,11 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { selected={i === index} onClick={() => !disabled && setIndex(i)} tabIndex={!disabled ? 0 : -1} - disabled={disabled} + {...(i === 2 ? { disabled: true } : { disabled })} value={helperText} size={size as HeaderSize} maxItemWidth={maxItemWidth} - actionContent={getAction(hasAction, size as Size)} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} > {`${labels[i % labels.length]} ${i + 1}`} diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..f70368f502f 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 79e5bb02d95..70bca47aec3 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts new file mode 100644 index 00000000000..a33164279df --- /dev/null +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -0,0 +1,656 @@ +import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + sliderView: 'default', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-positive); + ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-positive); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-negative); + `, + }, + sliderView: { + default: css` + ${tokens.sliderProgressBackground}: var(--surface-solid-default); + `, + accent: css` + ${tokens.sliderProgressBackground}: var(--surface-accent); + `, + gradient: css` + ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + `, + }, + size: { + xl: css` + ${tokens.textFieldHeight}: 4rem; + ${tokens.textFieldBorderRadius}: 1rem; + ${tokens.textFieldPadding}: 1.3125rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.375rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.3125rem auto auto -0.6875rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.625rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + hintView: { + default: css` + ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); + ${tokens.hintTooltipColor}: var(--text-primary); + ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.hintTooltipPaddingTop}: 0.6875rem; + ${tokens.hintTooltipPaddingRight}: 0.875rem; + ${tokens.hintTooltipPaddingBottom}: 0.6875rem; + ${tokens.hintTooltipPaddingLeft}: 0.875rem; + + ${tokens.hintTooltipMinHeight}: 2.5rem; + ${tokens.hintTooltipBorderRadius}: 0.625rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.375rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1.25rem; + ${tokens.hintTooltipArrowMaskHeight}: 1.25rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.hintTooltipArrowHeight}: 0.5rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.hintTooltipPaddingTop}: 0.5rem; + ${tokens.hintTooltipPaddingRight}: 0.75rem; + ${tokens.hintTooltipPaddingBottom}: 0.5rem; + ${tokens.hintTooltipPaddingLeft}: 0.75rem; + + ${tokens.hintTooltipMinHeight}: 2rem; + ${tokens.hintTooltipBorderRadius}: 0.5rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.25rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1rem; + ${tokens.hintTooltipArrowMaskHeight}: 1rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.hintTooltipArrowHeight}: 0.375rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.labelColorReadOnly}: var(--text-primary); + + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; + ${tokens.textFieldReadOnlyOpacity}: 0.1; + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts new file mode 100644 index 00000000000..c63635d3490 --- /dev/null +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -0,0 +1,644 @@ +import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + sliderView: 'default', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + + ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); + ${tokens.textFieldBorderColorHover}: var(--text-secondary); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + }, + sliderView: { + default: css` + ${tokens.sliderProgressBackground}: var(--surface-solid-default); + `, + accent: css` + ${tokens.sliderProgressBackground}: var(--surface-accent); + `, + gradient: css` + ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + `, + }, + size: { + xl: css` + ${tokens.textFieldHeight}: 4rem; + ${tokens.textFieldBorderRadius}: 1rem; + ${tokens.textFieldPadding}: 1.3125rem 1.125rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.75rem; + ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.75rem; + ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 1rem; + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelOffset}: 0.625rem; + ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.375rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem; + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelOffset}: 0.5rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.3125rem auto auto -0.6875rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelOffset}: 0.375rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.625rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + hintView: { + default: css` + ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); + ${tokens.hintTooltipColor}: var(--text-primary); + ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.hintTooltipPaddingTop}: 0.6875rem; + ${tokens.hintTooltipPaddingRight}: 0.875rem; + ${tokens.hintTooltipPaddingBottom}: 0.6875rem; + ${tokens.hintTooltipPaddingLeft}: 0.875rem; + + ${tokens.hintTooltipMinHeight}: 2.5rem; + ${tokens.hintTooltipBorderRadius}: 0.625rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.375rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1.25rem; + ${tokens.hintTooltipArrowMaskHeight}: 1.25rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.hintTooltipArrowHeight}: 0.5rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.hintTooltipPaddingTop}: 0.5rem; + ${tokens.hintTooltipPaddingRight}: 0.75rem; + ${tokens.hintTooltipPaddingBottom}: 0.5rem; + ${tokens.hintTooltipPaddingLeft}: 0.75rem; + + ${tokens.hintTooltipMinHeight}: 2rem; + ${tokens.hintTooltipBorderRadius}: 0.5rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.25rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1rem; + ${tokens.hintTooltipArrowMaskHeight}: 1rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.hintTooltipArrowHeight}: 0.375rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.labelColorReadOnly}: var(--text-primary); + + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; + ${tokens.textFieldReadOnlyOpacity}: 0.1; + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.stories.tsx b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.stories.tsx new file mode 100644 index 00000000000..76f9b6d0960 --- /dev/null +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import type { ComponentProps } from 'react'; +import type { Meta } from '@storybook/react-vite'; +import { getTextFieldSliderStories } from '@salutejs/plasma-sb-utils'; + +import { TextFieldSlider } from './TextFieldSlider'; +import { config } from './TextFieldSlider.config'; + +type TextFieldSliderProps = ComponentProps; + +const { meta: META, Default } = getTextFieldSliderStories({ + component: TextFieldSlider, + componentConfig: config, +}); + +const meta: Meta = { + ...META, + title: 'Data Entry/TextFieldSlider', +}; + +export default meta; + +export { Default }; diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.ts b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.ts new file mode 100644 index 00000000000..c89169c4469 --- /dev/null +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.ts @@ -0,0 +1,22 @@ +import { + component, + createConditionalComponent, + mergeConfig, + textFieldSliderConfig, +} from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './TextFieldSlider.config'; +import { config as clearConfig } from './TextFieldSlider.clear.config'; + +const mergedConfigDefault = mergeConfig(textFieldSliderConfig, config); +export const TextFieldSliderDefault = component(mergedConfigDefault); + +const mergedConfigClear = mergeConfig(textFieldSliderConfig, clearConfig); +export const TextFieldSliderClear = component(mergedConfigClear); + +export const TextFieldSlider = createConditionalComponent(TextFieldSliderDefault, [ + { + conditions: { prop: 'appearance', value: 'clear' }, + component: TextFieldSliderClear, + }, +]); diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/index.ts b/packages/plasma-b2c/src/components/TextFieldSlider/index.ts new file mode 100644 index 00000000000..29bb490a379 --- /dev/null +++ b/packages/plasma-b2c/src/components/TextFieldSlider/index.ts @@ -0,0 +1,2 @@ +export { TextFieldSlider } from './TextFieldSlider'; +export { textFieldSliderTokens } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/Tree/Tree.component-test.tsx b/packages/plasma-b2c/src/components/Tree/Tree.component-test.tsx index c1aa1ec3588..545630fce23 100644 --- a/packages/plasma-b2c/src/components/Tree/Tree.component-test.tsx +++ b/packages/plasma-b2c/src/components/Tree/Tree.component-test.tsx @@ -89,6 +89,54 @@ describe('plasma-b2c: Tree', () => { ); }; + const AsyncTree: FC = () => { + const [treeData, setTreeData] = React.useState([ + { title: 'Открыть для загрузки', key: '0' }, + { title: 'Конечный элемент', key: '1', isLeaf: true }, + ]); + + const updateTreeData = (list: any, key: React.Key, children: any): any => + list.map((node) => { + if (node.key === key) { + return { + ...node, + children, + }; + } + + if (node.children) { + return { + ...node, + children: updateTreeData(node.children, key, children), + }; + } + + return node; + }); + + const loadData = ({ key, children }) => + new Promise((resolve) => { + if (children) { + resolve(); + return; + } + + setTimeout(() => { + setTreeData((origin) => + updateTreeData(origin, key, [{ title: 'Загруженный элемент', key: `${key}-0` }]), + ); + + resolve(); + }, 100); + }); + + return ( + + + + ); + }; + it('default', () => { cy.viewport(500, 500); @@ -322,4 +370,19 @@ describe('plasma-b2c: Tree', () => { cy.get('span[title=1]').should('exist'); cy.get('span[title=999]').should('not.exist'); }); + + it('flow: async loading', () => { + mount(); + + cy.contains('Загруженный элемент').should('not.exist'); + cy.get('.rc-tree-switcher').first().click(); + cy.contains('Загруженный элемент').should('not.exist'); + + cy.matchImageSnapshot(); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); + + cy.contains('Загруженный элемент').should('exist'); + }); }); diff --git a/packages/plasma-b2c/src/components/Tree/Tree.stories.tsx b/packages/plasma-b2c/src/components/Tree/Tree.stories.tsx index 019e2e7e21a..60a1f2e715c 100644 --- a/packages/plasma-b2c/src/components/Tree/Tree.stories.tsx +++ b/packages/plasma-b2c/src/components/Tree/Tree.stories.tsx @@ -1,223 +1,22 @@ -import * as React from 'react'; import type { ComponentProps } from 'react'; -import type { StoryObj, Meta } from '@storybook/react-vite'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { IconBlankTxtOutline, IconLock, IconTrash } from '@salutejs/plasma-icons'; +import type { Meta } from '@storybook/react-vite'; +import { getTreeStories } from '@salutejs/plasma-sb-utils'; import { Tree } from './Tree'; +import { config } from './Tree.config'; -type StoryTreeProps = ComponentProps; +type StoryProps = ComponentProps; -const size = ['xs', 's', 'm', 'l']; -const arrowPlacements = ['left', 'right']; -const mode = ['default', 'radio']; -const variant = ['normal', 'tight']; +const { meta: META, Default, DragAndDrop, AsyncLoading } = getTreeStories({ + component: Tree, + componentConfig: config, +}); -const meta: Meta = { +const meta: Meta = { + ...META, title: 'Data Entry/Tree', - decorators: [InSpacingDecorator], - component: Tree, - argTypes: { - size: { - control: 'select', - options: size, - }, - checkable: { - control: 'boolean', - }, - multiple: { - control: 'boolean', - }, - arrowPlacement: { - options: arrowPlacements, - control: { - type: 'inline-radio', - }, - }, - defaultExpandAll: { - control: 'boolean', - }, - fullWidthItemSelection: { - control: 'boolean', - }, - height: { - control: 'number', - }, - hasIcon: { - control: 'boolean', - }, - mode: { - control: 'select', - options: mode, - }, - variant: { - control: 'select', - options: variant, - }, - }, - args: { - size: 'm', - fullWidthItemSelection: false, - singleLine: true, - checkable: false, - multiple: false, - arrowPlacement: 'left', - defaultExpandAll: true, - height: undefined, - hasIcon: true, - mode: 'default', - variant: 'normal', - }, }; export default meta; -const getTreeData = (args: any): any[] => [ - { - title: 'Основной каталог', - key: '0-0', - contentRight: , - children: [ - { - title: 'Документы', - key: '0-0-0', - children: [ - { - title: 'Отчёты', - key: '0-0-0-0', - contentRight: , - disabled: true, - }, - { - title: 'Проекты', - key: '0-0-0-1', - children: [ - { - title: - 'Проект альфа с длинным названием альфа с длинным названием альфа с длинным названием альфа с длинным названием альфа с длинным названием', - key: '0-0-0-1-0', - icon: , - }, - { - title: 'Проект Бета', - key: '0-0-0-1-1', - icon: , - }, - ], - }, - { - title: 'Категории', - key: '0-0-0-2', - children: [ - { - title: 'Категория Гамма', - key: '0-0-0-2-0', - icon: , - }, - { - title: 'Категория Дельта', - key: '0-0-0-2-1', - icon: , - }, - ], - }, - ], - }, - { - title: 'Медиа', - key: '0-0-1', - children: [ - { - title: 'Фотографии', - key: '0-0-1-0', - }, - ], - }, - ], - }, - { - title: 'Корзина', - key: '0-1', - children: [ - { - title: 'Удалённые файлы', - key: '0-1-0', - }, - ], - }, -]; - -const StoryDefault = (args: StoryTreeProps) => { - return ; -}; - -export const Default: StoryObj = { - render: (args) => , -}; - -const StoryDraggable = (args: StoryTreeProps) => { - const [items, setItems] = React.useState(getTreeData(args)); - - const onDrop = (info: any) => { - const dropKey = info.node.key; - const dragKey = info.dragNode.key; - const dropPos = info.node.pos.split('-'); - const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); - - // Функция-хелпер для прохода по дереву элементов - const loop = (data, key, callback) => { - data.forEach((item, index, arr) => { - if (item.key === key) { - callback(item, index, arr); - return; - } - if (item.children) { - loop(item.children, key, callback); - } - }); - }; - const data = [...items]; - - // Ищем draggable-элемент - let dragObj; - loop(data, dragKey, (item, index, arr) => { - arr.splice(index, 1); - dragObj = item; - }); - - if (dropPosition === 0) { - // Вставляем элемент внутрь target-элемента - loop(data, dropKey, (item) => { - item.children = item.children || []; - item.children.unshift(dragObj); - }); - } else { - // Вставляем элемент вначале или после target-элемента - let ar; - let i; - - loop(data, dropKey, (item, index, arr) => { - ar = arr; - i = index; - }); - - if (dropPosition === -1) { - ar.splice(i, 0, dragObj); - } else { - ar.splice(i + 1, 0, dragObj); - } - } - - setItems(data); - }; - - const allowDrop = (info) => { - return !info.dropNode.disabled; - }; - - return ; -}; - -export const DragAndDrop: StoryObj = { - render: (args) => , -}; +export { Default, DragAndDrop, AsyncLoading }; diff --git a/packages/plasma-b2c/src/components/Typography/Heading.config.ts b/packages/plasma-b2c/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-b2c/src/components/Typography/Heading.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx index 1283c1bffce..297416ccbbe 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.Responsive.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-core: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx index 730956ce5b6..7574da3ed50 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.stories.tsx @@ -15,6 +15,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -151,6 +152,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-b2c/src/components/Typography/Typography.tsx b/packages/plasma-b2c/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-b2c/src/components/Typography/Typography.tsx +++ b/packages/plasma-b2c/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-b2c/src/components/Typography/index.ts b/packages/plasma-b2c/src/components/Typography/index.ts index 566e532a320..0ee9b95d0d2 100644 --- a/packages/plasma-b2c/src/components/Typography/index.ts +++ b/packages/plasma-b2c/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-b2c/src/index.ts b/packages/plasma-b2c/src/index.ts index f1cbbb1cb63..6805ba868b2 100644 --- a/packages/plasma-b2c/src/index.ts +++ b/packages/plasma-b2c/src/index.ts @@ -92,3 +92,4 @@ export * from './components/ProgressBarCircular'; export * from './components/DateTimePicker'; export * from './components/Loader'; export * from './components/File'; +export * from './components/TextFieldSlider'; diff --git a/packages/plasma-b2c/src/tokens/typography.ts b/packages/plasma-b2c/src/tokens/typography.ts index 8119e46b779..440eca400cb 100644 --- a/packages/plasma-b2c/src/tokens/typography.ts +++ b/packages/plasma-b2c/src/tokens/typography.ts @@ -15,6 +15,8 @@ export { h4Bold, h5, h5Bold, + h6, + h6Bold, bodyL, bodyLBold, bodyM, diff --git a/packages/plasma-core/package-lock.json b/packages/plasma-core/package-lock.json index bde2470f0cb..be2014720f3 100644 --- a/packages/plasma-core/package-lock.json +++ b/packages/plasma-core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-core", - "version": "1.214.0", + "version": "1.216.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-core", - "version": "1.214.0", + "version": "1.216.1-dev.0", "license": "MIT", "dependencies": { "@popperjs/core": "2.9.2", diff --git a/packages/plasma-core/package.json b/packages/plasma-core/package.json index b1f2a324a2c..1c318716c7c 100644 --- a/packages/plasma-core/package.json +++ b/packages/plasma-core/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-core", - "version": "1.214.0", + "version": "1.216.1-dev.0", "description": "Core library for Plasma: Salute Design System.", "author": "Salute Frontend Team ", "license": "MIT", @@ -24,7 +24,7 @@ "@babel/preset-react": "7.24.1", "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", - "@salutejs/plasma-cy-utils": "0.144.0", + "@salutejs/plasma-cy-utils": "0.146.1-dev.0", "@types/jest": "27.0.1", "@types/lodash.throttle": "4.1.6", "@types/node": "15.14.9", @@ -80,4 +80,4 @@ "Зубаиров Фаниль Асхатович" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx index e124ed0cd3f..892419d89d8 100644 --- a/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx +++ b/packages/plasma-core/src/components/Typography/TypographyResponsive.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-core: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-core: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-giga/package-lock.json b/packages/plasma-giga/package-lock.json index 4bdebe80898..f183dce25da 100644 --- a/packages/plasma-giga/package-lock.json +++ b/packages/plasma-giga/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-giga", - "version": "0.330.0", + "version": "0.334.2-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-giga", - "version": "0.330.0", + "version": "0.334.2-dev.0", "license": "MIT", "devDependencies": { "@babel/cli": "7.24.1", diff --git a/packages/plasma-giga/package.json b/packages/plasma-giga/package.json index 5cf75ced061..da11b9d02cb 100644 --- a/packages/plasma-giga/package.json +++ b/packages/plasma-giga/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-giga", - "version": "0.330.0", + "version": "0.334.2-dev.0", "description": "Salute Design System / React UI kit for PLASMA GIGA web applications", "author": "Salute Frontend Team ", "exports": { @@ -32,8 +32,8 @@ "directory": "packages/plasma-giga" }, "dependencies": { - "@salutejs/plasma-new-hope": "0.347.0", - "@salutejs/plasma-themes": "0.40.0", + "@salutejs/plasma-new-hope": "0.351.2-dev.0", + "@salutejs/plasma-themes": "0.41.0-dev.0", "@salutejs/plasma-typo": "0.42.0" }, "peerDependencies": { @@ -59,10 +59,10 @@ "@rollup/plugin-commonjs": "^25.0.4", "@rollup/plugin-node-resolve": "^15.1.0", "@salutejs/plasma-colors": "0.16.0", - "@salutejs/plasma-core": "1.214.0", - "@salutejs/plasma-cy-utils": "0.144.0", - "@salutejs/plasma-icons": "1.228.0", - "@salutejs/plasma-sb-utils": "0.214.0", + "@salutejs/plasma-core": "1.216.1-dev.0", + "@salutejs/plasma-cy-utils": "0.146.1-dev.0", + "@salutejs/plasma-icons": "1.229.0-dev.0", + "@salutejs/plasma-sb-utils": "0.216.2-dev.0", "@types/node": "16.7.13", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", @@ -113,4 +113,4 @@ "sideEffects": [ "*.css" ] -} +} \ No newline at end of file diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts index 28793b613d6..d70ce2c93e6 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts @@ -194,6 +194,26 @@ export const config = { ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); + ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); + ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); + ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); + ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + `, + h6: css` + ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; + ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; + ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemBorderRadius}: 0.5rem; + + ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); + ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); + ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); + ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx index 6482c99ce0a..8f333e4f9ec 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-giga/src/components/Accordion/Accordion.stories.tsx @@ -24,7 +24,7 @@ type AccordionItemCustomProps = { type AccordionProps = ComponentProps & AccordionItemCustomProps; const views = ['default', 'clear'] as const; -const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const; +const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; const stretching = ['filled', 'fixed'] as const; const types = ['arrow', 'sign', 'clear'] as const; const pins = [ @@ -124,6 +124,7 @@ const getSizeForIconButton = (size) => { return 's'; case 'xs': case 'h5': + case 'h6': return 'xs'; default: return 'm'; diff --git a/packages/plasma-giga/src/components/Combobox/Combobox.component-test.tsx b/packages/plasma-giga/src/components/Combobox/Combobox.component-test.tsx index 806ac201ef1..31261c3b540 100644 --- a/packages/plasma-giga/src/components/Combobox/Combobox.component-test.tsx +++ b/packages/plasma-giga/src/components/Combobox/Combobox.component-test.tsx @@ -1740,6 +1740,127 @@ describe('plasma-giga: Combobox', () => { cy.get('@onChangeValue').should('have.been.calledThrice'); }); + it('prop: renderSelectionIcon', () => { + cy.viewport(1200, 400); + + const Component = () => { + const [singleValue1, setSingleValue1] = useState('bogota'); + const [singleValue2, setSingleValue2] = useState('north_america'); + const [multipleValue1, setMultipleValue1] = useState(['bogota']); + const [multipleValue2, setMultipleValue2] = useState(['north_america']); + + const renderSelectionIcon = (selected: boolean | 'indeterminate') => { + if (selected === true) { + return
; + } + + if (selected === 'indeterminate') { + return
; + } + + return null; + }; + + return ( + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); + }; + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: shift', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+
+ +
+
+ + ); + }; + + mount(); + + cy.get('#combobox').click(); + cy.window().scrollTo(200, 0); + + cy.matchImageSnapshot(); + }); + + it('prop: flip', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+ +
+ + ); + }; + + mount(); + + cy.get('#combobox').click(); + + cy.matchImageSnapshot(); + }); + it('behavior: disabled unselected item', () => { const items = [ { diff --git a/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts index 11d25b1d2f4..c2e334a638a 100644 --- a/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts @@ -29,6 +29,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -339,6 +340,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -505,6 +511,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 2.375rem; + ${tokens.embedIconButtonPadding}: 0 0 0.875rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -671,6 +682,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -837,6 +853,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 1.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; diff --git a/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts index 086a332c9ef..aba695d13e2 100644 --- a/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts @@ -28,6 +28,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -306,6 +307,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 3.5rem; + ${tokens.embedIconButtonPadding}: 1rem; + ${tokens.embedIconButtonRadius}: 0.875rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -471,6 +477,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 3rem; + ${tokens.embedIconButtonPadding}: 0.75rem; + ${tokens.embedIconButtonRadius}: 0.75rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -636,6 +647,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -801,6 +817,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 2rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; diff --git a/packages/plasma-giga/src/components/DatePicker/DatePickerRange.stories.tsx b/packages/plasma-giga/src/components/DatePicker/DatePickerRange.stories.tsx index 5d84232291e..aa443c82229 100644 --- a/packages/plasma-giga/src/components/DatePicker/DatePickerRange.stories.tsx +++ b/packages/plasma-giga/src/components/DatePicker/DatePickerRange.stories.tsx @@ -2,25 +2,15 @@ import React from 'react'; import type { ComponentProps } from 'react'; import type { Meta } from '@storybook/react-vite'; import { getDatePickerRangeStories } from '@salutejs/plasma-sb-utils'; -import styled from 'styled-components'; - -import { IconButton } from '../IconButton/IconButton'; -import { EmbedIconButton } from '../EmbedIconButton/EmbedIconButton'; import { DatePickerRange } from './DatePicker'; import { config } from './DatePicker.config'; type DatePickerRangeProps = ComponentProps; -const StyledEmbedIconButton = styled(EmbedIconButton)` - margin-right: 0; -`; - const { meta: META, Range } = getDatePickerRangeStories({ component: DatePickerRange, componentConfig: config, - iconButton: IconButton, - embedIconButton: StyledEmbedIconButton, }); const meta: Meta = { diff --git a/packages/plasma-giga/src/components/List/List.config.ts b/packages/plasma-giga/src/components/List/List.config.ts index 8eced558176..b0a7acc37b0 100644 --- a/packages/plasma-giga/src/components/List/List.config.ts +++ b/packages/plasma-giga/src/components/List/List.config.ts @@ -14,6 +14,7 @@ export const config = { ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; + ${listTokens.listItemFocusColor}: var(--surface-accent); ${listTokens.listDisabledOpacity}: 0.4; `, }, diff --git a/packages/plasma-giga/src/components/List/List.stories.tsx b/packages/plasma-giga/src/components/List/List.stories.tsx index d7c1589fb3d..f2f657a2728 100644 --- a/packages/plasma-giga/src/components/List/List.stories.tsx +++ b/packages/plasma-giga/src/components/List/List.stories.tsx @@ -1,13 +1,19 @@ -import React from 'react'; -import type { Meta } from '@storybook/react-vite'; +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; import { IconChevronRight } from '@salutejs/plasma-icons'; import styled from 'styled-components'; +import { action } from 'storybook/actions'; import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils'; import { config } from './List.config'; import { List, ListItem } from '.'; +type StoryPropsDefault = ComponentProps; + +const onKeyDown = action('onKeyDown'); +const onKeyListDown = action('onKeyListDown'); + const { views, sizes } = getConfigVariations(config); const ChevronRight = styled(IconChevronRight)` @@ -42,22 +48,28 @@ const meta: Meta = { export default meta; -export const Default: Story = { +export const Default: StoryObj = { args: { view: 'default', size: 'm', variant: 'normal', disabled: false, }, - render: ({ view, size, ...rest }: StoryProps) => { + render: ({ view, size, ...rest }) => { return ( - - }>Test Item 1 - }>Test Item 2 + + } onKeyDown={onKeyDown}> + Test Item 1 + + } onKeyDown={onKeyDown}> + Test Item 2 + } disabled> Test Item 3 - }>Test Item 4 + } onKeyDown={onKeyDown}> + Test Item 4 + ); }, diff --git a/packages/plasma-giga/src/components/List/List.update-test.component-test.tsx b/packages/plasma-giga/src/components/List/List.update-test.component-test.tsx index 5b63b486593..3bc12983cba 100644 --- a/packages/plasma-giga/src/components/List/List.update-test.component-test.tsx +++ b/packages/plasma-giga/src/components/List/List.update-test.component-test.tsx @@ -100,4 +100,43 @@ describe('plasma-giga: List', () => { cy.matchImageSnapshot(); }); + + it('[PLASMA-] List: focused ListItem', () => { + mount( + + + , + ); + + cy.get('li').first().focus(); + cy.get('li').first().should('be.focused'); + + cy.matchImageSnapshot(); + }); + + it('[PLASMA-] List: cannot focus ListItem if disabled ListItem', () => { + mount( + + + , + ); + + cy.get('ul').press('Tab').press('Tab').press('Tab'); + cy.get('li').eq(2).should('not.be.focused'); + + cy.matchImageSnapshot(); + }); + + it('[PLASMA-] List: cannot focus ListItem if disabled List', () => { + mount( + + + , + ); + + cy.get('ul').press('Tab'); + cy.get('li').first().should('not.be.focused'); + + cy.matchImageSnapshot(); + }); }); diff --git a/packages/plasma-giga/src/components/Range/Range.clear.config.ts b/packages/plasma-giga/src/components/Range/Range.clear.config.ts index 9322e8904af..53faca3d526 100644 --- a/packages/plasma-giga/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.clear.config.ts @@ -28,6 +28,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -122,6 +123,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 4rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -194,6 +200,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 2.25rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -266,6 +277,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 2.375rem; + ${tokens.embedIconButtonPadding}: 0 0 0.875rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -338,6 +354,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.75rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -410,6 +431,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 1.5rem; + ${tokens.embedIconButtonPadding}: 0 0 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; diff --git a/packages/plasma-giga/src/components/Range/Range.config.ts b/packages/plasma-giga/src/components/Range/Range.config.ts index 2bdfff6a433..af1793bb835 100644 --- a/packages/plasma-giga/src/components/Range/Range.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.config.ts @@ -26,6 +26,7 @@ export const config = { ${tokens.contentSlotColorHover}: var(--text-primary-hover); ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: var(--surface-accent); ${tokens.contentSlotRightColor}: var(--text-primary); ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); ${tokens.contentSlotRightColorActive}: var(--text-primary-active); @@ -97,6 +98,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 4rem; + ${tokens.embedIconButtonWidth}: 4rem; + ${tokens.embedIconButtonPadding}: 1.25rem; + ${tokens.embedIconButtonRadius}: 1rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -168,6 +174,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.embedIconButtonHeight}: 3.5rem; + ${tokens.embedIconButtonWidth}: 3.5rem; + ${tokens.embedIconButtonPadding}: 1rem; + ${tokens.embedIconButtonRadius}: 0.875rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -239,6 +250,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.embedIconButtonHeight}: 3rem; + ${tokens.embedIconButtonWidth}: 3rem; + ${tokens.embedIconButtonPadding}: 0.75rem; + ${tokens.embedIconButtonRadius}: 0.75rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -310,6 +326,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.embedIconButtonHeight}: 2.5rem; + ${tokens.embedIconButtonWidth}: 2.5rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.625rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; @@ -381,6 +402,11 @@ export const config = { ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.embedIconButtonHeight}: 2rem; + ${tokens.embedIconButtonWidth}: 2rem; + ${tokens.embedIconButtonPadding}: 0.5rem; + ${tokens.embedIconButtonRadius}: 0.5rem; + ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; diff --git a/packages/plasma-giga/src/components/Range/Range.stories.tsx b/packages/plasma-giga/src/components/Range/Range.stories.tsx index 7bf494315bd..d917970206a 100644 --- a/packages/plasma-giga/src/components/Range/Range.stories.tsx +++ b/packages/plasma-giga/src/components/Range/Range.stories.tsx @@ -1,25 +1,15 @@ import React, { ComponentProps } from 'react'; import type { Meta } from '@storybook/react-vite'; import { getRangeStories } from '@salutejs/plasma-sb-utils'; -import styled from 'styled-components'; - -import { IconButton } from '../IconButton'; -import { EmbedIconButton } from '../EmbedIconButton'; import { Range } from './Range'; import { config } from './Range.config'; type RangeProps = ComponentProps; -const StyledEmbedIconButton = styled(EmbedIconButton)` - margin-right: 0; -`; - const { meta: META, Default } = getRangeStories({ component: Range, componentConfig: config, - iconButton: IconButton, - embedIconButton: StyledEmbedIconButton, }); const meta: Meta = { diff --git a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx index df7fc25bbd6..9846cf172ea 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.component-test.tsx @@ -18,7 +18,7 @@ type RatingDemoProps = { iconSlotHalf?: ReactNode; }; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; describe('plasma-giga: Rating', () => { const Rating = getComponent('Rating'); @@ -143,7 +143,7 @@ describe('plasma-giga: Rating', () => { , ); - cy.viewport(500, 1633); + cy.viewport(500, 1750); cy.matchImageSnapshot(); }); }); diff --git a/packages/plasma-giga/src/components/Rating/Rating.config.ts b/packages/plasma-giga/src/components/Rating/Rating.config.ts index ad64c67e4bf..79e9f36f886 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.config.ts +++ b/packages/plasma-giga/src/components/Rating/Rating.config.ts @@ -298,6 +298,37 @@ export const config = { ${tokens.singleIconSizeMedium}: 1.25rem; ${tokens.singleIconSizeSmall}: 1rem; `, + h6: css` + ${tokens.gap}: 0.25rem; + + ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); + ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.contentGap}: 0.625rem; + ${tokens.singleIconContentGap}: 0.25rem; + ${tokens.starsWrapperGap}: 0.125rem; + + ${tokens.iconMarginBottom}: 0.125rem; + ${tokens.iconSizeLarge}: 1.25rem; + ${tokens.iconSizeMedium}: 1.25rem; + ${tokens.iconSizeSmall}: 1rem; + + ${tokens.singleIconMarginBottom}: 0.125rem; + ${tokens.singleIconSizeLarge}: 1.25rem; + ${tokens.singleIconSizeMedium}: 1.25rem; + ${tokens.singleIconSizeSmall}: 1rem; + `, displayL: css` ${tokens.gap}: 0.375rem; diff --git a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx index cedead549ef..d98a5ea9432 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.stories.tsx +++ b/packages/plasma-giga/src/components/Rating/Rating.stories.tsx @@ -7,7 +7,7 @@ import { ratingClasses } from '@salutejs/plasma-new-hope/styled-components'; import { Rating } from './Rating'; const views = ['default', 'accent']; -const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'displayL', 'displayM', 'displayS']; +const sizes = ['l', 'm', 's', 'xs', 'xxs', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'displayL', 'displayM', 'displayS']; const scorePrecision = [1, 2]; const valuePlacements = ['before', 'after']; const iconsCount = [1, 5, 10]; diff --git a/packages/plasma-giga/src/components/Select/Select.component-test.tsx b/packages/plasma-giga/src/components/Select/Select.component-test.tsx index 13c6e093c61..2e0a136ab86 100644 --- a/packages/plasma-giga/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-giga/src/components/Select/Select.component-test.tsx @@ -1129,6 +1129,144 @@ describe('plasma-giga: Select', () => { cy.get('@onChange').its('lastCall.args.1').should('include', { value: 'item4', label: 'Item 4' }); }); + it('prop: renderSelectionIcon single', () => { + cy.viewport(1000, 400); + + const Component = () => { + const [value, setValue] = useState('bogota'); + + const renderSelectionIcon = (selected: boolean | 'indeterminate') => { + if (selected === true) { + return
; + } + + if (selected === 'indeterminate') { + return
; + } + + return null; + }; + + return ( + +
+
+ +
+
+ + ); + }; + + mount(); + + cy.get('#select').click(); + cy.contains('Южная Америка').click(); + cy.contains('Колумбия').click(); + + cy.matchImageSnapshot(); + }); + + it('prop: shift', () => { + cy.viewport(400, 400); + + const Component = () => { + return ( + +
+
+ +
+ + ); + }; + + mount(); + + cy.get('#select').click(); + + cy.matchImageSnapshot(); + }); + it('basic logic', () => { cy.viewport(1000, 500); diff --git a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts index 9333fde1b23..aa27b05bc9c 100644 --- a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts @@ -67,6 +67,10 @@ export const config = { ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); `, + h6: css` + ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + `, textL: css` ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx index 4d14c124e6d..7e5c1608061 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.component-test.tsx @@ -17,6 +17,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', @@ -47,7 +48,7 @@ describe('plasma-core: Skeleton', () => { , ); - cy.viewport(500, 524); + cy.viewport(500, 550); cy.matchImageSnapshot(); }); @@ -147,7 +148,7 @@ describe('plasma-core: Skeleton', () => { , ); - cy.viewport(500, 524); + cy.viewport(500, 550); cy.matchImageSnapshot(); }); diff --git a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx index d9c2b25935c..22a88ce080b 100644 --- a/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx +++ b/packages/plasma-giga/src/components/Skeleton/Skeleton.stories.tsx @@ -36,6 +36,7 @@ const textSizes = [ 'h3', 'h4', 'h5', + 'h6', 'textL', 'textM', 'textS', diff --git a/packages/plasma-giga/src/components/Table/Table.component-test.tsx b/packages/plasma-giga/src/components/Table/Table.component-test.tsx index 49459d85563..026eaa057c9 100644 --- a/packages/plasma-giga/src/components/Table/Table.component-test.tsx +++ b/packages/plasma-giga/src/components/Table/Table.component-test.tsx @@ -593,4 +593,30 @@ describe('plasma-giga: Table', () => { cy.matchImageSnapshot(); }); + + it('semantic DOM', () => { + mount( + +
+ , + ); + + cy.get('.table__root-element').should('be.visible').should('have.class', 'root-class'); + cy.get('.table__table-element').should('be.visible').should('have.class', 'table-class'); + cy.get('.table__header-wrapper-element').should('be.visible').should('have.class', 'header-wrapper-class'); + cy.get('.table__header-row-element').should('be.visible').should('have.class', 'header-row-class'); + cy.get('.table__header-cell-element').should('be.visible').should('have.class', 'header-cell-class'); + cy.get('.table__body-wrapper-element').should('be.visible').should('have.class', 'body-wrapper-class'); + cy.get('.table__body-row-element').should('be.visible').should('have.class', 'body-row-class'); + cy.get('.table__body-cell-element').should('be.visible').should('have.class', 'body-cell-class'); + }); }); diff --git a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx index eab6deb4bdf..75ea3c85550 100644 --- a/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-giga/src/components/Tabs/Tabs.stories.tsx @@ -15,7 +15,7 @@ const orientations = ['vertical', 'horizontal']; const clips = ['none', 'scroll', 'showAll']; const headerClips = ['none', 'scroll']; const sizes = ['xs', 's', 'm', 'l'] as const; -const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const; +const headerSizes = ['h6', 'h5', 'h4', 'h3', 'h2', 'h1'] as const; type Size = typeof sizes[number]; type HeaderSize = typeof headerSizes[number]; @@ -32,7 +32,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; -const labels = ['Label', 'Middle label', 'Very long label']; +const labels = ['Label', 'Middle label', 'Disabled', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -78,18 +78,17 @@ const getIconSizes = (size: string) => { return sizeProp; }; -const StyledIconClose = styled(IconClose)` +const StyledIconClose = styled(IconClose)<{ disabled?: boolean }>` color: var(--text-secondary); &:hover { - color: var(--text-primary); + color: ${({ disabled }) => (disabled ? 'var(--text-secondary)' : 'var(--text-primary)')}; } `; - -const getAction = (hasAction: boolean, size: string) => { +const getAction = (hasAction: boolean, size: string, disabled?: boolean) => { const sizeProp = getIconSizes(size); - return hasAction ? : undefined; + return hasAction ? : undefined; }; const getIconContent = (size: string, CustomIcon?: ComponentType) => { @@ -226,6 +225,7 @@ const StoryDefault = (props: HorizontalStoryTabsProps) => { {...(commonTabsItemProps as typeof orientation extends 'horizontal' ? Omit : Omit)} + {...(i === 2 ? { disabled: true } : { disabled })} {...(helperText !== '' ? { value: helperText } : { contentRight: getContentRight(contentRightOption, size as Size) })} @@ -269,6 +269,7 @@ const StoryDefault = (props: HorizontalStoryTabsProps) => { selected={i === iconIndex} onClick={() => !disabled && setIconIndex(i)} {...(commonTabsItemProps as IconTabItemProps)} + {...(i === 2 ? { disabled: true } : { disabled })} > {getIconContent(size as Size)} @@ -367,11 +368,11 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { selected={i === index} onClick={() => !disabled && setIndex(i)} tabIndex={!disabled ? 0 : -1} - disabled={disabled} + {...(i === 2 ? { disabled: true } : { disabled })} value={helperText} size={size as HeaderSize} maxItemWidth={maxItemWidth} - actionContent={getAction(hasAction, size as Size)} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} > {`${labels[i % labels.length]} ${i + 1}`} @@ -394,11 +395,11 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { selected={i === index} onClick={() => !disabled && setIndex(i)} tabIndex={!disabled ? 0 : -1} - disabled={disabled} + {...(i === 2 ? { disabled: true } : { disabled })} value={helperText} size={size as HeaderSize} maxItemWidth={maxItemWidth} - actionContent={getAction(hasAction, size as Size)} + actionContent={getAction(hasAction, size as Size, i === 2 || disabled)} > {`${labels[i % labels.length]} ${i + 1}`} diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..8b2e20b8ce7 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -115,6 +115,13 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemPadding}: 0rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemPadding}: 0rem; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 9976645526d..a7252a1f7c0 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -189,6 +189,23 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, + h6: css` + ${tabsTokens.itemBorderRadius}: 0.375rem; + ${tabsTokens.itemWidth}: auto; + ${tabsTokens.itemHeight}: 3rem; + ${tabsTokens.itemPadding}: 0 0.125rem; + ${tabsTokens.itemMarginLeft}: 1.5rem; + ${tabsTokens.itemContentGap}: 0.625rem; + + ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); + ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); + ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); + ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); + ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + + ${tabsTokens.actionContentMarginLeft}: -0.125rem; + `, h5: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bc3e5edf5c1 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -70,6 +70,13 @@ export const config = { ${tabsTokens.arrowInnerPadding}: 0rem; ${tabsTokens.arrowOuterPadding}: 0.75rem; `, + h6: css` + ${tabsTokens.tabsBorderRadius}: 0.5rem; + ${tabsTokens.tabsWidth}: fit-content; + ${tabsTokens.tabsHeight}: auto; + ${tabsTokens.arrowInnerPadding}: 0.25rem; + ${tabsTokens.arrowOuterPadding}: 0rem; + `, h5: css` ${tabsTokens.tabsBorderRadius}: 0.5rem; ${tabsTokens.tabsWidth}: fit-content; diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts new file mode 100644 index 00000000000..a33164279df --- /dev/null +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -0,0 +1,656 @@ +import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + sliderView: 'default', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-positive); + ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-positive); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: transparent; + ${tokens.textFieldBackgroundErrorColor}: transparent; + + ${tokens.textFieldBackgroundColor}: transparent; + ${tokens.textFieldBackgroundColorHover}: transparent; + ${tokens.textFieldBackgroundColorFocus}: transparent; + + ${tokens.textFieldBorderColor}: transparent; + ${tokens.textFieldBorderColorHover}: transparent; + ${tokens.textFieldBorderColorFocus}: transparent; + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-negative); + `, + }, + sliderView: { + default: css` + ${tokens.sliderProgressBackground}: var(--surface-solid-default); + `, + accent: css` + ${tokens.sliderProgressBackground}: var(--surface-accent); + `, + gradient: css` + ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + `, + }, + size: { + xl: css` + ${tokens.textFieldHeight}: 4rem; + ${tokens.textFieldBorderRadius}: 1rem; + ${tokens.textFieldPadding}: 1.3125rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.375rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.3125rem auto auto -0.6875rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelOffset}: 0.25rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.625rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; + + ${tokens.sliderContainerOffset}: -0.5rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + hintView: { + default: css` + ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); + ${tokens.hintTooltipColor}: var(--text-primary); + ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.hintTooltipPaddingTop}: 0.6875rem; + ${tokens.hintTooltipPaddingRight}: 0.875rem; + ${tokens.hintTooltipPaddingBottom}: 0.6875rem; + ${tokens.hintTooltipPaddingLeft}: 0.875rem; + + ${tokens.hintTooltipMinHeight}: 2.5rem; + ${tokens.hintTooltipBorderRadius}: 0.625rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.375rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1.25rem; + ${tokens.hintTooltipArrowMaskHeight}: 1.25rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.hintTooltipArrowHeight}: 0.5rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.hintTooltipPaddingTop}: 0.5rem; + ${tokens.hintTooltipPaddingRight}: 0.75rem; + ${tokens.hintTooltipPaddingBottom}: 0.5rem; + ${tokens.hintTooltipPaddingLeft}: 0.75rem; + + ${tokens.hintTooltipMinHeight}: 2rem; + ${tokens.hintTooltipBorderRadius}: 0.5rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.25rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1rem; + ${tokens.hintTooltipArrowMaskHeight}: 1rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.hintTooltipArrowHeight}: 0.375rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.labelColorReadOnly}: var(--text-primary); + + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; + ${tokens.textFieldReadOnlyOpacity}: 0.1; + `, + }, + }, +}; diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts new file mode 100644 index 00000000000..c63635d3490 --- /dev/null +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -0,0 +1,644 @@ +import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + sliderView: 'default', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + + ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); + ${tokens.textFieldBorderColorHover}: var(--text-secondary); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldErrorColor}: var(--text-negative); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + + ${tokens.labelColor}: var(--text-primary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.optionalColor}: var(--text-tertiary); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.hintIconColor}: var(--text-secondary); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + + ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + + ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); + ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + + ${tokens.scaleValueColor}: var(--text-secondary); + `, + }, + sliderView: { + default: css` + ${tokens.sliderProgressBackground}: var(--surface-solid-default); + `, + accent: css` + ${tokens.sliderProgressBackground}: var(--surface-accent); + `, + gradient: css` + ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + `, + }, + size: { + xl: css` + ${tokens.textFieldHeight}: 4rem; + ${tokens.textFieldBorderRadius}: 1rem; + ${tokens.textFieldPadding}: 1.3125rem 1.125rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.75rem; + ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelOffset}: 0.75rem; + ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.5rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 1rem; + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelOffset}: 0.625rem; + ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.375rem auto auto -0.75rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem; + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelOffset}: 0.5rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.3125rem auto auto -0.6875rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; + + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelOffset}: 0.375rem; + ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSize}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorPlacement}: 0 0 0 0; + ${tokens.indicatorOuterPlacement}: 0.25rem auto auto -0.625rem; + ${tokens.indicatorPlacementRight}: 0 0 auto auto; + ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; + + ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; + + ${tokens.sliderContainerOffset}: 0.25rem; + + ${tokens.sliderTrackHeight}: 0.25rem; + ${tokens.sliderTrackBorderRadius}: 100%; + ${tokens.sliderThumbSize}: 1rem; + + ${tokens.scaleWrapperOffset}: 0.25rem; + ${tokens.scaleWrapperPaddingTop}: 0.25rem; + + ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + hintView: { + default: css` + ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); + ${tokens.hintTooltipColor}: var(--text-primary); + ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.hintTooltipPaddingTop}: 0.6875rem; + ${tokens.hintTooltipPaddingRight}: 0.875rem; + ${tokens.hintTooltipPaddingBottom}: 0.6875rem; + ${tokens.hintTooltipPaddingLeft}: 0.875rem; + + ${tokens.hintTooltipMinHeight}: 2.5rem; + ${tokens.hintTooltipBorderRadius}: 0.625rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.375rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1.25rem; + ${tokens.hintTooltipArrowMaskHeight}: 1.25rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.hintTooltipArrowHeight}: 0.5rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.hintTooltipPaddingTop}: 0.5rem; + ${tokens.hintTooltipPaddingRight}: 0.75rem; + ${tokens.hintTooltipPaddingBottom}: 0.5rem; + ${tokens.hintTooltipPaddingLeft}: 0.75rem; + + ${tokens.hintTooltipMinHeight}: 2rem; + ${tokens.hintTooltipBorderRadius}: 0.5rem; + + ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.hintTooltipContentLeftMargin}: 0.25rem; + + ${tokens.hintTooltipArrowMaskWidth}: 1rem; + ${tokens.hintTooltipArrowMaskHeight}: 1rem; + ${tokens.hintTooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.hintTooltipArrowHeight}: 0.375rem; + ${tokens.hintTooltipArrowEdgeMargin}: 0.5625rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.labelColorReadOnly}: var(--text-primary); + + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; + ${tokens.textFieldReadOnlyOpacity}: 0.1; + `, + }, + }, +}; diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.stories.tsx b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.stories.tsx new file mode 100644 index 00000000000..76f9b6d0960 --- /dev/null +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import type { ComponentProps } from 'react'; +import type { Meta } from '@storybook/react-vite'; +import { getTextFieldSliderStories } from '@salutejs/plasma-sb-utils'; + +import { TextFieldSlider } from './TextFieldSlider'; +import { config } from './TextFieldSlider.config'; + +type TextFieldSliderProps = ComponentProps; + +const { meta: META, Default } = getTextFieldSliderStories({ + component: TextFieldSlider, + componentConfig: config, +}); + +const meta: Meta = { + ...META, + title: 'Data Entry/TextFieldSlider', +}; + +export default meta; + +export { Default }; diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.ts b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.ts new file mode 100644 index 00000000000..c89169c4469 --- /dev/null +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.ts @@ -0,0 +1,22 @@ +import { + component, + createConditionalComponent, + mergeConfig, + textFieldSliderConfig, +} from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './TextFieldSlider.config'; +import { config as clearConfig } from './TextFieldSlider.clear.config'; + +const mergedConfigDefault = mergeConfig(textFieldSliderConfig, config); +export const TextFieldSliderDefault = component(mergedConfigDefault); + +const mergedConfigClear = mergeConfig(textFieldSliderConfig, clearConfig); +export const TextFieldSliderClear = component(mergedConfigClear); + +export const TextFieldSlider = createConditionalComponent(TextFieldSliderDefault, [ + { + conditions: { prop: 'appearance', value: 'clear' }, + component: TextFieldSliderClear, + }, +]); diff --git a/packages/plasma-giga/src/components/TextFieldSlider/index.ts b/packages/plasma-giga/src/components/TextFieldSlider/index.ts new file mode 100644 index 00000000000..29bb490a379 --- /dev/null +++ b/packages/plasma-giga/src/components/TextFieldSlider/index.ts @@ -0,0 +1,2 @@ +export { TextFieldSlider } from './TextFieldSlider'; +export { textFieldSliderTokens } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-giga/src/components/Tree/Tree.component-test.tsx b/packages/plasma-giga/src/components/Tree/Tree.component-test.tsx index 6f91b940c83..cc9512fe225 100644 --- a/packages/plasma-giga/src/components/Tree/Tree.component-test.tsx +++ b/packages/plasma-giga/src/components/Tree/Tree.component-test.tsx @@ -78,6 +78,54 @@ describe('plasma-giga: Tree', () => { ); }; + const AsyncTree: FC = () => { + const [treeData, setTreeData] = React.useState([ + { title: 'Открыть для загрузки', key: '0' }, + { title: 'Конечный элемент', key: '1', isLeaf: true }, + ]); + + const updateTreeData = (list: any, key: React.Key, children: any): any => + list.map((node) => { + if (node.key === key) { + return { + ...node, + children, + }; + } + + if (node.children) { + return { + ...node, + children: updateTreeData(node.children, key, children), + }; + } + + return node; + }); + + const loadData = ({ key, children }) => + new Promise((resolve) => { + if (children) { + resolve(); + return; + } + + setTimeout(() => { + setTreeData((origin) => + updateTreeData(origin, key, [{ title: 'Загруженный элемент', key: `${key}-0` }]), + ); + + resolve(); + }, 100); + }); + + return ( + + + + ); + }; + it('default', () => { cy.viewport(500, 500); @@ -311,4 +359,19 @@ describe('plasma-giga: Tree', () => { cy.get('span[title=1]').should('exist'); cy.get('span[title=999]').should('not.exist'); }); + + it('flow: async loading', () => { + mount(); + + cy.contains('Загруженный элемент').should('not.exist'); + cy.get('.rc-tree-switcher').first().click(); + cy.contains('Загруженный элемент').should('not.exist'); + + cy.matchImageSnapshot(); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); + + cy.contains('Загруженный элемент').should('exist'); + }); }); diff --git a/packages/plasma-giga/src/components/Tree/Tree.stories.tsx b/packages/plasma-giga/src/components/Tree/Tree.stories.tsx index 019e2e7e21a..60a1f2e715c 100644 --- a/packages/plasma-giga/src/components/Tree/Tree.stories.tsx +++ b/packages/plasma-giga/src/components/Tree/Tree.stories.tsx @@ -1,223 +1,22 @@ -import * as React from 'react'; import type { ComponentProps } from 'react'; -import type { StoryObj, Meta } from '@storybook/react-vite'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { IconBlankTxtOutline, IconLock, IconTrash } from '@salutejs/plasma-icons'; +import type { Meta } from '@storybook/react-vite'; +import { getTreeStories } from '@salutejs/plasma-sb-utils'; import { Tree } from './Tree'; +import { config } from './Tree.config'; -type StoryTreeProps = ComponentProps; +type StoryProps = ComponentProps; -const size = ['xs', 's', 'm', 'l']; -const arrowPlacements = ['left', 'right']; -const mode = ['default', 'radio']; -const variant = ['normal', 'tight']; +const { meta: META, Default, DragAndDrop, AsyncLoading } = getTreeStories({ + component: Tree, + componentConfig: config, +}); -const meta: Meta = { +const meta: Meta = { + ...META, title: 'Data Entry/Tree', - decorators: [InSpacingDecorator], - component: Tree, - argTypes: { - size: { - control: 'select', - options: size, - }, - checkable: { - control: 'boolean', - }, - multiple: { - control: 'boolean', - }, - arrowPlacement: { - options: arrowPlacements, - control: { - type: 'inline-radio', - }, - }, - defaultExpandAll: { - control: 'boolean', - }, - fullWidthItemSelection: { - control: 'boolean', - }, - height: { - control: 'number', - }, - hasIcon: { - control: 'boolean', - }, - mode: { - control: 'select', - options: mode, - }, - variant: { - control: 'select', - options: variant, - }, - }, - args: { - size: 'm', - fullWidthItemSelection: false, - singleLine: true, - checkable: false, - multiple: false, - arrowPlacement: 'left', - defaultExpandAll: true, - height: undefined, - hasIcon: true, - mode: 'default', - variant: 'normal', - }, }; export default meta; -const getTreeData = (args: any): any[] => [ - { - title: 'Основной каталог', - key: '0-0', - contentRight: , - children: [ - { - title: 'Документы', - key: '0-0-0', - children: [ - { - title: 'Отчёты', - key: '0-0-0-0', - contentRight: , - disabled: true, - }, - { - title: 'Проекты', - key: '0-0-0-1', - children: [ - { - title: - 'Проект альфа с длинным названием альфа с длинным названием альфа с длинным названием альфа с длинным названием альфа с длинным названием', - key: '0-0-0-1-0', - icon: , - }, - { - title: 'Проект Бета', - key: '0-0-0-1-1', - icon: , - }, - ], - }, - { - title: 'Категории', - key: '0-0-0-2', - children: [ - { - title: 'Категория Гамма', - key: '0-0-0-2-0', - icon: , - }, - { - title: 'Категория Дельта', - key: '0-0-0-2-1', - icon: , - }, - ], - }, - ], - }, - { - title: 'Медиа', - key: '0-0-1', - children: [ - { - title: 'Фотографии', - key: '0-0-1-0', - }, - ], - }, - ], - }, - { - title: 'Корзина', - key: '0-1', - children: [ - { - title: 'Удалённые файлы', - key: '0-1-0', - }, - ], - }, -]; - -const StoryDefault = (args: StoryTreeProps) => { - return ; -}; - -export const Default: StoryObj = { - render: (args) => , -}; - -const StoryDraggable = (args: StoryTreeProps) => { - const [items, setItems] = React.useState(getTreeData(args)); - - const onDrop = (info: any) => { - const dropKey = info.node.key; - const dragKey = info.dragNode.key; - const dropPos = info.node.pos.split('-'); - const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); - - // Функция-хелпер для прохода по дереву элементов - const loop = (data, key, callback) => { - data.forEach((item, index, arr) => { - if (item.key === key) { - callback(item, index, arr); - return; - } - if (item.children) { - loop(item.children, key, callback); - } - }); - }; - const data = [...items]; - - // Ищем draggable-элемент - let dragObj; - loop(data, dragKey, (item, index, arr) => { - arr.splice(index, 1); - dragObj = item; - }); - - if (dropPosition === 0) { - // Вставляем элемент внутрь target-элемента - loop(data, dropKey, (item) => { - item.children = item.children || []; - item.children.unshift(dragObj); - }); - } else { - // Вставляем элемент вначале или после target-элемента - let ar; - let i; - - loop(data, dropKey, (item, index, arr) => { - ar = arr; - i = index; - }); - - if (dropPosition === -1) { - ar.splice(i, 0, dragObj); - } else { - ar.splice(i + 1, 0, dragObj); - } - } - - setItems(data); - }; - - const allowDrop = (info) => { - return !info.dropNode.disabled; - }; - - return ; -}; - -export const DragAndDrop: StoryObj = { - render: (args) => , -}; +export { Default, DragAndDrop, AsyncLoading }; diff --git a/packages/plasma-giga/src/components/Typography/Heading.config.ts b/packages/plasma-giga/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..77f16729129 100644 --- a/packages/plasma-giga/src/components/Typography/Heading.config.ts +++ b/packages/plasma-giga/src/components/Typography/Heading.config.ts @@ -95,3 +95,22 @@ export const configH5 = { }, }, }; +export const configH6 = { + defaults: { + size: 'h6', + }, + variations: { + size: { + h6: css` + ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); + ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); + ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); + ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); + ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); + ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); + ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); + ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx index bdae840e3d2..e307d8c8881 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.component-test.tsx @@ -15,6 +15,7 @@ describe('plasma-giga: ResponsiveTypography', () => { const H3 = getComponent('H3'); const H4 = getComponent('H4'); const H5 = getComponent('H5'); + const H6 = getComponent('H6'); const TextL = getComponent('TextL'); const TextM = getComponent('TextM'); const TextS = getComponent('TextS'); @@ -56,6 +57,8 @@ describe('plasma-giga: ResponsiveTypography', () => {

H4 Semibold

H5
H5 Semibold
+
H6
+
H6 Semibold
); const text = ( diff --git a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx index 9d61bd7b0e6..950b985caa4 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.stories.tsx @@ -11,6 +11,7 @@ import { H3, H4, H5, + H6, BodyL, BodyM, BodyS, @@ -134,6 +135,16 @@ export const H: Story = {
1234567890
+
+ H6 +
+
H6 Bold
+
+ H6 Medium +
+
+ 1234567890 +
), }; diff --git a/packages/plasma-giga/src/components/Typography/Typography.tsx b/packages/plasma-giga/src/components/Typography/Typography.tsx index 1f099f6194e..f98e3e0a03f 100644 --- a/packages/plasma-giga/src/components/Typography/Typography.tsx +++ b/packages/plasma-giga/src/components/Typography/Typography.tsx @@ -25,6 +25,7 @@ import { configH3 as headingConfigH3Custom, configH4 as headingConfigH4Custom, configH5 as headingConfigH5Custom, + configH6 as headingConfigH6Custom, } from './Heading.config'; import { configL as textConfigLCustom, @@ -72,6 +73,9 @@ const Heading4Component = component(heading4Config); const heading5Config = mergeConfig(headingConfig, headingConfigH5Custom); const Heading5Component = component(heading5Config); +const heading6Config = mergeConfig(headingConfig, headingConfigH6Custom); +const Heading6Component = component(heading6Config); + const textMConfig = mergeConfig(textConfig, textConfigMCustom); const TextMComponent = component(textMConfig); @@ -99,6 +103,7 @@ export const H2 = Heading2Component; export const H3 = Heading3Component; export const H4 = Heading4Component; export const H5 = Heading5Component; +export const H6 = Heading6Component; export const TextM = TextMComponent; export const TextL = TextLComponent; diff --git a/packages/plasma-giga/src/components/Typography/index.ts b/packages/plasma-giga/src/components/Typography/index.ts index 5d3a07ca0b4..b1a1bc4efa5 100644 --- a/packages/plasma-giga/src/components/Typography/index.ts +++ b/packages/plasma-giga/src/components/Typography/index.ts @@ -12,6 +12,7 @@ export { H3, H4, H5, + H6, TextL, TextM, TextS, diff --git a/packages/plasma-giga/src/index.ts b/packages/plasma-giga/src/index.ts index da04bbb166d..48d54be0416 100644 --- a/packages/plasma-giga/src/index.ts +++ b/packages/plasma-giga/src/index.ts @@ -77,6 +77,7 @@ export * from './components/ProgressBarCircular'; export * from './components/DateTimePicker'; export * from './components/Loader'; export * from './components/File'; +export * from './components/TextFieldSlider'; export * from './mixins'; export * from './tokens'; diff --git a/packages/plasma-homeds/.babelrc.js b/packages/plasma-homeds/.babelrc.js new file mode 100644 index 00000000000..dbb4a40759b --- /dev/null +++ b/packages/plasma-homeds/.babelrc.js @@ -0,0 +1,9 @@ +module.exports = { + presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'], + plugins: [ + '@babel/plugin-proposal-class-properties', + 'babel-plugin-annotate-pure-calls', + '@babel/plugin-transform-react-constant-elements', + ], + ignore: ['**/*.d.ts', '**/helpers', '**/__helpers', '**/*.stories.tsx'], +}; diff --git a/packages/plasma-homeds/.gitignore b/packages/plasma-homeds/.gitignore new file mode 100644 index 00000000000..e42510a9862 --- /dev/null +++ b/packages/plasma-homeds/.gitignore @@ -0,0 +1,33 @@ +/dist +/types +/node_modules + +/components +/es +/hocs +/hooks +/mixins +/tokens +build-sb +/utils +/index.* +/__helpers +css/* +!css/package.json +src-css +/cjs +/themes +/helpers +/_virtual +src-sc +src-linaria +styled-components/cjs +styled-components/es +linaria/cjs +linaria/es +src-emotion +emotion/cjs +emotion/es +styled-components/* +build-sb-draft +emotion/* diff --git a/packages/plasma-homeds/.npmignore b/packages/plasma-homeds/.npmignore new file mode 100644 index 00000000000..158c3645fb5 --- /dev/null +++ b/packages/plasma-homeds/.npmignore @@ -0,0 +1,9 @@ +/components/**/*.component-test* +/es/components/**/*.component-test* +src +.storybook +/package-lock.json +/index.d.ts.map +/index.js.map +/jest.config.js +/tsconfig.json diff --git a/packages/plasma-homeds/.npmrc b/packages/plasma-homeds/.npmrc new file mode 120000 index 00000000000..cba44bb384c --- /dev/null +++ b/packages/plasma-homeds/.npmrc @@ -0,0 +1 @@ +../../.npmrc \ No newline at end of file diff --git a/packages/plasma-homeds/.storybook/decoratorThemes.tsx b/packages/plasma-homeds/.storybook/decoratorThemes.tsx new file mode 100644 index 00000000000..aecc15dfbab --- /dev/null +++ b/packages/plasma-homeds/.storybook/decoratorThemes.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import type { Decorator } from '@storybook/react-vite'; +import { createGlobalStyle } from 'styled-components'; +import { plasma_homeds__light, plasma_homeds__dark } from '@salutejs/plasma-themes'; + +import { ViewContainer } from '../src/components/ViewContainer/ViewContainer'; + +const DocumentStyle = createGlobalStyle` + html:root { + min-height: 100vh; + background-color: var(--surface-solid-primary); + } + + a { + color: var(--text-primary); + text-decoration: underline; + + &:hover { + color: lighten(var(--text-primary), 30%); + } + + &:active { + color: darken(var(--text-primary), 30%); + } + } +`; + +/* stylelint-enable */ +export const PLASMA_HOMEDS_LIGHT_THEME = 'plasma-homeds:light'; +export const PLASMA_HOMEDS_DARK_THEME = 'plasma-homeds:dark'; +export const DEFAULT_MODE = 'default'; +export const ON_DARK_MODE = 'onDark'; +export const ON_LIGHT_MODE = 'onLight'; + +const themes = { + [PLASMA_HOMEDS_LIGHT_THEME]: createGlobalStyle(plasma_homeds__light), + [PLASMA_HOMEDS_DARK_THEME]: createGlobalStyle(plasma_homeds__dark), +}; + +type ViewType = { + style?: object; + view?: 'onDark' | 'onLight'; +}; + +const viewMap: Record = { + default: { + style: undefined, + view: undefined, + }, + onDark: { + style: { + background: '#1a1a1a', + color: 'white', + margin: '3rem', + 'border-radius': '1rem', + }, + view: 'onDark', + }, + onLight: { + style: { + background: '#ededed', + color: 'black', + margin: '3rem', + 'border-radius': '1rem', + }, + view: 'onLight', + }, +}; + +export const withTheme: Decorator = (Story, context) => { + const theme = context.globals.theme; + const viewContainerType = viewMap[context.globals.viewContainer]; + + const Theme = themes[theme]; + + return ( +
+ + + + + +
+ ); +}; diff --git a/packages/plasma-homeds/.storybook/decoratorToast.tsx b/packages/plasma-homeds/.storybook/decoratorToast.tsx new file mode 100644 index 00000000000..3c5d50fe7dd --- /dev/null +++ b/packages/plasma-homeds/.storybook/decoratorToast.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import type { Decorator } from '@storybook/react-vite'; +import { ToastProvider } from '../src/components/Toast'; + +export const withToast: Decorator = (Story) => ( + + + +); diff --git a/packages/plasma-homeds/.storybook/docsPage.tsx b/packages/plasma-homeds/.storybook/docsPage.tsx new file mode 100644 index 00000000000..22c72d9709e --- /dev/null +++ b/packages/plasma-homeds/.storybook/docsPage.tsx @@ -0,0 +1,11 @@ +import { Description, Primary, Subtitle, Title, Controls } from '@storybook/addon-docs/blocks'; + +export const docsPage = () => ( + <> + + <Subtitle /> + <Description /> + <Primary /> + <Controls /> + </> +); diff --git a/packages/plasma-homeds/.storybook/main.ts b/packages/plasma-homeds/.storybook/main.ts new file mode 100644 index 00000000000..39eda3f7939 --- /dev/null +++ b/packages/plasma-homeds/.storybook/main.ts @@ -0,0 +1,58 @@ +import { mergeConfig } from 'vite'; +import type { StorybookConfig } from '@storybook/react-vite'; +import * as path from 'node:path'; + +const stories = ['../README.mdx', '../src/**/*.stories.tsx']; + +const config: StorybookConfig = { + staticDirs: ['public'], + stories, + addons: ['@storybook/addon-docs'], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + core: { + disableTelemetry: true, + }, + docs: { + defaultName: 'Docs', + }, + typescript: { + reactDocgen: false, + }, + async viteFinal(config) { + return mergeConfig(config, { + base: '', + resolve: { + dedupe: ['react', 'react-dom', 'styled-components'], + preserveSymlinks: true, + alias: { + '@salutejs/plasma-sb-utils': path.resolve('../../utils/plasma-sb-utils/src'), + }, + }, + build: { + sourcemap: false, + }, + plugins: [ + /* + Plugin that fixes a bug in Storybook@10 + @see https://github.com/storybookjs/storybook/issues/21716 + */ + { + name: 'fix-mdx-react-shim', + enforce: 'pre', + resolveId(source) { + if (source.startsWith('file://') && source.includes('mdx-react-shim.js')) { + // Convert file:///... path to normal filesystem path for Vite + return new URL(source).pathname; + } + return null; + }, + }, + ], + }); + }, +}; + +export default config; diff --git a/packages/plasma-homeds/.storybook/manager-head.html b/packages/plasma-homeds/.storybook/manager-head.html new file mode 100644 index 00000000000..c0435a8f2ea --- /dev/null +++ b/packages/plasma-homeds/.storybook/manager-head.html @@ -0,0 +1,11 @@ +<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css"> +<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"> +<link rel="icon" href="sb-favicon.png"/> + +<style> + body { + font-family: 'SB Sans Text', Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + } +</style> diff --git a/packages/plasma-homeds/.storybook/manager.js b/packages/plasma-homeds/.storybook/manager.js new file mode 100644 index 00000000000..25f151fa74e --- /dev/null +++ b/packages/plasma-homeds/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from 'storybook/manager-api'; +import theme from './theme'; + +addons.setConfig({ + theme, +}); diff --git a/packages/plasma-homeds/.storybook/preview-head.html b/packages/plasma-homeds/.storybook/preview-head.html new file mode 100644 index 00000000000..8899b6275c6 --- /dev/null +++ b/packages/plasma-homeds/.storybook/preview-head.html @@ -0,0 +1,30 @@ +<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css"> +<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"> +<style> + /* stylelint-disable-next-line selector-nested-pattern */ + body { + margin: 0; + padding: 0 !important; + + /* stylelint-disable-next-line string-quotes */ + font-family: "SB Sans Text", Helvetica, Arial, sans-serif; + } + + .docblock-source { + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05) !important; + } + + .docblock-argstable tbody { + box-shadow: inset rgba(0, 0, 0, 0.16), + 0px 1px 4px rgba(0, 0, 0, 0.05) !important; + } + + .sbdocs-preview { + background: var(--background-primary) !important; + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05) !important; + } + + .sbdocs-table { + color: #080808; + } +</style> diff --git a/packages/plasma-homeds/.storybook/preview.tsx b/packages/plasma-homeds/.storybook/preview.tsx new file mode 100644 index 00000000000..b57b9bd748a --- /dev/null +++ b/packages/plasma-homeds/.storybook/preview.tsx @@ -0,0 +1,93 @@ +import type { Preview } from '@storybook/react-vite'; + +import storybookTheme from './theme'; +import { docsPage } from './docsPage'; +import { + withTheme, + PLASMA_HOMEDS_DARK_THEME, + PLASMA_HOMEDS_LIGHT_THEME, + DEFAULT_MODE, + ON_DARK_MODE, + ON_LIGHT_MODE, +} from './decoratorThemes'; +import { withToast } from './decoratorToast'; +import { withReactStrictMode, reactStrictModePreviewOption } from '@salutejs/plasma-sb-utils'; + +// Workaround: to make VoiceOver read russian text properly +if (typeof document !== 'undefined') { + document.documentElement.setAttribute('lang', 'ru'); +} + +const preview: Preview = { + decorators: [withTheme, withToast, withReactStrictMode], + globalTypes: { + theme: { + description: 'Global theme for components', + defaultValue: PLASMA_HOMEDS_LIGHT_THEME, + toolbar: { + title: 'Theme', + items: [PLASMA_HOMEDS_LIGHT_THEME, PLASMA_HOMEDS_DARK_THEME], + }, + }, + viewContainer: { + description: 'ViewContainer mode for components', + defaultValue: DEFAULT_MODE, + toolbar: { + title: 'ViewContainer', + items: [DEFAULT_MODE, ON_DARK_MODE, ON_LIGHT_MODE], + }, + }, + ...reactStrictModePreviewOption, + }, + initialGlobals: { + theme: PLASMA_HOMEDS_LIGHT_THEME, + viewContainer: DEFAULT_MODE, + }, + parameters: { + docs: { + page: docsPage, + theme: storybookTheme, + source: { type: 'code' }, + }, + options: { + storySort: { + method: 'alphabetical', + order: ['About', 'Tokens', 'Layout', '*', 'Hooks'], + }, + }, + viewport: { + options: { + '375': { + name: '375x812', + styles: { + width: '375px', + height: '812px', + }, + }, + '768': { + name: '768x576', + styles: { + width: '768px', + height: '576px', + }, + }, + '1024': { + name: '1024x768', + styles: { + width: '1024px', + height: '768px', + }, + }, + '1920': { + name: '1920x1080', + styles: { + width: '1920px', + height: '1080px', + }, + }, + }, + }, + }, +}; + +export default preview; diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_0.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_0.jpg new file mode 100644 index 00000000000..430ef834dd6 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_0.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_1.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_1.jpg new file mode 100644 index 00000000000..9c4bc766a06 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_1.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_10.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_10.jpg new file mode 100644 index 00000000000..90911bc7c78 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_10.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_11.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_11.jpg new file mode 100644 index 00000000000..8ab0bc0c623 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_11.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_12.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_12.jpg new file mode 100644 index 00000000000..078d43e4d9d Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_12.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_2.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_2.jpg new file mode 100644 index 00000000000..b2597faf0c6 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_2.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_3.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_3.jpg new file mode 100644 index 00000000000..c8c974a7ced Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_3.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_4.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_4.jpg new file mode 100644 index 00000000000..7f05e17c75a Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_4.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_5.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_5.jpg new file mode 100644 index 00000000000..56802388fae Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_5.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_6.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_6.jpg new file mode 100644 index 00000000000..336f18f0966 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_6.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_7.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_7.jpg new file mode 100644 index 00000000000..f2bdec59dc1 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_7.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_8.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_8.jpg new file mode 100644 index 00000000000..7acdc55d913 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_8.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/320_320_9.jpg b/packages/plasma-homeds/.storybook/public/images/320_320_9.jpg new file mode 100644 index 00000000000..5ff9dc76ccd Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/320_320_9.jpg differ diff --git a/packages/plasma-homeds/.storybook/public/images/avocado.png b/packages/plasma-homeds/.storybook/public/images/avocado.png new file mode 100644 index 00000000000..9f36ee9848b Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/avocado.png differ diff --git a/packages/plasma-homeds/.storybook/public/images/favicon.png b/packages/plasma-homeds/.storybook/public/images/favicon.png new file mode 100644 index 00000000000..0c08799afdd Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/favicon.png differ diff --git a/packages/plasma-homeds/.storybook/public/images/logo.png b/packages/plasma-homeds/.storybook/public/images/logo.png new file mode 100644 index 00000000000..16326408abc Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/images/logo.png differ diff --git a/packages/plasma-homeds/.storybook/public/sb-favicon.png b/packages/plasma-homeds/.storybook/public/sb-favicon.png new file mode 100644 index 00000000000..8f236dfe9b8 Binary files /dev/null and b/packages/plasma-homeds/.storybook/public/sb-favicon.png differ diff --git a/packages/plasma-homeds/.storybook/theme.js b/packages/plasma-homeds/.storybook/theme.js new file mode 100644 index 00000000000..e83e1a3cf49 --- /dev/null +++ b/packages/plasma-homeds/.storybook/theme.js @@ -0,0 +1,26 @@ +import { create } from 'storybook/theming'; + +export default create({ + base: 'light', + + // UI + appBg: '#FFFFFF', + appContentBg: '#FFFFFF', + appBorderColor: 'rgba(0, 0, 0, 0.16)', + appBorderRadius: 4, + + colorPrimary: '#226AF1', + colorSecondary: '#226AF1', + + // Typography + fontBase: "'SB Sans Text', Helvetica, Arial, sans-serif", + + // Toolbar default and active colors + barTextColor: 'rgba(8, 8, 8, 0.56)', + barSelectedColor: '#226AF1', + barBg: '#FFFFFF', + + // Logo + brandTitle: 'Home DS UI Kit', + brandUrl: 'https://plasma.sberdevices.ru', +}); diff --git a/packages/plasma-homeds/LICENSE.txt b/packages/plasma-homeds/LICENSE.txt new file mode 100644 index 00000000000..4ac192b87fc --- /dev/null +++ b/packages/plasma-homeds/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) Salute Devices + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/plasma-homeds/README.md b/packages/plasma-homeds/README.md new file mode 100644 index 00000000000..51a3478261c --- /dev/null +++ b/packages/plasma-homeds/README.md @@ -0,0 +1,217 @@ +# Plasma HomeDS + +Набор компонентов и утилит для создания web-приложений на базе [ReactJS](https://reactjs.org/). + +## Использование + +Библиотека реализована с помощью: + +- [typescript](https://www.typescriptlang.org/) +- [styled-components](https://styled-components.com/) (рекомендуем использовать версию `5.3.1`) + +Однако их использование **необязательно**! + +### Установка зависимостей + +```bash +$ npm install --save @salutejs/plasma-homeds @salutejs/plasma-themes +``` + +Для работы со `styled-components`, необходимо установить + +```bash +$ npm install --save styled-components@5.3.1 +``` + +### Использование компонентов + +Все компоненты доступны напрямую из пакета + +```jsx +import styled from 'styled-components'; +import { Button } from '@salutejs/plasma-homeds'; +import { textAccent } from '@salutejs/plasma-themes/tokens'; + +export const App = () => { + const StyledP = styled.p` + color: ${textAccent}; + `; + + return ( + <> + <Button>Hello, HomeDS!</Button> + <StyledP>Token usage example</StyledP> + </> + ); +}; +``` + +Так же библиотека поставляет компоненты собранные с помощью css + +```js +import { Button } from '@salutejs/plasma-homeds'; +``` + +## Подключение шрифтов + +Типографическая система основана на фирменных шрифтах. + +Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на **CDN** + +Для использования типографической системы необходимо загрузить два `css` файла в зависимости от используемых шрифтов в теме. + +### Create react app + +Добавить внутрь тега `head`. + +```html +<html> + <head> + <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" /> + <link + rel="stylesheet" + href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" + /> + <title>Wep App + + + ... + + +``` + +### NextJs + +```tsx +import Head from 'next/head'; + +import { H2, Button } from '@salutejs/plasma-homeds'; + +export default function Home() { + return ( + <> + + Create Next App with HomeDS components + + + +
+
+
+

Salute

+
+
+
+ + ); +} +``` + +## Подключение темы + +Точкой входа является корень приложения: + +- Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`. +- Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем. + +```jsx +import React from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { Button, BodyL } from '@salutejs/plasma-homeds'; +import { plasma_homeds__light } from '@salutejs/plasma-themes'; + +const Theme = createGlobalStyle(plasma_homeds__light); + +const App = () => { + return ( + <> + + Hello HomeDS + + {i + 1} + + ))} + + + ), +}; + +export const CustomColsPosition = { + render: () => ( + + + + 1 + + + 2 + + + 3 + + + + ), +}; diff --git a/packages/plasma-homeds/src/components/Grid/Grid.tsx b/packages/plasma-homeds/src/components/Grid/Grid.tsx new file mode 100644 index 00000000000..b64b578b1df --- /dev/null +++ b/packages/plasma-homeds/src/components/Grid/Grid.tsx @@ -0,0 +1,8 @@ +import { gridConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Grid.config'; + +export { Row, Col } from '@salutejs/plasma-new-hope/styled-components'; + +const mergedConfig = mergeConfig(gridConfig, config); +export const Grid = component(mergedConfig); diff --git a/packages/plasma-homeds/src/components/Grid/index.ts b/packages/plasma-homeds/src/components/Grid/index.ts new file mode 100644 index 00000000000..41a8c904ba7 --- /dev/null +++ b/packages/plasma-homeds/src/components/Grid/index.ts @@ -0,0 +1,12 @@ +export { Grid, Col, Row } from './Grid'; + +export type { + GridProps, + ColCount, + ColProps, + ColSizeProps, + ColOffsetProps, + ScreenMap, + ScreenConfig, + ScreenVariant, +} from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts b/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts new file mode 100644 index 00000000000..9d760c4f3f2 --- /dev/null +++ b/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts @@ -0,0 +1,170 @@ +import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + focused: 'true', + size: 'm', + }, + variations: { + view: { + default: css` + ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); + ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + `, + accent: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + `, + secondary: css` + ${iconButtonTokens.iconButtonColor}: var(--text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + `, + clear: css` + ${iconButtonTokens.iconButtonColor}: var(--text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + `, + success: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + `, + warning: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + `, + critical: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + `, + dark: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); + ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + `, + black: css` + ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); + ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + `, + white: css` + ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); + ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); + ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + `, + }, + size: { + xl: css` + ${iconButtonTokens.iconButtonHeight}: 4rem; + ${iconButtonTokens.iconButtonWidth}: 4rem; + ${iconButtonTokens.iconButtonPadding}: 1.75rem; + ${iconButtonTokens.iconButtonRadius}: 1rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + l: css` + ${iconButtonTokens.iconButtonHeight}: 3.5rem; + ${iconButtonTokens.iconButtonWidth}: 3.5rem; + ${iconButtonTokens.iconButtonPadding}: 1.5rem; + ${iconButtonTokens.iconButtonRadius}: 0.875rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + m: css` + ${iconButtonTokens.iconButtonHeight}: 3rem; + ${iconButtonTokens.iconButtonWidth}: 3rem; + ${iconButtonTokens.iconButtonPadding}: 1.25rem; + ${iconButtonTokens.iconButtonRadius}: 0.75rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + s: css` + ${iconButtonTokens.iconButtonHeight}: 2.5rem; + ${iconButtonTokens.iconButtonWidth}: 2.5rem; + ${iconButtonTokens.iconButtonPadding}: 1rem; + ${iconButtonTokens.iconButtonRadius}: 0.625rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + xs: css` + ${iconButtonTokens.iconButtonHeight}: 2rem; + ${iconButtonTokens.iconButtonWidth}: 2rem; + ${iconButtonTokens.iconButtonPadding}: 0.75rem; + ${iconButtonTokens.iconButtonRadius}: 0.5rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + }, + disabled: { + true: css` + ${iconButtonTokens.iconButtonDisabledOpacity}: 0.4; + `, + }, + focused: { + true: css` + ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + }, +}; diff --git a/packages/plasma-homeds/src/components/IconButton/IconButton.stories.tsx b/packages/plasma-homeds/src/components/IconButton/IconButton.stories.tsx new file mode 100644 index 00000000000..db1b3fd2389 --- /dev/null +++ b/packages/plasma-homeds/src/components/IconButton/IconButton.stories.tsx @@ -0,0 +1,95 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; +import { IconClose } from '@salutejs/plasma-icons'; +import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; + +import { IconButton } from './IconButton'; + +type StoryButtonProps = ComponentProps & { contentType: string; isLoading: boolean }; + +const views = ['default', 'accent', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white']; +const sizes = ['xl', 'l', 'm', 's', 'xs']; +const pins = [ + 'square-square', + 'square-clear', + 'clear-square', + 'clear-clear', + 'clear-circle', + 'circle-clear', + 'circle-circle', + '', +]; + +const meta: Meta = { + title: 'Data Entry/IconButton', + decorators: [InSpacingDecorator], + argTypes: { + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + view: { + options: views, + control: { + type: 'select', + }, + }, + pin: { + options: pins, + control: { + type: 'select', + }, + table: { defaultValue: { summary: 'bottom' } }, + }, + ...disableProps([ + 'focused', + 'children', + 'theme', + 'loader', + 'onClick', + 'onFocus', + 'onBlur', + 'contentLeft', + 'contentRight', + ]), + }, +}; + +export default meta; + +const getSizeForIcon = (size) => { + const map = { + mr: 's', + lr: 's', + xlr: 's', + m: 's', + l: 's', + xl: 's', + sr: 's', + xsr: 'xs', + }; + if (map[size]) { + return map[size]; + } + + return size; +}; + +export const Default: StoryObj> = { + args: { + children: , + view: 'default', + size: 'm', + disabled: false, + focused: true, + isLoading: false, + }, + argTypes: { ...disableProps(['children']) }, + render: (args) => ( + + + + ), +}; diff --git a/packages/plasma-homeds/src/components/IconButton/IconButton.ts b/packages/plasma-homeds/src/components/IconButton/IconButton.ts new file mode 100644 index 00000000000..6faeac7efe0 --- /dev/null +++ b/packages/plasma-homeds/src/components/IconButton/IconButton.ts @@ -0,0 +1,11 @@ +import { iconButtonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './IconButton.config'; + +const mergedConfig = mergeConfig(iconButtonConfig, config); +const IconButtonComponent = component(mergedConfig); + +/** + * Кнопка с иконкой. + */ +export const IconButton = IconButtonComponent; diff --git a/packages/plasma-homeds/src/components/IconButton/index.ts b/packages/plasma-homeds/src/components/IconButton/index.ts new file mode 100644 index 00000000000..bd4d78d297e --- /dev/null +++ b/packages/plasma-homeds/src/components/IconButton/index.ts @@ -0,0 +1 @@ +export { IconButton } from './IconButton'; diff --git a/packages/plasma-homeds/src/components/Image/Image.component-test.tsx b/packages/plasma-homeds/src/components/Image/Image.component-test.tsx new file mode 100644 index 00000000000..b64eaa98462 --- /dev/null +++ b/packages/plasma-homeds/src/components/Image/Image.component-test.tsx @@ -0,0 +1,91 @@ +import React, { Fragment } from 'react'; +import styled from 'styled-components'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +const src = 'https://bit.ly/3xRatFGimages/320_320_0.jpg'; + +describe('plasma-core: Image', () => { + const Image = getComponent('Image'); + + const Why = styled.div` + width: 8rem; + display: inline-block; + `; + + beforeEach(() => { + cy.intercept(src, (req) => { + req.reply({ + fixture: 'images/320_320_0.jpg', + }); + }); + }); + + it('default', () => { + mount( + + + , + ); + cy.matchImageSnapshot(); + }); + + it('div', () => { + mount( + + + , + ); + cy.matchImageSnapshot(); + }); + + it('_ratio', () => { + const ratios = Object.keys({ + '1 / 1': '100', + '1/1': '100', + '3 / 4': '133.3333', + '3/4': '133.3333', + '4 / 3': '75', + '4/3': '75', + '9 / 16': '177.7778', + '9/16': '177.7778', + '16 / 9': '56.25', + '16/9': '56.25', + '1 / 2': '200', + '1/2': '200', + '2 / 1': '50', + '2/1': '50', + }); + + mount( + + {ratios.map((ratio) => ( + + + + + + + + + + ))} + , + ); + cy.matchImageSnapshot(); + }); + + it('_customRatio', () => { + mount( + + + + + + + + + , + ); + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-homeds/src/components/Image/Image.stories.tsx b/packages/plasma-homeds/src/components/Image/Image.stories.tsx new file mode 100644 index 00000000000..93288c16634 --- /dev/null +++ b/packages/plasma-homeds/src/components/Image/Image.stories.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; +import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; + +import { Image, Ratio } from '.'; +import type { ImageProps } from '.'; + +const meta: Meta = { + title: 'Data Display/Image', + component: Image, + decorators: [InSpacingDecorator], + argTypes: { + base: { + options: ['div', 'img'], + control: { + type: 'inline-radio', + }, + }, + ratio: { + options: ['1/1', '3/4', '4/3', '9/16', '16/9', '1/2', '2/1'], + control: { + type: 'select', + }, + }, + ...disableProps(['src', 'alt', 'customRatio']), + }, +}; + +export default meta; + +export const Default: StoryObj = { + args: { + base: 'div', + src: './images/320_320_9.jpg', + alt: 'картинка для примера фоном', + width: '200px', + height: '200px', + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/packages/plasma-homeds/src/components/Image/Image.tsx b/packages/plasma-homeds/src/components/Image/Image.tsx new file mode 100644 index 00000000000..d46cd0e5ec9 --- /dev/null +++ b/packages/plasma-homeds/src/components/Image/Image.tsx @@ -0,0 +1,9 @@ +import { imageConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +const mergedConfig = mergeConfig(imageConfig); +const ImageComponent = component(mergedConfig); + +/** + * Компонент Image. + */ +export const Image = ImageComponent; diff --git a/packages/plasma-homeds/src/components/Image/index.ts b/packages/plasma-homeds/src/components/Image/index.ts new file mode 100644 index 00000000000..ee73fa42fd2 --- /dev/null +++ b/packages/plasma-homeds/src/components/Image/index.ts @@ -0,0 +1,3 @@ +export { Image } from './Image'; + +export type { ImageProps, Ratio } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-homeds/src/components/Indicator/Indicator.config.tsx b/packages/plasma-homeds/src/components/Indicator/Indicator.config.tsx new file mode 100644 index 00000000000..a852fab074a --- /dev/null +++ b/packages/plasma-homeds/src/components/Indicator/Indicator.config.tsx @@ -0,0 +1,47 @@ +import { css, indicatorTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + size: 's', + view: 'default', + }, + variations: { + view: { + default: css` + ${tokens.color}: var(--surface-solid-default); + `, + accent: css` + ${tokens.color}: var(--surface-accent); + `, + inactive: css` + ${tokens.color}: var(--surface-solid-tertiary); + `, + positive: css` + ${tokens.color}: var(--surface-positive); + `, + warning: css` + ${tokens.color}: var(--surface-warning); + `, + negative: css` + ${tokens.color}: var(--surface-negative); + `, + black: css` + ${tokens.color}: var(--on-light-surface-solid-default); + `, + white: css` + ${tokens.color}: var(--on-dark-surface-solid-default); + `, + }, + size: { + l: css` + ${tokens.size}: 0.75rem; + `, + m: css` + ${tokens.size}: 0.5rem; + `, + s: css` + ${tokens.size}: 0.375rem; + `, + }, + }, +}; diff --git a/packages/plasma-homeds/src/components/Indicator/Indicator.stories.tsx b/packages/plasma-homeds/src/components/Indicator/Indicator.stories.tsx new file mode 100644 index 00000000000..0eccc965eaf --- /dev/null +++ b/packages/plasma-homeds/src/components/Indicator/Indicator.stories.tsx @@ -0,0 +1,34 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; + +import { Indicator } from './Indicator'; + +const meta: Meta = { + title: 'Data Display/Indicator', + component: Indicator, + argTypes: { + view: { + options: ['default', 'accent', 'inactive', 'positive', 'warning', 'negative', 'black', 'white'], + control: { + type: 'select', + }, + }, + size: { + options: ['l', 'm', 's'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj>; + +export const Default: Story = { + args: { + size: 's', + view: 'default', + }, +}; diff --git a/packages/plasma-homeds/src/components/Indicator/Indicator.ts b/packages/plasma-homeds/src/components/Indicator/Indicator.ts new file mode 100644 index 00000000000..c3620c7f91e --- /dev/null +++ b/packages/plasma-homeds/src/components/Indicator/Indicator.ts @@ -0,0 +1,8 @@ +import { indicatorConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Indicator.config'; + +const mergedConfig = mergeConfig(indicatorConfig, config); +const Indicator = component(mergedConfig); + +export { Indicator, mergedConfig }; diff --git a/packages/plasma-homeds/src/components/Indicator/index.ts b/packages/plasma-homeds/src/components/Indicator/index.ts new file mode 100644 index 00000000000..083d9e1a55a --- /dev/null +++ b/packages/plasma-homeds/src/components/Indicator/index.ts @@ -0,0 +1,3 @@ +export { Indicator } from './Indicator'; + +export type { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts new file mode 100644 index 00000000000..45b90809f49 --- /dev/null +++ b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts @@ -0,0 +1,309 @@ +import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'l', + }, + variations: { + view: { + default: css` + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.optionalColor}: var(--text-tertiary); + `, + positive: css` + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-positive); + ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.optionalColor}: var(--text-tertiary); + `, + warning: css` + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-warning); + ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.optionalColor}: var(--text-tertiary); + `, + negative: css` + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-negative); + ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.optionalColor}: var(--text-tertiary); + `, + }, + size: { + l: css` + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.indicatorWrapperGap}: 0.25rem; + ${tokens.labelWrapperOffset}: 0.75rem; + ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; + ${tokens.contentGap}: 1rem; + + ${tokens.hintMargin}: -0.688rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; + + ${tokens.titleCaptionOffset}: 0.375rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.helpersPadding}: 0.25rem 0 0 0; + ${tokens.helpersGap}: 0.25rem; + + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSizeInner}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorMarginTop}: 0.25rem; + ${tokens.indicatorOuterLeft}: -0.75rem; + ${tokens.indicatorWithoutLabelInner}: auto 0 -0.5rem auto; + ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; + `, + m: css` + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.indicatorWrapperGap}: 0.25rem; + ${tokens.labelWrapperOffset}: 0.625rem; + ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; + ${tokens.contentGap}: 0.875rem; + + ${tokens.hintMargin}: -0.688rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; + + ${tokens.titleCaptionOffset}: 0.313rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.helpersPadding}: 0.25rem 0 0 0; + ${tokens.helpersGap}: 0.25rem; + + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSizeInner}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorMarginTop}: 0.25rem; + ${tokens.indicatorOuterLeft}: -0.75rem; + ${tokens.indicatorWithoutLabelInner}: auto 0 -0.5rem auto; + ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; + `, + s: css` + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.indicatorWrapperGap}: 0.25rem; + ${tokens.labelWrapperOffset}: 0.5rem; + ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; + ${tokens.contentGap}: 0.75rem; + + ${tokens.hintMargin}: -0.688rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; + + ${tokens.titleCaptionOffset}: 0.188rem; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.helpersPadding}: 0.25rem 0 0 0; + ${tokens.helpersGap}: 0.25rem; + + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSizeInner}: 0.5rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorMarginTop}: 0.25rem; + ${tokens.indicatorOuterLeft}: -0.75rem; + ${tokens.indicatorWithoutLabelInner}: auto 0 -0.5rem auto; + ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; + `, + xs: css` + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorWrapperGap}: 0.25rem; + ${tokens.labelWrapperOffset}: 0.375rem; + ${tokens.labelWrapperTitleCaptionOffset}: 0.25rem; + ${tokens.contentGap}: 0.5rem; + + ${tokens.hintMargin}: -0.688rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; + + ${tokens.titleCaptionOffset}: 0; + ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.helpersPadding}: 0.25rem 0 0 0; + ${tokens.helpersGap}: 0.25rem; + + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.indicatorSizeInner}: 0.375rem; + ${tokens.indicatorSizeOuter}: 0.375rem; + ${tokens.indicatorMarginTop}: 0.125rem; + ${tokens.indicatorOuterLeft}: -0.75rem; + ${tokens.indicatorWithoutLabelInner}: auto 0 -0.375rem auto; + ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.375rem 0; + `, + }, + hintView: { + default: css` + ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + `, + }, + hintSize: { + m: css` + ${tokens.tooltipPaddingTop}: 0.6875rem; + ${tokens.tooltipPaddingRight}: 0.875rem; + ${tokens.tooltipPaddingBottom}: 0.6875rem; + ${tokens.tooltipPaddingLeft}: 0.875rem; + + ${tokens.tooltipMinHeight}: 2.5rem; + ${tokens.tooltipBorderRadius}: 0.625rem; + + ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.tooltipContentLeftMargin}: 0.375rem; + + ${tokens.tooltipArrowMaskWidth}: 1.25rem; + ${tokens.tooltipArrowMaskHeight}: 1.25rem; + ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); + ${tokens.tooltipArrowHeight}: 0.5rem; + ${tokens.tooltipArrowEdgeMargin}: 0.625rem; + `, + s: css` + ${tokens.tooltipPaddingTop}: 0.5rem; + ${tokens.tooltipPaddingRight}: 0.75rem; + ${tokens.tooltipPaddingBottom}: 0.5rem; + ${tokens.tooltipPaddingLeft}: 0.75rem; + + ${tokens.tooltipMinHeight}: 2rem; + ${tokens.tooltipBorderRadius}: 0.5rem; + + ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.tooltipContentLeftMargin}: 0.25rem; + + ${tokens.tooltipArrowMaskWidth}: 1rem; + ${tokens.tooltipArrowMaskHeight}: 1rem; + ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); + ${tokens.tooltipArrowHeight}: 0.375rem; + ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + }, +}; diff --git a/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.stories.tsx b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.stories.tsx new file mode 100644 index 00000000000..672d8c47e10 --- /dev/null +++ b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.stories.tsx @@ -0,0 +1,266 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react-vite'; +import { InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils'; +import type { PopoverPlacement } from '@salutejs/plasma-new-hope'; +import { IconFolder } from '@salutejs/plasma-icons'; + +import { TextField } from '../TextField/TextField'; +import { TextArea } from '../TextArea/TextArea'; + +import { InformationWrapper } from './InformationWrapper'; +import { config } from './InformationWrapper.config'; + +const { views, sizes } = getConfigVariations(config); + +const labelPlacements = ['top', 'left']; +const hintViews = ['default']; +const hintSizes = ['m', 's']; +const hintTriggers = ['hover', 'click']; +const placements: Array = [ + 'top', + 'top-start', + 'top-end', + + 'bottom', + 'bottom-start', + 'bottom-end', + + 'left', + 'left-start', + 'left-end', + + 'right', + 'right-start', + 'right-end', + + 'auto', +]; +const componentContents = ['Placeholder', 'TextField', 'TextArea']; + +const meta: Meta = { + title: 'Data Display/InformationWrapper', + component: InformationWrapper, + decorators: [InSpacingDecorator], + argTypes: { + labelPlacement: { + options: labelPlacements, + control: { + type: 'select', + }, + }, + requiredIndicatorPlacement: { + options: ['left', 'right'], + control: { + type: 'select', + }, + if: { + arg: 'optional', + truthy: false, + }, + }, + hasRequiredIndicator: { + control: { + type: 'boolean', + }, + if: { + arg: 'optional', + truthy: false, + }, + }, + optional: { + control: { + type: 'boolean', + }, + if: { + arg: 'required', + truthy: false, + }, + }, + optionalText: { + control: { + type: 'text', + }, + if: { + arg: 'required', + truthy: false, + }, + }, + view: { + options: views, + control: { + type: 'select', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + titleCaption: { + control: { type: 'text' }, + }, + leftHelper: { + control: { type: 'text' }, + }, + hintText: { + control: { type: 'text' }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + hintView: { + options: hintViews, + control: { + type: 'select', + }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + hintSize: { + options: hintSizes, + control: { + type: 'select', + }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + hintTrigger: { + options: hintTriggers, + control: { + type: 'inline-radio', + }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + hintPlacement: { + options: placements, + control: { + type: 'select', + }, + if: { + arg: 'hasHint', + truthy: true, + }, + mappers: placements, + }, + hintHasArrow: { + control: { type: 'boolean' }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + hintWidth: { + control: { type: 'text' }, + if: { + arg: 'hasHint', + truthy: true, + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + hasHint: boolean; + enableLeftHelperIcon: boolean; + componentContent: 'Placeholder' | 'TextField' | 'TextArea'; +}; + +const SvgPlaceholder = () => { + return ( +
+ ); +}; + +const StoryDemo = ({ + hasHint, + id, + componentContent, + size, + enableLeftHelperIcon, + leftHelper, + ...rest +}: StoryPropsDefault) => { + const LeftHelper = () => { + return ( +
+ {enableLeftHelperIcon && } + {leftHelper} +
+ ); + }; + + const content = { + Placeholder: , + TextField: , + TextArea: