デザインシステム

provideRtkDesignSystem() ユーティリティで、既存のデザインシステムを独自のデザインシステムに置き換えられます。

各モバイルプラットフォームは、色、ボーダー、タイポグラフィ、余白を制御するデザイントークンを公開しています。ミーティング開始前にトークンを設定すると、UI Kit が全コンポーネントに適用します。

<script type="module">
	import { provideRtkDesignSystem } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/dist/index.js";
</script>

import { provideRtkDesignSystem } from "@cloudflare/realtimekit-react-ui";

import { provideRtkDesignSystem } from "@cloudflare/realtimekit-angular-ui";

import RealtimeKitUI

import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo
import com.cloudflare.realtimekit.ui.token.*
import com.cloudflare.realtimekit.models.RtkMeetingInfo

import {
	RtkUIProvider,
	provideRtkDesignSystem,
	generateBrandColors,
	generateBackgroundColors,
} from "@cloudflare/realtimekit-react-native-ui";

<div id="app"></div>

<script>
	provideRtkDesignSystem(document.getElementById("app"), {
		googleFont: "Lobster",
		// sets light background colors
		theme: "light",
		colors: {
			danger: "#ffac00",
			brand: {
				300: "#00FFE1",
				400: "#00FFFF",
				500: "#00E1D4",
				600: "#007B74",
				700: "#00655F",
			},
			text: "#071428",
			"text-on-brand": "#ffffff",
			"video-bg": "#E5E7EB",
		},
		borderRadius: "extra-rounded",
	});
</script>

<div id="app"></div>

<script>
	provideRtkDesignSystem(document.getElementById("app"), {
		googleFont: "Lobster",
		// sets light background colors
		theme: "light",
		colors: {
			danger: "#ffac00",
			brand: {
				300: "#00FFE1",
				400: "#00FFFF",
				500: "#00E1D4",
				600: "#007B74",
				700: "#00655F",
			},
			text: "#071428",
			"text-on-brand": "#ffffff",
			"video-bg": "#E5E7EB",
		},
		borderRadius: "extra-rounded",
	});
</script>

function Example() {
	const meetingEl = useRef();
	const { meeting } = useRealtimeKitMeeting();

	useEffect(() => {
		provideRtkDesignSystem(meetingEl.current, {
			googleFont: "Lobster",
			// sets light background colors
			theme: "light",
			colors: {
				danger: "#ffac00",
				brand: {
					300: "#00FFE1",
					400: "#00FFFF",
					500: "#00E1D4",
					600: "#007B74",
					700: "#00655F",
				},
				text: "#071428",
				"text-on-brand": "#ffffff",
				"video-bg": "#E5E7EB",
			},
			borderRadius: "extra-rounded",
		});
	}, []);

	return (
		<div style={{ height: "400px" }}>
			<RtkMeeting meeting={meeting} ref={meetingEl} mode="fill" />
		</div>
	);
}

RtkDesignTokens オブジェクトを作成し、RealtimeKitUIInfo に渡します。続けて RealtimeKitUIBuilder.build() を呼び出してミーティングを起動します。

import android.graphics.Color

val customColors = RtkColorTokens(
    brand = BrandColor(
        shade300 = Color.parseColor("#FF9A6C"),
        shade400 = Color.parseColor("#FF8552"),
        shade500 = Color.parseColor("#FF6B35"),
        shade600 = Color.parseColor("#E55A24"),
        shade700 = Color.parseColor("#CC4A14"),
    ),
    background = BackgroundColor(
        shade600 = Color.parseColor("#666666"),
        shade700 = Color.parseColor("#4C4C4C"),
        shade800 = Color.parseColor("#333333"),
        shade900 = Color.parseColor("#1A1A1A"),
        shade1000 = Color.parseColor("#080808"),
    ),
    text = TextColor(
        onBrand = TextColor.TextColorOnBrand(
            shade1000 = Color.parseColor("#FF111111"),
            shade900 = Color.parseColor("#E0111111"),
            shade800 = Color.parseColor("#C2111111"),
            shade700 = Color.parseColor("#A3111111"),
            shade600 = Color.parseColor("#85111111"),
        ),
        onBackground = TextColor.TextColorOnBackground(
            shade1000 = Color.parseColor("#FFFFFFFF"),
            shade900 = Color.parseColor("#E0FFFFFF"),
            shade800 = Color.parseColor("#C2FFFFFF"),
            shade700 = Color.parseColor("#A3FFFFFF"),
            shade600 = Color.parseColor("#85FFFFFF"),
        ),
    ),
)

