@draftbit/core 46.4.4-caab07.0 → 46.4.4-cc754a.2

package/src/styles/DarkTheme.js

@@ -5,22 +5,22 @@ const white = "#FFF";
 const black = "#000";
 const pinkA100 = "#ff80ab";
 const DarkTheme = {
-  ...DefaultTheme,
-  dark: true,
-  mode: "adaptive",
-  colors: {
-    ...DefaultTheme.colors,
-    primary: "#BB86FC",
-    background: "#121212",
-    surface: "#121212",
-    error: "#CF6679",
-    onBackground: "#FFFFFF",
-    onSurface: "#FFFFFF",
-    text: white,
-    disabled: color(white).alpha(0.38).rgb().string(),
-    placeholder: color(white).alpha(0.54).rgb().string(),
-    backdrop: color(black).alpha(0.5).rgb().string(),
-    notification: pinkA100,
-  },
+    ...DefaultTheme,
+    dark: true,
+    mode: "adaptive",
+    colors: {
+        ...DefaultTheme.colors,
+        primary: "#BB86FC",
+        background: "#121212",
+        surface: "#121212",
+        error: "#CF6679",
+        onBackground: "#FFFFFF",
+        onSurface: "#FFFFFF",
+        text: white,
+        disabled: color(white).alpha(0.38).rgb().string(),
+        placeholder: color(white).alpha(0.54).rgb().string(),
+        backdrop: color(black).alpha(0.5).rgb().string(),
+        notification: pinkA100,
+    },
 };
 export default DarkTheme;

package/src/styles/DefaultTheme.js

