@atlaskit/ds-explorations 2.2.15 → 2.3.1
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 +15 -0
- package/dist/cjs/components/interaction-surface.partial.js +2 -2
- package/dist/cjs/components/text.partial.js +2 -2
- package/dist/cjs/index.js +0 -21
- package/dist/cjs/internal/color-map.js +2 -2
- package/dist/es2019/components/interaction-surface.partial.js +2 -2
- package/dist/es2019/components/text.partial.js +2 -2
- package/dist/es2019/index.js +0 -3
- package/dist/es2019/internal/color-map.js +2 -2
- package/dist/esm/components/interaction-surface.partial.js +2 -2
- package/dist/esm/components/text.partial.js +2 -2
- package/dist/esm/index.js +0 -3
- package/dist/esm/internal/color-map.js +2 -2
- package/dist/types/components/surface-provider.d.ts +2 -2
- package/dist/types/components/text.partial.d.ts +2 -2
- package/dist/types/index.d.ts +0 -6
- package/dist/types/internal/color-map.d.ts +2 -2
- package/dist/types-ts4.5/components/surface-provider.d.ts +2 -2
- package/dist/types-ts4.5/components/text.partial.d.ts +2 -2
- package/dist/types-ts4.5/index.d.ts +0 -6
- package/dist/types-ts4.5/internal/color-map.d.ts +2 -2
- package/examples/02-text-advanced.tsx +11 -20
- package/examples/02-text.tsx +15 -10
- package/examples/05-badge.tsx +9 -5
- package/examples/06-section-message.tsx +2 -4
- package/examples/07-comment.tsx +1 -3
- package/examples/08-lozenge.tsx +8 -4
- package/examples/99-interactions.tsx +49 -33
- package/package.json +4 -6
- package/report.api.md +0 -465
- package/scripts/codegen-styles.tsx +16 -89
- package/src/components/__tests__/unit/interaction-suface.test.tsx +2 -2
- package/src/components/interaction-surface.partial.tsx +2 -2
- package/src/components/surface-provider.tsx +1 -1
- package/src/components/text.partial.tsx +2 -2
- package/src/index.tsx +0 -6
- package/src/internal/color-map.tsx +2 -2
- package/tmp/api-report-tmp.d.ts +0 -451
- package/tsconfig.app.json +3 -0
- package/tsconfig.dev.json +0 -6
- package/box/package.json +0 -15
- package/dist/cjs/components/box.partial.js +0 -622
- package/dist/cjs/components/inline.partial.js +0 -183
- package/dist/cjs/components/stack.partial.js +0 -149
- package/dist/es2019/components/box.partial.js +0 -614
- package/dist/es2019/components/inline.partial.js +0 -177
- package/dist/es2019/components/stack.partial.js +0 -144
- package/dist/esm/components/box.partial.js +0 -617
- package/dist/esm/components/inline.partial.js +0 -177
- package/dist/esm/components/stack.partial.js +0 -143
- package/dist/types/components/box.partial.d.ts +0 -357
- package/dist/types/components/inline.partial.d.ts +0 -108
- package/dist/types/components/stack.partial.d.ts +0 -92
- package/dist/types-ts4.5/components/box.partial.d.ts +0 -357
- package/dist/types-ts4.5/components/inline.partial.d.ts +0 -108
- package/dist/types-ts4.5/components/stack.partial.d.ts +0 -92
- package/examples/00-basic.tsx +0 -22
- package/examples/01-box.tsx +0 -171
- package/examples/03-stack.tsx +0 -99
- package/examples/04-inline.tsx +0 -99
- package/inline/package.json +0 -15
- package/src/components/__tests__/unit/box.test.tsx +0 -55
- package/src/components/__tests__/unit/inline.test.tsx +0 -43
- package/src/components/__tests__/unit/stack.test.tsx +0 -31
- package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png +0 -3
- package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png +0 -3
- package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png +0 -3
- package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png +0 -3
- package/src/components/__tests__/visual-regression/inline-snapshot-test.tsx +0 -28
- package/src/components/__tests__/visual-regression/stack-snapshot-test.tsx +0 -28
- package/src/components/__tests__/vr-tests/__snapshots__/box--default.png +0 -0
- package/src/components/__tests__/vr-tests/box-snapshot-test.vr.tsx +0 -6
- package/src/components/box.partial.tsx +0 -706
- package/src/components/inline.partial.tsx +0 -218
- package/src/components/stack.partial.tsx +0 -174
- package/stack/package.json +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/ds-explorations
|
|
2
2
|
|
|
3
|
+
## 2.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`83cd2ae7c5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83cd2ae7c5a) - Regenerates codegen artifacts as a result of introducting new visited link token.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 2.3.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [`933fd5192d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/933fd5192d6) - - Removes UNSAFE_Box component.
|
|
15
|
+
- Removes UNSAFE_Inline component.
|
|
16
|
+
- Removes UNSAFE_Stack component.
|
|
17
|
+
|
|
3
18
|
## 2.2.15
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -53,11 +53,11 @@ var InteractionSurface = function InteractionSurface(_ref) {
|
|
|
53
53
|
var _default = InteractionSurface;
|
|
54
54
|
/**
|
|
55
55
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
56
|
-
* @codegen <<SignedSource::
|
|
56
|
+
* @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
61
61
|
*/
|
|
62
62
|
exports.default = _default;
|
|
63
63
|
var backgroundActiveColorMap = {
|
|
@@ -230,11 +230,11 @@ var lineHeightMap = {
|
|
|
230
230
|
*/
|
|
231
231
|
/**
|
|
232
232
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
233
|
-
* @codegen <<SignedSource::
|
|
233
|
+
* @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
|
|
234
234
|
* @codegenId colors
|
|
235
235
|
* @codegenCommand yarn codegen-styles
|
|
236
236
|
* @codegenParams ["text"]
|
|
237
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
237
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
238
238
|
*/
|
|
239
239
|
var textColorMap = {
|
|
240
240
|
'color.text': (0, _react2.css)({
|
package/dist/cjs/index.js
CHANGED
|
@@ -4,38 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
Object.defineProperty(exports, "UNSAFE_Box", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function get() {
|
|
10
|
-
return _box.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(exports, "UNSAFE_Inline", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function get() {
|
|
16
|
-
return _inline.default;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
7
|
Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
|
|
20
8
|
enumerable: true,
|
|
21
9
|
get: function get() {
|
|
22
10
|
return _interactionSurface.default;
|
|
23
11
|
}
|
|
24
12
|
});
|
|
25
|
-
Object.defineProperty(exports, "UNSAFE_Stack", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
get: function get() {
|
|
28
|
-
return _stack.default;
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
13
|
Object.defineProperty(exports, "UNSAFE_Text", {
|
|
32
14
|
enumerable: true,
|
|
33
15
|
get: function get() {
|
|
34
16
|
return _text.default;
|
|
35
17
|
}
|
|
36
18
|
});
|
|
37
|
-
var _box = _interopRequireDefault(require("./components/box.partial"));
|
|
38
19
|
var _text = _interopRequireDefault(require("./components/text.partial"));
|
|
39
|
-
var _inline = _interopRequireDefault(require("./components/inline.partial"));
|
|
40
|
-
var _stack = _interopRequireDefault(require("./components/stack.partial"));
|
|
41
20
|
var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));
|
|
@@ -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::f70c0e13112cb1620980353c239c14d8>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
15
15
|
*/
|
|
16
16
|
var _default = {
|
|
17
17
|
'neutral.bold': 'inverse',
|
|
@@ -48,11 +48,11 @@ export default InteractionSurface;
|
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
50
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
51
|
-
* @codegen <<SignedSource::
|
|
51
|
+
* @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
|
|
52
52
|
* @codegenId interactions
|
|
53
53
|
* @codegenCommand yarn codegen-styles
|
|
54
54
|
* @codegenParams ["background"]
|
|
55
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
55
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
56
56
|
*/
|
|
57
57
|
const backgroundActiveColorMap = {
|
|
58
58
|
'accent.lime.subtlest': css({
|
|
@@ -220,11 +220,11 @@ const lineHeightMap = {
|
|
|
220
220
|
*/
|
|
221
221
|
/**
|
|
222
222
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
223
|
-
* @codegen <<SignedSource::
|
|
223
|
+
* @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
|
|
224
224
|
* @codegenId colors
|
|
225
225
|
* @codegenCommand yarn codegen-styles
|
|
226
226
|
* @codegenParams ["text"]
|
|
227
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
227
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
228
228
|
*/
|
|
229
229
|
const textColorMap = {
|
|
230
230
|
'color.text': css({
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
export { default as UNSAFE_Box } from './components/box.partial';
|
|
2
1
|
export { default as UNSAFE_Text } from './components/text.partial';
|
|
3
|
-
export { default as UNSAFE_Inline } from './components/inline.partial';
|
|
4
|
-
export { default as UNSAFE_Stack } from './components/stack.partial';
|
|
5
2
|
export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
|
|
@@ -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::f70c0e13112cb1620980353c239c14d8>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
9
9
|
*/
|
|
10
10
|
export default {
|
|
11
11
|
'neutral.bold': 'inverse',
|
|
@@ -47,11 +47,11 @@ export default InteractionSurface;
|
|
|
47
47
|
|
|
48
48
|
/**
|
|
49
49
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
50
|
-
* @codegen <<SignedSource::
|
|
50
|
+
* @codegen <<SignedSource::b4ea5e1af482e869a4e0a65e8080cfbf>>
|
|
51
51
|
* @codegenId interactions
|
|
52
52
|
* @codegenCommand yarn codegen-styles
|
|
53
53
|
* @codegenParams ["background"]
|
|
54
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
54
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
55
55
|
*/
|
|
56
56
|
var backgroundActiveColorMap = {
|
|
57
57
|
'accent.lime.subtlest': css({
|
|
@@ -223,11 +223,11 @@ var lineHeightMap = {
|
|
|
223
223
|
*/
|
|
224
224
|
/**
|
|
225
225
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
226
|
-
* @codegen <<SignedSource::
|
|
226
|
+
* @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
|
|
227
227
|
* @codegenId colors
|
|
228
228
|
* @codegenCommand yarn codegen-styles
|
|
229
229
|
* @codegenParams ["text"]
|
|
230
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
230
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
231
231
|
*/
|
|
232
232
|
var textColorMap = {
|
|
233
233
|
'color.text': css({
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
export { default as UNSAFE_Box } from './components/box.partial';
|
|
2
1
|
export { default as UNSAFE_Text } from './components/text.partial';
|
|
3
|
-
export { default as UNSAFE_Inline } from './components/inline.partial';
|
|
4
|
-
export { default as UNSAFE_Stack } from './components/stack.partial';
|
|
5
2
|
export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
|
|
@@ -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::f70c0e13112cb1620980353c239c14d8>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
9
9
|
*/
|
|
10
10
|
export default {
|
|
11
11
|
'neutral.bold': 'inverse',
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* A surface context provides context information on the current background (if set).
|
|
6
6
|
*/
|
|
7
|
-
export declare const SurfaceContext: import("react").Context<"color.
|
|
7
|
+
export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
|
|
8
8
|
/**
|
|
9
9
|
* __useSurface__
|
|
10
10
|
*
|
|
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
|
|
|
12
12
|
*
|
|
13
13
|
* @see SurfaceContext
|
|
14
14
|
*/
|
|
15
|
-
export declare const useSurface: () => "color.
|
|
15
|
+
export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
|
|
@@ -129,11 +129,11 @@ export type LineHeight = keyof typeof lineHeightMap;
|
|
|
129
129
|
*/
|
|
130
130
|
/**
|
|
131
131
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
132
|
-
* @codegen <<SignedSource::
|
|
132
|
+
* @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
|
|
133
133
|
* @codegenId colors
|
|
134
134
|
* @codegenCommand yarn codegen-styles
|
|
135
135
|
* @codegenParams ["text"]
|
|
136
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
136
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
137
137
|
*/
|
|
138
138
|
declare const textColorMap: {
|
|
139
139
|
readonly 'color.text': import("@emotion/react").SerializedStyles;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
export { default as UNSAFE_Box } from './components/box.partial';
|
|
2
1
|
export { default as UNSAFE_Text } from './components/text.partial';
|
|
3
|
-
export { default as UNSAFE_Inline } from './components/inline.partial';
|
|
4
|
-
export { default as UNSAFE_Stack } from './components/stack.partial';
|
|
5
2
|
export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
|
|
6
|
-
export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
|
|
7
3
|
export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
|
|
8
|
-
export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
|
|
9
|
-
export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';
|
|
@@ -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::f70c0e13112cb1620980353c239c14d8>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
9
9
|
*/
|
|
10
10
|
declare const _default: {
|
|
11
11
|
readonly 'neutral.bold': "inverse";
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* A surface context provides context information on the current background (if set).
|
|
6
6
|
*/
|
|
7
|
-
export declare const SurfaceContext: import("react").Context<"color.
|
|
7
|
+
export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
|
|
8
8
|
/**
|
|
9
9
|
* __useSurface__
|
|
10
10
|
*
|
|
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.blanket" | "
|
|
|
12
12
|
*
|
|
13
13
|
* @see SurfaceContext
|
|
14
14
|
*/
|
|
15
|
-
export declare const useSurface: () => "color.
|
|
15
|
+
export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
|
|
@@ -134,11 +134,11 @@ export type LineHeight = keyof typeof lineHeightMap;
|
|
|
134
134
|
*/
|
|
135
135
|
/**
|
|
136
136
|
* THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
137
|
-
* @codegen <<SignedSource::
|
|
137
|
+
* @codegen <<SignedSource::2e1a574ee1c58d7f4f1167778503c704>>
|
|
138
138
|
* @codegenId colors
|
|
139
139
|
* @codegenCommand yarn codegen-styles
|
|
140
140
|
* @codegenParams ["text"]
|
|
141
|
-
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::
|
|
141
|
+
* @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
|
|
142
142
|
*/
|
|
143
143
|
declare const textColorMap: {
|
|
144
144
|
readonly 'color.text': import("@emotion/react").SerializedStyles;
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
export { default as UNSAFE_Box } from './components/box.partial';
|
|
2
1
|
export { default as UNSAFE_Text } from './components/text.partial';
|
|
3
|
-
export { default as UNSAFE_Inline } from './components/inline.partial';
|
|
4
|
-
export { default as UNSAFE_Stack } from './components/stack.partial';
|
|
5
2
|
export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
|
|
6
|
-
export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
|
|
7
3
|
export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
|
|
8
|
-
export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
|
|
9
|
-
export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';
|
|
@@ -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::f70c0e13112cb1620980353c239c14d8>>
|
|
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::f6a616f7ea03ec40c148fc83050d073b>>
|
|
9
9
|
*/
|
|
10
10
|
declare const _default: {
|
|
11
11
|
readonly 'neutral.bold': "inverse";
|
|
@@ -1,37 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import Inline from '@atlaskit/primitives
|
|
3
|
+
import { Box, Inline, xcss } from '@atlaskit/primitives';
|
|
4
4
|
|
|
5
|
-
import Box from '../src/components/box.partial';
|
|
6
5
|
import Text from '../src/components/text.partial';
|
|
7
6
|
|
|
7
|
+
const boxStyles = xcss({
|
|
8
|
+
display: 'flex',
|
|
9
|
+
paddingBlock: 'space.400',
|
|
10
|
+
paddingInline: 'space.400',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
});
|
|
13
|
+
|
|
8
14
|
export default () => {
|
|
9
15
|
return (
|
|
10
16
|
<Inline space="space.100">
|
|
11
|
-
<Box
|
|
12
|
-
paddingBlock="space.400"
|
|
13
|
-
paddingInline="space.400"
|
|
14
|
-
alignItems="center"
|
|
15
|
-
backgroundColor="information"
|
|
16
|
-
>
|
|
17
|
+
<Box xcss={boxStyles} backgroundColor="color.background.information">
|
|
17
18
|
<Text>
|
|
18
19
|
<Text>Text that deletes its redundant wrapping</Text>
|
|
19
20
|
</Text>
|
|
20
21
|
</Box>
|
|
21
|
-
<Box
|
|
22
|
-
paddingBlock="space.400"
|
|
23
|
-
paddingInline="space.400"
|
|
24
|
-
alignItems="center"
|
|
25
|
-
backgroundColor="information"
|
|
26
|
-
>
|
|
22
|
+
<Box xcss={boxStyles} backgroundColor="color.background.information">
|
|
27
23
|
<Text fontWeight="semibold">Text on information</Text>
|
|
28
24
|
</Box>
|
|
29
|
-
<Box
|
|
30
|
-
paddingBlock="space.400"
|
|
31
|
-
paddingInline="space.400"
|
|
32
|
-
alignItems="center"
|
|
33
|
-
backgroundColor="brand.bold"
|
|
34
|
-
>
|
|
25
|
+
<Box xcss={boxStyles} backgroundColor="color.background.brand.bold">
|
|
35
26
|
<Text fontWeight="semibold">Text on brand bold</Text>
|
|
36
27
|
</Box>
|
|
37
28
|
</Inline>
|
package/examples/02-text.tsx
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import Heading from '@atlaskit/heading';
|
|
4
|
-
import Inline from '@atlaskit/primitives
|
|
5
|
-
import Stack from '@atlaskit/primitives/stack';
|
|
4
|
+
import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
|
|
6
5
|
|
|
7
|
-
import {
|
|
6
|
+
import { UNSAFE_Text as Text } from '../src';
|
|
7
|
+
|
|
8
|
+
const fixedWidthStyles = xcss({ display: 'flex', width: '200px' });
|
|
9
|
+
|
|
10
|
+
const lineHeightContainerStyles = xcss({
|
|
11
|
+
display: 'inline-flex',
|
|
12
|
+
});
|
|
8
13
|
|
|
9
14
|
export default () => {
|
|
10
15
|
return (
|
|
@@ -13,7 +18,7 @@ export default () => {
|
|
|
13
18
|
Text examples
|
|
14
19
|
</Heading>
|
|
15
20
|
<Stack space="space.200">
|
|
16
|
-
<Box
|
|
21
|
+
<Box>
|
|
17
22
|
<Heading level="h300">Font size</Heading>
|
|
18
23
|
<Inline space="space.200" testId="font-sizes">
|
|
19
24
|
{(
|
|
@@ -34,7 +39,7 @@ export default () => {
|
|
|
34
39
|
))}
|
|
35
40
|
</Inline>
|
|
36
41
|
</Box>
|
|
37
|
-
<Box
|
|
42
|
+
<Box>
|
|
38
43
|
<Heading level="h300" as="h4">
|
|
39
44
|
Font weight
|
|
40
45
|
</Heading>
|
|
@@ -48,7 +53,7 @@ export default () => {
|
|
|
48
53
|
)}
|
|
49
54
|
</Inline>
|
|
50
55
|
</Box>
|
|
51
|
-
<Box
|
|
56
|
+
<Box>
|
|
52
57
|
<Heading level="h300" as="h4">
|
|
53
58
|
Line height
|
|
54
59
|
</Heading>
|
|
@@ -65,15 +70,15 @@ export default () => {
|
|
|
65
70
|
).map((lineHeight) => (
|
|
66
71
|
<Box
|
|
67
72
|
key={lineHeight}
|
|
68
|
-
|
|
69
|
-
backgroundColor="neutral"
|
|
73
|
+
xcss={lineHeightContainerStyles}
|
|
74
|
+
backgroundColor="color.background.neutral"
|
|
70
75
|
>
|
|
71
76
|
<Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
|
|
72
77
|
</Box>
|
|
73
78
|
))}
|
|
74
79
|
</Inline>
|
|
75
80
|
</Box>
|
|
76
|
-
<Box
|
|
81
|
+
<Box>
|
|
77
82
|
<Heading level="h300" as="h4">
|
|
78
83
|
Testing
|
|
79
84
|
</Heading>
|
|
@@ -92,7 +97,7 @@ export default () => {
|
|
|
92
97
|
>
|
|
93
98
|
Text with various props
|
|
94
99
|
</Text>
|
|
95
|
-
<Box
|
|
100
|
+
<Box xcss={fixedWidthStyles}>
|
|
96
101
|
<Text shouldTruncate>Long truncated text that is cut off.</Text>
|
|
97
102
|
</Box>
|
|
98
103
|
</Stack>
|
package/examples/05-badge.tsx
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import Badge from '@atlaskit/badge';
|
|
4
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
4
5
|
|
|
5
|
-
import { UNSAFE_Box as Box } from '../src';
|
|
6
6
|
import Text from '../src/components/text.partial';
|
|
7
7
|
|
|
8
|
+
const containerStyles = xcss({
|
|
9
|
+
borderRadius: 'border.radius.200',
|
|
10
|
+
display: 'inlineFlex',
|
|
11
|
+
lineHeight: '16px',
|
|
12
|
+
});
|
|
13
|
+
|
|
8
14
|
export default () => {
|
|
9
15
|
return (
|
|
10
16
|
<>
|
|
11
17
|
<Badge>{8}</Badge>
|
|
12
18
|
<Box
|
|
13
|
-
|
|
14
|
-
backgroundColor="neutral"
|
|
15
|
-
display="inlineFlex"
|
|
19
|
+
xcss={containerStyles}
|
|
20
|
+
backgroundColor="color.background.neutral"
|
|
16
21
|
paddingInline="space.075"
|
|
17
|
-
UNSAFE_style={{ lineHeight: '16px' }}
|
|
18
22
|
>
|
|
19
23
|
<Text fontSize="size.075">8</Text>
|
|
20
24
|
</Box>
|
|
@@ -6,14 +6,12 @@ import Button from '@atlaskit/button';
|
|
|
6
6
|
import __noop from '@atlaskit/ds-lib/noop';
|
|
7
7
|
import Heading from '@atlaskit/heading';
|
|
8
8
|
import InfoIcon from '@atlaskit/icon/glyph/info';
|
|
9
|
-
import Inline from '@atlaskit/primitives
|
|
10
|
-
import Stack from '@atlaskit/primitives/stack';
|
|
9
|
+
import { Box, Inline, Stack } from '@atlaskit/primitives';
|
|
11
10
|
import SectionMessage, {
|
|
12
11
|
SectionMessageAction,
|
|
13
12
|
} from '@atlaskit/section-message';
|
|
14
13
|
import { token } from '@atlaskit/tokens';
|
|
15
14
|
|
|
16
|
-
import { UNSAFE_Box as Box } from '../src';
|
|
17
15
|
import Text from '../src/components/text.partial';
|
|
18
16
|
|
|
19
17
|
export default () => {
|
|
@@ -22,7 +20,7 @@ export default () => {
|
|
|
22
20
|
<Box
|
|
23
21
|
paddingBlock="space.200"
|
|
24
22
|
paddingInline="space.200"
|
|
25
|
-
backgroundColor="information"
|
|
23
|
+
backgroundColor="color.background.information"
|
|
26
24
|
>
|
|
27
25
|
<Inline space="space.200">
|
|
28
26
|
<InfoIcon
|
package/examples/07-comment.tsx
CHANGED
|
@@ -2,10 +2,8 @@
|
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
3
|
|
|
4
4
|
import Lozenge from '@atlaskit/lozenge';
|
|
5
|
-
import Inline from '@atlaskit/primitives
|
|
6
|
-
import Stack from '@atlaskit/primitives/stack';
|
|
5
|
+
import { Box, Inline, Stack } from '@atlaskit/primitives';
|
|
7
6
|
|
|
8
|
-
import { UNSAFE_Box as Box } from '../src';
|
|
9
7
|
import Text from '../src/components/text.partial';
|
|
10
8
|
|
|
11
9
|
const Author = ({ children }: any) => {
|