val designTokens = RtkDesignTokens(
    colors = customColors,
    borderRadius = RtkBorderRadiusToken.Rounded,
    borderWidth = RtkBorderWidthToken.Thin,
)

val uiKitInfo = RealtimeKitUIInfo(
    activity = this,
    rtkMeetingInfo = RtkMeetingInfo(authToken = "<auth_token>"),
    designTokens = designTokens,
)
RealtimeKitUIBuilder.build(uiKitInfo).startMeeting()

描画の前または描画中に、DesignTokens オブジェクトを渡して provideRtkDesignSystem() を呼び出します。ミーティング用コンポーネントは RtkUIProvider でラップします。

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    provideRtkDesignSystem({
      theme: 'darkest',
      colors: {
        brand: generateBrandColors('#FF6B35'),
        text: '#FFFFFF',
      },
      borderRadius: 'rounded',
      borderWidth: 'thin',
      fontFamily: 'Helvetica',
    });
  }, []);

  return (
    <RtkUIProvider>
      {/* Your meeting components */}
    </RtkUIProvider>
  );
}

generateBrandColors() ヘルパーは、1 つの 16 進値からブランドの 5 段階のシェードを生成します。背景色でも同じ処理をする場合は generateBackgroundColors() を使います。

iOS UI Kit は、デザイントークンの中央レジストリとして DesignLibrary.shared を使います。DesignLibraryConfiguratorProtocol に準拠したカスタムコンフィギュレーターを作成し、ミーティング開始前にデザインライブラリへ渡します。

import RealtimeKitUI

class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    let colorBrandBase: BrandColorToken.Shade = .init(hex: "#FF6B35")!
    let colorBackgroundBase: BackgroundColorToken.Shade = .init(hex: "#080808")!

    let textColorBackgroundBase: TextColorToken.Background.Shade = .init(hex: "#FFFFFF")!
    let textColorBrandBase: TextColorToken.Brand.Shade = .init(hex: "#111111")!

    let statusDangerColor: StatusColor.Shade = .init(hex: "#FF2D2D")!
    let statusSuccessColor: StatusColor.Shade = .init(hex: "#83D017")!
    let statusWarningColor: StatusColor.Shade = .init(hex: "#FFCD07")!

    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0

    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}

// Apply the custom configurator
DesignLibrary.shared.setConfigurator(configurator: CustomConfigurator())

SDK は各ベースカラーからシェードのバリエーションを自動生成します。ブランドのシェードは 300〜700、背景のシェードは 600〜1000 で、ベースカラーを明るくして算出します。

UI Kit はデザインシステムにデザイントークン ↗ を使います。

デザイントークンは、デザインシステムを維持するためのデザイン関連の値です。タイポグラフィ、余白、色などを指定して、システム全体の見た目を柔軟にカスタマイズできます。

これらのデザイントークンは、CSS 変数 ↗ を通じてコンポーネント間で保持・共有されます。

トークンシステムは色、ボーダー、タイポグラフィ、余白をカバーします。次の表は、各モバイルプラットフォームのデフォルト値です。

トークン	Android	iOS	React Native
ブランドカラー	`#2160FD`	`#0246FD`	`#2160FD`
背景	`#080808`	`#050505`	`#080808`
背景上のテキスト	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
ブランド上のテキスト	`#111111`	`#111111`	`#FFFFFF`
Danger	`#FF2D2D`	`#FF2D2D`	`#FF2D2D`
Success	`#83D017`	`#83D017`	`#83D017`
Warning	`#FFCD07`	`#FFCD07`	`#FFCD07`

