doccupine 0.0.57 → 0.0.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/templates/app/layout.js +1 -1
- package/dist/templates/components/layout/Header.d.ts +1 -1
- package/dist/templates/components/layout/Header.js +3 -2
- package/dist/templates/mdx/fonts.mdx.d.ts +1 -1
- package/dist/templates/mdx/fonts.mdx.js +14 -2
- package/dist/templates/mdx/theme.mdx.d.ts +1 -1
- package/dist/templates/mdx/theme.mdx.js +6 -6
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@ import navigation from "@/navigation.json";
|
|
|
42
42
|
const Chat = dynamic(() => import("@/components/Chat").then((mod) => mod.Chat));
|
|
43
43
|
|
|
44
44
|
${fontConfig?.googleFont?.fontName?.length
|
|
45
|
-
? `const font = ${fontConfig.googleFont.fontName}({ subsets: ${fontConfig?.googleFont?.subsets?.length ? JSON.stringify(fontConfig?.googleFont?.subsets, null, 2) : '["latin"]'}, ${fontConfig.googleFont?.weight
|
|
45
|
+
? `const font = ${fontConfig.googleFont.fontName}({ subsets: ${fontConfig?.googleFont?.subsets?.length ? JSON.stringify(fontConfig?.googleFont?.subsets, null, 2) : '["latin"]'}, ${fontConfig.googleFont?.weight?.length ? `weight: ${Array.isArray(fontConfig.googleFont.weight) ? JSON.stringify(fontConfig.googleFont.weight) : `"${fontConfig.googleFont.weight}"`}` : ""} });`
|
|
46
46
|
: fontConfig?.localFonts?.length || fontConfig?.localFonts?.src?.length
|
|
47
47
|
? `const font = localFont({
|
|
48
48
|
src: ${fontConfig.localFonts?.src?.length ? JSON.stringify(fontConfig?.localFonts.src, null, 2).replace(/"([^"]+)":/g, "$1:") : `"${fontConfig?.localFonts}"`},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const headerTemplate = "\"use client\";\nimport { Flex, MaxWidth } from \"cherry-styled-components\";\nimport { useCallback, useRef, useState, Suspense } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n ToggleTheme,\n ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme }>`\n position: fixed;\n top: 0;\n padding: 20px;\n margin: 0;\n z-index: 1000;\n width: 100%;\n\n ${mq(\"lg\")} {\n width: 320px;\n border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n }\n\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: ${({ theme }) => theme.colors.light};\n z-index: -2;\n }\n\n &::after {\n background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n z-index: -1;\n }\n\n & .logo {\n display: flex;\n\n & svg,\n & img {\n margin: auto;\n width:
|
|
1
|
+
export declare const headerTemplate = "\"use client\";\nimport { Flex, MaxWidth } from \"cherry-styled-components\";\nimport { useCallback, useRef, useState, Suspense } from \"react\";\nimport styled, { useTheme } from \"styled-components\";\nimport Link from \"next/link\";\nimport { rgba } from \"polished\";\nimport { mq, Theme } from \"@/app/theme\";\nimport {\n ToggleTheme,\n ToggleThemeLoading,\n} from \"@/components/layout/ThemeToggle\";\nimport { useOnClickOutside } from \"@/components/ClickOutside\";\nimport { Logo } from \"@/components/layout/Pictograms\";\nimport themeJson from \"@/theme.json\";\n\nconst customThemeJson = themeJson as typeof themeJson & {\n logo?: { dark: string; light: string };\n};\n\nconst StyledHeader = styled.header<{ theme: Theme }>`\n position: fixed;\n top: 0;\n padding: 20px;\n margin: 0;\n z-index: 1000;\n width: 100%;\n\n ${mq(\"lg\")} {\n width: 320px;\n border-right: solid 1px ${({ theme }) => theme.colors.grayLight};\n }\n\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: ${({ theme }) => theme.colors.light};\n z-index: -2;\n }\n\n &::after {\n background: ${({ theme }) => rgba(theme.colors.primaryLight, 0.05)};\n z-index: -1;\n }\n\n & .logo {\n display: flex;\n\n & svg,\n & img {\n margin: auto;\n width: fit-content;\n height: auto;\n max-width: 182px;\n max-height: 30px;\n\n & path[fill] {\n fill: ${({ theme }) => theme.colors.primary};\n }\n }\n }\n`;\n\nfunction Header() {\n const [isOptionActive, setIsOptionActive] = useState(false);\n const [isLangActive, setIsLangActive] = useState(false);\n\n const wrapperRef = useRef<HTMLSpanElement>(null);\n const elmRef = useRef<HTMLDivElement>(null);\n const langRef = useRef<HTMLSpanElement>(null);\n const closeMenu = useCallback(() => {\n setIsOptionActive(false);\n setIsLangActive(false);\n }, []);\n\n useOnClickOutside(\n [elmRef, wrapperRef],\n isOptionActive ? closeMenu : () => {},\n );\n useOnClickOutside([langRef, wrapperRef], isLangActive ? closeMenu : () => {});\n const theme = useTheme() as Theme;\n\n return (\n <>\n <StyledHeader>\n <MaxWidth $size={1000}>\n <Flex $justifyContent=\"space-between\" $wrap=\"nowrap\">\n <Link href=\"/\" className=\"logo\" aria-label=\"Logo\">\n {customThemeJson.logo ? (\n theme.isDark ? (\n // eslint-disable-next-line @next/next/no-img-element\n <img\n src={customThemeJson.logo.dark}\n alt=\"Logo\"\n width=\"100\"\n height=\"100\"\n />\n ) : (\n // eslint-disable-next-line @next/next/no-img-element\n <img\n src={customThemeJson.logo.light}\n alt=\"Logo\"\n width=\"100\"\n height=\"100\"\n />\n )\n ) : (\n <Logo />\n )}\n </Link>\n <Suspense fallback={<ToggleThemeLoading />}>\n <ToggleTheme />\n </Suspense>\n </Flex>\n </MaxWidth>\n </StyledHeader>\n </>\n );\n}\n\nexport { Header };\n";
|
|
@@ -55,9 +55,10 @@ const StyledHeader = styled.header<{ theme: Theme }>\`
|
|
|
55
55
|
& svg,
|
|
56
56
|
& img {
|
|
57
57
|
margin: auto;
|
|
58
|
-
width:
|
|
59
|
-
max-width: max-content;
|
|
58
|
+
width: fit-content;
|
|
60
59
|
height: auto;
|
|
60
|
+
max-width: 182px;
|
|
61
|
+
max-height: 30px;
|
|
61
62
|
|
|
62
63
|
& path[fill] {
|
|
63
64
|
fill: \${({ theme }) => theme.colors.primary};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const fontsMdxTemplate = "---\ntitle: \"Fonts\"\ndescription: \"Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts).\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 6\n---\n# Fonts\nDefine your site\u2019s typography with a `fonts.json` file. You can load fonts from Google Fonts or from local font files bundled with your project.\n\n## fonts.json\nPlace a `fonts.json` at your project root (the same folder where you execute `npx doccupine`). Choose one of the following configurations depending on the source of your fonts.\n\n## Google Fonts\nUse this when your font is hosted by Google Fonts.\n\n```json\n{\n \"googleFont\": {\n \"fontName\": \"Work_Sans\",\n \"subsets\": [\"latin\"],\n \"weight\": \"400\"\n }\n}\n```\n\n### Rules\n- **fontName**: Capitalize each word. If the name contains spaces, replace them with `_`.\n - Example: \"Work Sans\" \u2192 `Work_Sans`\n- **subsets**: Pick the subsets you need (for example, `latin`).\n- **weight**: The font weight to load (for example, `\"400\"`).\n\n### Tips\n- **One primary family**: Start with a single family and weight, then add more if needed.\n- **Readability**: Choose readable body fonts; reserve display fonts for headings.\n\n## Local custom fonts\nUse this when you want to ship your own font files. Upload your font files to the Next.js `public` directory, then reference them with relative paths.\n\n```json\n{\n \"localFonts\": {\n \"src\": [\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"400\",\n \"style\": \"normal\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"400\",\n \"style\": \"italic\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"700\",\n \"style\": \"normal\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"700\",\n \"style\": \"italic\"\n }\n ]\n }\n}\n```\n\n### Single file shorthand\nIf you have only one file, you can use:\n\n```json\n{\n \"localFonts\": \"../public/font.woff\"\n}\n```\n\n### Rules\n- **Upload files**: Place `font.woff` (and any additional weights/styles) in your Next.js `public` directory.\n- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses `../public/font.woff`.\n- **weight**: String value of the font weight (for example, `\"400\"`, `\"700\"`).\n- **style**: `\"normal\"` or `\"italic\"`.\n\n### Tips\n- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.\n- **File formats**: `.woff` is broadly supported and recommended for the web.\n\n## Behavior\n- **Placement**: Put `fonts.json` in the project root alongside `config.json` and (optionally) `theme.json`.\n- **Validation**: Follow the naming rule for `googleFont.fontName` (capitalize, replace spaces with `_`).\n- **Local files**: Ensure the referenced files exist under the Next.js `public` directory.\n\n## Examples\n- **Google Fonts (
|
|
1
|
+
export declare const fontsMdxTemplate = "---\ntitle: \"Fonts\"\ndescription: \"Customize the documentation typography with a fonts.json file (Google Fonts or local custom fonts).\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 6\n---\n# Fonts\nDefine your site\u2019s typography with a `fonts.json` file. You can load fonts from Google Fonts or from local font files bundled with your project.\n\n## fonts.json\nPlace a `fonts.json` at your project root (the same folder where you execute `npx doccupine`). Choose one of the following configurations depending on the source of your fonts.\n\n## Google Fonts\nUse this when your font is hosted by Google Fonts.\n\n```json\n{\n \"googleFont\": {\n \"fontName\": \"Work_Sans\",\n \"subsets\": [\"latin\"],\n \"weight\": \"400\"\n }\n}\n```\n\n### Rules\n- **fontName**: Capitalize each word. If the name contains spaces, replace them with `_`.\n - Example: \"Work Sans\" \u2192 `Work_Sans`\n- **subsets**: Pick the subsets you need (for example, `latin`).\n- **weight**: The font weight to load - a single string (for example, `\"400\"`) or an array of strings (for example, `[\"400\", \"500\", \"700\"]`).\n\n### Tips\n- **One primary family**: Start with a single family and weight, then add more if needed.\n- **Readability**: Choose readable body fonts; reserve display fonts for headings.\n\n## Local custom fonts\nUse this when you want to ship your own font files. Upload your font files to the Next.js `public` directory, then reference them with relative paths.\n\n```json\n{\n \"localFonts\": {\n \"src\": [\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"400\",\n \"style\": \"normal\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"400\",\n \"style\": \"italic\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"700\",\n \"style\": \"normal\"\n },\n {\n \"path\": \"../public/font.woff\",\n \"weight\": \"700\",\n \"style\": \"italic\"\n }\n ]\n }\n}\n```\n\n### Single file shorthand\nIf you have only one file, you can use:\n\n```json\n{\n \"localFonts\": \"../public/font.woff\"\n}\n```\n\n### Rules\n- **Upload files**: Place `font.woff` (and any additional weights/styles) in your Next.js `public` directory.\n- **path**: Use a relative path to the file from where it is consumed by your build tooling; the example above uses `../public/font.woff`.\n- **weight**: String value of the font weight (for example, `\"400\"`, `\"700\"`).\n- **style**: `\"normal\"` or `\"italic\"`.\n\n### Tips\n- **Provide only what you need**: Include the minimal set of weights/styles to keep bundle size small.\n- **File formats**: `.woff` is broadly supported and recommended for the web.\n\n## Behavior\n- **Placement**: Put `fonts.json` in the project root alongside `config.json` and (optionally) `theme.json`.\n- **Validation**: Follow the naming rule for `googleFont.fontName` (capitalize, replace spaces with `_`).\n- **Local files**: Ensure the referenced files exist under the Next.js `public` directory.\n\n## Examples\n- **Google Fonts (single weight)**\n\n```json\n{\n \"googleFont\": {\n \"fontName\": \"Work_Sans\",\n \"subsets\": [\"latin\"],\n \"weight\": \"400\"\n }\n}\n```\n\n- **Google Fonts (multiple weights)**\n\n```json\n{\n \"googleFont\": {\n \"fontName\": \"Work_Sans\",\n \"subsets\": [\"latin\"],\n \"weight\": [\"400\", \"500\", \"600\", \"700\"]\n }\n}\n```\n\n- **Local fonts (multiple weights/styles)**\n\n```json\n{\n \"localFonts\": {\n \"src\": [\n { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"normal\" },\n { \"path\": \"../public/font.woff\", \"weight\": \"400\", \"style\": \"italic\" },\n { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"normal\" },\n { \"path\": \"../public/font.woff\", \"weight\": \"700\", \"style\": \"italic\" }\n ]\n }\n}\n```\n";
|
|
@@ -29,7 +29,7 @@ Use this when your font is hosted by Google Fonts.
|
|
|
29
29
|
- **fontName**: Capitalize each word. If the name contains spaces, replace them with \`_\`.
|
|
30
30
|
- Example: "Work Sans" → \`Work_Sans\`
|
|
31
31
|
- **subsets**: Pick the subsets you need (for example, \`latin\`).
|
|
32
|
-
- **weight**: The font weight to load (for example, \`"400"\`).
|
|
32
|
+
- **weight**: The font weight to load - a single string (for example, \`"400"\`) or an array of strings (for example, \`["400", "500", "700"]\`).
|
|
33
33
|
|
|
34
34
|
### Tips
|
|
35
35
|
- **One primary family**: Start with a single family and weight, then add more if needed.
|
|
@@ -92,7 +92,7 @@ If you have only one file, you can use:
|
|
|
92
92
|
- **Local files**: Ensure the referenced files exist under the Next.js \`public\` directory.
|
|
93
93
|
|
|
94
94
|
## Examples
|
|
95
|
-
- **Google Fonts (
|
|
95
|
+
- **Google Fonts (single weight)**
|
|
96
96
|
|
|
97
97
|
\`\`\`json
|
|
98
98
|
{
|
|
@@ -104,6 +104,18 @@ If you have only one file, you can use:
|
|
|
104
104
|
}
|
|
105
105
|
\`\`\`
|
|
106
106
|
|
|
107
|
+
- **Google Fonts (multiple weights)**
|
|
108
|
+
|
|
109
|
+
\`\`\`json
|
|
110
|
+
{
|
|
111
|
+
"googleFont": {
|
|
112
|
+
"fontName": "Work_Sans",
|
|
113
|
+
"subsets": ["latin"],
|
|
114
|
+
"weight": ["400", "500", "600", "700"]
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
\`\`\`
|
|
118
|
+
|
|
107
119
|
- **Local fonts (multiple weights/styles)**
|
|
108
120
|
|
|
109
121
|
\`\`\`json
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const themeMdxTemplate = "---\ntitle: \"Theme\"\ndescription: \"Customize the documentation UI colors with a theme.json file.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n# Theme\nDefine your site\u2019s color system with a `theme.json` file. This lets you tailor the look and feel of your documentation without changing content.\n\n## theme.json\nPlace a `theme.json` at your project root (the same folder where you execute `npx doccupine`). It supports multiple modes. Define a `default` mode and a `dark` mode.\n\n```json\n{\n \"default\": {\n \"primaryLight\": \"#
|
|
1
|
+
export declare const themeMdxTemplate = "---\ntitle: \"Theme\"\ndescription: \"Customize the documentation UI colors with a theme.json file.\"\ndate: \"2025-01-15\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 4\n---\n# Theme\nDefine your site\u2019s color system with a `theme.json` file. This lets you tailor the look and feel of your documentation without changing content.\n\n## theme.json\nPlace a `theme.json` at your project root (the same folder where you execute `npx doccupine`). It supports multiple modes. Define a `default` mode and a `dark` mode.\n\n```json\n{\n \"default\": {\n \"primaryLight\": \"#93c5fd\",\n \"primary\": \"#3b82f6\",\n \"primaryDark\": \"#1e40af\",\n \"secondaryLight\": \"#c4b5fd\",\n \"secondary\": \"#8b5cf6\",\n \"secondaryDark\": \"#5b21b6\",\n \"tertiaryLight\": \"#fbbf24\",\n \"tertiary\": \"#f59e0b\",\n \"tertiaryDark\": \"#d97706\",\n \"grayLight\": \"#f3f4f6\",\n \"gray\": \"#9ca3af\",\n \"grayDark\": \"#374151\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#000000\",\n \"light\": \"#ffffff\"\n },\n \"dark\": {\n \"primaryLight\": \"#9bcaff\",\n \"primary\": \"#1e7ae0\",\n \"primaryDark\": \"#033d7e\",\n \"secondaryLight\": \"#ddd6fe\",\n \"secondary\": \"#a78bfa\",\n \"secondaryDark\": \"#7c3aed\",\n \"tertiaryLight\": \"#fed7aa\",\n \"tertiary\": \"#fb923c\",\n \"tertiaryDark\": \"#ea580c\",\n \"grayLight\": \"#1f2937\",\n \"gray\": \"#6b7280\",\n \"grayDark\": \"#9ca3af\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#ffffff\",\n \"light\": \"#000000\"\n },\n \"logo\": {\n \"dark\": \"https://doccupine.com/logo-dark.svg\",\n \"light\": \"https://doccupine.com/logo-light.svg\"\n }\n}\n```\n\n## Modes\n- **default**: The base color palette for your site.\n- **dark**: Dark\u2011mode palette.\n\n## Fields\n- **primaryLight**: A lighter variant of your brand color, used for subtle accents and backgrounds.\n- **primary**: The main brand color.\n- **primaryDark**: A darker variant of your brand color for emphasis and hover states.\n- **secondaryLight**: A lighter variant of your secondary color, used for subtle accents and backgrounds.\n- **secondary**: The secondary brand color used for highlights and UI accents.\n- **secondaryDark**: A darker variant of your secondary color for emphasis and hover states.\n- **tertiaryLight**: A lighter variant of your tertiary color, used for subtle accents and backgrounds.\n- **tertiary**: The tertiary accent color.\n- **tertiaryDark**: A darker variant of your tertiary color for emphasis and hover states.\n- **grayLight**: Light gray for surfaces and borders.\n- **gray**: Neutral gray for text and UI elements.\n- **grayDark**: Dark gray for headings or high\u2011contrast text.\n- **success**: Positive/confirmation color.\n- **error**: Error/destructive color.\n- **warning**: Warning/attention color.\n- **info**: Informational/highlight color.\n- **dark**: The darkest/base color (often page background in dark mode).\n- **light**: The lightest/base color (often page background in light mode).\n- **logo.light**: Path or URL to the logo used on light backgrounds. Recommended size: 164\u00D730 px.\n- **logo.dark**: Path or URL to the logo used on dark backgrounds. Recommended size: 164\u00D730 px.\n\n## Behavior\n- **Placement**: Put `theme.json` in the project root alongside `config.json`.\n- **Validation**: Use valid hex colors (e.g., `#22c55e`).\n- **Partial palettes**: If a key is missing in a mode, consumers may fall back to the `default` value.\n- **Logo size**: Recommended dimensions are 164px width and 30px height.\n\n## Tips\n- **Contrast**: Ensure sufficient contrast between text and backgrounds for readability.\n- **Branding**: Start with your brand\u2019s `primary` color, then derive `primaryLight` and `primaryDark`.\n- **Iterate**: Adjust colors and refresh the site to preview changes quickly.\n\n# Demo\nIn the following demos, you can see how the theme can be changed. To override the theme, create a `theme.json` file in the project root and copy paste the code below.\n\n<DemoTheme variant=\"purple\" />\n<DemoTheme variant=\"green\" />\n<DemoTheme variant=\"yellow\" />\n<DemoTheme />\n\n## Purple\n\n```json\n{\n \"default\": {\n \"primaryLight\": \"#c4b5fd\",\n \"primary\": \"#8b5cf6\",\n \"primaryDark\": \"#5b21b6\",\n \"secondaryLight\": \"#86efac\",\n \"secondary\": \"#22c55e\",\n \"secondaryDark\": \"#15803d\",\n \"tertiaryLight\": \"#fbbf24\",\n \"tertiary\": \"#f59e0b\",\n \"tertiaryDark\": \"#d97706\",\n \"grayLight\": \"#f3f4f6\",\n \"gray\": \"#9ca3af\",\n \"grayDark\": \"#374151\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#000000\",\n \"light\": \"#ffffff\"\n },\n \"dark\": {\n \"primaryLight\": \"#ddd6fe\",\n \"primary\": \"#a78bfa\",\n \"primaryDark\": \"#7c3aed\",\n \"secondaryLight\": \"#6ee7b7\",\n \"secondary\": \"#10b981\",\n \"secondaryDark\": \"#065f46\",\n \"tertiaryLight\": \"#fed7aa\",\n \"tertiary\": \"#fb923c\",\n \"tertiaryDark\": \"#ea580c\",\n \"grayLight\": \"#1f2937\",\n \"gray\": \"#6b7280\",\n \"grayDark\": \"#9ca3af\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#ffffff\",\n \"light\": \"#000000\"\n }\n}\n```\n<DemoTheme variant=\"purple\" />\n\n## Green\n\n```json\n{\n \"default\": {\n \"primaryLight\": \"#86efac\",\n \"primary\": \"#22c55e\",\n \"primaryDark\": \"#15803d\",\n \"secondaryLight\": \"#c4b5fd\",\n \"secondary\": \"#8b5cf6\",\n \"secondaryDark\": \"#5b21b6\",\n \"tertiaryLight\": \"#fbbf24\",\n \"tertiary\": \"#f59e0b\",\n \"tertiaryDark\": \"#d97706\",\n \"grayLight\": \"#f3f4f6\",\n \"gray\": \"#9ca3af\",\n \"grayDark\": \"#374151\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#000000\",\n \"light\": \"#ffffff\"\n },\n \"dark\": {\n \"primaryLight\": \"#6ee7b7\",\n \"primary\": \"#10b981\",\n \"primaryDark\": \"#065f46\",\n \"secondaryLight\": \"#ddd6fe\",\n \"secondary\": \"#a78bfa\",\n \"secondaryDark\": \"#7c3aed\",\n \"tertiaryLight\": \"#fed7aa\",\n \"tertiary\": \"#fb923c\",\n \"tertiaryDark\": \"#ea580c\",\n \"grayLight\": \"#1f2937\",\n \"gray\": \"#6b7280\",\n \"grayDark\": \"#9ca3af\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#ffffff\",\n \"light\": \"#000000\"\n }\n}\n```\n<DemoTheme variant=\"green\" />\n\n## Yellow\n\n```json\n{\n \"default\": {\n \"primaryLight\": \"#fbbf24\",\n \"primary\": \"#f59e0b\",\n \"primaryDark\": \"#d97706\",\n \"secondaryLight\": \"#c4b5fd\",\n \"secondary\": \"#8b5cf6\",\n \"secondaryDark\": \"#5b21b6\",\n \"tertiaryLight\": \"#86efac\",\n \"tertiary\": \"#22c55e\",\n \"tertiaryDark\": \"#15803d\",\n \"grayLight\": \"#f3f4f6\",\n \"gray\": \"#9ca3af\",\n \"grayDark\": \"#374151\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#000000\",\n \"light\": \"#ffffff\"\n },\n \"dark\": {\n \"primaryLight\": \"#fed7aa\",\n \"primary\": \"#fb923c\",\n \"primaryDark\": \"#ea580c\",\n \"secondaryLight\": \"#ddd6fe\",\n \"secondary\": \"#a78bfa\",\n \"secondaryDark\": \"#7c3aed\",\n \"tertiaryLight\": \"#6ee7b7\",\n \"tertiary\": \"#10b981\",\n \"tertiaryDark\": \"#065f46\",\n \"grayLight\": \"#1f2937\",\n \"gray\": \"#6b7280\",\n \"grayDark\": \"#9ca3af\",\n \"success\": \"#10b981\",\n \"error\": \"#f43f5e\",\n \"warning\": \"#f59e0b\",\n \"info\": \"#3b82f6\",\n \"dark\": \"#ffffff\",\n \"light\": \"#000000\"\n }\n}\n```\n\n<DemoTheme variant=\"yellow\" />";
|
|
@@ -15,9 +15,9 @@ Place a \`theme.json\` at your project root (the same folder where you execute \
|
|
|
15
15
|
\`\`\`json
|
|
16
16
|
{
|
|
17
17
|
"default": {
|
|
18
|
-
"primaryLight": "#
|
|
19
|
-
"primary": "#
|
|
20
|
-
"primaryDark": "#
|
|
18
|
+
"primaryLight": "#93c5fd",
|
|
19
|
+
"primary": "#3b82f6",
|
|
20
|
+
"primaryDark": "#1e40af",
|
|
21
21
|
"secondaryLight": "#c4b5fd",
|
|
22
22
|
"secondary": "#8b5cf6",
|
|
23
23
|
"secondaryDark": "#5b21b6",
|
|
@@ -35,9 +35,9 @@ Place a \`theme.json\` at your project root (the same folder where you execute \
|
|
|
35
35
|
"light": "#ffffff"
|
|
36
36
|
},
|
|
37
37
|
"dark": {
|
|
38
|
-
"primaryLight": "#
|
|
39
|
-
"primary": "#
|
|
40
|
-
"primaryDark": "#
|
|
38
|
+
"primaryLight": "#9bcaff",
|
|
39
|
+
"primary": "#1e7ae0",
|
|
40
|
+
"primaryDark": "#033d7e",
|
|
41
41
|
"secondaryLight": "#ddd6fe",
|
|
42
42
|
"secondary": "#a78bfa",
|
|
43
43
|
"secondaryDark": "#7c3aed",
|
package/package.json
CHANGED