@atlaskit/ds-explorations 0.0.2 → 0.1.1

package/report.api.md

@@ -1,10 +1,463 @@
-## API Report File for "@atlaskit/ds-explorations"
+## API Report File for "@atlaskit/ds-explorations".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
-declare const _default: {};
-export default _default;
+import { CSSProperties } from 'react';
+import { ElementType } from 'react';
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SerializedStyles } from '@emotion/utils';
+
+declare type BackgroundColor = keyof typeof backgroundColorMap;
+
+declare const backgroundColorMap: {
+  disabled: SerializedStyles;
+  'inverse.subtle': SerializedStyles;
+  input: SerializedStyles;
+  neutral: SerializedStyles;
+  'neutral.subtle': SerializedStyles;
+  'neutral.bold': SerializedStyles;
+  'brand.bold': SerializedStyles;
+  selected: SerializedStyles;
+  'selected.bold': SerializedStyles;
+  danger: SerializedStyles;
+  'danger.bold': SerializedStyles;
+  warning: SerializedStyles;
+  'warning.bold': SerializedStyles;
+  success: SerializedStyles;
+  'success.bold': SerializedStyles;
+  discovery: SerializedStyles;
+  'discovery.bold': SerializedStyles;
+  information: SerializedStyles;
+  'information.bold': SerializedStyles;
+  'color.blanket': SerializedStyles;
+  'color.blanket.selected': SerializedStyles;
+  'color.blanket.danger': SerializedStyles;
+  'elevation.surface': SerializedStyles;
+  'elevation.surface.sunken': SerializedStyles;
+  'elevation.surface.raised': SerializedStyles;
+  'elevation.surface.overlay': SerializedStyles;
+};
+
+declare interface BasePrimitiveProps {
+  /**
+   * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+   */
+  testId?: string;
+  /**
+   * Inline styles to be applied to the primitive.
+   * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
+   * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
+   */
+  UNSAFE_style?: CSSProperties;
+}
+
+declare type BorderColor = keyof typeof borderColorMap;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background"]
+ */
+declare const borderColorMap: {
+  'color.border': SerializedStyles;
+  bold: SerializedStyles;
+  inverse: SerializedStyles;
+  focused: SerializedStyles;
+  input: SerializedStyles;
+  disabled: SerializedStyles;
+  brand: SerializedStyles;
+  selected: SerializedStyles;
+  danger: SerializedStyles;
+  warning: SerializedStyles;
+  success: SerializedStyles;
+  discovery: SerializedStyles;
+  information: SerializedStyles;
+};
+
+declare type BorderRadius = keyof typeof borderRadiusMap;
+
+declare const borderRadiusMap: {
+  normal: SerializedStyles;
+  rounded: SerializedStyles;
+  badge: SerializedStyles;
+};
+
+declare type BorderStyle = keyof typeof borderStyleMap;
+
+declare const borderStyleMap: {
+  none: SerializedStyles;
+  solid: SerializedStyles;
+  dashed: SerializedStyles;
+  dotted: SerializedStyles;
+};
+
+declare type BorderWidth = keyof typeof borderWidthMap;
+
+declare const borderWidthMap: {
+  '0px': SerializedStyles;
+  '1px': SerializedStyles;
+  '2px': SerializedStyles;
+  '3px': SerializedStyles;
+};
+
+declare interface BoxProps
+  extends Omit<HTMLAttributes<HTMLElement>, 'style'>,
+    BasePrimitiveProps {
+  /**
+   * The DOM element to render as the Box. Defaults to `div`.
+   */
+  as?: ElementType;
+  /**
+   * Elements to be rendered inside the Box.
+   */
+  children: ReactNode;
+  /**
+   * Token representing background color with a fallback.
+   */
+  backgroundColor?: [BackgroundColor, string];
+  /**
+   * Defines border style.
+   */
+  borderStyle?: BorderStyle;
+  /**
+   * Defines border width.
+   */
+  borderWidth?: BorderWidth;
+  /**
+   * Token representing border color with a fallback.
+   */
+  borderColor?: [BorderColor, string];
+  /**
+   * Defines border radius.
+   */
+  borderRadius?: BorderRadius;
+  /**
+   * Defines the main axis direction.
+   */
+  flexDirection?: FlexDirection;
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Shorthand for `paddingBlock` and `paddingInline` together.
+   *
+   * @see paddingBlock
+   * @see paddingInline
+   */
+  padding?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-block`.
+   */
+  paddingBlock?: GlobalSpacingToken;
+  /**
+   * Token representing CSS `padding-inline`.
+   */
+  paddingInline?: GlobalSpacingToken;
+  /**
+   * Token representing width.
+   */
+  width?: GlobalSpacingToken;
+  /**
+   * Token representing height.
+   */
+  height?: GlobalSpacingToken;
+  /**
+   * Defines display type and layout. Defaults to `flex`.
+   */
+  display?: Display;
+}
+
+declare type Display = keyof typeof displayMap;
+
+declare const displayMap: {
+  block: SerializedStyles;
+  inline: SerializedStyles;
+  flex: SerializedStyles;
+  inlineFlex: SerializedStyles;
+};
+
+declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
+
+declare type FlexAlignItems_2 = keyof typeof flexAlignItemsMap_2;
+
+declare type FlexAlignItems_3 = keyof typeof flexAlignItemsMap_3;
+
+declare const flexAlignItemsMap: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare const flexAlignItemsMap_2: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare const flexAlignItemsMap_3: {
+  center: SerializedStyles;
+  baseline: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare type FlexDirection = keyof typeof flexDirectionMap;
+
+declare const flexDirectionMap: {
+  column: SerializedStyles;
+  row: SerializedStyles;
+};
+
+declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+
+declare type FlexJustifyContent_2 = keyof typeof flexJustifyContentMap_2;
+
+declare type FlexJustifyContent_3 = keyof typeof flexJustifyContentMap_3;
+
+declare const flexJustifyContentMap: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare const flexJustifyContentMap_2: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare const flexJustifyContentMap_3: {
+  center: SerializedStyles;
+  flexStart: SerializedStyles;
+  flexEnd: SerializedStyles;
+};
+
+declare type FontSize = keyof typeof fontSizeMap;
+
+declare const fontSizeMap: {
+  '11': SerializedStyles;
+  '12': SerializedStyles;
+  '14': SerializedStyles;
+};
+
+declare type FontWeight = keyof typeof fontWeightMap;
+
+declare const fontWeightMap: {
+  '400': SerializedStyles;
+  '500': SerializedStyles;
+};
+
+declare type GlobalSpacingToken = keyof typeof SPACING_SCALE;
+
+declare interface InlineProps extends BasePrimitiveProps {
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems_2;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent_2;
+  /**
+   * Token representing gap between children.
+   */
+  gap: GlobalSpacingToken;
+  /**
+   * Renders a divider between children.
+   * If a string is provided it will automatically be wrapped in a `<Text>` component.
+   */
+  divider?: ReactNode;
+  /**
+   * Elements to be rendered inside the Inline.
+   */
+  children: ReactNode;
+}
+
+declare type LineHeight = keyof typeof lineHeightMap;
+
+declare const lineHeightMap: {
+  '12px': SerializedStyles;
+  '16px': SerializedStyles;
+  '20px': SerializedStyles;
+  '24px': SerializedStyles;
+  '28px': SerializedStyles;
+  '32px': SerializedStyles;
+  '40px': SerializedStyles;
+};
+
+declare const SPACING_SCALE: {
+  'sp-0': number;
+  'sp-25': number;
+  'sp-50': number;
+  'sp-75': number;
+  'sp-100': number;
+  'sp-200': number;
+  'sp-300': number;
+  'sp-400': number;
+  'sp-500': number;
+  'sp-600': number;
+  'sp-800': number;
+};
+
+declare interface StackProps extends BasePrimitiveProps {
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems_3;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent_3;
+  /**
+   * Token representing gap between children.
+   */
+  gap: GlobalSpacingToken;
+  /**
+   * Elements to be rendered inside the Stack.
+   */
+  children: ReactNode;
+}
+
+declare type TextAlign = keyof typeof textAlignMap;
+
+declare const textAlignMap: {
+  center: SerializedStyles;
+  end: SerializedStyles;
+  start: SerializedStyles;
+};
+
+declare type TextColor = keyof typeof textColorMap;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["text"]
+ */
+declare const textColorMap: {
+  'color.text': SerializedStyles;
+  subtle: SerializedStyles;
+  subtlest: SerializedStyles;
+  disabled: SerializedStyles;
+  inverse: SerializedStyles;
+  brand: SerializedStyles;
+  selected: SerializedStyles;
+  danger: SerializedStyles;
+  warning: SerializedStyles;
+  'warning.inverse': SerializedStyles;
+  success: SerializedStyles;
+  discovery: SerializedStyles;
+  information: SerializedStyles;
+};
+
+declare interface TextProps extends BasePrimitiveProps {
+  /**
+   * HTML tag to be rendered. Defaults to `span`.
+   */
+  as?:
+    | 'span'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'label'
+    | 'a'
+    | 'ul'
+    | 'ol'
+    | 'p';
+  /**
+   * Elements rendered within the Text element
+   */
+  children: ReactNode;
+  /**
+   * Text color
+   */
+  color?: [TextColor, string];
+  /**
+   * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+   */
+  fontSize?: FontSize;
+  /**
+   * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   */
+  fontWeight?: FontWeight;
+  /**
+   * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+   */
+  lineHeight?: LineHeight;
+  /**
+   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   */
+  textAlign?: TextAlign;
+  /**
+   * For use with `a` link tags.
+   */
+  href?: string;
+}
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const UNSAFE_Box: ForwardRefExoticComponent<
+  BoxProps & RefAttributes<HTMLElement>
+>;
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+export declare const UNSAFE_Inline: ForwardRefExoticComponent<
+  InlineProps & RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+export declare const UNSAFE_Stack: ForwardRefExoticComponent<
+  StackProps & RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+export declare const UNSAFE_Text: FC<TextProps>;
 
 export {};
 ```

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -3,61 +3,94 @@
 exports[`@atlaskit/design-system-explorations bg styles are generated correctly 1`] = `
 "const backgroundColorMap = {
   disabled: css({
-    backgroundColor: token('color.background.disabled', '#091E420F'),
+    backgroundColor: token('color.background.disabled', 'var(--ds-bg-fb)'),
   }),
   'inverse.subtle': css({
-    backgroundColor: token('color.background.inverse.subtle', '#00000029'),
+    backgroundColor: token(
+      'color.background.inverse.subtle',
+      'var(--ds-bg-fb)',
+    ),
   }),
   input: css({
-    backgroundColor: token('color.background.input', '#FFFFFF'),
+    backgroundColor: token('color.background.input', 'var(--ds-bg-fb)'),
   }),
   neutral: css({
-    backgroundColor: token('color.background.neutral', '#091E420F'),
+    backgroundColor: token('color.background.neutral', 'var(--ds-bg-fb)'),
   }),
   'neutral.subtle': css({
-    backgroundColor: token('color.background.neutral.subtle', '#00000000'),
+    backgroundColor: token(
+      'color.background.neutral.subtle',
+      'var(--ds-bg-fb)',
+    ),
   }),
   'neutral.bold': css({
-    backgroundColor: token('color.background.neutral.bold', '#44546F'),
+    backgroundColor: token('color.background.neutral.bold', 'var(--ds-bg-fb)'),
   }),
   'brand.bold': css({
-    backgroundColor: token('color.background.brand.bold', '#0C66E4'),
+    backgroundColor: token('color.background.brand.bold', 'var(--ds-bg-fb)'),
   }),
   selected: css({
-    backgroundColor: token('color.background.selected', '#E9F2FF'),
+    backgroundColor: token('color.background.selected', 'var(--ds-bg-fb)'),
   }),
   'selected.bold': css({
-    backgroundColor: token('color.background.selected.bold', '#0C66E4'),
+    backgroundColor: token('color.background.selected.bold', 'var(--ds-bg-fb)'),
   }),
   danger: css({
-    backgroundColor: token('color.background.danger', '#FFEDEB'),
+    backgroundColor: token('color.background.danger', 'var(--ds-bg-fb)'),
   }),
   'danger.bold': css({
-    backgroundColor: token('color.background.danger.bold', '#CA3521'),
+    backgroundColor: token('color.background.danger.bold', 'var(--ds-bg-fb)'),
   }),
   warning: css({
-    backgroundColor: token('color.background.warning', '#FFF7D6'),
+    backgroundColor: token('color.background.warning', 'var(--ds-bg-fb)'),
   }),
   'warning.bold': css({
-    backgroundColor: token('color.background.warning.bold', '#E2B203'),
+    backgroundColor: token('color.background.warning.bold', 'var(--ds-bg-fb)'),
   }),
   success: css({
-    backgroundColor: token('color.background.success', '#DFFCF0'),
+    backgroundColor: token('color.background.success', 'var(--ds-bg-fb)'),
   }),
   'success.bold': css({
-    backgroundColor: token('color.background.success.bold', '#1F845A'),
+    backgroundColor: token('color.background.success.bold', 'var(--ds-bg-fb)'),
   }),
   discovery: css({
-    backgroundColor: token('color.background.discovery', '#F3F0FF'),
+    backgroundColor: token('color.background.discovery', 'var(--ds-bg-fb)'),
   }),
   'discovery.bold': css({
-    backgroundColor: token('color.background.discovery.bold', '#6E5DC6'),
+    backgroundColor: token(
+      'color.background.discovery.bold',
+      'var(--ds-bg-fb)',
+    ),
   }),
   information: css({
-    backgroundColor: token('color.background.information', '#E9F2FF'),
+    backgroundColor: token('color.background.information', 'var(--ds-bg-fb)'),
   }),
   'information.bold': css({
-    backgroundColor: token('color.background.information.bold', '#0C66E4'),
+    backgroundColor: token(
+      'color.background.information.bold',
+      'var(--ds-bg-fb)',
+    ),
+  }),
+  'color.blanket': css({
+    backgroundColor: token('color.blanket', 'var(--ds-bg-fb)'),
+  }),
+  'color.blanket.selected': css({
+    backgroundColor: token('color.blanket.selected', 'var(--ds-bg-fb)'),
+  }),
+  'color.blanket.danger': css({
+    backgroundColor: token('color.blanket.danger', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface': css({
+    backgroundColor: token('elevation.surface', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.sunken': css({
+    backgroundColor: token('elevation.surface.sunken', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.raised': css({
+    backgroundColor: token('elevation.surface.raised', 'var(--ds-bg-fb)'),
+  }),
+  'elevation.surface.overlay': css({
+    backgroundColor: token('elevation.surface.overlay', 'var(--ds-bg-fb)'),
   }),
 };
 
@@ -67,44 +100,44 @@ type BackgroundColor = keyof typeof backgroundColorMap;
 
 exports[`@atlaskit/design-system-explorations border styles are generated correctly 1`] = `
 "const borderColorMap = {
-  default: css({
-    borderColor: token('color.border', '#091E4224'),
+  'color.border': css({
+    borderColor: token('color.border', 'var(--ds-bo-fb)'),
   }),
   bold: css({
-    borderColor: token('color.border.bold', '#758195'),
+    borderColor: token('color.border.bold', 'var(--ds-bo-fb)'),
   }),
   inverse: css({
-    borderColor: token('color.border.inverse', '#FFFFFF'),
+    borderColor: token('color.border.inverse', 'var(--ds-bo-fb)'),
   }),
   focused: css({
-    borderColor: token('color.border.focused', '#388BFF'),
+    borderColor: token('color.border.focused', 'var(--ds-bo-fb)'),
   }),
   input: css({
-    borderColor: token('color.border.input', '#091E4224'),
+    borderColor: token('color.border.input', 'var(--ds-bo-fb)'),
   }),
   disabled: css({
-    borderColor: token('color.border.disabled', '#091E420F'),
+    borderColor: token('color.border.disabled', 'var(--ds-bo-fb)'),
   }),
   brand: css({
-    borderColor: token('color.border.brand', '#0C66E4'),
+    borderColor: token('color.border.brand', 'var(--ds-bo-fb)'),
   }),
   selected: css({
-    borderColor: token('color.border.selected', '#0C66E4'),
+    borderColor: token('color.border.selected', 'var(--ds-bo-fb)'),
   }),
   danger: css({
-    borderColor: token('color.border.danger', '#E34935'),
+    borderColor: token('color.border.danger', 'var(--ds-bo-fb)'),
   }),
   warning: css({
-    borderColor: token('color.border.warning', '#D97008'),
+    borderColor: token('color.border.warning', 'var(--ds-bo-fb)'),
   }),
   success: css({
-    borderColor: token('color.border.success', '#22A06B'),
+    borderColor: token('color.border.success', 'var(--ds-bo-fb)'),
   }),
   discovery: css({
-    borderColor: token('color.border.discovery', '#8270DB'),
+    borderColor: token('color.border.discovery', 'var(--ds-bo-fb)'),
   }),
   information: css({
-    borderColor: token('color.border.information', '#1D7AFC'),
+    borderColor: token('color.border.information', 'var(--ds-bo-fb)'),
   }),
 };
 
@@ -114,44 +147,44 @@ type BorderColor = keyof typeof borderColorMap;
 
 exports[`@atlaskit/design-system-explorations text styles are generated correctly 1`] = `
 "const textColorMap = {
-  default: css({
-    color: token('color.text', '#172B4D'),
+  'color.text': css({
+    color: token('color.text', 'var(--ds-co-fb)'),
   }),
   subtle: css({
-    color: token('color.text.subtle', '#44546F'),
+    color: token('color.text.subtle', 'var(--ds-co-fb)'),
   }),
   subtlest: css({
-    color: token('color.text.subtlest', '#626F86'),
+    color: token('color.text.subtlest', 'var(--ds-co-fb)'),
   }),
   disabled: css({
-    color: token('color.text.disabled', '#8993A5'),
+    color: token('color.text.disabled', 'var(--ds-co-fb)'),
   }),
   inverse: css({
-    color: token('color.text.inverse', '#FFFFFF'),
+    color: token('color.text.inverse', 'var(--ds-co-fb)'),
   }),
   brand: css({
-    color: token('color.text.brand', '#0C66E4'),
+    color: token('color.text.brand', 'var(--ds-co-fb)'),
   }),
   selected: css({
-    color: token('color.text.selected', '#0C66E4'),
+    color: token('color.text.selected', 'var(--ds-co-fb)'),
   }),
   danger: css({
-    color: token('color.text.danger', '#AE2A19'),
+    color: token('color.text.danger', 'var(--ds-co-fb)'),
   }),
   warning: css({
-    color: token('color.text.warning', '#974F0C'),
+    color: token('color.text.warning', 'var(--ds-co-fb)'),
   }),
   'warning.inverse': css({
-    color: token('color.text.warning.inverse', '#172B4D'),
+    color: token('color.text.warning.inverse', 'var(--ds-co-fb)'),
   }),
   success: css({
-    color: token('color.text.success', '#216E4E'),
+    color: token('color.text.success', 'var(--ds-co-fb)'),
   }),
   discovery: css({
-    color: token('color.text.discovery', '#5E4DB2'),
+    color: token('color.text.discovery', 'var(--ds-co-fb)'),
   }),
   information: css({
-    color: token('color.text.information', '#0055CC'),
+    color: token('color.text.information', 'var(--ds-co-fb)'),
   }),
 };