style-props.css.ts

import { createRainbowSprinkles, defineProperties } from 'rainbow-sprinkles';
import { vars } from '../themes/contract.css';

const responsiveProperties = defineProperties({
  conditions: {
    mobile: {},
    tablet: { '@media': 'screen and (min-width: 768px)' },
    desktop: { '@media': 'screen and (min-width: 1024px)' },
  },
  defaultCondition: 'mobile',
  dynamicProperties: {
    alignContent: true,
    alignItems: true,
    alignSelf: true,
    animation: true,
    appearance: true,
    border: true,
    borderBottomStyle: true,
    borderCollapse: true,
    borderLeftStyle: true,
    borderRightStyle: true,
    borderSpacing: true,
    borderTopStyle: true,
    bottom: true,
    boxSizing: true,
    display: true,
    flex: true,
    flexBasis: true,
    flexDirection: true,
    flexGrow: true,
    flexShrink: true,
    flexWrap: true,
    float: true,
    fontStyle: true,
    fontVariantNumeric: true,
    gridArea: true,
    gridAutoColumns: true,
    gridAutoFlow: true,
    gridAutoRows: true,
    gridColumn: true,
    gridRow: true,
    gridTemplateAreas: true,
    gridTemplateColumns: true,
    gridTemplateRows: true,
    height: true,
    inset: true,
    justifyContent: true,
    justifyItems: true,
    justifySelf: true,
    left: true,
    letterSpacing: true,
    listStyle: true,
    listStyleImage: true,
    listStylePosition: true,
    listStyleType: true,
    maxHeight: true,
    maxWidth: true,
    minHeight: true,
    minWidth: true,
    objectFit: true,
    objectPosition: true,
    order: true,
    overflow: true,
    overflowWrap: true,
    overflowX: true,
    overflowY: true,
    pointerEvents: true,
    position: true,
    right: true,
    tableLayout: true,
    textAlign: true,
    textOverflow: true,
    textTransform: true,
    top: true,
    transition: true,
    verticalAlign: true,
    whiteSpace: true,
    width: true,
    willChange: true,
    wordBreak: true,
    wordWrap: true,
    zIndex: true,
  },
  staticProperties: {
    borderBottomLeftRadius: vars.borderRadius,
    borderBottomRightRadius: vars.borderRadius,
    borderTopLeftRadius: vars.borderRadius,
    borderTopRightRadius: vars.borderRadius,
    borderBottomWidth: vars.borderWidth,
    borderLeftWidth: vars.borderWidth,
    borderRightWidth: vars.borderWidth,
    borderTopWidth: vars.borderWidth,
    columnGap: vars.space,
    fontFamily: vars.fontFamily,
    fontSize: vars.fontSize,
    fontWeight: vars.fontWeight,
    lineHeight: vars.lineHeight,
    gap: vars.space,
    marginBottom: vars.space,
    marginLeft: vars.space,
    marginRight: vars.space,
    marginTop: vars.space,
    paddingBottom: vars.space,
    paddingLeft: vars.space,
    paddingRight: vars.space,
    paddingTop: vars.space,
    rowGap: vars.space,
  },
  shorthands: {
    borderRadius: [
      'borderBottomLeftRadius',
      'borderBottomRightRadius',
      'borderTopLeftRadius',
      'borderTopRightRadius',
    ],
    borderStyle: [
      'borderBottomStyle',
      'borderLeftStyle',
      'borderRightStyle',
      'borderTopStyle',
    ],
    borderWidth: [
      'borderBottomWidth',
      'borderLeftWidth',
      'borderRightWidth',
      'borderTopWidth',
    ],
    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
    size: ['height', 'width'],
  },
});

// const colorProperties = defineProperties({
//   conditions: {
//     lightMode: {},
//     darkMode: { '@media': '(prefers-color-scheme: dark)' },
//   },
//   defaultCondition: 'lightMode',
//   staticProperties: {
//     color: vars.textColors,
//     backgroundColor: vars.backgroundColors,
//     borderColor: vars.backgroundColors,
//   },
//   shorthands: {},
// });

const interactiveProperties = defineProperties({
  conditions: {
    base: {},
    focus: { selector: '&:focus' },
    hover: { selector: '&:hover' },
    active: { selector: '&:active' },
  },
  defaultCondition: 'base',
  dynamicProperties: {
    background: true,
    backgroundAttachment: true,
    backgroundImage: true,
    backgroundPosition: true,
    backgroundRepeat: true,
    backgroundSize: true,
    cursor: true,
    opacity: true,
    outline: true,
    outlineColor: true,
    outlineOffset: true,
    outlineStyle: true,
    outlineWidth: true,
    textDecoration: true,
    textShadow: true,
    transform: true,
    visibility: true,
  },
  staticProperties: {
    color: vars.textColor,
    backgroundColor: vars.backgroundColor,
    borderBottomColor: vars.borderColor,
    borderLeftColor: vars.borderColor,
    borderRightColor: vars.borderColor,
    borderTopColor: vars.borderColor,
    boxShadow: vars.boxShadow,
  },
  shorthands: {
    borderColor: [
      'borderBottomColor',
      'borderLeftColor',
      'borderRightColor',
      'borderTopColor',
    ],
  },
});

export const styleProps = createRainbowSprinkles(
  responsiveProperties,
  // colorProperties,
  interactiveProperties
);

export type StyleProps = Parameters<typeof styleProps>[0];