How to use the @shopify/polaris-tokens.colorInk function in @shopify/polaris-tokens

To help you get started, we’ve selected a few @shopify/polaris-tokens 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 Shopify / polaris-react / .storybook / config.js View on Github external
import {AppProvider} from '../src';
import {Playground} from '../playground/Playground';
import enTranslations from '../locales/en.json';

addParameters({
  options: {
    panelPosition: 'bottom',
    theme: create({
      base: 'light',
      brandTitle: 'Shopify Polaris Storybook',
      brandUrl: '/',
      brandImage: null,
      appBorderRadius: 0,
      appBg: tokens.colorSkyLight,
      contentBg: tokens.colorSkyLight,
      textColor: tokens.colorInk,
      // TODO more pretty brand colors?
      // SEE https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md
    }),
  },
  percy: {
    skip: true,
    widths: [375, 1280],
  },
});

addDecorator(function PaddingDecorator(story) {
  return <div style={{padding: '8px'}}>{story()}</div>;
});

function StrictModeToggle({isStrict = false, children}) {
  const Wrapper = isStrict ? React.StrictMode : React.Fragment;
github Shopify / polaris-react / config / uxpin / Wrapper / UXPinWrapper.js View on Github external
export default function UXPinWrapper({children}) {
  return React.createElement('div', {
    // Simulate default 'body' styles
    style: {
      color: tokens.colorInk,
      fontFamily: tokens.fontStackBase,
      webkitFontSmoothing: 'antialiased',
      textRendering: 'optimizeLegibility',
    },
  }, [React.createElement(AppProvider, {theme, i18n: {}}, children)]);
}
github Shopify / polaris-react / src / utilities / theme / utils.ts View on Github external
export function setTextColor(
  name: string,
  variant: 'light' | 'dark' = 'dark',
): string[] {
  if (variant === 'light') {
    return [name, tokens.colorInk];
  }

  return [name, tokens.colorWhite];
}

@shopify/polaris-tokens

[![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg?style=flat)](https://www.npmjs.com/package/@shopify/polaris-tokens)

SEE LICENSE IN LICENSE.md
Latest version published 3 months ago

Package Health Score

98 / 100
Full package analysis

Similar packages