feat: make shared styles (borders and text) work with themes

Author: luizbaldi

src/Button/Button.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { border, text, blockSizes } from '../common/styles';
+import { blockSizes } from '../common/styles';
 
 export const testId = 'button';
 
@@ -44,6 +44,7 @@ const Button = ({
   active = false,
   accessibilityLabel,
 }: ButtonProps) => {
+  const theme = useContext(ThemeContext);
   const [isPressed, setIsPressed] = useState(false);
 
   const getWidth = () => {
@@ -81,7 +82,7 @@ const Button = ({
         accessibilityRole='button'
         accessibilityLabel={accessibilityLabel}
       >
-        <Text style={[disabled ? text.disabled : text.default]}>
+        <Text style={[disabled ? theme.text.disabled : theme.text.default]}>
           {children}
         </Text>
       </TouchableHighlight>
@@ -127,17 +128,17 @@ const Borders = ({
   let focus;
 
   if (variant === 'default') {
-    wrapper = primary ? [border.outline] : [];
-    outer = [border.defaultOuter];
-    inner = [border.defaultInner];
-    focus = isPressed ? [border.focusOutline] : [];
+    wrapper = primary ? [theme.border.outline] : [];
+    outer = [theme.border.defaultOuter];
+    inner = [theme.border.defaultInner];
+    focus = isPressed ? [theme.border.focusOutline] : [];
   } else if (variant === 'outside') {
-    wrapper = primary ? [border.outline] : [];
-    outer = [border.outsideOuter];
-    inner = [border.outsideInner];
-    focus = isPressed ? [border.focusOutline] : [];
+    wrapper = primary ? [theme.border.outline] : [];
+    outer = [theme.border.outsideOuter];
+    inner = [theme.border.outsideInner];
+    focus = isPressed ? [theme.border.focusOutline] : [];
   } else if (variant === 'menu' && (active || isPressed)) {
-    wrapper = [border.well];
+    wrapper = [theme.border.well];
   }
 
   return (

src/Menu/MenuItem.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import { StyleSheet, View, TouchableHighlight } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { text, blockSizes } from '../common/styles';
+import { blockSizes } from '../common/styles';
 
 import { Text } from '..';
 
@@ -52,7 +52,7 @@ export const Item = ({
         <View pointerEvents='none' style={[styles.content]}>
           <Text
             style={[
-              disabled ? text.disabled : text.default,
+              disabled ? theme.text.disabled : theme.text.default,
               !disabled && {
                 color: isPressed
                   ? theme.materialTextInvert

src/Select/Select.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { blockSizes, text, border } from '../common/styles';
+import { blockSizes } from '../common/styles';
 import { Border } from '../common/styleElements';
 
 import getSelectOptions, { Option } from './SelectBase';
@@ -93,13 +93,13 @@ const Select = ({
                     : theme.canvas,
                 },
 
-                isPressed && border.focusSecondaryOutline,
+                isPressed && theme.border.focusSecondaryOutline,
               ]}
             >
               <Text
                 style={[
                   styles.textValue,
-                  disabled ? text.disabled : text.default,
+                  disabled ? theme.text.disabled : theme.text.default,
                   !disabled &&
                     isPressed && {
                       color: isPressed

src/SwitchBase/SwitchBase.tsx

@@ -10,7 +10,6 @@ import {
 
 import { Border } from '../common/styleElements';
 import { ThemeContext } from '../common/theming/Theme';
-import { border } from '../common/styles';
 
 import { Text } from '..';
 
@@ -135,7 +134,7 @@ const SwitchBase = ({
           <View
             style={[
               !disabled && isPressed
-                ? border.focusOutline
+                ? theme.border.focusOutline
                 : { borderWidth: 2, borderColor: 'transparent' },
             ]}
           >

src/Tabs/Tabs.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { border, padding, margin, blockSizes } from '../common/styles';
+import { padding, margin, blockSizes } from '../common/styles';
 import { Border } from '../common/styleElements';
 import { Text, Panel } from '..';
 
@@ -130,7 +130,9 @@ const Tab = ({
         />
         <Text>{children}</Text>
         <View style={[styles.mask, { backgroundColor: theme.material }]} />
-        {isPressed && <View style={[styles.focusOutline]} />}
+        {isPressed && (
+          <View style={[styles.focusOutline, theme.border.focusOutline]} />
+        )}
       </View>
     </TouchableHighlight>
   );
@@ -177,7 +179,6 @@ const styles = StyleSheet.create({
     top: 6,
     bottom: 4,
     right: 6,
-    ...border.focusOutline,
   },
 });
 

src/Text/Text.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { text } from '../common/styles';
 
 type Props = React.ComponentProps<typeof NativeText> & {
   children: React.ReactNode;
@@ -39,7 +38,11 @@ const Text = ({
   return (
     <NativeText
       style={[
-        disabled ? text.disabled : secondary ? text.secondary : text.default,
+        disabled
+          ? theme.text.disabled
+          : secondary
+          ? theme.text.secondary
+          : theme.text.default,
         linkUrl ? { ...styles.link, color: theme.anchor } : {},
         {
           fontWeight: bold ? 'bold' : 'normal',

src/TextInput/TextInput.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 
 import { ThemeContext } from '../common/theming/Theme';
-import { blockSizes, text } from '../common/styles';
+import { blockSizes } from '../common/styles';
 import { Border } from '../common/styleElements';
 
 type Props = {
@@ -43,7 +43,7 @@ const TextInput = ({
           {
             backgroundColor: disabled ? theme.material : theme.canvas,
           },
-          disabled && hasValue ? text.disabled : text.default,
+          disabled && hasValue ? theme.text.disabled : theme.text.default,
         ]}
         placeholderTextColor={theme.materialTextDisabled}
         defaultValue={defaultValue}

src/common/styleElements.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import React from 'react';
+import React, { useContext } from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-import { border } from './styles';
+
+import { ThemeContext } from './theming/Theme';
 
 // Borders acts like a pseudo element that
 // will be positioned absolutely in it's parent element
@@ -22,21 +23,23 @@ export const Border = ({
   radius = 0,
   children,
 }: BorderProps) => {
+  const theme = useContext(ThemeContext);
+
   const wrapper: StyleProp<ViewStyle> = [];
   let outer;
   let inner;
 
   if (variant === 'default') {
-    outer = [border.defaultOuter];
-    inner = [border.defaultInner];
+    outer = [theme.border.defaultOuter];
+    inner = [theme.border.defaultInner];
   } else if (variant === 'outside') {
-    outer = [border.outsideOuter];
-    inner = [border.outsideInner];
+    outer = [theme.border.outsideOuter];
+    inner = [theme.border.outsideInner];
   } else if (variant === 'well') {
-    outer = [border.well, borderStyles.invert];
+    outer = [theme.border.well, borderStyles.invert];
   } else if (variant === 'cutout') {
-    outer = [border.cutoutOuter];
-    inner = [border.cutoutInner];
+    outer = [theme.border.cutoutOuter];
+    inner = [theme.border.cutoutInner];
   }
 
   const getSharedStyles = (() => {