soeren/fotospiel-app

Fork 0

Files

Codex Agent 292c8f0b26

linter / quality (push) Has been cancelled

Details

tests / ci (push) Has been cancelled

Details

tests / ui (push) Has been cancelled

Details

Refine admin PWA layout and tamagui usage

2026-01-15 22:24:10 +01:00

16 KiB

Raw Permalink Blame History

Tamagui Configuration

This document provides an overview of the Tamagui configuration for this project.

Configuration Settings

IMPORTANT: These settings affect how you write Tamagui code in this project.

Default Font: `body`

All text components will use the "body" font family by default.

Only Allow Shorthands: `true`

You MUST use shorthand properties in this project.

Full property names are not allowed. For example:

✅ <Stack w="$10" /> (correct)
❌ <Stack width="$10" /> (will error)

See the Shorthand Properties section below for all available shorthands.

Theme Class Name on Root: `true`

Theme classes are applied to the root HTML element.

Max Dark/Light Nesting: `2`

Maximum nesting depth for light/dark theme switching: 2 levels.

Web Container Type: `inline-size`

Enables web-specific container query optimizations.

Shorthand Properties

These shorthand properties are available for styling:

ac → alignContent
ai → alignItems
als → alignSelf
b → bottom
bbc → borderBottomColor
bblr → borderBottomLeftRadius
bbrr → borderBottomRightRadius
bbs → borderBottomStyle
bbw → borderBottomWidth
bc → backgroundColor
bg → backgroundColor
blc → borderLeftColor
bls → borderLeftStyle
blw → borderLeftWidth
boc → borderColor
br → borderRadius
brc → borderRightColor
brs → borderRightStyle
brw → borderRightWidth
bs → borderStyle
btc → borderTopColor
btlr → borderTopLeftRadius
btrr → borderTopRightRadius
bts → borderTopStyle
btw → borderTopWidth
bw → borderWidth
bxs → boxSizing
bxsh → boxShadow
col → color
cur → cursor
dsp → display
f → flex
fb → flexBasis
fd → flexDirection
ff → fontFamily
fg → flexGrow
fos → fontSize
fost → fontStyle
fow → fontWeight
fs → flexShrink
fw → flexWrap
h → height
jc → justifyContent
l → left
lh → lineHeight
ls → letterSpacing
m → margin
mah → maxHeight
maw → maxWidth
mb → marginBottom
mih → minHeight
miw → minWidth
ml → marginLeft
mr → marginRight
mt → marginTop
mx → marginHorizontal
my → marginVertical
o → opacity
ov → overflow
ox → overflowX
oy → overflowY
p → padding
pb → paddingBottom
pe → pointerEvents
pl → paddingLeft
pos → position
pr → paddingRight
pt → paddingTop
px → paddingHorizontal
py → paddingVertical
r → right
shac → shadowColor
shar → shadowRadius
shof → shadowOffset
shop → shadowOpacity
t → top
ta → textAlign
tt → textTransform
ussel → userSelect
w → width
ww → wordWrap
zi → zIndex

Themes

Themes are organized hierarchically and can be combined:

Level 1 (Base):

dark
light

Level 2 (Color Schemes):

blue
green
orange
pink
purple
red
yellow

Level 3 (Variants):

active
alt1
alt2

Component Themes:

Button
Card
Checkbox
DialogOverlay
DrawerFrame
Input
ListItem
ModalOverlay
Progress
ProgressIndicator
RadioGroupItem
SheetOverlay
SliderThumb
SliderTrack
SliderTrackActive
Switch
SwitchThumb
TextArea
Tooltip
TooltipArrow
TooltipContent

Theme Usage

Themes are combined hierarchically. For example, light_blue_alt1_Button combines:

Base: light
Color: blue
Variant: alt1
Component: Button

Basic usage:

// Apply a theme to components
export default () => (
  <Theme name="dark">
    <Button>I'm a dark button</Button>
  </Theme>
)

// Themes nest and combine automatically
export default () => (
  <Theme name="dark">
    <Theme name="blue">
      <Button>Uses dark_blue theme</Button>
    </Theme>
  </Theme>
)

Accessing theme values:

Components can access theme values using $ token syntax:

<Stack bg="$background" col="$color" />

Special props:

inverse: Automatically swaps light ↔ dark themes
reset: Reverts to grandparent theme

Tokens

Tokens are design system values that can be referenced using the $ prefix.

Space Tokens

