← Cloudflare Realtime / realtime / realtimekit / ui-kit / branding

Design System

UI Kit v RealtimeKit obsahuje všechny potřebné komponenty rozhraní a umožňuje kompletní přizpůsobení všech svých prvků. Můžete si upravit barvy značky, písma, logo a další.

Předpoklady

Než začnete přizpůsobovat design systém pro své schůzky, musíte nejprve integrace SDK RealtimeKit do vaší aplikace.

Přepsání designového systému

provideRtkDesignSystem() nástroj vám umožňuje přepsat stávající designový systém vlastním designovým systémem.

Každá mobilní platforma nabízí systém návrhových tokenů, který řídí barvy, okraje, typografii a rozestupy. Tokeny nakonfigurujete před spuštěním schůzky a UI Kit je poté použije napříč všemi komponentami.

Import

<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";

Použití

<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>
	);
}

Sestavte RtkDesignTokens a předejte jej RealtimeKitUIInfo. Poté zavolejte RealtimeKitUIBuilder.build() a spustit tak schůzku.

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()

Zavolejte provideRtkDesignSystem() s DesignTokens před vykreslením nebo během něj. Komponenty schůzky obalte do 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() pomocná funkce odvodí pět odstínů značky z jediné hexadecimální hodnoty. Použijte generateBackgroundColors() pro stejné chování u barev pozadí.

iOS UI Kit používá DesignLibrary.shared jako svůj centrální registr návrhových tokenů. Vytvořte vlastní konfigurátor, který odpovídá DesignLibraryConfiguratorProtocol a předejte ji návrhové knihovně před zahájením schůzky.

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 automaticky generuje odstínové varianty z každé základní barvy. Odstíny značky pokrývají rozsah 300 až 700 a odstíny pozadí rozsah 600 až 1000, odvozené zesvětlením základní barvy.

Design Tokens

UI Kit používá designové tokeny ↗ pro svůj designový systém.

Design tokens jsou hodnoty související s designem, které se používají k udržování design systému a poskytují flexibilitu při přizpůsobování celkového vzhledu systému pomocí hodnot, jako je typografie, rozestupy, barvy a další.

Tyto návrhové tokeny jsou uloženy a sdíleny mezi komponentami pomocí CSS proměnné ↗.

Systém tokenů zahrnuje barvy, ohraničení, typografii a rozestupy. Následující tabulka ukazuje výchozí hodnoty pro všechny mobilní platformy.

Token	Android	iOS	React Native
Barva značky	`#2160FD`	`#0246FD`	`#2160FD`
Kontext	`#080808`	`#050505`	`#080808`
Text na pozadí	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`
Text na značce	`#111111`	`#111111`	`#FFFFFF`
Nebezpečí	`#FF2D2D`	`#FF2D2D`	`#FF2D2D`
Úspěch	`#83D017`	`#83D017`	`#83D017`
Upozornění	`#FFCD07`	`#FFCD07`	`#FFCD07`

Typografie

Pomocí tohoto tokenu snadno upravíte rodinu písma použitou v komponentách UI Kit. Tuto hodnotu můžete upravit dvěma způsoby pomocí nástroje provideRtkDesignSystem.

--rtk-font-family: Inter;

Použití

Nastavte jednu z těchto hodnot ve svých designových tokenech.

S fontFamily - použijte vlastní rodinu písem, kterou pak musíte načíst ručně.
S googleFont - použijte písmo Google, to se pak načte automaticky.

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

Přizpůsobení písma není k dispozici prostřednictvím RtkDesignTokens API. UI Kit ve výchozím nastavení používá systémové písmo.

Předejte fontFamily řetězec na provideRtkDesignSystem() k použití vlastního písma. Písmo musíte načíst ve své aplikaci ještě před voláním této funkce.

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

iOS UI Kit používá systémové písmo (UIFont.systemFont) ve výchozím nastavení. Přizpůsobení písma není dostupné prostřednictvím DesignLibraryConfiguratorProtocol. Chcete-li změnit písma, vytvořte vlastní AppThemeProtocol implementaci a přepsat vlastnosti vzhledu jednotlivých komponent.

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

