packages/ui/src/theme/desktop-theme.schema.json - dev - Alex_Ural/opencode

packages/ui/src/theme/desktop-theme.schema.json
168 строк6 KB
Aarav Sareen
feat(app): color themes (#30824)
05 июн 2026, 03:53
05 июн 2026, 03:53605ae48
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://opencode.ai/desktop-theme.json",
  "title": "OpenCode Desktop Theme",
  "description": "A theme definition for the OpenCode desktop application",
  "type": "object",
  "required": ["name", "id", "light", "dark"],
  "properties": {
    "$schema": {
      "type": "string",
      "description": "JSON Schema reference"
    },
    "name": {
      "type": "string",
      "description": "Human-readable theme name"
    },
    "id": {
      "type": "string",
      "description": "Unique theme identifier (slug)",
      "pattern": "^[a-z0-9-]+$"
    },
    "light": {
      "$ref": "#/definitions/ThemeVariant",
      "description": "Light mode color variant"
    },
    "dark": {
      "$ref": "#/definitions/ThemeVariant",
      "description": "Dark mode color variant"
    }
  },
  "definitions": {
    "HexColor": {
      "type": "string",
      "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$",
      "description": "A hex color value like #fff, #ffff, #ffffff, or #ffffffff"
    },
    "ColorValue": {
      "type": "string",
      "pattern": "^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|var\\(--[a-z0-9-]+\\))$",
      "description": "Either a hex color value (#rgb/#rgba/#rrggbb/#rrggbbaa) or a CSS variable reference"
    },
    "ThemeSeedColors": {
      "type": "object",
      "description": "The legacy semantic seed set used to generate a theme",
      "additionalProperties": false,
      "required": ["neutral", "primary", "success", "warning", "error", "info", "interactive", "diffAdd", "diffDelete"],
      "properties": {
        "neutral": {
          "$ref": "#/definitions/HexColor",
          "description": "Base neutral color for generating the gray scale"
        },
        "primary": {
          "$ref": "#/definitions/HexColor",
          "description": "Primary brand/accent color"
        },
        "success": {
          "$ref": "#/definitions/HexColor",
          "description": "Success state color (typically green)"
        },
        "warning": {
          "$ref": "#/definitions/HexColor",
          "description": "Warning state color (typically yellow/orange)"
        },
        "error": {
          "$ref": "#/definitions/HexColor",
          "description": "Error/critical state color (typically red)"
        },
        "info": {
          "$ref": "#/definitions/HexColor",
          "description": "Informational state color (typically purple/blue)"
        },
        "interactive": {
          "$ref": "#/definitions/HexColor",
          "description": "Interactive element color (links, buttons)"
        },
        "diffAdd": {
          "$ref": "#/definitions/HexColor",
          "description": "Color for diff additions"
        },
        "diffDelete": {
          "$ref": "#/definitions/HexColor",
          "description": "Color for diff deletions"
        }
      }
    },
    "ThemePaletteColors": {
      "type": "object",
      "description": "A compact semantic palette used to derive the full theme programmatically",
      "additionalProperties": false,
      "required": ["neutral", "ink", "primary", "success", "warning", "error", "info"],
      "properties": {
        "neutral": {
          "$ref": "#/definitions/HexColor",
          "description": "Base neutral color for generating the gray scale"
        },
        "ink": {
          "$ref": "#/definitions/HexColor",
          "description": "Foreground or chrome color used to derive text and border tones"
        },
        "primary": {
          "$ref": "#/definitions/HexColor",
          "description": "Primary brand color used for brand surfaces and strong emphasis"
        },
        "success": {
          "$ref": "#/definitions/HexColor",
          "description": "Success state color"
        },
        "warning": {
          "$ref": "#/definitions/HexColor",
          "description": "Warning state color"
        },
        "error": {
          "$ref": "#/definitions/HexColor",
          "description": "Error or critical state color"
        },
        "info": {
          "$ref": "#/definitions/HexColor",
          "description": "Informational state color"
        },
        "accent": {
          "$ref": "#/definitions/HexColor",
          "description": "Optional extra expressive accent for syntax and rich content"
        },
        "interactive": {
          "$ref": "#/definitions/HexColor",
          "description": "Optional dedicated interactive color; falls back to primary"
        },
        "diffAdd": {
          "$ref": "#/definitions/HexColor",
          "description": "Optional diff-add seed; falls back to a softened success color"
        },
        "diffDelete": {
          "$ref": "#/definitions/HexColor",
          "description": "Optional diff-delete seed; falls back to error"
        }
      }
    },
    "ThemeVariant": {
      "type": "object",
      "description": "A theme variant (light or dark) with either a compact palette or legacy seeds and optional overrides",
      "oneOf": [{ "required": ["seeds"] }, { "required": ["palette"] }],
      "properties": {
        "seeds": {
          "$ref": "#/definitions/ThemeSeedColors",
          "description": "Legacy seed colors used to generate the full palette"
        },
        "palette": {
          "$ref": "#/definitions/ThemePaletteColors",
          "description": "Compact palette used to derive the full token set"
        },
        "overrides": {
          "type": "object",
          "description": "Optional direct overrides for any CSS variable (without -- prefix)",
          "additionalProperties": {
            "$ref": "#/definitions/ColorValue"
          }
        },
        "v2Overrides": {
          "type": "object",
          "description": "Optional direct overrides for any v2 CSS variable (without -- prefix)",
          "additionalProperties": {
            "type": "string"
          }
        }
      }
    }
  }
}