Add : green and red alpha colors

[GoldGroove06]

Summary by CodeRabbit

• New Features
  • Added translucent (alpha) color scales for red and green with shades 50–1000 (including 950).
  • Exposed as CSS custom properties and as JS design tokens for use across themes (light/dark).
  • Now visible in color examples/palettes and usable for overlays, focus states, and subtle backgrounds.
  • Extends the token set without changing existing colors or behavior.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f36dcd8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Adds two new alpha color scales — red-alpha and green-alpha — across CSS variables, JS token maps, design-system token modules, and includes them in the Colors example rendering. No existing tokens or control flow were modified.

Changes

Cohort / File(s)	Summary
Example rendering update src/examples/Colors/ColorsTemplate.js	Adds red-alpha and green-alpha to the colors mapping so the example now iterates and renders these groups.
CSS alpha color tokens styles/cssTokens/base.tokens.css	Adds CSS custom properties --rad-ui-color-red-alpha-50…1000 and --rad-ui-color-green-alpha-50…1000 under :root. Existing variables unchanged.
JS color token map styles/jsTokens/colors.tokens.js	Extends the exported color map with red-alpha and green-alpha scales (50–1000, including 950) referencing the new CSS variables.
Design-system color modules src/design-systems/clarity/tokens/colors/* src/design-systems/clarity/tokens/colors/red-alpha.ts, .../green-alpha.ts, .../index.ts	Adds redAlpha and greenAlpha token modules (light/dark tonal scales 50–1000) and registers them in the colors index export.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix: add lin commit hook for css #765 — Modifies styles/jsTokens/colors.tokens.js; related to adding/formatting color scales.
• Refactor Token Gen #1059 — Touches shared color token modules and mappings; overlaps with new design-system token entries.
• Restore CSS/SCSS bundling builds #557 — Restructured the exported color token object; relevant to integrating new red-alpha/green-alpha properties.

Suggested reviewers

• kotAPI

Poem

I nibble at the color map, small and spry,
Red and green with whispers of sky,
Alpha threads stitched soft and thin,
I hop through tokens with a grin. 🐰🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly summarizes the primary change by stating the addition of green and red alpha color groups, matching the modifications made across color templates and token files. It is concise, specific, and free of unrelated details, making it easy to understand the PR’s main purpose at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

src/design-systems/clarity/tokens/colors/index.ts (1)

66-68: Add trailing comma after 'orange' for consistency.

A comma should be added after orange on line 66 to maintain consistency with the object formatting pattern used throughout the file.

Apply this diff:

- orange, + orange, 'red-alpha': redAlpha, 'green-alpha': greenAlpha

src/design-systems/clarity/tokens/colors/red-alpha.ts (3)

1-2: Remove unnecessary blank lines.

The file begins with two blank lines that should be removed for consistency with other color token files.

Apply this diff:

- - const redAlpha = {

---

35-37: Remove trailing blank lines.

The file ends with three blank lines that should be removed for consistency with other color token files.

Apply this diff:

 export default redAlpha; - - -

---

4-31: Remove extra space after light:

- light: { + light: {

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 32567fc and f36dcd8.

📒 Files selected for processing (3)

• src/design-systems/clarity/tokens/colors/green-alpha.ts (1 hunks)
• src/design-systems/clarity/tokens/colors/index.ts (2 hunks)
• src/design-systems/clarity/tokens/colors/red-alpha.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: coverage
• GitHub Check: Jest (2/2)

🔇 Additional comments (1)

src/design-systems/clarity/tokens/colors/index.ts (1)

32-33: LGTM!

The imports follow the existing pattern and are correctly placed alphabetically by color family.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify: Light and dark themes are identical.

The light and dark theme color values are exactly the same (lines 3-14 match lines 17-28). This is unusual for color tokens, as dark mode typically requires different color values for proper contrast and readability.

Run the following script to check if other alpha or non-alpha color tokens also have identical light/dark themes:

---

🏁 Script executed:

#!/bin/bash # Description: Check if other color token files have identical light/dark themes # Find all color token files and check for identical light/dark sections fd -e ts -p 'src/design-systems/clarity/tokens/colors/.*\.ts$' --exec bash -c '  file="$1"  if grep -q "light:" "$file" && grep -q "dark:" "$file"; then  echo "Checking: $file"  # Extract light and dark sections and compare  light=$(awk "/light:/{flag=1; next} /dark:/{flag=0} flag" "$file")  dark=$(awk "/dark:/{flag=1; next} /\} as const/{flag=0} flag" "$file")  if [ "$light" = "$dark" ]; then  echo " ⚠️ IDENTICAL light and dark themes"  else  echo " ✓ Different light and dark themes"  fi  fi ' _ {}

Length of output: 3236

---

Distinct dark theme values for green-alpha.ts
The light and dark themes in src/design-systems/clarity/tokens/colors/green-alpha.ts are identical, unlike all other color tokens—please provide unique dark mode values for proper contrast.

🤖 Prompt for AI Agents

In src/design-systems/clarity/tokens/colors/green-alpha.ts around lines 2–29, the dark theme object currently duplicates the light theme values; replace the dark values with distinct Oklch colors tuned for dark UI contrast. For each key (50–1000) provide adjusted oklch values (increase lightness for lighter tokens and reduce alpha for very light stops, or lower lightness/match chroma for darker stops) so the palette reads clearly on dark backgrounds; ensure the same keys remain, preserve ordering, and test contrast against the dark background to meet visual parity with other token files.