@zendeskgarden/react-theming 8.69.2 → 8.69.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/typings/elements/ThemeProvider.d.ts +14 -14
- package/dist/typings/elements/palette/index.d.ts +150 -150
- package/dist/typings/elements/theme/index.d.ts +10 -10
- package/dist/typings/index.d.ts +27 -27
- package/dist/typings/types/index.d.ts +127 -127
- package/dist/typings/utils/arrowStyles.d.ts +62 -62
- package/dist/typings/utils/focusStyles.d.ts +47 -47
- package/dist/typings/utils/getColor.d.ts +25 -25
- package/dist/typings/utils/getDocument.d.ts +9 -9
- package/dist/typings/utils/getFocusBoxShadow.d.ts +37 -37
- package/dist/typings/utils/getLineHeight.d.ts +15 -15
- package/dist/typings/utils/isRtl.d.ts +9 -9
- package/dist/typings/utils/mediaQuery.d.ts +24 -24
- package/dist/typings/utils/menuStyles.d.ts +37 -37
- package/dist/typings/utils/retrieveComponentStyles.d.ts +9 -9
- package/dist/typings/utils/useDocument.d.ts +8 -8
- package/dist/typings/utils/useText.d.ts +19 -19
- package/dist/typings/utils/useWindow.d.ts +8 -8
- package/dist/typings/utils/withTheme.d.ts +8 -8
- package/package.json +2 -2
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { ArrowPosition } from '../types';
|
|
8
|
-
type ArrowOptions = {
|
|
9
|
-
size?: string;
|
|
10
|
-
inset?: string;
|
|
11
|
-
animationModifier?: string;
|
|
12
|
-
};
|
|
13
|
-
export declare const exponentialSymbols: {
|
|
14
|
-
symbols: {
|
|
15
|
-
sqrt: {
|
|
16
|
-
func: {
|
|
17
|
-
symbol: string;
|
|
18
|
-
f: (a: number) => number;
|
|
19
|
-
notation: string;
|
|
20
|
-
precedence: number;
|
|
21
|
-
rightToLeft: number;
|
|
22
|
-
argCount: number;
|
|
23
|
-
};
|
|
24
|
-
symbol: string;
|
|
25
|
-
regSymbol: string;
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* CSS for an arrow at the given position and with the given size. The arrow is
|
|
31
|
-
* positioned via `::before` and `::after` pseudo-elements and inherits the
|
|
32
|
-
* base element's border, background, and box-shadow.
|
|
33
|
-
*
|
|
34
|
-
* IMPORTANT: the element that receives arrow styling must be wrapped in a
|
|
35
|
-
* positioned box (i.e. `relative`, `absolute`, `fixed`) that has a `z-index`
|
|
36
|
-
* greater than or equal to zero. Without this, the arrow cannot properly
|
|
37
|
-
* display inherited border or box-shadow styling.
|
|
38
|
-
*
|
|
39
|
-
* @param {string} position One of:
|
|
40
|
-
* - `'top'`
|
|
41
|
-
* - `'top-left'`
|
|
42
|
-
* - `'top-right'`
|
|
43
|
-
* - `'right'`
|
|
44
|
-
* - `'right-top'`
|
|
45
|
-
* - `'right-bottom'`
|
|
46
|
-
* - `'bottom'`
|
|
47
|
-
* - `'bottom-left'`
|
|
48
|
-
* - `'bottom-right'`
|
|
49
|
-
* - `'left'`
|
|
50
|
-
* - `'left-top'`
|
|
51
|
-
* - `'left-bottom'`
|
|
52
|
-
* @param {string} [options.size='6px'] Distance from the base (hypotenuse) to point
|
|
53
|
-
* (right angle) of the arrow expressed as a CSS dimension.
|
|
54
|
-
* @param {string} [options.inset='0'] Tweak arrow positioning by adjusting with
|
|
55
|
-
* either a positive (push the arrow in) or negative (pull the arrow out) value.
|
|
56
|
-
* @param {string} [options.animationModifier] A CSS class or attribute selector
|
|
57
|
-
* which, when applied, animates the arrow's appearance.
|
|
58
|
-
*
|
|
59
|
-
* @component
|
|
60
|
-
*/
|
|
61
|
-
export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").FlattenSimpleInterpolation;
|
|
62
|
-
export {};
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ArrowPosition } from '../types';
|
|
8
|
+
type ArrowOptions = {
|
|
9
|
+
size?: string;
|
|
10
|
+
inset?: string;
|
|
11
|
+
animationModifier?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare const exponentialSymbols: {
|
|
14
|
+
symbols: {
|
|
15
|
+
sqrt: {
|
|
16
|
+
func: {
|
|
17
|
+
symbol: string;
|
|
18
|
+
f: (a: number) => number;
|
|
19
|
+
notation: string;
|
|
20
|
+
precedence: number;
|
|
21
|
+
rightToLeft: number;
|
|
22
|
+
argCount: number;
|
|
23
|
+
};
|
|
24
|
+
symbol: string;
|
|
25
|
+
regSymbol: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* CSS for an arrow at the given position and with the given size. The arrow is
|
|
31
|
+
* positioned via `::before` and `::after` pseudo-elements and inherits the
|
|
32
|
+
* base element's border, background, and box-shadow.
|
|
33
|
+
*
|
|
34
|
+
* IMPORTANT: the element that receives arrow styling must be wrapped in a
|
|
35
|
+
* positioned box (i.e. `relative`, `absolute`, `fixed`) that has a `z-index`
|
|
36
|
+
* greater than or equal to zero. Without this, the arrow cannot properly
|
|
37
|
+
* display inherited border or box-shadow styling.
|
|
38
|
+
*
|
|
39
|
+
* @param {string} position One of:
|
|
40
|
+
* - `'top'`
|
|
41
|
+
* - `'top-left'`
|
|
42
|
+
* - `'top-right'`
|
|
43
|
+
* - `'right'`
|
|
44
|
+
* - `'right-top'`
|
|
45
|
+
* - `'right-bottom'`
|
|
46
|
+
* - `'bottom'`
|
|
47
|
+
* - `'bottom-left'`
|
|
48
|
+
* - `'bottom-right'`
|
|
49
|
+
* - `'left'`
|
|
50
|
+
* - `'left-top'`
|
|
51
|
+
* - `'left-bottom'`
|
|
52
|
+
* @param {string} [options.size='6px'] Distance from the base (hypotenuse) to point
|
|
53
|
+
* (right angle) of the arrow expressed as a CSS dimension.
|
|
54
|
+
* @param {string} [options.inset='0'] Tweak arrow positioning by adjusting with
|
|
55
|
+
* either a positive (push the arrow in) or negative (pull the arrow out) value.
|
|
56
|
+
* @param {string} [options.animationModifier] A CSS class or attribute selector
|
|
57
|
+
* which, when applied, animates the arrow's appearance.
|
|
58
|
+
*
|
|
59
|
+
* @component
|
|
60
|
+
*/
|
|
61
|
+
export default function arrowStyles(position: ArrowPosition, options?: ArrowOptions): import("styled-components").FlattenSimpleInterpolation;
|
|
62
|
+
export {};
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { CSSObject } from 'styled-components';
|
|
8
|
-
import { FocusBoxShadowParameters } from './getFocusBoxShadow';
|
|
9
|
-
export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
|
|
10
|
-
type FocusStylesParameters = FocusBoxShadowParameters & {
|
|
11
|
-
condition?: boolean;
|
|
12
|
-
selector?: string;
|
|
13
|
-
styles?: CSSObject;
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Garden standard `box-shadow` focus styling.
|
|
17
|
-
*
|
|
18
|
-
* @param {boolean} [options.condition=true] Supplies an optional condition that can be used to prevent the focus `box-shadow`
|
|
19
|
-
* @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
|
|
20
|
-
* @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
21
|
-
* @param {string} [options.selector=SELECTOR_FOCUS_VISIBLE] Provides a substitute `:focus-visible` pseudo-class CSS selector.
|
|
22
|
-
* @param {number} [options.shade=600] Selects a shade for the given hue
|
|
23
|
-
* @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
|
|
24
|
-
* @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
25
|
-
* @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
|
|
26
|
-
* @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
|
|
27
|
-
* @param {Object} [options.styles] Adds CSS property values to be rendered with `:focus-visible`
|
|
28
|
-
* @param {Object} options.theme Provides values used to resolve the desired color
|
|
29
|
-
*
|
|
30
|
-
* @returns CSS structured as follows, with `{values}` determined by the options provided:
|
|
31
|
-
* ```css
|
|
32
|
-
* :focus {
|
|
33
|
-
* outline: none;
|
|
34
|
-
* }
|
|
35
|
-
*
|
|
36
|
-
* :focus-visible,
|
|
37
|
-
* [data-garden-focus-visible='true'] {
|
|
38
|
-
* box-shadow: 0 0 0 {1px} #fff,
|
|
39
|
-
* 0 0 0 {3px} {blue};
|
|
40
|
-
* outline: {2px} solid transparent;
|
|
41
|
-
* outline-offset: {1px};
|
|
42
|
-
* // additional {styles} here...
|
|
43
|
-
* }
|
|
44
|
-
* ```
|
|
45
|
-
*/
|
|
46
|
-
export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
|
|
47
|
-
export {};
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { CSSObject } from 'styled-components';
|
|
8
|
+
import { FocusBoxShadowParameters } from './getFocusBoxShadow';
|
|
9
|
+
export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible, &[data-garden-focus-visible=\"true\"]";
|
|
10
|
+
type FocusStylesParameters = FocusBoxShadowParameters & {
|
|
11
|
+
condition?: boolean;
|
|
12
|
+
selector?: string;
|
|
13
|
+
styles?: CSSObject;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Garden standard `box-shadow` focus styling.
|
|
17
|
+
*
|
|
18
|
+
* @param {boolean} [options.condition=true] Supplies an optional condition that can be used to prevent the focus `box-shadow`
|
|
19
|
+
* @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
|
|
20
|
+
* @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
21
|
+
* @param {string} [options.selector=SELECTOR_FOCUS_VISIBLE] Provides a substitute `:focus-visible` pseudo-class CSS selector.
|
|
22
|
+
* @param {number} [options.shade=600] Selects a shade for the given hue
|
|
23
|
+
* @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
|
|
24
|
+
* @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
25
|
+
* @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
|
|
26
|
+
* @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
|
|
27
|
+
* @param {Object} [options.styles] Adds CSS property values to be rendered with `:focus-visible`
|
|
28
|
+
* @param {Object} options.theme Provides values used to resolve the desired color
|
|
29
|
+
*
|
|
30
|
+
* @returns CSS structured as follows, with `{values}` determined by the options provided:
|
|
31
|
+
* ```css
|
|
32
|
+
* :focus {
|
|
33
|
+
* outline: none;
|
|
34
|
+
* }
|
|
35
|
+
*
|
|
36
|
+
* :focus-visible,
|
|
37
|
+
* [data-garden-focus-visible='true'] {
|
|
38
|
+
* box-shadow: 0 0 0 {1px} #fff,
|
|
39
|
+
* 0 0 0 {3px} {blue};
|
|
40
|
+
* outline: {2px} solid transparent;
|
|
41
|
+
* outline-offset: {1px};
|
|
42
|
+
* // additional {styles} here...
|
|
43
|
+
* }
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
export declare const focusStyles: ({ condition, selector, shadowWidth, spacerWidth, styles: { boxShadow, ...styles }, theme, ...options }: FocusStylesParameters) => import("styled-components").FlattenSimpleInterpolation;
|
|
47
|
+
export {};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/// <reference types="lodash" />
|
|
8
|
-
import { DefaultTheme } from 'styled-components';
|
|
9
|
-
export type Hue = Record<number | string, string> | string;
|
|
10
|
-
export declare const DEFAULT_SHADE = 600;
|
|
11
|
-
/**
|
|
12
|
-
* Get the palette color for the given hue, shade, and theme.
|
|
13
|
-
*
|
|
14
|
-
* @param {string|Object} hue A `theme.palette` hue or one of the following `theme.colors` keys:
|
|
15
|
-
* - `'primaryHue'` = `theme.colors.primaryHue`
|
|
16
|
-
* - `'dangerHue'` = `theme.colors.dangerHue`
|
|
17
|
-
* - `'warningHue'` = `theme.colors.warningHue`
|
|
18
|
-
* - `'successHue'` = `theme.colors.successHue`
|
|
19
|
-
* - `'neutralHue'` = `theme.colors.neutralHue`
|
|
20
|
-
* - `'chromeHue'` = `theme.colors.chromeHue`
|
|
21
|
-
* @param {number} [shade=DEFAULT_SHADE] A hue shade.
|
|
22
|
-
* @param {Object} theme Context `theme` object.
|
|
23
|
-
* @param {Number} [transparency] An alpha-channel value between 0 and 1.
|
|
24
|
-
*/
|
|
25
|
-
export declare const getColor: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="lodash" />
|
|
8
|
+
import { DefaultTheme } from 'styled-components';
|
|
9
|
+
export type Hue = Record<number | string, string> | string;
|
|
10
|
+
export declare const DEFAULT_SHADE = 600;
|
|
11
|
+
/**
|
|
12
|
+
* Get the palette color for the given hue, shade, and theme.
|
|
13
|
+
*
|
|
14
|
+
* @param {string|Object} hue A `theme.palette` hue or one of the following `theme.colors` keys:
|
|
15
|
+
* - `'primaryHue'` = `theme.colors.primaryHue`
|
|
16
|
+
* - `'dangerHue'` = `theme.colors.dangerHue`
|
|
17
|
+
* - `'warningHue'` = `theme.colors.warningHue`
|
|
18
|
+
* - `'successHue'` = `theme.colors.successHue`
|
|
19
|
+
* - `'neutralHue'` = `theme.colors.neutralHue`
|
|
20
|
+
* - `'chromeHue'` = `theme.colors.chromeHue`
|
|
21
|
+
* @param {number} [shade=DEFAULT_SHADE] A hue shade.
|
|
22
|
+
* @param {Object} theme Context `theme` object.
|
|
23
|
+
* @param {Number} [transparency] An alpha-channel value between 0 and 1.
|
|
24
|
+
*/
|
|
25
|
+
export declare const getColor: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
/** @component */
|
|
9
|
-
export default function getDocument({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): any;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
/** @component */
|
|
9
|
+
export default function getDocument({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): any;
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { IGardenTheme } from '../types';
|
|
8
|
-
import { Hue } from './getColor';
|
|
9
|
-
export type FocusBoxShadowParameters = {
|
|
10
|
-
boxShadow?: string;
|
|
11
|
-
inset?: boolean;
|
|
12
|
-
hue?: Hue;
|
|
13
|
-
shade?: number;
|
|
14
|
-
shadowWidth?: 'sm' | 'md';
|
|
15
|
-
spacerHue?: Hue;
|
|
16
|
-
spacerShade?: number;
|
|
17
|
-
spacerWidth?: null | 'xs' | 'sm';
|
|
18
|
-
theme: IGardenTheme;
|
|
19
|
-
};
|
|
20
|
-
/**
|
|
21
|
-
* Get a CSS `box-shadow` property value for focus state styling. The `hue` and
|
|
22
|
-
* `shade` are used to determine the color of the focus ring.
|
|
23
|
-
*
|
|
24
|
-
* @param {string} [options.boxShadow] Provides an existing `box-shadow` (a drop shadow, for example) to be retained along with the focus ring
|
|
25
|
-
* @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
|
|
26
|
-
* @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
27
|
-
* @param {number} [options.shade=600] Selects a shade for the given `hue`
|
|
28
|
-
* @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
|
|
29
|
-
* @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
30
|
-
* @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
|
|
31
|
-
* @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
|
|
32
|
-
* @param {Object} options.theme Provides values used to resolve the desired color
|
|
33
|
-
*
|
|
34
|
-
* @returns A `box-shadow` property value for the given options. Default is a
|
|
35
|
-
* 3px `blue[600]` ring with a 1px white spacer overlay.
|
|
36
|
-
*/
|
|
37
|
-
export declare const getFocusBoxShadow: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { IGardenTheme } from '../types';
|
|
8
|
+
import { Hue } from './getColor';
|
|
9
|
+
export type FocusBoxShadowParameters = {
|
|
10
|
+
boxShadow?: string;
|
|
11
|
+
inset?: boolean;
|
|
12
|
+
hue?: Hue;
|
|
13
|
+
shade?: number;
|
|
14
|
+
shadowWidth?: 'sm' | 'md';
|
|
15
|
+
spacerHue?: Hue;
|
|
16
|
+
spacerShade?: number;
|
|
17
|
+
spacerWidth?: null | 'xs' | 'sm';
|
|
18
|
+
theme: IGardenTheme;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Get a CSS `box-shadow` property value for focus state styling. The `hue` and
|
|
22
|
+
* `shade` are used to determine the color of the focus ring.
|
|
23
|
+
*
|
|
24
|
+
* @param {string} [options.boxShadow] Provides an existing `box-shadow` (a drop shadow, for example) to be retained along with the focus ring
|
|
25
|
+
* @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
|
|
26
|
+
* @param {string|Object} [options.hue='primaryHue'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
27
|
+
* @param {number} [options.shade=600] Selects a shade for the given `hue`
|
|
28
|
+
* @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
|
|
29
|
+
* @param {string|Object} [options.spacerHue='background'] Provides a theme object `palette` hue or `color` key, or any valid CSS color notation
|
|
30
|
+
* @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
|
|
31
|
+
* @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
|
|
32
|
+
* @param {Object} options.theme Provides values used to resolve the desired color
|
|
33
|
+
*
|
|
34
|
+
* @returns A `box-shadow` property value for the given options. Default is a
|
|
35
|
+
* 3px `blue[600]` ring with a 1px white spacer overlay.
|
|
36
|
+
*/
|
|
37
|
+
export declare const getFocusBoxShadow: ({ boxShadow, inset, hue, shade, shadowWidth, spacerHue, spacerShade, spacerWidth, theme }: FocusBoxShadowParameters) => string;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* Get unitless line height based on the given pixel-valued height and font size.
|
|
9
|
-
*
|
|
10
|
-
* @param {string|number} height Desired line height in pixels.
|
|
11
|
-
* @param {string|number} fontSize Font size (in pixels) of text contained within the line.
|
|
12
|
-
*
|
|
13
|
-
* @component
|
|
14
|
-
*/
|
|
15
|
-
export default function getLineHeight(height: string | number, fontSize: string | number): number;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Get unitless line height based on the given pixel-valued height and font size.
|
|
9
|
+
*
|
|
10
|
+
* @param {string|number} height Desired line height in pixels.
|
|
11
|
+
* @param {string|number} fontSize Font size (in pixels) of text contained within the line.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
*/
|
|
15
|
+
export default function getLineHeight(height: string | number, fontSize: string | number): number;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
/** @component */
|
|
9
|
-
export default function isRtl({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): boolean;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
/** @component */
|
|
9
|
+
export default function isRtl({ theme }?: Partial<ThemeProps<Partial<DefaultTheme>>>): boolean;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
type QUERY = 'up' | 'down' | 'only' | 'between';
|
|
9
|
-
type BREAKPOINT = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
10
|
-
/**
|
|
11
|
-
* Get a media query string for the given query specifier, breakpoint name, and theme.
|
|
12
|
-
*
|
|
13
|
-
* @param {string} query A query specifier, one of:
|
|
14
|
-
* - `'up'` = match screen widths including the given breakpoint and up.
|
|
15
|
-
* - `'down'` = match screen widths included within the given breakpoint and down.
|
|
16
|
-
* - `'only'` = match screen widths included within the given breakpoint.
|
|
17
|
-
* - `'between'` = match screen widths including the first breakpoint up through
|
|
18
|
-
* screen widths included within the second breakpoint.
|
|
19
|
-
* @param {string|Array} breakpoint A `theme.breakpoints` key, one of: `'xs'`, `'sm'`,
|
|
20
|
-
* `'md'`, `'lg'`, `'xl'`; or an array of two keys when 'between' is the specified query.
|
|
21
|
-
* @param {Object} theme Context `theme` object.
|
|
22
|
-
*/
|
|
23
|
-
export default function mediaQuery(query: QUERY, breakpoint: BREAKPOINT | [BREAKPOINT, BREAKPOINT], theme?: DefaultTheme): string;
|
|
24
|
-
export {};
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { DefaultTheme } from 'styled-components';
|
|
8
|
+
type QUERY = 'up' | 'down' | 'only' | 'between';
|
|
9
|
+
type BREAKPOINT = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
10
|
+
/**
|
|
11
|
+
* Get a media query string for the given query specifier, breakpoint name, and theme.
|
|
12
|
+
*
|
|
13
|
+
* @param {string} query A query specifier, one of:
|
|
14
|
+
* - `'up'` = match screen widths including the given breakpoint and up.
|
|
15
|
+
* - `'down'` = match screen widths included within the given breakpoint and down.
|
|
16
|
+
* - `'only'` = match screen widths included within the given breakpoint.
|
|
17
|
+
* - `'between'` = match screen widths including the first breakpoint up through
|
|
18
|
+
* screen widths included within the second breakpoint.
|
|
19
|
+
* @param {string|Array} breakpoint A `theme.breakpoints` key, one of: `'xs'`, `'sm'`,
|
|
20
|
+
* `'md'`, `'lg'`, `'xl'`; or an array of two keys when 'between' is the specified query.
|
|
21
|
+
* @param {Object} theme Context `theme` object.
|
|
22
|
+
*/
|
|
23
|
+
export default function mediaQuery(query: QUERY, breakpoint: BREAKPOINT | [BREAKPOINT, BREAKPOINT], theme?: DefaultTheme): string;
|
|
24
|
+
export {};
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import { MenuPosition } from '../types';
|
|
9
|
-
type MenuOptions = {
|
|
10
|
-
theme?: DefaultTheme;
|
|
11
|
-
hidden?: boolean;
|
|
12
|
-
margin?: string;
|
|
13
|
-
zIndex?: number;
|
|
14
|
-
animationModifier?: string;
|
|
15
|
-
childSelector?: string;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* CSS for a `wrapper > menu` at the given position. The wrapper provides
|
|
19
|
-
* absolute positioning (e.g. via Popper). The menu provides basic styling and
|
|
20
|
-
* optional animation.
|
|
21
|
-
*
|
|
22
|
-
* @param {string} position One of:
|
|
23
|
-
* - `'top'`
|
|
24
|
-
* - `'right'`
|
|
25
|
-
* - `'bottom'`
|
|
26
|
-
* - `'left'`
|
|
27
|
-
* @param {Object} [options.theme=`DEFAULT_THEME`] Context theme object.
|
|
28
|
-
* @param {boolean} [options.hidden] Determine whether the menu is hidden.
|
|
29
|
-
* @param {string} [options.margin] Amount of margin between menu and trigger.
|
|
30
|
-
* @param {number} [options.zIndex] The menu wrapper's z-index.
|
|
31
|
-
* @param {string} [options.childSelector=`> *`] A CSS selector that identifies the
|
|
32
|
-
* child menu component.
|
|
33
|
-
* @param {string} [options.animationModifier] A CSS class or attribute selector
|
|
34
|
-
* which, when applied, animates the menu's appearance.
|
|
35
|
-
*/
|
|
36
|
-
export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenSimpleInterpolation;
|
|
37
|
-
export {};
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { DefaultTheme } from 'styled-components';
|
|
8
|
+
import { MenuPosition } from '../types';
|
|
9
|
+
type MenuOptions = {
|
|
10
|
+
theme?: DefaultTheme;
|
|
11
|
+
hidden?: boolean;
|
|
12
|
+
margin?: string;
|
|
13
|
+
zIndex?: number;
|
|
14
|
+
animationModifier?: string;
|
|
15
|
+
childSelector?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* CSS for a `wrapper > menu` at the given position. The wrapper provides
|
|
19
|
+
* absolute positioning (e.g. via Popper). The menu provides basic styling and
|
|
20
|
+
* optional animation.
|
|
21
|
+
*
|
|
22
|
+
* @param {string} position One of:
|
|
23
|
+
* - `'top'`
|
|
24
|
+
* - `'right'`
|
|
25
|
+
* - `'bottom'`
|
|
26
|
+
* - `'left'`
|
|
27
|
+
* @param {Object} [options.theme=`DEFAULT_THEME`] Context theme object.
|
|
28
|
+
* @param {boolean} [options.hidden] Determine whether the menu is hidden.
|
|
29
|
+
* @param {string} [options.margin] Amount of margin between menu and trigger.
|
|
30
|
+
* @param {number} [options.zIndex] The menu wrapper's z-index.
|
|
31
|
+
* @param {string} [options.childSelector=`> *`] A CSS selector that identifies the
|
|
32
|
+
* child menu component.
|
|
33
|
+
* @param {string} [options.animationModifier] A CSS class or attribute selector
|
|
34
|
+
* which, when applied, animates the menu's appearance.
|
|
35
|
+
*/
|
|
36
|
+
export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenSimpleInterpolation;
|
|
37
|
+
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
/** @component */
|
|
9
|
-
export default function retrieveComponentStyles(componentId: string, props: Partial<ThemeProps<Partial<DefaultTheme>>>): any;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
/** @component */
|
|
9
|
+
export default function retrieveComponentStyles(componentId: string, props: Partial<ThemeProps<Partial<DefaultTheme>>>): any;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
export declare const useDocument: (theme?: Partial<DefaultTheme>) => Document | undefined;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { DefaultTheme } from 'styled-components';
|
|
8
|
+
export declare const useDocument: (theme?: Partial<DefaultTheme>) => Document | undefined;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { FC } from 'react';
|
|
8
|
-
/**
|
|
9
|
-
* Provides default text for a11y (i.e. aria-label) or other critical attribute
|
|
10
|
-
* strings. If necessary, a development mode console warning prompts the
|
|
11
|
-
* consumer to provide customized, translated text.
|
|
12
|
-
*
|
|
13
|
-
* @param component The React component to which the `props` belong
|
|
14
|
-
* @param props The component props to check for `name`
|
|
15
|
-
* @param name The name of the component prop to set default text on
|
|
16
|
-
* @param text The default text to apply if the value of `props[name]` is undefined
|
|
17
|
-
* @param condition An optional condition that can be used to prevent evaluation
|
|
18
|
-
*/
|
|
19
|
-
export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string, condition?: boolean) => string | undefined;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { FC } from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* Provides default text for a11y (i.e. aria-label) or other critical attribute
|
|
10
|
+
* strings. If necessary, a development mode console warning prompts the
|
|
11
|
+
* consumer to provide customized, translated text.
|
|
12
|
+
*
|
|
13
|
+
* @param component The React component to which the `props` belong
|
|
14
|
+
* @param props The component props to check for `name`
|
|
15
|
+
* @param name The name of the component prop to set default text on
|
|
16
|
+
* @param text The default text to apply if the value of `props[name]` is undefined
|
|
17
|
+
* @param condition An optional condition that can be used to prevent evaluation
|
|
18
|
+
*/
|
|
19
|
+
export declare const useText: (component: Pick<FC, 'displayName'>, props: Record<string, any>, name: string, text: string, condition?: boolean) => string | undefined;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
export declare const useWindow: (theme?: Partial<DefaultTheme>) => Window | undefined;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { DefaultTheme } from 'styled-components';
|
|
8
|
+
export declare const useWindow: (theme?: Partial<DefaultTheme>) => Window | undefined;
|