rsnext/examples/with-stitches/stitches.config.ts
Steven 4466ba436b
chore(examples): use default prettier for examples/templates (#60530)
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00

82 lines
1.7 KiB
TypeScript

import type * as Stitches from "@stitches/react";
import { createStitches } from "@stitches/react";
export const {
config,
createTheme,
css,
getCssText,
globalCss,
styled,
theme,
} = createStitches({
theme: {
colors: {
hiContrast: "hsl(206,10%,5%)",
loContrast: "white",
gray100: "hsl(206,22%,99%)",
gray200: "hsl(206,12%,97%)",
gray300: "hsl(206,11%,92%)",
gray400: "hsl(206,10%,84%)",
gray500: "hsl(206,10%,76%)",
gray600: "hsl(206,10%,44%)",
purple100: "hsl(252,100%,99%)",
purple200: "hsl(252,100%,98%)",
purple300: "hsl(252,100%,94%)",
purple400: "hsl(252,75%,84%)",
purple500: "hsl(252,78%,60%)",
purple600: "hsl(252,80%,53%)",
},
space: {
1: "5px",
2: "10px",
3: "15px",
4: "20px",
5: "25px",
6: "35px",
},
sizes: {
1: "5px",
2: "10px",
3: "15px",
4: "20px",
5: "25px",
6: "35px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
4: "17px",
5: "19px",
6: "21px",
},
fonts: {
system: "system-ui",
},
},
utils: {
marginX: (value: Stitches.PropertyValue<"margin">) => ({
marginLeft: value,
marginRight: value,
}),
marginY: (value: Stitches.PropertyValue<"margin">) => ({
marginTop: value,
marginBottom: value,
}),
paddingX: (value: Stitches.PropertyValue<"padding">) => ({
paddingLeft: value,
paddingRight: value,
}),
paddingY: (value: Stitches.PropertyValue<"padding">) => ({
paddingTop: value,
paddingBottom: value,
}),
},
media: {
bp1: "(min-width: 520px)",
bp2: "(min-width: 900px)",
},
});