@artsy/palette-mobile 2.1.3 → 3.0.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.
Files changed (17) hide show
  1. package/dist/Theme.d.ts +2 -278
  2. package/dist/Theme.js +1 -14
  3. package/dist/elements/EntityHeader/EntityHeader.js +4 -4
  4. package/dist/elements/SimpleMessage/SimpleMessage.d.ts +3 -6
  5. package/dist/elements/SimpleMessage/SimpleMessage.js +3 -3
  6. package/dist/elements/Text/index.d.ts +0 -19
  7. package/dist/elements/Text/index.js +0 -88
  8. package/dist/molecules/MenuItem.js +1 -1
  9. package/dist/tokens.d.ts +8 -294
  10. package/dist/tokens.js +0 -33
  11. package/package.json +1 -1
  12. package/dist/elements/Text/Sans.d.ts +0 -21
  13. package/dist/elements/Text/Sans.js +0 -13
  14. package/dist/elements/Text/Serif.d.ts +0 -20
  15. package/dist/elements/Text/Serif.js +0 -13
  16. package/dist/elements/Text/Typography-v1.d.ts +0 -64
  17. package/dist/elements/Text/Typography-v1.js +0 -57
package/dist/Theme.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { AllThemesType, Color, SpacingUnit, THEMES } from "./tokens";
2
2
  export declare const Theme: ({ children, theme, }: {
3
3
  children?: React.ReactNode;
4
- theme?: AllThemesType | "v2" | "v3" | "v5light" | "v5" | "v5dark" | undefined;
4
+ theme?: AllThemesType | "v3" | "v5light" | "v5" | "v5dark" | undefined;
5
5
  }) => JSX.Element;
