new color token `surface-container-low` ... Any plans to add it?

[robothot]

I see that some tokens in the tokens of the document and the generated colors do not exist

see https://m3.material.io/styles/color/the-color-system/key-colors-tones

I am a novice, I am more confused. My English is not very good, so I use translation software

[tanishqmanuja]

Same issue for me,

WORKAROUND FOR NOW:

export function applySurfaceStyles(
    theme: Theme,
    { dark }: { dark: boolean }
): void {
    if (dark) {
        const elevationProps = {
            "--md-sys-color-surface-dim": theme.palettes.neutral.tone(6),
            "--md-sys-color-surface-bright": theme.palettes.neutral.tone(24),
            "--md-sys-color-surface-container-lowest": theme.palettes.neutral.tone(4),
            "--md-sys-color-surface-container-low": theme.palettes.neutral.tone(10),
            "--md-sys-color-surface-container": theme.palettes.neutral.tone(12),
            "--md-sys-color-surface-container-high": theme.palettes.neutral.tone(17),
            "--md-sys-color-surface-container-highest":
                theme.palettes.neutral.tone(22),
        };

        for (const [property, argbColor] of Object.entries(elevationProps)) {
            document.body.style.setProperty(property, hexFromArgb(argbColor));
        }
    } else {
        const elevationProps = {
            "--md-sys-color-surface-dim": theme.palettes.neutral.tone(87),
            "--md-sys-color-surface-bright": theme.palettes.neutral.tone(98),
            "--md-sys-color-surface-container-lowest":
                theme.palettes.neutral.tone(100),
            "--md-sys-color-surface-container-low": theme.palettes.neutral.tone(96),
            "--md-sys-color-surface-container": theme.palettes.neutral.tone(94),
            "--md-sys-color-surface-container-high": theme.palettes.neutral.tone(92),
            "--md-sys-color-surface-container-highest":
                theme.palettes.neutral.tone(90),
        };

        for (const [property, argbColor] of Object.entries(elevationProps)) {
            document.body.style.setProperty(property, hexFromArgb(argbColor));
        }
    }
}

USAGE EXAMPLE:

I am using angular but use wherever you want

@Injectable({
    providedIn: "root",
})
export class ThemeService {
    private theme = themeFromSourceColor(argbFromHex("#f82506"));

    constructor() {
        isDarkMode()
            .pipe(
                tap(dark => {
                    applyTheme(this.theme, { dark });
                    applySurfaceStyles(this.theme, { dark });
                })
            )
            .subscribe();
    }
}

[robothot]

@tanishqmanuja Thank you very much, but does the Google team have any plans to support new color tokens for the typescript project?

[robothot]

@tanishqmanuja I thank you very much, thanks for the code snippet

[tanishqmanuja]

@robothot , I am not associated with the google team but pretty sure finalizing the tokens is in process and people on twiiter say it will happen mostly by the end of this year.

[tanishqmanuja]

Also this is not the final repo but just a mirror/clone of the actual internal repo google uses. I am sure their internal repo is way ahead of this.

[robothot]

Thank you very much for your answer. Thank you

[clshortfuse]

FYI, neutral chroma (n1) has also been bumped from 4 to 6, so you also have to change that here before generating new colors:

https://github.com/material-foundation/material-color-utilities/blob/4ca0b54fd522534fa7e697b89bc3012792775695/typescript/palettes/core_palette.ts#L117

Background and surface are both 98 now, instead of 99.

Edit: Source https://material.io/blog/tone-based-surface-color-m3

[WillsterJohnson]

It looks like Material You has recently added a healthy chunk of new stuff, probably as part of the Google IO events recently. I'd assume the team for this repo know about it and are either already working on it or at least have it triaged internally (this repo is a read-only mirror of their internal repo).

It may just be a case of we'll have to wait a bit for these new features while they work through all the updates they need to supply across their M3 projects here, but I think we'll probably see a nice stream of updates to this repo and others over the coming weeks/months.

[kwaa]

Until the official update, Tone-based Surfaces support is now available using mcu-extra.

[Nevro]

quick sample..

import * as m3utils from '@material/material-color-utilities';

const isDark = true;
const contrastLevel = 0;
const argb = m3utils.argbFromHex("#2cf2d1");
const source = m3utils.Hct.fromInt(argb);
const dynamicScheme = new m3utils.SchemeTonalSpot(source, isDark, contrastLevel);
const getDynamicColor = (name) => m3utils.MaterialDynamicColors[name].getArgb(dynamicScheme);

