830-refactor: Move style params to scss variables

[YuliaDemir]

What type of PR is this? (select all that apply)

• 🍕 Feature
• 🐛 Bug Fix
• 🚧 Breaking Change
• 🧑‍💻 Code Refactor
• 📝 Documentation Update

Description

• add consts for border-radius
• add consts for font-size
• add consts for gap

Related Tickets & Documents

• Related Issue Move style params from code to scss-variables #830
• Closes Move style params from code to scss-variables #830

Screenshots, Recordings

Please replace this line with any relevant images for UI changes.

Added/updated tests?

• 👌 Yes
• 🙅‍♂️ No, because they aren't needed
• 🙋‍♂️ No, because I need help

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Summary by CodeRabbit

• Style
  • Replaced hardcoded pixel values for spacing, font sizes, and border-radius with predefined SCSS variables across all components and UI modules.
  • Standardized gaps, font sizes, and border radii for consistent theming and easier maintenance throughout the application.
  • No changes to layout structure or component behavior.

[SpaNb4]

run visual now

[SpaNb4]

@coderabbitai, please create an issue about enforcing variable usage in SCSS, for example using https://github.com/AndyOGo/stylelint-declaration-strict-value

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if the repository has any Stylelint configuration files
echo "Checking for Stylelint configuration files..."
fd -e json -e js -e yaml -e yml stylelint

# Check for any package.json files to see if stylelint is already a dependency
echo "Checking package.json for stylelint dependencies..."
cat package.json 2>/dev/null | grep -i stylelint || echo "No stylelint in root package.json or file not found"

# Look for SCSS files to confirm they're used in the project
echo "Checking for SCSS files in the project..."
fd -e scss | head -5

# Check if there are any linting rules or mentions of variable usage enforcement in documentation
echo "Checking for linting documentation or guidelines..."
fd -t f -e md -e txt | xargs grep -l "lint" 2>/dev/null | head -5

Length of output: 1157

---

🏁 Script executed:

#!/bin/bash
# Check for any existing stylelint configuration files
echo "Looking for stylelint configuration files..."
fd "\.stylelintrc" || fd ".stylelint.config" || echo "No stylelint config files found with common names"

# Check for any SCSS variable files to understand current variable structure
echo "Looking for SCSS variable files..."
fd -e scss | grep -i "var\|constants\|colors\|theme" | head -5

# Let's examine the first few lines of a constants file to see how variables are defined
echo "Examining SCSS variables..."
cat src/core/styles/_constants.scss | head -15

Length of output: 867

---

🏁 Script executed:

#!/bin/bash
# Create a new GitHub issue about enforcing SCSS variable usage
gh issue create --title "Enforce SCSS variable usage with stylelint-declaration-strict-value" --body "## Overview
Currently, the project uses Stylelint for SCSS linting (as seen in package.json), but we should enhance the configuration to enforce the use of variables for specific CSS properties instead of hardcoded values.

