@ankhorage/zora 0.16.1 → 1.0.0

package/src/internal/color/semanticTokens.ts

@@ -1,114 +0,0 @@
-import type { ZoraColorTone, ZoraHexColor, ZoraThemeMode } from '../../theme/types';
-import { parseHexToOklch } from './oklch';
-import { getZoraRoleColorScale, type ZoraComputedRoleColorScales } from './roleScales';
-
-export interface ZoraSemanticColorTokens {
-  background: ZoraHexColor;
-  surface: ZoraHexColor;
-  surfaceRaised: ZoraHexColor;
-  surfaceTint: ZoraHexColor;
-  border: ZoraHexColor;
-  text: ZoraHexColor;
-  textMuted: ZoraHexColor;
-  primary: ZoraHexColor;
-  secondary: ZoraHexColor;
-  accent: ZoraHexColor;
-  highlight: ZoraHexColor;
-  onPrimary: ZoraHexColor;
-  onAccent: ZoraHexColor;
-}
-
-/**
- * Selects the more readable of two candidate hex colors against a given background,
- * using OKLCH lightness as a simple contrast proxy.
- */
-export function getReadableTextColor(
-  background: ZoraHexColor,
-  candidates: readonly [ZoraHexColor, ZoraHexColor],
-): ZoraHexColor {
-  const bgL = parseHexToOklch(background).l;
-  const [a, b] = candidates;
-  const diffA = Math.abs(parseHexToOklch(a).l - bgL);
-  const diffB = Math.abs(parseHexToOklch(b).l - bgL);
-  return diffA >= diffB ? a : b;
-}
-
-export function createZoraSemanticColorTokens(options: {
-  roleScales: ZoraComputedRoleColorScales;
-  mode: ZoraThemeMode;
-  colorTone: ZoraColorTone;
-}): ZoraSemanticColorTokens {
-  // colorTone is accepted now and reserved for future per-tone step overrides
-  // (e.g. obsidian/pastel may shift surface selections differently).
-  const { roleScales, mode } = options;
-
-  const neutral = getZoraRoleColorScale(roleScales, 'neutral').scale;
-  const surfaceTintScale = getZoraRoleColorScale(roleScales, 'surfaceTint').scale;
-  const primaryScale = getZoraRoleColorScale(roleScales, 'primary').scale;
-  const secondaryScale = getZoraRoleColorScale(roleScales, 'secondary').scale;
-  const accentScale = getZoraRoleColorScale(roleScales, 'accent').scale;
-  const highlightScale = getZoraRoleColorScale(roleScales, 'highlight').scale;
-
-  if (mode === 'light') {
-    const background = neutral[50];
-    const surface = neutral[100];
-    const surfaceRaised = neutral[50];
-    const surfaceTint = surfaceTintScale[100];
-    const border = neutral[200];
-    const text = neutral[900];
-    const textMuted = neutral[700];
-    const primary = primaryScale[600];
-    const secondary = secondaryScale[600];
-    const accent = accentScale[600];
-    const highlight = highlightScale[600];
-    const onPrimary = getReadableTextColor(primary, [neutral[50], neutral[950]]);
-    const onAccent = getReadableTextColor(accent, [neutral[50], neutral[950]]);
-
-    return {
-      background,
-      surface,
-      surfaceRaised,
-      surfaceTint,
-      border,
-      text,
-      textMuted,
-      primary,
-      secondary,
-      accent,
-      highlight,
-      onPrimary,
-      onAccent,
-    };
-  }
-
-  // dark mode
-  const background = neutral[950];
-  const surface = neutral[900];
-  const surfaceRaised = neutral[800];
-  const surfaceTint = surfaceTintScale[900];
-  const border = neutral[700];
-  const text = neutral[50];
-  const textMuted = neutral[300];
-  const primary = primaryScale[400];
-  const secondary = secondaryScale[400];
-  const accent = accentScale[400];
-  const highlight = highlightScale[400];
-  const onPrimary = getReadableTextColor(primary, [neutral[50], neutral[950]]);
-  const onAccent = getReadableTextColor(accent, [neutral[50], neutral[950]]);
-
-  return {
-    background,
-    surface,
-    surfaceRaised,
-    surfaceTint,
-    border,
-    text,
-    textMuted,
-    primary,
-    secondary,
-    accent,
-    highlight,
-    onPrimary,
-    onAccent,
-  };
-}

