@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
96 lines • 3.23 kB
TypeScript
type ValueOf<T> = T[keyof T];
/** Type for the `space` object with keys and rem values (strings) */
export type CanvasSpace = {
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';
};
/** Type for `CanvasSpace` keys */
export type CanvasSpaceKeys = keyof CanvasSpace;
/** The rem values for CanvasSpace (strings) */
export type CanvasSpaceValues = ValueOf<CanvasSpace>;
/**
* 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 |
* | --------- | --------- | ----------- |
* | 0 | 0 | zero |
* | 4px | 0.25rem | xxxs |
* | 8px | 0.5rem | xxs |
* | 12px | 0.75rem | xs |
* | 16px | 1rem | s |
* | 24px | 1.5rem | m |
* | 32px | 2rem | l |
* | 40px | 2.5rem | xl |
* | 64px | 4rem | xxl |
* | 80px | 5rem | xxxl |
*
* */
export declare const space: CanvasSpace;
/**
* 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 `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*/
export type CanvasSpaceNumbers = {
zero: 0;
xxxs: 4;
xxs: 8;
xs: 12;
s: 16;
m: 24;
l: 32;
xl: 40;
xxl: 64;
xxxl: 80;
};
/** The numeric rem values for CanvasSpaceNumbers (numbers)
* @deprecated ⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*/
export type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
/**
* 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 `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*/
export declare const spaceNumbers: CanvasSpaceNumbers;
export {};
//# sourceMappingURL=space.d.ts.map