Core

import { Core } from '@elemental-ui-alpha/core';

Emotion

Emotion's core components and utilities are exposed to ensure a single version is bundled with the design system and the consuming application.

import {
  ClassNames,
  Global,
  css,
  jsx,
  keyframes,
} from '@elemental-ui-alpha/core';

Wrapper

The Core component provides the default styles along with CSS normalize.

<Core>
  {/* app content */}
</Core>

Normalize CSS

By default normalize.css is included with the Core component. You can opt out by passing false to the includeNormalize property.

<Core includeNormalize={false} />

Text Legibility

By default a handful of CSS properties are applied to optimize text legibility across major browsers. You can opt out by passing false to the optimizeLegibility property.

<Core optimizeLegibility={false} />

body {
  font-feature-settings: 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga' on;
}

Theme

Customize the theme consumed by Elemental components.

import { makeTheme } from '@elemental-ui-alpha/theme';

const customTheme = makeTheme('Custom Theme', {
  foreground: {
    action: 'DodgerBlue',
  },
});

function App() {
  return <Core theme={customTheme} />;
}