PLASMA-7716: JS tokens audit (sdds-cs)

[oki1oki]

SDDS-CS

• Проведена ревизия недостающих / неактуальных JS токенов темы

What/why changed

• Проведена ревизия недостающих / неактуальных JS токенов темы

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/plasma-asdk@0.384.1-canary.3009.30805481614.0
npm install @salutejs/plasma-b2c@1.626.1-canary.3009.30805481614.0
npm install @salutejs/plasma-colors@0.16.1-canary.3009.30805481614.0
npm install @salutejs/plasma-core@1.233.1-canary.3009.30805481614.0
npm install @salutejs/plasma-giga@0.353.1-canary.3009.30805481614.0
npm install @salutejs/plasma-homeds@0.353.1-canary.3009.30805481614.0
npm install @salutejs/plasma-hope@1.380.1-canary.3009.30805481614.0
npm install @salutejs/plasma-icons@1.243.1-canary.3009.30805481614.0
npm install @salutejs/plasma-new-hope@0.370.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens@1.145.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens-b2b@1.59.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens-b2c@0.70.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens-core@0.7.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens-web@1.74.1-canary.3009.30805481614.0
npm install @salutejs/plasma-typo@0.47.1-canary.3009.30805481614.0
npm install @salutejs/plasma-web@1.628.1-canary.3009.30805481614.0
npm install @salutejs/sdds-bizcom@0.358.1-canary.3009.30805481614.0
npm install @salutejs/sdds-cs@0.362.1-canary.3009.30805481614.0
npm install @salutejs/sdds-dfa@0.356.1-canary.3009.30805481614.0
npm install @salutejs/sdds-finai@0.349.1-canary.3009.30805481614.0
npm install @salutejs/sdds-insol@0.353.1-canary.3009.30805481614.0
npm install @salutejs/sdds-insol-next@0.353.1-canary.3009.30805481614.0
npm install @salutejs/sdds-netology@0.357.1-canary.3009.30805481614.0
npm install @salutejs/sdds-os@0.28.1-canary.3009.30805481614.0
npm install @salutejs/sdds-platform-ai@0.357.1-canary.3009.30805481614.0
npm install @salutejs/sdds-sbcom@0.358.1-canary.3009.30805481614.0
npm install @salutejs/sdds-scan@0.356.1-canary.3009.30805481614.0
npm install @salutejs/sdds-serv@0.357.1-canary.3009.30805481614.0
npm install @salutejs/core-themes@0.35.1-canary.3009.30805481614.0
npm install @salutejs/plasma-themes@0.57.1-canary.3009.30805481614.0
npm install @salutejs/sdds-themes@0.71.1-canary.3009.30805481614.0
npm install @salutejs/sdds-api-tests@0.15.1-canary.3009.30805481614.0
npm install @salutejs/plasma-cy-utils@0.163.1-canary.3009.30805481614.0
npm install @salutejs/plasma-sb-utils@0.234.1-canary.3009.30805481614.0
npm install @salutejs/plasma-tokens-utils@0.55.1-canary.3009.30805481614.0
# or 
yarn add @salutejs/plasma-asdk@0.384.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-b2c@1.626.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-colors@0.16.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-core@1.233.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-giga@0.353.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-homeds@0.353.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-hope@1.380.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-icons@1.243.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-new-hope@0.370.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens@1.145.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens-b2b@1.59.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens-b2c@0.70.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens-core@0.7.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens-web@1.74.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-typo@0.47.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-web@1.628.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-bizcom@0.358.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-cs@0.362.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-dfa@0.356.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-finai@0.349.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-insol@0.353.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-insol-next@0.353.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-netology@0.357.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-os@0.28.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-platform-ai@0.357.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-sbcom@0.358.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-scan@0.356.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-serv@0.357.1-canary.3009.30805481614.0
yarn add @salutejs/core-themes@0.35.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-themes@0.57.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-themes@0.71.1-canary.3009.30805481614.0
yarn add @salutejs/sdds-api-tests@0.15.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-cy-utils@0.163.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-sb-utils@0.234.1-canary.3009.30805481614.0
yarn add @salutejs/plasma-tokens-utils@0.55.1-canary.3009.30805481614.0

Summary by CodeRabbit

• Bug Fixes

  • Improved visual consistency across Autocomplete, Badge, Calendar, Combobox, Dropdown, Select, Tabs, Text Areas, Text Fields, and Skeleton components.
  • Updated colors, typography, gradients, shadows, spacing, and states to better follow the active theme.
  • Removed the outdated Progress gradient appearance option.

• Documentation

  • Updated Progress documentation to reflect the currently supported appearance options.

• Style

  • Refined Spinner controls so available views stay synchronized with the component.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

