Skip to main content

Spacings

Interface

Structure

interface Spacings {
[key: string]: string;
}

type Spacing = keyof Spacings;

Usage

// Types are re-exported for ease of use by other packages
// like @morfeo/core, @morfeo/web or @morfeo/react
import { Spacing, Spacings } from '@morfeo/spec';

Examples

Using the CLI compose command:

spacings.morfeo.ts
// Remove this line to add the slice to all of your themes
export const themeName = 'My Theme Name';
// Optional if you name the file spacings.morfeo.ts
export const sliceName = 'spacings';

export default {
'2xs': '8px',
xs: '16px',
s: '24px',
m: '32px',
l: '40px',
xl: '48px',
'2xl': '56px',
none: '0px',
};

Or manually:

spacings.ts
import { Spacings } from '@morfeo/spec';

const spacings: Spacings = {
'2xs': '8px',
xs: '16px',
s: '24px',
m: '32px',
l: '40px',
xl: '48px',
'2xl': '56px',
none: '0px',
};
theme.ts
import { spacings } from './spacings';

const myTheme = {
spacings,
...restOfTheTheme,
};

morfeo.setTheme('My Theme Name', myTheme);

Properties

In this table is shown the property you pass to morfeo.resolve, the actual CSS property or properties that will be generated, an example of usage, and the correspondent output:

namecss propertyexampleoutput
mmargin{ m: "l"} {"margin":"40px"}
mtmarginTop{ mt: "l"} {"marginTop":"40px"}
mlmarginLeft{ ml: "l"} {"marginLeft":"40px"}
mrmarginRight{ mr: "l"} {"marginRight":"40px"}
mbmarginBottom{ mb: "l"} {"marginBottom":"40px"}
mxmarginRight, marginLeft{ mx: "l"} {"marginRight":"40px","marginLeft":"40px"}
mymarginTop, marginBottom{ my: "l"} {"marginTop":"40px","marginBottom":"40px"}
marginmargin{ margin: "l"} {"margin":"40px"}
marginTopmarginTop{ marginTop: "l"} {"marginTop":"40px"}
marginRightmarginRight{ marginRight: "l"} {"marginRight":"40px"}
marginBottommarginBottom{ marginBottom: "l"} {"marginBottom":"40px"}
marginLeftmarginLeft{ marginLeft: "l"} {"marginLeft":"40px"}
marginBlockmarginBlock{ marginBlock: "l"} {"marginBlock":"40px"}
marginBlockEndmarginBlockEnd{ marginBlockEnd: "l"} {"marginBlockEnd":"40px"}
marginBlockStartmarginBlockStart{ marginBlockStart: "l"} {"marginBlockStart":"40px"}
marginInlinemarginInline{ marginInline: "l"} {"marginInline":"40px"}
marginInlineEndmarginInlineEnd{ marginInlineEnd: "l"} {"marginInlineEnd":"40px"}
marginInlineStartmarginInlineStart{ marginInlineStart: "l"} {"marginInlineStart":"40px"}
ppadding{ p: "l"} {"padding":"40px"}
ptpaddingTop{ pt: "l"} {"paddingTop":"40px"}
plpaddingLeft{ pl: "l"} {"paddingLeft":"40px"}
prpaddingRight{ pr: "l"} {"paddingRight":"40px"}
pbpaddingBottom{ pb: "l"} {"paddingBottom":"40px"}
pxpaddingRight, paddingLeft{ px: "l"} {"paddingRight":"40px","paddingLeft":"40px"}
pypaddingTop, paddingBottom{ py: "l"} {"paddingTop":"40px","paddingBottom":"40px"}
paddingpadding{ padding: "l"} {"padding":"40px"}
paddingToppaddingTop{ paddingTop: "l"} {"paddingTop":"40px"}
paddingLeftpaddingLeft{ paddingLeft: "l"} {"paddingLeft":"40px"}
paddingRightpaddingRight{ paddingRight: "l"} {"paddingRight":"40px"}
paddingBottompaddingBottom{ paddingBottom: "l"} {"paddingBottom":"40px"}
paddingBlockpaddingBlock{ paddingBlock: "l"} {"paddingBlock":"40px"}
paddingBlockEndpaddingBlockEnd{ paddingBlockEnd: "l"} {"paddingBlockEnd":"40px"}
paddingBlockStartpaddingBlockStart{ paddingBlockStart: "l"} {"paddingBlockStart":"40px"}
paddingInlinepaddingInline{ paddingInline: "l"} {"paddingInline":"40px"}
paddingInlineEndpaddingInlineEnd{ paddingInlineEnd: "l"} {"paddingInlineEnd":"40px"}
paddingInlineStartpaddingInlineStart{ paddingInlineStart: "l"} {"paddingInlineStart":"40px"}
scrollPaddingscrollPadding{ scrollPadding: "l"} {"scrollPadding":"40px"}
scrollPaddingTopscrollPaddingTop{ scrollPaddingTop: "l"} {"scrollPaddingTop":"40px"}
scrollPaddingRightscrollPaddingRight{ scrollPaddingRight: "l"} {"scrollPaddingRight":"40px"}
scrollPaddingBottomscrollPaddingBottom{ scrollPaddingBottom: "l"} {"scrollPaddingBottom":"40px"}
scrollPaddingLeftscrollPaddingLeft{ scrollPaddingLeft: "l"} {"scrollPaddingLeft":"40px"}
insetinset{ inset: "l"} {"inset":"40px"}
insetBlockinsetBlock{ insetBlock: "l"} {"insetBlock":"40px"}
insetBlockEndinsetBlockEnd{ insetBlockEnd: "l"} {"insetBlockEnd":"40px"}
insetBlockStartinsetBlockStart{ insetBlockStart: "l"} {"insetBlockStart":"40px"}
insetInlineinsetInline{ insetInline: "l"} {"insetInline":"40px"}
insetInlineEndinsetInlineEnd{ insetInlineEnd: "l"} {"insetInlineEnd":"40px"}
insetInlineStartinsetInlineStart{ insetInlineStart: "l"} {"insetInlineStart":"40px"}
toptop{ top: "l"} {"top":"40px"}
rightright{ right: "l"} {"right":"40px"}
bottombottom{ bottom: "l"} {"bottom":"40px"}
leftleft{ left: "l"} {"left":"40px"}
gridGapgridGap{ gridGap: "l"} {"gridGap":"40px"}
gridColumnGapgridColumnGap{ gridColumnGap: "l"} {"gridColumnGap":"40px"}
gridRowGapgridRowGap{ gridRowGap: "l"} {"gridRowGap":"40px"}
gapgap{ gap: "l"} {"gap":"40px"}
columnGapcolumnGap{ columnGap: "l"} {"columnGap":"40px"}
rowGaprowGap{ rowGap: "l"} {"rowGap":"40px"}

Extend Slice with custom properties

If you're using typescript and you add custom colors to your theme configuration, you'll need to merge the default Spacings interface with your custom one. We suggest creating a declaration file (for example: morfeo.d.ts or types.d.ts) like the following one:

import { spacings } from './path/to/your/custom/spacings';

type MySpacings = typeof spacings;

declare module '@morfeo/spec' {
export interface Spacings extends MySpacings {}
}

Read more about how to extend the default Morfeo Theme here.