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

package/dist/elements/Avatar/Avatar.js

@@ -43,10 +43,10 @@ export const Avatar = ({ src, initials, size = DEFAULT_SIZE }) => {
     }, [loading]);
     const { diameter, textSize } = VARIANTS[size];
     if (src) {
-        return (_jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("white100"), borderWidth: 1, children: _jsx(Animated.View, { style: style, children: _jsx(Image, { onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), resizeMode: "cover", source: { uri: src }, accessibilityLabel: "AvatarImage", style: {
+        return (_jsx(Box, { width: diameter, height: diameter, borderRadius: diameter / 2, overflow: "hidden", borderColor: color("mono0"), borderWidth: 1, children: _jsx(Animated.View, { style: style, children: _jsx(Image, { onLoadStart: () => setLoading(true), onLoadEnd: () => setLoading(false), resizeMode: "cover", source: { uri: src }, accessibilityLabel: "AvatarImage", style: {
                         width: diameter,
                         height: diameter,
                     } }) }) }));
     }
-    return (_jsx(Flex, { width: diameter, height: diameter, borderColor: "black10", borderWidth: 1, borderRadius: diameter, overflow: "hidden", alignItems: "center", justifyContent: "center", accessibilityLabel: "Avatar", children: _jsx(Text, { variant: textSize, children: initials }) }));
+    return (_jsx(Flex, { width: diameter, height: diameter, borderColor: "mono10", borderWidth: 1, borderRadius: diameter, overflow: "hidden", alignItems: "center", justifyContent: "center", accessibilityLabel: "Avatar", children: _jsx(Text, { variant: textSize, children: initials }) }));
 };

package/dist/elements/Banner/Banner.js

@@ -33,23 +33,23 @@ export const Banner = ({ text, onClose, dismissable = false, variant = "defaultL
 };
 const BANNER_VARIANTS = {
     defaultLight: {
-        backgroundColor: "black10",
-        color: "black100",
+        backgroundColor: "mono10",
+        color: "mono100",
     },
     defaultDark: {
-        backgroundColor: "black100",
-        color: "white100",
+        backgroundColor: "mono100",
+        color: "mono0",
     },
     success: {
         backgroundColor: "green100",
-        color: "white100",
+        color: "mono0",
     },
     error: {
         backgroundColor: "red100",
-        color: "white100",
+        color: "mono0",
     },
     brand: {
         backgroundColor: "brand",
-        color: "white100",
+        color: "mono0",
     },
 };

package/dist/elements/Banner/Banner.stories.js

@@ -7,5 +7,5 @@ export default {
     component: Banner,
 };
 export const States = () => {
-    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" }), _jsx(Banner, { dismissable: true, variant: "error", children: _jsx(LinkText, { textAlign: "center", variant: "xs", color: "white100", onPress: () => console.log(`tapped`), children: "Link" }) })] }));
+    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" }), _jsx(Banner, { dismissable: true, variant: "error", children: _jsx(LinkText, { textAlign: "center", variant: "xs", color: "mono0", onPress: () => console.log(`tapped`), children: "Link" }) })] }));
 };

package/dist/elements/BorderBox/BorderBox.js

@@ -7,7 +7,7 @@ import { Flex } from "../Flex";
  * and padding set by default
  */
 export const BorderBox = styled(Flex) `
-  border: 1px solid ${themeGet("colors.black10")};
+  border: 1px solid ${themeGet("colors.mono10")};
   border-radius: 2px;
   padding: ${themeGet("space.2")};
   ${border}

package/dist/elements/Box/Box.stories.js

@@ -14,5 +14,5 @@ export const RegularViewProps = () => {
     const r = useRef(null);
     return (_jsx(Flex, { flex: 1, children: _jsx(Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
 };
-const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "black10"];
-export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", gap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-1`))) }), _jsx(Text, { children: "Row gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", rowGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-2`))) }), _jsx(Text, { children: "Column gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", columnGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-3`))) }), _jsx(Spacer, { y: 6 })] }));
+const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "mono10"];
+export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", gap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-1`))) }), _jsx(Text, { children: "Row gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", rowGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-2`))) }), _jsx(Text, { children: "Column gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "mono100", columnGap: 1, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-3`))) }), _jsx(Spacer, { y: 6 })] }));

package/dist/elements/Button/Button.js

@@ -99,24 +99,24 @@ const useStyleForVariantAndState = (variant, state) => {
     };
     switch (variant) {
         case "fillDark":
-            retval.textColor = color("white100");
+            retval.textColor = color("mono0");
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.backgroundColor = color("black100");
-                    retval.borderColor = color("black100");
+                    retval.backgroundColor = color("mono100");
+                    retval.borderColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
+                    retval.backgroundColor = color("mono30");
+                    retval.borderColor = color("mono30");
                     // We want to show the text color as white regardless of the theme
                     // This makes it easier to read
                     retval.textColor = "white";
                     break;
                 case DisplayState.Loading:
-                    retval.backgroundColor = color("black100");
-                    retval.borderColor = color("black100");
+                    retval.backgroundColor = color("mono100");
+                    retval.borderColor = color("mono100");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
+                    retval.loaderColor = "mono0";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
@@ -131,24 +131,24 @@ const useStyleForVariantAndState = (variant, state) => {
             switch (state) {
                 case DisplayState.Enabled:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("black100");
+                    retval.borderColor = color("mono0");
+                    retval.textColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
+                    retval.backgroundColor = color("mono30");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono0");
                     break;
                 case DisplayState.Loading:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("white100");
+                    retval.borderColor = color("mono0");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
+                    retval.loaderColor = "mono100";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
                     retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
+                    retval.textColor = color("mono0");
                     retval.textDecorationLine = "underline";
                     break;
                 default:
@@ -158,25 +158,25 @@ const useStyleForVariantAndState = (variant, state) => {
         case "fillGray":
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
-                    retval.textColor = color("black100");
+                    retval.backgroundColor = color("mono10");
+                    retval.borderColor = color("mono10");
+                    retval.textColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
+                    retval.backgroundColor = color("mono30");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono0");
                     break;
                 case DisplayState.Loading:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
+                    retval.backgroundColor = color("mono10");
+                    retval.borderColor = color("mono10");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
+                    retval.loaderColor = "mono100";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
                     retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
+                    retval.textColor = color("mono0");
                     retval.textDecorationLine = "underline";
                     break;
                 default:
@@ -184,7 +184,7 @@ const useStyleForVariantAndState = (variant, state) => {
             }
             break;
         case "fillSuccess":
-            retval.textColor = color("white100");
+            retval.textColor = color("mono0");
             switch (state) {
                 case DisplayState.Enabled:
                     retval.backgroundColor = color("blue100");
@@ -198,7 +198,7 @@ const useStyleForVariantAndState = (variant, state) => {
                     retval.backgroundColor = color("blue100");
                     retval.borderColor = color("blue100");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
+                    retval.loaderColor = "mono0";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue10");
@@ -213,24 +213,24 @@ const useStyleForVariantAndState = (variant, state) => {
             switch (state) {
                 case DisplayState.Enabled:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black60");
-                    retval.textColor = color("black100");
+                    retval.borderColor = color("mono60");
+                    retval.textColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono30");
                     break;
                 case DisplayState.Loading:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black60");
+                    retval.borderColor = color("mono60");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
+                    retval.loaderColor = "mono100";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
                     retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
+                    retval.textColor = color("mono0");
                     retval.textDecorationLine = "underline";
                     break;
                 default:
@@ -241,24 +241,24 @@ const useStyleForVariantAndState = (variant, state) => {
             switch (state) {
                 case DisplayState.Enabled:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black100");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono30");
                     break;
                 case DisplayState.Loading:
                     retval.backgroundColor = color("background");
-                    retval.borderColor = color("black30");
+                    retval.borderColor = color("mono30");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
+                    retval.loaderColor = "mono100";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
                     retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
+                    retval.textColor = color("mono0");
                     retval.textDecorationLine = "underline";
                     break;
                 default:
@@ -269,19 +269,19 @@ const useStyleForVariantAndState = (variant, state) => {
             switch (state) {
                 case DisplayState.Enabled:
                     retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("white100");
+                    retval.borderColor = color("mono0");
+                    retval.textColor = color("mono0");
                     break;
                 case DisplayState.Disabled:
                     retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
+                    retval.borderColor = color("mono30");
+                    retval.textColor = color("mono30");
                     break;
                 case DisplayState.Loading:
                     retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("white100");
+                    retval.borderColor = color("mono0");
                     retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
+                    retval.loaderColor = "mono0";
                     break;
                 case DisplayState.Pressed:
                     retval.backgroundColor = color("blue100");
@@ -298,10 +298,10 @@ const useStyleForVariantAndState = (variant, state) => {
             retval.borderColor = "rgba(0, 0, 0, 0)";
             switch (state) {
                 case DisplayState.Enabled:
-                    retval.textColor = color("black100");
+                    retval.textColor = color("mono100");
                     break;
                 case DisplayState.Disabled:
-                    retval.textColor = color("black30");
+                    retval.textColor = color("mono30");
                     break;
                 case DisplayState.Loading:
                     retval.textColor = "rgba(0, 0, 0, 0)";

package/dist/elements/Button/FollowButton.js

@@ -4,5 +4,5 @@ import { formatLargeNumber } from "../../utils/formatLargeNumber";
 import { Button } from "../Button";
 import { Text } from "../Text";
 export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "black60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
 };

package/dist/elements/Button/colors.js

@@ -3,28 +3,28 @@ export const useColorsForVariantAndState = () => {
     const color = useColor();
     return {
         fillDark: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
             active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
         },
         fillLight: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
             active: {
-                bg: color("white100"),
-                border: color("white100"),
-                text: color("black100"),
+                bg: color("mono0"),
+                border: color("mono0"),
+                text: color("mono100"),
             },
         },
         fillGray: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("mono0") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            active: { bg: color("mono10"), border: color("mono10"), text: color("mono100") },
         },
         fillSuccess: {
-            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
+            disabled: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            active: { bg: color("blue10"), border: color("blue10"), text: color("mono0") },
         },
         outline: {
             disabled: {
@@ -32,7 +32,7 @@ export const useColorsForVariantAndState = () => {
                 border: color("onBackgroundLow"),
                 text: color("onBackgroundLow"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
                 bg: color("background"),
                 border: color("onBackgroundMedium"),
@@ -41,34 +41,34 @@ export const useColorsForVariantAndState = () => {
         },
         outlineGray: {
             disabled: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black30"),
+                bg: color("mono0"),
+                border: color("mono30"),
+                text: color("mono30"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black100"),
+                bg: color("mono0"),
+                border: color("mono30"),
+                text: color("mono100"),
             },
         },
         outlineLight: {
             disabled: {
                 bg: "rgba(0, 0, 0, 0)",
-                border: color("black30"),
-                text: color("black30"),
+                border: color("mono30"),
+                text: color("mono30"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
                 bg: "rgba(0, 0, 0, 0)",
-                border: color("white100"),
-                text: color("white100"),
+                border: color("mono0"),
+                text: color("mono0"),
             },
         },
         text: {
-            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
-            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
-            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
+            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("mono30") },
+            pressed: { bg: color("mono10"), border: color("mono10"), text: color("blue100") },
+            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("mono100") },
         },
     };
 };

package/dist/elements/ButtonNew/Button.js

@@ -36,7 +36,7 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
                 return 50;
         }
     })();
-    const spinnerColor = variant === "text" ? "blue100" : "white100";
+    const spinnerColor = variant === "text" ? "blue100" : "mono0";
     const handlePress = (event) => {
         if (onPress === undefined || onPress === null) {
             return;

package/dist/elements/ButtonNew/Button.stories.js

@@ -35,14 +35,14 @@ export const States = () => {
 };
 export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: _jsx(Flex, { backgroundColor: "pink", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
 export const VariantsLoading = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
-export const VariantsDisabled = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight", children: _jsx(Flex, { backgroundColor: "black100", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+export const VariantsDisabled = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight", children: _jsx(Flex, { backgroundColor: "mono100", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
 export const TheFollowButton = () => {
     const [follow, setFollow] = useState(true);
     return (_jsxs(List, { children: [_jsx(FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
 };
 export const TheCTAButton = () => (_jsx(List, { children: _jsx(CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
 export const TheLinkButton = () => (_jsx(List, { children: _jsx(LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
-export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellIcon, { fill: "mono0", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "mono0" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
 export const Playground = () => {
     const [loading, setLoading] = useState(false);
     const [disabled, setDisabled] = useState(true);

package/dist/elements/ButtonNew/FollowButton.js

@@ -4,5 +4,5 @@ import { formatLargeNumber } from "../../utils/formatLargeNumber";
 import { Button } from "../Button";
 import { Text } from "../Text";
 export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "black60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
 };

package/dist/elements/ButtonNew/colors.js

@@ -3,28 +3,28 @@ export const useColorsForVariantAndState = () => {
     const color = useColor();
     return {
         fillDark: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
             active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
         },
         fillLight: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
             active: {
-                bg: color("white100"),
-                border: color("white100"),
-                text: color("black100"),
+                bg: color("mono0"),
+                border: color("mono0"),
+                text: color("mono100"),
             },
         },
         fillGray: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
+            disabled: { bg: color("mono30"), border: color("mono30"), text: color("mono0") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            active: { bg: color("mono10"), border: color("mono10"), text: color("mono100") },
         },
         fillSuccess: {
-            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
+            disabled: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
+            active: { bg: color("blue10"), border: color("blue10"), text: color("mono0") },
         },
         outline: {
             disabled: {
@@ -32,7 +32,7 @@ export const useColorsForVariantAndState = () => {
                 border: color("onBackgroundLow"),
                 text: color("onBackgroundLow"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
                 bg: color("background"),
                 border: color("onBackgroundMedium"),
@@ -41,34 +41,34 @@ export const useColorsForVariantAndState = () => {
         },
         outlineGray: {
             disabled: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black30"),
+                bg: color("mono0"),
+                border: color("mono30"),
+                text: color("mono30"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black100"),
+                bg: color("mono0"),
+                border: color("mono30"),
+                text: color("mono100"),
             },
         },
         outlineLight: {
             disabled: {
                 bg: "rgba(0, 0, 0, 0)",
-                border: color("black30"),
-                text: color("black30"),
+                border: color("mono30"),
+                text: color("mono30"),
             },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("mono0") },
             active: {
                 bg: "rgba(0, 0, 0, 0)",
-                border: color("white100"),
-                text: color("white100"),
+                border: color("mono0"),
+                text: color("mono0"),
             },
         },
         text: {
-            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
-            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
-            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
+            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("mono30") },
+            pressed: { bg: color("mono10"), border: color("mono10"), text: color("blue100") },
+            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("mono100") },
         },
     };
 };

package/dist/elements/Checkbox/Check.js

@@ -7,38 +7,38 @@ export const CHECK_SIZE = 22;
 const CHECK_MODES = {
     default: {
         resting: css `