UI Kit コンポーネントで使うフォントファミリーは、このトークンで簡単に変更できます。provideRtkDesignSystem ユーティリティでは、次の 2 通りで値を編集できます。

--rtk-font-family: Inter;

使い方

デザイントークンには、次のいずれかを設定します。

fontFamily を使う場合 — カスタムフォントファミリーを指定します。フォントは自分で読み込む必要があります。
googleFont を使う場合 — Google Fonts を指定します。フォントは自動で読み込まれます。

const designTokens = {
	fontFamily: "Custom Font",
	// or
	googleFont: "A Google Font",
};

RtkDesignTokens API ではフォントのカスタマイズはできません。UI Kit はデフォルトでシステムフォントを使います。

カスタムフォントを使うには、provideRtkDesignSystem() に fontFamily 文字列を渡します。この関数を呼ぶ前に、アプリ側でフォントを読み込んでおく必要があります。

provideRtkDesignSystem({
	fontFamily: "Helvetica",
});

iOS UI Kit はデフォルトでシステムフォント（UIFont.systemFont）を使います。DesignLibraryConfiguratorProtocol ではフォントのカスタマイズは公開されていません。フォントを変えるには、カスタムの AppThemeProtocol 実装を作成し、各コンポーネントの appearance プロパティを上書きします。

class CustomTheme: AppThemeProtocol {
    // ...
    var clockViewAppearance: RtkTextAppearance {
        let model = RtkTextAppearanceModel()
        model.font = UIFont(name: "Helvetica", size: 12) ?? .systemFont(ofSize: 12)
        return model
    }
    // ...
}

CSS 変数は R G B 形式で設定します。

色トークンとデフォルト値は次のとおりです。

--rtk-colors-brand-500: 33 96 253;
--rtk-colors-background-1000: 8 8 8;
/* ... rest of the shades */

使い方

よく使う background シェードは、theme プロパティでデフォルト提供されます。

theme の値は light、dark、darkest です。

色トークンは次のように編集します。指定した色だけが設定されます。

const designTokens = {
	theme: "darkest",
	colors: {
		brand: { 500: "#0D51FD" },
		background: { 1000: "#080808" },
		text: "#ffffff",
		"text-on-brand": "#ffffff",
		"video-bg": "#181818",
	},
};

ブランドカラーのシェードは 300（最も明るい）から 700（最も暗い）で、500 がプライマリです。背景のシェードは 600（最も明るい）から 1000（最も深い）です。

DesignLibraryConfiguratorProtocol の実装で colorBrandBase と colorBackgroundBase を設定します。SDK はベースカラーを 12% ずつ明るくして、ブランドは 300〜700、背景は 600〜1000 のシェードを自動生成します。

iOS では、BackgroundColorToken の video プロパティも使えます。ストリームがないときのビデオタイルの背後の色を制御します。デフォルトは shade800 です。

class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    let colorBrandBase: BrandColorToken.Shade = .init(hex: "#FF6B35")!
    let colorBackgroundBase: BackgroundColorToken.Shade = .init(hex: "#1A1A1A")!

    let textColorBackgroundBase: TextColorToken.Background.Shade = .init(hex: "#FFFFFF")!
    let textColorBrandBase: TextColorToken.Brand.Shade = .init(hex: "#111111")!

    let statusDangerColor: StatusColor.Shade = .init(hex: "#FF2D2D")!
    let statusSuccessColor: StatusColor.Shade = .init(hex: "#83D017")!
    let statusWarningColor: StatusColor.Shade = .init(hex: "#FFCD07")!

    // Border properties (required by protocol)
    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0
    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}

Android では、RtkColorTokens の videoBackground フィールドで、ビデオストリームがないときのビデオタイルの背後の色を設定できます。デフォルト値は #333333 です。

