@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.92-next.19

package/ts3.5/dist/commonjs/tokens/lib/depth.d.ts

@@ -1,141 +0,0 @@
-export declare type CanvasDepth = {
-    /**
-     * ### Depth None
-     * 	Used for removing existing depth
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const noDepthCardStyles = {
-     *   ...depth.none,
-     * };
-     * ```
-     */
-    none: {
-        boxShadow: 'none';
-    };
-    /**
-     * ### Depth 1
-     * Used for minimal offset and Cards
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[1],
-     * };
-     * ```
-     */
-    1: {
-        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
-    };
-    /**
-     * ### Depth 2
-     * Used for Top navigation, Bottom navigation
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[2],
-     * };
-     * ```
-     */
-    2: {
-        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
-    };
-    /**
-     * ### Depth 3
-     * Used for FABs, Menus
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[3],
-     * };
-     * ```
-     */
-    3: {
-        boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
-    };
-    /**
-     * ### Depth 4
-     *
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[4],
-     * };
-     * ```
-     */
-    4: {
-        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
-    };
-    /**
-     * ### Depth 5
-     * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[5],
-     * };
-     * ```
-     */
-    5: {
-        boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
-    };
-    /**
-     * ### Depth 6
-     * Used for components with opacity overlay behavior such as Modal or Side Panels
-     *
-     * @example
-     * ```ts
-     * import { depth } from '@workday/canvas-kit-react/tokens';
-     *
-     * const cardStyles = {
-     *   ...depth[6],
-     * };
-     * ```
-     */
-    6: {
-        boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
-    };
-};
-declare type ValueOf<T> = T[keyof T];
-export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
-/**
- * ### Depth Tokens
- *
- * Depth is the relative distance between surfaces in the z-axis.
- * It provides delineation, focus, and priority with shadows and layering.
- * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
- * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
- *
- * @example
- * ```tsx
- * import { depth } from '@workday/canvas-kit-react/tokens';
- *
- * const CustomCard = () => {
- *   return (
- *     <div css={depth[2]}>
- *       A standard-depth card
- *     </div>
- *   );
- * }
- * ```
- *
- */
-export declare const depth: CanvasDepth;
-export {};
-//# sourceMappingURL=depth.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/radius.d.ts

@@ -1,17 +0,0 @@
-declare type ValueOf<T> = T[keyof T];
-/** Type for the `borderRadius` object with keys and px values (strings and numbers) */
-export declare type CanvasBorderRadius = {
-    zero: '0px';
-    s: '2px';
-    m: '4px';
-    l: '8px';
-    circle: '999px';
-};
-/** the tokens (keys) for CanvasBorderRadius */
-export declare type CanvasBorderRadiusKeys = keyof CanvasBorderRadius;
-/** the values for CanvasBorderRadius (strings and numbers) */
-export declare type CanvasBorderRadiusValues = ValueOf<CanvasBorderRadius>;
-/** An object of border-radius keys and px values (strings and numbers) */
-export declare const borderRadius: CanvasBorderRadius;
-export default borderRadius;
-//# sourceMappingURL=radius.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/space.d.ts

@@ -1,45 +0,0 @@
-declare type ValueOf<T> = T[keyof T];
-/** Type for the `space` object with keys and px values (strings) */
-export declare type CanvasSpace = {
-    zero: '0px';
-    xxxs: '4px';
-    xxs: '8px';
-    xs: '12px';
-    s: '16px';
-    m: '24px';
-    l: '32px';
-    xl: '40px';
-    xxl: '64px';
-    xxxl: '80px';
-};
-/** Type for `CanvasSpace` keys */
-export declare type CanvasSpaceKeys = keyof CanvasSpace;
-/** The px values for CanvasSpace (strings) */
-export declare type CanvasSpaceValues = ValueOf<CanvasSpace>;
-/** An object of space keys and px values (strings) */
-export declare const space: CanvasSpace;
-/** Type for the `spaceNumbers` object with keys and numeric px values (numbers) */
-export declare type CanvasSpaceNumbers = {
-    zero: 0;
-    xxxs: 4;
-    xxs: 8;
-    xs: 12;
-    s: 16;
-    m: 24;
-    l: 32;
-    xl: 40;
-    xxl: 64;
-    xxxl: 80;
-};
-/** The numeric px values for CanvasSpaceNumbers (numbers) */
-export declare type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
-/**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
- * - Here's an example usage to perform calculations:
- * @example
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
- */
-export declare const spaceNumbers: CanvasSpaceNumbers;
-export {};
-//# sourceMappingURL=space.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/type/fontFamilies.d.ts

