Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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}) {
const Wrapper = isStrict ? React.StrictMode : React.Fragment;
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)]);
}
export function setTextColor(
name: string,
variant: 'light' | 'dark' = 'dark',
): string[] {
if (variant === 'light') {
return [name, tokens.colorInk];
}
return [name, tokens.colorWhite];
}