chakra-ui-solid is a component system for building products with speed

import { defineChakraConfig } from "@chakra-ui-solid/panda-preset";

export default defineChakraConfig({
  theme: {
    extend: {
      semanticTokens: {
        colors: {
          brand: {
            value: { base: "{colors.teal.600}", _dark: "{colors.teal.400}" },
          },
        },
      },
    },
  },
  include: ["./src/**/*.{ts,tsx}"],
  outdir: "styled-system-app",
});

import { Box } from "chakra-ui-solid";

export function Hero() {
  return (
    <Box as="section" display="flex" flexDirection="column" gap="3">
      <Box as="h1" textStyle="5xl" fontFamily="heading" letterSpacing="tighter" color="fg">
        Ship the whole design system
      </Box>
      <Box as="p" textStyle="lg" color="fg.muted">
        One scale for every heading, label and caption on the page.
      </Box>
    </Box>
  );
}

import { cva } from "@chakra-ui-solid/styled-system/css";
import { Box } from "chakra-ui-solid";

const badge = cva({
  base: {
    display: "inline-flex",
    alignItems: "center",
    borderRadius: "l1",
    fontWeight: "medium",
    px: "3",
    py: "1",
  },
  variants: {
    tone: {
      subtle: { bg: "colorPalette.subtle", color: "colorPalette.fg" },
      solid: { bg: "colorPalette.solid", color: "colorPalette.contrast" },
    },
  },
  defaultVariants: { tone: "subtle" },
});

export function Badge() {
  return (
    <Box colorPalette="teal" display="flex" gap="2">
      <Box class={badge()}>Draft</Box>
      <Box class={badge({ tone: "solid" })}>Shipped</Box>
    </Box>
  );
}