@artsy/palette-mobile 14.0.43 → 14.0.45--canary.331.3541.0

package/dist/elements/Checkbox/Checkbox.js

@@ -17,16 +17,16 @@ export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text,
     const [checked, setChecked] = useState(checkedProp);
     const isChecked = checkedProp ?? checked;
     const defaultCheckboxStyle = {
-        backgroundColor: color("white100"),
-        borderColor: color("black60"),
+        backgroundColor: color("mono0"),
+        borderColor: color("mono60"),
     };
     const checkedCheckboxStyle = {
-        backgroundColor: color("black100"),
-        borderColor: color("black100"),
+        backgroundColor: color("mono100"),
+        borderColor: color("mono100"),
     };
     const disabledCheckboxStyle = {
-        backgroundColor: color("black5"),
-        borderColor: color("black10"),
+        backgroundColor: color("mono5"),
+        borderColor: color("mono10"),
     };
     const checkboxStyles = {
         default: {
@@ -34,15 +34,15 @@ export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text,
             checked: checkedCheckboxStyle,
         },
         error: {
-            unchecked: { backgroundColor: color("white100"), borderColor: color("red100") },
+            unchecked: { backgroundColor: color("mono0"), borderColor: color("red100") },
             checked: checkedCheckboxStyle,
         },
     };
     const checkboxStyle = disabled
         ? disabledCheckboxStyle
         : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
-    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
-    const subtitleColor = error ? color("red100") : disabled ? color("black30") : color("black60");
+    const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
+    const subtitleColor = error ? color("red100") : disabled ? color("mono30") : color("mono60");
     return (_jsx(TouchableWithoutFeedback, { onPress: (event) => {
             if (disabled) {
                 return;
@@ -70,8 +70,8 @@ const styles = (fontScale) => StyleSheet.create({
 });
 // This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
-export const CheckMark = ({ size }) => (_jsx(Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
+export const CheckMark = ({ size }) => (_jsx(Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "mono0", borderLeftWidth: "2px", borderLeftColor: "mono0" }));
 export const DisabledMark = styled(CheckMark) `
-  border-bottom-color: ${themeGet("colors.black30")};
-  border-left-color: ${themeGet("colors.black30")};
+  border-bottom-color: ${themeGet("colors.mono30")};
+  border-left-color: ${themeGet("colors.mono30")};
 `;

package/dist/elements/Chip/Chip.js

@@ -9,8 +9,8 @@ export const Chip = ({ image, title, subtitle, onPress }) => {
     const color = useColor();
     const space = useSpace();
     const animatedState = useAnimationState({
-        from: { backgroundColor: color("black10") },
-        to: { backgroundColor: color("black5") },
+        from: { backgroundColor: color("mono10") },
+        to: { backgroundColor: color("mono5") },
     });
     const handleOnPressIn = () => {
         animatedState.transitionTo("from");
@@ -22,5 +22,5 @@ export const Chip = ({ image, title, subtitle, onPress }) => {
                         flex: 1,
                         padding: space(1),
                         justifyContent: "center",
-                    }, children: [!!subtitle && (_jsx(Text, { variant: "xs", color: "black60", selectable: false, children: subtitle })), _jsx(Text, { variant: "sm-display", selectable: false, children: title })] })] }) }));
+                    }, children: [!!subtitle && (_jsx(Text, { variant: "xs", color: "mono60", selectable: false, children: subtitle })), _jsx(Text, { variant: "sm-display", selectable: false, children: title })] })] }) }));
 };

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -39,5 +39,5 @@ export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isE
     return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { onPress: () => {
                     setIsOpen(!isOpen);
                     isOpen ? onCollapse?.() : onExpand?.();
-                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "black30" : "black100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
+                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "mono30" : "mono60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
 });

package/dist/elements/Dialog/Dialog.js

@@ -54,9 +54,9 @@ export const Dialog = (props) => {
                         width: "100%",
                         maxHeight: "100%",
                         opacity: value,
-                        backgroundColor: color("white100"),
+                        backgroundColor: color("mono0"),
                         borderWidth: 1,
-                        borderColor: color("black5"),
+                        borderColor: color("mono5"),
                         shadowColor: "rgba(0, 0, 0, 0.06)",
                         shadowOffset: {
                             height: 2,
@@ -64,5 +64,5 @@ export const Dialog = (props) => {
                         },
                         shadowOpacity: 1,
                         shadowRadius: 10,
-                    }, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
+                    }, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "mono60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
 };

package/dist/elements/EntityHeader/EntityHeader.js

@@ -8,15 +8,15 @@ import { Flex } from "../Flex";
 import { Text } from "../Text";
 export const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, displayPrivateIcon, theme = "light", ...restProps }) => {
     const rightButton = (RightButton || FollowButton) && (_jsx(Flex, { ml: smallVariant ? 0.5 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: RightButton || FollowButton }));
-    const headerName = (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(RNText, { ellipsizeMode: "tail", numberOfLines: 1, children: _jsx(Text, { color: theme === "light" ? "black100" : "white100", variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }) }), displayPrivateIcon && (_jsx(LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "black100" : "white100" }))] }));
+    const headerName = (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(RNText, { ellipsizeMode: "tail", numberOfLines: 1, children: _jsx(Text, { color: theme === "light" ? "mono100" : "mono0", variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }) }), displayPrivateIcon && (_jsx(LockIcon, { ml: "2px", width: 16, height: 16, testID: "lock-icon", fill: theme === "light" ? "mono100" : "mono0" }))] }));
     const headerMeta = useMemo(() => {
         if (meta) {
             if (isValidElement(meta)) {
                 return meta;
             }
-            return (_jsx(Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "black60" : "white100", style: { flexShrink: 1 }, children: meta }));
+            return (_jsx(Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: theme === "light" ? "mono60" : "mono0", style: { flexShrink: 1 }, children: meta }));
         }
         return null;
     }, [meta, theme]);
-    return (_jsxs(Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && (_jsx(Flex, { mr: 1, justifyContent: "center", children: _jsx(Avatar, { size: avatarSize, src: imageUrl, initials: initials, color: theme === "light" ? "black100" : "white100" }) })), smallVariant ? (_jsxs(Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, _jsx(Text, { variant: "sm", ml: "0.5", color: theme === "light" ? "black100" : "white100", children: bullet }), rightButton] })) : (_jsxs(Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [_jsxs(Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), rightButton] }))] }));
+    return (_jsxs(Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && (_jsx(Flex, { mr: 1, justifyContent: "center", children: _jsx(Avatar, { size: avatarSize, src: imageUrl, initials: initials, color: theme === "light" ? "mono100" : "mono0" }) })), smallVariant ? (_jsxs(Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, _jsx(Text, { variant: "sm", ml: "0.5", color: theme === "light" ? "mono100" : "mono0", children: bullet }), rightButton] })) : (_jsxs(Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [_jsxs(Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), rightButton] }))] }));
 };

package/dist/elements/Histogram/Histogram.js