const scheme = {
    background: getDynamicColor('background'),
    onBackground: getDynamicColor('onBackground'),
    surface: getDynamicColor('surface'),
    surfaceDim: getDynamicColor('surfaceDim'),
    surfaceBright: getDynamicColor('surfaceBright'),
    surfaceContainerLowest: getDynamicColor('surfaceContainerLowest'),
    surfaceContainerLow: getDynamicColor('surfaceContainerLow'),
    surfaceContainer: getDynamicColor('surfaceContainer'),
    surfaceContainerHigh: getDynamicColor('surfaceContainerHigh'),
    surfaceContainerHighest: getDynamicColor('surfaceContainerHighest'),
    onSurface: getDynamicColor('onSurface'),
    surfaceVariant: getDynamicColor('surfaceVariant'),
    onSurfaceVariant: getDynamicColor('onSurfaceVariant'),
    inverseSurface: getDynamicColor('inverseSurface'),
    inverseOnSurface: getDynamicColor('inverseOnSurface'),
    outline: getDynamicColor('outline'),
    outlineVariant: getDynamicColor('outlineVariant'),
    shadow: getDynamicColor('shadow'),
    scrim: getDynamicColor('scrim'),
    surfaceTintColor: getDynamicColor('surfaceTintColor'),
    primary: getDynamicColor('primary'),
    onPrimary: getDynamicColor('onPrimary'),
    primaryContainer: getDynamicColor('primaryContainer'),
    onPrimaryContainer: getDynamicColor('onPrimaryContainer'),
    inversePrimary: getDynamicColor('inversePrimary'),
    inverseOnPrimary: getDynamicColor('inverseOnPrimary'),
    secondary: getDynamicColor('secondary'),
    secondaryContainer: getDynamicColor('secondaryContainer'),
    onSecondaryContainer: getDynamicColor('onSecondaryContainer'),
    tertiary: getDynamicColor('tertiary'),
    onTertiary: getDynamicColor('onTertiary'),
    tertiaryContainer: getDynamicColor('tertiaryContainer'),
    onTertiaryContainer: getDynamicColor('onTertiaryContainer'),
    error: getDynamicColor('error'),
    onError: getDynamicColor('onError'),
    errorContainer: getDynamicColor('errorContainer'),
    onErrorContainer: getDynamicColor('onErrorContainer'),
    primaryFixed: getDynamicColor('primaryFixed'),
    primaryFixedDim: getDynamicColor('primaryFixedDim'),
    onPrimaryFixed: getDynamicColor('onPrimaryFixed'),
    onPrimaryFixedVariant: getDynamicColor('onPrimaryFixedVariant'),
    secondaryFixed: getDynamicColor('secondaryFixed'),
    secondaryFixedDim: getDynamicColor('secondaryFixedDim'),
    onSecondaryFixed: getDynamicColor('onSecondaryFixed'),
    onSecondaryFixedVariant: getDynamicColor('onSecondaryFixedVariant'),
    tertiaryFixed: getDynamicColor('tertiaryFixed'),
    tertiaryFixedDim: getDynamicColor('tertiaryFixedDim'),
    onTertiaryFixed: getDynamicColor('onTertiaryFixed'),
    onTertiaryFixedVariant: getDynamicColor('onTertiaryFixedVariant')
};

console.log({scheme});

[guidezpl]

These are available now https://github.com/material-foundation/material-color-utilities/commits/main/typescript/dynamiccolor/material_dynamic_colors.ts, closing this

[jcendal]

@guidezpl The changes you had uploaded are not available in the npm package https://www.npmjs.com/package/@material/material-color-utilities v.2.7.

Could you upload a new release to npm please? :)

[KTibow]

@jcendal the changes seem to be there but they're only in MaterialDynamicColors, not Scheme or anything. @Nevro can you clarify what exactly MaterialDynamicColors is and when to use it instead of Scheme?

[Nevro]

Scheme is old deprecated implementation, let's we say Material Design 3 v1.0! DynamicSchemes is new implementation witch provide all new features!

More info here: https://youtu.be/vnDhq8W98O4?t=648

[jcendal]

@Nevro Yes, I know, but in the index.ts file the dynamic_scheme.js file is not exported, so we can't use the DynamicSchemes class. Same thing with material_dynamic_colors.js which is not exported.

This is the index.js content for version v.0.2.7

export * from './blend/blend.js';
export * from './hct/cam16.js';
export * from './hct/hct.js';
export * from './hct/viewing_conditions.js';
export * from './palettes/core_palette.js';
export * from './palettes/tonal_palette.js';
export * from './quantize/quantizer_celebi.js';
export * from './quantize/quantizer_map.js';
export * from './quantize/quantizer_wsmeans.js';
export * from './quantize/quantizer_wu.js';
export * from './scheme/scheme.js';
export * from './scheme/scheme_android.js';
export * from './score/score.js';
export * from './utils/color_utils.js';
export * from './utils/math_utils.js';
export * from './utils/string_utils.js';
export * from './utils/image_utils.js';
export * from './utils/theme_utils.js';

And should be like this

[Nevro]

@jcendal: This index.js is from 0.2.4, you need to upgrade your package! ;)

[jorgecendal]

@Nevro Mind blowing... haha sorry for the mistake and thank you for your time.

If it helps anyone, remember use npm install @material/material-color-utilities@0.2.7 --save-exact and not npm install @material/material-color-utilities@0.2.7 to avoid installing the dependency with ^x.x.x and not noticing that it is a minor version.

[Nevro]

@jcendal No problem ;) If you want use package with all latest changes/features, is better to use git version.

Building git package:

mkdir ~/git-npm && cd ~/git-npm
git clone https://github.com/material-foundation/material-color-utilities.git
cd material-color-utilities/typescript
npm upgrade && npm run build

Linking git package to project: (execute within project directory)

npm unistall @material/material-color-utilities (remove npm version)
npm link ~/git-npm/material-color-utilities/typescript

Upgrading git package:

cd ~/git-npm/material-color-utilities
git pull
cd typescript
npm upgrade && npm run build

Just friendly reminder.., follow the source code! The code is very readable and very well commented! All necessary samples are provided in test units.

/signedout

[clshortfuse]

You can also just use npm install <git remote url>

https://docs.npmjs.com/cli/v8/commands/npm-install