Skip to content

Commit ea9f5d6

Browse files
ishita1805ishita1805
committed
fix: add docs for customising design system
1 parent 69eb0a3 commit ea9f5d6

File tree

2 files changed

+267
-2
lines changed

2 files changed

+267
-2
lines changed

‎src/content/docs/realtime/realtimekit/ui-kit/branding/design-system.mdx‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Design System
4+
sidebar:
5+
order: 8
6+
---
7+
8+
import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
9+
import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
10+
11+
RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your brand colours, fonts, logo and more.
12+
13+
## Prerequisites
14+
15+
To get started with customizing the icons for your meetings, you need to first [integrate RealtimeKit's Web SDK](/realtime/realtimekit/ui-kit/) into your web application.
16+
17+
<RTKSDKSelector />
18+
19+
## Override Design System
20+
21+
The `provideRtkDesignSystem()` utility allows you to override the exisiting design system with your own custom design system.
22+
23+
### Installation
24+
25+
<RTKCodeSnippet id="web-web-components">
26+
27+
```html
28+
<script type="module">
29+
import { provideRtkDesignSystem } from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit-ui@latest/dist/index.js";
30+
</script>
31+
```
32+
33+
</RTKCodeSnippet>
34+
35+
<RTKCodeSnippet id="web-react">
36+
37+
```javascript
38+
import { provideRtkDesignSystem } from "@cloudflare/realtimekit-react-ui";
39+
```
40+
41+
</RTKCodeSnippet>
42+
43+
<RTKCodeSnippet id="web-angular">
44+
45+
```javascript
46+
import { provideRtkDesignSystem } from "@cloudflare/realtimekit-angular-ui";
47+
```
48+
49+
</RTKCodeSnippet>
50+
51+
### Usage
52+
53+
<RTKCodeSnippet id="web-web-components">
54+
55+
```html
56+
<div id="app"></div>
57+
58+
<script>
59+
provideRtkDesignSystem(document.getElementById("app"), {
60+
googleFont: "Lobster",
61+
// sets light background colors
62+
theme: "light",
63+
colors: {
64+
danger: "#ffac00",
65+
brand: {
66+
300: "#00FFE1",
67+
400: "#00FFFF",
68+
500: "#00E1D4",
69+
600: "#007B74",
70+
700: "#00655F",
71+
},
72+
text: "#071428",
73+
"text-on-brand": "#ffffff",
74+
"video-bg": "#E5E7EB",
75+
},
76+
borderRadius: "extra-rounded",
77+
});
78+
</script>
79+
```
80+
81+
</RTKCodeSnippet>
82+
83+
<RTKCodeSnippet id="web-angular">
84+
85+
```html
86+
<div id="app"></div>
87+
88+
<script>
89+
provideRtkDesignSystem(document.getElementById("app"), {
90+
googleFont: "Lobster",
91+
// sets light background colors
92+
theme: "light",
93+
colors: {
94+
danger: "#ffac00",
95+
brand: {
96+
300: "#00FFE1",
97+
400: "#00FFFF",
98+
500: "#00E1D4",
99+
600: "#007B74",
100+
700: "#00655F",
101+
},
102+
text: "#071428",
103+
"text-on-brand": "#ffffff",
104+
"video-bg": "#E5E7EB",
105+
},
106+
borderRadius: "extra-rounded",
107+
});
108+
</script>
109+
```
110+
111+
</RTKCodeSnippet>
112+
113+
<RTKCodeSnippet id="web-react">
114+
115+
```javascript
116+
function Example() {
117+
const meetingEl = useRef();
118+
const { meeting } = useRealtimeKitMeeting();
119+
120+
useEffect(() => {
121+
provideRtkDesignSystem(meetingEl.current, {
122+
googleFont: "Lobster",
123+
// sets light background colors
124+
theme: "light",
125+
colors: {
126+
danger: "#ffac00",
127+
brand: {
128+
300: "#00FFE1",
129+
400: "#00FFFF",
130+
500: "#00E1D4",
131+
600: "#007B74",
132+
700: "#00655F",
133+
},
134+
text: "#071428",
135+
"text-on-brand": "#ffffff",
136+
"video-bg": "#E5E7EB",
137+
},
138+
borderRadius: "extra-rounded",
139+
});
140+
}, []);
141+
142+
return (
143+
<div style={{ height: "400px" }}>
144+
<RtkMeeting meeting={meeting} ref={meetingEl} mode="fill" />
145+
</div>
146+
);
147+
}
148+
```
149+
150+
</RTKCodeSnippet>
151+
152+
## Design Tokens
153+
154+
UI Kit uses [design tokens](https://css-tricks.com/what-are-design-tokens/) for it's design system.
155+
156+
Design tokens are the design related values which are used to maintain a design system, which provides flexibility in customizing the overall design of a system with values such as: typography, spacing, colors etc.
157+
158+
These design tokens are stored and shared among components with the help of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties).
159+
160+
### Typography
161+
162+
You can tweak the font family used in your UI Kit components easily with this token. You can edit this value in two ways with the provideRtkDesignSystem utility.
163+
164+
```css
165+
--rtk-font-family: Inter;
166+
```
167+
168+
#### Usage
169+
170+
Set either of these values in your design tokens.
171+
172+
- With fontFamily - Use a custom font family, you'll have to load the font manually.
173+
- With googleFont - Use a google font, the font is loaded automatically.
174+
175+
```javascript
176+
const designTokens = {
177+
fontFamily: "Custom Font",
178+
// or
179+
googleFont: "A Google Font",
180+
};
181+
```
182+
183+
### Colours
184+
185+
CSS Variables are set in the format: `R G B`.
186+
187+
Here are all the color tokens, along with their default values.
188+
189+
```css
190+
--rtk-colors-brand-500: 33 96 253;
191+
--rtk-colors-background-1000: 8 8 8;
192+
/_ ... rest of the shades _/
193+
```
194+
195+
#### Usage
196+
197+
:::note
198+
199+
Note the exception of `text` and `text-on-brand` colors, you only specify a single color even though there are the following shades: 1000 - 600.
200+
201+
This is because the `provideRtkDesignSystem()` utility sets the color you pass to text-1000 and calculates lighter shades and sets them as well.
202+
203+
Only pass objects for `brand` and `background` colors.
204+
205+
:::
206+
207+
A set of commonly used `background` shades are available by default with the `theme` property.
208+
209+
Theme values are: `light`, `dark`, `darkest`.
210+
211+
Edit color tokens like this. Only the colors you specify will be set.
212+
213+
```javascript
214+
const designTokens = {
215+
theme: "darkest",
216+
colors: {
217+
brand: { 500: "#0D51FD" },
218+
background: { 1000: "#080808" },
219+
text: "#ffffff",
220+
"text-on-primary": "#ffffff",
221+
"video-bg": "#181818",
222+
},
223+
};
224+
```
225+
226+
### Spacing
227+
228+
The spacing scale is used for setting width, height, margins, paddings, positions etc. throughout the components.
229+
230+
- The default value for the spacing scale base is 4px.
231+
- Rest of the values are calculated with this base, set to `--rtk-space-1`.
232+
- Current spacing scale ranges from 0 to 96.
233+
234+
```css
235+
--rtk-space-1: 4px;
236+
/* ... rest of the spacing scale */
237+
```
238+
239+
#### Usage
240+
241+
Set the base of the spacing scale with `spacingBase` property.
242+
243+
```javascript
244+
const designTokens = {
245+
spacingBase: 4, // value in px
246+
};
247+
```
248+
249+
### Borders
250+
251+
Border Width and Border Radius properties can also be customized with design tokens!
252+
253+
| Token Name | Values |
254+
| -------------- | ----------------------------------------------- |
255+
| `borderWidth` | `none`, `thin`, `fat` |
256+
| `borderRadius` | `sharp`, `rounded`, `extra-rounded`, `circular` |
257+
258+
#### Usage
259+
260+
```javascript
261+
const designTokens = {
262+
borderWidth: "thin",
263+
borderRadius: "rounded",
264+
};
265+
```

src/content/docs/realtime/realtimekit/ui-kit/custom-branding.mdx renamed to src/content/docs/realtime/realtimekit/ui-kit/branding/index.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
pcx_content_type: navigation
3-
title: Custom Branding
4-
slug: realtime/realtimekit/ui-kit/branding
3+
title: Customise Branding
54
sidebar:
65
order: 8
6+
label: Icons
77
---
88

99
import { Tabs, TabItem } from "~/components";

0 commit comments

Comments
 (0)