@celestia-island/hikari 0.4.4

package/src/theme/useSolarTime.ts

@@ -0,0 +1,101 @@
+import { scheduleCronAfter } from "../runtime/cronBus";
+
+export type TimePeriod = "day" | "dusk" | "night";
+
+const DEG = Math.PI / 180;
+const RAD = 180 / Math.PI;
+
+function toJulianDate(date: Date): number {
+  return date.getTime() / 86400000 + 2440587.5;
+}
+
+function greenwichSiderealTime(jd: number): number {
+  const T = (jd - 2451545.0) / 36525;
+  let theta = (280.46061837 + 360.98564736629 * (jd - 2451545.0) + 0.000387933 * T * T - T * T * T / 38710000) % 360;
+  if (theta < 0) theta += 360;
+  return theta;
+}
+
+interface SunEquatorial {
+  decl: number;
+  ra: number;
+}
+
+function sunEquatorialCoordinates(jd: number): SunEquatorial {
+  const T = (jd - 2451545.0) / 36525;
+  const L0 = (280.46646 + 36000.76983 * T) % 360;
+  const M = ((357.52911 + 35999.05029 * T) % 360) * DEG;
+  const C = (1.9146 - 0.004817 * T) * Math.sin(M) + (0.019993 - 0.000101 * T) * Math.sin(2 * M);
+  let sunLon = (L0 + C) % 360;
+  if (sunLon < 0) sunLon += 360;
+  const omega = (125.04 - 1934.136 * T) * DEG;
+  const lambda = sunLon * DEG - 0.00569 * DEG - 0.00478 * DEG * Math.sin(omega);
+  const epsilon = (23.439291 - 0.013004 * T) * DEG;
+  const decl = Math.asin(Math.sin(epsilon) * Math.sin(lambda));
+  const ra = Math.atan2(Math.cos(epsilon) * Math.sin(lambda), Math.cos(lambda));
+  return { decl, ra };
+}
+
+export function solarAltitude(
+  latDeg: number,
+  lngDeg: number,
+  date: Date,
+): number {
+  const jd = toJulianDate(date);
+  const { decl, ra } = sunEquatorialCoordinates(jd);
+  let haDeg = greenwichSiderealTime(jd) + lngDeg - ra * RAD;
+  haDeg = (((haDeg + 180) % 360) + 360) % 360 - 180;
+  const ha = haDeg * DEG;
+  const lat = latDeg * DEG;
+  const alt = Math.asin(
+    Math.sin(lat) * Math.sin(decl) + Math.cos(lat) * Math.cos(decl) * Math.cos(ha),
+  );
+  return alt * RAD;
+}
+
+export function getTimePeriod(
+  latDeg: number,
+  lngDeg: number,
+  date: Date = new Date(),
+): TimePeriod {
+  const alt = solarAltitude(latDeg, lngDeg, date);
+  if (alt > 6) return "day";
+  if (alt > -6) return "dusk";
+  return "night";
+}
+
+export const DEFAULT_GEO_LOCATION = { lat: 31.23, lng: 121.47 };
+
+const GEO_API_URL = "https://ipapi.co/json/";
+const GEO_API_TIMEOUT_MS = 4000;
+
+function timezoneFallback(): { lat: number; lng: number } {
+  const offsetMin = -new Date().getTimezoneOffset();
+  const lng = offsetMin / 4;
+  return { lat: DEFAULT_GEO_LOCATION.lat, lng };
+}
+
+export function getGeolocation(): Promise<{ lat: number; lng: number }> {
+  const controller = new AbortController();
+  const timer = scheduleCronAfter(() => controller.abort(), GEO_API_TIMEOUT_MS);
+  return fetch(GEO_API_URL, { signal: controller.signal, cache: "no-store" })
+    .then((r) => (r.ok ? r.json() : null))
+    .then(
+      (d: { latitude?: number; longitude?: number } | null) => {
+        timer.disconnect();
+        if (
+          d &&
+          typeof d.latitude === "number" &&
+          typeof d.longitude === "number" &&
+          (Math.abs(d.latitude) > 0.01 || Math.abs(d.longitude) > 0.01)
+        ) {
+          return { lat: d.latitude, lng: d.longitude };
+        }
+        return timezoneFallback();
+      },
+      () => {
+        timer.disconnect();
+        return timezoneFallback();
+      },
+    );
+}

package/src/theme/useTheme.ts

