How to use the @carbon/themes.formatTokenName function in @carbon/themes

To help you get started, we’ve selected a few @carbon/themes examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon / packages / sketch / src / sharedStyles / type.js View on Github external
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}`;
}
github carbon-design-system / carbon / packages / sketch / src / sharedStyles / themes.js View on Github external
.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]);
      });
  });
github carbon-design-system / carbon / packages / themes / examples / preview / index.js View on Github external
return (
                          
                            <div style="{{">
                              <div style="{{">
                              <code>
                                {colorNameLookup[color]
                                  ? formatTokenName(colorNameLookup[color])
                                  : color}
                              </code>
                            </div>
                          
                        );
                      })}
                    </div>
github carbon-design-system / carbon / packages / sketch / src / sharedStyles / colors.js View on Github external
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;
  });
github carbon-design-system / carbon / packages / themes / examples / preview / index.js View on Github external
{tokens.map(token =&gt; (
                    
                      
                        <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>

@carbon/themes

Themes for applying color in the Carbon Design System

Apache-2.0
Latest version published 22 days ago

Package Health Score

95 / 100
Full package analysis