@atlaskit/primitives 0.12.3 → 0.12.5

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 (23) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/helpers/responsive/index.js +8 -1
  3. package/dist/cjs/helpers/responsive/use-media-query.js +80 -0
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/cjs/xcss/style-maps.partial.js +10 -2
  6. package/dist/es2019/helpers/responsive/index.js +2 -1
  7. package/dist/es2019/helpers/responsive/use-media-query.js +73 -0
  8. package/dist/es2019/version.json +1 -1
  9. package/dist/es2019/xcss/style-maps.partial.js +10 -2
  10. package/dist/esm/helpers/responsive/index.js +2 -1
  11. package/dist/esm/helpers/responsive/use-media-query.js +73 -0
  12. package/dist/esm/version.json +1 -1
  13. package/dist/esm/xcss/style-maps.partial.js +10 -2
  14. package/dist/types/helpers/responsive/index.d.ts +1 -0
  15. package/dist/types/helpers/responsive/use-media-query.d.ts +23 -0
  16. package/dist/types/xcss/style-maps.partial.d.ts +10 -2
  17. package/dist/types-ts4.5/helpers/responsive/index.d.ts +1 -0
  18. package/dist/types-ts4.5/helpers/responsive/use-media-query.d.ts +23 -0
  19. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +10 -2
  20. package/package.json +5 -3
  21. package/report.api.md +8 -0
  22. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +22 -0
  23. package/tmp/api-report-tmp.d.ts +8 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 0.12.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`55be182b904`](https://bitbucket.org/atlassian/atlassian-frontend/commits/55be182b904) - Regenerates codegen'd artifacts as a result of introducting new design tokens.
8
+ - Updated dependencies
9
+
10
+ ## 0.12.4
11
+
12
+ ### Patch Changes
13
+
14
+ - [`b2706220d22`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2706220d22) - Adds an experimental `UNSAFE_useMediaQuery` hook to utilize our media query breakpoints in JavaScript. This is not SSR-safe and will return `null` or perhaps incorrectly depending on your SSR environment.
15
+
3
16
  ## 0.12.3
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/helpers/responsive/index.js CHANGED
@@ -33,6 +33,13 @@ Object.defineProperty(exports, "UNSAFE_media", {
33
33
  return _mediaHelper.UNSAFE_media;
34
34
  }
35
35
  });
36
+ Object.defineProperty(exports, "UNSAFE_useMediaQuery", {
37
+ enumerable: true,
38
+ get: function get() {
39
+ return _useMediaQuery.UNSAFE_useMediaQuery;
40
+ }
41
+ });
36
42
  var _mediaHelper = require("./media-helper");
37
43
  var _buildMediaQueryCss = require("./build-media-query-css");
