SGUI / Development
ThemeScope
Nested visual scopes preserve the selected demo identity while changing density.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Nested visual scopes preserve the selected demo identity while changing density.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Density sets spacing; interaction mode sets target and navigation icon sizing. Auto follows available pointer capabilities.
'use client';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Button, Menu, TextField } from '@structured-growth/sg-ui/experimental';
export default function ThemeScopeSizingExample() {
return (
<>
<ThemeScope density="comfortable" interactionMode="auto" dir="ltr"><Stack gap={3}><TextField label="Workspace name" defaultValue="Design workspace"/><Menu label="Workspace actions" trigger={<Button>{"A scoped action"}</Button>} items={[{id:'settings',label:'Workspace settings'},{id:'members',label:'Manage members'}]}/></Stack></ThemeScope>
</>
);
}
The same props in independent density scopes.
Locally scoped content
Locally scoped content
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ThemeScopePlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><ThemeScope dir={"ltr"}><Stack gap={3}><Typography>{"Locally scoped content"}</Typography><Button>Scoped action</Button></Stack></ThemeScope></ThemeScope>
<ThemeScope density="comfortable"><ThemeScope dir={"ltr"}><Stack gap={3}><Typography>{"Locally scoped content"}</Typography><Button>Scoped action</Button></Stack></ThemeScope></ThemeScope>
</Stack>
</>
);
}
A shared theme sets 13px control text, 10px horizontal padding, 8px corners, a 48px target floor and 24px navigation icons, including the menu portal.
'use client';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, Menu, Navigation, NavigationItem, Stack, TextField } from '@structured-growth/sg-ui/experimental';
import { DashboardIcon } from '@structured-growth/sg-ui/icons';
export default function ThemeSizedTouchTargetsExample() {
return (
<>
<ThemeScope density="compact" interactionMode="touch" style={{"--sgui-touch-target-size":"3rem","--sgui-touch-navigation-icon-size":"1.5rem","--sgui-compact-control-text-size":"0.8125rem","--sgui-compact-control-padding":"0.625rem","--sgui-control-radius":"0.5rem","--sgui-field-radius":"0.5rem"}}>
<Stack gap={3}>
<Navigation label="Workspace navigation"><NavigationItem href="#workspace"><DashboardIcon size="var(--sgui-side-navigation-icon-size)"/>Workspace</NavigationItem></Navigation>
<TextField label="Workspace name" defaultValue="Design workspace"/>
<Menu label="Workspace actions" trigger={<Button>Open workspace actions</Button>} items={[{id:'settings',label:'Workspace settings'},{id:'members',label:'Manage members'}]}/>
</Stack>
</ThemeScope>
</>
);
}