@opencode-ai/ui 0.0.0-beta-202606251302

package/src/theme/v2/resolve.ts

@@ -0,0 +1,153 @@
+// @refresh reload
+
+import { generateNeutralScale, hexToOklch, oklchToHex, shift } from "../color"
+import { mapV2Foreground } from "./foreground"
+import { mapV2Semantics, mergeV2Tokens } from "./mapping"
+import type { DesktopTheme, HexColor, ResolvedV2Theme, ThemeVariant, V2ColorValue } from "../types"
+import { V2_PRIMITIVES_DEFAULT } from "./default-primitives"
+
+const V2_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
+
+interface PaletteInput {
+  neutral: HexColor
+  ink: HexColor
+  primary: HexColor
+  accent: HexColor
+  success: HexColor
+  warning: HexColor
+  error: HexColor
+  info: HexColor
+  interactive: HexColor
+  diffAdd: HexColor
+  diffDelete: HexColor
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v))
+}
+
+/** v2 ramps: 100 = lightest, 1200 = darkest — wider spread than v1 `generateScale`. */
+function generateV2HueScale(seed: HexColor, isDark: boolean): HexColor[] {
+  const base = hexToOklch(seed)
+  const chromaBoost = isDark ? 1 : 1.05
+  const lightSteps = [
+    0.99,
+    0.965,
+    0.93,
+    0.885,
+    0.835,
+    clamp(base.l, 0.48, 0.72),
+    clamp(base.l - 0.07, 0.4, 0.64),
+    clamp(base.l - 0.14, 0.32, 0.55),
+    clamp(base.l - 0.21, 0.24, 0.46),
+    clamp(base.l - 0.28, 0.17, 0.38),
+    clamp(base.l - 0.34, 0.12, 0.3),
+    clamp(base.l - 0.4, 0.08, 0.22),
+  ]
+  const chromaMultipliers = [0.28, 0.48, 0.68, 0.86, 1.02, 1.28, 1.34, 1.28, 1.18, 1.08, 0.98, 0.88]
+
+  return lightSteps.map((l, i) =>
+    oklchToHex({
+      l,
+      c: base.c * chromaMultipliers[i]! * chromaBoost,
+      h: base.h,
+    }),
+  )
+}
+
+/** Grey ramp: 100 = lightest, 1200 = darkest. Derived from palette neutral → ink like v1. */
+function generateV2NeutralScale(neutral: HexColor, ink: HexColor, isDark: boolean): HexColor[] {
+  const scale = generateNeutralScale(neutral, isDark, ink)
+  return isDark ? scale.toReversed() : scale
+}
+
+function assignHueRamp(prefix: string, scale: HexColor[]): Record<string, V2ColorValue> {
+  const tokens: Record<string, V2ColorValue> = {}
+  for (let i = 0; i < V2_STEPS.length; i++) {
+    tokens[`v2-${prefix}-${V2_STEPS[i]}`] = scale[i]!
+  }
+  return tokens
+}
+
+function readPalette(variant: ThemeVariant): PaletteInput {
+  if ("palette" in variant && variant.palette) {
+    const palette = variant.palette
+    return {
+      neutral: palette.neutral,
+      ink: palette.ink,
+      primary: palette.primary,
+      accent: palette.accent ?? palette.info,
+      success: palette.success,
+      warning: palette.warning,
+      error: palette.error,
+      info: palette.info,
+      interactive: palette.interactive ?? palette.primary,
+      diffAdd: palette.diffAdd ?? shift(palette.success, { c: 0.55, l: 0.14 }),
+      diffDelete: palette.diffDelete ?? palette.error,
+    }
+  }
+  if ("seeds" in variant && variant.seeds) {
+    const seeds = variant.seeds
+    return {
+      neutral: seeds.neutral,
+      ink: seeds.neutral,
+      primary: seeds.primary,
+      accent: seeds.info,
+      success: seeds.success,
+      warning: seeds.warning,
+      error: seeds.error,
+      info: seeds.info,
+      interactive: seeds.interactive,
+      diffAdd: seeds.diffAdd,
+      diffDelete: seeds.diffDelete,
+    }
+  }
+  throw new Error("Theme variant requires `palette` or `seeds`")
+}
+
+/** Build v2 primitive ramps (100 = lightest). Alpha ramps are static in `v2/styles/colors.css`. */
+export function generateV2Primitives(variant: ThemeVariant, isDark: boolean): Record<string, V2ColorValue> {
+  const colors = readPalette(variant)
+  const grey = generateV2NeutralScale(colors.neutral, colors.ink, isDark)
+  const blue = generateV2HueScale(colors.interactive, isDark)
+  const green = generateV2HueScale(colors.success, isDark)
+  const yellow = generateV2HueScale(colors.warning, isDark)
+  const red = generateV2HueScale(colors.error, isDark)
+  const purple = generateV2HueScale(colors.accent, isDark)
+  const pink = generateV2HueScale(colors.info, isDark)
+  const orange = generateV2HueScale(shift(colors.warning, { h: -22, l: -0.082, c: 0.94 }), isDark)
+  const cyan = generateV2HueScale(shift(colors.info, { h: -12, l: 0.128, c: 1.12 }), isDark)
+
+  return {
+    ...V2_PRIMITIVES_DEFAULT,
+    ...assignHueRamp("grey", grey),
+    ...assignHueRamp("blue", blue),
+    ...assignHueRamp("green", green),
+    ...assignHueRamp("yellow", yellow),
+    ...assignHueRamp("red", red),
+    ...assignHueRamp("purple", purple),
+    ...assignHueRamp("pink", pink),
+    ...assignHueRamp("orange", orange),
+    ...assignHueRamp("cyan", cyan),
+  }
+}
+
+export function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): ResolvedV2Theme {
+  const primitives = generateV2Primitives(variant, isDark)
+  const semantics = mapV2Semantics(isDark)
+  const foreground = mapV2Foreground(readPalette(variant).ink, isDark, primitives, variant.overrides)
+  return mergeV2Tokens(primitives, semantics, foreground, variant.v2Overrides ?? {})
+}
+
+export function resolveThemeV2(theme: DesktopTheme): { light: ResolvedV2Theme; dark: ResolvedV2Theme } {
+  return {
+    light: resolveThemeVariantV2(theme.light, false),
+    dark: resolveThemeVariantV2(theme.dark, true),
+  }
+}
+
+export function themeV2ToCss(tokens: ResolvedV2Theme): string {
+  return Object.entries(tokens)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join("\n  ")
+}