6
6
  export interface ColorFuncOverload {
7
7
  (colorNumber: undefined): undefined;
@@ -18,279 +18,6 @@ export declare const isThemeV3: (theme: AllThemesType) => boolean;
18
18
  * Only use this if it's are absolutely neccessary, and only in tests.
19
19
  */
20
20
  export declare const _test_THEMES: {
21
- v2: {
22
- space: {
23
- 0.3: number;
24
- 0.5: number;
25
- 1: number;
26
- 1.5: number;
27
- 2: number;
28
- 3: number;
29
- 4: number;
30
- 5: number;
31
- 6: number;
32
- 9: number;
33
- 12: number;
34
- 18: number;
35
- };
36
- fontFamily: {
37
- sans: {
38
- regular: {
39
- normal: string;
40
- italic: string;
41
- };
42
- medium: {
43
- normal: string;
44
- italic: string;
45
- };
46
- semibold: {
47
- normal: null;
48
- italic: null;
49
- };
50
- };
51
- serif: {
52
- regular: {
53
- normal: string;
54
- italic: string;
55
- };
56
- medium: {
57
- normal: null;
58
- italic: null;
59
- };
60
- semibold: {
61
- normal: string;
62
- italic: null;
63
- };
64
- };
65
- };
66
- fonts: {
67
- sans: string;
68
- serif: string;
69
- };
70
- id: string;
71
- borders: string[];
72
- breakpoints: string[] & {
73
- xl: string;
74
- lg: string;
75
- md: string;
76
- sm: string;
77
- xs: string;
78
- };
79
- colors: {
80
- black100: string;
81
- black80: string;
82
- black60: string;
83
- black30: string;
84
- black10: string;
85
- black5: string;
86
- blue100: string;
87
- blue10: string;
88
- copper100: string;
89
- copper10: string;
90
- green100: string;
91
- green10: string;
92
- purple100: string;
93
- brand: string;
94
- purple30: string;
95
- purple5: string;
96
- red100: string;
97
- red10: string;
98
- yellow100: string;
99
- yellow30: string;
100
- yellow10: string;
101
- white100: string;
102
- };
103
- fontSizes: {
104
- size12: string;
105
- size11: string;
106
- size10: string;
107
- size9: string;
108
- size8: string;
109
- size7: string;
110
- size6: string;
111
- size5: string;
112
- size4: string;
113
- size3: string;
114
- size2: string;
115
- size1: string;
116
- };
117
- letterSpacings: {
118
- tight: string;
119
- tightest: string;
120
- };
121
- lineHeights: {
122
- solid: number;
123
- title: number;
124
- body: number;
125
- };
126
- mediaQueries: {
127
- xl: string;
128
- lg: string;
129
- md: string;
130
- sm: string;
131
- xs: string;
132
- hover: string;
133
- };
134
- grid: {
135
- breakpoints: {
136
- xl: number;
137
- lg: number;
138
- md: number;
139
- sm: number;
140
- xs: number;
141
- };
142
- container: {
143
- padding: number;
144
- };
145
- row: {
146
- padding: number;
147
- };
148
- col: {
149
- padding: number;
150
- };
151
- };
152
- typeSizes: {
153
- sans: {
154
- "0": {
155
- fontSize: string;
156
- lineHeight: string;
157
- };
158
- "1": {
159
- fontSize: string;
160
- lineHeight: string;
161
- };
162
- "2": {
163
- fontSize: string;
164
- lineHeight: string;
165
- };
166
- "3": {
167
- fontSize: string;
168
- lineHeight: string;
169
- };
170
- "3t": {
171
- fontSize: string;
172
- lineHeight: string;
173
- };
174
- "4": {
175
- fontSize: string;
176
- lineHeight: string;
177
- };
178
- "4t": {
179
- fontSize: string;
180
- lineHeight: string;
181
- };
182
- "5": {
183
- fontSize: string;
184
- lineHeight: string;
185
- };
186
- "5t": {
187
- fontSize: string;
188
- lineHeight: string;
189
- };
190
- "6": {
191
- fontSize: string;
192
- lineHeight: string;
193
- };
194
- "8": {
195
- fontSize: string;
196
- lineHeight: string;
197
- };
198
- "10": {
199
- fontSize: string;
200
- lineHeight: string;
201
- };
202
- "12": {
203
- fontSize: string;
204
- lineHeight: string;
205
- };
206
- "14": {
207
- fontSize: string;
208
- lineHeight: string;
209
- };
210
- "16": {
211
- fontSize: string;
212
- lineHeight: string;
213
- };
214
- };
215
- serif: {
216
- "1": {
217
- fontSize: string;
218
- lineHeight: string;
219
- };
220
- "2": {
221
- fontSize: string;
222
- lineHeight: string;
223
- };
224
- "3": {
225
- fontSize: string;
226
- lineHeight: string;
227
- };
228
- "3t": {
229
- fontSize: string;
230
- lineHeight: string;
231
- };
232
- "4": {
233
- fontSize: string;
234
- lineHeight: string;
235
- };
236
- "4t": {
237
- fontSize: string;
238
- lineHeight: string;
239
- };
240
- "5": {
241
- fontSize: string;
242
- lineHeight: string;
243
- };
244
- "5t": {
245
- fontSize: string;
246
- lineHeight: string;
247
- };
248
- "6": {
249
- fontSize: string;
250
- lineHeight: string;
251
- };
252
- "8": {
253
- fontSize: string;
254
- lineHeight: string;
255
- };
256
- "10": {
257
- fontSize: string;
258
- lineHeight: string;
259
- };
260
- "12": {
261
- fontSize: string;
262
- lineHeight: string;
263
- };
264
- };
265
- display: {
266
- "2": {
267
- fontSize: string;
268
- lineHeight: string;
269
- };
270
- "3t": {
271
- fontSize: string;
272
- lineHeight: string;
273
- };
274
- "4t": {
275
- fontSize: string;
276
- lineHeight: string;
277
- };
278
- "5t": {
279
- fontSize: string;
280
- lineHeight: string;
281
- };
282
- "6": {
283
- fontSize: string;
284
- lineHeight: string;
285
- };
286
- "8": {
287
- fontSize: string;
288
- lineHeight: string;
289
- };
290
- };
291
- };
292
- textVariants: Record<string, Record<"largeTitle" | "title" | "subtitle" | "text" | "mediumText" | "caption" | "small", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
293
- };
294
21
  v3: {
295
22
  space: {
296
23
  "0.5": number;
@@ -300,7 +27,7 @@ export declare const _test_THEMES: {
300
27
  "6": number;
301
28
  "12": number;
302
29
  };
303
- colors: Record<(string & {}) | "brand" | "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple" | "yellow30", string>;
30
+ colors: Record<(string & {}) | ("brand" | "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10" | "devpurple"), string>;
304
31
  fonts: {
305
32
  sans: {
306
33
  regular: string;
@@ -352,7 +79,6 @@ export declare const _test_THEMES: {
352
79
  red100: string;
353
80
  red10: string;
354
81
  devpurple: string;
355
- yellow30: string;
356
82
  };
357
83
  space: {
358
84
  "0.5": number;
@@ -413,7 +139,6 @@ export declare const _test_THEMES: {
413
139
  red100: string;
414
140
  red10: string;
415
141
  devpurple: string;
416
- yellow30: string;
417
142
  };
418
143
  space: {
419
144
  "0.5": number;
@@ -474,7 +199,6 @@ export declare const _test_THEMES: {
474
199
  red100: string;
475
200
  red10: string;
476
201
  devpurple: string;
477
- yellow30: string;
478
202
  };
479
203
  space: {
480
204
  "0.5": number;
package/dist/Theme.js CHANGED
@@ -10,24 +10,11 @@ const figureOutTheme = (theme) => {
10
10
  if (!(0, remeda_1.isString)(theme)) {
11
11
  return theme;
12
12
  }
13
- // forcing v3 spaces, unless specifically requiring v2, in which case we use `spaceV2`
14
- const mergedSpacesV2WithV3OnTop = {
15
- ...tokens_1.THEMES.v2.space,
16
- ...tokens_1.THEMES.v3.space,
17
- // now add the rest of the mappings
18
- "0.3": tokens_1.THEMES.v3.space["0.5"],
19
- "1.5": tokens_1.THEMES.v3.space["2"],
20
- "3": tokens_1.THEMES.v3.space["4"],
21
- "5": tokens_1.THEMES.v3.space["6"],
22
- "9": tokens_1.THEMES.v3.space["6"],
23
- "18": tokens_1.THEMES.v3.space["12"], // TODO-PALETTE-V3 replace all {18} and "18" with "12"
24
- };
25
- // TODO-PALETTE-V3 remove the mapping as the last TODO-PALETTE-V3 to be done for space
26
13
  if (theme === "v5" || theme === "v5light")
27
14
  return tokens_1.THEMES.v5light;
28
15
  if (theme === "v5dark")
29
16
  return tokens_1.THEMES.v5dark;
30
- return { ...tokens_1.THEMES.v3, space: mergedSpacesV2WithV3OnTop };
17
+ return tokens_1.THEMES.v3;
31
18
  };
32
19
  const Theme = ({ children, theme = "v5", }) => {
33
20
  const actualTheme = figureOutTheme(theme);
package/dist/elements/EntityHeader/EntityHeader.js CHANGED
@@ -7,10 +7,10 @@ const text_1 = require("../../helpers/text");
7
7
  const Avatar_1 = require("../Avatar");
8
8
  const Text_1 = require("../Text");
9
9
  const EntityHeader = ({ smallVariant, href, imageUrl, initials, name, meta, FollowButton, ...restProps }) => {
10
- const followButton = FollowButton && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: smallVariant ? 0.3 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: FollowButton }));
11
- const headerName = ((0, jsx_runtime_1.jsx)(Text_1.Sans, { ellipsizeMode: "tail", numberOfLines: 1, size: "3", style: { flexShrink: 1 }, children: name }));
12
- const headerMeta = !!meta && ((0, jsx_runtime_1.jsx)(Text_1.Sans, { ellipsizeMode: "tail", numberOfLines: 1, size: "2", color: "black60", style: { flexShrink: 1 }, children: meta }));
13
- return ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: "xs", src: imageUrl, initials: initials }) })), smallVariant ? ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, (0, jsx_runtime_1.jsx)(Text_1.Sans, { size: "3", ml: 0.3, children: text_1.bullet }), followButton] })) : ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), followButton] }))] }));
10
+ const followButton = FollowButton && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: smallVariant ? "0.5" : "1", flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: FollowButton }));
11
+ const headerName = ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "sm", style: { flexShrink: 1 }, children: name }));
12
+ const headerMeta = !!meta && ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: "black60", style: { flexShrink: 1 }, children: meta }));
13
+ return ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: "xs", src: imageUrl, initials: initials }) })), smallVariant ? ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", ml: "0.5", children: text_1.bullet }), followButton] })) : ((0, jsx_runtime_1.jsxs)(atoms_1.Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(atoms_1.Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), followButton] }))] }));
14
14
  };