@@ -1,111 +1,111 @@
 import { systemWeights } from "react-native-typography";
 import configureFonts from "./fonts";
 const DefaultTheme = {
-  disabledOpacity: 0.5,
-  roundness: 8,
-  dark: false,
-  mode: "exact",
-  borderRadius: {
-    global: 6,
-    button: 24,
-  },
-  colors: {
-    primary: "rgba(90, 69, 255, 1)",
-    secondary: "rgba(59, 201, 234, 1)",
-    surface: "rgba(255, 255, 255, 1)",
-    background: "rgba(251, 252, 253, 1)",
-    error: "rgba(255, 69, 100, 1)",
-    divider: "rgba(200, 200, 200, 1)",
-    strong: "rgba(18, 20, 44, 1)",
-    medium: "rgba(70, 78, 88, 1)",
-    strongInverse: "rgba(255, 255, 255, 1)",
-    mediumInverse: "rgba(255, 255, 255, 0.87)",
-    lightInverse: "rgba(255, 255, 255, 0.68)",
-    light: "rgba(165, 173, 183, 1)",
-    text: "#000",
-    placeholder: "#333",
-    disabled: "rgba(0, 0, 0, 0.25)",
-  },
-  fonts: configureFonts(),
-  typography: {
-    headline1: {
-      ...systemWeights.regular,
-      fontSize: 60,
-      letterSpacing: 0,
-      lineHeight: 71,
+    disabledOpacity: 0.5,
+    roundness: 8,
+    dark: false,
+    mode: "exact",
+    borderRadius: {
+        global: 6,
+        button: 24,
     },
-    headline2: {
-      ...systemWeights.regular,
-      fontSize: 48,
-      letterSpacing: 0,
-      lineHeight: 58,
+    colors: {
+        primary: "rgba(90, 69, 255, 1)",
+        secondary: "rgba(59, 201, 234, 1)",
+        surface: "rgba(255, 255, 255, 1)",
+        background: "rgba(251, 252, 253, 1)",
+        error: "rgba(255, 69, 100, 1)",
+        divider: "rgba(200, 200, 200, 1)",
+        strong: "rgba(18, 20, 44, 1)",
+        medium: "rgba(70, 78, 88, 1)",
+        strongInverse: "rgba(255, 255, 255, 1)",
+        mediumInverse: "rgba(255, 255, 255, 0.87)",
+        lightInverse: "rgba(255, 255, 255, 0.68)",
+        light: "rgba(165, 173, 183, 1)",
+        text: "#000",
+        placeholder: "#333",
+        disabled: "rgba(0, 0, 0, 0.25)",
     },
-    headline3: {
-      ...systemWeights.regular,
-      fontSize: 34,
-      letterSpacing: 0,
-      lineHeight: 40,
+    fonts: configureFonts(),
+    typography: {
+        headline1: {
+            ...systemWeights.regular,
+            fontSize: 60,
+            letterSpacing: 0,
+            lineHeight: 71,
+        },
+        headline2: {
+            ...systemWeights.regular,
+            fontSize: 48,
+            letterSpacing: 0,
+            lineHeight: 58,
+        },
+        headline3: {
+            ...systemWeights.regular,
+            fontSize: 34,
+            letterSpacing: 0,
+            lineHeight: 40,
+        },
+        headline4: {
+            ...systemWeights.regular,
+            fontSize: 24,
+            letterSpacing: 0,
+            lineHeight: 34,
+        },
+        headline5: {
+            ...systemWeights.regular,
+            fontSize: 20,
+            letterSpacing: 0,
+            lineHeight: 26,
+        },
+        subtitle1: {
+            ...systemWeights.regular,
+            fontSize: 16,
+            letterSpacing: 0,
+            lineHeight: 26,
+        },
+        subtitle2: {
+            ...systemWeights.regular,
+            fontSize: 14,
+            letterSpacing: 0,
+            lineHeight: 22,
+        },
+        body1: {
+            ...systemWeights.regular,
+            fontSize: 16,
+            letterSpacing: 0,
+            lineHeight: 26,
+        },
+        body2: {
+            ...systemWeights.regular,
+            fontSize: 14,
+            letterSpacing: 0,
+            lineHeight: 22,
+        },
+        button: {
+            ...systemWeights.regular,
+            fontSize: 14,
+            letterSpacing: 0,
+            lineHeight: 16,
+        },
+        caption: {
+            ...systemWeights.regular,
+            fontSize: 12,
+            letterSpacing: 0,
+            lineHeight: 16,
+        },
+        overline: {
+            ...systemWeights.regular,
+            fontSize: 12,
+            letterSpacing: 2,
+            lineHeight: 16,
+        },
+        headline6: {
+            ...systemWeights.regular,
+            fontSize: 16,
+            letterSpacing: 0,
+            lineHeight: 24,
+        },
     },
-    headline4: {
-      ...systemWeights.regular,
-      fontSize: 24,
-      letterSpacing: 0,
-      lineHeight: 34,
-    },
-    headline5: {
-      ...systemWeights.regular,
-      fontSize: 20,
-      letterSpacing: 0,
-      lineHeight: 26,
-    },
-    subtitle1: {
-      ...systemWeights.regular,
-      fontSize: 16,
-      letterSpacing: 0,
-      lineHeight: 26,
-    },
-    subtitle2: {
-      ...systemWeights.regular,
-      fontSize: 14,
-      letterSpacing: 0,
-      lineHeight: 22,
-    },
-    body1: {
-      ...systemWeights.regular,
-      fontSize: 16,
-      letterSpacing: 0,
-      lineHeight: 26,
-    },
-    body2: {
-      ...systemWeights.regular,
-      fontSize: 14,
-      letterSpacing: 0,
-      lineHeight: 22,
-    },
-    button: {
-      ...systemWeights.regular,
-      fontSize: 14,
-      letterSpacing: 0,
-      lineHeight: 16,
-    },
-    caption: {
-      ...systemWeights.regular,
-      fontSize: 12,
-      letterSpacing: 0,
-      lineHeight: 16,
-    },
-    overline: {
-      ...systemWeights.regular,
-      fontSize: 12,
-      letterSpacing: 2,
-      lineHeight: 16,
-    },
-    headline6: {
-      ...systemWeights.regular,
-      fontSize: 16,
-      letterSpacing: 0,
-      lineHeight: 24,
-    },
-  },
 };
 export default DefaultTheme;

package/src/styles/fonts.js

@@ -1,62 +1,62 @@
 /* https://github.com/callstack/react-native-paper/blob/main/src/styles/fonts.tsx */
 import { Platform } from "react-native";
 const fontConfig = {
-  web: {
-    regular: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: "400",
+    web: {
+        regular: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "500",
+        },
+        light: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "300",
+        },
+        thin: {
+            fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+            fontWeight: "100",
+        },
+    },
+    ios: {
+        regular: {
+            fontFamily: "System",
+            fontWeight: "400",
+        },
+        medium: {
+            fontFamily: "System",
+            fontWeight: "500",
+        },
+        light: {
+            fontFamily: "System",
+            fontWeight: "300",
+        },
+        thin: {
+            fontFamily: "System",
+            fontWeight: "100",
+        },
+    },
+    default: {
+        regular: {
+            fontFamily: "sans-serif",
+            fontWeight: "normal",
+        },
+        medium: {
+            fontFamily: "sans-serif-medium",
+            fontWeight: "normal",
+        },
+        light: {
+            fontFamily: "sans-serif-light",
+            fontWeight: "normal",
+        },
+        thin: {
+            fontFamily: "sans-serif-thin",
+            fontWeight: "normal",
+        },
     },
-    medium: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: "500",
-    },
-    light: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: "300",
-    },
-    thin: {
-      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-      fontWeight: "100",
-    },
-  },
-  ios: {
-    regular: {
-      fontFamily: "System",
-      fontWeight: "400",
-    },
-    medium: {
-      fontFamily: "System",
-      fontWeight: "500",
-    },
-    light: {
-      fontFamily: "System",
-      fontWeight: "300",
-    },
-    thin: {
-      fontFamily: "System",
-      fontWeight: "100",
-    },
-  },
-  default: {
-    regular: {
-      fontFamily: "sans-serif",
-      fontWeight: "normal",
-    },
-    medium: {
-      fontFamily: "sans-serif-medium",
-      fontWeight: "normal",
-    },
-    light: {
-      fontFamily: "sans-serif-light",
-      fontWeight: "normal",
-    },
-    thin: {
-      fontFamily: "sans-serif-thin",
-      fontWeight: "normal",
-    },
-  },
 };
 export default function configureFonts(config) {
-  const fonts = Platform.select({ ...fontConfig, ...config });
-  return fonts;
+    const fonts = Platform.select({ ...fontConfig, ...config });
+    return fonts;
 }

