fix(Flag, Sidebar): move CSS variable defaults to private variables (DS-5396)

[KamilEmeleev]

Summary by CodeRabbit

• Improvements

  • Improved Flag and Sidebar styling behavior by providing consistent fallback values for sizing, spacing, appearance, and transition settings.
  • Existing public CSS customization options continue to work as expected.

• Documentation

  • Updated component CSS variable documentation to clarify supported overrides, inheritance, fallbacks, and usage guidelines.
  • Simplified Flag and Sidebar variable tables by focusing descriptions on each variable’s purpose.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e7cfd5a9-5ac2-426a-8dc2-f13dfb0518b2

📥 Commits

Reviewing files that changed from the base of the PR and between 43af5a8 and fac421c.

📒 Files selected for processing (5)

• AGENTS.md
• packages/components/src/components/Flag/Flag.mdx
• packages/components/src/components/Flag/Flag.module.css
• packages/components/src/components/Sidebar/Sidebar.mdx
• packages/components/src/components/Sidebar/Sidebar.module.css

---

📝 Walkthrough

Walkthrough

The change documents component CSS variable conventions and updates Flag and Sidebar styles to use local defaults with public override fallbacks. CSS variable tables now describe purposes without listing default values.

Changes

Component CSS variables

Layer / File(s)	Summary
CSS variable documentation AGENTS.md	Documents private variables, public overrides, fallback usage, inheritance, and component CSS restrictions.
Flag variable fallbacks packages/components/src/components/Flag/Flag.module.css, packages/components/src/components/Flag/Flag.mdx	Adds local defaults for Flag sizing, ratio, radius, shadow color, and empty background. CSS declarations use these defaults when public overrides are absent. The variable table now lists purposes only.
Sidebar variable fallbacks packages/components/src/components/Sidebar/Sidebar.module.css, packages/components/src/components/Sidebar/Sidebar.mdx	Adds local duration and size defaults with fallbacks to existing public variables. The variable table now lists purposes only.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: nikgurev

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies Flag and Sidebar and accurately summarizes moving CSS variable defaults to private variables.
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.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/DS-5396

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.14.0)

packages/components/src/components/Flag/Flag.module.css

ConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

packages/components/src/components/Sidebar/Sidebar.module.css

ConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:38:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:285:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:252:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:85:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:138:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:127:22)

---

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]

Visit the preview URL for this PR (updated for commit fac421c):

https://react-koobiq-next--prs-451-ljcecc1a.web.app

_{(expires Sat, 15 Aug 2026 10:00:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}