theme modules

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.
 */

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 };