package/src/styles/overlay.js

@@ -3,59 +3,58 @@ import color from "color";
 import { Animated } from "react-native";
 import DarkTheme from "./DarkTheme";
 const isAnimatedValue = (it) => it instanceof Animated.Value;
-export default function overlay(
-  elevation,
-  surfaceColor = DarkTheme.colors.surface
-) {
-  if (isAnimatedValue(elevation)) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
+export default function overlay(elevation, surfaceColor = DarkTheme.colors.surface) {
+    if (isAnimatedValue(elevation)) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+        // @ts-expect-error: TS doesn't seem to refine the type correctly
+        return elevation.interpolate({
+            inputRange,
+            outputRange: inputRange.map((e) => {
+                return calculateColor(surfaceColor, e);
+            }),
+        });
+    }
     // @ts-expect-error: TS doesn't seem to refine the type correctly
-    return elevation.interpolate({
-      inputRange,
-      outputRange: inputRange.map((e) => {
-        return calculateColor(surfaceColor, e);
-      }),
-    });
-  }
-  // @ts-expect-error: TS doesn't seem to refine the type correctly
-  return calculateColor(surfaceColor, elevation);
+    return calculateColor(surfaceColor, elevation);
 }
 function calculateColor(surfaceColor, elevation = 1) {
-  let overlayTransparency;
-  if (elevation >= 1 && elevation <= 24) {
-    overlayTransparency = elevationOverlayTransparency[elevation];
-  } else if (elevation > 24) {
-    overlayTransparency = elevationOverlayTransparency[24];
-  } else {
-    overlayTransparency = elevationOverlayTransparency[1];
-  }
-  return color(surfaceColor)
-    .mix(color("white"), overlayTransparency * 0.01)
-    .hex();
+    let overlayTransparency;
+    if (elevation >= 1 && elevation <= 24) {
+        overlayTransparency = elevationOverlayTransparency[elevation];
+    }
+    else if (elevation > 24) {
+        overlayTransparency = elevationOverlayTransparency[24];
+    }
+    else {
+        overlayTransparency = elevationOverlayTransparency[1];
+    }
+    return color(surfaceColor)
+        .mix(color("white"), overlayTransparency * 0.01)
+        .hex();
 }
 const elevationOverlayTransparency = {
-  1: 5,
-  2: 7,
-  3: 8,
-  4: 9,
-  5: 10,
-  6: 11,
-  7: 11.5,
-  8: 12,
-  9: 12.5,
-  10: 13,
-  11: 13.5,
-  12: 14,
-  13: 14.25,
-  14: 14.5,
-  15: 14.75,
-  16: 15,
-  17: 15.12,
-  18: 15.24,
-  19: 15.36,
-  20: 15.48,
-  21: 15.6,
-  22: 15.72,
-  23: 15.84,
-  24: 16,
+    1: 5,
+    2: 7,
+    3: 8,
+    4: 9,
+    5: 10,
+    6: 11,
+    7: 11.5,
+    8: 12,
+    9: 12.5,
+    10: 13,
+    11: 13.5,
+    12: 14,
+    13: 14.25,
+    14: 14.5,
+    15: 14.75,
+    16: 15,
+    17: 15.12,
+    18: 15.24,
+    19: 15.36,
+    20: 15.48,
+    21: 15.6,
+    22: 15.72,
+    23: 15.84,
+    24: 16,
 };

