Merge pull request #11 from claytercek/main

Generate themes from primer design system, add accessible themes

Author: PyaeSoneAungRgn

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+package-lock.json

README.md

@@ -21,3 +21,17 @@ Project inspired on [GitHub's VS Code theme](https://github.com/primer/github-vs
 ## Contributing
 
 Feel free to fork, make changes, and submit a pull request.
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Publishing new versions
+
+1. Update the version in `extension.toml`
+2. Run `npm run build`
+3. Commit and push your changes (make sure to push the built files in `themes/` as well)
+4. Follow the [Zed publishing docs](https://zed.dev/docs/extensions/developing-extensions#updating-an-extension) to publish the extension

extension.json

@@ -0,0 +1,7 @@
+id = "github-theme"
+name = "Github Theme"
+version = "0.0.3"
+schema_version = 1
+authors = ["Pyae Sone Aung <pyaesoneaungrgn@gmail.com>", "Clay Tercek"]
+description = "GitHub themes for Zed"
+repository = "https://github.com/PyaeSoneAungRgn/github-zed-theme"

extension.toml

@@ -0,0 +1,15 @@
+{
+  "name": "github-zed-theme-generator",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node --watch src/generate",
+    "build": "node src/generate"
+  },
+  "devDependencies": {
+    "@primer/primitives": "^9.1.1",
+    "@types/node": "^20.14.6",
+    "typescript": "^5.4.5"
+  }
+}

package.json

@@ -0,0 +1,23 @@
+import fs from 'node:fs/promises'
+import { getTheme } from './theme.js'
+
+const writeData = {
+  "$schema": "https://zed.dev/schema/themes/v0.1.0.json",
+  "name": "Github Theme",
+  "author": "Pyae Sone Aung",
+  "themes": [
+    getTheme({ themeKey: 'light', name: "Github Light", type: 'light' }),
+    getTheme({ themeKey: 'light_colorblind', name: "Github Light Colorblind", type: 'light' }),
+    getTheme({ themeKey: 'light_high_contrast', name: "Github Light High Contrast", type: 'light' }),
+    getTheme({ themeKey: 'light_tritanopia', name: "Github Light Tritanopia", type: 'light' }),
+    getTheme({ themeKey: 'dark', name: "Github Dark", type: 'dark' }),
+    getTheme({ themeKey: 'dark_colorblind', name: "Github Dark Colorblind", type: 'dark' }),
+    getTheme({ themeKey: 'dark_high_contrast', name: "Github Dark High Contrast", type: 'dark' }),
+    getTheme({ themeKey: 'dark_tritanopia', name: "Github Dark Tritanopia", type: 'dark' }),
+    getTheme({ themeKey: 'dark_dimmed', name: "Github Dark Dimmed", type: 'dark' }),
+  ]
+}
+
+await fs.mkdir('./themes', { recursive: true })
+
+await fs.writeFile('./themes/github_theme.json', JSON.stringify(writeData, null, 2))

src/generate.js

@@ -0,0 +1,23 @@
+
+type Token = {
+  name: string
+} & (
+    | { type: 'COLOR'; value: { r: number; g: number; b: number; a: number } }
+    | { type: 'FLOAT'; value: number }
+  );
+
+declare module '@primer/primitives/dist/figma/themes/*.json' {
+  type Theme = Token[];
+
+  const theme: Theme;
+
+  export default theme;
+}
+
+declare module '@primer/primitives/dist/figma/scales/*.json' {
+  type Scale = Token[];
+
+  const scale: Scale;
+
+  export default scale;
+}