Astro components and layout package built with Panda CSS.
Demo
https://cieloazul310.github.io/astro-sarkara
Astro
https://astro.build/
Panda CSS
https://panda-css.com/
npm create astro@latest -- --template cieloazul310/astro-sarkara-starter
npm create astro@latest
https://docs.astro.build/ja/getting-started/
npm install -D @pandacss/dev @pandacss/astro
npx panda init
// astro.config.ts
import { defineConfig } from 'astro/config';
import pandacss from '@pandacss/astro';
export default defineConfig({
integrations: [pandacss()],
});
{
"scripts": {
"prepare": "panda codegen",
}
}
https://panda-css.com/docs/installation/astro
npm install @cieloazul310/astro-sarkara
// panda.config.ts
import { defineSarkaraConfig } from "@cieloazul310/astro-sarkara/preset";
export default defineSarkaraConfig({
palette: { primary: "teal", secondary: "yellow" },
include: ["./src/**/*.{js,jsx,ts,tsx,astro,mdx}"],
// ...pandaConfig,
});
https://panda-css.com/docs/references/config
rm -rf styled-system
npm run prepare
---
// src/pages/index.astro
import { defineSiteMetadata, SarkaraLayout } from "@cieloazul310/astro-sarkara";
const siteMetadata = defineSiteMetadata({
title: "Site title",
description: "Site description",
});
---
<SarkaraLayout siteMetadata={siteMetadata}>
<!-- contents -->
</SarkaraLayout>
---
// src/pages/index.astro
import {
defineSiteMetadata,
SarkaraLayout,
Paper,
} from "@cieloazul310/astro-sarkara";
import { css } from "@cieloazul310/sarkara-css";
const siteMetadata = defineSiteMetadata({
title: "Site title",
description: "Site description",
});
---
<SarkaraLayout siteMetadata={siteMetadata}>
<Paper>
<p class={css({ fontSize: "xl" })}>Hello, Astro</p>
</Paper>
</SarkaraLayout>
// import { defineConfig } from "@pandacss/dev";
import {
defineSarkaraConfig,
// createSarkaraPreset,
// astroComponentsPaths,
} from "@cieloazul310/astro-sarkara/preset";
export default defineSarkaraConfig({
palette: { primary: "teal", secondary: "yellow" },
include: ["./src/**/*.{js,jsx,ts,tsx,astro,mdx}"],
// ...pandaConfig,
});
/* equivalent to
export default defineConfig({
presets: [
"@pandacss/dev/presets",
createSarkaraPreset({ palette: { primary: "teal", secondary: "yellow" } }),
],
include: ["./src/**/*.{js,ts,astro}", ...astroComponentsPaths],
outdir: "@cieloazul310/sarkara-css",
emitPackage: true,
});
*/
https://panda-css.com/docs/references/config#presets
colors.primary
and colors.secondary
is required, and you can set any colors.
https://panda-css.com/docs/customization/theme#colors
primary: teal
secondary: yellow
danger: red
primary.100 => teal.100
secondary.600 => yellow.600
danger.800 => red.800
Whether to emit the artifacts to node_modules as a package. Will generate a package.json file that contains exports for each of the the generated outdir entrypoints: