@atlaskit/primitives 20.2.1 → 20.3.0

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 CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 20.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`8f588905041f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f588905041f4) -
8
+ Add two new interaction-state tokens for the neutral container surface:
9
+ `elevation.surface.container.hovered` and `elevation.surface.container.pressed`. Use these for
10
+ hovered and pressed states of elements built on `elevation.surface.container`.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 20.2.1
4
17
 
5
18
  ### Patch Changes
package/compass.yml ADDED
@@ -0,0 +1,38 @@
1
+ configVersion: 1
2
+ id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/ccfac433-f59e-46f5-95b4-ad827a4a4c66
3
+ name: '@atlaskit/primitives'
4
+ ownerId: ari:cloud:identity::team/0f51d180-8c20-4e37-8e6a-404951268188 # Design System Almond
5
+ labels:
6
+ - platform-code
7
+ - platform-afm
8
+ typeId: OTHER
9
+ fields:
10
+ tier: 4
11
+ lifecycle: Active
12
+ isMonorepoProject: true
13
+ links:
14
+ - name: Root Repository
15
+ type: REPOSITORY
16
+ url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
17
+ - name: Slack Channel
18
+ type: CHAT_CHANNEL
19
+ url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
20
+ - name: Primitives
21
+ type: REPOSITORY
22
+ url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/primitives
23
+ customFields:
24
+ - name: Department
25
+ type: text
26
+ value: Eng - Design System Fundamentals
27
+ - name: Technical Owner
28
+ type: user
29
+ value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
30
+ - name: Required Reviewers Opt In
31
+ type: boolean
32
+ value: true
33
+ - name: Reviewer Selection Mechanism
34
+ type: text
35
+ value: random(2)
36
+ - name: Required Reviewer Approvals
37
+ type: number
38
+ value: 1
@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
70
70
  action: 'clicked',
71
71
  componentName: componentName || 'Anchor',
72
72
  packageName: "@atlaskit/primitives",
73
- packageVersion: "20.2.0",
73
+ packageVersion: "20.2.1",
74
74
  analyticsData: analyticsContext,
75
75
  actionSubject: 'link'
76
76
  });
@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
61
61
  action: 'clicked',
62
62
  componentName: componentName || 'Pressable',
63
63
  packageName: "@atlaskit/primitives",
64
- packageVersion: "20.2.0",
64
+ packageVersion: "20.2.1",
65
65
  analyticsData: analyticsContext,
66
66
  actionSubject: 'button'
67
67
  });
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
105
105
  action: 'clicked',
106
106
  componentName: componentName || 'Anchor',
107
107
  packageName: "@atlaskit/primitives",
108
- packageVersion: "20.2.0",
108
+ packageVersion: "20.2.1",
109
109
  analyticsData: analyticsContext,
110
110
  actionSubject: 'link'
111
111
  });
@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
97
97
  action: 'clicked',
98
98
  componentName: componentName || 'Pressable',
99
99
  packageName: "@atlaskit/primitives",
100
- packageVersion: "20.2.0",
100
+ packageVersion: "20.2.1",
101
101
  analyticsData: analyticsContext,
102
102
  actionSubject: 'button'
103
103
  });
@@ -73,10 +73,10 @@ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positive
73
73
 
74
74
  /**
75
75
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
76
- * @codegen <<SignedSource::e8d2ee8bd083c5b6e6d3b0bec7a275a5>>
76
+ * @codegen <<SignedSource::0f340fdaaaa6cb83c99fb90545823eef>>
77
77
  * @codegenId inverse-colors
78
78
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
79
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
79
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
80
80
  */
81
81
  var inverseColorMap = exports.inverseColorMap = {
82
82
  'color.background.neutral.bold': 'color.text.inverse',
@@ -117,11 +117,11 @@ var inverseColorMap = exports.inverseColorMap = {
117
117
 
118
118
  /**
119
119
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
120
- * @codegen <<SignedSource::617e401f8358136781549b9d42338882>>
120
+ * @codegen <<SignedSource::09657c75266075eb43d83be979734a2e>>
121
121
  * @codegenId elevation
122
122
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
123
123
  * @codegenParams ["opacity", "shadow", "surface"]
124
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
124
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
125
125
  */
126
126
  var opacityMap = exports.opacityMap = {
127
127
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -139,6 +139,8 @@ var surfaceColorMap = exports.surfaceColorMap = {
139
139
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
140
140
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
141
141
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
142
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
143
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
142
144
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
143
145
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
144
146
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -153,11 +155,11 @@ var surfaceColorMap = exports.surfaceColorMap = {
153
155
 
154
156
  /**
155
157
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
156
- * @codegen <<SignedSource::ca867a1010665c5ed92cd318dcf507ae>>
158
+ * @codegen <<SignedSource::18502eb0277b6ce295291cd918548468>>
157
159
  * @codegenId colors
158
160
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
159
161
  * @codegenParams ["border", "background", "text", "fill"]
160
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
162
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
161
163
  */
162
164
  var borderColorMap = exports.borderColorMap = {
163
165
  'color.border': "var(--ds-border, #0B120E24)",
@@ -413,6 +415,8 @@ var backgroundColorMap = exports.backgroundColorMap = {
413
415
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
414
416
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
415
417
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
418
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
419
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
416
420
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
417
421
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
418
422
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -56,7 +56,7 @@ const AnchorNoRef = ({
56
56
  action: 'clicked',
57
57
  componentName: componentName || 'Anchor',
58
58
  packageName: "@atlaskit/primitives",
59
- packageVersion: "20.2.0",
59
+ packageVersion: "20.2.1",
60
60
  analyticsData: analyticsContext,
61
61
  actionSubject: 'link'
62
62
  });
@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
48
48
  action: 'clicked',
49
49
  componentName: componentName || 'Pressable',
50
50
  packageName: "@atlaskit/primitives",
51
- packageVersion: "20.2.0",
51
+ packageVersion: "20.2.1",
52
52
  analyticsData: analyticsContext,
53
53
  actionSubject: 'button'
54
54
  });
@@ -94,7 +94,7 @@ const AnchorNoRef = ({
94
94
  action: 'clicked',
95
95
  componentName: componentName || 'Anchor',
96
96
  packageName: "@atlaskit/primitives",
97
- packageVersion: "20.2.0",
97
+ packageVersion: "20.2.1",
98
98
  analyticsData: analyticsContext,
99
99
  actionSubject: 'link'
100
100
  });
@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
86
86
  action: 'clicked',
87
87
  componentName: componentName || 'Pressable',
88
88
  packageName: "@atlaskit/primitives",
89
- packageVersion: "20.2.0",
89
+ packageVersion: "20.2.1",
90
90
  analyticsData: analyticsContext,
91
91
  actionSubject: 'button'
92
92
  });
@@ -67,10 +67,10 @@ export const allSpaceMap = {
67
67
 
68
68
  /**
69
69
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
70
- * @codegen <<SignedSource::e8d2ee8bd083c5b6e6d3b0bec7a275a5>>
70
+ * @codegen <<SignedSource::0f340fdaaaa6cb83c99fb90545823eef>>
71
71
  * @codegenId inverse-colors
72
72
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
74
74
  */
75
75
  export const inverseColorMap = {
76
76
  'color.background.neutral.bold': 'color.text.inverse',
@@ -111,11 +111,11 @@ export const inverseColorMap = {
111
111
 
112
112
  /**
113
113
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
114
- * @codegen <<SignedSource::617e401f8358136781549b9d42338882>>
114
+ * @codegen <<SignedSource::09657c75266075eb43d83be979734a2e>>
115
115
  * @codegenId elevation
116
116
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
117
117
  * @codegenParams ["opacity", "shadow", "surface"]
118
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
118
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
119
119
  */
120
120
  export const opacityMap = {
121
121
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -133,6 +133,8 @@ export const surfaceColorMap = {
133
133
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
134
134
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
135
135
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
136
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
137
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
136
138
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
137
139
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
138
140
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -147,11 +149,11 @@ export const surfaceColorMap = {
147
149
 
148
150
  /**
149
151
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
150
- * @codegen <<SignedSource::ca867a1010665c5ed92cd318dcf507ae>>
152
+ * @codegen <<SignedSource::18502eb0277b6ce295291cd918548468>>
151
153
  * @codegenId colors
152
154
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
153
155
  * @codegenParams ["border", "background", "text", "fill"]
154
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
156
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
155
157
  */
156
158
  export const borderColorMap = {
157
159
  'color.border': "var(--ds-border, #0B120E24)",
@@ -407,6 +409,8 @@ export const backgroundColorMap = {
407
409
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
408
410
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
409
411
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
412
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
413
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
410
414
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
411
415
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
412
416
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
61
61
  action: 'clicked',
62
62
  componentName: componentName || 'Anchor',
63
63
  packageName: "@atlaskit/primitives",
64
- packageVersion: "20.2.0",
64
+ packageVersion: "20.2.1",
65
65
  analyticsData: analyticsContext,
66
66
  actionSubject: 'link'
67
67
  });
@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
52
52
  action: 'clicked',
53
53
  componentName: componentName || 'Pressable',
54
54
  packageName: "@atlaskit/primitives",
55
- packageVersion: "20.2.0",
55
+ packageVersion: "20.2.1",
56
56
  analyticsData: analyticsContext,
57
57
  actionSubject: 'button'
58
58
  });
@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
99
99
  action: 'clicked',
100
100
  componentName: componentName || 'Anchor',
101
101
  packageName: "@atlaskit/primitives",
102
- packageVersion: "20.2.0",
102
+ packageVersion: "20.2.1",
103
103
  analyticsData: analyticsContext,
104
104
  actionSubject: 'link'
105
105
  });
@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
91
91
  action: 'clicked',
92
92
  componentName: componentName || 'Pressable',
93
93
  packageName: "@atlaskit/primitives",
94
- packageVersion: "20.2.0",
94
+ packageVersion: "20.2.1",
95
95
  analyticsData: analyticsContext,
96
96
  actionSubject: 'button'
97
97
  });
@@ -67,10 +67,10 @@ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), nega
67
67
 
68
68
  /**
69
69
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
70
- * @codegen <<SignedSource::e8d2ee8bd083c5b6e6d3b0bec7a275a5>>
70
+ * @codegen <<SignedSource::0f340fdaaaa6cb83c99fb90545823eef>>
71
71
  * @codegenId inverse-colors
72
72
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
73
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
73
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
74
74
  */
75
75
  export var inverseColorMap = {
76
76
  'color.background.neutral.bold': 'color.text.inverse',
@@ -111,11 +111,11 @@ export var inverseColorMap = {
111
111
 
112
112
  /**
113
113
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
114
- * @codegen <<SignedSource::617e401f8358136781549b9d42338882>>
114
+ * @codegen <<SignedSource::09657c75266075eb43d83be979734a2e>>
115
115
  * @codegenId elevation
116
116
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
117
117
  * @codegenParams ["opacity", "shadow", "surface"]
118
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
118
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
119
119
  */
120
120
  export var opacityMap = {
121
121
  'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -133,6 +133,8 @@ export var surfaceColorMap = {
133
133
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
134
134
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
135
135
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
136
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
137
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
136
138
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
137
139
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
138
140
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -147,11 +149,11 @@ export var surfaceColorMap = {
147
149
 
148
150
  /**
149
151
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
150
- * @codegen <<SignedSource::ca867a1010665c5ed92cd318dcf507ae>>
152
+ * @codegen <<SignedSource::18502eb0277b6ce295291cd918548468>>
151
153
  * @codegenId colors
152
154
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
153
155
  * @codegenParams ["border", "background", "text", "fill"]
154
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
156
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
155
157
  */
156
158
  export var borderColorMap = {
157
159
  'color.border': "var(--ds-border, #0B120E24)",
@@ -407,6 +409,8 @@ export var backgroundColorMap = {
407
409
  'elevation.surface.hovered': "var(--ds-surface-hovered, #F0F1F2)",
408
410
  'elevation.surface.pressed': "var(--ds-surface-pressed, #DDDEE1)",
409
411
  'elevation.surface.container': "var(--ds-surface-container, #F0F1F2)",
412
+ 'elevation.surface.container.hovered': "var(--ds-surface-container-hovered, #0515240F)",
413
+ 'elevation.surface.container.pressed': "var(--ds-surface-container-pressed, #0B120E24)",
410
414
  'elevation.surface.overlay': "var(--ds-surface-overlay, #FFFFFF)",
411
415
  'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered, #F0F1F2)",
412
416
  'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed, #DDDEE1)",
@@ -3,4 +3,4 @@
3
3
  * as we typically want to remove these from allowed elements.
4
4
  */
5
5
  export type SVGElements = 'svg' | 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
6
- export type BackgroundColorToken = 'color.rovo.background.brand.bold' | 'color.rovo.background.brand.bold.hovered' | 'color.rovo.background.brand.bold.pressed' | '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.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.pressed' | 'color.background.danger.subtle' | '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.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.pressed' | 'color.background.warning.subtle' | '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.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.pressed' | 'color.background.success.subtle' | '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.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.pressed' | 'color.background.discovery.subtle' | '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.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.pressed' | 'color.background.information.subtle' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.container' | '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';
6
+ export type BackgroundColorToken = 'color.rovo.background.brand.bold' | 'color.rovo.background.brand.bold.hovered' | 'color.rovo.background.brand.bold.pressed' | '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.subtler' | 'color.background.danger.subtler.hovered' | 'color.background.danger.subtler.pressed' | 'color.background.danger.subtle' | '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.subtler' | 'color.background.warning.subtler.hovered' | 'color.background.warning.subtler.pressed' | 'color.background.warning.subtle' | '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.subtler' | 'color.background.success.subtler.hovered' | 'color.background.success.subtler.pressed' | 'color.background.success.subtle' | '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.subtler' | 'color.background.discovery.subtler.hovered' | 'color.background.discovery.subtler.pressed' | 'color.background.discovery.subtle' | '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.subtler' | 'color.background.information.subtler.hovered' | 'color.background.information.subtler.pressed' | 'color.background.information.subtle' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.skeleton' | 'color.skeleton.subtle' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.container' | 'elevation.surface.container.hovered' | 'elevation.surface.container.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';
@@ -90,10 +90,10 @@ export type AllSpace = keyof typeof allSpaceMap;
90
90
  */
91
91
  /**
92
92
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
93
- * @codegen <<SignedSource::e8d2ee8bd083c5b6e6d3b0bec7a275a5>>
93
+ * @codegen <<SignedSource::0f340fdaaaa6cb83c99fb90545823eef>>
94
94
  * @codegenId inverse-colors
95
95
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
96
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
96
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
97
97
  */
98
98
  export declare const inverseColorMap: {
99
99
  'color.background.neutral.bold': 'color.text.inverse';
@@ -132,11 +132,11 @@ export declare const inverseColorMap: {
132
132
  */
133
133
  /**
134
134
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
135
- * @codegen <<SignedSource::617e401f8358136781549b9d42338882>>
135
+ * @codegen <<SignedSource::09657c75266075eb43d83be979734a2e>>
136
136
  * @codegenId elevation
137
137
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
138
138
  * @codegenParams ["opacity", "shadow", "surface"]
139
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
139
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
140
140
  */
141
141
  export declare const opacityMap: {
142
142
  'opacity.disabled': 'var(--ds-opacity-disabled)';
@@ -156,6 +156,8 @@ export declare const surfaceColorMap: {
156
156
  'elevation.surface.hovered': 'var(--ds-surface-hovered)';
157
157
  'elevation.surface.pressed': 'var(--ds-surface-pressed)';
158
158
  'elevation.surface.container': 'var(--ds-surface-container)';
159
+ 'elevation.surface.container.hovered': 'var(--ds-surface-container-hovered)';
160
+ 'elevation.surface.container.pressed': 'var(--ds-surface-container-pressed)';
159
161
  'elevation.surface.overlay': 'var(--ds-surface-overlay)';
160
162
  'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
161
163
  'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
@@ -170,11 +172,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
170
172
  */
171
173
  /**
172
174
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
173
- * @codegen <<SignedSource::ca867a1010665c5ed92cd318dcf507ae>>
175
+ * @codegen <<SignedSource::18502eb0277b6ce295291cd918548468>>
174
176
  * @codegenId colors
175
177
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
176
178
  * @codegenParams ["border", "background", "text", "fill"]
177
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::89430472c8668e635450d1233437a9ca>>
179
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::9408414e02e8cbbf0b0d7f4f036de89a>>
178
180
  */
179
181
  export declare const borderColorMap: {
180
182
  'color.border': 'var(--ds-border)';
@@ -431,6 +433,8 @@ export declare const backgroundColorMap: {
431
433
  'elevation.surface.hovered': 'var(--ds-surface-hovered)';
432
434
  'elevation.surface.pressed': 'var(--ds-surface-pressed)';
433
435
  'elevation.surface.container': 'var(--ds-surface-container)';
436
+ 'elevation.surface.container.hovered': 'var(--ds-surface-container-hovered)';
437
+ 'elevation.surface.container.pressed': 'var(--ds-surface-container-pressed)';
434
438
  'elevation.surface.overlay': 'var(--ds-surface-overlay)';
435
439
  'elevation.surface.overlay.hovered': 'var(--ds-surface-overlay-hovered)';
436
440
  'elevation.surface.overlay.pressed': 'var(--ds-surface-overlay-pressed)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "20.2.1",
3
+ "version": "20.3.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -139,7 +139,7 @@
139
139
  "@atlaskit/ds-lib": "^8.0.0",
140
140
  "@atlaskit/interaction-context": "^4.0.0",
141
141
  "@atlaskit/react-compiler-gating": "^0.2.0",
142
- "@atlaskit/tokens": "^15.2.0",
142
+ "@atlaskit/tokens": "^15.3.0",
143
143
  "@atlaskit/visually-hidden": "^4.1.0",
144
144
  "@babel/runtime": "^7.0.0",
145
145
  "@compiled/react": "^0.20.0",