The PR replaces legacy styling references with imported theme tokens across SDDS-CS components. It removes the deprecated Progress accentGradient variation, updates its documentation, derives Spinner Storybook views from configuration, and adjusts TextField helper spacing.

Theme and component configuration updates

Layer / File(s)	Summary
Component theme token migration packages/sdds-cs/src/components/{Autocomplete,Badge,Calendar,CalendarDouble,Combobox,Select,Skeleton,Tabs,TextArea,TextField}/...	Component styles now use imported theme tokens for colors, typography, gradients, tab backgrounds, focused dividers, and tooltip shadows.
TextField helper layout updates packages/sdds-cs/src/components/TextField/TextField.config.ts	Medium TextField helper offsets use four-value spacing, with explicit right-helper typography assignments.
Progress variation removal packages/sdds-cs/src/components/Progress/Progress.config.ts, website/sdds-cs-docs/docs/components/Progress.mdx	The accentGradient view variation is removed from the Progress configuration and documentation.
Configuration-derived Spinner controls packages/sdds-cs/src/components/Spinner/Spinner.stories.tsx	Spinner Storybook view options are derived from the component configuration instead of a hardcoded list.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• salute-developers/plasma#2884: Updates theme-token definitions used by this migration.
• salute-developers/plasma#2937: Continues the same CSS-variable to theme-token migration across component configurations.
• salute-developers/plasma#2944: Migrates overlapping component configurations to imported theme tokens.

Suggested reviewers: yakutoc, titankuzmich

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the JavaScript token audit in the sdds-cs package, which matches the main changes.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch PLASMA-7716

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Theme Builder app deployed!

https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-3009/

[github-actions]

Documentation preview deployed!

website: https://plasma.sberdevices.ru/pr/pr-3009/
sdds-cs storybook: https://plasma.sberdevices.ru/pr/pr-3009/sdds-cs-storybook/

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts`:
- Around line 32-33: Add the missing CSS declaration separator after
skeletonTokens.gradientColor in the Skeleton configuration so the subsequent
fadeInColor declaration parses independently and preserves the default fade-in
styling.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: dc35d0d8-2167-490e-9d14-88f290790ec2

📥 Commits

Reviewing files that changed from the base of the PR and between 5e591b5 and 91c6ac0.

⛔ Files ignored due to path filters (22)

• cypress/snapshots/cs/chromium/Autocomplete/Autocomplete -- readOnly.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Combobox/Combobox -- readOnly.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Select/Select -- chipView=default multiselect.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Select/Select -- closeAfterSelect.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Select/Select -- optional, innerLabel.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Select/Select -- required=left, noLabel.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/Select/Select -- view=default, size=s, labelPlacement=inner.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/TextField/TextField -- view=default, size=m appearance=clear,hasDivider=true.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/TextField/TextField -- view=default, size=m.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/TextField/TextField -- view=negative, size=s appearance=clear,hasDivider=true.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/chromium/TextField/TextField -- view=negative, size=s.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Autocomplete/Autocomplete -- readOnly.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Combobox/Combobox -- readOnly.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Select/Select -- closeAfterSelect.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Select/Select -- optional, innerLabel.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Select/Select -- required=left, noLabel.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Select/Select -- view=default, size=s, labelPlacement=inner.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/Skeleton/Skeleton -- withSkeleton -- simple.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/TextField/TextField -- view=default, size=m appearance=clear,hasDivider=true.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/TextField/TextField -- view=default, size=m.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/TextField/TextField -- view=negative, size=s appearance=clear,hasDivider=true.snap.png is excluded by !**/*.png
• cypress/snapshots/cs/webkit/TextField/TextField -- view=negative, size=s.snap.png is excluded by !**/*.png

📒 Files selected for processing (16)

• packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts
• packages/sdds-cs/src/components/Badge/Badge.config.common.ts
• packages/sdds-cs/src/components/Calendar/Calendar.config.ts
• packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts
• packages/sdds-cs/src/components/Combobox/Combobox.config.ts
• packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts
• packages/sdds-cs/src/components/Progress/Progress.config.ts
• packages/sdds-cs/src/components/Select/Select.config.ts
• packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts
• packages/sdds-cs/src/components/Spinner/Spinner.stories.tsx
• packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts
• packages/sdds-cs/src/components/TextArea/TextArea.clear.config.ts
• packages/sdds-cs/src/components/TextArea/TextArea.config.ts
• packages/sdds-cs/src/components/TextField/TextField.clear.config.ts
• packages/sdds-cs/src/components/TextField/TextField.config.ts
• website/sdds-cs-docs/docs/components/Progress.mdx

💤 Files with no reviewable changes (3)

• packages/sdds-cs/src/components/Progress/Progress.config.ts
• website/sdds-cs-docs/docs/components/Progress.mdx
• packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts