From 383606dbf9f218281912bd2aaf5128eccc359b7f Mon Sep 17 00:00:00 2001 From: Ross Robino Date: Wed, 30 Aug 2023 15:49:58 -0400 Subject: [PATCH] docs: css theme (#6) --- README.md | 20 +- package-lock.json | 253 ++++++++++++------ package.json | 28 +- prettier.config.js | 6 +- src/app.html | 5 +- src/app.postcss | 49 ++-- src/lib/components/Breakpoint.svelte | 2 +- src/lib/components/ContextMenu.svelte | 30 ++- src/lib/components/CopyButton.svelte | 11 +- src/lib/components/DataTable.svelte | 6 +- src/lib/components/Details.svelte | 4 +- src/lib/components/Editor.svelte | 4 +- src/lib/components/FrettedChord.svelte | 2 +- src/lib/components/FullscreenButton.svelte | 6 +- src/lib/components/Popover.svelte | 15 +- src/lib/components/ShareButton.svelte | 4 +- src/lib/components/Sheet.svelte | 20 +- src/routes/+layout.svelte | 32 ++- src/routes/docs/+layout.svelte | 2 +- src/routes/docs/Breakpoint/+page.svelte | 2 +- src/routes/docs/ContextMenu/+page.svelte | 28 +- src/routes/docs/CopyButton/+page.svelte | 11 +- src/routes/docs/DataTable/+page.svelte | 6 +- src/routes/docs/Details/+page.svelte | 4 +- src/routes/docs/Editor/+page.svelte | 4 +- src/routes/docs/FrettedChord/+page.svelte | 2 +- src/routes/docs/FullscreenButton/+page.svelte | 6 +- src/routes/docs/Popover/+page.svelte | 15 +- src/routes/docs/ShareButton/+page.svelte | 4 +- src/routes/docs/Sheet/+page.svelte | 16 +- src/site/components/SkipLink.svelte | 2 +- src/site/md/README.md | 20 +- tailwind.config.js | 47 ++-- 33 files changed, 410 insertions(+), 256 deletions(-) diff --git a/README.md b/README.md index 758e3b5..03f6800 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ npm install -D drab The library provides inline documentation for each component, allowing you to conveniently access the documentation by hovering over the component in your text editor after importing it. Additionally, every prop is documented using JSDoc and TypeScript. By hovering over a prop, you can retrieve its type and description. -These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin) for base styles along with a few custom utility classes you can find [here](https://github.com/rossrobino/drab/blob/main/src/app.postcss). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/). +These docs use the [TailwindCSS Typography plugin](https://tailwindcss.com/docs/typography-plugin). Styles on this site are based on [shadcn/ui](https://ui.shadcn.com/). ## Other UI Libraries @@ -50,11 +50,11 @@ Here's a SvelteKit example using CSS imported in a layout. By using a layout, th ```css /* src/app.css */ -.btn { - color: white; - background-color: black; +.button { border-radius: 5px; + background-color: black; padding: 5px; + color: white; } ``` @@ -73,7 +73,7 @@ Here's a SvelteKit example using CSS imported in a layout. By using a layout, th import { FullscreenButton } from "drab"; - + ``` ### Global modifier @@ -86,14 +86,14 @@ Alternatively, the [`:global()` modifier](https://svelte.dev/docs/svelte-compone import { FullscreenButton } from "drab"; - + ``` @@ -108,7 +108,7 @@ Since this is an unstyled library, simple components like a badge that can be ea ### Local Development -Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. The site is deployed to Vercel using `@sveltejs/adapter-vercel`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy. +Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy. #### Make changes diff --git a/package-lock.json b/package-lock.json index da31443..54f1c22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,38 +1,40 @@ { "name": "drab", - "version": "3.0.3", + "version": "3.0.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "drab", - "version": "3.0.3", + "version": "3.0.4", "license": "MIT", "dependencies": { "svelte": "^4.2.0" }, "devDependencies": { "@sveltejs/adapter-vercel": "^3.0.3", - "@sveltejs/kit": "^1.22.6", - "@sveltejs/package": "^2.2.1", + "@sveltejs/kit": "^1.24.0", + "@sveltejs/package": "^2.2.2", "@tailwindcss/typography": "^0.5.9", - "@types/node": "^20.5.3", - "@typescript-eslint/eslint-plugin": "^6.4.1", - "@typescript-eslint/parser": "^6.4.1", + "@types/node": "^20.5.7", + "@typescript-eslint/eslint-plugin": "^6.5.0", + "@typescript-eslint/parser": "^6.5.0", "autoprefixer": "^10.4.15", - "eslint": "^8.47.0", + "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-svelte": "^2.33.0", - "marked": "^7.0.4", - "postcss": "^8.4.28", - "prettier": "^3.0.2", + "layercomp": "^0.0.2", + "marked": "^7.0.5", + "postcss": "^8.4.29", + "prettier": "^3.0.3", + "prettier-plugin-css-order": "^2.0.0", "prettier-plugin-svelte": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.3", "publint": "^0.2.2", - "svelte-check": "^3.5.0", + "svelte-check": "^3.5.1", "tailwindcss": "^3.3.3", "tslib": "^2.6.2", - "typescript": "^5.1.6", + "typescript": "^5.2.2", "vite": "^4.4.9" } }, @@ -469,9 +471,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.47.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz", - "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==", + "version": "8.48.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz", + "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -646,9 +648,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "1.22.6", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.6.tgz", - "integrity": "sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==", + "version": "1.24.0", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.24.0.tgz", + "integrity": "sha512-r7Gj0/VcdAIRL1yE1cJ5rurWJ5drrR7BzRv+P+NAathtvnMCi0u4FhezO7T4bj7DJdQ3TNsax3yQcrVWxh60fg==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -663,6 +665,7 @@ "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^2.0.2", + "tiny-glob": "^0.2.9", "undici": "~5.23.0" }, "bin": { @@ -677,9 +680,9 @@ } }, "node_modules/@sveltejs/package": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.2.1.tgz", - "integrity": "sha512-7Yv4SdoOZFPYWK1/A8LtZ7+WLlZny/4q5sWbU7dnkEqbIt5j4V3TzrquT9nAE6sUy6Dghxf35dXoPIdvRH7w7g==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.2.2.tgz", + "integrity": "sha512-rP3sVv6cAntcdcG4r4KspLU6nZYYUrHJBAX3Arrw0KJFdgxtlsi2iDwN0Jwr/vIkgjcU0ZPWM8kkT5kpZDlWAw==", "dev": true, "dependencies": { "chokidar": "^3.5.3", @@ -770,9 +773,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.5.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.3.tgz", - "integrity": "sha512-ITI7rbWczR8a/S6qjAW7DMqxqFMjjTo61qZVWJ1ubPvbIQsL5D/TvwjYEalM8Kthpe3hTzOGrF2TGbAu2uyqeA==", + "version": "20.5.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.7.tgz", + "integrity": "sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==", "dev": true }, "node_modules/@types/pug": { @@ -782,22 +785,22 @@ "dev": true }, "node_modules/@types/semver": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", - "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz", + "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==", "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.4.1.tgz", - "integrity": "sha512-3F5PtBzUW0dYlq77Lcqo13fv+58KDwUib3BddilE8ajPJT+faGgxmI9Sw+I8ZS22BYwoir9ZhNXcLi+S+I2bkw==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.5.0.tgz", + "integrity": "sha512-2pktILyjvMaScU6iK3925uvGU87E+N9rh372uGZgiMYwafaw9SXq86U04XPq3UH6tzRvNgBsub6x2DacHc33lw==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "6.4.1", - "@typescript-eslint/type-utils": "6.4.1", - "@typescript-eslint/utils": "6.4.1", - "@typescript-eslint/visitor-keys": "6.4.1", + "@typescript-eslint/scope-manager": "6.5.0", + "@typescript-eslint/type-utils": "6.5.0", + "@typescript-eslint/utils": "6.5.0", + "@typescript-eslint/visitor-keys": "6.5.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -823,15 +826,15 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.1.tgz", - "integrity": "sha512-610G6KHymg9V7EqOaNBMtD1GgpAmGROsmfHJPXNLCU9bfIuLrkdOygltK784F6Crboyd5tBFayPB7Sf0McrQwg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.5.0.tgz", + "integrity": "sha512-LMAVtR5GN8nY0G0BadkG0XIe4AcNMeyEy3DyhKGAh9k4pLSMBO7rF29JvDBpZGCmp5Pgz5RLHP6eCpSYZJQDuQ==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.4.1", - "@typescript-eslint/types": "6.4.1", - "@typescript-eslint/typescript-estree": "6.4.1", - "@typescript-eslint/visitor-keys": "6.4.1", + "@typescript-eslint/scope-manager": "6.5.0", + "@typescript-eslint/types": "6.5.0", + "@typescript-eslint/typescript-estree": "6.5.0", + "@typescript-eslint/visitor-keys": "6.5.0", "debug": "^4.3.4" }, "engines": { @@ -851,13 +854,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.1.tgz", - "integrity": "sha512-p/OavqOQfm4/Hdrr7kvacOSFjwQ2rrDVJRPxt/o0TOWdFnjJptnjnZ+sYDR7fi4OimvIuKp+2LCkc+rt9fIW+A==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.5.0.tgz", + "integrity": "sha512-A8hZ7OlxURricpycp5kdPTH3XnjG85UpJS6Fn4VzeoH4T388gQJ/PGP4ole5NfKt4WDVhmLaQ/dBLNDC4Xl/Kw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.4.1", - "@typescript-eslint/visitor-keys": "6.4.1" + "@typescript-eslint/types": "6.5.0", + "@typescript-eslint/visitor-keys": "6.5.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -868,13 +871,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.4.1.tgz", - "integrity": "sha512-7ON8M8NXh73SGZ5XvIqWHjgX2f+vvaOarNliGhjrJnv1vdjG0LVIz+ToYfPirOoBi56jxAKLfsLm40+RvxVVXA==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.5.0.tgz", + "integrity": "sha512-f7OcZOkRivtujIBQ4yrJNIuwyCQO1OjocVqntl9dgSIZAdKqicj3xFDqDOzHDlGCZX990LqhLQXWRnQvsapq8A==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "6.4.1", - "@typescript-eslint/utils": "6.4.1", + "@typescript-eslint/typescript-estree": "6.5.0", + "@typescript-eslint/utils": "6.5.0", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, @@ -895,9 +898,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.1.tgz", - "integrity": "sha512-zAAopbNuYu++ijY1GV2ylCsQsi3B8QvfPHVqhGdDcbx/NK5lkqMnCGU53amAjccSpk+LfeONxwzUhDzArSfZJg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.5.0.tgz", + "integrity": "sha512-eqLLOEF5/lU8jW3Bw+8auf4lZSbbljHR2saKnYqON12G/WsJrGeeDHWuQePoEf9ro22+JkbPfWQwKEC5WwLQ3w==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -908,13 +911,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.1.tgz", - "integrity": "sha512-xF6Y7SatVE/OyV93h1xGgfOkHr2iXuo8ip0gbfzaKeGGuKiAnzS+HtVhSPx8Www243bwlW8IF7X0/B62SzFftg==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.5.0.tgz", + "integrity": "sha512-q0rGwSe9e5Kk/XzliB9h2LBc9tmXX25G0833r7kffbl5437FPWb2tbpIV9wAATebC/018pGa9fwPDuvGN+LxWQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.4.1", - "@typescript-eslint/visitor-keys": "6.4.1", + "@typescript-eslint/types": "6.5.0", + "@typescript-eslint/visitor-keys": "6.5.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -935,17 +938,17 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.4.1.tgz", - "integrity": "sha512-F/6r2RieNeorU0zhqZNv89s9bDZSovv3bZQpUNOmmQK1L80/cV4KEu95YUJWi75u5PhboFoKUJBnZ4FQcoqhDw==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.5.0.tgz", + "integrity": "sha512-9nqtjkNykFzeVtt9Pj6lyR9WEdd8npPhhIPM992FWVkZuS6tmxHfGVnlUcjpUP2hv8r4w35nT33mlxd+Be1ACQ==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.4.1", - "@typescript-eslint/types": "6.4.1", - "@typescript-eslint/typescript-estree": "6.4.1", + "@typescript-eslint/scope-manager": "6.5.0", + "@typescript-eslint/types": "6.5.0", + "@typescript-eslint/typescript-estree": "6.5.0", "semver": "^7.5.4" }, "engines": { @@ -960,12 +963,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.1.tgz", - "integrity": "sha512-y/TyRJsbZPkJIZQXrHfdnxVnxyKegnpEvnRGNam7s3TRR2ykGefEWOhaef00/UUN3IZxizS7BTO3svd3lCOJRQ==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.5.0.tgz", + "integrity": "sha512-yCB/2wkbv3hPsh02ZS8dFQnij9VVQXJMN/gbQsaaY+zxALkZnxa/wagvLEFsAWMPv7d7lxQmNsIzGU1w/T/WyA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.4.1", + "@typescript-eslint/types": "6.5.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -1477,6 +1480,18 @@ "node": ">= 8" } }, + "node_modules/css-declaration-sorter": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.0.3.tgz", + "integrity": "sha512-/PHObPdiAXf0H3LOZCyXgBLt5fiS5XGCml/Ylpkmr7ADgq94GffvdGxJEmsSLDo0XGzItJY79dusRka0e4UVLw==", + "dev": true, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, "node_modules/css-tree": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", @@ -1690,15 +1705,15 @@ } }, "node_modules/eslint": { - "version": "8.47.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz", - "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==", + "version": "8.48.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz", + "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", "@eslint/eslintrc": "^2.1.2", - "@eslint/js": "^8.47.0", + "@eslint/js": "8.48.0", "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", @@ -2151,6 +2166,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globalyzer": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz", + "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==", + "dev": true + }, "node_modules/globby": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", @@ -2171,6 +2192,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globrex": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", + "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", + "dev": true + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -2449,6 +2476,15 @@ "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==", "dev": true }, + "node_modules/layercomp": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/layercomp/-/layercomp-0.0.2.tgz", + "integrity": "sha512-BNZkv/Zu1uFIa2AjgaoTa/BYye14vC4gjzH+jK0WVXifJFTOfedg4/Z+AxyP9sFQOxEkk3GuKNP6sosQqnJq2w==", + "dev": true, + "peerDependencies": { + "tailwindcss": "^3.3.3" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -2572,9 +2608,9 @@ } }, "node_modules/marked": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/marked/-/marked-7.0.4.tgz", - "integrity": "sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==", + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-7.0.5.tgz", + "integrity": "sha512-lwNAFTfXgqpt/XvK17a/8wY9/q6fcSPZT1aP6QW0u74VwaJF/Z9KbRcX23sWE4tODM+AolJNcUtErTkgOeFP/Q==", "dev": true, "bin": { "marked": "bin/marked.js" @@ -3121,9 +3157,9 @@ } }, "node_modules/postcss": { - "version": "8.4.28", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", - "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", + "version": "8.4.29", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz", + "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==", "dev": true, "funding": [ { @@ -3184,6 +3220,18 @@ "postcss": "^8.4.21" } }, + "node_modules/postcss-less": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-6.0.0.tgz", + "integrity": "sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "postcss": "^8.3.5" + } + }, "node_modules/postcss-load-config": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", @@ -3316,9 +3364,9 @@ } }, "node_modules/prettier": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz", - "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { "prettier": "bin/prettier.cjs" @@ -3330,6 +3378,23 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-css-order": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-css-order/-/prettier-plugin-css-order-2.0.0.tgz", + "integrity": "sha512-BCstZZ78G6FH/Ms1hl5ZLnSMso3ModM+SEZY8QrJzgyxjuCjSrS2bveeLq9wJMn20h9tAb6+C2FZPh5qdZ2qsw==", + "dev": true, + "dependencies": { + "css-declaration-sorter": "^7.0.0", + "postcss-less": "^6.0.0", + "postcss-scss": "^4.0.3" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "prettier": "3.x" + } + }, "node_modules/prettier-plugin-svelte": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.0.3.tgz", @@ -3900,9 +3965,9 @@ } }, "node_modules/svelte-check": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.5.0.tgz", - "integrity": "sha512-KHujbn4k17xKYLmtCwv0sKKM7uiHTYcQvXnvrCcNU6a7hcszh99zFTIoiu/Sp/ewAw5aJmillJ1Cs8gKLmcX4A==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.5.1.tgz", + "integrity": "sha512-+Zb4iHxAhdUtcUg/WJPRjlS1RJalIsWAe9Mz6G1zyznSs7dDkT7VUBdXc3q7Iwg49O/VrZgyJRvOJkjuBfKjFA==", "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.17", @@ -4212,6 +4277,16 @@ "node": ">=0.8" } }, + "node_modules/tiny-glob": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", + "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==", + "dev": true, + "dependencies": { + "globalyzer": "0.1.0", + "globrex": "^0.1.2" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4288,9 +4363,9 @@ } }, "node_modules/typescript": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", - "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index db7bf33..4963b2e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "drab", - "version": "3.0.3", + "version": "3.0.4", "description": "An Unstyled Svelte Component Library", "keywords": [ "components", @@ -35,7 +35,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --check . && eslint .", - "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss", + "format": "prettier --write . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss --plugin=prettier-plugin-css-order", "pub": "npm publish --access public", "doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js" }, @@ -53,26 +53,28 @@ }, "devDependencies": { "@sveltejs/adapter-vercel": "^3.0.3", - "@sveltejs/kit": "^1.22.6", - "@sveltejs/package": "^2.2.1", + "@sveltejs/kit": "^1.24.0", + "@sveltejs/package": "^2.2.2", "@tailwindcss/typography": "^0.5.9", - "@types/node": "^20.5.3", - "@typescript-eslint/eslint-plugin": "^6.4.1", - "@typescript-eslint/parser": "^6.4.1", + "@types/node": "^20.5.7", + "@typescript-eslint/eslint-plugin": "^6.5.0", + "@typescript-eslint/parser": "^6.5.0", "autoprefixer": "^10.4.15", - "eslint": "^8.47.0", + "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-svelte": "^2.33.0", - "marked": "^7.0.4", - "postcss": "^8.4.28", - "prettier": "^3.0.2", + "layercomp": "^0.0.2", + "marked": "^7.0.5", + "postcss": "^8.4.29", + "prettier": "^3.0.3", + "prettier-plugin-css-order": "^2.0.0", "prettier-plugin-svelte": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.3", "publint": "^0.2.2", - "svelte-check": "^3.5.0", + "svelte-check": "^3.5.1", "tailwindcss": "^3.3.3", "tslib": "^2.6.2", - "typescript": "^5.1.6", + "typescript": "^5.2.2", "vite": "^4.4.9" }, "svelte": "./dist/index.js", diff --git a/prettier.config.js b/prettier.config.js index 3f929d3..b7bb120 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -3,7 +3,11 @@ export default { useTabs: true, printWidth: 80, htmlWhitespaceSensitivity: "ignore", - plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + plugins: [ + "prettier-plugin-svelte", + "prettier-plugin-tailwindcss", + "prettier-plugin-css-order", + ], overrides: [ { files: "*.svelte", diff --git a/src/app.html b/src/app.html index 6939c51..f704273 100644 --- a/src/app.html +++ b/src/app.html @@ -8,7 +8,10 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss index ffc79a9..be72ae0 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,30 +1,39 @@ +@import url("layercomp") layer(components); + @tailwind base; @tailwind components; @tailwind utilities; /** uses the TailwindCSS Typography plugin for base styles */ -@layer base { - a, - button, - input, - textarea, - summary { - @apply outline-offset-4; - } -} -@layer components { - .btn { - @apply rounded bg-neutral-800 px-3 py-2 text-sm capitalize leading-4 tracking-wide text-neutral-50 shadow transition hover:bg-neutral-900 active:scale-95 active:shadow-none disabled:cursor-not-allowed disabled:bg-neutral-400 disabled:text-neutral-50 disabled:shadow disabled:hover:bg-neutral-400; - } - .btn-s { - @apply bg-transparent text-neutral-900 shadow-none hover:bg-neutral-100; - } - .input { - @apply flex h-8 max-w-xs rounded border px-3 py-0 text-sm leading-4 file:border-0 file:bg-transparent file:py-2 file:pl-0 file:pr-2 file:text-sm file:font-semibold file:leading-4 disabled:cursor-not-allowed disabled:opacity-50; +@layer base { + /* https://ui-colorgen.vercel.app/ */ + :root { + --background: 0 0% 98%; /* 50 */ + --foreground: 0 0% 25.1%; /* 700 */ + --primary: 0 0% 9%; /* 900 */ + --primary-foreground: 0 0% 96.1%; /* 100 */ + --secondary: 0 0% 89.8%; /* 200 */ + --secondary-foreground: 0 0% 9%; /* 900 */ + --muted: 0 0% 96.1%; /* 100 */ + --muted-foreground: 0 0% 32.2%; /* 600 */ + --destructive: 345.3 82.7% 40.8%; /* 700 */ + --destructive-foreground: 0 0% 96.1%; /* 100 */ + --border: 0 0% 83.1%; /* 300 */ + --radius: 0.4rem; } - .label { - @apply text-sm font-semibold; + .dark { + --background: 0 0% 3.9%; /* 950 */ + --foreground: 0 0% 83.1%; /* 300 */ + --primary: 0 0% 96.1%; /* 100 */ + --primary-foreground: 0 0% 9%; /* 900 */ + --secondary: 0 0% 14.9%; /* 800 */ + --secondary-foreground: 0 0% 96.1%; /* 100 */ + --muted: 0 0% 9%; /* 900 */ + --muted-foreground: 0 0% 63.9%; /* 400 */ + --destructive: 343.4 79.7% 34.7%; /* 800 */ + --destructive-foreground: 0 0% 96.1%; /* 100 */ + --border: 0 0% 25.1%; /* 700 */ } } diff --git a/src/lib/components/Breakpoint.svelte b/src/lib/components/Breakpoint.svelte index ea9d211..5b57f49 100644 --- a/src/lib/components/Breakpoint.svelte +++ b/src/lib/components/Breakpoint.svelte @@ -21,7 +21,7 @@ With SvelteKit, this component can be wrapped in an `{#if dev}` block that check ``` --> diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte index f6ac134..5e11ffb 100644 --- a/src/lib/components/ContextMenu.svelte +++ b/src/lib/components/ContextMenu.svelte @@ -28,25 +28,29 @@ Displays when the `target` element is right clicked, or long pressed on mobile. let target: HTMLButtonElement; -
+
Parent right click
- -
+ +
Context Menu
- - - + + +
- - -
+ + +
Target
- - - + + +
``` @@ -168,9 +172,9 @@ Displays when the `target` element is right clicked, or long pressed on mobile. ``` @@ -108,7 +108,7 @@ Since this is an unstyled library, simple components like a badge that can be ea ### Local Development -Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. The site is deployed to Vercel using `@sveltejs/adapter-vercel`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy. +Contribute to the project, or use **drab** as a template for another component library. This library is built with SvelteKit, TypeScript, and npm. The package contents are located in `src/lib`, the site is contained within `src/routes` and `src/site`. If you are using this project as a template, be sure to [update the adapter](https://kit.svelte.dev/docs/adapters) based on how you deploy. #### Make changes diff --git a/tailwind.config.js b/tailwind.config.js index 2c40508..d3471ac 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,23 +1,40 @@ +import typography from "@tailwindcss/typography"; + /** @type {import('tailwindcss').Config} */ export default { - content: ["./src/**/*.{html,js,svelte,ts,svx}"], + content: ["./src/**/*.{html,js,svelte,ts}"], theme: { - borderColor: { - DEFAULT: "#d4d4d4", - }, extend: { - fontFamily: { - antique: [ - "Superclarendon", - "Bookman Old Style", - "URW Bookman", - "URW Bookman L", - "Georgia Pro", - "Georgia", - "serif", - ], + borderColor: { + DEFAULT: "hsl(var(--border))", + }, + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + }, + borderRadius: { + lg: "calc(var(--radius) + 4px)", + md: "calc(var(--radius) + 2px)", + DEFAULT: "var(--radius)", + sm: "calc(var(--radius) - 2px)", }, }, }, - plugins: [require("@tailwindcss/typography")], + plugins: [typography], };