Skip to content

Add : green and red alpha colors #1606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add : green and red alpha colors #1606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
03a0c69
green and red alpha colors
GoldGroove06 Oct 1, 2025
32567fc
Merge branch 'main' into add/alpha-colors
GoldGroove06 Oct 2, 2025
f027592
tokens
GoldGroove06 Oct 6, 2025
f36dcd8
Merge branch 'add/alpha-colors' of https://github.com/GoldGroove06/ra…
GoldGroove06 Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions src/design-systems/clarity/tokens/colors/green-alpha.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const greenAlpha = {
light: {
50: 'oklch(0.96 0.05 152 / 0.015)',
100: 'oklch(0.91 0.07 151 / 0.04)',
200: 'oklch(0.89 0.08 150 / 0.1)',
300: 'oklch(0.88 0.09 150 / 0.16)',
400: 'oklch(0.88 0.10 149 / 0.23)',
500: 'oklch(0.82 0.12 149 / 0.32)',
600: 'oklch(0.79 0.12 149 / 0.44)',
700: 'oklch(0.79 0.12 149 / 0.64)',
800: 'oklch(0.77 0.12 150 / 0.81)',
900: 'oklch(0.74 0.12 150 / 0.83)',
950: 'oklch(0.66 0.12 150 / 0.87)',
1000: 'oklch(0.48 0.11 149 / 0.9)',
},
dark: {
50: 'oklch(0.96 0.05 152 / 0.015)',
100: 'oklch(0.91 0.07 151 / 0.04)',
200: 'oklch(0.89 0.08 150 / 0.1)',
300: 'oklch(0.88 0.09 150 / 0.16)',
400: 'oklch(0.88 0.10 149 / 0.23)',
500: 'oklch(0.82 0.12 149 / 0.32)',
600: 'oklch(0.79 0.12 149 / 0.44)',
700: 'oklch(0.79 0.12 149 / 0.64)',
800: 'oklch(0.77 0.12 150 / 0.81)',
900: 'oklch(0.74 0.12 150 / 0.83)',
950: 'oklch(0.66 0.12 150 / 0.87)',
1000: 'oklch(0.48 0.11 149 / 0.9)',
},
Comment on lines +2 to +29
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

} as const;

export default greenAlpha
6 changes: 5 additions & 1 deletion src/design-systems/clarity/tokens/colors/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import lime from './lime';
import yellow from './yellow';
import amber from './amber';
import orange from './orange';
import redAlpha from './red-alpha';
import greenAlpha from './green-alpha';

