@artsy/palette-mobile 13.2.13 → 13.2.15

package/dist/elements/Radio/RadioButton.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 import { Insets, TouchableWithoutFeedbackProps } from "react-native";
 import { FlexProps } from "../Flex";
 export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
@@ -8,6 +9,7 @@ export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "h
     disabled?: boolean;
     error?: boolean;
     text?: React.ReactElement | string;
+    textVariant?: TextVariant;
     subtitle?: React.ReactElement | string;
     accessibilityState?: {
         checked: boolean;

package/dist/elements/Radio/RadioButton.js

@@ -14,7 +14,7 @@ const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
 const RADIOBUTTON_SIZE = 20;
 const DURATION = 150;
-const RadioButton = ({ selected, disabled, error, onPress, text, subtitle, accessibilityState, ...restProps }) => {
+const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
     const { color, space } = (0, useTheme_1.useTheme)();
     const fontScale = react_native_1.PixelRatio.getFontScale();
     const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
@@ -55,7 +55,7 @@ const RadioButton = ({ selected, disabled, error, onPress, text, subtitle, acces
                                     { marginRight: space(1) * fontScale },
                                     radioButtonStyle,
                                 ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
-                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledDot, { size: radioButtonSize })) : ((0, jsx_runtime_1.jsx)(exports.RadioDot, { size: radioButtonSize }))) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", children: !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", color: textColor, children: text })) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
+                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledDot, { size: radioButtonSize })) : ((0, jsx_runtime_1.jsx)(exports.RadioDot, { size: radioButtonSize }))) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", children: !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textVariant, color: textColor, children: text })) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
 };
 exports.RadioButton = RadioButton;
 // styled-component does not have support for Animated.View

package/dist/tokens.d.ts

@@ -40,9 +40,11 @@ export declare const COLOR_LAYER_NAME: {
     black10: string;
     black5: string;
     white100: string;
+    blue200: string;
     blue150: string;
     blue100: string;
     brand: string;
+    blue15: string;
     blue10: string;
     green150: string;
     green100: string;

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" | "blue150" | "blue100" | "blue10" | "green150" | "green100" | "green10" | "yellow150" | "yellow100" | "yellow10" | "orange150" | "orange100" | "orange10" | "red150" | "red100" | "red10";
+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" | "red10";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.13",
+  "version": "13.2.15",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",
@@ -33,7 +33,7 @@
     "FOR DEPS NEEDED FOR THE STORYBOOK APP, ADD THEM AS DEV DEPS BELOW."
   ],
   "dependencies": {
-    "@artsy/palette-tokens": "^5.0.0",
+    "@artsy/palette-tokens": "^6.0.3",
     "@shopify/flash-list": "^1.6.4",
     "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",