@@ -0,0 +1,141 @@
+import { computed, ref, watch } from "vue";
+
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import { addCustomTheme as addCustomThemeToStorage, loadCustomThemes, removeCustomTheme as removeCustomThemeFromStorage, themePresets, tokensToCSSVars, type CustomThemePreset, type ThemeId, type ThemeMode, type ThemePreset } from "./presets";
+import { invalidateLuminanceCache } from "./useBackgroundLuminance";
+import { getTimePeriod, DEFAULT_GEO_LOCATION, type TimePeriod } from "./useSolarTime";
+
+const DEFAULT_THEME = "synthwave84";
+const STORAGE_THEME_KEY = "hikari-theme";
+const STORAGE_MODE_KEY = "hikari-theme-mode";
+
+const currentTheme = ref<ThemeId>(
+  localStorage.getItem(STORAGE_THEME_KEY) || DEFAULT_THEME,
+);
+const currentMode = ref<ThemeMode>(
+  (localStorage.getItem(STORAGE_MODE_KEY) as ThemeMode) || "system",
+);
+const customThemes = ref<CustomThemePreset[]>(loadCustomThemes());
+
+const currentPeriod = ref<TimePeriod>(
+  getTimePeriod(DEFAULT_GEO_LOCATION.lat, DEFAULT_GEO_LOCATION.lng),
+);
+
+let initialized = false;
+
+function resolveEffectiveMode(mode: ThemeMode): "dark" | "light" {
+  if (mode === "system") {
+    return currentPeriod.value === "day" ? "light" : "dark";
+  }
+  return mode;
+}
+
+const THEME_TRANSITION_DURATION = 300;
+let transitionTimer: CronHandle | null = null;
+
+function applyTheme() {
+  const el = document.documentElement;
+  const all = getAllThemePresets();
+  const preset = all[currentTheme.value];
+  if (!preset) return;
+
+  el.classList.add("s-theme-transitioning");
+
+  const effectiveMode = resolveEffectiveMode(currentMode.value);
+  const tokens = effectiveMode === "dark" ? preset.dark : preset.light;
+  const vars = tokensToCSSVars(tokens);
+
+  invalidateLuminanceCache();
+
+  for (const [key, value] of Object.entries(vars)) {
+    el.style.setProperty(key, value);
+  }
+
+  el.setAttribute("data-theme", currentTheme.value);
+  el.setAttribute("data-mode", effectiveMode);
+
+  transitionTimer?.disconnect();
+  transitionTimer = scheduleCronAfter(() => {
+    el.classList.remove("s-theme-transitioning");
+    transitionTimer = null;
+  }, THEME_TRANSITION_DURATION);
+}
+
+function getAllThemePresets(): Record<string, ThemePreset> {
+  const result: Record<string, ThemePreset> = { ...themePresets };
+  for (const ct of customThemes.value) {
+    result[ct.id] = ct;
+  }
+  return result;
+}
+
+export function initTheme() {
+  if (initialized) return;
+  initialized = true;
+  const storedMode = localStorage.getItem(STORAGE_MODE_KEY) as ThemeMode | null;
+  if (storedMode === "dark" || storedMode === "light") {
+    currentMode.value = storedMode;
+  }
+  applyTheme();
+}
+
+export function useTheme() {
+  const effectiveMode = computed(() => resolveEffectiveMode(currentMode.value));
+
+  const allThemeList = computed(() => {
+    const builtIn = (Object.keys(themePresets) as string[]).map((id) => ({
+      id,
+      name: themePresets[id as keyof typeof themePresets].name,
+      isCustom: false,
+    }));
+    const custom = customThemes.value.map((ct) => ({
+      id: ct.id,
+      name: ct.name,
+      isCustom: true,
+    }));
+    return [...builtIn, ...custom];
+  });
+
+  function setTheme(id: ThemeId) {
+    currentTheme.value = id;
+    localStorage.setItem(STORAGE_THEME_KEY, id);
+    applyTheme();
+  }
+
+  function setMode(mode: ThemeMode) {
+    currentMode.value = mode;
+    localStorage.setItem(STORAGE_MODE_KEY, mode);
+    applyTheme();
+  }
+
+  function toggleMode() {
+    setMode(effectiveMode.value === "dark" ? "light" : "dark");
+  }
+
+  function addCustomTheme(theme: CustomThemePreset) {
+    addCustomThemeToStorage(theme);
+    customThemes.value = loadCustomThemes();
+  }
+
+  function removeCustomTheme(id: string) {
+    removeCustomThemeFromStorage(id);
+    customThemes.value = loadCustomThemes();
+    if (currentTheme.value === id) {
+      setTheme(DEFAULT_THEME);
+    }
+  }
+
+  return {
+    currentTheme,
+    currentMode,
+    effectiveMode,
+    setTheme,
+    setMode,
+    toggleMode,
+    presets: themePresets,
+    allThemeList,
+    customThemes,
+    addCustomTheme,
+    removeCustomTheme,
+  };
+}

package/src/tokens.scss

@@ -0,0 +1,26 @@
+/* hikari color aliases — fallback values for theme tokens.
+   These CSS variables are used by hikari components (HkButton, HkCard,
+   HkInput, HkSelect, etc.) and are expected to be overridden by
+   consuming apps via initTheme() or custom theme CSS. */
+:root {
+  --c-primary-faint: rgb(var(--color-primary, 122 162 247) / 5%);
+  --c-primary-subtle: rgb(var(--color-primary, 122 162 247) / 8%);
+  --c-primary-dim: rgb(var(--color-primary, 122 162 247) / 10%);
+  --c-primary-light: rgb(var(--color-primary, 122 162 247) / 15%);
+  --c-primary-overlay: rgb(var(--color-primary, 122 162 247) / 15%);
+  --c-primary-medium: rgb(var(--color-primary, 122 162 247) / 25%);
+  --c-primary-strong: rgb(var(--color-primary, 122 162 247) / 40%);
+  --c-primary-intense: rgb(var(--color-primary, 122 162 247) / 40%);
+  --c-error-dim: rgb(var(--color-error, 247 118 142) / 10%);
+  --c-error-overlay: rgb(var(--color-error, 247 118 142) / 20%);
+  --c-error-strong: rgb(var(--color-error, 247 118 142) / 50%);
+  --shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);
+  --shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);
+  --shadow-button: 0 4px 14px rgb(var(--color-primary, 122 162 247) / 35%);
+  --shadow-button-danger: 0 4px 14px rgb(var(--color-error, 247 118 142) / 35%);
+  --shadow-focus: 0 0 0 3px rgb(var(--color-primary, 122 162 247) / 12%);
+  --shadow-focus-error: 0 0 0 3px rgb(var(--color-error, 247 118 142) / 12%);
+  --border-input: rgb(var(--color-border, 100 100 100) / 15%);
+  --border-faint: rgb(var(--color-border, 100 100 100) / 10%);
+  --border-subtle: rgb(var(--color-border, 100 100 100) / 12%);
+}