-20: -186
-19: -172
-18: -158
-17: -144
-16: -144
-15: -130
-14: -116
-13: -102
-12: -88
-11: -74
-10: -60
-9: -53
-8: -46
-7: -39
-6: -32
-5: -24
-4.5: -21
-4: -18
-3.5: -16
-3: -13
-2.5: -10
-2: -7
-1.5: -4
-1: -2
-0.75: -1.5
-0.5: -1
-0.25: -0.5
-true: -18
0: 0
0.25: 0.5
0.5: 1
0.75: 1.5
1: 2
1.5: 4
2: 7
2.5: 10
3: 13
3.5: 16
4: 18
4.5: 21
5: 24
6: 32
7: 39
8: 46
9: 53
10: 60
11: 74
12: 88
13: 102
14: 116
15: 130
16: 144
17: 144
18: 158
19: 172
20: 186
true: 18

Size Tokens

0: 0
0.25: 2
0.5: 4
0.75: 8
1: 20
1.5: 24
2: 28
2.5: 32
3: 36
3.5: 40
4: 44
4.5: 48
5: 52
6: 64
7: 74
8: 84
9: 94
10: 104
11: 124
12: 144
13: 164
14: 184
15: 204
16: 224
17: 224
18: 244
19: 264
20: 284
card: 20
true: 44

Radius Tokens

0: 0
1: 3
2: 5
3: 7
4: 9
5: 10
6: 16
7: 19
8: 22
9: 26
10: 34
11: 42
12: 50
card: 20
pill: 999
tile: 14
true: 9

Z-Index Tokens

0: 0
1: 100
2: 200
3: 300
4: 400
5: 500

Color Tokens