@@ -18,6 +18,6 @@ export const Histogram = ({ bars, selectedRange }) => {
     return (_jsx(Flex, { height: 110, flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", children: bars.map((entity, index) => {
             const percent = getPercentByEntity(maxValue, entity.count);
             const selected = isSelected(entity.value, min, max);
-            return (_jsx(Box, { height: `${percent}%`, bg: selected ? "blue100" : "black15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
+            return (_jsx(Box, { height: `${percent}%`, bg: selected ? "blue100" : "mono15", width: BAR_WIDTH, borderTopLeftRadius: BAR_ROUNDNESS, borderTopRightRadius: BAR_ROUNDNESS }, `bar-${index}`));
         }) }));
 };

package/dist/elements/Image/Image.js

@@ -41,7 +41,7 @@ export const Image = memo(({ aspectRatio, width, height, performResize = true, s
                         style,
                         // If we have a blurhash, we don't want to show a background color
                         // That might flash before the image loads
-                        { backgroundColor: blurhash ? "transparent" : color("black30") },
+                        { backgroundColor: blurhash ? "transparent" : color("mono30") },
                     ], resizeMode: resizeMode, onLoadEnd: onAnimationEnd, source: {
                         priority: FastImage.priority.normal,
                         uri,
@@ -69,7 +69,7 @@ const useImageDimensions = (props) => {
 };
 const ImageSkeleton = ({ dimensions, blurhash }) => {
     if (!!blurhash) {
-        return (_jsx(Flex, { position: "absolute", backgroundColor: "black10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
+        return (_jsx(Flex, { position: "absolute", backgroundColor: "mono10", ...dimensions, children: _jsx(Blurhash, { blurhash: blurhash, style: { flex: 1 }, decodeWidth: 16, decodeHeight: 16 }) }));
     }
     return (_jsx(Flex, { position: "absolute", children: _jsx(Skeleton, { children: _jsx(SkeletonBox, { ...dimensions }) }) }));
 };

package/dist/elements/Input/Input.js

@@ -203,7 +203,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     ...leftComponentSharedStyles,
                     justifyContent: "center",
                     width: leftComponentWidth,
-                }, children: [unit && (_jsx(Text, { color: disabled ? "black30" : "black60", variant: "sm-display", children: unit })), icon] }));
+                }, children: [unit && (_jsx(Text, { color: disabled ? "mono30" : "mono60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
             return (_jsx(TouchableOpacity, { onPress: onSelectTap, style: [
@@ -222,7 +222,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             justifyContent: "space-between",
                         },
                         selectComponentStyles,
-                    ], children: [_jsx(Text, { color: disabled ? "black30" : "black100", children: selectDisplayLabel }), _jsx(TriangleDown, { fill: "black60", width: 10 })] }) }));
+                    ], children: [_jsx(Text, { color: disabled ? "mono30" : "mono100", children: selectDisplayLabel }), _jsx(TriangleDown, { fill: "mono60", width: 10 })] }) }));
         }
         return null;
     }, [
@@ -238,17 +238,17 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
     ]);
     const renderRightComponent = useCallback(() => {
         if (fixedRightPlaceholder) {
-            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, ref: rightComponentRef, children: _jsx(Text, { color: disabled ? "black30" : "black60", children: fixedRightPlaceholder }) }));
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, ref: rightComponentRef, children: _jsx(Text, { color: disabled ? "mono30" : "mono60", children: fixedRightPlaceholder }) }));
         }
         if (loading) {
             return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, ref: rightComponentRef, children: _jsx(Spinner, { size: "medium", style: {
                         right: 0,
                         width: 15,
-                        backgroundColor: color("black60"),
+                        backgroundColor: color("mono60"),
                     } }) }));
         }
         if (enableClearButton && value) {
-            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "black30" }) }) }));
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "mono30" }) }) }));
         }
         if (secureTextEntry) {
             return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: true, onPress: () => {
@@ -257,7 +257,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             duration: 200,
                         });
                         setShowPassword(!showPassword);
