Swatches

Description

Provides color and font swatch classes for accessing the theme's color palette and typography. These classes are primarily used in style guides and design documentation to showcase available colors and fonts.

Usage

Apply swatch classes to elements to display colors or fonts. These classes are typically used in documentation, style guides, or design systems.

Available Options

• Color Swatches:
  • .primary-color - Primary theme color
  • .primary-color-light - Light variant
  • .primary-color-lighter - Lighter variant
  • .primary-color-lightest - Lightest variant
  • .primary-color-dark - Dark variant
  • .primary-color-darker - Darker variant
  • .primary-color-darkest - Darkest variant
  • .secondary-color - Secondary theme color (same variants)
  • .complement-color - Complement theme color (same variants)
  • .primary-text-color - Primary text color
• Font Swatches:
  • .primary-font - Primary font family
  • .secondary-font - Secondary font family

Notes

• Swatch classes are primarily used in style guides and documentation
• Color swatches set background-color properties
• Font swatches set font-family properties
• All color variants follow a consistent naming pattern
• Use swatches to showcase available theme colors and fonts
• Swatches help maintain design consistency across projects
• These classes are included in the main CSS build
• Swatches work well in grid layouts for color palettes
• Consider accessibility when using color swatches
• Font swatches are useful for typography documentation