@loke/design-system
Version:
A design system with individually importable components
53 lines (52 loc) • 2.47 kB
text/typescript
/**
* Represents the available color shades.
*/
type ColorShade = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950";
/**
* Represents the base colors available in the design system.
*/
type BaseColor = "card" | "primary" | "secondary" | "accent" | "background" | "foreground" | "destructive" | "white" | "sidebar-accent" | "sidebar";
/**
* Represents all available colors, including base colors and their shades.
*/
type Color = BaseColor | `${"neutral"}-${ColorShade}`;
/**
* Represents the available size values.
*/
declare const sizeMap: {
readonly large: 8;
readonly medium: 5;
readonly none: 0;
readonly small: 3;
readonly xlarge: 12;
readonly xsmall: 2;
readonly xxlarge: 24;
readonly xxsmall: 1;
};
declare const numericSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 28, 32];
type Size = keyof typeof sizeMap | (typeof numericSizes)[number];
/**
* Represents the available size fraction values.
*/
type SizeFraction = "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12";
/**
* Represents the available size special values.
*/
type SizeSpecial = "auto" | "full" | "screen" | "min" | "max" | "fit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
/**
* Generates size variants for a given type with precise type mapping.
*/
declare const getSizeVariants: <T extends string>(type: T) => { [K in Size]: `${T}-${K extends keyof typeof sizeMap ? (typeof sizeMap)[K] : K}`; };
/**
* Generates size variants for a given type with precise type mapping.
*/
declare const getNegativeSizeVariants: <T extends string>(type: T) => { [K in `-${Size}`]: `-${T}-${K extends `-${infer N}` ? N : never}`; };
/**
* Generates dimension variants for a given type with precise type mapping.
*/
declare const getDimensionVariants: <T extends string>(type: T) => { [K in Size]: `${T}-${K extends keyof typeof sizeMap ? (typeof sizeMap)[K] : K}`; } & { [K in SizeFraction]: `${T}-${K}`; } & { [K in SizeSpecial]: `${T}-${K}`; };
/**
* Generates color variants for a given type with precise type mapping.
*/
declare const getColorVariants: <T extends string>(type: T) => { [K in Color]: `${T}-${K}`; };
export { getColorVariants, getDimensionVariants, getNegativeSizeVariants, getSizeVariants, };