15
15
  exports.EntityHeader = EntityHeader;
16
16
  exports.EntityHeader.displayName = "EntityHeader";
package/dist/elements/SimpleMessage/SimpleMessage.d.ts CHANGED
@@ -1,15 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { FlexProps } from "../../atoms";
3
- import { SansV1Props } from "../Text";
3
+ import { TextProps } from "../Text";
4
4
  interface SimpleMessageProps extends FlexProps {
5
5
  children: React.ReactNode | null;
6
- /**
7
- * Size of text to display in message window
8
- */
9
- textSize?: SansV1Props["size"];
6
+ textVariant?: TextProps["variant"];
10
7
  }
11
8
  /**
12
- * A generic message window for displaying ZerStates, notices, errors, etc.
9
+ * A generic message window for displaying ZeroStates, notices, errors, etc.
13
10
  */
14
11
  export declare const SimpleMessage: React.FC<SimpleMessageProps>;
15
12
  export {};
package/dist/elements/SimpleMessage/SimpleMessage.js CHANGED
@@ -14,9 +14,9 @@ const StyledFlex = (0, native_1.default)(atoms_1.Flex) `
14
14
  border-radius: 2px;
15
15
  `;
16
16
  /**
17
- * A generic message window for displaying ZerStates, notices, errors, etc.
17
+ * A generic message window for displaying ZeroStates, notices, errors, etc.
18
18
  */
19
- const SimpleMessage = ({ children, textSize = "3t", ...others }) => {
20
- return ((0, jsx_runtime_1.jsx)(StyledFlex, { p: 2, ...others, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "black60", children: children }) }));
19
+ const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
20
+ return ((0, jsx_runtime_1.jsx)(StyledFlex, { p: "2", ...restProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "black60", variant: textVariant, children: children }) }));
21
21
  };
22
22
  exports.SimpleMessage = SimpleMessage;
package/dist/elements/Text/index.d.ts CHANGED
@@ -1,22 +1,3 @@
1
1
  export * from "./helpers";
2
2
  export * from "./Text";
3
3
  export * from "./LinkText";
4
- export { _maxWidth } from "./Typography-v1";
5
- import { Sans as SansV1, SansProps as SansV1Props } from "./Sans";
6
- export { SansV1 };
7
- export type { SansV1Props, SansV1Props as SansProps };
8
- import { Serif as SerifV1, SerifProps as SerifV1Props } from "./Serif";
9
- export { SerifV1 };
10
- export type { SerifV1Props, SerifV1Props as SerifProps };
11
- /**
12
- * @deprecated Deprecated. Use `Text` instead.
13
- * Mapping:
14
- * 1: xs, 2: xs, 3: sm, 3t: sm, 4: md, 4t: md, 5: md, 5t: md, 6: lg, 8: lg, 10: xl, 12: xxl
15
- */
16
- export declare const Serif: (props: SerifV1Props) => JSX.Element;
17
- /**
18
- * Deprecated. Use `TextV3` instead.
19
- * Mapping:
20
- * 0: xs, 1: xs, 2: xs, 3: sm, 3t: sm, 4: md, 4t: md, 5: md, 5t: md, 6: lg, 8: lg, 10: xl, 12: xxl, 14: xxl, 16: xxl
21
- */
22
- export declare const Sans: (props: SansV1Props) => JSX.Element;
package/dist/elements/Text/index.js CHANGED
@@ -14,94 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Sans = exports.Serif = exports.SerifV1 = exports.SansV1 = exports._maxWidth = void 0;
18
- const jsx_runtime_1 = require("react/jsx-runtime");
19
17
  __exportStar(require("./helpers"), exports);
20
18
  __exportStar(require("./Text"), exports);
21
19
  __exportStar(require("./LinkText"), exports);