package/src/styles/shadow.js

@@ -2,49 +2,50 @@ import { Animated } from "react-native";
 const SHADOW_COLOR = "#000";
 const SHADOW_OPACITY = 0.24;
 export default function shadow(elevation = 0) {
-  if (elevation instanceof Animated.Value) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: new Animated.Value(0),
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: [0, 0.5, 0.75, 2, 7, 23],
-        }),
-      },
-      shadowOpacity: new Animated.Value(SHADOW_OPACITY),
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: [0, 0.75, 1.5, 3, 8, 24],
-      }),
-    };
-  } else {
-    if (elevation === 0) {
-      return {};
+    if (elevation instanceof Animated.Value) {
+        const inputRange = [0, 1, 2, 3, 8, 24];
+        return {
+            shadowColor: SHADOW_COLOR,
+            shadowOffset: {
+                width: new Animated.Value(0),
+                height: elevation.interpolate({
+                    inputRange,
+                    outputRange: [0, 0.5, 0.75, 2, 7, 23],
+                }),
+            },
+            shadowOpacity: new Animated.Value(SHADOW_OPACITY),
+            shadowRadius: elevation.interpolate({
+                inputRange,
+                outputRange: [0, 0.75, 1.5, 3, 8, 24],
+            }),
+        };
     }
-    let height, radius;
-    switch (elevation) {
-      case 1:
-        height = 0.5;
-        radius = 0.75;
-        break;
-      case 2:
-        height = 0.75;
-        radius = 1.5;
-        break;
-      default:
-        height = elevation - 1;
-        radius = elevation;
+    else {
+        if (elevation === 0) {
+            return {};
+        }
+        let height, radius;
+        switch (elevation) {
+            case 1:
+                height = 0.5;
+                radius = 0.75;
+                break;
+            case 2:
+                height = 0.75;
+                radius = 1.5;
+                break;
+            default:
+                height = elevation - 1;
+                radius = elevation;
+        }
+        return {
+            shadowColor: SHADOW_COLOR,
+            shadowOffset: {
+                width: 0,
+                height,
+            },
+            shadowOpacity: SHADOW_OPACITY,
+            shadowRadius: radius,
+        };
     }
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: 0,
-        height,
-      },
-      shadowOpacity: SHADOW_OPACITY,
-      shadowRadius: radius,
-    };
-  }
 }

package/src/theming.js

@@ -1,4 +1,3 @@
 import { createTheming } from "@draftbit/react-theme-provider";
 import DefaultTheme from "./styles/DefaultTheme";
-export const { ThemeProvider, withTheme, useTheme } =
-  createTheming(DefaultTheme);
+export const { ThemeProvider, withTheme, useTheme } = createTheming(DefaultTheme);