@atlaskit/primitives 0.12.4 → 0.12.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/inline.js +6 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/cjs/xcss/style-maps.partial.js +10 -2
  5. package/dist/es2019/components/inline.js +6 -1
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/es2019/xcss/style-maps.partial.js +10 -2
  8. package/dist/esm/components/inline.js +6 -1
  9. package/dist/esm/version.json +1 -1
  10. package/dist/esm/xcss/style-maps.partial.js +10 -2
  11. package/dist/types/components/inline.d.ts +6 -1
  12. package/dist/types/xcss/style-maps.partial.d.ts +10 -2
  13. package/dist/types/xcss/xcss.d.ts +3 -3
  14. package/dist/types-ts4.5/components/inline.d.ts +6 -1
  15. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +10 -2
  16. package/dist/types-ts4.5/xcss/xcss.d.ts +3 -3
  17. package/package.json +2 -2
  18. package/report.api.md +42 -6
  19. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +22 -0
  20. package/tmp/api-report-tmp.d.ts +20 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.12.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`3be327cdd6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3be327cdd6a) - Allow styles to be applied to Inline through xcss.
8
+
9
+ ## 0.12.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`55be182b904`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55be182b904) - Regenerates codegen'd artifacts as a result of introducting new design tokens.
14
+ - Updated dependencies
15
+
3
16
  ## 0.12.4
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/components/inline.js CHANGED
@@ -7,6 +7,7 @@ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _react2 = require("@emotion/react");
9
9
  var _styleMaps = require("../xcss/style-maps.partial");
10
+ var _xcss = require("../xcss/xcss");
10
11
  /* eslint-disable @repo/internal/styles/no-exported-styles */
11
12
  /** @jsx jsx */
12
13
 
@@ -99,6 +100,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
99
100
  space = _ref2.space,
100
101
  rowSpace = _ref2.rowSpace,
101
102
  separator = _ref2.separator,
103
+ xcss = _ref2.xcss,
102
104
  testId = _ref2.testId,
103
105
  rawChildren = _ref2.children;
104
106
  var Component = as || 'div';
@@ -109,8 +111,11 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
109
111
  }, separator && index > 0 ? separatorComponent : null, child);
110
112
  }) : rawChildren;
111
113
  var justifyContent = spread || alignInline;
114
+ var className = xcss && (0, _xcss.parseXcss)(xcss);
112
115
  return (0, _react2.jsx)(Component, {
113
- css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
116
+ css: [
117
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
118
+ className, baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
114
119
  "data-testid": testId,
115
120
  ref: ref
116
121
  }, children);
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.4",
3
+ "version": "0.12.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -60,14 +60,15 @@ exports.spaceMap = spaceMap;
60
60
 
61
61
  /**
62
62
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
63
- * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
63
+ * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
64
64
  * @codegenId colors
65
65
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
66
66
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
67
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
67
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
68
68
  */
69
69
  var borderColorMap = {
70
70
  'color.border': "var(--ds-border, #091e4221)",
71
+ 'color.border.accent.lime': "var(--ds-border-accent-lime, #6A9A23)",
71
72
  'color.border.accent.red': "var(--ds-border-accent-red, #FF5630)",
72
73
  'color.border.accent.orange': "var(--ds-border-accent-orange, #D94008)",
73
74
  'color.border.accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
@@ -92,6 +93,10 @@ var borderColorMap = {
92
93
  };
93
94
  exports.borderColorMap = borderColorMap;
94
95
  var backgroundColorMap = {
96
+ 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
97
+ 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
98
+ 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
99
+ 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
95
100
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
96
101
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
97
102
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
@@ -208,6 +213,8 @@ var shadowMap = {
208
213
  exports.shadowMap = shadowMap;
209
214
  var textColorMap = {
210
215
  'color.text': "var(--ds-text, #172B4D)",
216
+ 'color.text.accent.lime': "var(--ds-text-accent-lime, #4C6B1F)",
217
+ 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder, #37471F)",
211
218
  'color.text.accent.red': "var(--ds-text-accent-red, #DE350B)",
212
219
  'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
213
220
  'color.text.accent.orange': "var(--ds-text-accent-orange, #F18D13)",
@@ -242,6 +249,7 @@ var textColorMap = {
242
249
  exports.textColorMap = textColorMap;
243
250
  var fillMap = {
244
251
  'color.icon': "var(--ds-icon, #505F79)",
252
+ 'color.icon.accent.lime': "var(--ds-icon-accent-lime, #6A9A23)",
245
253
  'color.icon.accent.red': "var(--ds-icon-accent-red, #FF5630)",
246
254
  'color.icon.accent.orange': "var(--ds-icon-accent-orange, #D94008)",
247
255
  'color.icon.accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
package/dist/es2019/components/inline.js CHANGED
@@ -3,6 +3,7 @@
3
3
  import { Children, forwardRef, Fragment, memo } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { spaceStylesMap } from '../xcss/style-maps.partial';
6
+ import { parseXcss } from '../xcss/xcss';
6
7
  const alignItemsMap = {
7
8
  center: css({
8
9
  alignItems: 'center'
@@ -89,6 +90,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
89
90
  space,
90
91
  rowSpace,
91
92
  separator,
93
+ xcss,
92
94
  testId,
93
95
  children: rawChildren
94
96
  }, ref) => {
@@ -100,8 +102,11 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
100
102
  }, separator && index > 0 ? separatorComponent : null, child);
101
103
  }) : rawChildren;
102
104
  const justifyContent = spread || alignInline;
105
+ const className = xcss && parseXcss(xcss);
103
106
  return jsx(Component, {
104
- css: [baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
107
+ css: [
108
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
109
+ className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
105
110
  "data-testid": testId,
106
111
  ref: ref
107
112
  }, children);
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.4",
3
+ "version": "0.12.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -48,14 +48,15 @@ export const spaceMap = {
48
48
  */
49
49
  /**
50
50
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
51
- * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
51
+ * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
52
52
  * @codegenId colors
53
53
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
54
54
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
55
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
55
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
56
56
  */
57
57
  export const borderColorMap = {
58
58
  'color.border': "var(--ds-border, #091e4221)",
59
+ 'color.border.accent.lime': "var(--ds-border-accent-lime, #6A9A23)",
59
60
  'color.border.accent.red': "var(--ds-border-accent-red, #FF5630)",
60
61
  'color.border.accent.orange': "var(--ds-border-accent-orange, #D94008)",
61
62
  'color.border.accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
@@ -79,6 +80,10 @@ export const borderColorMap = {
79
80
  'color.border.bold': "var(--ds-border-bold, #344563)"
80
81
  };
81
82
  export const backgroundColorMap = {
83
+ 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
84
+ 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
85
+ 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
86
+ 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
82
87
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
83
88
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
84
89
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
@@ -193,6 +198,8 @@ export const shadowMap = {
193
198
  };
194
199
  export const textColorMap = {
195
200
  'color.text': "var(--ds-text, #172B4D)",
201
+ 'color.text.accent.lime': "var(--ds-text-accent-lime, #4C6B1F)",
202
+ 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder, #37471F)",
196
203
  'color.text.accent.red': "var(--ds-text-accent-red, #DE350B)",
197
204
  'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
198
205
  'color.text.accent.orange': "var(--ds-text-accent-orange, #F18D13)",
@@ -226,6 +233,7 @@ export const textColorMap = {
226
233
  };
227
234
  export const fillMap = {
228
235
  'color.icon': "var(--ds-icon, #505F79)",
236
+ 'color.icon.accent.lime': "var(--ds-icon-accent-lime, #6A9A23)",
229
237
  'color.icon.accent.red': "var(--ds-icon-accent-red, #FF5630)",
230
238
  'color.icon.accent.orange': "var(--ds-icon-accent-orange, #D94008)",
231
239
  'color.icon.accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
package/dist/esm/components/inline.js CHANGED
@@ -3,6 +3,7 @@
3
3
  import { Children, forwardRef, Fragment, memo } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { spaceStylesMap } from '../xcss/style-maps.partial';
6
+ import { parseXcss } from '../xcss/xcss';
6
7
  var alignItemsMap = {
7
8
  center: css({
8
9
  alignItems: 'center'
@@ -92,6 +93,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
92
93
  space = _ref2.space,
93
94
  rowSpace = _ref2.rowSpace,
94
95
  separator = _ref2.separator,
96
+ xcss = _ref2.xcss,
95
97
  testId = _ref2.testId,
96
98
  rawChildren = _ref2.children;
97
99
  var Component = as || 'div';
@@ -102,8 +104,11 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
102
104
  }, separator && index > 0 ? separatorComponent : null, child);
103
105
  }) : rawChildren;
104
106
  var justifyContent = spread || alignInline;
107
+ var className = xcss && parseXcss(xcss);
105
108
  return jsx(Component, {
106
- css: [baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
109
+ css: [
110
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
111
+ className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
107
112
  "data-testid": testId,
108
113
  ref: ref
109
114
  }, children);
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.4",
3
+ "version": "0.12.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -49,14 +49,15 @@ export var spaceMap = {
49
49
  */
50
50
  /**
51
51
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
52
- * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
52
+ * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
53
53
  * @codegenId colors
54
54
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
55
55
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
56
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
56
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
57
57
  */
58
58
  export var borderColorMap = {
59
59
  'color.border': "var(--ds-border, #091e4221)",
60
+ 'color.border.accent.lime': "var(--ds-border-accent-lime, #6A9A23)",
60
61
  'color.border.accent.red': "var(--ds-border-accent-red, #FF5630)",
61
62
  'color.border.accent.orange': "var(--ds-border-accent-orange, #D94008)",
62
63
  'color.border.accent.yellow': "var(--ds-border-accent-yellow, #FFAB00)",
@@ -80,6 +81,10 @@ export var borderColorMap = {
80
81
  'color.border.bold': "var(--ds-border-bold, #344563)"
81
82
  };
82
83
  export var backgroundColorMap = {
84
+ 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
85
+ 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
86
+ 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
87
+ 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
83
88
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
84
89
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
85
90
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
@@ -194,6 +199,8 @@ export var shadowMap = {
194
199
  };
195
200
  export var textColorMap = {
196
201
  'color.text': "var(--ds-text, #172B4D)",
202
+ 'color.text.accent.lime': "var(--ds-text-accent-lime, #4C6B1F)",
203
+ 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder, #37471F)",
197
204
  'color.text.accent.red': "var(--ds-text-accent-red, #DE350B)",
198
205
  'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder, #BF2600)",
199
206
  'color.text.accent.orange': "var(--ds-text-accent-orange, #F18D13)",
@@ -227,6 +234,7 @@ export var textColorMap = {
227
234
  };
228
235
  export var fillMap = {
229
236
  'color.icon': "var(--ds-icon, #505F79)",
237
+ 'color.icon.accent.lime': "var(--ds-icon-accent-lime, #6A9A23)",
230
238
  'color.icon.accent.red': "var(--ds-icon-accent-red, #FF5630)",
231
239
  'color.icon.accent.orange': "var(--ds-icon-accent-orange, #D94008)",
232
240
  'color.icon.accent.yellow': "var(--ds-icon-accent-yellow, #FFAB00)",
package/dist/types/components/inline.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import { ElementType, ReactNode } from 'react';
3
3
  import { type Space } from '../xcss/style-maps.partial';
4
+ import { type InlineXCSS } from '../xcss/xcss';
4
5
  export interface InlineProps<T extends ElementType = 'div'> {
5
6
  /**
6
7
  * The DOM element to render as the Inline. Defaults to `div`.
@@ -39,6 +40,10 @@ export interface InlineProps<T extends ElementType = 'div'> {
39
40
  * Renders a separator string between each child.
40
41
  */
41
42
  separator?: string;
43
+ /**
44
+ * Safe subset of styles that can be applied as a classname.
45
+ */
46
+ xcss?: InlineXCSS | Array<InlineXCSS | false | undefined>;
42
47
  /**
43
48
  * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
44
49
  */
@@ -71,5 +76,5 @@ export type Grow = 'hug' | 'fill';
71
76
  * ```