38
- var _constants = require("./constants");
44
+ var _constants = require("./constants");
45
+ var _useMediaQuery = require("./use-media-query");
package/dist/cjs/helpers/responsive/use-media-query.js ADDED
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.UNSAFE_useMediaQuery = void 0;
7
+ var _react = require("react");
8
+ var _bindEventListener = require("bind-event-listener");
9
+ var _mediaHelper = require("./media-helper");
10
+ var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
11
+ var queries = {
12
+ 'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, _mediaHelper.UNSAFE_media.above.xxs.replace('@media ', '').trim()),
13
+ 'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, _mediaHelper.UNSAFE_media.above.xs.replace('@media ', '').trim()),
14
+ 'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, _mediaHelper.UNSAFE_media.above.sm.replace('@media ', '').trim()),
15
+ 'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, _mediaHelper.UNSAFE_media.above.md.replace('@media ', '').trim()),
16
+ 'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, _mediaHelper.UNSAFE_media.above.lg.replace('@media ', '').trim()),
17
+ 'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, _mediaHelper.UNSAFE_media.above.xl.replace('@media ', '').trim()),
18
+ 'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, _mediaHelper.UNSAFE_media.above.xxl.replace('@media ', '').trim()),
19
+ 'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, _mediaHelper.UNSAFE_media.below.xs.replace('@media ', '').trim()),
20
+ 'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, _mediaHelper.UNSAFE_media.below.sm.replace('@media ', '').trim()),
21
+ 'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, _mediaHelper.UNSAFE_media.below.md.replace('@media ', '').trim()),
22
+ 'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, _mediaHelper.UNSAFE_media.below.lg.replace('@media ', '').trim()),
23
+ 'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, _mediaHelper.UNSAFE_media.below.xl.replace('@media ', '').trim()),
24
+ 'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, _mediaHelper.UNSAFE_media.below.xxl.replace('@media ', '').trim())
25
+ };
26
+
27
+ /**
28
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
29
+ *
30
+ * The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
31
+ *
32
+ * @important
33
+ * - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
34
+ * - `above.xxs` will always be truthy, your listener should never fire.
35
+ *
36
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
37
+ *
38
+ * @example
39
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
40
+ * const isMobile = mq?.matches;
41
+ *
42
+ * @returns
43
+ * - `MediaQueryList`, primarily used to get if that media query is currently
44
+ * - `null` when `matchMedia` is unavailable, eg. in SSR.
45
+ */
46
+ var UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
47
+ var listenerRef = (0, _react.useRef)(listener);
48
+ (0, _react.useEffect)(function () {
49
+ // Bind the listener if changed so it's called on the next change event; no guarantee on timing.
50
+ listenerRef.current = listener;
51
+ }, [listener]);
52
+
53
+ /**
54
+ * We explicitly only react to boolean changes for binding our listener
55
+ * Changes to the functional reference are ignored.
56
+ */
57
+ var hasListener = !!listener;
58
+
59
+ /**
60
+ * The `matchMedia(…)` return value for our breakpoint query.
61
+ */
62
+ var mq = queries[queryString];
63
+ (0, _react.useLayoutEffect)(function () {
64
+ listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
65
+ if (!mq || !hasListener || !listenerRef.current) {
66
+ return;
67
+ }
68
+ return (0, _bindEventListener.bind)(mq, {
69
+ type: 'change',
70
+ listener: function listener(event) {
71
+ // We explicitly call the current version of the function
72
+ return listenerRef.current(event);
73
+ }
74
+ });
75
+ },
76
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
77
+ [mq, hasListener]);
78
+ return mq || null;
79
+ };
80
+ exports.UNSAFE_useMediaQuery = UNSAFE_useMediaQuery;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.3",
3
+ "version": "0.12.5",
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/helpers/responsive/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { UNSAFE_media } from './media-helper';
2
2
  export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