val customColors = RtkColorTokens(
    brand = BrandColor( /* ... */ ),
    background = BackgroundColor( /* ... */ ),
    text = TextColor( /* ... */ ),
    videoBackground = Color.parseColor("#1A1A1A"),
)

React Native には、背景色パレットをまとめて設定する 3 つのプリセットテーマがあります。

テーマ	説明
`darkest`	非常に暗い背景（デフォルト）
`dark`	暗い背景
`light`	明るい背景

theme プロパティを provideRtkDesignSystem() に渡します。プリセットテーマとカスタム色の上書きを併用できます。

provideRtkDesignSystem({
	theme: "dark",
	colors: {
		brand: generateBrandColors("#0246FD"),
	},
});

スペーシングスケールは、コンポーネント全体の幅、高さ、マージン、パディング、位置などに使います。

スペーシングスケールのベースのデフォルト値は 4px です。
残りの値はこのベースから計算され、--rtk-space-1 に設定されます。
現在のスペーシングスケールは 0 から 96 です。

--rtk-space-1: 4px;
/* ... rest of the spacing scale */

使い方

スペーシングスケールのベースは spacingBase プロパティで設定します。

const designTokens = {
	spacingBase: 4, // value in px
};

spacingBase プロパティは、スペーシングスケールのベース単位をピクセルで設定します。UI Kit 内の余白はすべて、このベースから算出されます。

provideRtkDesignSystem({
	spacingBase: 4, // default: 4px
});

このプラットフォームでは、デザイントークン API で余白を設定できません。

iOS UI Kit は、ベース単位 4 ポイントの SpaceToken を使います。スペーシングスケールは space0（0）から space9（36）です。余白の設定は公開されている DesignLibraryConfiguratorProtocol では扱えません。余白の値はすべて、ベース単位から内部で算出されます。

ボーダー幅と角丸も、デザイントークンでカスタマイズできます。

トークン名	値
`borderWidth`	`none`、`thin`、`fat`
`borderRadius`	`sharp`、`rounded`、`extra-rounded`、`circular`

使い方

const designTokens = {
	borderWidth: "thin",
	borderRadius: "rounded",
};

モバイルプラットフォームは、いずれも同じ角丸とボーダー幅のオプションに対応しています。

トークン	値
`borderRadius`	`sharp`、`rounded`、`extra-rounded`、`circular`
`borderWidth`	`none`、`thin`、`fat`

borderRadius と borderWidth は、RtkDesignTokens のコンストラクタに直接渡します。

val designTokens = RtkDesignTokens(
    colors = customColors,
    borderRadius = RtkBorderRadiusToken.Circular,
    borderWidth = RtkBorderWidthToken.Thin,
)

borderRadius と borderWidth は provideRtkDesignSystem() に渡します。

provideRtkDesignSystem({
	borderRadius: "extra-rounded",
	borderWidth: "fat",
});

DesignLibraryConfiguratorProtocol の実装で、cornerRadiusRoundFactor、cornerRadiusExtraRoundFactor、cornerRadiusCircularFactor、borderSizeThinFactor、borderSizeFatFactor を設定します。これらの係数は、各ボーダースタイルの倍率を制御します。

class CustomConfigurator: DesignLibraryConfiguratorProtocol {
    // ... color properties ...

    let cornerRadiusRoundFactor: CGFloat = 4.0
    let cornerRadiusExtraRoundFactor: CGFloat = 8.0
    let cornerRadiusCircularFactor: CGFloat = 8.0

    let borderSizeThinFactor: CGFloat = 1.0
    let borderSizeFatFactor: CGFloat = 2.0
}

DesignLibrary.shared.setConfigurator(configurator: CustomConfigurator())

iOS では BorderRadiusToken.RadiusType を使い、値は .sharp、.rounded、.extrarounded、.circular です。ボーダー幅は BorderWidthToken.Width を使い、値は .none、.thin、.fat です。

デザインシステム

前提条件

デザインシステムを上書きする

インポート

使い方

デザイントークン

タイポグラフィ

使い方

色

使い方

余白

使い方

ボーダー

使い方