mirror of
https://github.com/estruyf/vscode-front-matter.git
synced 2026-05-04 04:22:33 +02:00
#505 - Align to theme colors WIP
This commit is contained in:
Elio Struyf
@@ -96,6 +96,11 @@
|
||||
"configuration": {
|
||||
"title": "Front Matter: use frontmatter.json for shared team settings",
|
||||
"properties": {
|
||||
"frontMatter.experimental": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"markdownDescription": "Specify if you want to enable the experimental features. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.experimental)"
|
||||
},
|
||||
"frontMatter.extends": {
|
||||
"type": "array",
|
||||
"markdownDescription": "Specify the list of paths/URLs to extend the Front Matter CMS config. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.extends)",
|
||||
|
||||
255
pnpm-lock.yaml
generated
255
pnpm-lock.yaml
generated
@@ -11,7 +11,7 @@ specifiers:
|
||||
'@popperjs/core': ^2.11.6
|
||||
'@sentry/react': ^6.13.3
|
||||
'@sentry/tracing': ^6.13.3
|
||||
'@tailwindcss/forms': ^0.3.3
|
||||
'@tailwindcss/forms': ^0.5.3
|
||||
'@types/chai': ^4.3.1
|
||||
'@types/glob': 7.1.3
|
||||
'@types/invariant': ^2.2.35
|
||||
@@ -37,7 +37,7 @@ specifiers:
|
||||
'@webpack-cli/serve': ^1.6.0
|
||||
ajv: ^8.8.2
|
||||
array-move: ^4.0.0
|
||||
autoprefixer: 10.3.3
|
||||
autoprefixer: ^10.4.13
|
||||
chai: ^4.3.6
|
||||
css-loader: 5.2.7
|
||||
date-fns: 2.23.0
|
||||
@@ -64,9 +64,8 @@ specifiers:
|
||||
node-json-db: ^1.3.0
|
||||
npm-run-all: ^4.1.5
|
||||
path-browserify: ^1.0.1
|
||||
postcss: ^8.3.6
|
||||
postcss-loader: 4.3.0
|
||||
postcss-nested: ^5.0.6
|
||||
postcss: ^8.4.21
|
||||
postcss-loader: ^7.0.2
|
||||
prettier: ^2.8.3
|
||||
prettier-plugin-tailwindcss: ^0.2.2
|
||||
react: 17.0.1
|
||||
@@ -83,8 +82,7 @@ specifiers:
|
||||
semver: ^7.3.7
|
||||
simple-git: ^3.10.0
|
||||
style-loader: 2.0.0
|
||||
tailwindcss: ^2.2.7
|
||||
tailwindcss-nested-groups: ^1.2.4
|
||||
tailwindcss: ^3.2.4
|
||||
ts-loader: ^9.4.2
|
||||
typescript: ^4.6.2
|
||||
uniforms: ^3.7.0
|
||||
@@ -112,7 +110,7 @@ devDependencies:
|
||||
'@popperjs/core': 2.11.6
|
||||
'@sentry/react': 6.19.7_react@17.0.1
|
||||
'@sentry/tracing': 6.19.7
|
||||
'@tailwindcss/forms': 0.3.4_tailwindcss@2.2.19
|
||||
'@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
|
||||
'@types/chai': 4.3.4
|
||||
'@types/glob': 7.1.3
|
||||
'@types/invariant': 2.2.35
|
||||
@@ -138,7 +136,7 @@ devDependencies:
|
||||
'@webpack-cli/serve': 1.7.0_ud4agclah7rahur6ntojouq57y
|
||||
ajv: 8.12.0
|
||||
array-move: 4.0.0
|
||||
autoprefixer: 10.3.3_postcss@8.4.21
|
||||
autoprefixer: 10.4.13_postcss@8.4.21
|
||||
chai: 4.3.7
|
||||
css-loader: 5.2.7_webpack@5.75.0
|
||||
date-fns: 2.23.0
|
||||
@@ -166,8 +164,7 @@ devDependencies:
|
||||
npm-run-all: 4.1.5
|
||||
path-browserify: 1.0.1
|
||||
postcss: 8.4.21
|
||||
postcss-loader: 4.3.0_6jdsrmfenkuhhw3gx4zvjlznce
|
||||
postcss-nested: 5.0.6_postcss@8.4.21
|
||||
postcss-loader: 7.0.2_6jdsrmfenkuhhw3gx4zvjlznce
|
||||
prettier: 2.8.3
|
||||
prettier-plugin-tailwindcss: 0.2.2_prettier@2.8.3
|
||||
react: 17.0.1
|
||||
@@ -184,8 +181,7 @@ devDependencies:
|
||||
semver: 7.3.8
|
||||
simple-git: 3.16.0
|
||||
style-loader: 2.0.0_webpack@5.75.0
|
||||
tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy
|
||||
tailwindcss-nested-groups: 1.2.4_tailwindcss@2.2.19
|
||||
tailwindcss: 3.2.4_postcss@8.4.21
|
||||
ts-loader: 9.4.2_hhrrucqyg4eysmfpujvov2ym5u
|
||||
typescript: 4.9.5
|
||||
uniforms: 3.10.2_react@17.0.1
|
||||
@@ -693,13 +689,13 @@ packages:
|
||||
defer-to-connect: 2.0.1
|
||||
dev: true
|
||||
|
||||
/@tailwindcss/forms/0.3.4_tailwindcss@2.2.19:
|
||||
resolution: {integrity: sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==}
|
||||
/@tailwindcss/forms/0.5.3_tailwindcss@3.2.4:
|
||||
resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=2.0.0'
|
||||
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
|
||||
dependencies:
|
||||
mini-svg-data-uri: 1.4.4
|
||||
tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy
|
||||
tailwindcss: 3.2.4_postcss@8.4.21
|
||||
dev: true
|
||||
|
||||
/@types/body-parser/1.19.2:
|
||||
@@ -1609,8 +1605,8 @@ packages:
|
||||
engines: {node: '>=4'}
|
||||
dev: true
|
||||
|
||||
/autoprefixer/10.3.3_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==}
|
||||
/autoprefixer/10.4.13_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -1618,9 +1614,9 @@ packages:
|
||||
dependencies:
|
||||
browserslist: 4.21.5
|
||||
caniuse-lite: 1.0.30001450
|
||||
colorette: 1.4.0
|
||||
fraction.js: 4.2.0
|
||||
normalize-range: 0.1.2
|
||||
picocolors: 1.0.0
|
||||
postcss: 8.4.21
|
||||
postcss-value-parser: 4.2.0
|
||||
dev: true
|
||||
@@ -2025,25 +2021,6 @@ packages:
|
||||
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
|
||||
dev: true
|
||||
|
||||
/color-string/1.9.1:
|
||||
resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
simple-swizzle: 0.2.2
|
||||
dev: true
|
||||
|
||||
/color/4.2.3:
|
||||
resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
|
||||
engines: {node: '>=12.5.0'}
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
color-string: 1.9.1
|
||||
dev: true
|
||||
|
||||
/colorette/1.4.0:
|
||||
resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
|
||||
dev: true
|
||||
|
||||
/colorette/2.0.19:
|
||||
resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==}
|
||||
dev: true
|
||||
@@ -2079,11 +2056,6 @@ packages:
|
||||
engines: {node: '>= 10'}
|
||||
dev: true
|
||||
|
||||
/commander/8.3.0:
|
||||
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
|
||||
engines: {node: '>= 12'}
|
||||
dev: true
|
||||
|
||||
/compare-versions/5.0.3:
|
||||
resolution: {integrity: sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==}
|
||||
dev: true
|
||||
@@ -2185,10 +2157,6 @@ packages:
|
||||
which: 2.0.2
|
||||
dev: true
|
||||
|
||||
/css-color-names/0.0.4:
|
||||
resolution: {integrity: sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==}
|
||||
dev: true
|
||||
|
||||
/css-loader/5.2.7_webpack@5.75.0:
|
||||
resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
|
||||
engines: {node: '>= 10.13.0'}
|
||||
@@ -2228,10 +2196,6 @@ packages:
|
||||
nth-check: 2.1.1
|
||||
dev: true
|
||||
|
||||
/css-unit-converter/1.1.2:
|
||||
resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
|
||||
dev: true
|
||||
|
||||
/css-what/6.1.0:
|
||||
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -3091,15 +3055,6 @@ packages:
|
||||
resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
|
||||
dev: true
|
||||
|
||||
/fs-extra/10.1.0:
|
||||
resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
graceful-fs: 4.2.10
|
||||
jsonfile: 6.1.0
|
||||
universalify: 2.0.0
|
||||
dev: true
|
||||
|
||||
/fs-extra/11.1.0:
|
||||
resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
|
||||
engines: {node: '>=14.14'}
|
||||
@@ -3379,10 +3334,6 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/hex-color-regex/1.1.0:
|
||||
resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
|
||||
dev: true
|
||||
|
||||
/hoist-non-react-statics/3.3.2:
|
||||
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
|
||||
dependencies:
|
||||
@@ -3414,14 +3365,6 @@ packages:
|
||||
engines: {node: '>=14'}
|
||||
dev: true
|
||||
|
||||
/hsl-regex/1.0.0:
|
||||
resolution: {integrity: sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==}
|
||||
dev: true
|
||||
|
||||
/hsla-regex/1.0.0:
|
||||
resolution: {integrity: sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==}
|
||||
dev: true
|
||||
|
||||
/html-entities/2.3.3:
|
||||
resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
|
||||
dev: true
|
||||
@@ -3453,11 +3396,6 @@ packages:
|
||||
terser: 4.8.1
|
||||
dev: true
|
||||
|
||||
/html-tags/3.2.0:
|
||||
resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/html-webpack-plugin/4.5.0_webpack@5.75.0:
|
||||
resolution: {integrity: sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==}
|
||||
engines: {node: '>=6.9'}
|
||||
@@ -3720,10 +3658,6 @@ packages:
|
||||
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
|
||||
dev: true
|
||||
|
||||
/is-arrayish/0.3.2:
|
||||
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
|
||||
dev: true
|
||||
|
||||
/is-bigint/1.0.4:
|
||||
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
|
||||
dependencies:
|
||||
@@ -3750,17 +3684,6 @@ packages:
|
||||
engines: {node: '>= 0.4'}
|
||||
dev: true
|
||||
|
||||
/is-color-stop/1.1.0:
|
||||
resolution: {integrity: sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==}
|
||||
dependencies:
|
||||
css-color-names: 0.0.4
|
||||
hex-color-regex: 1.1.0
|
||||
hsl-regex: 1.0.0
|
||||
hsla-regex: 1.0.0
|
||||
rgb-regex: 1.0.1
|
||||
rgba-regex: 1.0.0
|
||||
dev: true
|
||||
|
||||
/is-core-module/2.11.0:
|
||||
resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
|
||||
dependencies:
|
||||
@@ -4163,10 +4086,6 @@ packages:
|
||||
resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
|
||||
dev: true
|
||||
|
||||
/lodash.topath/4.5.2:
|
||||
resolution: {integrity: sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==}
|
||||
dev: true
|
||||
|
||||
/lodash.uniqby/4.7.0:
|
||||
resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==}
|
||||
dev: true
|
||||
@@ -4571,11 +4490,6 @@ packages:
|
||||
yargs-unparser: 2.0.0
|
||||
dev: true
|
||||
|
||||
/modern-normalize/1.1.0:
|
||||
resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==}
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/moment/2.29.4:
|
||||
resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
|
||||
dev: true
|
||||
@@ -4692,12 +4606,6 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/node-emoji/1.11.0:
|
||||
resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
|
||||
dependencies:
|
||||
lodash: 4.17.21
|
||||
dev: true
|
||||
|
||||
/node-fetch/2.6.9:
|
||||
resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==}
|
||||
engines: {node: 4.x || >=6.0.0}
|
||||
@@ -4790,8 +4698,8 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/object-hash/2.2.0:
|
||||
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
|
||||
/object-hash/3.0.0:
|
||||
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
|
||||
engines: {node: '>= 6'}
|
||||
dev: true
|
||||
|
||||
@@ -5088,6 +4996,11 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/pify/2.3.0:
|
||||
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/pify/3.0.0:
|
||||
resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
|
||||
engines: {node: '>=4'}
|
||||
@@ -5100,9 +5013,23 @@ packages:
|
||||
find-up: 4.1.0
|
||||
dev: true
|
||||
|
||||
/postcss-js/3.0.3:
|
||||
resolution: {integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==}
|
||||
engines: {node: '>=10.0'}
|
||||
/postcss-import/14.1.0_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.0.0
|
||||
dependencies:
|
||||
postcss: 8.4.21
|
||||
postcss-value-parser: 4.2.0
|
||||
read-cache: 1.0.0
|
||||
resolve: 1.22.1
|
||||
dev: true
|
||||
|
||||
/postcss-js/4.0.0_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
|
||||
engines: {node: ^12 || ^14 || >= 16}
|
||||
peerDependencies:
|
||||
postcss: ^8.3.3
|
||||
dependencies:
|
||||
camelcase-css: 2.0.1
|
||||
postcss: 8.4.21
|
||||
@@ -5125,18 +5052,16 @@ packages:
|
||||
yaml: 1.10.2
|
||||
dev: true
|
||||
|
||||
/postcss-loader/4.3.0_6jdsrmfenkuhhw3gx4zvjlznce:
|
||||
resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==}
|
||||
engines: {node: '>= 10.13.0'}
|
||||
/postcss-loader/7.0.2_6jdsrmfenkuhhw3gx4zvjlznce:
|
||||
resolution: {integrity: sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==}
|
||||
engines: {node: '>= 14.15.0'}
|
||||
peerDependencies:
|
||||
postcss: ^7.0.0 || ^8.0.1
|
||||
webpack: ^4.0.0 || ^5.0.0
|
||||
webpack: ^5.0.0
|
||||
dependencies:
|
||||
cosmiconfig: 7.1.0
|
||||
klona: 2.0.6
|
||||
loader-utils: 2.0.4
|
||||
postcss: 8.4.21
|
||||
schema-utils: 3.1.1
|
||||
semver: 7.3.8
|
||||
webpack: 5.75.0_webpack-cli@4.10.0
|
||||
dev: true
|
||||
@@ -5182,8 +5107,8 @@ packages:
|
||||
postcss: 8.4.21
|
||||
dev: true
|
||||
|
||||
/postcss-nested/5.0.6_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
|
||||
/postcss-nested/6.0.0_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
|
||||
engines: {node: '>=12.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.2.14
|
||||
@@ -5200,10 +5125,6 @@ packages:
|
||||
util-deprecate: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss-value-parser/3.3.1:
|
||||
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
|
||||
dev: true
|
||||
|
||||
/postcss-value-parser/4.2.0:
|
||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
dev: true
|
||||
@@ -5307,11 +5228,6 @@ packages:
|
||||
renderkid: 2.0.7
|
||||
dev: true
|
||||
|
||||
/pretty-hrtime/1.0.3:
|
||||
resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
|
||||
engines: {node: '>= 0.8'}
|
||||
dev: true
|
||||
|
||||
/process-nextick-args/2.0.1:
|
||||
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
||||
dev: true
|
||||
@@ -5351,16 +5267,6 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/purgecss/4.1.3:
|
||||
resolution: {integrity: sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
commander: 8.3.0
|
||||
glob: 7.2.0
|
||||
postcss: 8.4.21
|
||||
postcss-selector-parser: 6.0.11
|
||||
dev: true
|
||||
|
||||
/qs/6.11.0:
|
||||
resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
|
||||
engines: {node: '>=0.6'}
|
||||
@@ -6102,6 +6008,12 @@ packages:
|
||||
object-assign: 4.1.1
|
||||
dev: true
|
||||
|
||||
/read-cache/1.0.0:
|
||||
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
|
||||
dependencies:
|
||||
pify: 2.3.0
|
||||
dev: true
|
||||
|
||||
/read-pkg/3.0.0:
|
||||
resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
|
||||
engines: {node: '>=4'}
|
||||
@@ -6170,13 +6082,6 @@ packages:
|
||||
react-dom: 17.0.1_react@17.0.1
|
||||
dev: true
|
||||
|
||||
/reduce-css-calc/2.1.8:
|
||||
resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
|
||||
dependencies:
|
||||
css-unit-converter: 1.1.2
|
||||
postcss-value-parser: 3.3.1
|
||||
dev: true
|
||||
|
||||
/regenerator-runtime/0.13.11:
|
||||
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
|
||||
dev: true
|
||||
@@ -6274,14 +6179,6 @@ packages:
|
||||
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/rgb-regex/1.0.1:
|
||||
resolution: {integrity: sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==}
|
||||
dev: true
|
||||
|
||||
/rgba-regex/1.0.0:
|
||||
resolution: {integrity: sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==}
|
||||
dev: true
|
||||
|
||||
/rimraf/3.0.2:
|
||||
resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
|
||||
hasBin: true
|
||||
@@ -6555,12 +6452,6 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/simple-swizzle/0.2.2:
|
||||
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
|
||||
dependencies:
|
||||
is-arrayish: 0.3.2
|
||||
dev: true
|
||||
|
||||
/sirv/1.0.19:
|
||||
resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
|
||||
engines: {node: '>= 10'}
|
||||
@@ -6803,58 +6694,36 @@ packages:
|
||||
resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
|
||||
dev: true
|
||||
|
||||
/tailwindcss-nested-groups/1.2.4_tailwindcss@2.2.19:
|
||||
resolution: {integrity: sha512-SrW9VTgH5/PmW/E0q1+TC7TckhVfonDpiYiLKsRYX57FEcM3LemiH7JYcsTlubM+eAVkd9Jjj03pTiyfnDBibQ==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
tailwindcss: '>=1 <=2'
|
||||
dependencies:
|
||||
postcss-selector-parser: 6.0.11
|
||||
tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy
|
||||
dev: true
|
||||
|
||||
/tailwindcss/2.2.19_4xaawq3hrlasat64u2hch2fhdy:
|
||||
resolution: {integrity: sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==}
|
||||
/tailwindcss/3.2.4_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
autoprefixer: ^10.0.2
|
||||
postcss: ^8.0.9
|
||||
dependencies:
|
||||
arg: 5.0.2
|
||||
autoprefixer: 10.3.3_postcss@8.4.21
|
||||
bytes: 3.1.2
|
||||
chalk: 4.1.2
|
||||
chokidar: 3.5.3
|
||||
color: 4.2.3
|
||||
cosmiconfig: 7.1.0
|
||||
color-name: 1.1.4
|
||||
detective: 5.2.1
|
||||
didyoumean: 1.2.2
|
||||
dlv: 1.1.3
|
||||
fast-glob: 3.2.12
|
||||
fs-extra: 10.1.0
|
||||
glob-parent: 6.0.2
|
||||
html-tags: 3.2.0
|
||||
is-color-stop: 1.1.0
|
||||
is-glob: 4.0.3
|
||||
lodash: 4.17.21
|
||||
lodash.topath: 4.5.2
|
||||
modern-normalize: 1.1.0
|
||||
node-emoji: 1.11.0
|
||||
lilconfig: 2.0.6
|
||||
micromatch: 4.0.5
|
||||
normalize-path: 3.0.0
|
||||
object-hash: 2.2.0
|
||||
object-hash: 3.0.0
|
||||
picocolors: 1.0.0
|
||||
postcss: 8.4.21
|
||||
postcss-js: 3.0.3
|
||||
postcss-import: 14.1.0_postcss@8.4.21
|
||||
postcss-js: 4.0.0_postcss@8.4.21
|
||||
postcss-load-config: 3.1.4_postcss@8.4.21
|
||||
postcss-nested: 5.0.6_postcss@8.4.21
|
||||
postcss-nested: 6.0.0_postcss@8.4.21
|
||||
postcss-selector-parser: 6.0.11
|
||||
postcss-value-parser: 4.2.0
|
||||
pretty-hrtime: 1.0.3
|
||||
purgecss: 4.1.3
|
||||
quick-lru: 5.1.1
|
||||
reduce-css-calc: 2.1.8
|
||||
resolve: 1.22.1
|
||||
tmp: 0.2.1
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
dev: true
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState } from '../constants';
|
||||
import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState, SETTING_EXPERIMENTAL } from '../constants';
|
||||
import { join } from 'path';
|
||||
import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
|
||||
import { Logger, Settings as SettingsHelper } from '../helpers';
|
||||
@@ -220,6 +220,9 @@ export class Dashboard {
|
||||
const version = ext.getVersion();
|
||||
const isBeta = ext.isBetaVersion();
|
||||
|
||||
// Get experimental setting
|
||||
const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL)
|
||||
|
||||
const csp = [
|
||||
`default-src 'none';`,
|
||||
`img-src ${`vscode-file://vscode-app`} ${
|
||||
@@ -255,7 +258,7 @@ export class Dashboard {
|
||||
isBeta ? 'BETA' : 'main'
|
||||
}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${
|
||||
version.usedVersion ? '' : `data-showWelcome="true"`
|
||||
}></div>
|
||||
} ${experimental ? `data-experimental="${experimental}"` : ""} ></div>
|
||||
|
||||
<img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@ export const EXTENSION_NAME = 'Front Matter';
|
||||
|
||||
export const CONFIG_KEY = 'frontMatter';
|
||||
|
||||
export const SETTING_EXPERIMENTAL = 'experimental';
|
||||
|
||||
export const SETTING_EXTENDS = 'extends';
|
||||
|
||||
export const SETTING_GLOBAL_NOTIFICATIONS = 'global.notifications';
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Menu } from '@headlessui/react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/outline';
|
||||
import * as React from 'react';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
import { MenuItem, MenuItems } from './Menu';
|
||||
|
||||
export interface IChoiceButtonProps {
|
||||
@@ -21,11 +22,18 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
|
||||
choices,
|
||||
title
|
||||
}: React.PropsWithChildren<IChoiceButtonProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<span className="relative z-50 inline-flex shadow-sm rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
|
||||
className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
@@ -35,7 +43,12 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
|
||||
{choices.length > 0 && (
|
||||
<Menu as="span" className="-ml-px relative block">
|
||||
<Menu.Button
|
||||
className="h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
|
||||
className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
disabled={disabled}
|
||||
>
|
||||
<span className="sr-only">Open options</span>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
|
||||
import { Alert } from '../Modals/Alert';
|
||||
import { usePopper } from 'react-popper';
|
||||
import { useState } from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IContentActionsProps {
|
||||
title: string;
|
||||
@@ -25,6 +26,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
|
||||
listView
|
||||
}: React.PropsWithChildren<IContentActionsProps>) => {
|
||||
const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const [referenceElement, setReferenceElement] = useState<any>(null);
|
||||
const [popperElement, setPopperElement] = useState<any>(null);
|
||||
@@ -88,8 +90,13 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
|
||||
} flex flex-col space-y-4`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center border border-transparent group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50 rounded-full ${
|
||||
className={`flex items-center border border-transparent rounded-full ${
|
||||
listView ? '' : 'p-2 -mt-4'
|
||||
} ${
|
||||
getColors(
|
||||
'group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50',
|
||||
'group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
|
||||
import { DashboardViewType } from '../../models';
|
||||
import { ContentActions } from './ContentActions';
|
||||
import { useMemo } from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IItemProps extends Page {}
|
||||
|
||||
@@ -26,6 +27,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
const view = useRecoilValue(ViewSelector);
|
||||
const settings = useRecoilValue(SettingsSelector);
|
||||
const draftField = useMemo(() => settings?.draftField, [settings]);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const escapedTitle = useMemo(() => {
|
||||
if (title && typeof title !== 'string') {
|
||||
@@ -76,11 +78,21 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
return (
|
||||
<li className="relative">
|
||||
<div
|
||||
className={`group flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left shadow-md dark:shadow-none hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50`}
|
||||
className={`group flex flex-wrap items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded ${
|
||||
getColors(
|
||||
'bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
|
||||
'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={openFile}
|
||||
className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200 cursor-pointer"
|
||||
className={`relative h-36 w-full overflow-hidden border-b cursor-pointer ${
|
||||
getColors(
|
||||
'border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200',
|
||||
'border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
{pageData[PREVIEW_IMAGE_FIELD] ? (
|
||||
<img
|
||||
@@ -91,9 +103,19 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`flex items-center justify-center bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100`}
|
||||
className={`flex items-center justify-center ${
|
||||
getColors(
|
||||
'bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100',
|
||||
'bg-[var(--vscode-sideBar-background)] group-hover:bg-[var(--vscode-list-hoverBackground)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<MarkdownIcon className={`h-32 text-vulcan-100 dark:text-whisper-100`} />
|
||||
<MarkdownIcon className={`h-32 ${
|
||||
getColors(
|
||||
'text-vulcan-100 dark:text-whisper-100',
|
||||
'text-[var(--vscode-sideBarTitle-foreground)] opacity-80'
|
||||
)
|
||||
}`} />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
@@ -117,7 +139,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
</button>
|
||||
|
||||
<button onClick={openFile} className={`text-left block`}>
|
||||
<p className="text-xs text-vulcan-200 dark:text-whisper-800">{escapedDescription}</p>
|
||||
<p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
|
||||
</button>
|
||||
|
||||
{tags && tags.length > 0 && (
|
||||
@@ -127,7 +149,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
tag && (
|
||||
<span
|
||||
key={index}
|
||||
className="inline-block mr-1 mt-1 text-[#5D561D] dark:text-[#F0ECD0] text-xs"
|
||||
className={`inline-block mr-1 mt-1 text-xs ${
|
||||
getColors(
|
||||
`text-[#5D561D] dark:text-[#F0ECD0]`,
|
||||
`text-[var(--vscode-textPreformat-foreground)]`
|
||||
)
|
||||
}`}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
@@ -143,7 +170,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
return (
|
||||
<li className="relative">
|
||||
<div
|
||||
className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`}
|
||||
className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b hover:bg-opacity-70 ${
|
||||
getColors(
|
||||
`border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50`,
|
||||
`border-[var(--vscode-panel-border)] hover:bg-[var(--vscode-sideBar-background)]`
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<div className="col-span-8 font-bold truncate flex items-center space-x-4">
|
||||
<button title={`Open: ${escapedTitle}`} onClick={openFile}>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { SearchIcon, XCircleIcon } from '@heroicons/react/outline';
|
||||
import * as React from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IFilterInputProps {
|
||||
placeholder: string;
|
||||
@@ -18,6 +19,8 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
|
||||
onReset,
|
||||
onChange
|
||||
}: React.PropsWithChildren<IFilterInputProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<div className="flex space-x-4 flex-1">
|
||||
<div className="min-w-0">
|
||||
@@ -26,13 +29,18 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
|
||||
</label>
|
||||
<div className="relative flex justify-center">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
className={`block w-full py-2 pl-10 pr-3 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none appearance-none disabled:opacity-50`}
|
||||
className={`block w-full py-2 pl-10 pr-3 sm:text-sm focus:outline-none appearance-none disabled:opacity-50 ${
|
||||
getColors(
|
||||
'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800',
|
||||
'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)]'
|
||||
)
|
||||
}`}
|
||||
placeholder={placeholder || 'Search'}
|
||||
value={value}
|
||||
autoFocus={autoFocus}
|
||||
@@ -42,7 +50,7 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
|
||||
|
||||
{value && onReset && (
|
||||
<button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<XCircleIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -27,6 +27,7 @@ import { Pagination } from './Pagination';
|
||||
import { GroupOption } from '../../constants/GroupOption';
|
||||
import usePagination from '../../hooks/usePagination';
|
||||
import { PaginationStatus } from './PaginationStatus';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IHeaderProps {
|
||||
header?: React.ReactNode;
|
||||
@@ -51,6 +52,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const createContent = () => {
|
||||
Messenger.send(DashboardMessage.createContent);
|
||||
@@ -139,8 +141,12 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
|
||||
}, [location.search]);
|
||||
|
||||
return (
|
||||
<div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
|
||||
<div className="mb-0 border-b bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300">
|
||||
<div className={`w-full sticky top-0 z-40 ${
|
||||
getColors(`bg-gray-100 dark:bg-vulcan-500`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`)
|
||||
} `}>
|
||||
<div className={`mb-0 border-b ${
|
||||
getColors(`bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`, `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`)
|
||||
}`}>
|
||||
<Tabs onNavigate={updateView} />
|
||||
</div>
|
||||
|
||||
@@ -163,7 +169,9 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 flex flex-row items-center border-b border-gray-200 dark:border-vulcan-100 justify-between">
|
||||
<div className={`px-4 flex flex-row items-center border-b justify-between ${
|
||||
getColors(`border-gray-200 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
|
||||
}`}>
|
||||
<div>
|
||||
<Navigation totalPages={totalPages || 0} />
|
||||
</div>
|
||||
@@ -174,7 +182,9 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100 space-x-4 lg:space-x-6 xl:space-x-8`}
|
||||
className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 ${
|
||||
getColors(`bg-gray-200 border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`, `bg-[var(--vscode-panel-background)] border-[var(--vscode-editorWidget-border)]`)
|
||||
}`}
|
||||
>
|
||||
<ClearFilters />
|
||||
|
||||
@@ -203,7 +213,9 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
|
||||
(totalPages || 0) > pageSetNr &&
|
||||
(!grouping || grouping === GroupOption.none) && (
|
||||
<div
|
||||
className={`px-4 flex justify-between py-2 border-b border-gray-300 dark:border-vulcan-100`}
|
||||
className={`px-4 flex justify-between py-2 border-b ${
|
||||
getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
|
||||
}`}
|
||||
>
|
||||
<PaginationStatus totalPages={totalPages || 0} />
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ import * as React from 'react';
|
||||
import { useCallback, useEffect, useMemo } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import usePagination from '../../hooks/usePagination';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
|
||||
import { PaginationButton } from './PaginationButton';
|
||||
|
||||
@@ -20,6 +21,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
|
||||
totalPages,
|
||||
totalMedia
|
||||
);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const getButtons = useCallback((): number[] => {
|
||||
const maxButtons = 5;
|
||||
@@ -27,7 +29,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
|
||||
const start = page - maxButtons;
|
||||
const end = page + maxButtons;
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
for (let i = start; i < end; i++) {
|
||||
if (i >= 0 && i <= totalPagesNr) {
|
||||
buttons.push(i);
|
||||
}
|
||||
@@ -72,11 +74,14 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
|
||||
onClick={() => {
|
||||
setPage(button);
|
||||
}}
|
||||
className={`${
|
||||
className={`max-h-8 rounded ${
|
||||
page === button
|
||||
? 'bg-gray-200 px-2 text-vulcan-500'
|
||||
: 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500'
|
||||
} max-h-8 rounded-sm`}
|
||||
? `px-2 ${getColors('bg-gray-200 text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
|
||||
: getColors(
|
||||
`text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
|
||||
`text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
|
||||
)
|
||||
}`}
|
||||
>
|
||||
{button + 1}
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IPaginationButtonProps {
|
||||
title: string;
|
||||
@@ -11,11 +12,18 @@ export const PaginationButton: React.FunctionComponent<IPaginationButtonProps> =
|
||||
disabled,
|
||||
onClick
|
||||
}: React.PropsWithChildren<IPaginationButtonProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
className={`text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900 disabled:opacity-50`}
|
||||
className={`disabled:opacity-50 ${
|
||||
getColors(
|
||||
'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900',
|
||||
'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
|
||||
import * as React from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { useDebounce } from '../../../hooks/useDebounce';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { SearchAtom, SearchReadyAtom } from '../../state';
|
||||
import { RefreshDashboardData } from './RefreshDashboardData';
|
||||
|
||||
@@ -16,6 +17,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
|
||||
const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom);
|
||||
const searchReady = useRecoilValue(SearchReadyAtom);
|
||||
const debounceSearch = useDebounce<string>(value, 500);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue(event.target.value);
|
||||
@@ -44,13 +46,18 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
|
||||
</label>
|
||||
<div className="relative flex justify-center">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
className={`block w-full py-2 pl-10 pr-3 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none appearance-none disabled:opacity-50`}
|
||||
className={`block w-full py-2 pl-10 pr-3 sm:text-sm focus:outline-none appearance-none disabled:opacity-50 ${
|
||||
getColors(
|
||||
'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800',
|
||||
'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)]'
|
||||
)
|
||||
}`}
|
||||
placeholder={placeholder || 'Search'}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
@@ -59,7 +66,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
|
||||
|
||||
{value && (
|
||||
<button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||
<XCircleIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import * as React from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { GeneralCommands } from '../../../constants';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { SettingsSelector } from '../../state';
|
||||
|
||||
export interface ISyncButtonProps {}
|
||||
@@ -14,6 +15,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
|
||||
) => {
|
||||
const settings = useRecoilValue(SettingsSelector);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const pull = () => {
|
||||
Messenger.send(GeneralCommands.toVSCode.gitSync);
|
||||
@@ -45,7 +47,12 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
|
||||
<div className="git_actions">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500"
|
||||
className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
onClick={pull}
|
||||
disabled={isSyncing}
|
||||
>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { ViewListIcon, ViewGridIcon } from '@heroicons/react/solid';
|
||||
import { Messenger } from '@estruyf/vscode/dist/client';
|
||||
import { DashboardMessage } from '../../DashboardMessage';
|
||||
import { DashboardViewType } from '../../models';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IViewSwitchProps {}
|
||||
|
||||
@@ -13,6 +14,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
|
||||
) => {
|
||||
const [view, setView] = useRecoilState(ViewAtom);
|
||||
const settings = useRecoilValue(SettingsSelector);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const toggleView = () => {
|
||||
const newView =
|
||||
@@ -28,10 +30,10 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
|
||||
}, [settings?.pageViewType]);
|
||||
|
||||
return (
|
||||
<div className={`flex rounded-sm bg-vulcan-50 lg:mb-1`}>
|
||||
<div className={`flex rounded-sm lg:mb-1 ${getColors('bg-vulcan-50', 'bg-[var(--vscode-button-secondaryBackground)]')}`}>
|
||||
<button
|
||||
className={`flex items-center px-2 py-1 rounded-l-sm ${
|
||||
view === DashboardViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'
|
||||
view === DashboardViewType.Grid ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
|
||||
}`}
|
||||
onClick={toggleView}
|
||||
>
|
||||
@@ -40,7 +42,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
|
||||
</button>
|
||||
<button
|
||||
className={`flex items-center px-2 py-1 rounded-r-sm ${
|
||||
view === DashboardViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'
|
||||
view === DashboardViewType.List ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
|
||||
}`}
|
||||
onClick={toggleView}
|
||||
>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
|
||||
import { DashboardMessage } from '../../DashboardMessage';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { PageSelector, SelectedMediaFolderSelector } from '../../state';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IDetailsSlideOverProps {
|
||||
imgSrc: string;
|
||||
@@ -42,6 +43,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
|
||||
const [alt, setAlt] = React.useState(media.alt);
|
||||
const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
|
||||
const page = useRecoilValue(PageSelector);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const createdDate = useMemo(() => DateHelper.tryParse(media.ctime), [media]);
|
||||
const modifiedDate = useMemo(() => DateHelper.tryParse(media.mtime), [media]);
|
||||
@@ -75,7 +77,12 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
|
||||
<Transition.Root show={true} as={Fragment}>
|
||||
<Dialog onClose={onDismiss} as={'div' as any} className="fixed inset-0 overflow-hidden z-50">
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0 bg-vulcan-500 bg-opacity-75 transition-opacity" />
|
||||
<Dialog.Overlay className={`absolute inset-0 transition-opacity ${
|
||||
getColors(
|
||||
'bg-vulcan-500 bg-opacity-75',
|
||||
'bg-[var(--vscode-editor-background)] opacity-75'
|
||||
)
|
||||
}`} />
|
||||
|
||||
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
|
||||
<Transition.Child
|
||||
@@ -88,7 +95,12 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<div className="pointer-events-auto w-screen max-w-md">
|
||||
<div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-vulcan-400 border-l border-whisper-900 dark:border-vulcan-50 py-6 shadow-xl">
|
||||
<div className={`flex h-full flex-col overflow-y-scroll border-l py-6 shadow-xl ${
|
||||
getColors(
|
||||
`bg-white dark:bg-vulcan-400 border-whisper-900 dark:border-vulcan-50`,
|
||||
`bg-[var(--vscode-sideBar-background)] border-[var(--vscode-panel-border)]`
|
||||
)
|
||||
}`}>
|
||||
<div className="px-4 sm:px-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<Dialog.Title className="text-lg font-medium text-vulcan-300 dark:text-whisper-900">
|
||||
@@ -144,7 +156,12 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
|
||||
</label>
|
||||
<div className="relative mt-1">
|
||||
<input
|
||||
className="py-1 px-2 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none w-full"
|
||||
className={`py-1 px-2 sm:text-sm border focus:outline-none w-full ${
|
||||
getColors(
|
||||
'bg-white dark:bg-vulcan-300 border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800',
|
||||
''
|
||||
)
|
||||
}`}
|
||||
value={name}
|
||||
onChange={(e) => setFilename(`${e.target.value}.${extension}`)}
|
||||
/>
|
||||
|
||||
@@ -16,6 +16,7 @@ import { STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { extname } from 'path';
|
||||
import { parseWinPath } from '../../../helpers/parseWinPath';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IFolderCreationProps {}
|
||||
|
||||
@@ -27,6 +28,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
|
||||
const allStaticFolders = useRecoilValue(AllStaticFoldersAtom);
|
||||
const allContentFolders = useRecoilValue(AllContentFoldersAtom);
|
||||
const viewData = useRecoilValue(ViewDataSelector);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const hexoAssetFolderPath = useMemo(() => {
|
||||
const path = viewData?.data?.filePath?.replace(extname(viewData.data.filePath), '');
|
||||
@@ -74,7 +76,12 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
|
||||
if (isHexoPostAssetsEnabled) {
|
||||
return (
|
||||
<button
|
||||
className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
|
||||
className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
title={`Create post asset folder`}
|
||||
onClick={onAssetFolderCreation}
|
||||
>
|
||||
@@ -108,7 +115,12 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
|
||||
<div className="flex flex-1 justify-end">
|
||||
{renderPostAssetsButton}
|
||||
<button
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
title={`Create new folder`}
|
||||
onClick={onFolderCreation}
|
||||
>
|
||||
|
||||
@@ -37,6 +37,7 @@ import { InfoDialog } from '../Modals/InfoDialog';
|
||||
import { DetailsSlideOver } from './DetailsSlideOver';
|
||||
import { usePopper } from 'react-popper';
|
||||
import { MediaSnippetForm } from './MediaSnippetForm';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IItemProps {
|
||||
media: MediaInfo;
|
||||
@@ -59,6 +60,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
const settings = useRecoilValue(SettingsSelector);
|
||||
const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
|
||||
const viewData = useRecoilValue(ViewDataSelector);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const hasViewData = useMemo(() => {
|
||||
return viewData?.data?.filePath !== undefined;
|
||||
@@ -345,18 +347,20 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
const path = media.fsPath;
|
||||
const extension = path.split('.').pop();
|
||||
|
||||
let icon = <DocumentIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
|
||||
const colors = getColors(`text-gray-300 dark:text-vulcan-200`, `text-[var(--vscode-sideBarTitle-foreground)] opacity-80`);
|
||||
|
||||
let icon = <DocumentIcon className={`h-4/6 ${colors}`} />;
|
||||
|
||||
if (isImageFile) {
|
||||
return <PhotographIcon className={`h-1/2 text-gray-300 dark:text-vulcan-200`} />;
|
||||
return <PhotographIcon className={`h-1/2 ${colors}`} />;
|
||||
}
|
||||
|
||||
if (isVideoFile) {
|
||||
icon = <VideoCameraIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
|
||||
icon = <VideoCameraIcon className={`h-4/6 ${colors}`} />;
|
||||
}
|
||||
|
||||
if (isAudioFile) {
|
||||
icon = <MusicNoteIcon className={`h-4/6 text-gray-300 dark:text-vulcan-200`} />;
|
||||
icon = <MusicNoteIcon className={`h-4/6 ${colors}`} />;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -420,10 +424,20 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
|
||||
<li className={`group relative shadow-md hover:shadow-xl dark:shadow-none border rounded ${
|
||||
getColors(
|
||||
'bg-gray-50 dark:bg-vulcan-200 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
|
||||
'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}>
|
||||
<button
|
||||
className={`group/button relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
|
||||
className={`group/button relative block w-full aspect-w-10 aspect-h-7 overflow-hidden h-48 ${
|
||||
isImageFile ? 'cursor-pointer' : 'cursor-default'
|
||||
} ${
|
||||
getColors(
|
||||
`bg-gray-200 dark:bg-vulcan-300`,
|
||||
`border-b border-[var(--vscode-panel-border)]`
|
||||
)
|
||||
}`}
|
||||
onClick={hasViewData ? undefined : openLightbox}
|
||||
>
|
||||
@@ -439,7 +453,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
</div>
|
||||
{hasViewData && (
|
||||
<div
|
||||
className={`hidden group-hover/button:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
|
||||
className={`hidden group-hover/button:flex absolute top-0 right-0 bottom-0 left-0 items-center justify-center ${
|
||||
getColors(
|
||||
`bg-vulcan-500 bg-opacity-70`,
|
||||
`bg-black bg-opacity-90`
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`h-full ${
|
||||
@@ -448,7 +467,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
>
|
||||
<button
|
||||
title="Insert image"
|
||||
className={`text-gray-300 hover:text-teal-600 h-1/3`}
|
||||
className={`h-1/3 ${getColors(`text-gray-300 hover:text-teal-600`, `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-button-hoverBackground)]`)}`}
|
||||
onClick={insertToArticle}
|
||||
>
|
||||
<PlusIcon className={`w-full h-full hover:drop-shadow-md `} aria-hidden="true" />
|
||||
@@ -458,7 +477,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
<div className={`h-full w-1/3 flex items-center justify-center`}>
|
||||
<button
|
||||
title="Insert snippet"
|
||||
className={`text-gray-300 hover:text-teal-600 h-1/3`}
|
||||
className={`h-1/3 ${getColors(`text-gray-300 hover:text-teal-600`, `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-button-hoverBackground)]`)}`}
|
||||
onClick={insertSnippet}
|
||||
>
|
||||
<CodeIcon
|
||||
@@ -473,7 +492,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
</button>
|
||||
<div className={`relative py-4 pl-4 pr-12`}>
|
||||
<div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
|
||||
<div className="flex items-center border border-transparent group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
|
||||
<div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${
|
||||
getColors(
|
||||
`group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50`,
|
||||
`group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--vscode-panel-border)]`
|
||||
)
|
||||
}`}>
|
||||
<Menu as="div" className="relative z-10 flex text-left">
|
||||
<div className="hidden group-hover/actions:flex">
|
||||
<QuickAction title="View media details" onClick={viewMediaDetails}>
|
||||
@@ -612,31 +636,31 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center break-all">
|
||||
<p className={`text-sm font-bold pointer-events-none flex items-center break-all ${getColors(`dark:text-whisper-900`, ``)}`}>
|
||||
{basename(parseWinPath(media.fsPath) || '')}
|
||||
</p>
|
||||
{!isImageFile && media.title && (
|
||||
<p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
|
||||
<p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
|
||||
<b className={`mr-2`}>Title:</b>
|
||||
<span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.title}</span>
|
||||
<span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-activityBar-foreground)]`)}`}>{media.title}</span>
|
||||
</p>
|
||||
)}
|
||||
{media.caption && (
|
||||
<p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
|
||||
<p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
|
||||
<b className={`mr-2`}>Caption:</b>
|
||||
<span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.caption}</span>
|
||||
<span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-activityBar-foreground)]`)}`}>{media.caption}</span>
|
||||
</p>
|
||||
)}
|
||||
{!media.caption && media.alt && (
|
||||
<p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
|
||||
<p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
|
||||
<b className={`mr-2`}>Alt:</b>
|
||||
<span className={`block mt-1 dark:text-whisper-500 text-xs`}>{media.alt}</span>
|
||||
<span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-activityBar-foreground)]`)}`}>{media.alt}</span>
|
||||
</p>
|
||||
)}
|
||||
{(media?.size || media?.dimensions) && (
|
||||
<p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
|
||||
<p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
|
||||
<b className={`mr-1`}>Size:</b>
|
||||
<span className={`block mt-1 dark:text-whisper-500 text-xs`}>
|
||||
<span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-activityBar-foreground)]`)}`}>
|
||||
{getMediaDetails()}
|
||||
</span>
|
||||
</p>
|
||||
@@ -655,7 +679,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
|
||||
{mediaSnippets.map((snippet, idx) => (
|
||||
<li key={idx} className="inline-flex items-center pb-2 mr-2">
|
||||
<button
|
||||
className="w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 dark:hover:bg-teal-900 focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30"
|
||||
className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 ${
|
||||
getColors(
|
||||
`bg-teal-600 text-white hover:bg-teal-700 dark:hover:bg-teal-900`,
|
||||
`bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`
|
||||
)
|
||||
}`}
|
||||
onClick={() => processSnippet(snippet)}
|
||||
>
|
||||
{snippet.title}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { basename } from 'path';
|
||||
import * as React from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { LightboxAtom } from '../../state';
|
||||
|
||||
export interface ILightboxProps {}
|
||||
@@ -9,6 +10,7 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
|
||||
props: React.PropsWithChildren<ILightboxProps>
|
||||
) => {
|
||||
const [lightbox, setLightbox] = useRecoilState(LightboxAtom);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
if (!lightbox) {
|
||||
return null;
|
||||
@@ -21,13 +23,13 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
|
||||
return (
|
||||
<div
|
||||
onClick={hideLightbox}
|
||||
className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-50 z-50`}
|
||||
className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-black bg-opacity-50 z-50`}
|
||||
>
|
||||
<div className={`w-full h-full flex flex-wrap items-center justify-center`}>
|
||||
<img
|
||||
src={lightbox}
|
||||
alt={basename(lightbox)}
|
||||
className={`w-1/2 h-auto rounded-lg border border-vulcan-500 shadow-2xl`}
|
||||
className={`w-1/2 h-auto rounded border shadow-2xl ${getColors(`border-vulcan-500 bg-vulcan-600`, `border-[var(--vscode-panel-border)] bg-[var(--vscode-sideBar-background)]`)}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { NavigationType } from '../../models/NavigationType';
|
||||
import { SettingsAtom } from '../../state';
|
||||
import { Sorting } from '../Header';
|
||||
@@ -12,6 +13,7 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>
|
||||
props: React.PropsWithChildren<IMediaHeaderBottomProps>
|
||||
) => {
|
||||
const settings = useRecoilValue(SettingsAtom);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
if (!settings?.wsFolder) {
|
||||
return null;
|
||||
@@ -19,7 +21,12 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="w-full bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex justify-between py-2"
|
||||
className={`w-full flex justify-between py-2 border-b ${
|
||||
getColors(
|
||||
'bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-gray-300 dark:border-vulcan-100',
|
||||
'bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
aria-label="Breadcrumb"
|
||||
>
|
||||
<Breadcrumb />
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Menu } from '@headlessui/react';
|
||||
import * as React from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IMenuItemProps {
|
||||
title: JSX.Element | string;
|
||||
@@ -16,6 +17,8 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
|
||||
disabled,
|
||||
onClick
|
||||
}: React.PropsWithChildren<IMenuItemProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<Menu.Item>
|
||||
<button
|
||||
@@ -23,7 +26,12 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
|
||||
onClick={(e) => onClick(value, e)}
|
||||
className={`${
|
||||
!isCurrent ? `font-normal` : `font-bold`
|
||||
} text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
|
||||
} block px-4 py-2 text-sm w-full text-left disabled:opacity-50 ${
|
||||
getColors(
|
||||
'text-gray-500 dark:text-whisper-900 hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100',
|
||||
'text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)] '
|
||||
)
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import * as React from 'react';
|
||||
import { Fragment } from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IMenuItemsProps {
|
||||
widthClass?: string;
|
||||
@@ -16,6 +17,8 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
|
||||
updatePopper,
|
||||
disablePopper
|
||||
}: React.PropsWithChildren<IMenuItemsProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<Transition
|
||||
as={Fragment}
|
||||
@@ -30,7 +33,12 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
|
||||
<Menu.Items
|
||||
className={`${widthClass || ''} ${marginTopClass || 'mt-2'} ${
|
||||
disablePopper ? 'origin-top-right absolute right-0 z-20' : ''
|
||||
} rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}
|
||||
} rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto ${
|
||||
getColors(
|
||||
'bg-white dark:bg-vulcan-500 ring-vulcan-400 dark:ring-white',
|
||||
'bg-[var(--vscode-sideBar-background)] ring-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
<div className="py-1">{children}</div>
|
||||
</Menu.Items>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Dialog, Transition } from '@headlessui/react';
|
||||
import { ExclamationIcon } from '@heroicons/react/outline';
|
||||
import * as React from 'react';
|
||||
import { Fragment, useRef } from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IAlertProps {
|
||||
title: string;
|
||||
@@ -22,6 +23,7 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
|
||||
trigger
|
||||
}: React.PropsWithChildren<IAlertProps>) => {
|
||||
const cancelButtonRef = useRef(null);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<Transition.Root show={true} as={Fragment}>
|
||||
@@ -40,7 +42,7 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-vulcan-500 bg-opacity-75 transition-opacity" />
|
||||
<Dialog.Overlay className={`fixed inset-0 bg-black bg-opacity-75 transition-opacity`} />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
@@ -57,37 +59,59 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div className="inline-block align-bottom bg-white dark:bg-vulcan-500 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 border-whisper-900">
|
||||
<div className={`inline-block align-bottom rounded px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${
|
||||
getColors(
|
||||
'bg-white dark:bg-vulcan-500 border-whisper-900',
|
||||
'bg-[var(--vscode-editor-background)] border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}>
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-gray-50 dark:bg-vulcan-400">
|
||||
<div className={`mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 ${
|
||||
getColors(
|
||||
'bg-gray-50 dark:bg-vulcan-400',
|
||||
'bg-[var(--vscode-sidebar-background)]'
|
||||
)
|
||||
}`}>
|
||||
<ExclamationIcon
|
||||
className="h-6 w-6 text-red-500 dark:text-red-50"
|
||||
className={`h-6 w-6 ${getColors(`text-red-500 dark:text-red-50`, `text-[var(--vscode-errorForeground)]`)}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg leading-6 font-medium text-vulcan-300 dark:text-whisper-900"
|
||||
className={`text-lg leading-6 font-medium ${
|
||||
getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-vulcan-500 dark:text-whisper-500">{description}</p>
|
||||
<p className={`text-sm ${getColors(`text-vulcan-500 dark:text-whisper-500`, `text-[var(--vscode-editor-foreground)]`)}`}>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 dark:hover:bg-red-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm ${
|
||||
getColors(
|
||||
'text-white bg-red-600 hover:bg-red-700 dark:hover:bg-red-900 focus:ring-red-500',
|
||||
'text-[var(--vscode-statusBarItem-errorForeground)] bg-[var(--vscode-statusBarItem-errorBackground)]'
|
||||
)
|
||||
}`}
|
||||
onClick={() => trigger()}
|
||||
>
|
||||
{okBtnText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
|
||||
className={`mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${
|
||||
getColors(
|
||||
'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
|
||||
'bg-[var(--vscode-button-secondaryBackground)] border-[var(--vscode-panel-border)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
|
||||
)
|
||||
}`}
|
||||
onClick={() => dismiss()}
|
||||
ref={cancelButtonRef}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import * as React from 'react';
|
||||
import { Fragment } from 'react';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface IInfoDialogProps {
|
||||
icon?: JSX.Element;
|
||||
@@ -16,6 +17,8 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
|
||||
description,
|
||||
children
|
||||
}: React.PropsWithChildren<IInfoDialogProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<Transition.Root show={true} as={Fragment}>
|
||||
<Dialog className="fixed z-10 inset-0 overflow-y-auto" onClose={dismiss}>
|
||||
@@ -29,7 +32,12 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-vulcan-500 bg-opacity-75 transition-opacity" />
|
||||
<Dialog.Overlay className={`fixed inset-0 transition-opacity ${
|
||||
getColors(
|
||||
`bg-vulcan-500 bg-opacity-75`,
|
||||
`bg-[var(--vscode-editor-background)] opacity-75`
|
||||
)
|
||||
}`} />
|
||||
</Transition.Child>
|
||||
|
||||
{/* This element is to trick the browser into centering the modal contents. */}
|
||||
@@ -46,22 +54,34 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<div className="inline-block align-bottom bg-white dark:bg-vulcan-500 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 border-whisper-900">
|
||||
<div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${
|
||||
getColors(
|
||||
`bg-white dark:bg-vulcan-500 border-whisper-900`,
|
||||
`bg-[var(--vscode-editor-background)] border-[var(--vscode-panel-border)]`
|
||||
)
|
||||
}`}>
|
||||
<div className="sm:flex sm:items-start">
|
||||
{icon && (
|
||||
<div className="mt-3 sm:mr-4 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-gray-50 dark:bg-vulcan-400">
|
||||
<div className={`mt-3 sm:mr-4 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 ${
|
||||
getColors(
|
||||
`bg-gray-50 dark:bg-vulcan-400`,
|
||||
`bg-[var(--vscode-sidebar-background)]'`
|
||||
)
|
||||
}`}>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 text-center sm:mt-0 sm:text-left">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg leading-6 font-medium text-vulcan-300 dark:text-whisper-900"
|
||||
className={`text-lg leading-6 font-medium ${
|
||||
getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
<p className="text-sm text-vulcan-500 dark:text-whisper-500">{description}</p>
|
||||
<p className={`text-sm ${getColors(`text-vulcan-500 dark:text-whisper-500`, `text-[var(--vscode-editor-foreground)]`)}`}>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,55 @@
|
||||
import * as React from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { Tab } from '../constants/Tab';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
import { SettingsAtom, TabAtom, TabInfoAtom } from '../state';
|
||||
|
||||
export interface INavigationProps {
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export interface INavigationItemProps {
|
||||
tabId: string;
|
||||
isCrntTab: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export const tabs = [
|
||||
{ name: 'All articles', id: Tab.All },
|
||||
{ name: 'Published', id: Tab.Published },
|
||||
{ name: 'In draft', id: Tab.Draft }
|
||||
];
|
||||
|
||||
const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
|
||||
tabId,
|
||||
isCrntTab,
|
||||
onClick,
|
||||
children
|
||||
}: React.PropsWithChildren<INavigationItemProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${
|
||||
isCrntTab
|
||||
?
|
||||
getColors(
|
||||
'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300',
|
||||
'border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]'
|
||||
) :
|
||||
getColors(
|
||||
`border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
|
||||
`border-transparent text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-foreground)] hover:border-[var(--vscode-textLink-foreground)]`
|
||||
)
|
||||
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
|
||||
aria-current={isCrntTab ? 'page' : undefined}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
};
|
||||
|
||||
export const Navigation: React.FunctionComponent<INavigationProps> = ({
|
||||
totalPages
|
||||
}: React.PropsWithChildren<INavigationProps>) => {
|
||||
@@ -24,49 +61,34 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({
|
||||
<nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
|
||||
{settings?.draftField?.type === 'boolean' ? (
|
||||
tabs.map((tab) => (
|
||||
<button
|
||||
<NavigationItem
|
||||
tabId={tab.id}
|
||||
isCrntTab={tab.id === crntTab}
|
||||
key={tab.name}
|
||||
className={`${
|
||||
tab.id === crntTab
|
||||
? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300`
|
||||
: `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`
|
||||
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
|
||||
aria-current={tab.id === crntTab ? 'page' : undefined}
|
||||
onClick={() => setCrntTab(tab.id)}
|
||||
>
|
||||
onClick={() => setCrntTab(tab.id)}>
|
||||
{tab.name}
|
||||
{tabInfo && tabInfo[tab.id] ? ` (${tabInfo[tab.id]})` : ''}
|
||||
</button>
|
||||
</NavigationItem>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className={`${
|
||||
tabs[0].id === crntTab
|
||||
? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300`
|
||||
: `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`
|
||||
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
|
||||
aria-current={tabs[0].id === crntTab ? 'page' : undefined}
|
||||
onClick={() => setCrntTab(tabs[0].id)}
|
||||
>
|
||||
<NavigationItem
|
||||
tabId={tabs[0].id}
|
||||
isCrntTab={tabs[0].id === crntTab}
|
||||
onClick={() => setCrntTab(tabs[0].id)}>
|
||||
{tabs[0].name}
|
||||
{tabInfo && tabInfo[tabs[0].id] ? ` (${tabInfo[tabs[0].id]})` : ''}
|
||||
</button>
|
||||
</NavigationItem>
|
||||
|
||||
{settings?.draftField?.choices?.map((value, idx) => (
|
||||
<button
|
||||
<NavigationItem
|
||||
key={`${value}-${idx}`}
|
||||
className={`${
|
||||
value === crntTab
|
||||
? `border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300`
|
||||
: `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`
|
||||
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm first-letter:uppercase`}
|
||||
aria-current={value === crntTab ? 'page' : undefined}
|
||||
onClick={() => setCrntTab(value)}
|
||||
>
|
||||
tabId={value}
|
||||
isCrntTab={value === crntTab}
|
||||
onClick={() => setCrntTab(value)}>
|
||||
{value}
|
||||
{tabInfo && tabInfo[value] ? ` (${tabInfo[value]})` : ''}
|
||||
</button>
|
||||
</NavigationItem>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { FEATURE_FLAG } from '../../../constants';
|
||||
import { TelemetryEvent } from '../../../constants/TelemetryEvent';
|
||||
import { SnippetParser } from '../../../helpers/SnippetParser';
|
||||
import { DashboardMessage } from '../../DashboardMessage';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
|
||||
import { FilterInput } from '../Header/FilterInput';
|
||||
import { PageLayout } from '../Layout/PageLayout';
|
||||
@@ -30,6 +31,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
|
||||
const [showCreateDialog, setShowCreateDialog] = useState(false);
|
||||
const [mediaSnippet, setMediaSnippet] = useState(false);
|
||||
const [snippetFilter, setSnippetFilter] = useState<string>('');
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const snippets = settings?.snippets || {};
|
||||
const snippetKeys = useMemo(() => {
|
||||
@@ -81,7 +83,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
|
||||
header={
|
||||
<FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.manage}>
|
||||
<div
|
||||
className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
|
||||
className={`py-3 px-4 flex items-center justify-between border-b ${
|
||||
getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-sideBar-border)]`)
|
||||
}`}
|
||||
aria-label="snippets header"
|
||||
>
|
||||
<FilterInput
|
||||
@@ -95,7 +99,12 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
|
||||
|
||||
<div className="flex flex-1 justify-end">
|
||||
<button
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
title={`Create new snippet`}
|
||||
onClick={() => setShowCreateDialog(true)}
|
||||
>
|
||||
@@ -125,7 +134,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
|
||||
</ul>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="flex flex-col items-center text-gray-500 dark:text-whisper-900">
|
||||
<div className={`flex flex-col items-center ${
|
||||
getColors(`text-gray-500 dark:text-vulcan-500`, `text-[var(--vscode-foreground)]`)
|
||||
}`}>
|
||||
<CodeIcon className="w-32 h-32" />
|
||||
<p className="text-3xl">No snippets found</p>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import * as React from 'react';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
|
||||
export interface ISpinnerProps {}
|
||||
|
||||
export const Spinner: React.FunctionComponent<ISpinnerProps> = (
|
||||
props: React.PropsWithChildren<ISpinnerProps>
|
||||
) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}
|
||||
className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-black bg-opacity-50 z-50`}
|
||||
>
|
||||
<div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-50 h-32 w-32" />
|
||||
<div className={`loader ease-linear rounded-full border-8 border-t-8 h-16 w-16 ${
|
||||
getColors(`border-gray-50 border-t-teal-500`, `border-[var(--vscode-activityBar-inactiveForeground)] border-t-[var(--vscode-activityBarBadge-background)]`)
|
||||
}`} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import { HeartIcon, StarIcon } from '@heroicons/react/outline';
|
||||
import * as React from 'react';
|
||||
import { REVIEW_LINK, SPONSOR_LINK } from '../../constants';
|
||||
import { VersionInfo } from '../../models';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
|
||||
export interface ISponsorMsgProps {
|
||||
beta: boolean | undefined;
|
||||
@@ -9,15 +10,46 @@ export interface ISponsorMsgProps {
|
||||
isBacker: boolean | undefined;
|
||||
}
|
||||
|
||||
interface ISponsorLinkProps {
|
||||
title: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const SponsorLink: React.FunctionComponent<ISponsorLinkProps> = ({ title, href, children }: React.PropsWithChildren<ISponsorLinkProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<a
|
||||
className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 ${
|
||||
getColors(
|
||||
`text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`,
|
||||
`text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`
|
||||
)
|
||||
}`}
|
||||
href={href}
|
||||
title={title}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
|
||||
beta,
|
||||
isBacker,
|
||||
version
|
||||
}: React.PropsWithChildren<ISponsorMsgProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={`bg-gray-100 dark:bg-vulcan-500 w-full px-4 text-vulcan-50 dark:text-whisper-900 py-2 text-center space-x-8 flex items-center border-t border-gray-200 dark:border-vulcan-300 ${
|
||||
className={`w-full px-4 py-2 text-center space-x-8 flex items-center border-t ${
|
||||
isBacker ? 'justify-center' : 'justify-between'
|
||||
} ${
|
||||
getColors(
|
||||
'bg-gray-100 dark:bg-vulcan-500 text-vulcan-50 dark:text-whisper-900 border-gray-200 dark:border-vulcan-300',
|
||||
'bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-panel-border)]'
|
||||
)
|
||||
}`}
|
||||
>
|
||||
{isBacker ? (
|
||||
@@ -27,24 +59,20 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`}
|
||||
href={SPONSOR_LINK}
|
||||
title="Support Front Matter"
|
||||
>
|
||||
<SponsorLink
|
||||
title={`Support Front Matter`}
|
||||
href={SPONSOR_LINK}>
|
||||
<span>Support</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} />
|
||||
</a>
|
||||
</SponsorLink>
|
||||
<span>
|
||||
Front Matter
|
||||
{version ? ` (v${version.installedVersion}${!!beta ? ` BETA` : ''})` : ''}
|
||||
</span>
|
||||
<a
|
||||
className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`}
|
||||
href={REVIEW_LINK}
|
||||
title="Review Front Matter"
|
||||
>
|
||||
<SponsorLink
|
||||
title={`Review Front Matter`}
|
||||
href={REVIEW_LINK}>
|
||||
<StarIcon className={`h-5 w-5 group-hover:fill-current`} /> <span>Review</span>
|
||||
</a>
|
||||
</SponsorLink>
|
||||
</>
|
||||
)}
|
||||
</footer>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { SETTING_DASHBOARD_OPENONSTART } from '../../constants';
|
||||
import { Messenger } from '@estruyf/vscode/dist/client';
|
||||
import { DashboardMessage } from '../DashboardMessage';
|
||||
import { Settings } from '../models/Settings';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
|
||||
export interface IStartupProps {
|
||||
settings: Settings | null;
|
||||
@@ -12,6 +13,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
|
||||
settings
|
||||
}: React.PropsWithChildren<IStartupProps>) => {
|
||||
const [isChecked, setIsChecked] = React.useState(false);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIsChecked(e.target.checked);
|
||||
@@ -35,14 +37,24 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={onChange}
|
||||
className="focus:outline-none focus:ring-teal-500 h-4 w-4 text-teal-600 border-gray-300 dark:border-vulcan-50 rounded"
|
||||
className={`h-4 w-4 focus:outline-none rounded ${
|
||||
getColors(
|
||||
`focus:ring-teal-500 text-teal-600 border-gray-300 dark:border-vulcan-50`,
|
||||
`focus:ring-[var(--vscode-button-background)] text-[var(--vscode-button-background)] border-[var(--vscode-editorWidget-border)]`
|
||||
)
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-2 text-sm">
|
||||
<label
|
||||
id="startup-description"
|
||||
htmlFor="startup"
|
||||
className="font-medium text-vulcan-50 dark:text-whisper-900"
|
||||
className={`font-medium ${
|
||||
getColors(
|
||||
`text-vulcan-50 dark:text-whisper-900`,
|
||||
`text-[var(--vscode-editor-foreground)]`
|
||||
)
|
||||
}`}
|
||||
>
|
||||
Open on startup?
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import useThemeColors from '../hooks/useThemeColors';
|
||||
import { SettingsAtom } from '../state';
|
||||
|
||||
export interface IStatusProps {
|
||||
@@ -10,6 +11,7 @@ export interface IStatusProps {
|
||||
export const Status: React.FunctionComponent<IStatusProps> = ({
|
||||
draft
|
||||
}: React.PropsWithChildren<IStatusProps>) => {
|
||||
const { getColors } = useThemeColors();
|
||||
const settings = useRecoilValue(SettingsAtom);
|
||||
|
||||
const draftField = useMemo(() => settings?.draftField, [settings]);
|
||||
@@ -28,7 +30,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
|
||||
if (draftValue) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 bg-teal-500`}
|
||||
className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs ${getColors(`text-whisper-200 dark:text-vulcan-500 bg-teal-500`, `text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`)}`}
|
||||
>
|
||||
{draftValue}
|
||||
</span>
|
||||
@@ -40,9 +42,14 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 ${
|
||||
draftValue ? 'bg-red-500' : 'bg-teal-500'
|
||||
}`}
|
||||
className={`
|
||||
inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs
|
||||
${getColors(`text-whisper-200 dark:text-vulcan-500`, ``)}
|
||||
${
|
||||
draftValue ?
|
||||
getColors(`bg-red-500`, 'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]') :
|
||||
getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
|
||||
}`}
|
||||
>
|
||||
{draftValue ? 'Draft' : 'Published'}
|
||||
</span>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { SettingsSelector } from '../../state';
|
||||
import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
|
||||
import { TaxonomyActions } from './TaxonomyActions';
|
||||
import { TaxonomyLookup } from './TaxonomyLookup';
|
||||
import useThemeColors from '../../hooks/useThemeColors';
|
||||
|
||||
export interface ITaxonomyManagerProps {
|
||||
data: TaxonomyData | undefined;
|
||||
@@ -23,6 +24,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
|
||||
pages
|
||||
}: React.PropsWithChildren<ITaxonomyManagerProps>) => {
|
||||
const settings = useRecoilValue(SettingsSelector);
|
||||
const { getColors } = useThemeColors();
|
||||
|
||||
const onCreate = () => {
|
||||
Messenger.send(DashboardMessage.createTaxonomy, {
|
||||
@@ -113,7 +115,12 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
|
||||
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
|
||||
getColors(
|
||||
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
|
||||
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
|
||||
)
|
||||
}`}
|
||||
title={`Create a new ${taxonomy} value`}
|
||||
onClick={onCreate}
|
||||
>
|
||||
|
||||
582
src/dashboardWebView/components/css-vscode-variables.css
Normal file
582
src/dashboardWebView/components/css-vscode-variables.css
Normal file
@@ -0,0 +1,582 @@
|
||||
:root {
|
||||
--vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--vscode-font-weight: normal;
|
||||
--vscode-font-size: 13px;
|
||||
--vscode-editor-font-family: "Operator Mono Lig", "Cascadia Code";
|
||||
--vscode-editor-font-weight: normal;
|
||||
--vscode-editor-font-size: 15px;
|
||||
--vscode-foreground: #616161;
|
||||
--vscode-disabledForeground: rgba(97, 97, 97, 0.5);
|
||||
--vscode-errorForeground: #a1260d;
|
||||
--vscode-descriptionForeground: #717171;
|
||||
--vscode-icon-foreground: #424242;
|
||||
--vscode-focusBorder: #b49471;
|
||||
--vscode-selection-background: rgba(135, 139, 145, 0.5);
|
||||
--vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18);
|
||||
--vscode-textLink-foreground: #006ab1;
|
||||
--vscode-textLink-activeForeground: #006ab1;
|
||||
--vscode-textPreformat-foreground: #a31515;
|
||||
--vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
|
||||
--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
|
||||
--vscode-textCodeBlock-background: rgba(220, 220, 220, 0.4);
|
||||
--vscode-widget-shadow: rgba(0, 0, 0, 0.16);
|
||||
--vscode-input-background: #ddd6c1;
|
||||
--vscode-input-foreground: #586e75;
|
||||
--vscode-inputOption-activeBorder: #d3af86;
|
||||
--vscode-inputOption-hoverBackground: rgba(184, 184, 184, 0.31);
|
||||
--vscode-inputOption-activeBackground: rgba(180, 148, 113, 0.2);
|
||||
--vscode-inputOption-activeForeground: #000000;
|
||||
--vscode-input-placeholderForeground: rgba(88, 110, 117, 0.67);
|
||||
--vscode-inputValidation-infoBackground: #d6ecf2;
|
||||
--vscode-inputValidation-infoBorder: #007acc;
|
||||
--vscode-inputValidation-warningBackground: #f6f5d2;
|
||||
--vscode-inputValidation-warningBorder: #b89500;
|
||||
--vscode-inputValidation-errorBackground: #f2dede;
|
||||
--vscode-inputValidation-errorBorder: #be1100;
|
||||
--vscode-dropdown-background: #eee8d5;
|
||||
--vscode-dropdown-foreground: #616161;
|
||||
--vscode-dropdown-border: #d3af86;
|
||||
--vscode-button-foreground: #ffffff;
|
||||
--vscode-button-separator: rgba(255, 255, 255, 0.4);
|
||||
--vscode-button-background: #ac9d57;
|
||||
--vscode-button-hoverBackground: #8b7e44;
|
||||
--vscode-button-secondaryForeground: #ffffff;
|
||||
--vscode-button-secondaryBackground: #5f6a79;
|
||||
--vscode-button-secondaryHoverBackground: #4c5561;
|
||||
--vscode-badge-background: rgba(181, 137, 0, 0.67);
|
||||
--vscode-badge-foreground: #333333;
|
||||
--vscode-scrollbar-shadow: #dddddd;
|
||||
--vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
|
||||
--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
|
||||
--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
|
||||
--vscode-progressBar-background: #b58900;
|
||||
--vscode-editorError-foreground: #e51400;
|
||||
--vscode-editorWarning-foreground: #bf8803;
|
||||
--vscode-editorInfo-foreground: #1a85ff;
|
||||
--vscode-editorHint-foreground: #6c6c6c;
|
||||
--vscode-sash-hoverBorder: #b49471;
|
||||
--vscode-editor-background: #fdf6e3;
|
||||
--vscode-editor-foreground: #657b83;
|
||||
--vscode-editorStickyScroll-background: #fdf6e3;
|
||||
--vscode-editorStickyScrollHover-background: #f0f0f0;
|
||||
--vscode-editorWidget-background: #eee8d5;
|
||||
--vscode-editorWidget-foreground: #616161;
|
||||
--vscode-editorWidget-border: #c8c8c8;
|
||||
--vscode-quickInput-background: #eee8d5;
|
||||
--vscode-quickInput-foreground: #616161;
|
||||
--vscode-quickInputTitle-background: rgba(0, 0, 0, 0.06);
|
||||
--vscode-pickerGroup-foreground: rgba(42, 161, 152, 0.6);
|
||||
--vscode-pickerGroup-border: rgba(42, 161, 152, 0.6);
|
||||
--vscode-keybindingLabel-background: rgba(221, 221, 221, 0.4);
|
||||
--vscode-keybindingLabel-foreground: #555555;
|
||||
--vscode-keybindingLabel-border: rgba(204, 204, 204, 0.4);
|
||||
--vscode-keybindingLabel-bottomBorder: rgba(187, 187, 187, 0.4);
|
||||
--vscode-editor-selectionBackground: #eee8d5;
|
||||
--vscode-editor-inactiveSelectionBackground: rgba(238, 232, 213, 0.5);
|
||||
--vscode-editor-selectionHighlightBackground: rgba(243, 239, 225, 0.6);
|
||||
--vscode-editor-findMatchBackground: #a8ac94;
|
||||
--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
|
||||
--vscode-editor-findRangeHighlightBackground: rgba(180, 180, 180, 0.3);
|
||||
--vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
|
||||
--vscode-editor-hoverHighlightBackground: rgba(173, 214, 255, 0.15);
|
||||
--vscode-editorHoverWidget-background: #ccc4b0;
|
||||
--vscode-editorHoverWidget-foreground: #616161;
|
||||
--vscode-editorHoverWidget-border: #c8c8c8;
|
||||
--vscode-editorHoverWidget-statusBarBackground: #c5bba5;
|
||||
--vscode-editorLink-activeForeground: #0000ff;
|
||||
--vscode-editorInlayHint-foreground: #333333;
|
||||
--vscode-editorInlayHint-background: rgba(181, 137, 0, 0.4);
|
||||
--vscode-editorInlayHint-typeForeground: #333333;
|
||||
--vscode-editorInlayHint-typeBackground: rgba(181, 137, 0, 0.4);
|
||||
--vscode-editorInlayHint-parameterForeground: #333333;
|
||||
--vscode-editorInlayHint-parameterBackground: rgba(181, 137, 0, 0.4);
|
||||
--vscode-editorLightBulb-foreground: #ddb100;
|
||||
--vscode-editorLightBulbAutoFix-foreground: #007acc;
|
||||
--vscode-diffEditor-insertedTextBackground: rgba(156, 204, 44, 0.25);
|
||||
--vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
|
||||
--vscode-diffEditor-insertedLineBackground: rgba(155, 185, 85, 0.2);
|
||||
--vscode-diffEditor-removedLineBackground: rgba(255, 0, 0, 0.2);
|
||||
--vscode-diffEditor-diagonalFill: rgba(34, 34, 34, 0.2);
|
||||
--vscode-list-focusOutline: #b49471;
|
||||
--vscode-list-activeSelectionBackground: #dfca88;
|
||||
--vscode-list-activeSelectionForeground: #6c6c6c;
|
||||
--vscode-list-inactiveSelectionBackground: #d1cbb8;
|
||||
--vscode-list-hoverBackground: rgba(223, 202, 136, 0.27);
|
||||
--vscode-list-dropBackground: #d6ebff;
|
||||
--vscode-list-highlightForeground: #b58900;
|
||||
--vscode-list-focusHighlightForeground: #b58900;
|
||||
--vscode-list-invalidItemForeground: #b89500;
|
||||
--vscode-list-errorForeground: #b01011;
|
||||
--vscode-list-warningForeground: #855f00;
|
||||
--vscode-listFilterWidget-background: #eee8d5;
|
||||
--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
|
||||
--vscode-listFilterWidget-noMatchesOutline: #be1100;
|
||||
--vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);
|
||||
--vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
|
||||
--vscode-tree-indentGuidesStroke: #a9a9a9;
|
||||
--vscode-tree-inactiveIndentGuidesStroke: rgba(169, 169, 169, 0.4);
|
||||
--vscode-tree-tableColumnsBorder: rgba(97, 97, 97, 0.13);
|
||||
--vscode-tree-tableOddRowsBackground: rgba(97, 97, 97, 0.04);
|
||||
--vscode-list-deemphasizedForeground: #8e8e90;
|
||||
--vscode-checkbox-background: #eee8d5;
|
||||
--vscode-checkbox-selectBackground: #eee8d5;
|
||||
--vscode-checkbox-foreground: #616161;
|
||||
--vscode-checkbox-border: #d3af86;
|
||||
--vscode-checkbox-selectBorder: #eee8d5;
|
||||
--vscode-quickInputList-focusForeground: #6c6c6c;
|
||||
--vscode-quickInputList-focusBackground: rgba(223, 202, 136, 0.4);
|
||||
--vscode-menu-foreground: #616161;
|
||||
--vscode-menu-background: #eee8d5;
|
||||
--vscode-menu-selectionForeground: #6c6c6c;
|
||||
--vscode-menu-selectionBackground: #dfca88;
|
||||
--vscode-menu-separatorBackground: #d4d4d4;
|
||||
--vscode-toolbar-hoverBackground: rgba(184, 184, 184, 0.31);
|
||||
--vscode-toolbar-activeBackground: rgba(166, 166, 166, 0.31);
|
||||
--vscode-editor-snippetTabstopHighlightBackground: rgba(10, 50, 100, 0.2);
|
||||
--vscode-editor-snippetFinalTabstopHighlightBorder: rgba(10, 50, 100, 0.5);
|
||||
--vscode-breadcrumb-foreground: rgba(97, 97, 97, 0.8);
|
||||
--vscode-breadcrumb-background: #fdf6e3;
|
||||
--vscode-breadcrumb-focusForeground: #4e4e4e;
|
||||
--vscode-breadcrumb-activeSelectionForeground: #4e4e4e;
|
||||
--vscode-breadcrumbPicker-background: #eee8d5;
|
||||
--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
|
||||
--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
|
||||
--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
|
||||
--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
|
||||
--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
|
||||
--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
|
||||
--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
|
||||
--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
|
||||
--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
|
||||
--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
|
||||
--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
|
||||
--vscode-minimap-findMatchHighlight: #d18616;
|
||||
--vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
|
||||
--vscode-minimap-selectionHighlight: #eee8d5;
|
||||
--vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
|
||||
--vscode-minimap-warningHighlight: #bf8803;
|
||||
--vscode-minimap-foregroundOpacity: #000000;
|
||||
--vscode-minimapSlider-background: rgba(100, 100, 100, 0.2);
|
||||
--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
|
||||
--vscode-minimapSlider-activeBackground: rgba(0, 0, 0, 0.3);
|
||||
--vscode-problemsErrorIcon-foreground: #e51400;
|
||||
--vscode-problemsWarningIcon-foreground: #bf8803;
|
||||
--vscode-problemsInfoIcon-foreground: #1a85ff;
|
||||
--vscode-charts-foreground: #616161;
|
||||
--vscode-charts-lines: rgba(97, 97, 97, 0.5);
|
||||
--vscode-charts-red: #e51400;
|
||||
--vscode-charts-blue: #1a85ff;
|
||||
--vscode-charts-yellow: #bf8803;
|
||||
--vscode-charts-orange: #d18616;
|
||||
--vscode-charts-green: #388a34;
|
||||
--vscode-charts-purple: #652d90;
|
||||
--vscode-symbolIcon-arrayForeground: #616161;
|
||||
--vscode-symbolIcon-booleanForeground: #616161;
|
||||
--vscode-symbolIcon-classForeground: #d67e00;
|
||||
--vscode-symbolIcon-colorForeground: #616161;
|
||||
--vscode-symbolIcon-constantForeground: #616161;
|
||||
--vscode-symbolIcon-constructorForeground: #652d90;
|
||||
--vscode-symbolIcon-enumeratorForeground: #d67e00;
|
||||
--vscode-symbolIcon-enumeratorMemberForeground: #007acc;
|
||||
--vscode-symbolIcon-eventForeground: #d67e00;
|
||||
--vscode-symbolIcon-fieldForeground: #007acc;
|
||||
--vscode-symbolIcon-fileForeground: #616161;
|
||||
--vscode-symbolIcon-folderForeground: #616161;
|
||||
--vscode-symbolIcon-functionForeground: #652d90;
|
||||
--vscode-symbolIcon-interfaceForeground: #007acc;
|
||||
--vscode-symbolIcon-keyForeground: #616161;
|
||||
--vscode-symbolIcon-keywordForeground: #616161;
|
||||
--vscode-symbolIcon-methodForeground: #652d90;
|
||||
--vscode-symbolIcon-moduleForeground: #616161;
|
||||
--vscode-symbolIcon-namespaceForeground: #616161;
|
||||
--vscode-symbolIcon-nullForeground: #616161;
|
||||
--vscode-symbolIcon-numberForeground: #616161;
|
||||
--vscode-symbolIcon-objectForeground: #616161;
|
||||
--vscode-symbolIcon-operatorForeground: #616161;
|
||||
--vscode-symbolIcon-packageForeground: #616161;
|
||||
--vscode-symbolIcon-propertyForeground: #616161;
|
||||
--vscode-symbolIcon-referenceForeground: #616161;
|
||||
--vscode-symbolIcon-snippetForeground: #616161;
|
||||
--vscode-symbolIcon-stringForeground: #616161;
|
||||
--vscode-symbolIcon-structForeground: #616161;
|
||||
--vscode-symbolIcon-textForeground: #616161;
|
||||
--vscode-symbolIcon-typeParameterForeground: #616161;
|
||||
--vscode-symbolIcon-unitForeground: #616161;
|
||||
--vscode-symbolIcon-variableForeground: #007acc;
|
||||
--vscode-editorHoverWidget-highlightForeground: #b58900;
|
||||
--vscode-editor-lineHighlightBackground: #eee8d5;
|
||||
--vscode-editor-lineHighlightBorder: #eeeeee;
|
||||
--vscode-editor-rangeHighlightBackground: rgba(253, 255, 0, 0.2);
|
||||
--vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
|
||||
--vscode-editorCursor-foreground: #657b83;
|
||||
--vscode-editorWhitespace-foreground: rgba(88, 110, 117, 0.5);
|
||||
--vscode-editorIndentGuide-background: rgba(88, 110, 117, 0.5);
|
||||
--vscode-editorIndentGuide-activeBackground: rgba(8, 30, 37, 0.5);
|
||||
--vscode-editorLineNumber-foreground: #237893;
|
||||
--vscode-editorActiveLineNumber-foreground: #0b216f;
|
||||
--vscode-editorLineNumber-activeForeground: #567983;
|
||||
--vscode-editorRuler-foreground: #d3d3d3;
|
||||
--vscode-editorCodeLens-foreground: #919191;
|
||||
--vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
|
||||
--vscode-editorBracketMatch-border: #b9b9b9;
|
||||
--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
|
||||
--vscode-editorGutter-background: #fdf6e3;
|
||||
--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.47);
|
||||
--vscode-editorGhostText-foreground: rgba(0, 0, 0, 0.47);
|
||||
--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
|
||||
--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
|
||||
--vscode-editorOverviewRuler-warningForeground: #bf8803;
|
||||
--vscode-editorOverviewRuler-infoForeground: #1a85ff;
|
||||
--vscode-editorBracketHighlight-foreground1: #0431fa;
|
||||
--vscode-editorBracketHighlight-foreground2: #319331;
|
||||
--vscode-editorBracketHighlight-foreground3: #7b3814;
|
||||
--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketHighlight-unexpectedBracket\.foreground: rgba(255, 18, 18, 0.8);
|
||||
--vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
|
||||
--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
|
||||
--vscode-editorUnicodeHighlight-border: #cea33d;
|
||||
--vscode-editorUnicodeHighlight-background: rgba(206, 163, 61, 0.08);
|
||||
--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
|
||||
--vscode-editor-foldBackground: rgba(238, 232, 213, 0.3);
|
||||
--vscode-editorGutter-foldingControlForeground: #424242;
|
||||
--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
|
||||
--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.25);
|
||||
--vscode-editor-wordHighlightStrongBackground: rgba(14, 99, 156, 0.25);
|
||||
--vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.25);
|
||||
--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
|
||||
--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
|
||||
--vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);
|
||||
--vscode-peekViewTitle-background: #eee8d5;
|
||||
--vscode-peekViewTitleLabel-foreground: #000000;
|
||||
--vscode-peekViewTitleDescription-foreground: #616161;
|
||||
--vscode-peekView-border: #b58900;
|
||||
--vscode-peekViewResult-background: #eee8d5;
|
||||
--vscode-peekViewResult-lineForeground: #646465;
|
||||
--vscode-peekViewResult-fileForeground: #1e1e1e;
|
||||
--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
|
||||
--vscode-peekViewResult-selectionForeground: #6c6c6c;
|
||||
--vscode-peekViewEditor-background: #fffbf2;
|
||||
--vscode-peekViewEditorGutter-background: #fffbf2;
|
||||
--vscode-peekViewEditorStickScroll-background: #fffbf2;
|
||||
--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
|
||||
--vscode-peekViewEditor-matchHighlightBackground: rgba(119, 68, 170, 0.25);
|
||||
--vscode-editorMarkerNavigationError-background: #e51400;
|
||||
--vscode-editorMarkerNavigationError-headerBackground: rgba(229, 20, 0, 0.1);
|
||||
--vscode-editorMarkerNavigationWarning-background: #bf8803;
|
||||
--vscode-editorMarkerNavigationWarning-headerBackground: rgba(191, 136, 3, 0.1);
|
||||
--vscode-editorMarkerNavigationInfo-background: #1a85ff;
|
||||
--vscode-editorMarkerNavigationInfo-headerBackground: rgba(26, 133, 255, 0.1);
|
||||
--vscode-editorMarkerNavigation-background: #fdf6e3;
|
||||
--vscode-editorSuggestWidget-background: #eee8d5;
|
||||
--vscode-editorSuggestWidget-border: #c8c8c8;
|
||||
--vscode-editorSuggestWidget-foreground: #657b83;
|
||||
--vscode-editorSuggestWidget-selectedForeground: #6c6c6c;
|
||||
--vscode-editorSuggestWidget-selectedBackground: rgba(223, 202, 136, 0.4);
|
||||
--vscode-editorSuggestWidget-highlightForeground: #b58900;
|
||||
--vscode-editorSuggestWidget-focusHighlightForeground: #b58900;
|
||||
--vscode-editorSuggestWidgetStatus-foreground: rgba(101, 123, 131, 0.5);
|
||||
--vscode-tab-activeBackground: #fdf6e3;
|
||||
--vscode-tab-unfocusedActiveBackground: #fdf6e3;
|
||||
--vscode-tab-inactiveBackground: #d3cbb7;
|
||||
--vscode-tab-unfocusedInactiveBackground: #d3cbb7;
|
||||
--vscode-tab-activeForeground: #333333;
|
||||
--vscode-tab-inactiveForeground: #586e75;
|
||||
--vscode-tab-unfocusedActiveForeground: rgba(51, 51, 51, 0.7);
|
||||
--vscode-tab-unfocusedInactiveForeground: rgba(88, 110, 117, 0.5);
|
||||
--vscode-tab-border: #ddd6c1;
|
||||
--vscode-tab-lastPinnedBorder: #fdf6e3;
|
||||
--vscode-tab-activeModifiedBorder: #cb4b16;
|
||||
--vscode-tab-inactiveModifiedBorder: rgba(203, 75, 22, 0.5);
|
||||
--vscode-tab-unfocusedActiveModifiedBorder: rgba(203, 75, 22, 0.7);
|
||||
--vscode-tab-unfocusedInactiveModifiedBorder: rgba(203, 75, 22, 0.25);
|
||||
--vscode-editorPane-background: #fdf6e3;
|
||||
--vscode-editorGroupHeader-tabsBackground: #d9d2c2;
|
||||
--vscode-editorGroupHeader-noTabsBackground: #fdf6e3;
|
||||
--vscode-editorGroup-border: #ddd6c1;
|
||||
--vscode-editorGroup-dropBackground: rgba(221, 214, 193, 0.67);
|
||||
--vscode-editorGroup-dropIntoPromptForeground: #616161;
|
||||
--vscode-editorGroup-dropIntoPromptBackground: #eee8d5;
|
||||
--vscode-sideBySideEditor-horizontalBorder: #ddd6c1;
|
||||
--vscode-sideBySideEditor-verticalBorder: #ddd6c1;
|
||||
--vscode-panel-background: #fdf6e3;
|
||||
--vscode-panel-border: #ddd6c1;
|
||||
--vscode-panelTitle-activeForeground: #424242;
|
||||
--vscode-panelTitle-inactiveForeground: rgba(66, 66, 66, 0.75);
|
||||
--vscode-panelTitle-activeBorder: #424242;
|
||||
--vscode-panelInput-border: #dddddd;
|
||||
--vscode-panel-dropBorder: #424242;
|
||||
--vscode-panelSection-dropBackground: rgba(221, 214, 193, 0.67);
|
||||
--vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);
|
||||
--vscode-panelSection-border: #ddd6c1;
|
||||
--vscode-banner-background: #c6a435;
|
||||
--vscode-banner-foreground: #6c6c6c;
|
||||
--vscode-banner-iconForeground: #1a85ff;
|
||||
--vscode-statusBar-foreground: #586e75;
|
||||
--vscode-statusBar-noFolderForeground: #586e75;
|
||||
--vscode-statusBar-background: #eee8d5;
|
||||
--vscode-statusBar-noFolderBackground: #eee8d5;
|
||||
--vscode-statusBar-focusBorder: #586e75;
|
||||
--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
|
||||
--vscode-statusBarItem-focusBorder: #586e75;
|
||||
--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
|
||||
--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.2);
|
||||
--vscode-statusBarItem-prominentForeground: #586e75;
|
||||
--vscode-statusBarItem-prominentBackground: #ddd6c1;
|
||||
--vscode-statusBarItem-prominentHoverBackground: rgba(221, 214, 193, 0.6);
|
||||
--vscode-statusBarItem-errorBackground: #611708;
|
||||
--vscode-statusBarItem-errorForeground: #ffffff;
|
||||
--vscode-statusBarItem-warningBackground: #725102;
|
||||
--vscode-statusBarItem-warningForeground: #ffffff;
|
||||
--vscode-activityBar-background: #ddd6c1;
|
||||
--vscode-activityBar-foreground: #584c27;
|
||||
--vscode-activityBar-inactiveForeground: rgba(88, 76, 39, 0.4);
|
||||
--vscode-activityBar-activeBorder: #584c27;
|
||||
--vscode-activityBar-dropBorder: #584c27;
|
||||
--vscode-activityBarBadge-background: #b58900;
|
||||
--vscode-activityBarBadge-foreground: #ffffff;
|
||||
--vscode-statusBarItem-remoteBackground: #ac9d57;
|
||||
--vscode-statusBarItem-remoteForeground: #ffffff;
|
||||
--vscode-extensionBadge-remoteBackground: #b58900;
|
||||
--vscode-extensionBadge-remoteForeground: #ffffff;
|
||||
--vscode-sideBar-background: #eee8d5;
|
||||
--vscode-sideBarTitle-foreground: #586e75;
|
||||
--vscode-sideBar-dropBackground: rgba(221, 214, 193, 0.67);
|
||||
--vscode-sideBarSectionHeader-background: rgba(128, 128, 128, 0.2);
|
||||
--vscode-titleBar-activeForeground: #333333;
|
||||
--vscode-titleBar-inactiveForeground: rgba(51, 51, 51, 0.6);
|
||||
--vscode-titleBar-activeBackground: #eee8d5;
|
||||
--vscode-titleBar-inactiveBackground: rgba(238, 232, 213, 0.6);
|
||||
--vscode-menubar-selectionForeground: #333333;
|
||||
--vscode-menubar-selectionBackground: rgba(184, 184, 184, 0.31);
|
||||
--vscode-notifications-foreground: #616161;
|
||||
--vscode-notifications-background: #eee8d5;
|
||||
--vscode-notificationLink-foreground: #006ab1;
|
||||
--vscode-notificationCenterHeader-background: #e7dfc5;
|
||||
--vscode-notifications-border: #e7dfc5;
|
||||
--vscode-notificationsErrorIcon-foreground: #e51400;
|
||||
--vscode-notificationsWarningIcon-foreground: #bf8803;
|
||||
--vscode-notificationsInfoIcon-foreground: #1a85ff;
|
||||
--vscode-commandCenter-foreground: #333333;
|
||||
--vscode-commandCenter-activeForeground: #333333;
|
||||
--vscode-commandCenter-inactiveForeground: rgba(51, 51, 51, 0.6);
|
||||
--vscode-commandCenter-background: rgba(0, 0, 0, 0.05);
|
||||
--vscode-commandCenter-activeBackground: rgba(0, 0, 0, 0.08);
|
||||
--vscode-commandCenter-border: rgba(51, 51, 51, 0.2);
|
||||
--vscode-commandCenter-activeBorder: rgba(51, 51, 51, 0.3);
|
||||
--vscode-commandCenter-inactiveBorder: rgba(51, 51, 51, 0.15);
|
||||
--vscode-editorCommentsWidget-resolvedBorder: rgba(97, 97, 97, 0.5);
|
||||
--vscode-editorCommentsWidget-unresolvedBorder: #b58900;
|
||||
--vscode-editorCommentsWidget-rangeBackground: rgba(181, 137, 0, 0.1);
|
||||
--vscode-editorCommentsWidget-rangeBorder: rgba(181, 137, 0, 0.4);
|
||||
--vscode-editorCommentsWidget-rangeActiveBackground: rgba(181, 137, 0, 0.1);
|
||||
--vscode-editorCommentsWidget-rangeActiveBorder: rgba(181, 137, 0, 0.4);
|
||||
--vscode-editorGutter-commentRangeForeground: #c9c2ac;
|
||||
--vscode-editorGutter-commentGlyphForground: #657b83;
|
||||
--vscode-debugToolBar-background: #ddd6c1;
|
||||
--vscode-debugIcon-startForeground: #388a34;
|
||||
--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 102, 0.45);
|
||||
--vscode-editor-focusedStackFrameHighlightBackground: rgba(206, 231, 206, 0.45);
|
||||
--vscode-mergeEditor-change\.background: rgba(155, 185, 85, 0.2);
|
||||
--vscode-mergeEditor-change\.word\.background: rgba(156, 204, 44, 0.4);
|
||||
--vscode-mergeEditor-changeBase\.background: #ffcccc;
|
||||
--vscode-mergeEditor-changeBase\.word\.background: #ffa3a3;
|
||||
--vscode-mergeEditor-conflict\.unhandledUnfocused\.border: #ffa600;
|
||||
--vscode-mergeEditor-conflict\.unhandledFocused\.border: #ffa600;
|
||||
--vscode-mergeEditor-conflict\.handledUnfocused\.border: rgba(134, 134, 134, 0.29);
|
||||
--vscode-mergeEditor-conflict\.handledFocused\.border: rgba(193, 193, 193, 0.8);
|
||||
--vscode-mergeEditor-conflict\.handled\.minimapOverViewRuler: rgba(173, 172, 168, 0.93);
|
||||
--vscode-mergeEditor-conflict\.unhandled\.minimapOverViewRuler: #fcba03;
|
||||
--vscode-mergeEditor-conflictingLines\.background: rgba(255, 234, 0, 0.28);
|
||||
--vscode-mergeEditor-conflict\.input1\.background: rgba(64, 200, 174, 0.2);
|
||||
--vscode-mergeEditor-conflict\.input2\.background: rgba(64, 166, 255, 0.2);
|
||||
--vscode-settings-headerForeground: #444444;
|
||||
--vscode-settings-settingsHeaderHoverForeground: rgba(68, 68, 68, 0.7);
|
||||
--vscode-settings-modifiedItemIndicator: #66afe0;
|
||||
--vscode-settings-headerBorder: #ddd6c1;
|
||||
--vscode-settings-sashBorder: #ddd6c1;
|
||||
--vscode-settings-dropdownBackground: #eee8d5;
|
||||
--vscode-settings-dropdownForeground: #616161;
|
||||
--vscode-settings-dropdownBorder: #d3af86;
|
||||
--vscode-settings-dropdownListBorder: #c8c8c8;
|
||||
--vscode-settings-checkboxBackground: #eee8d5;
|
||||
--vscode-settings-checkboxForeground: #616161;
|
||||
--vscode-settings-checkboxBorder: #d3af86;
|
||||
--vscode-settings-textInputBackground: #ddd6c1;
|
||||
--vscode-settings-textInputForeground: #586e75;
|
||||
--vscode-settings-numberInputBackground: #ddd6c1;
|
||||
--vscode-settings-numberInputForeground: #586e75;
|
||||
--vscode-settings-focusedRowBackground: rgba(223, 202, 136, 0.16);
|
||||
--vscode-settings-rowHoverBackground: rgba(223, 202, 136, 0.08);
|
||||
--vscode-settings-focusedRowBorder: #b49471;
|
||||
--vscode-terminal-background: #fdf6e3;
|
||||
--vscode-terminal-foreground: #333333;
|
||||
--vscode-terminal-selectionBackground: #eee8d5;
|
||||
--vscode-terminal-inactiveSelectionBackground: rgba(238, 232, 213, 0.5);
|
||||
--vscode-terminalCommandDecoration-defaultBackground: rgba(0, 0, 0, 0.25);
|
||||
--vscode-terminalCommandDecoration-successBackground: #2090d3;
|
||||
--vscode-terminalCommandDecoration-errorBackground: #e51400;
|
||||
--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);
|
||||
--vscode-terminal-border: #ddd6c1;
|
||||
--vscode-terminal-findMatchBackground: #a8ac94;
|
||||
--vscode-terminal-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
|
||||
--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
|
||||
--vscode-terminal-dropBackground: rgba(221, 214, 193, 0.67);
|
||||
--vscode-testing-iconFailed: #f14c4c;
|
||||
--vscode-testing-iconErrored: #f14c4c;
|
||||
--vscode-testing-iconPassed: #73c991;
|
||||
--vscode-testing-runAction: #73c991;
|
||||
--vscode-testing-iconQueued: #cca700;
|
||||
--vscode-testing-iconUnset: #848484;
|
||||
--vscode-testing-iconSkipped: #848484;
|
||||
--vscode-testing-peekBorder: #e51400;
|
||||
--vscode-testing-peekHeaderBackground: rgba(229, 20, 0, 0.1);
|
||||
--vscode-testing-message\.error\.decorationForeground: #e51400;
|
||||
--vscode-testing-message\.error\.lineBackground: rgba(255, 0, 0, 0.2);
|
||||
--vscode-testing-message\.info\.decorationForeground: rgba(101, 123, 131, 0.5);
|
||||
--vscode-welcomePage-tileBackground: #eee8d5;
|
||||
--vscode-welcomePage-tileHoverBackground: #e1d7b5;
|
||||
--vscode-welcomePage-tileBorder: rgba(0, 0, 0, 0.1);
|
||||
--vscode-welcomePage-progress\.background: #ddd6c1;
|
||||
--vscode-welcomePage-progress\.foreground: #006ab1;
|
||||
--vscode-walkthrough-stepTitle\.foreground: #000000;
|
||||
--vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.08);
|
||||
--vscode-welcomeOverlay-background: rgba(255, 255, 255, 0.52);
|
||||
--vscode-debugExceptionWidget-border: #ab395b;
|
||||
--vscode-debugExceptionWidget-background: #ddd6c1;
|
||||
--vscode-ports-iconRunningProcessForeground: rgba(42, 161, 152, 0.6);
|
||||
--vscode-statusBar-debuggingBackground: #eee8d5;
|
||||
--vscode-statusBar-debuggingForeground: #586e75;
|
||||
--vscode-editor-inlineValuesForeground: rgba(0, 0, 0, 0.5);
|
||||
--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);
|
||||
--vscode-editorGutter-modifiedBackground: #2090d3;
|
||||
--vscode-editorGutter-addedBackground: #48985d;
|
||||
--vscode-editorGutter-deletedBackground: #e51400;
|
||||
--vscode-minimapGutter-modifiedBackground: #2090d3;
|
||||
--vscode-minimapGutter-addedBackground: #48985d;
|
||||
--vscode-minimapGutter-deletedBackground: #e51400;
|
||||
--vscode-editorOverviewRuler-modifiedForeground: rgba(32, 144, 211, 0.6);
|
||||
--vscode-editorOverviewRuler-addedForeground: rgba(72, 152, 93, 0.6);
|
||||
--vscode-editorOverviewRuler-deletedForeground: rgba(229, 20, 0, 0.6);
|
||||
--vscode-debugIcon-breakpointForeground: #e51400;
|
||||
--vscode-debugIcon-breakpointDisabledForeground: #848484;
|
||||
--vscode-debugIcon-breakpointUnverifiedForeground: #848484;
|
||||
--vscode-debugIcon-breakpointCurrentStackframeForeground: #be8700;
|
||||
--vscode-debugIcon-breakpointStackframeForeground: #89d185;
|
||||
--vscode-notebook-cellBorderColor: #d1cbb8;
|
||||
--vscode-notebook-focusedEditorBorder: #b49471;
|
||||
--vscode-notebookStatusSuccessIcon-foreground: #388a34;
|
||||
--vscode-notebookEditorOverviewRuler-runningCellForeground: #388a34;
|
||||
--vscode-notebookStatusErrorIcon-foreground: #a1260d;
|
||||
--vscode-notebookStatusRunningIcon-foreground: #616161;
|
||||
--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);
|
||||
--vscode-notebook-selectedCellBackground: #d1cbb8;
|
||||
--vscode-notebook-selectedCellBorder: #d1cbb8;
|
||||
--vscode-notebook-focusedCellBorder: #b49471;
|
||||
--vscode-notebook-inactiveFocusedCellBorder: #d1cbb8;
|
||||
--vscode-notebook-cellStatusBarItemHoverBackground: rgba(0, 0, 0, 0.08);
|
||||
--vscode-notebook-cellInsertionIndicator: #b49471;
|
||||
--vscode-notebookScrollbarSlider-background: rgba(100, 100, 100, 0.4);
|
||||
--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
|
||||
--vscode-notebookScrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
|
||||
--vscode-notebook-symbolHighlightBackground: rgba(253, 255, 0, 0.2);
|
||||
--vscode-notebook-cellEditorBackground: #f7f0e0;
|
||||
--vscode-notebook-editorBackground: #fdf6e3;
|
||||
--vscode-keybindingTable-headerBackground: rgba(97, 97, 97, 0.04);
|
||||
--vscode-keybindingTable-rowsBackground: rgba(97, 97, 97, 0.04);
|
||||
--vscode-scm-providerBorder: #c8c8c8;
|
||||
--vscode-debugTokenExpression-name: #9b46b0;
|
||||
--vscode-debugTokenExpression-value: rgba(108, 108, 108, 0.8);
|
||||
--vscode-debugTokenExpression-string: #a31515;
|
||||
--vscode-debugTokenExpression-boolean: #0000ff;
|
||||
--vscode-debugTokenExpression-number: #098658;
|
||||
--vscode-debugTokenExpression-error: #e51400;
|
||||
--vscode-debugView-exceptionLabelForeground: #ffffff;
|
||||
--vscode-debugView-exceptionLabelBackground: #a31515;
|
||||
--vscode-debugView-stateLabelForeground: #616161;
|
||||
--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);
|
||||
--vscode-debugView-valueChangedHighlight: #569cd6;
|
||||
--vscode-debugConsole-infoForeground: #1a85ff;
|
||||
--vscode-debugConsole-warningForeground: #bf8803;
|
||||
--vscode-debugConsole-errorForeground: #a1260d;
|
||||
--vscode-debugConsole-sourceForeground: #616161;
|
||||
--vscode-debugConsoleInputIcon-foreground: #616161;
|
||||
--vscode-debugIcon-pauseForeground: #007acc;
|
||||
--vscode-debugIcon-stopForeground: #a1260d;
|
||||
--vscode-debugIcon-disconnectForeground: #a1260d;
|
||||
--vscode-debugIcon-restartForeground: #388a34;
|
||||
--vscode-debugIcon-stepOverForeground: #007acc;
|
||||
--vscode-debugIcon-stepIntoForeground: #007acc;
|
||||
--vscode-debugIcon-stepOutForeground: #007acc;
|
||||
--vscode-debugIcon-continueForeground: #007acc;
|
||||
--vscode-debugIcon-stepBackForeground: #007acc;
|
||||
--vscode-extensionButton-background: #ac9d57;
|
||||
--vscode-extensionButton-foreground: #ffffff;
|
||||
--vscode-extensionButton-hoverBackground: #8b7e44;
|
||||
--vscode-extensionButton-separator: rgba(255, 255, 255, 0.4);
|
||||
--vscode-extensionButton-prominentBackground: #b58900;
|
||||
--vscode-extensionButton-prominentForeground: #ffffff;
|
||||
--vscode-extensionButton-prominentHoverBackground: rgba(88, 76, 39, 0.67);
|
||||
--vscode-extensionIcon-starForeground: #df6100;
|
||||
--vscode-extensionIcon-verifiedForeground: #006ab1;
|
||||
--vscode-extensionIcon-preReleaseForeground: #1d9271;
|
||||
--vscode-extensionIcon-sponsorForeground: #b51e78;
|
||||
--vscode-terminal-ansiBlack: #073642;
|
||||
--vscode-terminal-ansiRed: #dc322f;
|
||||
--vscode-terminal-ansiGreen: #859900;
|
||||
--vscode-terminal-ansiYellow: #b58900;
|
||||
--vscode-terminal-ansiBlue: #268bd2;
|
||||
--vscode-terminal-ansiMagenta: #d33682;
|
||||
--vscode-terminal-ansiCyan: #2aa198;
|
||||
--vscode-terminal-ansiWhite: #eee8d5;
|
||||
--vscode-terminal-ansiBrightBlack: #002b36;
|
||||
--vscode-terminal-ansiBrightRed: #cb4b16;
|
||||
--vscode-terminal-ansiBrightGreen: #586e75;
|
||||
--vscode-terminal-ansiBrightYellow: #657b83;
|
||||
--vscode-terminal-ansiBrightBlue: #839496;
|
||||
--vscode-terminal-ansiBrightMagenta: #6c71c4;
|
||||
--vscode-terminal-ansiBrightCyan: #93a1a1;
|
||||
--vscode-terminal-ansiBrightWhite: #fdf6e3;
|
||||
--vscode-interactive-activeCodeBorder: #b58900;
|
||||
--vscode-interactive-inactiveCodeBorder: #d1cbb8;
|
||||
--vscode-gitDecoration-addedResourceForeground: #587c0c;
|
||||
--vscode-gitDecoration-modifiedResourceForeground: #895503;
|
||||
--vscode-gitDecoration-deletedResourceForeground: #ad0707;
|
||||
--vscode-gitDecoration-renamedResourceForeground: #007100;
|
||||
--vscode-gitDecoration-untrackedResourceForeground: #007100;
|
||||
--vscode-gitDecoration-ignoredResourceForeground: #8e8e90;
|
||||
--vscode-gitDecoration-stageModifiedResourceForeground: #895503;
|
||||
--vscode-gitDecoration-stageDeletedResourceForeground: #ad0707;
|
||||
--vscode-gitDecoration-conflictingResourceForeground: #ad0707;
|
||||
--vscode-gitDecoration-submoduleResourceForeground: #1258a7;
|
||||
--vscode-issues-newIssueDecoration: rgba(0, 0, 0, 0.28);
|
||||
--vscode-issues-open: #3fb950;
|
||||
--vscode-issues-closed: #cb2431;
|
||||
--vscode-pullRequests-merged: #8957e5;
|
||||
--vscode-pullRequests-draft: #6e7681;
|
||||
--vscode-pullRequests-open: #3fb950;
|
||||
--vscode-pullRequests-closed: #cb2431;
|
||||
--vscode-pullRequests-notification: #1a85ff;
|
||||
--vscode-remoteHub-decorations\.addedForegroundColor: #587c0c;
|
||||
--vscode-remoteHub-decorations\.modifiedForegroundColor: #895503;
|
||||
--vscode-remoteHub-decorations\.deletedForegroundColor: #ad0707;
|
||||
--vscode-remoteHub-decorations\.submoduleForegroundColor: #1258a7;
|
||||
--vscode-remoteHub-decorations\.conflictForegroundColor: #ad0707;
|
||||
--vscode-remoteHub-decorations\.incomingAddedForegroundColor: #587c0c;
|
||||
--vscode-remoteHub-decorations\.incomingModifiedForegroundColor: #895503;
|
||||
--vscode-remoteHub-decorations\.incomingDeletedForegroundColor: #ad0707;
|
||||
--vscode-remoteHub-decorations\.incomingRenamedForegroundColor: #007100;
|
||||
--vscode-remoteHub-decorations\.possibleConflictForegroundColor: #855f00;
|
||||
--vscode-remoteHub-decorations\.workspaceRepositoriesView\.hasUncommittedChangesForegroundColor: #895503;
|
||||
}
|
||||
20
src/dashboardWebView/hooks/useThemeColors.tsx
Normal file
20
src/dashboardWebView/hooks/useThemeColors.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { useSettingsContext } from '../providers/SettingsProvider';
|
||||
|
||||
export default function useThemeColors() {
|
||||
const { experimental } = useSettingsContext();
|
||||
|
||||
const getColors = useCallback((defaultColors: string, themeColors: string) => {
|
||||
if (experimental) {
|
||||
return themeColors;
|
||||
}
|
||||
|
||||
return defaultColors;
|
||||
}, [experimental]);
|
||||
|
||||
return {
|
||||
getColors
|
||||
};
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { SENTRY_LINK } from '../constants';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import './styles.css';
|
||||
import { Preview } from './components/Preview';
|
||||
import { SettingsProvider } from './providers/SettingsProvider';
|
||||
|
||||
declare const acquireVsCodeApi: <T = unknown>() => {
|
||||
getState: () => T;
|
||||
@@ -32,6 +33,7 @@ if (elm) {
|
||||
const isProd = elm?.getAttribute('data-isProd');
|
||||
const type = elm?.getAttribute('data-type');
|
||||
const url = elm?.getAttribute('data-url');
|
||||
const experimental = elm?.getAttribute('data-experimental');
|
||||
|
||||
if (isProd === 'true') {
|
||||
Sentry.init({
|
||||
@@ -47,6 +49,10 @@ if (elm) {
|
||||
});
|
||||
}
|
||||
|
||||
if (experimental) {
|
||||
elm.setAttribute("class", "bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]");
|
||||
}
|
||||
|
||||
if (type === 'preview') {
|
||||
render(<Preview url={url} />, elm);
|
||||
} else {
|
||||
@@ -56,7 +62,9 @@ if (elm) {
|
||||
initialEntries={Object.keys(routePaths).map((key: string) => routePaths[key]) as string[]}
|
||||
initialIndex={1}
|
||||
>
|
||||
<App showWelcome={!!welcome} />
|
||||
<SettingsProvider experimental={experimental === 'true'} version={version || ""}>
|
||||
<App showWelcome={!!welcome} />
|
||||
</SettingsProvider>
|
||||
</MemoryRouter>
|
||||
</RecoilRoot>,
|
||||
elm
|
||||
|
||||
47
src/dashboardWebView/providers/SettingsProvider.tsx
Normal file
47
src/dashboardWebView/providers/SettingsProvider.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import * as React from 'react'
|
||||
|
||||
interface ISettingsProviderProps {
|
||||
version?: string;
|
||||
experimental?: boolean;
|
||||
}
|
||||
|
||||
const SettingsContext = React.createContext<ISettingsProviderProps | undefined>(undefined);
|
||||
|
||||
const SettingsProvider: React.FunctionComponent<ISettingsProviderProps> = ({ version, experimental, children }: React.PropsWithChildren<ISettingsProviderProps>) => {
|
||||
const [ crntVersion, setCrntVersion ] = React.useState<string | undefined>(undefined);
|
||||
const [ crntExprimental, setCrntExprimental ] = React.useState<boolean>(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setCrntVersion(version);
|
||||
}, [version]);
|
||||
|
||||
React.useEffect(() => {
|
||||
setCrntExprimental(typeof experimental === 'boolean' ? experimental : false);
|
||||
}, [experimental]);
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider
|
||||
value={{
|
||||
version: crntVersion,
|
||||
experimental: crntExprimental
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</SettingsContext.Provider>
|
||||
)
|
||||
};
|
||||
|
||||
const useSettingsContext = (): ISettingsProviderProps => {
|
||||
const loadFunc = React.useContext(SettingsContext);
|
||||
|
||||
if (loadFunc === undefined) {
|
||||
throw new Error('useSettingsContext must be used within the SettingsProvider');
|
||||
}
|
||||
|
||||
return loadFunc;
|
||||
};
|
||||
|
||||
SettingsContext.displayName = 'SettingsContext';
|
||||
SettingsProvider.displayName = 'SettingsProvider';
|
||||
|
||||
export { SettingsProvider, useSettingsContext };
|
||||
@@ -37,7 +37,6 @@
|
||||
}
|
||||
|
||||
.loader {
|
||||
border-top-color: #15c2cb;
|
||||
animation: spinner 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user