Skip to main content

Default Theme

Play+ Default Theme: Cardinal Pink​

Overview​

This is the official default theme of the Play+ Design System, named "Cardinal Pink" for its energetic, confident, and high-contrast visual identity.

It is defined in the following file:

📁 styles/themes/theme.map.json

This JSON file contains the full semantic token mappings to the base design tokens defined in _base.css. All derivations for dark and high contrast modes are handled automatically by the Play+ theme engine.

1. Semantic Token Map (theme.map.json)​

{
  "color-brand-primary": "--global-color-pink-500",
  "color-brand-hover": "--global-color-pink-700",

  "color-background-primary": "--global-color-white",
  "color-background-secondary": "--global-color-gray-50",

  "color-border-default": "--global-color-gray-300",
  "color-border-focus": "--global-color-pink-500",

  "color-text-primary": "--global-color-gray-700",
  "color-text-secondary": "--global-color-gray-400",
  "color-text-on-brand": "--global-color-white",

  "color-status-success": "--global-color-green-500",
  "color-status-error": "--global-color-red-500",
  "color-status-warning": "--global-color-yellow-500",
  "color-status-info": "--global-color-blue-info-500",

  "font-family-heading": "--global-font-family-heading",
  "font-family-body": "--global-font-family-body",

  "font-heading-h1": "bold clamp(2rem, 1.5vw + 1.5rem, 3rem) / 1.2",
  "font-heading-h2": "bold clamp(1.5rem, 1vw + 1.2rem, 2rem) / 1.2",
  "font-heading-h3": "semibold clamp(1.25rem, 0.75vw + 1rem, 1.5rem) / 1.2",
  "font-body-1": "regular 1rem / 1.5",

  "spacing-section-padding": "--global-spacing-6",
  "spacing-component-gap": "--global-spacing-3",

  "radius-component-default": "--global-radius-md",
  "radius-input": "--global-radius-sm",
  "radius-surface": "--global-radius-lg",

  "motion-pattern-fade": "150ms cubic-bezier(0.4, 0, 0.2, 1)",
  "motion-pattern-slide": "300ms cubic-bezier(0, 0, 0.2, 1)",
  "motion-pattern-pop": "450ms cubic-bezier(0.4, 0, 0.2, 1)"
}

Note on Hover State:​

While the Play+ engine automatically derives hover states, this theme explicitly defines "color-brand-hover": "--global-color-pink-700" for precise brand control. If this token were omitted, the engine would derive the hover color automatically from color-brand-primary.

2. Dark Mode Derivation​

The Play+ theme engine auto-generates a dark theme by intelligently transforming semantic color tokens using perceptual inversion logic. Examples:

  • --global-color-white → --global-color-gray-900
  • --global-color-gray-50 → --global-color-gray-800
  • Text and borders are automatically lightened or darkened to preserve legibility

Manual overrides can be optionally added via themes/dark.map.json.

3. High Contrast Mode (HCM)​

When forced-colors: active is detected:

  • Semantic tokens are mapped to platform-safe values (Canvas, Highlight, ButtonText, etc.)
  • This occurs dynamically at runtime, requiring no manual token declarations

4. Usage Guidelines​

  • ✅ Use semantic tokens in components and layout styles
  • ⚠️ Do not use global tokens directly in UI logic
  • 🔁 Override for brand themes using files like acme.map.json

The Cardinal Pink theme ensures that your UI is luminous, expressive, and accessible across light, dark, and high contrast environments — with zero duplication.