## Recommendation
Integrate [stylelint-declaration-strict-value](https://github.com/AndyOGo/stylelint-declaration-strict-value) plugin to enforce the use of variables, functions, or calculations for properties like:
- Colors
- Font sizes
- Font weights 
- Z-indices
- Spacing values (margins, paddings)

## Benefits
- Ensures consistency across the entire codebase
- Makes global styling changes easier to manage
- Prevents hardcoded values that might not follow the design system
- Improves maintainability and prevents visual regressions

## Implementation
1. Install the plugin:
\`\`\`bash
npm install --save-dev stylelint-declaration-strict-value
\`\`\`

2. Add to stylelint configuration:
\`\`\`json
{
  \"plugins\": [\"stylelint-declaration-strict-value\"],
  \"rules\": {
    \"scale-unlimited/declaration-strict-value\": [
      [\"color\", \"z-index\", \"font-size\", \"font-weight\"],
      {
        \"ignoreValues\": [\"transparent\", \"inherit\", \"initial\", \"currentColor\", \"0\"]
      }
    ]
  }
}
\`\`\`

3. Gradually update existing code to use variables where hardcoded values are currently used.

## Related PR
Requested by @SpaNb4 in https://github.com/rolling-scopes/site/pull/891
"

Length of output: 1546

---

@SpaNb4 I've created a GitHub issue about enforcing variable usage in SCSS using the stylelint-declaration-strict-value plugin as requested. The issue is available at: #895

The issue includes:

• Overview of the current setup
• Recommendation to use the plugin
• Benefits of enforcing SCSS variables
• Implementation steps with example configuration
• Reference back to this PR

[YuliaDemir]

I can't view the 19 visual changes that require verification. percy returns an error

[github-actions]

Lighthouse Report:

• Performance: 63 / 100
• Accessibility: 96 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[github-actions]

Lighthouse Report:

• Performance: 70 / 100
• Accessibility: 96 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100

View detailed report

[coderabbitai]

📝 Walkthrough

Walkthrough

This update introduces SCSS variables for border radius, font sizes, and spacing gaps in the central style constants file. All hardcoded pixel values for these properties across multiple SCSS modules are replaced with the new variables, standardizing design tokens throughout the codebase without changing layout or logic.

Changes

File(s)	Change Summary
src/core/styles/_constants.scss	Added SCSS variables for border-radius, font sizes, and gap spacing.
src/core/styles/index.scss	Replaced hardcoded border-radius and font-size with variables.
.../docs-layout.module.scss, .../docs-menu.module.scss, .../search.module.scss	Replaced gap and font-size pixel values with SCSS variables.
.../course-card.module.scss, .../course-item.module.scss, .../event-card.module.scss	Substituted border-radius, gap, and font-size values with variables.
.../mentor-feedback-card.module.scss, .../trainer-card.module.scss	Updated spacing, border-radius, and font-size to use variables.
.../date-simple.module.scss, .../link-custom.module.scss, .../list.module.scss	Replaced gap, font-size, and border-radius with variables.
.../main-title.module.scss, .../modal.module.scss, .../paragraph.module.scss	Updated font-size and border-radius to use variables.
.../section-label.module.scss, .../short-info-panel.module.scss, .../social-media-item...	Replaced font-size and gap values with SCSS variables.
.../subtitle.module.scss, .../playlist.module.scss, .../video-playlist-with-player...	Substituted gap, border-radius, and font-size with variables.
.../widget-title.module.scss, .../about-community.module.scss, .../benefits.module.scss	Updated font-size and gap to use variables.
.../breadcrumbs.module.scss, .../community-media.module.scss, .../contribute.module.scss	Replaced font-size and gap pixel values with variables.
.../courses.module.scss, .../events.module.scss, .../footer.scss, .../general.module.scss	Updated spacing and font-size to use variables.
.../nav-item.module.scss, .../hero-course.module.scss, .../hero-page.module.scss	Substituted font-size and gap values with variables.
.../onboard-links.module.scss, .../mentors-feedback.module.scss, .../mentors-register...	Replaced font-size and gap values with variables.
.../mentors-wanted-course.module.scss, .../mentors-wanted.module.scss, .../activity-card...	Updated gap and border-radius to use variables.
.../mentor-activities.module.scss, .../mentorship-after-register.module.scss	Replaced gap pixel values with variables.
.../mentorship-courses.module.scss, .../mentorship-details.module.scss, .../mentorship-hero...	Substituted gap and border-radius with variables.
.../merch.module.scss, .../mobile-view.module.scss, .../info-cell.module.scss	Updated gap and font-size to use variables.
.../info-grid.module.scss, .../numbers.module.scss, .../partnered.scss, .../place-item...	Replaced gap and font-size values with SCSS variables.
.../principle-card.module.scss, .../principles.module.scss, .../school-item.module.scss	Substituted column-gap, border-radius, and font-size with variables.
.../school-menu.module.scss, .../speakers.module.scss, .../stage-card.module.scss	Updated gap and font-size to use variables.
.../stages.module.scss, .../study-with-us.module.scss, .../support.module.scss, .../trainers...	Replaced gap pixel values with variables.
.../upcoming-courses.module.scss	Updated gap property to use variable.

Sequence Diagram(s)

Not applicable—no feature or control flow changes.

Assessment against linked issues

Objective (Issue #)	Addressed	Explanation
Add SCSS variables for border-radius and font size properties (#830)	✅
Replace px with variables in the code (#830)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes found.

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🔭 Outside diff range comments (1)

src/shared/ui/subtitle/subtitle.module.scss (1)

47-53: 🛠️ Refactor suggestion

Replace hardcoded tablet size with variable
Within the .font-size-extra-large tablet query, font-size: 32px should be updated to $font-size-xl for consistency.

-        font-size: 32px;
+        font-size: $font-size-xl;

🧹 Nitpick comments (7)

src/widgets/numbers/ui/numbers/numbers.module.scss (1)

66-68: Replace hardcoded gap override with variable
The 64px tablet gap remains hardcoded; consider using an appropriate $gap-* variable to maintain consistency.

src/widgets/merch/ui/merch.module.scss (1)

33-35: Use SCSS variable for responsive gap
The 74px gap under @include media-laptop is still hardcoded; consider using a design token (e.g., $gap-xxxl) for consistency.

src/widgets/breadcrumbs/ui/breadcrumbs.module.scss (1)

5-5: Consolidate font-size with design token

Good replacement of the fixed 14px with $font-size-xs for consistency.

Consider also converting the 8px horizontal padding in .separator to $gap-xs to complete the variable migration.

src/shared/ui/main-title/main-title.module.scss (1)

19-19: Leverage XXL font-size token

Updating 44px to $font-size-xxl standardizes the small variant typography.

Consider migrating other hardcoded sizes (96px, 60px) in this file to variables for full consistency.

src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss (1)

12-12: Consolidate media queries and variables
Nice use of $gap-s. Consider merging the two @include media-tablet blocks into one to reduce duplication.

src/widgets/general/ui/general.module.scss (1)

14-14: Adopt SCSS variable for gap
Great use of $gap-s. Consider also replacing the hardcoded margin-top: 24px (line 23) with a gap variable (e.g. $gap-m) for full consistency.

src/shared/ui/subtitle/subtitle.module.scss (1)

27-33: Use SCSS variable for base medium size
The medium variant still hardcodes 28px; consider replacing with the appropriate $font-size-xxl or another token.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b900dc6 and cb96879.

📒 Files selected for processing (64)

• src/app/docs/components/docs-layout/docs-layout.module.scss (3 hunks)
• src/app/docs/components/docs-menu/docs-menu.module.scss (1 hunks)
• src/app/docs/components/search/search.module.scss (1 hunks)
• src/core/styles/_constants.scss (1 hunks)
• src/core/styles/index.scss (2 hunks)
• src/entities/course/ui/course-card/course-card.module.scss (5 hunks)
• src/entities/course/ui/course-item/course-item.module.scss (1 hunks)
• src/entities/event/ui/event-card/event-card.module.scss (6 hunks)
• src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss (3 hunks)
• src/entities/trainer/ui/trainers-card/trainer-card.module.scss (3 hunks)
• src/shared/ui/date-simple/date-simple.module.scss (1 hunks)
• src/shared/ui/link-custom/link-custom.module.scss (4 hunks)
• src/shared/ui/list/list.module.scss (3 hunks)
• src/shared/ui/main-title/main-title.module.scss (1 hunks)
• src/shared/ui/modal/modal.module.scss (2 hunks)
• src/shared/ui/paragraph/paragraph.module.scss (2 hunks)
• src/shared/ui/section-label/section-label.module.scss (1 hunks)
• src/shared/ui/short-info-panel/short-info-panel.module.scss (2 hunks)
• src/shared/ui/social-media-item/social-media-item.module.scss (2 hunks)
• src/shared/ui/subtitle/subtitle.module.scss (3 hunks)
• src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss (5 hunks)
• src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss (2 hunks)
• src/shared/ui/widget-title/widget-title.module.scss (3 hunks)
• src/widgets/about-community/ui/about-community.module.scss (2 hunks)
• src/widgets/benefits/ui/benefits/benefits.module.scss (4 hunks)
• src/widgets/breadcrumbs/ui/breadcrumbs.module.scss (1 hunks)
• src/widgets/community-media/ui/community-media.module.scss (1 hunks)
• src/widgets/contribute/ui/contribute.module.scss (4 hunks)
• src/widgets/courses/ui/courses.module.scss (1 hunks)
• src/widgets/events/ui/events.module.scss (1 hunks)
• src/widgets/footer/footer.scss (2 hunks)
• src/widgets/general/ui/general.module.scss (2 hunks)
• src/widgets/header/ui/nav-item/nav-item.module.scss (1 hunks)
• src/widgets/hero-course/ui/hero-course.module.scss (2 hunks)
• src/widgets/hero-page/ui/hero-page.module.scss (2 hunks)
• src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss (1 hunks)
• src/widgets/mentors-feedback/ui/mentors-feedback.module.scss (1 hunks)
• src/widgets/mentors-register/ui/mentors-register.module.scss (1 hunks)
• src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss (1 hunks)
• src/widgets/mentors-wanted/ui/mentors-wanted.module.scss (1 hunks)
• src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss (1 hunks)
• src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss (1 hunks)
• src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss (1 hunks)
• src/widgets/mentorship-courses/mentorship-courses.module.scss (1 hunks)
• src/widgets/mentorship-details/mentorship-details.module.scss (1 hunks)
• src/widgets/mentorship-hero/ui/mentorship-hero.module.scss (1 hunks)
• src/widgets/merch/ui/merch.module.scss (1 hunks)
• src/widgets/mobile-view/ui/mobile-view.module.scss (2 hunks)
• src/widgets/numbers/ui/info-cell/info-cell.module.scss (3 hunks)
• src/widgets/numbers/ui/info-grid/info-grid.module.scss (1 hunks)
• src/widgets/numbers/ui/numbers/numbers.module.scss (1 hunks)
• src/widgets/partnered/partnered.scss (2 hunks)
• src/widgets/places/ui/place-item/place-item.module.scss (2 hunks)
• src/widgets/principles/ui/principle-card/principle-card.module.scss (4 hunks)
• src/widgets/principles/ui/principles/principles.module.scss (1 hunks)
• src/widgets/school-menu/ui/school-item/school-item.module.scss (1 hunks)
• src/widgets/school-menu/ui/school-menu/school-menu.module.scss (1 hunks)
• src/widgets/speakers/ui/speakers.module.scss (2 hunks)
• src/widgets/study-path/ui/stage-card/stage-card.module.scss (4 hunks)
• src/widgets/study-path/ui/stages/stages.module.scss (1 hunks)
• src/widgets/study-with-us/ui/study-with-us.module.scss (3 hunks)
• src/widgets/support/ui/support.module.scss (3 hunks)
• src/widgets/trainers/ui/trainers.module.scss (1 hunks)
• src/widgets/upcoming-courses/ui/upcoming-courses.module.scss (1 hunks)

🔇 Additional comments (163)

src/core/styles/_constants.scss (3)

99-104: Add border-radius design tokens. Centralizing border-radius values as SCSS variables enables consistent styling across components.

---

107-113: Introduce font-size design tokens. Defining a typographic scale from xx-small to xx-large standardizes text sizing.

---

116-122: Centralize gap sizes into SCSS variables. These spacing tokens improve maintainability and ensure consistent layout spacing.

src/app/docs/components/docs-menu/docs-menu.module.scss (1)

15-15: Replace hardcoded font-size with SCSS variable. Using $font-size-xs aligns this menu’s typography with the project’s design tokens.

src/widgets/school-menu/ui/school-item/school-item.module.scss (1)

67-67: Standardize description font-size using token. Swapping the fixed 12px for $font-size-xxs enhances consistency across UI elements.

src/shared/ui/section-label/section-label.module.scss (1)

4-4: Use SCSS variable for label font-size. Replacing 14px with $font-size-xs ensures uniform text sizing.

src/widgets/mentorship-courses/mentorship-courses.module.scss (1)

8-8: Adopt SCSS variable for grid gap. Replacing 32px with $gap-xl improves maintainability and aligns with design tokens.

src/app/docs/components/search/search.module.scss (1)

45-47: Use SCSS variable for font size
Replaced hardcoded 14px with $font-size-xs to align with design tokens.

src/widgets/numbers/ui/numbers/numbers.module.scss (1)

4-7: Use SCSS gap variable
Replaced 24px with $gap-l for consistent spacing.

src/widgets/study-path/ui/stages/stages.module.scss (1)

1-5: Centralize spacing with SCSS variable
Updated gap to $gap-xl instead of 32px to align with design system tokens.

src/widgets/merch/ui/merch.module.scss (1)

1-3: Standardize layout gap
Replaced hardcoded 50px with $gap-xxxl for unified spacing.

src/widgets/header/ui/nav-item/nav-item.module.scss (1)

50-53: Use SCSS font-size variable
Replaced 16px with $font-size-s to unify typography scales.

src/entities/course/ui/course-item/course-item.module.scss (1)

25-25: Consistent spacing: use SCSS gap variable
Replacing the hardcoded gap with $gap-xs aligns this component with the design tokens and improves maintainability.

src/widgets/upcoming-courses/ui/upcoming-courses.module.scss (1)

19-19: Consistent spacing: use SCSS gap variable
Swapping the fixed 24px for $gap-l standardizes spacing according to the design system.

src/widgets/numbers/ui/info-grid/info-grid.module.scss (1)

44-44: Consistent spacing: use SCSS gap variable
Replacing the hardcoded 24px gap with $gap-l ensures uniform spacing across responsive breakpoints.

src/widgets/trainers/ui/trainers.module.scss (1)

8-8: Consistent spacing: use SCSS gap variable
Using $gap-xl instead of a fixed 32px keeps this grid in line with our spacing scale.

src/widgets/mentors-feedback/ui/mentors-feedback.module.scss (1)

4-4: Consistent spacing: use SCSS gap variable
Switching from 32px to $gap-xl here improves consistency with the global gap definitions.

src/shared/ui/date-simple/date-simple.module.scss (2)

3-3: Use standardized gap variable

Replacing the hardcoded 8px with $gap-xs ensures consistent spacing across components.

---

9-9: Apply font-size design token

Switching 14px to $font-size-xs aligns typography with the global style system.

src/widgets/events/ui/events.module.scss (2)

4-4: Standardize large gap spacing

Good use of $gap-l to replace the previous 24px gap.

---

10-10: Standardize small gap spacing

Replacing 16px with $gap-s ensures uniform spacing tokens.

src/widgets/principles/ui/principles/principles.module.scss (3)

3-3: Apply XL gap token

The default gap is now standardized to $gap-xl.

---

8-8: Apply S gap token for laptop

Switching to $gap-s aligns laptop layout spacing.

---

13-13: Apply XS gap token for tablet

Using $gap-xs ensures tighter spacing on tablets per design.

src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss (1)

28-28: Use SCSS variable for gap Replaced hardcoded spacing with $gap-xxl under the tablet breakpoint for consistency.

src/widgets/mentorship-hero/ui/mentorship-hero.module.scss (1)

14-14: Apply design token for border radius Swapped the fixed 12px radius with $border-radius-s to align with the style constants.

src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss (2)

4-4: Use SCSS variable for gap Updated the flex gap to $gap-s instead of a hardcoded value.

---

9-9: Use SCSS variable for border radius Swapped the hardcoded corner rounding with $border-radius-s.

src/widgets/mentors-wanted/ui/mentors-wanted.module.scss (1)

21-21: Use SCSS variable for gap Replaced the fixed 40px gap with $gap-xxl under the large-tablet breakpoint.

src/widgets/mentorship-details/mentorship-details.module.scss (1)

7-7: Use SCSS variable for gap Converted the static gap to $gap-xxl for design consistency.

src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss (2)

6-6: Standardize font-size with SCSS variable
Nice replacement of hardcoded 18px with $font-size-m. This centralizes typography tokens.

---

10-10: Use SCSS variable for responsive font-size
Good swap of 16px to $font-size-s in the laptop breakpoint.

src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss (1)

5-5: Replace hardcoded gap with SCSS variable
gap: 32px → $gap-xl ensures consistent spacing tokens across your grid layout.

src/widgets/community-media/ui/community-media.module.scss (2)

3-3: Use design token for large gap
Replacing 50px with $gap-xxxl improves theme consistency.

---

7-7: Swap fixed gap for SCSS variable
16px → $gap-s aligns with your spacing scale.

src/widgets/general/ui/general.module.scss (1)

5-5: Convert column-gap to SCSS variable
column-gap: 24px → $gap-l centralizes spacing configuration.

src/widgets/mentors-register/ui/mentors-register.module.scss (2)

13-13: Verify spacing variable matches original value
Confirm that $gap-xxxl maps to the previous 176px so this refactor doesn’t unintentionally alter the layout.

---

18-18: Replace fixed gap with SCSS variable
Switching 32px to $gap-xl keeps the spacing scale coherent.

src/shared/ui/widget-title/widget-title.module.scss (3)

14-14: Adopted XXL font-size variable for .small.
Great replacement of the hardcoded font-size with $font-size-xxl, ensuring consistency with design tokens.

---

26-26: Standardized tablet font-size in .medium.
Using $font-size-xxl under the tablet media query aligns with the new style constants.

---

38-38: Standardized tablet font-size in .large.
Substituted the fixed value with $font-size-xxl for consistency at tablet breakpoints.

src/widgets/mobile-view/ui/mobile-view.module.scss (2)

14-14: Replaced hardcoded gap with $gap-s.
Applying $gap-s improves thematic spacing consistency across components.

---

38-38: Replaced hardcoded font-size with $font-size-l.
Switching to the SCSS variable ensures maintainable typography scales.

src/widgets/partnered/partnered.scss (2)

7-7: Replaced hardcoded title size with $font-size-xxl.
Consistent use of the new font-size variable keeps typography in sync.

---

37-37: Replaced hardcoded row-gap with $gap-s.
Using the $gap-s token standardizes vertical spacing under the tablet mixin.

src/widgets/courses/ui/courses.module.scss (1)

4-4: Replaced fixed gap with $gap-l.
Adopting the $gap-l variable aligns this layout with global spacing tokens.

src/widgets/school-menu/ui/school-menu/school-menu.module.scss (2)

6-6: Replaced hardcoded gap with $gap-s.
Switching to the $gap-s variable ensures consistent spacing in the menu layout.

---

11-11: Replaced fixed font-size with $font-size-xxs.
Using $font-size-xxs improves consistency and maintainability of text sizing.

src/widgets/hero-page/ui/hero-page.module.scss (2)

2-2: Verify $gap-s availability: Ensure _constants.scss is imported or $gap-s is globally available to avoid compilation errors.

---

30-30: Approve font-size variable: Using $font-size-xl here aligns with the global typography scale.

src/core/styles/index.scss (2)

134-134: Verify $border-radius-xs import: Confirm that the constants file providing $border-radius-xs is loaded in this context.

---

208-208: Approve font-size variable: Substituting 24px with $font-size-xl standardizes your heading sizes.

src/widgets/hero-course/ui/hero-course.module.scss (3)

7-7: Verify $gap-xxl import: Ensure the new extra-large gap token is defined and available in this module.

---

24-24: Approve hero-subtitle font size: $font-size-xl is consistent with other subtitle scales.

---

29-29: Approve tablet font size: $font-size-l fits the responsive design spec.

src/widgets/about-community/ui/about-community.module.scss (3)

8-8: Verify $gap-m import: Confirm that the medium gap variable is defined and imported correctly.

---

28-28: Approve extra-large gap variable: Replacing 176px breakpoints with $gap-xxxl improves consistency.

---

32-32: Approve large gap variable: Using $gap-xl here aligns with the layout spacing guidelines.

src/app/docs/components/docs-layout/docs-layout.module.scss (3)

34-34: Approve menu gap variable: $gap-m standardizes spacing in the mobile menu layout.

---

43-43: Approve content gap variable: Using $gap-xxxl here aligns with the global spacing scale.

---

62-62: Approve top section gap: Substituting 20px with $gap-m ensures responsive consistency.

src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss (2)

4-4: Standardize gap using design token
Replacing the hardcoded value with $gap-l aligns with our spacing scale.

---

18-18: Standardize border-radius using design token
Using $border-radius-s ensures consistent rounding across components.

src/widgets/numbers/ui/info-cell/info-cell.module.scss (3)

7-7: Standardize gap using design token
Switching to $gap-s centralizes spacing control and improves maintainability.

---

49-49: Standardize title font-size using design token
Applying $font-size-xxl aligns typography with our scale.

---

74-74: Standardize description font-size using design token
Using $font-size-s ensures consistent text sizing.

src/shared/ui/modal/modal.module.scss (2)

9-9: Standardize border-radius using design token
Replacing 12px with $border-radius-s maintains consistency with our radius scale.

---

120-122: Standardize close-button styling using design tokens
Switching to $border-radius-xxxl and $font-size-xl ensures uniform look & feel.

src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss (5)

4-4: Standardize gap using design token
Applying $gap-m centralizes vertical spacing.

---

9-9: Standardize steps gap using design token
Using $gap-xxl aligns section spacing with our design system.

---

14-14: Standardize step gap using design token
Replacing hardcoded gap with $gap-s enhances spacing consistency.

---

21-21: Standardize tablet step gap using design token
Switching to $gap-xs ensures responsive spacing scales correctly.

---

26-26: Standardize tablet steps gap using design token
Using $gap-l maintains consistent responsive spacing.

src/widgets/study-path/ui/stage-card/stage-card.module.scss (5)

3-3: Standardize card gap using design token
Setting gap to $gap-xxl aligns layout spacing with our scale.

---

25-25: Standardize step font-size using design token
Updating to $font-size-xl ensures consistent typography.

---

33-33: Standardize step font-size for tablet using design token
Switching to $font-size-s maintains responsive font scaling.

---

52-52: Standardize stage-info gap using design token
Replacing with $gap-xs centralizes content spacing.

---

106-106: Standardize responsive card gap using design token
Applying $gap-s ensures uniform spacing on tablet.

src/shared/ui/short-info-panel/short-info-panel.module.scss (3)

4-4: Consistent gap token:
Replacing 16px with $gap-s aligns with the centralized spacing scale.

---

14-14: Tight gap token:
Using $gap-xs instead of 8px keeps small gutters consistent.

---

20-20: Small font-size token:
Switching 14px to $font-size-xs enforces your new typographic scale.

src/widgets/places/ui/place-item/place-item.module.scss (3)

8-8: Medium font-size token:
Changing 20px to $font-size-l standardizes heading text sizes.

---

22-22: Extra-large font-size token:
Replacing 36px with $font-size-xxl matches the design system.

---

27-27: Responsive font-size token:
Using $font-size-s in the tablet breakpoint keeps typography consistent.

src/shared/ui/list/list.module.scss (4)

4-4: List gap token:
Swapping 8px for $gap-xs aligns list spacing with the new scale.

---

6-6: Base font-size token:
Replacing 18px with $font-size-m ensures consistent body text sizing.

---

16-16: Compact variant font-size token:
Using $font-size-s in the laptop media query matches your responsive typographic rules.

---

26-26: Responsive font-size token:
Switching 16px to $font-size-s for tablet-large preserves typographic consistency.

src/widgets/study-with-us/ui/study-with-us.module.scss (6)

4-4: Large gap token:
Changing 24px to $gap-l standardizes vertical rhythm in the main container.

---

12-12: Triple-extra-large gap token:
Replacing ?px (assumed original) with $gap-xxxl in .study-wrap ensures consistency.

---

15-16: Double-extra-large responsive gap:
Swapping ?px to $gap-xxl in tablet-large breakpoint maintains the design tokens.

---

45-45: Consistent gap token in options:
Using $gap-l instead of a fixed value aligns the option list with the new spacing scale.

---

51-51: Responsive extra-large gap in options:
Switching to $gap-xl for tablet-large reinforces your responsive layout tokens.

---

62-62: Small gap token in item:
Replacing the hardcoded gap with $gap-s ensures uniform item spacing.

src/widgets/footer/footer.scss (4)

22-22: Footer about-list gap token:
Using $gap-l instead of 24px keeps list spacing on-brand.

---

26-26: Footer about-list font-size token:
Replacing 18px with $font-size-m aligns with global typography settings.

---

56-56: Responsive footer gap token:
Switching 50px to $gap-xxxl in the laptop-medium breakpoint ensures token consistency.

---

59-59: Footer left section gap token:
Using $gap-xxxl matches the updated spacing scale in the breakpoint.

src/shared/ui/social-media-item/social-media-item.module.scss (3)

6-6: Use design tokens for spacing Replacing hardcoded 8px with $gap-xs aligns with the centralized gap scale.

---

13-13: Use design tokens for typography Substituting 14px with $font-size-xs maintains consistency in the type scale.

---

48-48: Use responsive type tokens Switching 12px to $font-size-xxs in the tablet media query keeps the font-size scale uniform.

src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss (4)

4-4: Standardize gap value Changing gap: 24px to $gap-l ensures consistent spacing across components.

---

11-11: Use border-radius token Replacing 12px with $border-radius-s centralizes corner rounding.

---

39-39: Standardize gap value Updating gap: 24px to $gap-l in .card-info aligns with the design system.

---

57-57: Standardize gap value Applying $gap-l instead of 24px in .card-content-wrapper keeps spacing uniform.

src/widgets/contribute/ui/contribute.module.scss (4)

4-4: Standardize gap value Replacing gap: 24px with $gap-l centralizes spacing definitions.

---

36-36: Standardize gap value Changing gap: 50px to $gap-xxxl aligns with the global gap scale.

---

46-46: Standardize gap value Swapping gap: 24px for $gap-l in .contribute-options keeps spacing consistent.

---

61-61: Standardize gap value Updating gap: 16px to $gap-s in .option-item adheres to the spacing tokens.

src/widgets/speakers/ui/speakers.module.scss (4)

3-3: Standardize gap value Replacing 50px with $gap-xxxl ensures uniform spacing across the .speakers layout.

---

15-15: Standardize gap value Changing gap: 8px to $gap-xs in .email-wrapper aligns with the gap scale.

---

19-19: Use design tokens for typography Substituting 18px with $font-size-m maintains the type scale in .email-wrapper.

---

24-24: Use responsive type tokens Switching 16px to $font-size-s in the tablet media query ensures responsive typography.

src/widgets/support/ui/support.module.scss (5)

5-5: Standardize gap value Replacing 50px with $gap-xxxl in .support-content aligns with the global spacing scale.

---

40-40: Standardize gap value Changing gap: 16px to $gap-s in .donate-options keeps spacing consistent.

---

48-48: Standardize gap value Swapping gap: 24px for $gap-l in .donate-item adheres to the design tokens.

---

51-51: Use responsive spacing token Updating gap: 16px to $gap-s in the tablet media query ensures consistent spacing.

---

62-62: Use responsive spacing token Replacing 40px with $gap-xxl in the tablet-large media query aligns with spacing tokens.

src/shared/ui/subtitle/subtitle.module.scss (2)

5-13: Verify font-size mapping for extra-small
The .font-size-extra-small class uses $font-size-l at base and $font-size-m at tablet; please confirm this mapping aligns with design guidelines.

---

16-23: Verify font-size mapping for small
.font-size-small applies $font-size-xl (base) and $font-size-l (tablet); ensure this matches project design tokens.

src/widgets/benefits/ui/benefits/benefits.module.scss (6)

13-17: Grid-item uses SCSS variables correctly
The .grid-item now leverages $border-radius-s and $font-size-m, replacing hardcoded values.

---

38-42: Used $gap-l in laptop breakpoint
The media-laptop query replaces the fixed gap with $gap-l, aligning with the design tokens.

---

44-46: Applied $gap-s for tablet breakpoint
The media-tablet query now uses $gap-s instead of a literal value.

---

61-69: Flex-item styling tokens applied
Flex items now use $gap-s, $border-radius-s, and $font-size-m, improving consistency.

---

92-95: Laptop breakpoint flex gap
The flex layout’s laptop media query correctly uses $gap-l.

---

97-100: Tablet breakpoint flex gap
The flex layout’s tablet media query now leverages $gap-s.

src/entities/course/ui/course-card/course-card.module.scss (5)

11-14: Use SCSS variable for base card border-radius
The root .course-card now uses $border-radius-s, replacing hardcoded radius.

---

36-42: Apply design tokens in card-header
.card-header’s gap and top border-radius now utilize $gap-s and $border-radius-s.

---

60-68: Consistent styling tokens in course-info
.course-info uses $gap-s and $border-radius-s for spacing and corner rounding.

---

103-106: Size-sm variant uses $font-size-xs
The .size-sm .course-info now employs $font-size-xs instead of hardcoded text size.

---

119-121: Size-sm course-link font-size token
The .size-sm .course-link now references $font-size-xs for readability consistency.

src/shared/ui/link-custom/link-custom.module.scss (4)

6-9: Button gap variable applied
The .button class now uses $gap-xs for spacing, replacing the hardcoded 8px.

---

17-23: Secondary variant font-size token
.secondary now uses $font-size-m instead of 18px, improving consistency.

---

39-46: Primary variant font-size standardization
.primary applies $font-size-m for its text size, aligning with the design system.

---

63-68: Rounded variant uses design tokens
.rounded now references $border-radius-xxxl and $font-size-xs, removing magic numbers.

src/entities/trainer/ui/trainers-card/trainer-card.module.scss (5)

1-4: Apply gap token to trainer-card
The root .trainer-card now uses $gap-l for spacing instead of a fixed 24px.

---

7-10: Use variable for card border-radius
.trainer-card container corners now reference $border-radius-m, improving theme consistency.

---

19-21: Card-picture image rounding token
Inner image now uses $border-radius-s, removing the hardcoded radius.

---

31-36: Consistent font-size for subtitle
.card-subtitle now applies $font-size-m rather than a literal 18px.

---

39-42: Standardize content font-size
.card-content text now uses $font-size-s, replacing the previous hardcoded size.

src/widgets/principles/ui/principle-card/principle-card.module.scss (6)

1-115: Re-run visual regression tests.

Percy reported errors previously; ensure these refactors render correctly across breakpoints.

---

9-9: Standardize column gap with $gap-s.

Replacing 16px with the design token ensures consistent spacing.

---

14-14: Use $border-radius-s for rounded corners.

Applying the SCSS variable centralizes border-radius values.

---

35-35: Adopt $gap-s for flex gap.

This aligns card-header spacing with the global spacing scale.

---

51-51: Normalize body text size with $font-size-m.

Switching 18px to the font-size variable maintains typographic consistency.

---

110-110: Adjust narrow viewport text with $font-size-s.

Replacing 16px inside media-laptop improves maintainability.

src/entities/event/ui/event-card/event-card.module.scss (6)

8-8: Use $border-radius-s on the card container.

Centralizing corner radius ensures uniform components.

---

19-19: Apply $border-radius-s to header corners.

This variable replacement maintains consistency with other cards.

---

41-41: Switch .event-tag font-size to $font-size-s.

Using the font token aligns text size across UI elements.

---

76-76: Refactor .event-additional-info font to $font-size-s.

The SCSS variable standardizes the small text size.

---

95-95: Set footer border radius via $border-radius-s.

Ensures the bottom corners match the top radius.

---

107-107: Use $font-size-xs for event-date text.

Replaces fixed 14px to keep typographic scale.

src/shared/ui/paragraph/paragraph.module.scss (4)

8-8: Define .medium-font-size with $font-size-m.

Standardizing the medium paragraph size improves consistency.

---

14-14: Use $font-size-l for .large-font-size.

Aligns large paragraphs with the global typographic scale.

---

26-26: Apply $font-size-s inside media-laptop.

Consistent small text sizing in responsive layouts.

---

31-31: Normalize large text on laptop with $font-size-m.

Replaces fixed value for maintainability.

src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss (7)

4-4: Adopt $gap-xs for playlist gap.

Switching from 8px to the spacing token unifies layout.

---

13-13: Use $gap-xs in .videos-container.

Consistent small gap across the playlist items.

---

18-18: Switch to $gap-l on larger breakpoints.

Replaces 24px with the large spacing variable.

---

37-37: Apply $gap-xs for .playlist-item gap.

Ensures item spacing follows the design token scale.

---

69-69: Define thumbnail border radius with $border-radius-xs.

Centralizes the small corner radius value.

---

91-91: Use $border-radius-xs for overlay rounding.

Maintains consistent small-radius styling.

---

93-93: Standardize overlay text size with $font-size-xs.

Replaces 14px to match the typography scale.