styles/.prettierignore 🔗
@@ -0,0 +1,2 @@
+package-lock.json
+package.json
Merge pull request #2219 from zed-industries/nate/theme-tidying
Nate Butler created
Tidy `styles` appChange summary
styles/.prettierignore | 2
styles/package-lock.json | 694 ++++++++--------
styles/package.json | 6
styles/src/buildLicenses.ts | 112 +-
styles/src/buildThemes.ts | 72
styles/src/colorSchemes.ts | 74
styles/src/common.ts | 74
styles/src/styleTree/app.ts | 138 +-
styles/src/styleTree/commandPalette.ts | 54
styles/src/styleTree/components.ts | 318 +++---
styles/src/styleTree/contactFinder.ts | 126 +-
styles/src/styleTree/contactList.ts | 356 ++++----
styles/src/styleTree/contactNotification.ts | 82 +-
styles/src/styleTree/contactsPopover.ts | 52
styles/src/styleTree/contextMenu.ts | 79 +
styles/src/styleTree/editor.ts | 561 ++++++------
styles/src/styleTree/feedback.ts | 65
styles/src/styleTree/hoverPopover.ts | 82 +-
styles/src/styleTree/incomingCallNotification.ts | 94 +-
styles/src/styleTree/picker.ts | 146 +-
styles/src/styleTree/projectDiagnostics.ts | 20
styles/src/styleTree/projectPanel.ts | 110 +-
styles/src/styleTree/projectSharedNotification.ts | 94 +-
styles/src/styleTree/search.ts | 178 ++--
styles/src/styleTree/sharedScreen.ts | 12
styles/src/styleTree/simpleMessageNotification.ts | 58
styles/src/styleTree/statusBar.ts | 214 ++--
styles/src/styleTree/tabBar.ts | 180 ++--
styles/src/styleTree/terminal.ts | 94 +-
styles/src/styleTree/tooltip.ts | 40
styles/src/styleTree/updateNotification.ts | 54
styles/src/styleTree/workspace.ts | 496 ++++++------
styles/src/themes/andromeda.ts | 72
styles/src/themes/atelier-cave.ts | 112 +-
styles/src/themes/atelier-sulphurpool.ts | 73
styles/src/themes/common/base16.ts | 296 -------
styles/src/themes/common/colorScheme.ts | 120 +-
styles/src/themes/common/ramps.ts | 356 ++++----
styles/src/themes/common/theme.ts | 165 ----
styles/src/themes/one-dark.ts | 68
styles/src/themes/one-light.ts | 67
styles/src/themes/rose-pine-dawn.ts | 72
styles/src/themes/rose-pine-moon.ts | 72
styles/src/themes/rose-pine.ts | 68
styles/src/themes/sandcastle.ts | 67
styles/src/themes/solarized.ts | 73
styles/src/themes/staff/abruzzo.ts | 52
styles/src/themes/staff/atelier-dune.ts | 59
styles/src/themes/staff/atelier-heath.ts | 93 +-
styles/src/themes/staff/atelier-seaside.ts | 59
styles/src/themes/staff/ayu-mirage.ts | 52
styles/src/themes/staff/ayu.ts | 90 +-
styles/src/themes/staff/brushtrees.ts | 128 +-
styles/src/themes/staff/dracula.ts | 54
styles/src/themes/staff/gruvbox-medium.ts | 264 +++---
styles/src/themes/staff/monokai.ts | 54
styles/src/themes/staff/nord.ts | 54
styles/src/themes/staff/seti-ui.ts | 54
styles/src/themes/staff/tokyo-night-storm.ts | 54
styles/src/themes/staff/tokyo-night.ts | 92 +-
styles/src/themes/staff/zed-pro.ts | 58
styles/src/themes/staff/zenburn.ts | 54
styles/src/themes/summercamp.ts | 72
styles/src/utils/color.ts | 4
styles/src/utils/snakeCase.ts | 38
styles/tsconfig.json | 20
66 files changed, 3,725 insertions(+), 4,098 deletions(-)
Detailed changes
styles/package-lock.json 🔗
@@ -1,338 +1,366 @@
{
- "name": "styles",
- "version": "1.0.0",
- "lockfileVersion": 2,
- "requires": true,
- "packages": {
- "": {
- "name": "styles",
- "version": "1.0.0",
- "license": "ISC",
- "dependencies": {
- "@types/chroma-js": "^2.1.3",
- "@types/node": "^17.0.23",
- "bezier-easing": "^2.1.0",
- "case-anything": "^2.1.10",
- "chroma-js": "^2.4.2",
- "toml": "^3.0.0",
- "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/bezier-easing": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
- "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
- },
- "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/toml": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
- "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
- },
- "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
+ "name": "styles",
+ "version": "1.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "styles",
+ "version": "1.0.0",
+ "license": "ISC",
+ "dependencies": {
+ "@types/chroma-js": "^2.4.0",
+ "@types/node": "^18.14.1",
+ "bezier-easing": "^2.1.0",
+ "case-anything": "^2.1.10",
+ "chroma-js": "^2.4.2",
+ "toml": "^3.0.0",
+ "ts-node": "^10.9.1"
+ }
+ },
+ "node_modules/@cspotcode/source-map-support": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+ "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+ "dependencies": {
+ "@jridgewell/trace-mapping": "0.3.9"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@jridgewell/resolve-uri": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+ "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.4.14",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+ },
+ "node_modules/@jridgewell/trace-mapping": {
+ "version": "0.3.9",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+ "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+ "dependencies": {
+ "@jridgewell/resolve-uri": "^3.0.3",
+ "@jridgewell/sourcemap-codec": "^1.4.10"
+ }
+ },
+ "node_modules/@tsconfig/node10": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+ "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+ },
+ "node_modules/@tsconfig/node12": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+ "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+ },
+ "node_modules/@tsconfig/node14": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+ "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+ },
+ "node_modules/@tsconfig/node16": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
+ "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ=="
+ },
+ "node_modules/@types/chroma-js": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.0.tgz",
+ "integrity": "sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw=="
+ },
+ "node_modules/@types/node": {
+ "version": "18.14.1",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
+ "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
+ },
+ "node_modules/acorn": {
+ "version": "8.8.2",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+ "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+ "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/bezier-easing": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+ "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+ },
+ "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/toml": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+ "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
+ },
+ "node_modules/ts-node": {
+ "version": "10.9.1",
+ "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+ "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+ "dependencies": {
+ "@cspotcode/source-map-support": "^0.8.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.1",
+ "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.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "peer": true,
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=4.2.0"
+ }
+ },
+ "node_modules/v8-compile-cache-lib": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+ "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+ },
+ "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"
+ }
}
- }
- },
- "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=="
- },
- "bezier-easing": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
- "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
- },
- "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=="
- },
- "toml": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
- "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
- },
- "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=="
+ "dependencies": {
+ "@cspotcode/source-map-support": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+ "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+ "requires": {
+ "@jridgewell/trace-mapping": "0.3.9"
+ }
+ },
+ "@jridgewell/resolve-uri": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+ "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+ },
+ "@jridgewell/sourcemap-codec": {
+ "version": "1.4.14",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+ },
+ "@jridgewell/trace-mapping": {
+ "version": "0.3.9",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+ "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+ "requires": {
+ "@jridgewell/resolve-uri": "^3.0.3",
+ "@jridgewell/sourcemap-codec": "^1.4.10"
+ }
+ },
+ "@tsconfig/node10": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+ "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA=="
+ },
+ "@tsconfig/node12": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+ "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="
+ },
+ "@tsconfig/node14": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+ "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="
+ },
+ "@tsconfig/node16": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
+ "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ=="
+ },
+ "@types/chroma-js": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.0.tgz",
+ "integrity": "sha512-JklMxityrwjBTjGY2anH8JaTx3yjRU3/sEHSblLH1ba5lqcSh1LnImXJZO5peJfXyqKYWjHTGy4s5Wz++hARrw=="
+ },
+ "@types/node": {
+ "version": "18.14.1",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
+ "integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
+ },
+ "acorn": {
+ "version": "8.8.2",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+ "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
+ },
+ "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=="
+ },
+ "bezier-easing": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+ "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+ },
+ "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=="
+ },
+ "toml": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+ "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
+ },
+ "ts-node": {
+ "version": "10.9.1",
+ "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+ "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+ "requires": {
+ "@cspotcode/source-map-support": "^0.8.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.1",
+ "yn": "3.1.1"
+ }
+ },
+ "typescript": {
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "peer": true
+ },
+ "v8-compile-cache-lib": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+ "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="
+ },
+ "yn": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+ "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
+ }
}
- }
}
styles/package.json 🔗
@@ -10,13 +10,13 @@
"author": "",
"license": "ISC",
"dependencies": {
- "@types/chroma-js": "^2.1.3",
- "@types/node": "^17.0.23",
+ "@types/chroma-js": "^2.4.0",
+ "@types/node": "^18.14.1",
"bezier-easing": "^2.1.0",
"case-anything": "^2.1.10",
"chroma-js": "^2.4.2",
"toml": "^3.0.0",
- "ts-node": "^10.7.0"
+ "ts-node": "^10.9.1"
},
"prettier": {
"semi": false,
styles/src/buildLicenses.ts 🔗
@@ -1,73 +1,87 @@
-import * as fs from "fs";
-import toml from "toml";
-import {
- schemeMeta
-} from "./colorSchemes";
-import { Meta } from "./themes/common/colorScheme";
-import https from "https";
-import crypto from "crypto";
+import * as fs from "fs"
+import toml from "toml"
+import { schemeMeta } from "./colorSchemes"
+import { Meta } from "./themes/common/colorScheme"
+import https from "https"
+import crypto from "crypto"
const accepted_licenses_file = `${__dirname}/../../script/licenses/zed-licenses.toml`
// Use the cargo-about configuration file as the source of truth for supported licenses.
function parseAcceptedToml(file: string): string[] {
- let buffer = fs.readFileSync(file).toString();
+ let buffer = fs.readFileSync(file).toString()
- let obj = toml.parse(buffer);
+ let obj = toml.parse(buffer)
- if (!Array.isArray(obj.accepted)) {
- throw Error("Accepted license source is malformed")
- }
+ if (!Array.isArray(obj.accepted)) {
+ throw Error("Accepted license source is malformed")
+ }
- return obj.accepted
+ return obj.accepted
}
-
function checkLicenses(schemeMeta: Meta[], licenses: string[]) {
- for (let meta of schemeMeta) {
- // FIXME: Add support for conjuctions and conditions
- if (licenses.indexOf(meta.license.SPDX) < 0) {
- throw Error(`License for theme ${meta.name} (${meta.license.SPDX}) is not supported`)
+ for (let meta of schemeMeta) {
+ // FIXME: Add support for conjuctions and conditions
+ if (licenses.indexOf(meta.license.SPDX) < 0) {
+ throw Error(
+ `License for theme ${meta.name} (${meta.license.SPDX}) is not supported`
+ )
+ }
}
- }
}
+function getLicenseText(
+ schemeMeta: Meta[],
+ callback: (meta: Meta, license_text: string) => void
+) {
+ for (let meta of schemeMeta) {
+ // The following copied from the example code on nodejs.org:
+ // https://nodejs.org/api/http.html#httpgetoptions-callback
+ https
+ .get(meta.license.https_url, (res) => {
+ const { statusCode } = res
-function getLicenseText(schemeMeta: Meta[], callback: (meta: Meta, license_text: string) => void) {
- for (let meta of schemeMeta) {
- // The following copied from the example code on nodejs.org:
- // https://nodejs.org/api/http.html#httpgetoptions-callback
- https.get(meta.license.https_url, (res) => {
- const { statusCode } = res;
+ if (statusCode < 200 || statusCode >= 300) {
+ throw new Error(
+ `Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`
+ )
+ }
- if (statusCode < 200 || statusCode >= 300) {
- throw new Error(`Failed to fetch license for: ${meta.name}, Status Code: ${statusCode}`);
- }
-
- res.setEncoding('utf8');
- let rawData = '';
- res.on('data', (chunk) => { rawData += chunk; });
- res.on('end', () => {
- const hash = crypto.createHash('sha256').update(rawData).digest('hex');
- if (meta.license.license_checksum == hash) {
- callback(meta, rawData)
- } else {
- throw Error(`Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`)
- }
- });
- }).on('error', (e) => {
- throw e
- });
- }
+ res.setEncoding("utf8")
+ let rawData = ""
+ res.on("data", (chunk) => {
+ rawData += chunk
+ })
+ res.on("end", () => {
+ const hash = crypto
+ .createHash("sha256")
+ .update(rawData)
+ .digest("hex")
+ if (meta.license.license_checksum == hash) {
+ callback(meta, rawData)
+ } else {
+ throw Error(
+ `Checksum for ${meta.name} did not match file downloaded from ${meta.license.https_url}`
+ )
+ }
+ })
+ })
+ .on("error", (e) => {
+ throw e
+ })
+ }
}
function writeLicense(schemeMeta: Meta, text: String) {
- process.stdout.write(`## [${schemeMeta.name}](${schemeMeta.url})\n\n${text}\n********************************************************************************\n\n`)
+ process.stdout.write(
+ `## [${schemeMeta.name}](${schemeMeta.url})\n\n${text}\n********************************************************************************\n\n`
+ )
}
-const accepted_licenses = parseAcceptedToml(accepted_licenses_file);
+const accepted_licenses = parseAcceptedToml(accepted_licenses_file)
checkLicenses(schemeMeta, accepted_licenses)
getLicenseText(schemeMeta, (meta, text) => {
- writeLicense(meta, text)
-});
+ writeLicense(meta, text)
+})
styles/src/buildThemes.ts 🔗
@@ -1,50 +1,52 @@
-import * as fs from "fs";
-import { tmpdir } from "os";
-import * as path from "path";
-import colorSchemes, {
- staffColorSchemes,
-} from "./colorSchemes";
-import app from "./styleTree/app";
-import { ColorScheme } from "./themes/common/colorScheme";
-import snakeCase from "./utils/snakeCase";
+import * as fs from "fs"
+import { tmpdir } from "os"
+import * as path from "path"
+import colorSchemes, { staffColorSchemes } from "./colorSchemes"
+import app from "./styleTree/app"
+import { ColorScheme } from "./themes/common/colorScheme"
+import snakeCase from "./utils/snakeCase"
const assetsDirectory = `${__dirname}/../../assets`
-const themeDirectory = `${assetsDirectory}/themes`;
-const staffDirectory = `${themeDirectory}/staff`;
+const themeDirectory = `${assetsDirectory}/themes`
+const staffDirectory = `${themeDirectory}/staff`
-const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"));
+const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), "build-themes"))
// Clear existing themes
function clearThemes(themeDirectory: string) {
- if (!fs.existsSync(themeDirectory)) {
- fs.mkdirSync(themeDirectory, { recursive: true });
- } else {
- for (const file of fs.readdirSync(themeDirectory)) {
- if (file.endsWith(".json")) {
- const name = file.replace(/\.json$/, "");
- if (!colorSchemes.find((colorScheme) => colorScheme.name === name)) {
- fs.unlinkSync(path.join(themeDirectory, file));
+ if (!fs.existsSync(themeDirectory)) {
+ fs.mkdirSync(themeDirectory, { recursive: true })
+ } else {
+ for (const file of fs.readdirSync(themeDirectory)) {
+ if (file.endsWith(".json")) {
+ const name = file.replace(/\.json$/, "")
+ if (
+ !colorSchemes.find(
+ (colorScheme) => colorScheme.name === name
+ )
+ ) {
+ fs.unlinkSync(path.join(themeDirectory, file))
+ }
+ }
}
- }
}
- }
}
-clearThemes(themeDirectory);
-clearThemes(staffDirectory);
+clearThemes(themeDirectory)
+clearThemes(staffDirectory)
function writeThemes(colorSchemes: ColorScheme[], outputDirectory: string) {
- for (let colorScheme of colorSchemes) {
- let styleTree = snakeCase(app(colorScheme));
- let styleTreeJSON = JSON.stringify(styleTree, null, 2);
- let tempPath = path.join(tempDirectory, `${colorScheme.name}.json`);
- let outPath = path.join(outputDirectory, `${colorScheme.name}.json`);
- fs.writeFileSync(tempPath, styleTreeJSON);
- fs.renameSync(tempPath, outPath);
- console.log(`- ${outPath} created`);
- }
+ for (let colorScheme of colorSchemes) {
+ let styleTree = snakeCase(app(colorScheme))
+ let styleTreeJSON = JSON.stringify(styleTree, null, 2)
+ let tempPath = path.join(tempDirectory, `${colorScheme.name}.json`)
+ let outPath = path.join(outputDirectory, `${colorScheme.name}.json`)
+ fs.writeFileSync(tempPath, styleTreeJSON)
+ fs.renameSync(tempPath, outPath)
+ console.log(`- ${outPath} created`)
+ }
}
// Write new themes to theme directory
-writeThemes(colorSchemes, themeDirectory);
-writeThemes(staffColorSchemes, staffDirectory);
+writeThemes(colorSchemes, themeDirectory)
+writeThemes(staffColorSchemes, staffDirectory)
styles/src/colorSchemes.ts 🔗
@@ -1,54 +1,54 @@
-import fs from "fs";
-import path from "path";
-import { ColorScheme, Meta } from "./themes/common/colorScheme";
+import fs from "fs"
+import path from "path"
+import { ColorScheme, Meta } from "./themes/common/colorScheme"
-const colorSchemes: ColorScheme[] = [];
-export default colorSchemes;
+const colorSchemes: ColorScheme[] = []
+export default colorSchemes
-const schemeMeta: Meta[] = [];
-export { schemeMeta };
+const schemeMeta: Meta[] = []
+export { schemeMeta }
-const staffColorSchemes: ColorScheme[] = [];
-export { staffColorSchemes };
+const staffColorSchemes: ColorScheme[] = []
+export { staffColorSchemes }
-const experimentalColorSchemes: ColorScheme[] = [];
-export { experimentalColorSchemes };
+const experimentalColorSchemes: ColorScheme[] = []
+export { experimentalColorSchemes }
-const themes_directory = path.resolve(`${__dirname}/themes`);
+const themes_directory = path.resolve(`${__dirname}/themes`)
-function for_all_color_schemes_in(themesPath: string, callback: (module: any, path: string) => void) {
- for (const fileName of fs.readdirSync(themesPath)) {
- if (fileName == "template.ts") continue;
- const filePath = path.join(themesPath, fileName);
+function for_all_color_schemes_in(
+ themesPath: string,
+ callback: (module: any, path: string) => void
+) {
+ for (const fileName of fs.readdirSync(themesPath)) {
+ if (fileName == "template.ts") continue
+ const filePath = path.join(themesPath, fileName)
- if (fs.statSync(filePath).isFile()) {
- const colorScheme = require(filePath);
- callback(colorScheme, path.basename(filePath));
+ if (fs.statSync(filePath).isFile()) {
+ const colorScheme = require(filePath)
+ callback(colorScheme, path.basename(filePath))
+ }
}
- }
}
function fillColorSchemes(themesPath: string, colorSchemes: ColorScheme[]) {
- for_all_color_schemes_in(themesPath, (colorScheme, _path) => {
- if (colorScheme.dark) colorSchemes.push(colorScheme.dark);
- if (colorScheme.light) colorSchemes.push(colorScheme.light);
- })
+ for_all_color_schemes_in(themesPath, (colorScheme, _path) => {
+ if (colorScheme.dark) colorSchemes.push(colorScheme.dark)
+ if (colorScheme.light) colorSchemes.push(colorScheme.light)
+ })
}
-fillColorSchemes(themes_directory, colorSchemes);
-fillColorSchemes(
- path.resolve(`${themes_directory}/staff`),
- staffColorSchemes
-);
+fillColorSchemes(themes_directory, colorSchemes)
+fillColorSchemes(path.resolve(`${themes_directory}/staff`), staffColorSchemes)
function fillMeta(themesPath: string, meta: Meta[]) {
- for_all_color_schemes_in(themesPath, (colorScheme, path) => {
- if (colorScheme.meta) {
- meta.push(colorScheme.meta)
- } else {
- throw Error(`Public theme ${path} must have a meta field`)
- }
- })
+ for_all_color_schemes_in(themesPath, (colorScheme, path) => {
+ if (colorScheme.meta) {
+ meta.push(colorScheme.meta)
+ } else {
+ throw Error(`Public theme ${path} must have a meta field`)
+ }
+ })
}
-fillMeta(themes_directory, schemeMeta);
+fillMeta(themes_directory, schemeMeta)
styles/src/common.ts 🔗
@@ -1,45 +1,45 @@
export const fontFamilies = {
- sans: "Zed Sans",
- mono: "Zed Mono",
-};
+ sans: "Zed Sans",
+ mono: "Zed Mono",
+}
export const fontSizes = {
- "3xs": 8,
- "2xs": 10,
- xs: 12,
- sm: 14,
- md: 16,
- lg: 18,
- xl: 20,
-};
+ "3xs": 8,
+ "2xs": 10,
+ xs: 12,
+ sm: 14,
+ md: 16,
+ lg: 18,
+ xl: 20,
+}
export type FontWeight =
- | "thin"
- | "extra_light"
- | "light"
- | "normal"
- | "medium"
- | "semibold"
- | "bold"
- | "extra_bold"
- | "black";
+ | "thin"
+ | "extra_light"
+ | "light"
+ | "normal"
+ | "medium"
+ | "semibold"
+ | "bold"
+ | "extra_bold"
+ | "black"
export const fontWeights: { [key: string]: FontWeight } = {
- thin: "thin",
- extra_light: "extra_light",
- light: "light",
- normal: "normal",
- medium: "medium",
- semibold: "semibold",
- bold: "bold",
- extra_bold: "extra_bold",
- black: "black",
-};
+ thin: "thin",
+ extra_light: "extra_light",
+ light: "light",
+ normal: "normal",
+ medium: "medium",
+ semibold: "semibold",
+ bold: "bold",
+ extra_bold: "extra_bold",
+ black: "black",
+}
export const sizes = {
- px: 1,
- xs: 2,
- sm: 4,
- md: 6,
- lg: 8,
- xl: 12,
-};
+ px: 1,
+ xs: 2,
+ sm: 4,
+ md: 6,
+ lg: 8,
+ xl: 12,
+}
styles/src/styleTree/app.ts 🔗
@@ -1,72 +1,72 @@
-import { text } from "./components";
-import contactFinder from "./contactFinder";
-import contactsPopover from "./contactsPopover";
-import commandPalette from "./commandPalette";
-import editor from "./editor";
-import projectPanel from "./projectPanel";
-import search from "./search";
-import picker from "./picker";
-import workspace from "./workspace";
-import contextMenu from "./contextMenu";
-import sharedScreen from "./sharedScreen";
-import projectDiagnostics from "./projectDiagnostics";
-import contactNotification from "./contactNotification";
-import updateNotification from "./updateNotification";
-import simpleMessageNotification from "./simpleMessageNotification";
-import projectSharedNotification from "./projectSharedNotification";
-import tooltip from "./tooltip";
-import terminal from "./terminal";
-import contactList from "./contactList";
-import incomingCallNotification from "./incomingCallNotification";
-import { ColorScheme } from "../themes/common/colorScheme";
-import feedback from "./feedback";
+import { text } from "./components"
+import contactFinder from "./contactFinder"
+import contactsPopover from "./contactsPopover"
+import commandPalette from "./commandPalette"
+import editor from "./editor"
+import projectPanel from "./projectPanel"
+import search from "./search"
+import picker from "./picker"
+import workspace from "./workspace"
+import contextMenu from "./contextMenu"
+import sharedScreen from "./sharedScreen"
+import projectDiagnostics from "./projectDiagnostics"
+import contactNotification from "./contactNotification"
+import updateNotification from "./updateNotification"
+import simpleMessageNotification from "./simpleMessageNotification"
+import projectSharedNotification from "./projectSharedNotification"
+import tooltip from "./tooltip"
+import terminal from "./terminal"
+import contactList from "./contactList"
+import incomingCallNotification from "./incomingCallNotification"
+import { ColorScheme } from "../themes/common/colorScheme"
+import feedback from "./feedback"
export default function app(colorScheme: ColorScheme): Object {
- return {
- meta: {
- name: colorScheme.name,
- isLight: colorScheme.isLight,
- },
- commandPalette: commandPalette(colorScheme),
- contactNotification: contactNotification(colorScheme),
- projectSharedNotification: projectSharedNotification(colorScheme),
- incomingCallNotification: incomingCallNotification(colorScheme),
- picker: picker(colorScheme),
- workspace: workspace(colorScheme),
- contextMenu: contextMenu(colorScheme),
- editor: editor(colorScheme),
- projectDiagnostics: projectDiagnostics(colorScheme),
- projectPanel: projectPanel(colorScheme),
- contactsPopover: contactsPopover(colorScheme),
- contactFinder: contactFinder(colorScheme),
- contactList: contactList(colorScheme),
- search: search(colorScheme),
- sharedScreen: sharedScreen(colorScheme),
- breadcrumbs: {
- ...text(colorScheme.highest, "sans", "variant"),
- padding: {
- left: 6,
- },
- },
- updateNotification: updateNotification(colorScheme),
- simpleMessageNotification: simpleMessageNotification(colorScheme),
- tooltip: tooltip(colorScheme),
- terminal: terminal(colorScheme),
- feedback: feedback(colorScheme),
- colorScheme: {
- ...colorScheme,
- players: Object.values(colorScheme.players),
- ramps: {
- neutral: colorScheme.ramps.neutral.colors(100, "hex"),
- red: colorScheme.ramps.red.colors(100, "hex"),
- orange: colorScheme.ramps.orange.colors(100, "hex"),
- yellow: colorScheme.ramps.yellow.colors(100, "hex"),
- green: colorScheme.ramps.green.colors(100, "hex"),
- cyan: colorScheme.ramps.cyan.colors(100, "hex"),
- blue: colorScheme.ramps.blue.colors(100, "hex"),
- violet: colorScheme.ramps.violet.colors(100, "hex"),
- magenta: colorScheme.ramps.magenta.colors(100, "hex"),
- },
- },
- };
+ return {
+ meta: {
+ name: colorScheme.name,
+ isLight: colorScheme.isLight,
+ },
+ commandPalette: commandPalette(colorScheme),
+ contactNotification: contactNotification(colorScheme),
+ projectSharedNotification: projectSharedNotification(colorScheme),
+ incomingCallNotification: incomingCallNotification(colorScheme),
+ picker: picker(colorScheme),
+ workspace: workspace(colorScheme),
+ contextMenu: contextMenu(colorScheme),
+ editor: editor(colorScheme),
+ projectDiagnostics: projectDiagnostics(colorScheme),
+ projectPanel: projectPanel(colorScheme),
+ contactsPopover: contactsPopover(colorScheme),
+ contactFinder: contactFinder(colorScheme),
+ contactList: contactList(colorScheme),
+ search: search(colorScheme),
+ sharedScreen: sharedScreen(colorScheme),
+ breadcrumbs: {
+ ...text(colorScheme.highest, "sans", "variant"),
+ padding: {
+ left: 6,
+ },
+ },
+ updateNotification: updateNotification(colorScheme),
+ simpleMessageNotification: simpleMessageNotification(colorScheme),
+ tooltip: tooltip(colorScheme),
+ terminal: terminal(colorScheme),
+ feedback: feedback(colorScheme),
+ colorScheme: {
+ ...colorScheme,
+ players: Object.values(colorScheme.players),
+ ramps: {
+ neutral: colorScheme.ramps.neutral.colors(100, "hex"),
+ red: colorScheme.ramps.red.colors(100, "hex"),
+ orange: colorScheme.ramps.orange.colors(100, "hex"),
+ yellow: colorScheme.ramps.yellow.colors(100, "hex"),
+ green: colorScheme.ramps.green.colors(100, "hex"),
+ cyan: colorScheme.ramps.cyan.colors(100, "hex"),
+ blue: colorScheme.ramps.blue.colors(100, "hex"),
+ violet: colorScheme.ramps.violet.colors(100, "hex"),
+ magenta: colorScheme.ramps.magenta.colors(100, "hex"),
+ },
+ },
+ }
}
styles/src/styleTree/commandPalette.ts 🔗
@@ -1,30 +1,30 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { text, background } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { text, background } from "./components"
export default function commandPalette(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
- return {
- keystrokeSpacing: 8,
- key: {
- text: text(layer, "mono", "variant", "default", { size: "xs" }),
- cornerRadius: 2,
- background: background(layer, "on"),
- padding: {
- top: 1,
- bottom: 1,
- left: 6,
- right: 6,
- },
- margin: {
- top: 1,
- bottom: 1,
- left: 2,
- },
- active: {
- text: text(layer, "mono", "on", "default", { size: "xs" }),
- background: withOpacity(background(layer, "on"), 0.2),
- },
- },
- };
+ let layer = colorScheme.highest
+ return {
+ keystrokeSpacing: 8,
+ key: {
+ text: text(layer, "mono", "variant", "default", { size: "xs" }),
+ cornerRadius: 2,
+ background: background(layer, "on"),
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 6,
+ right: 6,
+ },
+ margin: {
+ top: 1,
+ bottom: 1,
+ left: 2,
+ },
+ active: {
+ text: text(layer, "mono", "on", "default", { size: "xs" }),
+ background: withOpacity(background(layer, "on"), 0.2),
+ },
+ },
+ }
}
styles/src/styleTree/components.ts 🔗
@@ -1,210 +1,210 @@
-import { fontFamilies, fontSizes, FontWeight } from "../common";
-import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme";
+import { fontFamilies, fontSizes, FontWeight } from "../common"
+import { Layer, Styles, StyleSets, Style } from "../themes/common/colorScheme"
function isStyleSet(key: any): key is StyleSets {
- return [
- "base",
- "variant",
- "on",
- "accent",
- "positive",
- "warning",
- "negative",
- ].includes(key);
+ return [
+ "base",
+ "variant",
+ "on",
+ "accent",
+ "positive",
+ "warning",
+ "negative",
+ ].includes(key)
}
function isStyle(key: any): key is Styles {
- return [
- "default",
- "active",
- "disabled",
- "hovered",
- "pressed",
- "inverted",
- ].includes(key);
+ return [
+ "default",
+ "active",
+ "disabled",
+ "hovered",
+ "pressed",
+ "inverted",
+ ].includes(key)
}
function getStyle(
- layer: Layer,
- possibleStyleSetOrStyle?: any,
- possibleStyle?: any
+ layer: Layer,
+ possibleStyleSetOrStyle?: any,
+ possibleStyle?: any
): Style {
- let styleSet: StyleSets = "base";
- let style: Styles = "default";
- if (isStyleSet(possibleStyleSetOrStyle)) {
- styleSet = possibleStyleSetOrStyle;
- } else if (isStyle(possibleStyleSetOrStyle)) {
- style = possibleStyleSetOrStyle;
- }
-
- if (isStyle(possibleStyle)) {
- style = possibleStyle;
- }
-
- return layer[styleSet][style];
+ let styleSet: StyleSets = "base"
+ let style: Styles = "default"
+ if (isStyleSet(possibleStyleSetOrStyle)) {
+ styleSet = possibleStyleSetOrStyle
+ } else if (isStyle(possibleStyleSetOrStyle)) {
+ style = possibleStyleSetOrStyle
+ }
+
+ if (isStyle(possibleStyle)) {
+ style = possibleStyle
+ }
+
+ return layer[styleSet][style]
}
-export function background(layer: Layer, style?: Styles): string;
+export function background(layer: Layer, style?: Styles): string
export function background(
- layer: Layer,
- styleSet?: StyleSets,
- style?: Styles
-): string;
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string
export function background(
- layer: Layer,
- styleSetOrStyles?: StyleSets | Styles,
- style?: Styles
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
): string {
- return getStyle(layer, styleSetOrStyles, style).background;
+ return getStyle(layer, styleSetOrStyles, style).background
}
-export function borderColor(layer: Layer, style?: Styles): string;
+export function borderColor(layer: Layer, style?: Styles): string
export function borderColor(
- layer: Layer,
- styleSet?: StyleSets,
- style?: Styles
-): string;
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string
export function borderColor(
- layer: Layer,
- styleSetOrStyles?: StyleSets | Styles,
- style?: Styles
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
): string {
- return getStyle(layer, styleSetOrStyles, style).border;
+ return getStyle(layer, styleSetOrStyles, style).border
}
-export function foreground(layer: Layer, style?: Styles): string;
+export function foreground(layer: Layer, style?: Styles): string
export function foreground(
- layer: Layer,
- styleSet?: StyleSets,
- style?: Styles
-): string;
+ layer: Layer,
+ styleSet?: StyleSets,
+ style?: Styles
+): string
export function foreground(
- layer: Layer,
- styleSetOrStyles?: StyleSets | Styles,
- style?: Styles
+ layer: Layer,
+ styleSetOrStyles?: StyleSets | Styles,
+ style?: Styles
): string {
- return getStyle(layer, styleSetOrStyles, style).foreground;
+ return getStyle(layer, styleSetOrStyles, style).foreground
}
interface Text {
- family: keyof typeof fontFamilies;
- color: string;
- size: number;
- weight?: FontWeight;
- underline?: boolean;
+ family: keyof typeof fontFamilies
+ color: string
+ size: number
+ weight?: FontWeight
+ underline?: boolean
}
interface TextProperties {
- size?: keyof typeof fontSizes;
- weight?: FontWeight;
- underline?: boolean;
- color?: string;
+ size?: keyof typeof fontSizes
+ weight?: FontWeight
+ underline?: boolean
+ color?: string
}
export function text(
- layer: Layer,
- fontFamily: keyof typeof fontFamilies,
- styleSet: StyleSets,
- style: Styles,
- properties?: TextProperties
-): Text;
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ styleSet: StyleSets,
+ style: Styles,
+ properties?: TextProperties
+): Text
export function text(
- layer: Layer,
- fontFamily: keyof typeof fontFamilies,
- styleSet: StyleSets,
- properties?: TextProperties
-): Text;
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ styleSet: StyleSets,
+ properties?: TextProperties
+): Text
export function text(
- layer: Layer,
- fontFamily: keyof typeof fontFamilies,
- style: Styles,
- properties?: TextProperties
-): Text;
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ style: Styles,
+ properties?: TextProperties
+): Text
export function text(
- layer: Layer,
- fontFamily: keyof typeof fontFamilies,
- properties?: TextProperties
-): Text;
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ properties?: TextProperties
+): Text
export function text(
- layer: Layer,
- fontFamily: keyof typeof fontFamilies,
- styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
- styleOrProperties?: Styles | TextProperties,
- properties?: TextProperties
+ layer: Layer,
+ fontFamily: keyof typeof fontFamilies,
+ styleSetStyleOrProperties?: StyleSets | Styles | TextProperties,
+ styleOrProperties?: Styles | TextProperties,
+ properties?: TextProperties
) {
- let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-
- if (typeof styleSetStyleOrProperties === "object") {
- properties = styleSetStyleOrProperties;
- }
- if (typeof styleOrProperties === "object") {
- properties = styleOrProperties;
- }
-
- let size = fontSizes[properties?.size || "sm"];
- let color = properties?.color || style.foreground;
-
- return {
- family: fontFamilies[fontFamily],
- ...properties,
- color,
- size,
- };
+ let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+
+ if (typeof styleSetStyleOrProperties === "object") {
+ properties = styleSetStyleOrProperties
+ }
+ if (typeof styleOrProperties === "object") {
+ properties = styleOrProperties
+ }
+
+ let size = fontSizes[properties?.size || "sm"]
+ let color = properties?.color || style.foreground
+
+ return {
+ family: fontFamilies[fontFamily],
+ ...properties,
+ color,
+ size,
+ }
}
export interface Border {
- color: string;
- width: number;
- top?: boolean;
- bottom?: boolean;
- left?: boolean;
- right?: boolean;
- overlay?: boolean;
+ color: string
+ width: number
+ top?: boolean
+ bottom?: boolean
+ left?: boolean
+ right?: boolean
+ overlay?: boolean
}
export interface BorderProperties {
- width?: number;
- top?: boolean;
- bottom?: boolean;
- left?: boolean;
- right?: boolean;
- overlay?: boolean;
+ width?: number
+ top?: boolean
+ bottom?: boolean
+ left?: boolean
+ right?: boolean
+ overlay?: boolean
}
export function border(
- layer: Layer,
- styleSet: StyleSets,
- style: Styles,
- properties?: BorderProperties
-): Border;
+ layer: Layer,
+ styleSet: StyleSets,
+ style: Styles,
+ properties?: BorderProperties
+): Border
export function border(
- layer: Layer,
- styleSet: StyleSets,
- properties?: BorderProperties
-): Border;
+ layer: Layer,
+ styleSet: StyleSets,
+ properties?: BorderProperties
+): Border
export function border(
- layer: Layer,
- style: Styles,
- properties?: BorderProperties
-): Border;
-export function border(layer: Layer, properties?: BorderProperties): Border;
+ layer: Layer,
+ style: Styles,
+ properties?: BorderProperties
+): Border
+export function border(layer: Layer, properties?: BorderProperties): Border
export function border(
- layer: Layer,
- styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
- styleOrProperties?: Styles | BorderProperties,
- properties?: BorderProperties
+ layer: Layer,
+ styleSetStyleOrProperties?: StyleSets | Styles | BorderProperties,
+ styleOrProperties?: Styles | BorderProperties,
+ properties?: BorderProperties
): Border {
- let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties);
-
- if (typeof styleSetStyleOrProperties === "object") {
- properties = styleSetStyleOrProperties;
- }
- if (typeof styleOrProperties === "object") {
- properties = styleOrProperties;
- }
-
- return {
- color: style.border,
- width: 1,
- ...properties,
- };
+ let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+
+ if (typeof styleSetStyleOrProperties === "object") {
+ properties = styleSetStyleOrProperties
+ }
+ if (typeof styleOrProperties === "object") {
+ properties = styleOrProperties
+ }
+
+ return {
+ color: style.border,
+ width: 1,
+ ...properties,
+ }
}
styles/src/styleTree/contactFinder.ts 🔗
@@ -1,70 +1,70 @@
-import picker from "./picker";
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, foreground, text } from "./components";
+import picker from "./picker"
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, foreground, text } from "./components"
export default function contactFinder(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
+ let layer = colorScheme.middle
- const sideMargin = 6;
- const contactButton = {
- background: background(layer, "variant"),
- color: foreground(layer, "variant"),
- iconWidth: 8,
- buttonWidth: 16,
- cornerRadius: 8,
- };
+ const sideMargin = 6
+ const contactButton = {
+ background: background(layer, "variant"),
+ color: foreground(layer, "variant"),
+ iconWidth: 8,
+ buttonWidth: 16,
+ cornerRadius: 8,
+ }
- const pickerStyle = picker(colorScheme);
- const pickerInput = {
- background: background(layer, "on"),
- cornerRadius: 6,
- text: text(layer, "mono",),
- placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
- selection: colorScheme.players[0],
- border: border(layer),
- padding: {
- bottom: 4,
- left: 8,
- right: 8,
- top: 4,
- },
- margin: {
- left: sideMargin,
- right: sideMargin,
+ const pickerStyle = picker(colorScheme)
+ const pickerInput = {
+ background: background(layer, "on"),
+ cornerRadius: 6,
+ text: text(layer, "mono"),
+ placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
+ selection: colorScheme.players[0],
+ border: border(layer),
+ padding: {
+ bottom: 4,
+ left: 8,
+ right: 8,
+ top: 4,
+ },
+ margin: {
+ left: sideMargin,
+ right: sideMargin,
+ },
}
- };
- return {
- picker: {
- emptyContainer: {},
- item: {
- ...pickerStyle.item,
- margin: { left: sideMargin, right: sideMargin },
- },
- noMatches: pickerStyle.noMatches,
- inputEditor: pickerInput,
- emptyInputEditor: pickerInput
- },
- rowHeight: 28,
- contactAvatar: {
- cornerRadius: 10,
- width: 18,
- },
- contactUsername: {
- padding: {
- left: 8,
- },
- },
- contactButton: {
- ...contactButton,
- hover: {
- background: background(layer, "variant", "hovered"),
- },
- },
- disabledContactButton: {
- ...contactButton,
- background: background(layer, "disabled"),
- color: foreground(layer, "disabled"),
- },
- };
+ return {
+ picker: {
+ emptyContainer: {},
+ item: {
+ ...pickerStyle.item,
+ margin: { left: sideMargin, right: sideMargin },
+ },
+ noMatches: pickerStyle.noMatches,
+ inputEditor: pickerInput,
+ emptyInputEditor: pickerInput,
+ },
+ rowHeight: 28,
+ contactAvatar: {
+ cornerRadius: 10,
+ width: 18,
+ },
+ contactUsername: {
+ padding: {
+ left: 8,
+ },
+ },
+ contactButton: {
+ ...contactButton,
+ hover: {
+ background: background(layer, "variant", "hovered"),
+ },
+ },
+ disabledContactButton: {
+ ...contactButton,
+ background: background(layer, "disabled"),
+ color: foreground(layer, "disabled"),
+ },
+ }
}
styles/src/styleTree/contactList.ts 🔗
@@ -1,186 +1,182 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import {
- background,
- border,
- borderColor,
- foreground,
- text,
-} from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, borderColor, foreground, text } from "./components"
export default function contactsPanel(colorScheme: ColorScheme) {
- const nameMargin = 8;
- const sidePadding = 12;
+ const nameMargin = 8
+ const sidePadding = 12
- let layer = colorScheme.middle;
+ let layer = colorScheme.middle
- const contactButton = {
- background: background(layer, "on"),
- color: foreground(layer, "on"),
- iconWidth: 8,
- buttonWidth: 16,
- cornerRadius: 8,
- };
- const projectRow = {
- guestAvatarSpacing: 4,
- height: 24,
- guestAvatar: {
- cornerRadius: 8,
- width: 14,
- },
- name: {
- ...text(layer, "mono", { size: "sm" }),
- margin: {
- left: nameMargin,
- right: 6,
- },
- },
- guests: {
- margin: {
- left: nameMargin,
- right: nameMargin,
- },
- },
- padding: {
- left: sidePadding,
- right: sidePadding,
- },
- };
+ const contactButton = {
+ background: background(layer, "on"),
+ color: foreground(layer, "on"),
+ iconWidth: 8,
+ buttonWidth: 16,
+ cornerRadius: 8,
+ }
+ const projectRow = {
+ guestAvatarSpacing: 4,
+ height: 24,
+ guestAvatar: {
+ cornerRadius: 8,
+ width: 14,
+ },
+ name: {
+ ...text(layer, "mono", { size: "sm" }),
+ margin: {
+ left: nameMargin,
+ right: 6,
+ },
+ },
+ guests: {
+ margin: {
+ left: nameMargin,
+ right: nameMargin,
+ },
+ },
+ padding: {
+ left: sidePadding,
+ right: sidePadding,
+ },
+ }
- return {
- background: background(layer),
- padding: { top: 12, bottom: 0 },
- userQueryEditor: {
- background: background(layer, "on"),
- cornerRadius: 6,
- text: text(layer, "mono", "on"),
- placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
- selection: colorScheme.players[0],
- border: border(layer, "on"),
- padding: {
- bottom: 4,
- left: 8,
- right: 8,
- top: 4,
- },
- margin: {
- left: 6,
- },
- },
- userQueryEditorHeight: 33,
- addContactButton: {
- margin: { left: 6, right: 12 },
- color: foreground(layer, "on"),
- buttonWidth: 28,
- iconWidth: 16,
- },
- rowHeight: 28,
- sectionIconSize: 8,
- headerRow: {
- ...text(layer, "mono", { size: "sm" }),
- margin: { top: 14 },
- padding: {
- left: sidePadding,
- right: sidePadding,
- },
- active: {
- ...text(layer, "mono", "active", { size: "sm" }),
- background: background(layer, "active"),
- },
- },
- leaveCall: {
- background: background(layer),
- border: border(layer),
- cornerRadius: 6,
- margin: {
- top: 1,
- },
- padding: {
- top: 1,
- bottom: 1,
- left: 7,
- right: 7,
- },
- ...text(layer, "sans", "variant", { size: "xs" }),
- hover: {
- ...text(layer, "sans", "hovered", { size: "xs" }),
- background: background(layer, "hovered"),
- border: border(layer, "hovered"),
- },
- },
- contactRow: {
- padding: {
- left: sidePadding,
- right: sidePadding,
- },
- active: {
- background: background(layer, "active"),
- },
- },
- contactAvatar: {
- cornerRadius: 10,
- width: 18,
- },
- contactStatusFree: {
- cornerRadius: 4,
- padding: 4,
- margin: { top: 12, left: 12 },
- background: foreground(layer, "positive"),
- },
- contactStatusBusy: {
- cornerRadius: 4,
- padding: 4,
- margin: { top: 12, left: 12 },
- background: foreground(layer, "negative"),
- },
- contactUsername: {
- ...text(layer, "mono", { size: "sm" }),
- margin: {
- left: nameMargin,
- },
- },
- contactButtonSpacing: nameMargin,
- contactButton: {
- ...contactButton,
- hover: {
- background: background(layer, "hovered"),
- },
- },
- disabledButton: {
- ...contactButton,
- background: background(layer, "on"),
- color: foreground(layer, "on"),
- },
- callingIndicator: {
- ...text(layer, "mono", "variant", { size: "xs" }),
- },
- treeBranch: {
- color: borderColor(layer),
- width: 1,
- hover: {
- color: borderColor(layer),
- },
- active: {
- color: borderColor(layer),
- },
- },
- projectRow: {
- ...projectRow,
- background: background(layer),
- icon: {
- margin: { left: nameMargin },
- color: foreground(layer, "variant"),
- width: 12,
- },
- name: {
- ...projectRow.name,
- ...text(layer, "mono", { size: "sm" }),
- },
- hover: {
- background: background(layer, "hovered"),
- },
- active: {
- background: background(layer, "active"),
- },
- },
- };
+ return {
+ background: background(layer),
+ padding: { top: 12, bottom: 0 },
+ userQueryEditor: {
+ background: background(layer, "on"),
+ cornerRadius: 6,
+ text: text(layer, "mono", "on"),
+ placeholderText: text(layer, "mono", "on", "disabled", {
+ size: "xs",
+ }),
+ selection: colorScheme.players[0],
+ border: border(layer, "on"),
+ padding: {
+ bottom: 4,
+ left: 8,
+ right: 8,
+ top: 4,
+ },
+ margin: {
+ left: 6,
+ },
+ },
+ userQueryEditorHeight: 33,
+ addContactButton: {
+ margin: { left: 6, right: 12 },
+ color: foreground(layer, "on"),
+ buttonWidth: 28,
+ iconWidth: 16,
+ },
+ rowHeight: 28,
+ sectionIconSize: 8,
+ headerRow: {
+ ...text(layer, "mono", { size: "sm" }),
+ margin: { top: 14 },
+ padding: {
+ left: sidePadding,
+ right: sidePadding,
+ },
+ active: {
+ ...text(layer, "mono", "active", { size: "sm" }),
+ background: background(layer, "active"),
+ },
+ },
+ leaveCall: {
+ background: background(layer),
+ border: border(layer),
+ cornerRadius: 6,
+ margin: {
+ top: 1,
+ },
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 7,
+ right: 7,
+ },
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ hover: {
+ ...text(layer, "sans", "hovered", { size: "xs" }),
+ background: background(layer, "hovered"),
+ border: border(layer, "hovered"),
+ },
+ },
+ contactRow: {
+ padding: {
+ left: sidePadding,
+ right: sidePadding,
+ },
+ active: {
+ background: background(layer, "active"),
+ },
+ },
+ contactAvatar: {
+ cornerRadius: 10,
+ width: 18,
+ },
+ contactStatusFree: {
+ cornerRadius: 4,
+ padding: 4,
+ margin: { top: 12, left: 12 },
+ background: foreground(layer, "positive"),
+ },
+ contactStatusBusy: {
+ cornerRadius: 4,
+ padding: 4,
+ margin: { top: 12, left: 12 },
+ background: foreground(layer, "negative"),
+ },
+ contactUsername: {
+ ...text(layer, "mono", { size: "sm" }),
+ margin: {
+ left: nameMargin,
+ },
+ },
+ contactButtonSpacing: nameMargin,
+ contactButton: {
+ ...contactButton,
+ hover: {
+ background: background(layer, "hovered"),
+ },
+ },
+ disabledButton: {
+ ...contactButton,
+ background: background(layer, "on"),
+ color: foreground(layer, "on"),
+ },
+ callingIndicator: {
+ ...text(layer, "mono", "variant", { size: "xs" }),
+ },
+ treeBranch: {
+ color: borderColor(layer),
+ width: 1,
+ hover: {
+ color: borderColor(layer),
+ },
+ active: {
+ color: borderColor(layer),
+ },
+ },
+ projectRow: {
+ ...projectRow,
+ background: background(layer),
+ icon: {
+ margin: { left: nameMargin },
+ color: foreground(layer, "variant"),
+ width: 12,
+ },
+ name: {
+ ...projectRow.name,
+ ...text(layer, "mono", { size: "sm" }),
+ },
+ hover: {
+ background: background(layer, "hovered"),
+ },
+ active: {
+ background: background(layer, "active"),
+ },
+ },
+ }
}
styles/src/styleTree/contactNotification.ts 🔗
@@ -1,45 +1,45 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, foreground, text } from "./components"
-const avatarSize = 12;
-const headerPadding = 8;
+const avatarSize = 12
+const headerPadding = 8
export default function contactNotification(colorScheme: ColorScheme): Object {
- let layer = colorScheme.lowest;
- return {
- headerAvatar: {
- height: avatarSize,
- width: avatarSize,
- cornerRadius: 6,
- },
- headerMessage: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: headerPadding, right: headerPadding },
- },
- headerHeight: 18,
- bodyMessage: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
- },
- button: {
- ...text(layer, "sans", "on", { size: "xs" }),
- background: background(layer, "on"),
- padding: 4,
- cornerRadius: 6,
- margin: { left: 6 },
- hover: {
- background: background(layer, "on", "hovered"),
- },
- },
- dismissButton: {
- color: foreground(layer, "variant"),
- iconWidth: 8,
- iconHeight: 8,
- buttonWidth: 8,
- buttonHeight: 8,
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- };
+ let layer = colorScheme.lowest
+ return {
+ headerAvatar: {
+ height: avatarSize,
+ width: avatarSize,
+ cornerRadius: 6,
+ },
+ headerMessage: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: headerPadding, right: headerPadding },
+ },
+ headerHeight: 18,
+ bodyMessage: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
+ },
+ button: {
+ ...text(layer, "sans", "on", { size: "xs" }),
+ background: background(layer, "on"),
+ padding: 4,
+ cornerRadius: 6,
+ margin: { left: 6 },
+ hover: {
+ background: background(layer, "on", "hovered"),
+ },
+ },
+ dismissButton: {
+ color: foreground(layer, "variant"),
+ iconWidth: 8,
+ iconHeight: 8,
+ buttonWidth: 8,
+ buttonHeight: 8,
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ }
}
styles/src/styleTree/contactsPopover.ts 🔗
@@ -1,29 +1,29 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
export default function contactsPopover(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
- const sidePadding = 12;
- return {
- background: background(layer),
- cornerRadius: 6,
- padding: { top: 6 },
- margin: { top: -6 },
- shadow: colorScheme.popoverShadow,
- border: border(layer),
- width: 300,
- height: 400,
- inviteRowHeight: 28,
- inviteRow: {
- padding: {
- left: sidePadding,
- right: sidePadding,
- },
- border: border(layer, { top: true }),
- text: text(layer, "sans", "variant", { size: "sm" }),
- hover: {
- text: text(layer, "sans", "hovered", { size: "sm" }),
- },
- },
- }
+ let layer = colorScheme.middle
+ const sidePadding = 12
+ return {
+ background: background(layer),
+ cornerRadius: 6,
+ padding: { top: 6 },
+ margin: { top: -6 },
+ shadow: colorScheme.popoverShadow,
+ border: border(layer),
+ width: 300,
+ height: 400,
+ inviteRowHeight: 28,
+ inviteRow: {
+ padding: {
+ left: sidePadding,
+ right: sidePadding,
+ },
+ border: border(layer, { top: true }),
+ text: text(layer, "sans", "variant", { size: "sm" }),
+ hover: {
+ text: text(layer, "sans", "hovered", { size: "sm" }),
+ },
+ },
+ }
}
styles/src/styleTree/contextMenu.ts 🔗
@@ -1,41 +1,44 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, borderColor, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, borderColor, text } from "./components"
export default function contextMenu(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
- return {
- background: background(layer),
- cornerRadius: 10,
- padding: 4,
- shadow: colorScheme.popoverShadow,
- border: border(layer),
- keystrokeMargin: 30,
- item: {
- iconSpacing: 8,
- iconWidth: 14,
- padding: { left: 6, right: 6, top: 2, bottom: 2 },
- cornerRadius: 6,
- label: text(layer, "sans", { size: "sm" }),
- keystroke: {
- ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
- padding: { left: 3, right: 3 },
- },
- hover: {
- background: background(layer, "hovered"),
- label: text(layer, "sans", "hovered", { size: "sm" }),
- },
- active: {
- background: background(layer, "active"),
- label: text(layer, "sans", "active", { size: "sm" }),
- },
- activeHover: {
- background: background(layer, "active"),
- label: text(layer, "sans", "active", { size: "sm" }),
- },
- },
- separator: {
- background: borderColor(layer),
- margin: { top: 2, bottom: 2 },
- },
- };
+ let layer = colorScheme.middle
+ return {
+ background: background(layer),
+ cornerRadius: 10,
+ padding: 4,
+ shadow: colorScheme.popoverShadow,
+ border: border(layer),
+ keystrokeMargin: 30,
+ item: {
+ iconSpacing: 8,
+ iconWidth: 14,
+ padding: { left: 6, right: 6, top: 2, bottom: 2 },
+ cornerRadius: 6,
+ label: text(layer, "sans", { size: "sm" }),
+ keystroke: {
+ ...text(layer, "sans", "variant", {
+ size: "sm",
+ weight: "bold",
+ }),
+ padding: { left: 3, right: 3 },
+ },
+ hover: {
+ background: background(layer, "hovered"),
+ label: text(layer, "sans", "hovered", { size: "sm" }),
+ },
+ active: {
+ background: background(layer, "active"),
+ label: text(layer, "sans", "active", { size: "sm" }),
+ },
+ activeHover: {
+ background: background(layer, "active"),
+ label: text(layer, "sans", "active", { size: "sm" }),
+ },
+ },
+ separator: {
+ background: borderColor(layer),
+ margin: { top: 2, bottom: 2 },
+ },
+ }
}
styles/src/styleTree/editor.ts 🔗
@@ -1,285 +1,290 @@
-import { fontWeights } from "../common";
-import { withOpacity } from "../utils/color";
-import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme";
-import {
- background,
- border,
- borderColor,
- foreground,
- text,
-} from "./components";
-import hoverPopover from "./hoverPopover";
+import { fontWeights } from "../common"
+import { withOpacity } from "../utils/color"
+import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
+import { background, border, borderColor, foreground, text } from "./components"
+import hoverPopover from "./hoverPopover"
export default function editor(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
+ let layer = colorScheme.highest
- const autocompleteItem = {
- cornerRadius: 6,
- padding: {
- bottom: 2,
- left: 6,
- right: 6,
- top: 2,
- },
- };
+ const autocompleteItem = {
+ cornerRadius: 6,
+ padding: {
+ bottom: 2,
+ left: 6,
+ right: 6,
+ top: 2,
+ },
+ }
- function diagnostic(layer: Layer, styleSet: StyleSets) {
- return {
- textScaleFactor: 0.857,
- header: {
- border: border(layer, {
- top: true,
- }),
- },
- message: {
- text: text(layer, "sans", styleSet, "default", { size: "sm" }),
- highlightText: text(layer, "sans", styleSet, "default", {
- size: "sm",
- weight: "bold",
- }),
- },
- };
- }
+ function diagnostic(layer: Layer, styleSet: StyleSets) {
+ return {
+ textScaleFactor: 0.857,
+ header: {
+ border: border(layer, {
+ top: true,
+ }),
+ },
+ message: {
+ text: text(layer, "sans", styleSet, "default", { size: "sm" }),
+ highlightText: text(layer, "sans", styleSet, "default", {
+ size: "sm",
+ weight: "bold",
+ }),
+ },
+ }
+ }
- const syntax = {
- primary: {
- color: colorScheme.ramps.neutral(1).hex(),
- weight: fontWeights.normal,
- },
- "variable.special": {
- // Highlights for self, this, etc
- color: colorScheme.ramps.blue(0.7).hex(),
- weight: fontWeights.normal,
- },
- comment: {
- color: colorScheme.ramps.neutral(0.71).hex(),
- weight: fontWeights.normal,
- },
- punctuation: {
- color: colorScheme.ramps.neutral(0.86).hex(),
- weight: fontWeights.normal,
- },
- constant: {
- color: colorScheme.ramps.green(0.5).hex(),
- weight: fontWeights.normal,
- },
- keyword: {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.normal,
- },
- function: {
- color: colorScheme.ramps.yellow(0.5).hex(),
- weight: fontWeights.normal,
- },
- type: {
- color: colorScheme.ramps.cyan(0.5).hex(),
- weight: fontWeights.normal,
- },
- constructor: {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.normal,
- },
- variant: {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.normal,
- },
- property: {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.normal,
- },
- enum: {
- color: colorScheme.ramps.orange(0.5).hex(),
- weight: fontWeights.normal,
- },
- operator: {
- color: colorScheme.ramps.orange(0.5).hex(),
- weight: fontWeights.normal,
- },
- string: {
- color: colorScheme.ramps.orange(0.5).hex(),
- weight: fontWeights.normal,
- },
- number: {
- color: colorScheme.ramps.green(0.5).hex(),
- weight: fontWeights.normal,
- },
- boolean: {
- color: colorScheme.ramps.green(0.5).hex(),
- weight: fontWeights.normal,
- },
- predictive: {
- color: colorScheme.ramps.neutral(0.57).hex(),
- weight: fontWeights.normal,
- },
- title: {
- color: colorScheme.ramps.yellow(0.5).hex(),
- weight: fontWeights.bold,
- },
- emphasis: {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.normal,
- },
- "emphasis.strong": {
- color: colorScheme.ramps.blue(0.5).hex(),
- weight: fontWeights.bold,
- },
- linkUri: {
- color: colorScheme.ramps.green(0.5).hex(),
- weight: fontWeights.normal,
- underline: true,
- },
- linkText: {
- color: colorScheme.ramps.orange(0.5).hex(),
- weight: fontWeights.normal,
- italic: true,
- },
- };
+ const syntax = {
+ primary: {
+ color: colorScheme.ramps.neutral(1).hex(),
+ weight: fontWeights.normal,
+ },
+ "variable.special": {
+ // Highlights for self, this, etc
+ color: colorScheme.ramps.blue(0.7).hex(),
+ weight: fontWeights.normal,
+ },
+ comment: {
+ color: colorScheme.ramps.neutral(0.71).hex(),
+ weight: fontWeights.normal,
+ },
+ punctuation: {
+ color: colorScheme.ramps.neutral(0.86).hex(),
+ weight: fontWeights.normal,
+ },
+ constant: {
+ color: colorScheme.ramps.green(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ keyword: {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ function: {
+ color: colorScheme.ramps.yellow(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ type: {
+ color: colorScheme.ramps.cyan(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ constructor: {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ variant: {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ property: {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ enum: {
+ color: colorScheme.ramps.orange(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ operator: {
+ color: colorScheme.ramps.orange(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ string: {
+ color: colorScheme.ramps.orange(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ number: {
+ color: colorScheme.ramps.green(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ boolean: {
+ color: colorScheme.ramps.green(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ predictive: {
+ color: colorScheme.ramps.neutral(0.57).hex(),
+ weight: fontWeights.normal,
+ },
+ title: {
+ color: colorScheme.ramps.yellow(0.5).hex(),
+ weight: fontWeights.bold,
+ },
+ emphasis: {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.normal,
+ },
+ "emphasis.strong": {
+ color: colorScheme.ramps.blue(0.5).hex(),
+ weight: fontWeights.bold,
+ },
+ linkUri: {
+ color: colorScheme.ramps.green(0.5).hex(),
+ weight: fontWeights.normal,
+ underline: true,
+ },
+ linkText: {
+ color: colorScheme.ramps.orange(0.5).hex(),
+ weight: fontWeights.normal,
+ italic: true,
+ },
+ }
- return {
- textColor: syntax.primary.color,
- background: background(layer),
- activeLineBackground: withOpacity(background(layer, "on"), 0.75),
- highlightedLineBackground: background(layer, "on"),
- codeActions: {
- indicator: foreground(layer, "variant"),
- verticalScale: 0.55,
- },
- diff: {
- deleted: foreground(layer, "negative"),
- modified: foreground(layer, "warning"),
- inserted: foreground(layer, "positive"),
- removedWidthEm: 0.275,
- widthEm: 0.16,
- cornerRadius: 0.05,
- },
- /** Highlights matching occurences of what is under the cursor
- * as well as matched brackets
- */
- documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1),
- documentHighlightWriteBackground: colorScheme.ramps
- .neutral(0.5)
- .alpha(0.4)
- .hex(), // TODO: This was blend * 2
- errorColor: background(layer, "negative"),
- gutterBackground: background(layer),
- gutterPaddingFactor: 3.5,
- lineNumber: withOpacity(foreground(layer), 0.35),
- lineNumberActive: foreground(layer),
- renameFade: 0.6,
- unnecessaryCodeFade: 0.5,
- selection: colorScheme.players[0],
- guestSelections: [
- colorScheme.players[1],
- colorScheme.players[2],
- colorScheme.players[3],
- colorScheme.players[4],
- colorScheme.players[5],
- colorScheme.players[6],
- colorScheme.players[7],
- ],
- autocomplete: {
- background: background(colorScheme.middle),
- cornerRadius: 8,
- padding: 4,
- margin: {
- left: -14,
- },
- border: border(colorScheme.middle),
- shadow: colorScheme.popoverShadow,
- matchHighlight: foreground(colorScheme.middle, "accent"),
- item: autocompleteItem,
- hoveredItem: {
- ...autocompleteItem,
- matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
- background: background(colorScheme.middle, "hovered"),
- },
- selectedItem: {
- ...autocompleteItem,
- matchHighlight: foreground(colorScheme.middle, "accent", "active"),
- background: background(colorScheme.middle, "active"),
- },
- },
- diagnosticHeader: {
- background: background(colorScheme.middle),
- iconWidthFactor: 1.5,
- textScaleFactor: 0.857,
- border: border(colorScheme.middle, {
- bottom: true,
- top: true,
- }),
- code: {
- ...text(colorScheme.middle, "mono", { size: "sm" }),
- margin: {
- left: 10,
- },
- },
- message: {
- highlightText: text(colorScheme.middle, "sans", {
- size: "sm",
- weight: "bold",
- }),
- text: text(colorScheme.middle, "sans", { size: "sm" }),
- },
- },
- diagnosticPathHeader: {
- background: background(colorScheme.middle),
- textScaleFactor: 0.857,
- filename: text(colorScheme.middle, "mono", { size: "sm" }),
- path: {
- ...text(colorScheme.middle, "mono", { size: "sm" }),
- margin: {
- left: 12,
- },
- },
- },
- errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
- warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
- informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
- hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
- invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
- invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
- invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
- invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
- hoverPopover: hoverPopover(colorScheme),
- linkDefinition: {
- color: syntax.linkUri.color,
- underline: syntax.linkUri.underline,
- },
- jumpIcon: {
- color: foreground(layer, "on"),
- iconWidth: 20,
- buttonWidth: 20,
- cornerRadius: 6,
- padding: {
- top: 6,
- bottom: 6,
- left: 6,
- right: 6,
- },
- hover: {
- background: background(layer, "on", "hovered"),
- },
- },
- scrollbar: {
- width: 12,
- minHeightFactor: 1.0,
- track: {
- border: border(layer, "variant", { left: true }),
- },
- thumb: {
- background: withOpacity(background(layer, "inverted"), 0.4),
- border: {
- width: 1,
- color: borderColor(layer, "variant"),
- },
- },
- },
- compositionMark: {
- underline: {
- thickness: 1.0,
- color: borderColor(layer),
- },
- },
- syntax,
- };
+ return {
+ textColor: syntax.primary.color,
+ background: background(layer),
+ activeLineBackground: withOpacity(background(layer, "on"), 0.75),
+ highlightedLineBackground: background(layer, "on"),
+ codeActions: {
+ indicator: foreground(layer, "variant"),
+ verticalScale: 0.55,
+ },
+ diff: {
+ deleted: foreground(layer, "negative"),
+ modified: foreground(layer, "warning"),
+ inserted: foreground(layer, "positive"),
+ removedWidthEm: 0.275,
+ widthEm: 0.16,
+ cornerRadius: 0.05,
+ },
+ /** Highlights matching occurences of what is under the cursor
+ * as well as matched brackets
+ */
+ documentHighlightReadBackground: withOpacity(
+ foreground(layer, "accent"),
+ 0.1
+ ),
+ documentHighlightWriteBackground: colorScheme.ramps
+ .neutral(0.5)
+ .alpha(0.4)
+ .hex(), // TODO: This was blend * 2
+ errorColor: background(layer, "negative"),
+ gutterBackground: background(layer),
+ gutterPaddingFactor: 3.5,
+ lineNumber: withOpacity(foreground(layer), 0.35),
+ lineNumberActive: foreground(layer),
+ renameFade: 0.6,
+ unnecessaryCodeFade: 0.5,
+ selection: colorScheme.players[0],
+ guestSelections: [
+ colorScheme.players[1],
+ colorScheme.players[2],
+ colorScheme.players[3],
+ colorScheme.players[4],
+ colorScheme.players[5],
+ colorScheme.players[6],
+ colorScheme.players[7],
+ ],
+ autocomplete: {
+ background: background(colorScheme.middle),
+ cornerRadius: 8,
+ padding: 4,
+ margin: {
+ left: -14,
+ },
+ border: border(colorScheme.middle),
+ shadow: colorScheme.popoverShadow,
+ matchHighlight: foreground(colorScheme.middle, "accent"),
+ item: autocompleteItem,
+ hoveredItem: {
+ ...autocompleteItem,
+ matchHighlight: foreground(
+ colorScheme.middle,
+ "accent",
+ "hovered"
+ ),
+ background: background(colorScheme.middle, "hovered"),
+ },
+ selectedItem: {
+ ...autocompleteItem,
+ matchHighlight: foreground(
+ colorScheme.middle,
+ "accent",
+ "active"
+ ),
+ background: background(colorScheme.middle, "active"),
+ },
+ },
+ diagnosticHeader: {
+ background: background(colorScheme.middle),
+ iconWidthFactor: 1.5,
+ textScaleFactor: 0.857,
+ border: border(colorScheme.middle, {
+ bottom: true,
+ top: true,
+ }),
+ code: {
+ ...text(colorScheme.middle, "mono", { size: "sm" }),
+ margin: {
+ left: 10,
+ },
+ },
+ message: {
+ highlightText: text(colorScheme.middle, "sans", {
+ size: "sm",
+ weight: "bold",
+ }),
+ text: text(colorScheme.middle, "sans", { size: "sm" }),
+ },
+ },
+ diagnosticPathHeader: {
+ background: background(colorScheme.middle),
+ textScaleFactor: 0.857,
+ filename: text(colorScheme.middle, "mono", { size: "sm" }),
+ path: {
+ ...text(colorScheme.middle, "mono", { size: "sm" }),
+ margin: {
+ left: 12,
+ },
+ },
+ },
+ errorDiagnostic: diagnostic(colorScheme.middle, "negative"),
+ warningDiagnostic: diagnostic(colorScheme.middle, "warning"),
+ informationDiagnostic: diagnostic(colorScheme.middle, "accent"),
+ hintDiagnostic: diagnostic(colorScheme.middle, "warning"),
+ invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"),
+ invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"),
+ invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"),
+ invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"),
+ hoverPopover: hoverPopover(colorScheme),
+ linkDefinition: {
+ color: syntax.linkUri.color,
+ underline: syntax.linkUri.underline,
+ },
+ jumpIcon: {
+ color: foreground(layer, "on"),
+ iconWidth: 20,
+ buttonWidth: 20,
+ cornerRadius: 6,
+ padding: {
+ top: 6,
+ bottom: 6,
+ left: 6,
+ right: 6,
+ },
+ hover: {
+ background: background(layer, "on", "hovered"),
+ },
+ },
+ scrollbar: {
+ width: 12,
+ minHeightFactor: 1.0,
+ track: {
+ border: border(layer, "variant", { left: true }),
+ },
+ thumb: {
+ background: withOpacity(background(layer, "inverted"), 0.4),
+ border: {
+ width: 1,
+ color: borderColor(layer, "variant"),
+ },
+ },
+ },
+ compositionMark: {
+ underline: {
+ thickness: 1.0,
+ color: borderColor(layer),
+ },
+ },
+ syntax,
+ }
}
styles/src/styleTree/feedback.ts 🔗
@@ -1,37 +1,36 @@
-
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
export default function feedback(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
+ let layer = colorScheme.highest
- return {
- submit_button: {
- ...text(layer, "mono", "on"),
- background: background(layer, "on"),
- cornerRadius: 6,
- border: border(layer, "on"),
- margin: {
- right: 4,
- },
- padding: {
- bottom: 2,
- left: 10,
- right: 10,
- top: 2,
- },
- clicked: {
- ...text(layer, "mono", "on", "pressed"),
- background: background(layer, "on", "pressed"),
- border: border(layer, "on", "pressed"),
- },
- hover: {
- ...text(layer, "mono", "on", "hovered"),
- background: background(layer, "on", "hovered"),
- border: border(layer, "on", "hovered"),
- },
- },
- button_margin: 8,
- info_text: text(layer, "sans", "default", { size: "xs" }),
- };
+ return {
+ submit_button: {
+ ...text(layer, "mono", "on"),
+ background: background(layer, "on"),
+ cornerRadius: 6,
+ border: border(layer, "on"),
+ margin: {
+ right: 4,
+ },
+ padding: {
+ bottom: 2,
+ left: 10,
+ right: 10,
+ top: 2,
+ },
+ clicked: {
+ ...text(layer, "mono", "on", "pressed"),
+ background: background(layer, "on", "pressed"),
+ border: border(layer, "on", "pressed"),
+ },
+ hover: {
+ ...text(layer, "mono", "on", "hovered"),
+ background: background(layer, "on", "hovered"),
+ border: border(layer, "on", "hovered"),
+ },
+ },
+ button_margin: 8,
+ info_text: text(layer, "sans", "default", { size: "xs" }),
+ }
}
styles/src/styleTree/hoverPopover.ts 🔗
@@ -1,45 +1,45 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
export default function HoverPopover(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
- let baseContainer = {
- background: background(layer),
- cornerRadius: 8,
- padding: {
- left: 8,
- right: 8,
- top: 4,
- bottom: 4,
- },
- shadow: colorScheme.popoverShadow,
- border: border(layer),
- margin: {
- left: -8,
- },
- };
+ let layer = colorScheme.middle
+ let baseContainer = {
+ background: background(layer),
+ cornerRadius: 8,
+ padding: {
+ left: 8,
+ right: 8,
+ top: 4,
+ bottom: 4,
+ },
+ shadow: colorScheme.popoverShadow,
+ border: border(layer),
+ margin: {
+ left: -8,
+ },
+ }
- return {
- container: baseContainer,
- infoContainer: {
- ...baseContainer,
- background: background(layer, "accent"),
- border: border(layer, "accent"),
- },
- warningContainer: {
- ...baseContainer,
- background: background(layer, "warning"),
- border: border(layer, "warning"),
- },
- errorContainer: {
- ...baseContainer,
- background: background(layer, "negative"),
- border: border(layer, "negative"),
- },
- block_style: {
- padding: { top: 4 },
- },
- prose: text(layer, "sans", { size: "sm" }),
- highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
- };
+ return {
+ container: baseContainer,
+ infoContainer: {
+ ...baseContainer,
+ background: background(layer, "accent"),
+ border: border(layer, "accent"),
+ },
+ warningContainer: {
+ ...baseContainer,
+ background: background(layer, "warning"),
+ border: border(layer, "warning"),
+ },
+ errorContainer: {
+ ...baseContainer,
+ background: background(layer, "negative"),
+ border: border(layer, "negative"),
+ },
+ block_style: {
+ padding: { top: 4 },
+ },
+ prose: text(layer, "sans", { size: "sm" }),
+ highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
+ }
}
styles/src/styleTree/incomingCallNotification.ts 🔗
@@ -1,45 +1,53 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
-export default function incomingCallNotification(colorScheme: ColorScheme): Object {
- let layer = colorScheme.middle;
- const avatarSize = 48;
- return {
- windowHeight: 74,
- windowWidth: 380,
- background: background(layer),
- callerContainer: {
- padding: 12,
- },
- callerAvatar: {
- height: avatarSize,
- width: avatarSize,
- cornerRadius: avatarSize / 2,
- },
- callerMetadata: {
- margin: { left: 10 },
- },
- callerUsername: {
- ...text(layer, "sans", { size: "sm", weight: "bold" }),
- margin: { top: -3 },
- },
- callerMessage: {
- ...text(layer, "sans", "variant", { size: "xs" }),
- margin: { top: -3 },
- },
- worktreeRoots: {
- ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
- margin: { top: -3 },
- },
- buttonWidth: 96,
- acceptButton: {
- background: background(layer, "accent"),
- border: border(layer, { left: true, bottom: true }),
- ...text(layer, "sans", "positive", { size: "xs", weight: "extra_bold" })
- },
- declineButton: {
- border: border(layer, { left: true }),
- ...text(layer, "sans", "negative", { size: "xs", weight: "extra_bold" })
- },
- };
+export default function incomingCallNotification(
+ colorScheme: ColorScheme
+): Object {
+ let layer = colorScheme.middle
+ const avatarSize = 48
+ return {
+ windowHeight: 74,
+ windowWidth: 380,
+ background: background(layer),
+ callerContainer: {
+ padding: 12,
+ },
+ callerAvatar: {
+ height: avatarSize,
+ width: avatarSize,
+ cornerRadius: avatarSize / 2,
+ },
+ callerMetadata: {
+ margin: { left: 10 },
+ },
+ callerUsername: {
+ ...text(layer, "sans", { size: "sm", weight: "bold" }),
+ margin: { top: -3 },
+ },
+ callerMessage: {
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ margin: { top: -3 },
+ },
+ worktreeRoots: {
+ ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+ margin: { top: -3 },
+ },
+ buttonWidth: 96,
+ acceptButton: {
+ background: background(layer, "accent"),
+ border: border(layer, { left: true, bottom: true }),
+ ...text(layer, "sans", "positive", {
+ size: "xs",
+ weight: "extra_bold",
+ }),
+ },
+ declineButton: {
+ border: border(layer, { left: true }),
+ ...text(layer, "sans", "negative", {
+ size: "xs",
+ weight: "extra_bold",
+ }),
+ },
+ }
}
styles/src/styleTree/picker.ts 🔗
@@ -1,78 +1,78 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
export default function picker(colorScheme: ColorScheme) {
- let layer = colorScheme.lowest;
- const container = {
- background: background(layer),
- border: border(layer),
- shadow: colorScheme.modalShadow,
- cornerRadius: 12,
- padding: {
- bottom: 4,
+ let layer = colorScheme.lowest
+ const container = {
+ background: background(layer),
+ border: border(layer),
+ shadow: colorScheme.modalShadow,
+ cornerRadius: 12,
+ padding: {
+ bottom: 4,
+ },
}
- };
- const inputEditor = {
- placeholderText: text(layer, "sans", "on", "disabled"),
- selection: colorScheme.players[0],
- text: text(layer, "mono", "on"),
- border: border(layer, { bottom: true }),
- padding: {
- bottom: 8,
- left: 16,
- right: 16,
- top: 8,
- },
- margin: {
- bottom: 4,
- },
- };
- const emptyInputEditor = { ...inputEditor };
- delete emptyInputEditor.border;
- delete emptyInputEditor.margin;
+ const inputEditor = {
+ placeholderText: text(layer, "sans", "on", "disabled"),
+ selection: colorScheme.players[0],
+ text: text(layer, "mono", "on"),
+ border: border(layer, { bottom: true }),
+ padding: {
+ bottom: 8,
+ left: 16,
+ right: 16,
+ top: 8,
+ },
+ margin: {
+ bottom: 4,
+ },
+ }
+ const emptyInputEditor = { ...inputEditor }
+ delete emptyInputEditor.border
+ delete emptyInputEditor.margin
- return {
- ...container,
- emptyContainer: {
- ...container,
- padding: {}
- },
- item: {
- padding: {
- bottom: 4,
- left: 12,
- right: 12,
- top: 4,
- },
- margin: {
- top: 1,
- left: 4,
- right: 4,
- },
- cornerRadius: 8,
- text: text(layer, "sans", "variant"),
- highlightText: text(layer, "sans", "accent", { weight: "bold" }),
- active: {
- background: background(layer, "base", "active"),
- text: text(layer, "sans", "base", "active"),
- highlightText: text(layer, "sans", "accent", {
- weight: "bold",
- }),
- },
- hover: {
- background: background(layer, "hovered"),
- },
- },
- inputEditor,
- emptyInputEditor,
- noMatches: {
- text: text(layer, "sans", "variant"),
- padding: {
- bottom: 8,
- left: 16,
- right: 16,
- top: 8,
- },
- },
- };
+ return {
+ ...container,
+ emptyContainer: {
+ ...container,
+ padding: {},
+ },
+ item: {
+ padding: {
+ bottom: 4,
+ left: 12,
+ right: 12,
+ top: 4,
+ },
+ margin: {
+ top: 1,
+ left: 4,
+ right: 4,
+ },
+ cornerRadius: 8,
+ text: text(layer, "sans", "variant"),
+ highlightText: text(layer, "sans", "accent", { weight: "bold" }),
+ active: {
+ background: background(layer, "base", "active"),
+ text: text(layer, "sans", "base", "active"),
+ highlightText: text(layer, "sans", "accent", {
+ weight: "bold",
+ }),
+ },
+ hover: {
+ background: background(layer, "hovered"),
+ },
+ },
+ inputEditor,
+ emptyInputEditor,
+ noMatches: {
+ text: text(layer, "sans", "variant"),
+ padding: {
+ bottom: 8,
+ left: 16,
+ right: 16,
+ top: 8,
+ },
+ },
+ }
}
styles/src/styleTree/projectDiagnostics.ts 🔗
@@ -1,13 +1,13 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, text } from "./components"
export default function projectDiagnostics(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
- return {
- background: background(layer),
- tabIconSpacing: 4,
- tabIconWidth: 13,
- tabSummarySpacing: 10,
- emptyMessage: text(layer, "sans", "variant", { size: "md" }),
- };
+ let layer = colorScheme.highest
+ return {
+ background: background(layer),
+ tabIconSpacing: 4,
+ tabIconWidth: 13,
+ tabSummarySpacing: 10,
+ emptyMessage: text(layer, "sans", "variant", { size: "md" }),
+ }
}
styles/src/styleTree/projectPanel.ts 🔗
@@ -1,60 +1,60 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, foreground, text } from "./components"
export default function projectPanel(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
-
- let baseEntry = {
- height: 24,
- iconColor: foreground(layer, "variant"),
- iconSize: 8,
- iconSpacing: 8,
- }
+ let layer = colorScheme.middle
- let entry = {
- ...baseEntry,
- text: text(layer, "mono", "variant", { size: "sm" }),
- hover: {
- background: background(layer, "variant", "hovered"),
- },
- active: {
- background: background(layer, "active"),
- text: text(layer, "mono", "active", { size: "sm" }),
- },
- activeHover: {
- background: background(layer, "active"),
- text: text(layer, "mono", "active", { size: "sm" }),
- },
- };
+ let baseEntry = {
+ height: 24,
+ iconColor: foreground(layer, "variant"),
+ iconSize: 8,
+ iconSpacing: 8,
+ }
- return {
- background: background(layer),
- padding: { left: 12, right: 12, top: 6, bottom: 6 },
- indentWidth: 8,
- entry,
- draggedEntry: {
- ...baseEntry,
- text: text(layer, "mono", "on", { size: "sm" }),
- background: withOpacity(background(layer, "on"), 0.9),
- border: border(layer),
- },
- ignoredEntry: {
- ...entry,
- text: text(layer, "mono", "disabled"),
- },
- cutEntry: {
- ...entry,
- text: text(layer, "mono", "disabled"),
- active: {
- background: background(layer, "active"),
- text: text(layer, "mono", "disabled", { size: "sm" }),
- },
- },
- filenameEditor: {
- background: background(layer, "on"),
- text: text(layer, "mono", "on", { size: "sm" }),
- selection: colorScheme.players[0],
- },
- };
+ let entry = {
+ ...baseEntry,
+ text: text(layer, "mono", "variant", { size: "sm" }),
+ hover: {
+ background: background(layer, "variant", "hovered"),
+ },
+ active: {
+ background: background(layer, "active"),
+ text: text(layer, "mono", "active", { size: "sm" }),
+ },
+ activeHover: {
+ background: background(layer, "active"),
+ text: text(layer, "mono", "active", { size: "sm" }),
+ },
+ }
+
+ return {
+ background: background(layer),
+ padding: { left: 12, right: 12, top: 6, bottom: 6 },
+ indentWidth: 8,
+ entry,
+ draggedEntry: {
+ ...baseEntry,
+ text: text(layer, "mono", "on", { size: "sm" }),
+ background: withOpacity(background(layer, "on"), 0.9),
+ border: border(layer),
+ },
+ ignoredEntry: {
+ ...entry,
+ text: text(layer, "mono", "disabled"),
+ },
+ cutEntry: {
+ ...entry,
+ text: text(layer, "mono", "disabled"),
+ active: {
+ background: background(layer, "active"),
+ text: text(layer, "mono", "disabled", { size: "sm" }),
+ },
+ },
+ filenameEditor: {
+ background: background(layer, "on"),
+ text: text(layer, "mono", "on", { size: "sm" }),
+ selection: colorScheme.players[0],
+ },
+ }
}
styles/src/styleTree/projectSharedNotification.ts 🔗
@@ -1,46 +1,54 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
-export default function projectSharedNotification(colorScheme: ColorScheme): Object {
- let layer = colorScheme.middle;
+export default function projectSharedNotification(
+ colorScheme: ColorScheme
+): Object {
+ let layer = colorScheme.middle
- const avatarSize = 48;
- return {
- windowHeight: 74,
- windowWidth: 380,
- background: background(layer),
- ownerContainer: {
- padding: 12,
- },
- ownerAvatar: {
- height: avatarSize,
- width: avatarSize,
- cornerRadius: avatarSize / 2,
- },
- ownerMetadata: {
- margin: { left: 10 },
- },
- ownerUsername: {
- ...text(layer, "sans", { size: "sm", weight: "bold" }),
- margin: { top: -3 },
- },
- message: {
- ...text(layer, "sans", "variant", { size: "xs" }),
- margin: { top: -3 },
- },
- worktreeRoots: {
- ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
- margin: { top: -3 },
- },
- buttonWidth: 96,
- openButton: {
- background: background(layer, "accent"),
- border: border(layer, { left: true, bottom: true, }),
- ...text(layer, "sans", "accent", { size: "xs", weight: "extra_bold" })
- },
- dismissButton: {
- border: border(layer, { left: true }),
- ...text(layer, "sans", "variant", { size: "xs", weight: "extra_bold" })
- },
- };
+ const avatarSize = 48
+ return {
+ windowHeight: 74,
+ windowWidth: 380,
+ background: background(layer),
+ ownerContainer: {
+ padding: 12,
+ },
+ ownerAvatar: {
+ height: avatarSize,
+ width: avatarSize,
+ cornerRadius: avatarSize / 2,
+ },
+ ownerMetadata: {
+ margin: { left: 10 },
+ },
+ ownerUsername: {
+ ...text(layer, "sans", { size: "sm", weight: "bold" }),
+ margin: { top: -3 },
+ },
+ message: {
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ margin: { top: -3 },
+ },
+ worktreeRoots: {
+ ...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
+ margin: { top: -3 },
+ },
+ buttonWidth: 96,
+ openButton: {
+ background: background(layer, "accent"),
+ border: border(layer, { left: true, bottom: true }),
+ ...text(layer, "sans", "accent", {
+ size: "xs",
+ weight: "extra_bold",
+ }),
+ },
+ dismissButton: {
+ border: border(layer, { left: true }),
+ ...text(layer, "sans", "variant", {
+ size: "xs",
+ weight: "extra_bold",
+ }),
+ },
+ }
}
styles/src/styleTree/search.ts 🔗
@@ -1,94 +1,94 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, foreground, text } from "./components"
export default function search(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
+ let layer = colorScheme.highest
- // Search input
- const editor = {
- background: background(layer),
- cornerRadius: 8,
- minWidth: 200,
- maxWidth: 500,
- placeholderText: text(layer, "mono", "disabled"),
- selection: colorScheme.players[0],
- text: text(layer, "mono", "default"),
- border: border(layer),
- margin: {
- right: 12,
- },
- padding: {
- top: 3,
- bottom: 3,
- left: 12,
- right: 8,
- },
- };
+ // Search input
+ const editor = {
+ background: background(layer),
+ cornerRadius: 8,
+ minWidth: 200,
+ maxWidth: 500,
+ placeholderText: text(layer, "mono", "disabled"),
+ selection: colorScheme.players[0],
+ text: text(layer, "mono", "default"),
+ border: border(layer),
+ margin: {
+ right: 12,
+ },
+ padding: {
+ top: 3,
+ bottom: 3,
+ left: 12,
+ right: 8,
+ },
+ }
- return {
- // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
- matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
- optionButton: {
- ...text(layer, "mono", "on"),
- background: background(layer, "on"),
- cornerRadius: 6,
- border: border(layer, "on"),
- margin: {
- right: 4,
- },
- padding: {
- bottom: 2,
- left: 10,
- right: 10,
- top: 2,
- },
- active: {
- ...text(layer, "mono", "on", "inverted"),
- background: background(layer, "on", "inverted"),
- border: border(layer, "on", "inverted"),
- },
- clicked: {
- ...text(layer, "mono", "on", "pressed"),
- background: background(layer, "on", "pressed"),
- border: border(layer, "on", "pressed"),
- },
- hover: {
- ...text(layer, "mono", "on", "hovered"),
- background: background(layer, "on", "hovered"),
- border: border(layer, "on", "hovered"),
- },
- },
- editor,
- invalidEditor: {
- ...editor,
- border: border(layer, "negative"),
- },
- matchIndex: {
- ...text(layer, "mono", "variant"),
- padding: 6,
- },
- optionButtonGroup: {
- padding: {
- left: 12,
- right: 12,
- },
- },
- resultsStatus: {
- ...text(layer, "mono", "on"),
- size: 18,
- },
- dismissButton: {
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: 14,
- padding: {
- left: 10,
- right: 10,
- },
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- };
+ return {
+ // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
+ matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
+ optionButton: {
+ ...text(layer, "mono", "on"),
+ background: background(layer, "on"),
+ cornerRadius: 6,
+ border: border(layer, "on"),
+ margin: {
+ right: 4,
+ },
+ padding: {
+ bottom: 2,
+ left: 10,
+ right: 10,
+ top: 2,
+ },
+ active: {
+ ...text(layer, "mono", "on", "inverted"),
+ background: background(layer, "on", "inverted"),
+ border: border(layer, "on", "inverted"),
+ },
+ clicked: {
+ ...text(layer, "mono", "on", "pressed"),
+ background: background(layer, "on", "pressed"),
+ border: border(layer, "on", "pressed"),
+ },
+ hover: {
+ ...text(layer, "mono", "on", "hovered"),
+ background: background(layer, "on", "hovered"),
+ border: border(layer, "on", "hovered"),
+ },
+ },
+ editor,
+ invalidEditor: {
+ ...editor,
+ border: border(layer, "negative"),
+ },
+ matchIndex: {
+ ...text(layer, "mono", "variant"),
+ padding: 6,
+ },
+ optionButtonGroup: {
+ padding: {
+ left: 12,
+ right: 12,
+ },
+ },
+ resultsStatus: {
+ ...text(layer, "mono", "on"),
+ size: 18,
+ },
+ dismissButton: {
+ color: foreground(layer, "variant"),
+ iconWidth: 12,
+ buttonWidth: 14,
+ padding: {
+ left: 10,
+ right: 10,
+ },
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ }
}
styles/src/styleTree/sharedScreen.ts 🔗
@@ -1,9 +1,9 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background } from "./components"
export default function sharedScreen(colorScheme: ColorScheme) {
- let layer = colorScheme.highest;
- return {
- background: background(layer)
- }
+ let layer = colorScheme.highest
+ return {
+ background: background(layer),
+ }
}
styles/src/styleTree/simpleMessageNotification.ts 🔗
@@ -1,31 +1,33 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { foreground, text } from "./components"
-const headerPadding = 8;
+const headerPadding = 8
-export default function simpleMessageNotification(colorScheme: ColorScheme): Object {
- let layer = colorScheme.middle;
- return {
- message: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: headerPadding, right: headerPadding },
- },
- actionMessage: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: headerPadding, top: 6, bottom: 6 },
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- dismissButton: {
- color: foreground(layer),
- iconWidth: 8,
- iconHeight: 8,
- buttonWidth: 8,
- buttonHeight: 8,
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- };
+export default function simpleMessageNotification(
+ colorScheme: ColorScheme
+): Object {
+ let layer = colorScheme.middle
+ return {
+ message: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: headerPadding, right: headerPadding },
+ },
+ actionMessage: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: headerPadding, top: 6, bottom: 6 },
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ dismissButton: {
+ color: foreground(layer),
+ iconWidth: 8,
+ iconHeight: 8,
+ buttonWidth: 8,
+ buttonHeight: 8,
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ }
}
styles/src/styleTree/statusBar.ts 🔗
@@ -1,118 +1,118 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, foreground, text } from "./components"
export default function statusBar(colorScheme: ColorScheme) {
- let layer = colorScheme.lowest;
+ let layer = colorScheme.lowest
- const statusContainer = {
- cornerRadius: 6,
- padding: { top: 3, bottom: 3, left: 6, right: 6 },
- };
-
- const diagnosticStatusContainer = {
- cornerRadius: 6,
- padding: { top: 1, bottom: 1, left: 6, right: 6 },
- };
+ const statusContainer = {
+ cornerRadius: 6,
+ padding: { top: 3, bottom: 3, left: 6, right: 6 },
+ }
- return {
- height: 30,
- itemSpacing: 8,
- padding: {
- top: 1,
- bottom: 1,
- left: 6,
- right: 6,
- },
- border: border(layer, { top: true, overlay: true }),
- cursorPosition: text(layer, "sans", "variant"),
- autoUpdateProgressMessage: text(layer, "sans", "variant"),
- autoUpdateDoneMessage: text(layer, "sans", "variant"),
- lspStatus: {
- ...diagnosticStatusContainer,
- iconSpacing: 4,
- iconWidth: 14,
- height: 18,
- message: text(layer, "sans"),
- iconColor: foreground(layer),
- hover: {
- message: text(layer, "sans"),
- iconColor: foreground(layer),
- background: background(layer),
- },
- },
- diagnosticMessage: {
- ...text(layer, "sans"),
- hover: text(layer, "sans", "hovered"),
- },
- feedback: {
- ...text(layer, "sans", "variant"),
- hover: text(layer, "sans", "hovered"),
- },
- diagnosticSummary: {
- height: 20,
- iconWidth: 16,
- iconSpacing: 2,
- summarySpacing: 6,
- text: text(layer, "sans", { size: "sm" }),
- iconColorOk: foreground(layer, "variant"),
- iconColorWarning: foreground(layer, "warning"),
- iconColorError: foreground(layer, "negative"),
- containerOk: {
+ const diagnosticStatusContainer = {
cornerRadius: 6,
- padding: { top: 3, bottom: 3, left: 7, right: 7 },
- },
- containerWarning: {
- ...diagnosticStatusContainer,
- background: background(layer, "warning"),
- border: border(layer, "warning"),
- },
- containerError: {
- ...diagnosticStatusContainer,
- background: background(layer, "negative"),
- border: border(layer, "negative"),
- },
- hover: {
- iconColorOk: foreground(layer, "on"),
- containerOk: {
- cornerRadius: 6,
- padding: { top: 3, bottom: 3, left: 7, right: 7 },
- background: background(layer, "on", "hovered"),
+ padding: { top: 1, bottom: 1, left: 6, right: 6 },
+ }
+
+ return {
+ height: 30,
+ itemSpacing: 8,
+ padding: {
+ top: 1,
+ bottom: 1,
+ left: 6,
+ right: 6,
+ },
+ border: border(layer, { top: true, overlay: true }),
+ cursorPosition: text(layer, "sans", "variant"),
+ autoUpdateProgressMessage: text(layer, "sans", "variant"),
+ autoUpdateDoneMessage: text(layer, "sans", "variant"),
+ lspStatus: {
+ ...diagnosticStatusContainer,
+ iconSpacing: 4,
+ iconWidth: 14,
+ height: 18,
+ message: text(layer, "sans"),
+ iconColor: foreground(layer),
+ hover: {
+ message: text(layer, "sans"),
+ iconColor: foreground(layer),
+ background: background(layer),
+ },
},
- containerWarning: {
- ...diagnosticStatusContainer,
- background: background(layer, "warning", "hovered"),
- border: border(layer, "warning", "hovered"),
+ diagnosticMessage: {
+ ...text(layer, "sans"),
+ hover: text(layer, "sans", "hovered"),
},
- containerError: {
- ...diagnosticStatusContainer,
- background: background(layer, "negative", "hovered"),
- border: border(layer, "negative", "hovered"),
+ feedback: {
+ ...text(layer, "sans", "variant"),
+ hover: text(layer, "sans", "hovered"),
},
- },
- },
- sidebarButtons: {
- groupLeft: {},
- groupRight: {},
- item: {
- ...statusContainer,
- iconSize: 16,
- iconColor: foreground(layer, "variant"),
- hover: {
- iconColor: foreground(layer, "hovered"),
- background: background(layer, "variant"),
+ diagnosticSummary: {
+ height: 20,
+ iconWidth: 16,
+ iconSpacing: 2,
+ summarySpacing: 6,
+ text: text(layer, "sans", { size: "sm" }),
+ iconColorOk: foreground(layer, "variant"),
+ iconColorWarning: foreground(layer, "warning"),
+ iconColorError: foreground(layer, "negative"),
+ containerOk: {
+ cornerRadius: 6,
+ padding: { top: 3, bottom: 3, left: 7, right: 7 },
+ },
+ containerWarning: {
+ ...diagnosticStatusContainer,
+ background: background(layer, "warning"),
+ border: border(layer, "warning"),
+ },
+ containerError: {
+ ...diagnosticStatusContainer,
+ background: background(layer, "negative"),
+ border: border(layer, "negative"),
+ },
+ hover: {
+ iconColorOk: foreground(layer, "on"),
+ containerOk: {
+ cornerRadius: 6,
+ padding: { top: 3, bottom: 3, left: 7, right: 7 },
+ background: background(layer, "on", "hovered"),
+ },
+ containerWarning: {
+ ...diagnosticStatusContainer,
+ background: background(layer, "warning", "hovered"),
+ border: border(layer, "warning", "hovered"),
+ },
+ containerError: {
+ ...diagnosticStatusContainer,
+ background: background(layer, "negative", "hovered"),
+ border: border(layer, "negative", "hovered"),
+ },
+ },
},
- active: {
- iconColor: foreground(layer, "active"),
- background: background(layer, "active"),
+ sidebarButtons: {
+ groupLeft: {},
+ groupRight: {},
+ item: {
+ ...statusContainer,
+ iconSize: 16,
+ iconColor: foreground(layer, "variant"),
+ hover: {
+ iconColor: foreground(layer, "hovered"),
+ background: background(layer, "variant"),
+ },
+ active: {
+ iconColor: foreground(layer, "active"),
+ background: background(layer, "active"),
+ },
+ },
+ badge: {
+ cornerRadius: 3,
+ padding: 2,
+ margin: { bottom: -1, right: -1 },
+ border: border(layer),
+ background: background(layer, "accent"),
+ },
},
- },
- badge: {
- cornerRadius: 3,
- padding: 2,
- margin: { bottom: -1, right: -1 },
- border: border(layer),
- background: background(layer, "accent"),
- },
- },
- };
+ }
}
styles/src/styleTree/tabBar.ts 🔗
@@ -1,103 +1,103 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { text, border, background, foreground } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { text, border, background, foreground } from "./components"
export default function tabBar(colorScheme: ColorScheme) {
- const height = 32;
+ const height = 32
- let activeLayer = colorScheme.highest;
- let layer = colorScheme.middle;
+ let activeLayer = colorScheme.highest
+ let layer = colorScheme.middle
- const tab = {
- height,
- text: text(layer, "sans", "variant", { size: "sm" }),
- background: background(layer),
- border: border(layer, {
- right: true,
- bottom: true,
- overlay: true,
- }),
- padding: {
- left: 8,
- right: 12,
- },
- spacing: 8,
+ const tab = {
+ height,
+ text: text(layer, "sans", "variant", { size: "sm" }),
+ background: background(layer),
+ border: border(layer, {
+ right: true,
+ bottom: true,
+ overlay: true,
+ }),
+ padding: {
+ left: 8,
+ right: 12,
+ },
+ spacing: 8,
- // Close icons
- iconWidth: 14,
- iconClose: foreground(layer, "variant"),
- iconCloseActive: foreground(layer, "hovered"),
+ // Close icons
+ iconWidth: 14,
+ iconClose: foreground(layer, "variant"),
+ iconCloseActive: foreground(layer, "hovered"),
- // Indicators
- iconConflict: foreground(layer, "warning"),
- iconDirty: foreground(layer, "accent"),
+ // Indicators
+ iconConflict: foreground(layer, "warning"),
+ iconDirty: foreground(layer, "accent"),
- // When two tabs of the same name are open, a label appears next to them
- description: {
- margin: { left: 8 },
- ...text(layer, "sans", "disabled", { size: "2xs" }),
- },
- };
+ // When two tabs of the same name are open, a label appears next to them
+ description: {
+ margin: { left: 8 },
+ ...text(layer, "sans", "disabled", { size: "2xs" }),
+ },
+ }
- const activePaneActiveTab = {
- ...tab,
- background: background(activeLayer),
- text: text(activeLayer, "sans", "active", { size: "sm" }),
- border: {
- ...tab.border,
- bottom: false,
- },
- };
+ const activePaneActiveTab = {
+ ...tab,
+ background: background(activeLayer),
+ text: text(activeLayer, "sans", "active", { size: "sm" }),
+ border: {
+ ...tab.border,
+ bottom: false,
+ },
+ }
- const inactivePaneInactiveTab = {
- ...tab,
- background: background(layer),
- text: text(layer, "sans", "variant", { size: "sm" }),
- };
+ const inactivePaneInactiveTab = {
+ ...tab,
+ background: background(layer),
+ text: text(layer, "sans", "variant", { size: "sm" }),
+ }
- const inactivePaneActiveTab = {
- ...tab,
- background: background(activeLayer),
- text: text(layer, "sans", "variant", { size: "sm" }),
- border: {
- ...tab.border,
- bottom: false,
- },
- };
+ const inactivePaneActiveTab = {
+ ...tab,
+ background: background(activeLayer),
+ text: text(layer, "sans", "variant", { size: "sm" }),
+ border: {
+ ...tab.border,
+ bottom: false,
+ },
+ }
- const draggedTab = {
- ...activePaneActiveTab,
- background: withOpacity(tab.background, 0.9),
- border: undefined as any,
- shadow: colorScheme.popoverShadow,
- };
+ const draggedTab = {
+ ...activePaneActiveTab,
+ background: withOpacity(tab.background, 0.9),
+ border: undefined as any,
+ shadow: colorScheme.popoverShadow,
+ }
- return {
- height,
- background: background(layer),
- activePane: {
- activeTab: activePaneActiveTab,
- inactiveTab: tab,
- },
- inactivePane: {
- activeTab: inactivePaneActiveTab,
- inactiveTab: inactivePaneInactiveTab,
- },
- draggedTab,
- paneButton: {
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: activePaneActiveTab.height,
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- paneButtonContainer: {
- background: tab.background,
- border: {
- ...tab.border,
- right: false,
- },
- },
- };
+ return {
+ height,
+ background: background(layer),
+ activePane: {
+ activeTab: activePaneActiveTab,
+ inactiveTab: tab,
+ },
+ inactivePane: {
+ activeTab: inactivePaneActiveTab,
+ inactiveTab: inactivePaneInactiveTab,
+ },
+ draggedTab,
+ paneButton: {
+ color: foreground(layer, "variant"),
+ iconWidth: 12,
+ buttonWidth: activePaneActiveTab.height,
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ paneButtonContainer: {
+ background: tab.background,
+ border: {
+ ...tab.border,
+ right: false,
+ },
+ },
+ }
}
styles/src/styleTree/terminal.ts 🔗
@@ -1,52 +1,52 @@
-import { ColorScheme } from "../themes/common/colorScheme";
+import { ColorScheme } from "../themes/common/colorScheme"
export default function terminal(colorScheme: ColorScheme) {
- /**
- * Colors are controlled per-cell in the terminal grid.
- * Cells can be set to any of these more 'theme-capable' colors
- * or can be set directly with RGB values.
- * Here are the common interpretations of these names:
- * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
- */
- return {
- black: colorScheme.ramps.neutral(0).hex(),
- red: colorScheme.ramps.red(0.5).hex(),
- green: colorScheme.ramps.green(0.5).hex(),
- yellow: colorScheme.ramps.yellow(0.5).hex(),
- blue: colorScheme.ramps.blue(0.5).hex(),
- magenta: colorScheme.ramps.magenta(0.5).hex(),
- cyan: colorScheme.ramps.cyan(0.5).hex(),
- white: colorScheme.ramps.neutral(1).hex(),
- brightBlack: colorScheme.ramps.neutral(0.4).hex(),
- brightRed: colorScheme.ramps.red(0.25).hex(),
- brightGreen: colorScheme.ramps.green(0.25).hex(),
- brightYellow: colorScheme.ramps.yellow(0.25).hex(),
- brightBlue: colorScheme.ramps.blue(0.25).hex(),
- brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
- brightCyan: colorScheme.ramps.cyan(0.25).hex(),
- brightWhite: colorScheme.ramps.neutral(1).hex(),
/**
- * Default color for characters
+ * Colors are controlled per-cell in the terminal grid.
+ * Cells can be set to any of these more 'theme-capable' colors
+ * or can be set directly with RGB values.
+ * Here are the common interpretations of these names:
+ * https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
*/
- foreground: colorScheme.ramps.neutral(1).hex(),
- /**
- * Default color for the rectangle background of a cell
- */
- background: colorScheme.ramps.neutral(0).hex(),
- modalBackground: colorScheme.ramps.neutral(0.1).hex(),
- /**
- * Default color for the cursor
- */
- cursor: colorScheme.players[0].cursor,
- dimBlack: colorScheme.ramps.neutral(1).hex(),
- dimRed: colorScheme.ramps.red(0.75).hex(),
- dimGreen: colorScheme.ramps.green(0.75).hex(),
- dimYellow: colorScheme.ramps.yellow(0.75).hex(),
- dimBlue: colorScheme.ramps.blue(0.75).hex(),
- dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
- dimCyan: colorScheme.ramps.cyan(0.75).hex(),
- dimWhite: colorScheme.ramps.neutral(0.6).hex(),
- brightForeground: colorScheme.ramps.neutral(1).hex(),
- dimForeground: colorScheme.ramps.neutral(0).hex(),
- };
+ return {
+ black: colorScheme.ramps.neutral(0).hex(),
+ red: colorScheme.ramps.red(0.5).hex(),
+ green: colorScheme.ramps.green(0.5).hex(),
+ yellow: colorScheme.ramps.yellow(0.5).hex(),
+ blue: colorScheme.ramps.blue(0.5).hex(),
+ magenta: colorScheme.ramps.magenta(0.5).hex(),
+ cyan: colorScheme.ramps.cyan(0.5).hex(),
+ white: colorScheme.ramps.neutral(1).hex(),
+ brightBlack: colorScheme.ramps.neutral(0.4).hex(),
+ brightRed: colorScheme.ramps.red(0.25).hex(),
+ brightGreen: colorScheme.ramps.green(0.25).hex(),
+ brightYellow: colorScheme.ramps.yellow(0.25).hex(),
+ brightBlue: colorScheme.ramps.blue(0.25).hex(),
+ brightMagenta: colorScheme.ramps.magenta(0.25).hex(),
+ brightCyan: colorScheme.ramps.cyan(0.25).hex(),
+ brightWhite: colorScheme.ramps.neutral(1).hex(),
+ /**
+ * Default color for characters
+ */
+ foreground: colorScheme.ramps.neutral(1).hex(),
+ /**
+ * Default color for the rectangle background of a cell
+ */
+ background: colorScheme.ramps.neutral(0).hex(),
+ modalBackground: colorScheme.ramps.neutral(0.1).hex(),
+ /**
+ * Default color for the cursor
+ */
+ cursor: colorScheme.players[0].cursor,
+ dimBlack: colorScheme.ramps.neutral(1).hex(),
+ dimRed: colorScheme.ramps.red(0.75).hex(),
+ dimGreen: colorScheme.ramps.green(0.75).hex(),
+ dimYellow: colorScheme.ramps.yellow(0.75).hex(),
+ dimBlue: colorScheme.ramps.blue(0.75).hex(),
+ dimMagenta: colorScheme.ramps.magenta(0.75).hex(),
+ dimCyan: colorScheme.ramps.cyan(0.75).hex(),
+ dimWhite: colorScheme.ramps.neutral(0.6).hex(),
+ brightForeground: colorScheme.ramps.neutral(1).hex(),
+ dimForeground: colorScheme.ramps.neutral(0).hex(),
+ }
}
styles/src/styleTree/tooltip.ts 🔗
@@ -1,23 +1,23 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { background, border, text } from "./components"
export default function tooltip(colorScheme: ColorScheme) {
- let layer = colorScheme.middle;
- return {
- background: background(layer),
- border: border(layer),
- padding: { top: 4, bottom: 4, left: 8, right: 8 },
- margin: { top: 6, left: 6 },
- shadow: colorScheme.popoverShadow,
- cornerRadius: 6,
- text: text(layer, "sans", { size: "xs" }),
- keystroke: {
- background: background(layer, "on"),
- cornerRadius: 4,
- margin: { left: 6 },
- padding: { left: 4, right: 4 },
- ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
- },
- maxTextWidth: 200,
- };
+ let layer = colorScheme.middle
+ return {
+ background: background(layer),
+ border: border(layer),
+ padding: { top: 4, bottom: 4, left: 8, right: 8 },
+ margin: { top: 6, left: 6 },
+ shadow: colorScheme.popoverShadow,
+ cornerRadius: 6,
+ text: text(layer, "sans", { size: "xs" }),
+ keystroke: {
+ background: background(layer, "on"),
+ cornerRadius: 4,
+ margin: { left: 6 },
+ padding: { left: 4, right: 4 },
+ ...text(layer, "mono", "on", { size: "xs", weight: "bold" }),
+ },
+ maxTextWidth: 200,
+ }
}
styles/src/styleTree/updateNotification.ts 🔗
@@ -1,31 +1,31 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { foreground, text } from "./components";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { foreground, text } from "./components"
-const headerPadding = 8;
+const headerPadding = 8
export default function updateNotification(colorScheme: ColorScheme): Object {
- let layer = colorScheme.middle;
- return {
- message: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: headerPadding, right: headerPadding },
- },
- actionMessage: {
- ...text(layer, "sans", { size: "xs" }),
- margin: { left: headerPadding, top: 6, bottom: 6 },
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- dismissButton: {
- color: foreground(layer),
- iconWidth: 8,
- iconHeight: 8,
- buttonWidth: 8,
- buttonHeight: 8,
- hover: {
- color: foreground(layer, "hovered"),
- },
- },
- };
+ let layer = colorScheme.middle
+ return {
+ message: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: headerPadding, right: headerPadding },
+ },
+ actionMessage: {
+ ...text(layer, "sans", { size: "xs" }),
+ margin: { left: headerPadding, top: 6, bottom: 6 },
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ dismissButton: {
+ color: foreground(layer),
+ iconWidth: 8,
+ iconHeight: 8,
+ buttonWidth: 8,
+ buttonHeight: 8,
+ hover: {
+ color: foreground(layer, "hovered"),
+ },
+ },
+ }
}
styles/src/styleTree/workspace.ts 🔗
@@ -1,266 +1,264 @@
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import {
- background,
- border,
- borderColor,
- foreground,
- text,
-} from "./components";
-import statusBar from "./statusBar";
-import tabBar from "./tabBar";
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import { background, border, borderColor, foreground, text } from "./components"
+import statusBar from "./statusBar"
+import tabBar from "./tabBar"
export default function workspace(colorScheme: ColorScheme) {
- const layer = colorScheme.lowest;
- const itemSpacing = 8;
- const titlebarButton = {
- cornerRadius: 6,
- padding: {
- top: 1,
- bottom: 1,
- left: 8,
- right: 8,
- },
- ...text(layer, "sans", "variant", { size: "xs" }),
- background: background(layer, "variant"),
- border: border(layer),
- hover: {
- ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
- background: background(layer, "variant", "hovered"),
- border: border(layer, "variant", "hovered"),
- },
- clicked: {
- ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
- background: background(layer, "variant", "pressed"),
- border: border(layer, "variant", "pressed"),
- },
- active: {
- ...text(layer, "sans", "variant", "active", { size: "xs" }),
- background: background(layer, "variant", "active"),
- border: border(layer, "variant", "active"),
- },
- };
- const avatarWidth = 18;
- const avatarOuterWidth = avatarWidth + 4;
- const followerAvatarWidth = 14;
- const followerAvatarOuterWidth = followerAvatarWidth + 4;
-
- return {
- background: background(layer),
- joiningProjectAvatar: {
- cornerRadius: 40,
- width: 80,
- },
- joiningProjectMessage: {
- padding: 12,
- ...text(layer, "sans", { size: "lg" }),
- },
- externalLocationMessage: {
- background: background(colorScheme.middle, "accent"),
- border: border(colorScheme.middle, "accent"),
- cornerRadius: 6,
- padding: 12,
- margin: { bottom: 8, right: 8 },
- ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
- },
- leaderBorderOpacity: 0.7,
- leaderBorderWidth: 2.0,
- tabBar: tabBar(colorScheme),
- modal: {
- margin: {
- bottom: 52,
- top: 52,
- },
- cursor: "Arrow",
- },
- sidebar: {
- initialSize: 240,
- border: border(layer, { left: true, right: true }),
- },
- paneDivider: {
- color: borderColor(layer),
- width: 1,
- },
- statusBar: statusBar(colorScheme),
- titlebar: {
- itemSpacing,
- facePileSpacing: 2,
- height: 33, // 32px + 1px for overlaid border
- background: background(layer),
- border: border(layer, { bottom: true, overlay: true }),
- padding: {
- left: 80,
- right: itemSpacing,
- },
-
- // Project
- title: text(layer, "sans", "variant"),
-
- // Collaborators
- leaderAvatar: {
- width: avatarWidth,
- outerWidth: avatarOuterWidth,
- cornerRadius: avatarWidth / 2,
- outerCornerRadius: avatarOuterWidth / 2,
- },
- followerAvatar: {
- width: followerAvatarWidth,
- outerWidth: followerAvatarOuterWidth,
- cornerRadius: followerAvatarWidth / 2,
- outerCornerRadius: followerAvatarOuterWidth / 2,
- },
- inactiveAvatarGrayscale: true,
- followerAvatarOverlap: 8,
- leaderSelection: {
- margin: {
- top: 4,
- bottom: 4,
- },
+ const layer = colorScheme.lowest
+ const itemSpacing = 8
+ const titlebarButton = {
+ cornerRadius: 6,
padding: {
- left: 2,
- right: 2,
- top: 4,
- bottom: 4,
+ top: 1,
+ bottom: 1,
+ left: 8,
+ right: 8,
},
- cornerRadius: 6,
- },
- avatarRibbon: {
- height: 3,
- width: 12,
- // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
- },
-
- // Sign in buttom
- // FlatButton, Variant
- signInPrompt: {
- ...titlebarButton,
- },
-
- // Offline Indicator
- offlineIcon: {
- color: foreground(layer, "variant"),
- width: 16,
- margin: {
- left: itemSpacing,
+ ...text(layer, "sans", "variant", { size: "xs" }),
+ background: background(layer, "variant"),
+ border: border(layer),
+ hover: {
+ ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+ background: background(layer, "variant", "hovered"),
+ border: border(layer, "variant", "hovered"),
},
- padding: {
- right: 4,
+ clicked: {
+ ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
+ background: background(layer, "variant", "pressed"),
+ border: border(layer, "variant", "pressed"),
+ },
+ active: {
+ ...text(layer, "sans", "variant", "active", { size: "xs" }),
+ background: background(layer, "variant", "active"),
+ border: border(layer, "variant", "active"),
},
- },
+ }
+ const avatarWidth = 18
+ const avatarOuterWidth = avatarWidth + 4
+ const followerAvatarWidth = 14
+ const followerAvatarOuterWidth = followerAvatarWidth + 4
- // Notice that the collaboration server is out of date
- outdatedWarning: {
- ...text(layer, "sans", "warning", { size: "xs" }),
- background: withOpacity(background(layer, "warning"), 0.3),
- border: border(layer, "warning"),
- margin: {
- left: itemSpacing,
+ return {
+ background: background(layer),
+ joiningProjectAvatar: {
+ cornerRadius: 40,
+ width: 80,
},
- padding: {
- left: 8,
- right: 8,
+ joiningProjectMessage: {
+ padding: 12,
+ ...text(layer, "sans", { size: "lg" }),
},
- cornerRadius: 6,
- },
- callControl: {
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 12,
- buttonWidth: 20,
- hover: {
- background: background(layer, "variant", "hovered"),
- color: foreground(layer, "variant", "hovered"),
+ externalLocationMessage: {
+ background: background(colorScheme.middle, "accent"),
+ border: border(colorScheme.middle, "accent"),
+ cornerRadius: 6,
+ padding: 12,
+ margin: { bottom: 8, right: 8 },
+ ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
},
- },
- toggleContactsButton: {
- margin: { left: itemSpacing },
- cornerRadius: 6,
- color: foreground(layer, "variant"),
- iconWidth: 8,
- buttonWidth: 20,
- active: {
- background: background(layer, "variant", "active"),
- color: foreground(layer, "variant", "active"),
+ leaderBorderOpacity: 0.7,
+ leaderBorderWidth: 2.0,
+ tabBar: tabBar(colorScheme),
+ modal: {
+ margin: {
+ bottom: 52,
+ top: 52,
+ },
+ cursor: "Arrow",
},
- clicked: {
- background: background(layer, "variant", "pressed"),
- color: foreground(layer, "variant", "pressed"),
+ sidebar: {
+ initialSize: 240,
+ border: border(layer, { left: true, right: true }),
},
- hover: {
- background: background(layer, "variant", "hovered"),
- color: foreground(layer, "variant", "hovered"),
+ paneDivider: {
+ color: borderColor(layer),
+ width: 1,
},
- },
- userMenuButton: {
- buttonWidth: 20,
- iconWidth: 12,
- ...titlebarButton,
- },
- toggleContactsBadge: {
- cornerRadius: 3,
- padding: 2,
- margin: { top: 3, left: 3 },
- border: border(layer),
- background: foreground(layer, "accent"),
- },
- shareButton: {
- ...titlebarButton,
- },
- },
+ statusBar: statusBar(colorScheme),
+ titlebar: {
+ itemSpacing,
+ facePileSpacing: 2,
+ height: 33, // 32px + 1px for overlaid border
+ background: background(layer),
+ border: border(layer, { bottom: true, overlay: true }),
+ padding: {
+ left: 80,
+ right: itemSpacing,
+ },
- toolbar: {
- height: 34,
- background: background(colorScheme.highest),
- border: border(colorScheme.highest, { bottom: true }),
- itemSpacing: 8,
- navButton: {
- color: foreground(colorScheme.highest, "on"),
- iconWidth: 12,
- buttonWidth: 24,
- cornerRadius: 6,
- hover: {
- color: foreground(colorScheme.highest, "on", "hovered"),
- background: background(colorScheme.highest, "on", "hovered"),
+ // Project
+ title: text(layer, "sans", "variant"),
+
+ // Collaborators
+ leaderAvatar: {
+ width: avatarWidth,
+ outerWidth: avatarOuterWidth,
+ cornerRadius: avatarWidth / 2,
+ outerCornerRadius: avatarOuterWidth / 2,
+ },
+ followerAvatar: {
+ width: followerAvatarWidth,
+ outerWidth: followerAvatarOuterWidth,
+ cornerRadius: followerAvatarWidth / 2,
+ outerCornerRadius: followerAvatarOuterWidth / 2,
+ },
+ inactiveAvatarGrayscale: true,
+ followerAvatarOverlap: 8,
+ leaderSelection: {
+ margin: {
+ top: 4,
+ bottom: 4,
+ },
+ padding: {
+ left: 2,
+ right: 2,
+ top: 4,
+ bottom: 4,
+ },
+ cornerRadius: 6,
+ },
+ avatarRibbon: {
+ height: 3,
+ width: 12,
+ // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
+ },
+
+ // Sign in buttom
+ // FlatButton, Variant
+ signInPrompt: {
+ ...titlebarButton,
+ },
+
+ // Offline Indicator
+ offlineIcon: {
+ color: foreground(layer, "variant"),
+ width: 16,
+ margin: {
+ left: itemSpacing,
+ },
+ padding: {
+ right: 4,
+ },
+ },
+
+ // Notice that the collaboration server is out of date
+ outdatedWarning: {
+ ...text(layer, "sans", "warning", { size: "xs" }),
+ background: withOpacity(background(layer, "warning"), 0.3),
+ border: border(layer, "warning"),
+ margin: {
+ left: itemSpacing,
+ },
+ padding: {
+ left: 8,
+ right: 8,
+ },
+ cornerRadius: 6,
+ },
+ callControl: {
+ cornerRadius: 6,
+ color: foreground(layer, "variant"),
+ iconWidth: 12,
+ buttonWidth: 20,
+ hover: {
+ background: background(layer, "variant", "hovered"),
+ color: foreground(layer, "variant", "hovered"),
+ },
+ },
+ toggleContactsButton: {
+ margin: { left: itemSpacing },
+ cornerRadius: 6,
+ color: foreground(layer, "variant"),
+ iconWidth: 8,
+ buttonWidth: 20,
+ active: {
+ background: background(layer, "variant", "active"),
+ color: foreground(layer, "variant", "active"),
+ },
+ clicked: {
+ background: background(layer, "variant", "pressed"),
+ color: foreground(layer, "variant", "pressed"),
+ },
+ hover: {
+ background: background(layer, "variant", "hovered"),
+ color: foreground(layer, "variant", "hovered"),
+ },
+ },
+ userMenuButton: {
+ buttonWidth: 20,
+ iconWidth: 12,
+ ...titlebarButton,
+ },
+ toggleContactsBadge: {
+ cornerRadius: 3,
+ padding: 2,
+ margin: { top: 3, left: 3 },
+ border: border(layer),
+ background: foreground(layer, "accent"),
+ },
+ shareButton: {
+ ...titlebarButton,
+ },
+ },
+
+ toolbar: {
+ height: 34,
+ background: background(colorScheme.highest),
+ border: border(colorScheme.highest, { bottom: true }),
+ itemSpacing: 8,
+ navButton: {
+ color: foreground(colorScheme.highest, "on"),
+ iconWidth: 12,
+ buttonWidth: 24,
+ cornerRadius: 6,
+ hover: {
+ color: foreground(colorScheme.highest, "on", "hovered"),
+ background: background(
+ colorScheme.highest,
+ "on",
+ "hovered"
+ ),
+ },
+ disabled: {
+ color: foreground(colorScheme.highest, "on", "disabled"),
+ },
+ },
+ padding: { left: 8, right: 8, top: 4, bottom: 4 },
+ },
+ breadcrumbs: {
+ ...text(layer, "mono", "variant"),
+ padding: { left: 6 },
+ },
+ disconnectedOverlay: {
+ ...text(layer, "sans"),
+ background: withOpacity(background(layer), 0.8),
+ },
+ notification: {
+ margin: { top: 10 },
+ background: background(colorScheme.middle),
+ cornerRadius: 6,
+ padding: 12,
+ border: border(colorScheme.middle),
+ shadow: colorScheme.popoverShadow,
+ },
+ notifications: {
+ width: 400,
+ margin: { right: 10, bottom: 10 },
},
- disabled: {
- color: foreground(colorScheme.highest, "on", "disabled"),
+ dock: {
+ initialSizeRight: 640,
+ initialSizeBottom: 480,
+ wash_color: withOpacity(background(colorScheme.highest), 0.5),
+ panel: {
+ border: border(colorScheme.middle),
+ },
+ maximized: {
+ margin: 32,
+ border: border(colorScheme.highest, { overlay: true }),
+ shadow: colorScheme.modalShadow,
+ },
},
- },
- padding: { left: 8, right: 8, top: 4, bottom: 4 },
- },
- breadcrumbs: {
- ...text(layer, "mono", "variant"),
- padding: { left: 6 },
- },
- disconnectedOverlay: {
- ...text(layer, "sans"),
- background: withOpacity(background(layer), 0.8),
- },
- notification: {
- margin: { top: 10 },
- background: background(colorScheme.middle),
- cornerRadius: 6,
- padding: 12,
- border: border(colorScheme.middle),
- shadow: colorScheme.popoverShadow,
- },
- notifications: {
- width: 400,
- margin: { right: 10, bottom: 10 },
- },
- dock: {
- initialSizeRight: 640,
- initialSizeBottom: 480,
- wash_color: withOpacity(background(colorScheme.highest), 0.5),
- panel: {
- border: border(colorScheme.middle),
- },
- maximized: {
- margin: 32,
- border: border(colorScheme.highest, { overlay: true }),
- shadow: colorScheme.modalShadow,
- },
- },
- dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
- };
+ dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
+ }
}
styles/src/themes/andromeda.ts 🔗
@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Andromeda";
+const name = "Andromeda"
const ramps = {
- neutral: chroma
- .scale([
- "#1E2025",
- "#23262E",
- "#292E38",
- "#2E323C",
- "#ACA8AE",
- "#CBC9CF",
- "#E1DDE4",
- "#F7F7F8",
- ])
- .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
- red: colorRamp(chroma("#F92672")),
- orange: colorRamp(chroma("#F39C12")),
- yellow: colorRamp(chroma("#FFE66D")),
- green: colorRamp(chroma("#96E072")),
- cyan: colorRamp(chroma("#00E8C6")),
- blue: colorRamp(chroma("#0CA793")),
- violet: colorRamp(chroma("#8A3FA6")),
- magenta: colorRamp(chroma("#C74DED")),
-};
+ neutral: chroma
+ .scale([
+ "#1E2025",
+ "#23262E",
+ "#292E38",
+ "#2E323C",
+ "#ACA8AE",
+ "#CBC9CF",
+ "#E1DDE4",
+ "#F7F7F8",
+ ])
+ .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
+ red: colorRamp(chroma("#F92672")),
+ orange: colorRamp(chroma("#F39C12")),
+ yellow: colorRamp(chroma("#FFE66D")),
+ green: colorRamp(chroma("#96E072")),
+ cyan: colorRamp(chroma("#00E8C6")),
+ blue: colorRamp(chroma("#0CA793")),
+ violet: colorRamp(chroma("#8A3FA6")),
+ magenta: colorRamp(chroma("#C74DED")),
+}
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
- name,
- author: "EliverLara",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
- license_checksum: "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89"
- },
- url: "https://github.com/EliverLara/Andromeda"
-}
+ name,
+ author: "EliverLara",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/EliverLara/Andromeda/master/LICENSE.md",
+ license_checksum:
+ "2f7886f1a05cefc2c26f5e49de1a39fa4466413c1ccb06fc80960e73f5ed4b89",
+ },
+ url: "https://github.com/EliverLara/Andromeda",
+}
styles/src/themes/atelier-cave.ts 🔗
@@ -1,63 +1,63 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Atelier Cave";
+const name = "Atelier Cave"
export const dark = createColorScheme(`${name} Dark`, false, {
- neutral: chroma
- .scale([
- "#19171c",
- "#26232a",
- "#585260",
- "#655f6d",
- "#7e7887",
- "#8b8792",
- "#e2dfe7",
- "#efecf4",
- ])
- .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
- red: colorRamp(chroma("#be4678")),
- orange: colorRamp(chroma("#aa573c")),
- yellow: colorRamp(chroma("#a06e3b")),
- green: colorRamp(chroma("#2a9292")),
- cyan: colorRamp(chroma("#398bc6")),
- blue: colorRamp(chroma("#576ddb")),
- violet: colorRamp(chroma("#955ae7")),
- magenta: colorRamp(chroma("#bf40bf")),
-});
+ neutral: chroma
+ .scale([
+ "#19171c",
+ "#26232a",
+ "#585260",
+ "#655f6d",
+ "#7e7887",
+ "#8b8792",
+ "#e2dfe7",
+ "#efecf4",
+ ])
+ .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
+ red: colorRamp(chroma("#be4678")),
+ orange: colorRamp(chroma("#aa573c")),
+ yellow: colorRamp(chroma("#a06e3b")),
+ green: colorRamp(chroma("#2a9292")),
+ cyan: colorRamp(chroma("#398bc6")),
+ blue: colorRamp(chroma("#576ddb")),
+ violet: colorRamp(chroma("#955ae7")),
+ magenta: colorRamp(chroma("#bf40bf")),
+})
export const light = createColorScheme(`${name} Light`, true, {
- neutral: chroma
- .scale([
- "#19171c",
- "#26232a",
- "#585260",
- "#655f6d",
- "#7e7887",
- "#8b8792",
- "#e2dfe7",
- "#efecf4",
- ])
- .correctLightness(),
- red: colorRamp(chroma("#be4678")),
- orange: colorRamp(chroma("#aa573c")),
- yellow: colorRamp(chroma("#a06e3b")),
- green: colorRamp(chroma("#2a9292")),
- cyan: colorRamp(chroma("#398bc6")),
- blue: colorRamp(chroma("#576ddb")),
- violet: colorRamp(chroma("#955ae7")),
- magenta: colorRamp(chroma("#bf40bf")),
-});
-
+ neutral: chroma
+ .scale([
+ "#19171c",
+ "#26232a",
+ "#585260",
+ "#655f6d",
+ "#7e7887",
+ "#8b8792",
+ "#e2dfe7",
+ "#efecf4",
+ ])
+ .correctLightness(),
+ red: colorRamp(chroma("#be4678")),
+ orange: colorRamp(chroma("#aa573c")),
+ yellow: colorRamp(chroma("#a06e3b")),
+ green: colorRamp(chroma("#2a9292")),
+ cyan: colorRamp(chroma("#398bc6")),
+ blue: colorRamp(chroma("#576ddb")),
+ violet: colorRamp(chroma("#955ae7")),
+ magenta: colorRamp(chroma("#bf40bf")),
+})
export const meta: Meta = {
- name,
- author: "atelierbram",
- license: {
- SPDX: "MIT",
- https_url: "https://atelierbram.mit-license.org/license.txt",
- license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
- },
- url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/"
-}
+ name,
+ author: "atelierbram",
+ license: {
+ SPDX: "MIT",
+ https_url: "https://atelierbram.mit-license.org/license.txt",
+ license_checksum:
+ "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
+ },
+ url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
+}
styles/src/themes/atelier-sulphurpool.ts 🔗
@@ -1,42 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Atelier Sulphurpool";
+const name = "Atelier Sulphurpool"
const ramps = {
- neutral: chroma
- .scale([
- "#202746",
- "#293256",
- "#5e6687",
- "#6b7394",
- "#898ea4",
- "#979db4",
- "#dfe2f1",
- "#f5f7ff",
- ])
- .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
- red: colorRamp(chroma("#c94922")),
- orange: colorRamp(chroma("#c76b29")),
- yellow: colorRamp(chroma("#c08b30")),
- green: colorRamp(chroma("#ac9739")),
- cyan: colorRamp(chroma("#22a2c9")),
- blue: colorRamp(chroma("#3d8fd1")),
- violet: colorRamp(chroma("#6679cc")),
- magenta: colorRamp(chroma("#9c637a")),
-};
+ neutral: chroma
+ .scale([
+ "#202746",
+ "#293256",
+ "#5e6687",
+ "#6b7394",
+ "#898ea4",
+ "#979db4",
+ "#dfe2f1",
+ "#f5f7ff",
+ ])
+ .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
+ red: colorRamp(chroma("#c94922")),
+ orange: colorRamp(chroma("#c76b29")),
+ yellow: colorRamp(chroma("#c08b30")),
+ green: colorRamp(chroma("#ac9739")),
+ cyan: colorRamp(chroma("#22a2c9")),
+ blue: colorRamp(chroma("#3d8fd1")),
+ violet: colorRamp(chroma("#6679cc")),
+ magenta: colorRamp(chroma("#9c637a")),
+}
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Meta = {
- name,
- author: "atelierbram",
- license: {
- SPDX: "MIT",
- https_url: "https://atelierbram.mit-license.org/license.txt",
- license_checksum: "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5"
- },
- url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/"
-}
+ name,
+ author: "atelierbram",
+ license: {
+ SPDX: "MIT",
+ https_url: "https://atelierbram.mit-license.org/license.txt",
+ license_checksum:
+ "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
+ },
+ url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
+}
styles/src/themes/common/base16.ts 🔗
@@ -1,296 +0,0 @@
-// NOTE – This should be removed
-// I (Nate) need to come back and check if we are still using this anywhere
-
-import chroma, { Color, Scale } from "chroma-js";
-import { fontWeights } from "../../common";
-import { withOpacity } from "../../utils/color";
-import Theme, { buildPlayer, Syntax } from "./theme";
-
-export function colorRamp(color: Color): Scale {
- let hue = color.hsl()[0];
- let endColor = chroma.hsl(hue, 0.88, 0.96);
- let startColor = chroma.hsl(hue, 0.68, 0.12);
- return chroma.scale([startColor, color, endColor]).mode("hsl");
-}
-
-export function createTheme(
- name: string,
- isLight: boolean,
- color_ramps: { [rampName: string]: Scale }
-): Theme {
- let ramps: typeof color_ramps = {};
- // Chromajs mutates the underlying ramp when you call domain. This causes problems because
- // we now store the ramps object in the theme so that we can pull colors out of them.
- // So instead of calling domain and storing the result, we have to construct new ramps for each
- // theme so that we don't modify the passed in ramps.
- // This combined with an error in the type definitions for chroma js means we have to cast the colors
- // function to any in order to get the colors back out from the original ramps.
- if (isLight) {
- for (var rampName in color_ramps) {
- ramps[rampName] = chroma
- .scale((color_ramps[rampName].colors as any)())
- .domain([1, 0]);
- }
- ramps.neutral = chroma
- .scale((color_ramps.neutral.colors as any)())
- .domain([7, 0]);
- } else {
- for (var rampName in color_ramps) {
- ramps[rampName] = chroma
- .scale((color_ramps[rampName].colors as any)())
- .domain([0, 1]);
- }
- ramps.neutral = chroma
- .scale((color_ramps.neutral.colors as any)())
- .domain([0, 7]);
- }
-
- let blend = isLight ? 0.12 : 0.24;
-
- function sample(ramp: Scale, index: number): string {
- return ramp(index).hex();
- }
- const darkest = ramps.neutral(isLight ? 7 : 0).hex();
-
- const backgroundColor = {
- // Title bar
- 100: {
- base: sample(ramps.neutral, 1.25),
- hovered: sample(ramps.neutral, 1.5),
- active: sample(ramps.neutral, 1.75),
- },
- // Midground (panels, etc)
- 300: {
- base: sample(ramps.neutral, 1),
- hovered: sample(ramps.neutral, 1.25),
- active: sample(ramps.neutral, 1.5),
- },
- // Editor
- 500: {
- base: sample(ramps.neutral, 0),
- hovered: sample(ramps.neutral, 0.25),
- active: sample(ramps.neutral, 0.5),
- },
- on300: {
- base: sample(ramps.neutral, 0),
- hovered: sample(ramps.neutral, 0.5),
- active: sample(ramps.neutral, 1),
- },
- on500: {
- base: sample(ramps.neutral, 1),
- hovered: sample(ramps.neutral, 1.5),
- active: sample(ramps.neutral, 2),
- },
- ok: {
- base: withOpacity(sample(ramps.green, 0.5), 0.15),
- hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
- active: withOpacity(sample(ramps.green, 0.5), 0.25),
- },
- error: {
- base: withOpacity(sample(ramps.red, 0.5), 0.15),
- hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
- active: withOpacity(sample(ramps.red, 0.5), 0.25),
- },
- on500Error: {
- base: sample(ramps.red, 0.05),
- hovered: sample(ramps.red, 0.1),
- active: sample(ramps.red, 0.15),
- },
- warning: {
- base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
- hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
- active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
- },
- on500Warning: {
- base: sample(ramps.yellow, 0.05),
- hovered: sample(ramps.yellow, 0.1),
- active: sample(ramps.yellow, 0.15),
- },
- info: {
- base: withOpacity(sample(ramps.blue, 0.5), 0.15),
- hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
- active: withOpacity(sample(ramps.blue, 0.5), 0.25),
- },
- on500Info: {
- base: sample(ramps.blue, 0.05),
- hovered: sample(ramps.blue, 0.1),
- active: sample(ramps.blue, 0.15),
- },
- on500Ok: {
- base: sample(ramps.green, 0.05),
- hovered: sample(ramps.green, 0.1),
- active: sample(ramps.green, 0.15),
- },
- };
-
- const borderColor = {
- primary: sample(ramps.neutral, isLight ? 1.5 : 0),
- secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
- muted: sample(ramps.neutral, isLight ? 1.25 : 3),
- active: sample(ramps.neutral, isLight ? 4 : 3),
- onMedia: withOpacity(darkest, 0.1),
- ok: sample(ramps.green, 0.3),
- error: sample(ramps.red, 0.3),
- warning: sample(ramps.yellow, 0.3),
- info: sample(ramps.blue, 0.3),
- };
-
- const textColor = {
- primary: sample(ramps.neutral, 6),
- secondary: sample(ramps.neutral, 5),
- muted: sample(ramps.neutral, 4),
- placeholder: sample(ramps.neutral, 3),
- active: sample(ramps.neutral, 7),
- feature: sample(ramps.blue, 0.5),
- ok: sample(ramps.green, 0.5),
- error: sample(ramps.red, 0.5),
- warning: sample(ramps.yellow, 0.5),
- info: sample(ramps.blue, 0.5),
- onMedia: darkest,
- };
-
- const player = {
- 1: buildPlayer(sample(ramps.blue, 0.5)),
- 2: buildPlayer(sample(ramps.green, 0.5)),
- 3: buildPlayer(sample(ramps.magenta, 0.5)),
- 4: buildPlayer(sample(ramps.orange, 0.5)),
- 5: buildPlayer(sample(ramps.violet, 0.5)),
- 6: buildPlayer(sample(ramps.cyan, 0.5)),
- 7: buildPlayer(sample(ramps.red, 0.5)),
- 8: buildPlayer(sample(ramps.yellow, 0.5)),
- };
-
- const editor = {
- background: backgroundColor[500].base,
- indent_guide: borderColor.muted,
- indent_guide_active: borderColor.secondary,
- line: {
- active: sample(ramps.neutral, 1),
- highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
- },
- highlight: {
- selection: player[1].selectionColor,
- occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
- activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
- matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
- match: sample(ramps.violet, 0.15),
- activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
- related: backgroundColor[500].hovered,
- },
- gutter: {
- primary: textColor.placeholder,
- active: textColor.active,
- },
- };
-
- const syntax: Syntax = {
- primary: {
- color: sample(ramps.neutral, 7),
- weight: fontWeights.normal,
- },
- "variable.special": {
- color: sample(ramps.blue, 0.8),
- weight: fontWeights.normal,
- },
- comment: {
- color: sample(ramps.neutral, 5),
- weight: fontWeights.normal,
- },
- punctuation: {
- color: sample(ramps.neutral, 6),
- weight: fontWeights.normal,
- },
- constant: {
- color: sample(ramps.neutral, 4),
- weight: fontWeights.normal,
- },
- keyword: {
- color: sample(ramps.blue, 0.5),
- weight: fontWeights.normal,
- },
- function: {
- color: sample(ramps.yellow, 0.5),
- weight: fontWeights.normal,
- },
- type: {
- color: sample(ramps.cyan, 0.5),
- weight: fontWeights.normal,
- },
- constructor: {
- color: sample(ramps.cyan, 0.5),
- weight: fontWeights.normal,
- },
- property: {
- color: sample(ramps.blue, 0.6),
- weight: fontWeights.normal,
- },
- enum: {
- color: sample(ramps.orange, 0.5),
- weight: fontWeights.normal,
- },
- operator: {
- color: sample(ramps.orange, 0.5),
- weight: fontWeights.normal,
- },
- string: {
- color: sample(ramps.orange, 0.5),
- weight: fontWeights.normal,
- },
- number: {
- color: sample(ramps.green, 0.5),
- weight: fontWeights.normal,
- },
- boolean: {
- color: sample(ramps.green, 0.5),
- weight: fontWeights.normal,
- },
- predictive: {
- color: textColor.muted,
- weight: fontWeights.normal,
- },
- title: {
- color: sample(ramps.yellow, 0.5),
- weight: fontWeights.bold,
- },
- emphasis: {
- color: textColor.feature,
- weight: fontWeights.normal,
- },
- "emphasis.strong": {
- color: textColor.feature,
- weight: fontWeights.bold,
- },
- linkUri: {
- color: sample(ramps.green, 0.5),
- weight: fontWeights.normal,
- underline: true,
- },
- linkText: {
- color: sample(ramps.orange, 0.5),
- weight: fontWeights.normal,
- italic: true,
- },
- };
-
- const shadow = withOpacity(
- ramps
- .neutral(isLight ? 7 : 0)
- .darken()
- .hex(),
- blend
- );
-
- return {
- name,
- isLight,
- backgroundColor,
- borderColor,
- textColor,
- iconColor: textColor,
- editor,
- syntax,
- player,
- shadow,
- ramps,
- };
-}
styles/src/themes/common/colorScheme.ts 🔗
@@ -1,100 +1,100 @@
-import { Scale } from "chroma-js";
+import { Scale } from "chroma-js"
export interface ColorScheme {
- name: string;
- isLight: boolean;
+ name: string
+ isLight: boolean
- lowest: Layer;
- middle: Layer;
- highest: Layer;
+ lowest: Layer
+ middle: Layer
+ highest: Layer
- ramps: RampSet;
+ ramps: RampSet
- popoverShadow: Shadow;
- modalShadow: Shadow;
+ popoverShadow: Shadow
+ modalShadow: Shadow
- players: Players;
+ players: Players
}
export interface Meta {
- name: string,
- author: string,
- url: string,
- license: License
+ name: string
+ author: string
+ url: string
+ license: License
}
export interface License {
- SPDX: SPDXExpression,
- /// A url where we can download the license's text
- https_url: string,
- license_checksum: string
+ SPDX: SPDXExpression
+ /// A url where we can download the license's text
+ https_url: string
+ license_checksum: string
}
// License name -> License text
export interface Licenses {
- [key: string]: string
+ [key: string]: string
}
// FIXME: Add support for the SPDX expression syntax
-export type SPDXExpression = "MIT";
+export type SPDXExpression = "MIT"
export interface Player {
- cursor: string;
- selection: string;
+ cursor: string
+ selection: string
}
export interface Players {
- "0": Player;
- "1": Player;
- "2": Player;
- "3": Player;
- "4": Player;
- "5": Player;
- "6": Player;
- "7": Player;
+ "0": Player
+ "1": Player
+ "2": Player
+ "3": Player
+ "4": Player
+ "5": Player
+ "6": Player
+ "7": Player
}
export interface Shadow {
- blur: number;
- color: string;
- offset: number[];
+ blur: number
+ color: string
+ offset: number[]
}
-export type StyleSets = keyof Layer;
+export type StyleSets = keyof Layer
export interface Layer {
- base: StyleSet;
- variant: StyleSet;
- on: StyleSet;
- accent: StyleSet;
- positive: StyleSet;
- warning: StyleSet;
- negative: StyleSet;
+ base: StyleSet
+ variant: StyleSet
+ on: StyleSet
+ accent: StyleSet
+ positive: StyleSet
+ warning: StyleSet
+ negative: StyleSet
}
export interface RampSet {
- neutral: Scale;
- red: Scale;
- orange: Scale;
- yellow: Scale;
- green: Scale;
- cyan: Scale;
- blue: Scale;
- violet: Scale;
- magenta: Scale;
+ neutral: Scale
+ red: Scale
+ orange: Scale
+ yellow: Scale
+ green: Scale
+ cyan: Scale
+ blue: Scale
+ violet: Scale
+ magenta: Scale
}
-export type Styles = keyof StyleSet;
+export type Styles = keyof StyleSet
export interface StyleSet {
- default: Style;
- active: Style;
- disabled: Style;
- hovered: Style;
- pressed: Style;
- inverted: Style;
+ default: Style
+ active: Style
+ disabled: Style
+ hovered: Style
+ pressed: Style
+ inverted: Style
}
export interface Style {
- background: string;
- border: string;
- foreground: string;
+ background: string
+ border: string
+ foreground: string
}
styles/src/themes/common/ramps.ts 🔗
@@ -1,210 +1,212 @@
-import chroma, { Color, Scale } from "chroma-js";
+import chroma, { Color, Scale } from "chroma-js"
import {
- ColorScheme,
- Layer,
- Player,
- RampSet,
- Style,
- Styles,
- StyleSet,
-} from "./colorScheme";
+ ColorScheme,
+ Layer,
+ Player,
+ RampSet,
+ Style,
+ Styles,
+ StyleSet,
+} from "./colorScheme"
export function colorRamp(color: Color): Scale {
- let endColor = color.desaturate(1).brighten(5);
- let startColor = color.desaturate(1).darken(4);
- return chroma.scale([startColor, color, endColor]).mode("lab");
+ let endColor = color.desaturate(1).brighten(5)
+ let startColor = color.desaturate(1).darken(4)
+ return chroma.scale([startColor, color, endColor]).mode("lab")
}
export function createColorScheme(
- name: string,
- isLight: boolean,
- colorRamps: { [rampName: string]: Scale }
+ name: string,
+ isLight: boolean,
+ colorRamps: { [rampName: string]: Scale }
): ColorScheme {
- // Chromajs scales from 0 to 1 flipped if isLight is true
- let ramps: RampSet = {} as any;
-
- // Chromajs mutates the underlying ramp when you call domain. This causes problems because
- // we now store the ramps object in the theme so that we can pull colors out of them.
- // So instead of calling domain and storing the result, we have to construct new ramps for each
- // theme so that we don't modify the passed in ramps.
- // This combined with an error in the type definitions for chroma js means we have to cast the colors
- // function to any in order to get the colors back out from the original ramps.
- if (isLight) {
- for (var rampName in colorRamps) {
- (ramps as any)[rampName] = chroma.scale(
- colorRamps[rampName].colors(100).reverse()
- );
+ // Chromajs scales from 0 to 1 flipped if isLight is true
+ let ramps: RampSet = {} as any
+
+ // Chromajs mutates the underlying ramp when you call domain. This causes problems because
+ // we now store the ramps object in the theme so that we can pull colors out of them.
+ // So instead of calling domain and storing the result, we have to construct new ramps for each
+ // theme so that we don't modify the passed in ramps.
+ // This combined with an error in the type definitions for chroma js means we have to cast the colors
+ // function to any in order to get the colors back out from the original ramps.
+ if (isLight) {
+ for (var rampName in colorRamps) {
+ ;(ramps as any)[rampName] = chroma.scale(
+ colorRamps[rampName].colors(100).reverse()
+ )
+ }
+ ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse())
+ } else {
+ for (var rampName in colorRamps) {
+ ;(ramps as any)[rampName] = chroma.scale(
+ colorRamps[rampName].colors(100)
+ )
+ }
+ ramps.neutral = chroma.scale(colorRamps.neutral.colors(100))
+ }
+
+ let lowest = lowestLayer(ramps)
+ let middle = middleLayer(ramps)
+ let highest = highestLayer(ramps)
+
+ let popoverShadow = {
+ blur: 4,
+ color: ramps
+ .neutral(isLight ? 7 : 0)
+ .darken()
+ .alpha(0.2)
+ .hex(), // TODO used blend previously. Replace with something else
+ offset: [1, 2],
+ }
+
+ let modalShadow = {
+ blur: 16,
+ color: ramps
+ .neutral(isLight ? 7 : 0)
+ .darken()
+ .alpha(0.2)
+ .hex(), // TODO used blend previously. Replace with something else
+ offset: [0, 2],
+ }
+
+ let players = {
+ "0": player(ramps.blue),
+ "1": player(ramps.green),
+ "2": player(ramps.magenta),
+ "3": player(ramps.orange),
+ "4": player(ramps.violet),
+ "5": player(ramps.cyan),
+ "6": player(ramps.red),
+ "7": player(ramps.yellow),
}
- ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse());
- } else {
- for (var rampName in colorRamps) {
- (ramps as any)[rampName] = chroma.scale(colorRamps[rampName].colors(100));
+
+ return {
+ name,
+ isLight,
+
+ ramps,
+
+ lowest,
+ middle,
+ highest,
+
+ popoverShadow,
+ modalShadow,
+
+ players,
}
- ramps.neutral = chroma.scale(colorRamps.neutral.colors(100));
- }
-
- let lowest = lowestLayer(ramps);
- let middle = middleLayer(ramps);
- let highest = highestLayer(ramps);
-
- let popoverShadow = {
- blur: 4,
- color: ramps
- .neutral(isLight ? 7 : 0)
- .darken()
- .alpha(0.2)
- .hex(), // TODO used blend previously. Replace with something else
- offset: [1, 2],
- };
-
- let modalShadow = {
- blur: 16,
- color: ramps
- .neutral(isLight ? 7 : 0)
- .darken()
- .alpha(0.2)
- .hex(), // TODO used blend previously. Replace with something else
- offset: [0, 2],
- };
-
- let players = {
- "0": player(ramps.blue),
- "1": player(ramps.green),
- "2": player(ramps.magenta),
- "3": player(ramps.orange),
- "4": player(ramps.violet),
- "5": player(ramps.cyan),
- "6": player(ramps.red),
- "7": player(ramps.yellow),
- };
-
- return {
- name,
- isLight,
-
- ramps,
-
- lowest,
- middle,
- highest,
-
- popoverShadow,
- modalShadow,
-
- players,
- };
}
function player(ramp: Scale): Player {
- return {
- selection: ramp(0.5).alpha(0.24).hex(),
- cursor: ramp(0.5).hex(),
- };
+ return {
+ selection: ramp(0.5).alpha(0.24).hex(),
+ cursor: ramp(0.5).hex(),
+ }
}
function lowestLayer(ramps: RampSet): Layer {
- return {
- base: buildStyleSet(ramps.neutral, 0.2, 1),
- variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
- on: buildStyleSet(ramps.neutral, 0.1, 1),
- accent: buildStyleSet(ramps.blue, 0.1, 0.5),
- positive: buildStyleSet(ramps.green, 0.1, 0.5),
- warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
- negative: buildStyleSet(ramps.red, 0.1, 0.5),
- };
+ return {
+ base: buildStyleSet(ramps.neutral, 0.2, 1),
+ variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
+ on: buildStyleSet(ramps.neutral, 0.1, 1),
+ accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+ positive: buildStyleSet(ramps.green, 0.1, 0.5),
+ warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+ negative: buildStyleSet(ramps.red, 0.1, 0.5),
+ }
}
function middleLayer(ramps: RampSet): Layer {
- return {
- base: buildStyleSet(ramps.neutral, 0.1, 1),
- variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
- on: buildStyleSet(ramps.neutral, 0, 1),
- accent: buildStyleSet(ramps.blue, 0.1, 0.5),
- positive: buildStyleSet(ramps.green, 0.1, 0.5),
- warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
- negative: buildStyleSet(ramps.red, 0.1, 0.5),
- };
+ return {
+ base: buildStyleSet(ramps.neutral, 0.1, 1),
+ variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
+ on: buildStyleSet(ramps.neutral, 0, 1),
+ accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+ positive: buildStyleSet(ramps.green, 0.1, 0.5),
+ warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+ negative: buildStyleSet(ramps.red, 0.1, 0.5),
+ }
}
function highestLayer(ramps: RampSet): Layer {
- return {
- base: buildStyleSet(ramps.neutral, 0, 1),
- variant: buildStyleSet(ramps.neutral, 0, 0.7),
- on: buildStyleSet(ramps.neutral, 0.1, 1),
- accent: buildStyleSet(ramps.blue, 0.1, 0.5),
- positive: buildStyleSet(ramps.green, 0.1, 0.5),
- warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
- negative: buildStyleSet(ramps.red, 0.1, 0.5),
- };
+ return {
+ base: buildStyleSet(ramps.neutral, 0, 1),
+ variant: buildStyleSet(ramps.neutral, 0, 0.7),
+ on: buildStyleSet(ramps.neutral, 0.1, 1),
+ accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+ positive: buildStyleSet(ramps.green, 0.1, 0.5),
+ warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+ negative: buildStyleSet(ramps.red, 0.1, 0.5),
+ }
}
function buildStyleSet(
- ramp: Scale,
- backgroundBase: number,
- foregroundBase: number,
- step: number = 0.08
+ ramp: Scale,
+ backgroundBase: number,
+ foregroundBase: number,
+ step: number = 0.08
): StyleSet {
- let styleDefinitions = buildStyleDefinition(
- backgroundBase,
- foregroundBase,
- step
- );
-
- function colorString(indexOrColor: number | Color): string {
- if (typeof indexOrColor === "number") {
- return ramp(indexOrColor).hex();
- } else {
- return indexOrColor.hex();
+ let styleDefinitions = buildStyleDefinition(
+ backgroundBase,
+ foregroundBase,
+ step
+ )
+
+ function colorString(indexOrColor: number | Color): string {
+ if (typeof indexOrColor === "number") {
+ return ramp(indexOrColor).hex()
+ } else {
+ return indexOrColor.hex()
+ }
+ }
+
+ function buildStyle(style: Styles): Style {
+ return {
+ background: colorString(styleDefinitions.background[style]),
+ border: colorString(styleDefinitions.border[style]),
+ foreground: colorString(styleDefinitions.foreground[style]),
+ }
}
- }
- function buildStyle(style: Styles): Style {
return {
- background: colorString(styleDefinitions.background[style]),
- border: colorString(styleDefinitions.border[style]),
- foreground: colorString(styleDefinitions.foreground[style]),
- };
- }
-
- return {
- default: buildStyle("default"),
- hovered: buildStyle("hovered"),
- pressed: buildStyle("pressed"),
- active: buildStyle("active"),
- disabled: buildStyle("disabled"),
- inverted: buildStyle("inverted"),
- };
+ default: buildStyle("default"),
+ hovered: buildStyle("hovered"),
+ pressed: buildStyle("pressed"),
+ active: buildStyle("active"),
+ disabled: buildStyle("disabled"),
+ inverted: buildStyle("inverted"),
+ }
}
function buildStyleDefinition(
- bgBase: number,
- fgBase: number,
- step: number = 0.08
+ bgBase: number,
+ fgBase: number,
+ step: number = 0.08
) {
- return {
- background: {
- default: bgBase,
- hovered: bgBase + step,
- pressed: bgBase + step * 1.5,
- active: bgBase + step * 2.2,
- disabled: bgBase,
- inverted: fgBase + step * 6,
- },
- border: {
- default: bgBase + step * 1,
- hovered: bgBase + step,
- pressed: bgBase + step,
- active: bgBase + step * 3,
- disabled: bgBase + step * 0.5,
- inverted: bgBase - step * 3,
- },
- foreground: {
- default: fgBase,
- hovered: fgBase,
- pressed: fgBase,
- active: fgBase + step * 6,
- disabled: bgBase + step * 4,
- inverted: bgBase + step * 2,
- },
- };
+ return {
+ background: {
+ default: bgBase,
+ hovered: bgBase + step,
+ pressed: bgBase + step * 1.5,
+ active: bgBase + step * 2.2,
+ disabled: bgBase,
+ inverted: fgBase + step * 6,
+ },
+ border: {
+ default: bgBase + step * 1,
+ hovered: bgBase + step,
+ pressed: bgBase + step,
+ active: bgBase + step * 3,
+ disabled: bgBase + step * 0.5,
+ inverted: bgBase - step * 3,
+ },
+ foreground: {
+ default: fgBase,
+ hovered: fgBase,
+ pressed: fgBase,
+ active: fgBase + step * 6,
+ disabled: bgBase + step * 4,
+ inverted: bgBase + step * 2,
+ },
+ }
}
styles/src/themes/common/theme.ts 🔗
@@ -1,165 +0,0 @@
-import { Scale } from "chroma-js";
-import { FontWeight } from "../../common";
-import { withOpacity } from "../../utils/color";
-
-export interface SyntaxHighlightStyle {
- color: string;
- weight?: FontWeight;
- underline?: boolean;
- italic?: boolean;
-}
-
-export interface Player {
- baseColor: string;
- cursorColor: string;
- selectionColor: string;
- borderColor: string;
-}
-export function buildPlayer(
- color: string,
- cursorOpacity?: number,
- selectionOpacity?: number,
- borderOpacity?: number
-) {
- return {
- baseColor: color,
- cursorColor: withOpacity(color, cursorOpacity || 1.0),
- selectionColor: withOpacity(color, selectionOpacity || 0.24),
- borderColor: withOpacity(color, borderOpacity || 0.8),
- };
-}
-
-export interface BackgroundColorSet {
- base: string;
- hovered: string;
- active: string;
-}
-
-export interface Syntax {
- primary: SyntaxHighlightStyle;
- comment: SyntaxHighlightStyle;
- punctuation: SyntaxHighlightStyle;
- constant: SyntaxHighlightStyle;
- keyword: SyntaxHighlightStyle;
- function: SyntaxHighlightStyle;
- type: SyntaxHighlightStyle;
- constructor: SyntaxHighlightStyle;
- property: SyntaxHighlightStyle;
- enum: SyntaxHighlightStyle;
- operator: SyntaxHighlightStyle;
- string: SyntaxHighlightStyle;
- number: SyntaxHighlightStyle;
- boolean: SyntaxHighlightStyle;
- predictive: SyntaxHighlightStyle;
- title: SyntaxHighlightStyle;
- emphasis: SyntaxHighlightStyle;
- linkUri: SyntaxHighlightStyle;
- linkText: SyntaxHighlightStyle;
-
- [key: string]: SyntaxHighlightStyle;
-}
-
-export default interface Theme {
- name: string;
- isLight: boolean;
- backgroundColor: {
- // Basically just Title Bar
- // Lowest background level
- 100: BackgroundColorSet;
- // Tab bars, panels, popovers
- // Mid-ground
- 300: BackgroundColorSet;
- // The editor
- // Foreground
- 500: BackgroundColorSet;
- // Hacks for elements on top of the midground
- // Buttons in a panel, tab bar, or panel
- on300: BackgroundColorSet;
- // Hacks for elements on top of the editor
- on500: BackgroundColorSet;
- ok: BackgroundColorSet;
- on500Ok: BackgroundColorSet;
- error: BackgroundColorSet;
- on500Error: BackgroundColorSet;
- warning: BackgroundColorSet;
- on500Warning: BackgroundColorSet;
- info: BackgroundColorSet;
- on500Info: BackgroundColorSet;
- };
- borderColor: {
- primary: string;
- secondary: string;
- muted: string;
- active: string;
- /**
- * Used for rendering borders on top of media like avatars, images, video, etc.
- */
- onMedia: string;
- ok: string;
- error: string;
- warning: string;
- info: string;
- };
- textColor: {
- primary: string;
- secondary: string;
- muted: string;
- placeholder: string;
- active: string;
- feature: string;
- ok: string;
- error: string;
- warning: string;
- info: string;
- onMedia: string;
- };
- iconColor: {
- primary: string;
- secondary: string;
- muted: string;
- placeholder: string;
- active: string;
- feature: string;
- ok: string;
- error: string;
- warning: string;
- info: string;
- };
- editor: {
- background: string;
- indent_guide: string;
- indent_guide_active: string;
- line: {
- active: string;
- highlighted: string;
- };
- highlight: {
- selection: string;
- occurrence: string;
- activeOccurrence: string;
- matchingBracket: string;
- match: string;
- activeMatch: string;
- related: string;
- };
- gutter: {
- primary: string;
- active: string;
- };
- };
-
- syntax: Syntax;
-
- player: {
- 1: Player;
- 2: Player;
- 3: Player;
- 4: Player;
- 5: Player;
- 6: Player;
- 7: Player;
- 8: Player;
- };
- shadow: string;
- ramps: { [rampName: string]: Scale };
-}
styles/src/themes/one-dark.ts 🔗
@@ -1,40 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "One Dark";
+const name = "One Dark"
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma
- .scale([
- "#282c34",
- "#353b45",
- "#3e4451",
- "#545862",
- "#565c64",
- "#abb2bf",
- "#b6bdca",
- "#c8ccd4",
- ])
- .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
+ neutral: chroma
+ .scale([
+ "#282c34",
+ "#353b45",
+ "#3e4451",
+ "#545862",
+ "#565c64",
+ "#abb2bf",
+ "#b6bdca",
+ "#c8ccd4",
+ ])
+ .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
- red: colorRamp(chroma("#e06c75")),
- orange: colorRamp(chroma("#d19a66")),
- yellow: colorRamp(chroma("#e5c07b")),
- green: colorRamp(chroma("#98c379")),
- cyan: colorRamp(chroma("#56b6c2")),
- blue: colorRamp(chroma("#61afef")),
- violet: colorRamp(chroma("#c678dd")),
- magenta: colorRamp(chroma("#be5046")),
-});
+ red: colorRamp(chroma("#e06c75")),
+ orange: colorRamp(chroma("#d19a66")),
+ yellow: colorRamp(chroma("#e5c07b")),
+ green: colorRamp(chroma("#98c379")),
+ cyan: colorRamp(chroma("#56b6c2")),
+ blue: colorRamp(chroma("#61afef")),
+ violet: colorRamp(chroma("#c678dd")),
+ magenta: colorRamp(chroma("#be5046")),
+})
export const meta: Meta = {
- name,
- author: "simurai",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
- license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8"
- },
- url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui"
+ name,
+ author: "simurai",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
+ license_checksum:
+ "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
+ },
+ url: "https://github.com/atom/atom/tree/master/packages/one-dark-ui",
}
styles/src/themes/one-light.ts 🔗
@@ -1,39 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "One Light";
+const name = "One Light"
export const light = createColorScheme(`${name}`, true, {
- neutral: chroma.scale([
- "#090a0b",
- "#202227",
- "#383a42",
- "#696c77",
- "#a0a1a7",
- "#e5e5e6",
- "#f0f0f1",
- "#fafafa",
- ])
- .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
+ neutral: chroma
+ .scale([
+ "#090a0b",
+ "#202227",
+ "#383a42",
+ "#696c77",
+ "#a0a1a7",
+ "#e5e5e6",
+ "#f0f0f1",
+ "#fafafa",
+ ])
+ .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
- red: colorRamp(chroma("#ca1243")),
- orange: colorRamp(chroma("#d75f00")),
- yellow: colorRamp(chroma("#c18401")),
- green: colorRamp(chroma("#50a14f")),
- cyan: colorRamp(chroma("#0184bc")),
- blue: colorRamp(chroma("#4078f2")),
- violet: colorRamp(chroma("#a626a4")),
- magenta: colorRamp(chroma("#986801")),
-});
+ red: colorRamp(chroma("#ca1243")),
+ orange: colorRamp(chroma("#d75f00")),
+ yellow: colorRamp(chroma("#c18401")),
+ green: colorRamp(chroma("#50a14f")),
+ cyan: colorRamp(chroma("#0184bc")),
+ blue: colorRamp(chroma("#4078f2")),
+ violet: colorRamp(chroma("#a626a4")),
+ magenta: colorRamp(chroma("#986801")),
+})
export const meta: Meta = {
- name,
- author: "simurai",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
- license_checksum: "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8"
- },
- url: "https://github.com/atom/atom/tree/master/packages/one-light-ui"
+ name,
+ author: "simurai",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/atom/atom/master/packages/one-light-ui/LICENSE.md",
+ license_checksum:
+ "d5af8fc171f6f600c0ab4e7597dca398dda80dbe6821ce01cef78e859e7a00f8",
+ },
+ url: "https://github.com/atom/atom/tree/master/packages/one-light-ui",
}
styles/src/themes/rose-pine-dawn.ts 🔗
@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Rosé Pine Dawn";
+const name = "Rosé Pine Dawn"
const ramps = {
- neutral: chroma
- .scale([
- "#575279",
- "#797593",
- "#9893A5",
- "#B5AFB8",
- "#D3CCCC",
- "#F2E9E1",
- "#FFFAF3",
- "#FAF4ED",
- ])
- .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
- red: colorRamp(chroma("#B4637A")),
- orange: colorRamp(chroma("#D7827E")),
- yellow: colorRamp(chroma("#EA9D34")),
- green: colorRamp(chroma("#679967")),
- cyan: colorRamp(chroma("#286983")),
- blue: colorRamp(chroma("#56949F")),
- violet: colorRamp(chroma("#907AA9")),
- magenta: colorRamp(chroma("#79549F")),
-};
+ neutral: chroma
+ .scale([
+ "#575279",
+ "#797593",
+ "#9893A5",
+ "#B5AFB8",
+ "#D3CCCC",
+ "#F2E9E1",
+ "#FFFAF3",
+ "#FAF4ED",
+ ])
+ .domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
+ red: colorRamp(chroma("#B4637A")),
+ orange: colorRamp(chroma("#D7827E")),
+ yellow: colorRamp(chroma("#EA9D34")),
+ green: colorRamp(chroma("#679967")),
+ cyan: colorRamp(chroma("#286983")),
+ blue: colorRamp(chroma("#56949F")),
+ violet: colorRamp(chroma("#907AA9")),
+ magenta: colorRamp(chroma("#79549F")),
+}
-export const light = createColorScheme(`${name}`, true, ramps);
+export const light = createColorScheme(`${name}`, true, ramps)
export const meta: Meta = {
- name,
- author: "edunfelt",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
- license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
- },
- url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+ name,
+ author: "edunfelt",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+ license_checksum:
+ "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+ },
+ url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}
styles/src/themes/rose-pine-moon.ts 🔗
@@ -1,41 +1,43 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Rosé Pine Moon";
+const name = "Rosé Pine Moon"
const ramps = {
- neutral: chroma
- .scale([
- "#232136",
- "#2A273F",
- "#393552",
- "#3E3A53",
- "#56526C",
- "#6E6A86",
- "#908CAA",
- "#E0DEF4",
- ])
- .domain([0, 0.3, 0.55, 1]),
- red: colorRamp(chroma("#EB6F92")),
- orange: colorRamp(chroma("#EBBCBA")),
- yellow: colorRamp(chroma("#F6C177")),
- green: colorRamp(chroma("#8DBD8D")),
- cyan: colorRamp(chroma("#409BBE")),
- blue: colorRamp(chroma("#9CCFD8")),
- violet: colorRamp(chroma("#C4A7E7")),
- magenta: colorRamp(chroma("#AB6FE9")),
-};
+ neutral: chroma
+ .scale([
+ "#232136",
+ "#2A273F",
+ "#393552",
+ "#3E3A53",
+ "#56526C",
+ "#6E6A86",
+ "#908CAA",
+ "#E0DEF4",
+ ])
+ .domain([0, 0.3, 0.55, 1]),
+ red: colorRamp(chroma("#EB6F92")),
+ orange: colorRamp(chroma("#EBBCBA")),
+ yellow: colorRamp(chroma("#F6C177")),
+ green: colorRamp(chroma("#8DBD8D")),
+ cyan: colorRamp(chroma("#409BBE")),
+ blue: colorRamp(chroma("#9CCFD8")),
+ violet: colorRamp(chroma("#C4A7E7")),
+ magenta: colorRamp(chroma("#AB6FE9")),
+}
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
- name,
- author: "edunfelt",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
- license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
- },
- url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+ name,
+ author: "edunfelt",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+ license_checksum:
+ "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+ },
+ url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}
styles/src/themes/rose-pine.ts 🔗
@@ -1,39 +1,41 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Rosé Pine";
+const name = "Rosé Pine"
const ramps = {
- neutral: chroma.scale([
- "#191724",
- "#1f1d2e",
- "#26233A",
- "#3E3A53",
- "#56526C",
- "#6E6A86",
- "#908CAA",
- "#E0DEF4",
- ]),
- red: colorRamp(chroma("#EB6F92")),
- orange: colorRamp(chroma("#EBBCBA")),
- yellow: colorRamp(chroma("#F6C177")),
- green: colorRamp(chroma("#8DBD8D")),
- cyan: colorRamp(chroma("#409BBE")),
- blue: colorRamp(chroma("#9CCFD8")),
- violet: colorRamp(chroma("#C4A7E7")),
- magenta: colorRamp(chroma("#AB6FE9")),
-};
+ neutral: chroma.scale([
+ "#191724",
+ "#1f1d2e",
+ "#26233A",
+ "#3E3A53",
+ "#56526C",
+ "#6E6A86",
+ "#908CAA",
+ "#E0DEF4",
+ ]),
+ red: colorRamp(chroma("#EB6F92")),
+ orange: colorRamp(chroma("#EBBCBA")),
+ yellow: colorRamp(chroma("#F6C177")),
+ green: colorRamp(chroma("#8DBD8D")),
+ cyan: colorRamp(chroma("#409BBE")),
+ blue: colorRamp(chroma("#9CCFD8")),
+ violet: colorRamp(chroma("#C4A7E7")),
+ magenta: colorRamp(chroma("#AB6FE9")),
+}
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
- name,
- author: "edunfelt",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
- license_checksum: "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a"
- },
- url: "https://github.com/edunfelt/base16-rose-pine-scheme"
-}
+ name,
+ author: "edunfelt",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/edunfelt/base16-rose-pine-scheme/main/LICENSE",
+ license_checksum:
+ "6ca1b9da8c78c8441c5aa43d024a4e4a7bf59d1ecca1480196e94fda0f91ee4a",
+ },
+ url: "https://github.com/edunfelt/base16-rose-pine-scheme",
+}
styles/src/themes/sandcastle.ts 🔗
@@ -1,40 +1,41 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Sandcastle";
+const name = "Sandcastle"
const ramps = {
- neutral: chroma.scale([
- "#282c34",
- "#2c323b",
- "#3e4451",
- "#665c54",
- "#928374",
- "#a89984",
- "#d5c4a1",
- "#fdf4c1",
- ]),
- red: colorRamp(chroma("#B4637A")),
- orange: colorRamp(chroma("#a07e3b")),
- yellow: colorRamp(chroma("#a07e3b")),
- green: colorRamp(chroma("#83a598")),
- cyan: colorRamp(chroma("#83a598")),
- blue: colorRamp(chroma("#528b8b")),
- violet: colorRamp(chroma("#d75f5f")),
- magenta: colorRamp(chroma("#a87322")),
-};
+ neutral: chroma.scale([
+ "#282c34",
+ "#2c323b",
+ "#3e4451",
+ "#665c54",
+ "#928374",
+ "#a89984",
+ "#d5c4a1",
+ "#fdf4c1",
+ ]),
+ red: colorRamp(chroma("#B4637A")),
+ orange: colorRamp(chroma("#a07e3b")),
+ yellow: colorRamp(chroma("#a07e3b")),
+ green: colorRamp(chroma("#83a598")),
+ cyan: colorRamp(chroma("#83a598")),
+ blue: colorRamp(chroma("#528b8b")),
+ violet: colorRamp(chroma("#d75f5f")),
+ magenta: colorRamp(chroma("#a87322")),
+}
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
- name,
- author: "gessig",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
- license_checksum: "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc"
- },
- url: "https://github.com/gessig/base16-sandcastle-scheme"
+ name,
+ author: "gessig",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/gessig/base16-sandcastle-scheme/master/LICENSE",
+ license_checksum:
+ "8399d44b4d935b60be9fee0a76d7cc9a817b4f3f11574c9d6d1e8fd57e72ffdc",
+ },
+ url: "https://github.com/gessig/base16-sandcastle-scheme",
}
-
styles/src/themes/solarized.ts 🔗
@@ -1,43 +1,44 @@
-import chroma from "chroma-js";
-import { Meta as Metadata } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta as Metadata } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Solarized";
+const name = "Solarized"
const ramps = {
- neutral: chroma
- .scale([
- "#002b36",
- "#073642",
- "#586e75",
- "#657b83",
- "#839496",
- "#93a1a1",
- "#eee8d5",
- "#fdf6e3",
- ])
- .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
- red: colorRamp(chroma("#dc322f")),
- orange: colorRamp(chroma("#cb4b16")),
- yellow: colorRamp(chroma("#b58900")),
- green: colorRamp(chroma("#859900")),
- cyan: colorRamp(chroma("#2aa198")),
- blue: colorRamp(chroma("#268bd2")),
- violet: colorRamp(chroma("#6c71c4")),
- magenta: colorRamp(chroma("#d33682")),
-};
+ neutral: chroma
+ .scale([
+ "#002b36",
+ "#073642",
+ "#586e75",
+ "#657b83",
+ "#839496",
+ "#93a1a1",
+ "#eee8d5",
+ "#fdf6e3",
+ ])
+ .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
+ red: colorRamp(chroma("#dc322f")),
+ orange: colorRamp(chroma("#cb4b16")),
+ yellow: colorRamp(chroma("#b58900")),
+ green: colorRamp(chroma("#859900")),
+ cyan: colorRamp(chroma("#2aa198")),
+ blue: colorRamp(chroma("#268bd2")),
+ violet: colorRamp(chroma("#6c71c4")),
+ magenta: colorRamp(chroma("#d33682")),
+}
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
export const meta: Metadata = {
- name,
- author: "Ethan Schoonover",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
- license_checksum: "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6"
- },
- url: "https://github.com/altercation/solarized"
+ name,
+ author: "Ethan Schoonover",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/altercation/solarized/master/LICENSE",
+ license_checksum:
+ "494aefdabf86acce06bd63001ad8aedad4ee38da23509d3f917d95aa3368b9a6",
+ },
+ url: "https://github.com/altercation/solarized",
}
-
styles/src/themes/staff/abruzzo.ts 🔗
@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Abruzzo";
-const author = "slightknack <hey@isaac.sh>";
-const url = "https://github.com/slightknack";
+const name = "Abruzzo"
+const author = "slightknack <hey@isaac.sh>"
+const url = "https://github.com/slightknack"
const license = {
- type: "",
- url: ""
+ type: "",
+ url: "",
}
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#1b0d05",
- "#2c1e18",
- "#654035",
- "#9d5e4a",
- "#b37354",
- "#c1825a",
- "#dda66e",
- "#fbf3e2",
- ]),
- red: colorRamp(chroma("#e594c4")),
- orange: colorRamp(chroma("#d9e87e")),
- yellow: colorRamp(chroma("#fd9d83")),
- green: colorRamp(chroma("#96adf7")),
- cyan: colorRamp(chroma("#fc798f")),
- blue: colorRamp(chroma("#BCD0F5")),
- violet: colorRamp(chroma("#dac5eb")),
- magenta: colorRamp(chroma("#c1a3ef")),
-});
+ neutral: chroma.scale([
+ "#1b0d05",
+ "#2c1e18",
+ "#654035",
+ "#9d5e4a",
+ "#b37354",
+ "#c1825a",
+ "#dda66e",
+ "#fbf3e2",
+ ]),
+ red: colorRamp(chroma("#e594c4")),
+ orange: colorRamp(chroma("#d9e87e")),
+ yellow: colorRamp(chroma("#fd9d83")),
+ green: colorRamp(chroma("#96adf7")),
+ cyan: colorRamp(chroma("#fc798f")),
+ blue: colorRamp(chroma("#BCD0F5")),
+ violet: colorRamp(chroma("#dac5eb")),
+ magenta: colorRamp(chroma("#c1a3ef")),
+})
styles/src/themes/staff/atelier-dune.ts 🔗
@@ -1,34 +1,35 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Atelier Dune";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/";
+const name = "Atelier Dune"
+const author = "atelierbram"
+const url =
+ "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune/"
const license = {
- type: "MIT",
- url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+ type: "MIT",
+ url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
const ramps = {
- neutral: chroma.scale([
- "#20201d",
- "#292824",
- "#6e6b5e",
- "#7d7a68",
- "#999580",
- "#a6a28c",
- "#e8e4cf",
- "#fefbec",
- ]),
- red: colorRamp(chroma("#d73737")),
- orange: colorRamp(chroma("#b65611")),
- yellow: colorRamp(chroma("#ae9513")),
- green: colorRamp(chroma("#60ac39")),
- cyan: colorRamp(chroma("#1fad83")),
- blue: colorRamp(chroma("#6684e1")),
- violet: colorRamp(chroma("#b854d4")),
- magenta: colorRamp(chroma("#d43552")),
-};
+ neutral: chroma.scale([
+ "#20201d",
+ "#292824",
+ "#6e6b5e",
+ "#7d7a68",
+ "#999580",
+ "#a6a28c",
+ "#e8e4cf",
+ "#fefbec",
+ ]),
+ red: colorRamp(chroma("#d73737")),
+ orange: colorRamp(chroma("#b65611")),
+ yellow: colorRamp(chroma("#ae9513")),
+ green: colorRamp(chroma("#60ac39")),
+ cyan: colorRamp(chroma("#1fad83")),
+ blue: colorRamp(chroma("#6684e1")),
+ violet: colorRamp(chroma("#b854d4")),
+ magenta: colorRamp(chroma("#d43552")),
+}
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
styles/src/themes/staff/atelier-heath.ts 🔗
@@ -1,53 +1,54 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Atelier Heath";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/";
+const name = "Atelier Heath"
+const author = "atelierbram"
+const url =
+ "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/"
const license = {
- type: "MIT",
- url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+ type: "MIT",
+ url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Dark`, false, {
- neutral: chroma.scale([
- "#1b181b",
- "#292329",
- "#695d69",
- "#776977",
- "#9e8f9e",
- "#ab9bab",
- "#d8cad8",
- "#f7f3f7",
- ]),
- red: colorRamp(chroma("#ca402b")),
- orange: colorRamp(chroma("#a65926")),
- yellow: colorRamp(chroma("#bb8a35")),
- green: colorRamp(chroma("#918b3b")),
- cyan: colorRamp(chroma("#159393")),
- blue: colorRamp(chroma("#516aec")),
- violet: colorRamp(chroma("#7b59c0")),
- magenta: colorRamp(chroma("#cc33cc")),
-});
+ neutral: chroma.scale([
+ "#1b181b",
+ "#292329",
+ "#695d69",
+ "#776977",
+ "#9e8f9e",
+ "#ab9bab",
+ "#d8cad8",
+ "#f7f3f7",
+ ]),
+ red: colorRamp(chroma("#ca402b")),
+ orange: colorRamp(chroma("#a65926")),
+ yellow: colorRamp(chroma("#bb8a35")),
+ green: colorRamp(chroma("#918b3b")),
+ cyan: colorRamp(chroma("#159393")),
+ blue: colorRamp(chroma("#516aec")),
+ violet: colorRamp(chroma("#7b59c0")),
+ magenta: colorRamp(chroma("#cc33cc")),
+})
export const light = createColorScheme(`${name} Light`, true, {
- neutral: chroma.scale([
- "#161b1d",
- "#1f292e",
- "#516d7b",
- "#5a7b8c",
- "#7195a8",
- "#7ea2b4",
- "#c1e4f6",
- "#ebf8ff",
- ]),
- red: colorRamp(chroma("#d22d72")),
- orange: colorRamp(chroma("#935c25")),
- yellow: colorRamp(chroma("#8a8a0f")),
- green: colorRamp(chroma("#568c3b")),
- cyan: colorRamp(chroma("#2d8f6f")),
- blue: colorRamp(chroma("#257fad")),
- violet: colorRamp(chroma("#6b6bb8")),
- magenta: colorRamp(chroma("#b72dd2")),
-});
+ neutral: chroma.scale([
+ "#161b1d",
+ "#1f292e",
+ "#516d7b",
+ "#5a7b8c",
+ "#7195a8",
+ "#7ea2b4",
+ "#c1e4f6",
+ "#ebf8ff",
+ ]),
+ red: colorRamp(chroma("#d22d72")),
+ orange: colorRamp(chroma("#935c25")),
+ yellow: colorRamp(chroma("#8a8a0f")),
+ green: colorRamp(chroma("#568c3b")),
+ cyan: colorRamp(chroma("#2d8f6f")),
+ blue: colorRamp(chroma("#257fad")),
+ violet: colorRamp(chroma("#6b6bb8")),
+ magenta: colorRamp(chroma("#b72dd2")),
+})
styles/src/themes/staff/atelier-seaside.ts 🔗
@@ -1,34 +1,35 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Atelier Seaside";
-const author = "atelierbram";
-const url = "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/";
+const name = "Atelier Seaside"
+const author = "atelierbram"
+const url =
+ "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/"
const license = {
- type: "MIT",
- url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
-};
+ type: "MIT",
+ url: "https://github.com/atelierbram/syntax-highlighting/blob/master/LICENSE",
+}
const ramps = {
- neutral: chroma.scale([
- "#131513",
- "#242924",
- "#5e6e5e",
- "#687d68",
- "#809980",
- "#8ca68c",
- "#cfe8cf",
- "#f4fbf4",
- ]),
- red: colorRamp(chroma("#e6193c")),
- orange: colorRamp(chroma("#87711d")),
- yellow: colorRamp(chroma("#98981b")),
- green: colorRamp(chroma("#29a329")),
- cyan: colorRamp(chroma("#1999b3")),
- blue: colorRamp(chroma("#3d62f5")),
- violet: colorRamp(chroma("#ad2bee")),
- magenta: colorRamp(chroma("#e619c3")),
-};
+ neutral: chroma.scale([
+ "#131513",
+ "#242924",
+ "#5e6e5e",
+ "#687d68",
+ "#809980",
+ "#8ca68c",
+ "#cfe8cf",
+ "#f4fbf4",
+ ]),
+ red: colorRamp(chroma("#e6193c")),
+ orange: colorRamp(chroma("#87711d")),
+ yellow: colorRamp(chroma("#98981b")),
+ green: colorRamp(chroma("#29a329")),
+ cyan: colorRamp(chroma("#1999b3")),
+ blue: colorRamp(chroma("#3d62f5")),
+ violet: colorRamp(chroma("#ad2bee")),
+ magenta: colorRamp(chroma("#e619c3")),
+}
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
styles/src/themes/staff/ayu-mirage.ts 🔗
@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Ayu";
-const author = "Konstantin Pschera <me@kons.ch>";
-const url = "https://github.com/ayu-theme/ayu-colors";
+const name = "Ayu"
+const author = "Konstantin Pschera <me@kons.ch>"
+const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
- type: "MIT",
- url: "https://github.com/ayu-theme/ayu-colors/blob/master/license"
+ type: "MIT",
+ url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Mirage`, false, {
- neutral: chroma.scale([
- "#171B24",
- "#1F2430",
- "#242936",
- "#707A8C",
- "#8A9199",
- "#CCCAC2",
- "#D9D7CE",
- "#F3F4F5",
- ]),
- red: colorRamp(chroma("#F28779")),
- orange: colorRamp(chroma("#FFAD66")),
- yellow: colorRamp(chroma("#FFD173")),
- green: colorRamp(chroma("#D5FF80")),
- cyan: colorRamp(chroma("#95E6CB")),
- blue: colorRamp(chroma("#5CCFE6")),
- violet: colorRamp(chroma("#D4BFFF")),
- magenta: colorRamp(chroma("#F29E74")),
-});
+ neutral: chroma.scale([
+ "#171B24",
+ "#1F2430",
+ "#242936",
+ "#707A8C",
+ "#8A9199",
+ "#CCCAC2",
+ "#D9D7CE",
+ "#F3F4F5",
+ ]),
+ red: colorRamp(chroma("#F28779")),
+ orange: colorRamp(chroma("#FFAD66")),
+ yellow: colorRamp(chroma("#FFD173")),
+ green: colorRamp(chroma("#D5FF80")),
+ cyan: colorRamp(chroma("#95E6CB")),
+ blue: colorRamp(chroma("#5CCFE6")),
+ violet: colorRamp(chroma("#D4BFFF")),
+ magenta: colorRamp(chroma("#F29E74")),
+})
styles/src/themes/staff/ayu.ts 🔗
@@ -1,52 +1,52 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Ayu";
-const author = "Konstantin Pschera <me@kons.ch>";
-const url = "https://github.com/ayu-theme/ayu-colors";
+const name = "Ayu"
+const author = "Konstantin Pschera <me@kons.ch>"
+const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
- type: "MIT",
- url: "https://github.com/ayu-theme/ayu-colors/blob/master/license"
+ type: "MIT",
+ url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Dark`, false, {
- neutral: chroma.scale([
- "#0F1419",
- "#131721",
- "#272D38",
- "#3E4B59",
- "#BFBDB6",
- "#E6E1CF",
- "#E6E1CF",
- "#F3F4F5",
- ]),
- red: colorRamp(chroma("#F07178")),
- orange: colorRamp(chroma("#FF8F40")),
- yellow: colorRamp(chroma("#FFB454")),
- green: colorRamp(chroma("#B8CC52")),
- cyan: colorRamp(chroma("#95E6CB")),
- blue: colorRamp(chroma("#59C2FF")),
- violet: colorRamp(chroma("#D2A6FF")),
- magenta: colorRamp(chroma("#E6B673")),
-});
+ neutral: chroma.scale([
+ "#0F1419",
+ "#131721",
+ "#272D38",
+ "#3E4B59",
+ "#BFBDB6",
+ "#E6E1CF",
+ "#E6E1CF",
+ "#F3F4F5",
+ ]),
+ red: colorRamp(chroma("#F07178")),
+ orange: colorRamp(chroma("#FF8F40")),
+ yellow: colorRamp(chroma("#FFB454")),
+ green: colorRamp(chroma("#B8CC52")),
+ cyan: colorRamp(chroma("#95E6CB")),
+ blue: colorRamp(chroma("#59C2FF")),
+ violet: colorRamp(chroma("#D2A6FF")),
+ magenta: colorRamp(chroma("#E6B673")),
+})
export const light = createColorScheme(`${name} Light`, true, {
- neutral: chroma.scale([
- "#1A1F29",
- "#242936",
- "#5C6773",
- "#828C99",
- "#ABB0B6",
- "#F8F9FA",
- "#F3F4F5",
- "#FAFAFA",
- ]),
- red: colorRamp(chroma("#F07178")),
- orange: colorRamp(chroma("#FA8D3E")),
- yellow: colorRamp(chroma("#F2AE49")),
- green: colorRamp(chroma("#86B300")),
- cyan: colorRamp(chroma("#4CBF99")),
- blue: colorRamp(chroma("#36A3D9")),
- violet: colorRamp(chroma("#A37ACC")),
- magenta: colorRamp(chroma("#E6BA7E")),
-});
+ neutral: chroma.scale([
+ "#1A1F29",
+ "#242936",
+ "#5C6773",
+ "#828C99",
+ "#ABB0B6",
+ "#F8F9FA",
+ "#F3F4F5",
+ "#FAFAFA",
+ ]),
+ red: colorRamp(chroma("#F07178")),
+ orange: colorRamp(chroma("#FA8D3E")),
+ yellow: colorRamp(chroma("#F2AE49")),
+ green: colorRamp(chroma("#86B300")),
+ cyan: colorRamp(chroma("#4CBF99")),
+ blue: colorRamp(chroma("#36A3D9")),
+ violet: colorRamp(chroma("#A37ACC")),
+ magenta: colorRamp(chroma("#E6BA7E")),
+})
styles/src/themes/staff/brushtrees.ts 🔗
@@ -1,73 +1,73 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Brush Trees";
-const author = "Abraham White <abelincoln.white@gmail.com>";
-const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme";
+const name = "Brush Trees"
+const author = "Abraham White <abelincoln.white@gmail.com>"
+const url = "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme"
const license = {
- type: "MIT",
- url: "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme/blob/master/LICENSE"
+ type: "MIT",
+ url: "https://github.com/WhiteAbeLincoln/base16-brushtrees-scheme/blob/master/LICENSE",
}
export const dark = createColorScheme(`${name} Dark`, false, {
- neutral: chroma.scale([
- "#485867",
- "#5A6D7A",
- "#6D828E",
- "#8299A1",
- "#98AFB5",
- "#B0C5C8",
- "#C9DBDC",
- "#E3EFEF",
- ]),
- red: colorRamp(chroma("#b38686")),
- orange: colorRamp(chroma("#d8bba2")),
- yellow: colorRamp(chroma("#aab386")),
- green: colorRamp(chroma("#87b386")),
- cyan: colorRamp(chroma("#86b3b3")),
- blue: colorRamp(chroma("#868cb3")),
- violet: colorRamp(chroma("#b386b2")),
- magenta: colorRamp(chroma("#b39f9f")),
-});
+ neutral: chroma.scale([
+ "#485867",
+ "#5A6D7A",
+ "#6D828E",
+ "#8299A1",
+ "#98AFB5",
+ "#B0C5C8",
+ "#C9DBDC",
+ "#E3EFEF",
+ ]),
+ red: colorRamp(chroma("#b38686")),
+ orange: colorRamp(chroma("#d8bba2")),
+ yellow: colorRamp(chroma("#aab386")),
+ green: colorRamp(chroma("#87b386")),
+ cyan: colorRamp(chroma("#86b3b3")),
+ blue: colorRamp(chroma("#868cb3")),
+ violet: colorRamp(chroma("#b386b2")),
+ magenta: colorRamp(chroma("#b39f9f")),
+})
export const mirage = createColorScheme(`${name} Mirage`, false, {
- neutral: chroma.scale([
- "#485867",
- "#5A6D7A",
- "#6D828E",
- "#8299A1",
- "#98AFB5",
- "#B0C5C8",
- "#C9DBDC",
- "#E3EFEF",
- ]),
- red: colorRamp(chroma("#F28779")),
- orange: colorRamp(chroma("#FFAD66")),
- yellow: colorRamp(chroma("#FFD173")),
- green: colorRamp(chroma("#D5FF80")),
- cyan: colorRamp(chroma("#95E6CB")),
- blue: colorRamp(chroma("#5CCFE6")),
- violet: colorRamp(chroma("#D4BFFF")),
- magenta: colorRamp(chroma("#F29E74")),
-});
+ neutral: chroma.scale([
+ "#485867",
+ "#5A6D7A",
+ "#6D828E",
+ "#8299A1",
+ "#98AFB5",
+ "#B0C5C8",
+ "#C9DBDC",
+ "#E3EFEF",
+ ]),
+ red: colorRamp(chroma("#F28779")),
+ orange: colorRamp(chroma("#FFAD66")),
+ yellow: colorRamp(chroma("#FFD173")),
+ green: colorRamp(chroma("#D5FF80")),
+ cyan: colorRamp(chroma("#95E6CB")),
+ blue: colorRamp(chroma("#5CCFE6")),
+ violet: colorRamp(chroma("#D4BFFF")),
+ magenta: colorRamp(chroma("#F29E74")),
+})
export const light = createColorScheme(`${name} Light`, true, {
- neutral: chroma.scale([
- "#1A1F29",
- "#242936",
- "#5C6773",
- "#828C99",
- "#ABB0B6",
- "#F8F9FA",
- "#F3F4F5",
- "#FAFAFA",
- ]),
- red: colorRamp(chroma("#b38686")),
- orange: colorRamp(chroma("#d8bba2")),
- yellow: colorRamp(chroma("#aab386")),
- green: colorRamp(chroma("#87b386")),
- cyan: colorRamp(chroma("#86b3b3")),
- blue: colorRamp(chroma("#868cb3")),
- violet: colorRamp(chroma("#b386b2")),
- magenta: colorRamp(chroma("#b39f9f")),
-});
+ neutral: chroma.scale([
+ "#1A1F29",
+ "#242936",
+ "#5C6773",
+ "#828C99",
+ "#ABB0B6",
+ "#F8F9FA",
+ "#F3F4F5",
+ "#FAFAFA",
+ ]),
+ red: colorRamp(chroma("#b38686")),
+ orange: colorRamp(chroma("#d8bba2")),
+ yellow: colorRamp(chroma("#aab386")),
+ green: colorRamp(chroma("#87b386")),
+ cyan: colorRamp(chroma("#86b3b3")),
+ blue: colorRamp(chroma("#868cb3")),
+ violet: colorRamp(chroma("#b386b2")),
+ magenta: colorRamp(chroma("#b39f9f")),
+})
styles/src/themes/staff/dracula.ts 🔗
@@ -1,31 +1,31 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Dracula";
-const author = "zenorocha";
-const url = "https://github.com/dracula/dracula-theme";
+const name = "Dracula"
+const author = "zenorocha"
+const url = "https://github.com/dracula/dracula-theme"
const license = {
- type: "MIT",
- url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
-};
+ type: "MIT",
+ url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
+}
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#282A36",
- "#3a3c4e",
- "#4d4f68",
- "#626483",
- "#62d6e8",
- "#e9e9f4",
- "#f1f2f8",
- "#f8f8f2",
- ]),
- red: colorRamp(chroma("#ff5555")),
- orange: colorRamp(chroma("#ffb86c")),
- yellow: colorRamp(chroma("#f1fa8c")),
- green: colorRamp(chroma("#50fa7b")),
- cyan: colorRamp(chroma("#8be9fd")),
- blue: colorRamp(chroma("#6272a4")),
- violet: colorRamp(chroma("#bd93f9")),
- magenta: colorRamp(chroma("#00f769")),
-});
+ neutral: chroma.scale([
+ "#282A36",
+ "#3a3c4e",
+ "#4d4f68",
+ "#626483",
+ "#62d6e8",
+ "#e9e9f4",
+ "#f1f2f8",
+ "#f8f8f2",
+ ]),
+ red: colorRamp(chroma("#ff5555")),
+ orange: colorRamp(chroma("#ffb86c")),
+ yellow: colorRamp(chroma("#f1fa8c")),
+ green: colorRamp(chroma("#50fa7b")),
+ cyan: colorRamp(chroma("#8be9fd")),
+ blue: colorRamp(chroma("#6272a4")),
+ violet: colorRamp(chroma("#bd93f9")),
+ magenta: colorRamp(chroma("#00f769")),
+})
styles/src/themes/staff/gruvbox-medium.ts 🔗
@@ -1,138 +1,138 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Gruvbox";
-const author = "Dawid Kurek (dawikur@gmail.com)";
-const url = "https://github.com/morhetz/gruvbox";
+const name = "Gruvbox"
+const author = "Dawid Kurek (dawikur@gmail.com)"
+const url = "https://github.com/morhetz/gruvbox"
const license = {
- type: "MIT/X11",
- url: "https://en.wikipedia.org/wiki/MIT_License",
-};
+ type: "MIT/X11",
+ url: "https://en.wikipedia.org/wiki/MIT_License",
+}
export const dark = createColorScheme(`${name} Dark Medium`, false, {
- neutral: chroma.scale([
- "#282828",
- "#3c3836",
- "#504945",
- "#665c54",
- "#7C6F64",
- "#928374",
- "#A89984",
- "#BDAE93",
- "#D5C4A1",
- "#EBDBB2",
- "#FBF1C7",
- ]),
- red: chroma.scale([
- "#4D150F",
- "#7D241A",
- "#A31C17",
- "#CC241D",
- "#C83A29",
- "#FB4934",
- "#F06D61",
- "#E6928E",
- "#FFFFFF",
- ]),
- orange: chroma.scale([
- "#462307",
- "#7F400C",
- "#AB4A0B",
- "#D65D0E",
- "#CB6614",
- "#FE8019",
- "#F49750",
- "#EBAE87",
- "#FFFFFF",
- ]),
- yellow: chroma.scale([
- "#3D2C05",
- "#7D5E17",
- "#AC7A1A",
- "#D79921",
- "#E8AB28",
- "#FABD2F",
- "#F2C45F",
- "#EBCC90",
- "#FFFFFF",
- ]),
- green: chroma.scale([
- "#32330A",
- "#5C5D13",
- "#797814",
- "#98971A",
- "#93951E",
- "#B8BB26",
- "#C2C359",
- "#CCCB8D",
- "#FFFFFF",
- ]),
- cyan: chroma.scale([
- "#283D20",
- "#47603E",
- "#537D54",
- "#689D6A",
- "#719963",
- "#8EC07C",
- "#A1C798",
- "#B4CEB5",
- "#FFFFFF",
- ]),
- blue: chroma.scale([
- "#103738",
- "#214C4D",
- "#376A6C",
- "#458588",
- "#688479",
- "#83A598",
- "#92B3AE",
- "#A2C2C4",
- "#FFFFFF",
- ]),
- violet: chroma.scale([
- "#392228",
- "#69434D",
- "#8D4E6B",
- "#B16286",
- "#A86B7C",
- "#D3869B",
- "#D59BAF",
- "#D8B1C3",
- "#FFFFFF",
- ]),
- magenta: chroma.scale([
- "#48402C",
- "#756D59",
- "#867A69",
- "#A89984",
- "#BCAF8E",
- "#EBDBB2",
- "#DFD3BA",
- "#D4CCC2",
- "#FFFFFF",
- ]),
-});
+ neutral: chroma.scale([
+ "#282828",
+ "#3c3836",
+ "#504945",
+ "#665c54",
+ "#7C6F64",
+ "#928374",
+ "#A89984",
+ "#BDAE93",
+ "#D5C4A1",
+ "#EBDBB2",
+ "#FBF1C7",
+ ]),
+ red: chroma.scale([
+ "#4D150F",
+ "#7D241A",
+ "#A31C17",
+ "#CC241D",
+ "#C83A29",
+ "#FB4934",
+ "#F06D61",
+ "#E6928E",
+ "#FFFFFF",
+ ]),
+ orange: chroma.scale([
+ "#462307",
+ "#7F400C",
+ "#AB4A0B",
+ "#D65D0E",
+ "#CB6614",
+ "#FE8019",
+ "#F49750",
+ "#EBAE87",
+ "#FFFFFF",
+ ]),
+ yellow: chroma.scale([
+ "#3D2C05",
+ "#7D5E17",
+ "#AC7A1A",
+ "#D79921",
+ "#E8AB28",
+ "#FABD2F",
+ "#F2C45F",
+ "#EBCC90",
+ "#FFFFFF",
+ ]),
+ green: chroma.scale([
+ "#32330A",
+ "#5C5D13",
+ "#797814",
+ "#98971A",
+ "#93951E",
+ "#B8BB26",
+ "#C2C359",
+ "#CCCB8D",
+ "#FFFFFF",
+ ]),
+ cyan: chroma.scale([
+ "#283D20",
+ "#47603E",
+ "#537D54",
+ "#689D6A",
+ "#719963",
+ "#8EC07C",
+ "#A1C798",
+ "#B4CEB5",
+ "#FFFFFF",
+ ]),
+ blue: chroma.scale([
+ "#103738",
+ "#214C4D",
+ "#376A6C",
+ "#458588",
+ "#688479",
+ "#83A598",
+ "#92B3AE",
+ "#A2C2C4",
+ "#FFFFFF",
+ ]),
+ violet: chroma.scale([
+ "#392228",
+ "#69434D",
+ "#8D4E6B",
+ "#B16286",
+ "#A86B7C",
+ "#D3869B",
+ "#D59BAF",
+ "#D8B1C3",
+ "#FFFFFF",
+ ]),
+ magenta: chroma.scale([
+ "#48402C",
+ "#756D59",
+ "#867A69",
+ "#A89984",
+ "#BCAF8E",
+ "#EBDBB2",
+ "#DFD3BA",
+ "#D4CCC2",
+ "#FFFFFF",
+ ]),
+})
export const light = createColorScheme(`${name} Light Medium`, true, {
- neutral: chroma.scale([
- "#282828",
- "#3c3836",
- "#504945",
- "#665c54",
- "#7C6F64",
- "#928374",
- "#A89984",
- "#BDAE93",
- "#D5C4A1",
- "#EBDBB2",
- "#FBF1C7",
- ]),
- red: colorRamp(chroma("#9d0006")),
- orange: colorRamp(chroma("#af3a03")),
- yellow: colorRamp(chroma("#b57614")),
- green: colorRamp(chroma("#79740e")),
- cyan: colorRamp(chroma("#427b58")),
- blue: colorRamp(chroma("#076678")),
- violet: colorRamp(chroma("#8f3f71")),
- magenta: colorRamp(chroma("#d65d0e")),
-});
+ neutral: chroma.scale([
+ "#282828",
+ "#3c3836",
+ "#504945",
+ "#665c54",
+ "#7C6F64",
+ "#928374",
+ "#A89984",
+ "#BDAE93",
+ "#D5C4A1",
+ "#EBDBB2",
+ "#FBF1C7",
+ ]),
+ red: colorRamp(chroma("#9d0006")),
+ orange: colorRamp(chroma("#af3a03")),
+ yellow: colorRamp(chroma("#b57614")),
+ green: colorRamp(chroma("#79740e")),
+ cyan: colorRamp(chroma("#427b58")),
+ blue: colorRamp(chroma("#076678")),
+ violet: colorRamp(chroma("#8f3f71")),
+ magenta: colorRamp(chroma("#d65d0e")),
+})
styles/src/themes/staff/monokai.ts 🔗
@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Monokai";
-const author = "Wimer Hazenberg (http://www.monokai.nl)";
-const url = "https://base16.netlify.app/previews/base16-monokai.html";
+const name = "Monokai"
+const author = "Wimer Hazenberg (http://www.monokai.nl)"
+const url = "https://base16.netlify.app/previews/base16-monokai.html"
const license = {
- type: "?",
- url: "?",
-};
+ type: "?",
+ url: "?",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#272822",
- "#383830",
- "#49483e",
- "#75715e",
- "#a59f85",
- "#f8f8f2",
- "#f5f4f1",
- "#f9f8f5",
- ]),
- red: colorRamp(chroma("#f92672")),
- orange: colorRamp(chroma("#fd971f")),
- yellow: colorRamp(chroma("#f4bf75")),
- green: colorRamp(chroma("#a6e22e")),
- cyan: colorRamp(chroma("#a1efe4")),
- blue: colorRamp(chroma("#66d9ef")),
- violet: colorRamp(chroma("#ae81ff")),
- magenta: colorRamp(chroma("#cc6633")),
-});
+ neutral: chroma.scale([
+ "#272822",
+ "#383830",
+ "#49483e",
+ "#75715e",
+ "#a59f85",
+ "#f8f8f2",
+ "#f5f4f1",
+ "#f9f8f5",
+ ]),
+ red: colorRamp(chroma("#f92672")),
+ orange: colorRamp(chroma("#fd971f")),
+ yellow: colorRamp(chroma("#f4bf75")),
+ green: colorRamp(chroma("#a6e22e")),
+ cyan: colorRamp(chroma("#a1efe4")),
+ blue: colorRamp(chroma("#66d9ef")),
+ violet: colorRamp(chroma("#ae81ff")),
+ magenta: colorRamp(chroma("#cc6633")),
+})
styles/src/themes/staff/nord.ts 🔗
@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Nord";
-const author = "arcticicestudio";
-const url = "https://www.nordtheme.com/";
+const name = "Nord"
+const author = "arcticicestudio"
+const url = "https://www.nordtheme.com/"
const license = {
- type: "MIT",
- url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md",
-};
+ type: "MIT",
+ url: "https://github.com/arcticicestudio/nord/blob/develop/LICENSE.md",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#2E3440",
- "#3B4252",
- "#434C5E",
- "#4C566A",
- "#D8DEE9",
- "#E5E9F0",
- "#ECEFF4",
- "#8FBCBB",
- ]),
- red: colorRamp(chroma("#88C0D0")),
- orange: colorRamp(chroma("#81A1C1")),
- yellow: colorRamp(chroma("#5E81AC")),
- green: colorRamp(chroma("#BF616A")),
- cyan: colorRamp(chroma("#D08770")),
- blue: colorRamp(chroma("#EBCB8B")),
- violet: colorRamp(chroma("#A3BE8C")),
- magenta: colorRamp(chroma("#B48EAD")),
-});
+ neutral: chroma.scale([
+ "#2E3440",
+ "#3B4252",
+ "#434C5E",
+ "#4C566A",
+ "#D8DEE9",
+ "#E5E9F0",
+ "#ECEFF4",
+ "#8FBCBB",
+ ]),
+ red: colorRamp(chroma("#88C0D0")),
+ orange: colorRamp(chroma("#81A1C1")),
+ yellow: colorRamp(chroma("#5E81AC")),
+ green: colorRamp(chroma("#BF616A")),
+ cyan: colorRamp(chroma("#D08770")),
+ blue: colorRamp(chroma("#EBCB8B")),
+ violet: colorRamp(chroma("#A3BE8C")),
+ magenta: colorRamp(chroma("#B48EAD")),
+})
styles/src/themes/staff/seti-ui.ts 🔗
@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Seti UI";
-const author = "jesseweed";
-const url = "https://github.com/jesseweed/seti-ui";
+const name = "Seti UI"
+const author = "jesseweed"
+const url = "https://github.com/jesseweed/seti-ui"
const license = {
- type: "MIT",
- url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md",
-};
+ type: "MIT",
+ url: "https://github.com/jesseweed/seti-ui/blob/master/LICENSE.md",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#151718",
- "#262B30",
- "#1E2326",
- "#41535B",
- "#43a5d5",
- "#d6d6d6",
- "#eeeeee",
- "#ffffff",
- ]),
- red: colorRamp(chroma("#Cd3f45")),
- orange: colorRamp(chroma("#db7b55")),
- yellow: colorRamp(chroma("#e6cd69")),
- green: colorRamp(chroma("#9fca56")),
- cyan: colorRamp(chroma("#55dbbe")),
- blue: colorRamp(chroma("#55b5db")),
- violet: colorRamp(chroma("#a074c4")),
- magenta: colorRamp(chroma("#8a553f")),
-});
+ neutral: chroma.scale([
+ "#151718",
+ "#262B30",
+ "#1E2326",
+ "#41535B",
+ "#43a5d5",
+ "#d6d6d6",
+ "#eeeeee",
+ "#ffffff",
+ ]),
+ red: colorRamp(chroma("#Cd3f45")),
+ orange: colorRamp(chroma("#db7b55")),
+ yellow: colorRamp(chroma("#e6cd69")),
+ green: colorRamp(chroma("#9fca56")),
+ cyan: colorRamp(chroma("#55dbbe")),
+ blue: colorRamp(chroma("#55b5db")),
+ violet: colorRamp(chroma("#a074c4")),
+ magenta: colorRamp(chroma("#8a553f")),
+})
styles/src/themes/staff/tokyo-night-storm.ts 🔗
@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Tokyo Night Storm";
-const author = "folke";
-const url = "https://github.com/folke/tokyonight.nvim";
+const name = "Tokyo Night Storm"
+const author = "folke"
+const url = "https://github.com/folke/tokyonight.nvim"
const license = {
- type: "MIT",
- url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE",
-};
+ type: "MIT",
+ url: "https://github.com/ghifarit53/tokyonight-vim/blob/master/LICENSE",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#24283B",
- "#16161E",
- "#343A52",
- "#444B6A",
- "#787C99",
- "#A9B1D6",
- "#CBCCD1",
- "#D5D6DB",
- ]),
- red: colorRamp(chroma("#C0CAF5")),
- orange: colorRamp(chroma("#A9B1D6")),
- yellow: colorRamp(chroma("#0DB9D7")),
- green: colorRamp(chroma("#9ECE6A")),
- cyan: colorRamp(chroma("#B4F9F8")),
- blue: colorRamp(chroma("#2AC3DE")),
- violet: colorRamp(chroma("#BB9AF7")),
- magenta: colorRamp(chroma("#F7768E")),
-});
+ neutral: chroma.scale([
+ "#24283B",
+ "#16161E",
+ "#343A52",
+ "#444B6A",
+ "#787C99",
+ "#A9B1D6",
+ "#CBCCD1",
+ "#D5D6DB",
+ ]),
+ red: colorRamp(chroma("#C0CAF5")),
+ orange: colorRamp(chroma("#A9B1D6")),
+ yellow: colorRamp(chroma("#0DB9D7")),
+ green: colorRamp(chroma("#9ECE6A")),
+ cyan: colorRamp(chroma("#B4F9F8")),
+ blue: colorRamp(chroma("#2AC3DE")),
+ violet: colorRamp(chroma("#BB9AF7")),
+ magenta: colorRamp(chroma("#F7768E")),
+})
styles/src/themes/staff/tokyo-night.ts 🔗
@@ -1,53 +1,53 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Tokyo";
-const author = "folke";
-const url = "https://github.com/folke/tokyonight.nvim";
+const name = "Tokyo"
+const author = "folke"
+const url = "https://github.com/folke/tokyonight.nvim"
const license = {
- type: "Apache License 2.0",
- url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE",
-};
+ type: "Apache License 2.0",
+ url: "https://github.com/folke/tokyonight.nvim/blob/main/LICENSE",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name} Night`, false, {
- neutral: chroma.scale([
- "#1A1B26",
- "#16161E",
- "#2F3549",
- "#444B6A",
- "#787C99",
- "#A9B1D6",
- "#CBCCD1",
- "#D5D6DB",
- ]),
- red: colorRamp(chroma("#C0CAF5")),
- orange: colorRamp(chroma("#A9B1D6")),
- yellow: colorRamp(chroma("#0DB9D7")),
- green: colorRamp(chroma("#9ECE6A")),
- cyan: colorRamp(chroma("#B4F9F8")),
- blue: colorRamp(chroma("#2AC3DE")),
- violet: colorRamp(chroma("#BB9AF7")),
- magenta: colorRamp(chroma("#F7768E")),
-});
+ neutral: chroma.scale([
+ "#1A1B26",
+ "#16161E",
+ "#2F3549",
+ "#444B6A",
+ "#787C99",
+ "#A9B1D6",
+ "#CBCCD1",
+ "#D5D6DB",
+ ]),
+ red: colorRamp(chroma("#C0CAF5")),
+ orange: colorRamp(chroma("#A9B1D6")),
+ yellow: colorRamp(chroma("#0DB9D7")),
+ green: colorRamp(chroma("#9ECE6A")),
+ cyan: colorRamp(chroma("#B4F9F8")),
+ blue: colorRamp(chroma("#2AC3DE")),
+ violet: colorRamp(chroma("#BB9AF7")),
+ magenta: colorRamp(chroma("#F7768E")),
+})
export const light = createColorScheme(`${name} Day`, true, {
- neutral: chroma.scale([
- "#1A1B26",
- "#1A1B26",
- "#343B59",
- "#4C505E",
- "#9699A3",
- "#DFE0E5",
- "#CBCCD1",
- "#D5D6DB",
- ]),
- red: colorRamp(chroma("#343B58")),
- orange: colorRamp(chroma("#965027")),
- yellow: colorRamp(chroma("#166775")),
- green: colorRamp(chroma("#485E30")),
- cyan: colorRamp(chroma("#3E6968")),
- blue: colorRamp(chroma("#34548A")),
- violet: colorRamp(chroma("#5A4A78")),
- magenta: colorRamp(chroma("#8C4351")),
-});
+ neutral: chroma.scale([
+ "#1A1B26",
+ "#1A1B26",
+ "#343B59",
+ "#4C505E",
+ "#9699A3",
+ "#DFE0E5",
+ "#CBCCD1",
+ "#D5D6DB",
+ ]),
+ red: colorRamp(chroma("#343B58")),
+ orange: colorRamp(chroma("#965027")),
+ yellow: colorRamp(chroma("#166775")),
+ green: colorRamp(chroma("#485E30")),
+ cyan: colorRamp(chroma("#3E6968")),
+ blue: colorRamp(chroma("#34548A")),
+ violet: colorRamp(chroma("#5A4A78")),
+ magenta: colorRamp(chroma("#8C4351")),
+})
styles/src/themes/staff/zed-pro.ts 🔗
@@ -1,36 +1,36 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Zed Pro";
+const name = "Zed Pro"
const author = "Nate Butler"
const url = "https://github.com/iamnbutler"
const license = {
- type: "?",
- url: "?",
-};
+ type: "?",
+ url: "?",
+}
const ramps = {
- neutral: chroma
- .scale([
- "#101010",
- "#1C1C1C",
- "#212121",
- "#2D2D2D",
- "#B9B9B9",
- "#DADADA",
- "#E6E6E6",
- "#FFFFFF",
- ])
- .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
- red: colorRamp(chroma("#DC604F")),
- orange: colorRamp(chroma("#DE782F")),
- yellow: colorRamp(chroma("#E0B750")),
- green: colorRamp(chroma("#2A643D")),
- cyan: colorRamp(chroma("#215050")),
- blue: colorRamp(chroma("#2F6DB7")),
- violet: colorRamp(chroma("#5874C1")),
- magenta: colorRamp(chroma("#DE9AB8")),
-};
+ neutral: chroma
+ .scale([
+ "#101010",
+ "#1C1C1C",
+ "#212121",
+ "#2D2D2D",
+ "#B9B9B9",
+ "#DADADA",
+ "#E6E6E6",
+ "#FFFFFF",
+ ])
+ .domain([0, 0.1, 0.2, 0.3, 0.7, 0.8, 0.9, 1]),
+ red: colorRamp(chroma("#DC604F")),
+ orange: colorRamp(chroma("#DE782F")),
+ yellow: colorRamp(chroma("#E0B750")),
+ green: colorRamp(chroma("#2A643D")),
+ cyan: colorRamp(chroma("#215050")),
+ blue: colorRamp(chroma("#2F6DB7")),
+ violet: colorRamp(chroma("#5874C1")),
+ magenta: colorRamp(chroma("#DE9AB8")),
+}
-export const dark = createColorScheme(`${name} Dark`, false, ramps);
-export const light = createColorScheme(`${name} Light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps)
+export const light = createColorScheme(`${name} Light`, true, ramps)
styles/src/themes/staff/zenburn.ts 🔗
@@ -1,32 +1,32 @@
-import chroma from "chroma-js";
-import { colorRamp, createColorScheme } from "../common/ramps";
+import chroma from "chroma-js"
+import { colorRamp, createColorScheme } from "../common/ramps"
-const name = "Zenburn";
-const author = "elnawe";
-const url = "https://github.com/elnawe/base16-zenburn-scheme";
+const name = "Zenburn"
+const author = "elnawe"
+const url = "https://github.com/elnawe/base16-zenburn-scheme"
const license = {
- type: "None",
- url: "",
-};
+ type: "None",
+ url: "",
+}
// `name-[light|dark]`, isLight, color ramps
export const dark = createColorScheme(`${name}`, false, {
- neutral: chroma.scale([
- "#383838",
- "#404040",
- "#606060",
- "#6f6f6f",
- "#808080",
- "#dcdccc",
- "#c0c0c0",
- "#ffffff",
- ]),
- red: colorRamp(chroma("#dca3a3")),
- orange: colorRamp(chroma("#dfaf8f")),
- yellow: colorRamp(chroma("#e0cf9f")),
- green: colorRamp(chroma("#5f7f5f")),
- cyan: colorRamp(chroma("#93e0e3")),
- blue: colorRamp(chroma("#7cb8bb")),
- violet: colorRamp(chroma("#dc8cc3")),
- magenta: colorRamp(chroma("#000000")),
-});
+ neutral: chroma.scale([
+ "#383838",
+ "#404040",
+ "#606060",
+ "#6f6f6f",
+ "#808080",
+ "#dcdccc",
+ "#c0c0c0",
+ "#ffffff",
+ ]),
+ red: colorRamp(chroma("#dca3a3")),
+ orange: colorRamp(chroma("#dfaf8f")),
+ yellow: colorRamp(chroma("#e0cf9f")),
+ green: colorRamp(chroma("#5f7f5f")),
+ cyan: colorRamp(chroma("#93e0e3")),
+ blue: colorRamp(chroma("#7cb8bb")),
+ violet: colorRamp(chroma("#dc8cc3")),
+ magenta: colorRamp(chroma("#000000")),
+})
styles/src/themes/summercamp.ts 🔗
@@ -1,40 +1,42 @@
-import chroma from "chroma-js";
-import { Meta } from "./common/colorScheme";
-import { colorRamp, createColorScheme } from "./common/ramps";
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
-const name = "Summercamp";
+const name = "Summercamp"
const ramps = {
- neutral: chroma
- .scale([
- "#1c1810",
- "#2a261c",
- "#3a3527",
- "#3a3527",
- "#5f5b45",
- "#736e55",
- "#bab696",
- "#f8f5de",
- ])
- .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
- red: colorRamp(chroma("#e35142")),
- orange: colorRamp(chroma("#fba11b")),
- yellow: colorRamp(chroma("#f2ff27")),
- green: colorRamp(chroma("#5ceb5a")),
- cyan: colorRamp(chroma("#5aebbc")),
- blue: colorRamp(chroma("#489bf0")),
- violet: colorRamp(chroma("#FF8080")),
- magenta: colorRamp(chroma("#F69BE7")),
-};
+ neutral: chroma
+ .scale([
+ "#1c1810",
+ "#2a261c",
+ "#3a3527",
+ "#3a3527",
+ "#5f5b45",
+ "#736e55",
+ "#bab696",
+ "#f8f5de",
+ ])
+ .domain([0, 0.2, 0.38, 0.4, 0.65, 0.7, 0.85, 1]),
+ red: colorRamp(chroma("#e35142")),
+ orange: colorRamp(chroma("#fba11b")),
+ yellow: colorRamp(chroma("#f2ff27")),
+ green: colorRamp(chroma("#5ceb5a")),
+ cyan: colorRamp(chroma("#5aebbc")),
+ blue: colorRamp(chroma("#489bf0")),
+ violet: colorRamp(chroma("#FF8080")),
+ magenta: colorRamp(chroma("#F69BE7")),
+}
-export const dark = createColorScheme(`${name}`, false, ramps);
+export const dark = createColorScheme(`${name}`, false, ramps)
export const meta: Meta = {
- name,
- author: "zoefiri",
- url: "https://github.com/zoefiri/base16-sc",
- license: {
- SPDX: "MIT",
- https_url: "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
- license_checksum: "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf"
- }
-}
+ name,
+ author: "zoefiri",
+ url: "https://github.com/zoefiri/base16-sc",
+ license: {
+ SPDX: "MIT",
+ https_url:
+ "https://raw.githubusercontent.com/zoefiri/base16-sc/master/LICENSE",
+ license_checksum:
+ "fadcc834b7eaf2943800956600e8aeea4b495ecf6490f4c4b6c91556a90accaf",
+ },
+}
styles/src/utils/color.ts 🔗
@@ -1,5 +1,5 @@
-import chroma from "chroma-js";
+import chroma from "chroma-js"
export function withOpacity(color: string, opacity: number): string {
- return chroma(color).alpha(opacity).hex();
+ return chroma(color).alpha(opacity).hex()
}
styles/src/utils/snakeCase.ts 🔗
@@ -1,35 +1,35 @@
-import { snakeCase } from "case-anything";
+import { snakeCase } from "case-anything"
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
// Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = S extends string
- ? S extends `${infer T}${infer U}`
- ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+ ? S extends `${infer T}${infer U}`
+ ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}`
+ : S
: S
- : S;
type SnakeCased<Type> = {
- [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>;
-};
+ [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
+}
export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
- const snakeObject: any = {};
- for (const key in object) {
- snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
- snakeCaseValue(object[key]);
- }
- return snakeObject;
+ const snakeObject: any = {}
+ for (const key in object) {
+ snakeObject[snakeCase(key, { keepSpecialCharacters: true })] =
+ snakeCaseValue(object[key])
+ }
+ return snakeObject
}
function snakeCaseValue(value: any): any {
- if (typeof value === "object") {
- if (Array.isArray(value)) {
- return value.map(snakeCaseValue);
+ if (typeof value === "object") {
+ if (Array.isArray(value)) {
+ return value.map(snakeCaseValue)
+ } else {
+ return snakeCaseTree(value)
+ }
} else {
- return snakeCaseTree(value);
+ return value
}
- } else {
- return value;
- }
}
styles/tsconfig.json 🔗
@@ -1,12 +1,12 @@
{
- "compilerOptions": {
- "target": "es2015",
- "module": "commonjs",
- "esModuleInterop": true,
- "noImplicitAny": true,
- "removeComments": true,
- "preserveConstEnums": true,
- "sourceMap": true
- },
- "exclude": ["node_modules"]
+ "compilerOptions": {
+ "target": "es2015",
+ "module": "commonjs",
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "removeComments": true,
+ "preserveConstEnums": true,
+ "sourceMap": true
+ },
+ "exclude": ["node_modules"]
}