mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: Migrate to Tailwind CSS v4
This commit is contained in:
Fuma Nama
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'fumadocs-ui': major
|
||||
---
|
||||
|
||||
Migrate to Tailwind CSS v4
|
||||
@@ -2,7 +2,6 @@ import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
|
||||
import type { ReactNode } from 'react';
|
||||
import { MessageCircle } from 'lucide-react';
|
||||
import { baseOptions, linkItems } from '@/app/layout.config';
|
||||
import 'fumadocs-twoslash/twoslash.css';
|
||||
import { source } from '@/lib/source';
|
||||
import { Trigger } from '@/components/ai/search-ai';
|
||||
import { cn } from '@/lib/cn';
|
||||
@@ -24,8 +23,8 @@ const docsOptions: DocsLayoutProps = {
|
||||
<div
|
||||
className="rounded-md border bg-gradient-to-t from-fd-background/80 p-1 shadow-md [&_svg]:size-5"
|
||||
style={{
|
||||
color: `hsl(var(--${meta.file.dirname}-color))`,
|
||||
backgroundColor: `hsl(var(--${meta.file.dirname}-color)/.3)`,
|
||||
color: `var(--${meta.file.dirname}-color)`,
|
||||
backgroundColor: `color-mix(in oklab, var(--${meta.file.dirname}-color) 40%, transparent)`,
|
||||
}}
|
||||
>
|
||||
{node.icon}
|
||||
|
||||
+60
-29
@@ -1,23 +1,54 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
@import 'fumadocs-ui/css/neutral.css';
|
||||
@import 'fumadocs-ui/css/preset.css';
|
||||
@import 'fumadocs-twoslash/twoslash.css';
|
||||
|
||||
@source '../node_modules/fumadocs-ui/dist/**/*.js';
|
||||
@source '../node_modules/fumadocs-openapi/dist/**/*.js';
|
||||
@plugin 'tailwindcss-animate';
|
||||
|
||||
@theme {
|
||||
@keyframes stroke {
|
||||
from {
|
||||
stroke-dasharray: 1000;
|
||||
}
|
||||
to {
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 2000;
|
||||
}
|
||||
}
|
||||
|
||||
--animate-stroke: stroke 5s linear infinite;
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
|
||||
--color-gradient-radial: radial-gradient(circle, var(--tw-gradient-stops));
|
||||
--color-repeat-gradient-to-r: repeating-linear-gradient(
|
||||
to right,
|
||||
var(--tw-gradient-stops)
|
||||
);
|
||||
--color-repeat-gradient-to-br: repeating-linear-gradient(
|
||||
to bottom right,
|
||||
var(--tw-gradient-stops)
|
||||
);
|
||||
}
|
||||
|
||||
.ui {
|
||||
--primary: var(--ui-color);
|
||||
--color-fd-primary: var(--ui-color);
|
||||
}
|
||||
|
||||
.headless {
|
||||
--primary: var(--headless-color);
|
||||
--color-fd-primary: var(--headless-color);
|
||||
}
|
||||
|
||||
.mdx {
|
||||
--primary: var(--mdx-color);
|
||||
--color-fd-primary: var(--mdx-color);
|
||||
}
|
||||
|
||||
:root {
|
||||
--headless-color: 250 80% 54%;
|
||||
--mdx-color: 0 0% 9%;
|
||||
--ui-color: 220deg 91% 54%;
|
||||
--headless-color: hsl(250, 80%, 54%);
|
||||
--mdx-color: hsl(0, 0%, 9%);
|
||||
--ui-color: hsl(220, 91%, 54%);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -25,32 +56,32 @@ body {
|
||||
}
|
||||
|
||||
.dark {
|
||||
--headless-color: 250 100% 80%;
|
||||
--mdx-color: 0 0% 100%;
|
||||
--ui-color: 217deg 92% 76%;
|
||||
--headless-color: hsl(250 100% 80%);
|
||||
--mdx-color: hsl(0 0% 100%);
|
||||
--ui-color: hsl(217 92% 76%);
|
||||
}
|
||||
|
||||
.uwu {
|
||||
--background: 240 80% 94% !important;
|
||||
--popover: 240 80% 94% !important;
|
||||
--primary: 230 90% 72% !important;
|
||||
--border: 230 30% 87% !important;
|
||||
--accent: 250 80% 90% !important;
|
||||
--secondary: 230 40% 94% !important;
|
||||
--muted: 230 80% 92% !important;
|
||||
--card: 230 90% 94% !important;
|
||||
--color-fd-background: hsl(240 80% 94%) !important;
|
||||
--color-fd-popover: hsl(240 80% 94%) !important;
|
||||
--color-fd-primary: hsl(230 90% 72%) !important;
|
||||
--color-fd-border: hsl(230 30% 87%) !important;
|
||||
--color-fd-accent: hsl(250 80% 90%) !important;
|
||||
--color-fd-secondary: hsl(230 40% 94%) !important;
|
||||
--color-fd-muted: hsl(230 80% 92%) !important;
|
||||
--color-fd-card: hsl(230 90% 94%) !important;
|
||||
}
|
||||
|
||||
.uwu.dark {
|
||||
--background: 240 40% 20% !important;
|
||||
--popover: 240 20% 20% !important;
|
||||
--primary: 250 70% 94% !important;
|
||||
--border: 230 30% 30% !important;
|
||||
--muted: 230 30% 36.3% !important;
|
||||
--secondary: 250 30% 36.3% !important;
|
||||
--accent: 250 20% 38.3% !important;
|
||||
--muted-foreground: 230 80% 84% !important;
|
||||
--card: 230 40% 26.3% !important;
|
||||
--color-fd-background: hsl(240 40% 20%) !important;
|
||||
--color-fd-primary: hsl(250 70% 94%) !important;
|
||||
--color-fd-popover: hsl(240 20% 20%) !important;
|
||||
--color-fd-border: hsl(230 30% 30%) !important;
|
||||
--color-fd-muted: hsl(230 30% 36.3%) !important;
|
||||
--color-fd-secondary: hsl(250 30% 36.3%) !important;
|
||||
--color-fd-accent: hsl(250 20% 38.3%) !important;
|
||||
--color-fd-muted-foreground: hsl(230 80% 84%) !important;
|
||||
--color-fd-card: hsl(230 40% 26.3%) !important;
|
||||
}
|
||||
|
||||
@keyframes circuit_1 {
|
||||
|
||||
@@ -23,9 +23,7 @@ export function useMode(): string | undefined {
|
||||
return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined;
|
||||
}
|
||||
|
||||
export function FumadocsIcon(
|
||||
props: React.SVGProps<SVGSVGElement>,
|
||||
): React.ReactElement {
|
||||
export function FumadocsIcon(props: React.SVGProps<SVGSVGElement>) {
|
||||
const id = useId();
|
||||
return (
|
||||
<svg
|
||||
@@ -42,7 +40,7 @@ export function FumadocsIcon(
|
||||
dx="0"
|
||||
dy="0"
|
||||
stdDeviation="1"
|
||||
floodColor="hsl(var(--primary))"
|
||||
floodColor="var(--color-fd-primary)"
|
||||
floodOpacity="1"
|
||||
/>
|
||||
</filter>
|
||||
@@ -50,8 +48,8 @@ export function FumadocsIcon(
|
||||
id={`${id}-iconGradient`}
|
||||
gradientTransform="rotate(45)"
|
||||
>
|
||||
<stop offset="45%" stopColor="hsl(var(--background))" />
|
||||
<stop offset="100%" stopColor="hsl(var(--primary))" />
|
||||
<stop offset="45%" stopColor="var(--color-fd-background)" />
|
||||
<stop offset="100%" stopColor="var(--color-fd-primary)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
@@ -33,22 +33,22 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
You can use the Tailwind CSS utilities without importing it.
|
||||
|
||||
```mdx
|
||||
<div className="steps">
|
||||
<div className="step" />
|
||||
<div className="fd-steps">
|
||||
<div className="fd-step" />
|
||||
</div>
|
||||
```
|
||||
|
||||
It supports adding step styles to only headings with arbitrary variants.
|
||||
|
||||
```mdx
|
||||
<div className='steps [&_h3]:step'>
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### Hello World
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
<div className='steps [&_h3]:step'>
|
||||
<div className='fd-steps [&_h3]:fd-step'>
|
||||
|
||||
### Hello World
|
||||
|
||||
|
||||
+12
-12
@@ -14,11 +14,11 @@
|
||||
"dependencies": {
|
||||
"@inkeep/ai-api": "^0.8.0",
|
||||
"@oramacloud/client": "^2.1.4",
|
||||
"@radix-ui/react-dialog": "^1.1.4",
|
||||
"@radix-ui/react-popover": "^1.1.4",
|
||||
"@radix-ui/react-dialog": "^1.1.5",
|
||||
"@radix-ui/react-popover": "^1.1.5",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-tooltip": "^1.1.6",
|
||||
"@shikijs/rehype": "^2.0.3",
|
||||
"@radix-ui/react-tooltip": "^1.1.7",
|
||||
"@shikijs/rehype": "^2.1.0",
|
||||
"@theguild/remark-mermaid": "^0.2.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"fumadocs-core": "workspace:*",
|
||||
@@ -32,7 +32,7 @@
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"katex": "^0.16.21",
|
||||
"lucide-react": "^0.473.0",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"oxc-transform": "^0.47.1",
|
||||
"phenomenon": "^1.6.0",
|
||||
"react": "^19.0.0",
|
||||
@@ -45,27 +45,27 @@
|
||||
"remark-rehype": "^11.1.1",
|
||||
"remark-stringify": "^11.0.0",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
"shiki": "^2.0.3",
|
||||
"shiki": "^2.1.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fumadocs/cli": "workspace:*",
|
||||
"@next/bundle-analyzer": "15.1.5",
|
||||
"@next/env": "15.1.5",
|
||||
"@next/eslint-plugin-next": "15.1.5",
|
||||
"@next/bundle-analyzer": "15.1.6",
|
||||
"@next/env": "15.1.6",
|
||||
"@next/eslint-plugin-next": "15.1.6",
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fast-glob": "^3.3.3",
|
||||
"gray-matter": "^4.0.3",
|
||||
"next-validate-link": "^1.4.1",
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"ts-morph": "^25.0.0",
|
||||
"tsconfig": "workspace:*",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
// @ts-check
|
||||
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
|
||||
import animate from 'tailwindcss-animate';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./content/**/*.{mdx,tsx}',
|
||||
'./node_modules/fumadocs-ui/dist/**/*.js',
|
||||
'./node_modules/fumadocs-openapi/dist/**/*.js',
|
||||
],
|
||||
presets: [
|
||||
createPreset({
|
||||
addGlobalColors: true,
|
||||
cssPrefix: '',
|
||||
}),
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['var(--font-geist-sans)'],
|
||||
mono: ['var(--font-geist-mono)'],
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
|
||||
'repeat-gradient-to-r':
|
||||
'repeating-linear-gradient(to right, var(--tw-gradient-stops))',
|
||||
'repeat-gradient-to-br':
|
||||
'repeating-linear-gradient(to bottom right, var(--tw-gradient-stops))',
|
||||
},
|
||||
keyframes: {
|
||||
stroke: {
|
||||
from: {
|
||||
'stroke-dasharray': '1000',
|
||||
},
|
||||
to: {
|
||||
'stroke-dasharray': '1000',
|
||||
'stroke-dashoffset': '2000',
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
stroke: 'stroke 5s linear infinite',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [animate],
|
||||
};
|
||||
@@ -11,7 +11,7 @@
|
||||
"@fumadocs/content-collections": "workspace:*",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"next": "^15.1.5",
|
||||
"next": "^15.1.6",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"fumadocs-core": "workspace:*",
|
||||
"fumadocs-mdx": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"fumadocs-core": "workspace:*",
|
||||
"fumadocs-mdx": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
"fumadocs-mdx": "workspace:*",
|
||||
"fumadocs-openapi": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"postcss": "^8.5.1",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0",
|
||||
"shiki": "^2.0.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"shiki": "^2.1.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"fast-glob": "^3.3.3",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"react": "19.0.0",
|
||||
"react-dom": "19.0.0"
|
||||
},
|
||||
|
||||
+2
-2
@@ -30,8 +30,8 @@
|
||||
"tsup": "8.3.5",
|
||||
"turbo": "2.3.3",
|
||||
"typescript": "^5.7.3",
|
||||
"typescript-eslint": "^8.20.0",
|
||||
"vitest": "^3.0.2"
|
||||
"typescript-eslint": "^8.21.0",
|
||||
"vitest": "^3.0.3"
|
||||
},
|
||||
"packageManager": "[email protected]",
|
||||
"engines": {
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@clack/prompts": "^0.9.1",
|
||||
"commander": "^13.0.0",
|
||||
"commander": "^13.1.0",
|
||||
"execa": "^9.5.2",
|
||||
"package-manager-detector": "^0.2.8",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -43,7 +43,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cross-spawn": "^6.0.6",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fast-glob": "^3.3.3",
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
"devDependencies": {
|
||||
"@content-collections/core": "^0.8.0",
|
||||
"@content-collections/mdx": "^0.2.0",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"tsconfig": "workspace:*",
|
||||
|
||||
@@ -86,18 +86,18 @@
|
||||
"dependencies": {
|
||||
"@formatjs/intl-localematcher": "^0.5.10",
|
||||
"@orama/orama": "^2.1.1",
|
||||
"@shikijs/rehype": "^2.0.3",
|
||||
"@shikijs/transformers": "^2.0.3",
|
||||
"@shikijs/rehype": "^2.1.0",
|
||||
"@shikijs/transformers": "^2.1.0",
|
||||
"github-slugger": "^2.0.0",
|
||||
"hast-util-to-estree": "^3.1.1",
|
||||
"hast-util-to-jsx-runtime": "^2.3.2",
|
||||
"image-size": "^1.2.0",
|
||||
"negotiator": "^1.0.0",
|
||||
"react-remove-scroll": "^2.6.2",
|
||||
"react-remove-scroll": "^2.6.3",
|
||||
"remark": "^15.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"scroll-into-view-if-needed": "^3.1.0",
|
||||
"shiki": "^2.0.3",
|
||||
"shiki": "^2.1.0",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -109,14 +109,14 @@
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/negotiator": "^0.6.3",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"algoliasearch": "4.24.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"mdast-util-mdx-jsx": "^3.2.0",
|
||||
"mdast-util-mdxjs-esm": "^2.0.1",
|
||||
"next": "^15.1.5",
|
||||
"next": "^15.1.6",
|
||||
"remark-mdx": "^3.1.0",
|
||||
"remark-rehype": "^11.1.1",
|
||||
"tsconfig": "workspace:*",
|
||||
|
||||
@@ -9,15 +9,15 @@
|
||||
"@content-collections/mdx": "^0.2.0",
|
||||
"@content-collections/next": "^0.2.4",
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"postcss": "^8.5.1",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cross-spawn": "^6.0.6",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fast-glob": "^3.3.3",
|
||||
"tsconfig": "workspace:*"
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
"@types/estree": "^1.0.6",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"remark": "^15.0.0",
|
||||
"tsconfig": "workspace:*",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import js from '@eslint/js';
|
||||
import ts from 'typescript-eslint';
|
||||
import tailwind from 'eslint-plugin-tailwindcss';
|
||||
import reactPlugin from 'eslint-plugin-react';
|
||||
import hooksPlugin from 'eslint-plugin-react-hooks';
|
||||
|
||||
@@ -12,7 +11,6 @@ export default [
|
||||
...ts.configs.recommended,
|
||||
reactPlugin.configs.flat.recommended,
|
||||
reactPlugin.configs.flat['jsx-runtime'],
|
||||
...tailwind.configs['flat/recommended'],
|
||||
{
|
||||
plugins: {
|
||||
'react-hooks': hooksPlugin,
|
||||
|
||||
@@ -38,12 +38,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mdx": "^2.0.13",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fast-glob": "^3.3.3",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"tsconfig": "workspace:*",
|
||||
"unified": "^11.0.5",
|
||||
"vfile": "^6.0.3"
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"mdast-util-mdx-jsx": "^3.2.0",
|
||||
"next": "^15.1.5",
|
||||
"next": "^15.1.6",
|
||||
"tsconfig": "workspace:*",
|
||||
"unified": "^11.0.5",
|
||||
"vfile": "^6.0.3",
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fumari/json-schema-to-typescript": "^1.1.2",
|
||||
"@radix-ui/react-select": "^2.1.4",
|
||||
"@radix-ui/react-select": "^2.1.5",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@scalar/openapi-parser": "0.10.4",
|
||||
"ajv-draft-04": "^1.0.0",
|
||||
@@ -54,18 +54,18 @@
|
||||
"react-hook-form": "^7.54.2",
|
||||
"remark": "^15.0.1",
|
||||
"remark-rehype": "^11.1.1",
|
||||
"shiki": "^2.0.3",
|
||||
"shiki": "^2.1.0",
|
||||
"xml-js": "^1.6.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/openapi-sampler": "^1.0.3",
|
||||
"@types/react": "^19.0.7",
|
||||
"bunchee": "^6.3.2",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"lucide-react": "^0.473.0",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"openapi-types": "^12.1.3",
|
||||
"tsconfig": "workspace:*"
|
||||
},
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
"types:check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-popover": "^1.1.4",
|
||||
"@shikijs/twoslash": "^2.0.3",
|
||||
"@radix-ui/react-popover": "^1.1.5",
|
||||
"@shikijs/twoslash": "^2.1.0",
|
||||
"mdast-util-from-markdown": "^2.0.2",
|
||||
"mdast-util-gfm": "^3.0.0",
|
||||
"mdast-util-to-hast": "^13.2.0",
|
||||
@@ -46,14 +46,14 @@
|
||||
"devDependencies": {
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fumadocs-ui": "workspace:*",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-lightningcss": "^1.0.1",
|
||||
"shiki": "^2.0.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"shiki": "^2.1.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"tsconfig": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -40,14 +40,14 @@
|
||||
"mdast-util-from-markdown": "^2.0.2",
|
||||
"mdast-util-gfm": "^3.0.0",
|
||||
"mdast-util-to-hast": "^13.2.0",
|
||||
"shiki": "^2.0.3",
|
||||
"shiki": "^2.1.0",
|
||||
"ts-morph": "^25.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/estree": "^1.0.6",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/mdast": "^4.0.3",
|
||||
"@types/node": "22.10.7",
|
||||
"@types/node": "22.10.9",
|
||||
"@types/react": "19.0.7",
|
||||
"@types/react-dom": "19.0.3",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
@theme {
|
||||
--animate-fd-fade-in: fd-fade-in 300ms ease;
|
||||
|
||||
--animate-fd-fade-out: fd-fade-out 300ms ease;
|
||||
|
||||
--animate-fd-dialog-in: fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
|
||||
--animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
|
||||
--animate-fd-popover-in: fd-popover-in 150ms ease;
|
||||
|
||||
--animate-fd-popover-out: fd-popover-out 150ms ease;
|
||||
|
||||
--animate-fd-collapsible-down: fd-collapsible-down 150ms ease-out;
|
||||
|
||||
--animate-fd-collapsible-up: fd-collapsible-up 150ms ease-out;
|
||||
|
||||
--animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
|
||||
|
||||
--animate-fd-accordion-up: fd-accordion-up 200ms ease-out;
|
||||
|
||||
--animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
|
||||
|
||||
--animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;
|
||||
|
||||
--animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
|
||||
|
||||
--animate-fd-enterFromRight: fd-enterFromRight 250ms ease;
|
||||
|
||||
--animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
|
||||
|
||||
--animate-fd-exitToRight: fd-exitToRight 250ms ease;
|
||||
|
||||
@keyframes fd-collapsible-down {
|
||||
from {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-collapsible-up {
|
||||
from {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-accordion-up {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-dialog-in {
|
||||
from {
|
||||
transform: scale(0.95) translate(-50%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1) translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-dialog-out {
|
||||
from {
|
||||
transform: scale(1) translate(-50%, 0);
|
||||
}
|
||||
to {
|
||||
transform: scale(0.95) translateY(-50%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-popover-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.98) translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-popover-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-enterFromRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(200px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-enterFromLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-exitToRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(200px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-exitToLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-nav-menu-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
height: 0px;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
height: var(--radix-navigation-menu-viewport-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fd-nav-menu-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
height: var(--radix-navigation-menu-viewport-height);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@theme {
|
||||
--color-fd-background: hsl(0, 0%, 98%);
|
||||
--color-fd-foreground: hsl(0, 0%, 3.9%);
|
||||
--color-fd-muted: hsl(0, 0%, 96.1%);
|
||||
--color-fd-muted-foreground: hsl(0, 0%, 45.1%);
|
||||
--color-fd-popover: hsl(0, 0%, 100%);
|
||||
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
|
||||
--color-fd-card: hsl(0, 0%, 99.7%);
|
||||
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
|
||||
--color-fd-border: hsl(0, 0%, 89.8%);
|
||||
--color-fd-primary: hsl(0, 0%, 9%);
|
||||
--color-fd-primary-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-secondary: hsl(0, 0%, 96.1%);
|
||||
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-accent: hsl(0, 0%, 94.1%);
|
||||
--color-fd-accent-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-ring: hsl(0, 0%, 63.9%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-background: hsl(0, 0%, 2%);
|
||||
--color-fd-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-muted: hsl(0, 0%, 8%);
|
||||
--color-fd-muted-foreground: hsl(0, 0%, 60%);
|
||||
--color-fd-popover: hsl(0, 0%, 4%);
|
||||
--color-fd-card: hsl(0, 0%, 4%);
|
||||
--color-fd-border: hsl(0, 0%, 14%);
|
||||
--color-fd-primary: hsl(0, 0%, 98%);
|
||||
--color-fd-primary-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-secondary: hsl(0, 0%, 12.9%);
|
||||
--color-fd-secondary-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-accent: hsl(0, 0%, 15%);
|
||||
--color-fd-accent-foreground: hsl(0, 0%, 100%);
|
||||
--color-fd-ring: hsl(0, 0%, 14.9%);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@theme {
|
||||
--color-fd-popover: hsl(220, 22%, 92%);
|
||||
--color-fd-popover-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-secondary-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-border: hsl(223, 16%, 83%);
|
||||
--color-fd-primary: hsl(266, 85%, 58%);
|
||||
--color-fd-primary-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-muted: hsl(220, 22%, 92%);
|
||||
--color-fd-card: hsl(220, 22%, 92%);
|
||||
--color-fd-accent: hsl(223, 16%, 83%);
|
||||
--color-fd-accent-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-card-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-muted-foreground: hsl(233, 10%, 47%);
|
||||
--color-fd-foreground: hsl(234, 16%, 35%);
|
||||
--color-fd-secondary: hsl(220, 22%, 92%);
|
||||
--color-fd-background: hsl(220, 23%, 95%);
|
||||
--color-fd-ring: hsl(267, 84%, 81%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-background: hsl(240, 21%, 15%);
|
||||
--color-fd-foreground: hsl(226, 64%, 88%);
|
||||
--color-fd-ring: hsl(267, 84%, 81%);
|
||||
--color-fd-primary: hsl(267, 84%, 81%);
|
||||
--color-fd-popover: hsl(240, 23%, 9%);
|
||||
--color-fd-card: hsl(240, 21%, 12%);
|
||||
--color-fd-muted: hsl(240, 21%, 12%);
|
||||
--color-fd-border: hsl(237, 16%, 23%);
|
||||
--color-fd-accent: hsl(237, 16%, 23%);
|
||||
--color-fd-secondary: hsl(240, 21%, 12%);
|
||||
--color-fd-primary-foreground: hsl(240, 23%, 9%);
|
||||
--color-fd-card-foreground: hsl(226, 64%, 88%);
|
||||
--color-fd-secondary-foreground: hsl(226, 64%, 88%);
|
||||
--color-fd-popover-foreground: hsl(226, 64%, 88%);
|
||||
--color-fd-accent-foreground: hsl(226, 64%, 88%);
|
||||
--color-fd-muted-foreground: hsl(228, 24%, 72%);
|
||||
}
|
||||
|
||||
#nd-sidebar {
|
||||
--color-fd-secondary: hsl(223, 16%, 83%);
|
||||
--color-fd-muted: hsl(223, 16%, 83%);
|
||||
}
|
||||
|
||||
.dark #nd-sidebar {
|
||||
--color-fd-secondary: hsl(237, 16%, 23%);
|
||||
--color-fd-muted: hsl(237, 16%, 23%);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@theme {
|
||||
--color-fd-background: hsl(250, 20%, 92%);
|
||||
--color-fd-primary: hsl(340, 40%, 48%);
|
||||
--color-fd-border: hsl(240, 40%, 90%);
|
||||
--color-fd-accent: hsl(250, 30%, 90%);
|
||||
--color-fd-accent-foreground: hsl(250, 20%, 20%);
|
||||
--color-fd-muted: hsl(240, 30%, 94%);
|
||||
--color-fd-muted-foreground: hsl(240, 10%, 50%);
|
||||
--color-fd-foreground: hsl(220, 20%, 30%);
|
||||
--color-fd-secondary: hsl(250, 40%, 94%);
|
||||
--color-fd-secondary-foreground: hsl(240, 40%, 10%);
|
||||
--color-fd-card: hsl(250, 20%, 92%);
|
||||
--color-fd-card-foreground: hsl(250, 20%, 20%);
|
||||
--color-fd-popover-foreground: hsl(250, 40%, 20%);
|
||||
--color-fd-popover: hsl(250, 40%, 96%);
|
||||
--color-fd-primary-foreground: hsl(240, 80%, 20%);
|
||||
--color-fd-ring: hsl(340, 40%, 48%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-ring: hsl(340, 100%, 90%);
|
||||
--color-fd-primary-foreground: hsl(240, 40%, 4%);
|
||||
--color-fd-popover: hsl(240, 20%, 5%);
|
||||
--color-fd-popover-foreground: hsl(250, 20%, 90%);
|
||||
--color-fd-primary: hsl(340, 100%, 90%);
|
||||
--color-fd-border: hsl(220, 15%, 15%);
|
||||
--color-fd-background: hsl(220, 15%, 6%);
|
||||
--color-fd-foreground: hsl(220, 15%, 87%);
|
||||
--color-fd-muted: hsl(220, 20%, 15%);
|
||||
--color-fd-muted-foreground: hsl(220, 15%, 60%);
|
||||
--color-fd-accent: hsl(250, 20%, 15%);
|
||||
--color-fd-secondary: hsl(240, 20%, 15%);
|
||||
--color-fd-card-foreground: hsl(240, 15%, 87%);
|
||||
--color-fd-card: hsl(240, 20%, 5%);
|
||||
--color-fd-secondary-foreground: hsl(250, 20%, 90%);
|
||||
--color-fd-accent-foreground: hsl(340, 5%, 90%);
|
||||
}
|
||||
|
||||
#nd-sidebar {
|
||||
background-color: hsl(250 20% 90%);
|
||||
}
|
||||
|
||||
.dark #nd-sidebar {
|
||||
background-color: hsl(240 20% 5%);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@theme {
|
||||
--color-fd-background: hsl(0, 0%, 96%);
|
||||
--color-fd-foreground: hsl(0, 0%, 3.9%);
|
||||
--color-fd-muted: hsl(0, 0%, 96.1%);
|
||||
--color-fd-muted-foreground: hsl(0, 0%, 45.1%);
|
||||
--color-fd-popover: hsl(0, 0%, 98%);
|
||||
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
|
||||
--color-fd-card: hsl(0, 0%, 94.7%);
|
||||
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
|
||||
--color-fd-border: hsl(0, 0%, 89.8%);
|
||||
--color-fd-primary: hsl(0, 0%, 9%);
|
||||
--color-fd-primary-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-secondary: hsl(0, 0%, 93.1%);
|
||||
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-accent: hsl(0, 0%, 90.1%);
|
||||
--color-fd-accent-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-ring: hsl(0, 0%, 63.9%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-background: hsl(0, 0%, 8.04%);
|
||||
--color-fd-foreground: hsl(0, 0%, 92%);
|
||||
--color-fd-muted: hsl(0, 0%, 12.9%);
|
||||
--color-fd-muted-foreground: hsl(0, 0%, 60.9%);
|
||||
--color-fd-popover: hsl(0, 0%, 9.8%);
|
||||
--color-fd-popover-foreground: hsl(0, 0%, 88%);
|
||||
--color-fd-card: hsl(0, 0%, 9.8%);
|
||||
--color-fd-card-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-border: hsl(0, 0%, 14%);
|
||||
--color-fd-primary: hsl(0, 0%, 98%);
|
||||
--color-fd-primary-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-secondary: hsl(0, 0%, 12.9%);
|
||||
--color-fd-secondary-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-accent: hsl(0, 0%, 16.9%);
|
||||
--color-fd-accent-foreground: hsl(0, 0%, 90%);
|
||||
--color-fd-ring: hsl(0, 0%, 14.9%);
|
||||
}
|
||||
|
||||
.dark #nd-sidebar {
|
||||
--color-fd-muted: hsl(0, 0%, 16%);
|
||||
--color-fd-secondary: hsl(0, 0%, 18%);
|
||||
--color-fd-muted-foreground: hsl(0, 0%, 72%);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@theme {
|
||||
--fd-background: hsl(0, 0%, 98%);
|
||||
--fd-foreground: hsl(0, 0%, 3.9%);
|
||||
--fd-muted: hsl(220, 90%, 96.1%);
|
||||
--fd-muted-foreground: hsl(0, 0%, 45.1%);
|
||||
--fd-popover: hsl(0, 0%, 98%);
|
||||
--fd-popover-foreground: hsl(0, 0%, 15.1%);
|
||||
--fd-card: hsl(220, 50%, 98%);
|
||||
--fd-card-foreground: hsl(0, 0%, 3.9%);
|
||||
--fd-border: hsl(220, 50%, 89.8%);
|
||||
--fd-primary: hsl(210, 80%, 20.2%);
|
||||
--fd-primary-foreground: hsl(0, 0%, 98%);
|
||||
--fd-secondary: hsl(220, 90%, 96.1%);
|
||||
--fd-secondary-foreground: hsl(0, 0%, 9%);
|
||||
--fd-accent: hsl(220, 50%, 94.1%);
|
||||
--fd-accent-foreground: hsl(0, 0%, 9%);
|
||||
--fd-ring: hsl(220, 100%, 63.9%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--fd-background: hsl(220, 60%, 6%);
|
||||
--fd-foreground: hsl(220, 60%, 94.5%);
|
||||
--fd-muted: hsl(220, 50%, 10%);
|
||||
--fd-muted-foreground: hsl(220, 30%, 65%);
|
||||
--fd-popover: hsl(220, 50%, 10%);
|
||||
--fd-card: hsl(220, 50%, 10%);
|
||||
--fd-border: hsl(220, 50%, 20%);
|
||||
--fd-primary: hsl(205, 100%, 85%);
|
||||
--fd-primary-foreground: hsl(0, 0%, 9%);
|
||||
--fd-secondary: hsl(220, 50%, 20%);
|
||||
--fd-secondary-foreground: hsl(220, 80%, 90%);
|
||||
--fd-accent: hsl(220, 40%, 20%);
|
||||
--fd-accent-foreground: hsl(220, 80%, 90%);
|
||||
--fd-ring: hsl(205, 100%, 85%);
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background-image: linear-gradient(
|
||||
rgba(5, 105, 255, 0.15),
|
||||
transparent 20rem,
|
||||
transparent
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@import './shiki.css';
|
||||
@import './animations.css';
|
||||
|
||||
@plugin '../dist/theme/docs-ui.js';
|
||||
@plugin '../dist/theme/typography/index.js';
|
||||
|
||||
@theme {
|
||||
--spacing-fd-layout-top: calc(var(--fd-banner-height) + var(--fd-nav-height));
|
||||
--spacing-fd-container: 1400px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-fd-border, currentColor);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-fd-background);
|
||||
color: var(--color-fd-foreground);
|
||||
}
|
||||
|
||||
[data-rmiz-modal-overlay='visible'] {
|
||||
background-color: var(--color-fd-background);
|
||||
}
|
||||
}
|
||||
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
padding-inline: 1rem;
|
||||
|
||||
@apply 2xl:max-w-[1400px];
|
||||
}
|
||||
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
@@ -0,0 +1,37 @@
|
||||
@theme {
|
||||
--color-fd-background: hsl(256, 100%, 96%);
|
||||
--color-fd-primary: hsl(270, 100%, 52%);
|
||||
--color-fd-border: hsl(270, 40%, 80%);
|
||||
--color-fd-accent: hsl(270, 60%, 86%);
|
||||
--color-fd-accent-foreground: hsl(270, 100%, 20%);
|
||||
--color-fd-muted: hsl(256, 60%, 94%);
|
||||
--color-fd-muted-foreground: hsl(256, 50%, 50%);
|
||||
--color-fd-foreground: hsl(256, 60%, 26%);
|
||||
--color-fd-secondary: hsl(270, 60%, 90%);
|
||||
--color-fd-secondary-foreground: hsl(256, 60%, 10%);
|
||||
--color-fd-card: hsl(256, 60%, 92%);
|
||||
--color-fd-card-foreground: hsl(256, 100%, 20%);
|
||||
--color-fd-popover-foreground: hsl(256, 100%, 20%);
|
||||
--color-fd-popover: hsl(256, 60%, 96%);
|
||||
--color-fd-primary-foreground: hsl(270, 100%, 20%);
|
||||
--color-fd-ring: hsl(270, 100%, 52%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-background: hsl(256, 60%, 6%);
|
||||
--color-fd-primary: hsl(270, 100%, 86%);
|
||||
--color-fd-border: hsl(270, 100%, 20%);
|
||||
--color-fd-accent: hsl(256, 60%, 26%);
|
||||
--color-fd-accent-foreground: hsl(270, 100%, 86%);
|
||||
--color-fd-muted: hsl(256, 60%, 10%);
|
||||
--color-fd-foreground: hsl(256, 60%, 90%);
|
||||
--color-fd-muted-foreground: hsl(256, 50%, 75%);
|
||||
--color-fd-secondary: hsl(270, 100%, 20%);
|
||||
--color-fd-secondary-foreground: hsl(256, 60%, 90%);
|
||||
--color-fd-card: hsl(256, 60%, 10%);
|
||||
--color-fd-card-foreground: hsl(256, 60%, 90%);
|
||||
--color-fd-popover-foreground: hsl(256, 60%, 90%);
|
||||
--color-fd-popover: hsl(256, 60%, 6%);
|
||||
--color-fd-primary-foreground: hsl(256, 60%, 6%);
|
||||
--color-fd-ring: hsl(270, 100%, 86%);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.shiki code span {
|
||||
color: var(--shiki-light);
|
||||
}
|
||||
|
||||
.dark .shiki code span {
|
||||
color: var(--shiki-dark);
|
||||
}
|
||||
|
||||
.fd-codeblock code {
|
||||
display: grid;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.shiki code .diff.remove {
|
||||
background-color: var(--fd-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.shiki code .diff::before {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.shiki code .diff.remove::before {
|
||||
content: '-';
|
||||
color: var(--fd-diff-remove-symbol-color);
|
||||
}
|
||||
|
||||
.shiki code .diff.add {
|
||||
background-color: var(--fd-diff-add-color);
|
||||
}
|
||||
|
||||
.shiki code .diff.add::before {
|
||||
content: '+';
|
||||
color: var(--fd-diff-add-symbol-color);
|
||||
}
|
||||
|
||||
.shiki code .diff {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shiki .highlighted {
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--color-fd-primary) 10%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.shiki .highlighted-word {
|
||||
padding: 1px 2px;
|
||||
margin: -1px -3px;
|
||||
border: 1px solid
|
||||
color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--color-fd-primary) 10%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
@import './neutral.css';
|
||||
@import './preset.css';
|
||||
|
||||
body {
|
||||
@apply flex flex-col min-h-screen;
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
@theme {
|
||||
--color-fd-muted: hsl(0, 0%, 96.1%);
|
||||
--color-fd-popover: hsl(0, 0%, 100%);
|
||||
--color-fd-popover-foreground: hsl(0, 0%, 15.1%);
|
||||
--color-fd-card-foreground: hsl(0, 0%, 3.9%);
|
||||
--color-fd-border: hsl(0, 0%, 89.8%);
|
||||
--color-fd-primary-foreground: hsl(0, 0%, 98%);
|
||||
--color-fd-secondary-foreground: hsl(0, 0%, 9%);
|
||||
--color-fd-accent: hsl(0, 0%, 94.1%);
|
||||
--color-fd-ring: hsl(0, 0%, 63.9%);
|
||||
|
||||
--color-fd-background: hsl(0, 0%, 100%);
|
||||
--color-fd-card: hsl(0, 0%, 100%);
|
||||
--color-fd-foreground: hsl(240, 6%, 25%);
|
||||
--color-fd-muted-foreground: hsl(240, 6%, 50%);
|
||||
--color-fd-secondary: hsl(240, 6%, 97%);
|
||||
--color-fd-accent-foreground: hsl(240, 6%, 25%);
|
||||
--color-fd-primary: hsl(226, 55%, 45%);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-fd-ring: hsl(234, 100%, 83%);
|
||||
--color-fd-primary: hsl(234, 100%, 83%);
|
||||
--color-fd-secondary-foreground: hsl(60, 100%, 98%);
|
||||
--color-fd-card-foreground: hsl(60, 100%, 98%);
|
||||
--color-fd-background: hsl(240, 7%, 11%);
|
||||
--color-fd-foreground: hsl(60, 100%, 98%);
|
||||
--color-fd-popover: hsl(240, 7%, 11%);
|
||||
--color-fd-popover-foreground: hsl(60, 100%, 98%);
|
||||
--color-fd-primary-foreground: hsl(240, 7%, 11%);
|
||||
--color-fd-card: hsl(240, 7%, 11%);
|
||||
--color-fd-muted: hsl(0, 0%, 13%);
|
||||
--color-fd-border: hsl(240, 4%, 19%);
|
||||
--color-fd-accent: hsl(0, 0%, 15%);
|
||||
--color-fd-secondary: hsl(240, 4%, 9%);
|
||||
--color-fd-accent-foreground: hsl(0, 0%, 100%);
|
||||
--color-fd-muted-foreground: hsl(240, 4%, 65%);
|
||||
}
|
||||
|
||||
.prose {
|
||||
--tw-prose-body: color-mix(
|
||||
in oklab,
|
||||
var(--color-fd-foreground) 85%,
|
||||
transparent
|
||||
);
|
||||
--tw-prose-headings: color-mix(
|
||||
in oklab,
|
||||
var(--color-fd-foreground) 85%,
|
||||
transparent
|
||||
);
|
||||
--tw-prose-links: var(--color-fd-primary);
|
||||
--tw-prose-code: var(--color-fd-primary);
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
|
||||
border: none;
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--color-fd-primary) 10%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
#nd-sidebar {
|
||||
background-color: hsl(240, 6%, 97%);
|
||||
}
|
||||
|
||||
.dark #nd-sidebar {
|
||||
background-color: hsl(240, 4%, 9%);
|
||||
}
|
||||
|
||||
#nd-sidebar > div {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
button[data-search-full] {
|
||||
background-color: var(--color-fd-background);
|
||||
}
|
||||
+16
-13
@@ -13,12 +13,8 @@
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./style.css": "./dist/style.css",
|
||||
"./css/*": "./css/*",
|
||||
"./image-zoom.css": "./dist/image-zoom.css",
|
||||
"./tailwind-plugin": {
|
||||
"import": "./dist/tailwind-plugin.js",
|
||||
"types": "./dist/tailwind-plugin.d.ts",
|
||||
"default": "./dist/tailwind-plugin.js"
|
||||
},
|
||||
"./components/*": {
|
||||
"import": "./dist/components/*.js",
|
||||
"types": "./dist/components/*.d.ts"
|
||||
@@ -46,15 +42,20 @@
|
||||
"./og": {
|
||||
"import": "./dist/og.js",
|
||||
"types": "./dist/og.d.ts"
|
||||
},
|
||||
"./theme/*": {
|
||||
"import": "./dist/theme/*.js",
|
||||
"types": "./dist/theme/*.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/*"
|
||||
"dist/*",
|
||||
"css/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm build:layout && pnpm build:tailwind",
|
||||
"build:layout": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
|
||||
"build:tailwind": "postcss css/*.css --dir dist && postcss src/components/*.css --dir dist/components",
|
||||
"build:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css && tailwindcss -i src/components/*.css -o dist/components/*.css",
|
||||
"clean": "rimraf dist",
|
||||
"dev": "concurrently \"tsc -w --project tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\" \"pnpm dev:tailwind\"",
|
||||
"dev:tailwind": "postcss css/*.css --dir dist --watch",
|
||||
@@ -64,10 +65,10 @@
|
||||
"dependencies": {
|
||||
"@radix-ui/react-accordion": "^1.2.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.2",
|
||||
"@radix-ui/react-dialog": "^1.1.4",
|
||||
"@radix-ui/react-dialog": "^1.1.5",
|
||||
"@radix-ui/react-direction": "^1.1.0",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.3",
|
||||
"@radix-ui/react-popover": "^1.1.4",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.4",
|
||||
"@radix-ui/react-popover": "^1.1.5",
|
||||
"@radix-ui/react-scroll-area": "^1.2.2",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-tabs": "^1.1.2",
|
||||
@@ -81,17 +82,19 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fumadocs/cli": "workspace:*",
|
||||
"@next/eslint-plugin-next": "^15.1.5",
|
||||
"@next/eslint-plugin-next": "^15.1.6",
|
||||
"@tailwindcss/cli": "^4.0.0",
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
"@types/lodash.merge": "^4.6.9",
|
||||
"@types/react": "^19.0.7",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"fumadocs-core": "workspace:*",
|
||||
"next": "15.1.5",
|
||||
"next": "15.1.6",
|
||||
"postcss": "^8.5.1",
|
||||
"postcss-cli": "^11.0.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"tsc-alias": "^1.8.10",
|
||||
"tsconfig": "workspace:*"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,314 +0,0 @@
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
import type { CSSRuleObject, PresetsConfig } from 'tailwindcss/types/config';
|
||||
import { presets } from './theme/colors';
|
||||
import { animations } from './theme/animations';
|
||||
import {
|
||||
type Options as TypographyOptions,
|
||||
typography,
|
||||
} from './theme/typography';
|
||||
|
||||
export interface DocsUIOptions
|
||||
extends Pick<TypographyOptions, 'disableRoundedTable'> {
|
||||
/**
|
||||
* Prefix to the variable name of colors
|
||||
*
|
||||
* @defaultValue 'fd'
|
||||
*/
|
||||
cssPrefix?: string;
|
||||
|
||||
/**
|
||||
* Add Fumadocs UI `fd-*` colors to global colors
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
addGlobalColors?: boolean;
|
||||
|
||||
/**
|
||||
* Change the default styles of `container`
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
modifyContainer?: boolean;
|
||||
|
||||
/**
|
||||
* Max width of docs layout
|
||||
*
|
||||
* @defaultValue '100vw'
|
||||
*/
|
||||
layoutWidth?: string;
|
||||
|
||||
/**
|
||||
* Color preset
|
||||
*/
|
||||
preset?: keyof typeof presets | Preset;
|
||||
|
||||
typography?: TypographyOptions;
|
||||
|
||||
// TODO: disable by default at next major/minor
|
||||
/**
|
||||
* Add Fumadocs UI `fd-*` utilities
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
addGlobalUtils?: boolean;
|
||||
}
|
||||
|
||||
type Keys =
|
||||
| 'background'
|
||||
| 'foreground'
|
||||
| 'muted'
|
||||
| 'muted-foreground'
|
||||
| 'popover'
|
||||
| 'popover-foreground'
|
||||
| 'card'
|
||||
| 'card-foreground'
|
||||
| 'border'
|
||||
| 'primary'
|
||||
| 'primary-foreground'
|
||||
| 'secondary'
|
||||
| 'secondary-foreground'
|
||||
| 'accent'
|
||||
| 'accent-foreground'
|
||||
| 'ring';
|
||||
|
||||
type Theme = Record<Keys, string>;
|
||||
|
||||
export interface Preset {
|
||||
light: Theme;
|
||||
dark: Theme;
|
||||
css?: CSSRuleObject;
|
||||
}
|
||||
|
||||
function getThemeStyles(prefix: string, theme: Theme): Record<string, string> {
|
||||
return Object.fromEntries(
|
||||
Object.entries(theme).map(([k, v]) => [variableName(prefix, k), v]),
|
||||
);
|
||||
}
|
||||
|
||||
function variableName(prefix: string, name: string): string {
|
||||
return `--${[prefix, name].filter(Boolean).join('-')}`;
|
||||
}
|
||||
|
||||
type TailwindColors = Record<string, string | Record<string, string>>;
|
||||
|
||||
function createTailwindColors(
|
||||
prefix: string,
|
||||
cloneToGlobal: boolean,
|
||||
): TailwindColors {
|
||||
function colorToCSS(name: Keys): string {
|
||||
return `hsl(var(${variableName(prefix, name)}) / <alpha-value>)`;
|
||||
}
|
||||
|
||||
const v = new Map<string, TailwindColors[string]>();
|
||||
|
||||
for (const key of ['background', 'foreground', 'ring', 'border'] as const) {
|
||||
const value = colorToCSS(key);
|
||||
v.set(`fd-${key}`, value);
|
||||
if (cloneToGlobal) v.set(key, value);
|
||||
}
|
||||
|
||||
for (const key of [
|
||||
'popover',
|
||||
'primary',
|
||||
'secondary',
|
||||
'accent',
|
||||
'muted',
|
||||
'card',
|
||||
] as const) {
|
||||
const value = {
|
||||
DEFAULT: colorToCSS(key),
|
||||
foreground: colorToCSS(`${key}-foreground`),
|
||||
};
|
||||
|
||||
v.set(`fd-${key}`, value);
|
||||
if (cloneToGlobal) v.set(key, value);
|
||||
}
|
||||
|
||||
return Object.fromEntries(v.entries());
|
||||
}
|
||||
|
||||
function createTailwindUtilities(prefix: string): CSSRuleObject {
|
||||
const append = prefix.length > 0 ? prefix + '-' : prefix;
|
||||
|
||||
return {
|
||||
[`.${append}steps`]: {
|
||||
'counter-reset': 'step',
|
||||
'border-left-width': '1px',
|
||||
'margin-left': '1rem',
|
||||
'padding-left': '1.75rem',
|
||||
position: 'relative',
|
||||
},
|
||||
[`.${append}step:before`]: {
|
||||
'background-color': `theme('colors.fd-secondary.DEFAULT')`,
|
||||
color: `theme('colors.fd-secondary.foreground')`,
|
||||
content: 'counter(step)',
|
||||
'counter-increment': 'step',
|
||||
'border-radius': `theme('borderRadius.full')`,
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
'font-size': '.875rem',
|
||||
'line-height': '1.25rem',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
left: '-1rem',
|
||||
},
|
||||
'.prose-no-margin': {
|
||||
'& > :first-child': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'& > :last-child': {
|
||||
marginBottom: '0',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const docsUi = plugin.withOptions<DocsUIOptions>(
|
||||
({
|
||||
cssPrefix = 'fd',
|
||||
preset = 'default',
|
||||
layoutWidth = '100vw',
|
||||
addGlobalUtils = true,
|
||||
} = {}) => {
|
||||
return ({ addBase, addComponents, addUtilities }) => {
|
||||
const { light, dark, css } =
|
||||
typeof preset === 'string' ? presets[preset] : preset;
|
||||
|
||||
addBase({
|
||||
':root': {
|
||||
...getThemeStyles(cssPrefix, light),
|
||||
'--fd-sidebar-width': '0px',
|
||||
'--fd-toc-width': '0px',
|
||||
'--fd-layout-width': layoutWidth,
|
||||
'--fd-banner-height': '0px',
|
||||
'--fd-nav-height': '0px',
|
||||
'--fd-tocnav-height': '0px',
|
||||
|
||||
'--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
|
||||
'--fd-diff-remove-symbol-color': 'rgb(230,10,100)',
|
||||
'--fd-diff-add-color': 'rgba(14,180,100,0.12)',
|
||||
'--fd-diff-add-symbol-color': 'rgb(10,200,100)',
|
||||
},
|
||||
'.dark': getThemeStyles(cssPrefix, dark),
|
||||
'*': {
|
||||
'border-color': `theme('colors.fd-border')`,
|
||||
},
|
||||
|
||||
"[data-rmiz-modal-overlay='visible']": {
|
||||
'background-color': `theme('colors.fd-background')`,
|
||||
},
|
||||
body: {
|
||||
'background-color': `theme('colors.fd-background')`,
|
||||
color: `theme('colors.fd-foreground')`,
|
||||
},
|
||||
});
|
||||
|
||||
if (css) addComponents(css);
|
||||
|
||||
// Shiki styles
|
||||
addBase({
|
||||
'.shiki code span': {
|
||||
color: 'var(--shiki-light)',
|
||||
},
|
||||
'.dark .shiki code span': {
|
||||
color: 'var(--shiki-dark)',
|
||||
},
|
||||
'.fd-codeblock code': {
|
||||
display: 'grid',
|
||||
'font-size': '13px',
|
||||
},
|
||||
|
||||
'.shiki code .diff.remove': {
|
||||
backgroundColor: 'var(--fd-diff-remove-color)',
|
||||
opacity: '0.7',
|
||||
},
|
||||
'.shiki code .diff::before': {
|
||||
position: 'absolute',
|
||||
left: '6px',
|
||||
},
|
||||
'.shiki code .diff.remove::before': {
|
||||
content: "'-'",
|
||||
color: 'var(--fd-diff-remove-symbol-color)',
|
||||
},
|
||||
'.shiki code .diff.add': {
|
||||
backgroundColor: 'var(--fd-diff-add-color)',
|
||||
},
|
||||
'.shiki code .diff.add::before': {
|
||||
content: "'+'",
|
||||
color: 'var(--fd-diff-add-symbol-color)',
|
||||
},
|
||||
'.shiki code .diff': {
|
||||
margin: '0 -16px',
|
||||
padding: '0 16px',
|
||||
position: 'relative',
|
||||
},
|
||||
'.shiki .highlighted': {
|
||||
margin: '0 -16px',
|
||||
padding: '0 16px',
|
||||
backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
|
||||
},
|
||||
'.shiki .highlighted-word': {
|
||||
padding: '1px 2px',
|
||||
margin: '-1px -3px',
|
||||
border: '1px solid',
|
||||
borderColor: `theme('colors.fd-primary.DEFAULT / 50%')`,
|
||||
backgroundColor: `theme('colors.fd-primary.DEFAULT / 10%')`,
|
||||
borderRadius: '2px',
|
||||
},
|
||||
});
|
||||
|
||||
if (addGlobalUtils) {
|
||||
addUtilities(createTailwindUtilities(''));
|
||||
}
|
||||
|
||||
addUtilities(createTailwindUtilities('fd'));
|
||||
};
|
||||
},
|
||||
({
|
||||
cssPrefix = 'fd',
|
||||
modifyContainer = true,
|
||||
addGlobalColors = false,
|
||||
} = {}) => ({
|
||||
theme: {
|
||||
extend: {
|
||||
// Allow devs to use `container` to match with home layout
|
||||
container: modifyContainer
|
||||
? {
|
||||
center: true,
|
||||
padding: '1rem',
|
||||
screens: {
|
||||
'2xl': '1400px',
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
maxWidth: {
|
||||
'fd-container': '1400px',
|
||||
},
|
||||
spacing: {
|
||||
'fd-layout-top':
|
||||
'calc(var(--fd-banner-height) + var(--fd-nav-height))',
|
||||
},
|
||||
colors: createTailwindColors(cssPrefix, addGlobalColors),
|
||||
...animations,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
export function createPreset(options: DocsUIOptions = {}): PresetsConfig {
|
||||
return {
|
||||
darkMode: 'class',
|
||||
plugins: [
|
||||
typography({
|
||||
disableRoundedTable: options.disableRoundedTable,
|
||||
...options.typography,
|
||||
}),
|
||||
docsUi(options),
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export { typography };
|
||||
export { presets } from './theme/colors';
|
||||
@@ -1,98 +0,0 @@
|
||||
export const animations = {
|
||||
keyframes: {
|
||||
'fd-collapsible-down': {
|
||||
from: { height: '0', opacity: '0' },
|
||||
to: {
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
},
|
||||
},
|
||||
'fd-collapsible-up': {
|
||||
from: {
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
},
|
||||
to: { height: '0', opacity: '0' },
|
||||
},
|
||||
'fd-accordion-down': {
|
||||
from: { height: '0', opacity: '0.5' },
|
||||
to: { height: 'var(--radix-accordion-content-height)' },
|
||||
},
|
||||
'fd-accordion-up': {
|
||||
from: { height: 'var(--radix-accordion-content-height)' },
|
||||
to: { height: '0', opacity: '0.5' },
|
||||
},
|
||||
'fd-dialog-in': {
|
||||
from: { transform: 'scale(0.95) translate(-50%, 0)', opacity: '0' },
|
||||
to: { transform: 'scale(1) translate(-50%, 0)' },
|
||||
},
|
||||
'fd-dialog-out': {
|
||||
from: { transform: 'scale(1) translate(-50%, 0)' },
|
||||
to: { transform: 'scale(0.95) translateY(-50%, 0)', opacity: '0' },
|
||||
},
|
||||
'fd-popover-in': {
|
||||
from: { opacity: '0', transform: 'scale(0.98) translateY(-4px)' },
|
||||
to: { opacity: '1', transform: 'scale(1) translateY(0)' },
|
||||
},
|
||||
'fd-popover-out': {
|
||||
from: { opacity: '1', transform: 'translateY(0)' },
|
||||
to: { opacity: '0', transform: 'translateY(-4px)' },
|
||||
},
|
||||
'fd-fade-in': {
|
||||
from: { opacity: '0' },
|
||||
to: { opacity: '1' },
|
||||
},
|
||||
'fd-fade-out': {
|
||||
to: { opacity: '0' },
|
||||
},
|
||||
|
||||
'fd-enterFromRight': {
|
||||
from: { opacity: '0', transform: 'translateX(200px)' },
|
||||
to: { opacity: '1', transform: 'translateX(0)' },
|
||||
},
|
||||
'fd-enterFromLeft': {
|
||||
from: { opacity: '0', transform: 'translateX(-200px)' },
|
||||
to: { opacity: '1', transform: 'translateX(0)' },
|
||||
},
|
||||
'fd-exitToRight': {
|
||||
from: { opacity: '1', transform: 'translateX(0)' },
|
||||
to: { opacity: '0', transform: 'translateX(200px)' },
|
||||
},
|
||||
'fd-exitToLeft': {
|
||||
from: { opacity: '1', transform: 'translateX(0)' },
|
||||
to: { opacity: '0', transform: 'translateX(-200px)' },
|
||||
},
|
||||
'fd-nav-menu-in': {
|
||||
from: { opacity: '0', height: '0px' },
|
||||
to: {
|
||||
opacity: '1',
|
||||
height: 'var(--radix-navigation-menu-viewport-height)',
|
||||
},
|
||||
},
|
||||
'fd-nav-menu-out': {
|
||||
from: {
|
||||
opacity: '1',
|
||||
height: 'var(--radix-navigation-menu-viewport-height)',
|
||||
},
|
||||
to: { opacity: '0', height: '0px' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'fd-fade-in': 'fd-fade-in 300ms ease',
|
||||
'fd-fade-out': 'fd-fade-out 300ms ease',
|
||||
'fd-dialog-in': 'fd-dialog-in 200ms cubic-bezier(0.32, 0.72, 0, 1)',
|
||||
'fd-dialog-out': 'fd-dialog-out 300ms cubic-bezier(0.32, 0.72, 0, 1)',
|
||||
'fd-popover-in': 'fd-popover-in 150ms ease',
|
||||
'fd-popover-out': 'fd-popover-out 150ms ease',
|
||||
'fd-collapsible-down': 'fd-collapsible-down 150ms ease-out',
|
||||
'fd-collapsible-up': 'fd-collapsible-up 150ms ease-out',
|
||||
'fd-accordion-down': 'fd-accordion-down 200ms ease-out',
|
||||
'fd-accordion-up': 'fd-accordion-up 200ms ease-out',
|
||||
|
||||
'fd-nav-menu-in': 'fd-nav-menu-in 200ms ease',
|
||||
'fd-nav-menu-out': 'fd-nav-menu-out 200ms ease',
|
||||
|
||||
'fd-enterFromLeft': 'fd-enterFromLeft 250ms ease',
|
||||
'fd-enterFromRight': 'fd-enterFromRight 250ms ease',
|
||||
'fd-exitToLeft': 'fd-exitToLeft 250ms ease',
|
||||
'fd-exitToRight': 'fd-exitToRight 250ms ease',
|
||||
},
|
||||
};
|
||||
@@ -1,334 +0,0 @@
|
||||
import type { Preset } from '@/tailwind-plugin';
|
||||
|
||||
const black: Preset = {
|
||||
light: {
|
||||
background: '0 0% 98%',
|
||||
foreground: '0 0% 3.9%',
|
||||
muted: '0 0% 96.1%',
|
||||
'muted-foreground': '0 0% 45.1%',
|
||||
popover: '0 0% 100%',
|
||||
'popover-foreground': '0 0% 15.1%',
|
||||
card: '0 0% 99.7%',
|
||||
'card-foreground': '0 0% 3.9%',
|
||||
border: '0 0% 89.8%',
|
||||
primary: '0 0% 9%',
|
||||
'primary-foreground': '0 0% 98%',
|
||||
secondary: '0 0% 96.1%',
|
||||
'secondary-foreground': '0 0% 9%',
|
||||
accent: '0 0% 94.1%',
|
||||
'accent-foreground': '0 0% 9%',
|
||||
ring: '0 0% 63.9%',
|
||||
},
|
||||
dark: {
|
||||
'popover-foreground': '0 0% 88%',
|
||||
'card-foreground': '0 0% 98%',
|
||||
primary: '0 0% 98%',
|
||||
'primary-foreground': '0 0% 9%',
|
||||
secondary: '0 0% 12.9%',
|
||||
'secondary-foreground': '0 0% 98%',
|
||||
ring: '0 0% 14.9%',
|
||||
background: '0 0% 2%',
|
||||
foreground: '0 0% 98%',
|
||||
popover: '0 0% 4%',
|
||||
card: '0 0% 4%',
|
||||
muted: '0 0% 8%',
|
||||
border: '0 0% 14%',
|
||||
accent: '0 0% 15%',
|
||||
'accent-foreground': '0 0% 100%',
|
||||
'muted-foreground': '0 0% 60%',
|
||||
},
|
||||
};
|
||||
|
||||
const ocean: Preset = {
|
||||
light: {
|
||||
background: '0 0% 98%',
|
||||
foreground: '0 0% 3.9%',
|
||||
muted: '220 90% 96.1%',
|
||||
'muted-foreground': '0 0% 45.1%',
|
||||
popover: '0 0% 98%',
|
||||
'popover-foreground': '0 0% 15.1%',
|
||||
card: '220 50% 98%',
|
||||
'card-foreground': '0 0% 3.9%',
|
||||
border: '220 50% 89.8%',
|
||||
primary: '210 80% 20.2%',
|
||||
'primary-foreground': '0 0% 98%',
|
||||
secondary: '220 90% 96.1%',
|
||||
'secondary-foreground': '0 0% 9%',
|
||||
accent: '220 50% 94.1%',
|
||||
'accent-foreground': '0 0% 9%',
|
||||
ring: '220 100% 63.9%',
|
||||
},
|
||||
dark: {
|
||||
'card-foreground': '220 60% 94.5%',
|
||||
'primary-foreground': '0 0% 9%',
|
||||
'secondary-foreground': '220 80% 90%',
|
||||
ring: '205 100% 85%',
|
||||
card: '220 50% 10%',
|
||||
muted: '220 50% 10%',
|
||||
'muted-foreground': '220 30% 65%',
|
||||
'accent-foreground': '220 80% 90%',
|
||||
popover: '220 50% 10%',
|
||||
'popover-foreground': '220 30% 65%',
|
||||
accent: '220 40% 20%',
|
||||
secondary: '220 50% 20%',
|
||||
background: '220 60% 6%',
|
||||
foreground: '220 60% 94.5%',
|
||||
primary: '205 100% 85%',
|
||||
border: '220 50% 20%',
|
||||
},
|
||||
css: {
|
||||
'.dark body': {
|
||||
'background-image':
|
||||
'linear-gradient(rgba(5, 105, 255, 0.15), transparent 20rem, transparent)',
|
||||
'background-repeat': 'no-repeat',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const neutral: Preset = {
|
||||
light: {
|
||||
background: '0 0% 96%',
|
||||
foreground: '0 0% 3.9%',
|
||||
muted: '0 0% 96.1%',
|
||||
'muted-foreground': '0 0% 45.1%',
|
||||
popover: '0 0% 98%',
|
||||
'popover-foreground': '0 0% 15.1%',
|
||||
card: '0 0% 94.7%',
|
||||
'card-foreground': '0 0% 3.9%',
|
||||
border: '0 0% 89.8%',
|
||||
primary: '0 0% 9%',
|
||||
'primary-foreground': '0 0% 98%',
|
||||
secondary: '0 0% 93.1%',
|
||||
'secondary-foreground': '0 0% 9%',
|
||||
accent: '0 0% 90.1%',
|
||||
'accent-foreground': '0 0% 9%',
|
||||
ring: '0 0% 63.9%',
|
||||
},
|
||||
dark: {
|
||||
background: '0 0% 8.04%',
|
||||
foreground: '0 0% 92%',
|
||||
muted: '0 0% 12.9%',
|
||||
'muted-foreground': '0 0% 60.9%',
|
||||
popover: '0 0% 9.8%',
|
||||
'popover-foreground': '0 0% 88%',
|
||||
card: '0 0% 9.8%',
|
||||
'card-foreground': '0 0% 98%',
|
||||
border: '0 0% 14%',
|
||||
primary: '0 0% 98%',
|
||||
'primary-foreground': '0 0% 9%',
|
||||
secondary: '0 0% 12.9%',
|
||||
'secondary-foreground': '0 0% 98%',
|
||||
accent: '0 0% 16.9%',
|
||||
'accent-foreground': '0 0% 90%',
|
||||
ring: '0 0% 14.9%',
|
||||
},
|
||||
css: {
|
||||
'.dark #nd-sidebar': {
|
||||
'--muted': '0deg 0% 16%',
|
||||
'--secondary': '0deg 0% 18%',
|
||||
'--muted-foreground': '0 0% 72%',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const catppuccin: Preset = {
|
||||
light: {
|
||||
popover: '220deg 22% 92%',
|
||||
'popover-foreground': '234deg 16% 35%',
|
||||
'secondary-foreground': '234deg 16% 35%',
|
||||
border: '223deg 16% 83%',
|
||||
primary: '266deg 85% 58%',
|
||||
'primary-foreground': '234deg 16% 35%',
|
||||
muted: '220deg 22% 92%',
|
||||
card: '220deg 22% 92%',
|
||||
accent: '223deg 16% 83%',
|
||||
'accent-foreground': '234deg 16% 35%',
|
||||
'card-foreground': '234deg 16% 35%',
|
||||
'muted-foreground': '233deg 10% 47%',
|
||||
foreground: '234deg 16% 35%',
|
||||
secondary: '220deg 22% 92%',
|
||||
background: '220deg 23% 95%',
|
||||
ring: '267deg 84% 81%',
|
||||
},
|
||||
dark: {
|
||||
ring: '267deg 84% 81%',
|
||||
primary: '267deg 84% 81%',
|
||||
background: '240deg 21% 15%',
|
||||
foreground: '226deg 64% 88%',
|
||||
popover: '240deg 23% 9%',
|
||||
card: '240deg 21% 12%',
|
||||
muted: '240deg 21% 12%',
|
||||
border: '237deg 16% 23%',
|
||||
accent: '237deg 16% 23%',
|
||||
secondary: '240deg 21% 12%',
|
||||
'primary-foreground': '240deg 23% 9%',
|
||||
'card-foreground': '226deg 64% 88%',
|
||||
'secondary-foreground': '226deg 64% 88%',
|
||||
'popover-foreground': '226deg 64% 88%',
|
||||
'accent-foreground': '226deg 64% 88%',
|
||||
'muted-foreground': '228deg 24% 72%',
|
||||
},
|
||||
css: {
|
||||
'#nd-sidebar': {
|
||||
'--secondary': '223deg 16% 83%',
|
||||
'--muted': '223deg 16% 83%',
|
||||
},
|
||||
'.dark #nd-sidebar': {
|
||||
'--secondary': '237deg 16% 23%',
|
||||
'--muted': '237deg 16% 23%',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const purple: Preset = {
|
||||
light: {
|
||||
background: '256 100% 96%',
|
||||
primary: '270 100% 52%',
|
||||
border: '270 40% 80%',
|
||||
accent: '270 60% 86%',
|
||||
'accent-foreground': '270 100% 20%',
|
||||
muted: '256 60% 94%',
|
||||
'muted-foreground': '256 50% 50%',
|
||||
foreground: '256 60% 26%',
|
||||
secondary: '270 60% 90%',
|
||||
'secondary-foreground': '256 60% 10%',
|
||||
card: '256 60% 92%',
|
||||
'card-foreground': '256 100% 20%',
|
||||
'popover-foreground': '256 100% 20%',
|
||||
popover: '256 60% 96%',
|
||||
'primary-foreground': '270 100% 20%',
|
||||
ring: '270 100% 52%',
|
||||
},
|
||||
dark: {
|
||||
background: '256 60% 6%',
|
||||
primary: '270 100% 86%',
|
||||
border: '270 100% 20%',
|
||||
accent: '256 60% 26%',
|
||||
'accent-foreground': '270 100% 86%',
|
||||
muted: '256 60% 10%',
|
||||
foreground: '256 60% 90%',
|
||||
'muted-foreground': '256 50% 75%',
|
||||
secondary: '270 100% 20%',
|
||||
'secondary-foreground': '256 60% 90%',
|
||||
card: '256 60% 10%',
|
||||
'card-foreground': '256 60% 90%',
|
||||
'popover-foreground': '256 60% 90%',
|
||||
popover: '256 60% 6%',
|
||||
'primary-foreground': '256 60% 6%',
|
||||
ring: '270 100% 86%',
|
||||
},
|
||||
};
|
||||
|
||||
const dusk: Preset = {
|
||||
light: {
|
||||
background: '250 20% 92%',
|
||||
primary: '340 40% 48%',
|
||||
border: '240 40% 90%',
|
||||
accent: '250 30% 90%',
|
||||
'accent-foreground': '250 20% 20%',
|
||||
muted: '240 30% 94%',
|
||||
'muted-foreground': '240 10% 50%',
|
||||
foreground: '220 20% 30%',
|
||||
secondary: '250 40% 94%',
|
||||
'secondary-foreground': '240 40% 10%',
|
||||
card: '250 20% 92%',
|
||||
'card-foreground': '250 20% 20%',
|
||||
'popover-foreground': '250 40% 20%',
|
||||
popover: '250 40% 96%',
|
||||
'primary-foreground': '240 80% 20%',
|
||||
ring: '340 40% 48%',
|
||||
},
|
||||
dark: {
|
||||
ring: '340 100% 90%',
|
||||
'primary-foreground': '240 40% 4%',
|
||||
popover: '240 20% 5%',
|
||||
'popover-foreground': '250 20% 90%',
|
||||
primary: '340 100% 90%',
|
||||
border: '220 15% 15%',
|
||||
background: '220 15% 6%',
|
||||
foreground: '220 15% 87%',
|
||||
muted: '220 20% 15%',
|
||||
'muted-foreground': '220 15% 60%',
|
||||
accent: '250 20% 15%',
|
||||
secondary: '240 20% 15%',
|
||||
'card-foreground': '240 15% 87%',
|
||||
card: '240 20% 5%',
|
||||
'secondary-foreground': '250 20% 90%',
|
||||
'accent-foreground': '340 5% 90%',
|
||||
},
|
||||
css: {
|
||||
'#nd-sidebar': {
|
||||
backgroundColor: 'hsl(250 20% 90%)',
|
||||
},
|
||||
'.dark #nd-sidebar': {
|
||||
backgroundColor: 'hsl(240 20% 5%)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const vitepress: Preset = {
|
||||
light: {
|
||||
...black.light,
|
||||
background: '0 0% 100%',
|
||||
card: '0 0% 100%',
|
||||
foreground: '240 6% 25%',
|
||||
'muted-foreground': '240 6% 50%',
|
||||
secondary: '240 6% 97%',
|
||||
'accent-foreground': '240 6% 25%',
|
||||
primary: '226 55% 45%',
|
||||
},
|
||||
dark: {
|
||||
ring: '234 100% 83%',
|
||||
primary: '234 100% 83%',
|
||||
'secondary-foreground': '60 100% 98%',
|
||||
'card-foreground': '60 100% 98%',
|
||||
background: '240 7% 11%',
|
||||
foreground: '60 100% 98%',
|
||||
popover: '240 7% 11%',
|
||||
'popover-foreground': '60 100% 98%',
|
||||
'primary-foreground': '240 7% 11%',
|
||||
card: '240 7% 11%',
|
||||
muted: '0 0% 13%',
|
||||
border: '240 4% 19%',
|
||||
accent: '0 0% 15%',
|
||||
secondary: '240 4% 9%',
|
||||
'accent-foreground': '0 0% 100%',
|
||||
'muted-foreground': '240 4% 65%',
|
||||
},
|
||||
css: {
|
||||
'.prose': {
|
||||
'--tw-prose-body': 'theme(colors.fd-foreground / 85%)',
|
||||
'--tw-prose-headings': 'theme(colors.fd-foreground / 85%)',
|
||||
'--tw-prose-links': 'theme(colors.fd-primary.DEFAULT)',
|
||||
'--tw-prose-code': 'theme(colors.fd-primary.DEFAULT)',
|
||||
},
|
||||
'.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))':
|
||||
{
|
||||
border: 'none',
|
||||
backgroundColor: 'theme(colors.fd-primary.DEFAULT / 10%)',
|
||||
},
|
||||
'#nd-sidebar': {
|
||||
backgroundColor: 'hsl(240 6% 97%)',
|
||||
},
|
||||
'.dark #nd-sidebar': {
|
||||
backgroundColor: 'hsl(240 4% 9%)',
|
||||
},
|
||||
'#nd-sidebar > div': {
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
'button[data-search-full]': {
|
||||
backgroundColor: 'theme(colors.fd-background)',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const presets = {
|
||||
vitepress,
|
||||
purple,
|
||||
black,
|
||||
default: neutral,
|
||||
ocean,
|
||||
catppuccin,
|
||||
neutral,
|
||||
dusk,
|
||||
};
|
||||
@@ -0,0 +1,106 @@
|
||||
import plugin from 'tailwindcss/plugin';
|
||||
|
||||
export interface DocsUIOptions {
|
||||
/**
|
||||
* Prefix to the variable name of colors
|
||||
*
|
||||
* @defaultValue 'fd'
|
||||
*/
|
||||
cssPrefix?: string;
|
||||
|
||||
/**
|
||||
* Add Fumadocs UI `fd-*` colors to global colors
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
addGlobalColors?: boolean;
|
||||
|
||||
/**
|
||||
* Max width of docs layout
|
||||
*
|
||||
* @defaultValue '100vw'
|
||||
*/
|
||||
layoutWidth?: string;
|
||||
|
||||
// TODO: disable by default at next major/minor
|
||||
/**
|
||||
* Add Fumadocs UI `fd-*` utilities without prefixes
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
addGlobalUtils?: boolean;
|
||||
}
|
||||
|
||||
type CSSRules = {
|
||||
[key: string]: CSSRules | string;
|
||||
};
|
||||
|
||||
function createTailwindUtilities(prefix: string): CSSRules {
|
||||
const append = prefix.length > 0 ? prefix + '-' : prefix;
|
||||
|
||||
return {
|
||||
[`.${append}steps`]: {
|
||||
'counter-reset': 'step',
|
||||
'border-left-width': '1px',
|
||||
'margin-left': '1rem',
|
||||
'padding-left': '1.75rem',
|
||||
position: 'relative',
|
||||
},
|
||||
[`.${append}step:before`]: {
|
||||
'background-color': 'var(--color-fd-secondary)',
|
||||
color: 'var(--color-fd-secondary-foreground)',
|
||||
content: 'counter(step)',
|
||||
'counter-increment': 'step',
|
||||
'border-radius': `theme('borderRadius.full')`,
|
||||
'justify-content': 'center',
|
||||
'align-items': 'center',
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
'font-size': '.875rem',
|
||||
'line-height': '1.25rem',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
left: '-1rem',
|
||||
},
|
||||
'.prose-no-margin': {
|
||||
'& > :first-child': {
|
||||
marginTop: '0',
|
||||
},
|
||||
'& > :last-child': {
|
||||
marginBottom: '0',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const docsUi: unknown = plugin.withOptions<DocsUIOptions>(
|
||||
({ layoutWidth = '100vw', addGlobalUtils = true } = {}) => {
|
||||
return ({ addBase, addUtilities }) => {
|
||||
addBase({
|
||||
':root': {
|
||||
'--fd-sidebar-width': '0px',
|
||||
'--fd-toc-width': '0px',
|
||||
'--fd-layout-width': layoutWidth,
|
||||
'--fd-banner-height': '0px',
|
||||
'--fd-nav-height': '0px',
|
||||
'--fd-tocnav-height': '0px',
|
||||
|
||||
'--fd-diff-remove-color': 'rgba(200,10,100,0.12)',
|
||||
'--fd-diff-remove-symbol-color': 'rgb(230,10,100)',
|
||||
'--fd-diff-add-color': 'rgba(14,180,100,0.12)',
|
||||
'--fd-diff-add-symbol-color': 'rgb(10,200,100)',
|
||||
},
|
||||
});
|
||||
|
||||
if (addGlobalUtils) {
|
||||
// @ts-expect-error -- buggy Tailwind CSS types
|
||||
addUtilities(createTailwindUtilities(''));
|
||||
}
|
||||
|
||||
// @ts-expect-error -- buggy Tailwind CSS types
|
||||
addUtilities(createTailwindUtilities('fd'));
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
export default docsUi;
|
||||
@@ -158,11 +158,10 @@ const SELECTORS = [
|
||||
['lead', '[class~="lead"]'],
|
||||
];
|
||||
|
||||
export const typography = plugin.withOptions<Options>(
|
||||
export const typography: unknown = plugin.withOptions<Options>(
|
||||
({ className = 'prose', ...styleOptions } = {}) => {
|
||||
return ({ addVariant, addComponents, theme, ...rest }) => {
|
||||
return ({ addVariant, addComponents, ...rest }) => {
|
||||
const prefix = (rest as unknown as { prefix: Context['prefix'] }).prefix;
|
||||
const modifiers = theme('typography') as typeof styles;
|
||||
|
||||
for (const [name, ...values] of SELECTORS) {
|
||||
const selectors = values.length === 0 ? [name] : values;
|
||||
@@ -180,12 +179,12 @@ export const typography = plugin.withOptions<Options>(
|
||||
addComponents({
|
||||
[`.${className}`]: configToCss(
|
||||
{
|
||||
...modifiers.DEFAULT,
|
||||
...styles.DEFAULT,
|
||||
css: [
|
||||
...(modifiers.DEFAULT.css ?? []),
|
||||
...(styles.DEFAULT.css ?? []),
|
||||
styleOptions.disableRoundedTable
|
||||
? modifiers.normalTable
|
||||
: modifiers.roundedTable,
|
||||
? styles.normalTable
|
||||
: styles.roundedTable,
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -197,9 +196,6 @@ export const typography = plugin.withOptions<Options>(
|
||||
});
|
||||
};
|
||||
},
|
||||
() => {
|
||||
return {
|
||||
theme: { typography: styles },
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
export default typography;
|
||||
|
||||
@@ -14,22 +14,23 @@ function em(px: number, base: number) {
|
||||
}
|
||||
|
||||
const colors = {
|
||||
'--tw-prose-body': `theme('colors.fd-foreground / 90%')`,
|
||||
'--tw-prose-headings': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-lead': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-links': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-bold': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-counters': `theme('colors.fd-muted.foreground')`,
|
||||
'--tw-prose-bullets': `theme('colors.fd-muted.foreground')`,
|
||||
'--tw-prose-hr': `theme('colors.fd-border')`,
|
||||
'--tw-prose-quotes': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-quote-borders': `theme('colors.fd-border')`,
|
||||
'--tw-prose-captions': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-code': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-th-borders': `theme('colors.fd-border')`,
|
||||
'--tw-prose-td-borders': `theme('colors.fd-border')`,
|
||||
'--tw-prose-kbd': `theme('colors.fd-foreground')`,
|
||||
'--tw-prose-kbd-shadows': `theme('colors.fd-primary.DEFAULT / 50%')`,
|
||||
'--tw-prose-body':
|
||||
'color-mix(in oklab, var(--color-fd-foreground) 90%, transparent)',
|
||||
'--tw-prose-headings': 'var(--color-fd-foreground)',
|
||||
'--tw-prose-lead': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-links': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-bold': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-counters': `var(--color-fd-muted-foreground)`,
|
||||
'--tw-prose-bullets': `var(--color-fd-muted-foreground)`,
|
||||
'--tw-prose-hr': `var(--color-fd-border)`,
|
||||
'--tw-prose-quotes': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-quote-borders': `var(--color-fd-border)`,
|
||||
'--tw-prose-captions': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-code': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-th-borders': `var(--color-fd-border)`,
|
||||
'--tw-prose-td-borders': `var(--color-fd-border)`,
|
||||
'--tw-prose-kbd': `var(--color-fd-foreground)`,
|
||||
'--tw-prose-kbd-shadows': `color-mix(in oklab, var(--color-fd-primary) 50%, transparent)`,
|
||||
};
|
||||
|
||||
export const roundedTable = {
|
||||
@@ -357,10 +358,10 @@ export const DEFAULT: Config = {
|
||||
padding: '3px',
|
||||
border: 'solid 1px',
|
||||
fontSize: '13px',
|
||||
borderColor: `theme('colors.fd-border')`,
|
||||
borderColor: `var(--color-fd-border)`,
|
||||
borderRadius: '5px',
|
||||
fontWeight: '400',
|
||||
background: `theme('colors.fd-muted.DEFAULT')`,
|
||||
background: `var(--color-fd-muted)`,
|
||||
color: 'var(--tw-prose-code)',
|
||||
},
|
||||
'a code': {
|
||||
@@ -421,7 +422,7 @@ export const DEFAULT: Config = {
|
||||
fontWeight: '400',
|
||||
textDecoration: 'underline',
|
||||
textUnderlineOffset: '2px',
|
||||
textDecorationColor: `theme('colors.fd-primary.DEFAULT')`,
|
||||
textDecorationColor: 'var(--color-fd-primary)',
|
||||
},
|
||||
'a:not([data-card]):hover': {
|
||||
opacity: '80%',
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import { createPreset } from './dist/tailwind-plugin';
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{ts,tsx}'],
|
||||
presets: [createPreset()],
|
||||
};
|
||||
Generated
+785
-555
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user