@agent-facets/brand 0.1.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@agent-facets/brand",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ex-machina-co/facets",
+    "directory": "packages/brand"
+  },
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "types": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "devDependencies": {
+    "@types/bun": "1.3.10"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  }
+}

package/src/__tests__/colors.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from 'bun:test'
+import { BRAND, BRIGHTNESS, hexToRgb, PALETTE } from '../colors.ts'
+
+test('hexToRgb parses brand purple', () => {
+  expect(hexToRgb(BRAND.purple)).toEqual([167, 139, 250])
+})
+
+test('hexToRgb parses brand green', () => {
+  expect(hexToRgb(BRAND.green)).toEqual([66, 205, 170])
+})
+
+test('hexToRgb parses brand coral', () => {
+  expect(hexToRgb(BRAND.coral)).toEqual([250, 139, 141])
+})
+
+test('PALETTE violet400 matches BRAND purple', () => {
+  expect(PALETTE.violet400).toBe(BRAND.purple)
+})
+
+test('BRIGHTNESS has dim and dimmer values', () => {
+  expect(BRIGHTNESS.dim).toBe('#666666')
+  expect(BRIGHTNESS.dimmer).toBe('#999999')
+})

package/src/colors.ts

@@ -0,0 +1,37 @@
+/**
+ * Core brand colors — derived from the facet.svg icon.
+ */
+export const BRAND = {
+  purple: '#A78BFA',
+  green: '#42CDAA',
+  coral: '#FA8B8D',
+  dark: '#1F1F28',
+} as const
+
+/**
+ * Extended palette — includes docs/marketing variants.
+ */
+export const PALETTE = {
+  violet400: '#A78BFA',
+  violet700: '#6D28D9',
+  violet900: '#4C1D95',
+  green: '#42CDAA',
+  coral: '#FA8B8D',
+  dark: '#1F1F28',
+} as const
+
+/**
+ * Text brightness scale.
+ */
+export const BRIGHTNESS = {
+  dim: '#666666',
+  dimmer: '#999999',
+} as const
+
+/**
+ * Parse a hex color string into an RGB tuple.
+ */
+export function hexToRgb(hex: string): readonly [number, number, number] {
+  const h = hex.replace('#', '')
+  return [parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16), parseInt(h.substring(4, 6), 16)] as const
+}

package/src/gradient.ts

@@ -0,0 +1,48 @@
+import { THEME } from './theme.ts'
+
+/** Fixed number of gradient stops — ensures consistent animation speed regardless of text length */
+const GRADIENT_STOP_COUNT = 32
+
+function toHex(r: number, g: number, b: number): string {
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}
+
+function lerpRgb(
+  a: readonly [number, number, number],
+  b: readonly [number, number, number],
+  t: number,
+): [number, number, number] {
+  return [
+    Math.round(a[0] + (b[0] - a[0]) * t),
+    Math.round(a[1] + (b[1] - a[1]) * t),
+    Math.round(a[2] + (b[2] - a[2]) * t),
+  ]
+}
+
+/** Pre-computed gradient loop with fixed stop count for consistent animation */
+function generateGradientLoop(): string[] {
+  const [colorA, colorB, colorC] = THEME.gradientRGB
+  const colors: string[] = []
+  for (let i = 0; i < GRADIENT_STOP_COUNT; i++) {
+    const segment = ((i / GRADIENT_STOP_COUNT) * 3) % 3
+    let rgb: [number, number, number]
+    if (segment < 1) {
+      rgb = lerpRgb(colorA, colorB, segment)
+    } else if (segment < 2) {
+      rgb = lerpRgb(colorB, colorC, segment - 1)
+    } else {
+      rgb = lerpRgb(colorC, colorA, segment - 2)
+    }
+    colors.push(toHex(...rgb))
+  }
+  return colors
+}
+
+/** Pre-computed stops — shared by all animated gradients */
+export const GRADIENT_STOPS = generateGradientLoop()
+
+/** Get the gradient colors at a given offset for animation */
+export function getAnimatedGradient(offset: number): string[] {
+  const i = offset % GRADIENT_STOPS.length
+  return [...GRADIENT_STOPS.slice(i), ...GRADIENT_STOPS.slice(0, i)]
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { BRAND, BRIGHTNESS, hexToRgb, PALETTE } from './colors.ts'
+export { GRADIENT_STOPS, getAnimatedGradient } from './gradient.ts'
+export { THEME } from './theme.ts'

package/src/theme.ts

@@ -0,0 +1,26 @@
+import { BRAND, BRIGHTNESS, hexToRgb } from './colors.ts'
+
+/**
+ * Semantic theme — all values are references to brand constants.
+ * Consumers should use THEME, not the raw color constants.
+ */
+export const THEME = {
+  // Brand hierarchy
+  primary: BRAND.purple,
+  secondary: BRAND.green,
+  tertiary: BRAND.coral,
+  brand: BRAND.purple,
+  dark: BRAND.dark,
+
+  // Semantic aliases (can diverge from brand later)
+  success: BRAND.green,
+  warning: BRAND.coral,
+
+  // Text — structural
+  hint: BRIGHTNESS.dim,
+  keyword: BRIGHTNESS.dimmer,
+
+  // Three-color gradient: purple → teal → coral
+  gradient: [BRAND.purple, BRAND.green, BRAND.coral] as const,
+  gradientRGB: [hexToRgb(BRAND.purple), hexToRgb(BRAND.green), hexToRgb(BRAND.coral)] as const,
+} as const

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}