@paganaye/stylets 0.1.0

package/src/types.ts

@@ -0,0 +1,311 @@
+import { CssColor } from "./CssColor";
+import { CssFilter } from "./CssFilter";
+import { Num } from "./CssNum";
+import { CssShadow } from "./CssShadow";
+
+//   +-----------------------------+
+//    \  Variables and Functions  /
+//     \-------------------------/
+//      \ Global CSS properties /
+//       \---------------------/
+//        \     Elements      /
+//         \-----------------/
+//          \  Components   /
+//           +-------------+
+//            \           /
+//             \Overrides/
+//              \_______/
+// OverrideProperties groups the property types where we want stronger
+// typing (e.g. allow `Num`/`number` for spacing, typography, layout, etc.).
+export type OverrideProperties = ShadowProperties & PaddingProperties & MarginProperties & BorderProperties & BackgroundProperties & LayoutProperties & TypographyProperties;
+
+export type CssProperties = Omit<Partial<CSSStyleDeclaration>, keyof OverrideProperties> & OverrideProperties & {
+    [key: CssVariableName]: string | number | boolean | Num;
+};
+
+export type CssVariableName = `--${string}`;
+
+export type ThemeArgs = {
+    variants: Record<string, Record<string, any>>;
+    colors: string;
+    vars: string;
+    paddings: string;
+    margins: string;
+    borders: string;
+    backgrounds: string;
+    typography: string;
+    layouts: string;
+    shadows: string;
+    classes: string;
+};
+
+export type ThemeKey = keyof ThemeArgs;
+
+export interface IThemeParts<
+    A extends ThemeArgs> {
+    name?: string;
+    variants?: { [K in keyof A['variants']]?: Record<keyof A['variants'][K] & string, CssProperties> };
+    colors?: Record<A['colors'], string | CssColor>;
+    vars?: Record<A['vars'], string | number>;
+    //
+    paddings?: Record<A['paddings'], PaddingProperties>;
+    margins?: Record<A['margins'], MarginProperties>;
+    borders?: Record<A['borders'], BorderProperties>;
+    backgrounds?: Record<A['backgrounds'], BackgroundProperties>;
+    typography?: Record<A['typography'], TypographyProperties>;
+    layouts?: Record<A['layouts'], LayoutProperties>;
+    shadows?: Record<A['shadows'], ShadowProperties>;
+    classes?: Record<A['classes'], CssProperties>;
+    styles?: Record<string, CssProperties>;
+}
+
+// The XxxxProperties below are Records<Key,Value>
+// where key is STRICTLY a CSS property name in camelCase
+// and Value is the type of value accepted for that property
+
+export type ShadowProperties = {
+    boxShadow?: CssShadow | string;
+    textShadow?: CssShadow | string;
+    filter?: CssFilter | CssFilter[] | string;
+    backdropFilter?: CssFilter | string;
+    opacity?: Num | string;
+}
+
+export type PaddingProperties = {
+    padding?: Num;
+    paddingTop?: Num;
+    paddingRight?: Num;
+    paddingBottom?: Num;
+    paddingLeft?: Num;
+}
+
+export type MarginProperties = {
+    margin?: Num;
+    marginTop?: Num;
+    marginRight?: Num;
+    marginBottom?: Num;
+    marginLeft?: Num;
+}
+
+export type BorderProperties = {
+    border?: string;
+    borderWidth?: Num;
+    borderStyle?: CssBorderStyle;
+    borderColor?: CssColor | string;
+    borderCollapse?: CssBorderCollapse;
+    borderSpacing?: Num;
+
+    borderTop?: string;
+    borderTopWidth?: Num;
+    borderTopStyle?: CssBorderStyle;
+    borderTopColor?: CssColor | string;
+
+    borderRight?: string;
+    borderRightWidth?: Num;
+    borderRightStyle?: CssBorderStyle;
+    borderRightColor?: CssColor | string;
+
+    borderBottom?: string;
+    borderBottomWidth?: Num;
+    borderBottomStyle?: CssBorderStyle;
+    borderBottomColor?: CssColor | string;
+
+    borderLeft?: string;
+    borderLeftWidth?: Num;
+    borderLeftStyle?: CssBorderStyle;
+    borderLeftColor?: CssColor | string;
+
+    borderRadius?: Num;
+    borderTopLeftRadius?: Num;
+    borderTopRightRadius?: Num;
+    borderBottomLeftRadius?: Num;
+    borderBottomRightRadius?: Num;
+
+    cornerTopLeftShape?: CssCornerShape;
+    cornerTopRightShape?: CssCornerShape;
+    cornerBottomLeftShape?: CssCornerShape;
+    cornerBottomRightShape?: CssCornerShape;
+
+    outline?: string;
+    outlineWidth?: Num;
+    outlineStyle?: CssBorderStyle;
+    outlineColor?: CssColor | string;
+    outlineOffset?: Num;
+}
+
+export type BackgroundProperties = {
+    background?: string;
+    backgroundColor?: CssColor | string;
+    backgroundImage?: string;
+    backgroundRepeat?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local' | string;
+    backgroundClip?: string;
+    backgroundOrigin?: string;
+}
+
+export type LayoutProperties = {
+    /* Positioning */
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | string;
+    inset?: string | Num;
+    top?: Num | string;
+    right?: Num | string;
+    bottom?: Num | string;
+    left?: Num | string;
+    zIndex?: number | string;
+
+    /* Display & Box */
+    display?: string;
+    boxSizing?: 'content-box' | 'border-box' | string;
+
+    /* Sizing */
+    width?: Num | string;
+    minWidth?: Num | string;
+    maxWidth?: Num | string;
+    height?: Num | string;
+    minHeight?: Num | string;
+    maxHeight?: Num | string;
+
+    /* Flexbox */
+    flex?: string | Num;
+    flexBasis?: Num | string;
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | string;
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | string;
+    justifyContent?: string;
+    alignItems?: string;
+    alignContent?: string;
+    alignSelf?: string;
+    order?: number | string;
+    gap?: Num | string;
+
+    /* Grid */
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    gridGap?: Num | string;
+    gridAutoFlow?: string;
+
+    /* Columns */
+    columnCount?: number | string;
+    columnWidth?: Num | string;
+    columnGap?: Num | string;
+    columnRule?: string;
+
+    /* Overflow & Scrolling */
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | string;
+    scrollBehavior?: 'auto' | 'smooth' | string;
+    overscrollBehavior?: string;
+    scrollSnapType?: string;
+    scrollSnapAlign?: string;
+};
+
+export type TypographyProperties = {
+    font?: string;
+    fontFamily?: string;
+    fontSize?: Num;
+    fontWeight?: Num;
+    fontStyle?: 'normal' | 'italic' | 'oblique' | string;
+    lineHeight?: Num;
+    letterSpacing?: Num;
+    wordSpacing?: Num;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | string;
+    textDecoration?: string;
+    textAlign?: 'left' | 'right' | 'center' | 'justify' | string;
+    whiteSpace?: string;
+    textOverflow?: 'clip' | 'ellipsis' | string;
+    overflowWrap?: 'normal' | 'break-word' | 'anywhere';
+}
+
+export type CssBorderStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
+export type CssBorderCollapse = 'collapse' | 'separate' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+
+export type CssCornerShape = 'bevel' | 'notch' | 'round' | 'scoop' | 'square' | 'squircle';
+
+export interface IScopeStylesParts<A extends ThemeArgs> extends IThemeParts<A> {
+}
+
+
+export interface ITheme<A extends ThemeArgs = any> {
+    colors: Record<A['colors'], string>;
+    paddings: Record<A['paddings'], string>;
+    margins: Record<A['margins'], string>;
+    borders: Record<A['borders'], string>;
+    shadows: Record<A['shadows'], string>;
+    backgrounds: Record<A['backgrounds'], string>;
+    typography: Record<A['typography'], string>;
+    vars: Record<A['vars'], string>;
+    classes: Identity<A['classes']>;
+}
+
+export type CssClass<TTheme extends ITheme<any>> = Extract<keyof TTheme['classes'], string>
+
+export type ClassList<T extends string = any> = T
+    | Array<T
+        | undefined
+        | null
+        | Record<T, boolean | undefined | null>
+    >
+    | Record<T, boolean | undefined | null>;
+
+export type ThemeClass<TTheme extends ITheme> = ClassList<CssClass<TTheme>>;
+
+export type IThemeFromArgs<Args extends ThemeArgs> = ITheme<Args>;
+
+export type ExtractNames<P, K extends ThemeKey> =
+    P extends { [Key in K]: Record<infer Names, any> } ? Extract<Names, string> : never;
+
+export type MergeNames<K extends ThemeKey, A extends ThemeArgs, P> =
+    [A[K]] extends [never]
+    ? ExtractNames<P, K>
+    : ([ExtractNames<P, K>] extends [never] ? A[K] : A[K] | ExtractNames<P, K>);
+
+export type Simplify<T> = { [K in keyof T]: T[K] } & {};
+
+export type Identity<T extends string> = { [K in T]: K };
+
+export type ExtractVariantRecord<P> = P extends { variants: infer V extends Record<string, any> } ? V : {};
+
+export type MergeVariants<A extends ThemeArgs, P> =
+    Simplify<A['variants'] & ExtractVariantRecord<P>>;
+
+export type ExtractVariants<P> = P extends { variants: infer V } ? V : {};
+
+export type HasDefault<T> = "default" extends keyof T ? true : false;
+
+export type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K]
+};
+
+export type VariantProps<S> = S extends { variants: infer V extends Record<string, any> }
+    ? Simplify<{
+        [K in keyof RemoveIndexSignature<V> as K extends string ? (HasDefault<V[K]> extends true ? K : never) : never]?: Extract<keyof V[K], string>
+    } & {
+        [K in keyof RemoveIndexSignature<V> as K extends string ? (HasDefault<V[K]> extends true ? never : K) : never]: Extract<keyof V[K], string>
+    }>
+    : {};
+
+export type ElementPropsRecord = {
+    class: string;
+    [dataAttr: `data-${string}`]: string | undefined;
+};
+
+export type MergeThemeArgs<A extends ThemeArgs, P> = Simplify<{
+    colors: MergeNames<'colors', A, P>;
+    vars: MergeNames<'vars', A, P>;
+    paddings: MergeNames<'paddings', A, P>;
+    margins: MergeNames<'margins', A, P>;
+    borders: MergeNames<'borders', A, P>;
+    backgrounds: MergeNames<'backgrounds', A, P>;
+    typography: MergeNames<'typography', A, P>;
+    shadows: MergeNames<'shadows', A, P>;
+    layouts: MergeNames<'layouts', A, P>;
+    classes: MergeNames<'classes', A, P>;
+    variants: MergeVariants<A, P>;
+}>;
+