156 lines
2.5 KiB
TypeScript
156 lines
2.5 KiB
TypeScript
import type { CSSProperties } from "~/types";
|
|
|
|
const tokenTypes = [
|
|
"color",
|
|
"space",
|
|
"font",
|
|
"font-size",
|
|
"font-weight",
|
|
"border-radius",
|
|
] as const;
|
|
type TokenType = (typeof tokenTypes)[number];
|
|
|
|
export const shorthand = {
|
|
marginX: <T>(value: T) => [
|
|
{
|
|
key: "marginLeft",
|
|
value,
|
|
},
|
|
{
|
|
key: "marginRight",
|
|
value,
|
|
},
|
|
],
|
|
marginY: <T>(value: T) => [
|
|
{
|
|
key: "marginTop",
|
|
value,
|
|
},
|
|
{
|
|
key: "marginBottom",
|
|
value,
|
|
},
|
|
],
|
|
mX: <T>(value: T) => [
|
|
{
|
|
key: "marginLeft",
|
|
value,
|
|
},
|
|
{
|
|
key: "marginRight",
|
|
value,
|
|
},
|
|
],
|
|
mY: <T>(value: T) => [
|
|
{
|
|
key: "marginTop",
|
|
value,
|
|
},
|
|
{
|
|
key: "marginBottom",
|
|
value,
|
|
},
|
|
],
|
|
paddingX: <T>(value: T) => [
|
|
{
|
|
key: "paddingLeft",
|
|
value,
|
|
},
|
|
{
|
|
key: "paddingRight",
|
|
value,
|
|
},
|
|
],
|
|
paddingY: <T>(value: T) => [
|
|
{
|
|
key: "paddingTop",
|
|
value,
|
|
},
|
|
{
|
|
key: "paddingBottom",
|
|
value,
|
|
},
|
|
],
|
|
pX: <T>(value: T) => [
|
|
{
|
|
key: "paddingLeft",
|
|
value,
|
|
},
|
|
{
|
|
key: "paddingRight",
|
|
value,
|
|
},
|
|
],
|
|
pY: <T>(value: T) => [
|
|
{
|
|
key: "paddingTop",
|
|
value,
|
|
},
|
|
{
|
|
key: "paddingBottom",
|
|
value,
|
|
},
|
|
],
|
|
maxW: <T>(value: T) => [
|
|
{
|
|
key: "maxWidth",
|
|
value,
|
|
},
|
|
],
|
|
maxH: <T>(value: T) => [
|
|
{
|
|
key: "maxHeight",
|
|
value,
|
|
},
|
|
],
|
|
minW: <T>(value: T) => [
|
|
{
|
|
key: "minWidth",
|
|
value,
|
|
},
|
|
],
|
|
minH: <T>(value: T) => [
|
|
{
|
|
key: "minHeight",
|
|
value,
|
|
},
|
|
],
|
|
};
|
|
|
|
export const categoryMap = {
|
|
color: "color",
|
|
backgroundColor: "color",
|
|
borderColor: "color",
|
|
margin: "space",
|
|
marginTop: "space",
|
|
marginBottom: "space",
|
|
marginLeft: "space",
|
|
marginRight: "space",
|
|
marginX: "space",
|
|
marginY: "space",
|
|
padding: "space",
|
|
paddingTop: "space",
|
|
paddingBottom: "space",
|
|
paddingLeft: "space",
|
|
paddingRight: "space",
|
|
paddingX: "space",
|
|
paddingY: "space",
|
|
gap: "space",
|
|
height: "space",
|
|
width: "space",
|
|
maxHeight: "space",
|
|
maxWidth: "space",
|
|
minHeight: "space",
|
|
minWidth: "space",
|
|
fontFamily: "font",
|
|
fontSize: "font-size",
|
|
fontWeight: "font-weight",
|
|
borderRadius: "border-radius",
|
|
} as const satisfies Partial<Record<keyof CSSProperties, TokenType>>;
|
|
|
|
export const getCategory = (value: string) => {
|
|
return value in categoryMap
|
|
? categoryMap[value as keyof typeof categoryMap] + "-"
|
|
: "";
|
|
};
|