@@ -1,37 +0,0 @@
-export declare const fontFamily: string;
-export declare const monoFontFamily: string;
-/** ### Font Family Tokens
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
- *
- * ---
- * There are two font family tokens:
- *
- * - `default`: "Roboto" - what you'll almost always want to choose
- * - `monospace`: "Roboto Mono" - what you'll want for monospace type
- *
- * You can find more detailed information by inspecting individual families.
- * @example
- * ```tsx
- * import { type } from '@workday/canvas-kit-react/tokens';
- *
- * const MonospaceText = () => (
- *   <p css={{fontFamily: type.properties.fonts.monospace}}>
- *     monospace_text
- *   </p>
- * );
- * ```
- */
-export declare const fontFamilies: CanvasFontFamilies;
-export declare type CanvasFontFamilies = {
-    /**
-     * '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif'
-     * unless the font-family is explicitly set in `window.workday.canvas.inheritFontFamily`
-     * */
-    default: typeof fontFamily;
-    /**
-     * '"Roboto Mono", "Courier New", Courier, monospace'
-     * unless the font-family is explicitly set in `window.workday.canvas.inheritMonoFontFamily`
-     * */
-    monospace: typeof monoFontFamily;
-};
-//# sourceMappingURL=fontFamilies.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/type/fontSizes.d.ts

@@ -1,53 +0,0 @@
-declare type ValueOf<T> = T[keyof T];
-/** ### Font Size Tokens
- * ---
- * There are twelve font size tokens. Each token key corresponds to a pixel value.
- * So if you're looking for a token that matches 16px, you'd grab the `fontSizes[16]` token.
- * But it's important to note that the value of each token is converted to base-16 rem.
- *
- * E.g. `fontSizes[16]` returns `'1rem'`
- *
- * Here's a quick reference for all font size tokens:
- * - 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48, 56
- *
- * @example
- * ```tsx
- * import { type } from '@workday/canvas-kit-react/tokens';
- *
- * const LargeText = () => (
- *   <p css={{fontSize: type.properties.fontSizes[20]}}>
- *     Bold Text
- *   </p>
- * );
- * ```
- */
-export declare const fontSizes: CanvasFontSizes;
-export declare type CanvasFontSizes = {
-    /** 10px converted to base-16 rem */
-    10: '0.625rem';
-    /** 12px converted to base-16 rem */
-    12: '0.75rem';
-    /** 14px converted to base-16 rem */
-    14: '0.875rem';
-    /** 16px converted to base-16 rem */
-    16: '1rem';
-    /** 18px converted to base-16 rem */
-    18: '1.125rem';
-    /** 20px converted to base-16 rem */
-    20: '1.25rem';
-    /** 24px converted to base-16 rem */
-    24: '1.5rem';
-    /** 28px converted to base-16 rem */
-    28: '1.75rem';
-    /** 32px converted to base-16 rem */
-    32: '2rem';
-    /** 40px converted to base-16 rem */
-    40: '2.5rem';
-    /** 48px converted to base-16 rem */
-    48: '3rem';
-    /** 56px converted to base-16 rem */
-    56: '3.5rem';
-};
-export declare type CanvasFontSizeValues = ValueOf<CanvasFontSizes>;
-export {};
-//# sourceMappingURL=fontSizes.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/type/fontWeights.d.ts

@@ -1,33 +0,0 @@
-declare type ValueOf<T> = T[keyof T];
-/** ### Font Weight Tokens
- * ---
- * There are three font-weight tokens.
- * Each token name maps to the weight name, and each value is a number.
- *
- * - regular (400)
- * - medium (500)
- * - bold (700)
- *
- * @example
- * ```tsx
- * import { type } from '@workday/canvas-kit-react/tokens';
- *
- * const BoldText = () => (
- *   <p css={{fontWeight: type.properties.fontWeights.bold}>
- *     Bold Text
- *   </p>
- * );
- * ```
- */
-export declare const fontWeights: CanvasFontWeights;
-export declare type CanvasFontWeights = {
-    /** regular font-weight (400) */
-    regular: 400;
-    /** medium font-weight (500) */
-    medium: 500;
-    /** bold font-weight (700) */
-    bold: 700;
-};
-export declare type CanvasFontWeightValues = ValueOf<CanvasFontWeights>;
-export {};
-//# sourceMappingURL=fontWeights.d.ts.map

package/ts3.5/dist/commonjs/tokens/lib/type/index.d.ts

