Skip to content

Instantly share code, notes, and snippets.

@55Cancri

55Cancri/index.ts

Last active May 24, 2023 20:11
Show Gist options
  • Save 55Cancri/e369cb7325d13d6b5921a06d0a8b80cb to your computer and use it in GitHub Desktop.
Save 55Cancri/e369cb7325d13d6b5921a06d0a8b80cb to your computer and use it in GitHub Desktop.
Download ZIP
theme modules
Raw
index.ts
// modules/theme/index.ts
// spread the scales in your light and dark themes
import { createStitches } from "@stitches/react";
import type * as Stitches from "@stitches/react";
import * as Dict from "shared/dict";
import * as _l from "./literals";
import { Token } from "@stitches/react/types/theme";
const { globalCss, createTheme, theme, styled, config } = createStitches({
prefix: "radix",
// !! make sure these all added to the isStyleProp fn so they don't get filtered
utils: {
// layout
g: (value: Stitches.PropertyValue<"gap">) => ({
gap: value,
}),
autoCols: (value: Stitches.PropertyValue<"gridAutoColumns"> | boolean) => {
return {
gridAutoFlow: "column",
gridAutoColumns: value === true ? "max-content" : value,
};
},
autoRows: (value: Stitches.PropertyValue<"gridAutoRows"> | boolean) => {
return {
gridAutoFlow: "row",
gridAutoRows: value === true ? "max-content" : value,
};
},
afc: (value: Stitches.PropertyValue<"gridAutoColumns"> | boolean) => {
return {
gridAutoFlow: "column",
gridAutoColumns: value === true ? "max-content" : value,
};
},
afr: (value: Stitches.PropertyValue<"gridAutoRows"> | boolean) => {
return {
gridAutoFlow: "row",
gridAutoRows: value === true ? "max-content" : value,
};
},
cols: (value: Stitches.PropertyValue<"gridTemplateColumns">) => {
const gridTemplateColumns = value
// @ts-ignore
.replace(/mx/g, "max-content")
.replace(/r(\d+)\(([^()]+)\)/g, "repeat($1, $2)");
return { gridTemplateColumns };
},
rows: (value: Stitches.PropertyValue<"gridTemplateRows">) => {
const gridTemplateRows = value
// @ts-ignore
.replace(/mx/g, "max-content")
.replace(/r(\d+)\(([^()]+)\)/g, "repeat($1, $2)");
return { gridTemplateRows };
},
cl: (value: Stitches.PropertyValue<"gridTemplateColumns">) => ({
gridTemplateColumns: value,
}),
rw: (value: Stitches.PropertyValue<"gridTemplateRows">) => ({
gridTemplateRows: value,
}),
cg: (value: Stitches.PropertyValue<"columnGap">) => ({
columnGap: value,
}),
colG: (value: Stitches.PropertyValue<"columnGap">) => ({
columnGap: value,
}),
rg: (value: Stitches.PropertyValue<"rowGap">) => ({
rowGap: value,
}),
rowG: (value: Stitches.PropertyValue<"rowGap">) => ({
rowGap: value,
}),
ai: (value: Stitches.PropertyValue<"alignItems"> | boolean) => ({
alignItems: value === true ? "center" : value,
}),
alignI: (value: Stitches.PropertyValue<"alignItems"> | boolean) => ({
alignItems: value === true ? "center" : value,
}),
ac: (value: Stitches.PropertyValue<"alignContent"> | boolean) => ({
alignContent: value === true ? "center" : value,
}),
alignC: (value: Stitches.PropertyValue<"alignContent"> | boolean) => ({
alignContent: value === true ? "center" : value,
}),
alignS: (value: Stitches.PropertyValue<"alignSelf"> | boolean) => ({
alignSelf: value === true ? "center" : value,
}),
ji: (value: Stitches.PropertyValue<"justifyItems"> | boolean) => ({
justifyItems: value === true ? "center" : value,
}),
justifyI: (value: Stitches.PropertyValue<"justifyItems"> | boolean) => ({
justifyItems: value === true ? "center" : value,
}),
jc: (value: Stitches.PropertyValue<"justifyContent"> | boolean) => ({
justifyContent: value === true ? "center" : value,
}),
justifyC: (value: Stitches.PropertyValue<"justifyContent"> | boolean) => ({
justifyContent: value === true ? "center" : value,
}),
justifyS: (value: Stitches.PropertyValue<"justifyContent"> | boolean) => ({
justifySelf: value === true ? "center" : value,
}),
pi: (value: Stitches.PropertyValue<"placeItems"> | boolean) => ({
placeItems: value === true ? "center" : value,
}),
placeI: (value: Stitches.PropertyValue<"placeItems"> | boolean) => ({
placeItems: value === true ? "center" : value,
}),
pc: (value: Stitches.PropertyValue<"placeContent"> | boolean) => ({
placeContent: value === true ? "center" : value,
}),
placeC: (value: Stitches.PropertyValue<"placeContent"> | boolean) => ({
placeContent: value === true ? "center" : value,
}),
placeS: (value: Stitches.PropertyValue<"placeSelf"> | boolean) => ({
placeSelf: value === true ? "center" : value,
}),
// abbreviated margin properties
m: (value: Stitches.PropertyValue<"margin">) => ({
margin: value,
}),
mt: (value: Stitches.PropertyValue<"marginTop">) => ({
marginTop: value,
}),
mr: (value: Stitches.PropertyValue<"marginRight">) => ({
marginRight: value,
}),
mb: (value: Stitches.PropertyValue<"marginBottom">) => ({
marginBottom: value,
}),
ml: (value: Stitches.PropertyValue<"marginLeft">) => ({
marginLeft: value,
}),
mx: (value: Stitches.PropertyValue<"marginInline">) => ({
marginLeft: value,
marginRight: value,
}),
my: (value: Stitches.PropertyValue<"marginBlock">) => ({
marginTop: value,
marginBottom: value,
}),
// abbreviated padding properties
p: (value: Stitches.PropertyValue<"padding">) => ({
padding: value,
}),
pt: (value: Stitches.PropertyValue<"paddingTop">) => ({
paddingTop: value,
}),
pr: (value: Stitches.PropertyValue<"paddingRight">) => ({
paddingRight: value,
}),
pb: (value: Stitches.PropertyValue<"paddingBottom">) => ({
paddingBottom: value,
}),
pl: (value: Stitches.PropertyValue<"paddingLeft">) => ({
paddingLeft: value,
}),
px: (value: Stitches.PropertyValue<"paddingInline">) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (value: Stitches.PropertyValue<"paddingBlock">) => ({
paddingTop: value,
paddingBottom: value,
}),
h: (value: Stitches.PropertyValue<"height">) => ({
height: value,
}),
w: (value: Stitches.PropertyValue<"width"> | boolean) => ({
width: value === true ? "100%" : value,
}),
width: (value: Stitches.PropertyValue<"width"> | boolean) => ({
width: value === true ? "100%" : value,
}),
mnh: (value: Stitches.PropertyValue<"minHeight">) => ({
minHeight: value,
}),
minH: (value: Stitches.PropertyValue<"minHeight">) => ({
minHeight: value,
}),
mxh: (value: Stitches.PropertyValue<"maxHeight">) => ({
maxHeight: value,
}),
maxH: (value: Stitches.PropertyValue<"maxHeight">) => ({
maxHeight: value,
}),
mnw: (value: Stitches.PropertyValue<"minWidth">) => ({
minWidth: value,
}),
minW: (value: Stitches.PropertyValue<"minWidth">) => ({
minWidth: value,
}),
mxw: (value: Stitches.PropertyValue<"maxWidth">) => ({
maxWidth: value,
}),
maxW: (value: Stitches.PropertyValue<"maxWidth">) => ({
maxWidth: value,
}),
// a property for applying width/height together
size: (value: Stitches.PropertyValue<"width">) => ({
width: value,
height: value,
}),
fs: (value: Stitches.PropertyValue<"fontSize">) => ({
fontSize: value,
}),
// bg: (value: StandardShorthandProperties["background"]) => ({
// background: value,
// }),
bg: (value: Stitches.CSS["background"]) => ({
background: value,
}),
// a property to apply linear gradient
linearGradient: (value: Stitches.PropertyValue<"margin">) => ({
backgroundImage: `linear-gradient(${value})`,
}),
// an abbreviated property for border-radius
br: (value: Stitches.PropertyValue<"borderRadius"> | boolean) => ({
borderRadius: value === true ? "100%" : value,
}),
b: (value: Stitches.PropertyValue<"border">) => ({
border: value,
}),
_disabled: (styles: Stitches.CSS) => ({
"&:disabled": styles,
}),
_focus: (styles: Stitches.CSS) => ({
"&:focus": styles,
}),
_focusWithin: (styles: Stitches.CSS) => ({
"&:focus-within": styles,
}),
_focusVisible: (styles: Stitches.CSS) => ({
"&:focus-visible": styles,
}),
_notFocusVisible: (styles: Stitches.CSS) => ({
"&:not(:focus-visible)": styles,
}),
_focusOutlineOffset: (offset: Stitches.CSS["outlineOffset"]) => ({
"&:not(:active):focus-visible": {
outlineOffset: offset,
},
}),
_active: (styles: Stitches.CSS) => ({
"&:active": styles,
}),
_before: (styles: Stitches.CSS) => ({
"&:before": styles,
}),
_after: (styles: Stitches.CSS) => ({
"&:after": styles,
}),
_hover: (styles: Stitches.CSS) => ({
"&:hover": styles,
}),
tapHighlightColor: (styles: Stitches.PropertyValue<"color">) => ({
"&:-webkit-tap-highlight-color": styles,
}),
scrollbarWidth: (width: Stitches.PropertyValue<"width">) => ({
"&::-webkit-scrollbar": width,
}),
scrollbarColor: (color: Stitches.PropertyValue<"color">) => ({
"&::-webkit-scrollbar-thumb": { backgroundColor: color },
}),
},
theme: {
colors: _l.lightColors,
},
});
export const light = theme;
export const darkTheme = createTheme({
colors: _l.darkColors,
});
/**
* Partition style props
* @param props
* @returns
*/
export const extractStyles = (props: Record<string, any>) => {
const { css, ...rest } = props;
const [styles, args] = Dict.partition(rest, (p) => p in _l.styles);
// fix many image issues by default
styles.minWidth = props.minW ?? props.minWidth ?? 0;
// button: dont show tap circle on mobile
styles["-webkit-tap-highlight-color"] = "transparent";
const updatedStyles = { ...styles, ...css };
return [updatedStyles, args];
};
export const global = (fontFamily: string) =>
globalCss({
html: { color: "$primary", backgroundColor: "$bg" },
// "html, body": { height: "100vh" },
"html, body, #root": {
margin: 0,
padding: 0,
// height: "-webkit-fill-available",
},
"html, body, #root, textarea, input, button, p": {
// note: font is case-sensitive and only works if its titlecase. Must be set in both places.
fontFamily: `${fontFamily}, Gantari, serif`,
// fontFamily: "Varela Round, sans-serif",
},
"#root": {
display: "grid",
},
"*": {
boxSizing: "border-box",
},
});
export type Css = Stitches.CSS<typeof config>;
export type Color = Token<any, any, "colors", any> | Css["color"];
export type GetProps<
T extends React.ElementType<any>,
CustomProps = object
> = Omit<
React.ComponentPropsWithoutRef<T>,
"key" | "color" | "children" | "transition"
> &
Css &
CustomProps;
const colors = theme.colors;
const dark = darkTheme.colors;
export { styled, dark, colors };
/**
* semantic naming: https://www.radix-ui.com/docs/colors/getting-started/aliasing
* 1. avoid using specific variable names like "CardBg", or "Tooltip", because you will
* likely need to use each variable for multiple use cases.
*
* 2. referencing color scales by their actual scale name can work well, but you will
* likely run into issues where you need to use the same scale for multiple semantics.
* Common examples include:
* - if you map yellow to "warning", you might also need yellow to communicate "pending".
* - if you map red to "danger", you might also need red to communicate "error" or "rejected".
* - if you map green to "success", you might also need green to communicate "valid".
* - if you map blue to "accent", you might also need blue to communicate "info".
*
* 3. you can provide aliases based on the designed use cases, but you will likely run into
* issues where you need to use the same step for multiple use cases. Common examples include:
* - step 9 is designed for solid backgrounds, but it also works well for input placeholder text.
* - step 8 is designed for hovered component borders, but it also works well for focus rings.
* in these cases, you can choose to define multiple aliases which map to the same step.
*/
Raw
literals.ts
// modules/theme/literals.ts
import {
// light colors
gray,
blue,
red,
green,
amber,
amberA,
blackA,
blueA,
bronze,
bronzeA,
brown,
brownA,
crimson,
crimsonA,
cyan,
cyanA,
gold,
goldA,
grass,
grassA,
grayA,
greenA,
indigo,
indigoA,
lime,
limeA,
mauve,
mauveA,
mint,
mintA,
olive,
oliveA,
orange,
orangeA,
pink,
pinkA,
plum,
plumA,
purple,
purpleA,
redA,
sage,
sageA,
sand,
sandA,
sky,
skyA,
slate,
slateA,
teal,
tealA,
tomato,
tomatoA,
violet,
violetA,
whiteA,
yellow,
yellowA,
// dark colors
grayDark,
blueDark,
blueDarkA,
redDark,
greenDark,
amberDark,
amberDarkA,
bronzeDark,
bronzeDarkA,
brownDark,
brownDarkA,
crimsonDark,
crimsonDarkA,
cyanDark,
cyanDarkA,
goldDark,
goldDarkA,
grassDark,
grassDarkA,
grayDarkA,
greenDarkA,
indigoDark,
indigoDarkA,
limeDark,
limeDarkA,
mauveDark,
mauveDarkA,
mintDark,
mintDarkA,
oliveDark,
oliveDarkA,
orangeDark,
orangeDarkA,
pinkDark,
pinkDarkA,
plumDark,
plumDarkA,
purpleDark,
purpleDarkA,
redDarkA,
sageDark,
sageDarkA,
sandDark,
sandDarkA,
skyDark,
skyDarkA,
slateDark,
slateDarkA,
tealDark,
tealDarkA,
tomatoDark,
tomatoDarkA,
violetDark,
violetDarkA,
yellowDark,
yellowDarkA,
} from "@radix-ui/colors";
const lightColors = {
white: gray.gray1,
black: gray.gray12,
...gray,
...blue,
...red,
...green,
...amber,
...amberA,
...blackA,
...blueA,
...bronze,
...bronzeA,
...brown,
...brownA,
...crimson,
...crimsonA,
...cyan,
...cyanA,
...gold,
...goldA,
...grass,
...grassA,
...grayA,
...greenA,
...indigo,
...indigoA,
...lime,
...limeA,
...mauve,
...mauveA,
...mint,
...mintA,
...olive,
...oliveA,
...orange,
...orangeA,
...pink,
...pinkA,
...plum,
...plumA,
...purple,
...purpleA,
...redA,
...sage,
...sageA,
...sand,
...sandA,
...sky,
...skyA,
...slate,
...slateA,
...teal,
...tealA,
...tomato,
...tomatoA,
...violet,
...violetA,
...whiteA,
...yellow,
...yellowA,
};
const darkColors = {
white: grayDark.gray1,
black: grayDark.gray12,
...grayDark,
...blueDark,
...blueDarkA,
...redDark,
...greenDark,
...amberDark,
...amberDarkA,
...bronzeDark,
...bronzeDarkA,
...brownDark,
...brownDarkA,
...crimsonDark,
...crimsonDarkA,
...cyanDark,
...cyanDarkA,
...goldDark,
...goldDarkA,
...grassDark,
...grassDarkA,
...grayDarkA,
...greenDarkA,
...indigoDark,
...indigoDarkA,
...limeDark,
...limeDarkA,
...mauveDark,
...mauveDarkA,
...mintDark,
...mintDarkA,
...oliveDark,
...oliveDarkA,
...orangeDark,
...orangeDarkA,
...pinkDark,
...pinkDarkA,
...plumDark,
...plumDarkA,
...purpleDark,
...purpleDarkA,
...redDarkA,
...sageDark,
...sageDarkA,
...sandDark,
...sandDarkA,
...skyDark,
...skyDarkA,
...slateDark,
...slateDarkA,
...tealDark,
...tealDarkA,
...tomatoDark,
...tomatoDarkA,
...violetDark,
...violetDarkA,
...yellowDark,
...yellowDarkA,
};
const background = {
background: true,
backgroundColor: true,
backgroundImage: true,
backgroundSize: true,
backgroundPosition: true,
backgroundRepeat: true,
backgroundAttachment: true,
backgroundClip: true,
bgSize: true,
bgPosition: true,
bg: true,
bgColor: true,
bgPos: true,
bgRepeat: true,
bgAttachment: true,
bgGradient: true,
bgClip: true,
};
const border = {
b: true,
br: true,
border: true,
borderWidth: true,
borderStyle: true,
borderColor: true,
borderRadius: true,
borderTop: true,
borderBlockStart: true,
borderTopLeftRadius: true,
borderStartStartRadius: true,
borderEndStartRadius: true,
borderTopRightRadius: true,
borderStartEndRadius: true,
borderEndEndRadius: true,
borderRight: true,
borderInlineEnd: true,
borderBottom: true,
borderBlockEnd: true,
borderBottomLeftRadius: true,
borderBottomRightRadius: true,
borderLeft: true,
borderInlineStart: true,
borderInlineStartRadius: true,
borderInlineEndRadius: true,
borderX: true,
borderInline: true,
borderY: true,
borderBlock: true,
borderTopWidth: true,
borderBlockStartWidth: true,
borderTopColor: true,
borderBlockStartColor: true,
borderTopStyle: true,
borderBlockStartStyle: true,
borderBottomWidth: true,
borderBlockEndWidth: true,
borderBottomColor: true,
borderBlockEndColor: true,
borderBottomStyle: true,
borderBlockEndStyle: true,
borderLeftWidth: true,
borderInlineStartWidth: true,
borderLeftColor: true,
borderInlineStartColor: true,
borderLeftStyle: true,
borderInlineStartStyle: true,
borderRightWidth: true,
borderInlineEndWidth: true,
borderRightColor: true,
borderInlineEndColor: true,
borderRightStyle: true,
borderInlineEndStyle: true,
borderTopRadius: true,
borderBottomRadius: true,
borderLeftRadius: true,
borderRightRadius: true,
};
const color = {
linearGradient: true,
color: true,
textColor: true,
fill: true,
stroke: true,
};
const effect = {
boxShadow: true,
mixBlendMode: true,
blendMode: true,
backgroundBlendMode: true,
bgBlendMode: true,
opacity: true,
};
const filter = {
filter: true,
blur: true,
brightness: true,
contrast: true,
hueRotate: true,
invert: true,
saturate: true,
dropShadow: true,
backdropFilter: true,
backdropBlur: true,
backdropBrightness: true,
backdropContrast: true,
backdropHueRotate: true,
backdropInvert: true,
backdropSaturate: true,
};
const flexbox = {
g: true,
alignItems: true,
alignContent: true,
justifyItems: true,
justifyContent: true,
flexWrap: true,
flexDirection: true,
experimental_spaceX: true,
experimental_spaceY: true,
flex: true,
flexFlow: true,
flexGrow: true,
flexShrink: true,
flexBasis: true,
justifySelf: true,
alignSelf: true,
order: true,
placeItems: true,
placeContent: true,
placeSelf: true,
gap: true,
rowGap: true,
columnGap: true,
};
const grid = {
cl: true,
cg: true,
colG: true,
rw: true,
rg: true,
rowG: true,
ai: true,
alignI: true,
ac: true,
alignC: true,
alignS: true,
ji: true,
justifyI: true,
jc: true,
justifyC: true,
justifyS: true,
pi: true,
placeI: true,
pc: true,
placeC: true,
placeS: true,
afc: true,
afr: true,
autoCols: true,
autoRows: true,
cols: true,
rows: true,
gridGap: true,
gridColumnGap: true,
gridRowGap: true,
gridColumn: true,
gridRow: true,
gridAutoFlow: true,
gridAutoColumns: true,
gridColumnStart: true,
gridColumnEnd: true,
gridRowStart: true,
gridRowEnd: true,
gridAutoRows: true,
gridTemplate: true,
gridTemplateColumns: true,
gridTemplateRows: true,
gridTemplateAreas: true,
gridArea: true,
};
const interactivity = {
appearance: true,
cursor: true,
resize: true,
userSelect: true,
pointerEvents: true,
outline: true,
outlineOffset: true,
outlineColor: true,
};
const layout = {
h: true,
w: true,
mnh: true,
mxh: true,
mnw: true,
mxw: true,
size: true,
aspectRatio: true,
width: true,
inlineSize: true,
height: true,
blockSize: true,
boxSize: true,
minW: true,
minWidth: true,
minInlineSize: true,
minH: true,
minHeight: true,
minBlockSize: true,
maxW: true,
maxWidth: true,
maxInlineSize: true,
maxH: true,
maxHeight: true,
maxBlockSize: true,
overflow: true,
overflowX: true,
overflowY: true,
overscrollBehavior: true,
overscrollBehaviorX: true,
overscrollBehaviorY: true,
display: true,
verticalAlign: true,
boxSizing: true,
boxDecorationBreak: true,
float: true,
objectFit: true,
objectPosition: true,
visibility: true,
isolation: true,
};
const list = {
listStyleType: true,
listStylePosition: true,
listStylePos: true,
listStyleImage: true,
listStyleImg: true,
};
const position = {
position: true,
pos: true,
zIndex: true,
inset: true,
insetX: true,
insetInline: true,
insetY: true,
insetBlock: true,
top: true,
insetBlockStart: true,
bottom: true,
insetBlockEnd: true,
left: true,
insetInlineStart: true,
right: true,
insetInlineEnd: true,
};
const ring = {
ring: true,
ringColor: true,
ringOffset: true,
ringOffsetColor: true,
ringInset: true,
};
const scroll = {
scrollBehavior: true,
scrollSnapAlign: true,
scrollSnapStop: true,
scrollSnapType: true,
// scroll margin
scrollMargin: true,
scrollMarginTop: true,
scrollMarginBottom: true,
scrollMarginLeft: true,
scrollMarginRight: true,
scrollMarginX: true,
scrollMarginY: true,
// scroll padding
scrollPadding: true,
scrollPaddingTop: true,
scrollPaddingBottom: true,
scrollPaddingLeft: true,
scrollPaddingRight: true,
scrollPaddingX: true,
scrollPaddingY: true,
scrollbarWidth: true,
scrollbarColor: true,
};
const space = {
m: true,
mt: true,
mb: true,
ml: true,
mr: true,
mx: true,
my: true,
p: true,
pt: true,
pb: true,
pl: true,
pr: true,
px: true,
py: true,
margin: true,
marginTop: true,
marginBlockStart: true,
marginRight: true,
marginInlineEnd: true,
marginBottom: true,
marginBlockEnd: true,
marginLeft: true,
marginInlineStart: true,
marginX: true,
marginInline: true,
marginY: true,
marginBlock: true,
padding: true,
paddingTop: true,
paddingBlockStart: true,
paddingRight: true,
paddingBottom: true,
paddingBlockEnd: true,
paddingLeft: true,
paddingInlineStart: true,
paddingInlineEnd: true,
paddingX: true,
paddingInline: true,
paddingY: true,
paddingBlock: true,
};
const textDecoration = {
textDecorationColor: true,
textDecoration: true,
textDecor: true,
textDecorationLine: true,
textDecorationStyle: true,
textDecorationThickness: true,
textUnderlineOffset: true,
textShadow: true,
};
const transform = {
clipPath: true,
transform: true,
transformOrigin: true,
translateX: true,
translateY: true,
skewX: true,
skewY: true,
scaleX: true,
scaleY: true,
scale: true,
rotate: true,
};
const transition = {
transition: true,
transitionDelay: true,
animation: true,
willChange: true,
transitionDuration: true,
transitionProperty: true,
transitionTimingFunction: true,
};
const typography = {
fs: true,
fontFamily: true,
fontSize: true,
fontWeight: true,
lineHeight: true,
letterSpacing: true,
textAlign: true,
fontStyle: true,
wordBreak: true,
overflowWrap: true,
textOverflow: true,
textTransform: true,
whiteSpace: true,
};
const pseudo = {
_disabled: true,
_hover: true,
_active: true,
_focus: true,
_before: true,
_after: true,
hover: true,
":hover": true,
"&:hover": true,
active: true,
":active": true,
"&:active": true,
focus: true,
":focus": true,
"&:focus": true,
":hover::before": true,
"&:hover::before": true,
_focusWithin: true,
":focus-within": true,
"&:focus-within": true,
_focusVisible: true,
":focus-visible": true,
"&:focus-visible": true,
_notFocusVisible: true,
_focusOutlineOffset: tre,
":disabled": true,
"&:disabled": true,
":empty": true,
"&:empty": true,
":visited": true,
"&:visited": true,
":indeterminate": true,
"&:indeterminate": true,
":fullscreen": true,
"&:fullscreen": true,
":placeholder-shown": true,
"&:placeholder-shown": true,
"::placeholder": true,
"&::placeholder": true,
before: true,
"::before": true,
"&::before": true,
after: true,
"::after": true,
"&::after": true,
"::selection": true,
"&::selection": true,
"::-webkit-scrollbar": true,
"&::-webkit-scrollbar": true,
"::-webkit-scrollbar-track": true,
"&::-webkit-scrollbar-track": true,
"::-webkit-scrollbar-thumb": true,
"&::-webkit-scrollbar-thumb": true,
};
const styles = {
...background,
...border,
...color,
...effect,
...filter,
...flexbox,
...grid,
...interactivity,
...layout,
...list,
...position,
...ring,
...scroll,
...space,
...textDecoration,
...transform,
...transition,
...typography,
...pseudo,
};
export { lightColors, darkColors, styles };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment