use web theme values

packages/ondevice-backgrounds/src/Swatch.tsx

@@ -6,40 +6,42 @@ interface SwatchProps {
   setBackground: (background: string) => void;
 }
 
-const PressableSwatch = styled.TouchableOpacity(({ theme }: any) => ({
-  marginBottom: theme.tokens.spacing3,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
+const PressableSwatch = styled.TouchableOpacity(({ theme }) => ({
+  marginBottom: 10,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  backgroundColor: theme.background.content,
+  paddingVertical: 4,
+  paddingHorizontal: 4,
 }));
 
-const ColorSwatch = styled.View(({ theme, color }: any) => ({
-  height: theme.inputs.swatch.height,
+const ColorSwatch = styled.View<{ color: string }>(({ color, theme }) => ({
+  height: 40,
   width: '100%',
-  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  borderRadius: 4,
   backgroundColor: color,
+  borderColor: theme.appBorderColor,
+  borderWidth: 1,
 }));
 
-const ValueContainer = styled.View(({ theme }: any) => ({
+const ValueContainer = styled.View(() => ({
   flex: 1,
   flexDirection: 'row',
   justifyContent: 'space-between',
-  padding: theme.tokens.spacing1,
+  padding: 4,
   paddingBottom: 0,
 }));
 
-const NameText = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.swatch.fontSize,
-  color: theme.inputs.labelTextColor,
-  fontWeight: theme.inputs.swatch.nameTextWeight,
+const NameText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
+  fontWeight: theme.typography.weight.bold,
 }));
 
-const ValueText = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.swatch.fontSize,
-  color: theme.inputs.labelTextColor,
+const ValueText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
 }));
 
 const Swatch = ({ name, value, setBackground }: SwatchProps) => (

packages/ondevice-controls/src/NoControlsWarning.tsx

@@ -2,12 +2,13 @@ import { styled } from '@storybook/react-native-theming';
 import { Linking, View } from 'react-native';
 
 const Paragraph = styled.Text(({ theme }) => ({
-  marginBottom: theme.tokens.spacing3,
-  color: theme.text.primaryColor,
+  marginBottom: 16,
+  color: theme.color.defaultText,
 }));
 
 const LinkText = styled.Text(({ theme }) => ({
-  color: theme.text.linkColor,
+  color: theme.color.secondary,
+  textDecorationLine: 'underline',
 }));
 
 const NoControlsWarning = () => {

packages/ondevice-controls/src/PropField.tsx

@@ -25,7 +25,7 @@ export interface Knob {
 }
 
 const InvalidTypeText = styled.Text(({ theme }) => ({
-  color: theme.inputs.errorTextColor,
+  color: theme.color.negative,
 }));
 
 const InvalidType = ({ arg }: { arg: ArgType }) => (

packages/ondevice-controls/src/components/RadioSelect.tsx

@@ -1,5 +1,4 @@
 import { styled } from '@storybook/react-native-theming';
-import React from 'react';
 
 interface RadioProps {
   data: Array<Record<string, any>>;
@@ -12,38 +11,37 @@ const RadioContainer = styled.View(({ isInline }: any) => ({
   flexDirection: isInline ? 'row' : 'column',
   alignItems: isInline ? 'center' : 'flex-start',
   flexWrap: 'wrap',
+  rowGap: 10,
 }));
 
-const RadioTouchable = styled.TouchableOpacity(({ theme }) => ({
+const RadioTouchable = styled.TouchableOpacity(() => ({
   alignItems: 'center',
   flexDirection: 'row',
-  paddingVertical: theme.inputs.radio.itemSpacing,
 }));
 
 const RadioCircle = styled.View(({ theme }) => ({
-  width: theme.inputs.radio.height,
-  height: theme.inputs.radio.height,
-  borderWidth: theme.inputs.radio.borderWidth,
-  borderColor: theme.inputs.radio.borderColor,
-  borderRadius: theme.tokens.borderRadius.round,
-  backgroundColor: theme.inputs.radio.backgroundColor,
+  width: 15,
+  height: 15,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 15,
+  backgroundColor: theme.background.content,
   alignItems: 'center',
   justifyContent: 'center',
-  paddingVertical: theme.inputs.radio.paddingVertical,
-  paddingHorizontal: theme.inputs.radio.paddingHorizontal,
+  padding: 2,
 }));
 
 const RadioInnerCircle = styled.View(({ theme, selected }: any) => ({
   height: '100%',
   width: '100%',
-  borderRadius: theme.tokens.borderRadius.round,
-  backgroundColor: selected ? theme.inputs.radio.activeBackgroundColor : 'transparent',
+  borderRadius: 10,
+  backgroundColor: selected ? theme.color.positive : 'transparent',
 }));
 
 const RadioLabel = styled.Text(({ theme }) => ({
-  fontSize: theme.inputs.radio.fontSize,
-  paddingStart: theme.inputs.radio.labelSpacing,
-  color: theme.inputs.labelTextColor,
+  fontSize: theme.typography.size.s1,
+  paddingStart: 10,
+  color: theme.color.defaultText,
 }));
 
 const RadioSelect = ({ data = [], value = '', onChange, isInline }: RadioProps) => {

packages/ondevice-controls/src/types/Color.tsx

@@ -19,54 +19,51 @@ export interface ColorProps {
 }
 
 const TouchableContainer = styled.View(({ theme }) => ({
-  width: theme.inputs.swatch.height,
-  height: theme.inputs.swatch.height,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
+  width: 40,
+  height: 40,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  padding: 3,
+  backgroundColor: theme.background.content,
 }));
 
-const Touchable = styled.TouchableOpacity<{ color: string }>(({ theme, color }) => ({
+const Touchable = styled.TouchableOpacity<{ color: string }>(({ color }) => ({
   width: '100%',
   height: '100%',
-  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  borderRadius: 4,
   backgroundColor: color,
 }));
 
 const WebInput = styled('input' as any)(({ theme }) => ({
-  width: theme.inputs.swatch.height,
-  height: theme.inputs.swatch.height,
-  borderWidth: theme.inputs.swatch.borderWidth,
-  borderColor: theme.inputs.swatch.borderColor,
-  borderRadius: theme.inputs.swatch.outerBorderRadius,
-  paddingVertical: theme.inputs.swatch.paddingVertical,
-  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
-  backgroundColor: theme.inputs.swatch.backgroundColor,
+  width: 40,
+  height: 40,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 6,
+  paddingVertical: 2,
+  paddingHorizontal: 2,
+  backgroundColor: theme.background.content,
 }));
 
 const ButtonTouchable = styled.TouchableOpacity<{ primary?: boolean }>(({ theme, primary }) => {
-  const buttonTheme = primary ? theme.button.primary : theme.button.secondary;
   return {
-    backgroundColor: buttonTheme.backgroundColor,
-    borderRadius: buttonTheme.borderRadius,
-    borderWidth: buttonTheme.borderWidth,
-    borderColor: buttonTheme.borderColor,
-    paddingVertical: theme.button.paddingVertical,
-    paddingHorizontal: theme.button.paddingHorizontal,
+    backgroundColor: primary ? theme.color.secondary : theme.button.background,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: primary ? theme.color.secondary : theme.button.border,
+    paddingVertical: 6,
+    paddingHorizontal: 20,
     justifyContent: 'center',
     alignItems: 'center',
   };
 });
 
 const ButtonText = styled.Text<{ primary?: boolean }>(({ theme, primary }) => {
-  const buttonTheme = primary ? theme.button.primary : theme.button.secondary;
   return {
-    color: buttonTheme.textColor,
-    fontSize: theme.button.fontSize,
-    fontWeight: theme.button.fontWeight,
+    color: primary ? theme.color.inverseText : theme.color.defaultText,
+    fontSize: theme.typography.size.s2,
+    fontWeight: theme.typography.weight.bold,
   };
 });
 
@@ -117,7 +114,7 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
             />
             <View style={styles.actionContainer}>
               <ButtonTouchable onPress={closeColorPicker}>
-                <ButtonText>CANCEL</ButtonText>
+                <ButtonText>Cancel</ButtonText>
               </ButtonTouchable>
               <View style={{ width: 12 }} />
               <ButtonTouchable
@@ -127,7 +124,7 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
                   closeColorPicker();
                 }}
               >
-                <ButtonText primary>SELECT</ButtonText>
+                <ButtonText primary>Select</ButtonText>
               </ButtonTouchable>
             </View>
           </InnerContainer>
@@ -138,16 +135,20 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
 };
 
 const InnerContainer = styled.View(({ theme }) => ({
-  backgroundColor: theme.panel.backgroundColor,
-  borderWidth: theme.panel.borderWidth,
-  borderColor: theme.panel.borderColor,
-  borderRadius: theme.tokens.borderRadius.large,
+  backgroundColor: theme.background.content,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  borderRadius: 10,
   margin: 24,
-  padding: theme.tokens.spacing3,
+  padding: 10,
   maxWidth: 350,
   height: 400,
   maxHeight: Dimensions.get('screen').height - 24 * 2,
-  ...theme.tokens.elevation.floating,
+  shadowColor: '#000000',
+  shadowOpacity: 0.2,
+  shadowOffset: { width: 0, height: 0 },
+  shadowRadius: 16,
+  elevation: 10,
 }));
 
 const styles = StyleSheet.create({

packages/ondevice-controls/src/types/Date.tsx

@@ -13,17 +13,17 @@ export interface DateProps {
   onChange: (value: Date) => void;
 }
 
-const Touchable = styled.TouchableOpacity(({ theme }: any) => ({
+const Touchable = styled.TouchableOpacity(({ theme }) => ({
   ...inputStyle({ theme, isTextInput: false }),
 }));
 
-const WebInput = styled('input' as any)(({ theme }: any) => ({
+const WebInput = styled('input' as any)(({ theme }) => ({
   ...inputStyle({ theme }),
 }));
 
-const Label = styled.Text(({ theme }: any) => ({
-  fontSize: theme.inputs.text.fontSize,
-  color: theme.inputs.text.textColor,
+const Label = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.input.color,
 }));
 
 type VisiblePicker = 'date' | 'time' | 'none';

packages/ondevice-controls/src/types/Number.tsx

@@ -6,13 +6,15 @@ import { useResyncValue } from './useResyncValue';
 import { Input } from './common';
 
 const ValueContainer = styled.View({ flexDirection: 'row' });
+
 const LabelText = styled.Text(({ theme }) => ({
-  color: theme.inputs.slider.labelTextColor,
-  fontSize: theme.inputs.slider.fontSize,
+  color: theme.color.mediumdark,
+  fontSize: theme.typography.size.s1,
 }));
+
 const ValueText = styled.Text(({ theme }) => ({
-  color: theme.inputs.slider.valueTextColor,
-  fontSize: theme.inputs.slider.fontSize,
+  color: theme.color.defaultText,
+  fontSize: theme.typography.size.s1,
 }));
 
 export interface NumberProps {
@@ -54,8 +56,10 @@ const NumberType = ({ arg, isPristine, onChange = (value) => value }: NumberProp
       <View key={key}>
         <ValueContainer>
           <LabelText>Value: </LabelText>
+
           <ValueText>{arg.value}</ValueText>
         </ValueContainer>
+
         <Slider
           minimumValue={arg.min}
           maximumValue={arg.max}