jared
c395f7d16e
- Bug #10: use `100dvh` on <html> so layout shrinks when mobile virtual keyboard appears (prevents composer from being pushed off-screen) - Bug #7: add `minWidth/minHeight: 44px` to all 8 composer toolbar IconButtons on mobile via mobileOrTablet() check (WCAG 2.1 AA touch target requirement) - Bug #8: add `@media (max-width: 750px) { width: 100% }` to PageNav recipe variants so the nav panel fills full width on mobile instead of overflowing with its fixed desktop width - Bug #9: introduce `useModalStyle(maxWidth)` hook — returns fullscreen styles on mobile (no border-radius, no max-width cap, height 100%) and desktop box styles otherwise; applied to LeaveRoomPrompt, LeaveSpacePrompt, ReportRoomModal, ReportUserModal - Bug #11: mark as FALSE POSITIVE in LOTUS_BUGS.md — `useState(() => atom(...))` is the correct Jotai pattern for stable local atom references - Scheduled Messages persistence: mark as FIXED — already uses atomWithStorage + createJSONStorage with error-safe JSON parsing - UrlPreviewCard TDS colors: mark as BRAND EXCEPTION — SVG logo fills and site badge backgrounds are official third-party brand colors; cannot convert without inventing new CSS variables (violates TDS rule 3) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
128 lines
2.5 KiB
TypeScript
128 lines
2.5 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const PageNav = recipe({
|
|
variants: {
|
|
size: {
|
|
'400': {
|
|
width: toRem(256),
|
|
'@media': {
|
|
'(max-width: 750px)': { width: '100%' },
|
|
},
|
|
},
|
|
'300': {
|
|
width: toRem(222),
|
|
'@media': {
|
|
'(max-width: 750px)': { width: '100%' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: '400',
|
|
},
|
|
});
|
|
export type PageNavVariants = RecipeVariants<typeof PageNav>;
|
|
|
|
export const PageNavHeader = recipe({
|
|
base: {
|
|
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
|
flexShrink: 0,
|
|
selectors: {
|
|
'button&': {
|
|
cursor: 'pointer',
|
|
},
|
|
'button&[aria-pressed=true]': {
|
|
backgroundColor: color.Background.ContainerActive,
|
|
},
|
|
'button&:hover, button&:focus-visible': {
|
|
backgroundColor: color.Background.ContainerHover,
|
|
},
|
|
'button&:active': {
|
|
backgroundColor: color.Background.ContainerActive,
|
|
},
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
outlined: {
|
|
true: {
|
|
borderBottomWidth: 1,
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
outlined: true,
|
|
},
|
|
});
|
|
export type PageNavHeaderVariants = RecipeVariants<typeof PageNavHeader>;
|
|
|
|
export const PageNavContent = style({
|
|
minHeight: '100%',
|
|
padding: config.space.S200,
|
|
paddingRight: 0,
|
|
paddingBottom: config.space.S700,
|
|
});
|
|
|
|
export const PageHeader = recipe({
|
|
base: {
|
|
paddingLeft: config.space.S400,
|
|
paddingRight: config.space.S200,
|
|
},
|
|
variants: {
|
|
balance: {
|
|
true: {
|
|
paddingLeft: config.space.S200,
|
|
},
|
|
},
|
|
outlined: {
|
|
true: {
|
|
borderBottomWidth: config.borderWidth.B300,
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
outlined: true,
|
|
},
|
|
});
|
|
export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
|
|
|
|
export const PageContent = style([
|
|
DefaultReset,
|
|
{
|
|
paddingTop: config.space.S400,
|
|
paddingLeft: config.space.S400,
|
|
paddingRight: 0,
|
|
paddingBottom: toRem(100),
|
|
},
|
|
]);
|
|
|
|
export const PageHeroEmpty = style([
|
|
DefaultReset,
|
|
{
|
|
padding: config.space.S400,
|
|
borderRadius: config.radii.R400,
|
|
minHeight: toRem(450),
|
|
},
|
|
]);
|
|
|
|
export const PageHeroSection = style([
|
|
DefaultReset,
|
|
{
|
|
padding: '40px 0',
|
|
maxWidth: toRem(466),
|
|
width: '100%',
|
|
margin: 'auto',
|
|
},
|
|
]);
|
|
|
|
export const PageContentCenter = style([
|
|
DefaultReset,
|
|
{
|
|
maxWidth: toRem(964),
|
|
width: '100%',
|
|
margin: 'auto',
|
|
},
|
|
]);
|