Skip to content

[BUG] Hard-coded hex colors in docs/index.html defeat custom property theming #2770

@Rajlakshmi-ai

Description

@Rajlakshmi-ai

🐛 What's broken?

The <style> block in docs/index.html contains several instances of hard-coded hex colors (e.g., #6c63ff, #4f46e5) for hover states, active links, and box shadows. Since this is documentation for a CSS framework that relies on CSS variables for theming, these colors should be utilizing the existing custom properties (like var(--ease-color-primary)).


📋 Steps to Reproduce

  1. Navigate to the repository file: docs/index.html.
  2. Inspect the <style> block at the top of the file.
  3. Observe lines like 103, 112, and 164 where specific hex codes are used instead of CSS variables.

✅ Expected Behavior

Colors should map to global CSS variables to ensure consistency and maintain the integrity of the framework's theming engine.


❌ Actual Behavior

Hard-coded values like #6c63ff and rgba(108, 99, 255, 0.25) are manually typed out, creating "magic numbers" in the stylesheet that are difficult to update later.


🔗 Reproduction

Current examples from the file:

/* Line 103 */
background: #6c63ff;

/* Line 112 */
color: #4f46e5;

/* Line 164 */
border-left: 3px solid #6c63ff;
box-shadow: inset 20px 0 20px -20px rgba(108, 99, 255, 0.25);

Metadata

Metadata

Assignees

Labels

GSSoC-26Official GSSoC 2026 issueacceptedContribution approved for integration into EaseMotion CSSgood first issueGood for newcomersgssoc:approvedApproved for GSSoC contributionshelp wantedExtra attention neededlevel:intermediateRequires moderate project understanding

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions