Skip to content

Commit

Permalink
theme color updates, tailwind beta 5, starter tweaks (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte authored Dec 5, 2024
1 parent ea33aed commit 311dea1
Show file tree
Hide file tree
Showing 37 changed files with 265 additions and 81 deletions.
5 changes: 5 additions & 0 deletions .changeset/breezy-cougars-begin.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svecodocs/kit": patch
---

fix: theme contrast issues
5 changes: 5 additions & 0 deletions .changeset/chatty-cougars-travel.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svecodocs/kit": minor
---

change: remove `createNavigation` in favor of `defineNavigation`
5 changes: 5 additions & 0 deletions .changeset/heavy-ants-breathe.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svecodocs/kit": minor
---

change: geist mono -> jet brains mono
5 changes: 5 additions & 0 deletions .changeset/heavy-moons-explain.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svecodocs/kit": minor
---

change: use Inter as main font
5 changes: 5 additions & 0 deletions .changeset/polite-plums-float.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@svecodocs/kit": minor
---

update tailwindcss to 4.0.0-beta.5
4 changes: 2 additions & 2 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
"@sveltejs/adapter-cloudflare": "^4.8.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/vite": "4.0.0-beta.4",
"@tailwindcss/vite": "4.0.0-beta.5",
"mdsx": "^0.0.6",
"phosphor-svelte": "^3.0.0",
"svelte": "^5.2.11",
"svelte-check": "^4.0.0",
"svelte-preprocess": "^6.0.3",
"tailwindcss": "4.0.0-beta.4",
"tailwindcss": "4.0.0-beta.5",
"typescript": "^5.0.0",
"velite": "^0.2.1",
"vite": "^5.0.11"
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
@import "@svecodocs/kit/theme-orange.css";
@import "@svecodocs/kit/theme-fuchsia.css";
@import "@svecodocs/kit/globals.css";
6 changes: 3 additions & 3 deletions docs/src/content/getting-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@ The following guide will walk you through the process of getting a Svecodocs pro
Clone the Svecodocs starter template:

```bash
pnpx degit svecosystem/svecodocs/starter
pnpx degit svecosystem/svecodocs/start
```

## Navigation

The starter template comes with a basic navigation structure to get your started. To customize the navigation, adjust the `src/lib/navigation.ts` file.

```ts
import { createNavigation } from "@svecodocs/kit";
import { defineNavigation } from "@svecodocs/kit";

export const navigation = createNavigation({
export const navigation = defineNavigation({
// Customize the navigation here
});
```
Expand Down
4 changes: 2 additions & 2 deletions docs/src/lib/navigation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createNavigation } from "@svecodocs/kit";
import { defineNavigation } from "@svecodocs/kit";
import ChalkboardTeacher from "phosphor-svelte/lib/ChalkboardTeacher";
import RocketLaunch from "phosphor-svelte/lib/RocketLaunch";
import Tag from "phosphor-svelte/lib/Tag";
Expand All @@ -20,7 +20,7 @@ const configuration = allDocs
href: `/docs/${doc.slug}`,
}));

export const navigation = createNavigation({
export const navigation = defineNavigation({
anchors: [
{
title: "Introduction",
Expand Down
1 change: 1 addition & 0 deletions packages/kit/src/lib/components/markdown/pre.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
class="size-7 px-0 py-0"
onclick={() => copier.copyToClipboard()}
data-pre-copy-btn=""
aria-label="Copy code"
>
{#if copier.isCopied}
<Check />
Expand Down
2 changes: 1 addition & 1 deletion packages/kit/src/lib/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export { default as Input } from "./components/ui/input/input.svelte";
export { default as Textarea } from "./components/ui/textarea/textarea.svelte";
export { default as Label } from "./components/ui/label/label.svelte";
export { default as NativeSelect } from "./components/ui/native-select/native-select.svelte";
export { createNavigation, cn, cleanMarkdown } from "./utils.js";
export { cn, cleanMarkdown } from "./utils.js";
export { defineSiteConfig } from "./define-site-config.js";
export { defineNavigation } from "./define-navigation.js";
export { default as Slider } from "./components/ui/slider/slider.svelte";
Expand Down
12 changes: 7 additions & 5 deletions packages/kit/src/lib/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@
--color-brand-border: var(--theme-color-brand-border);
--color-brand-link: var(--theme-color-brand-link);
--color-brand-link-hover: var(--theme-color-brand-link-hover);
--color-brand-code-link: var(--theme-color-brand-code-link);
--color-brand-code-link-hover: var(--theme-color-brand-code-link-hover);

/* Background */
--color-background: var(--theme-color-background);
Expand Down Expand Up @@ -135,7 +137,7 @@
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono";

/* Text */
Expand All @@ -161,7 +163,7 @@
}

#content code:not(pre > code):not(.custom) {
@apply dark:bg-muted bg-primary-hover text-foreground relative rounded-[5px] px-[0.375rem] py-[0.1875rem] font-mono text-[0.9em];
@apply text-foreground relative rounded-[5px] bg-gray-200/60 px-[0.375rem] py-[0.1875rem] font-mono text-[0.9em] dark:bg-gray-100;
}

a:has(code) {
Expand All @@ -170,12 +172,12 @@
}
a > code {
/* Style code inside of links differently */
color: var(--color-brand) !important;
color: var(--color-brand-code-link) !important;
}

a:hover > code {
/* Style code inside of links differently */
color: var(--color-brand-hover) !important;
color: var(--color-brand-code-link-hover) !important;
}

[data-theme*="github-dark"] {
Expand All @@ -188,7 +190,7 @@
}

[data-rehype-pretty-code-figure] code {
@apply grid min-w-0 break-words rounded-none border-0 p-0;
@apply grid min-w-0 break-words rounded-none border-0 p-0 text-sm md:text-base;
counter-reset: line;
box-decoration-break: clone;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/kit/src/lib/styles/shared.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

@import "tailwindcss";
@plugin "tailwindcss-animate";

Expand Down
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-amber.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-blue.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-cyan.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-300);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-300);
--theme-color-brand-link-hover: var(--theme-color-brand-200);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-emerald.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-fuchsia.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-green.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-500);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-indigo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-lime.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-500);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-400);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-400);
--theme-color-brand-link-hover: var(--theme-color-brand-300);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-orange.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,14 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-500);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-500);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-pink.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -26,5 +28,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-purple.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -26,5 +28,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-red.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-rose.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -27,5 +29,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
4 changes: 4 additions & 0 deletions packages/kit/src/lib/styles/theme-sky.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
--theme-color-brand-foreground: var(--theme-color-background);
--theme-color-brand-link: var(--theme-color-brand-600);
--theme-color-brand-link-hover: var(--theme-color-brand-700);
--theme-color-brand-code-link: var(--theme-color-brand-600);
--theme-color-brand-code-link-hover: var(--theme-color-brand-500);

&:where(.dark) {
--theme-color-brand: var(--theme-color-brand-600);
Expand All @@ -26,5 +28,7 @@
--theme-color-brand-foreground: var(--theme-color-foreground);
--theme-color-brand-link: var(--theme-color-brand-500);
--theme-color-brand-link-hover: var(--theme-color-brand-400);
--theme-color-brand-code-link: var(--theme-color-brand-400);
--theme-color-brand-code-link-hover: var(--theme-color-brand-300);
}
}
Loading

0 comments on commit 311dea1

Please sign in to comment.