72
77
  *
73
78
  */
74
- declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
79
+ declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator" | "xcss"> & import("react").RefAttributes<any>>>;
75
80
  export default Inline;
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -66,14 +66,15 @@ export type Space = keyof typeof spaceMap;
66
66
  */
67
67
  /**
68
68
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
- * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
69
+ * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
70
70
  * @codegenId colors
71
71
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
72
72
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
74
74
  */
75
75
  export declare const borderColorMap: {
76
76
  readonly 'color.border': "var(--ds-border)";
77
+ readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
77
78
  readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
78
79
  readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
79
80
  readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
@@ -98,6 +99,10 @@ export declare const borderColorMap: {
98
99
  };
99
100
  export type BorderColor = keyof typeof borderColorMap;
100
101
  export declare const backgroundColorMap: {
102
+ readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
103
+ readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
104
+ readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
105
+ readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
101
106
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
102
107
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
103
108
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
@@ -214,6 +219,8 @@ export declare const shadowMap: {
214
219
  export type Shadow = keyof typeof shadowMap;
215
220
  export declare const textColorMap: {
216
221
  readonly 'color.text': "var(--ds-text)";
222
+ readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
223
+ readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
217
224
  readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
218
225
  readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
219
226
  readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
@@ -248,6 +255,7 @@ export declare const textColorMap: {
248
255
  export type TextColor = keyof typeof textColorMap;
249
256
  export declare const fillMap: {
250
257
  readonly 'color.icon': "var(--ds-icon)";
258
+ readonly 'color.icon.accent.lime': "var(--ds-icon-accent-lime)";
251
259
  readonly 'color.icon.accent.red': "var(--ds-icon-accent-red)";
252
260
  readonly 'color.icon.accent.orange': "var(--ds-icon-accent-orange)";
253
261
  readonly 'color.icon.accent.yellow': "var(--ds-icon-accent-yellow)";
package/dist/types/xcss/xcss.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const inlineWrapper: (style: any) => {
28
28
  };
29
29
  type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
30
30
  type AllowedBoxStyles = keyof SafeCSSObject;
31
- type AllowedInlineStyles = 'backgroundColor' | 'padding';
31
+ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
32
32
  /**
33
33
  * ### xcss
34
34
  *
@@ -41,8 +41,8 @@ type AllowedInlineStyles = 'backgroundColor' | 'padding';
41
41
  * })
42
42
  * ```
43
43
  */
44
- 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): {
45
- 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;
44
+ 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<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
45
+ 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" | "xcss"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
46
46
  };
47
47
  declare const boxTag: unique symbol;
48
48
  export type BoxStyles = SerializedStyles & {
package/dist/types-ts4.5/components/inline.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import { ElementType, ReactNode } from 'react';
3
3
  import { type Space } from '../xcss/style-maps.partial';
4
+ import { type InlineXCSS } from '../xcss/xcss';
4
5
  export interface InlineProps<T extends ElementType = 'div'> {
5
6
  /**
6
7
  * The DOM element to render as the Inline. Defaults to `div`.
@@ -39,6 +40,10 @@ export interface InlineProps<T extends ElementType = 'div'> {
39
40
  * Renders a separator string between each child.
40
41
  */
41
42
  separator?: string;
43
+ /**
44
+ * Safe subset of styles that can be applied as a classname.
45
+ */
46
+ xcss?: InlineXCSS | Array<InlineXCSS | false | undefined>;
42
47
  /**
43
48
  * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
44
49
  */
@@ -71,5 +76,5 @@ export type Grow = 'hug' | 'fill';
71
76
  * ```
72
77
  *
73
78
  */
74
- declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
79
+ declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator" | "xcss"> & import("react").RefAttributes<any>>>;
75
80
  export default Inline;
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -66,14 +66,15 @@ export type Space = keyof typeof spaceMap;
66
66
  */
67
67
  /**
68
68
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
69
- * @codegen <<SignedSource::ca2805602ea60d52a8c2cf8926fb97d3>>
69
+ * @codegen <<SignedSource::d072e2cad501ea7aa5c4171d8c1b5d17>>
70
70
  * @codegenId colors
71
71
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
72
72
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::224665ba07a6c41e68ce15f72b24cd92>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::7e5a6402120dcaf0373e364561a78a73>>
74
74
  */
75
75
  export declare const borderColorMap: {
76
76
  readonly 'color.border': "var(--ds-border)";
77
+ readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
77
78
  readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
78
79
  readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
79
80
  readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
@@ -98,6 +99,10 @@ export declare const borderColorMap: {
98
99
  };
99
100
  export type BorderColor = keyof typeof borderColorMap;
100
101
  export declare const backgroundColorMap: {
102
+ readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
103
+ readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
104
+ readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
105
+ readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
101
106
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
102
107
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
103
108
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
@@ -214,6 +219,8 @@ export declare const shadowMap: {
214
219
  export type Shadow = keyof typeof shadowMap;
215
220
  export declare const textColorMap: {
216
221
  readonly 'color.text': "var(--ds-text)";
222
+ readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
223
+ readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
217
224
  readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
218
225
  readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
219
226
  readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
@@ -248,6 +255,7 @@ export declare const textColorMap: {
248
255
  export type TextColor = keyof typeof textColorMap;
249
256
  export declare const fillMap: {
250
257
  readonly 'color.icon': "var(--ds-icon)";
258
+ readonly 'color.icon.accent.lime': "var(--ds-icon-accent-lime)";
251
259
  readonly 'color.icon.accent.red': "var(--ds-icon-accent-red)";
252
260
  readonly 'color.icon.accent.orange': "var(--ds-icon-accent-orange)";
253
261
  readonly 'color.icon.accent.yellow': "var(--ds-icon-accent-yellow)";
package/dist/types-ts4.5/xcss/xcss.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const inlineWrapper: (style: any) => {
28
28
  };
29
29
  type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
30
30
  type AllowedBoxStyles = keyof SafeCSSObject;
31
- type AllowedInlineStyles = 'backgroundColor' | 'padding';
31
+ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
32
32
  /**
33
33
  * ### xcss
34
34
  *
@@ -41,8 +41,8 @@ type AllowedInlineStyles = 'backgroundColor' | 'padding';
41
41
  * })
42
42
  * ```
43
43
  */
44
- 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): {
45
- 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;
44
+ 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<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
45
+ 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" | "xcss"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
46
46
  };
47
47
  declare const boxTag: unique symbol;
48
48
  export type BoxStyles = SerializedStyles & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.4",
3
+ "version": "0.12.6",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -94,7 +94,7 @@
94
94
  },
95
95
  "dependencies": {
96
96
  "@atlaskit/ds-lib": "^2.2.0",
97
- "@atlaskit/tokens": "^1.6.0",
97
+ "@atlaskit/tokens": "^1.8.0",
98
98
  "@babel/runtime": "^7.0.0",
99
99
  "@emotion/react": "^11.7.1",
100
100
  "@emotion/serialize": "^1.1.0",
package/report.api.md CHANGED
@@ -58,9 +58,6 @@ const alignSelfMap: {
58
58
  // @public (undocumented)
59
59
  type AllowedBoxStyles = keyof SafeCSSObject;
60
60
 
61
- // @public (undocumented)
62
- type AllowedInlineStyles = 'backgroundColor' | 'padding';
63
-
64
61
  // @public (undocumented)
65
62
  type As =
66
63
  | 'article'
@@ -85,6 +82,10 @@ type BackgroundColor = keyof typeof backgroundColorMap;
85
82
 
86
83
  // @public (undocumented)
87
84
  const backgroundColorMap: {
85
+ readonly 'color.background.accent.lime.subtlest': 'var(--ds-background-accent-lime-subtlest)';
86
+ readonly 'color.background.accent.lime.subtler': 'var(--ds-background-accent-lime-subtler)';
87
+ readonly 'color.background.accent.lime.subtle': 'var(--ds-background-accent-lime-subtle)';
88
+ readonly 'color.background.accent.lime.bolder': 'var(--ds-background-accent-lime-bolder)';
88
89
  readonly 'color.background.accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
89
90
  readonly 'color.background.accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
90
91
  readonly 'color.background.accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
@@ -230,6 +231,7 @@ type BorderColor = keyof typeof borderColorMap;
230
231
  // @public
231
232
  const borderColorMap: {
232
233
  readonly 'color.border': 'var(--ds-border)';
234
+ readonly 'color.border.accent.lime': 'var(--ds-border-accent-lime)';
233
235
  readonly 'color.border.accent.red': 'var(--ds-border-accent-red)';
234
236
  readonly 'color.border.accent.orange': 'var(--ds-border-accent-orange)';
235
237
  readonly 'color.border.accent.yellow': 'var(--ds-border-accent-yellow)';
@@ -368,6 +370,7 @@ type Fill = keyof typeof fillMap;
368
370
  // @public (undocumented)
369
371
  const fillMap: {
370
372
  readonly 'color.icon': 'var(--ds-icon)';
373
+ readonly 'color.icon.accent.lime': 'var(--ds-icon-accent-lime)';
371
374
  readonly 'color.icon.accent.red': 'var(--ds-icon-accent-red)';
372
375
  readonly 'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
373
376
  readonly 'color.icon.accent.yellow': 'var(--ds-icon-accent-yellow)';
@@ -450,6 +453,7 @@ export const Inline: MemoExoticComponent<
450
453
  | 'space'
451
454
  | 'spread'
452
455
  | 'testId'
456
+ | 'xcss'
453
457
  > &
454
458
  RefAttributes<any>
455
459
  >
@@ -469,6 +473,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
469
473
  space?: Space;
470
474
  spread?: Spread;
471
475
  testId?: string;
476
+ xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
472
477
  }
473
478
 
474
479
  // @public (undocumented)
@@ -482,6 +487,11 @@ type InlineStyles = SerializedStyles & {
482
487
  // @public (undocumented)
483
488
  const inlineTag: unique symbol;
484
489
 
490
+ // @public (undocumented)
491
+ type InlineXCSS = {
492
+ readonly [uniqueSymbol]: InlineStyles;
493
+ };
494
+
485
495
  // @public (undocumented)
486
496
  type Layer = keyof typeof layerMap;
487
497
 
@@ -621,6 +631,31 @@ const spaceMap: {
621
631
  'space.1000': 'var(--ds-space-1000)';
622
632
  };
623
633
 
634
+ // @public (undocumented)
635
+ type Spacing =
636
+ | 'columnGap'
637
+ | 'gap'
638
+ | 'inset'
639
+ | 'insetBlock'
640
+ | 'insetBlockEnd'
641
+ | 'insetBlockStart'
642
+ | 'insetInline'
643
+ | 'insetInlineEnd'
644
+ | 'insetInlineStart'
645
+ | 'outlineOffset'
646
+ | 'padding'
647
+ | 'paddingBlock'
648
+ | 'paddingBlockEnd'
649
+ | 'paddingBlockStart'
650
+ | 'paddingBottom'
651
+ | 'paddingInline'
652
+ | 'paddingInlineEnd'
653
+ | 'paddingInlineStart'
654
+ | 'paddingLeft'
655
+ | 'paddingRight'
656
+ | 'paddingTop'
657
+ | 'rowGap';
658
+
624
659
  // @public (undocumented)
625
660
  type Spread = 'space-between';
626
661
 
@@ -664,6 +699,8 @@ type TextColor = keyof typeof textColorMap;
664
699
  // @public (undocumented)
665
700
  const textColorMap: {
666
701
  readonly 'color.text': 'var(--ds-text)';
702
+ readonly 'color.text.accent.lime': 'var(--ds-text-accent-lime)';
703
+ readonly 'color.text.accent.lime.bolder': 'var(--ds-text-accent-lime-bolder)';
667
704
  readonly 'color.text.accent.red': 'var(--ds-text-accent-red)';
668
705
  readonly 'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
669
706
  readonly 'color.text.accent.orange': 'var(--ds-text-accent-orange)';
@@ -792,9 +829,7 @@ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
792
829
  | ScopedSafeCSSObject<AllowedBoxStyles>
793
830
  | ScopedSafeCSSObject<AllowedBoxStyles>[]
794
831
  : Primitive extends typeof Inline
795
- ?
796
- | ScopedSafeCSSObject<AllowedInlineStyles>
797
- | ScopedSafeCSSObject<AllowedInlineStyles>[]
832
+ ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[]
798
833
  : never,
799
834
  ): {
800
835
  readonly [uniqueSymbol]: Primitive extends (<
@@ -819,6 +854,7 @@ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
819
854
  | 'space'
820
855
  | 'spread'
821
856
  | 'testId'
857
+ | 'xcss'
822
858
  > &
823
859
  RefAttributes<any>
824
860
  >
package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap CHANGED
@@ -2,6 +2,22 @@
2
2
 
3
3
  exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
4
4
  "export const backgroundColorMap = {
5
+ 'color.background.accent.lime.subtlest': token(
6
+ 'color.background.accent.lime.subtlest',
7
+ '#EEFBDA',
8
+ ),
9
+ 'color.background.accent.lime.subtler': token(
10
+ 'color.background.accent.lime.subtler',
11
+ '#D3F1A7',
12
+ ),
13
+ 'color.background.accent.lime.subtle': token(
14
+ 'color.background.accent.lime.subtle',
15
+ '#94C748',
16
+ ),
17
+ 'color.background.accent.lime.bolder': token(
18
+ 'color.background.accent.lime.bolder',
19
+ '#5B7F24',
20
+ ),
5
21
  'color.background.accent.red.subtlest': token(
6
22
  'color.background.accent.red.subtlest',
7
23
  '#FF8F73',
@@ -376,6 +392,7 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
376
392
  exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
377
393
  "export const borderColorMap = {
378
394
  'color.border': token('color.border', '#091e4221'),
395
+ 'color.border.accent.lime': token('color.border.accent.lime', '#6A9A23'),
379
396
  'color.border.accent.red': token('color.border.accent.red', '#FF5630'),
380
397
  'color.border.accent.orange': token('color.border.accent.orange', '#D94008'),
381
398
  'color.border.accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
@@ -409,6 +426,11 @@ export type BorderColor = keyof typeof borderColorMap;
409
426
  exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
410
427
  "export const textColorMap = {
411
428
  'color.text': token('color.text', '#172B4D'),
429
+ 'color.text.accent.lime': token('color.text.accent.lime', '#4C6B1F'),
430
+ 'color.text.accent.lime.bolder': token(
431
+ 'color.text.accent.lime.bolder',
432
+ '#37471F',
433
+ ),
412
434
  'color.text.accent.red': token('color.text.accent.red', '#DE350B'),
413
435
  'color.text.accent.red.bolder': token(
414
436
  'color.text.accent.red.bolder',
package/tmp/api-report-tmp.d.ts CHANGED
@@ -47,9 +47,6 @@ const alignSelfMap: {
47
47
  // @public (undocumented)
48
48
  type AllowedBoxStyles = keyof SafeCSSObject;
49
49
 
50
- // @public (undocumented)
51
- type AllowedInlineStyles = 'backgroundColor' | 'padding';
52
-
53
50
  // @public (undocumented)
54
51
  type As = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
55
52
 
@@ -61,6 +58,10 @@ type BackgroundColor = keyof typeof backgroundColorMap;
61
58
 
62
59
  // @public (undocumented)
63
60
  const backgroundColorMap: {
61
+ readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
62
+ readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
63
+ readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
64
+ readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
64
65
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
65
66
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
66
67
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
@@ -201,6 +202,7 @@ type BorderColor = keyof typeof borderColorMap;
201
202
  // @public
202
203
  const borderColorMap: {
203
204
  readonly 'color.border': "var(--ds-border)";
205
+ readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
204
206
  readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
205
207
  readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
206
208
  readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
@@ -330,6 +332,7 @@ type Fill = keyof typeof fillMap;
330
332
  // @public (undocumented)
331
333
  const fillMap: {
332
334
  readonly 'color.icon': "var(--ds-icon)";
335
+ readonly 'color.icon.accent.lime': "var(--ds-icon-accent-lime)";
333
336
  readonly 'color.icon.accent.red': "var(--ds-icon-accent-red)";
334
337
  readonly 'color.icon.accent.orange': "var(--ds-icon-accent-orange)";
335
338
  readonly 'color.icon.accent.yellow': "var(--ds-icon-accent-yellow)";
@@ -397,7 +400,7 @@ type Grow_2 = 'fill' | 'hug';
397
400
  type Height = Dimension;
398
401
 
399
402
  // @public
400
- export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
403
+ export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId" | "xcss"> & RefAttributes<any>>>;
401
404
 
402
405
  // @public (undocumented)
403
406
  export interface InlineProps<T extends ElementType = 'div'> {
@@ -413,6 +416,7 @@ export interface InlineProps<T extends ElementType = 'div'> {
413
416
  space?: Space;
414
417
  spread?: Spread;
415
418
  testId?: string;
419
+ xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
416
420
  }
417
421
 
418
422
  // @public (undocumented)
@@ -426,6 +430,11 @@ type InlineStyles = SerializedStyles & {
426
430
  // @public (undocumented)
427
431
  const inlineTag: unique symbol;
428
432
 
433
+ // @public (undocumented)
434
+ type InlineXCSS = {
435
+ readonly [uniqueSymbol]: InlineStyles;
436
+ };
437
+
429
438
  // @public (undocumented)
430
439
  type Layer = keyof typeof layerMap;
431
440
 
@@ -557,6 +566,9 @@ const spaceMap: {
557
566
  'space.1000': "var(--ds-space-1000)";
558
567
  };
559
568
 
569
+ // @public (undocumented)
570
+ type Spacing = 'columnGap' | 'gap' | 'inset' | 'insetBlock' | 'insetBlockEnd' | 'insetBlockStart' | 'insetInline' | 'insetInlineEnd' | 'insetInlineStart' | 'outlineOffset' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingBottom' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'rowGap';
571
+
560
572
  // @public (undocumented)
561
573
  type Spread = 'space-between';
562
574
 
@@ -585,6 +597,8 @@ type TextColor = keyof typeof textColorMap;
585
597
  // @public (undocumented)
586
598
  const textColorMap: {
587
599
  readonly 'color.text': "var(--ds-text)";
600
+ readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
601
+ readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
588
602
  readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
589
603
  readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
590
604
  readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
@@ -707,8 +721,8 @@ const UNSAFE_media: {
707
721
  type Width = Dimension;
708
722
 
709
723
  // @public
710
- export 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): {
711
- readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>> ? InlineStyles : never;
724
+ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
725
+ readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId" | "xcss"> & RefAttributes<any>>> ? InlineStyles : never;
712
726
  };
713
727
 
714
728
  // (No @packageDocumentation comment for this package)