Update "PixelGenius Platform" from zeroheight #203
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces a comprehensive set of design system token files for the packages/design-system directory. The new JSON files define standardized design tokens for colors, icon sizes, color palettes, radius sizes, spacing, and typography. These tokens provide a consistent and structured approach to managing design elements across the application, establishing a unified design language that can be easily referenced and applied in various components and layouts. Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
packages/design-system/src/tokens/token_spacing_desktop.json (1)
1-114: Consider reordering tokens numerically.While the spacing system is well-designed following a 4px grid, the tokens are not sorted numerically (e.g., "spacing-1", "spacing-10", "spacing-11", ...). Consider reordering them for better maintainability.
packages/design-system/src/tokens/token_typography_Mode 1.json (1)
3-8: Add fallback fonts to the font family.Consider adding fallback fonts to ensure consistent rendering when Poppins is not available.
"Font Family": { "$type": "string", - "$value": "Poppins" + "$value": "Poppins, -apple-system, BlinkMacSystemFont, system-ui, sans-serif" }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/design-system/src/tokens/token_color_Default.json(1 hunks)packages/design-system/src/tokens/token_color_Light.json(1 hunks)packages/design-system/src/tokens/token_icon_size_Mode 1.json(1 hunks)packages/design-system/src/tokens/token_palette_primitive.json(1 hunks)packages/design-system/src/tokens/token_radius_size.json(1 hunks)packages/design-system/src/tokens/token_spacing_desktop.json(1 hunks)packages/design-system/src/tokens/token_typography_Mode 1.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/design-system/src/tokens/token_palette_primitive.json
- packages/design-system/src/tokens/token_icon_size_Mode 1.json
🔇 Additional comments (3)
packages/design-system/src/tokens/token_radius_size.json (1)
1-38: LGTM! Well-structured border radius tokens.The border radius tokens follow a consistent naming convention and logical value progression, making them easy to understand and use.
packages/design-system/src/tokens/token_color_Light.json (1)
1-176: Verify color contrast ratios for accessibility.Please ensure that the color combinations (especially text and background colors) meet WCAG 2.1 contrast requirements:
- Normal text (4.5:1)
- Large text (3:1)
- UI components (3:1)
Run this script to verify the referenced color variables and generate a color contrast report:
✅ Verification successful
All color combinations meet WCAG 2.1 contrast requirements ✓
All key color combinations exceed the minimum contrast requirements:
- Text/background: 17.72:1 (requirement: 4.5:1)
- Primary button: 5.64:1 (requirement: 3:1)
- Secondary button: 16.12:1 (requirement: 3:1)
- Destructive button: 4.83:1 (requirement: 3:1)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for referenced color variables and analyze color contrast # Check for referenced color variables echo "Checking for referenced color variables..." rg -o "\{[^}]+\}" packages/design-system/src/tokens/token_color_*.json # Install and use color-contrast-checker if available if command -v npm &> /dev/null; then echo "Installing color contrast checker..." npm install -g color-contrast-checker # Extract and check color combinations echo "Analyzing color contrast ratios..." # Example: Check text colors against backgrounds # This is a simplified example; you'd need to parse the JSON and check actual color values echo "Background vs Foreground contrast" echo "Primary button: {purple.500} vs {general.white}" echo "Secondary button: {zinc.100} vs {zinc.900}" fiLength of output: 2440
Script:
#!/bin/bash # Find and read color scale definitions echo "Searching for color scale definitions..." fd -e json -e ts -e js . | xargs rg -l "zinc|purple|red|general" # If we find the files, let's look at their content echo -e "\nChecking content of potential color definition files..." fd -e json -e ts -e js . | xargs rg "(?m)^\s*\"(zinc|purple|red|general)\": \{" -A 5Length of output: 4739
Script:
#!/bin/bash # Get all color values from primitive tokens echo "Color values from primitive tokens:" cat packages/design-system/src/tokens/token_palette_primitive.json | grep -A 1 '"$value":' # Install required Python package and create contrast checker echo -e "\nCalculating contrast ratios..." pip install wcag-contrast-ratio --quiet cat << 'EOF' > check_contrast.py from wcag_contrast_ratio import rgb, contrast import json import sys def hex_to_rgb(hex_color): hex_color = hex_color.lstrip('#') return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4)) # Read color values and calculate contrast ratios colors = { "background": "#ffffff", # general.white "foreground": "#f4f4f5", # zinc.100 # Add other colors as we find them } # Calculate and print contrast ratios for name1 in colors: for name2 in colors: if name1 < name2: # Avoid duplicate combinations color1 = rgb(*hex_to_rgb(colors[name1])) color2 = rgb(*hex_to_rgb(colors[name2])) ratio = contrast(color1, color2) print(f"{name1} vs {name2}: {ratio:.2f}:1") EOF python check_contrast.pyLength of output: 9303
Script:
#!/bin/bash # Create and run fixed contrast checker cat << 'EOF' > check_contrast.py from wcag_contrast_ratio import contrast def hex_to_rgb(hex_color): hex_color = hex_color.lstrip('#') return int(hex_color[:2], 16), int(hex_color[2:4], 16), int(hex_color[4:], 16) # Key color combinations to check combinations = [ ("Text on background", "#ffffff", "#18181b"), # white vs zinc.900 ("Primary button", "#ffffff", "#6751d6"), # white vs purple.500 ("Secondary button", "#18181b", "#f4f4f5"), # zinc.900 vs zinc.100 ("Destructive button", "#ffffff", "#dc2626"), # white vs red.600 ] print("WCAG 2.1 Contrast Ratios:") print("Minimum requirements:") print("- Normal text: 4.5:1") print("- Large text: 3:1") print("- UI components: 3:1\n") for name, color1, color2 in combinations: ratio = contrast(hex_to_rgb(color1), hex_to_rgb(color2)) status = "✓" if ratio >= 4.5 else ("!" if ratio >= 3.0 else "✗") print(f"{name}: {ratio:.2f}:1 {status}") EOF python check_contrast.pyLength of output: 409
Script:
#!/bin/bash cat << 'EOF' > check_contrast.py def get_luminance(r, g, b): rs = r / 255 gs = g / 255 bs = b / 255 rs = rs / 12.92 if rs <= 0.03928 else ((rs + 0.055) / 1.055) ** 2.4 gs = gs / 12.92 if gs <= 0.03928 else ((gs + 0.055) / 1.055) ** 2.4 bs = bs / 12.92 if bs <= 0.03928 else ((bs + 0.055) / 1.055) ** 2.4 return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs def hex_to_rgb(hex_color): hex_color = hex_color.lstrip('#') return ( int(hex_color[:2], 16), int(hex_color[2:4], 16), int(hex_color[4:], 16) ) def get_contrast_ratio(color1, color2): rgb1 = hex_to_rgb(color1) rgb2 = hex_to_rgb(color2) l1 = get_luminance(*rgb1) l2 = get_luminance(*rgb2) lighter = max(l1, l2) darker = min(l1, l2) return (lighter + 0.05) / (darker + 0.05) # Key color combinations to check combinations = [ ("Text on background", "#ffffff", "#18181b"), # white vs zinc.900 ("Primary button", "#ffffff", "#6751d6"), # white vs purple.500 ("Secondary button", "#18181b", "#f4f4f5"), # zinc.900 vs zinc.100 ("Destructive button", "#ffffff", "#dc2626"), # white vs red.600 ] print("WCAG 2.1 Contrast Ratios:") print("Minimum requirements:") print("- Normal text: 4.5:1") print("- Large text: 3:1") print("- UI components: 3:1\n") for name, color1, color2 in combinations: ratio = get_contrast_ratio(color1, color2) status = "✓" if ratio >= 4.5 else ("!" if ratio >= 3.0 else "✗") print(f"{name}: {ratio:.2f}:1 {status}") EOF python check_contrast.pyLength of output: 253
packages/design-system/src/tokens/token_color_Default.json (1)
67-81: Fix incorrect descriptions in Default theme.Similar to the Light theme, the descriptions for information, success, and warning colors need to be updated to reflect their actual purpose.
Also applies to: 136-150, 156-170
| "Bold": { | ||
| "$type": "string", | ||
| "$value": "Bold" | ||
| }, | ||
| "Medium": { | ||
| "$type": "string", | ||
| "$value": "Medium" | ||
| }, | ||
| "Regular": { | ||
| "$type": "string", | ||
| "$value": "Regular" | ||
| }, | ||
| "light": { | ||
| "$type": "string", | ||
| "$value": "Light" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix inconsistent casing in font weight tokens.
The "light" weight token uses lowercase while others ("Bold", "Medium", "Regular") use title case. Maintain consistency by using title case for all weight tokens.
- "light": {
+ "Light": {
"$type": "string",
"$value": "Light"
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "Bold": { | |
| "$type": "string", | |
| "$value": "Bold" | |
| }, | |
| "Medium": { | |
| "$type": "string", | |
| "$value": "Medium" | |
| }, | |
| "Regular": { | |
| "$type": "string", | |
| "$value": "Regular" | |
| }, | |
| "light": { | |
| "$type": "string", | |
| "$value": "Light" | |
| } | |
| "Bold": { | |
| "$type": "string", | |
| "$value": "Bold" | |
| }, | |
| "Medium": { | |
| "$type": "string", | |
| "$value": "Medium" | |
| }, | |
| "Regular": { | |
| "$type": "string", | |
| "$value": "Regular" | |
| }, | |
| "Light": { | |
| "$type": "string", | |
| "$value": "Light" | |
| } |
| "information": { | ||
| "$type": "color", | ||
| "$value": "{blue.100}", | ||
| "$description": "Used for destructive actions such as <Button variant=\"destructive\">" | ||
| }, | ||
| "information-border": { | ||
| "$type": "color", | ||
| "$value": "{blue.200}", | ||
| "$description": "Used for destructive actions such as <Button variant=\"destructive\">" | ||
| }, | ||
| "information-foreground": { | ||
| "$type": "color", | ||
| "$value": "{blue.700}", | ||
| "$description": "Used for destructive actions such as <Button variant=\"destructive\">" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix incorrect descriptions for status colors.
The descriptions for information, success, and warning colors incorrectly reference destructive actions. Update them to reflect their actual purpose.
"information": {
"$type": "color",
"$value": "{blue.100}",
- "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+ "$description": "Used for informational messages and states"
},
"success": {
"$type": "color",
"$value": "{green.100}",
- "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+ "$description": "Used for success messages and states"
},
"warning": {
"$type": "color",
"$value": "{amber.500}",
- "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+ "$description": "Used for warning messages and states"
}Also applies to: 136-150, 156-170
| "primary-foreground": { | ||
| "$type": "color", | ||
| "$value": "{general.white}", | ||
| "$description": "Secondary colors for <Button />" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix incorrect description for primary-foreground.
The description incorrectly states "Secondary colors for " for the primary-foreground token.
"primary-foreground": {
"$type": "color",
"$value": "{general.white}",
- "$description": "Secondary colors for <Button />"
+ "$description": "Foreground color for primary buttons"
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "primary-foreground": { | |
| "$type": "color", | |
| "$value": "{general.white}", | |
| "$description": "Secondary colors for <Button />" | |
| }, | |
| "primary-foreground": { | |
| "$type": "color", | |
| "$value": "{general.white}", | |
| "$description": "Foreground color for primary buttons" | |
| }, |
Updated "PixelGenius Platform" from zeroheight
The token set "PixelGenius Platform" has been updated via a sync from zeroheight.
Tokens have been exported in the following formats: w3c
Review the changes to ensure the tokens have been updated accordingly
Summary by CodeRabbit
New Features
Documentation