Enforce SCSS variable usage with stylelint-declaration-strict-value

[coderabbitai]

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 plugin to enforce the use of variables, functions, or calculations for properties like:

• - Colors
• - Font sizes
• - Font weights
• - Z-indices
• - Spacing values (margins, paddings)
• - Box-shadows
• - Opacities
• - Gradients
• - Border-radiuses

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:

npm install --save-dev stylelint-declaration-strict-value

2. Add to stylelint configuration:

{
  "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 #891

[ansivgit]

Also I suggest to change our $color-black variable to $color-gray-900 - black color from Mentorship page mockup