JavaScript styled-system compose Exemples

Exemple #1

Fichier : constants.js Projet : markmichon/markmichon.com

  gridGap,
  gridColumnGap,
  gridRowGap,
  gridColumn,
  gridRow,
  gridAutoFlow,
  gridAutoColumns,
  gridAutoRows,
  gridTemplateColumns,
  gridTemplateRows,
  gridTemplateAreas,
  gridArea,
} from 'styled-system'

export const COMMON = compose(
  color,
  space
)

export const BORDER = compose(
  borders,
  borderColor,
  boxShadow,
  borderRadius
)

export const TYPOGRAPHY = compose(
  fontFamily,
  fontSize,
  fontStyle,
  fontWeight,
  lineHeight,

Exemple #2

Fichier : system.js Projet : alienfast/material-ui

  ThemeProvider as StyledComponentsThemeProvider,
} from 'styled-components';

const suite = new Benchmark.Suite('system', {
  onError: event => {
    console.log(event.target.error);
  },
});
Benchmark.options.minSamples = 100;

const materialSystem = compose(
  palette,
  spacing,
  typography,
);
const styledSystem = compose2(color, space, fontFamily, fontSize);

const BoxStyles = styled('div')(styleFunction);
const BoxStyleComponents = styledComponents('div')(styleFunction);
const BoxEmotion = styledEmotion('div')(styleFunction);

const BoxMaterialSystem = styledComponents.div`${materialSystem}`;
const BoxStyledSystem = styledComponents.div`${styledSystem}`;

const materialSystemTheme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

const styledSystemTheme = createMuiTheme({