@atlaskit/primitives 0.4.1 → 0.5.0

package/dist/types/components/types.d.ts

@@ -1,24 +1,16 @@
 import type { CSSProperties } from 'react';
-import { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
-/**
- * Restricted set of inline styles to be applied to the primitive.
- * Should be avoided where possible, in favor of the pre-defined props and values on the primitive itself.
- * Tokens should be used where possible.
- */
-export declare type CustomStyles = Pick<CSSProperties, 'flexBasis' | 'flex' | 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight' | 'insetInlineStart' | 'insetInlineEnd' | 'insetBlockStart' | 'float' | 'margin' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInline' | 'marginBlock' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'>;
-export interface BasePrimitiveProps {
+import { type BoxXCSS } from '../internal/xcss';
+import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
+export declare 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;
     /**
      * 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.
-     * Used only internally.
      */
-    UNSAFE_style?: CSSProperties;
-}
+    style?: CSSProperties;
+};
 export declare type PublicBoxPropsBase = {
     /**
      * Defines border width.
@@ -65,5 +57,8 @@ export declare type PublicBoxPropsBase = {
      * Tokens representing CSS `paddingInlineEnd`.
      */
     paddingInlineEnd?: PaddingInlineEnd;
-    customStyles?: CustomStyles;
+    /**
+     * Safe subset of styles that can be applied as a classname.
+     */
+    xcss?: BoxXCSS;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Box, type BoxProps } from './components/box';
 export { default as Inline, type InlineProps, } from './components/inline.partial';
+export { xcss } from './internal/xcss';
 export { default as Stack, type StackProps } from './components/stack.partial';

package/dist/types/internal/style-maps.d.ts

@@ -0,0 +1,151 @@
+export declare const backgroundColorMap: {
+    readonly disabled: "var(--ds-background-disabled)";
+    readonly input: "var(--ds-background-input)";
+    readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
+    readonly neutral: "var(--ds-background-neutral)";
+    readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
+    readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
+    readonly selected: "var(--ds-background-selected)";
+    readonly 'selected.bold': "var(--ds-background-selected-bold)";
+    readonly 'brand.bold': "var(--ds-background-brand-bold)";
+    readonly danger: "var(--ds-background-danger)";
+    readonly 'danger.bold': "var(--ds-background-danger-bold)";
+    readonly warning: "var(--ds-background-warning)";
+    readonly 'warning.bold': "var(--ds-background-warning-bold)";
+    readonly success: "var(--ds-background-success)";
+    readonly 'success.bold': "var(--ds-background-success-bold)";
+    readonly discovery: "var(--ds-background-discovery)";
+    readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
+    readonly information: "var(--ds-background-information)";
+    readonly 'information.bold': "var(--ds-background-information-bold)";
+    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.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+};
+export declare type BackgroundColor = keyof typeof backgroundColorMap;
+export declare const borderColorMap: {
+    readonly 'color.border': "var(--ds-border)";
+    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 declare type BorderColor = keyof typeof borderColorMap;
+export declare const borderWidthMap: {
+    readonly 'size.0': "var(--ds-width-0)";
+    readonly 'size.050': "var(--ds-width-050)";
+    readonly 'size.100': "var(--ds-width-100)";
+};
+export declare type BorderWidth = keyof typeof borderWidthMap;
+export declare const borderRadiusMap: {
+    readonly 'radius.400': "var(--ds-radius-400)";
+    readonly 'radius.300': "var(--ds-radius-300)";
+    readonly 'radius.100': "var(--ds-radius-100)";
+    readonly 'radius.050': "var(--ds-radius-050)";
+    readonly 'radius.200': "var(--ds-radius-200)";
+};
+export declare type BorderRadius = keyof typeof borderRadiusMap;
+export declare const paddingMap: {
+    readonly 'space.0': "var(--ds-space-0)";
+    readonly 'space.025': "var(--ds-space-025)";
+    readonly 'space.050': "var(--ds-space-050)";
+    readonly 'space.075': "var(--ds-space-075)";
+    readonly 'space.100': "var(--ds-space-100)";
+    readonly 'space.150': "var(--ds-space-150)";
+    readonly 'space.200': "var(--ds-space-200)";
+    readonly 'space.250': "var(--ds-space-250)";
+    readonly 'space.300': "var(--ds-space-300)";
+    readonly 'space.400': "var(--ds-space-400)";
+    readonly 'space.500': "var(--ds-space-500)";
+    readonly 'space.600': "var(--ds-space-600)";
+    readonly 'space.800': "var(--ds-space-800)";
+    readonly 'space.1000': "var(--ds-space-1000)";
+};
+export declare type Padding = keyof typeof paddingMap;
+export declare type PaddingBlock = keyof typeof paddingMap;
+export declare type PaddingBlockStart = keyof typeof paddingMap;
+export declare type PaddingBlockEnd = keyof typeof paddingMap;
+export declare type PaddingInline = keyof typeof paddingMap;
+export declare type PaddingInlineStart = keyof typeof paddingMap;
+export declare type PaddingInlineEnd = keyof typeof paddingMap;
+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 declare type TextColor = keyof typeof textColorMap;
+export declare 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";
+};
+export declare type Width = keyof typeof dimensionMap;
+export declare type Height = keyof typeof dimensionMap;
+export declare type MinWidth = keyof typeof dimensionMap;
+export declare type MaxWidth = keyof typeof dimensionMap;
+export declare type MinHeight = keyof typeof dimensionMap;
+export declare type MaxHeight = keyof typeof dimensionMap;
+export declare type TokenisedProps = {
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    borderWidth?: BorderWidth;
+    color?: TextColor;
+    height?: Height;
+    minHeight?: MinHeight;
+    minWidth?: MinWidth;
+    maxHeight?: MaxHeight;
+    maxWidth?: MaxWidth;
+    padding?: Padding;
+    paddingBlock?: Padding;
+    paddingInline?: Padding;
+    paddingBlockStart?: Padding;
+    paddingBlockEnd?: Padding;
+    paddingInlineStart?: Padding;
+    paddingInlineEnd?: Padding;
+    width?: Width;
+};

package/dist/types/internal/xcss.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { css as cssEmotion } from '@emotion/react';
+import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos, SerializedStyles } from '@emotion/serialize';
+import { Box, Inline } from '../index';
+import { TokenisedProps } from './style-maps';
+declare const uniqueSymbol: unique symbol;
+/**
+ * Only exposed for testing.
+ * @internal
+ */
+export declare const transformStyles: (styleObj?: CSSObject | CSSObject[] | undefined) => CSSObject | CSSObject[] | undefined;
+/**
+ * @internal used in primitives
+ * @returns
+ */
+export declare const parseXcss: (args: SafeCSS) => ReturnType<typeof cssEmotion>;
+declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+declare const boxWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
+declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+declare type SafeCSS = XCSS | XCSS[];
+declare type AllowedBoxStyles = keyof SafeCSSObject;
+declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
+export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: 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 declare type BoxStyles = SerializedStyles & {
+    [boxTag]: true;
+};
+export declare type BoxXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineTag: unique symbol;
+export declare type InlineStyles = SerializedStyles & {
+    [inlineTag]: true;
+};
+export declare type InlineXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "@emotion/serialize": "^1.1.0",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
@@ -88,4 +89,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}