How to indicate block end?

[lesyk-lesyk]

Imagine, I have the next css styles (with 2 presenters - Color and FontSize):

:root {
  /**
    * @tokens Colors
    * @presenter Color
    */
  --b100: hsl(240, 100%, 90%);
  --b200: hsl(240, 100%, 80%);
  --b300: hsl(240, 100%, 70%);

  /* Problem: Next two variables will be joined to Colors tokens */
  --logo-height: 2rem;
  --logo-margin: var(--sidebar-margin-left);

  /**
    * @tokens Font Sizes
    * @presenter FontSize
    */
  --font-size-s: 0.75rem;
  --font-size-m: 0.875rem;
  --font-size-l: 1rem;
}

Page design.mdx:

import { Meta } from '@storybook/addon-docs';
import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';

<Meta title="Design Tokens" />

# Design Tokens

<br />

## Colors

<DesignTokenDocBlock categoryName="Colors" />

## Font Sizes

<DesignTokenDocBlock categoryName="Font Sizes" />

And the result page:

---

Is there a way to indicate the end of the colors variables block? E.g with some annotation comment like /* @end Colors */

:root {
  /**
    * @tokens Colors
    * @presenter Color
    */
  --b100: hsl(240, 100%, 90%);
  --b200: hsl(240, 100%, 80%);
  --b300: hsl(240, 100%, 70%);
  /* @end Colors */

  /* Next styles will not joined to group above */
  --logo-height: 2rem;
  --logo-margin: var(--sidebar-margin-left);

....
}

[lesyk-lesyk]

Currently, I use a workaround with @tokens End:

:root {
  /**
    * @tokens Colors
    * @presenter Color
    */
  --b100: hsl(240, 100%, 90%);
  --b200: hsl(240, 100%, 80%);
  --b300: hsl(240, 100%, 70%);
  /* @tokens End */

  /* Other styles... */
  ....
}

And I not use categoryName equals End in any .mdx page.

But maybe there is a better solution?

[Sqrrl]

I think a comment to end a block is a decent solution. I will come up with a different syntax for it, as @tokens End creates a new token category called "End".

[Sqrrl]

I've added a new comment block to end token cateogries early with v2.6.0.

 /**
  * @tokens-end
  */