22
- // TextV1
23
- var Typography_v1_1 = require("./Typography-v1");
24
- Object.defineProperty(exports, "_maxWidth", { enumerable: true, get: function () { return Typography_v1_1._maxWidth; } });
25
- const remeda_1 = require("remeda");
26
- const Sans_1 = require("./Sans");
27
- Object.defineProperty(exports, "SansV1", { enumerable: true, get: function () { return Sans_1.Sans; } });
28
- const Serif_1 = require("./Serif");
29
- Object.defineProperty(exports, "SerifV1", { enumerable: true, get: function () { return Serif_1.Serif; } });
30
- const Text_1 = require("./Text");
31
- // TODO-PALETTE-V3 remove all `garamond` references from the app
32
- // V1 handler
33
- /**
34
- * @deprecated Deprecated. Use `Text` instead.
35
- * Mapping:
36
- * 1: xs, 2: xs, 3: sm, 3t: sm, 4: md, 4t: md, 5: md, 5t: md, 6: lg, 8: lg, 10: xl, 12: xxl
37
- */
38
- const Serif = (props) => {
39
- // TODO-PALETTE-V3 remove this and replace all usages with the mapping. also remove Serif files.
40
- return (0, jsx_runtime_1.jsx)(Text_1.Text, { ...transformSerifPropsToV3(props) });
41
- };
42
- exports.Serif = Serif;
43
- const transformSerifPropsToV3 = (props) => {
44
- const { size, weight, ...newProps } = (0, remeda_1.clone)(props);
45
- const actualSize = (0, remeda_1.isArray)(size) ? size[0] : size;
46
- const sizeMap = {
47
- "1": "xs",
48
- "2": "xs",
49
- "3": "sm",
50
- "3t": "sm",
51
- "4": "md",
52
- "4t": "md",
53
- "5": "md",
54
- "5t": "md",
55
- "6": "lg",
56
- "8": "lg",
57
- "10": "xl",
58
- "12": "xxl",
59
- };
60
- if (weight === "semibold") {
61
- ;
62
- newProps.weight = "medium";
63
- }
64
- return {
65
- ...newProps,
66
- variant: sizeMap[actualSize],
67
- };
68
- };
69
- /**
70
- * Deprecated. Use `TextV3` instead.
71
- * Mapping:
72
- * 0: xs, 1: xs, 2: xs, 3: sm, 3t: sm, 4: md, 4t: md, 5: md, 5t: md, 6: lg, 8: lg, 10: xl, 12: xxl, 14: xxl, 16: xxl
73
- */
74
- const Sans = (props) => {
75
- // TODO-PALETTE-V3 remove this and replace all usages with the mapping. also remove Sans files.
76
- return (0, jsx_runtime_1.jsx)(Text_1.Text, { ...transformSansPropsToV3(props) });
77
- };
78
- exports.Sans = Sans;
79
- const transformSansPropsToV3 = (props) => {
80
- const { size, weight, ...newProps } = (0, remeda_1.clone)(props);
81
- const actualSize = (0, remeda_1.isArray)(size) ? size[0] : size;
82
- const sizeMap = {
83
- "0": "xs",
84
- "1": "xs",
85
- "2": "xs",
86
- "3": "sm",
87
- "3t": "sm",
88
- "4": "md",
89
- "4t": "md",
90
- "5": "md",
91
- "5t": "md",
92
- "6": "lg",
93
- "8": "lg",
94
- "10": "xl",
95
- "12": "xxl",
96
- "14": "xxl",
97
- "16": "xxl",
98
- };
99
- if (weight === "medium") {
100
- ;
101
- newProps.weight = "medium";
102
- }
103
- return {
104
- ...newProps,
105
- variant: sizeMap[actualSize],
106
- };
107
- };
package/dist/molecules/MenuItem.js CHANGED
@@ -8,6 +8,6 @@ const hooks_1 = require("../hooks");
8
8
  const svgs_1 = require("../svgs");
