Skip to content

Dart/Flutter TonalPalette does not match M3 spec #102

Open
@jamesgorman2

Description

@jamesgorman2

I was doing some color testing against the material spec and was getting off-by-one errors for container colors (eg primaryContainer).

I ran a quick test using the default light primary color and the m3 tokens. Other colors were backfilled from the figma design kit (see below).

Is this a bug, user error or acceptable margins of error?

tested on both 0.2.0 & 0.5.0

Palette comparison:

  [0](actual: Color(0xff000000), expected: Color(0xff000000))*
 [10](actual: Color(0xff22005d), expected: Color(0xff21005d))*
 [20](actual: Color(0xff381e72), expected: Color(0xff371e73))* (figma is 381e72)
 [30](actual: Color(0xff4f378a), expected: Color(0xff4f378b))*
 [40](actual: Color(0xff6750a4), expected: Color(0xff6750a4))*
 [50](actual: Color(0xff8069bf), expected: Color(0xff7f67be))
 [60](actual: Color(0xff9a83db), expected: Color(0xff9a82db))
 [70](actual: Color(0xffb69df7), expected: Color(0xffb69df8))
 [80](actual: Color(0xffcfbcff), expected: Color(0xffd0bcff))*
 [90](actual: Color(0xffe9ddff), expected: Color(0xffeaddff))*
 [95](actual: Color(0xfff6eeff), expected: Color(0xfff6edff))
 [99](actual: Color(0xfffffbff), expected: Color(0xfffffbfe))
[100](actual: Color(0xffffffff), expected: Color(0xffffffff))*

Code to generate:

    void printTone(int tone, int value, Color expected) {
      print('[$tone](actual: ${Color(value)}, expected: $expected)');
    }
    const primary = Color(0xff6750a4);
    final primaryCam = Cam16.fromInt(primary.value);
    final TonalPalette p = TonalPalette.of(primaryCam.hue, primaryCam.chroma);

    printTone(0, p.get(0), const Color(0xff000000));
    printTone(10, p.get(10), const Color(0xff21005d));
    printTone(20, p.get(20), const Color(0xff371e73));
    printTone(30, p.get(30), const Color(0xff4f378b));
    printTone(40, p.get(40), const Color(0xff6750a4));
    printTone(50, p.get(50), const Color(0xff7f67be));
    printTone(60, p.get(60), const Color(0xff9a82db));
    printTone(70, p.get(70), const Color(0xffb69df8));
    printTone(80, p.get(80), const Color(0xffb0dcff));
    printTone(90, p.get(90), const Color(0xffeaddff));
    printTone(95, p.get(95), const Color(0xfff6edff));
    printTone(99, p.get(99), const Color(0xfffffbfe));
    printTone(100, p.get(100), const Color(0xffffffff));

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions