Skip to content

Commit

Permalink
docs: update theme and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@rossrobino
rossrobino committed Aug 31, 2023
1 parent ec2f771 commit 132eb94
Show file tree
Hide file tree
Showing 15 changed files with 31 additions and 32 deletions.
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "drab",
"version": "3.0.4",
"version": "3.0.5",
"description": "An Unstyled Svelte Component Library",
"keywords": [
"components",
Expand Down Expand Up @@ -63,7 +63,7 @@
"eslint": "^8.48.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-svelte": "^2.33.0",
"layercomp": "^0.0.2",
"layercomp": "^0.0.6",
"marked": "^7.0.5",
"postcss": "^8.4.29",
"prettier": "^3.0.3",
Expand Down
2 changes: 1 addition & 1 deletion src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</head>
<body
data-sveltekit-preload-data="hover"
class="dark:dark prose-h1:text-balance prose-a:link prose prose-neutral max-w-none bg-background font-antique text-foreground dark:prose-invert selection:bg-primary/10 prose-h1:capitalize prose-h2:capitalize prose-h3:capitalize prose-pre:text-sm"
class="dark:dark prose-h1:text-balance prose-a:link prose prose-neutral max-w-none bg-background font-antique text-foreground dark:prose-invert selection:bg-primary/10 prose-h1:capitalize prose-h2:capitalize prose-h3:capitalize hover:prose-a:decoration-dotted prose-pre:text-sm"
>
<div>%sveltekit.body%</div>
</body>
Expand Down
2 changes: 2 additions & 0 deletions src/app.postcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
:root {
--background: 0 0% 98%; /* 50 */
--foreground: 0 0% 25.1%; /* 700 */
--card: 0 0% 100%; /* white */
--primary: 0 0% 9%; /* 900 */
--primary-foreground: 0 0% 96.1%; /* 100 */
--secondary: 0 0% 89.8%; /* 200 */
Expand All @@ -25,6 +26,7 @@
.dark {
--background: 0 0% 3.9%; /* 950 */
--foreground: 0 0% 83.1%; /* 300 */
--card: 0 0% 0%; /* black */
--primary: 0 0% 96.1%; /* 100 */
--primary-foreground: 0 0% 9%; /* 900 */
--secondary: 0 0% 14.9%; /* 800 */
Expand Down
8 changes: 3 additions & 5 deletions src/lib/components/ContextMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,10 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
let target: HTMLButtonElement;
</script>
<div class="mb-8 flex justify-center rounded border p-12">
<div class="mb-8 flex justify-center rounded border bg-muted p-12">
<div>Parent right click</div>
<ContextMenu class="z-10">
<div
class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow"
>
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Context Menu</div>
<button role="menuitem" class="button button-secondary">Button</button>
<button role="menuitem" class="button button-secondary">Button</button>
Expand All @@ -46,7 +44,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
Target Right Click
</button>
<ContextMenu {target} class="z-10">
<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Target</div>
<button role="menuitem" class="button button-secondary">Button</button>
<button role="menuitem" class="button button-secondary">Button</button>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/FullscreenButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Make the document or a `target` element fullscreen.
@props
- `class`
- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` -- disabled
- `confirmMessage` - message to display in the `confirm` popup, defaults to empty string `""` - disabled
- `id`
- `target` - element to make fullscreen (defaults to `document.documentElement` upon mount)
- `title`
Expand Down Expand Up @@ -53,7 +53,7 @@ Make the document or a `target` element fullscreen.
/** element to make fullscreen (defaults to `document.documentElement` upon mount) */
export let target: HTMLElement | null = null;
/** message to display in the `confirm` popup, defaults to empty string `""` -- disabled */
/** message to display in the `confirm` popup, defaults to empty string `""` - disabled */
export let confirmMessage = "";
/** set to `false` on the client if supported */
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Popover.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Displays a popover in relation to the `target`.
</button>
<Popover {target} bind:display class="p-2">
<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Bottom</div>
<button class="button button-secondary" on:click={close}>Close</button>
<button class="button button-secondary" on:click={close}>Close</button>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Sheet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Creates a sheet element based on the `position` provided. `maxSize` is set to wi
<Sheet
bind:display
class="z-40 backdrop-blur"
classSheet="p-4 shadow bg-background"
classSheet="p-6 shadow bg-card"
position="r"
>
<div class="mb-4 flex items-center justify-between">
Expand Down
10 changes: 5 additions & 5 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
<div class="gap-8 lg:flex">
<header class="sticky top-0 z-10">
<nav class="sticky top-0 hidden lg:block">
<ul class="my-0 h-screen list-none overflow-y-auto p-4">
<li>
<ul class="my-0 h-screen list-none overflow-y-auto p-6">
<li class="pl-0">
<h2 class="mb-6 mt-0">
<a class="font-extrabold lowercase !no-underline" href="/">
drab
Expand All @@ -42,7 +42,7 @@
</ul>
</nav>
<nav
class="mb-6 flex items-center gap-4 bg-background/75 p-4 backdrop-blur-lg lg:hidden lg:w-[65ch]"
class="mb-6 flex items-center gap-4 bg-background/75 p-6 backdrop-blur-lg lg:hidden lg:w-[65ch]"
>
<button
class="button button-ghost button-icon"
Expand All @@ -56,12 +56,12 @@
</h2>
</nav>
</header>
<main id="main" class="m-4 mb-16 max-w-[65ch] lg:w-[65ch]">
<main id="main" class="m-6 mb-16 max-w-[65ch] lg:w-[65ch]">
<slot />
<Sheet
bind:display={displaySheet}
class="z-40 backdrop-blur"
classSheet="p-4 shadow bg-background overflow-y-auto"
classSheet="p-6 shadow bg-card overflow-y-auto"
>
<div class="flex items-center justify-between gap-4">
<h2 class="my-0">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/docs/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</p>

<div
class="flex justify-center overflow-x-auto rounded-md border border-dashed p-8"
class="flex justify-center overflow-x-auto rounded-md border border-dashed bg-card p-8"
>
<div class="w-full">
<slot />
Expand Down
8 changes: 3 additions & 5 deletions src/routes/docs/ContextMenu/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@
let target: HTMLButtonElement;
</script>

<div class="mb-8 flex justify-center rounded border p-12">
<div class="mb-8 flex justify-center rounded border bg-muted p-12">
<div>Parent right click</div>
<ContextMenu class="z-10">
<div
class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow"
>
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Context Menu</div>
<button role="menuitem" class="button button-secondary">Button</button>
<button role="menuitem" class="button button-secondary">Button</button>
Expand All @@ -22,7 +20,7 @@
Target Right Click
</button>
<ContextMenu {target} class="z-10">
<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Target</div>
<button role="menuitem" class="button button-secondary">Button</button>
<button role="menuitem" class="button button-secondary">Button</button>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/docs/Popover/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</button>

<Popover {target} bind:display class="p-2">
<div class="flex w-48 flex-col gap-2 rounded border bg-background p-2 shadow">
<div class="flex w-48 flex-col gap-2 rounded border bg-card p-2 shadow">
<div class="font-bold">Bottom</div>
<button class="button button-secondary" on:click={close}>Close</button>
<button class="button button-secondary" on:click={close}>Close</button>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/docs/Sheet/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<Sheet
bind:display
class="z-40 backdrop-blur"
classSheet="p-4 shadow bg-background"
classSheet="p-6 shadow bg-card"
position="r"
>
<div class="mb-4 flex items-center justify-between">
Expand Down
2 changes: 1 addition & 1 deletion src/site/components/NavItems.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</script>

{#each components as component}
<li>
<li class="pl-0">
<a on:click={linkClick} class="mb-4 leading-4" href="/docs/{component}">
{component}
</a>
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: "hsl(var(--card))",
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
Expand Down

1 comment on commit 132eb94

@vercel
Copy link

@vercel vercel bot commented on 132eb94 Aug 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

drab – ./

drab-rossrobino.vercel.app
drab-git-main-rossrobino.vercel.app
drab.robino.dev
components.robino.dev

Please sign in to comment.