package/src/v2/components/accordion-v2.css

@@ -0,0 +1,139 @@
+[data-component="accordion-v2"] {
+  --accordion-v2-fg: var(--v2-text-text-base);
+  --accordion-v2-icon: var(--v2-icon-icon-base);
+  --accordion-v2-border: var(--v2-border-border-strong);
+  --accordion-v2-bg: var(--v2-background-bg-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
+  overflow: hidden;
+
+  color: var(--accordion-v2-fg);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="accordion-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-item"]:last-child {
+  box-shadow: none;
+}
+
+[data-slot="accordion-v2-header"] {
+  display: flex;
+  margin: 0;
+}
+
+[data-component="accordion-v2-trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  width: 100%;
+  min-height: 30px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--accordion-v2-fg);
+  text-align: left;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accordion-v2-icon);
+  transition: transform 150ms ease;
+}
+
+[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-trigger"][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-component="accordion-v2-content"] {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 140%;
+  color: var(--accordion-v2-fg);
+}
+
+[data-component="accordion-v2-content"][data-expanded] {
+  animation: accordion-v2-down 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"][data-closed] {
+  animation: accordion-v2-up 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding: 12px;
+}
+
+@keyframes accordion-v2-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes accordion-v2-up {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/v2/components/accordion-v2.tsx

@@ -0,0 +1,86 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
+import "./accordion-v2.css"
+
+const ChevronDown: Component = () => (
+  <svg
+    data-slot="accordion-v2-chevron"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
+  </svg>
+)
+
+export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
+export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideChevron?: boolean
+}
+export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
+}
+
+function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...r}
+      data-component="accordion-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      {s.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
+  return (
+    <Kobalte.Trigger
+      {...r}
+      data-component="accordion-v2-trigger"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
+      <Show when={!s.hideChevron}>
+        <ChevronDown />
+      </Show>
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...r}
+      data-component="accordion-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <div data-slot="accordion-v2-content-inner">{s.children}</div>
+    </Kobalte.Content>
+  )
+}
+
+export const AccordionV2 = Object.assign(AccordionV2Root, {
+  Item: AccordionV2Item,
+  Header: AccordionV2Header,
+  Trigger: AccordionV2Trigger,
+  Content: AccordionV2Content,
+})

