import { ... } from '@ag.ds-next/react/ag-branding';
Agriculture theme
To use the agriculture theme in your website or application, pass the theme
object from this package to our Core
component.
import { Core } from '@ag.ds-next/react/core';import { theme } from '@ag.ds-next/react/ag-branding';
export default function App({ Component }) { return ( <Core theme={theme}> <Component /> </Core> );}
Agriculture logo
<Box maxWidth={600} color="text"> <Logo /> </Box>
Colour
AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.
This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).
Light palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}> <Stack color="text" gap={1.5} maxWidth={600}> <H4>Agriculture logo: on light background</H4> <Logo /> </Stack> </Box>
Dark palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark"> <Stack color="text" gap={1.5} maxWidth={600}> <H4>Agriculture logo: on dark background</H4> <Logo /> </Stack> </Box>