@tujyane/alf 1.0.4 → 1.2.0

package/src/themes.ts

@@ -1,332 +0,0 @@
-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";
-
-/**
- * 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/utils/select.ts

@@ -1,17 +0,0 @@
-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;
-  }
-}