Proposal: Token-Based Color System

Open Source Development
1

Concept idea inspired by modern design systems

I would like to share an idea for introducing a token-based, theme-aware color system in App Inventor 2. The intention is to explore whether such a system could improve AI2’s color handling through centralized color management, support for multiple themes, and consistent styling across the entire project.

:page_facing_up: Full Proposal Document

Summary of the Proposal

1. Two-Layer Color Token Architecture

  • Primitive Tokens store raw hex values (e.g., #FFFFFF).
  • Semantic Tokens reference primitives and represent meaning (e.g., text, title, button).

Example flow:

#FFFFFF → primitive → semantic

2. Multi-Theme Support

Users can:

  • Create/update/delete theme modes (Light, Dark, etc.)
  • Map semantic tokens to different primitives per mode
  • Switch theme at runtime via a Blockly block

All components update automatically when:

  • Theme changes
  • Primitive color changes
  • Semantic mapping changes

3. Project-Wide Token Access

Color tokens are available across all screens.
Token resolution uses:

semantic → primitive → final color

4. Import / Export Support

JSON Structure Example

{
    "ProjectName": "My first project",
    "Author": "Hridoy",
    "Version": "1.0",
    "Modes": ["Light", "Dark"],
    "DefaultMode": "Light",
    "Primitives": {
        "t50": "#007B7F",
        "t100": "#009B9F",
        "t150": "#00B9B9",
        "r50": "#591B1B",
        "r100": "#8C0E03",
        "r150": "#D91807"
    },
    "Semantic": {
        "Light": {
            "text": "t50",
            "title": "t100",
            "btn": "t150"
        },
        "Dark": {
            "text": "r50",
            "title": "r100",
            "btn": "r150"
        }
    }
}

Proposed New Blockly Blocks

  • Set.theme(themeName)
  • GetPrimitiveColor(name)
  • GetSemanticColor(name)

Developer Reference Implementation

A working reference is available here:

This demonstrates:

  • Token structure
  • Theme modes
  • Resolution logic
  • Import/export
  • UI synchronization

Any feedback or suggestions are welcome.

Thank you for reviewing the proposal.

— Hridoy