diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 00000000..77b9e3da --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard-scss" +} \ No newline at end of file diff --git a/package.json b/package.json index 3c499689..d6b890f6 100644 --- a/package.json +++ b/package.json @@ -134,9 +134,12 @@ "rollup": "^2.56.3", "rollup-plugin-dts": "^4.2.2", "rollup-plugin-esbuild": "^4.8.2", + "sass": "^1.53.0", "semver": "^7.3.5", "simple-git-hooks": "^2.7.0", "sirv": "^1.0.12", + "stylelint": "^14.9.1", + "stylelint-config-standard-scss": "^4.0.0", "supports-color": "^9.2.2", "typescript": "^4.7.2", "vitest": "^0.14.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a2e3702..62666729 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,10 +62,13 @@ importers: rollup: ^2.56.3 rollup-plugin-dts: ^4.2.2 rollup-plugin-esbuild: ^4.8.2 + sass: ^1.53.0 semver: ^7.3.5 shiki: ^0.10.1 simple-git-hooks: ^2.7.0 sirv: ^1.0.12 + stylelint: ^14.9.1 + stylelint-config-standard-scss: ^4.0.0 supports-color: ^9.2.2 typescript: ^4.7.2 vite: ^2.9.7 @@ -79,7 +82,7 @@ importers: '@vueuse/core': 8.5.0_vue@3.2.33 body-scroll-lock: 4.0.0-beta.0 shiki: 0.10.1 - vite: 2.9.9 + vite: 2.9.9_sass@1.53.0 vue: 3.2.33 devDependencies: '@rollup/plugin-alias': 3.1.5_rollup@2.57.0 @@ -102,7 +105,7 @@ importers: '@types/polka': 0.5.3 '@types/prompts': 2.0.14 chokidar: 3.5.2 - compression: 1.7.4_supports-color@9.2.2 + compression: 1.7.4 conventional-changelog-cli: 2.1.1 cross-spawn: 7.0.3 debug: 4.3.2_supports-color@9.2.2 @@ -134,21 +137,15 @@ importers: rollup: 2.57.0 rollup-plugin-dts: 4.2.2_w5xdfl6eatezstmrfyphpo4gvm rollup-plugin-esbuild: 4.8.2_2xzepk7ossicbmgxlmo67f4ari + sass: 1.53.0 semver: 7.3.5 simple-git-hooks: 2.7.0 sirv: 1.0.17 + stylelint: 14.9.1_supports-color@9.2.2 + stylelint-config-standard-scss: 4.0.0_stylelint@14.9.1 supports-color: 9.2.2 typescript: 4.7.2 - vitest: 0.14.2_supports-color@9.2.2 - - docs: - specifiers: {} - - examples/minimal: - specifiers: - vitepress: workspace:* - devDependencies: - vitepress: link:../.. + vitest: 0.14.2_q4pzsv3j7s6suvk3iwixdboane packages: @@ -294,6 +291,17 @@ packages: to-fast-properties: 2.0.0 dev: false + /@csstools/selector-specificity/2.0.1_444rcjjorr3kpoqtvoodsr46pu: + resolution: {integrity: sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==} + engines: {node: ^12 || ^14 || >=16} + peerDependencies: + postcss: ^8.3 + postcss-selector-parser: ^6.0.10 + dependencies: + postcss: 8.4.14 + postcss-selector-parser: 6.0.10 + dev: true + /@docsearch/css/3.1.0: resolution: {integrity: sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==} dev: false @@ -682,7 +690,7 @@ packages: vite: ^2.5.10 vue: ^3.2.25 dependencies: - vite: 2.9.9 + vite: 2.9.9_sass@1.53.0 vue: 3.2.33 dev: false @@ -837,6 +845,15 @@ packages: indent-string: 4.0.0 dev: true + /ajv/8.11.0: + resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==} + dependencies: + fast-deep-equal: 3.1.3 + json-schema-traverse: 1.0.0 + require-from-string: 2.0.2 + uri-js: 4.4.1 + dev: true + /algoliasearch/4.11.0: resolution: {integrity: sha512-IXRj8kAP2WrMmj+eoPqPc6P7Ncq1yZkFiyDrjTBObV1ADNL8Z/KdZ+dWC5MmYcBLAbcB/mMCpak5N/D1UIZvsA==} dependencies: @@ -909,6 +926,11 @@ packages: resolution: {integrity: sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=} dev: true + /array-union/2.1.0: + resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} + engines: {node: '>=8'} + dev: true + /arrify/1.0.1: resolution: {integrity: sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=} engines: {node: '>=0.10.0'} @@ -927,6 +949,10 @@ packages: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true + /balanced-match/2.0.0: + resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} + dev: true + /base64-js/1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true @@ -1087,6 +1113,13 @@ packages: wrap-ansi: 7.0.0 dev: true + /clone-regexp/2.2.0: + resolution: {integrity: sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==} + engines: {node: '>=6'} + dependencies: + is-regexp: 2.1.0 + dev: true + /clone/1.0.4: resolution: {integrity: sha1-2jCcwmPfFZlMaIypAheco8fNfH4=} engines: {node: '>=0.8'} @@ -1113,6 +1146,10 @@ packages: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} dev: true + /colord/2.9.2: + resolution: {integrity: sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==} + dev: true + /colorette/1.4.0: resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} dev: true @@ -1140,19 +1177,17 @@ packages: mime-db: 1.50.0 dev: true - /compression/1.7.4_supports-color@9.2.2: + /compression/1.7.4: resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==} engines: {node: '>= 0.8.0'} dependencies: accepts: 1.3.7 bytes: 3.0.0 compressible: 2.0.18 - debug: 2.6.9_supports-color@9.2.2 + debug: 2.6.9 on-headers: 1.0.2 safe-buffer: 5.1.2 vary: 1.1.2 - transitivePeerDependencies: - - supports-color dev: true /concat-map/0.0.1: @@ -1352,6 +1387,17 @@ packages: which: 2.0.2 dev: true + /css-functions-list/3.1.0: + resolution: {integrity: sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==} + engines: {node: '>=12.22'} + dev: true + + /cssesc/3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + dev: true + /csstype/2.6.18: resolution: {integrity: sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==} dev: false @@ -1365,16 +1411,10 @@ packages: resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==} dev: true - /debug/2.6.9_supports-color@9.2.2: + /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true dependencies: ms: 2.0.0 - supports-color: 9.2.2 dev: true /debug/4.3.2_supports-color@9.2.2: @@ -1458,6 +1498,13 @@ packages: resolution: {integrity: sha1-PvqHMj67hj5mls67AILUj/PW96E=} dev: true + /dir-glob/3.0.1: + resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} + engines: {node: '>=8'} + dependencies: + path-type: 4.0.0 + dev: true + /dot-prop/5.3.0: resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==} engines: {node: '>=8'} @@ -2156,6 +2203,13 @@ packages: strip-final-newline: 3.0.0 dev: true + /execall/2.0.0: + resolution: {integrity: sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==} + engines: {node: '>=8'} + dependencies: + clone-regexp: 2.2.0 + dev: true + /extend-shallow/2.0.1: resolution: {integrity: sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=} engines: {node: '>=0.10.0'} @@ -2163,6 +2217,21 @@ packages: is-extendable: 0.1.1 dev: true + /fast-deep-equal/3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + dev: true + + /fast-glob/3.2.11: + resolution: {integrity: sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + dev: true + /fast-glob/3.2.7: resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==} engines: {node: '>=8'} @@ -2174,12 +2243,23 @@ packages: micromatch: 4.0.4 dev: true + /fastest-levenshtein/1.0.12: + resolution: {integrity: sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==} + dev: true + /fastq/1.13.0: resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==} dependencies: reusify: 1.0.4 dev: true + /file-entry-cache/6.0.1: + resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} + engines: {node: ^10.12.0 || >=12.0.0} + dependencies: + flat-cache: 3.0.4 + dev: true + /fill-range/7.0.1: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} @@ -2202,6 +2282,18 @@ packages: path-exists: 4.0.0 dev: true + /flat-cache/3.0.4: + resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==} + engines: {node: ^10.12.0 || >=12.0.0} + dependencies: + flatted: 3.2.5 + rimraf: 3.0.2 + dev: true + + /flatted/3.2.5: + resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==} + dev: true + /fs-extra/10.0.0: resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==} engines: {node: '>=12'} @@ -2257,6 +2349,11 @@ packages: yargs: 16.2.0 dev: true + /get-stdin/8.0.0: + resolution: {integrity: sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==} + engines: {node: '>=10'} + dev: true + /get-stream/6.0.1: resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} engines: {node: '>=10'} @@ -2323,6 +2420,38 @@ packages: path-is-absolute: 1.0.1 dev: true + /global-modules/2.0.0: + resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} + engines: {node: '>=6'} + dependencies: + global-prefix: 3.0.0 + dev: true + + /global-prefix/3.0.0: + resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} + engines: {node: '>=6'} + dependencies: + ini: 1.3.8 + kind-of: 6.0.3 + which: 1.3.1 + dev: true + + /globby/11.1.0: + resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} + engines: {node: '>=10'} + dependencies: + array-union: 2.1.0 + dir-glob: 3.0.1 + fast-glob: 3.2.11 + ignore: 5.2.0 + merge2: 1.4.1 + slash: 3.0.0 + dev: true + + /globjoin/0.1.4: + resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} + dev: true + /graceful-fs/4.2.8: resolution: {integrity: sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==} dev: true @@ -2402,6 +2531,11 @@ packages: lru-cache: 6.0.0 dev: true + /html-tags/3.2.0: + resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==} + engines: {node: '>=8'} + dev: true + /human-signals/2.1.0: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} @@ -2416,6 +2550,15 @@ packages: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: true + /ignore/5.2.0: + resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==} + engines: {node: '>= 4'} + dev: true + + /immutable/4.1.0: + resolution: {integrity: sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==} + dev: true + /import-fresh/3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -2424,6 +2567,16 @@ packages: resolve-from: 4.0.0 dev: true + /import-lazy/4.0.0: + resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==} + engines: {node: '>=8'} + dev: true + + /imurmurhash/0.1.4: + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} + engines: {node: '>=0.8.19'} + dev: true + /indent-string/4.0.0: resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} engines: {node: '>=8'} @@ -2564,6 +2717,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /is-plain-object/5.0.0: + resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} + engines: {node: '>=0.10.0'} + dev: true + /is-reference/1.2.1: resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==} dependencies: @@ -2583,6 +2741,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /is-regexp/2.1.0: + resolution: {integrity: sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==} + engines: {node: '>=6'} + dev: true + /is-stream/2.0.1: resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==} engines: {node: '>=8'} @@ -2652,6 +2815,10 @@ packages: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} dev: true + /json-schema-traverse/1.0.0: + resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} + dev: true + /json-stringify-safe/5.0.1: resolution: {integrity: sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=} dev: true @@ -2682,6 +2849,10 @@ packages: engines: {node: '>=6'} dev: true + /known-css-properties/0.25.0: + resolution: {integrity: sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==} + dev: true + /lines-and-columns/1.1.6: resolution: {integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=} dev: true @@ -2764,6 +2935,10 @@ packages: resolution: {integrity: sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=} dev: true + /lodash.truncate/4.4.2: + resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} + dev: true + /lodash/4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} dev: true @@ -2870,6 +3045,10 @@ packages: '@arr/every': 1.0.1 dev: true + /mathml-tag-names/2.1.3: + resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} + dev: true + /mdurl/1.0.1: resolution: {integrity: sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=} dev: true @@ -2896,6 +3075,24 @@ packages: yargs-parser: 20.2.9 dev: true + /meow/9.0.0: + resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==} + engines: {node: '>=10'} + dependencies: + '@types/minimist': 1.2.2 + camelcase-keys: 6.2.2 + decamelize: 1.2.0 + decamelize-keys: 1.1.0 + hard-rejection: 2.1.0 + minimist-options: 4.1.0 + normalize-package-data: 3.0.3 + read-pkg-up: 7.0.1 + redent: 3.0.0 + trim-newlines: 3.0.1 + type-fest: 0.18.1 + yargs-parser: 20.2.9 + dev: true + /merge-stream/2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} dev: true @@ -2913,6 +3110,14 @@ packages: picomatch: 2.3.0 dev: true + /micromatch/4.0.5: + resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} + engines: {node: '>=8.6'} + dependencies: + braces: 3.0.2 + picomatch: 2.3.1 + dev: true + /mime-db/1.49.0: resolution: {integrity: sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==} engines: {node: '>= 0.6'} @@ -3241,6 +3446,11 @@ packages: engines: {node: '>=8.6'} dev: true + /picomatch/2.3.1: + resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} + engines: {node: '>=8.6'} + dev: true + /pidtree/0.3.1: resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==} engines: {node: '>=0.10'} @@ -3270,6 +3480,42 @@ packages: trouter: 2.0.1 dev: true + /postcss-media-query-parser/0.2.3: + resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} + dev: true + + /postcss-resolve-nested-selector/0.1.1: + resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==} + dev: true + + /postcss-safe-parser/6.0.0_postcss@8.4.14: + resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.3.3 + dependencies: + postcss: 8.4.14 + dev: true + + /postcss-scss/4.0.4: + resolution: {integrity: sha512-aBBbVyzA8b3hUL0MGrpydxxXKXFZc5Eqva0Q3V9qsBOLEMsjb6w49WfpsoWzpEgcqJGW4t7Rio8WXVU9Gd8vWg==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.3.3 + dev: true + + /postcss-selector-parser/6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + + /postcss-value-parser/4.2.0: + resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} + dev: true + /postcss/8.4.14: resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==} engines: {node: ^10 || ^12 || >=14} @@ -3300,6 +3546,11 @@ packages: sisteransi: 1.0.5 dev: true + /punycode/2.1.1: + resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} + engines: {node: '>=6'} + dev: true + /q/1.5.1: resolution: {integrity: sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=} engines: {node: '>=0.6.0', teleport: '>=0.2.0'} @@ -3391,11 +3642,21 @@ packages: engines: {node: '>=0.10.0'} dev: true + /require-from-string/2.0.2: + resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} + engines: {node: '>=0.10.0'} + dev: true + /resolve-from/4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} dev: true + /resolve-from/5.0.0: + resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==} + engines: {node: '>=8'} + dev: true + /resolve/1.20.0: resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==} dependencies: @@ -3508,6 +3769,16 @@ packages: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} dev: true + /sass/1.53.0: + resolution: {integrity: sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==} + engines: {node: '>=12.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.2 + immutable: 4.1.0 + source-map-js: 1.0.2 + dev: true + /section-matter/1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} @@ -3773,6 +4044,114 @@ packages: min-indent: 1.0.1 dev: true + /style-search/0.1.0: + resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} + dev: true + + /stylelint-config-recommended-scss/6.0.0_stylelint@14.9.1: + resolution: {integrity: sha512-6QOe2/OzXV2AP5FE12A7+qtKdZik7Saf42SMMl84ksVBBPpTdrV+9HaCbPYiRMiwELY9hXCVdH4wlJ+YJb5eig==} + peerDependencies: + stylelint: ^14.4.0 + dependencies: + postcss-scss: 4.0.4 + stylelint: 14.9.1_supports-color@9.2.2 + stylelint-config-recommended: 7.0.0_stylelint@14.9.1 + stylelint-scss: 4.2.0_stylelint@14.9.1 + transitivePeerDependencies: + - postcss + dev: true + + /stylelint-config-recommended/7.0.0_stylelint@14.9.1: + resolution: {integrity: sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==} + peerDependencies: + stylelint: ^14.4.0 + dependencies: + stylelint: 14.9.1_supports-color@9.2.2 + dev: true + + /stylelint-config-standard-scss/4.0.0_stylelint@14.9.1: + resolution: {integrity: sha512-xizu8PTEyB6zYXBiVg6VtvUYn9m57x+6ZtaOdaxsfpbe5eagLPGNlbYnKfm/CfN69ArUpnwR6LjgsTHzlGbtXQ==} + peerDependencies: + stylelint: ^14.4.0 + dependencies: + stylelint: 14.9.1_supports-color@9.2.2 + stylelint-config-recommended-scss: 6.0.0_stylelint@14.9.1 + stylelint-config-standard: 25.0.0_stylelint@14.9.1 + transitivePeerDependencies: + - postcss + dev: true + + /stylelint-config-standard/25.0.0_stylelint@14.9.1: + resolution: {integrity: sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==} + peerDependencies: + stylelint: ^14.4.0 + dependencies: + stylelint: 14.9.1_supports-color@9.2.2 + stylelint-config-recommended: 7.0.0_stylelint@14.9.1 + dev: true + + /stylelint-scss/4.2.0_stylelint@14.9.1: + resolution: {integrity: sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==} + peerDependencies: + stylelint: ^14.5.1 + dependencies: + lodash: 4.17.21 + postcss-media-query-parser: 0.2.3 + postcss-resolve-nested-selector: 0.1.1 + postcss-selector-parser: 6.0.10 + postcss-value-parser: 4.2.0 + stylelint: 14.9.1_supports-color@9.2.2 + dev: true + + /stylelint/14.9.1_supports-color@9.2.2: + resolution: {integrity: sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + hasBin: true + dependencies: + '@csstools/selector-specificity': 2.0.1_444rcjjorr3kpoqtvoodsr46pu + balanced-match: 2.0.0 + colord: 2.9.2 + cosmiconfig: 7.0.1 + css-functions-list: 3.1.0 + debug: 4.3.4_supports-color@9.2.2 + execall: 2.0.0 + fast-glob: 3.2.11 + fastest-levenshtein: 1.0.12 + file-entry-cache: 6.0.1 + get-stdin: 8.0.0 + global-modules: 2.0.0 + globby: 11.1.0 + globjoin: 0.1.4 + html-tags: 3.2.0 + ignore: 5.2.0 + import-lazy: 4.0.0 + imurmurhash: 0.1.4 + is-plain-object: 5.0.0 + known-css-properties: 0.25.0 + mathml-tag-names: 2.1.3 + meow: 9.0.0 + micromatch: 4.0.5 + normalize-path: 3.0.0 + picocolors: 1.0.0 + postcss: 8.4.14 + postcss-media-query-parser: 0.2.3 + postcss-resolve-nested-selector: 0.1.1 + postcss-safe-parser: 6.0.0_postcss@8.4.14 + postcss-selector-parser: 6.0.10 + postcss-value-parser: 4.2.0 + resolve-from: 5.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + style-search: 0.1.0 + supports-hyperlinks: 2.2.0 + svg-tags: 1.0.0 + table: 6.8.0 + v8-compile-cache: 2.3.0 + write-file-atomic: 4.0.1 + transitivePeerDependencies: + - supports-color + dev: true + /supports-color/5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -3792,10 +4171,33 @@ packages: engines: {node: '>=12'} dev: true + /supports-hyperlinks/2.2.0: + resolution: {integrity: sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==} + engines: {node: '>=8'} + dependencies: + has-flag: 4.0.0 + supports-color: 7.2.0 + dev: true + /supports-preserve-symlinks-flag/1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + /svg-tags/1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + dev: true + + /table/6.8.0: + resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==} + engines: {node: '>=10.0.0'} + dependencies: + ajv: 8.11.0 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + dev: true + /temp-dir/2.0.0: resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==} engines: {node: '>=8'} @@ -3931,6 +4333,12 @@ packages: engines: {node: '>= 10.0.0'} dev: true + /uri-js/4.4.1: + resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + dependencies: + punycode: 2.1.1 + dev: true + /util-deprecate/1.0.2: resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=} dev: true @@ -3941,6 +4349,10 @@ packages: hasBin: true dev: true + /v8-compile-cache/2.3.0: + resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} + dev: true + /validate-npm-package-license/3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} dependencies: @@ -3953,7 +4365,7 @@ packages: engines: {node: '>= 0.8'} dev: true - /vite/2.9.12: + /vite/2.9.12_sass@1.53.0: resolution: {integrity: sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==} engines: {node: '>=12.2.0'} hasBin: true @@ -3973,11 +4385,12 @@ packages: postcss: 8.4.14 resolve: 1.22.0 rollup: 2.75.6 + sass: 1.53.0 optionalDependencies: fsevents: 2.3.2 dev: true - /vite/2.9.9: + /vite/2.9.9_sass@1.53.0: resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==} engines: {node: '>=12.2.0'} hasBin: true @@ -3997,11 +4410,12 @@ packages: postcss: 8.4.14 resolve: 1.22.0 rollup: 2.60.1 + sass: 1.53.0 optionalDependencies: fsevents: 2.3.2 dev: false - /vitest/0.14.2_supports-color@9.2.2: + /vitest/0.14.2_q4pzsv3j7s6suvk3iwixdboane: resolution: {integrity: sha512-vXQUl8OUCqHmxKWscMGL+6Xl1pBJmYHZ8N85iNpLGrirAC2vhspu7b73ShRcLonmZT44BYZW+LBAVvn0L4jyVA==} engines: {node: '>=v14.16.0'} hasBin: true @@ -4027,7 +4441,7 @@ packages: local-pkg: 0.4.1 tinypool: 0.1.3 tinyspy: 0.3.3 - vite: 2.9.12 + vite: 2.9.12_sass@1.53.0 transitivePeerDependencies: - less - sass @@ -4125,6 +4539,14 @@ packages: resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=} dev: true + /write-file-atomic/4.0.1: + resolution: {integrity: sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16} + dependencies: + imurmurhash: 0.1.4 + signal-exit: 3.0.7 + dev: true + /xtend/4.0.2: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} diff --git a/src/client/theme-default/index.ts b/src/client/theme-default/index.ts index 7b792128..7018f140 100644 --- a/src/client/theme-default/index.ts +++ b/src/client/theme-default/index.ts @@ -1,24 +1,17 @@ -import './styles/fonts.css' -import './styles/vars.css' -import './styles/base.css' -import './styles/utils.css' -import './styles/components/custom-block.css' -import './styles/components/vp-code.css' -import './styles/components/vp-doc.css' -import './styles/components/vp-sponsor.css' +import './styles/index.scss' import { Theme } from 'vitepress' import Layout from './Layout.vue' import NotFound from './NotFound.vue' -export { default as VPHomeHero } from './components/VPHomeHero.vue' +export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue' export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue' +export { default as VPHomeHero } from './components/VPHomeHero.vue' export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue' -export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue' +export { default as VPTeamMembers } from './components/VPTeamMembers.vue' export { default as VPTeamPage } from './components/VPTeamPage.vue' -export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue' export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue' -export { default as VPTeamMembers } from './components/VPTeamMembers.vue' +export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue' const theme: Theme = { Layout, diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.scss similarity index 70% rename from src/client/theme-default/styles/base.css rename to src/client/theme-default/styles/base.scss index 9b6044ed..dfec2301 100644 --- a/src/client/theme-default/styles/base.css +++ b/src/client/theme-default/styles/base.scss @@ -7,11 +7,11 @@ html { line-height: 1.4; font-size: 16px; - -webkit-text-size-adjust: 100%; -} + text-size-adjust: 100%; -html.dark { - color-scheme: dark; + .dark { + color-scheme: dark; + } } body { @@ -27,7 +27,7 @@ body { background-color: var(--vp-c-bg); direction: ltr; font-synthesis: none; - text-rendering: optimizeLegibility; + text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -48,7 +48,9 @@ h6 { font-weight: 400; } -p { +p, +blockquote, +figure { margin: 0; } @@ -96,10 +98,6 @@ ul { padding: 0; } -blockquote { - margin: 0; -} - pre, code, kbd, @@ -116,11 +114,6 @@ iframe, embed, object { display: block; - vertical-align: middle; -} - -figure { - margin: 0; } img, @@ -140,32 +133,28 @@ textarea { color: inherit; } -button { - padding: 0; - font-family: inherit;; - background-color: transparent; - background-image: none; -} - button, [role="button"] { cursor: pointer; } -button:focus, -button:focus-visible { - outline: 1px dotted; - outline: 4px auto -webkit-focus-ring-color; -} +button { + padding: 0; + font-family: inherit; + background-color: transparent; + background-image: none; -button:focus:not(:focus-visible) { - outline: none !important; -} + &:focus, + &:focus-visible { + outline: 1px dotted; + outline: 4px auto -webkit-focus-ring-color; + } -input:focus, -textarea:focus, -select:focus { - outline: none; + &:focus { + &:not(:focus-visible) { + outline: none !important; + } + } } table { @@ -174,31 +163,23 @@ table { input { background-color: transparent; -} -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - color: var(--vp-c-text-3); -} - -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { - color: var(--vp-c-text-3); -} + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + appearance: none; + margin: 0; + } -input::placeholder, -textarea::placeholder { - color: var(--vp-c-text-3); + &[type="number"] { + appearance: textfield; + } } -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type="number"] { - -moz-appearance: textfield; +input, +textarea { + &::placeholder { + color: var(--vp-c-text-3); + } } textarea { @@ -206,7 +187,15 @@ textarea { } select { - -webkit-appearance: none; + appearance: none; +} + +input, +textarea, +select { + &:focus { + outline: none; + } } fieldset { diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css deleted file mode 100644 index 81bc71e4..00000000 --- a/src/client/theme-default/styles/components/custom-block.css +++ /dev/null @@ -1,90 +0,0 @@ -.custom-block { - border: 1px solid transparent; - border-radius: 8px; - padding: 16px 16px 8px; - line-height: 24px; - font-size: 14px; - color: var(--vp-c-text-2); -} - -.custom-block.info { - border-color: var(--vp-custom-block-info-border); - color: var(--vp-custom-block-info-text); - background-color: var(--vp-custom-block-info-bg); -} - -.custom-block.info code { - background-color: var(--vp-custom-block-info-code-bg); -} - -.custom-block.tip { - border-color: var(--vp-custom-block-tip-border); - color: var(--vp-custom-block-tip-text); - background-color: var(--vp-custom-block-tip-bg); -} - -.custom-block.tip code { - background-color: var(--vp-custom-block-tip-code-bg); -} - -.custom-block.warning { - border-color: var(--vp-custom-block-warning-border); - color: var(--vp-custom-block-warning-text); - background-color: var(--vp-custom-block-warning-bg); -} - -.custom-block.warning code { - background-color: var(--vp-custom-block-warning-code-bg); -} - -.custom-block.danger { - border-color: var(--vp-custom-block-danger-border); - color: var(--vp-custom-block-danger-text); - background-color: var(--vp-custom-block-danger-bg); -} - -.custom-block.danger code { - background-color: var(--vp-custom-block-danger-code-bg); -} - -.custom-block.details { - border-color: var(--vp-custom-block-details-border); - color: var(--vp-custom-block-details-text); - background-color: var(--vp-custom-block-details-bg); -} - -.custom-block.details code { - background-color: var(--vp-custom-block-details-code-bg); -} - -.custom-block-title { - font-weight: 700; -} - -.custom-block p + p { - margin: 8px 0; -} - -.custom-block.details summary { - margin: 0 0 8px; - font-weight: 700; -} - -.custom-block.details summary + p { - margin: 8px 0; -} - -.custom-block a { - color: inherit; - font-weight: 600; - text-decoration: underline; - transition: opacity 0.25s; -} - -.custom-block a:hover { - opacity: 0.6; -} - -.custom-block code { - font-size: var(--vp-custom-block-code-font-size); -} diff --git a/src/client/theme-default/styles/components/custom-block.scss b/src/client/theme-default/styles/components/custom-block.scss new file mode 100644 index 00000000..46ef036b --- /dev/null +++ b/src/client/theme-default/styles/components/custom-block.scss @@ -0,0 +1,74 @@ +@mixin custom-block-variant($variant) { + border-color: var(--vp-custom-block-#{$variant}-border); + color: var(--vp-custom-block-#{$variant}-text); + background-color: var(--vp-custom-block-#{$variant}-bg); + + code { + background-color: var(--vp-custom-block-#{$variant}-code-bg); + } +} + +.custom-block { + border: 1px solid transparent; + border-radius: 8px; + padding: 16px 16px 8px; + line-height: 24px; + font-size: 14px; + color: var(--vp-c-text-2); + + p + p { + margin: 8px 0; + } + + a { + color: inherit; + font-weight: 600; + text-decoration: underline; + transition: opacity 0.25s; + + &:hover { + opacity: 0.6; + } + } + + code { + font-size: var(--vp-custom-block-code-font-size); + } + + /** + * Variants + * -------------------------------------------------------------------------- */ + + &.info { + @include custom-block-variant("info"); + } + + &.tip { + @include custom-block-variant("tip"); + } + + &.warning { + @include custom-block-variant("warning"); + } + + &.danger { + @include custom-block-variant("danger"); + } + + &.details { + @include custom-block-variant("danger"); + + summary { + margin: 0 0 8px; + font-weight: 700; + + + p { + margin: 8px 0; + } + } + } +} + +.custom-block-title { + font-weight: 700; +} diff --git a/src/client/theme-default/styles/components/index.scss b/src/client/theme-default/styles/components/index.scss new file mode 100644 index 00000000..5d6fd1ce --- /dev/null +++ b/src/client/theme-default/styles/components/index.scss @@ -0,0 +1,4 @@ +@use "custom-block"; +@use "vp-code"; +@use "vp-doc"; +@use "vp-sponsor"; diff --git a/src/client/theme-default/styles/components/vp-code.css b/src/client/theme-default/styles/components/vp-code.css deleted file mode 100644 index ee74e5b2..00000000 --- a/src/client/theme-default/styles/components/vp-code.css +++ /dev/null @@ -1,7 +0,0 @@ -.dark .vp-code-light { - display: none; -} - -html:not(.dark) .vp-code-dark { - display: none; -} diff --git a/src/client/theme-default/styles/components/vp-code.scss b/src/client/theme-default/styles/components/vp-code.scss new file mode 100644 index 00000000..aae78ac1 --- /dev/null +++ b/src/client/theme-default/styles/components/vp-code.scss @@ -0,0 +1,9 @@ +.dark { + .vp-code-light { + display: none; + } + + html:not(&) .vp-code-dark { + display: none; + } +} diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css deleted file mode 100644 index 29128d3a..00000000 --- a/src/client/theme-default/styles/components/vp-doc.css +++ /dev/null @@ -1,486 +0,0 @@ -/** - * Headings - * -------------------------------------------------------------------------- */ - -.vp-doc h1, -.vp-doc h2, -.vp-doc h3, -.vp-doc h4, -.vp-doc h5, -.vp-doc h6 { - position: relative; - font-weight: 600; - outline: none; -} - -.vp-doc h1 { - letter-spacing: -0.02em; - line-height: 40px; - font-size: 28px; -} - -.vp-doc h2 { - margin: 48px 0 16px; - border-top: 1px solid var(--vp-c-divider-light); - padding-top: 24px; - letter-spacing: -0.02em; - line-height: 32px; - font-size: 24px; -} - -.vp-doc h3 { - margin: 32px 0 0; - letter-spacing: -0.01em; - line-height: 28px; - font-size: 20px; -} - -.vp-doc .header-anchor { - float: left; - margin-left: -0.87em; - padding-right: 0.23em; - font-weight: 500; - opacity: 0; - transition: color 0.25s, opacity 0.25s; -} - -.vp-doc h1:hover .header-anchor, -.vp-doc h1 .header-anchor:focus, -.vp-doc h2:hover .header-anchor, -.vp-doc h2 .header-anchor:focus, -.vp-doc h3:hover .header-anchor, -.vp-doc h3 .header-anchor:focus, -.vp-doc h4:hover .header-anchor, -.vp-doc h4 .header-anchor:focus, -.vp-doc h5:hover .header-anchor, -.vp-doc h5 .header-anchor:focus, -.vp-doc h6:hover .header-anchor, -.vp-doc h6 .header-anchor:focus { - opacity: 1; -} - -@media (min-width: 768px) { - .vp-doc h1 { - letter-spacing: -0.02em; - line-height: 40px; - font-size: 32px; - } -} - -/** - * Paragraph and inline elements - * -------------------------------------------------------------------------- */ - -.vp-doc p, -.vp-doc summary { - margin: 16px 0; -} - -.vp-doc p { - line-height: 28px; -} - -.vp-doc blockquote { - margin: 16px 0; - border-left: 2px solid var(--vp-c-divider); - padding-left: 16px; - transition: border-color 0.5s; -} - -.vp-doc blockquote > p { - margin: 0; - font-size: 16px; - color: var(--vp-c-text-2); - transition: color 0.5s; -} - -.vp-doc a { - font-weight: 500; - color: var(--vp-c-brand); - text-decoration-style: dotted; - transition: color 0.25s; -} - -.vp-doc a:hover { - color: var(--vp-c-brand-dark); -} - -.vp-doc strong { - font-weight: 600; -} - -/** - * Lists - * -------------------------------------------------------------------------- */ - -.vp-doc ul, -.vp-doc ol { - padding-left: 1.25rem; - margin: 16px 0; -} - -.vp-doc ul { - list-style: disc; -} - -.vp-doc ol { - list-style: decimal; -} - -.vp-doc li + li { - margin-top: 8px; -} - -.vp-doc li > ol, -.vp-doc li > ul { - margin: 8px 0 0; -} - -/** - * Table - * -------------------------------------------------------------------------- */ - -.vp-doc table { - display: block; - border-collapse: collapse; - margin: 20px 0; - overflow-x: auto; -} - -.vp-doc tr { - border-top: 1px solid var(--vp-c-divider); - transition: background-color 0.5s; -} - -.vp-doc tr:nth-child(2n) { - background-color: var(--vp-c-bg-soft); -} - -.vp-doc th, -.vp-doc td { - border: 1px solid var(--vp-c-divider); - padding: 12px 16px; -} - -.vp-doc th { - font-size: 16px; - font-weight: 600; - background-color: var(--vp-c-white-soft); -} - -.dark .vp-doc th { - background-color: var(--vp-c-black); -} - -/** - * Decorational elements - * -------------------------------------------------------------------------- */ - -.vp-doc hr { - margin: 16px 0; - border: none; - border-top: 1px solid var(--vp-c-divider-light); -} - -/** - * Custom Block - * -------------------------------------------------------------------------- */ - -.vp-doc .custom-block { - margin: 16px 0; -} - -.vp-doc .custom-block p { - margin: 8px 0; - line-height: 24px; -} - -.vp-doc .custom-block p:first-child { - margin: 0; -} - -.vp-doc .custom-block a { - color: inherit; - font-weight: 600; - text-decoration: underline; - transition: opacity .25s; -} - -.vp-doc .custom-block a:hover { - opacity: 0.6; -} - -.vp-doc .custom-block code { - font-size: var(--vp-custom-block-code-font-size); - font-weight: 700; - color: inherit; -} - -.vp-doc .custom-block div[class*='language-'] { - margin: 8px 0; -} - -.vp-doc .custom-block div[class*='language-'] code { - font-weight: 400; - background-color: var(--vp-code-block-bg); -} - -/** - * Code - * -------------------------------------------------------------------------- */ - -/* inline code */ -.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code { - font-size: var(--vp-code-font-size); -} - -.vp-doc :not(pre) > code { - border-radius: 4px; - padding: 3px 6px; - color: var(--vp-c-text-code); - background-color: var(--vp-c-bg-mute); - transition: color 0.5s, background-color 0.5s; -} - -.vp-doc h1 > code, -.vp-doc h2 > code, -.vp-doc h3 > code { - font-size: 0.9em; -} - -.vp-doc a > code { - color: var(--vp-c-brand); - transition: color 0.25s; -} - -.vp-doc a:hover > code { - color: var(--vp-c-brand-dark); -} - -.vp-doc div[class*='language-'] { - position: relative; - margin: 16px -24px; - background-color: var(--vp-code-block-bg); - overflow-x: auto; - transition: background-color 0.5s; -} - -@media (min-width: 640px) { - .vp-doc div[class*='language-'] { - border-radius: 8px; - margin: 16px 0; - } -} - -@media (max-width: 639px) { - .vp-doc li div[class*='language-'] { - border-radius: 8px 0 0 8px; - } -} - -.vp-doc div[class*='language-'] + div[class*='language-'], -.vp-doc div[class$='-api'] + div[class*='language-'], -.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] { - margin-top: -8px; -} - -.vp-doc [class*='language-'] pre, -.vp-doc [class*='language-'] code { - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -.vp-doc [class*='language-'] pre { - position: relative; - z-index: 1; - margin: 0; - padding: 16px 0; - background: transparent; - overflow-x: auto; -} - -.vp-doc [class*='language-'] code { - display: block; - padding: 0 24px; - width: fit-content; - line-height: var(--vp-code-line-height); - font-size: var(--vp-code-font-size); - color: var(--vp-code-block-color); - transition: color 0.5s; -} - -.vp-doc .highlight-lines { - position: absolute; - top: 0; - bottom: 0; - left: 0; - padding-top: 16px; - width: 100%; - line-height: var(--vp-code-line-height); - font-family: var(--vp-font-family-mono); - font-size: var(--vp-code-font-size); - user-select: none; - overflow: hidden; -} - -.vp-doc .highlight-lines .highlighted { - background-color: var(--vp-code-line-highlight-color); - transition: background-color 0.5s; -} - -.vp-doc div[class*='language-'].line-numbers-mode { - padding-left: 32px; -} - -.vp-doc div[class*='language-'].line-numbers-mode pre { - padding-left: 16px; -} - -.vp-doc .line-numbers-wrapper { - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 3; - border-right: 1px solid var(--vp-c-divider-dark-2); - padding-top: 16px; - width: 32px; - text-align: center; - font-family: var(--vp-font-family-mono); - line-height: var(--vp-code-line-height); - font-size: var(--vp-code-font-size); - color: var(--vp-code-line-number-color); - transition: border-color 0.5s, color 0.5s; -} - -.vp-doc [class*='language-'] > span.copy { - position: absolute; - top: 8px; - right: 8px; - z-index: 2; - display: block; - justify-content: center; - align-items: center; - border-radius: 4px; - width: 40px; - height: 40px; - background-color: var(--vp-code-block-bg); - opacity: 0; - cursor: pointer; - background-image: var(--vp-icon-copy); - background-position: 50%; - background-size: 20px; - background-repeat: no-repeat; - transition: opacity 0.25s; -} - -.vp-doc [class*='language-']:hover > span.copy { - opacity: 1; -} - -.vp-doc [class*='language-'] > span.copy:hover { - background-color: var(--vp-code-copy-code-hover-bg); -} - -.vp-doc [class*='language-'] > span.copy.copied, -.vp-doc [class*='language-'] > span.copy:hover.copied { - border-radius: 0 4px 4px 0; - background-color: var(--vp-code-copy-code-hover-bg); - background-image: var(--vp-icon-copied); -} - -.vp-doc [class*='language-'] > span.copy.copied::before, -.vp-doc [class*='language-'] > span.copy:hover.copied::before { - position: relative; - left: -65px; - display: block; - border-radius: 4px 0 0 4px; - padding-top: 8px; - width: 64px; - height: 40px; - text-align: center; - font-size: 12px; - font-weight: 500; - color: var(--vp-code-copy-code-active-text); - background-color: var(--vp-code-copy-code-hover-bg); - white-space: nowrap; - content: "Copied"; -} - -.vp-doc [class*='language-']:before { - position: absolute; - top: 6px; - right: 12px; - z-index: 2; - font-size: 12px; - font-weight: 500; - color: var(--vp-c-text-dark-3); - transition: color 0.5s, opacity 0.5s; -} - -.vp-doc [class*='language-']:hover:before { - opacity: 0; -} - -.vp-doc [class~='language-c']:before { content: 'c'; } -.vp-doc [class~='language-css']:before { content: 'css'; } -.vp-doc [class~='language-go']:before { content: 'go'; } -.vp-doc [class~='language-html']:before { content: 'html'; } -.vp-doc [class~='language-java']:before { content: 'java'; } -.vp-doc [class~='language-javascript']:before { content: 'js'; } -.vp-doc [class~='language-js']:before { content: 'js'; } -.vp-doc [class~='language-json']:before { content: 'json'; } -.vp-doc [class~='language-jsx']:before { content: 'jsx'; } -.vp-doc [class~='language-less']:before { content: 'less'; } -.vp-doc [class~='language-markdown']:before { content: 'md'; } -.vp-doc [class~='language-md']:before { content: 'md' } -.vp-doc [class~='language-php']:before { content: 'php'; } -.vp-doc [class~='language-python']:before { content: 'py'; } -.vp-doc [class~='language-py']:before { content: 'py'; } -.vp-doc [class~='language-rb']:before { content: 'rb'; } -.vp-doc [class~='language-ruby']:before { content: 'rb'; } -.vp-doc [class~='language-rust']:before { content: 'rust'; } -.vp-doc [class~='language-sass']:before { content: 'sass'; } -.vp-doc [class~='language-scss']:before { content: 'scss'; } -.vp-doc [class~='language-sh']:before { content: 'sh'; } -.vp-doc [class~='language-bash']:before { content: 'sh'; } -.vp-doc [class~='language-stylus']:before { content: 'styl'; } -.vp-doc [class~='language-vue-html']:before { content: 'template'; } -.vp-doc [class~='language-typescript']:before { content: 'ts'; } -.vp-doc [class~='language-ts']:before { content: 'ts'; } -.vp-doc [class~='language-tsx']:before { content: 'tsx'; } -.vp-doc [class~='language-vue']:before { content: 'vue'; } -.vp-doc [class~='language-yaml']:before { content: 'yaml'; } - -/** - * Component: Team - * -------------------------------------------------------------------------- */ - -.vp-doc .VPTeamMembers { - margin-top: 24px; -} - -.vp-doc .VPTeamMembers.small.count-1 .container { - margin: 0 !important; - max-width: calc((100% - 24px) / 2) !important; -} - -.vp-doc .VPTeamMembers.small.count-2 .container, -.vp-doc .VPTeamMembers.small.count-3 .container { - max-width: 100% !important; -} - -.vp-doc .VPTeamMembers.medium.count-1 .container { - margin: 0 !important; - max-width: calc((100% - 24px) / 2) !important; -} diff --git a/src/client/theme-default/styles/components/vp-doc.scss b/src/client/theme-default/styles/components/vp-doc.scss new file mode 100644 index 00000000..eabfcf33 --- /dev/null +++ b/src/client/theme-default/styles/components/vp-doc.scss @@ -0,0 +1,490 @@ +/** +* Headings +* -------------------------------------------------------------------------- */ + +%header-anchor-visibility { + .vp-doc &:hover .header-anchor, + .vp-doc & .header-anchor:focus { + opacity: 1; + } +} + +@mixin lang-content($lang, $content) { + [class~="language-#{$lang}"]:before { + content: "#{$content}"; + } +} + +.vp-doc { + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + font-weight: 600; + outline: none; + + @extend %header-anchor-visibility; + } + + h1 { + letter-spacing: -0.02em; + line-height: 40px; + font-size: 28px; + + @media (min-width: 768px) { + letter-spacing: -0.02em; + line-height: 40px; + font-size: 32px; + } + } + + h2 { + margin: 48px 0 16px; + border-top: 1px solid var(--vp-c-divider-light); + padding-top: 24px; + letter-spacing: -0.02em; + line-height: 32px; + font-size: 24px; + } + + & h3 { + margin: 32px 0 0; + letter-spacing: -0.01em; + line-height: 28px; + font-size: 20px; + } + + /* stylelint-disable-next-line no-descending-specificity */ + .header-anchor { + float: left; + margin-left: -0.87em; + padding-right: 0.23em; + font-weight: 500; + opacity: 0; + transition: color 0.25s, opacity 0.25s; + } + + /** + * Paragraph and inline elements + * -------------------------------------------------------------------------- */ + + p, + summary { + margin: 16px 0; + } + + p { + line-height: 28px; + } + + blockquote { + margin: 16px 0; + border-left: 2px solid var(--vp-c-divider); + padding-left: 16px; + transition: border-color 0.5s; + + > p { + margin: 0; + font-size: 16px; + color: var(--vp-c-text-2); + transition: color 0.5s; + } + } + + a { + font-weight: 500; + color: var(--vp-c-brand); + text-decoration-style: dotted; + transition: color 0.25s; + + &:hover { + color: var(--vp-c-brand-dark); + } + } + + strong { + font-weight: 600; + } + + /** + * Lists + * -------------------------------------------------------------------------- */ + + ul, + ol { + padding-left: 1.25rem; + margin: 16px 0; + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + li { + + li { + margin-top: 8px; + } + + > ol, + > ul { + margin: 8px 0 0; + } + } + + /** + * Table + * -------------------------------------------------------------------------- */ + + table { + display: block; + border-collapse: collapse; + margin: 20px 0; + overflow-x: auto; + } + + tr { + border-top: 1px solid var(--vp-c-divider); + transition: background-color 0.5s; + + &:nth-child(2n) { + background-color: var(--vp-c-bg-soft); + } + } + + th, + td { + border: 1px solid var(--vp-c-divider); + padding: 12px 16px; + } + + th { + font-size: 16px; + font-weight: 600; + background-color: var(--vp-c-white-soft); + + .dark & { + background-color: var(--vp-c-black); + } + } + + /** + * Decorational elements + * -------------------------------------------------------------------------- */ + + hr { + margin: 16px 0; + border: none; + border-top: 1px solid var(--vp-c-divider-light); + } + + /** + * Code + * -------------------------------------------------------------------------- */ + + /* inline code */ + :not(pre, h1, h2, h3, h4, h5, h6) > code { + font-size: var(--vp-code-font-size); + } + + :not(pre) > code { + border-radius: 4px; + padding: 3px 6px; + color: var(--vp-c-text-code); + background-color: var(--vp-c-bg-mute); + transition: color 0.5s, background-color 0.5s; + } + + h1 > code, + h2 > code, + h3 > code { + font-size: 0.9em; + } + + a > code { + color: var(--vp-c-brand); + transition: color 0.25s; + } + + a:hover > code { + color: var(--vp-c-brand-dark); + } + + [class*="language-"] { + /* stylelint-disable-next-line no-descending-specificity */ + pre, + code { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + tab-size: 4; + hyphens: none; + } + + pre { + position: relative; + z-index: 1; + margin: 0; + padding: 16px 0; + background: transparent; + overflow-x: auto; + } + + /* stylelint-disable-next-line no-descending-specificity */ + code { + display: block; + padding: 0 24px; + width: fit-content; + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-block-color); + transition: color 0.5s; + } + + > span.copy { + position: absolute; + top: 8px; + right: 8px; + z-index: 2; + display: block; + justify-content: center; + align-items: center; + border-radius: 4px; + width: 40px; + height: 40px; + background-color: var(--vp-code-block-bg); + opacity: 0; + cursor: pointer; + background-image: var(--vp-icon-copy); + background-position: 50%; + background-size: 20px; + background-repeat: no-repeat; + transition: opacity 0.25s; + + &:hover { + background-color: var(--vp-code-copy-code-hover-bg); + } + + &.copied, + &:hover.copied { + border-radius: 0 4px 4px 0; + background-color: var(--vp-code-copy-code-hover-bg); + background-image: var(--vp-icon-copied); + + &::before { + position: relative; + left: -65px; + display: block; + border-radius: 4px 0 0 4px; + padding-top: 8px; + width: 64px; + height: 40px; + text-align: center; + font-size: 12px; + font-weight: 500; + color: var(--vp-code-copy-code-active-text); + background-color: var(--vp-code-copy-code-hover-bg); + white-space: nowrap; + content: "Copied"; + } + } + } + + &:hover > span.copy { + opacity: 1; + } + + &::before { + position: absolute; + top: 6px; + right: 12px; + z-index: 2; + font-size: 12px; + font-weight: 500; + color: var(--vp-c-text-dark-3); + transition: color 0.5s, opacity 0.5s; + } + + &:hover::before { + opacity: 0; + } + } + + div[class*="language-"] { + position: relative; + margin: 16px -24px; + background-color: var(--vp-code-block-bg); + overflow-x: auto; + transition: background-color 0.5s; + + @media (min-width: 640px) { + border-radius: 8px; + margin: 16px 0; + } + + &.line-numbers-mode { + padding-left: 32px; + + pre { + padding-left: 16px; + } + } + } + + li div[class*="language-"] { + @media (max-width: 639px) { + border-radius: 8px 0 0 8px; + } + } + + .highlight-lines { + position: absolute; + top: 0; + bottom: 0; + left: 0; + padding-top: 16px; + width: 100%; + line-height: var(--vp-code-line-height); + font-family: var(--vp-font-family-mono); + font-size: var(--vp-code-font-size); + user-select: none; + overflow: hidden; + + .highlighted { + background-color: var(--vp-code-line-highlight-color); + transition: background-color 0.5s; + } + } + + .line-numbers-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 3; + border-right: 1px solid var(--vp-c-divider-dark-2); + padding-top: 16px; + width: 32px; + text-align: center; + font-family: var(--vp-font-family-mono); + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-line-number-color); + transition: border-color 0.5s, color 0.5s; + } + + div[class*="language-"] + div[class*="language-"], + div[class$="-api"] + div[class*="language-"], + div[class*="language-"] + div[class$="-api"] > div[class*="language-"] { + margin-top: -8px; + } + + @include lang-content("c", "c"); + @include lang-content("css", "css"); + @include lang-content("go", "go"); + @include lang-content("html", "html"); + @include lang-content("java", "java"); + @include lang-content("javascript", "js"); + @include lang-content("js", "js"); + @include lang-content("json", "json"); + @include lang-content("jsx", "jsx"); + @include lang-content("less", "less"); + @include lang-content("markdown", "md"); + @include lang-content("md", "md"); + @include lang-content("php", "php"); + @include lang-content("python", "py"); + @include lang-content("py", "py"); + @include lang-content("rb", "rb"); + @include lang-content("ruby", "rb"); + @include lang-content("rust", "rust"); + @include lang-content("sass", "sass"); + @include lang-content("scss", "scss"); + @include lang-content("sh", "sh"); + @include lang-content("bash", "sh"); + @include lang-content("stylus", "styl"); + @include lang-content("vue-html", "template"); + @include lang-content("typescript", "ts"); + @include lang-content("ts", "ts"); + @include lang-content("tsx", "tsx"); + @include lang-content("vue", "vue"); + @include lang-content("yaml", "yaml"); + + /** + * Custom Block + * -------------------------------------------------------------------------- */ + + .custom-block { + margin: 16px 0; + + p { + margin: 8px 0; + line-height: 24px; + + &:first-child { + margin: 0; + } + } + + a { + color: inherit; + font-weight: 600; + text-decoration: underline; + transition: opacity 0.25s; + + &:hover { + opacity: 0.6; + } + } + + /* stylelint-disable-next-line no-descending-specificity */ + code { + font-size: var(--vp-custom-block-code-font-size); + font-weight: 700; + color: inherit; + } + + /* stylelint-disable-next-line no-descending-specificity */ + div[class*="language-"] { + margin: 8px 0; + + code { + font-weight: 400; + background-color: var(--vp-code-block-bg); + } + } + } + + /** + * Component: Team + * -------------------------------------------------------------------------- */ + + /* stylelint-disable-next-line selector-class-pattern */ + .VPTeamMembers { + margin-top: 24px; + + &.small { + &.count-1 .container { + margin: 0 !important; + max-width: calc((100% - 24px) / 2) !important; + } + + &.count-2 .container, + &.count-3 .container { + max-width: 100% !important; + } + } + + &.medium.count-1 .container { + margin: 0 !important; + max-width: calc((100% - 24px) / 2) !important; + } + } +} diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css deleted file mode 100644 index 09fb6cb1..00000000 --- a/src/client/theme-default/styles/components/vp-sponsor.css +++ /dev/null @@ -1,130 +0,0 @@ -/** - * VPSponsors styles are defined as global because a new class gets - * allied in onMounted` hook and we can't use socped style. - */ -.vp-sponsor { - border-radius: 16px; - overflow: hidden; -} - -.vp-sponsor.aside { - border-radius: 12px; -} - -.vp-sponsor-section + .vp-sponsor-section { - margin-top: 4px; -} - -.vp-sponsor-tier { - margin-bottom: 4px; - text-align: center; - letter-spacing: 1px; - line-height: 24px; - width: 100%; - font-weight: 600; - color: var(--vp-c-text-2); - background-color: var(--vp-c-bg-soft); -} - -.vp-sponsor.normal .vp-sponsor-tier { - padding: 13px 0 11px; - font-size: 14px; -} - -.vp-sponsor.aside .vp-sponsor-tier { - padding: 9px 0 7px; - font-size: 12px; -} - -.vp-sponsor-grid + .vp-sponsor-tier { - margin-top: 4px; -} - -.vp-sponsor-grid { - display: flex; - flex-wrap: wrap; - gap: 4px; -} - -.vp-sponsor-grid.xmini .vp-sponsor-grid-link { height: 64px; } -.vp-sponsor-grid.xmini .vp-sponsor-grid-image { max-width: 64px; max-height: 22px } - -.vp-sponsor-grid.mini .vp-sponsor-grid-link { height: 72px; } -.vp-sponsor-grid.mini .vp-sponsor-grid-image { max-width: 96px; max-height: 24px } - -.vp-sponsor-grid.small .vp-sponsor-grid-link { height: 96px; } -.vp-sponsor-grid.small .vp-sponsor-grid-image { max-width: 96px; max-height: 24px } - -.vp-sponsor-grid.medium .vp-sponsor-grid-link { height: 112px; } -.vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 120px; max-height: 36px } - -.vp-sponsor-grid.big .vp-sponsor-grid-link { height: 184px; } -.vp-sponsor-grid.big .vp-sponsor-grid-image { max-width: 192px; max-height: 56px } - -.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item { - width: calc((100% - 4px) / 2); -} - -.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item { - width: calc((100% - 4px * 2) / 3); -} - -.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item { - width: calc((100% - 4px * 3) / 4); -} - -.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item { - width: calc((100% - 4px * 4) / 5); -} - -.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item { - width: calc((100% - 4px * 5) / 6); -} - -.vp-sponsor-grid-item { - flex-shrink: 0; - width: 100%; - background-color: var(--vp-c-bg-soft); - transition: background-color 0.25s; -} - -.vp-sponsor-grid-item:hover { - background-color: var(--vp-c-bg-mute); -} - -.vp-sponsor-grid-item:hover .vp-sponsor-grid-image { - filter: grayscale(0) invert(0); -} - -.vp-sponsor-grid-item.empty:hover { - background-color: var(--vp-c-bg-soft); -} - -.dark .vp-sponsor-grid-item:hover { - background-color: var(--vp-c-white-soft); -} - -.dark .vp-sponsor-grid-item.empty:hover { - background-color: var(--vp-c-black-mute); -} - -.vp-sponsor-grid-link { - display: flex; -} - -.vp-sponsor-grid-box { - display: flex; - justify-content: center; - align-items: center; - width: 100%; -} - -.vp-sponsor-grid-image { - max-width: 100%; - filter: grayscale(1); - transition: filter 0.25s; -} - -.dark .vp-sponsor-grid-image { - filter: grayscale(1) invert(1); -} diff --git a/src/client/theme-default/styles/components/vp-sponsor.scss b/src/client/theme-default/styles/components/vp-sponsor.scss new file mode 100644 index 00000000..c773ed26 --- /dev/null +++ b/src/client/theme-default/styles/components/vp-sponsor.scss @@ -0,0 +1,138 @@ +/** + * VPSponsors styles are defined as global because a new class gets + * allied in onMounted` hook and we can't use socped style. + */ +.vp-sponsor-section + .vp-sponsor-section { + margin-top: 4px; +} + +.vp-sponsor { + border-radius: 16px; + overflow: hidden; + + &.aside { + border-radius: 12px; + } +} + +.vp-sponsor-tier { + margin-bottom: 4px; + text-align: center; + letter-spacing: 1px; + line-height: 24px; + width: 100%; + font-weight: 600; + color: var(--vp-c-text-2); + background-color: var(--vp-c-bg-soft); + + .vp-sponsor.aside & { + padding: 9px 0 7px; + font-size: 12px; + } + + .vp-sponsor.normal & { + padding: 13px 0 11px; + font-size: 14px; + } +} + +.vp-sponsor-grid-image { + max-width: 100%; + filter: grayscale(1); + transition: filter 0.25s; + + .dark & { + filter: grayscale(1) invert(1); + } +} + +/** +* Sponsor grid variants +* -------------------------------------------------------------------------- */ +@mixin sponsor-grid-variants($variant, $link-height, $img-max-width, $img-max-height) { + &.#{$variant} { + .vp-sponsor-grid-link { + height: $link-height; + } + + .vp-sponsor-grid-image { + max-width: $img-max-width; + max-height: $img-max-height; + } + } +} + +.vp-sponsor-grid-item { + flex-shrink: 0; + width: 100%; + background-color: var(--vp-c-bg-soft); + transition: background-color 0.25s; + + &:hover { + background-color: var(--vp-c-bg-mute); + + .dark & { + background-color: var(--vp-c-white-soft); + } + + .vp-sponsor-grid-image { + filter: grayscale(0) invert(0); + } + } + + &.empty:hover { + background-color: var(--vp-c-bg-soft); + + .dark & { + background-color: var(--vp-c-black-mute); + } + } +} + +.vp-sponsor-grid { + display: flex; + flex-wrap: wrap; + gap: 4px; + + @include sponsor-grid-variants("xmini", 64px, 64px, 22px); + @include sponsor-grid-variants("mini", 72px, 96px, 24px); + @include sponsor-grid-variants("small", 96px, 96px, 24px); + @include sponsor-grid-variants("medium", 112px, 120px, 36px); + @include sponsor-grid-variants("big", 184px, 192px, 56px); + + &[data-vp-grid="2"] .vp-sponsor-grid-item { + width: calc((100% - 4px) / 2); + } + + &[data-vp-grid="3"] .vp-sponsor-grid-item { + width: calc((100% - 4px * 2) / 3); + } + + &[data-vp-grid="4"] .vp-sponsor-grid-item { + width: calc((100% - 4px * 3) / 4); + } + + &[data-vp-grid="5"] .vp-sponsor-grid-item { + width: calc((100% - 4px * 4) / 5); + } + + &[data-vp-grid="6"] .vp-sponsor-grid-item { + width: calc((100% - 4px * 5) / 6); + } + + /* stylelint-disable-next-line no-descending-specificity */ + + .vp-sponsor-tier { + margin-top: 4px; + } +} + +.vp-sponsor-grid-link { + display: flex; +} + +.vp-sponsor-grid-box { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} diff --git a/src/client/theme-default/styles/fonts.css b/src/client/theme-default/styles/fonts.scss similarity index 100% rename from src/client/theme-default/styles/fonts.css rename to src/client/theme-default/styles/fonts.scss diff --git a/src/client/theme-default/styles/index.scss b/src/client/theme-default/styles/index.scss new file mode 100644 index 00000000..24bf5b0f --- /dev/null +++ b/src/client/theme-default/styles/index.scss @@ -0,0 +1,5 @@ +@use "components"; +@use "base"; +@use "fonts"; +@use "utils"; +@use "vars"; diff --git a/src/client/theme-default/styles/utils.css b/src/client/theme-default/styles/utils.scss similarity index 100% rename from src/client/theme-default/styles/utils.css rename to src/client/theme-default/styles/utils.scss diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.scss similarity index 66% rename from src/client/theme-default/styles/vars.css rename to src/client/theme-default/styles/vars.scss index f6d5248c..66bdc2d3 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.scss @@ -1,21 +1,24 @@ -/** - * Colors Base - * - * These are the pure base color presets. Most of the time, you should not be - * using these colors directly in the theme but rather use "Colors Theme" - * instead because those are "Theme (light or dark)" dependant. - * -------------------------------------------------------------------------- */ - :root { - --vp-c-white: #ffffff; + /** + * Colors Base + * + * These are the pure base color presets. Most of the time, you should not be + * using these colors directly in the theme but rather use "Colors Theme" + * instead because those are "Theme (light or dark)" dependant. + * -------------------------------------------------------------------------- */ + + /* White */ + --vp-c-white: #fff; --vp-c-white-soft: #f9f9f9; --vp-c-white-mute: #f1f1f1; + /* Black */ --vp-c-black: #1a1a1a; - --vp-c-black-pure: #000000; + --vp-c-black-pure: #000; --vp-c-black-soft: #242424; --vp-c-black-mute: #2f2f2f; + /* Gray */ --vp-c-gray: #8e8e8e; --vp-c-gray-light-1: #aeaeae; --vp-c-gray-light-2: #c7c7c7; @@ -28,21 +31,25 @@ --vp-c-gray-dark-4: #282828; --vp-c-gray-dark-5: #202020; - --vp-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vp-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vp-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vp-c-divider-dark-2: rgba(84, 84, 84, 0.48); + /* Divider */ + --vp-c-divider-light-1: rgb(60 60 60 / 29%); + --vp-c-divider-light-2: rgb(60 60 60 / 12%); + --vp-c-divider-dark-1: rgb(84 84 84 / 65%); + --vp-c-divider-dark-2: rgb(84 84 84 / 48%); + /* Text light */ --vp-c-text-light-1: var(--vp-c-indigo); - --vp-c-text-light-2: rgba(60, 60, 60, 0.70); - --vp-c-text-light-3: rgba(60, 60, 60, 0.33); - --vp-c-text-light-4: rgba(60, 60, 60, 0.18); + --vp-c-text-light-2: rgb(60 60 60 / 70%); + --vp-c-text-light-3: rgb(60 60 60 / 33%); + --vp-c-text-light-4: rgb(60 60 60 / 18%); - --vp-c-text-dark-1: rgba(255, 255, 255, 0.87); - --vp-c-text-dark-2: rgba(235, 235, 235, 0.60); - --vp-c-text-dark-3: rgba(235, 235, 235, 0.38); - --vp-c-text-dark-4: rgba(235, 235, 235, 0.18); + /* Text dark */ + --vp-c-text-dark-1: rgb(255 255 255 / 87%); + --vp-c-text-dark-2: rgb(235 235 235 / 60%); + --vp-c-text-dark-3: rgb(235 235 235 / 38%); + --vp-c-text-dark-4: rgb(235 235 235 / 18%); + /* Indigo */ --vp-c-indigo: #213547; --vp-c-indigo-soft: #476582; --vp-c-indigo-light: #aac8e4; @@ -50,175 +57,144 @@ --vp-c-indigo-dark: #1d2f3f; --vp-c-indigo-darker: #14212e; + /* Green */ --vp-c-green: #42b883; --vp-c-green-light: #42d392; --vp-c-green-lighter: #35eb9a; --vp-c-green-dark: #33a06f; --vp-c-green-darker: #155f3e; - --vp-c-green-dimm-1: rgba(66, 184, 131, 0.5); - --vp-c-green-dimm-2: rgba(66, 184, 131, 0.25); - --vp-c-green-dimm-3: rgba(66, 184, 131, 0.05); + --vp-c-green-dimm-1: rgb(66 184 131 / 50%); + --vp-c-green-dimm-2: rgb(66 184 131 / 25%); + --vp-c-green-dimm-3: rgb(66 184 131 / 5%); + /* Yellow */ --vp-c-yellow: #ffc517; --vp-c-yellow-light: #fcd253; --vp-c-yellow-lighter: #fcfc7c; --vp-c-yellow-dark: #e0ad15; --vp-c-yellow-darker: #ad850e; - --vp-c-yellow-dimm-1: rgba(255, 197, 23, 0.5); - --vp-c-yellow-dimm-2: rgba(255, 197, 23, 0.25); - --vp-c-yellow-dimm-3: rgba(255, 197, 23, 0.05); + --vp-c-yellow-dimm-1: rgb(255 197 23 / 50%); + --vp-c-yellow-dimm-2: rgb(255 197 23 / 25%); + --vp-c-yellow-dimm-3: rgb(255 197 23 / 5%); + /* Red */ --vp-c-red: #ed3c50; --vp-c-red-light: #f54e82; --vp-c-red-lighter: #fd1d7c; --vp-c-red-dark: #cd2d3f; --vp-c-red-darker: #ab2131; - --vp-c-red-dimm-1: rgba(237, 60, 80, 0.5); - --vp-c-red-dimm-2: rgba(237, 60, 80, 0.25); - --vp-c-red-dimm-3: rgba(237, 60, 80, 0.05); -} + --vp-c-red-dimm-1: rgb(237 60 80 / 50%); + --vp-c-red-dimm-2: rgb(237 60 80 / 25%); + --vp-c-red-dimm-3: rgb(237 60 80 / 5%); -/** - * Colors Theme - * -------------------------------------------------------------------------- */ + /** + * Colors Theme + * -------------------------------------------------------------------------- */ -:root { + /* Background */ --vp-c-bg: var(--vp-c-white); --vp-c-bg-soft: var(--vp-c-white-soft); --vp-c-bg-mute: var(--vp-c-white-mute); --vp-c-bg-alt: var(--vp-c-white-soft); + /* Divider */ --vp-c-divider: var(--vp-c-divider-light-1); --vp-c-divider-light: var(--vp-c-divider-light-2); + /* Divider inverse */ --vp-c-divider-inverse: var(--vp-c-divider-dark-1); --vp-c-divider-inverse-light: var(--vp-c-divider-dark-2); + /* Text */ --vp-c-text-1: var(--vp-c-text-light-1); --vp-c-text-2: var(--vp-c-text-light-2); --vp-c-text-3: var(--vp-c-text-light-3); --vp-c-text-4: var(--vp-c-text-light-4); + /* Text inverse */ --vp-c-text-inverse-1: var(--vp-c-text-dark-1); --vp-c-text-inverse-2: var(--vp-c-text-dark-2); --vp-c-text-inverse-3: var(--vp-c-text-dark-3); --vp-c-text-inverse-4: var(--vp-c-text-dark-4); + /* Text code */ --vp-c-text-code: var(--vp-c-indigo-soft); + /* Brand */ --vp-c-brand: var(--vp-c-green); --vp-c-brand-light: var(--vp-c-green-light); --vp-c-brand-lighter: var(--vp-c-green-lighter); --vp-c-brand-dark: var(--vp-c-green-dark); --vp-c-brand-darker: var(--vp-c-green-darker); + /* Sponsor */ --vp-c-sponsor: #fd1d7c; -} - -.dark { - --vp-c-bg: var(--vp-c-black-soft); - --vp-c-bg-soft: var(--vp-c-black-mute); - --vp-c-bg-mute: var(--vp-c-gray-dark-3); - --vp-c-bg-alt: var(--vp-c-black); - - --vp-c-divider: var(--vp-c-divider-dark-1); - --vp-c-divider-light: var(--vp-c-divider-dark-2); - - --vp-c-divider-inverse: var(--vp-c-divider-light-1); - --vp-c-divider-inverse-light: var(--vp-c-divider-light-2); - - --vp-c-text-1: var(--vp-c-text-dark-1); - --vp-c-text-2: var(--vp-c-text-dark-2); - --vp-c-text-3: var(--vp-c-text-dark-3); - --vp-c-text-4: var(--vp-c-text-dark-4); - - --vp-c-text-inverse-1: var(--vp-c-text-light-1); - --vp-c-text-inverse-2: var(--vp-c-text-light-2); - --vp-c-text-inverse-3: var(--vp-c-text-light-3); - --vp-c-text-inverse-4: var(--vp-c-text-light-4); - - --vp-c-text-code: var(--vp-c-indigo-lighter); -} - -/** - * Typography - * -------------------------------------------------------------------------- */ - -:root { - --vp-font-family-base: 'Inter var experimental', 'Inter var', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - --vp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace; -} -/** - * Shadows - * -------------------------------------------------------------------------- */ - -:root { - --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); - --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07); - --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08); - --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12); - --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16); -} - -/** - * Z-indexes - * -------------------------------------------------------------------------- */ - -:root { + /** + * Typography + * -------------------------------------------------------------------------- */ + --vp-font-family-base: + "Inter var experimental", + "Inter var", + -apple-system, + blinkmacsystemfont, + "Segoe UI", + roboto, + oxygen, + ubuntu, + cantarell, + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; + --vp-font-family-mono: menlo, monaco, consolas, "Courier New", monospace; + + /** + * Shadows + * -------------------------------------------------------------------------- */ + --vp-shadow-1: 0 1px 2px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%); + --vp-shadow-2: 0 3px 12px rgb(0 0 0 / 7%), 0 1px 4px rgb(0 0 0 / 7%); + --vp-shadow-3: 0 12px 32px rgb(0 0 0 / 10%), 0 2px 6px rgb(0 0 0 / 8%); + --vp-shadow-4: 0 14px 44px rgb(0 0 0 / 12%), 0 3px 9px rgb(0 0 0 / 12%); + --vp-shadow-5: 0 18px 56px rgb(0 0 0 / 16%), 0 4px 12px rgb(0 0 0 / 16%); + + /** + * Z-indexes + * -------------------------------------------------------------------------- */ --vp-z-index-local-nav: 10; --vp-z-index-nav: 20; --vp-z-index-backdrop: 30; --vp-z-index-sidebar: 40; --vp-z-index-footer: 50; -} - -/** - * Icons - * -------------------------------------------------------------------------- */ -:root { + /** + * Icons + * -------------------------------------------------------------------------- */ --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E"); --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"); -} - -/** - * Layouts - * -------------------------------------------------------------------------- */ -:root { + /** + * Layouts + * -------------------------------------------------------------------------- */ --vp-layout-max-width: 1440px; -} - -/** - * Component: Code - * -------------------------------------------------------------------------- */ -:root { + /** + * Component: Code + * -------------------------------------------------------------------------- */ --vp-code-line-height: 1.7; --vp-code-font-size: 0.875em; - --vp-code-block-color: var(--vp-c-text-dark-1); --vp-code-block-bg: #292d3e; - - --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5); + --vp-code-line-highlight-color: rgb(0 0 0 / 50%); --vp-code-line-number-color: var(--vp-c-text-dark-3); - - --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05); + --vp-code-copy-code-hover-bg: rgb(255 255 255 / 5%); --vp-code-copy-code-active-text: var(--vp-c-text-dark-2); -} - -.dark { - --vp-code-block-bg: var(--vp-c-bg-alt); -} -/** - * Component: Button - * -------------------------------------------------------------------------- */ + /** + * Component: Button + * -------------------------------------------------------------------------- */ -:root { + /* Button brand */ --vp-button-brand-border: var(--vp-c-brand-light); --vp-button-brand-text: var(--vp-c-text-dark-1); --vp-button-brand-bg: var(--vp-c-brand); @@ -229,6 +205,7 @@ --vp-button-brand-active-text: var(--vp-c-text-dark-1); --vp-button-brand-active-bg: var(--vp-button-brand-bg); + /* Button alt */ --vp-button-alt-border: var(--vp-c-gray-light-3); --vp-button-alt-text: var(--vp-c-text-light-1); --vp-button-alt-bg: var(--vp-c-gray-light-5); @@ -239,6 +216,7 @@ --vp-button-alt-active-text: var(--vp-c-text-light-1); --vp-button-alt-active-bg: var(--vp-c-gray-light-3); + /* Button sponsor */ --vp-button-sponsor-border: var(--vp-c-gray-light-3); --vp-button-sponsor-text: var(--vp-c-text-light-2); --vp-button-sponsor-bg: transparent; @@ -248,113 +226,158 @@ --vp-button-sponsor-active-border: var(--vp-c-sponsor); --vp-button-sponsor-active-text: var(--vp-c-sponsor); --vp-button-sponsor-active-bg: transparent; -} - -.dark { - --vp-button-brand-border: var(--vp-c-brand-light); - --vp-button-brand-text: var(--vp-c-text-dark-1); - --vp-button-brand-bg: var(--vp-c-brand-dark); - --vp-button-brand-hover-border: var(--vp-c-brand-lighter); - --vp-button-brand-hover-text: var(--vp-c-text-dark-1); - --vp-button-brand-hover-bg: var(--vp-c-brand); - --vp-button-brand-active-border: var(--vp-c-brand-lighter); - --vp-button-brand-active-text: var(--vp-c-text-dark-1); - --vp-button-brand-active-bg: var(--vp-button-brand-bg); - - --vp-button-alt-border: var(--vp-c-gray-dark-2); - --vp-button-alt-text: var(--vp-c-text-dark-1); - --vp-button-alt-bg: var(--vp-c-bg-mute); - --vp-button-alt-hover-border: var(--vp-c-gray-dark-2); - --vp-button-alt-hover-text: var(--vp-c-text-dark-1); - --vp-button-alt-hover-bg: var(--vp-c-gray-dark-2); - --vp-button-alt-active-border: var(--vp-c-gray-dark-2); - --vp-button-alt-active-text: var(--vp-c-text-dark-1); - --vp-button-alt-active-bg: var(--vp-button-alt-bg); - - --vp-button-sponsor-border: var(--vp-c-gray-dark-1); - --vp-button-sponsor-text: var(--vp-c-text-dark-2); -} -/** - * Component: Custom Block - * -------------------------------------------------------------------------- */ - -:root { + /** + * Component: Custom Block + * -------------------------------------------------------------------------- */ --vp-custom-block-code-font-size: 13px; + /* Info */ --vp-custom-block-info-border: var(--vp-c-divider-light); --vp-custom-block-info-text: var(--vp-c-text-2); --vp-custom-block-info-bg: var(--vp-c-white-soft); --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4); + /* Tip */ --vp-custom-block-tip-border: var(--vp-c-green-dimm-1); --vp-custom-block-tip-text: var(--vp-c-green-darker); --vp-custom-block-tip-bg: var(--vp-c-green-dimm-3); --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg); + /* Warning */ --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1); --vp-custom-block-warning-text: var(--vp-c-yellow-darker); --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3); --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg); + /* Danger */ --vp-custom-block-danger-border: var(--vp-c-red-dimm-1); --vp-custom-block-danger-text: var(--vp-c-red-darker); --vp-custom-block-danger-bg: var(--vp-c-red-dimm-3); --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg); + /* Details */ --vp-custom-block-details-border: var(--vp-custom-block-info-border); --vp-custom-block-details-text: var(--vp-custom-block-info-text); --vp-custom-block-details-bg: var(--vp-custom-block-info-bg); --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg); -} -.dark { - --vp-custom-block-info-border: var(--vp-c-divider-light); - --vp-custom-block-info-bg: var(--vp-c-black-mute); - --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4); - - --vp-custom-block-tip-border: var(--vp-c-green-dimm-2); - --vp-custom-block-tip-text: var(--vp-c-green-light); - - --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2); - --vp-custom-block-warning-text: var(--vp-c-yellow-light); - - --vp-custom-block-danger-border: var(--vp-c-red-dimm-2); - --vp-custom-block-danger-text: var(--vp-c-red-light); -} - -/** - * Component: Nav - * -------------------------------------------------------------------------- */ - -:root { + /** + * Component: Nav + * -------------------------------------------------------------------------- */ --vp-nav-height: var(--vp-nav-height-mobile); --vp-nav-height-mobile: 56px; --vp-nav-height-desktop: 72px; -} -@media (min-width: 960px) { - :root { + @media (min-width: 960px) { --vp-nav-height: var(--vp-nav-height-desktop); } -} -/** - * Component: Sidebar - * -------------------------------------------------------------------------- */ - -:root { + /** + * Component: Sidebar + * -------------------------------------------------------------------------- */ --vp-sidebar-width: 272px; -} -/** - * Component: Home - * -------------------------------------------------------------------------- */ + /** + * Component: Home + * -------------------------------------------------------------------------- */ -:root { + /* Hero name */ --vp-home-hero-name-color: var(--vp-c-brand); --vp-home-hero-name-background: transparent; + /* Hero image */ --vp-home-hero-image-background-image: none; --vp-home-hero-image-filter: none; } + +.dark { + /** + * Colors Theme + * -------------------------------------------------------------------------- */ + + /* Background */ + --vp-c-bg: var(--vp-c-black-soft); + --vp-c-bg-soft: var(--vp-c-black-mute); + --vp-c-bg-mute: var(--vp-c-gray-dark-3); + --vp-c-bg-alt: var(--vp-c-black); + + /* Divider */ + --vp-c-divider: var(--vp-c-divider-dark-1); + --vp-c-divider-light: var(--vp-c-divider-dark-2); + + /* Divider inverse */ + --vp-c-divider-inverse: var(--vp-c-divider-light-1); + --vp-c-divider-inverse-light: var(--vp-c-divider-light-2); + + /* Text */ + --vp-c-text-1: var(--vp-c-text-dark-1); + --vp-c-text-2: var(--vp-c-text-dark-2); + --vp-c-text-3: var(--vp-c-text-dark-3); + --vp-c-text-4: var(--vp-c-text-dark-4); + + /* Text inverse */ + --vp-c-text-inverse-1: var(--vp-c-text-light-1); + --vp-c-text-inverse-2: var(--vp-c-text-light-2); + --vp-c-text-inverse-3: var(--vp-c-text-light-3); + --vp-c-text-inverse-4: var(--vp-c-text-light-4); + + /* Text code */ + --vp-c-text-code: var(--vp-c-indigo-lighter); + + /** + * Component: Code + * -------------------------------------------------------------------------- */ + --vp-code-block-bg: var(--vp-c-bg-alt); + + /** + * Component: Button + * -------------------------------------------------------------------------- */ + + /* Button brand */ + --vp-button-brand-border: var(--vp-c-brand-light); + --vp-button-brand-text: var(--vp-c-text-dark-1); + --vp-button-brand-bg: var(--vp-c-brand-dark); + --vp-button-brand-hover-border: var(--vp-c-brand-lighter); + --vp-button-brand-hover-text: var(--vp-c-text-dark-1); + --vp-button-brand-hover-bg: var(--vp-c-brand); + --vp-button-brand-active-border: var(--vp-c-brand-lighter); + --vp-button-brand-active-text: var(--vp-c-text-dark-1); + --vp-button-brand-active-bg: var(--vp-button-brand-bg); + + /* Button alt */ + --vp-button-alt-border: var(--vp-c-gray-dark-2); + --vp-button-alt-text: var(--vp-c-text-dark-1); + --vp-button-alt-bg: var(--vp-c-bg-mute); + --vp-button-alt-hover-border: var(--vp-c-gray-dark-2); + --vp-button-alt-hover-text: var(--vp-c-text-dark-1); + --vp-button-alt-hover-bg: var(--vp-c-gray-dark-2); + --vp-button-alt-active-border: var(--vp-c-gray-dark-2); + --vp-button-alt-active-text: var(--vp-c-text-dark-1); + --vp-button-alt-active-bg: var(--vp-button-alt-bg); + + /* Button sponsor */ + --vp-button-sponsor-border: var(--vp-c-gray-dark-1); + --vp-button-sponsor-text: var(--vp-c-text-dark-2); + + /** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + + /* Info */ + --vp-custom-block-info-border: var(--vp-c-divider-light); + --vp-custom-block-info-bg: var(--vp-c-black-mute); + --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4); + + /* Tip */ + --vp-custom-block-tip-border: var(--vp-c-green-dimm-2); + --vp-custom-block-tip-text: var(--vp-c-green-light); + + /* Warning */ + --vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2); + --vp-custom-block-warning-text: var(--vp-c-yellow-light); + + /* Danger */ + --vp-custom-block-danger-border: var(--vp-c-red-dimm-2); + --vp-custom-block-danger-text: var(--vp-c-red-light); +}