@workday/canvas-kit-react/dist/es6/tokens/lib/space.d.ts

The parent module that contains all Workday Canvas Kit React components

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