@swan-io/lake 1.0.0

package/src/components/WithPartnerAccentColor.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    color: string;
+    children: ReactNode;
+};
+export declare const WithPartnerAccentColor: ({ color, children }: Props) => JSX.Element;
+export {};

package/src/components/WithPartnerAccentColor.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Result } from "@swan-io/boxed";
+import { darken, getLuminance, meetsContrastGuidelines, shade, tint } from "polished";
+import { useLayoutEffect, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { match, P } from "ts-pattern";
+import { isNotNullish } from "../utils/nullish";
+const colorScaleItems = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 0];
+const styles = StyleSheet.create({
+    container: {
+        flexGrow: 1,
+        flexBasis: "0%",
+    },
+});
+const getContrastColor = (color, luminance) => {
+    if (luminance <= 0.75) {
+        return "#fff";
+    }
+    const delta = 0.5 + (1 - luminance);
+    const text = darken(delta / 1.5, color);
+    if (meetsContrastGuidelines(color, text).AALarge) {
+        return text;
+    }
+    else {
+        return darken(delta, color);
+    }
+};
+export const WithPartnerAccentColor = ({ color, children }) => {
+    const containerRef = useRef(null);
+    useLayoutEffect(() => {
+        if (isNotNullish(containerRef.current)) {
+            const element = containerRef.current;
+            const luminance = Result.fromExecution(() => getLuminance(color));
+            luminance.match({
+                Ok: luminance => {
+                    // The Math.pow adjusts the estimation to the default scales
+                    const mostLikelyPositionScale = colorScaleItems[colorScaleItems.length -
+                        (((luminance > 0.5 ? luminance : Math.pow(luminance, 0.2)) *
+                            colorScaleItems.length) |
+                            0)];
+                    const estimated500 = match(mostLikelyPositionScale)
+                        .with(0, () => shade(0.97, color))
+                        .with(50, () => shade(0.95, color))
+                        .with(100, () => shade(0.8, color))
+                        .with(200, () => shade(0.6, color))
+                        .with(300, () => shade(0.4, color))
+                        .with(400, () => shade(0.2, color))
+                        .with(500, P.nullish, () => color)
+                        .with(600, () => tint(0.2, color))
+                        .with(700, () => tint(0.4, color))
+                        .with(800, () => tint(0.6, color))
+                        .with(900, () => tint(0.8, color))
+                        .exhaustive();
+                    const colorScale = {
+                        0: tint(0.97, estimated500),
+                        50: tint(0.95, estimated500),
+                        100: tint(0.8, estimated500),
+                        200: tint(0.6, estimated500),
+                        300: tint(0.4, estimated500),
+                        400: tint(0.2, estimated500),
+                        500: estimated500,
+                        600: shade(0.2, estimated500),
+                        700: shade(0.4, estimated500),
+                        800: shade(0.6, estimated500),
+                        900: shade(0.8, estimated500),
+                        primary: color,
+                        contrast: getContrastColor(color, luminance),
+                        secondary: shade(0.2, color),
+                    };
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-900", colorScale[900], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-800", colorScale[800], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-700", colorScale[700], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-600", colorScale[600], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-500", colorScale[500], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-400", colorScale[400], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-300", colorScale[300], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-200", colorScale[200], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-100", colorScale[100], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-50", colorScale[50], "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
+                    element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
+                },
+                Error: () => {
+                    // Do nothing, keep partner color
+                },
+            });
+        }
+    }, [color]);
+    return (_jsx(View, { ref: containerRef, style: styles.container, children: children }));
+};

package/src/constants/colors.d.ts

