@zendeskgarden/react-theming 9.0.0-next.2 → 9.0.0-next.21
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/esm/elements/ThemeProvider.js +24 -0
- package/dist/esm/elements/palette/index.js +259 -0
- package/dist/esm/elements/palette/v8.js +149 -0
- package/dist/esm/elements/theme/index.js +240 -0
- package/dist/esm/index.js +28 -0
- package/dist/esm/types/index.js +11 -0
- package/dist/esm/utils/StyledBaseIcon.js +22 -0
- package/dist/esm/utils/arrowStyles.js +52 -0
- package/dist/esm/utils/focusStyles.js +43 -0
- package/dist/esm/utils/getArrowPosition.js +35 -0
- package/dist/esm/utils/getCheckeredBackground.js +40 -0
- package/dist/esm/utils/getColor.js +245 -0
- package/dist/esm/utils/getColorV8.js +72 -0
- package/dist/esm/utils/getFloatingPlacements.js +58 -0
- package/dist/esm/utils/getFocusBoxShadow.js +45 -0
- package/dist/esm/utils/getLineHeight.js +22 -0
- package/dist/esm/utils/getMenuPosition.js +11 -0
- package/dist/esm/utils/mediaQuery.js +56 -0
- package/dist/esm/utils/menuStyles.js +70 -0
- package/dist/esm/utils/retrieveComponentStyles.js +19 -0
- package/dist/esm/utils/useDocument.js +21 -0
- package/dist/esm/utils/useText.js +29 -0
- package/dist/esm/utils/useWindow.js +21 -0
- package/dist/index.cjs.js +848 -201
- package/dist/typings/elements/ThemeProvider.d.ts +1 -1
- package/dist/typings/elements/palette/index.d.ts +134 -26
- package/dist/typings/elements/palette/v8.d.ts +149 -0
- package/dist/typings/elements/theme/index.d.ts +0 -1
- package/dist/typings/index.d.ts +6 -4
- package/dist/typings/types/index.d.ts +61 -16
- package/dist/typings/utils/StyledBaseIcon.d.ts +8 -0
- package/dist/typings/utils/arrowStyles.d.ts +0 -16
- package/dist/typings/utils/focusStyles.d.ts +3 -11
- package/dist/typings/utils/getCheckeredBackground.d.ts +20 -0
- package/dist/typings/utils/getColor.d.ts +14 -9
- package/dist/typings/utils/getColorV8.d.ts +27 -0
- package/dist/typings/utils/getFocusBoxShadow.d.ts +6 -21
- package/dist/typings/utils/menuStyles.d.ts +1 -1
- package/package.json +8 -7
- package/dist/index.esm.js +0 -714
|
@@ -0,0 +1,27 @@
|
|
|
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 { Hue } from '../types';
|
|
9
|
+
import { DefaultTheme } from 'styled-components';
|
|
10
|
+
export declare const DEFAULT_SHADE = 600;
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `getColor` instead.
|
|
13
|
+
*
|
|
14
|
+
* Get the palette color for the given hue, shade, and theme.
|
|
15
|
+
*
|
|
16
|
+
* @param {string|Object} hue A `theme.palette` hue or one of the following `theme.colors` keys:
|
|
17
|
+
* - `'primaryHue'` = `theme.colors.primaryHue`
|
|
18
|
+
* - `'dangerHue'` = `theme.colors.dangerHue`
|
|
19
|
+
* - `'warningHue'` = `theme.colors.warningHue`
|
|
20
|
+
* - `'successHue'` = `theme.colors.successHue`
|
|
21
|
+
* - `'neutralHue'` = `theme.colors.neutralHue`
|
|
22
|
+
* - `'chromeHue'` = `theme.colors.chromeHue`
|
|
23
|
+
* @param {number} [shade=DEFAULT_SHADE] A hue shade.
|
|
24
|
+
* @param {Object} theme Context `theme` object.
|
|
25
|
+
* @param {Number} [transparency] An alpha-channel value between 0 and 1.
|
|
26
|
+
*/
|
|
27
|
+
export declare const getColorV8: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;
|
|
@@ -4,34 +4,19 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import {
|
|
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
|
-
};
|
|
7
|
+
import { FocusBoxShadowParameters } from '../types';
|
|
20
8
|
/**
|
|
21
|
-
* Get a CSS `box-shadow` property value for focus state styling.
|
|
22
|
-
* `shade` are used to determine the color of the focus ring.
|
|
9
|
+
* Get a CSS `box-shadow` property value for focus state styling.
|
|
23
10
|
*
|
|
24
11
|
* @param {string} [options.boxShadow] Provides an existing `box-shadow` (a drop shadow, for example) to be retained along with the focus ring
|
|
25
12
|
* @param {boolean} [options.inset=false] Determines whether the `box-shadow` is inset
|
|
26
|
-
* @param {
|
|
27
|
-
* @param {number} [options.shade=600] Selects a shade for the given `hue`
|
|
13
|
+
* @param {Object} [options.color={ variable: 'border.primaryEmphasis' }] Provides an object with `getColor` parameters used to determine the focus ring color
|
|
28
14
|
* @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow`
|
|
29
|
-
* @param {
|
|
30
|
-
* @param {number} [options.spacerShade=600] Selects a shade for the given `spacerHue`
|
|
15
|
+
* @param {Object} [options.spacerColor={ variable: 'background.default' }] Provides an object with `getColor` parameters used to determine the spacer color
|
|
31
16
|
* @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer, or `null` to remove
|
|
32
17
|
* @param {Object} options.theme Provides values used to resolve the desired color
|
|
33
18
|
*
|
|
34
19
|
* @returns A `box-shadow` property value for the given options. Default is a
|
|
35
|
-
* 3px
|
|
20
|
+
* 3px blue ring with a 1px spacer overlay that matches the background.
|
|
36
21
|
*/
|
|
37
|
-
export declare const getFocusBoxShadow: ({ boxShadow, inset,
|
|
22
|
+
export declare const getFocusBoxShadow: ({ boxShadow, inset, color, shadowWidth, spacerColor, spacerWidth, theme, ...args }: FocusBoxShadowParameters) => string;
|
|
@@ -33,5 +33,5 @@ type MenuOptions = {
|
|
|
33
33
|
* @param {string} [options.animationModifier] A CSS class or attribute selector
|
|
34
34
|
* which, when applied, animates the menu's appearance.
|
|
35
35
|
*/
|
|
36
|
-
export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").
|
|
36
|
+
export default function menuStyles(position: MenuPosition, options?: MenuOptions): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<DefaultTheme>>;
|
|
37
37
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-theming",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.21",
|
|
4
4
|
"description": "Theming utilities and components within the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -22,18 +22,19 @@
|
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@floating-ui/react-dom": "^2.0.0",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
25
|
+
"color2k": "^2.0.3",
|
|
26
|
+
"lodash.get": "^4.4.2",
|
|
27
27
|
"lodash.memoize": "^4.1.2",
|
|
28
|
-
"polished": "^4.
|
|
28
|
+
"polished": "^4.3.1",
|
|
29
29
|
"prop-types": "^15.5.7"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=16.8.0",
|
|
33
33
|
"react-dom": ">=16.8.0",
|
|
34
|
-
"styled-components": "^4.2.0 || ^5.1
|
|
34
|
+
"styled-components": "^4.2.0 || ^5.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
+
"@types/lodash.get": "4.4.9",
|
|
37
38
|
"@types/lodash.memoize": "4.1.9"
|
|
38
39
|
},
|
|
39
40
|
"keywords": [
|
|
@@ -46,5 +47,5 @@
|
|
|
46
47
|
"access": "public"
|
|
47
48
|
},
|
|
48
49
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
|
|
50
51
|
}
|