How to use @carbon/themes - 7 common examples

function formatSharedStyleName(token) {
  const parts = formatTokenName(token).split('-');
  if (parts.length === 2) {
    return parts.join('-');
  }

  const [category, name, grade] = parts;
  if (category !== 'productive') {
    return parts.join('-');
  }

  return `${category}/${name}-${grade}`;
}

.map(token => {
        const { type } = meta.colors.find(group => {
          return group.tokens.includes(token);
        });
        const name = `theme / ${theme.toLowerCase()} / ${type} tokens / ${formatTokenName(
          token
        )}`;
        return syncColorStyle(document, name, themes[theme][token]);
      });
  });

return (
                          
                            <div style="{{">
                              <div style="{{">
                              <code>
                                {colorNameLookup[color]
                                  ? formatTokenName(colorNameLookup[color])
                                  : color}
                              </code>
                            </div>
                          
                        );
                      })}
                    </div>

const sharedStyles = Object.keys(swatches).flatMap(swatchName => {
    const name = formatTokenName(swatchName);
    const result = Object.keys(swatches[swatchName]).map(grade => {
      return syncColorStyle(
        document,
        formatSharedStyleName(name, grade),
        swatches[swatchName][grade]
      );
    });
    return result;
  });

{tokens.map(token => (
                    
                      
                        <a href="{`#${token}`}">
                          <pre>                            <code>{formatTokenName(token)}</code>
                          </pre>
                        </a>
                      
                      {Object.keys(themes).map(theme =&gt; {
                        const color = themes[theme][token];
                        return (
                          
                            <div style="{{">
                              </div>

.map(token => {
        const { type } = meta.colors.find(group => {
          return group.tokens.includes(token);
        });
        const name = `theme / ${theme.toLowerCase()} / ${type} tokens / ${formatTokenName(
          token
        )}`;
        return syncColorStyle(document, name, themes[theme][token]);
      });
  });

.filter(token => {
        return colors.includes(token) && !meta.deprecated.includes(token);
      })
      .map(token => {