Barvy

CSS proměnné se nastavují ve formátu: R G B.

Zde jsou všechny barevné tokeny spolu s jejich výchozími hodnotami.

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

Použití

Sada běžně používaných background odstíny jsou ve výchozím nastavení dostupné s theme vlastnost.

Hodnoty motivu jsou: light, dark, darkest.

Barevné tokeny upravte takto. Nastaví se pouze barvy, které zadáte.

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

Odstíny barvy značky se pohybují od 300 (nejsvětlejší) po 700 (nejtmavší), přičemž 500 je primární odstín. Odstíny pozadí se pohybují od 600 (nejsvětlejší) po 1000 (nejhlubší).

Nastavte colorBrandBase a colorBackgroundBase ve vašem DesignLibraryConfiguratorProtocol implementaci. SDK automaticky generuje odstíny 300 až 700 pro barvu značky a 600 až 1000 pro pozadí, a to zesvětlováním základní barvy po 12% krocích.

iOS také poskytuje video vlastnost na BackgroundColorToken která určuje barvu za dlaždicemi videa, když není aktivní žádný stream. Výchozí hodnota je 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 poskytuje videoBackground pole na RtkColorTokens a nastavit tak barvu zobrazenou za dlaždicemi videa, když není aktivní žádný video stream. Výchozí hodnota je #333333.

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

React Native nabízí tři přednastavená témata, která definují sladěnou paletu barev pozadí.

Motiv	Popis
`darkest`	Velmi tmavé pozadí (výchozí)
`dark`	Tmavé pozadí
`light`	Světlé pozadí

Předejte theme vlastnost na provideRtkDesignSystem(). Přednastavené téma můžete kombinovat s vlastním přepsáním barev.

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

Rozestupy

Škála rozestupů se používá k nastavení šířky, výšky, okrajů, vnitřních odsazení, pozic atd. napříč komponentami.

Výchozí hodnota základu škály rozestupů je 4px.
Zbývající hodnoty se počítají z tohoto základu, nastaveného na --rtk-space-1.
Aktuální škála rozestupů se pohybuje od 0 do 96.

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

Použití

Nastavte základ škály rozestupů pomocí spacingBase vlastnost.

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

spacingBase vlastnost nastavuje základní jednotku škály rozestupů v pixelech. Všechny hodnoty rozestupů v UI Kit vycházejí z této základní hodnoty.

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

Konfigurace rozestupů není na této platformě dostupná prostřednictvím API designových tokenů.

iOS UI Kit používá SpaceToken se základní jednotkou 4 body. Škála rozestupů se pohybuje od space0 (0) do space9 (36). Konfigurace rozestupů není přístupná přes veřejné DesignLibraryConfiguratorProtocol. Všechny hodnoty rozestupů jsou interně odvozeny ze základní jednotky.

Okraje

Vlastnosti šířky okraje a poloměru okraje lze také přizpůsobit pomocí design tokenů!

Název tokenu	Hodnoty
`borderWidth`	`none`, `thin`, `fat`
`borderRadius`	`sharp`, `rounded`, `extra-rounded`, `circular`

Použití

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

Všechny mobilní platformy podporují stejné možnosti nastavení poloměru a šířky okraje.

Token	Hodnoty
`borderRadius`	`sharp`, `rounded`, `extra-rounded`, `circular`
`borderWidth`	`none`, `thin`, `fat`

Předejte borderRadius a borderWidth přímo do RtkDesignTokens konstruktor.

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

Předejte borderRadius a borderWidth na provideRtkDesignSystem().

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

Nastavte cornerRadiusRoundFactor, cornerRadiusExtraRoundFactor, cornerRadiusCircularFactor, borderSizeThinFactor, a borderSizeFatFactor ve vašem DesignLibraryConfiguratorProtocol implementaci. Tyto faktory určují násobitel použitý pro jednotlivé styly ohraničení.

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 používá BorderRadiusToken.RadiusType s hodnotami .sharp, .rounded, .extrarounded, a .circular. Šířka ohraničení používá BorderWidthToken.Width s hodnotami .none, .thin, a .fat.