accent: #3D5AFE
accentSoft: #E8ECFF
blue10Dark: hsl(209, 100%, 60.6%)
blue10Light: hsl(208, 100%, 47.3%)
blue11Dark: hsl(210, 100%, 66.1%)
blue11Light: hsl(211, 100%, 43.2%)
blue12Dark: hsl(206, 98.0%, 95.8%)
blue12Light: hsl(211, 100%, 15.0%)
blue1Dark: hsl(212, 35.0%, 9.2%)
blue1Light: hsl(206, 100%, 99.2%)
blue2Dark: hsl(216, 50.0%, 11.8%)
blue2Light: hsl(210, 100%, 98.0%)
blue3Dark: hsl(214, 59.4%, 15.3%)
blue3Light: hsl(209, 100%, 96.5%)
blue4Dark: hsl(214, 65.8%, 17.9%)
blue4Light: hsl(210, 98.8%, 94.0%)
blue5Dark: hsl(213, 71.2%, 20.2%)
blue5Light: hsl(209, 95.0%, 90.1%)
blue6Dark: hsl(212, 77.4%, 23.1%)
blue6Light: hsl(209, 81.2%, 84.5%)
blue7Dark: hsl(211, 85.1%, 27.4%)
blue7Light: hsl(208, 77.5%, 76.9%)
blue8Dark: hsl(211, 89.7%, 34.1%)
blue8Light: hsl(206, 81.9%, 65.3%)
blue9Dark: hsl(206, 100%, 50.0%)
blue9Light: hsl(206, 100%, 50.0%)
border: #F3D6C9
danger: #EF4444
gray10Dark: hsl(0, 0%, 49.4%)
gray10Light: hsl(0, 0%, 52.3%)
gray11Dark: hsl(0, 0%, 62.8%)
gray11Light: hsl(0, 0%, 43.5%)
gray12Dark: hsl(0, 0%, 93.0%)
gray12Light: hsl(0, 0%, 9.0%)
gray1Dark: hsl(0, 0%, 8.5%)
gray1Light: hsl(0, 0%, 99.0%)
gray2Dark: hsl(0, 0%, 11.0%)
gray2Light: hsl(0, 0%, 97.3%)
gray3Dark: hsl(0, 0%, 13.6%)
gray3Light: hsl(0, 0%, 95.1%)
gray4Dark: hsl(0, 0%, 15.8%)
gray4Light: hsl(0, 0%, 93.0%)
gray5Dark: hsl(0, 0%, 17.9%)
gray5Light: hsl(0, 0%, 90.9%)
gray6Dark: hsl(0, 0%, 20.5%)
gray6Light: hsl(0, 0%, 88.7%)
gray7Dark: hsl(0, 0%, 24.3%)
gray7Light: hsl(0, 0%, 85.8%)
gray8Dark: hsl(0, 0%, 31.2%)
gray8Light: hsl(0, 0%, 78.0%)
gray9Dark: hsl(0, 0%, 43.9%)
gray9Light: hsl(0, 0%, 56.1%)
green10Dark: hsl(151, 49.3%, 46.5%)
green10Light: hsl(152, 57.5%, 37.6%)
green11Dark: hsl(151, 50.0%, 53.2%)
green11Light: hsl(153, 67.0%, 28.5%)
green12Dark: hsl(137, 72.0%, 94.0%)
green12Light: hsl(155, 40.0%, 14.0%)
green1Dark: hsl(146, 30.0%, 7.4%)
green1Light: hsl(136, 50.0%, 98.9%)
green2Dark: hsl(155, 44.2%, 8.4%)
green2Light: hsl(138, 62.5%, 96.9%)
green3Dark: hsl(155, 46.7%, 10.9%)
green3Light: hsl(139, 55.2%, 94.5%)
green4Dark: hsl(154, 48.4%, 12.9%)
green4Light: hsl(140, 48.7%, 91.0%)
green5Dark: hsl(154, 49.7%, 14.9%)
green5Light: hsl(141, 43.7%, 86.0%)
green6Dark: hsl(154, 50.9%, 17.6%)
green6Light: hsl(143, 40.3%, 79.0%)
green7Dark: hsl(153, 51.8%, 21.8%)
green7Light: hsl(146, 38.5%, 69.0%)
green8Dark: hsl(151, 51.7%, 28.4%)
green8Light: hsl(151, 40.2%, 54.1%)
green9Dark: hsl(151, 55.0%, 41.5%)
green9Light: hsl(151, 55.0%, 41.5%)
muted: #FFF6F0
orange10Dark: hsl(24, 100%, 58.5%)
orange10Light: hsl(24, 100%, 46.5%)
orange11Dark: hsl(24, 100%, 62.2%)
orange11Light: hsl(24, 100%, 37.0%)
orange12Dark: hsl(24, 97.0%, 93.2%)
orange12Light: hsl(15, 60.0%, 17.0%)
orange1Dark: hsl(30, 70.0%, 7.2%)
orange1Light: hsl(24, 70.0%, 99.0%)
orange2Dark: hsl(28, 100%, 8.4%)
orange2Light: hsl(24, 83.3%, 97.6%)
orange3Dark: hsl(26, 91.1%, 11.6%)
orange3Light: hsl(24, 100%, 95.3%)
orange4Dark: hsl(25, 88.3%, 14.1%)
orange4Light: hsl(25, 100%, 92.2%)
orange5Dark: hsl(24, 87.6%, 16.6%)
orange5Light: hsl(25, 100%, 88.2%)
orange6Dark: hsl(24, 88.6%, 19.8%)
orange6Light: hsl(25, 100%, 82.8%)
orange7Dark: hsl(24, 92.4%, 24.0%)
orange7Light: hsl(24, 100%, 75.3%)
orange8Dark: hsl(25, 100%, 29.0%)
orange8Light: hsl(24, 94.5%, 64.3%)
orange9Dark: hsl(24, 94.0%, 50.0%)
orange9Light: hsl(24, 94.0%, 50.0%)
pink10Dark: hsl(323, 72.8%, 59.2%)
pink10Light: hsl(322, 63.9%, 50.7%)
pink11Dark: hsl(325, 90.0%, 66.4%)
pink11Light: hsl(322, 75.0%, 46.0%)
pink12Dark: hsl(322, 90.0%, 95.8%)
pink12Light: hsl(320, 70.0%, 13.5%)
pink1Dark: hsl(318, 25.0%, 9.6%)
pink1Light: hsl(322, 100%, 99.4%)
pink2Dark: hsl(319, 32.2%, 11.6%)
pink2Light: hsl(323, 100%, 98.4%)
pink3Dark: hsl(319, 41.0%, 16.0%)
pink3Light: hsl(323, 86.3%, 96.5%)
pink4Dark: hsl(320, 45.4%, 18.7%)
pink4Light: hsl(323, 78.7%, 94.2%)
pink5Dark: hsl(320, 49.0%, 21.1%)
pink5Light: hsl(323, 72.2%, 91.1%)
pink6Dark: hsl(321, 53.6%, 24.4%)
pink6Light: hsl(323, 66.3%, 86.6%)
pink7Dark: hsl(321, 61.1%, 29.7%)
pink7Light: hsl(323, 62.0%, 80.1%)
pink8Dark: hsl(322, 74.9%, 37.5%)
pink8Light: hsl(323, 60.3%, 72.4%)
pink9Dark: hsl(322, 65.0%, 54.5%)
pink9Light: hsl(322, 65.0%, 54.5%)
primary: #FF5C5C
purple10Dark: hsl(273, 57.3%, 59.1%)
purple10Light: hsl(272, 46.8%, 50.3%)
purple11Dark: hsl(275, 80.0%, 71.0%)
purple11Light: hsl(272, 50.0%, 45.8%)
purple12Dark: hsl(279, 75.0%, 95.7%)
purple12Light: hsl(272, 66.0%, 16.0%)
purple1Dark: hsl(284, 20.0%, 9.6%)
purple1Light: hsl(280, 65.0%, 99.4%)
purple2Dark: hsl(283, 30.0%, 11.8%)
purple2Light: hsl(276, 100%, 99.0%)
purple3Dark: hsl(281, 37.5%, 16.5%)
purple3Light: hsl(276, 83.1%, 97.0%)
purple4Dark: hsl(280, 41.2%, 20.0%)
purple4Light: hsl(275, 76.4%, 94.7%)
purple5Dark: hsl(279, 43.8%, 23.3%)
purple5Light: hsl(275, 70.8%, 91.8%)
purple6Dark: hsl(277, 46.4%, 27.5%)
purple6Light: hsl(274, 65.4%, 87.8%)
purple7Dark: hsl(275, 49.3%, 34.6%)
purple7Light: hsl(273, 61.0%, 81.7%)
purple8Dark: hsl(272, 52.1%, 45.9%)
purple8Light: hsl(272, 60.0%, 73.5%)
purple9Dark: hsl(272, 51.0%, 54.0%)
purple9Light: hsl(272, 51.0%, 54.0%)
red10Dark: hsl(358, 85.3%, 64.0%)
red10Light: hsl(358, 69.4%, 55.2%)
red11Dark: hsl(358, 100%, 69.5%)
red11Light: hsl(358, 65.0%, 48.7%)
red12Dark: hsl(351, 89.0%, 96.0%)
red12Light: hsl(354, 50.0%, 14.6%)
red1Dark: hsl(353, 23.0%, 9.8%)
red1Light: hsl(359, 100%, 99.4%)
red2Dark: hsl(357, 34.4%, 12.0%)
red2Light: hsl(359, 100%, 98.6%)
red3Dark: hsl(356, 43.4%, 16.4%)
red3Light: hsl(360, 100%, 96.8%)
red4Dark: hsl(356, 47.6%, 19.2%)
red4Light: hsl(360, 97.9%, 94.8%)
red5Dark: hsl(356, 51.1%, 21.9%)
red5Light: hsl(360, 90.2%, 91.9%)
red6Dark: hsl(356, 55.2%, 25.9%)
red6Light: hsl(360, 81.7%, 87.8%)
red7Dark: hsl(357, 60.2%, 31.8%)
red7Light: hsl(359, 74.2%, 81.7%)
red8Dark: hsl(358, 65.0%, 40.4%)
red8Light: hsl(359, 69.5%, 74.3%)
red9Dark: hsl(358, 75.0%, 59.0%)
red9Light: hsl(358, 75.0%, 59.0%)
success: #22C55E
surface: #ffffff
text: #0B132B
warning: #FBBF24
yellow10Dark: hsl(54, 100%, 68.0%)
yellow10Light: hsl(50, 100%, 48.5%)
yellow11Dark: hsl(48, 100%, 47.0%)
yellow11Light: hsl(42, 100%, 29.0%)
yellow12Dark: hsl(53, 100%, 91.0%)
yellow12Light: hsl(40, 55.0%, 13.5%)
yellow1Dark: hsl(45, 100%, 5.5%)
yellow1Light: hsl(60, 54.0%, 98.5%)
yellow2Dark: hsl(46, 100%, 6.7%)
yellow2Light: hsl(52, 100%, 95.5%)
yellow3Dark: hsl(45, 100%, 8.7%)
yellow3Light: hsl(55, 100%, 90.9%)
yellow4Dark: hsl(45, 100%, 10.4%)
yellow4Light: hsl(54, 100%, 86.6%)
yellow5Dark: hsl(47, 100%, 12.1%)
yellow5Light: hsl(52, 97.9%, 82.0%)
yellow6Dark: hsl(49, 100%, 14.3%)
yellow6Light: hsl(50, 89.4%, 76.1%)
yellow7Dark: hsl(49, 90.3%, 18.4%)
yellow7Light: hsl(47, 80.4%, 68.0%)
yellow8Dark: hsl(50, 100%, 22.0%)
yellow8Light: hsl(48, 100%, 46.1%)
yellow9Dark: hsl(53, 92.0%, 50.0%)
yellow9Light: hsl(53, 92.0%, 50.0%)

