@atlaskit/primitives 0.4.1 → 0.4.2

package/dist/esm/components/box.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "customStyles", "testId"],
-  _excluded2 = ["style", "className"];
-import React, { forwardRef } from 'react';
+var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId", "xcss"],
+  _excluded2 = ["className"];
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react';
+import { parseXcss } from '../internal/xcss';
 import { BaseBox } from './internal/base-box.partial';
 /**
  * __Box__
@@ -45,13 +48,14 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'static' : _ref$position,
-    customStyles = _ref.customStyles,
+    style = _ref.style,
     testId = _ref.testId,
+    xcss = _ref.xcss,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
-  var style = htmlAttributes.style,
-    className = htmlAttributes.className,
+  var spreadClass = htmlAttributes.className,
     safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
-  return /*#__PURE__*/React.createElement(BaseBox, _extends({
+  var className = xcss && parseXcss(xcss);
+  return jsx(BaseBox, _extends({
     as: as,
     color: color,
     backgroundColor: backgroundColor,
@@ -79,9 +83,13 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     width: width,
     display: display,
     position: position,
-    UNSAFE_style: customStyles,
+    style: style,
     testId: testId,
     ref: ref
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
+    css: className
   }, safeHtmlAttributes), children);
 });
+Box.displayName = 'Box';
 export default Box;

package/dist/esm/components/internal/base-box.partial.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["as", "className", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "UNSAFE_style", "testId"];
+var _excluded = ["as", "className", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -81,11 +81,11 @@ export var BaseBox = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
     _ref3$position = _ref3.position,
     position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    UNSAFE_style = _ref3.UNSAFE_style,
+    style = _ref3.style,
     testId = _ref3.testId,
     htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
   var Component = as || 'div';
-  var inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
+  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = jsx(Component, _extends({
     style: inlineStyles,
     ref: ref

package/dist/esm/index.js

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

package/dist/esm/internal/style-maps.js

@@ -0,0 +1,117 @@
+/* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+
+// TODO: All of these maps need to be codegen'd
+export var backgroundColorMap = {
+  disabled: "var(--ds-background-disabled, #091e4289)",
+  input: "var(--ds-background-input, #FAFBFC)",
+  'inverse.subtle': "var(--ds-background-inverse-subtle, #00000029)",
+  neutral: "var(--ds-background-neutral, #DFE1E6)",
+  'neutral.subtle': "var(--ds-background-neutral-subtle, transparent)",
+  'neutral.bold': "var(--ds-background-neutral-bold, #42526E)",
+  selected: "var(--ds-background-selected, #DEEBFF)",
+  'selected.bold': "var(--ds-background-selected-bold, #0052CC)",
+  'brand.bold': "var(--ds-background-brand-bold, #0052CC)",
+  danger: "var(--ds-background-danger, #FFEBE6)",
+  'danger.bold': "var(--ds-background-danger-bold, #DE350B)",
+  warning: "var(--ds-background-warning, #FFFAE6)",
+  'warning.bold': "var(--ds-background-warning-bold, #FFAB00)",
+  success: "var(--ds-background-success, #E3FCEF)",
+  'success.bold': "var(--ds-background-success-bold, #00875A)",
+  discovery: "var(--ds-background-discovery, #EAE6FF)",
+  'discovery.bold': "var(--ds-background-discovery-bold, #5243AA)",
+  information: "var(--ds-background-information, #DEEBFF)",
+  'information.bold': "var(--ds-background-information-bold, #0052CC)",
+  'color.blanket': "var(--ds-blanket, #091e4289)",
+  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
+  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
+  'elevation.surface': "var(--ds-surface, #FFFFFF)",
+  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
+  'elevation.surface.raised': "var(--ds-surface-raised, #FFFFFF)",
+  'elevation.surface.sunken': "var(--ds-surface-sunken, #F4F5F7)"
+};
+export var borderColorMap = {
+  'color.border': "var(--ds-border, #091e4221)",
+  disabled: "var(--ds-border-disabled, #FAFBFC)",
+  focused: "var(--ds-border-focused, #4C9AFF)",
+  input: "var(--ds-border-input, #FAFBFC)",
+  inverse: "var(--ds-border-inverse, #FFFFFF)",
+  selected: "var(--ds-border-selected, #0052CC)",
+  brand: "var(--ds-border-brand, #0052CC)",
+  danger: "var(--ds-border-danger, #FF5630)",
+  warning: "var(--ds-border-warning, #FFC400)",
+  success: "var(--ds-border-success, #00875A)",
+  discovery: "var(--ds-border-discovery, #998DD9)",
+  information: "var(--ds-border-information, #0065FF)",
+  bold: "var(--ds-border-bold, #344563)"
+};
+export var borderWidthMap = {
+  'size.0': "var(--ds-width-0, 0)",
+  'size.050': "var(--ds-width-050, 1px)",
+  'size.100': "var(--ds-width-100, 2px)"
+};
+export var borderRadiusMap = {
+  'radius.400': "var(--ds-radius-400, 16px)",
+  'radius.300': "var(--ds-radius-300, 12px)",
+  'radius.100': "var(--ds-radius-100, 4px)",
+  'radius.050': "var(--ds-radius-050, 2px)",
+  'radius.200': "var(--ds-radius-200, 8px)"
+};
+export var paddingMap = {
+  'space.0': "var(--ds-space-0, 0px)",
+  'space.025': "var(--ds-space-025, 2px)",
+  'space.050': "var(--ds-space-050, 4px)",
+  'space.075': "var(--ds-space-075, 6px)",
+  'space.100': "var(--ds-space-100, 8px)",
+  'space.150': "var(--ds-space-150, 12px)",
+  'space.200': "var(--ds-space-200, 16px)",
+  'space.250': "var(--ds-space-250, 20px)",
+  'space.300': "var(--ds-space-300, 24px)",
+  'space.400': "var(--ds-space-400, 32px)",
+  'space.500': "var(--ds-space-500, 40px)",
+  'space.600': "var(--ds-space-600, 48px)",
+  'space.800': "var(--ds-space-800, 64px)",
+  'space.1000': "var(--ds-space-1000, 80px)"
+};
+export var textColorMap = {
+  'color.text': "var(--ds-text, #172B4D)",
+  'accent.red': "var(--ds-text-accent-red, #DE350B)",
+  'accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
+  'accent.orange': "var(--ds-text-accent-orange, #F18D13)",
+  'accent.orange.bolder': "var(--ds-text-accent-orange-bolder, #B65C02)",
+  'accent.yellow': "var(--ds-text-accent-yellow, #FF991F)",
+  'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder, #FF8B00)",
+  'accent.green': "var(--ds-text-accent-green, #00875A)",
+  'accent.green.bolder': "var(--ds-text-accent-green-bolder, #006644)",
+  'accent.teal': "var(--ds-text-accent-teal, #00A3BF)",
+  'accent.teal.bolder': "var(--ds-text-accent-teal-bolder, #008DA6)",
+  'accent.blue': "var(--ds-text-accent-blue, #0052CC)",
+  'accent.blue.bolder': "var(--ds-text-accent-blue-bolder, #0747A6)",
+  'accent.purple': "var(--ds-text-accent-purple, #5243AA)",
+  'accent.purple.bolder': "var(--ds-text-accent-purple-bolder, #403294)",
+  'accent.magenta': "var(--ds-text-accent-magenta, #E774BB)",
+  'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder, #DA62AC)",
+  'accent.gray': "var(--ds-text-accent-gray, #505F79)",
+  'accent.gray.bolder': "var(--ds-text-accent-gray-bolder, #172B4D)",
+  disabled: "var(--ds-text-disabled, #A5ADBA)",
+  inverse: "var(--ds-text-inverse, #FFFFFF)",
+  selected: "var(--ds-text-selected, #0052CC)",
+  brand: "var(--ds-text-brand, #0065FF)",
+  danger: "var(--ds-text-danger, #DE350B)",
+  warning: "var(--ds-text-warning, #974F0C)",
+  'warning.inverse': "var(--ds-text-warning-inverse, #172B4D)",
+  success: "var(--ds-text-success, #006644)",
+  discovery: "var(--ds-text-discovery, #403294)",
+  information: "var(--ds-text-information, #0052CC)",
+  subtlest: "var(--ds-text-subtlest, #7A869A)",
+  subtle: "var(--ds-text-subtle, #42526E)"
+};
+export var dimensionMap = {
+  '100%': '100%',
+  'size.100': '16px',
+  'size.200': '24px',
+  'size.300': '32px',
+  'size.400': '40px',
+  'size.500': '48px',
+  'size.600': '96px',
+  'size.1000': '192px'
+};

package/dist/esm/internal/xcss.js

@@ -0,0 +1,100 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _typeof from "@babel/runtime/helpers/typeof";
+import { css as cssEmotion } from '@emotion/react';
+import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, textColorMap } from './style-maps';
+var tokensMap = {
+  backgroundColor: backgroundColorMap,
+  borderColor: borderColorMap,
+  borderRadius: borderRadiusMap,
+  borderWidth: borderWidthMap,
+  color: textColorMap,
+  height: dimensionMap,
+  maxHeight: dimensionMap,
+  maxWidth: dimensionMap,
+  minHeight: dimensionMap,
+  minWidth: dimensionMap,
+  padding: paddingMap,
+  paddingBlock: paddingMap,
+  paddingBlockEnd: paddingMap,
+  paddingBlockStart: paddingMap,
+  paddingInline: paddingMap,
+  paddingInlineEnd: paddingMap,
+  paddingInlineStart: paddingMap,
+  width: dimensionMap
+};
+var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+
+/**
+ * Only exposed for testing.
+ * @internal
+ */
+export var transformStyles = function transformStyles(styleObj) {
+  if (!styleObj || _typeof(styleObj) !== 'object') {
+    return styleObj;
+  }
+
+  // If styles are defined as an CSSObject[], recursively call on each element until we reach CSSObject
+  if (Array.isArray(styleObj)) {
+    return styleObj.map(transformStyles);
+  }
+
+  // Modifies styleObj in place. Be careful.
+  Object.entries(styleObj).forEach(function (_ref) {
+    var _process, _process$env;
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+      // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
+      if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
+        throw new Error("Styles not supported for key '".concat(key, "'."));
+      }
+    }
+
+    // If key is a pseudo class or a pseudo element, then value should be an object.
+    // So, call transformStyles on the value
+    if (/^::?.*$/.test(key)) {
+      styleObj[key] = transformStyles(value);
+      return;
+    }
+
+    // TODO: Deal with media queries
+
+    // We have now dealt with all the special cases, so,
+    // check whether what remains is a style property
+    // that can be transformed.
+    if (!(key in tokensMap)) {
+      return;
+    }
+    var tokenValue = tokensMap[key][value];
+    if (!tokenValue) {
+      throw new Error('Invalid Token');
+    }
+    styleObj[key] = tokenValue;
+  });
+  return styleObj;
+};
+export var xcss = function xcss(style) {
+  var transformedStyles = transformStyles(style);
+  return {
+    symbol: uniqueSymbol,
+    styles: cssEmotion(transformedStyles)
+  };
+};
+
+/**
+ * @internal used in primitives
+ * @returns
+ */
+export var parseXcss = function parseXcss(args) {
+  if (Array.isArray(args)) {
+    // @ts-expect-error FIXME
+    return args.map(parseXcss);
+  }
+  var symbol = args.symbol,
+    styles = args.styles;
+  if ((typeof process === "undefined" ? "undefined" : _typeof(process)) && process.env.NODE_ENV === 'development' && symbol !== uniqueSymbol) {
+    throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
+  }
+  return styles;
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"sideEffects": false
 }

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

@@ -1,8 +1,9 @@
+/** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
 import { BaseBoxProps } from './internal/base-box.partial';
-import { BoxResponsiveProp } from './internal/types';
-import { PublicBoxPropsBase } from './types';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | 'UNSAFE_style' | BoxResponsiveProp> & PublicBoxPropsBase;
+import type { BoxResponsiveProp } from './internal/types';
+import type { PublicBoxPropsBase } from './types';
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
 declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__

package/dist/types/components/internal/base-box.partial.d.ts

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, React
 import { Layer } from '../../constants';
 import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
-export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
@@ -26,54 +26,80 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     children?: ReactNode;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing color with a fallback.
      */
     color?: TextColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing background color with a fallback.
      */
     backgroundColor?: BackgroundColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing shadow with a fallback
      */
     shadow?: Shadow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border style.
      */
     borderStyle?: BorderStyle;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border width.
      */
     borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing border color with a fallback.
      */
     borderColor?: BorderColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border radius.
      */
     borderRadius?: BorderRadius;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Used for providing a z-index.
      */
     layer?: Layer;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Shorthand `flex` property.
      */
     flex?: Flex;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex grow factor -- how much remaining space should be taken up.
      */
     flexGrow?: FlexGrow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex shrink factor -- how the item will shrink relative to other flex items in the container.
      */
     flexShrink?: FlexShrink;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Overrides the `align-items` value.
      */
     alignSelf?: AlignSelf;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box.
      * Shorthand for overflow-inline and overflow-block.
      *
@@ -82,10 +108,14 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     overflow?: Overflow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the horizontal direction (inline).
      */
     overflowInline?: OverflowInline;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the vertical direction (block).
      */
     overflowBlock?: OverflowBlock;
@@ -127,23 +157,32 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing width.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     width?: Width;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing height.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     height?: Height;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines display type and layout. Defaults to `block`.
      */
     display?: Display | ResponsiveObject<Display>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * CSS position property.
      */
     position?: Position;
+    /**
+     * Forwarded ref element
+     */
     ref?: ComponentPropsWithRef<T>['ref'];
 };
 export declare type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;

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 { SafeCSS } 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?: SafeCSS;
 };

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;
+};