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

package/dist/svgs/UserMultiIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const UserMultiIcon = ({ fill = "black100", ...restProps }) => {
+export const UserMultiIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M11.654 10.226v3.214h-.875v-3.214c0-.725-.588-1.312-1.313-1.312h-.924c-.725 0-1.313.587-1.313 1.312v3.214h-.875v-3.214c0-.725-.587-1.312-1.312-1.312h-.853c-.725 0-1.313.587-1.313 1.312v3.214h-.875v-3.214c0-1.208.98-2.187 2.188-2.187h.853c.715 0 1.35.343 1.75.874a2.184 2.184 0 0 1 1.75-.874h.924c.716 0 1.351.343 1.75.874a2.184 2.184 0 0 1 1.75-.874h.88c1.207 0 2.187.98 2.187 2.187v3.214h-.875v-3.214c0-.725-.588-1.312-1.313-1.312h-.879c-.725 0-1.312.587-1.312 1.312zM4.41 7.01a1.866 1.866 0 1 1 0-3.732 1.866 1.866 0 0 1 0 3.732zm0-.875a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982zm4.5.875a1.866 1.866 0 1 1 0-3.732 1.866 1.866 0 0 1 0 3.732zm0-.875a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982zm4.5.875a1.866 1.866 0 1 1 0-3.732 1.866 1.866 0 0 1 0 3.732zm0-.875a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/UserSingleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const UserSingleIcon = ({ fill = "black100", ...restProps }) => {
+export const UserSingleIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M9 3a2.51 2.51 0 1 1 0 5.02A2.51 2.51 0 0 1 9 3zm0-1a3.51 3.51 0 1 0 0 7.02A3.51 3.51 0 0 0 9 2zm6 11v3h-1v-3a1.5 1.5 0 0 0-1.5-1.5h-7A1.5 1.5 0 0 0 4 13v3H3v-3a2.5 2.5 0 0 1 2.5-2.5h7A2.5 2.5 0 0 1 15 13z", fill: color(fill), fillRule: "nonzero" }) }));
 };

package/dist/svgs/VerifiedIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const VerifiedIcon = ({ fill = "black100", ...restProps }) => {
+export const VerifiedIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsx(Icon, { ...restProps, viewBox: "0 0 18 18", children: _jsx(Path, { d: "M5.2 3.08l-.5 1.18a.85.85 0 01-.44.44l-1.17.5a1.78 1.78 0 00-.96 2.3l.48 1.18a.84.84 0 010 .63l-.48 1.19c-.36.9.06 1.92.95 2.3l1.18.5c.2.08.36.24.44.44l.5 1.18a1.78 1.78 0 002.3.95l1.18-.48a.84.84 0 01.64 0l1.18.48a1.78 1.78 0 002.3-.95l.5-1.18a.85.85 0 01.44-.44l1.17-.5a1.78 1.78 0 00.96-2.3l-.48-1.18a.85.85 0 010-.63l.48-1.19c.36-.9-.06-1.92-.96-2.3l-1.17-.5a.85.85 0 01-.44-.44l-.5-1.17A1.78 1.78 0 0011.16 2c-.22 0-.45.04-.66.13l-1.18.48a.85.85 0 01-.63 0L7.5 2.13a1.78 1.78 0 00-2.3.95zm4.47.4L10.85 3a.84.84 0 011.09.45l.5 1.17c.17.43.51.76.94.95l1.17.5A.84.84 0 0115 7.14l-.47 1.18a1.78 1.78 0 000 1.34l.47 1.18a.84.84 0 01-.45 1.09l-1.17.5c-.43.17-.76.51-.95.94l-.5 1.17a.84.84 0 01-1.08.45l-1.18-.48a1.78 1.78 0 00-1.34 0L7.15 15a.84.84 0 01-1.09-.45l-.5-1.17a1.78 1.78 0 00-.94-.95l-1.17-.5A.84.84 0 013 10.86l.48-1.18a1.78 1.78 0 000-1.34L3 7.15a.84.84 0 01.45-1.09l1.17-.5c.43-.17.77-.51.95-.94l.5-1.17A.84.84 0 017.14 3l1.18.47a1.78 1.78 0 001.34 0zm1.74 3.38L8.1 10.17 6.78 8.85a.56.56 0 10-.8.79l1.72 1.72c.22.22.58.22.8 0l3.7-3.7a.56.56 0 000-.8.56.56 0 00-.79 0z", fillRule: "evenodd", fill: color(fill) || color("onBackground") }) }));
 };

