@tujyane/alf 1.0.0

package/src/atoms/index.native.ts

@@ -0,0 +1,84 @@
+import { StyleSheet } from "react-native";
+
+import * as common from "./common";
+import { ios, isFabric } from "../platform";
+
+export const atoms = {
+  ...common.atoms,
+  fixed: {
+    position: "absolute",
+  },
+  sticky: {},
+  overflow_auto: {},
+  flex_0: {
+    flex: 0,
+  },
+  border: {
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  border_t: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  border_b: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  border_l: {
+    borderLeftWidth: StyleSheet.hairlineWidth,
+  },
+  border_r: {
+    borderRightWidth: StyleSheet.hairlineWidth,
+  },
+  border_x: {
+    borderLeftWidth: StyleSheet.hairlineWidth,
+    borderRightWidth: StyleSheet.hairlineWidth,
+  },
+  border_y: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  border_transparent: {
+    borderColor: "transparent",
+  },
+  curve_circular: ios({
+    borderCurve: "circular",
+  }),
+  curve_continuous: ios({
+    borderCurve: "continuous",
+  }),
+  shadow_sm: isFabric
+    ? {}
+    : {
+        shadowRadius: 4,
+        shadowOpacity: 0.1,
+        elevation: 8,
+        shadowOffset: {
+          width: 0,
+          height: 4,
+        },
+      },
+  shadow_md: isFabric
+    ? {}
+    : {
+        shadowRadius: 8,
+        shadowOpacity: 0.1,
+        elevation: 16,
+        shadowOffset: {
+          width: 0,
+          height: 8,
+        },
+      },
+  shadow_lg: isFabric
+    ? {}
+    : {
+        shadowRadius: 16,
+        shadowOpacity: 0.1,
+        elevation: 32,
+        shadowOffset: {
+          width: 0,
+          height: 16,
+        },
+      },
+  inline: {},
+  block: {},
+  pointer: {},
+} as const;

package/src/atoms/index.ts

@@ -0,0 +1 @@
+export * from "./common";

package/src/atoms/types.ts

@@ -0,0 +1,11 @@
+import { type ViewStyle } from "react-native";
+
+export type ShadowStyle = Pick<
+  ViewStyle,
+  | "shadowColor"
+  | "shadowOpacity"
+  | "shadowRadius"
+  | "elevation"
+  | "shadowOffset"
+  | "boxShadow"
+>;

package/src/index.tsx

@@ -0,0 +1,46 @@
+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 "./themes";
+export * from "./platform";
+export * as tokens from "./tokens";
+export * as utils from "./utils";
+
+export type TextStyleProp = {
+  style?: StyleProp<TextStyle>;
+};
+
+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

@@ -0,0 +1,237 @@
+export type Palette = {
+  white: string;
+  black: string;
+  like: string;
+
+  primary_25: string;
+  primary_50: string;
+  primary_100: string;
+  primary_200: string;
+  primary_300: string;
+  primary_400: string;
+  primary_500: string;
+  primary_600: string;
+  primary_700: string;
+  primary_800: string;
+  primary_900: string;
+
+  positive_25: string;
+  positive_50: string;
+  positive_100: string;
+  positive_200: string;
+  positive_300: string;
+  positive_400: string;
+  positive_500: string;
+  positive_600: string;
+  positive_700: string;
+  positive_800: string;
+  positive_900: string;
+  positive_950: string;
+  positive_975: string;
+
+  negative_25: string;
+  negative_50: string;
+  negative_100: string;
+  negative_200: string;
+  negative_300: string;
+  negative_400: string;
+  negative_500: string;
+  negative_600: string;
+  negative_700: string;
+  negative_800: string;
+  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 DEFAULT_PALETTE: Palette = {
+  white: "#FFFFFF",
+  black: "#000000",
+  like: "#EC4899",
+
+  // Primary
+  primary_25: "#F9FAFB",
+  primary_50: "#EFF2F6",
+  primary_100: "#0E64FD",
+  primary_200: "#AC58FC",
+  primary_300: "#834875",
+  primary_400: "#853671",
+  primary_500: "#356353",
+  primary_600: "#264626",
+  primary_700: "#143747",
+  primary_800: "#102537",
+  primary_900: "#04060F",
+
+  // Success
+  positive_25: "#ECFEF5",
+  positive_50: "#D3FDE8",
+  positive_100: "#F9FC02",
+  positive_200: "#EBAA6",
+  positive_300: "#03F179",
+  positive_400: "#1C1445",
+  positive_500: "#2C0323",
+  positive_600: "#778519",
+  positive_700: "#858711",
+  positive_800: "#407008",
+  positive_900: "#886506",
+  positive_950: "#032A17",
+  positive_975: "#021D0F",
+
+  // Error
+  negative_25: "#FFF5F7",
+  negative_50: "#FEE7EC",
+  negative_100: "#FFD73",
+  negative_200: "#FC646",
+  negative_300: "#F74274",
+  negative_400: "#FF7559",
+  negative_500: "#F74423",
+  negative_600: "#0B2799",
+  negative_700: "#871112",
+  negative_800: "#930118",
+  negative_900: "#7A0619",
+  negative_950: "#430413",
+  negative_975: "#30030D",
+
+  // Warning
+  warning_100: "#FFE207",
+  warning_200: "#7FEF80",
+  warning_300: "#F16486",
+  warning_400: "#F03688",
+  warning_500: "#FFC72A",
+  warning_600: "#0F432A",
+  warning_700: "#973210",
+  warning_800: "#953213",
+  warning_900: "#7A0108",
+
+  // Info
+  info_100: "#0C53FF",
+  info_200: "#BA85FF",
+  info_300: "#9603FF",
+  info_400: "#7EC2FF",
+  info_500: "#5448FF",
+  info_600: "#258058",
+  info_700: "#2A4669",
+  info_800: "#144393",
+  info_900: "#1032FA",
+
+  // Secondary
+  secondary_100: "#EC6744",
+  secondary_200: "#C52463",
+  secondary_300: "#00438F",
+  secondary_400: "#569750",
+  secondary_500: "#F450CC",
+  secondary_600: "#131835",
+  secondary_700: "#DD171F",
+  secondary_800: "#05CC19",
+  secondary_900: "#640815",
+};
+
+export function invertPalette(palette: Palette): Palette {
+  return {
+    white: palette.white,
+    black: palette.black,
+    like: palette.like,
+
+    primary_25: palette.primary_50,
+    primary_50: palette.primary_25,
+    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,
+
+    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,
+
+    // New scales invert
+    warning_100: palette.warning_900,
+    warning_200: palette.warning_800,
+    warning_300: palette.warning_700,
+    warning_400: palette.warning_600,
+    warning_500: palette.warning_500,
+    warning_600: palette.warning_400,
+    warning_700: palette.warning_300,
+    warning_800: palette.warning_200,
+    warning_900: palette.warning_100,
+
+    info_100: palette.info_900,
+    info_200: palette.info_800,
+    info_300: palette.info_700,
+    info_400: palette.info_600,
+    info_500: palette.info_500,
+    info_600: palette.info_400,
+    info_700: palette.info_300,
+    info_800: palette.info_200,
+    info_900: palette.info_100,
+
+    secondary_100: palette.secondary_900,
+    secondary_200: palette.secondary_800,
+    secondary_300: palette.secondary_700,
+    secondary_400: palette.secondary_600,
+    secondary_500: palette.secondary_500,
+    secondary_600: palette.secondary_400,
+    secondary_700: palette.secondary_300,
+    secondary_800: palette.secondary_200,
+    secondary_900: palette.secondary_100,
+  };
+}

package/src/platform/index.native.ts

@@ -0,0 +1,16 @@
+import { Platform } from "react-native";
+
+export const isIOS = Platform.OS === "ios";
+export const isAndroid = Platform.OS === "android";
+export const isNative = true;
+export const isWeb = false;
+
+// @ts-ignore
+export const isFabric = Boolean(global?.nativeFabricUIManager);
+
+export const web = (value: any) => (isWeb ? value : undefined);
+export const ios = (value: any) => (isIOS ? value : undefined);
+export const android = (value: any) => (isAndroid ? value : undefined);
+export const native = (value: any) => (isNative ? value : undefined);
+
+export const platform = Platform.select;

package/src/platform/index.ts

@@ -0,0 +1,54 @@
+import { type Platform } from "react-native";
+
+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"];