Extract Design System Variables and Define theme.json Values

[ashleyshaw]

Extract Design System Variables and Define theme.json Values for LSX Design Theme

Objective:
Review the existing design system for the LSX Design theme and extract relevant variables and styles. Use these variables to define as many values as possible in the theme.json file to create a cohesive and consistent design.

Tasks:

1. Review Design System:

   • Audit the current design system variables, including typography, color palettes, spacing, layout, and other relevant styles.
   • Identify reusable styles and elements that align with WordPress's global settings and styles best practices.

2. Define theme.json Values:

   • Populate theme.json with extracted variables for the following:
     • Colors: Define primary, secondary, accent, and background colors.
     • Typography: Set font families, sizes, weights, line heights, and letter spacing.
     • Spacing: Establish consistent padding and margin values.
     • Layout: Define container widths, alignments, and layout structures.
     • Custom Block Support: Enhance block settings to improve editor experience.

References:

• WordPress Global Settings and Styles Documentation

Acceptance Criteria:

• The theme.json file is populated with values derived from the design system.
• Consistency in styles across all elements and blocks within the LSX Design theme.
• Thorough testing to ensure compatibility with the block editor and WordPress standards.

{
	"version": 2,
	"settings": {
		"appearanceTools": false,
		"border": {},
		"color": {},
		"custom": {},
		"dimensions": {},
		"layout": {},
		"position": {},
		"shadow": {},
		"spacing": {},
		"typography": {},
		"useRootPaddingAwareAlignments": false,
		"blocks": {}
	}
}

Suggested Block Styles to start for theme.json

1. Buttons Block (core/buttons)

• Styles:
  • border-radius: Define rounded corners for buttons.
  • background-color: Set default button colors.
  • box-shadow: Apply shadows to enhance button appearance.
• Limitations: Advanced hover effects require custom CSS.

2. Lists Block (core/list)

• Styles:
  • padding: Remove excess padding for a cleaner look.
  • font-size: Control list item text size.
  • color: Set default text color for list items.

3. Group Block (core/group)

• Styles:
  • spacing: Control gap and margin between grouped items.
  • background-color: Set the background color for grouped blocks.
  • border-radius: Create rounded corners for container styles.

4. Heading Block (core/heading)

• Styles:
  • font-size: Offer a range of predefined sizes.
  • font-weight: Adjust the boldness of text.
  • color: Set default heading color.

5. Image Block (core/image)

• Styles:
  • border-radius: Enable rounded corners for images.
  • box-shadow: Apply a shadow effect to images.
  • alignment: Align images within the content area.

6. Cover Block (core/cover)

• Styles:
  • overlay-color: Set default overlay color and transparency.
  • background-position: Control image positioning within the block.
  • padding: Adjust spacing around the content.