package/dist/svgs/VerifiedPersonIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const VerifiedPersonIcon = ({ fill = "black100", ...restProps }) => {
+export const VerifiedPersonIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsxs(Icon, { ...restProps, viewBox: "0 0 18 18", children: [_jsx(Path, { d: "M9,3c0.7,0,1.3,0.3,1.8,0.7c0.5,0.5,0.7,1.1,0.7,1.8s-0.3,1.3-0.7,1.8C10.3,7.8,9.7,8,9,8S7.7,7.8,7.2,7.3C6.8,6.8,6.5,6.2,6.5,5.5s0.3-1.3,0.7-1.8C7.7,3.3,8.3,3,9,3z M9,2C8.1,2,7.2,2.4,6.5,3c-0.7,0.7-1,1.6-1,2.5s0.4,1.8,1,2.5C7.2,8.7,8.1,9,9,9s1.8-0.4,2.5-1c0.7-0.7,1-1.6,1-2.5s-0.4-1.8-1-2.5C10.8,2.4,9.9,2,9,2z M12.5,11.5h-7c-0.4,0-0.8,0.2-1.1,0.4C4.2,12.2,4,12.6,4,13v3H3v-3c0-0.7,0.3-1.3,0.7-1.8c0.5-0.5,1.1-0.7,1.8-0.7h7V11.5z", fill: color(fill) }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M14,17c2.2,0,4-1.8,4-4s-1.8-4-4-4s-4,1.8-4,4S11.8,17,14,17z M15.9,12.3c0.2-0.1,0.2-0.4,0-0.5c-0.2-0.1-0.4-0.1-0.6,0l-1.9,1.7l-0.8-0.7c-0.2-0.1-0.4-0.1-0.6,0c-0.2,0.1-0.2,0.4,0,0.5l1.1,1c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1L15.9,12.3z", fill: color(fill) })] }));
 };

package/dist/svgs/WhatsAppAppIcon.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Path, Rect } from "./Icon";
 import { Flex } from "../elements/Flex";
-export const WhatsAppAppIcon = ({ fill = "black100", ...restProps }) => (_jsx(Flex, { borderRadius: 4, overflow: "hidden", children: _jsxs(Icon, { ...restProps, viewBox: "0 0 455.731 455.731", children: [_jsx(Rect, { x: "0", y: "0", fill: "#25D366", width: "455.731", height: "455.731" }), _jsx(Path, { d: "M68.494,387.41l22.323-79.284c-14.355-24.387-21.913-52.134-21.913-80.638 c0-87.765,71.402-159.167,159.167-159.167s159.166,71.402,159.166,159.167c0,87.765-71.401,159.167-159.166,159.167 c-27.347,0-54.125-7-77.814-20.292L68.494,387.41z M154.437,337.406l4.872,2.975c20.654,12.609,44.432,19.274,68.762,19.274 c72.877,0,132.166-59.29,132.166-132.167S300.948,95.321,228.071,95.321S95.904,154.611,95.904,227.488 c0,25.393,7.217,50.052,20.869,71.311l3.281,5.109l-12.855,45.658L154.437,337.406z", fill: "#FFFFFF" }), _jsx(Path, { d: "M183.359,153.407l-10.328-0.563c-3.244-0.177-6.426,0.907-8.878,3.037 c-5.007,4.348-13.013,12.754-15.472,23.708c-3.667,16.333,2,36.333,16.667,56.333c14.667,20,42,52,90.333,65.667 c15.575,4.404,27.827,1.435,37.28-4.612c7.487-4.789,12.648-12.476,14.508-21.166l1.649-7.702c0.524-2.448-0.719-4.932-2.993-5.98 l-34.905-16.089c-2.266-1.044-4.953-0.384-6.477,1.591l-13.703,17.764c-1.035,1.342-2.807,1.874-4.407,1.312 c-9.384-3.298-40.818-16.463-58.066-49.687c-0.748-1.441-0.562-3.19,0.499-4.419l13.096-15.15 c1.338-1.547,1.676-3.722,0.872-5.602l-15.046-35.201C187.187,154.774,185.392,153.518,183.359,153.407z", fill: "#FFFFFF" })] }) }));
+export const WhatsAppAppIcon = ({ fill = "mono100", ...restProps }) => (_jsx(Flex, { borderRadius: 4, overflow: "hidden", children: _jsxs(Icon, { ...restProps, viewBox: "0 0 455.731 455.731", children: [_jsx(Rect, { x: "0", y: "0", fill: "#25D366", width: "455.731", height: "455.731" }), _jsx(Path, { d: "M68.494,387.41l22.323-79.284c-14.355-24.387-21.913-52.134-21.913-80.638 c0-87.765,71.402-159.167,159.167-159.167s159.166,71.402,159.166,159.167c0,87.765-71.401,159.167-159.166,159.167 c-27.347,0-54.125-7-77.814-20.292L68.494,387.41z M154.437,337.406l4.872,2.975c20.654,12.609,44.432,19.274,68.762,19.274 c72.877,0,132.166-59.29,132.166-132.167S300.948,95.321,228.071,95.321S95.904,154.611,95.904,227.488 c0,25.393,7.217,50.052,20.869,71.311l3.281,5.109l-12.855,45.658L154.437,337.406z", fill: "#FFFFFF" }), _jsx(Path, { d: "M183.359,153.407l-10.328-0.563c-3.244-0.177-6.426,0.907-8.878,3.037 c-5.007,4.348-13.013,12.754-15.472,23.708c-3.667,16.333,2,36.333,16.667,56.333c14.667,20,42,52,90.333,65.667 c15.575,4.404,27.827,1.435,37.28-4.612c7.487-4.789,12.648-12.476,14.508-21.166l1.649-7.702c0.524-2.448-0.719-4.932-2.993-5.98 l-34.905-16.089c-2.266-1.044-4.953-0.384-6.477,1.591l-13.703,17.764c-1.035,1.342-2.807,1.874-4.407,1.312 c-9.384-3.298-40.818-16.463-58.066-49.687c-0.748-1.441-0.562-3.19,0.499-4.419l13.096-15.15 c1.338-1.547,1.676-3.722,0.872-5.602l-15.046-35.201C187.187,154.774,185.392,153.518,183.359,153.407z", fill: "#FFFFFF" })] }) }));

package/dist/svgs/WorldGlobeCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const WorldGlobeCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const WorldGlobeCircleIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsxs(Icon, { ...restProps, viewBox: "0 0 19 19", children: [_jsx(Path, { d: "M16.1114 8.19C16.1114 12.4371 12.6684 15.88 8.4214 15.88C4.17436 15.88 0.731445 12.4371 0.731445 8.19C0.731445 3.94293 4.17436 0.5 8.4214 0.5C12.6684 0.5 16.1114 3.94293 16.1114 8.19Z", fill: color(fill), fillRule: "nonzero" }), _jsx(Path, { d: "M16.1114 8.19C16.1114 12.4371 12.6684 15.88 8.4214 15.88C4.17436 15.88 0.731445 12.4371 0.731445 8.19C0.731445 3.94293 4.17436 0.5 8.4214 0.5C12.6684 0.5 16.1114 3.94293 16.1114 8.19Z", fill: "white", fillRule: "nonzero", scale: 0.9, translateX: 0.8, translateY: 0.8 }), _jsx(Path, { d: "M14.679 10.7386L14.7015 10.6861C15.3645 9.10742 15.4669 7.34941 14.9918 5.70445C14.5166 4.0595 13.4925 2.62675 12.0899 1.64451L12.0223 1.59199C10.5724 0.602351 8.8213 0.152252 7.07374 0.320002C5.32618 0.487751 3.69275 1.26273 2.45762 2.51011C1.22249 3.7575 0.46384 5.39833 0.313655 7.14715C0.16347 8.89597 0.631256 10.6421 1.63563 12.0817V12.0967L1.67315 12.1417C2.25846 12.9633 3.00373 13.6582 3.86426 14.1846C4.72479 14.7111 5.68283 15.0584 6.6809 15.2055C7.67896 15.3527 8.69647 15.2967 9.67237 15.041C10.6483 14.7853 11.5624 14.3351 12.36 13.7175C12.3834 13.7075 12.404 13.6921 12.4201 13.6724C13.4077 12.8999 14.1847 11.8908 14.679 10.7386ZM7.78209 0.879169C9.13855 0.876105 10.4654 1.27565 11.5945 2.02719L11.6771 3.70044C11.6785 3.77728 11.6518 3.852 11.602 3.91054L9.93597 5.8314C9.88825 5.88676 9.82108 5.92167 9.74835 5.92895L7.39184 6.25159C7.31527 6.26203 7.23757 6.24328 7.1742 6.19907L5.69574 5.12608C5.59539 5.05561 5.4819 5.00602 5.362 4.98024C5.24211 4.95446 5.11825 4.95302 4.99779 4.97602C4.87781 4.99763 4.7637 5.04419 4.66286 5.1127C4.56202 5.18121 4.4767 5.27012 4.41242 5.3737L2.91896 7.70725C2.82695 7.85061 2.77751 8.01713 2.77636 8.18746L2.76135 10.8962C2.76203 10.9475 2.74922 10.998 2.72419 11.0428C2.69917 11.0876 2.66281 11.125 2.61876 11.1513L1.98836 11.534C1.26081 10.4181 0.87479 9.11427 0.877642 7.78228C0.879629 5.95207 1.6077 4.19739 2.9021 2.90324C4.19651 1.60908 5.95152 0.881156 7.78209 0.879169ZM2.34108 12.0217L2.92646 11.669C3.05848 11.5894 3.16783 11.4772 3.24404 11.3432C3.32026 11.2092 3.36079 11.0578 3.36174 10.9037L3.37675 8.18746C3.37909 8.13105 3.3973 8.07643 3.42928 8.02989L4.91524 5.69634C4.93688 5.66175 4.96534 5.63194 4.99889 5.60871C5.03244 5.58549 5.07037 5.56935 5.11037 5.56128C5.1918 5.54765 5.27534 5.56651 5.34302 5.6138L6.82147 6.68679C7.00866 6.81963 7.23952 6.876 7.46688 6.84436L9.83091 6.52922C10.0495 6.49789 10.2494 6.38863 10.3938 6.22158L12.0523 4.30071C12.1293 4.21581 12.1883 4.11619 12.2257 4.00786C12.2631 3.89953 12.2782 3.78474 12.27 3.67043L12.2174 2.4924C13.2934 3.39619 14.0687 4.60613 14.4401 5.96124C14.8114 7.31636 14.7613 8.7524 14.2963 10.0783L12.7503 8.66768C12.6239 8.55191 12.4673 8.47427 12.2987 8.44373C12.13 8.41319 11.9561 8.431 11.7972 8.4951L9.5157 9.44803C9.3719 9.50717 9.24586 9.60252 9.14986 9.7248C9.05385 9.84709 8.99115 9.99214 8.96785 10.1458L8.78773 11.3614C8.75446 11.5809 8.80348 11.805 8.92538 11.9906C9.04728 12.1761 9.23346 12.3102 9.44816 12.3669L11.0617 12.787C11.113 12.8026 11.1595 12.831 11.1968 12.8696L11.7521 13.4248C10.3046 14.4477 8.51818 14.8728 6.765 14.6114C5.01182 14.35 3.42712 13.4223 2.34108 12.0217ZM12.2325 13.0572L11.6246 12.4419C11.5111 12.3277 11.3682 12.2472 11.2118 12.2093L9.60576 11.7816C9.53424 11.7638 9.47177 11.7203 9.43025 11.6594C9.38873 11.5985 9.37106 11.5245 9.38062 11.4514L9.56073 10.2359C9.56754 10.1847 9.5878 10.1362 9.61943 10.0953C9.65107 10.0545 9.69296 10.0227 9.74085 10.0033L12.0298 9.05035C12.0825 9.02859 12.1404 9.02267 12.1964 9.03333C12.2524 9.044 12.304 9.07078 12.345 9.11038L14.0561 10.6711C13.627 11.5884 13.005 12.4022 12.2325 13.0572Z", fill: color(fill), scale: 0.6, translateX: 3.5, translateY: 3.5 })] }));
 };

package/dist/svgs/XCircleIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Circle, Icon, Path } from "./Icon";
 import { useColor } from "../utils/hooks";