3
- export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
3
+ export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
4
+ export { UNSAFE_useMediaQuery } from './use-media-query';
package/dist/es2019/helpers/responsive/use-media-query.js ADDED
@@ -0,0 +1,73 @@
1
+ var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
2
+ import { useEffect, useLayoutEffect, useRef } from 'react';
3
+ import { bind } from 'bind-event-listener';
4
+ import { UNSAFE_media as media } from './media-helper';
5
+ const queries = {
6
+ 'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
7
+ 'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
8
+ 'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
9
+ 'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
10
+ 'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
11
+ 'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
12
+ 'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.above.xxl.replace('@media ', '').trim()),
13
+ 'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.xs.replace('@media ', '').trim()),
14
+ 'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.sm.replace('@media ', '').trim()),
15
+ 'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.md.replace('@media ', '').trim()),
16
+ 'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.lg.replace('@media ', '').trim()),
17
+ 'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, media.below.xl.replace('@media ', '').trim()),
18
+ 'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, media.below.xxl.replace('@media ', '').trim())
19
+ };
20
+
21
+ /**
22
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
23
+ *
24
+ * The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
25
+ *
26
+ * @important
27
+ * - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
28
+ * - `above.xxs` will always be truthy, your listener should never fire.
29
+ *
30
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
31
+ *
32
+ * @example
33
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
34
+ * const isMobile = mq?.matches;
35
+ *
36
+ * @returns
37
+ * - `MediaQueryList`, primarily used to get if that media query is currently
38
+ * - `null` when `matchMedia` is unavailable, eg. in SSR.
39
+ */
40
+ export const UNSAFE_useMediaQuery = (queryString, listener) => {
41
+ const listenerRef = useRef(listener);
42
+ useEffect(() => {
43
+ // Bind the listener if changed so it's called on the next change event; no guarantee on timing.
44
+ listenerRef.current = listener;
45
+ }, [listener]);
46
+
47
+ /**
48
+ * We explicitly only react to boolean changes for binding our listener
49
+ * Changes to the functional reference are ignored.
50
+ */
51
+ const hasListener = !!listener;
52
+
53
+ /**
54
+ * The `matchMedia(…)` return value for our breakpoint query.
55
+ */
56
+ const mq = queries[queryString];
57
+ useLayoutEffect(() => {
58
+ listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
59
+ if (!mq || !hasListener || !listenerRef.current) {
60
+ return;
61
+ }
62
+ return bind(mq, {
63
+ type: 'change',
64
+ listener: event => {
65
+ // We explicitly call the current version of the function
66
+ return listenerRef.current(event);
67
+ }
68
+ });
69
+ },
70
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
71
+ [mq, hasListener]);
72
+ return mq || null;
73
+ };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.3",
3
+ "version": "0.12.5",
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/helpers/responsive/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { UNSAFE_media } from './media-helper';
2
2
  export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
3
- export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
3
+ export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';
4
+ export { UNSAFE_useMediaQuery } from './use-media-query';
package/dist/esm/helpers/responsive/use-media-query.js ADDED
@@ -0,0 +1,73 @@
1
+ var _window, _window$matchMedia, _window2, _window2$matchMedia, _window3, _window3$matchMedia, _window4, _window4$matchMedia, _window5, _window5$matchMedia, _window6, _window6$matchMedia, _window7, _window7$matchMedia, _window8, _window8$matchMedia, _window9, _window9$matchMedia, _window10, _window10$matchMedia, _window11, _window11$matchMedia, _window12, _window12$matchMedia, _window13, _window13$matchMedia;
2
+ import { useEffect, useLayoutEffect, useRef } from 'react';
3
+ import { bind } from 'bind-event-listener';
4
+ import { UNSAFE_media as media } from './media-helper';
5
+ var queries = {
6
+ 'above.xxs': typeof window === 'undefined' ? undefined : (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, media.above.xxs.replace('@media ', '').trim()),
7
+ 'above.xs': typeof window === 'undefined' ? undefined : (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$matchMedia = _window2.matchMedia) === null || _window2$matchMedia === void 0 ? void 0 : _window2$matchMedia.call(_window2, media.above.xs.replace('@media ', '').trim()),
8
+ 'above.sm': typeof window === 'undefined' ? undefined : (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$matchMedia = _window3.matchMedia) === null || _window3$matchMedia === void 0 ? void 0 : _window3$matchMedia.call(_window3, media.above.sm.replace('@media ', '').trim()),
9
+ 'above.md': typeof window === 'undefined' ? undefined : (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window4$matchMedia = _window4.matchMedia) === null || _window4$matchMedia === void 0 ? void 0 : _window4$matchMedia.call(_window4, media.above.md.replace('@media ', '').trim()),
10
+ 'above.lg': typeof window === 'undefined' ? undefined : (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window5$matchMedia = _window5.matchMedia) === null || _window5$matchMedia === void 0 ? void 0 : _window5$matchMedia.call(_window5, media.above.lg.replace('@media ', '').trim()),
11
+ 'above.xl': typeof window === 'undefined' ? undefined : (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window6$matchMedia = _window6.matchMedia) === null || _window6$matchMedia === void 0 ? void 0 : _window6$matchMedia.call(_window6, media.above.xl.replace('@media ', '').trim()),
12
+ 'above.xxl': typeof window === 'undefined' ? undefined : (_window7 = window) === null || _window7 === void 0 ? void 0 : (_window7$matchMedia = _window7.matchMedia) === null || _window7$matchMedia === void 0 ? void 0 : _window7$matchMedia.call(_window7, media.above.xxl.replace('@media ', '').trim()),
13
+ 'below.xs': typeof window === 'undefined' ? undefined : (_window8 = window) === null || _window8 === void 0 ? void 0 : (_window8$matchMedia = _window8.matchMedia) === null || _window8$matchMedia === void 0 ? void 0 : _window8$matchMedia.call(_window8, media.below.xs.replace('@media ', '').trim()),
14
+ 'below.sm': typeof window === 'undefined' ? undefined : (_window9 = window) === null || _window9 === void 0 ? void 0 : (_window9$matchMedia = _window9.matchMedia) === null || _window9$matchMedia === void 0 ? void 0 : _window9$matchMedia.call(_window9, media.below.sm.replace('@media ', '').trim()),
15
+ 'below.md': typeof window === 'undefined' ? undefined : (_window10 = window) === null || _window10 === void 0 ? void 0 : (_window10$matchMedia = _window10.matchMedia) === null || _window10$matchMedia === void 0 ? void 0 : _window10$matchMedia.call(_window10, media.below.md.replace('@media ', '').trim()),
16
+ 'below.lg': typeof window === 'undefined' ? undefined : (_window11 = window) === null || _window11 === void 0 ? void 0 : (_window11$matchMedia = _window11.matchMedia) === null || _window11$matchMedia === void 0 ? void 0 : _window11$matchMedia.call(_window11, media.below.lg.replace('@media ', '').trim()),
17
+ 'below.xl': typeof window === 'undefined' ? undefined : (_window12 = window) === null || _window12 === void 0 ? void 0 : (_window12$matchMedia = _window12.matchMedia) === null || _window12$matchMedia === void 0 ? void 0 : _window12$matchMedia.call(_window12, media.below.xl.replace('@media ', '').trim()),
18
+ 'below.xxl': typeof window === 'undefined' ? undefined : (_window13 = window) === null || _window13 === void 0 ? void 0 : (_window13$matchMedia = _window13.matchMedia) === null || _window13$matchMedia === void 0 ? void 0 : _window13$matchMedia.call(_window13, media.below.xxl.replace('@media ', '').trim())
19
+ };
20
+
21
+ /**
22
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
23
+ *
24
+ * The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
25
+ *
26
+ * @important
27
+ * - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
28
+ * - `above.xxs` will always be truthy, your listener should never fire.
29
+ *
30
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
31
+ *
32
+ * @example
33
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
34
+ * const isMobile = mq?.matches;
35
+ *
36
+ * @returns
37
+ * - `MediaQueryList`, primarily used to get if that media query is currently
38
+ * - `null` when `matchMedia` is unavailable, eg. in SSR.
39
+ */
40
+ export var UNSAFE_useMediaQuery = function UNSAFE_useMediaQuery(queryString, listener) {
41
+ var listenerRef = useRef(listener);
42
+ useEffect(function () {
43
+ // Bind the listener if changed so it's called on the next change event; no guarantee on timing.
44
+ listenerRef.current = listener;
45
+ }, [listener]);
46
+
47
+ /**
48
+ * We explicitly only react to boolean changes for binding our listener
49
+ * Changes to the functional reference are ignored.
50
+ */
51
+ var hasListener = !!listener;
52
+
53
+ /**
54
+ * The `matchMedia(…)` return value for our breakpoint query.
55
+ */
56
+ var mq = queries[queryString];
57
+ useLayoutEffect(function () {
58
+ listenerRef.current = listener; // Bind the listener now in case the `useEffect` hasn't fired above yet
59
+ if (!mq || !hasListener || !listenerRef.current) {
60
+ return;
61
+ }
62
+ return bind(mq, {
63
+ type: 'change',
64
+ listener: function listener(event) {
65
+ // We explicitly call the current version of the function
66
+ return listenerRef.current(event);
67
+ }
68
+ });
69
+ },
70
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- explicitly do not trigger the effect on `listener` reference change, only on a boolean representation of it.
71
+ [mq, hasListener]);
72
+ return mq || null;
73
+ };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.3",
3
+ "version": "0.12.5",
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/helpers/responsive/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { UNSAFE_media } from './media-helper';
2
2
  export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS, } from './build-media-query-css';
3
3
  export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
4
4
  export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
5
+ export { UNSAFE_useMediaQuery } from './use-media-query';
package/dist/types/helpers/responsive/use-media-query.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { UNSAFE_media as media } from './media-helper';
2
+ type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
3
+ /**
4
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
5
+ *
6
+ * The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
7
+ *
8
+ * @important
9
+ * - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
10
+ * - `above.xxs` will always be truthy, your listener should never fire.
11
+ *
12
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
13
+ *
14
+ * @example
15
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
16
+ * const isMobile = mq?.matches;
17
+ *
18
+ * @returns
19
+ * - `MediaQueryList`, primarily used to get if that media query is currently
20
+ * - `null` when `matchMedia` is unavailable, eg. in SSR.
21
+ */
22
+ export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
23
+ export {};
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-ts4.5/helpers/responsive/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { UNSAFE_media } from './media-helper';
2
2
  export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS, } from './build-media-query-css';
3
3
  export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
4
4
  export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
5
+ export { UNSAFE_useMediaQuery } from './use-media-query';
package/dist/types-ts4.5/helpers/responsive/use-media-query.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { UNSAFE_media as media } from './media-helper';
2
+ type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
3
+ /**
4
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
5
+ *
6
+ * The returning value **WILL NOT** update or react to change. You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
7
+ *
8
+ * @important
9
+ * - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
10
+ * - `above.xxs` will always be truthy, your listener should never fire.
11
+ *
12
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
13
+ *
14
+ * @example
15
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
16
+ * const isMobile = mq?.matches;
17
+ *
18
+ * @returns
19
+ * - `MediaQueryList`, primarily used to get if that media query is currently
20
+ * - `null` when `matchMedia` is unavailable, eg. in SSR.
21
+ */
22
+ export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
23
+ export {};
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.12.3",
3
+ "version": "0.12.5",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -94,10 +94,11 @@
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
- "@emotion/serialize": "^1.1.0"
100
+ "@emotion/serialize": "^1.1.0",
101
+ "bind-event-listener": "^2.1.1"
101
102
  },