-      background-color: ${themeGet("colors.white100")};
-      border-color: ${themeGet("colors.black10")};
+      background-color: ${themeGet("colors.mono0")};
+      border-color: ${themeGet("colors.mono10")};
     `,
         selected: css `
-      background-color: ${themeGet("colors.black100")};
-      border-color: ${themeGet("colors.black100")};
+      background-color: ${themeGet("colors.mono100")};
+      border-color: ${themeGet("colors.mono100")};
     `,
     },
     disabled: {
         resting: css `
-      background-color: ${themeGet("colors.black5")};
-      border-color: ${themeGet("colors.black10")};
+      background-color: ${themeGet("colors.mono5")};
+      border-color: ${themeGet("colors.mono10")};
     `,
         selected: css `
-      background-color: ${themeGet("colors.black30")};
-      border-color: ${themeGet("colors.black30")};
+      background-color: ${themeGet("colors.mono30")};
+      border-color: ${themeGet("colors.mono30")};
     `,
     },
     error: {
         resting: css `
-      background-color: ${themeGet("colors.white100")};
+      background-color: ${themeGet("colors.mono0")};
       border-color: ${themeGet("colors.red100")};
     `,
         selected: css `
-      background-color: ${themeGet("colors.black100")};
-      border-color: ${themeGet("colors.black100")};
+      background-color: ${themeGet("colors.mono100")};
+      border-color: ${themeGet("colors.mono100")};
     `,
     },
 };
 /** Toggeable check mark */
 export const Check = ({ disabled, selected, testID, ...rest }) => {
-    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckIcon, { fill: "white100" }) }));
+    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckIcon, { fill: "mono0" }) }));
 };
 const Container = styled(Box) `
   width: ${CHECK_SIZE}px;