Improve dark.json for LSX Design using theme.json Formatting

[ashleyshaw]

Description:
The current dark.json file has a solid foundation for a dark theme. However, there are areas that can be improved for better integration and user experience within LSX Design. The goal is to update dark.json to leverage the latest theme.json formatting and best practices, optimizing it for better contrast, readability, and overall styling consistency.

Tasks:

• 1. Palette Improvements:

  • Add more contrast between the primary and secondary colors for better readability.
  • Refine the accent colors to make them more distinguishable in both light and dark areas.
  • Example: Consider using colors from other themes like Evening or Midnight for inspiration, which use strong accent color combinations like #1B1B1B and #F0F0F0 [Source: Evening, Midnight].

• 2. Duotone Filters:

  • Rework duotone color filters to ensure better harmony with the overall dark theme palette.
  • Validate and enhance the denary-and-primary and black-and-secondary filters for visual consistency [Source: dark.json].

• 3. Typography Adjustments:

  • Ensure font sizes and weights are accessible and readable against the dark background.
  • Reference themes like Dusk or Morning, which include thoughtful typography adjustments, such as appropriate letter-spacing and line-height [Source: Dusk, Morning].

• 4. Blocks and Components:

  • Review core block styles like buttons, site titles, and headings. Ensure their contrast, padding, and hover states work well in the dark mode.
  • Example: Update button background colors and border-radius settings for clarity, such as using var:preset|color|contrast with hover styles inspired by Midnight [Source: Midnight].

• 5. CSS Variables:

  • Introduce more CSS variables for color mixing (like color-mix functions) to allow smoother hover effects and transitions between dark and light modes.

• 6. Element Refinements:

  • Adjust button and link elements to ensure consistent interaction feedback (e.g., hover, focus states).
  • Check for consistent application of textTransform, fontWeight, and fontFamily across headings and buttons [Source: Noon, Twilight].

Acceptance Criteria:

• dark.json fully complies with the latest theme.json format.
• Enhanced readability and accessibility with optimized colors and typography.
• Block and element styling fully tested in dark mode, ensuring no color clashes or inconsistencies.
• Hover and interactive states offer a smooth and visually consistent experience.