♻️(frontend) reorganize starting frontend code
- we now have "features" to try to organize code by intent instead of code type. everything at the root of frontend, not in feature/, is global - customized the panda config a bunch to try to begin to have an actual design system. The idea is to prevent using arbitrary values here and there in the code, but rather semantic tokens - changed the userAuth code logic to handle the fact that a 401 on the users/me call is not really an error per say, but rather an indication the user is not logged in
This commit is contained in:
Emmanuel Pelletier
@@ -1,7 +1,35 @@
|
||||
import pandaPreset from '@pandacss/preset-panda'
|
||||
import { defineConfig, defineTokens } from '@pandacss/dev'
|
||||
import {
|
||||
Config,
|
||||
Tokens,
|
||||
defineConfig,
|
||||
defineSemanticTokens,
|
||||
defineTextStyles,
|
||||
defineTokens,
|
||||
} from '@pandacss/dev'
|
||||
|
||||
export default defineConfig({
|
||||
const spacing: 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.625: { value: '0.625rem' },
|
||||
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' },
|
||||
}
|
||||
|
||||
const config: Config = {
|
||||
preflight: true,
|
||||
include: ['./src/**/*.{js,jsx,ts,tsx}'],
|
||||
exclude: [],
|
||||
@@ -9,61 +37,244 @@ export default defineConfig({
|
||||
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])',
|
||||
// React Aria builds upon data attributes instead of css pseudo-classes, in case we style a React Aria component
|
||||
// we dont want to trigger pseudo class related styles
|
||||
'ra-hover': '&:is([data-hovered])',
|
||||
'ra-focus': '&:is([data-focused])',
|
||||
'ra-focusVisible': '&:is([data-focus-visible])',
|
||||
'ra-disabled': '&:is([data-disabled])',
|
||||
pressed: '&:is([data-pressed])',
|
||||
'ra-pressed': '&:is([data-pressed])',
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
...pandaPreset.theme,
|
||||
// media queries are defined in em so that zooming with text-only mode triggers breakpoints
|
||||
breakpoints: {
|
||||
xs: '22.6em', // 360px (we assume less than that are old/entry level mobile phones)
|
||||
sm: '40em', // 640px
|
||||
md: '48em', // 768px
|
||||
lg: '64em', // 1024px
|
||||
xl: '80em', // 1280px
|
||||
'2xl': '96em', // 1536px
|
||||
},
|
||||
tokens: defineTokens({
|
||||
/* we take a few things from the panda preset but for now we clear out some stuff.
|
||||
* This way we'll only add the things we need step by step and prevent using lots of differents things.
|
||||
*/
|
||||
...pandaPreset.theme.tokens,
|
||||
animations: {},
|
||||
blurs: {},
|
||||
/* just directly use values as tokens. This allows us to follow a specific design scale,
|
||||
* without having to remember what 'sm' or '2xl' actually means.
|
||||
*
|
||||
* see semanticTokens for tokens targeting specific usages
|
||||
*/
|
||||
fonts: {
|
||||
sans: {
|
||||
value: [
|
||||
'Source Sans',
|
||||
'Source Sans fallback',
|
||||
'ui-sans-serif',
|
||||
'system-ui',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'"Noto Sans"',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
'"Noto Color Emoji"',
|
||||
],
|
||||
},
|
||||
serif: {
|
||||
value: [
|
||||
'ui-serif',
|
||||
'Georgia',
|
||||
'Cambria',
|
||||
'"Times New Roman"',
|
||||
'Times',
|
||||
'serif',
|
||||
],
|
||||
},
|
||||
mono: {
|
||||
value: [
|
||||
'Source Code Pro',
|
||||
'ui-monospace',
|
||||
'SFMono-Regular',
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
'"Liberation Mono"',
|
||||
'"Courier New"',
|
||||
'monospace',
|
||||
],
|
||||
},
|
||||
},
|
||||
fontSizes: {
|
||||
10: { value: '0.625rem' },
|
||||
12: { value: '0.75rem' },
|
||||
14: { value: '0.875rem' },
|
||||
16: { value: '1rem' },
|
||||
20: { value: '1.25rem' },
|
||||
24: { value: '1.5rem' },
|
||||
28: { value: '1.75rem' },
|
||||
32: { value: '2rem' },
|
||||
40: { value: '2.375rem' },
|
||||
48: { value: '3rem' },
|
||||
64: { value: '4rem' },
|
||||
},
|
||||
letterSpacings: {},
|
||||
shadows: {
|
||||
sm: {
|
||||
value: [
|
||||
'0 1px 3px 0 rgb(0 0 0 / 0.1)',
|
||||
'0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
],
|
||||
},
|
||||
},
|
||||
lineHeights: {
|
||||
1: { value: '1' },
|
||||
1.25: { value: '1.25' },
|
||||
1.375: { value: '1.375' },
|
||||
1.5: { value: '1.5' },
|
||||
1.625: { value: '1.625' },
|
||||
2: { value: '2' },
|
||||
},
|
||||
radii: {
|
||||
6: { value: '0.375rem' },
|
||||
8: { value: '0.5rem' },
|
||||
16: { value: '1rem' },
|
||||
full: { value: '9999px' },
|
||||
},
|
||||
sizes: {
|
||||
...spacing,
|
||||
full: { value: '100%' },
|
||||
min: { value: 'min-content' },
|
||||
max: { value: 'max-content' },
|
||||
fit: { value: 'fit-content' },
|
||||
},
|
||||
spacing,
|
||||
}),
|
||||
semanticTokens: defineSemanticTokens({
|
||||
colors: {
|
||||
default: {
|
||||
text: { value: '{colors.gray.900}' },
|
||||
bg: { value: '{colors.slate.50}' },
|
||||
subtle: { value: '{colors.gray.100}' },
|
||||
'subtle-text': { value: '{colors.gray.600}' },
|
||||
},
|
||||
box: {
|
||||
text: { value: '{colors.default.text}' },
|
||||
bg: { value: '{colors.white}' },
|
||||
border: { value: '{colors.gray.300}' },
|
||||
},
|
||||
control: {
|
||||
DEFAULT: { value: '{colors.gray.100}' },
|
||||
hover: { value: '{colors.gray.200}' },
|
||||
active: { value: '{colors.gray.300}' },
|
||||
text: { value: '{colors.default.text}' },
|
||||
border: { value: '{colors.gray.300}' },
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: { value: '{colors.blue.700}' },
|
||||
hover: { value: '{colors.blue.800}' },
|
||||
active: { value: '{colors.blue.900}' },
|
||||
text: { value: '{colors.white}' },
|
||||
warm: { value: '{colors.blue.300}' },
|
||||
subtle: { value: '{colors.blue.100}' },
|
||||
'subtle-text': { value: '{colors.sky.700}' },
|
||||
},
|
||||
danger: {
|
||||
DEFAULT: { value: '{colors.red.600}' },
|
||||
hover: { value: '{colors.red.700}' },
|
||||
active: { value: '{colors.red.800}' },
|
||||
text: { value: '{colors.white}' },
|
||||
subtle: { value: '{colors.red.100}' },
|
||||
'subtle-text': { value: '{colors.red.700}' },
|
||||
},
|
||||
success: {
|
||||
DEFAULT: { value: '{colors.emerald.700}' },
|
||||
hover: { value: '{colors.emerald.800}' },
|
||||
active: { value: '{colors.emerald.900}' },
|
||||
text: { value: '{colors.white}' },
|
||||
subtle: { value: '{colors.emerald.100}' },
|
||||
'subtle-text': { value: '{colors.emerald.700}' },
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: { value: '{colors.amber.700}' },
|
||||
hover: { value: '{colors.amber.800}' },
|
||||
active: { value: '{colors.amber.900}' },
|
||||
text: { value: '{colors.white}' },
|
||||
subtle: { value: '{colors.amber.100}' },
|
||||
'subtle-text': { value: '{colors.amber.700}' },
|
||||
},
|
||||
},
|
||||
shadows: {
|
||||
box: { value: '{shadows.sm}' },
|
||||
},
|
||||
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' },
|
||||
boxPadding: {
|
||||
DEFAULT: { value: '{spacing.2}' },
|
||||
sm: { value: '{spacing.1}' },
|
||||
xs: { value: '{spacing.0.5}' },
|
||||
},
|
||||
boxMargin: {
|
||||
xs: { value: '{spacing.0.5}' },
|
||||
DEFAULT: { value: '{spacing.1}' },
|
||||
lg: { value: '{spacing.2}' },
|
||||
},
|
||||
paragraph: { value: '{spacing.1}' },
|
||||
heading: { value: '{spacing.1}' },
|
||||
gutter: { value: '{spacing.1}' },
|
||||
},
|
||||
}),
|
||||
textStyles: defineTextStyles({
|
||||
h1: {
|
||||
value: {
|
||||
fontSize: '1.5rem',
|
||||
lineHeight: '2rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
h2: {
|
||||
value: {
|
||||
fontSize: '1.25rem',
|
||||
lineHeight: '1.75rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
h3: {
|
||||
value: {
|
||||
fontSize: '1.125rem',
|
||||
lineHeight: '1.75rem',
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
body: {
|
||||
value: {
|
||||
fontSize: '1rem',
|
||||
lineHeight: '1.5',
|
||||
},
|
||||
},
|
||||
small: {
|
||||
value: {
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: '1.25rem',
|
||||
},
|
||||
},
|
||||
badge: {
|
||||
value: {
|
||||
fontSize: '0.75rem',
|
||||
lineHeight: '1rem',
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export default defineConfig(config)
|
||||
|
||||
Reference in New Issue
Block a user