@atlaskit/primitives 0.9.2 → 0.9.4

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -0,0 +1,474 @@
+import { SerializedStyles } from '@emotion/react';
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::2c35cc3f884146ac8ccdf053bf413481>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["dimensions"]
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
+ */
+export declare const dimensionMap: {
+    readonly '100%': "100%";
+    readonly 'size.100': "1rem";
+    readonly 'size.200': "1.5rem";
+    readonly 'size.300': "2rem";
+    readonly 'size.400': "2.5rem";
+    readonly 'size.500': "3rem";
+    readonly 'size.600': "6rem";
+    readonly 'size.1000': "12rem";
+};
+type Dimension = keyof typeof dimensionMap;
+export type Width = Dimension;
+export type Height = Dimension;
+export type MinWidth = Dimension;
+export type MaxWidth = Dimension;
+export type MinHeight = Dimension;
+export type MaxHeight = Dimension;
+export type Top = Dimension;
+export type Left = Dimension;
+export type Bottom = Dimension;
+export type Right = Dimension;
+export type BlockSize = Dimension;
+export type InlineSize = Dimension;
+export type MaxBlockSize = Dimension;
+export type MaxInlineSize = Dimension;
+export type MinBlockSize = Dimension;
+export type MinInlineSize = Dimension;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::c32ec2103b151d3533775390e92f0f03>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
+ */
+export declare const spaceMap: {
+    'space.0': "var(--ds-space-0)";
+    'space.025': "var(--ds-space-025)";
+    'space.050': "var(--ds-space-050)";
+    'space.075': "var(--ds-space-075)";
+    'space.100': "var(--ds-space-100)";
+    'space.150': "var(--ds-space-150)";
+    'space.200': "var(--ds-space-200)";
+    'space.250': "var(--ds-space-250)";
+    'space.300': "var(--ds-space-300)";
+    'space.400': "var(--ds-space-400)";
+    'space.500': "var(--ds-space-500)";
+    'space.600': "var(--ds-space-600)";
+    'space.800': "var(--ds-space-800)";
+    'space.1000': "var(--ds-space-1000)";
+};
+export type Space = keyof typeof spaceMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::aa1cfa3cd24f141a85ac1e0b70dbd8a8>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow", "text", "fill"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+export declare const borderColorMap: {
+    readonly 'color.border': "var(--ds-border)";
+    readonly 'accent.red': "var(--ds-border-accent-red)";
+    readonly 'accent.orange': "var(--ds-border-accent-orange)";
+    readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
+    readonly 'accent.green': "var(--ds-border-accent-green)";
+    readonly 'accent.teal': "var(--ds-border-accent-teal)";
+    readonly 'accent.blue': "var(--ds-border-accent-blue)";
+    readonly 'accent.purple': "var(--ds-border-accent-purple)";
+    readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
+    readonly 'accent.gray': "var(--ds-border-accent-gray)";
+    readonly disabled: "var(--ds-border-disabled)";
+    readonly focused: "var(--ds-border-focused)";
+    readonly input: "var(--ds-border-input)";
+    readonly inverse: "var(--ds-border-inverse)";
+    readonly selected: "var(--ds-border-selected)";
+    readonly brand: "var(--ds-border-brand)";
+    readonly danger: "var(--ds-border-danger)";
+    readonly warning: "var(--ds-border-warning)";
+    readonly success: "var(--ds-border-success)";
+    readonly discovery: "var(--ds-border-discovery)";
+    readonly information: "var(--ds-border-information)";
+    readonly bold: "var(--ds-border-bold)";
+};
+export type BorderColor = keyof typeof borderColorMap;
+export declare const backgroundColorMap: {
+    readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
+    readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
+    readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
+    readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
+    readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
+    readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
+    readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
+    readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
+    readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
+    readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
+    readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
+    readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
+    readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
+    readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
+    readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
+    readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
+    readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
+    readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
+    readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
+    readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
+    readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
+    readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
+    readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
+    readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
+    readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
+    readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
+    readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
+    readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
+    readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
+    readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
+    readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
+    readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
+    readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
+    readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
+    readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
+    readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
+    readonly disabled: "var(--ds-background-disabled)";
+    readonly input: "var(--ds-background-input)";
+    readonly 'input.hovered': "var(--ds-background-input-hovered)";
+    readonly 'input.pressed': "var(--ds-background-input-pressed)";
+    readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
+    readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
+    readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
+    readonly neutral: "var(--ds-background-neutral)";
+    readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
+    readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
+    readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
+    readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
+    readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
+    readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
+    readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
+    readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
+    readonly selected: "var(--ds-background-selected)";
+    readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
+    readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
+    readonly 'selected.bold': "var(--ds-background-selected-bold)";
+    readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
+    readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
+    readonly 'brand.bold': "var(--ds-background-brand-bold)";
+    readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
+    readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
+    readonly danger: "var(--ds-background-danger)";
+    readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
+    readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
+    readonly 'danger.bold': "var(--ds-background-danger-bold)";
+    readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
+    readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
+    readonly warning: "var(--ds-background-warning)";
+    readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
+    readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
+    readonly 'warning.bold': "var(--ds-background-warning-bold)";
+    readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
+    readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
+    readonly success: "var(--ds-background-success)";
+    readonly 'success.hovered': "var(--ds-background-success-hovered)";
+    readonly 'success.pressed': "var(--ds-background-success-pressed)";
+    readonly 'success.bold': "var(--ds-background-success-bold)";
+    readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
+    readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
+    readonly discovery: "var(--ds-background-discovery)";
+    readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
+    readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
+    readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
+    readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
+    readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
+    readonly information: "var(--ds-background-information)";
+    readonly 'information.hovered': "var(--ds-background-information-hovered)";
+    readonly 'information.pressed': "var(--ds-background-information-pressed)";
+    readonly 'information.bold': "var(--ds-background-information-bold)";
+    readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
+    readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
+    readonly 'color.blanket': "var(--ds-blanket)";
+    readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
+    readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
+    readonly 'elevation.surface': "var(--ds-surface)";
+    readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
+    readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
+    readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
+    readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
+    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
+    readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
+    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+};
+export type BackgroundColor = keyof typeof backgroundColorMap;
+export declare const shadowMap: {
+    readonly overflow: "var(--ds-shadow-overflow)";
+    readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
+    readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
+    readonly overlay: "var(--ds-shadow-overlay)";
+    readonly raised: "var(--ds-shadow-raised)";
+};
+export type Shadow = keyof typeof shadowMap;
+export declare const textColorMap: {
+    readonly 'color.text': "var(--ds-text)";
+    readonly 'accent.red': "var(--ds-text-accent-red)";
+    readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
+    readonly 'accent.orange': "var(--ds-text-accent-orange)";
+    readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
+    readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
+    readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
+    readonly 'accent.green': "var(--ds-text-accent-green)";
+    readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
+    readonly 'accent.teal': "var(--ds-text-accent-teal)";
+    readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
+    readonly 'accent.blue': "var(--ds-text-accent-blue)";
+    readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
+    readonly 'accent.purple': "var(--ds-text-accent-purple)";
+    readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
+    readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
+    readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
+    readonly 'accent.gray': "var(--ds-text-accent-gray)";
+    readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
+    readonly disabled: "var(--ds-text-disabled)";
+    readonly inverse: "var(--ds-text-inverse)";
+    readonly selected: "var(--ds-text-selected)";
+    readonly brand: "var(--ds-text-brand)";
+    readonly danger: "var(--ds-text-danger)";
+    readonly warning: "var(--ds-text-warning)";
+    readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
+    readonly success: "var(--ds-text-success)";
+    readonly discovery: "var(--ds-text-discovery)";
+    readonly information: "var(--ds-text-information)";
+    readonly subtlest: "var(--ds-text-subtlest)";
+    readonly subtle: "var(--ds-text-subtle)";
+};
+export type TextColor = keyof typeof textColorMap;
+export declare const fillMap: {
+    readonly 'color.icon': "var(--ds-icon)";
+    readonly 'accent.red': "var(--ds-icon-accent-red)";
+    readonly 'accent.orange': "var(--ds-icon-accent-orange)";
+    readonly 'accent.yellow': "var(--ds-icon-accent-yellow)";
+    readonly 'accent.green': "var(--ds-icon-accent-green)";
+    readonly 'accent.teal': "var(--ds-icon-accent-teal)";
+    readonly 'accent.blue': "var(--ds-icon-accent-blue)";
+    readonly 'accent.purple': "var(--ds-icon-accent-purple)";
+    readonly 'accent.magenta': "var(--ds-icon-accent-magenta)";
+    readonly 'accent.gray': "var(--ds-icon-accent-gray)";
+    readonly disabled: "var(--ds-icon-disabled)";
+    readonly inverse: "var(--ds-icon-inverse)";
+    readonly selected: "var(--ds-icon-selected)";
+    readonly brand: "var(--ds-icon-brand)";
+    readonly danger: "var(--ds-icon-danger)";
+    readonly warning: "var(--ds-icon-warning)";
+    readonly 'warning.inverse': "var(--ds-icon-warning-inverse)";
+    readonly success: "var(--ds-icon-success)";
+    readonly discovery: "var(--ds-icon-discovery)";
+    readonly information: "var(--ds-icon-information)";
+    readonly subtle: "var(--ds-icon-subtle)";
+};
+export type Fill = keyof typeof fillMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e63fc5ff12523b2d49dc72925e1648e6>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["align-self", "border-style", "display", "flex-direction", "flex-grow", "flex-shrink", "flex", "layer", "overflow", "position"]
+ * @codegenDependency ../../scripts/codegen-file-templates/align-self.tsx <<SignedSource::074079802534462de54bf882bb2073e5>>
+ * @codegenDependency ../../scripts/codegen-file-templates/border-style.tsx <<SignedSource::87e7e289ffeaac901997c4af98084a5f>>
+ * @codegenDependency ../../scripts/codegen-file-templates/dimensions.tsx <<SignedSource::01143ff41135244db1d8ec2efe4339d6>>
+ * @codegenDependency ../../scripts/codegen-file-templates/display.tsx <<SignedSource::04ea30fcb3c02f2545af7fdc0206e645>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-direction.tsx <<SignedSource::19809ba11675679c188b0d98fb651dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-grow.tsx <<SignedSource::b8a06b122cb609170f1f42778a6c270e>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex-shrink.tsx <<SignedSource::bf6626972898bf22d2eeee2130693d47>>
+ * @codegenDependency ../../scripts/codegen-file-templates/flex.tsx <<SignedSource::ffa0189d14f1f00a16ec1e9f43a17ce9>>
+ * @codegenDependency ../../scripts/codegen-file-templates/layer.tsx <<SignedSource::79d24a1e558f12d671c06a7609f90dc1>>
+ * @codegenDependency ../../scripts/codegen-file-templates/overflow.tsx <<SignedSource::ccb841f2f51525aed895c06e00f15089>>
+ * @codegenDependency ../../scripts/codegen-file-templates/position.tsx <<SignedSource::8709494ef16c48046c1784a9aaec6d80>>
+ */
+export declare const alignSelfMap: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly stretch: "stretch";
+    readonly end: "end";
+    readonly baseline: "baseline";
+};
+export type AlignSelf = keyof typeof alignSelfMap;
+export declare const borderStyleMap: {
+    readonly none: "none";
+    readonly solid: "solid";
+};
+export type BorderStyle = keyof typeof borderStyleMap;
+export declare const displayMap: {
+    readonly flex: "flex";
+    readonly block: "block";
+    readonly inline: "inline";
+    readonly inlineBlock: "inline-block";
+    readonly inlineFlex: "inline-flex";
+};
+export type Display = keyof typeof displayMap;
+export declare const flexDirectionMap: {
+    readonly row: "row";
+    readonly column: "column";
+};
+export type FlexDirection = keyof typeof flexDirectionMap;
+export declare const flexGrowMap: {
+    readonly '0': 0;
+    readonly '1': 1;
+};
+export type FlexGrow = keyof typeof flexGrowMap;
+export declare const flexShrinkMap: {
+    readonly '0': 0;
+    readonly '1': 1;
+};
+export type FlexShrink = keyof typeof flexShrinkMap;
+export declare const flexMap: {
+    readonly '1': 1;
+};
+export type Flex = keyof typeof flexMap;
+export declare const layerMap: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
+export type Layer = keyof typeof layerMap;
+export declare const overflowMap: {
+    readonly auto: "auto";
+    readonly hidden: "hidden";
+};
+export type Overflow = keyof typeof overflowMap;
+export declare const overflowInlineMap: {
+    readonly auto: "auto";
+    readonly hidden: "hidden";
+};
+export type OverflowInline = keyof typeof overflowInlineMap;
+export declare const overflowBlockMap: {
+    readonly auto: "auto";
+    readonly hidden: "hidden";
+};
+export type OverflowBlock = keyof typeof overflowBlockMap;
+export declare const positionMap: {
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+    readonly relative: "relative";
+    readonly static: "static";
+};
+export type Position = keyof typeof positionMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::80ae367205568f9ca76d35f0cbc9d127>>
+ * @codegenId border
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "radius"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::81055547b21306c07a3e8a3c734a2f1c>>
+ */
+export declare const borderWidthMap: {
+    readonly 'width.0': "var(--ds-width-0)";
+    readonly 'width.050': "var(--ds-width-050)";
+    readonly 'width.100': "var(--ds-width-100)";
+};
+export type BorderWidth = keyof typeof borderWidthMap;
+export declare const borderRadiusMap: {
+    readonly 'radius.050': "var(--ds-radius-050)";
+    readonly 'radius.100': "var(--ds-radius-100)";
+    readonly 'radius.200': "var(--ds-radius-200)";
+    readonly 'radius.300': "var(--ds-radius-300)";
+    readonly 'radius.400': "var(--ds-radius-400)";
+    readonly 'radius.round': "var(--ds-radius-round)";
+};
+export type BorderRadius = keyof typeof borderRadiusMap;
+/**
+ * @codegenEnd
+ */
+export type TokenisedProps = {
+    alignSelf?: AlignSelf;
+    backgroundColor?: BackgroundColor;
+    blockSize?: BlockSize;
+    borderColor?: BorderColor;
+    borderRadius?: BorderRadius;
+    borderStyle?: BorderStyle;
+    borderWidth?: BorderWidth;
+    bottom?: Bottom;
+    boxShadow?: Shadow;
+    color?: TextColor;
+    columnGap?: Space;
+    display?: Display;
+    fill?: Fill;
+    flex?: Flex;
+    flexDirection?: FlexDirection;
+    flexGrow?: FlexGrow;
+    flexShrink?: FlexShrink;
+    gap?: Space;
+    height?: Height;
+    inlineSize?: InlineSize;
+    inset?: Space;
+    insetBlock?: Space;
+    insetBlockEnd?: Space;
+    insetBlockStart?: Space;
+    insetInline?: Space;
+    insetInlineEnd?: Space;
+    insetInlineStart?: Space;
+    left?: Left;
+    maxBlockSize?: MaxBlockSize;
+    maxHeight?: MaxHeight;
+    maxInlineSize?: MaxInlineSize;
+    maxWidth?: MaxWidth;
+    minBlockSize?: MinBlockSize;
+    minHeight?: MinHeight;
+    minInlineSize?: MinInlineSize;
+    minWidth?: MinWidth;
+    outlineColor?: BorderColor;
+    outlineOffset?: Space;
+    outlineWidth?: BorderWidth;
+    overflow?: Overflow;
+    overflowBlock?: OverflowBlock;
+    overflowInline?: OverflowInline;
+    padding?: Space;
+    paddingBlock?: Space;
+    paddingBlockEnd?: Space;
+    paddingBlockStart?: Space;
+    paddingInline?: Space;
+    paddingInlineEnd?: Space;
+    paddingInlineStart?: Space;
+    position?: Position;
+    right?: Right;
+    rowGap?: Space;
+    top?: Top;
+    width?: Width;
+    zIndex?: Layer;
+};
+declare const spacingProperties: readonly [
+    "padding",
+    "paddingBlock",
+    "paddingBlockStart",
+    "paddingBlockEnd",
+    "paddingInline",
+    "paddingInlineStart",
+    "paddingInlineEnd",
+    "gap",
+    "rowGap",
+    "columnGap"
+];
+type SpacingProperty = (typeof spacingProperties)[number];
+type SpacingToken = keyof typeof spaceMap;
+type BackgroundColorToken = keyof typeof backgroundColorMap;
+type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
+type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
+export declare const paddingStylesMap: SpacingStyleMap;
+export declare const spaceStylesMap: SpacingStyleMap;
+export declare const backgroundColorStylesMap: BackgroundColorStyleMap;
+export {};

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { css as cssEmotion } from '@emotion/react';
+import { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
+import type * as CSS from 'csstype';
+import { Box, Inline } from '../index';
+import { TokenisedProps } from './style-maps.partial';
+declare const uniqueSymbol: unique symbol;
+/**
+ * @internal used in primitives
+ * @returns a collection of styles that can be applied to the respective primitive
+ */
+type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
+export declare const parseXcss: (args: XCSS | Array<XCSS | false | undefined>) => ParsedXcss;
+type CSSPseudos = {
+    [Pseudo in CSS.Pseudos]?: SafeCSSObject;
+};
+type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+declare const boxWrapper: (style: any) => {
+    readonly [uniqueSymbol]: BoxStyles;
+};
+declare const inlineWrapper: (style: any) => {
+    readonly [uniqueSymbol]: InlineStyles;
+};
+type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+type AllowedBoxStyles = keyof SafeCSSObject;
+type AllowedInlineStyles = 'backgroundColor' | 'padding';
+/**
+ * ### xcss
+ *
+ * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
+ * CSS application.
+ *
+ * ```tsx
+ * const styles = xcss({
+ *   padding: 'space.100'
+ * })
+ * ```
+ */
+export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
+    readonly [uniqueSymbol]: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
+};
+declare const boxTag: unique symbol;
+export type BoxStyles = SerializedStyles & {
+    [boxTag]: true;
+};
+export type BoxXCSS = {
+    readonly [uniqueSymbol]: BoxStyles;
+};
+declare const inlineTag: unique symbol;
+export type InlineStyles = SerializedStyles & {
+    [inlineTag]: true;
+};
+export type InlineXCSS = {
+    readonly [uniqueSymbol]: InlineStyles;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -69,7 +69,7 @@
     }
   },
   "scripts": {
-    "codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles"
+    "codegen-styles": "ts-node --project ./tsconfig.node.json ./scripts/codegen-styles"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -94,7 +94,7 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0"
@@ -115,7 +115,7 @@
     "@atlaskit/icon-object": "*",
     "@atlaskit/logo": "*",
     "@atlaskit/lozenge": "*",
-    "@atlaskit/radio": "^5.5.0",
+    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "*",
@@ -124,7 +124,7 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.12",
+    "@atlassian/gemini-visual-regression": "^0.0.22",
     "@testing-library/react": "^12.1.5",
     "csstype": "^3.1.0",
     "prettier": "^2.8.0",

package/report.api.md

@@ -327,13 +327,13 @@ type Dimension = keyof typeof dimensionMap;
 // @public
 const dimensionMap: {
   readonly '100%': '100%';
-  readonly 'size.100': '16px';
-  readonly 'size.200': '24px';
-  readonly 'size.300': '32px';
-  readonly 'size.400': '40px';
-  readonly 'size.500': '48px';
-  readonly 'size.600': '96px';
-  readonly 'size.1000': '192px';
+  readonly 'size.100': '1rem';
+  readonly 'size.200': '1.5rem';
+  readonly 'size.300': '2rem';
+  readonly 'size.400': '2.5rem';
+  readonly 'size.500': '3rem';
+  readonly 'size.600': '6rem';
+  readonly 'size.1000': '12rem';
 };
 
 // @public (undocumented)
@@ -348,6 +348,34 @@ const displayMap: {
   readonly inlineFlex: 'inline-flex';
 };
 
+// @public (undocumented)
+type Fill = keyof typeof fillMap;
+
+// @public (undocumented)
+const fillMap: {
+  readonly 'color.icon': 'var(--ds-icon)';
+  readonly 'accent.red': 'var(--ds-icon-accent-red)';
+  readonly 'accent.orange': 'var(--ds-icon-accent-orange)';
+  readonly 'accent.yellow': 'var(--ds-icon-accent-yellow)';
+  readonly 'accent.green': 'var(--ds-icon-accent-green)';
+  readonly 'accent.teal': 'var(--ds-icon-accent-teal)';
+  readonly 'accent.blue': 'var(--ds-icon-accent-blue)';
+  readonly 'accent.purple': 'var(--ds-icon-accent-purple)';
+  readonly 'accent.magenta': 'var(--ds-icon-accent-magenta)';
+  readonly 'accent.gray': 'var(--ds-icon-accent-gray)';
+  readonly disabled: 'var(--ds-icon-disabled)';
+  readonly inverse: 'var(--ds-icon-inverse)';
+  readonly selected: 'var(--ds-icon-selected)';
+  readonly brand: 'var(--ds-icon-brand)';
+  readonly danger: 'var(--ds-icon-danger)';
+  readonly warning: 'var(--ds-icon-warning)';
+  readonly 'warning.inverse': 'var(--ds-icon-warning-inverse)';
+  readonly success: 'var(--ds-icon-success)';
+  readonly discovery: 'var(--ds-icon-discovery)';
+  readonly information: 'var(--ds-icon-information)';
+  readonly subtle: 'var(--ds-icon-subtle)';
+};
+
 // @public (undocumented)
 type Flex = keyof typeof flexMap;
 
@@ -662,6 +690,7 @@ type TokenisedProps = {
   color?: TextColor;
   columnGap?: Space;
   display?: Display;
+  fill?: Fill;
   flex?: Flex;
   flexDirection?: FlexDirection;
   flexGrow?: FlexGrow;

package/scripts/codegen-file-templates/dimensions.tsx

@@ -1,12 +1,12 @@
 export const dimensionMap = {
   '100%': '100%',
-  'size.100': '16px',
-  'size.200': '24px',
-  'size.300': '32px',
-  'size.400': '40px',
-  'size.500': '48px',
-  'size.600': '96px',
-  'size.1000': '192px',
+  'size.100': '1rem',
+  'size.200': '1.5rem',
+  'size.300': '2rem',
+  'size.400': '2.5rem',
+  'size.500': '3rem',
+  'size.600': '6rem',
+  'size.1000': '12rem',
 } as const;
 type Dimension = keyof typeof dimensionMap;