Token Usage

Tokens can be used in component props with the $ prefix:

// Space tokens - for margin, padding, gap
<Stack p="$4" gap="$2" m="$3" />

// Size tokens - for width, height, dimensions
<Stack w="$10" h="$6" />

// Color tokens - for colors and backgrounds
<Stack bg="$blue5" col="$gray12" />

// Radius tokens - for border-radius
<Stack br="$4" />

Media Queries

Available responsive breakpoints:

2xl: {"minWidth":1536}
2xs: {"minWidth":340}
lg: {"minWidth":1024}
max2Xl: {"maxWidth":1536}
max2xs: {"maxWidth":340}
maxLg: {"maxWidth":1024}
maxMd: {"maxWidth":768}
maxSm: {"maxWidth":640}
maxXl: {"maxWidth":1280}
maxXs: {"maxWidth":460}
md: {"maxWidth":1024}
sm: {"maxWidth":840}
xl: {"minWidth":1280}
xs: {"maxWidth":660}

Media Query Usage

Media queries can be used as style props or with the useMedia hook:

// As style props (prefix with $)
<Stack w="100%" $2xl={{ w: "50%" }} />

// Using the useMedia hook
const media = useMedia()
if (media.2xl) {
  // Render for this breakpoint
}

Fonts

Available font families:

