@frigade/react 2.0.0-alpha.4 → 2.0.0-alpha.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +601 -4
- package/dist/index.cjs +65 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1210 -44
- package/dist/index.js +21 -2
- package/dist/index.js.map +1 -1
- package/package.json +17 -3
package/README.md
CHANGED
|
@@ -1,9 +1,606 @@
|
|
|
1
|
-
|
|
1
|
+
# Frigade React SDK V2
|
|
2
|
+
|
|
3
|
+
### 🚨🚧 This package is currently in beta 🚧🚨
|
|
2
4
|
|
|
3
5
|
If you're looking for the full / stable version of Frigade that we all know and love, head over to our main [React SDK](https://github.com/FrigadeHQ/javascript/tree/main/packages/react).
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
We're building our new version in public so that you can have a look around if you'd like, contribute ideas, and test out how our new features will integrate into your existing Frigade setup.
|
|
8
|
+
|
|
9
|
+
If you have any questions about V2 not covered in these docs, don't hesitate to [reach out](mailto:hello@frigade.com).
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
# Quickstart
|
|
14
|
+
|
|
15
|
+
While you're testing out the V2 beta, you'll likely still want to run V1 alongside it to cover anything V2 doesn't support yet.
|
|
16
|
+
|
|
17
|
+
In order to run both versions of the Frigade React SDK at the same time, add V2 to your package.json with an alias:
|
|
18
|
+
|
|
19
|
+
```json
|
|
20
|
+
"dependencies": [
|
|
21
|
+
"@frigade/react": "^1.XX.XX",
|
|
22
|
+
|
|
23
|
+
"@frigade/reactv2": "npm:@frigade/react@alpha",
|
|
24
|
+
]
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Next, add the V2 `<Provider>` component to your app above the V1 `<FrigadeProvider>`:
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
import { FrigadeProvider } from '@frigade/react'
|
|
31
|
+
import * as Frigade from '@frigade/reactv2'
|
|
32
|
+
|
|
33
|
+
const FRIGADE_API_KEY = 'api_public_abcd1234'
|
|
34
|
+
|
|
35
|
+
export const App = () => {
|
|
36
|
+
const userId = '...'
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Frigade.Provider apiKey={FRIGADE_API_KEY} userId={userId}}>
|
|
40
|
+
<FrigadeProvider publicApiKey={FRIGADE_API_KEY} userId={userId}>
|
|
41
|
+
{/* ... */}
|
|
42
|
+
</FrigadeProvider>
|
|
43
|
+
</Frigade.Provider>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
That's pretty much it. You can now use V2 components:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import * as Frigade from '@frigade/reactv2'
|
|
52
|
+
|
|
53
|
+
export const DemoComponent = () => {
|
|
54
|
+
return <Frigade.Tour flowId="flow_abcd1234" />
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
# Components
|
|
61
|
+
|
|
62
|
+
### Provider
|
|
63
|
+
|
|
64
|
+
This is the base context provider for Frigade. It holds your configuration and theme.
|
|
65
|
+
|
|
66
|
+
You should place this as high in your component tree as possible.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<Frigade.Provider
|
|
70
|
+
apiKey="Your public API key"
|
|
71
|
+
userId="External user id"
|
|
72
|
+
navigate={(primaryButtonUri: string, primaryButtonUriTarget: string) => {
|
|
73
|
+
/*
|
|
74
|
+
Called in default onPrimary and onSecondary event handlers
|
|
75
|
+
when a Flow/Step has a primaryButtonUri or secondaryButtonUri.
|
|
76
|
+
|
|
77
|
+
Override this function to add custom routing behavior for URIs in Flows.
|
|
78
|
+
*/
|
|
79
|
+
}}
|
|
80
|
+
// See "Appendix: Default theme" below for full theme spec
|
|
81
|
+
theme={{
|
|
82
|
+
colors: {
|
|
83
|
+
primary: {
|
|
84
|
+
foreground: '#f00',
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
{/* ... */}
|
|
90
|
+
</Frigade.Provider>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Announcement
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<Frigade.Announcement
|
|
97
|
+
css={/* See "Appendix: CSS prop" */}
|
|
98
|
+
|
|
99
|
+
// Set to false to hide the dismiss button
|
|
100
|
+
dismissible={true}
|
|
101
|
+
|
|
102
|
+
// The Flow ID of the Announcement in Frigade
|
|
103
|
+
flowId="flow_1234abcd"
|
|
104
|
+
|
|
105
|
+
// Called when the flow state changes to "complete"
|
|
106
|
+
onComplete={(flow: Flow) => boolean | void}
|
|
107
|
+
|
|
108
|
+
// Called when the user clicks the Dismiss button
|
|
109
|
+
onDismiss={(flow: Flow, event?: MouseEvent<unknown>) => boolean | void}
|
|
110
|
+
|
|
111
|
+
// Called when the user clicks the Primary button
|
|
112
|
+
onPrimary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
113
|
+
|
|
114
|
+
// Called when the user clicks the Secondary button
|
|
115
|
+
onSecondary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
116
|
+
|
|
117
|
+
variables={/* See https://frigade-v2-docs.mintlify.app/platform/dynamic-variables */}
|
|
118
|
+
/>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Banner
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
<Frigade.Banner
|
|
125
|
+
css={/* See "Appendix: CSS prop" */}
|
|
126
|
+
|
|
127
|
+
// Set to false to hide the dismiss button
|
|
128
|
+
dismissible={true}
|
|
129
|
+
|
|
130
|
+
// The Flow ID of the Banner in Frigade
|
|
131
|
+
flowId="flow_1234abcd"
|
|
132
|
+
|
|
133
|
+
// Called when the flow state changes to "complete"
|
|
134
|
+
onComplete={(flow: Flow) => boolean | void}
|
|
135
|
+
|
|
136
|
+
// Called when the user clicks the Dismiss button
|
|
137
|
+
onDismiss={(flow: Flow, event?: MouseEvent<unknown>) => boolean | void}
|
|
138
|
+
|
|
139
|
+
// Called when the user clicks the Primary button
|
|
140
|
+
onPrimary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
141
|
+
|
|
142
|
+
// Called when the user clicks the Secondary button
|
|
143
|
+
onSecondary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
144
|
+
|
|
145
|
+
variables={/* See https://frigade-v2-docs.mintlify.app/platform/dynamic-variables */}
|
|
146
|
+
/>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Tour
|
|
150
|
+
|
|
151
|
+
This one has a doozy of a type def so let's just link to that and explain it briefly:
|
|
152
|
+
|
|
153
|
+
https://github.com/FrigadeHQ/javascript/blob/main/packages/reactv2/src/components/Tour/index.tsx
|
|
154
|
+
|
|
155
|
+
TL;DR:
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
<Frigade.Tour
|
|
159
|
+
css={/* See "Appendix: CSS prop" */}
|
|
160
|
+
|
|
161
|
+
// Set to false to hide the dismiss button
|
|
162
|
+
dismissible={true}
|
|
163
|
+
|
|
164
|
+
// The Flow ID of the Tour in Frigade
|
|
165
|
+
flowId="flow_1234abcd"
|
|
166
|
+
|
|
167
|
+
// Called when the flow state changes to "complete"
|
|
168
|
+
onComplete={(flow: Flow) => boolean | void}
|
|
169
|
+
|
|
170
|
+
// Called when the user clicks the Dismiss button
|
|
171
|
+
onDismiss={(flow: Flow, event?: MouseEvent<unknown>) => boolean | void}
|
|
172
|
+
|
|
173
|
+
// Called when the user clicks the Primary button
|
|
174
|
+
onPrimary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
175
|
+
|
|
176
|
+
// Called when the user clicks the Secondary button
|
|
177
|
+
onSecondary={(step: FlowStep, event?: MouseEvent<unknown>) => boolean | void}
|
|
178
|
+
|
|
179
|
+
// Dim the rest of the screen around the element that the current Tour step is attached to
|
|
180
|
+
spotlight={true}
|
|
181
|
+
|
|
182
|
+
variables={/* See https://frigade-v2-docs.mintlify.app/platform/dynamic-variables */}
|
|
183
|
+
|
|
184
|
+
/*
|
|
185
|
+
|
|
186
|
+
Since we use Radix, Tour extends Radix.Popover's props as well. We pass the following props directly through to Radix:
|
|
187
|
+
|
|
188
|
+
Passed to Popover.Root: Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>
|
|
189
|
+
Passed to Popover.Content: Omit<Popover.PopoverContentProps, 'align' | 'asChild'>
|
|
190
|
+
|
|
191
|
+
One important note is that we add "before" and "after" as align options, in addition to the stock Radix options of "start", "center", and "end":
|
|
192
|
+
|
|
193
|
+
align={Popover.PopoverContentProps['align'] | 'before' | 'after'}
|
|
194
|
+
|
|
195
|
+
For the full reference, see: https://www.radix-ui.com/primitives/docs/components/popover
|
|
196
|
+
|
|
197
|
+
*/
|
|
198
|
+
/>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
# Appendix
|
|
204
|
+
|
|
205
|
+
### CSS prop / style overrides
|
|
206
|
+
|
|
207
|
+
We use [Emotion's css prop](https://emotion.sh/docs/css-prop#use-the-css-prop) under the hood on our components. You can pass a `css` object in at the top level of any of our components to create scoped styles for that specific instance of that component.
|
|
208
|
+
|
|
209
|
+
We also assign stable class names to each internal part of each component, to make style overrides as easy as:
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
<Frigade.Tour
|
|
213
|
+
css={{
|
|
214
|
+
'.fr-tooltip-content .fr-tooltip-close': {
|
|
215
|
+
backgroundColor: 'pink',
|
|
216
|
+
},
|
|
217
|
+
'.fr-button-primary': {
|
|
218
|
+
backgroundColor: 'fuchsia',
|
|
219
|
+
},
|
|
220
|
+
}}
|
|
221
|
+
/>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
To find the stable class names for any given component, you can either:
|
|
225
|
+
|
|
226
|
+
1. Inspect the component in your browser's dev tools and look for classes prefixed with `fr-`
|
|
227
|
+
2. [Read the source](https://github.com/FrigadeHQ/javascript/tree/main/packages/reactv2/src/components) for the component and use the value of the `part` prop (class name will always be `fr-${part}`)
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
### Default theme
|
|
232
|
+
|
|
233
|
+
Frigade components are built on our internal design system and come pre-wired with a full set of themeable design tokens.
|
|
234
|
+
|
|
235
|
+
The object passed to the `theme` prop in `Provider` will be merged with our defaults, so you only need to override the tokens that you want to change.
|
|
236
|
+
|
|
237
|
+
See the **CSS Variables** appendix below for the default values of each `--fr` CSS property.
|
|
238
|
+
|
|
239
|
+
<details>
|
|
240
|
+
<summary>View full theme object</summary>
|
|
241
|
+
|
|
242
|
+
```json
|
|
243
|
+
{
|
|
244
|
+
"borders": { "md": "var(--fr-borders-md)" },
|
|
245
|
+
"borderWidths": {
|
|
246
|
+
"0": "var(--fr-borderWidths-0)",
|
|
247
|
+
"md": "var(--fr-borderWidths-md)"
|
|
248
|
+
},
|
|
249
|
+
"colors": {
|
|
250
|
+
"black": "var(--fr-colors-black)",
|
|
251
|
+
"gray100": "var(--fr-colors-gray100)",
|
|
252
|
+
"gray200": "var(--fr-colors-gray200)",
|
|
253
|
+
"gray300": "var(--fr-colors-gray300)",
|
|
254
|
+
"gray400": "var(--fr-colors-gray400)",
|
|
255
|
+
"gray500": "var(--fr-colors-gray500)",
|
|
256
|
+
"gray600": "var(--fr-colors-gray600)",
|
|
257
|
+
"gray700": "var(--fr-colors-gray700)",
|
|
258
|
+
"gray800": "var(--fr-colors-gray800)",
|
|
259
|
+
"gray900": "var(--fr-colors-gray900)",
|
|
260
|
+
"white": "var(--fr-colors-white)",
|
|
261
|
+
"blue400": "var(--fr-colors-blue400)",
|
|
262
|
+
"blue500": "var(--fr-colors-blue500)",
|
|
263
|
+
"blue800": "var(--fr-colors-blue800)",
|
|
264
|
+
"blue900": "var(--fr-colors-blue900)",
|
|
265
|
+
"green400": "var(--fr-colors-green400)",
|
|
266
|
+
"green500": "var(--fr-colors-green500)",
|
|
267
|
+
"green800": "var(--fr-colors-green800)",
|
|
268
|
+
"transparent": "var(--fr-colors-transparent)",
|
|
269
|
+
"inherit": "var(--fr-colors-inherit)",
|
|
270
|
+
"red500": "var(--fr-colors-red500)",
|
|
271
|
+
"neutral": {
|
|
272
|
+
"background": "var(--fr-colors-neutral-background)",
|
|
273
|
+
"border": "var(--fr-colors-neutral-border)",
|
|
274
|
+
"foreground": "var(--fr-colors-neutral-foreground)",
|
|
275
|
+
"surface": "var(--fr-colors-neutral-surface)",
|
|
276
|
+
"active": {
|
|
277
|
+
"background": "var(--fr-colors-neutral-active-background)",
|
|
278
|
+
"border": "var(--fr-colors-neutral-active-border)",
|
|
279
|
+
"foreground": "var(--fr-colors-neutral-active-foreground)",
|
|
280
|
+
"surface": "var(--fr-colors-neutral-active-surface)"
|
|
281
|
+
},
|
|
282
|
+
"focus": {
|
|
283
|
+
"background": "var(--fr-colors-neutral-focus-background)",
|
|
284
|
+
"border": "var(--fr-colors-neutral-focus-border)",
|
|
285
|
+
"foreground": "var(--fr-colors-neutral-focus-foreground)",
|
|
286
|
+
"surface": "var(--fr-colors-neutral-focus-surface)"
|
|
287
|
+
},
|
|
288
|
+
"hover": {
|
|
289
|
+
"background": "var(--fr-colors-neutral-hover-background)",
|
|
290
|
+
"border": "var(--fr-colors-neutral-hover-border)",
|
|
291
|
+
"foreground": "var(--fr-colors-neutral-hover-foreground)",
|
|
292
|
+
"surface": "var(--fr-colors-neutral-hover-surface)"
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
"primary": {
|
|
296
|
+
"background": "var(--fr-colors-primary-background)",
|
|
297
|
+
"border": "var(--fr-colors-primary-border)",
|
|
298
|
+
"foreground": "var(--fr-colors-primary-foreground)",
|
|
299
|
+
"surface": "var(--fr-colors-primary-surface)",
|
|
300
|
+
"active": {
|
|
301
|
+
"background": "var(--fr-colors-primary-active-background)",
|
|
302
|
+
"border": "var(--fr-colors-primary-active-border)",
|
|
303
|
+
"foreground": "var(--fr-colors-primary-active-foreground)",
|
|
304
|
+
"surface": "var(--fr-colors-primary-active-surface)"
|
|
305
|
+
},
|
|
306
|
+
"focus": {
|
|
307
|
+
"background": "var(--fr-colors-primary-focus-background)",
|
|
308
|
+
"border": "var(--fr-colors-primary-focus-border)",
|
|
309
|
+
"foreground": "var(--fr-colors-primary-focus-foreground)",
|
|
310
|
+
"surface": "var(--fr-colors-primary-focus-surface)"
|
|
311
|
+
},
|
|
312
|
+
"hover": {
|
|
313
|
+
"background": "var(--fr-colors-primary-hover-background)",
|
|
314
|
+
"border": "var(--fr-colors-primary-hover-border)",
|
|
315
|
+
"foreground": "var(--fr-colors-primary-hover-foreground)",
|
|
316
|
+
"surface": "var(--fr-colors-primary-hover-surface)"
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
"secondary": {
|
|
320
|
+
"background": "var(--fr-colors-secondary-background)",
|
|
321
|
+
"border": "var(--fr-colors-secondary-border)",
|
|
322
|
+
"foreground": "var(--fr-colors-secondary-foreground)",
|
|
323
|
+
"surface": "var(--fr-colors-secondary-surface)",
|
|
324
|
+
"active": {
|
|
325
|
+
"background": "var(--fr-colors-secondary-active-background)",
|
|
326
|
+
"border": "var(--fr-colors-secondary-active-border)",
|
|
327
|
+
"foreground": "var(--fr-colors-secondary-active-foreground)",
|
|
328
|
+
"surface": "var(--fr-colors-secondary-active-surface)"
|
|
329
|
+
},
|
|
330
|
+
"focus": {
|
|
331
|
+
"background": "var(--fr-colors-secondary-focus-background)",
|
|
332
|
+
"border": "var(--fr-colors-secondary-focus-border)",
|
|
333
|
+
"foreground": "var(--fr-colors-secondary-focus-foreground)",
|
|
334
|
+
"surface": "var(--fr-colors-secondary-focus-surface)"
|
|
335
|
+
},
|
|
336
|
+
"hover": {
|
|
337
|
+
"background": "var(--fr-colors-secondary-hover-background)",
|
|
338
|
+
"border": "var(--fr-colors-secondary-hover-border)",
|
|
339
|
+
"foreground": "var(--fr-colors-secondary-hover-foreground)",
|
|
340
|
+
"surface": "var(--fr-colors-secondary-hover-surface)"
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
},
|
|
344
|
+
"fontFamilies": { "default": "var(--fr-fontFamilies-default)" },
|
|
345
|
+
"fontSizes": {
|
|
346
|
+
"xs": "var(--fr-fontSizes-xs)",
|
|
347
|
+
"sm": "var(--fr-fontSizes-sm)",
|
|
348
|
+
"md": "var(--fr-fontSizes-md)",
|
|
349
|
+
"lg": "var(--fr-fontSizes-lg)",
|
|
350
|
+
"xl": "var(--fr-fontSizes-xl)",
|
|
351
|
+
"2xl": "var(--fr-fontSizes-2xl)",
|
|
352
|
+
"3xl": "var(--fr-fontSizes-3xl)",
|
|
353
|
+
"4xl": "var(--fr-fontSizes-4xl)",
|
|
354
|
+
"5xl": "var(--fr-fontSizes-5xl)"
|
|
355
|
+
},
|
|
356
|
+
"fontWeights": {
|
|
357
|
+
"thin": "var(--fr-fontWeights-thin)",
|
|
358
|
+
"extralight": "var(--fr-fontWeights-extralight)",
|
|
359
|
+
"light": "var(--fr-fontWeights-light)",
|
|
360
|
+
"regular": "var(--fr-fontWeights-regular)",
|
|
361
|
+
"medium": "var(--fr-fontWeights-medium)",
|
|
362
|
+
"demibold": "var(--fr-fontWeights-demibold)",
|
|
363
|
+
"bold": "var(--fr-fontWeights-bold)",
|
|
364
|
+
"extrabold": "var(--fr-fontWeights-extrabold)",
|
|
365
|
+
"black": "var(--fr-fontWeights-black)"
|
|
366
|
+
},
|
|
367
|
+
"letterSpacings": { "md": "var(--fr-letterSpacings-md)" },
|
|
368
|
+
"lineHeights": {
|
|
369
|
+
"xs": "var(--fr-lineHeights-xs)",
|
|
370
|
+
"sm": "var(--fr-lineHeights-sm)",
|
|
371
|
+
"md": "var(--fr-lineHeights-md)",
|
|
372
|
+
"lg": "var(--fr-lineHeights-lg)",
|
|
373
|
+
"xl": "var(--fr-lineHeights-xl)",
|
|
374
|
+
"2xl": "var(--fr-lineHeights-2xl)",
|
|
375
|
+
"3xl": "var(--fr-lineHeights-3xl)",
|
|
376
|
+
"4xl": "var(--fr-lineHeights-4xl)"
|
|
377
|
+
},
|
|
378
|
+
"radii": {
|
|
379
|
+
"md": "var(--fr-radii-md)",
|
|
380
|
+
"lg": "var(--fr-radii-lg)",
|
|
381
|
+
"round": "var(--fr-radii-round)"
|
|
382
|
+
},
|
|
383
|
+
"shadows": { "md": "var(--fr-shadows-md)" },
|
|
384
|
+
"space": {
|
|
385
|
+
"0": "var(--fr-space-0)",
|
|
386
|
+
"1": "var(--fr-space-1)",
|
|
387
|
+
"2": "var(--fr-space-2)",
|
|
388
|
+
"3": "var(--fr-space-3)",
|
|
389
|
+
"4": "var(--fr-space-4)",
|
|
390
|
+
"5": "var(--fr-space-5)",
|
|
391
|
+
"6": "var(--fr-space-6)",
|
|
392
|
+
"7": "var(--fr-space-7)",
|
|
393
|
+
"8": "var(--fr-space-8)",
|
|
394
|
+
"9": "var(--fr-space-9)",
|
|
395
|
+
"10": "var(--fr-space-10)",
|
|
396
|
+
"11": "var(--fr-space-11)",
|
|
397
|
+
"12": "var(--fr-space-12)",
|
|
398
|
+
"13": "var(--fr-space-13)",
|
|
399
|
+
"14": "var(--fr-space-14)",
|
|
400
|
+
"15": "var(--fr-space-15)",
|
|
401
|
+
"16": "var(--fr-space-16)",
|
|
402
|
+
"17": "var(--fr-space-17)",
|
|
403
|
+
"18": "var(--fr-space-18)",
|
|
404
|
+
"19": "var(--fr-space-19)",
|
|
405
|
+
"20": "var(--fr-space-20)",
|
|
406
|
+
"-20": "var(--fr-space--20)",
|
|
407
|
+
"-19": "var(--fr-space--19)",
|
|
408
|
+
"-18": "var(--fr-space--18)",
|
|
409
|
+
"-17": "var(--fr-space--17)",
|
|
410
|
+
"-16": "var(--fr-space--16)",
|
|
411
|
+
"-15": "var(--fr-space--15)",
|
|
412
|
+
"-14": "var(--fr-space--14)",
|
|
413
|
+
"-13": "var(--fr-space--13)",
|
|
414
|
+
"-12": "var(--fr-space--12)",
|
|
415
|
+
"-11": "var(--fr-space--11)",
|
|
416
|
+
"-10": "var(--fr-space--10)",
|
|
417
|
+
"-9": "var(--fr-space--9)",
|
|
418
|
+
"-8": "var(--fr-space--8)",
|
|
419
|
+
"-7": "var(--fr-space--7)",
|
|
420
|
+
"-6": "var(--fr-space--6)",
|
|
421
|
+
"-5": "var(--fr-space--5)",
|
|
422
|
+
"-4": "var(--fr-space--4)",
|
|
423
|
+
"-3": "var(--fr-space--3)",
|
|
424
|
+
"-2": "var(--fr-space--2)",
|
|
425
|
+
"-1": "var(--fr-space--1)",
|
|
426
|
+
"-0.5": "var(--fr-space--0.5)",
|
|
427
|
+
"0.5": "var(--fr-space-0.5)",
|
|
428
|
+
"auto": "var(--fr-space-auto)"
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
```
|
|
432
|
+
|
|
433
|
+
</details>
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
### CSS Variables
|
|
438
|
+
|
|
439
|
+
Our theme runs on a set of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that map 1:1 to the properties in the theme. For any part of the theme, you can override the related CSS var and any themed value in that CSS scope will be changed accordingly.
|
|
440
|
+
|
|
441
|
+
This is especially useful in conjunction with the `css` prop, as it allows you to create temporary sub-themes that apply only to one Component, e.g.:
|
|
442
|
+
|
|
443
|
+
```tsx
|
|
444
|
+
<Frigade.Tour
|
|
445
|
+
css={{
|
|
446
|
+
// Change primary elements (i.e. buttons) in this Tour to be black
|
|
447
|
+
'--fr-color-primary-surface': 'var(--fr-colors-black)',
|
|
448
|
+
}}
|
|
449
|
+
/>
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
<details>
|
|
453
|
+
<summary>View full list of CSS properties</summary>
|
|
6
454
|
|
|
7
|
-
|
|
455
|
+
```css
|
|
456
|
+
--fr-borders-md: 1px solid;
|
|
457
|
+
--fr-borderWidths-0: 0;
|
|
458
|
+
--fr-borderWidths-md: 1px;
|
|
459
|
+
--fr-colors-black: #000000;
|
|
460
|
+
--fr-colors-gray100: #14161a;
|
|
461
|
+
--fr-colors-gray200: #181b20;
|
|
462
|
+
--fr-colors-gray300: #1f2329;
|
|
463
|
+
--fr-colors-gray400: #2e343d;
|
|
464
|
+
--fr-colors-gray500: #4c5766;
|
|
465
|
+
--fr-colors-gray600: #5a6472;
|
|
466
|
+
--fr-colors-gray700: #c5cbd3;
|
|
467
|
+
--fr-colors-gray800: #e2e5e9;
|
|
468
|
+
--fr-colors-gray900: #f1f2f4;
|
|
469
|
+
--fr-colors-white: #ffffff;
|
|
470
|
+
--fr-colors-blue400: #015ac6;
|
|
471
|
+
--fr-colors-blue500: #0171f8;
|
|
472
|
+
--fr-colors-blue800: #dbecff;
|
|
473
|
+
--fr-colors-blue900: #f5f9ff;
|
|
474
|
+
--fr-colors-green400: #009e37;
|
|
475
|
+
--fr-colors-green500: #00d149;
|
|
476
|
+
--fr-colors-green800: #dbffe8;
|
|
477
|
+
--fr-colors-transparent: #ffffff00;
|
|
478
|
+
--fr-colors-inherit: inherit;
|
|
479
|
+
--fr-colors-red500: #c00000;
|
|
480
|
+
--fr-colors-neutral-background: var(--fr-colors-white);
|
|
481
|
+
--fr-colors-neutral-border: var(--fr-colors-gray500);
|
|
482
|
+
--fr-colors-neutral-foreground: var(--fr-colors-black);
|
|
483
|
+
--fr-colors-neutral-surface: var(--fr-colors-gray700);
|
|
484
|
+
--fr-colors-neutral-active-background: var(--fr-colors-white);
|
|
485
|
+
--fr-colors-neutral-active-border: var(--fr-colors-gray900);
|
|
486
|
+
--fr-colors-neutral-active-foreground: var(--fr-colors-black);
|
|
487
|
+
--fr-colors-neutral-active-surface: var(--fr-colors-gray700);
|
|
488
|
+
--fr-colors-neutral-focus-background: var(--fr-colors-white);
|
|
489
|
+
--fr-colors-neutral-focus-border: var(--fr-colors-gray900);
|
|
490
|
+
--fr-colors-neutral-focus-foreground: var(--fr-colors-black);
|
|
491
|
+
--fr-colors-neutral-focus-surface: var(--fr-colors-gray700);
|
|
492
|
+
--fr-colors-neutral-hover-background: var(--fr-colors-white);
|
|
493
|
+
--fr-colors-neutral-hover-border: var(--fr-colors-gray900);
|
|
494
|
+
--fr-colors-neutral-hover-foreground: var(--fr-colors-black);
|
|
495
|
+
--fr-colors-neutral-hover-surface: var(--fr-colors-gray700);
|
|
496
|
+
--fr-colors-primary-background: var(--fr-colors-blue500);
|
|
497
|
+
--fr-colors-primary-border: var(--fr-colors-blue500);
|
|
498
|
+
--fr-colors-primary-foreground: var(--fr-colors-white);
|
|
499
|
+
--fr-colors-primary-surface: var(--fr-colors-blue500);
|
|
500
|
+
--fr-colors-primary-active-background: var(--fr-colors-blue400);
|
|
501
|
+
--fr-colors-primary-active-border: var(--fr-colors-blue400);
|
|
502
|
+
--fr-colors-primary-active-foreground: var(--fr-colors-white);
|
|
503
|
+
--fr-colors-primary-active-surface: var(--fr-colors-blue400);
|
|
504
|
+
--fr-colors-primary-focus-background: var(--fr-colors-blue500);
|
|
505
|
+
--fr-colors-primary-focus-border: var(--fr-colors-blue500);
|
|
506
|
+
--fr-colors-primary-focus-foreground: var(--fr-colors-white);
|
|
507
|
+
--fr-colors-primary-focus-surface: var(--fr-colors-blue500);
|
|
508
|
+
--fr-colors-primary-hover-background: var(--fr-colors-blue400);
|
|
509
|
+
--fr-colors-primary-hover-border: var(--fr-colors-blue400);
|
|
510
|
+
--fr-colors-primary-hover-foreground: var(--fr-colors-white);
|
|
511
|
+
--fr-colors-primary-hover-surface: var(--fr-colors-blue400);
|
|
512
|
+
--fr-colors-secondary-background: var(--fr-colors-gray900);
|
|
513
|
+
--fr-colors-secondary-border: var(--fr-colors-gray900);
|
|
514
|
+
--fr-colors-secondary-foreground: var(--fr-colors-black);
|
|
515
|
+
--fr-colors-secondary-surface: var(--fr-colors-gray900);
|
|
516
|
+
--fr-colors-secondary-active-background: var(--fr-colors-gray800);
|
|
517
|
+
--fr-colors-secondary-active-border: var(--fr-colors-gray800);
|
|
518
|
+
--fr-colors-secondary-active-foreground: var(--fr-colors-black);
|
|
519
|
+
--fr-colors-secondary-active-surface: var(--fr-colors-gray800);
|
|
520
|
+
--fr-colors-secondary-focus-background: var(--fr-colors-gray900);
|
|
521
|
+
--fr-colors-secondary-focus-border: var(--fr-colors-gray900);
|
|
522
|
+
--fr-colors-secondary-focus-foreground: var(--fr-colors-black);
|
|
523
|
+
--fr-colors-secondary-focus-surface: var(--fr-colors-gray900);
|
|
524
|
+
--fr-colors-secondary-hover-background: var(--fr-colors-gray800);
|
|
525
|
+
--fr-colors-secondary-hover-border: var(--fr-colors-gray800);
|
|
526
|
+
--fr-colors-secondary-hover-foreground: var(--fr-colors-black);
|
|
527
|
+
--fr-colors-secondary-hover-surface: var(--fr-colors-gray800);
|
|
528
|
+
--fr-fontFamilies-default: TT Interphases Pro, sans-serif;
|
|
529
|
+
--fr-fontSizes-xs: 12px;
|
|
530
|
+
--fr-fontSizes-sm: 14px;
|
|
531
|
+
--fr-fontSizes-md: 16px;
|
|
532
|
+
--fr-fontSizes-lg: 18px;
|
|
533
|
+
--fr-fontSizes-xl: 20px;
|
|
534
|
+
--fr-fontSizes-2xl: 24px;
|
|
535
|
+
--fr-fontSizes-3xl: 30px;
|
|
536
|
+
--fr-fontSizes-4xl: 36px;
|
|
537
|
+
--fr-fontSizes-5xl: 48px;
|
|
538
|
+
--fr-fontWeights-thin: 100;
|
|
539
|
+
--fr-fontWeights-extralight: 200;
|
|
540
|
+
--fr-fontWeights-light: 300;
|
|
541
|
+
--fr-fontWeights-regular: 400;
|
|
542
|
+
--fr-fontWeights-medium: 500;
|
|
543
|
+
--fr-fontWeights-demibold: 600;
|
|
544
|
+
--fr-fontWeights-bold: 700;
|
|
545
|
+
--fr-fontWeights-extrabold: 800;
|
|
546
|
+
--fr-fontWeights-black: 900;
|
|
547
|
+
--fr-letterSpacings-md: 0.02em;
|
|
548
|
+
--fr-lineHeights-xs: 18px;
|
|
549
|
+
--fr-lineHeights-sm: 22px;
|
|
550
|
+
--fr-lineHeights-md: 24px;
|
|
551
|
+
--fr-lineHeights-lg: 26px;
|
|
552
|
+
--fr-lineHeights-xl: 30px;
|
|
553
|
+
--fr-lineHeights-2xl: 38px;
|
|
554
|
+
--fr-lineHeights-3xl: 46px;
|
|
555
|
+
--fr-lineHeights-4xl: 60px;
|
|
556
|
+
--fr-radii-md: 10px;
|
|
557
|
+
--fr-radii-lg: 20px;
|
|
558
|
+
--fr-radii-round: 50%;
|
|
559
|
+
--fr-shadows-md: 0px 4px 20px rgba(0, 0, 0, 0.1);
|
|
560
|
+
--fr-space-0: 0px;
|
|
561
|
+
--fr-space-1: 4px;
|
|
562
|
+
--fr-space-2: 8px;
|
|
563
|
+
--fr-space-3: 12px;
|
|
564
|
+
--fr-space-4: 16px;
|
|
565
|
+
--fr-space-5: 20px;
|
|
566
|
+
--fr-space-6: 24px;
|
|
567
|
+
--fr-space-7: 28px;
|
|
568
|
+
--fr-space-8: 32px;
|
|
569
|
+
--fr-space-9: 36px;
|
|
570
|
+
--fr-space-10: 40px;
|
|
571
|
+
--fr-space-11: 44px;
|
|
572
|
+
--fr-space-12: 48px;
|
|
573
|
+
--fr-space-13: 52px;
|
|
574
|
+
--fr-space-14: 56px;
|
|
575
|
+
--fr-space-15: 60px;
|
|
576
|
+
--fr-space-16: 64px;
|
|
577
|
+
--fr-space-17: 68px;
|
|
578
|
+
--fr-space-18: 72px;
|
|
579
|
+
--fr-space-19: 76px;
|
|
580
|
+
--fr-space-20: 80px;
|
|
581
|
+
--fr-space--20: -80px;
|
|
582
|
+
--fr-space--19: -76px;
|
|
583
|
+
--fr-space--18: -72px;
|
|
584
|
+
--fr-space--17: -68px;
|
|
585
|
+
--fr-space--16: -64px;
|
|
586
|
+
--fr-space--15: -60px;
|
|
587
|
+
--fr-space--14: -56px;
|
|
588
|
+
--fr-space--13: -52px;
|
|
589
|
+
--fr-space--12: -48px;
|
|
590
|
+
--fr-space--11: -44px;
|
|
591
|
+
--fr-space--10: -40px;
|
|
592
|
+
--fr-space--9: -36px;
|
|
593
|
+
--fr-space--8: -32px;
|
|
594
|
+
--fr-space--7: -28px;
|
|
595
|
+
--fr-space--6: -24px;
|
|
596
|
+
--fr-space--5: -20px;
|
|
597
|
+
--fr-space--4: -16px;
|
|
598
|
+
--fr-space--3: -12px;
|
|
599
|
+
--fr-space--2: -8px;
|
|
600
|
+
--fr-space--1: -4px;
|
|
601
|
+
--fr-space--0.5: -2px;
|
|
602
|
+
--fr-space-0.5: 2px;
|
|
603
|
+
--fr-space-auto: auto;
|
|
604
|
+
```
|
|
8
605
|
|
|
9
|
-
|
|
606
|
+
</details>
|