@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
67 lines (66 loc) • 2.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.spaceNumbers = exports.space = void 0;
/**
* An object of space keys and rem values (strings)
*
* Below is a table to show the equivalent values from `px` to `rem`.
* This is based on the default browser font size which is `16px`.
*
* | px Value | rem Value | space token | new token |
* | --------- | --------- | ----------- | --------- |
* | 0 | 0 | zero | `system.space.zero` |
* | 4px | 0.25rem | xxxs | `system.space.x1` |
* | 8px | 0.5rem | xxs | `system.space.x2` |
* | 12px | 0.75rem | xs | `system.space.x3` |
* | 16px | 1rem | s | `system.space.x4` |
* | 24px | 1.5rem | m | `system.space.x6` |
* | 32px | 2rem | l | `system.space.x8` |
* | 40px | 2.5rem | xl | `system.space.x10` |
* | 64px | 4rem | xxl | `system.space.x16` |
* | 80px | 5rem | xxxl | `system.space.x20` |
*
* */
exports.space = {
zero: '0',
xxxs: '0.25rem',
xxs: '0.5rem',
xs: '0.75rem',
s: '1rem',
m: '1.5rem',
l: '2rem',
xl: '2.5rem',
xxl: '4rem',
xxxl: '5rem',
};
/**
* Example using `space` with calc instead of deprecated `spaceNumbers`.
*
* ```tsx
* // With deprecated `spaceNumbers`
* {
* paddingLeft: spaceNumbers.xl + 2 // 42px
* }
* ```
*
* ```tsx
* // With `rem` based `space` tokens
* {
* padding: `calc(${space.xl} + 2px)` // 42px
* }
* ```
*
* @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our css var based [`space`](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-space--docs) tokens. In the case where you need to calculate a value, use [calc() function](https://workday.github.io/canvas-kit/?path=/docs/styling-utilities--docs#calc-functions).
*/
exports.spaceNumbers = {
zero: 0,
xxxs: 4,
xxs: 8,
xs: 12,
s: 16,
m: 24,
l: 32,
xl: 40,
xxl: 64,
xxxl: 80,
};