body
display
heading

Animations

Available animation presets:

fast
medium
slow

Components

The following components are available:

AlertDialogAction
AlertDialogCancel
AlertDialogDescription
AlertDialogOverlay
AlertDialogTitle
AlertDialogTrigger
Anchor
Article
Aside
AvatarFallback
- AvatarFallback.Frame
AvatarFrame
Button
- Button.Frame
- Button.Text
Card
- Card.Background
- Card.Footer
- Card.Frame
- Card.Header
Checkbox
- Checkbox.Frame
- Checkbox.IndicatorFrame
Circle
DialogClose
DialogContent
DialogDescription
DialogOverlay
- DialogOverlay.Frame
DialogPortalFrame
DialogTitle
DialogTrigger
EnsureFlexed
Fieldset
Footer
Form
- Form.Frame
- Form.Trigger
Frame
Group
- Group.Frame
H1
H2
H3
H4
H5
H6
Handle
Header
Heading
Image
Input
- Input.Frame
Label
- Label.Frame
ListItem
- ListItem.Frame
- ListItem.Subtitle
- ListItem.Text
- ListItem.Title
Main
Nav
Overlay
Paragraph
PopoverArrow
PopoverContent
PopperAnchor
PopperArrowFrame
PopperContentFrame
Progress
- Progress.Frame
- Progress.Indicator
- Progress.IndicatorFrame
RadioGroup
- RadioGroup.Frame
- RadioGroup.IndicatorFrame
- RadioGroup.ItemFrame
ScrollView
Section
SelectGroupFrame
SelectIcon
SelectSeparator
Separator
SheetHandleFrame
SheetOverlayFrame
SizableStack
SizableText
SliderFrame
SliderThumb
- SliderThumb.Frame
SliderTrackActiveFrame
SliderTrackFrame
Spacer
Spacer
Spinner
Square
Stack
Stack
Switch
- Switch.Frame
- Switch.Thumb
Tabs
Text
- Text.Area
- Text.AreaFrame
ThemeableStack
Thumb
View
View
VisuallyHidden
XGroup
XStack
YGroup
YStack
ZStack

16 KiB Raw Permalink Blame History

Tamagui Configuration

Configuration Settings

Default Font: body

Only Allow Shorthands: true

Theme Class Name on Root: true

Max Dark/Light Nesting: 2

Web Container Type: inline-size

Shorthand Properties

Themes

Theme Usage

Tokens

Space Tokens

Size Tokens

Radius Tokens

Z-Index Tokens

Color Tokens

Token Usage

Media Queries

Media Query Usage

Fonts

Animations

Components

16 KiB

Raw Permalink Blame History

Default Font: `body`

Only Allow Shorthands: `true`

Theme Class Name on Root: `true`

Max Dark/Light Nesting: `2`

Web Container Type: `inline-size`