@tishlang/tish-desktop-ui-theme 1.0.0

package/LICENSE

@@ -0,0 +1,13 @@
+Pay It Forward License (PIF)
+
+Copyright (c) 2026-present The Tish Project Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+This license includes a perpetual, worldwide, non-exclusive, royalty-free, irrevocable (except as stated below) grant for patent claims necessarily infringed by the use of the Software or any contributions submitted to it; terminating automatically when an entity initiates patent litigation (including a cross-claim or counterclaim) alleging that the Software or any portion thereof infringes a patent.
+
+The software is provided "as is," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
+
+Recipients of the Software should pay it forward by contributing to the open-source community through actions including but not limited to providing code, documentation, tutorials, guides, support, feedback, or promoting open-source projects through advocacy or related efforts that advance innovation and community growth.

package/README.md

@@ -0,0 +1,26 @@
+# `@tishlang/tish-desktop-ui-theme`
+
+Shared design tokens + small **lattish** primitives for Tish Desktop examples and apps.
+
+## Contents
+
+| Path | Role |
+|------|------|
+| `src/theme.css` | shadcn-style CSS variables (`--background`, `--primary`, …); dark default |
+| `src/theme-utilities.css` | Maps `bg-background` / `text-muted-foreground` / … → `var(--*)` (required — tish-tailwind has no `@theme`) |
+| `src/fonts.css` | Distinct UI font stack |
+| `src/ui/*.tish` | `Button`, `Card`, `Section`, `Input`, `Badge`, `Separator`, `ScrollArea`, `Toolbar` |
+| `src/index.tish` | Re-exports |
+
+## Usage
+
+1. Depend on the package (`file:` or published).
+2. Alias `@tishlang/tish-desktop-ui-theme` in Vite to `src/index.tish`.
+3. In `build-css.tish`, concatenate `fonts.css` + `theme.css` + `theme-utilities.css` with the tish-tailwind emit, and include theme `src/ui/*.tish` in `sourceFiles` so scanned utilities are emitted.
+4. Import primitives in UI Tish:
+
+```tish
+import { Button, Section } from "@tishlang/tish-desktop-ui-theme"
+```
+
+`examples/basic` intentionally stays unthemed. Prefer this package for `file-browser`, `native-chrome`, and new apps.

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tishlang/tish-desktop-ui-theme",
+  "version": "1.0.0",
+  "description": "Shared shadcn-like theme tokens and lattish UI primitives for Tish Desktop",
+  "license": "PIF",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tishlang/tish-desktop.git",
+    "directory": "packages/ui-theme"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "tish": {
+    "module": "./src/index.tish"
+  },
+  "exports": {
+    ".": {
+      "tish": "./src/index.tish"
+    },
+    "./theme.css": "./src/theme.css",
+    "./theme-utilities.css": "./src/theme-utilities.css",
+    "./fonts.css": "./src/fonts.css"
+  },
+  "keywords": [
+    "tish",
+    "desktop",
+    "ui",
+    "theme"
+  ]
+}

package/src/fonts.css

