Styled components

Re:Earth primarily uses Emotion's styled components to style Atom and Molecule components. Emotion's styled components provide a convenient and flexible way to apply styling to individual components, making it easier to create consistent and reusable styles throughout the application.

Basic usage

From within your component, just above the main component export declaration, you can follow the syntax below:

import { styled } from "@reearth/theme";

...
// React component
...

// regular HTML element
const Wrapper = styled.div`
    background: blue;
    display: flex;
`;
// imported React component
const Header = styled(Text)`
    color: white;
`;
// using project defined theme variables and passed props
const Button = styled.button<{active?: boolean}>`
    background: ${({theme, active}) => active ? theme.background.lightBg : theme.background.mediumBg};
`;

export default MyReactComponent;

Global theme

To maintain a consistent theme across Re:Earth and align it with the design system in Figma, all theme definitions are organized and abstracted into global objects within the theme directory.

Untitled

We will discuss the purpose of each of these files:

Colors

In Re:Earth, the color system is designed to provide a meaningful and consistent way of applying colors to the user interface (UI).

By establishing a well-defined color system, Re:Earth reduces the need for excessive variables and eliminates unnecessary duplicates. All colors used within the application are stored in an object defined in the colors.ts file.

Theme

In Re:Earth, the theme.ts file contains the necessary types for defining the colors of components. These types are utilized by two theme variants: the dark theme and the light theme, which are defined in darkTheme.ts and lightTheme.ts, respectively.

Each theme variant makes use of constants from the colors object to specify the color of individual components. By leveraging these constants, Re:Earth ensures consistency in color application throughout the application's user interface.

Metrics

In Re:Earth, the metrics.ts file serves as a centralized location for storing all the details related to sizing and spacing. It helps maintain consistency in the dimensions of various UI components across the application.

Common uses of Metrics are: