@atlaskit/ds-explorations 5.0.5 → 5.0.7
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.
- package/CHANGELOG.md +14 -1
- package/dist/cjs/components/interaction-surface.partial.js +2 -2
- package/dist/cjs/internal/color-map.js +2 -2
- package/dist/es2019/components/interaction-surface.partial.js +3 -2
- package/dist/es2019/internal/color-map.js +2 -2
- package/dist/esm/components/interaction-surface.partial.js +3 -2
- package/dist/esm/internal/color-map.js +2 -2
- package/dist/types/components/interaction-surface.partial.d.ts +9 -66
- package/dist/types/internal/color-map.d.ts +2 -2
- package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +9 -66
- package/dist/types-ts4.5/internal/color-map.d.ts +2 -2
- package/package.json +4 -4
- package/scripts/interaction-codegen.tsx +16 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 5.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 5.0.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`c72a8190e4e4f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c72a8190e4e4f) -
|
|
14
|
+
add types to generated code for tokens
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 5.0.5
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -830,7 +844,6 @@ tokens.
|
|
|
830
844
|
package in downstream dependencies is correctly resolved.
|
|
831
845
|
|
|
832
846
|
This update also includes changes to the way the `Text` component behaves with `Box`:
|
|
833
|
-
|
|
834
847
|
- Text will now remove redundant DOM elements if it detects that it is already in the context of a
|
|
835
848
|
`Text` element. This will only occur if the Text element that is a candidate for removal does
|
|
836
849
|
not apply any custom property.
|
|
@@ -58,11 +58,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
|
|
|
58
58
|
var _default = exports.default = InteractionSurface;
|
|
59
59
|
/**
|
|
60
60
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
61
|
-
* @codegen <<SignedSource::
|
|
61
|
+
* @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
|
|
62
62
|
* @codegenId interactions
|
|
63
63
|
* @codegenCommand yarn codegen-styles
|
|
64
64
|
* @codegenParams ["background"]
|
|
65
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
65
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
66
66
|
*/
|
|
67
67
|
var backgroundActiveColorMap = {
|
|
68
68
|
'accent.lime.subtlest': (0, _react2.css)({
|
|
@@ -9,9 +9,9 @@ exports.default = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::1809e63a402462f0f3026932142b98b2>>
|
|
13
13
|
* @codegenCommand yarn codegen-styles
|
|
14
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
14
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
15
15
|
*/
|
|
16
16
|
var _default = exports.default = {
|
|
17
17
|
'neutral.bold': 'inverse',
|
|
@@ -53,12 +53,13 @@ export default InteractionSurface;
|
|
|
53
53
|
|
|
54
54
|
/**
|
|
55
55
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
56
|
-
* @codegen <<SignedSource::
|
|
56
|
+
* @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
|
|
57
57
|
* @codegenId interactions
|
|
58
58
|
* @codegenCommand yarn codegen-styles
|
|
59
59
|
* @codegenParams ["background"]
|
|
60
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
60
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
61
61
|
*/
|
|
62
|
+
|
|
62
63
|
const backgroundActiveColorMap = {
|
|
63
64
|
'accent.lime.subtlest': css({
|
|
64
65
|
'&:active': {
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::1809e63a402462f0f3026932142b98b2>>
|
|
7
7
|
* @codegenCommand yarn codegen-styles
|
|
8
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
9
9
|
*/
|
|
10
10
|
export default {
|
|
11
11
|
'neutral.bold': 'inverse',
|
|
@@ -52,12 +52,13 @@ export default InteractionSurface;
|
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
55
|
-
* @codegen <<SignedSource::
|
|
55
|
+
* @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
|
|
56
56
|
* @codegenId interactions
|
|
57
57
|
* @codegenCommand yarn codegen-styles
|
|
58
58
|
* @codegenParams ["background"]
|
|
59
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
59
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
60
60
|
*/
|
|
61
|
+
|
|
61
62
|
var backgroundActiveColorMap = {
|
|
62
63
|
'accent.lime.subtlest': css({
|
|
63
64
|
'&:active': {
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::1809e63a402462f0f3026932142b98b2>>
|
|
7
7
|
* @codegenCommand yarn codegen-styles
|
|
8
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
9
9
|
*/
|
|
10
10
|
export default {
|
|
11
11
|
'neutral.bold': 'inverse',
|
|
@@ -23,72 +23,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
|
|
|
23
23
|
*/
|
|
24
24
|
declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
|
|
25
25
|
export default InteractionSurface;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
|
|
36
|
-
'accent.orange.subtler': import("@emotion/react").SerializedStyles;
|
|
37
|
-
'accent.orange.subtle': import("@emotion/react").SerializedStyles;
|
|
38
|
-
'accent.orange.bolder': import("@emotion/react").SerializedStyles;
|
|
39
|
-
'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
|
|
40
|
-
'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
|
|
41
|
-
'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
|
|
42
|
-
'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
|
|
43
|
-
'accent.green.subtlest': import("@emotion/react").SerializedStyles;
|
|
44
|
-
'accent.green.subtler': import("@emotion/react").SerializedStyles;
|
|
45
|
-
'accent.green.subtle': import("@emotion/react").SerializedStyles;
|
|
46
|
-
'accent.green.bolder': import("@emotion/react").SerializedStyles;
|
|
47
|
-
'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
|
|
48
|
-
'accent.teal.subtler': import("@emotion/react").SerializedStyles;
|
|
49
|
-
'accent.teal.subtle': import("@emotion/react").SerializedStyles;
|
|
50
|
-
'accent.teal.bolder': import("@emotion/react").SerializedStyles;
|
|
51
|
-
'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
|
|
52
|
-
'accent.blue.subtler': import("@emotion/react").SerializedStyles;
|
|
53
|
-
'accent.blue.subtle': import("@emotion/react").SerializedStyles;
|
|
54
|
-
'accent.blue.bolder': import("@emotion/react").SerializedStyles;
|
|
55
|
-
'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
|
|
56
|
-
'accent.purple.subtler': import("@emotion/react").SerializedStyles;
|
|
57
|
-
'accent.purple.subtle': import("@emotion/react").SerializedStyles;
|
|
58
|
-
'accent.purple.bolder': import("@emotion/react").SerializedStyles;
|
|
59
|
-
'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
|
|
60
|
-
'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
|
|
61
|
-
'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
|
|
62
|
-
'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
|
|
63
|
-
'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
|
|
64
|
-
'accent.gray.subtler': import("@emotion/react").SerializedStyles;
|
|
65
|
-
'accent.gray.subtle': import("@emotion/react").SerializedStyles;
|
|
66
|
-
'accent.gray.bolder': import("@emotion/react").SerializedStyles;
|
|
67
|
-
input: import("@emotion/react").SerializedStyles;
|
|
68
|
-
'inverse.subtle': import("@emotion/react").SerializedStyles;
|
|
69
|
-
neutral: import("@emotion/react").SerializedStyles;
|
|
70
|
-
'neutral.subtle': import("@emotion/react").SerializedStyles;
|
|
71
|
-
'neutral.bold': import("@emotion/react").SerializedStyles;
|
|
72
|
-
selected: import("@emotion/react").SerializedStyles;
|
|
73
|
-
'selected.bold': import("@emotion/react").SerializedStyles;
|
|
74
|
-
'brand.subtlest': import("@emotion/react").SerializedStyles;
|
|
75
|
-
'brand.bold': import("@emotion/react").SerializedStyles;
|
|
76
|
-
'brand.boldest': import("@emotion/react").SerializedStyles;
|
|
77
|
-
danger: import("@emotion/react").SerializedStyles;
|
|
78
|
-
'danger.bold': import("@emotion/react").SerializedStyles;
|
|
79
|
-
warning: import("@emotion/react").SerializedStyles;
|
|
80
|
-
'warning.bold': import("@emotion/react").SerializedStyles;
|
|
81
|
-
success: import("@emotion/react").SerializedStyles;
|
|
82
|
-
'success.bold': import("@emotion/react").SerializedStyles;
|
|
83
|
-
discovery: import("@emotion/react").SerializedStyles;
|
|
84
|
-
'discovery.bold': import("@emotion/react").SerializedStyles;
|
|
85
|
-
information: import("@emotion/react").SerializedStyles;
|
|
86
|
-
'information.bold': import("@emotion/react").SerializedStyles;
|
|
87
|
-
'elevation.surface': import("@emotion/react").SerializedStyles;
|
|
88
|
-
'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
|
|
89
|
-
'elevation.surface.raised': import("@emotion/react").SerializedStyles;
|
|
90
|
-
};
|
|
91
|
-
type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
|
|
26
|
+
/**
|
|
27
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
28
|
+
* @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
|
|
29
|
+
* @codegenId interactions
|
|
30
|
+
* @codegenCommand yarn codegen-styles
|
|
31
|
+
* @codegenParams ["background"]
|
|
32
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
33
|
+
*/
|
|
34
|
+
type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
|
|
92
35
|
/**
|
|
93
36
|
* @codegenEnd
|
|
94
37
|
*/
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::1809e63a402462f0f3026932142b98b2>>
|
|
7
7
|
* @codegenCommand yarn codegen-styles
|
|
8
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
9
9
|
*/
|
|
10
10
|
declare const _default: {
|
|
11
11
|
readonly 'neutral.bold': "inverse";
|
|
@@ -23,72 +23,15 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
|
|
|
23
23
|
*/
|
|
24
24
|
declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
|
|
25
25
|
export default InteractionSurface;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
'accent.orange.subtlest': import("@emotion/react").SerializedStyles;
|
|
36
|
-
'accent.orange.subtler': import("@emotion/react").SerializedStyles;
|
|
37
|
-
'accent.orange.subtle': import("@emotion/react").SerializedStyles;
|
|
38
|
-
'accent.orange.bolder': import("@emotion/react").SerializedStyles;
|
|
39
|
-
'accent.yellow.subtlest': import("@emotion/react").SerializedStyles;
|
|
40
|
-
'accent.yellow.subtler': import("@emotion/react").SerializedStyles;
|
|
41
|
-
'accent.yellow.subtle': import("@emotion/react").SerializedStyles;
|
|
42
|
-
'accent.yellow.bolder': import("@emotion/react").SerializedStyles;
|
|
43
|
-
'accent.green.subtlest': import("@emotion/react").SerializedStyles;
|
|
44
|
-
'accent.green.subtler': import("@emotion/react").SerializedStyles;
|
|
45
|
-
'accent.green.subtle': import("@emotion/react").SerializedStyles;
|
|
46
|
-
'accent.green.bolder': import("@emotion/react").SerializedStyles;
|
|
47
|
-
'accent.teal.subtlest': import("@emotion/react").SerializedStyles;
|
|
48
|
-
'accent.teal.subtler': import("@emotion/react").SerializedStyles;
|
|
49
|
-
'accent.teal.subtle': import("@emotion/react").SerializedStyles;
|
|
50
|
-
'accent.teal.bolder': import("@emotion/react").SerializedStyles;
|
|
51
|
-
'accent.blue.subtlest': import("@emotion/react").SerializedStyles;
|
|
52
|
-
'accent.blue.subtler': import("@emotion/react").SerializedStyles;
|
|
53
|
-
'accent.blue.subtle': import("@emotion/react").SerializedStyles;
|
|
54
|
-
'accent.blue.bolder': import("@emotion/react").SerializedStyles;
|
|
55
|
-
'accent.purple.subtlest': import("@emotion/react").SerializedStyles;
|
|
56
|
-
'accent.purple.subtler': import("@emotion/react").SerializedStyles;
|
|
57
|
-
'accent.purple.subtle': import("@emotion/react").SerializedStyles;
|
|
58
|
-
'accent.purple.bolder': import("@emotion/react").SerializedStyles;
|
|
59
|
-
'accent.magenta.subtlest': import("@emotion/react").SerializedStyles;
|
|
60
|
-
'accent.magenta.subtler': import("@emotion/react").SerializedStyles;
|
|
61
|
-
'accent.magenta.subtle': import("@emotion/react").SerializedStyles;
|
|
62
|
-
'accent.magenta.bolder': import("@emotion/react").SerializedStyles;
|
|
63
|
-
'accent.gray.subtlest': import("@emotion/react").SerializedStyles;
|
|
64
|
-
'accent.gray.subtler': import("@emotion/react").SerializedStyles;
|
|
65
|
-
'accent.gray.subtle': import("@emotion/react").SerializedStyles;
|
|
66
|
-
'accent.gray.bolder': import("@emotion/react").SerializedStyles;
|
|
67
|
-
input: import("@emotion/react").SerializedStyles;
|
|
68
|
-
'inverse.subtle': import("@emotion/react").SerializedStyles;
|
|
69
|
-
neutral: import("@emotion/react").SerializedStyles;
|
|
70
|
-
'neutral.subtle': import("@emotion/react").SerializedStyles;
|
|
71
|
-
'neutral.bold': import("@emotion/react").SerializedStyles;
|
|
72
|
-
selected: import("@emotion/react").SerializedStyles;
|
|
73
|
-
'selected.bold': import("@emotion/react").SerializedStyles;
|
|
74
|
-
'brand.subtlest': import("@emotion/react").SerializedStyles;
|
|
75
|
-
'brand.bold': import("@emotion/react").SerializedStyles;
|
|
76
|
-
'brand.boldest': import("@emotion/react").SerializedStyles;
|
|
77
|
-
danger: import("@emotion/react").SerializedStyles;
|
|
78
|
-
'danger.bold': import("@emotion/react").SerializedStyles;
|
|
79
|
-
warning: import("@emotion/react").SerializedStyles;
|
|
80
|
-
'warning.bold': import("@emotion/react").SerializedStyles;
|
|
81
|
-
success: import("@emotion/react").SerializedStyles;
|
|
82
|
-
'success.bold': import("@emotion/react").SerializedStyles;
|
|
83
|
-
discovery: import("@emotion/react").SerializedStyles;
|
|
84
|
-
'discovery.bold': import("@emotion/react").SerializedStyles;
|
|
85
|
-
information: import("@emotion/react").SerializedStyles;
|
|
86
|
-
'information.bold': import("@emotion/react").SerializedStyles;
|
|
87
|
-
'elevation.surface': import("@emotion/react").SerializedStyles;
|
|
88
|
-
'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
|
|
89
|
-
'elevation.surface.raised': import("@emotion/react").SerializedStyles;
|
|
90
|
-
};
|
|
91
|
-
type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
|
|
26
|
+
/**
|
|
27
|
+
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
28
|
+
* @codegen <<SignedSource::9270ce27eb45821e281f5499e575ce4f>>
|
|
29
|
+
* @codegenId interactions
|
|
30
|
+
* @codegenCommand yarn codegen-styles
|
|
31
|
+
* @codegenParams ["background"]
|
|
32
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
33
|
+
*/
|
|
34
|
+
type InteractionBackgroundColor = 'accent.lime.subtlest' | 'accent.lime.subtler' | 'accent.lime.subtle' | 'accent.lime.bolder' | 'accent.red.subtlest' | 'accent.red.subtler' | 'accent.red.subtle' | 'accent.red.bolder' | 'accent.orange.subtlest' | 'accent.orange.subtler' | 'accent.orange.subtle' | 'accent.orange.bolder' | 'accent.yellow.subtlest' | 'accent.yellow.subtler' | 'accent.yellow.subtle' | 'accent.yellow.bolder' | 'accent.green.subtlest' | 'accent.green.subtler' | 'accent.green.subtle' | 'accent.green.bolder' | 'accent.teal.subtlest' | 'accent.teal.subtler' | 'accent.teal.subtle' | 'accent.teal.bolder' | 'accent.blue.subtlest' | 'accent.blue.subtler' | 'accent.blue.subtle' | 'accent.blue.bolder' | 'accent.purple.subtlest' | 'accent.purple.subtler' | 'accent.purple.subtle' | 'accent.purple.bolder' | 'accent.magenta.subtlest' | 'accent.magenta.subtler' | 'accent.magenta.subtle' | 'accent.magenta.bolder' | 'accent.gray.subtlest' | 'accent.gray.subtler' | 'accent.gray.subtle' | 'accent.gray.bolder' | 'input' | 'inverse.subtle' | 'neutral' | 'neutral.subtle' | 'neutral.bold' | 'selected' | 'selected.bold' | 'brand.subtlest' | 'brand.bold' | 'brand.boldest' | 'danger' | 'danger.bold' | 'warning' | 'warning.bold' | 'success' | 'success.bold' | 'discovery' | 'discovery.bold' | 'information' | 'information.bold' | 'elevation.surface' | 'elevation.surface.overlay' | 'elevation.surface.raised';
|
|
92
35
|
/**
|
|
93
36
|
* @codegenEnd
|
|
94
37
|
*/
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* The color map is used to map a background color token to a matching text color that will meet contrast.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::1809e63a402462f0f3026932142b98b2>>
|
|
7
7
|
* @codegenCommand yarn codegen-styles
|
|
8
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::2271390eb3f104f20bb791b00250b316>>
|
|
9
9
|
*/
|
|
10
10
|
declare const _default: {
|
|
11
11
|
readonly 'neutral.bold': "inverse";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/ds-explorations",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.7",
|
|
4
4
|
"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"prepare": "yarn ak-postbuild"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@atlaskit/tokens": "^
|
|
28
|
+
"@atlaskit/tokens": "^7.0.0",
|
|
29
29
|
"@babel/runtime": "^7.0.0",
|
|
30
30
|
"@emotion/react": "^11.7.1"
|
|
31
31
|
},
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@af/formatting": "workspace:^",
|
|
37
|
-
"@atlaskit/ds-lib": "^5.
|
|
38
|
-
"@atlaskit/primitives": "^
|
|
37
|
+
"@atlaskit/ds-lib": "^5.1.0",
|
|
38
|
+
"@atlaskit/primitives": "^15.0.0",
|
|
39
39
|
"@atlaskit/textfield": "^8.0.0",
|
|
40
40
|
"@atlassian/codegen": "^0.1.0",
|
|
41
41
|
"@testing-library/react": "^13.4.0",
|
|
@@ -50,10 +50,20 @@ export const createInteractionStylesFromTemplate = (colorProperty: keyof typeof
|
|
|
50
50
|
|
|
51
51
|
const { prefix, cssProperty, filterFn } = colors[colorProperty];
|
|
52
52
|
|
|
53
|
-
return (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
return format(
|
|
54
|
+
`
|
|
55
|
+
type Interaction${capitalize(colorProperty)}Color = ${hoveredTokens
|
|
56
|
+
.filter(filterFn)
|
|
57
|
+
// @ts-ignore
|
|
58
|
+
.map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
|
|
59
|
+
.map((t) => {
|
|
60
|
+
// handle the default case eg color.border or color.text
|
|
61
|
+
const propName = t.token.replace(prefix, '').replace('.hovered', '');
|
|
62
|
+
return `'${propName}'`;
|
|
63
|
+
})
|
|
64
|
+
.join('|')};
|
|
65
|
+
|
|
66
|
+
const ${colorProperty}ActiveColorMap: Record<Interaction${capitalize(colorProperty)}Color, SerializedStyles> = {
|
|
57
67
|
${pressedTokens
|
|
58
68
|
.filter(filterFn)
|
|
59
69
|
// @ts-ignore
|
|
@@ -66,7 +76,7 @@ const ${colorProperty}ActiveColorMap = {
|
|
|
66
76
|
.join(',\n\t')}
|
|
67
77
|
};
|
|
68
78
|
|
|
69
|
-
const ${colorProperty}HoverColorMap = {
|
|
79
|
+
const ${colorProperty}HoverColorMap: Record<Interaction${capitalize(colorProperty)}Color, SerializedStyles> = {
|
|
70
80
|
${hoveredTokens
|
|
71
81
|
.filter(filterFn)
|
|
72
82
|
// @ts-ignore
|
|
@@ -78,10 +88,6 @@ const ${colorProperty}HoverColorMap = {
|
|
|
78
88
|
})
|
|
79
89
|
.join(',\n\t')}
|
|
80
90
|
};`,
|
|
81
|
-
|
|
82
|
-
) +
|
|
83
|
-
`\ntype Interaction${capitalize(
|
|
84
|
-
colorProperty,
|
|
85
|
-
)}Color = keyof typeof ${colorProperty}HoverColorMap;\n`
|
|
91
|
+
'typescript',
|
|
86
92
|
);
|
|
87
93
|
};
|