@syfxlin/styops NPM

Styops

@syfxlin/styops is an extension library for the styled ecosystem, designed to provide a unified theme variable, similar to open-props.

Installation

# NPM
npm i @syfxlin/styops
# Yarn
yarn add @syfxlin/styops
# PNPM
pnpm add @syfxlin/styops

Usage

import { styled } from "@linaria/atomic or any css in js library";
import { createVars, style, tokens } from "@syfxlin/styops";

const vars1 = createVars();

export const Component1 = styled.div`
  color: ${vars1.c("blue1")};
  width: ${vars1.s("xs")};
  height: ${vars1.s(10)};
`;

const shortcut = style({
  key: ["width"],
  css: (value: string) => {
    return `width: ${value};`;
  },
});

const vars2 = createVars({ ...tokens, shortcut });

export const Component2 = styled.div`
  ${vars2.width("10px")}

  ${vars2.up("xl")} {
    ${vars2.width("20px")}
  }
`;