• 
      

    Add documentation showing all the design tokens.

    Review Request #15019 — Created April 16, 2026 and updated

    Information

    Ink
    master

    Reviewers

    This introduces a Design section in the Storybook that covers the
    various design tokens, including the icons, palettes, semantic color
    tokens, and units (borders, fonts, etc.).

    This was originally intended to ship with the initial release of Ink,
    but didn't make it out of my tree.

    It's not fully complete. There are no pages for fonts, z-indexes,
    shadows, animations, or border design tokens. This covers pretty much
    everything else, though.

    Viewed all the new pages, checking for any obvious errors.

    Summary ID
    Add documentation showing all the design tokens.
    This introduces a Design section in the Storybook that covers the various design tokens, including the icons, palettes, semantic color tokens, and units (borders, fonts, etc.). This was originally intended to ship with the initial release of Ink, but didn't make it out of my tree. It's not fully complete. There are no pages for fonts, z-indexes, shadows, animations, or border design tokens. This covers pretty much everything else, though.
    860cd3f8e3edc6126621b2dd17a251f783f7d253
    Description From Last Updated

    props is shadowed here. Can we use a different name?

    david david

    This file needs a doc comment at the top.

    david david

    This is missing a )

    david david

    Typo: -ink-p-container-bg -> --ink-p-container-bg

    david david

    Copy/pasteo: secondary -> tertiary

    david david

    These are missing descriptions.

    david david

    We need a default for fgType in here.

    david david
    Checks run (2 succeeded)
    flake8 passed.
    JSHint passed.
    david
    1. 
        
    2. src/stories/_support/blocks/colors.tsx (Diff revision 1)
       
       
      Show all issues

      props is shadowed here. Can we use a different name?

    3. src/stories/_support/blocks/units.tsx (Diff revision 1)
       
       
      Show all issues

      This file needs a doc comment at the top.

    4. Show all issues

      This is missing a )

    5. src/stories/design/semantic-tokens.mdx (Diff revision 1)
       
       
      Show all issues

      Typo: -ink-p-container-bg -> --ink-p-container-bg

    6. src/stories/design/semantic-tokens.mdx (Diff revision 1)
       
       
      Show all issues

      Copy/pasteo: secondary -> tertiary

    7. src/stories/design/semantic-tokens.mdx (Diff revision 1)
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      Show all issues

      These are missing descriptions.

    8. src/stories/design/surfaces.stories.tsx (Diff revision 1)
       
       
       
      Show all issues

      We need a default for fgType in here.

    9.