Styles

Use Astryx component props, layout primitives, and design tokens before writing custom CSS. This keeps the copied result aligned with the host theme and reduces the styling contract an app inherits.

• Use Stack and Grid spacing props instead of margins between children.
• Use component variants, sizes, padding, and alignment props before restyling internals.
• Use public theme token exports for a value that Astryx does not expose as a prop.
• Do not copy private generated class names or target component internals with selectors.

When a style belongs to the editable starting point, define it in the template file.

tsx
import * as stylex from '@stylexjs/stylex';
import {colorVars} from '@astryxdesign/core/theme/tokens.stylex';
​
const styles = stylex.create({
  trend: {
    color: colorVars['--color-success'],
    minWidth: 0,
  },
});
​
// Later: <Text xstyle={styles.trend}>Up 12%</Text>

Use custom declarations only when no Astryx prop or token fits. Each one counts in the Custom CSS category of astryx docs cli/integrations/building-blocks/templates/write-good-templates/template-grading-rubric.

When a stylesheet must stay package-owned, import it from the template by its public package path.

tsx
import '@acme/astryx-widgets/styles/acme-dashboard.css';

Then export that path and include the file in the package (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/export-template-assets). In a TypeScript app, this import type-checks only when the app declares *.css modules.