Balance Logo
Balance
Reckon Design System

Core

Core includes a range of styles, variables and helpers that form the foundation of how the Design System works.
Install
pnpm add @reckon-web/core
Import usage
import {
css,
jsx,
keyframes,
Global,
ClassNames,
Core
} from '@reckon-web/core';
  • Code
  • API

Emotion

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

Core component

The Core component provides the default styles along with CSS normalize. You should wrap your entire application in this component.

<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;
}
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.