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

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,
+  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,
     },
-    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)",
+    headline2: {
+      ...systemWeights.regular,
+      fontSize: 48,
+      letterSpacing: 0,
+      lineHeight: 58,
     },
-    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,
-        },
+    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,
+    },
+  },
 };
 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",
-        },
-        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",
-        },
+  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",
+    },
+  },
 };
 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,58 +3,59 @@ 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];
-        // @ts-expect-error: TS doesn't seem to refine the type correctly
-        return elevation.interpolate({
-            inputRange,
-            outputRange: inputRange.map((e) => {
-                return calculateColor(surfaceColor, e);
-            }),
-        });
-    }
+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 calculateColor(surfaceColor, elevation);
+    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);
 }
 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,50 +2,49 @@ 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],
-            }),
-        };
+  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 {};
     }
-    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,
-        };
+    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,
+    };
+  }
 }

package/src/theming.js

@@ -1,3 +1,4 @@
 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);