102
103
  "peerDependencies": {
103
104
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -124,6 +125,7 @@
124
125
  "@atlassian/codegen": "^0.1.0",
125
126
  "@atlassian/gemini-visual-regression": "^0.0.28",
126
127
  "@testing-library/react": "^12.1.5",
128
+ "@testing-library/react-hooks": "^8.0.1",
127
129
  "csstype": "^3.1.0",
128
130
  "prettier": "^2.8.0",
129
131
  "react-dom": "^16.8.0",
package/report.api.md CHANGED
@@ -85,6 +85,10 @@ type BackgroundColor = keyof typeof backgroundColorMap;
85
85
 
86
86
  // @public (undocumented)
87
87
  const backgroundColorMap: {
88
+ readonly 'color.background.accent.lime.subtlest': 'var(--ds-background-accent-lime-subtlest)';
89
+ readonly 'color.background.accent.lime.subtler': 'var(--ds-background-accent-lime-subtler)';
90
+ readonly 'color.background.accent.lime.subtle': 'var(--ds-background-accent-lime-subtle)';
91
+ readonly 'color.background.accent.lime.bolder': 'var(--ds-background-accent-lime-bolder)';
88
92
  readonly 'color.background.accent.red.subtlest': 'var(--ds-background-accent-red-subtlest)';
89
93
  readonly 'color.background.accent.red.subtler': 'var(--ds-background-accent-red-subtler)';
90
94
  readonly 'color.background.accent.red.subtle': 'var(--ds-background-accent-red-subtle)';
@@ -230,6 +234,7 @@ type BorderColor = keyof typeof borderColorMap;
230
234
  // @public
231
235
  const borderColorMap: {
232
236
  readonly 'color.border': 'var(--ds-border)';
237
+ readonly 'color.border.accent.lime': 'var(--ds-border-accent-lime)';
233
238
  readonly 'color.border.accent.red': 'var(--ds-border-accent-red)';
234
239
  readonly 'color.border.accent.orange': 'var(--ds-border-accent-orange)';
235
240
  readonly 'color.border.accent.yellow': 'var(--ds-border-accent-yellow)';
@@ -368,6 +373,7 @@ type Fill = keyof typeof fillMap;
368
373
  // @public (undocumented)
369
374
  const fillMap: {
370
375
  readonly 'color.icon': 'var(--ds-icon)';
376
+ readonly 'color.icon.accent.lime': 'var(--ds-icon-accent-lime)';
371
377
  readonly 'color.icon.accent.red': 'var(--ds-icon-accent-red)';
372
378
  readonly 'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
373
379
  readonly 'color.icon.accent.yellow': 'var(--ds-icon-accent-yellow)';
@@ -664,6 +670,8 @@ type TextColor = keyof typeof textColorMap;
664
670
  // @public (undocumented)
665
671
  const textColorMap: {
666
672
  readonly 'color.text': 'var(--ds-text)';
673
+ readonly 'color.text.accent.lime': 'var(--ds-text-accent-lime)';
674
+ readonly 'color.text.accent.lime.bolder': 'var(--ds-text-accent-lime-bolder)';
667
675
  readonly 'color.text.accent.red': 'var(--ds-text-accent-red)';
668
676
  readonly 'color.text.accent.red.bolder': 'var(--ds-text-accent-red-bolder)';
669
677
  readonly 'color.text.accent.orange': 'var(--ds-text-accent-orange)';
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
@@ -61,6 +61,10 @@ type BackgroundColor = keyof typeof backgroundColorMap;
61
61
 
62
62
  // @public (undocumented)
63
63
  const backgroundColorMap: {
64
+ readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
65
+ readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
66
+ readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
67
+ readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
64
68
  readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
65
69
  readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
66
70
  readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
@@ -201,6 +205,7 @@ type BorderColor = keyof typeof borderColorMap;
201
205
  // @public
202
206
  const borderColorMap: {
203
207
  readonly 'color.border': "var(--ds-border)";
208
+ readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
204
209
  readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
205
210
  readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
206
211
  readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
@@ -330,6 +335,7 @@ type Fill = keyof typeof fillMap;
330
335
  // @public (undocumented)
331
336
  const fillMap: {
332
337
  readonly 'color.icon': "var(--ds-icon)";
338
+ readonly 'color.icon.accent.lime': "var(--ds-icon-accent-lime)";
333
339
  readonly 'color.icon.accent.red': "var(--ds-icon-accent-red)";
334
340
  readonly 'color.icon.accent.orange': "var(--ds-icon-accent-orange)";
335
341
  readonly 'color.icon.accent.yellow': "var(--ds-icon-accent-yellow)";
@@ -585,6 +591,8 @@ type TextColor = keyof typeof textColorMap;
585
591
  // @public (undocumented)
586
592
  const textColorMap: {
587
593
  readonly 'color.text': "var(--ds-text)";
594
+ readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
595
+ readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
588
596
  readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
589
597
  readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
590
598
  readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";