@@ -0,0 +1,21 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap");
+
+:root {
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-feature-settings: "ss01" on, "cv11" on;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-sans {
+  font-family: var(--font-sans);
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}

package/src/index.tish

@@ -0,0 +1,8 @@
+export { Button } from "./ui/Button.tish"
+export { Card, CardHeader, CardBody, CardFooter } from "./ui/Card.tish"
+export { Section } from "./ui/Section.tish"
+export { Input } from "./ui/Input.tish"
+export { Badge } from "./ui/Badge.tish"
+export { Separator } from "./ui/Separator.tish"
+export { ScrollArea } from "./ui/ScrollArea.tish"
+export { Toolbar } from "./ui/Toolbar.tish"

package/src/theme-utilities.css

@@ -0,0 +1,51 @@
+/*
+ * Map shadcn-like utility class names to CSS variables.
+ * Required because tish-tailwind does not emit @theme / bg-background tokens.
+ */
+
+.bg-background { background-color: hsl(var(--background)); }
+.text-foreground { color: hsl(var(--foreground)); }
+
+.bg-card { background-color: hsl(var(--card)); }
+.text-card-foreground { color: hsl(var(--card-foreground)); }
+
+.bg-popover { background-color: hsl(var(--popover)); }
+.text-popover-foreground { color: hsl(var(--popover-foreground)); }
+
+.bg-primary { background-color: hsl(var(--primary)); }
+.text-primary { color: hsl(var(--primary)); }
+.text-primary-foreground { color: hsl(var(--primary-foreground)); }
+
+.bg-secondary { background-color: hsl(var(--secondary)); }
+.text-secondary { color: hsl(var(--secondary)); }
+.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
+
+.bg-muted { background-color: hsl(var(--muted)); }
+.text-muted { color: hsl(var(--muted)); }
+.text-muted-foreground { color: hsl(var(--muted-foreground)); }
+
+.bg-accent { background-color: hsl(var(--accent)); }
+.text-accent { color: hsl(var(--accent)); }
+.text-accent-foreground { color: hsl(var(--accent-foreground)); }
+
+.bg-destructive { background-color: hsl(var(--destructive)); }
+.text-destructive { color: hsl(var(--destructive)); }
+.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
+
+.border-border { border-color: hsl(var(--border)); }
+.border-input { border-color: hsl(var(--input)); }
+.ring-ring { --tw-ring-color: hsl(var(--ring)); }
+.outline-ring { outline-color: hsl(var(--ring)); }
+
+.bg-sidebar { background-color: hsl(var(--sidebar)); }
+.text-sidebar-foreground { color: hsl(var(--sidebar-foreground)); }
+.border-sidebar-border { border-color: hsl(var(--sidebar-border)); }
+.bg-sidebar-accent { background-color: hsl(var(--sidebar-accent)); }
+.text-sidebar-accent-foreground { color: hsl(var(--sidebar-accent-foreground)); }
+
+.rounded-sm { border-radius: calc(var(--radius) - 4px); }
+.rounded-md { border-radius: calc(var(--radius) - 2px); }
+.rounded-lg { border-radius: var(--radius); }
+.rounded-xl { border-radius: calc(var(--radius) + 4px); }
+
+.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }

package/src/theme.css

@@ -0,0 +1,122 @@
+/*
+ * shadcn-style design tokens for Tish Desktop.
+ * Dark is the default on :root (zinc/slate neutrals + emerald accent).
+ * Opt into light with :root.light or html.light.
+ */
+
+:root {
+  color-scheme: dark;
+
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 6% 7%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 6% 7%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 240 4% 16%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 240 4% 18%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 4% 18%;
+  --input: 240 4% 18%;
+  --ring: 160 84% 39%;
+
+  --sidebar: 240 8% 5%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-border: 240 4% 14%;
+  --sidebar-accent: 240 4% 14%;
+  --sidebar-accent-foreground: 0 0% 98%;
+
+  --radius: 0.5rem;
+}
+
+:root.light,
+html.light {
+  color-scheme: light;
+
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+
+  --muted: 240 5% 96%;
+  --muted-foreground: 240 4% 46%;
+
+  --accent: 240 5% 96%;
+  --accent-foreground: 240 6% 10%;
+
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 6% 90%;
+  --input: 240 6% 90%;
+  --ring: 160 84% 39%;
+
+  --sidebar: 240 5% 96%;
+  --sidebar-foreground: 240 10% 3.9%;
+  --sidebar-border: 240 6% 90%;
+  --sidebar-accent: 240 5% 92%;
+  --sidebar-accent-foreground: 240 6% 10%;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 6% 7%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 6% 7%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 160 84% 39%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4% 16%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 4% 16%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 4% 18%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 4% 18%;
+  --input: 240 4% 18%;
+  --ring: 160 84% 39%;
+  --sidebar: 240 8% 5%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-border: 240 4% 14%;
+  --sidebar-accent: 240 4% 14%;
+  --sidebar-accent-foreground: 0 0% 98%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

package/src/ui/Badge.tish

@@ -0,0 +1,21 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+fn toneClass(tone) {
+  if (tone === "primary") return "bg-primary text-primary-foreground border-transparent"
+  if (tone === "destructive") return "bg-destructive text-destructive-foreground border-transparent"
+  if (tone === "outline") return "bg-transparent text-foreground border-border"
+  if (tone === "accent") return "bg-accent text-accent-foreground border-transparent"
+  return "bg-muted text-muted-foreground border-transparent"
+}
+
+export fn Badge(props) {
+  let tone = props.tone !== null && props.tone !== undefined ? props.tone : "muted"
+  return <span class={cx("inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium", cx(toneClass(tone), props.class))}>
+      {props.children}
+    </span>
+}

package/src/ui/Button.tish

@@ -0,0 +1,49 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+fn variantClass(variant) {
+  if (variant === "secondary") {
+    return "bg-secondary text-secondary-foreground border border-border hover:bg-accent"
+  }
+  if (variant === "outline") {
+    return "bg-background text-foreground border border-border hover:bg-accent hover:text-accent-foreground"
+  }
+  if (variant === "ghost") {
+    return "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
+  }
+  if (variant === "destructive") {
+    return "bg-destructive text-destructive-foreground border border-transparent hover:opacity-90"
+  }
+  if (variant === "link") {
+    return "bg-transparent text-primary underline-offset-4 hover:underline px-0"
+  }
+  return "bg-primary text-primary-foreground border border-transparent hover:opacity-90"
+}
+
+fn sizeClass(size) {
+  if (size === "sm") return "h-8 px-3 text-xs"
+  if (size === "lg") return "h-11 px-5 text-base"
+  if (size === "icon") return "h-9 w-9 p-0"
+  return "h-9 px-4 text-sm"
+}
+
+export fn Button(props) {
+  let variant = props.variant !== null && props.variant !== undefined ? props.variant : "default"
+  let size = props.size !== null && props.size !== undefined ? props.size : "md"
+  let className = cx(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-opacity disabled:pointer-events-none disabled:opacity-50",
+    cx(variantClass(variant), cx(sizeClass(size), props.class))
+  )
+  return <button
+      type={props.type !== null && props.type !== undefined ? props.type : "button"}
+      class={className}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+}

package/src/ui/Card.tish

@@ -0,0 +1,30 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn Card(props) {
+  return <div class={cx("rounded-lg border border-border bg-card text-card-foreground", props.class)}>
+      {props.children}
+    </div>
+}
+
+export fn CardHeader(props) {
+  return <div class={cx("flex flex-col gap-1.5 p-4 border-b border-border", props.class)}>
+      {props.children}
+    </div>
+}
+
+export fn CardBody(props) {
+  return <div class={cx("p-4", props.class)}>
+      {props.children}
+    </div>
+}
+
+export fn CardFooter(props) {
+  return <div class={cx("flex items-center gap-2 p-4 border-t border-border text-muted-foreground", props.class)}>
+      {props.children}
+    </div>
+}

package/src/ui/Input.tish

@@ -0,0 +1,23 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn Input(props) {
+  let className = cx(
+    "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-2 ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+    props.class
+  )
+  return <input
+      type={props.type !== null && props.type !== undefined ? props.type : "text"}
+      class={className}
+      value={props.value}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      onInput={props.onInput}
+      onChange={props.onChange}
+      onKeyDown={props.onKeyDown}
+    />
+}

package/src/ui/ScrollArea.tish

@@ -0,0 +1,12 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn ScrollArea(props) {
+  return <div class={cx("relative overflow-auto", props.class)}>
+      {props.children}
+    </div>
+}

package/src/ui/Section.tish

@@ -0,0 +1,16 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn Section(props) {
+  let hint = props.hint
+  let hasHint = hint !== null && hint !== undefined && hint !== ""
+  return <section class={cx("mb-8", props.class)}>
+      {props.title !== null && props.title !== undefined ? <h2 class="text-lg font-semibold mb-1 text-foreground">{props.title}</h2> : null}
+      {hasHint ? <p class="text-sm text-muted-foreground mb-3">{hint}</p> : null}
+      <div class="flex flex-wrap gap-2">{props.children}</div>
+    </section>
+}

package/src/ui/Separator.tish

@@ -0,0 +1,14 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn Separator(props) {
+  let vertical = props.orientation === "vertical"
+  let className = vertical
+    ? "shrink-0 bg-border w-px h-full"
+    : "shrink-0 bg-border h-px w-full"
+  return <div role="separator" class={cx(className, props.class)} />
+}

package/src/ui/Toolbar.tish

@@ -0,0 +1,18 @@
+/** @jsxImportSource lattish */
+
+fn cx(base, extra) {
+  if (extra === null || extra === undefined || extra === "") return base
+  return base + " " + extra
+}
+
+export fn Toolbar(props) {
+  return <div
+      class={cx(
+        "flex items-center gap-2 h-12 px-4 border-b border-border bg-background select-none",
+        props.class
+      )}
+      onMouseDown={props.onMouseDown}
+    >
+      {props.children}
+    </div>
+}