-                    }, accessibilityLabel: showPassword ? "hide password button" : "show password button", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "black30" }) : _jsx(EyeOpenedIcon, { fill: "black60" }) }) }));
+                    }, accessibilityLabel: showPassword ? "hide password button" : "show password button", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "mono30" }) : _jsx(EyeOpenedIcon, { fill: "mono60" }) }) }));
         }
         return null;
     }, [
@@ -276,9 +276,9 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         if (!!props.error) {
             return (_jsx(Text, { color: "red100", variant: "xs", px: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: props.error }));
         }
-        return (_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [!!props.required || !!props.optional ? (_jsxs(Text, { color: "black60", variant: "xs", pl: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
+        return (_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", children: [!!props.required || !!props.optional ? (_jsxs(Text, { color: "mono60", variant: "xs", pl: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [!!props.required && "* Required", !!props.optional && "* Optional"] })) : (
                 // Adding this empty flex to make sure that the maxLength text is always on the right
-                _jsx(Flex, {})), !!props.maxLength && !!props.showLimit && (_jsxs(Text, { color: "black60", variant: "xs", pr: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
+                _jsx(Flex, {})), !!props.maxLength && !!props.showLimit && (_jsxs(Text, { color: "mono60", variant: "xs", pr: `${HORIZONTAL_PADDING}px`, mt: 0.5, children: [(value || "").length, " / ", props.maxLength] }))] }));
     }, [props.error, props.maxLength, props.optional, props.required, props.showLimit, value]);
     const renderHint = useCallback(() => {
         if (!props.onHintPress) {
@@ -292,7 +292,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     right: 10,
                     bottom: 5,
                     left: 10,
-                }, children: _jsx(Text, { underline: true, variant: "xs", color: "black60", children: hintText }) }) }));
+                }, children: _jsx(Text, { underline: true, variant: "xs", color: "mono60", children: hintText }) }) }));
     }, [hintText, props.onHintPress, space]);
     const getPlatformSpecificPlaceholder = useCallback(() => {
         if (!placeholder) {
@@ -357,7 +357,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
             // Only use a controlled input if specified
             , { ...((propValue !== undefined && propValue !== null) || mask ? { value } : {}), onChangeText: handleChangeText, style: [styles, textInputAnimatedStyles], onFocus: handleFocus, onBlur: handleBlur, onLayout: (event) => {
                     setInputWidth(event.nativeEvent.layout.width);
-                }, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("black60"), placeholder: getPlaceholder(), defaultValue: defaultValue, secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
+                }, scrollEnabled: props.multiline, editable: !disabled, textAlignVertical: props.multiline ? "top" : "center", ref: inputRef, placeholderTextColor: color("mono60"), placeholder: getPlaceholder(), defaultValue: defaultValue, secureTextEntry: !showPassword, ...props }), renderRightComponent(), renderLeftComponent(), renderBottomComponent()] }));
 });
 const StyledInput = styled(TextInput) `
   padding: ${HORIZONTAL_PADDING}px;

package/dist/elements/Input/helpers.js

@@ -5,19 +5,19 @@ const getDefaultVariantStates = (theme) => {
     return {
         // Unfocused input with no value
         untouched: {
-            inputBorderColor: theme.colors.black30,
+            inputBorderColor: theme.colors.mono30,
             labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
-            labelColor: theme.colors.black60,
+            labelColor: theme.colors.mono60,
             labelTop: EXPANDED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
         // Unfocused input with value
         touched: {
-            inputBorderColor: theme.colors.black60,
+            inputBorderColor: theme.colors.mono60,
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
-            labelColor: theme.colors.black60,
+            labelColor: theme.colors.mono60,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
         // Focused input with or without value
         focused: {
@@ -25,7 +25,7 @@ const getDefaultVariantStates = (theme) => {
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.blue100,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
     };
 };
@@ -37,7 +37,7 @@ const getErrorVariantStates = (theme) => {
             labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
             labelColor: theme.colors.red100,
             labelTop: EXPANDED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
         // Unfocused error input with value
         touched: {
@@ -45,7 +45,7 @@ const getErrorVariantStates = (theme) => {
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.red100,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
         // Focused error input with or without value
         focused: {
@@ -53,7 +53,7 @@ const getErrorVariantStates = (theme) => {
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
             labelColor: theme.colors.red100,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black100,
+            inputTextColor: theme.colors.mono100,
         },
     };
 };
@@ -61,28 +61,28 @@ const getDisabledVariantStates = (theme) => {
     return {
         // Unfocused disabled input with no value
         untouched: {
-            inputBorderColor: theme.colors.black30,
+            inputBorderColor: theme.colors.mono30,
             labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
-            labelColor: theme.colors.black30,
+            labelColor: theme.colors.mono30,
             labelTop: EXPANDED_LABEL_TOP,
-            inputTextColor: theme.colors.black30,
+            inputTextColor: theme.colors.mono30,
         },
         // Unfocused disabled input with value
         touched: {
-            inputBorderColor: theme.colors.black30,
+            inputBorderColor: theme.colors.mono30,
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
-            labelColor: theme.colors.black30,
+            labelColor: theme.colors.mono30,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black30,
+            inputTextColor: theme.colors.mono30,
         },
         // Focused disabled input with or without value
         // Adding this just to satisfy typescript because a disabled input can't be focused
         focused: {
-            inputBorderColor: theme.colors.black30,
+            inputBorderColor: theme.colors.mono30,
             labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
-            labelColor: theme.colors.black30,
+            labelColor: theme.colors.mono30,
             labelTop: SHRINKED_LABEL_TOP,
-            inputTextColor: theme.colors.black30,
+            inputTextColor: theme.colors.mono30,
         },
     };
 };

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -34,7 +34,7 @@ const ScreenRoot = ({ children }) => {
     const headerFloating = getChildByType(children, LegacyScreen.FloatingHeader);
     const background = getChildByType(children, LegacyScreen.Background);
     const bodyChildren = getChildrenByTypeDeep(children, LegacyScreen.Body);
-    return (_jsxs(Flex, { flex: 1, backgroundColor: "white100", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+    return (_jsxs(Flex, { flex: 1, backgroundColor: "mono0", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
 };
 const useUpdateScreenContext = ({ header }) => {
     const { setOptions } = useScreenContext();
@@ -98,7 +98,7 @@ const BottomView = ({ children }) => {
     return (_jsxs(Flex, { position: "absolute", bottom: keyboardShowing ? keyboardHeight - insets.bottom : 0, left: 0, right: 0, onLayout: (evt) => void setOptions({ bottomViewHeight: evt.nativeEvent.layout.height }), children: [_jsx(LinearGradient, { colors: ["rgba(255,255,255,0)", "rgba(255,255,255,1)"], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
                     width: "100%",
                     height: 30,
-                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "white100", children: children }), keyboardShowing ? null : _jsx(SafeBottomPadding, {})] }));
+                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "mono0", children: children }), keyboardShowing ? null : _jsx(SafeBottomPadding, {})] }));
 };
 /**
  * Only use with `<Screen.Body fullwidth>`.

package/dist/elements/LegacyTabs/StepTabs.js

@@ -29,6 +29,6 @@ export const StepTabs = ({ onTabPress, activeTab, tabs }) => {
                         });
                     }, children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
                                         // noop
-                                    } }), !!completed && _jsx(CheckIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronIcon, { fill: "black60", height: 10, width: 10 })] }) }, label + index));
+                                    } }), !!completed && _jsx(CheckIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronIcon, { fill: "mono60", height: 10, width: 10 })] }) }, label + index));
         }) }));
 };

package/dist/elements/LegacyTabs/Tab.js

@@ -11,7 +11,7 @@ export const TabV3 = ({ label, superscript, active, onLayout, onPress, style })
                 paddingVertical: 10,
                 flexDirection: "row",
                 ...style,
-            }, children: [_jsx(Text, { fontSize: 16, color: active ? color("black100") : pressed ? color("blue100") : color("black60"), style: {
+            }, children: [_jsx(Text, { fontSize: 16, color: active ? color("mono100") : pressed ? color("blue100") : color("mono60"), style: {
                         textDecorationLine: pressed ? "underline" : "none",
                     }, children: label }), !!superscript && (_jsx(Text, { fontSize: 12, color: color("blue100"), style: {
                         textDecorationLine: pressed ? "underline" : "none",

package/dist/elements/LegacyTabs/TabBarContainer.js

@@ -35,7 +35,7 @@ export const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLa
                         left: 0,
                         right: 0,
                         borderBottomWidth: 1,
-                        borderBottomColor: color("black30"),
+                        borderBottomColor: color("mono30"),
                     } }), _jsxs(View, { style: {
                         flex: 1,
                         minWidth: "100%",
@@ -68,7 +68,7 @@ export const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
     return (_jsx(Animated.View, { style: {
             height: 1,
             width: preTransformSpan,
-            backgroundColor: color("black100"),
+            backgroundColor: color("mono100"),
             position: "absolute",
             bottom: 0,
             transform: [

package/dist/elements/List/BulletedItem.js

@@ -3,6 +3,6 @@ import { bullet } from "../../utils/text";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-export const BulletedItem = ({ children, color = "black60", ...otherFlexProps }) => {
+export const BulletedItem = ({ children, color = "mono60", ...otherFlexProps }) => {
     return (_jsxs(Flex, { flexDirection: "row", px: 1, ...otherFlexProps, children: [_jsx(Text, { variant: "sm", color: color, children: bullet }), _jsx(Spacer, { x: 1 }), _jsx(Text, { variant: "sm", color: color, children: children })] }));
 };

package/dist/elements/List/List.stories.js

@@ -5,4 +5,4 @@ import { List } from "../../storybook/helpers";
 import { Flex } from "../Flex";
 import { Spacer } from "../Spacer";
 import { Text } from "../Text";
-storiesOf("List", module).add("Bulleted Item", () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })));
+storiesOf("List", module).add("Bulleted Item", () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "mono60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })));

package/dist/elements/MenuItem/MenuItem.js

@@ -4,7 +4,7 @@ import { useColor } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import { Touchable } from "../Touchable";
-export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronIcon, { direction: "right", fill: "black60" }), }) => {
+export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronIcon, { direction: "right", fill: "mono60" }), }) => {
     const color = useColor();
-    return (_jsx(Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("black60"), children: text }))] }) }));
+    return (_jsx(Touchable, { onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
 };

package/dist/elements/Message/Message.js

@@ -34,10 +34,10 @@ export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent
 };
 const colors = {
     default: {
-        background: "black5",
-        title: "black100",
-        text: "black60",
-        icon: "black100",
+        background: "mono5",
+        title: "mono100",
+        text: "mono60",
+        icon: "mono100",
     },
     info: {
         background: "blue10",
@@ -45,36 +45,36 @@ const colors = {
         // The text should be black regardless of the theme
         // @ts-expect-error
         text: "black",
-        icon: "black100",
+        icon: "mono100",
     },
     success: {
         background: "green10",
         title: "green150",
-        text: "black100",
-        icon: "black100",
+        text: "mono100",
+        icon: "mono100",
     },
     alert: {
         background: "orange10",
         title: "orange150",
-        text: "black100",
-        icon: "black100",
+        text: "mono100",
+        icon: "mono100",
     },
     warning: {
         background: "yellow10",
         title: "yellow150",
-        text: "black100",
-        icon: "black100",
+        text: "mono100",
+        icon: "mono100",
     },
     error: {
         background: "red10",
         title: "red100",
-        text: "black100",
-        icon: "black100",
+        text: "mono100",
+        icon: "mono100",
     },
     dark: {
-        background: "black100",
-        title: "white100",
-        text: "white100",
-        icon: "white100",
+        background: "mono100",
+        title: "mono0",
+        text: "mono0",
+        icon: "mono0",
     },
 };

package/dist/elements/Pill/Pill.js

@@ -30,7 +30,7 @@ export const Pill = ({ variant = "default", src, selected, disabled, Icon, child
 };
 const Container = styled(MotiPressable) `
   align-items: center;
