@atlaskit/ds-explorations 2.2.14 → 2.2.15

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,12 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 2.2.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6b3e7af515d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b3e7af515d) - Updates based on new codgen for tokens (no API change).
8
+ - Updated dependencies
9
+
3
10
  ## 2.2.14
4
11
 
5
12
  ### Patch Changes
@@ -135,11 +135,11 @@ var Text = function Text(_ref) {
135
135
  var _default = Text;
136
136
  /**
137
137
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
138
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
138
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
139
139
  * @codegenId typography
140
140
  * @codegenCommand yarn codegen-styles
141
141
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
142
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
142
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
143
143
  */
144
144
  exports.default = _default;
145
145
  var fontSizeMap = {
@@ -183,18 +183,21 @@ var fontWeightMap = {
183
183
  })
184
184
  };
185
185
  var fontFamilyMap = {
186
+ body: (0, _react2.css)({
187
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
188
+ }),
186
189
  brand: (0, _react2.css)({
187
190
  fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
188
191
  }),
189
192
  code: (0, _react2.css)({
190
193
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
191
194
  }),
195
+ heading: (0, _react2.css)({
196
+ fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
197
+ }),
192
198
  monospace: (0, _react2.css)({
193
199
  fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
194
200
  }),
195
- product: (0, _react2.css)({
196
- fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
197
- }),
198
201
  sans: (0, _react2.css)({
199
202
  fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
200
203
  })
@@ -126,11 +126,11 @@ export default Text;
126
126
 
127
127
  /**
128
128
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
129
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
129
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
130
130
  * @codegenId typography
131
131
  * @codegenCommand yarn codegen-styles
132
132
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
133
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
133
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
134
134
  */
135
135
  const fontSizeMap = {
136
136
  'size.050': css({
@@ -173,18 +173,21 @@ const fontWeightMap = {
173
173
  })
174
174
  };
175
175
  const fontFamilyMap = {
176
+ body: css({
177
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
178
+ }),
176
179
  brand: css({
177
180
  fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
178
181
  }),
179
182
  code: css({
180
183
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
181
184
  }),
185
+ heading: css({
186
+ fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
187
+ }),
182
188
  monospace: css({
183
189
  fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
184
190
  }),
185
- product: css({
186
- fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
187
- }),
188
191
  sans: css({
189
192
  fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
190
193
  })
@@ -129,11 +129,11 @@ export default Text;
129
129
 
130
130
  /**
131
131
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
132
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
132
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
133
133
  * @codegenId typography
134
134
  * @codegenCommand yarn codegen-styles
135
135
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
136
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
136
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
137
137
  */
138
138
  var fontSizeMap = {
139
139
  'size.050': css({
@@ -176,18 +176,21 @@ var fontWeightMap = {
176
176
  })
177
177
  };
178
178
  var fontFamilyMap = {
179
+ body: css({
180
+ fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
181
+ }),
179
182
  brand: css({
180
183
  fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
181
184
  }),
182
185
  code: css({
183
186
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
184
187
  }),
188
+ heading: css({
189
+ fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
190
+ }),
185
191
  monospace: css({
186
192
  fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
187
193
  }),
188
- product: css({
189
- fontFamily: "var(--ds-font-family-product, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
190
- }),
191
194
  sans: css({
192
195
  fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
193
196
  })
@@ -81,11 +81,11 @@ declare const Text: FC<TextProps>;
81
81
  export default Text;
82
82
  /**
83
83
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
84
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
84
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
85
85
  * @codegenId typography
86
86
  * @codegenCommand yarn codegen-styles
87
87
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
88
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
88
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
89
89
  */
90
90
  declare const fontSizeMap: {
91
91
  'size.050': import("@emotion/react").SerializedStyles;
@@ -106,10 +106,11 @@ declare const fontWeightMap: {
106
106
  };
107
107
  export type FontWeight = keyof typeof fontWeightMap;
108
108
  declare const fontFamilyMap: {
109
+ body: import("@emotion/react").SerializedStyles;
109
110
  brand: import("@emotion/react").SerializedStyles;
110
111
  code: import("@emotion/react").SerializedStyles;
112
+ heading: import("@emotion/react").SerializedStyles;
111
113
  monospace: import("@emotion/react").SerializedStyles;
112
- product: import("@emotion/react").SerializedStyles;
113
114
  sans: import("@emotion/react").SerializedStyles;
114
115
  };
115
116
  export type FontFamily = keyof typeof fontFamilyMap;
@@ -86,11 +86,11 @@ declare const Text: FC<TextProps>;
86
86
  export default Text;
87
87
  /**
88
88
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
89
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
89
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
90
90
  * @codegenId typography
91
91
  * @codegenCommand yarn codegen-styles
92
92
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
93
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
93
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
94
94
  */
95
95
  declare const fontSizeMap: {
96
96
  'size.050': import("@emotion/react").SerializedStyles;
@@ -111,10 +111,11 @@ declare const fontWeightMap: {
111
111
  };
112
112
  export type FontWeight = keyof typeof fontWeightMap;
113
113
  declare const fontFamilyMap: {
114
+ body: import("@emotion/react").SerializedStyles;
114
115
  brand: import("@emotion/react").SerializedStyles;
115
116
  code: import("@emotion/react").SerializedStyles;
117
+ heading: import("@emotion/react").SerializedStyles;
116
118
  monospace: import("@emotion/react").SerializedStyles;
117
- product: import("@emotion/react").SerializedStyles;
118
119
  sans: import("@emotion/react").SerializedStyles;
119
120
  };
120
121
  export type FontFamily = keyof typeof fontFamilyMap;
package/docs/01-basic.tsx CHANGED
@@ -5,14 +5,15 @@ import {
5
5
  DevPreviewWarning,
6
6
  md,
7
7
  } from '@atlaskit/docs';
8
+ import { token } from '@atlaskit/tokens';
8
9
 
9
10
  export default md`
10
11
  ${(
11
12
  <>
12
- <div style={{ marginBottom: 8 }}>
13
+ <div style={{ marginBottom: token('space.100', '8px') }}>
13
14
  <AtlassianInternalWarning />
14
15
  </div>
15
- <div style={{ marginTop: 8 }}>
16
+ <div style={{ marginTop: token('space.100', '8px') }}>
16
17
  <DevPreviewWarning />
17
18
  </div>
18
19
  </>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "2.2.14",
3
+ "version": "2.2.15",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
25
25
  "prepare": "yarn ak-postbuild"
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/tokens": "^1.21.0",
28
+ "@atlaskit/tokens": "^1.22.0",
29
29
  "@babel/runtime": "^7.0.0",
30
30
  "@emotion/react": "^11.7.1",
31
31
  "tiny-invariant": "^1.2.0"
@@ -195,11 +195,11 @@ export default Text;
195
195
 
196
196
  /**
197
197
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
198
- * @codegen <<SignedSource::d3b73d63fef16f1f12ad8ec39520497e>>
198
+ * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
199
199
  * @codegenId typography
200
200
  * @codegenCommand yarn codegen-styles
201
201
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
202
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::0e11bb3b13c1850386ae45bae589a46a>>
202
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
203
203
  */
204
204
  const fontSizeMap = {
205
205
  'size.050': css({
@@ -248,6 +248,12 @@ const fontWeightMap = {
248
248
  export type FontWeight = keyof typeof fontWeightMap;
249
249
 
250
250
  const fontFamilyMap = {
251
+ body: css({
252
+ fontFamily: token(
253
+ 'font.family.body',
254
+ 'ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
255
+ ),
256
+ }),
251
257
  brand: css({
252
258
  fontFamily: token('font.family.brand', 'Charlie Sans'),
253
259
  }),
@@ -257,16 +263,16 @@ const fontFamilyMap = {
257
263
  'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
258
264
  ),
259
265
  }),
260
- monospace: css({
266
+ heading: css({
261
267
  fontFamily: token(
262
- 'font.family.monospace',
263
- 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
268
+ 'font.family.heading',
269
+ 'ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
264
270
  ),
265
271
  }),
266
- product: css({
272
+ monospace: css({
267
273
  fontFamily: token(
268
- 'font.family.product',
269
- 'ui-sans-serif, "Segoe UI", system-ui, Ubuntu, "Helvetica Neue", sans-serif',
274
+ 'font.family.monospace',
275
+ 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
270
276
  ),
271
277
  }),
272
278
  sans: css({