mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-28 04:43:17 +03:00
Write theme JSON files from buildThemes script
Co-Authored-By: Nate Butler <1714999+iamnbutler@users.noreply.github.com>
This commit is contained in:
Nathan Sobo
Keith Simmons
parent
70a783c8d1
commit
d2a070c345
7
script/build-themes
Executable file
7
script/build-themes
Executable file
@ -0,0 +1,7 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
cd styles
|
||||
npm install
|
||||
npm run build
|
||||
@ -1,11 +0,0 @@
|
||||
import dark from "./themes/dark";
|
||||
import light from "./themes/light";
|
||||
import app from "./styleTree/app";
|
||||
|
||||
for (let theme of [dark, light]) {
|
||||
let styleTree = app(theme);
|
||||
|
||||
let styleTreeJson = JSON.stringify(styleTree);
|
||||
console.log(styleTreeJson);
|
||||
// TODO: Write style tree json to zed crate assets folder
|
||||
}
|
||||
17
styles/buildThemes.ts
Normal file
17
styles/buildThemes.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
import dark from "./themes/dark";
|
||||
import light from "./themes/light";
|
||||
import app from "./styleTree/app";
|
||||
import decamelizeTree from "./utils/decamelizeTree";
|
||||
|
||||
const themes = [dark, light];
|
||||
for (let theme of themes) {
|
||||
let styleTree = decamelizeTree(app(theme));
|
||||
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
|
||||
let outPath = path.resolve(
|
||||
`${__dirname}/../crates/zed/assets/themes/${theme.name}.json`
|
||||
);
|
||||
fs.writeFileSync(outPath, styleTreeJSON);
|
||||
console.log(`Generated ${outPath}`);
|
||||
}
|
||||
279
styles/package-lock.json
generated
279
styles/package-lock.json
generated
@ -10,30 +10,307 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"chroma-js": "^2.4.2"
|
||||
"@types/node": "^17.0.23",
|
||||
"case-anything": "^2.1.10",
|
||||
"chroma-js": "^2.4.2",
|
||||
"ts-node": "^10.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@cspotcode/source-map-consumer": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
|
||||
"integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==",
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/@cspotcode/source-map-support": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
|
||||
"integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
|
||||
"dependencies": {
|
||||
"@cspotcode/source-map-consumer": "0.8.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@tsconfig/node10": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
|
||||
"integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
|
||||
},
|
||||
"node_modules/@tsconfig/node12": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
|
||||
"integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
|
||||
},
|
||||
"node_modules/@tsconfig/node14": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
|
||||
"integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
|
||||
},
|
||||
"node_modules/@tsconfig/node16": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
|
||||
"integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
|
||||
},
|
||||
"node_modules/@types/chroma-js": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
|
||||
"integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "17.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
|
||||
"integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
|
||||
"integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
|
||||
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
|
||||
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
|
||||
},
|
||||
"node_modules/case-anything": {
|
||||
"version": "2.1.10",
|
||||
"resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
|
||||
"integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ==",
|
||||
"engines": {
|
||||
"node": ">=12.13"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/chroma-js": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
|
||||
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
|
||||
},
|
||||
"node_modules/create-require": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
|
||||
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
|
||||
},
|
||||
"node_modules/diff": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
|
||||
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
|
||||
"engines": {
|
||||
"node": ">=0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/make-error": {
|
||||
"version": "1.3.6",
|
||||
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
|
||||
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
|
||||
},
|
||||
"node_modules/ts-node": {
|
||||
"version": "10.7.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
|
||||
"integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
|
||||
"dependencies": {
|
||||
"@cspotcode/source-map-support": "0.7.0",
|
||||
"@tsconfig/node10": "^1.0.7",
|
||||
"@tsconfig/node12": "^1.0.7",
|
||||
"@tsconfig/node14": "^1.0.0",
|
||||
"@tsconfig/node16": "^1.0.2",
|
||||
"acorn": "^8.4.1",
|
||||
"acorn-walk": "^8.1.1",
|
||||
"arg": "^4.1.0",
|
||||
"create-require": "^1.1.0",
|
||||
"diff": "^4.0.1",
|
||||
"make-error": "^1.1.1",
|
||||
"v8-compile-cache-lib": "^3.0.0",
|
||||
"yn": "3.1.1"
|
||||
},
|
||||
"bin": {
|
||||
"ts-node": "dist/bin.js",
|
||||
"ts-node-cwd": "dist/bin-cwd.js",
|
||||
"ts-node-esm": "dist/bin-esm.js",
|
||||
"ts-node-script": "dist/bin-script.js",
|
||||
"ts-node-transpile-only": "dist/bin-transpile.js",
|
||||
"ts-script": "dist/bin-script-deprecated.js"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@swc/core": ">=1.2.50",
|
||||
"@swc/wasm": ">=1.2.50",
|
||||
"@types/node": "*",
|
||||
"typescript": ">=2.7"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@swc/core": {
|
||||
"optional": true
|
||||
},
|
||||
"@swc/wasm": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
|
||||
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-compile-cache-lib": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
|
||||
"integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
|
||||
},
|
||||
"node_modules/yn": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
|
||||
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@cspotcode/source-map-consumer": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz",
|
||||
"integrity": "sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg=="
|
||||
},
|
||||
"@cspotcode/source-map-support": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz",
|
||||
"integrity": "sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==",
|
||||
"requires": {
|
||||
"@cspotcode/source-map-consumer": "0.8.0"
|
||||
}
|
||||
},
|
||||
"@tsconfig/node10": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.8.tgz",
|
||||
"integrity": "sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg=="
|
||||
},
|
||||
"@tsconfig/node12": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.9.tgz",
|
||||
"integrity": "sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw=="
|
||||
},
|
||||
"@tsconfig/node14": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.1.tgz",
|
||||
"integrity": "sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg=="
|
||||
},
|
||||
"@tsconfig/node16": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz",
|
||||
"integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA=="
|
||||
},
|
||||
"@types/chroma-js": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.1.3.tgz",
|
||||
"integrity": "sha512-1xGPhoSGY1CPmXLCBcjVZSQinFjL26vlR8ZqprsBWiFyED4JacJJ9zHhh5aaUXqbY9B37mKQ73nlydVAXmr1+g=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "17.0.23",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
|
||||
"integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
|
||||
},
|
||||
"acorn": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
|
||||
"integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ=="
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
|
||||
"integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
|
||||
},
|
||||
"arg": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
|
||||
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
|
||||
},
|
||||
"case-anything": {
|
||||
"version": "2.1.10",
|
||||
"resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.10.tgz",
|
||||
"integrity": "sha512-JczJwVrCP0jPKh05McyVsuOg6AYosrB9XWZKbQzXeDAm2ClE/PJE/BcrrQrVyGYH7Jg8V/LDupmyL4kFlVsVFQ=="
|
||||
},
|
||||
"chroma-js": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
|
||||
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
|
||||
},
|
||||
"create-require": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
|
||||
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="
|
||||
},
|
||||
"diff": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
|
||||
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
|
||||
},
|
||||
"make-error": {
|
||||
"version": "1.3.6",
|
||||
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
|
||||
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
|
||||
},
|
||||
"ts-node": {
|
||||
"version": "10.7.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
|
||||
"integrity": "sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==",
|
||||
"requires": {
|
||||
"@cspotcode/source-map-support": "0.7.0",
|
||||
"@tsconfig/node10": "^1.0.7",
|
||||
"@tsconfig/node12": "^1.0.7",
|
||||
"@tsconfig/node14": "^1.0.0",
|
||||
"@tsconfig/node16": "^1.0.2",
|
||||
"acorn": "^8.4.1",
|
||||
"acorn-walk": "^8.1.1",
|
||||
"arg": "^4.1.0",
|
||||
"create-require": "^1.1.0",
|
||||
"diff": "^4.0.1",
|
||||
"make-error": "^1.1.1",
|
||||
"v8-compile-cache-lib": "^3.0.0",
|
||||
"yn": "3.1.1"
|
||||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz",
|
||||
"integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==",
|
||||
"peer": true
|
||||
},
|
||||
"v8-compile-cache-lib": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz",
|
||||
"integrity": "sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA=="
|
||||
},
|
||||
"yn": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
|
||||
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,12 +4,15 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build": "ts-node buildThemes.ts"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"chroma-js": "^2.4.2"
|
||||
"@types/node": "^17.0.23",
|
||||
"case-anything": "^2.1.10",
|
||||
"chroma-js": "^2.4.2",
|
||||
"ts-node": "^10.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,246 +4,246 @@ import Theme, { NumberToken, Syntax } from "./theme";
|
||||
const { color } = core;
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[999],
|
||||
error: color.neutral[999],
|
||||
warning: color.neutral[999],
|
||||
info: color.neutral[999],
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[1000],
|
||||
error: color.neutral[1000],
|
||||
warning: color.neutral[1000],
|
||||
info: color.neutral[1000],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: Fixup
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number"
|
||||
value: 0.32,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
export default theme;
|
||||
|
||||
@ -6,246 +6,246 @@ const { color } = core;
|
||||
// TODO: Replace with light values
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[999],
|
||||
error: color.neutral[999],
|
||||
warning: color.neutral[999],
|
||||
info: color.neutral[999],
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[1000],
|
||||
error: color.neutral[1000],
|
||||
warning: color.neutral[1000],
|
||||
info: color.neutral[1000],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: Fixup
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number"
|
||||
value: 0.32,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
|
||||
12
styles/tsconfig.json
Normal file
12
styles/tsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2015",
|
||||
"module": "commonjs",
|
||||
"esModuleInterop": true,
|
||||
"noImplicitAny": true,
|
||||
"removeComments": true,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
21
styles/utils/decamelizeTree.ts
Normal file
21
styles/utils/decamelizeTree.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { snakeCase } from "case-anything";
|
||||
|
||||
export default function decamelizeTree(object: { [key: string]: any }) {
|
||||
const snakeObject: { [key: string]: any } = {};
|
||||
for (const key in object) {
|
||||
snakeObject[snakeCase(key)] = decamelizeValue(object[key]);
|
||||
}
|
||||
return snakeObject;
|
||||
}
|
||||
|
||||
function decamelizeValue(value: any): any {
|
||||
if (typeof value === "object") {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(decamelizeValue);
|
||||
} else {
|
||||
return decamelizeTree(value);
|
||||
}
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user