-  border: 1px solid ${themeGet("colors.black15")};
+  border: 1px solid ${themeGet("colors.mono15")};
   flex-direction: row;
   justify-content: center;
   text-align: center;
@@ -45,7 +45,7 @@ const Container = styled(MotiPressable) `
 }}
 `;
 const Thumbnail = styled(Image) `
-  background-color: ${themeGet("colors.black30")};
+  background-color: ${themeGet("colors.mono30")};
 `;
 const PILL_STATES = {
     default: css `
@@ -58,8 +58,8 @@ const PILL_STATES = {
     background-color: ${themeGet("colors.blue100")};
   `,
     disabled: css `
-    background-color: ${themeGet("colors.black5")};
-    border-color: ${themeGet("colors.black5")};
+    background-color: ${themeGet("colors.mono5")};
+    border-color: ${themeGet("colors.mono5")};
   `,
 };
 const PILL_VARIANTS = {
@@ -70,7 +70,7 @@ const PILL_VARIANTS = {
       ${PILL_STATES.default}
       border-radius: 20px;
       height: 40px;
-      border-color: ${themeGet("colors.black60")};
+      border-color: ${themeGet("colors.mono60")};
     `,
     },
     dotted: {
@@ -81,8 +81,8 @@ const PILL_VARIANTS = {
     `,
         selected: css `
       ${PILL_STATES.selected}
-      background-color: ${themeGet("colors.black10")};
-      border-color: ${themeGet("colors.black10")};
+      background-color: ${themeGet("colors.mono10")};
+      border-color: ${themeGet("colors.mono10")};
     `,
     },
     search: {
@@ -91,8 +91,8 @@ const PILL_VARIANTS = {
     profile: {
         ...PILL_STATES,
         default: css `
-      background-color: ${themeGet("colors.black5")};
-      border-color: ${themeGet("colors.black5")};
+      background-color: ${themeGet("colors.mono5")};
+      border-color: ${themeGet("colors.mono5")};
       border-radius: 25px;
       height: 50px;
       padding: 0 ${themeGet("space.1")}};
@@ -124,43 +124,43 @@ const PILL_VARIANTS = {
       padding: 0 ${themeGet("space.1")};
     `,
         disabled: css `
-      border-color: ${themeGet("colors.black60")};
+      border-color: ${themeGet("colors.mono60")};
     `,
     },
     link: {
         ...PILL_STATES,
         default: css `
       ${PILL_STATES.default}
-      border-color: ${themeGet("colors.black5")};
-      background-color: ${themeGet("colors.black5")};
+      border-color: ${themeGet("colors.mono5")};
+      background-color: ${themeGet("colors.mono5")};
     `,
     },
 };
 const defaultColors = {
-    default: "black100",
-    selected: "white100",
-    disabled: "black60",
+    default: "mono100",
+    selected: "mono0",
+    disabled: "mono60",
 };
 const TEXT_COLOR = {
     default: defaultColors,
     onboarding: defaultColors,
     dotted: {
         ...defaultColors,
-        selected: "black100",
+        selected: "mono100",
     },
     search: defaultColors,
     profile: {
         ...defaultColors,
-        selected: "black100",
+        selected: "mono100",
     },
     badge: {
         default: "blue100",
-        selected: "white100",
+        selected: "mono0",
         disabled: "blue100",
     },
     filter: {
         ...defaultColors,
-        disabled: "black100",
+        disabled: "mono100",
     },
     link: defaultColors,
 };