styple has a default theming in its stitches.config which exports the following for use (see Stitches API docs):
// @styple/design-system exports this besides components
export {
styled, // create styled components
css, // generate class names from a style object
theme, // default light theme
createTheme, // create custom themes
getCssText, // generate styles server-side
globalCss, // create your own global-styles
keyframes, // keyframes for animation
config, // hydrated config
globalStyles, // styple global-styles
darkTheme, // default dark theme
} from "./stitches.config";
A styple theme has the following theme tokens (you can create your own themes via createTheme):
const defaultTheme = {
colors: {
/*
- Element based colors:
text100-text300
bg100-bg300
bg100A-bg300A (alpha/transparent)
bg100E-bg300E (elavation, mostly used for panels on dark modes)
button100-button300
button100A-button300A
- Semantic colors:
primary100-primary300
primary100A-primary200A (only 100A-200A for semantic colors)
accent100-accent300
accent100A-accent200A
danger100-danger300
danger100A-danger200A
success100-success300
success100A-success200A
*/
// ... actual colors omitted
},
fonts: {
inter:
"Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
mono: "Söhne Mono, menlo, monospace",
},
fontWeights: {
reg: 400,
semibold: 500,
bold: 700,
black: 900,
},
space: {
xs: "4px",
sm: "8px",
md: "12px",
lg: "16px",
xl: "24px",
"2xl": "32px",
"3xl": "48px",
"4xl": "64px",
max: "128px",
},
sizes: {
xs: "8px",
sm: "16px",
md: "24px",
lg: "32px",
xl: "48px",
"2xl": "64px",
"3xl": "128px",
"4xl": "576px",
max: "1200px",
},
fontSizes: {
xs: "14px",
sm: "16px",
md: "20px",
lg: "24px",
xl: "32px",
"2xl": "40px",
"3xl": "48px",
"4xl": "64px",
max: "72px",
},
radii: {
xs: "2px",
sm: "4px",
md: "6px",
lg: "8px",
xl: "12px",
"2xl": "16px",
round: "50%",
pill: "9999px",
},
lineHeights: {
normal: "1.5",
},
letterSpacings: {
normal: "normal",
},
borderWidths: {
sm: "1px",
md: "2px",
lg: "4px",
xl: "8px",
},
shadows: {
sm:
"0px 2px 8px -2px rgba(22, 23, 24, 0.35), 0px 2px 5px -3px rgba(22, 23, 24, 0.2)",
md:
"0px 5px 16px -5px rgba(22, 23, 24, 0.35), 0px 5px 10px -7px rgba(22, 23, 24, 0.2)",
lg:
"0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
},
zIndices: {
1: "100",
2: "200",
3: "300",
4: "400",
max: "999",
},
transitions: {
color: "color 0.2s ease-in-out",
bgColor: "background-color 0.2s ease-in-out",
transform: "transform 0.2s ease-in-out",
border: "border 0.2s ease-in-out",
boxShadow: "box-shadow 0.2s ease-in-out",
opacity: "opacity 0.2s ease-in-out",
},
};
Example of using theme tokens with a component (they are also used internally for styles and variants):
// Imports
import { Button } from "@styple/design-system";
import { Coffee } from "lucide-react";
// Somewhere in your file
<Button css={{ fontWeight: "$black" }}>
Example Button <Coffee size="20" style={{ verticalAlign: "middle" }} />
</Button>
styple has the following media queries:
media: {
bp1: "(min-width: 576px)",
bp2: "(min-width: 768px)",
bp3: "(min-width: 992px)",
bp4: "(min-width: 1200px)",
motion: "(prefers-reduced-motion)",
},
styple has the following style utilities:
utils: {
// Margin utils
m: (value: Stitches.PropertyValue<"margin">) => ({
margin: value,
}),
mt: (value: Stitches.PropertyValue<"marginTop">) => ({
marginTop: value,
}),
// ... mr, mb, ml, mx, my
// Padding utils
p: (value: Stitches.PropertyValue<"padding">) => ({
padding: value,
}),
pt: (value: Stitches.PropertyValue<"paddingTop">) => ({
paddingTop: value,
}),
// ... pr, pb, pl, px, py
// Util for applying width and height at the same time with same value
size: (value: Stitches.PropertyValue<"width">) => ({
width: value,
height: value,
}),
minSize: (value: Stitches.PropertyValue<"minWidth">) => ({
minWidth: value,
minHeight: value,
}),
maxSize: (value: Stitches.PropertyValue<"maxWidth">) => ({
maxWidth: value,
maxHeight: value,
}),
// Shorthand util for backgroundColor
bg: (value: Stitches.PropertyValue<"backgroundColor">) => ({
backgroundColor: value,
}),
},
styple's optional global styles are based on this article. It has some opinionated additions, most notably:
export const globalStyles = globalCss({
// ...
// Assumes local hosting of the Inter variable font at /fonts
"@font-face": {
fontFamily: "Inter",
fontStyle: "normal",
fontWeight: "100 900",
fontDisplay: "optional",
src: "url(/fonts/inter-var-latin.woff2) format('woff2')",
unicodeRange:
"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
},
body: {
fontFamily: "$inter",
lineHeight: "$normal",
letterSpacing: "$normal",
bg: "$bg200",
"-webkit-font-smoothing": "antialiased",
},
//...
".image-in-card": {
borderRadius: "$xl",
zIndex: "-1",
filter: "brightness(55%)",
},
});