#Layout

import { layoutSystem } from "@poodle/system";

Layout system transform scaling and z-index to CSS width, height...

const theme: SystemThemeConfig = {
    spacing: {
                    scale: "1.5rem",
                    sets: {
                        s: "1.5rem",
                        m: "2rem",
                        l: "3rem",
                    },
                },
                layouts: {
                    zIndices: {
                        header: "1000",
                        footer: 1200,
                    },
                },
};


const listSystem = compose(colorsSystem, bordersSystem);


export const system = createSystem(listSystem);


const styles = system({
    theme,
    maxWidth: "scale-2",
    height: "m",
    zIndex: "footer",
});


// Styles result
//  { maxWidth: "3rem" },
//  { height: "2rem" },
//  { zIndex: "1200" },
PropTypeDescription
bottomResponsiveProp<CSS.Property.Bottom \| string \| number>The CSS bottom property
displayResponsiveProp<CSS.Property.Display>The CSS display property
hResponsiveProp<CSS.Property.Height \| string \| number>The CSS height property
heightResponsiveProp<CSS.Property.Height \| string \| number>The CSS height property
leftResponsiveProp<CSS.Property.Left \| string \| number>The CSS left property
maxHeightResponsiveProp<CSS.Property.MaxHeight \| string \| number>The CSS max-height property
maxWidthResponsiveProp<CSS.Property.MaxWidth \| string \| number>The CSS max-width property
minHeightResponsiveProp<CSS.Property.MinHeight \| string \| number>The CSS min-height property
minWidthResponsiveProp<CSS.Property.MinWidth \| string \| number>The CSS min-width property
overflowResponsiveProp<CSS.Property.Overflow>The CSS overflow property
overflowXResponsiveProp<CSS.Property.OverflowX>The CSS overflow-x property
overflowYResponsiveProp<CSS.Property.OverflowY>The CSS overflow-y property
positionResponsiveProp<CSS.Property.Position>The CSS position property
rightResponsiveProp<CSS.Property.Right \| string \| number>The CSS right property
sizeResponsiveProp<CSS.Property.Width \| string \| number>The CSS height and width property
topResponsiveProp<CSS.Property.Top \| string \| number>The CSS top property
visibilityResponsiveProp<CSS.Property.Visibility>The CSS z-index property
wResponsiveProp<CSS.Property.Width \| string \| number>The CSS width property
widthResponsiveProp<CSS.Property.Width \| string \| number>The CSS width property
zIndexResponsiveProp<CSS.Property.ZIndex \| string \| number>The CSS z-index property