@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
45 lines (44 loc) • 3.41 kB
TypeScript
import type { CSSProperties } from 'react';
import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
export type BasePrimitiveProps = {
/**
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
*/
testId?: string;
/**
* `data-testid` is strictly controlled through the `testId` prop.
* This lets consumers know that this data attribute will not be applied.
*/
'data-testid'?: never;
/**
* Apply a subset of permitted styles powered by Atlassian Design System design tokens.
*/
xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
/**
* Accessible role.
*/
role?: string;
};
export type StyleProp = {
style?: CSSProperties;
};
export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
export type AlignContent = 'center' | 'start' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | 'end';
export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
export type AlignItems = 'center' | 'start' | 'stretch' | 'end' | 'baseline';
export type AutoFlow = 'column' | 'row' | 'dense' | 'row dense' | 'column dense';
export type Direction = 'column' | 'row';
export type Grow = 'hug' | 'fill';
export type JustifyContent = 'center' | 'start' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch' | 'end';
export type JustifyItems = 'center' | 'start' | 'stretch' | 'end';
export type Spread = 'space-between';
export type Wrap = 'wrap' | 'nowrap';
export type BleedSpaceToken = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200';
export type PositiveSpaceToken = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000';
export type PaddingToken = PositiveSpaceToken;
export type GapToken = PositiveSpaceToken;
export type SurfaceColorToken = 'utility.elevation.surface.current' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised' | 'elevation.surface.sunken';
export type TextAlign = 'center' | 'end' | 'start';
export type TextColor = 'color.text' | 'color.text.accent.lime' | 'color.text.accent.lime.bolder' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.link.visited' | 'color.link.visited.pressed';
export type FontSize = 'small' | 'medium' | 'UNSAFE_small' | 'large';
export type FontWeight = 'bold' | 'medium' | 'regular' | 'semibold';