Using Custom Canvas Components to Carry Design Tokens in their Output Properties

[raymond-wood]

Good day. I am trying to recreate the Material 3 Design components for Power Apps. I am using a custom component called M3Theme. In it I have output properties (record data type) that contain the Material Design Tokens for typography, Colors, etc. I then import them into the app and set global schemes. For example:

Set(gblColors, M3Theme.Colors.Light);

The M3Theme.Colors property is set to

{
  Light: {
    Sys: {
      Primary: RGBA(24, 195, 45, 1),
      ...
    },
    State-Layers {
      OnSurface: {
        A008: RGBA(10, 20, 30, 0.08),
        A012: RGBA(10, 20, 30, 0.012),
        ...
      }
    }
  Dark: {
    Sys: {
      Primary: RGBA(255,255,255,1),
      ...
    },
    StateLayers {
      OnSurface: {
        A008: RGBA(10, 20, 30, 0.08),
        A012: RGBA(10, 20, 30, 0.012),
        ...
      }
    }
  }
}

I then employ the token by:

Button.Fill = gblcolor.StateLayers.OnSurface.A012

instead of having to lookup and remember

Button.Fill = RGBA(10, 20, 30, 0.012)

I do the same with typography. I can use the gblColors, gblTextStyles, within the app or pass it into M3 designed Canvas components as a record for reference by their internal parts in place of their default colors.

cmpComponent.Colors = gblColors;

Is this an approach worth using in the long run, considering scalability, etc. It's easy enough to change out and push color schemes using this method and makes moving from Figma into Power Apps a little easier. It also makes toggling color schemes dark/light pretty easy. I'm also thinking about SVG icons, Elevations, etc.

I am concerned as a beginning designer, PA builder that someone has already gone with this scheme and found it non functional or non scalable, maybe there is a better way.