package/src/v2/components/avatar-v2.css

@@ -0,0 +1,70 @@
+[data-component="avatar-v2"] {
+  --avatar-bg: var(--v2-background-bg-layer-02);
+  --avatar-fg: var(--v2-text-text-muted);
+  --avatar-radius: 9999px;
+  --avatar-font-size: 11px;
+  --avatar-tracking: 0.05px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--avatar-radius);
+  border: 0.5px solid var(--v2-border-border-base);
+  font-weight: 530;
+  font-size: var(--avatar-font-size);
+  line-height: 1;
+  letter-spacing: var(--avatar-tracking);
+  text-transform: uppercase;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-fg);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-component="avatar-v2"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%);
+  pointer-events: none;
+}
+
+[data-component="avatar-v2"][data-has-image]::before {
+  display: none;
+}
+
+[data-component="avatar-v2"][data-kind="org"] {
+  --avatar-radius: 6px;
+}
+
+[data-component="avatar-v2"][data-kind="org"][data-size="normal"],
+[data-component="avatar-v2"][data-kind="org"][data-size="small"] {
+  --avatar-radius: 4px;
+}
+
+[data-component="avatar-v2"][data-size="normal"] {
+  width: 20px;
+  height: 20px;
+}
+
+[data-component="avatar-v2"][data-size="small"] {
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="avatar-v2"] [data-slot="avatar-image"] {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+}

package/src/v2/components/avatar-v2.tsx

@@ -0,0 +1,59 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./avatar-v2.css"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export interface AvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  background?: string
+  foreground?: string
+  size?: "small" | "normal" | "large"
+  kind?: "user" | "org"
+}
+
+export function Avatar(props: AvatarProps) {
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "background",
+    "foreground",
+    "size",
+    "kind",
+    "class",
+    "classList",
+    "style",
+  ])
+  const src = split.src // did this so i can zero it out to test fallback
+  return (
+    <div
+      {...rest}
+      data-component="avatar-v2"
+      data-size={split.size || "large"}
+      data-kind={split.kind || "user"}
+      data-has-image={src ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={{
+        ...(typeof split.style === "object" ? split.style : {}),
+        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
+      }}
+    >
+      <Show when={src} fallback={first(split.fallback)}>
+        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
+      </Show>
+    </div>
+  )
+}

package/src/v2/components/badge-v2.css

@@ -0,0 +1,27 @@
+[data-component="tag"] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 16px;
+  padding: 0 4px;
+  user-select: none;
+
+  border-radius: 2px;
+  border: 0.5px solid var(--v2-border-border-base);
+  background: var(--v2-background-bg-layer-02);
+
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="tag"][data-high-contrast] {
+  border-color: var(--v2-border-border-strong);
+}

package/src/v2/components/badge-v2.tsx

@@ -0,0 +1,20 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./badge-v2.css"
+
+export interface TagProps extends ComponentProps<"span"> {}
+
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <span
+      {...rest}
+      data-component="tag"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </span>
+  )
+}