@@ -1,174 +0,0 @@
-import { CanvasFontFamilies } from './fontFamilies';
-import { CanvasFontSizes } from './fontSizes';
-import { CanvasFontWeights } from './fontWeights';
-import { CanvasTypeHierarchy } from './levels';
-import { CanvasTypeVariants } from './variants';
-export { fontFamily, monoFontFamily } from './fontFamilies';
-export { CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
-/**
- * ### Canvas Type Tokens
- * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
- *
- * ---
- * Type tokens are separated into three sections:
- *
- * - `levels` - provide higher-level styles for the Canvas type hierarchy: title, heading, body, and subtext
- * - `properties` - provide low-level type properties (font families, sizes, and weights)
- * - `variants` - provide modifiers for text styles (error, hint, and inverse)
- * */
-export declare const type: CanvasType;
-declare type CanvasTypeProperties = {
-    /** ### Font Family Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * There are two font family tokens:
-     *
-     * - `default`: "Roboto" - what you'll almost always want to choose
-     * - `monospace`: "Roboto Mono" - what you'll want for monospace type
-     *
-     * You can find more detailed information by inspecting individual families.
-     * @example
-     * ```tsx
-     * import { type } from '@workday/canvas-kit-react/tokens';
-     *
-     * const MonospaceText = () => (
-     *   <p css={{fontFamily: type.properties.fontFamilies.monospace}}>
-     *     monospace_text
-     *   </p>
-     * );
-     * ```
-     */
-    fontFamilies: CanvasFontFamilies;
-    /** ### Font Size Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * There are twelve font size tokens. Here's a quick reference:
-     *
-     * `10`, `12`, `14`, `16`, `18`, `20`, `24`, `28`, `32`, `40`, `48`, `56`
-     *
-     * Each token key corresponds to a pixel value. So if you're looking for a token
-     * that matches 16px, you'd grab the `fontSizes[16]` token.
-     *
-     * Note that the value of each token is converted to base-16 rem. For example:
-     *
-     * ```ts
-     * fontSizes[16] \\ returns '1rem'
-     * ```
-     * You can find more detailed information by inspecting individual font sizes.
-     *
-     * @example
-     * ```tsx
-     * import { type } from '@workday/canvas-kit-react/tokens';
-     *
-     * const LargeText = () => (
-     *   <p css={{fontSize: type.properties.fontSizes[20]}}>
-     *     Bold Text
-     *   </p>
-     * );
-     * ```
-     */
-    fontSizes: CanvasFontSizes;
-    /** ### Font Weight Tokens
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * There are three font-weight tokens:
-     *
-     * - `regular` (400)
-     * - `medium` (500)
-     * - `bold` (700)
-     *
-     * Each token maps a weight name to a number value.
-     *
-     * @example
-     * ```tsx
-     * import { type } from '@workday/canvas-kit-react/tokens';
-     *
-     * const BoldText = () => (
-     *   <p css={{fontWeight: type.properties.fontWeights.bold}}>
-     *     Bold Text
-     *   </p>
-     * );
-     * ```
-     */
-    fontWeights: CanvasFontWeights;
-};
-export declare type CanvasType = {
-    /** ### Canvas Type Hierarchy
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * The hierarchy is organized into four levels, which correspond to levels defined in Figma.
-     *
-     * - `title`: Intended to be used for large page titles.
-     * - `heading`: Intended to be used for headings and large text.
-     * - `body`: Intended to be used for standard body text.
-     * - `subtext`: Intended to be used for small subtext content or in tight spaces.
-     *
-     * Each level has three sizes: `large`, `medium`, and `small`.
-     *
-     * The type hierarchy tokens are recommended for most type usage.
-     * These objects handle font sizes, weights, line heights, letter spacing, and color for you,
-     * making it really simple to implement consistent type without much effort
-     *
-     * You can find more detailed information by inspecting individual levels and sizes.
-     *
-     * @example
-     * ```tsx
-     * import { type } from '@workday/canvas-kit-react/tokens';
-     *
-     * const Heading = () => (
-     *   <h3 css={type.levels.heading.medium}>
-     *     Heading Text
-     *   </h3>
-     * );
-     * ```
-     */
-    levels: CanvasTypeHierarchy;
-    /** ### Canvas Type Properties
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * Type properties are organized in three parts:
-     *
-     * - `fontFamilies`
-     * - `fontSizes`
-     * - `fontWeights`
-     *
-     * Type properties provide precise control and are only intended to be used when the
-     * type hierarchy tokens are not well-suited for the task. You can find more detailed
-     * information by inspecting individual properties.
-     *
-     */
-    properties: CanvasTypeProperties;
-    /** ### Canvas Type Variants
-     * [View Storybook Docs](https://workday.github.io/canvas-kit/?path=/story/tokens-tokens-react--type)
-     *
-     * ---
-     * There are three type variants:
-     *
-     * - `error` Used for making errors more visible
-     * - `hint` Used for help text and secondary content
-     * - `inverse` Used for any text on a dark or colored background
-     *
-     * Type variants provide modifiers for text styles.
-     * They are typically used in conjunction with other type styles
-     * such as the type hierarchy and type properties tokens.
-     * You can find more detailed information by inspecting individual variants.
-     *
-     * @example
-     * ```tsx
-     * import { type } from '@workday/canvas-kit-react/tokens';
-     *
-     * const ErrorText = () => (
-     *   <span css={{...type.levels.subtext.small, ...type.variants.error}}>
-     *     Error Text
-     *   </span>
-     * );
-     * ```
-     */
-    variants: CanvasTypeVariants;
-};
-//# sourceMappingURL=index.d.ts.map