9
9
  const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "right", fill: "black60" }), }) => {
10
10
  const color = (0, hooks_1.useColor)();
11
- return ((0, jsx_runtime_1.jsx)(elements_1.Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: "2", pr: "15px", children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", mr: "2", children: (0, jsx_runtime_1.jsx)(elements_1.Sans, { size: "4", children: title }) }), !!value && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(elements_1.Sans, { size: "4", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && (0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: "1", children: chevron }), !!text && ((0, jsx_runtime_1.jsx)(elements_1.Sans, { size: "4", color: color("black60"), children: text }))] }) }));
11
+ return ((0, jsx_runtime_1.jsx)(elements_1.Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: (0, jsx_runtime_1.jsxs)(atoms_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: "2", px: "2", pr: "15px", children: [(0, jsx_runtime_1.jsx)(atoms_1.Flex, { flexDirection: "row", mr: "2", children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", children: title }) }), !!value && ((0, jsx_runtime_1.jsx)(atoms_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && (0, jsx_runtime_1.jsx)(atoms_1.Flex, { ml: "1", children: chevron }), !!text && ((0, jsx_runtime_1.jsx)(elements_1.Text, { variant: "md", color: color("black60"), children: text }))] }) }));
12
12
  };
13
13
  exports.MenuItem = MenuItem;
package/dist/tokens.d.ts CHANGED
@@ -3,30 +3,22 @@
3
3
  * design system from our design team:
4
4
  * https://www.notion.so/artsy/Master-Library-810612339f474d0997fe359af4285c56
5
5
  */
6
- import { SpacingUnit as SpacingUnitV2 } from "@artsy/palette-tokens/dist/themes/v2";
7
6
  import { Color as ColorV3WithoutDevPurple, SpacingUnit as SpacingUnitV3Numbers } from "@artsy/palette-tokens/dist/themes/v3";
8
7
  import { TextVariant as TextVariantV3 } from "@artsy/palette-tokens/dist/typography/v3";
9
8
  declare type SpacingUnitV3 = `${SpacingUnitV3Numbers}`;
10
- export type {
11
- /**
12
- * @deprecated
13
- * Start using `SpacingUnitV3`, using strings instead of numbers.
14
- */
15
- SpacingUnitV2, SpacingUnitV3, };
9
+ export type { SpacingUnitV3 };
16
10
  declare type SpacingUnitPixels = number & {};
17
11
  declare type SpacingUnitStringPixels = `${number}px` & {};
18
- export declare type SpacingUnit = SpacingUnitV2 | SpacingUnitV3 | SpacingUnitPixels | SpacingUnitStringPixels;
12
+ export declare type SpacingUnitStrict = SpacingUnitV3;
13
+ export declare type SpacingUnit = SpacingUnitStrict | SpacingUnitPixels | SpacingUnitStringPixels;
19
14
  declare type ColorAnyString = string & {};
20
- /**
21
- * @deprecated
22
- * These colors should go.
23
- */
24
- declare type ColorOldColorsWeNeedToRemove = "yellow30";
25
15
  declare type ColorDevPurple = "devpurple";
26
16
  declare type ColorExtraLayer = "background" | "primary" | "secondary" | "brand" | "onBackground" | "onBackgroundHigh" | "onBackgroundMedium" | "onBackgroundLow" | "onPrimaryHigh" | "onPrimaryMedium" | "onPrimaryLow" | "onSecondaryHigh" | "onSecondaryMedium" | "onSecondaryLow" | "onBrand";
27
- declare type ColorWithoutExtraLayer = ColorAnyString | ColorV3WithoutDevPurple
17
+ declare type ColorWithoutExtraLayerStrict = ColorV3WithoutDevPurple
28
18
  /** @deprecated Adding this here for dev usage, but try to avoid using it for actual components. */
29
- | ColorDevPurple | ColorOldColorsWeNeedToRemove;
19
+ | ColorDevPurple;
20
+ declare type ColorWithoutExtraLayer = ColorWithoutExtraLayerStrict | ColorAnyString;
21
+ export declare type ColorStrict = ColorWithoutExtraLayerStrict | ColorExtraLayer;
30
22
  export declare type Color = ColorWithoutExtraLayer | ColorExtraLayer;
31
23
  export interface TextTreatment {
32
24
  fontSize: number;
@@ -40,280 +32,6 @@ export interface TextTreatment {
40
32
  letterSpacing?: number;
41
33
  }
42
34
  export declare const THEMES: {
43
- /** @deprecated Please move to v3 as soon as possible. */
44
- v2: {
45
- space: {
46
- 0.3: number;
47
- 0.5: number;
48
- 1: number;
49
- 1.5: number;
50
- 2: number;
51
- 3: number;
52
- 4: number;
53
- 5: number;
54
- 6: number;
55
- 9: number;
56
- 12: number;
57
- 18: number;
58
- };
59
- fontFamily: {
60
- sans: {
61
- regular: {
62
- normal: string;
63
- italic: string;
64
- };
65
- medium: {
66
- normal: string;
67
- italic: string;
68
- };
69
- semibold: {
70
- normal: null;
71
- italic: null;
72
- };
73
- };
74
- serif: {
75
- regular: {
76
- normal: string;
77
- italic: string;
78
- };
79
- medium: {
80
- normal: null;
81
- italic: null;
82
- };
83
- semibold: {
84
- normal: string;
85
- italic: null;
86
- };
87
- };
88
- };
89
- fonts: {
90
- sans: string;
91
- serif: string;
92
- };
93
- id: string;
94
- borders: string[];
95
- breakpoints: string[] & {
96
- xl: string;
97
- lg: string;
98
- md: string;
99
- sm: string;
100
- xs: string;
101
- };
102
- colors: {
103
- black100: string;
104
- black80: string;
105
- black60: string;
106
- black30: string;
107
- black10: string;
108
- black5: string;
109
- blue100: string;
110
- blue10: string;
111
- copper100: string;
112
- copper10: string;
113
- green100: string;
114
- green10: string;
115
- purple100: string;
116
- brand: string;
117
- purple30: string;
118
- purple5: string;
119
- red100: string;
120
- red10: string;
121
- yellow100: string;
122
- yellow30: string;
123
- yellow10: string;
124
- white100: string;
125
- };
126
- fontSizes: {
127
- size12: string;
128
- size11: string;
129
- size10: string;
130
- size9: string;
131
- size8: string;
132
- size7: string;
133
- size6: string;
134
- size5: string;
135
- size4: string;
136
- size3: string;
137
- size2: string;
138
- size1: string;
139
- };
140
- letterSpacings: {
141
- tight: string;
142
- tightest: string;
143
- };
144
- lineHeights: {
145
- solid: number;
146
- title: number;
147
- body: number;
148
- };
149
- mediaQueries: {
150
- xl: string;
151
- lg: string;
152
- md: string;
153
- sm: string;
154
- xs: string;
155
- hover: string;
156
- };
157
- grid: {
158
- breakpoints: {
159
- xl: number;
160
- lg: number;
161
- md: number;
162
- sm: number;
163
- xs: number;
164
- };
165
- container: {
166
- padding: number;
167
- };
168
- row: {
169
- padding: number;
170
- };
171
- col: {
172
- padding: number;
173
- };
174
- };
175
- typeSizes: {
176
- sans: {
177
- "0": {
178
- fontSize: string;
179
- lineHeight: string;
180
- };
181
- "1": {
182
- fontSize: string;
183
- lineHeight: string;
184
- };
185
- "2": {
186
- fontSize: string;
187
- lineHeight: string;
188
- };
189
- "3": {
190
- fontSize: string;
191
- lineHeight: string;
192
- };
193
- "3t": {
194
- fontSize: string;
195
- lineHeight: string;
196
- };
197
- "4": {
198
- fontSize: string;
199
- lineHeight: string;
200
- };
201
- "4t": {
202
- fontSize: string;
203
- lineHeight: string;
204
- };
205
- "5": {
206
- fontSize: string;
207
- lineHeight: string;
208
- };
209
- "5t": {
210
- fontSize: string;
211
- lineHeight: string;
212
- };
213
- "6": {
214
- fontSize: string;
215
- lineHeight: string;
216
- };
217
- "8": {
218
- fontSize: string;
219
- lineHeight: string;
220
- };
221
- "10": {
222
- fontSize: string;
223
- lineHeight: string;
224
- };
225
- "12": {
226
- fontSize: string;
227
- lineHeight: string;
228
- };
229
- "14": {
230
- fontSize: string;
231
- lineHeight: string;
232
- };
233
- "16": {
234
- fontSize: string;
235
- lineHeight: string;
236
- };
237
- };
238
- serif: {
239
- "1": {
240
- fontSize: string;
241
- lineHeight: string;
242
- };
243
- "2": {
244
- fontSize: string;
245
- lineHeight: string;
246
- };
247
- "3": {
248
- fontSize: string;
249
- lineHeight: string;
250
- };
251
- "3t": {
252
- fontSize: string;
253
- lineHeight: string;
254
- };
255
- "4": {
256
- fontSize: string;
257
- lineHeight: string;
258
- };
259
- "4t": {
260
- fontSize: string;
261
- lineHeight: string;
262
- };
263
- "5": {
264
- fontSize: string;
265
- lineHeight: string;
266
- };
267
- "5t": {
268
- fontSize: string;
269
- lineHeight: string;
270
- };
271
- "6": {
272
- fontSize: string;
273
- lineHeight: string;
274
- };
275
- "8": {
276
- fontSize: string;
277
- lineHeight: string;
278
- };
279
- "10": {
280
- fontSize: string;
281
- lineHeight: string;
282
- };
283
- "12": {
284
- fontSize: string;
285
- lineHeight: string;
286
- };
287
- };
288
- display: {
289
- "2": {
290
- fontSize: string;
291
- lineHeight: string;
292
- };
293
- "3t": {
294
- fontSize: string;
295
- lineHeight: string;
296
- };
297
- "4t": {
298
- fontSize: string;
299
- lineHeight: string;
300
- };
301
- "5t": {
302
- fontSize: string;
303
- lineHeight: string;
304
- };
305
- "6": {
306
- fontSize: string;
307
- lineHeight: string;
308
- };
309
- "8": {
310
- fontSize: string;
311
- lineHeight: string;
312
- };
313
- };
314
- };
315
- textVariants: Record<string, Record<"largeTitle" | "title" | "subtitle" | "text" | "mediumText" | "caption" | "small", import("@artsy/palette-tokens/dist/text").TextTreatment>>;
316
- };
317
35
  v3: {
318
36
  space: {
319
37
  "0.5": number;
@@ -375,7 +93,6 @@ export declare const THEMES: {
375
93
  red100: string;
376
94
  red10: string;
377
95
  devpurple: string;
378
- yellow30: string;
379
96
  };
380
97
  space: {
381
98
  "0.5": number;
@@ -437,7 +154,6 @@ export declare const THEMES: {
437
154
  red100: string;
438
155
  red10: string;
439
156
  devpurple: string;
440
- yellow30: string;
441
157
  };
442
158
  space: {
443
159
  "0.5": number;
@@ -498,7 +214,6 @@ export declare const THEMES: {
498
214
  red100: string;
499
215
  red10: string;
500
216
  devpurple: string;
501
- yellow30: string;
502
217
  };
503
218
  space: {
504
219
  "0.5": number;
@@ -520,11 +235,10 @@ export declare const THEMES: {
520
235
  id: string;
521
236
  };
522
237
  };
523
- export declare type Theme2Type = typeof THEMES.v2;
524
238
  export declare type Theme3Type = typeof THEMES.v3;
525
239
  export declare type Theme5LightType = typeof THEMES.v5light;
526
240
  export declare type Theme5DarkType = typeof THEMES.v5dark;
527
- export declare type AllThemesType = Theme2Type & Theme3Type & Theme5LightType & Theme5DarkType;
241
+ export declare type AllThemesType = Theme3Type & Theme5LightType & Theme5DarkType;
528
242
  export declare type SpacingUnitsTheme = {
529
243
  space: Record<SpacingUnit, any>;
530
244
  };
package/dist/tokens.js CHANGED
@@ -10,17 +10,6 @@ const palette_tokens_1 = require("@artsy/palette-tokens");
10
10
  const remeda_1 = require("remeda");
11
11
  const { breakpoints: _mobileDoesntCareAboutBreakpoints, mediaQueries: _mobileDoesntCareAboutMediaQueries, grid: _mobileDoesntCareAboutGrid, textVariants: textVariantsWithUnits, space: spaceNumbers, ...mobileUsefulTHEME_V3 } = palette_tokens_1.THEME_V3;
12
12
  // this function is converting the space values that come from palette-tokens
13
- // from a string `"120px"` to a number `120`.
14
- const fixSpaceUnitsV2 = (units) => {
15
- let fixed = units;
16
- fixed = (0, remeda_1.mapValues)(fixed, (stringValueWithPx) => {
17
- const justStringValue = stringValueWithPx.split("px")[0];
18
- const numberValue = parseInt(justStringValue, 10);
19
- return numberValue;
20
- });
21
- return fixed;
22
- };
23
- // this function is converting the space values that come from palette-tokens
24
13
  // from a string `"120px"` to a number `120`, and the key values
25
14
  // from a number `0.5` to a string `"0.5"`.
26
15
  const fixSpaceUnitsV3 = (units) => {
@@ -37,7 +26,6 @@ const fixColorV3 = (colors) => {
37
26
  const ourColors = {
38
27
  ...colors,
39
28
  devpurple: "#6E1EFF",
40
- yellow30: "#FAE7BA",
41
29
  };
42
30
  return ourColors;
43
31
  };
@@ -64,27 +52,6 @@ const fixTextTreatments = (variantsWithUnits) => {
64
52
  };
65
53
  // TODO: maybe add types here to make sure each theme is using the right types from above?
66
54
  exports.THEMES = {
67
- /** @deprecated Please move to v3 as soon as possible. */
68
- v2: {
69
- ...palette_tokens_1.THEME_V2,
70
- space: fixSpaceUnitsV2(palette_tokens_1.THEME_V2.space),
71
- fontFamily: {
72
- sans: {
73
- regular: { normal: "Unica77LL-Regular", italic: "Unica77LL-Italic" },
74
- medium: { normal: "Unica77LL-Medium", italic: "Unica77LL-MediumItalic" },
75
- semibold: { normal: null, italic: null },
76
- },
77
- serif: {
78
- regular: {
79
- normal: "ReactNativeAGaramondPro-Regular",
80
- italic: "ReactNativeAGaramondPro-Italic",
81
- },
82
- medium: { normal: null, italic: null },
83
- semibold: { normal: "ReactNativeAGaramondPro-Semibold", italic: null },
84
- },
85
- },
86
- fonts: { sans: "Unica77LL-Regular", serif: "ReactNativeAGaramondPro-Regular" },
87
- },
88
55
  v3: {
89
56
  ...mobileUsefulTHEME_V3,
90
57
  space: fixSpaceUnitsV3(spaceNumbers),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "2.1.3",
3
+ "version": "3.0.0",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "install:all": "yarn install && yarn bundle-install && yarn pod-install",
package/dist/elements/Text/Sans.d.ts DELETED
@@ -1,21 +0,0 @@
1
- /// <reference types="react" />
2
- import { SansSize } from "@artsy/palette-tokens/dist/themes/v2";
3
- import { FullTextProps } from "./Typography-v1";
4
- export interface SansProps extends Partial<FullTextProps> {
5
- italic?: boolean;
6
- role?: string;
7
- size: SansSize;
8
- /**
9
- * Explicitly specify `null` to inherit weight from parent, otherwise default
10
- * to `regular`.
11
- */
12
- weight?: null | "regular" | "medium";
13
- }
14
- /**
15
- * The Sans typeface is used for presenting objective dense information
16
- * (such as tables) and intervening communications (such as error feedback).
17
- *
18
- * @example
19
- * <Sans color="black10" size="3t" weight="medium" italic>Hi</Sans>
20
- */
21
- export declare const Sans: import("styled-components").StyledComponent<import("react").ComponentType<SansProps>, any, {}, never>;
package/dist/elements/Text/Sans.js DELETED
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Sans = void 0;
4
- const Typography_v1_1 = require("./Typography-v1");
5
- /**
6
- * The Sans typeface is used for presenting objective dense information
7
- * (such as tables) and intervening communications (such as error feedback).
8
- *
9
- * @example
10
- * <Sans color="black10" size="3t" weight="medium" italic>Hi</Sans>
11
- */
12
- exports.Sans = (0, Typography_v1_1.createStyledText)("sans");
13
- exports.Sans.displayName = "Sans";
package/dist/elements/Text/Serif.d.ts DELETED
@@ -1,20 +0,0 @@
1
- /// <reference types="react" />
2
- import { SerifSize } from "@artsy/palette-tokens/dist/themes/v2";
3
- import { FullTextProps } from "./Typography-v1";
4
- export interface SerifProps extends Partial<FullTextProps> {
5
- italic?: boolean;
6
- size: SerifSize;
7
- /**
8
- * Explicitly specify `null` to inherit weight from parent, otherwise default
9
- * to `regular`.
10
- */
11
- weight?: null | "regular" | "semibold";
12
- }
13
- /**
14
- * The Serif typeface is used as the primary Artsy voice, guiding users through
15
- * flows, instruction, and communications.
16
- *
17
- * @example
18
- * <Serif color="black10" size="3t" weight="semibold">Hi</Serif>
19
- */
20
- export declare const Serif: import("styled-components").StyledComponent<import("react").ComponentType<SerifProps>, any, {}, never>;
package/dist/elements/Text/Serif.js DELETED
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Serif = void 0;
4
- const Typography_v1_1 = require("./Typography-v1");
5
- /**
6
- * The Serif typeface is used as the primary Artsy voice, guiding users through
7
- * flows, instruction, and communications.
8
- *
9
- * @example
10
- * <Serif color="black10" size="3t" weight="semibold">Hi</Serif>
11
- */
12
- exports.Serif = (0, Typography_v1_1.createStyledText)("serif");
13
- exports.Serif.displayName = "Serif";
package/dist/elements/Text/Typography-v1.d.ts DELETED
@@ -1,64 +0,0 @@
1
- /// <reference types="react" />
2
- import { TextProps } from "react-native";
3
- import { ColorProps, DisplayProps as StyledSystemDisplayProps, FontSizeProps, LineHeightProps, MaxWidthProps, SpaceProps, TextAlignProps, VerticalAlignProps } from "styled-system";
4
- import { SansProps } from "./Sans";
5
- import { SerifProps } from "./Serif";
6
- export interface FullTextProps extends TextProps, ColorProps, FontSizeProps, LineHeightProps, MaxWidthProps, SpaceProps, StyledSystemDisplayProps, TextAlignProps, VerticalAlignProps {
7
- }
8
- declare type FontWeights = SansProps["weight"] | SerifProps["weight"];
9
- interface StyledTextProps extends Partial<FullTextProps> {
10
- size: any;
11
- weight?: null | FontWeights;
12
- italic?: boolean;
13
- }
14
- declare const fontFamily: {
15
- sans: {
16
- regular: {
17
- normal: string;
18
- italic: string;
19
- };
20
- medium: {
21
- normal: string;
22
- italic: string;
23
- };
24
- semibold: {
25
- normal: null;
26
- italic: null;
27
- };
28
- };
29
- serif: {
30
- regular: {
31
- normal: string;
32
- italic: string;
33
- };
34
- medium: {
35
- normal: null;
36
- italic: null;
37
- };
38
- semibold: {
39
- normal: string;
40
- italic: null;
41
- };
42
- };
43
- };
44
- declare type FontFamily = typeof fontFamily;
45
- /**
46
- * Creates a wrapper around the generic `Text` component for a font type defined
47
- * in the palette’s theme (sans, serif, or display).
48
- *
49
- * The component’s props are specified with type parameter `P` and should hold
50
- * both the component’s specific props (size, weight, italic) as well as all of
51
- * the generic `Text` component’s props, although as optional.
52
- *
53
- * @param fontType
54
- * The font type that this text component represents.
55
- * @param selectFontFamilyType
56
- * An optional function that maps weight+italic to a font-family.
57
- */
58
- export declare function createStyledText<P extends StyledTextProps>(fontType: keyof FontFamily): import("styled-components").StyledComponent<import("react").ComponentType<P>, any, {}, never>;
59
- export declare const _maxWidth: {
60
- readonly width: "100%";
61
- readonly maxWidth: 600;
62
- readonly alignSelf: "center";
63
- };
64
- export {};
package/dist/elements/Text/Typography-v1.js DELETED
@@ -1,57 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports._maxWidth = exports.createStyledText = void 0;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
8
- const native_1 = __importDefault(require("styled-components/native"));
9
- const styled_system_1 = require("styled-system");
10
- // @ts-expect-error
11
- const Theme_1 = require("../../Theme");
12
- const BaseText = native_1.default.Text `
13
- ${styled_system_1.fontSize};
14
- ${styled_system_1.lineHeight};
15
- ${styled_system_1.color};
16
- ${styled_system_1.display};
17
- ${styled_system_1.maxWidth};
18
- ${styled_system_1.space};
19
- ${styled_system_1.textAlign};
20
- ${styled_system_1.verticalAlign};
21
- `;
22
- const fontFamily = Theme_1._test_THEMES.v2.fontFamily;
23
- /**
24
- * Creates a wrapper around the generic `Text` component for a font type defined
25
- * in the palette’s theme (sans, serif, or display).
26
- *
27
- * The component’s props are specified with type parameter `P` and should hold
28
- * both the component’s specific props (size, weight, italic) as well as all of
29
- * the generic `Text` component’s props, although as optional.
30
- *
31
- * @param fontType
32
- * The font type that this text component represents.
33
- * @param selectFontFamilyType
34
- * An optional function that maps weight+italic to a font-family.
35
- */
36
- function createStyledText(fontType) {
37
- return (0, native_1.default)(({ size, weight, italic, style: _style, ...textProps }) => {
38
- const fontFamilyString = fontFamily[fontType][weight ?? "regular"][italic ? "italic" : "normal"];
39
- if (fontFamilyString === null) {
40
- throw new Error(`Incompatible text style combination: {type: ${fontType}, weight: ${weight}, italic: ${!!italic}}`);
41
- }
42
- const fontMetrics = Theme_1.themeProps.typeSizes[fontType][size];
43
- if (fontMetrics == null) {
44
- throw new Error(`"${size}" is not a valid size for ${fontType}`);
45
- }
46
- return ((0, jsx_runtime_1.jsx)(BaseText, { style: [_style, { fontFamily: fontFamilyString, ...stripPx(fontMetrics) }], ...textProps }));
47
- }) ``;
48
- }
49
- exports.createStyledText = createStyledText;
50
- function stripPx(fontMetrics) {
51
- return {
52
- fontSize: Number(fontMetrics.fontSize.replace("px", "")),
53
- lineHeight: Number(fontMetrics.lineHeight.replace("px", "")),
54
- };
55
- }
56
- // TODO: Remove this and put it as a prop on `Text`, after palette is absorbed in eigen.
57
- exports._maxWidth = { width: "100%", maxWidth: 600, alignSelf: "center" };