@tujyane/alf 1.0.0

package/src/themes.ts

@@ -0,0 +1,332 @@
+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 = {
+  // Base text colors (using primary neutral scale)
+  text: {
+    color: string;
+  };
+  text_low: {
+    color: string;
+  };
+  text_medium: {
+    color: string;
+  };
+  text_high: {
+    color: string;
+  };
+  text_inverted: {
+    color: string;
+  };
+
+  // Base backgrounds (using primary neutral scale)
+  bg: {
+    backgroundColor: string;
+  };
+  bg_25: {
+    backgroundColor: string;
+  };
+  bg_50: {
+    backgroundColor: string;
+  };
+
+  // Base borders (using primary neutral scale)
+  border_low: {
+    borderColor: string;
+  };
+  border_medium: {
+    borderColor: string;
+  };
+  border_high: {
+    borderColor: string;
+  };
+
+  // Semantic text atoms
+  text_primary: { color: string };
+  text_success: { color: string };
+  text_error: { color: string };
+  text_warning: { color: string };
+  text_info: { color: string };
+  text_secondary: { color: string };
+
+  // Semantic background atoms
+  bg_primary: { backgroundColor: string };
+  bg_success: { backgroundColor: string };
+  bg_error: { backgroundColor: string };
+  bg_warning: { backgroundColor: string };
+  bg_info: { backgroundColor: string };
+  bg_secondary: { backgroundColor: string };
+
+  // Semantic border atoms
+  border_primary: { borderColor: string };
+  border_success: { borderColor: string };
+  border_error: { borderColor: string };
+  border_warning: { borderColor: string };
+  border_info: { borderColor: string };
+  border_secondary: { borderColor: string };
+
+  // Shadows
+  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" | "dim";
+
+/**
+ * A theme object, containing the color palette and atoms for the theme
+ */
+export type Theme = {
+  scheme: ThemeScheme;
+  name: ThemeName;
+  palette: Palette;
+  semantic: SemanticColors;
+  atoms: ThemeAtoms;
+};
+
+export type ScaleSteps = {
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+
+export type SemanticColors = {
+  primary: ScaleSteps;
+  success: ScaleSteps;
+  error: ScaleSteps;
+  warning: ScaleSteps;
+  info: ScaleSteps;
+  secondary: ScaleSteps;
+};
+
+function buildDefaultSemantic(palette: Palette): SemanticColors {
+  return {
+    primary: {
+      100: palette.primary_100,
+      200: palette.primary_200,
+      300: palette.primary_300,
+      400: palette.primary_400,
+      500: palette.primary_500,
+      600: palette.primary_600,
+      700: palette.primary_700,
+      800: palette.primary_800,
+      900: palette.primary_900,
+    },
+    success: {
+      100: palette.positive_100,
+      200: palette.positive_200,
+      300: palette.positive_300,
+      400: palette.positive_400,
+      500: palette.positive_500,
+      600: palette.positive_600,
+      700: palette.positive_700,
+      800: palette.positive_800,
+      900: palette.positive_900,
+    },
+    error: {
+      100: palette.negative_100,
+      200: palette.negative_200,
+      300: palette.negative_300,
+      400: palette.negative_400,
+      500: palette.negative_500,
+      600: palette.negative_600,
+      700: palette.negative_700,
+      800: palette.negative_800,
+      900: palette.negative_900,
+    },
+    warning: {
+      100: palette.warning_100,
+      200: palette.warning_200,
+      300: palette.warning_300,
+      400: palette.warning_400,
+      500: palette.warning_500,
+      600: palette.warning_600,
+      700: palette.warning_700,
+      800: palette.warning_800,
+      900: palette.warning_900,
+    },
+    info: {
+      100: palette.info_100,
+      200: palette.info_200,
+      300: palette.info_300,
+      400: palette.info_400,
+      500: palette.info_500,
+      600: palette.info_600,
+      700: palette.info_700,
+      800: palette.info_800,
+      900: palette.info_900,
+    },
+    secondary: {
+      100: palette.secondary_100,
+      200: palette.secondary_200,
+      300: palette.secondary_300,
+      400: palette.secondary_400,
+      500: palette.secondary_500,
+      600: palette.secondary_600,
+      700: palette.secondary_700,
+      800: palette.secondary_800,
+      900: palette.secondary_900,
+    },
+  };
+}
+
+export function createTheme({
+  scheme,
+  name,
+  palette,
+  options = {},
+}: {
+  scheme: ThemeScheme;
+  name: ThemeName;
+  palette: Palette;
+  options?: {
+    shadowOpacity?: number;
+    semanticOverrides?: Partial<SemanticColors>;
+  };
+}): Theme {
+  const shadowOpacity = options.shadowOpacity ?? 0.1;
+  const shadowColor = alpha(palette.black, shadowOpacity);
+  const baseSemantic = buildDefaultSemantic(palette);
+  const semantic: SemanticColors = {
+    ...baseSemantic,
+    ...options.semanticOverrides,
+  } as SemanticColors;
+  return {
+    scheme,
+    name,
+    palette,
+    semantic,
+    atoms: {
+      // Base text colors using primary neutral (scheme-dependent)
+      text: {
+        color: scheme === "light" ? palette.primary_900 : palette.white,
+      },
+      text_low: {
+        color: scheme === "light" ? palette.primary_400 : palette.primary_300,
+      },
+      text_medium: {
+        color: scheme === "light" ? palette.primary_700 : palette.primary_200,
+      },
+      text_high: {
+        color: scheme === "light" ? palette.primary_900 : palette.primary_100,
+      },
+      text_inverted: {
+        color: scheme === "light" ? palette.white : palette.primary_900,
+      },
+
+      // Base backgrounds using primary neutral
+      bg: {
+        backgroundColor:
+          scheme === "light" ? palette.white : palette.primary_900,
+      },
+      bg_25: {
+        backgroundColor:
+          scheme === "light" ? palette.primary_25 : palette.primary_800,
+      },
+      bg_50: {
+        backgroundColor:
+          scheme === "light" ? palette.primary_50 : palette.primary_700,
+      },
+
+      // Base borders using primary neutral
+      border_low: {
+        borderColor:
+          scheme === "light" ? palette.primary_100 : palette.primary_700,
+      },
+      border_medium: {
+        borderColor:
+          scheme === "light" ? palette.primary_200 : palette.primary_600,
+      },
+      border_high: {
+        borderColor:
+          scheme === "light" ? palette.primary_300 : palette.primary_500,
+      },
+
+      // Semantic text atoms (900 for text)
+      text_primary: { color: semantic.primary[900] },
+      text_success: { color: semantic.success[900] },
+      text_error: { color: semantic.error[900] },
+      text_warning: { color: semantic.warning[900] },
+      text_info: { color: semantic.info[900] },
+      text_secondary: { color: semantic.secondary[900] },
+
+      // Semantic background atoms (500 for bg)
+      bg_primary: { backgroundColor: semantic.primary[500] },
+      bg_success: { backgroundColor: semantic.success[500] },
+      bg_error: { backgroundColor: semantic.error[500] },
+      bg_warning: { backgroundColor: semantic.warning[500] },
+      bg_info: { backgroundColor: semantic.info[500] },
+      bg_secondary: { backgroundColor: semantic.secondary[500] },
+
+      // Semantic border atoms (300 for border)
+      border_primary: { borderColor: semantic.primary[300] },
+      border_success: { borderColor: semantic.success[300] },
+      border_error: { borderColor: semantic.error[300] },
+      border_warning: { borderColor: semantic.warning[300] },
+      border_info: { borderColor: semantic.info[300] },
+      border_secondary: { borderColor: semantic.secondary[300] },
+
+      // Shadows
+      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

@@ -0,0 +1,54 @@
+export const TRACKING = 0;
+
+export const space = {
+  _2xs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  _2xl: 24,
+  _3xl: 28,
+  _4xl: 32,
+  _5xl: 40,
+} as const;
+
+export const fontSize = {
+  _2xs: 9.4,
+  xs: 11.3,
+  sm: 13.1,
+  md: 15,
+  lg: 16.9,
+  xl: 18.8,
+  _2xl: 20.6,
+  _3xl: 24.3,
+  _4xl: 30,
+  _5xl: 37.5,
+} as const;
+
+export const lineHeight = {
+  tight: 1.15,
+  snug: 1.3,
+  relaxed: 1.5,
+} as const;
+
+export const borderRadius = {
+  _2xs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  full: 999,
+} as const;
+
+export const fontWeight = {
+  normal: "400",
+  medium: "500",
+  semiBold: "600",
+  bold: "700",
+} as const;
+
+export const labelerColor = {
+  purple: "rgb(105 0 255)",
+  purple_dark: "rgb(83 0 202)",
+} as const;

package/src/utils/alpha.ts

@@ -0,0 +1,25 @@
+export function alpha(color: string, opacity: number) {
+  if (color.startsWith("hsl(")) {
+    return "hsla(" + color.slice("hsl(".length, -1) + `, ${opacity})`;
+  } else if (color.startsWith("rgb(")) {
+    return "rgba(" + color.slice("rgb(".length, -1) + `, ${opacity})`;
+  } else if (color.startsWith("#")) {
+    if (color.length === 7) {
+      const alphaHex = Math.round(opacity * 255).toString(16);
+      // Per MDN: If there is only one number, it is duplicated: e means ee
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
+      return color.slice(0, 7) + alphaHex.padStart(2, alphaHex);
+    } else if (color.length === 4) {
+      // convert to 6-digit hex before adding opacity
+      const hex = color.slice(1);
+      if (hex.length !== 3) return color;
+      const [r, g, b] = hex.split("") as [string, string, string];
+      const alphaHex = Math.round(opacity * 255).toString(16);
+      return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(
+        2,
+        alphaHex
+      )}`;
+    }
+  }
+  return color;
+}

package/src/utils/flatten/index.native.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from "react-native";
+
+export const flatten = StyleSheet.flatten;

package/src/utils/flatten/index.ts

@@ -0,0 +1,8 @@
+import { type StyleProp } from "react-native";
+
+export const flatten = <T>(
+  style: StyleProp<T>
+): T extends (infer U)[] ? U : T => {
+  const defs = ([] as any).concat(style);
+  return Object.assign({}, ...defs.filter(Boolean).flat());
+};

package/src/utils/flatten/index.web.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from "react-native";
+
+export const flatten = StyleSheet.flatten;

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from "./alpha";
+export * from "./leading";
+export * from "./flatten";
+export * from "./select";

package/src/utils/leading.ts

@@ -0,0 +1,30 @@
+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.
+ *
+ * Example:
+ *   `leading({
+ *     fontSize: 15,
+ *     lineHeight: 1.2
+ *   })` // => { lineHeight: 17 }
+ */
+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),
+    };
+  }
+}

package/src/utils/select.ts

@@ -0,0 +1,19 @@
+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;
+    case "dim":
+      return options.dim as T;
+    default:
+      return options.default as T;
+  }
+}