@tujyane/alf 1.2.0 → 2.0.0

package/src/index.tsx

@@ -1,8 +1,11 @@
 import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { createContext, useContext, useMemo } from "react";
+
+import { themes, type Theme } from "./themes";
 
 export * from "./atoms";
 export * from "./palette";
-export * from "./semantic";
+export * from "./themes";
 export * from "./platform";
 export * as tokens from "./tokens";
 export * as utils from "./utils";
@@ -14,3 +17,30 @@ export type TextStyleProp = {
 export type ViewStyleProp = {
   style?: StyleProp<ViewStyle>;
 };
+
+export const Context = createContext({
+  theme: themes.light,
+});
+Context.displayName = "AlfContext";
+
+export function Provider<T extends string, A extends Record<T, Theme>>({
+  children,
+  activeTheme,
+  themes,
+}: React.PropsWithChildren<{
+  activeTheme: T;
+  themes: A;
+}>) {
+  const value = useMemo(
+    () => ({
+      theme: themes[activeTheme],
+    }),
+    [activeTheme, themes],
+  );
+
+  return <Context.Provider value={value}>{children}</Context.Provider>;
+}
+
+export function useTheme() {
+  return useContext(Context).theme;
+}

package/src/palette.ts

@@ -1,11 +1,22 @@
 export type Palette = {
   white: string;
   black: string;
-  stroke_primary: string;
-  text_primary: string;
-  text_secondary: string;
-  primary: string;
-  secondary: string;
+
+  contrast_0: string;
+  contrast_25: string;
+  contrast_50: string;
+  contrast_100: string;
+  contrast_200: string;
+  contrast_300: string;
+  contrast_400: string;
+  contrast_500: string;
+  contrast_600: string;
+  contrast_700: string;
+  contrast_800: string;
+  contrast_900: string;
+  contrast_950: string;
+  contrast_975: string;
+  contrast_1000: string;
 
   primary_25: string;
   primary_50: string;
@@ -18,6 +29,8 @@ export type Palette = {
   primary_700: string;
   primary_800: string;
   primary_900: string;
+  primary_950: string;
+  primary_975: string;
 
   positive_25: string;
   positive_50: string;
@@ -46,121 +59,137 @@ export type Palette = {
   negative_900: string;
   negative_950: string;
   negative_975: string;
-
-  // Additional semantic scales
-  warning_100: string;
-  warning_200: string;
-  warning_300: string;
-  warning_400: string;
-  warning_500: string;
-  warning_600: string;
-  warning_700: string;
-  warning_800: string;
-  warning_900: string;
-
-  info_100: string;
-  info_200: string;
-  info_300: string;
-  info_400: string;
-  info_500: string;
-  info_600: string;
-  info_700: string;
-  info_800: string;
-  info_900: string;
-
-  secondary_100: string;
-  secondary_200: string;
-  secondary_300: string;
-  secondary_400: string;
-  secondary_500: string;
-  secondary_600: string;
-  secondary_700: string;
-  secondary_800: string;
-  secondary_900: string;
 };
 
-export const palette: Palette = {
+const STATIC_VALUES = {
   white: "#FFFFFF",
   black: "#000000",
-  stroke_primary: "#E8F2F2",
-  text_primary: "#020204",
-  text_secondary: "#625F6E",
-  primary: "#4372B8",
-  secondary: "#2D3F60",
+};
+
+export const DEFAULT_PALETTE: Palette = {
+  white: STATIC_VALUES.white,
+  black: STATIC_VALUES.black,
 
-  // Primary
-  primary_25: "#F8FAFB",
-  primary_50: "#F8FAFB",
-  primary_100: "#D6E4FD",
-  primary_200: "#AEC8FC",
-  primary_300: "#85A8F8",
-  primary_400: "#658DF1",
-  primary_500: "#3563E9",
-  primary_600: "#264BC8",
-  primary_700: "#1A37A7",
-  primary_800: "#102587",
-  primary_900: "#0A196F",
+  contrast_0: "#FFFFFF",
+  contrast_25: "#F9FAFB",
+  contrast_50: "#EFF2F6",
+  contrast_100: "#DCE2EA",
+  contrast_200: "#C0CAD8",
+  contrast_300: "#A5B2C5",
+  contrast_400: "#8798B0",
+  contrast_500: "#667B99",
+  contrast_600: "#526580",
+  contrast_700: "#405168",
+  contrast_800: "#313F54",
+  contrast_900: "#232E3E",
+  contrast_950: "#19222E",
+  contrast_975: "#111822",
+  contrast_1000: "#000000",
 
-  // Success
-  positive_25: "#F0FDF4",
-  positive_50: "#F0FDF4",
-  positive_100: "#DCFCE7",
-  positive_200: "#BBF7D0",
-  positive_300: "#86EFAC",
-  positive_400: "#4ADE80",
-  positive_500: "#22C55E",
-  positive_600: "#16A34A",
-  positive_700: "#15803D",
-  positive_800: "#166534",
-  positive_900: "#14532D",
-  positive_950: "#0A2818",
-  positive_975: "#051C0F",
+  primary_25: "#F5F9FF",
+  primary_50: "#edf1fb",
+  primary_100: "#dae2f8",
+  primary_200: "#b5c6f1",
+  primary_300: "#8dabeb",
+  primary_400: "#5f91e4",
+  primary_500: "#4577c4",
+  primary_600: "#365e9d",
+  primary_700: "#274778",
+  primary_800: "#193054",
+  primary_900: "#0c1b34",
+  primary_950: "#061123",
+  primary_975: "#061123",
+
+  positive_25: "#ECFEF5",
+  positive_50: "#D3FDE8",
+  positive_100: "#A3FACF",
+  positive_200: "#6AF6B0",
+  positive_300: "#2CF28F",
+  positive_400: "#0DD370",
+  positive_500: "#09B35E",
+  positive_600: "#04904A",
+  positive_700: "#036D38",
+  positive_800: "#04522B",
+  positive_900: "#033F21",
+  positive_950: "#032A17",
+  positive_975: "#021D0F",
 
-  // Error
   negative_25: "#FFF5F7",
-  negative_50: "#FFF5F7",
-  negative_100: "#FFE7D3",
-  negative_200: "#FFC8A6",
-  negative_300: "#FFA37A",
-  negative_400: "#FF7F59",
-  negative_500: "#FF4423",
-  negative_600: "#DB2719",
-  negative_700: "#B71112",
-  negative_800: "#930B16",
-  negative_900: "#7A0619",
-  negative_950: "#4D0410",
+  negative_50: "#FEE7EC",
+  negative_100: "#FDD3DD",
+  negative_200: "#FBBBCA",
+  negative_300: "#F891A9",
+  negative_400: "#F65A7F",
+  negative_500: "#E91646",
+  negative_600: "#CA123D",
+  negative_700: "#A71134",
+  negative_800: "#7F0B26",
+  negative_900: "#5F071C",
+  negative_950: "#430413",
   negative_975: "#30030D",
+};
 
-  // Warning
-  warning_100: "#FFF8D7",
-  warning_200: "#FFEFB0",
-  warning_300: "#FFE488",
-  warning_400: "#FFD96B",
-  warning_500: "#FFC73A",
-  warning_600: "#DBA32A",
-  warning_700: "#B7821D",
-  warning_800: "#936312",
-  warning_900: "#7A4D0B",
+export function invertPalette(palette: Palette) {
+  return {
+    white: palette.white,
+    black: palette.black,
 
-  // Info
-  info_100: "#DCF3FF",
-  info_200: "#BAE5FF",
-  info_300: "#98D3FF",
-  info_400: "#7EC2FF",
-  info_500: "#54A6FF",
-  info_600: "#3D81DB",
-  info_700: "#2A60B7",
-  info_800: "#1A4393",
-  info_900: "#102E7A",
+    contrast_0: palette.contrast_1000,
+    contrast_25: palette.contrast_975,
+    contrast_50: palette.contrast_950,
+    contrast_100: palette.contrast_900,
+    contrast_200: palette.contrast_800,
+    contrast_300: palette.contrast_700,
+    contrast_400: palette.contrast_600,
+    contrast_500: palette.contrast_500,
+    contrast_600: palette.contrast_400,
+    contrast_700: palette.contrast_300,
+    contrast_800: palette.contrast_200,
+    contrast_900: palette.contrast_100,
+    contrast_950: palette.contrast_50,
+    contrast_975: palette.contrast_25,
+    contrast_1000: palette.contrast_0,
 
-  // Secondary
-  secondary_100: "#E0E9F4",
-  secondary_200: "#C3D4E9",
-  secondary_300: "#90A3BF",
-  secondary_400: "#596780",
-  secondary_500: "#1A202C",
-  secondary_600: "#131825",
-  secondary_700: "#0D121F",
-  secondary_800: "#080C19",
-  secondary_900: "#040815",
-};
+    primary_25: palette.primary_975,
+    primary_50: palette.primary_950,
+    primary_100: palette.primary_900,
+    primary_200: palette.primary_800,
+    primary_300: palette.primary_700,
+    primary_400: palette.primary_600,
+    primary_500: palette.primary_500,
+    primary_600: palette.primary_400,
+    primary_700: palette.primary_300,
+    primary_800: palette.primary_200,
+    primary_900: palette.primary_100,
+    primary_950: palette.primary_50,
+    primary_975: palette.primary_25,
+
+    positive_25: palette.positive_975,
+    positive_50: palette.positive_950,
+    positive_100: palette.positive_900,
+    positive_200: palette.positive_800,
+    positive_300: palette.positive_700,
+    positive_400: palette.positive_600,
+    positive_500: palette.positive_500,
+    positive_600: palette.positive_400,
+    positive_700: palette.positive_300,
+    positive_800: palette.positive_200,
+    positive_900: palette.positive_100,
+    positive_950: palette.positive_50,
+    positive_975: palette.positive_25,
+
+    negative_25: palette.negative_975,
+    negative_50: palette.negative_950,
+    negative_100: palette.negative_900,
+    negative_200: palette.negative_800,
+    negative_300: palette.negative_700,
+    negative_400: palette.negative_600,
+    negative_500: palette.negative_500,
+    negative_600: palette.negative_400,
+    negative_700: palette.negative_300,
+    negative_800: palette.negative_200,
+    negative_900: palette.negative_100,
+    negative_950: palette.negative_50,
+    negative_975: palette.negative_25,
+  };
+}

package/src/platform/index.ts

@@ -1,54 +1,14 @@
-import { type Platform } from "react-native";
+import { Platform } from "react-native";
+
+export const isIOS = Platform.OS === "ios";
+export const isAndroid = Platform.OS === "android";
+export const isNative = true;
 
-export const isIOS = false;
-export const isAndroid = false;
-export const isNative = false;
-export const isWeb = true;
 // @ts-ignore
 export const isFabric = Boolean(global?.nativeFabricUIManager);
 
-/**
- * Identity function on web. Returns nothing on other platforms.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export const web = (value: any) => (isWeb ? value : undefined);
-
-/**
- * Identity function on iOS. Returns nothing on other platforms.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
 export const ios = (value: any) => (isIOS ? value : undefined);
-
-/**
- * Identity function on Android. Returns nothing on other platforms..
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
 export const android = (value: any) => (isAndroid ? value : undefined);
-
-/**
- * Identity function on iOS and Android. Returns nothing on web.
- *
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
 export const native = (value: any) => (isNative ? value : undefined);
 
-/**
- * Note: Platform splitting does not tree-shake away the other platforms,
- * so don't do stuff like e.g. rely on platform-specific imports. Use
- * platform-split files instead.
- */
-export const platform = ((specifics) => {
-  // @ts-ignore
-  return specifics.web || specifics.default;
-}) as Platform["select"];
+export const platform = Platform.select;

package/src/themes.ts

@@ -0,0 +1,231 @@
+import { atoms } from "./atoms";
+import { alpha } from "./utils/alpha";
+
+import { Palette, DEFAULT_PALETTE, invertPalette } from "./palette";
+import { type ShadowStyle } from "./atoms/types";
+
+export const themes = createThemes({
+  defaultPalette: DEFAULT_PALETTE,
+});
+
+export type ThemeAtoms = {
+  text: {
+    color: string;
+  };
+  text_contrast_low: {
+    color: string;
+  };
+  text_contrast_medium: {
+    color: string;
+  };
+  text_contrast_high: {
+    color: string;
+  };
+  text_inverted: {
+    color: string;
+  };
+  bg: {
+    backgroundColor: string;
+  };
+  bg_contrast_25: {
+    backgroundColor: string;
+  };
+  bg_contrast_50: {
+    backgroundColor: string;
+  };
+  bg_contrast_100: {
+    backgroundColor: string;
+  };
+  bg_contrast_200: {
+    backgroundColor: string;
+  };
+  bg_contrast_300: {
+    backgroundColor: string;
+  };
+  bg_contrast_400: {
+    backgroundColor: string;
+  };
+  bg_contrast_500: {
+    backgroundColor: string;
+  };
+  bg_contrast_600: {
+    backgroundColor: string;
+  };
+  bg_contrast_700: {
+    backgroundColor: string;
+  };
+  bg_contrast_800: {
+    backgroundColor: string;
+  };
+  bg_contrast_900: {
+    backgroundColor: string;
+  };
+  bg_contrast_950: {
+    backgroundColor: string;
+  };
+  bg_contrast_975: {
+    backgroundColor: string;
+  };
+  border_contrast_low: {
+    borderColor: string;
+  };
+  border_contrast_medium: {
+    borderColor: string;
+  };
+  border_contrast_high: {
+    borderColor: string;
+  };
+  shadow_sm: ShadowStyle;
+  shadow_md: ShadowStyle;
+  shadow_lg: ShadowStyle;
+};
+
+/**
+ * Categorical representation of the theme
+ */
+export type ThemeScheme = "light" | "dark";
+
+/**
+ * Specific theme name, including low-contrast variants
+ */
+export type ThemeName = "light" | "dark";
+
+/**
+ * A theme object, containing the color palette and atoms for the theme
+ */
+export type Theme = {
+  scheme: ThemeScheme;
+  name: ThemeName;
+  palette: Palette;
+  atoms: ThemeAtoms;
+};
+
+export function createTheme({
+  scheme,
+  name,
+  palette,
+  options = {},
+}: {
+  scheme: ThemeScheme;
+  name: ThemeName;
+  palette: Palette;
+  options?: {
+    shadowOpacity?: number;
+  };
+}): Theme {
+  const shadowOpacity = options.shadowOpacity ?? 0.1;
+  const shadowColor = alpha(palette.black, shadowOpacity);
+  return {
+    scheme,
+    name,
+    palette,
+    atoms: {
+      text: {
+        color: palette.contrast_1000,
+      },
+      text_contrast_low: {
+        color: palette.contrast_400,
+      },
+      text_contrast_medium: {
+        color: palette.contrast_700,
+      },
+      text_contrast_high: {
+        color: palette.contrast_900,
+      },
+      text_inverted: {
+        color: palette.contrast_0,
+      },
+      bg: {
+        backgroundColor: palette.contrast_0,
+      },
+      bg_contrast_25: {
+        backgroundColor: palette.contrast_25,
+      },
+      bg_contrast_50: {
+        backgroundColor: palette.contrast_50,
+      },
+      bg_contrast_100: {
+        backgroundColor: palette.contrast_100,
+      },
+      bg_contrast_200: {
+        backgroundColor: palette.contrast_200,
+      },
+      bg_contrast_300: {
+        backgroundColor: palette.contrast_300,
+      },
+      bg_contrast_400: {
+        backgroundColor: palette.contrast_400,
+      },
+      bg_contrast_500: {
+        backgroundColor: palette.contrast_500,
+      },
+      bg_contrast_600: {
+        backgroundColor: palette.contrast_600,
+      },
+      bg_contrast_700: {
+        backgroundColor: palette.contrast_700,
+      },
+      bg_contrast_800: {
+        backgroundColor: palette.contrast_800,
+      },
+      bg_contrast_900: {
+        backgroundColor: palette.contrast_900,
+      },
+      bg_contrast_950: {
+        backgroundColor: palette.contrast_950,
+      },
+      bg_contrast_975: {
+        backgroundColor: palette.contrast_975,
+      },
+      border_contrast_low: {
+        borderColor: palette.contrast_100,
+      },
+      border_contrast_medium: {
+        borderColor: palette.contrast_200,
+      },
+      border_contrast_high: {
+        borderColor: palette.contrast_300,
+      },
+      shadow_sm: {
+        ...atoms.shadow_sm,
+        shadowColor: palette.black,
+        boxShadow: `0 4px 6px -1px ${shadowColor}, 0 2px 4px -2px ${shadowColor}`,
+      },
+      shadow_md: {
+        ...atoms.shadow_md,
+        shadowColor: palette.black,
+        boxShadow: `0 10px 15px -3px ${shadowColor}, 0 4px 6px -4px ${shadowColor}`,
+      },
+      shadow_lg: {
+        ...atoms.shadow_lg,
+        shadowColor: palette.black,
+        boxShadow: `0 20px 25px -5px ${shadowColor}, 0 8px 10px -6px ${shadowColor}`,
+      },
+    },
+  };
+}
+
+export function createThemes({ defaultPalette }: { defaultPalette: Palette }): {
+  light: Theme;
+  dark: Theme;
+} {
+  const light = createTheme({
+    scheme: "light",
+    name: "light",
+    palette: defaultPalette,
+  });
+
+  const dark = createTheme({
+    scheme: "dark",
+    name: "dark",
+    palette: invertPalette(defaultPalette),
+    options: {
+      shadowOpacity: 0.4,
+    },
+  });
+
+  return {
+    light,
+    dark,
+  };
+}

package/src/tokens.ts

@@ -38,6 +38,7 @@ export const borderRadius = {
   sm: 8,
   md: 12,
   lg: 16,
+  xl: 20,
   full: 999,
 } as const;
 

package/src/utils/index.ts

@@ -1,3 +1,7 @@
+import { StyleSheet } from "react-native";
+
 export * from "./alpha";
 export * from "./leading";
-export * from "./flatten";
+export * from "./select";
+
+export const flatten = StyleSheet.flatten;

package/src/utils/leading.ts

@@ -1,12 +1,10 @@
 import { type TextStyle } from "react-native";
 
-import { isWeb } from "../platform";
 import * as tokens from "../tokens";
 
 /**
  * Util to calculate lineHeight from a text size atom and a leading atom (which
- * are unitless). On native, this will evaluate to a rounded pixel value. On
- * web, it will be a unitless string.
+ * are unitless). this will evaluate to a rounded pixel value.
  *
  * Example:
  *   `leading({
@@ -17,14 +15,8 @@ import * as tokens from "../tokens";
 export function leading(textStyle: TextStyle): Pick<TextStyle, "lineHeight"> {
   const lineHeight = textStyle?.lineHeight || tokens.lineHeight.snug;
 
-  if (isWeb) {
-    return {
-      lineHeight: String(lineHeight) as unknown as TextStyle["lineHeight"],
-    };
-  } else {
-    const size = textStyle?.fontSize || tokens.fontSize.sm;
-    return {
-      lineHeight: Math.round(size * lineHeight),
-    };
-  }
+  const size = textStyle?.fontSize || tokens.fontSize.sm;
+  return {
+    lineHeight: Math.round(size * lineHeight),
+  };
 }

package/src/utils/select.ts

@@ -0,0 +1,17 @@
+import { type ThemeName } from "../themes";
+
+export function select<T>(
+  name: ThemeName,
+  options:
+    | (Record<ThemeName, T> & { default?: undefined })
+    | (Partial<Record<ThemeName, T>> & { default: T }),
+): T {
+  switch (name) {
+    case "light":
+      return options.light as T;
+    case "dark":
+      return options.dark as T;
+    default:
+      return options.default as T;
+  }
+}