How to use @shopify/polaris-tokens - 9 common examples

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 / .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: '8px'}}>{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: '8px'}}>{story()}</div>;
});

function StrictModeToggle({isStrict = false, children}) {
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];
}
github Shopify / polaris-react / src / utilities / sticky-manager / sticky-manager.ts View on Github external
boundingElement,
      offset,
      disableWhenStacked,
    } = stickyItem;

    if (disableWhenStacked && stackedContent().matches) {
      return {
        sticky: false,
        top: 0,
        left: 0,
        width: 'auto',
      };
    }

    const stickyOffset = offset
      ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10)
      : this.getOffset(stickyNode);

    const scrollPosition = scrollTop + stickyOffset;
    const placeHolderNodeCurrentTop =
      placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
    const top = containerTop + stickyOffset;
    const width = placeHolderNode.getBoundingClientRect().width;
    const left = placeHolderNode.getBoundingClientRect().left;

    let sticky: boolean;

    if (boundingElement == null) {
      sticky = scrollPosition >= placeHolderNodeCurrentTop;
    } else {
      const stickyItemHeight = stickyNode.getBoundingClientRect().height;
      const stickyItemBottomPosition =
github smile-io / ember-polaris / addon / services / sticky-manager.js View on Github external
boundingElement,
      offset,
      disableWhenStacked,
    } = stickyItem;

    if (disableWhenStacked && stackedContent().matches) {
      return {
        sticky: false,
        top: 0,
        left: 0,
        width: 'auto',
      };
    }

    let stickyOffset = offset
      ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10)
      : this.getOffset(stickyNode);

    let scrollPosition = scrollTop + stickyOffset;
    let placeHolderNodeCurrentTop =
      placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
    let top = containerTop + stickyOffset;
    let width = placeHolderNode.getBoundingClientRect().width;
    let left = placeHolderNode.getBoundingClientRect().left;

    let sticky;

    if (boundingElement == null) {
      sticky = scrollPosition >= placeHolderNodeCurrentTop;
    } else {
      let stickyItemHeight = stickyNode.getBoundingClientRect().height;
      let stickyItemBottomPosition =
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 27 days ago

Package Health Score

95 / 100
Full package analysis

Similar packages