-export const XCircleIcon = ({ fill = "black100", ...restProps }) => {
+export const XCircleIcon = ({ fill = "mono100", ...restProps }) => {
     const color = useColor();
     return (_jsxs(Icon, { ...restProps, viewBox: "0 0 18 18", children: [_jsx(Circle, { cx: 9, cy: 9, r: 9, fill: color("background") }), _jsx(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM12.3588 12.3587C12.0659 12.6516 11.591 12.6516 11.2981 12.3587L9 10.0607L6.70189 12.3588C6.409 12.6517 5.93413 12.6517 5.64123 12.3588C5.34834 12.0659 5.34834 11.591 5.64123 11.2981L7.93934 8.99999L5.64124 6.70189C5.34835 6.409 5.34835 5.93412 5.64124 5.64123C5.93413 5.34834 6.40901 5.34834 6.7019 5.64123L9 7.93933L11.2981 5.64125C11.591 5.34835 12.0659 5.34835 12.3587 5.64125C12.6516 5.93414 12.6516 6.40901 12.3587 6.70191L10.0607 8.99999L12.3588 11.2981C12.6516 11.591 12.6516 12.0659 12.3588 12.3587Z", fill: color(fill) })] }));
 };

package/dist/tokens.d.ts

@@ -33,13 +33,13 @@ export type ColorsTheme = {
 export declare const COLOR_LAYER_NAME: {
     /** Adding this here for dev usage. Avoid using it for actual components. */
     devpurple: string;
-    black100: string;
-    black60: string;
-    black30: string;
-    black15: string;
-    black10: string;
-    black5: string;
-    white100: string;
+    mono100: string;
+    mono60: string;
+    mono30: string;
+    mono15: string;
+    mono10: string;
+    mono5: string;
+    mono0: string;
     blue200: string;
     blue150: string;
     blue100: string;

package/dist/tokens.js

@@ -54,26 +54,26 @@ const v3light = {
     ...v3,
     colors: {
         ...v3.colors,
-        background: colors.white100,
-        onBackground: colors.black100,
-        onBackgroundHigh: colors.black100,
-        onBackgroundMedium: colors.black60,
-        onBackgroundLow: colors.black30,
-        surface: colors.white100,
-        onSurface: colors.black100,
-        onSurfaceHigh: colors.black100,
-        onSurfaceMedium: colors.black60,
-        onSurfaceLow: colors.black5,
-        primary: colors.black100,
-        onPrimaryHigh: colors.white100,
-        onPrimaryMedium: colors.black5,
-        onPrimaryLow: colors.black5,
-        secondary: colors.black30,
-        onSecondaryHigh: colors.black100,
-        onSecondaryMedium: colors.black60,
-        onSecondaryLow: colors.black60,
+        background: colors.mono0,
+        onBackground: colors.mono100,
+        onBackgroundHigh: colors.mono100,
+        onBackgroundMedium: colors.mono60,
+        onBackgroundLow: colors.mono30,
+        surface: colors.mono0,
+        onSurface: colors.mono100,
+        onSurfaceHigh: colors.mono100,
+        onSurfaceMedium: colors.mono60,
+        onSurfaceLow: colors.mono5,
+        primary: colors.mono100,
+        onPrimaryHigh: colors.mono0,
+        onPrimaryMedium: colors.mono5,
+        onPrimaryLow: colors.mono5,
+        secondary: colors.mono30,
+        onSecondaryHigh: colors.mono100,
+        onSecondaryMedium: colors.mono60,
+        onSecondaryLow: colors.mono60,
         brand: colors.blue100,
-        onBrand: colors.white100,
+        onBrand: colors.mono0,
     },
 };
 const v3dark = {
@@ -81,26 +81,26 @@ const v3dark = {
     colors: {
         ...THEME_DARK.colors,
         devpurple: v3.colors.devpurple,
-        background: THEME_DARK.colors.white100,
-        onBackground: THEME_DARK.colors.black100,
-        onBackgroundHigh: THEME_DARK.colors.black100,
-        onBackgroundMedium: THEME_DARK.colors.black60,
-        onBackgroundLow: THEME_DARK.colors.black60,
+        background: THEME_DARK.colors.mono0,
+        onBackground: THEME_DARK.colors.mono100,
+        onBackgroundHigh: THEME_DARK.colors.mono100,
+        onBackgroundMedium: THEME_DARK.colors.mono100,
+        onBackgroundLow: THEME_DARK.colors.mono60,
         surface: "#333",
-        onSurface: THEME_DARK.colors.white100,
-        onSurfaceHigh: THEME_DARK.colors.white100,
-        onSurfaceMedium: THEME_DARK.colors.black60,
+        onSurface: THEME_DARK.colors.mono0,
+        onSurfaceHigh: THEME_DARK.colors.mono0,
+        onSurfaceMedium: THEME_DARK.colors.mono60,
         onSurfaceLow: "#555",
-        primary: THEME_DARK.colors.white100,
-        onPrimaryHigh: THEME_DARK.colors.black100,
-        onPrimaryMedium: THEME_DARK.colors.black60,
-        onPrimaryLow: THEME_DARK.colors.black60,
-        secondary: THEME_DARK.colors.black60,
-        onSecondaryHigh: THEME_DARK.colors.white100,
-        onSecondaryMedium: THEME_DARK.colors.black5,
-        onSecondaryLow: THEME_DARK.colors.black5,
+        primary: THEME_DARK.colors.mono0,
+        onPrimaryHigh: THEME_DARK.colors.mono100,
+        onPrimaryMedium: THEME_DARK.colors.mono60,
+        onPrimaryLow: THEME_DARK.colors.mono60,
+        secondary: THEME_DARK.colors.mono60,
+        onSecondaryHigh: THEME_DARK.colors.mono0,
+        onSecondaryMedium: THEME_DARK.colors.mono5,
+        onSecondaryLow: THEME_DARK.colors.mono5,
         brand: THEME_DARK.colors.blue100,
-        onBrand: THEME_DARK.colors.white100,
+        onBrand: THEME_DARK.colors.mono0,
     },
 };
 export const THEMES = { v3, v3light, v3dark };

package/dist/types.d.ts

@@ -13,4 +13,4 @@ export type ColorCSS = string & {};
 export type ColorDSValue = ColorLayerName | ColorLayerRole;
 export type Color = ColorLayerName | ColorLayerRole | ColorCSS;
 export declare const isRoleLayer: (name: Color) => name is "background" | "onBackground" | "onBackgroundHigh" | "onBackgroundMedium" | "onBackgroundLow" | "surface" | "onSurface" | "onSurfaceHigh" | "onSurfaceMedium" | "onSurfaceLow" | "primary" | "onPrimaryHigh" | "onPrimaryMedium" | "onPrimaryLow" | "secondary" | "onSecondaryHigh" | "onSecondaryMedium" | "onSecondaryLow" | "brand" | "onBrand";
-export declare const isNameLayer: (name: Color) => name is "brand" | "devpurple" | "black100" | "black60" | "black30" | "black15" | "black10" | "black5" | "white100" | "blue200" | "blue150" | "blue100" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red50" | "red10";
+export declare const isNameLayer: (name: Color) => name is "brand" | "devpurple" | "mono100" | "mono60" | "mono30" | "mono15" | "mono10" | "mono5" | "mono0" | "blue200" | "blue150" | "blue100" | "blue15" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red50" | "red10";

package/dist/utils/colors.stories.js

@@ -32,7 +32,7 @@ const ColorSquare = ({ color: theColor, border }) => {
                     },
                 ] }), _jsx(Text, { children: colorWithoutContrast }), contrast && _jsx(Text, { children: contrast }), _jsx(Text, { color: "onBackgroundLow", children: displayName })] }));
 };
-export const All = () => (_jsxs(List, { children: [_jsxs(Row, { children: [_jsx(ColorSquare, { color: "black100", border: true }), _jsx(ColorSquare, { color: "black60" }), _jsx(ColorSquare, { color: "black30" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "black15" }), _jsx(ColorSquare, { color: "black10" }), _jsx(ColorSquare, { color: "black5" }), _jsx(ColorSquare, { color: "white100", border: true })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "blue150" }), _jsx(ColorSquare, { color: "blue100" }), _jsx(ColorSquare, { color: "blue10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "green150" }), _jsx(ColorSquare, { color: "green100" }), _jsx(ColorSquare, { color: "green10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "yellow150" }), _jsx(ColorSquare, { color: "yellow100" }), _jsx(ColorSquare, { color: "yellow10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "orange150" }), _jsx(ColorSquare, { color: "orange100" }), _jsx(ColorSquare, { color: "orange10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "red150" }), _jsx(ColorSquare, { color: "red100" }), _jsx(ColorSquare, { color: "red10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "brand" }), _jsx(ColorSquare, { color: "devpurple" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "background", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onBackgroundHigh", border: true }), _jsx(ColorSquare, { color: "onBackgroundMedium" }), _jsx(ColorSquare, { color: "onBackgroundLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "surface", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSurfaceHigh", border: true }), _jsx(ColorSquare, { color: "onSurfaceMedium" }), _jsx(ColorSquare, { color: "onSurfaceLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "primary", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onPrimaryHigh", border: true }), _jsx(ColorSquare, { color: "onPrimaryMedium" }), _jsx(ColorSquare, { color: "onPrimaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "secondary" }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSecondaryHigh" }), _jsx(ColorSquare, { color: "onSecondaryMedium" }), _jsx(ColorSquare, { color: "onSecondaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "brand" }) }), _jsx(Row, { children: _jsx(ColorSquare, { color: "onBrand", border: true }) })] }));
+export const All = () => (_jsxs(List, { children: [_jsxs(Row, { children: [_jsx(ColorSquare, { color: "mono100", border: true }), _jsx(ColorSquare, { color: "mono60" }), _jsx(ColorSquare, { color: "mono30" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "mono15" }), _jsx(ColorSquare, { color: "mono10" }), _jsx(ColorSquare, { color: "mono5" }), _jsx(ColorSquare, { color: "mono0", border: true })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "blue150" }), _jsx(ColorSquare, { color: "blue100" }), _jsx(ColorSquare, { color: "blue10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "green150" }), _jsx(ColorSquare, { color: "green100" }), _jsx(ColorSquare, { color: "green10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "yellow150" }), _jsx(ColorSquare, { color: "yellow100" }), _jsx(ColorSquare, { color: "yellow10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "orange150" }), _jsx(ColorSquare, { color: "orange100" }), _jsx(ColorSquare, { color: "orange10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "red150" }), _jsx(ColorSquare, { color: "red100" }), _jsx(ColorSquare, { color: "red10" })] }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "brand" }), _jsx(ColorSquare, { color: "devpurple" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "background", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onBackgroundHigh", border: true }), _jsx(ColorSquare, { color: "onBackgroundMedium" }), _jsx(ColorSquare, { color: "onBackgroundLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "surface", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSurfaceHigh", border: true }), _jsx(ColorSquare, { color: "onSurfaceMedium" }), _jsx(ColorSquare, { color: "onSurfaceLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "primary", border: true }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onPrimaryHigh", border: true }), _jsx(ColorSquare, { color: "onPrimaryMedium" }), _jsx(ColorSquare, { color: "onPrimaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "secondary" }) }), _jsxs(Row, { children: [_jsx(ColorSquare, { color: "onSecondaryHigh" }), _jsx(ColorSquare, { color: "onSecondaryMedium" }), _jsx(ColorSquare, { color: "onSecondaryLow" })] }), _jsx(Row, { children: _jsx(ColorSquare, { color: "brand" }) }), _jsx(Row, { children: _jsx(ColorSquare, { color: "onBrand", border: true }) })] }));
 const useNamedColorName = (theColor) => {
     const color = useColor();
     const cssName = useCssColorName(theColor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "14.0.43",
+  "version": "14.0.45--canary.331.3541.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -33,7 +33,7 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
-    "@artsy/palette-tokens": "^6.3.0",
+    "@artsy/palette-tokens": "7.0.0-canary.1433.31866.0",
     "@shopify/flash-list": "1.7.6",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
@@ -68,12 +68,12 @@
     "@auto-it/first-time-contributor": "10.46.0",
     "@babel/core": "^7.25.2",
     "@babel/plugin-proposal-decorators": "7.25.9",
+    "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
     "@babel/preset-flow": "7.18.6",
-    "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
+    "@babel/runtime": "^7.25.0",
     "@react-native-async-storage/async-storage": "2.0.0",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",