package/src/internal/color/types.ts

@@ -1,15 +0,0 @@
-import type { ZoraHexColor } from '../../theme/types';
-
-export interface ZoraOklchColor {
-  l: number;
-  c: number;
-  h: number;
-}
-
-export const ZORA_COLOR_SCALE_STEPS = [
-  50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,
-] as const;
-
-export type ZoraColorScaleStep = (typeof ZORA_COLOR_SCALE_STEPS)[number];
-
-export type ZoraColorScale = Record<ZoraColorScaleStep, ZoraHexColor>;

package/src/patterns/theme-composer/recommendations.ts

@@ -1,85 +0,0 @@
-import type { ZoraHexColor, ZoraTheme } from '../../theme/types';
-import type {
-  ThemeComposerAppCategory,
-  ThemeComposerAppMood,
-  ThemeComposerRecommendation,
-} from './types';
-
-export function findThemeComposerRecommendation(options: {
-  appCategory?: ThemeComposerAppCategory;
-  appMood?: ThemeComposerAppMood;
-  recommendations?: readonly ThemeComposerRecommendation[];
-}): ThemeComposerRecommendation | undefined {
-  if (options.appCategory === undefined || options.recommendations === undefined) {
-    return undefined;
-  }
-
-  return options.recommendations.find(
-    (recommendation) =>
-      recommendation.appCategory === options.appCategory &&
-      (options.appMood === undefined || recommendation.appMood === options.appMood),
-  );
-}
-
-export function formatThemeComposerLabel(value: string): string {
-  const spaced = value
-    .replace(/_/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .trim();
-
-  if (spaced.length === 0) {
-    return value;
-  }
-
-  return `${spaced.slice(0, 1).toUpperCase()}${spaced.slice(1)}`;
-}
-
-export function hueDegreesToZoraHexColor(hueDegrees: number): ZoraHexColor {
-  const normalizedHue = ((hueDegrees % 360) + 360) % 360;
-  const chroma = 0.56;
-  const lightness = 0.46;
-  const second = chroma * (1 - Math.abs(((normalizedHue / 60) % 2) - 1));
-  const match = lightness - chroma / 2;
-
-  const hueSector = Math.floor(normalizedHue / 60);
-  const [redPrime, greenPrime, bluePrime] = (() => {
-    switch (hueSector) {
-      case 0:
-        return [chroma, second, 0] as const;
-      case 1:
-        return [second, chroma, 0] as const;
-      case 2:
-        return [0, chroma, second] as const;
-      case 3:
-        return [0, second, chroma] as const;
-      case 4:
-        return [second, 0, chroma] as const;
-      default:
-        return [chroma, 0, second] as const;
-    }
-  })();
-
-  const toHexChannel = (channel: number): string => {
-    const value = Math.round(Math.min(1, Math.max(0, channel + match)) * 255);
-    return value.toString(16).padStart(2, '0');
-  };
-
-  return `#${toHexChannel(redPrime)}${toHexChannel(greenPrime)}${toHexChannel(bluePrime)}`;
-}
-
-export function createThemeFromThemeComposerRecommendation(options: {
-  value: ZoraTheme;
-  recommendation: ThemeComposerRecommendation;
-}): ZoraTheme {
-  const suggestedPrimaryColor =
-    options.recommendation.suggestedPrimaryHueDegrees === undefined
-      ? options.value.primaryColor
-      : hueDegreesToZoraHexColor(options.recommendation.suggestedPrimaryHueDegrees);
-
-  return {
-    ...options.value,
-    primaryColor: suggestedPrimaryColor,
-    harmony: options.recommendation.suggestedHarmony,
-    colorTone: options.recommendation.suggestedColorTone,
-  };
-}