スタイル付きコンポーネント

Re:Earthは、Emotionのスタイル付きコンポーネントを主体に、AtomとMoleculeのコンポーネントをスタイリングするように設定しています。

基本的な使い方

コンポーネントの中で、メインコンポーネントのエクスポート宣言のすぐ上に、次のように新しいスタイル付きコンポーネントを宣言することができます：

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;

グローバルテーマ

Re:Earth全体でテーマの一貫性を保ち、Figmaで最新の状態を保つために、すべてのテーマ定義は、テーマ・ディレクトリ内のグローバル・オブジェクトに抽象化・グループ化されています。

それぞれのファイルの目的について説明します：

Colors

Re:earthのカラーシステムは、UIに色を意味ある形で適用することを可能にします。

色の一貫したシステムを構築することで、使用する変数の数を減らし、不要な重複を排除することができます。そのため、Re:Earthでは、使用するすべての色をcolors.tsファイル内のオブジェクトに保存しています。

Theme

theme.ts は、コンポーネントの色を定義するために必要なタイプがあります。このタイプは現在、darkTheme.tsとlightTheme.tsで定義された2つのテーマバリエーションdarkとlightテーマで使用されています。

これらのテーマバリエーションは、colorsオブジェクトの定数を使用して、各コンポーネントの色を定義しています。

Metrics

Re:Earth全体でサイズや間隔を統一するため、メトリクスの詳細はすべてmertrics.tsの中に格納されています。