@atlaskit/primitives 0.13.0 → 0.14.1

package/report.api.md

@@ -43,18 +43,6 @@ type AlignInline = 'center' | 'end' | 'start';
 // @public (undocumented)
 type AlignInline_2 = 'center' | 'end' | 'start';
 
-// @public (undocumented)
-type AlignSelf = keyof typeof alignSelfMap;
-
-// @public
-const alignSelfMap: {
-  readonly center: 'center';
-  readonly start: 'start';
-  readonly stretch: 'stretch';
-  readonly end: 'end';
-  readonly baseline: 'baseline';
-};
-
 // @public (undocumented)
 type AllowedBoxStyles = keyof SafeCSSObject;
 
@@ -222,9 +210,6 @@ type BasePrimitiveProps = {
   style?: CSSProperties;
 };
 
-// @public (undocumented)
-type BlockSize = Dimension;
-
 // @public (undocumented)
 type BorderColor = keyof typeof borderColorMap;
 
@@ -269,15 +254,6 @@ const borderRadiusMap: {
   readonly 'border.radius.circle': 'var(--ds-border-radius-circle)';
 };
 
-// @public (undocumented)
-type BorderStyle = keyof typeof borderStyleMap;
-
-// @public (undocumented)
-const borderStyleMap: {
-  readonly none: 'none';
-  readonly solid: 'solid';
-};
-
 // @public (undocumented)
 type BorderWidth = keyof typeof borderWidthMap;
 
@@ -289,9 +265,6 @@ const borderWidthMap: {
   readonly 'border.width.100': 'var(--ds-border-width-100)';
 };
 
-// @public (undocumented)
-type Bottom = Dimension;
-
 // @public
 export const Box: BoxComponent;
 
@@ -324,7 +297,7 @@ type BoxXCSS = {
 };
 
 // @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
+export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
 // @public (undocumented)
 type CSSMediaQueries = {
@@ -351,92 +324,12 @@ const dimensionMap: {
   readonly 'size.1000': '12rem';
 };
 
-// @public (undocumented)
-type Display = keyof typeof displayMap;
-
-// @public (undocumented)
-const displayMap: {
-  readonly flex: 'flex';
-  readonly block: 'block';
-  readonly inline: 'inline';
-  readonly inlineBlock: 'inline-block';
-  readonly inlineFlex: 'inline-flex';
-  readonly grid: 'grid';
-};
-
-// @public (undocumented)
-type Fill = keyof typeof fillMap;
-
-// @public (undocumented)
-const fillMap: {
-  readonly 'color.icon': 'var(--ds-icon)';
-  readonly 'color.icon.accent.lime': 'var(--ds-icon-accent-lime)';
-  readonly 'color.icon.accent.red': 'var(--ds-icon-accent-red)';
-  readonly 'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
-  readonly 'color.icon.accent.yellow': 'var(--ds-icon-accent-yellow)';
-  readonly 'color.icon.accent.green': 'var(--ds-icon-accent-green)';
-  readonly 'color.icon.accent.teal': 'var(--ds-icon-accent-teal)';
-  readonly 'color.icon.accent.blue': 'var(--ds-icon-accent-blue)';
-  readonly 'color.icon.accent.purple': 'var(--ds-icon-accent-purple)';
-  readonly 'color.icon.accent.magenta': 'var(--ds-icon-accent-magenta)';
-  readonly 'color.icon.accent.gray': 'var(--ds-icon-accent-gray)';
-  readonly 'color.icon.disabled': 'var(--ds-icon-disabled)';
-  readonly 'color.icon.inverse': 'var(--ds-icon-inverse)';
-  readonly 'color.icon.selected': 'var(--ds-icon-selected)';
-  readonly 'color.icon.brand': 'var(--ds-icon-brand)';
-  readonly 'color.icon.danger': 'var(--ds-icon-danger)';
-  readonly 'color.icon.warning': 'var(--ds-icon-warning)';
-  readonly 'color.icon.warning.inverse': 'var(--ds-icon-warning-inverse)';
-  readonly 'color.icon.success': 'var(--ds-icon-success)';
-  readonly 'color.icon.discovery': 'var(--ds-icon-discovery)';
-  readonly 'color.icon.information': 'var(--ds-icon-information)';
-  readonly 'color.icon.subtle': 'var(--ds-icon-subtle)';
-};
-
-// @public (undocumented)
-type Flex = keyof typeof flexMap;
-
-// @public (undocumented)
-type FlexDirection = keyof typeof flexDirectionMap;
-
-// @public (undocumented)
-const flexDirectionMap: {
-  readonly row: 'row';
-  readonly column: 'column';
-};
-
-// @public (undocumented)
-type FlexGrow = keyof typeof flexGrowMap;
-
-// @public (undocumented)
-const flexGrowMap: {
-  readonly '0': 0;
-  readonly '1': 1;
-};
-
-// @public (undocumented)
-const flexMap: {
-  readonly '1': 1;
-};
-
-// @public (undocumented)
-type FlexShrink = keyof typeof flexShrinkMap;
-
-// @public (undocumented)
-const flexShrinkMap: {
-  readonly '0': '0';
-  readonly '1': 1;
-};
-
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
 // @public (undocumented)
 type Grow_2 = 'fill' | 'hug';
 
-// @public (undocumented)
-type Height = Dimension;
-
 // @public
 export const Inline: MemoExoticComponent<
   ForwardRefExoticComponent<
@@ -476,9 +369,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
   xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
 }
 
