Sassdoc not finding palette information

[simplyphp-kelly]

Okay, I'm at a complete loss. I have no idea what the issue here is.

I'm using Accoutrement to load in my color palette, setting tools.$colors: (); to contain my color information. So my color file is:

////
/// @group Colors
////

@use "~sassdoc-theme-herman/scss/utilities";
@use '~accoutrement/sass/tools';
@use 'sass:meta';

utilities.$herman: ();

tools.$colors: (
    // color information stored here - there are entries here in my actual file
);

// Code for adding the color palette to Herman
@include utilities.add('colors', 'brand-colors', tools.$colors, meta.get-function('color', $module: 'tools'));

I have a special sass_json CSS file being generated that loads this in and all of its requirements and then includes utilities.export() to produce the Sass-JSON output. Then I have your modified sassdoc webpack plugin producing the styleguide files. Works great for variables and mixins I've commented on, but the color palette guide does not want to show up. I confirmed that the file that jsonFile is pointing to contains nothing but /! json-encode: {} / and that's it. But it's still not working. I'm sure I'm doing something wrong here, but I don't know what it is. I've went over the documentation 10 times.

[mirisuzanne]

Hi @simplyphp-kelly -

SassDoc comments (///) are needed for each item you want to display in the generated site:

////
/// # Page Level Documentation
/// Free-floating sassdoc comments like this one
/// will be rendered as markdown,
/// but do not apply to everything on the page.
/// @group Colors
////

@use "~sassdoc-theme-herman/scss/utilities";
@use '~accoutrement/sass/tools';
@use 'sass:meta';

// (side-note: this is the default value, so doesn't need to be specified)
utilities.$herman: ();

/// This comment is connected
/// to the `tools.$colors` map,
/// and will render a block for it on your Colors page.
/// In order to show a preview of the colors,
/// we also need to tell SassDoc we want that
/// using the `@colors` annotation, 
/// with the name we've provided in `utilities.add()`.
/// @colors brand-colors
/// @group Colors
tools.$colors: (
    // color information stored here - there are entries here in my actual file
);

// Code for adding the color palette to Herman,
// and also giving it a name that we can reference above.
@include utilities.add('colors', 'brand-colors', tools.$colors, meta.get-function('color', $module: 'tools'));

I hope that helps!

[mirisuzanne]

I suppose you could also do it all at the page-level. The preview doesn't have to be attached to the map. So the most minimal use-case would be something like:

/// @colors brand-colors
/// @group Colors

/* everything else you have... */