@@ -0,0 +1,42 @@
+export declare const colors: {
+    transparent: string;
+    black: string;
+    white: string;
+    gray: {
+        3: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    purple: {
+        3: string;
+        10: string;
+        30: string;
+        50: string;
+        80: string;
+        100: string;
+    };
+    green: {
+        3: string;
+        10: string;
+        100: string;
+    };
+    orange: {
+        3: string;
+        10: string;
+        100: string;
+    };
+    red: {
+        3: string;
+        10: string;
+        100: string;
+    };
+};
+export declare const defaultAccentColor: string;

package/src/constants/colors.js

@@ -0,0 +1,42 @@
+export const colors = {
+    transparent: "transparent",
+    black: "#000000",
+    white: "#ffffff",
+    gray: {
+        3: "#f7f8f8",
+        10: "#e7e8e8",
+        20: "#d0d1d1",
+        30: "#b8baba",
+        40: "#a1a3a3",
+        50: "#898c8c",
+        60: "#727575",
+        70: "#5a5e5e",
+        80: "#434747",
+        90: "#2b2f30",
+        100: "#14191a",
+    },
+    purple: {
+        3: "#faf9fc",
+        10: "#efebf7",
+        30: "#cfc5e8",
+        50: "#b09fda",
+        80: "#8166c4",
+        100: "#6240b5",
+    },
+    green: {
+        3: "#f8fdfb",
+        10: "#e8faf2",
+        100: "#1fd286",
+    },
+    orange: {
+        3: "#fffcf7",
+        10: "#fff5e5",
+        100: "#ff9f00",
+    },
+    red: {
+        3: "#fef8f9",
+        10: "#fde9ec",
+        100: "#f12b43",
+    },
+};
+export const defaultAccentColor = colors.purple[100];

package/src/constants/commonStyles.d.ts

@@ -0,0 +1,66 @@
+export declare const visuallyHiddenStyle: {
+    readonly borderWidth: 0;
+    readonly clip: "rect(0 0 0 0)";
+    readonly clipPath: "inset(50%)";
+    readonly height: 1;
+    readonly marginBottom: -1;
+    readonly marginLeft: 0;
+    readonly marginRight: -1;
+    readonly marginTop: 0;
+    readonly overflow: "hidden";
+    readonly padding: 0;
+    readonly position: "absolute";
+    readonly whiteSpace: "nowrap";
+    readonly width: 1;
+};
+export declare const commonStyles: {
+    readonly center: {
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+    };
+    readonly centerSelf: {
+        readonly marginHorizontal: "auto";
+    };
+    readonly fill: {
+        readonly flexGrow: 1;
+        readonly flexShrink: 1;
+    };
+    readonly hidden: {
+        readonly visibility: "hidden";
+    };
+    readonly view: {
+        readonly alignItems: "stretch";
+        readonly backgroundColor: "transparent";
+        readonly borderColor: "black";
+        readonly borderStyle: "solid";
+        readonly borderWidth: 0;
+        readonly boxSizing: "border-box";
+        readonly display: "flex";
+        readonly flexBasis: "auto";
+        readonly flexDirection: "column";
+        readonly flexShrink: 0;
+        readonly listStyle: "none";
+        readonly margin: 0;
+        readonly minHeight: 0;
+        readonly minWidth: 0;
+        readonly padding: 0;
+        readonly position: "relative";
+        readonly textDecoration: "none";
+        readonly zIndex: 0;
+    };
+    readonly visuallyHidden: {
+        readonly borderWidth: 0;
+        readonly clip: "rect(0 0 0 0)";
+        readonly clipPath: "inset(50%)";
+        readonly height: 1;
+        readonly marginBottom: -1;
+        readonly marginLeft: 0;
+        readonly marginRight: -1;
+        readonly marginTop: 0;
+        readonly overflow: "hidden";
+        readonly padding: 0;
+        readonly position: "absolute";
+        readonly whiteSpace: "nowrap";
+        readonly width: 1;
+    };
+};

package/src/constants/commonStyles.js

@@ -0,0 +1,45 @@
+// https://github.com/necolas/react-native-web/blob/0.18.10/packages/react-native-web/src/exports/View/index.js#L149
+const viewStyle = {
+    alignItems: "stretch",
+    backgroundColor: "transparent",
+    borderColor: "black",
+    borderStyle: "solid",
+    borderWidth: 0,
+    boxSizing: "border-box",
+    display: "flex",
+    flexBasis: "auto",
+    flexDirection: "column",
+    flexShrink: 0,
+    listStyle: "none",
+    margin: 0,
+    minHeight: 0,
+    minWidth: 0,
+    padding: 0,
+    position: "relative",
+    textDecoration: "none",
+    zIndex: 0,
+};
+// https://github.com/adobe/react-spectrum/blob/react-aria%403.22.0/packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx#L32
+export const visuallyHiddenStyle = {
+    borderWidth: 0,
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    marginBottom: -1,
+    marginLeft: 0,
+    marginRight: -1,
+    marginTop: 0,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: 1,
+};
+export const commonStyles = {
+    center: { alignItems: "center", justifyContent: "center" },
+    centerSelf: { marginHorizontal: "auto" },
+    fill: { flexGrow: 1, flexShrink: 1 },
+    hidden: { visibility: "hidden" },
+    view: viewStyle,
+    visuallyHidden: visuallyHiddenStyle,
+};

package/src/constants/design.d.ts

@@ -0,0 +1,168 @@
+import { AnimationStyles, TextStyle } from "react-native";
+export type ColorScale = {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
+    0: string;
+    primary: string;
+    secondary: string;
+    contrast: string;
+};
+export declare const gray75 = "var(--color-gray-75)";
+export declare const colors: {
+    readonly gray: ColorScale;
+    readonly live: ColorScale;
+    readonly sandbox: ColorScale;
+    readonly positive: ColorScale;
+    readonly warning: ColorScale;
+    readonly negative: ColorScale;
+    readonly current: ColorScale;
+    readonly partner: ColorScale;
+    readonly swan: ColorScale;
+    readonly shakespear: ColorScale;
+    readonly darkPink: ColorScale;
+    readonly sunglow: ColorScale;
+    readonly mediumSladeBlue: ColorScale;
+};
+export declare const invariantColors: {
+    black: string;
+    white: string;
+    transparent: string;
+    gray: string;
+};
+export type ColorVariants = keyof typeof colors;
+export type BackgroundColorVariant = {
+    default: string;
+    defaultTransparent: string;
+    default50Transparency: string;
+    default75Transparency: string;
+    default90Transparency: string;
+    accented: string;
+    accentedTransparent: string;
+    accented50Transparency: string;
+    accented75Transparency: string;
+    accented90Transparency: string;
+};
+export declare const backgroundColor: BackgroundColorVariant;
+export declare const gradients: {
+    readonly vertical: "var(--gradient-vertical)";
+    readonly oblique: "var(--gradient-oblique)";
+};
+export declare const interFontStyle: {
+    fontFamily: string;
+    letterSpacing: number;
+};
+export declare const texts: {
+    readonly h1: TextStyle;
+    readonly h2: TextStyle;
+    readonly h3: TextStyle;
+    readonly h4: TextStyle;
+    readonly h5: TextStyle;
+    readonly h6: TextStyle;
+    readonly semibold: TextStyle;
+    readonly medium: TextStyle;
+    readonly regular: TextStyle;
+    readonly light: TextStyle;
+    readonly smallSemibold: TextStyle;
+    readonly smallMedium: TextStyle;
+    readonly smallRegular: TextStyle;
+    readonly placeholder: TextStyle;
+    readonly smallPlaceholder: TextStyle;
+};
+export type TextVariants = keyof typeof texts;
+export declare const shadows: {
+    readonly tile: "var(--shadow-tile)";
+    readonly tileHover: "var(--shadow-tile-hover)";
+    readonly modal: "var(--shadow-modal)";
+};
+export declare const spacings: {
+    readonly 4: "var(--spacing-4)";
+    readonly 8: "var(--spacing-8)";
+    readonly 12: "var(--spacing-12)";
+    readonly 16: "var(--spacing-16)";
+    readonly 20: "var(--spacing-20)";
+    readonly 24: "var(--spacing-24)";
+    readonly 32: "var(--spacing-32)";
+    readonly 40: "var(--spacing-40)";
+    readonly 48: "var(--spacing-48)";
+    readonly 72: "var(--spacing-72)";
+    readonly 96: "var(--spacing-96)";
+};
+export type Spacings = keyof typeof spacings;
+export declare const negativeSpacings: {
+    readonly 4: "var(--spacing-negative-4)";
+    readonly 8: "var(--spacing-negative-8)";
+    readonly 12: "var(--spacing-negative-12)";
+    readonly 16: "var(--spacing-negative-16)";
+    readonly 20: "var(--spacing-negative-20)";
+    readonly 24: "var(--spacing-negative-24)";
+    readonly 32: "var(--spacing-negative-32)";
+    readonly 40: "var(--spacing-negative-40)";
+    readonly 48: "var(--spacing-negative-48)";
+    readonly 72: "var(--spacing-negative-72)";
+    readonly 96: "var(--spacing-negative-96)";
+};
+export type NegativeSpacings = keyof typeof negativeSpacings;
+export declare const radii: {
+    readonly 4: number;
+    readonly 6: number;
+    readonly 8: number;
+};
+export type Radii = keyof typeof radii;
+export declare const fonts: {
+    primary: string;
+    card: string;
+    code: string;
+};
+export type Fonts = keyof typeof fonts;
+export type Animation = {
+    enter: AnimationStyles;
+    leave: AnimationStyles;
+};
+export declare const animations: {
+    fadeAndSlideInFromTop: Animation;
+    fadeAndSlideInFromLeft: Animation;
+    fadeAndSlideInFromBottom: Animation;
+    fadeAndSlideInFromRight: Animation;
+    shake: {
+        enter: {
+            animationKeyframes: {
+                "10%, 90%": {
+                    transform: {
+                        translateX: number;
+                    }[];
+                };
+                "20%, 80%": {
+                    transform: {
+                        translateX: number;
+                    }[];
+                };
+                "30%, 50%, 70%": {
+                    transform: {
+                        translateX: number;
+                    }[];
+                };
+                "40%, 60%": {
+                    transform: {
+                        translateX: number;
+                    }[];
+                };
+            }[];
+            animationDuration: string;
+            animationTimingFunction: string;
+        };
+    };
+};
+export declare const breakpoints: {
+    large: number;
+    medium: number;
+    small: number;
+    tiny: number;
+};