TypeScript Library - Surface Tint + Elevations

[wojtek-viirtue]

It seems that the typescript library doesn't account for the md.sys.color.surface-tint-color token which should default to the primary color.

In addition, is there a POV on how elevations should be handled?

I think at present it would require manually compositing the surface color + primary color (possibly to be replaced the aforementioned surface tint color) with opacity at a given elevation per the specification. Implemented as a custom color today?

Is there an example of how to use HCT to accomplish this to get the tonal variations for the elevations?

Thank you in advance! The library and concepts are awesome!

[jquense]

Checking the flutter source, led me to: https://api.flutter.dev/flutter/dart-ui/Color/alphaBlend.html as the actual mechanism for tinting, and the specifics of which color and opacity seem to be covered in the Material design guidelines

[guidezpl]

To answer the elevation question, we're moving away from blending a base color + a surface tint color to fully providing roles for surface colors (e.g. surface-2, surface-1, surface, surface+1, etc.). That'll be coming this year.

[rodydavis]

surface-tint color is removed in favor of surface-tint

[jiblett1000]

@wojtek-viirtue I'm figuring you've probably got a solution worked out by now, but here's my function for generating tailwind classes for the surface elevation tints until the official implementation is released. Not sure if it's 100% accurate, but it looks reasonably well in my project. You'd probably want to remove some stuff if you're not using tailwind in your project, but hope it helps!

const mapSurfaceTints = (
  surfaceColor: number,
  primaryColor: number,
  schemeName: string
) => {
  const tints = [0.05, 0.08, 0.11, 0.12, 0.14];

  return tints.reduce((colors, tint, index) => {
    colors[`surface-${index + 1}-${schemeName}`] = hexFromArgb(
      Blend.cam16Ucs(surfaceColor, primaryColor, tint)
    );

    return colors;
  }, {} as { [key: string]: string });
};

use:

mapSurfaceTints(
  theme.schemes.light.surface,
  theme.schemes.light.primary,
  "light"
)

output:

{
  'surface-1-light': '#eff4ec',
  'surface-2-light': '#e8efe5',
  'surface-3-light': '#e1e9df',
  'surface-4-light': '#dfe8dd',
  'surface-5-light': '#dae4d9'
}

[rodydavis]

Just want to call out surfaces are about to change. This will be reflected in the library soon.

The material theme builder figma plugin just updated to show the new roles (it uses material color utilities internally)

[guidezpl]

@pennzht I think this can be closed, yes?

[gpkc]

@guidezpl Sorry but so is this available in the Typescript library already? I can't find anywhere in the implementation.

[guidezpl]

https://github.com/material-foundation/material-color-utilities/blob/main/typescript/dynamiccolor/material_dynamic_colors.ts#L145-L236 are all the explicit surface colors per the M3 guidelines.

[gpkc]

I see. My issue was that they're missing from the Scheme returned by themeFromSourceColor/themeFromImage.

Seems this is only available on dynamic color schemes. I don't think this should necessarily be the case?

[guidezpl]

Agreed yeah, those theme functions should be updated

[gpkc]

So it's probably not on the roadmap yet to update them right? If anyone wants to use the correct surface colors they should use dynamic colors for now

[vollowx]

But where's the surface-container-highest and something others? They're not included in the TS library (at least not the release).

[gpkc]

But where's the surface-container-highest and something others? They're not included in the TS library (at least not the release).

They are in the dynamic schemes part only. You can create them with for example, SchemeTonalSpot, SchemeNeutral, etc...

Something like this:

import {
  argbFromHex,
  hexFromArgb,
  Hct,
  SchemeContent,
  MaterialDynamicColors,
} from "@material/material-color-utilities";

const mainColor = "#3f51b5";

const isDark = false;
const contrastLevel = 0.3;
const argb = argbFromHex(mainColor);
const source = Hct.fromInt(argb);
const dynamicScheme = new SchemeContent(source, isDark, contrastLevel);


const surfaceContainerHighest = hexFromArgb(MaterialDynamicColors["surfaceContainerHighest"].getArgb(dynamicScheme));