From 15b7c241ff8d195d9e007e1dd04ca945633a9cf5 Mon Sep 17 00:00:00 2001 From: venashial Date: Sun, 20 Mar 2022 00:19:51 -0700 Subject: [PATCH] Update style vars + Add examples to docs + Add `Avatar`, `NavRow`, `Pagination`, & `Link` --- package.json | 9 +- pnpm-lock.yaml | 42 +- postcss.config.cjs | 2 +- src/lib/components/Avatar.svelte | 94 ++ src/lib/components/Badge.svelte | 51 + src/lib/components/Button.svelte | 414 ++---- src/lib/components/Link.svelte | 6 +- src/lib/components/NavRow.svelte | 81 + src/lib/components/Pagination.svelte | 2 +- src/lib/styles.postcss | 3 + src/lib/styles/normalize.postcss | 55 + src/lib/styles/themes.postcss | 4 +- src/lib/styles/themes/base.postcss | 17 + src/lib/styles/themes/dark.postcss | 61 + src/lib/styles/themes/light.postcss | 59 +- src/lib/styles/themes/old.postcss | 1307 ----------------- src/lib/styles/themes/oled.postcss | 15 + src/lib/styles/variables/borders.postcss | 15 +- src/lib/styles/variables/typography.postcss | 9 +- src/lib/utils/classCombine.ts | 3 + src/routes/__layout.svelte | 24 +- .../_internal/components/Example.svelte | 35 + .../_internal/components/Sidebar.svelte | 3 +- src/routes/_internal/layout/page.svelte | 52 +- src/routes/_internal/styles/gh-markdown.css | 17 +- .../_internal/styles/prism-one-dark.css | 4 +- src/routes/components/Avatar.md | 14 + src/routes/components/Badge.md | 14 + src/routes/components/Button.md | 14 + src/routes/components/Link.md | 8 + src/routes/components/NavRow.md | 46 + .../{pagination.md => Pagination.md} | 10 +- src/routes/components/button.md | 14 - src/routes/components/link.md | 10 - 34 files changed, 787 insertions(+), 1727 deletions(-) create mode 100644 src/lib/components/Avatar.svelte create mode 100644 src/lib/components/Badge.svelte create mode 100644 src/lib/components/NavRow.svelte create mode 100644 src/lib/styles.postcss create mode 100644 src/lib/styles/normalize.postcss create mode 100644 src/lib/styles/themes/base.postcss create mode 100644 src/lib/styles/themes/dark.postcss delete mode 100644 src/lib/styles/themes/old.postcss create mode 100644 src/lib/styles/themes/oled.postcss create mode 100644 src/lib/utils/classCombine.ts create mode 100644 src/routes/_internal/components/Example.svelte create mode 100644 src/routes/components/Avatar.md create mode 100644 src/routes/components/Badge.md create mode 100644 src/routes/components/Button.md create mode 100644 src/routes/components/Link.md create mode 100644 src/routes/components/NavRow.md rename src/routes/components/{pagination.md => Pagination.md} (50%) delete mode 100644 src/routes/components/button.md delete mode 100644 src/routes/components/link.md diff --git a/package.json b/package.json index d3f0ec21..b0738495 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,8 @@ "postcss-nested": "^5.0.6", "postcss-preset-env": "^7.4.2", "postcss-strip-inline-comments": "^0.1.5", - "prettier": "^2.5.1", - "prettier-plugin-svelte": "^2.5.0", + "prism-svelte": "^0.5.0", + "prismjs": "^1.27.0", "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.10.1", @@ -65,5 +65,8 @@ "bugs": { "url": "https://github.com/modrinth/omorphia/issues" }, - "homepage": "https://omorphia.modrinth.com" + "homepage": "https://omorphia.modrinth.com", + "dependencies": { + "sanitize.css": "^13.0.0" + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 619a84a4..a4c29d03 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,8 +23,9 @@ specifiers: postcss-nested: ^5.0.6 postcss-preset-env: ^7.4.2 postcss-strip-inline-comments: ^0.1.5 - prettier: ^2.5.1 - prettier-plugin-svelte: ^2.5.0 + prism-svelte: ^0.5.0 + prismjs: ^1.27.0 + sanitize.css: ^13.0.0 svelte: ^3.44.0 svelte-check: ^2.2.6 svelte-preprocess: ^4.10.1 @@ -34,13 +35,16 @@ specifiers: typescript: ~4.6.2 unplugin-icons: ^0.13.3 +dependencies: + sanitize.css: 13.0.0 + devDependencies: '@iconify-json/carbon': 1.1.1 '@iconify-json/heroicons-outline': 1.1.1 '@iconify-json/lucide': 1.1.7 '@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4 '@sveltejs/adapter-auto': 1.0.0-next.33 - '@sveltejs/kit': 1.0.0-next.299_svelte@3.46.4 + '@sveltejs/kit': 1.0.0-next.301_svelte@3.46.4 '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98 '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2 autoprefixer: 10.4.2_postcss@8.4.8 @@ -57,8 +61,8 @@ devDependencies: postcss-nested: 5.0.6_postcss@8.4.8 postcss-preset-env: 7.4.2_postcss@8.4.8 postcss-strip-inline-comments: 0.1.5 - prettier: 2.5.1 - prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.4 + prism-svelte: 0.5.0 + prismjs: 1.27.0 svelte: 3.46.4 svelte-check: 2.4.5_33233005e4be8b4492b63cc9de0a2fd4 svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd @@ -360,8 +364,8 @@ packages: esbuild: 0.14.25 dev: true - /@sveltejs/kit/1.0.0-next.299_svelte@3.46.4: - resolution: {integrity: sha512-m8VBccfX3ozgHjjz193pZbfTK02P47bqdhj07cveUEhVLwbujOVWbgblPCrNh0rkTER7z1k5hRZnWrFYaDjQJA==} + /@sveltejs/kit/1.0.0-next.301_svelte@3.46.4: + resolution: {integrity: sha512-F/XP1VEu+fpvgY04JekNxAFupccNMKOyXtbox0LwNJvBulL15/Tzy6tf4g+9t2Jy7mprwI3h0ZC9G/nVujRFnQ==} engines: {node: '>=14.13'} hasBin: true peerDependencies: @@ -3114,26 +3118,14 @@ packages: engines: {node: '>=4'} dev: true - /prettier-plugin-svelte/2.6.0_prettier@2.5.1+svelte@3.46.4: - resolution: {integrity: sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==} - peerDependencies: - prettier: ^1.16.4 || ^2.0.0 - svelte: ^3.2.0 - dependencies: - prettier: 2.5.1 - svelte: 3.46.4 - dev: true - - /prettier/2.5.1: - resolution: {integrity: sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==} - engines: {node: '>=10.13.0'} - hasBin: true - dev: true - /prism-svelte/0.4.7: resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==} dev: true + /prism-svelte/0.5.0: + resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==} + dev: true + /prismjs/1.27.0: resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==} engines: {node: '>=6'} @@ -3287,6 +3279,10 @@ packages: rimraf: 2.7.1 dev: true + /sanitize.css/13.0.0: + resolution: {integrity: sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==} + dev: false + /semver-diff/3.1.1: resolution: {integrity: sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==} engines: {node: '>=8'} diff --git a/postcss.config.cjs b/postcss.config.cjs index 12f4da34..2690b963 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -2,10 +2,10 @@ const config = { plugins: [ require('postcss-import'), require('postcss-strip-inline-comments'), + require('postcss-extend-rule'), require('postcss-nested'), require('postcss-preset-env'), require('autoprefixer'), - require('postcss-extend-rule'), process.env.NODE_ENV === 'development' && require('cssnano')({ preset: 'default', }) diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte new file mode 100644 index 00000000..ba726340 --- /dev/null +++ b/src/lib/components/Avatar.svelte @@ -0,0 +1,94 @@ + + +{#if src} + +{:else} + + + + +{/if} + + diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte new file mode 100644 index 00000000..9f85757f --- /dev/null +++ b/src/lib/components/Badge.svelte @@ -0,0 +1,51 @@ + + +
+ {label} +
+ + diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index f8b5b08a..5f222eba 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -1,323 +1,145 @@ {#if as === 'button'} - {:else if as === 'a'} - - + + {:else if as === 'summary'} - - + + {:else if as === 'input'} - + {/if} diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte index 3387830c..c8f51631 100644 --- a/src/lib/components/Link.svelte +++ b/src/lib/components/Link.svelte @@ -6,6 +6,10 @@ \ No newline at end of file diff --git a/src/lib/components/NavRow.svelte b/src/lib/components/NavRow.svelte new file mode 100644 index 00000000..a6d15c9f --- /dev/null +++ b/src/lib/components/NavRow.svelte @@ -0,0 +1,81 @@ + + + + + diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte index 37b5cbd4..e88ef31e 100644 --- a/src/lib/components/Pagination.svelte +++ b/src/lib/components/Pagination.svelte @@ -1,5 +1,5 @@ + +
+
+ +
+ 
{@html highlighted}
+
+ + diff --git a/src/routes/_internal/components/Sidebar.svelte b/src/routes/_internal/components/Sidebar.svelte index 52ee4378..93e4cc1f 100644 --- a/src/routes/_internal/components/Sidebar.svelte +++ b/src/routes/_internal/components/Sidebar.svelte @@ -1,5 +1,5 @@