const colors = {
gray,
Expand Down Expand Up @@ -61,7 +63,9 @@ const colors = {
lime,
yellow,
amber,
orange
orange,
'red-alpha': redAlpha,
'green-alpha': greenAlpha

} as const;

Expand Down
37 changes: 37 additions & 0 deletions src/design-systems/clarity/tokens/colors/red-alpha.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@


const redAlpha = {
light: {
50: 'oklch(0.99 0.004 15 / 0.01)',
100: 'oklch(0.98 0.01 16 / 0.03)',
200: 'oklch(0.97 0.023 16 / 0.08)',
300: 'oklch(0.94 0.041 16 / 0.14)',
400: 'oklch(0.91 0.06 16 / 0.20)',
500: 'oklch(0.87 0.075 16 / 0.26)',
600: 'oklch(0.81 0.094 15 / 0.34)',
700: 'oklch(0.75 0.114 15 / 0.44)',
800: 'oklch(0.61 0.17 14 / 0.72)',
900: 'oklch(0.56 0.17 14 / 0.76)',
950: 'oklch(0.5 0.17 14 / 0.83)',
1000: 'oklch(0.3 0.093 10 / 0.91)'
},
dark: {
50: 'oklch(0.99 0.004 15 / 0.01)',
100: 'oklch(0.98 0.01 16 / 0.03)',
200: 'oklch(0.97 0.023 16 / 0.08)',
300: 'oklch(0.94 0.041 16 / 0.14)',
400: 'oklch(0.91 0.06 16 / 0.20)',
500: 'oklch(0.87 0.075 16 / 0.26)',
600: 'oklch(0.81 0.094 15 / 0.34)',
700: 'oklch(0.75 0.114 15 / 0.44)',
800: 'oklch(0.61 0.17 14 / 0.72)',
900: 'oklch(0.56 0.17 14 / 0.76)',
950: 'oklch(0.5 0.17 14 / 0.83)',
1000: 'oklch(0.3 0.093 10 / 0.91)'
}
} as const;

export default redAlpha;



28 changes: 28 additions & 0 deletions src/examples/Colors/ColorsTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,20 @@ const colors = {
'bg-red-950',
'bg-red-1000'
],
'red-alpha': [
'bg-red-alpha-50',
'bg-red-alpha-100',
'bg-red-alpha-200',
'bg-red-alpha-300',
'bg-red-alpha-400',
'bg-red-alpha-500',
'bg-red-alpha-600',
'bg-red-alpha-700',
'bg-red-alpha-800',
'bg-red-alpha-900',
'bg-red-alpha-950',
'bg-red-alpha-1000'
],
ruby: [
'bg-ruby-50',
'bg-ruby-100',
Expand Down Expand Up @@ -261,6 +275,20 @@ const colors = {
'bg-green-950',
'bg-green-1000'
],
'green-alpha': [
'bg-green-alpha-50',
'bg-green-alpha-100',
'bg-green-alpha-200',
'bg-green-alpha-300',
'bg-green-alpha-400',
'bg-green-alpha-500',
'bg-green-alpha-600',
'bg-green-alpha-700',
'bg-green-alpha-800',
'bg-green-alpha-900',
'bg-green-alpha-950',
'bg-green-alpha-1000'
],
grass: [
'bg-grass-50',
'bg-grass-100',
Expand Down
24 changes: 24 additions & 0 deletions styles/cssTokens/base.tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,18 @@
--rad-ui-color-red-900: oklch(0.56 0.17 14);
--rad-ui-color-red-950: oklch(0.5 0.17 14);
--rad-ui-color-red-1000: oklch(0.3 0.093 10);
--rad-ui-color-red-alpha-50: oklch(0.99 0.004 15 / 0.01);
--rad-ui-color-red-alpha-100: oklch(0.98 0.01 16 / 0.03);
--rad-ui-color-red-alpha-200: oklch(0.97 0.023 16 / 0.08);
--rad-ui-color-red-alpha-300: oklch(0.94 0.041 16 / 0.14);
--rad-ui-color-red-alpha-400: oklch(0.91 0.06 16 / 0.20);
--rad-ui-color-red-alpha-500: oklch(0.87 0.075 16 / 0.26);
--rad-ui-color-red-alpha-600: oklch(0.81 0.094 15 / 0.34);
--rad-ui-color-red-alpha-700: oklch(0.75 0.114 15 / 0.44);
--rad-ui-color-red-alpha-800: oklch(0.61 0.17 14 / 0.72);
--rad-ui-color-red-alpha-900: oklch(0.56 0.17 14 / 0.76);
--rad-ui-color-red-alpha-950: oklch(0.5 0.17 14 / 0.83);
--rad-ui-color-red-alpha-1000: oklch(0.3 0.093 10 / 0.91);
--rad-ui-color-ruby-50: hsl(348, 100%, 99.5%);
--rad-ui-color-ruby-100: hsl(345, 100%, 98.4%);
--rad-ui-color-ruby-200: hsl(345, 89.9%, 96.7%);
Expand Down Expand Up @@ -252,6 +264,18 @@
--rad-ui-color-green-900: oklch(0.6 0.11 153);
--rad-ui-color-green-950: oklch(0.53 0.1 152);
--rad-ui-color-green-1000: oklch(0.28 0.042 150);
--rad-ui-color-green-alpha-50: oklch(0.96 0.05 152 / 0.015);
--rad-ui-color-green-alpha-100: oklch(0.91 0.07 151 / 0.04);
--rad-ui-color-green-alpha-200: oklch(0.89 0.08 150 / 0.1);
--rad-ui-color-green-alpha-300: oklch(0.88 0.09 150 / 0.16);
--rad-ui-color-green-alpha-400: oklch(0.88 0.10 149 / 0.23);
--rad-ui-color-green-alpha-500: oklch(0.82 0.12 149 / 0.32);
--rad-ui-color-green-alpha-600: oklch(0.79 0.12 149 / 0.44);
--rad-ui-color-green-alpha-700: oklch(0.79 0.12 149 / 0.64);
--rad-ui-color-green-alpha-800: oklch(0.77 0.12 150 / 0.81);
--rad-ui-color-green-alpha-900: oklch(0.74 0.12 150 / 0.83);
--rad-ui-color-green-alpha-950: oklch(0.66 0.12 150 / 0.87);
--rad-ui-color-green-alpha-1000: oklch(0.48 0.11 149 / 0.9);
--rad-ui-color-grass-50: #fbfefb;
--rad-ui-color-grass-100: #f5fbf5;
--rad-ui-color-grass-200: #e9f6e9;
Expand Down
29 changes: 29 additions & 0 deletions styles/jsTokens/colors.tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,21 @@ export default {
900: 'var(--rad-ui-color-red-900)',
950: 'var(--rad-ui-color-red-950)',
1000: 'var(--rad-ui-color-red-1000)'

},
'red-alpha': {
50: 'var(--rad-ui-color-red-alpha-50)',
100: 'var(--rad-ui-color-red-alpha-100)',
200: 'var(--rad-ui-color-red-alpha-200)',
300: 'var(--rad-ui-color-red-alpha-300)',
400: 'var(--rad-ui-color-red-alpha-400)',
500: 'var(--rad-ui-color-red-alpha-500)',
600: 'var(--rad-ui-color-red-alpha-600)',
700: 'var(--rad-ui-color-red-alpha-700)',
800: 'var(--rad-ui-color-red-alpha-800)',
900: 'var(--rad-ui-color-red-alpha-900)',
950: 'var(--rad-ui-color-red-alpha-950)',
1000: 'var(--rad-ui-color-red-alpha-1000)'
},
ruby: {
50: 'var(--rad-ui-color-ruby-50)',
Expand Down Expand Up @@ -293,6 +308,20 @@ export default {
950: 'var(--rad-ui-color-green-950)',
1000: 'var(--rad-ui-color-green-1000)'
},
'green-alpha': {
50: 'var(--rad-ui-color-green-alpha-50)',
100: 'var(--rad-ui-color-green-alpha-100)',
200: 'var(--rad-ui-color-green-alpha-200)',
300: 'var(--rad-ui-color-green-alpha-300)',
400: 'var(--rad-ui-color-green-alpha-400)',
500: 'var(--rad-ui-color-green-alpha-500)',
600: 'var(--rad-ui-color-green-alpha-600)',
700: 'var(--rad-ui-color-green-alpha-700)',
800: 'var(--rad-ui-color-green-alpha-800)',
900: 'var(--rad-ui-color-green-alpha-900)',
950: 'var(--rad-ui-color-green-alpha-950)',
1000: 'var(--rad-ui-color-green-alpha-1000)'
},
grass: {
50: 'var(--rad-ui-color-grass-50)',
100: 'var(--rad-ui-color-grass-100)',
Expand Down
Loading