-// @public (undocumented)
-type InlineSize = Dimension;
-
 // @public (undocumented)
 type InlineStyles = SerializedStyles & {
   [inlineTag]: true;
@@ -495,7 +385,7 @@ type InlineXCSS = {
 // @public (undocumented)
 type Layer = keyof typeof layerMap;
 
-// @public (undocumented)
+// @public
 const layerMap: {
   readonly card: 100;
   readonly navigation: 200;
@@ -508,21 +398,6 @@ const layerMap: {
   readonly tooltip: 800;
 };
 
-// @public (undocumented)
-type Left = Dimension;
-
-// @public (undocumented)
-type MaxBlockSize = Dimension;
-
-// @public (undocumented)
-type MaxHeight = Dimension;
-
-// @public (undocumented)
-type MaxInlineSize = Dimension;
-
-// @public (undocumented)
-type MaxWidth = Dimension;
-
 // @public
 const media: {
   readonly above: {
@@ -538,64 +413,11 @@ const media: {
 // @public
 type MediaQuery = (typeof media.above)[Breakpoint];
 
-// @public (undocumented)
-type MinBlockSize = Dimension;
-
-// @public (undocumented)
-type MinHeight = Dimension;
-
-// @public (undocumented)
-type MinInlineSize = Dimension;
-
-// @public (undocumented)
-type MinWidth = Dimension;
-
-// @public (undocumented)
-type Overflow = keyof typeof overflowMap;
-
-// @public (undocumented)
-type OverflowBlock = keyof typeof overflowBlockMap;
-
-// @public (undocumented)
-const overflowBlockMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
-};
-
-// @public (undocumented)
-type OverflowInline = keyof typeof overflowInlineMap;
-
-// @public (undocumented)
-const overflowInlineMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
-};
-
-// @public (undocumented)
-const overflowMap: {
-  readonly auto: 'auto';
-  readonly hidden: 'hidden';
-};
-
-// @public (undocumented)
-type Position = keyof typeof positionMap;
-
-// @public (undocumented)
-const positionMap: {
-  readonly absolute: 'absolute';
-  readonly fixed: 'fixed';
-  readonly relative: 'relative';
-  readonly static: 'static';
-};
-
 // @public (undocumented)
 type PublicBoxPropsBase = {
   xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
 };
 
-// @public (undocumented)
-type Right = Dimension;
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
@@ -652,6 +474,13 @@ type Spacing =
   | 'insetInline'
   | 'insetInlineEnd'
   | 'insetInlineStart'
+  | 'margin'
+  | 'marginBlock'
+  | 'marginBlockEnd'
+  | 'marginBlockStart'
+  | 'marginInline'
+  | 'marginInlineEnd'
+  | 'marginInlineStart'
   | 'outlineOffset'
   | 'padding'
   | 'paddingBlock'
@@ -745,26 +574,18 @@ const textColorMap: {
 
 // @public (undocumented)
 type TokenisedProps = {
-  alignSelf?: AlignSelf;
   backgroundColor?: BackgroundColor;
-  blockSize?: BlockSize;
+  blockSize?: AutoComplete<Dimension>;
   borderColor?: BorderColor;
   borderRadius?: BorderRadius;
-  borderStyle?: BorderStyle;
   borderWidth?: BorderWidth;
-  bottom?: Bottom;
+  bottom?: AutoComplete<Space>;
   boxShadow?: Shadow;
   color?: TextColor;
   columnGap?: Space;
-  display?: Display;
-  fill?: Fill;
-  flex?: Flex;
-  flexDirection?: FlexDirection;
-  flexGrow?: FlexGrow;
-  flexShrink?: FlexShrink;
   gap?: Space;
-  height?: AutoComplete<Height>;
-  inlineSize?: InlineSize;
+  height?: AutoComplete<Dimension>;
+  inlineSize?: AutoComplete<Dimension>;
   inset?: Space;
   insetBlock?: Space;
   insetBlockEnd?: Space;
@@ -772,21 +593,18 @@ type TokenisedProps = {
   insetInline?: Space;
   insetInlineEnd?: Space;
   insetInlineStart?: Space;
-  left?: Left;
-  maxBlockSize?: AutoComplete<MaxBlockSize>;
-  maxHeight?: AutoComplete<MaxHeight>;
-  maxInlineSize?: AutoComplete<MaxInlineSize>;
-  maxWidth?: AutoComplete<MaxWidth>;
-  minBlockSize?: AutoComplete<MinBlockSize>;
-  minHeight?: AutoComplete<MinHeight>;
-  minInlineSize?: AutoComplete<MinInlineSize>;
-  minWidth?: AutoComplete<MinWidth>;
+  left?: AutoComplete<Space>;
+  maxBlockSize?: AutoComplete<Dimension>;
+  maxHeight?: AutoComplete<Dimension>;
+  maxInlineSize?: AutoComplete<Dimension>;
+  maxWidth?: AutoComplete<Dimension>;
+  minBlockSize?: AutoComplete<Dimension>;
+  minHeight?: AutoComplete<Dimension>;
+  minInlineSize?: AutoComplete<Dimension>;
+  minWidth?: AutoComplete<Dimension>;
   outlineColor?: BorderColor;
   outlineOffset?: Space;
   outlineWidth?: BorderWidth;
-  overflow?: Overflow;
-  overflowBlock?: OverflowBlock;
-  overflowInline?: OverflowInline;
   padding?: Space;
   paddingBlock?: Space;
   paddingBlockEnd?: Space;
@@ -794,22 +612,82 @@ type TokenisedProps = {
   paddingInline?: Space;
   paddingInlineEnd?: Space;
   paddingInlineStart?: Space;
-  position?: Position;
-  right?: Right;
+  right?: AutoComplete<Space>;
   rowGap?: Space;
-  top?: Top;
-  width?: AutoComplete<Width>;
+  top?: AutoComplete<Space>;
+  width?: AutoComplete<Dimension>;
   zIndex?: Layer;
 };
 
-// @public (undocumented)
-type Top = Dimension;
-
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
-// @public (undocumented)
-type Width = Dimension;
+// @public
+export const UNSAFE_BREAKPOINTS_CONFIG: {
+  readonly xxs: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-200)';
+    readonly min: '0rem';
+    readonly max: '29.99rem';
+  };
+  readonly xs: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-200)';
+    readonly min: '30rem';
+    readonly max: '47.99rem';
+  };
+  readonly sm: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-300)';
+    readonly min: '48rem';
+    readonly max: '63.99rem';
+  };
+  readonly md: {
+    readonly gridItemGutter: 'var(--ds-space-300)';
+    readonly gridMargin: 'var(--ds-space-400)';
+    readonly min: '64rem';
+    readonly max: '89.99rem';
+  };
+  readonly lg: {
+    readonly gridItemGutter: 'var(--ds-space-400)';
+    readonly gridMargin: 'var(--ds-space-400)';
+    readonly min: '90rem';
+    readonly max: '109.99rem';
+  };
+  readonly xl: {
+    readonly gridItemGutter: 'var(--ds-space-400)';
+    readonly gridMargin: 'var(--ds-space-500)';
+    readonly min: '110rem';
+    readonly max: null;
+  };
+};
+
+// @internal
+export const UNSAFE_media: {
+  above: {
+    readonly xxs: '@media all';
+    readonly xs: '@media (min-width: 30rem)';
+    readonly sm: '@media (min-width: 48rem)';
+    readonly md: '@media (min-width: 64rem)';
+    readonly lg: '@media (min-width: 90rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
+  below: {
+    readonly xs: '@media not all and (min-width: 30rem)';
+    readonly sm: '@media not all and (min-width: 48rem)';
+    readonly md: '@media not all and (min-width: 64rem)';
+    readonly lg: '@media not all and (min-width: 90rem)';
+    readonly xl: '@media not all and (min-width: 110rem)';
+  };
+  only: {
+    readonly xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)';
+    readonly xs: '@media (min-width: 30rem) and (max-width: 47.99rem)';
+    readonly sm: '@media (min-width: 48rem) and (max-width: 63.99rem)';
+    readonly md: '@media (min-width: 64rem) and (max-width: 89.99rem)';
+    readonly lg: '@media (min-width: 90rem) and (max-width: 109.99rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
+};
 
 // @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(

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

@@ -8,21 +8,4 @@ export const dimensionMap = {
   'size.600': '6rem',
   'size.1000': '12rem',
 } as const;
-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;
+export type Dimension = keyof typeof dimensionMap;

package/scripts/codegen-styles.tsx

@@ -78,7 +78,7 @@ const sourceFns = [
         dependencies: [shapeTokensDependencyPath],
       },
     ),
-  // align-self, border-color, border-radius, border-style, border-width, display, flex-grow, flex-shrink, flex, layer, overflow, position',
+  // border-color, border-radius, border-width, layer',
   () =>
     createPartialSignedArtifact(
       options => options.map(createStylesFromFileTemplate).join('\n'),

package/scripts/misc-codegen-template.tsx

@@ -3,20 +3,11 @@ import { join } from 'path';
 
 export const createStylesFromFileTemplate = (
   property:
-    | 'align-self'
     | 'border-color'
     | 'border-radius'
-    | 'border-style'
     | 'border-width'
     | 'dimensions'
-    | 'display'
-    | 'flex-direction'
-    | 'flex-grow'
-    | 'flex-shrink'
-    | 'flex'
-    | 'layer'
-    | 'overflow'
-    | 'position',
+    | 'layer',
 ) => {
   const path = join(__dirname, './codegen-file-templates', `${property}.tsx`);
   const source = readFileSync(path);