Variable spacing`Const`

spacing: {
    "2xl": "48px";
    "3xl": "56px";
    "4xl": "64px";
    "5xl": "72px";
    "6xl": "80px";
    "7xl": "96px";
    "8xl": "104px";
    lg: "32px";
    max: "120px";
    maxWidth: {
        large: string;
        larger: string;
        max: string;
        normal: string;
        small: string;
        smallest: string;
    };
    md: "24px";
    min: "8px";
    sm: "16px";
    xl: "40px";
    xs: "12px";
} = ...

Default spacing tokens with semantic naming.

Type Declaration

Readonly2xl: "48px"
Readonly3xl: "56px"
Readonly4xl: "64px"
Readonly5xl: "72px"
Readonly6xl: "80px"
Readonly7xl: "96px"
Readonly8xl: "104px"
Readonlylg: "32px"
Readonlymax: "120px"
ReadonlymaxWidth: {
    large: string;
    larger: string;
    max: string;
    normal: string;
    small: string;
    smallest: string;
}
Readonlymd: "24px"
Readonlymin: "8px"
Readonlysm: "16px"
Readonlyxl: "40px"
Readonlyxs: "12px"

Returns

Spacing tokens with semantic names and corresponding pixel values.

Example

import { spacing } from '@universityofmaryland/web-token-library';
spacing.md // '24px'

Since

1.0.0

Variable spacing`Const`

Type Declaration

`Readonly`2xl: "48px"

`Readonly`3xl: "56px"

`Readonly`4xl: "64px"

`Readonly`5xl: "72px"

`Readonly`6xl: "80px"

`Readonly`7xl: "96px"

`Readonly`8xl: "104px"

`Readonly`lg: "32px"

`Readonly`max: "120px"

`Readonly`maxWidth: {
    large: string;
    larger: string;
    max: string;
    normal: string;
    small: string;
    smallest: string;
}

`Readonly`md: "24px"

`Readonly`min: "8px"

`Readonly`sm: "16px"

`Readonly`xl: "40px"

`Readonly`xs: "12px"

Returns

Example

Since

Settings

Variable spacingConst

Type Declaration

Readonly2xl: "48px"

Readonly3xl: "56px"

Readonly4xl: "64px"

Readonly5xl: "72px"

Readonly6xl: "80px"

Readonly7xl: "96px"

Readonly8xl: "104px"

Readonlylg: "32px"

Readonlymax: "120px"

ReadonlymaxWidth: { large: string; larger: string; max: string; normal: string; small: string; smallest: string;}

Readonlymd: "24px"

Readonlymin: "8px"

Readonlysm: "16px"

Readonlyxl: "40px"

Readonlyxs: "12px"

Returns

Example

Since

Settings

Variable spacing`Const`

`Readonly`2xl: "48px"

`Readonly`3xl: "56px"

`Readonly`4xl: "64px"

`Readonly`5xl: "72px"

`Readonly`6xl: "80px"

`Readonly`7xl: "96px"

`Readonly`8xl: "104px"

`Readonly`lg: "32px"

`Readonly`max: "120px"

`Readonly`maxWidth: {
large: string;
larger: string;
max: string;
normal: string;
small: string;
smallest: string;
}

`Readonly`md: "24px"

`Readonly`min: "8px"

`Readonly`sm: "16px"

`Readonly`xl: "40px"

`Readonly`xs: "12px"