Agriculture Design System
Beta
Design System for the Export Service

Core

Core includes a range of styles, variables and code that form the foundations of how the Design System works, including colour, typography and spacing.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/core';

Usage

Core components can be imported via the core entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/core';

Props

Core Props
PropTypeDescription
applyReset?booleanDefault: true
If true, a CSS reset will be applied.
children?ReactNode
linkComponent?ForwardRefExoticComponent<{ 'aria-label'?: string; className?: string; download?: any; href?: string | undefined; id?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; rel?: string | undefined; role?: AriaRole | undefined; target?: HTMLAttributeAnchorTarget | unde...
The global link component which can be configured for different routing libraries. Defaults to standard `a` tag.
theme?Partial<Record<"lightForegroundText" | "lightForegroundAction" | "lightForegroundFocus" | "lightForegroundMuted" | "lightBackgroundBody" | "lightBackgroundShade" | "lightBackgroundBodyAlt" | ... 38 more ... | "darkSystemWarningMuted", string>>
Enables overwriting of the default theme.
CoreProvider Props
PropTypeDescription
children?ReactNode
linkComponent?ForwardRefExoticComponent<{ 'aria-label'?: string; className?: string; download?: any; href?: string | undefined; id?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; rel?: string | undefined; role?: AriaRole | undefined; target?: HTMLAttributeAnchorTarget | unde...
The global link component which can be configured for different routing libraries. Defaults to standard `a` tag.

Source

You can view the full source code for this package on Github.