@draftbit/core 48.5.6 → 48.5.7-26899.2

package/src/styles/DefaultTheme.tsx

@@ -1,114 +1,114 @@
-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,
-    },
-    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,
-    },
-  },
-};
-
-export default DefaultTheme;
-export type Theme = typeof DefaultTheme;
+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,
+    },
+    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,
+    },
+  },
+};
+
+export default DefaultTheme;
+export type Theme = typeof DefaultTheme;

package/src/styles/fonts.js

@@ -0,0 +1,63 @@
+/* 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",
+        },
+    },
+};
+export default function configureFonts(config) {
+    const fonts = Platform.select({ ...fontConfig, ...config });
+    return fonts;
+}
+//# sourceMappingURL=fonts.js.map

package/src/styles/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["fonts.tsx"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,OAAO,EAAE,QAAQ,EAAkB,MAAM,cAAc,CAAC;AAGxD,MAAM,UAAU,GAAG;IACjB,GAAG,EAAE;QACH,OAAO,EAAE;YACP,UAAU,EAAE,wDAAwD;YACpE,UAAU,EAAE,KAAc;SAC3B;QACD,MAAM,EAAE;YACN,UAAU,EAAE,wDAAwD;YACpE,UAAU,EAAE,KAAc;SAC3B;QACD,KAAK,EAAE;YACL,UAAU,EAAE,wDAAwD;YACpE,UAAU,EAAE,KAAc;SAC3B;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,wDAAwD;YACpE,UAAU,EAAE,KAAc;SAC3B;KACF;IACD,GAAG,EAAE;QACH,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,KAAc;SAC3B;QACD,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,KAAc;SAC3B;QACD,KAAK,EAAE;YACL,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,KAAc;SAC3B;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,KAAc;SAC3B;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE;YACP,UAAU,EAAE,YAAY;YACxB,UAAU,EAAE,QAAoB;SACjC;QACD,MAAM,EAAE;YACN,UAAU,EAAE,mBAAmB;YAC/B,UAAU,EAAE,QAAoB;SACjC;QACD,KAAK,EAAE;YACL,UAAU,EAAE,kBAAkB;YAC9B,UAAU,EAAE,QAAoB;SACjC;QACD,IAAI,EAAE;YACJ,UAAU,EAAE,iBAAiB;YAC7B,UAAU,EAAE,QAAoB;SACjC;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,MAEtC;IACC,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,EAAE,CAAU,CAAC;IACrE,OAAO,KAAK,CAAC;AACf,CAAC"}

package/src/styles/fonts.tsx

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

package/src/styles/overlay.js

@@ -0,0 +1,61 @@
+/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
+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);
+            }),
+        });
+    }
+    // @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();
+}
+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,
+};
+//# sourceMappingURL=overlay.js.map

package/src/styles/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["overlay.tsx"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,eAAe,GAAG,CACtB,EAA4D,EACtC,EAAE,CAAC,EAAE,YAAY,QAAQ,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,SAAY,EACZ,eAAuB,SAAS,CAAC,MAAM,CAAC,OAAO;IAE/C,IAAI,eAAe,CAAC,SAAS,CAAC,EAAE;QAC9B,MAAM,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAEvC,iEAAiE;QACjE,OAAO,SAAS,CAAC,WAAW,CAAC;YAC3B,UAAU;YACV,WAAW,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;gBAChC,OAAO,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YACzC,CAAC,CAAC;SACH,CAAC,CAAC;KACJ;IAED,iEAAiE;IACjE,OAAO,cAAc,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACjD,CAAC;AAED,SAAS,cAAc,CAAC,YAAoB,EAAE,YAAoB,CAAC;IACjE,IAAI,mBAA2B,CAAC;IAChC,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE;QACrC,mBAAmB,GAAG,4BAA4B,CAAC,SAAS,CAAC,CAAC;KAC/D;SAAM,IAAI,SAAS,GAAG,EAAE,EAAE;QACzB,mBAAmB,GAAG,4BAA4B,CAAC,EAAE,CAAC,CAAC;KACxD;SAAM;QACL,mBAAmB,GAAG,4BAA4B,CAAC,CAAC,CAAC,CAAC;KACvD;IACD,OAAO,KAAK,CAAC,YAAY,CAAC;SACvB,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;SAC/C,GAAG,EAAE,CAAC;AACX,CAAC;AAED,MAAM,4BAA4B,GAA2B;IAC3D,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,EAAE;CACP,CAAC"}

package/src/styles/overlay.tsx

@@ -1,69 +1,69 @@
-/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
-import color from "color";
-import { Animated } from "react-native";
-import DarkTheme from "./DarkTheme";
-
-const isAnimatedValue = (
-  it: number | Animated.AnimatedInterpolation<string | number>
-): it is Animated.Value => it instanceof Animated.Value;
-
-export default function overlay<T extends Animated.Value | number>(
-  elevation: T,
-  surfaceColor: string = DarkTheme.colors.surface
-): T extends number ? string : Animated.AnimatedInterpolation<string | number> {
-  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 calculateColor(surfaceColor, elevation);
-}
-
-function calculateColor(surfaceColor: string, elevation: number = 1) {
-  let overlayTransparency: number;
-  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: Record<string, number> = {
-  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,
-};
+/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/styles/overlay.tsx */
+import color from "color";
+import { Animated } from "react-native";
+import DarkTheme from "./DarkTheme";
+
+const isAnimatedValue = (
+  it: number | Animated.AnimatedInterpolation<string | number>
+): it is Animated.Value => it instanceof Animated.Value;
+
+export default function overlay<T extends Animated.Value | number>(
+  elevation: T,
+  surfaceColor: string = DarkTheme.colors.surface
+): T extends number ? string : Animated.AnimatedInterpolation<string | number> {
+  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 calculateColor(surfaceColor, elevation);
+}
+
+function calculateColor(surfaceColor: string, elevation: number = 1) {
+  let overlayTransparency: number;
+  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: Record<string, number> = {
+  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,
+};