e3eb3e240a
the idea is to use react aria, panda-css, react query and wouter as a base, in addition to livekit react components this is still mostly wip but it's usable: - homepage shows a login link to create a room - before joining a room you are asked to configure your audio/video/user name - note that if you directly go to a a conference url it creates it even if you are not logged in… very secured!
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import pandaPreset from '@pandacss/preset-panda'
|
|
import { defineConfig, defineTokens } from '@pandacss/dev'
|
|
|
|
export default defineConfig({
|
|
preflight: true,
|
|
include: ['./src/**/*.{js,jsx,ts,tsx}'],
|
|
exclude: [],
|
|
jsxFramework: 'react',
|
|
outdir: 'src/styled-system',
|
|
conditions: {
|
|
extend: {
|
|
// React Aria builds upon data attributes instead of css pseudo-classes, make sure to only work based on react aria stuff
|
|
hover: '&:is([data-hovered])',
|
|
focus: '&:is([data-focused])',
|
|
focusVisible: '&:is([data-focus-visible])',
|
|
disabled: '&:is([data-disabled])',
|
|
pressed: '&:is([data-pressed])',
|
|
},
|
|
},
|
|
theme: {
|
|
...pandaPreset.theme,
|
|
tokens: defineTokens({
|
|
...pandaPreset.theme.tokens,
|
|
spacing: {
|
|
0: { value: '0rem' },
|
|
0.125: { value: '0.125rem' },
|
|
0.25: { value: '0.25rem' },
|
|
0.375: { value: '0.375rem' },
|
|
0.5: { value: '0.5rem' },
|
|
0.75: { value: '0.75rem' },
|
|
1: { value: '1rem' },
|
|
1.25: { value: '1.25rem' },
|
|
1.5: { value: '1.5rem' },
|
|
1.75: { value: '1.75rem' },
|
|
2: { value: '2rem' },
|
|
2.25: { value: '2.25rem' },
|
|
2.5: { value: '2.5rem' },
|
|
2.75: { value: '2.75rem' },
|
|
3: { value: '3rem' },
|
|
3.5: { value: '3.5rem' },
|
|
4: { value: '4rem' },
|
|
5: { value: '5rem' },
|
|
6: { value: '6rem' },
|
|
7: { value: '7rem' },
|
|
8: { value: '8rem' },
|
|
9: { value: '9rem' },
|
|
10: { value: '10rem' },
|
|
12: { value: '12rem' },
|
|
14: { value: '14rem' },
|
|
16: { value: '16rem' },
|
|
20: { value: '20rem' },
|
|
24: { value: '24rem' },
|
|
28: { value: '28rem' },
|
|
32: { value: '32rem' },
|
|
36: { value: '36rem' },
|
|
40: { value: '40rem' },
|
|
44: { value: '44rem' },
|
|
48: { value: '48rem' },
|
|
52: { value: '52rem' },
|
|
56: { value: '56rem' },
|
|
60: { value: '60rem' },
|
|
64: { value: '64rem' },
|
|
72: { value: '72rem' },
|
|
80: { value: '80rem' },
|
|
96: { value: '96rem' },
|
|
},
|
|
}),
|
|
},
|
|
})
|