Implementing Color Palettes in LSX Design

[ashleyshaw]

Introduction:

With the release of the WordPress Twenty Twenty-Five theme, a new approach to using the WordPress Block Theme API system was introduced. Specifically, the use of color palettes allows for easier customization without affecting more comprehensive style settings, offering users a lightweight way to change the look and feel of their site.

Problem/Opportunity:

Currently, LSX Design has its own color palettes, but they are limited in scope and do not fully leverage WordPress's newer global style functionality. By expanding the color palette options, LSX Design can offer users more flexibility in customization while maintaining style consistency. This will also bring LSX Design up to speed with WordPress 6.7 features.

Current State in LSX Design:

At present, LSX Design includes custom color palettes, but these are not integrated with the full range of WordPress global styles. Below is an example of the current color palette setup:

{
  "settings": {
    "color": {
      "palette": [
        { "color": "#1B1B1B", "name": "Base", "slug": "base" }
      ]
    }
  }
}

While functional, the current setup could benefit from additional color options to enhance user experience and accommodate varying user preferences, accessibility needs, and brand identities.

Issues:

1. Limited Color Palettes: The current palette lacks variety, making it difficult for users to cater to different branding and accessibility requirements.
2. Style Consistency: Without leveraging WordPress’s global palette system, LSX Design risks feeling rigid in terms of customization, leading to potential inconsistencies in design implementations.

Proposed Solution:

1. Create a Colors Folder: Add a /lsx-design/styles/colors/ folder containing multiple color palette JSON files for users to easily switch between different preset color palettes. This aligns with WordPress’s system and provides a flexible customization experience.
2. Leverage WordPress Presets: Implement a variety of color palettes inspired by WordPress’s default themes (like Twenty Twenty-Five) to provide users with options such as:
   • Dark Mode Palettes (e.g., Twilight, Midnight)
   • Neutral Palettes (e.g., Morning, Noon)
   • Vibrant Palettes (e.g., Afternoon, Sunrise)
3. Adapt Style Variations: In addition to color palettes, offer comprehensive style variations that change typography, spacing, and layout for users seeking deeper customization beyond color.
4. Customization for User Preferences: Provide more nuanced color control to let users fine-tune their palette for accessibility and branding needs, similar to how themes like Evening and Dusk manage contrast and accent colors.

Challenges:

• Ensuring that expanded color palettes do not negatively impact performance.
• Maintaining the lightweight nature of LSX Design while introducing more customization options.

Call for Feedback:

I’d like to gather thoughts on expanding LSX Design’s color palettes. What are your experiences with using custom color palettes in WordPress themes? Should we consider any additional features or constraints when implementing this feature?

Next Steps:

If the community agrees, I will start by creating a prototype folder structure for the color palettes and implementing a few preset examples. Feedback on those will help guide the full integration process.

• @ZaredRogers could we use AI create a couple colour palettes using JSON? Just to test the concept out in a github branch?