How to use the @shopify/polaris-tokens.colorSkyLight 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 {create} from '@storybook/theming';
import tokens from '@shopify/polaris-tokens';
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:">{story()}</div>;
});
github Shopify / polaris-react / .storybook / config.js View on Github external
import tokens from '@shopify/polaris-tokens';
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:">{story()}</div>;
});

function StrictModeToggle({isStrict = false, children}) {

@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 9 days ago

Package Health Score

98 / 100
Full package analysis

Similar packages