@zendeskgarden/react-theming 8.74.3 → 8.75.0
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/index.cjs.js
CHANGED
|
@@ -368,7 +368,7 @@ const adjust = (color, expected, actual) => {
|
|
|
368
368
|
}
|
|
369
369
|
return color;
|
|
370
370
|
};
|
|
371
|
-
const
|
|
371
|
+
const getColorV8 = memoize__default.default(function (hue) {
|
|
372
372
|
let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
|
|
373
373
|
let theme = arguments.length > 2 ? arguments[2] : undefined;
|
|
374
374
|
let transparency = arguments.length > 3 ? arguments[3] : undefined;
|
|
@@ -422,12 +422,12 @@ const getFocusBoxShadow = _ref => {
|
|
|
422
422
|
spacerWidth = 'xs',
|
|
423
423
|
theme = DEFAULT_THEME
|
|
424
424
|
} = _ref;
|
|
425
|
-
const color =
|
|
425
|
+
const color = getColorV8(hue, shade, theme);
|
|
426
426
|
const shadow = theme.shadows[shadowWidth](color);
|
|
427
427
|
if (spacerWidth === null) {
|
|
428
428
|
return `${inset ? 'inset' : ''} ${shadow}`;
|
|
429
429
|
}
|
|
430
|
-
const spacerColor =
|
|
430
|
+
const spacerColor = getColorV8(spacerHue, spacerShade, theme);
|
|
431
431
|
const retVal = `
|
|
432
432
|
${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
|
|
433
433
|
${inset ? 'inset' : ''} ${shadow}`;
|
|
@@ -614,7 +614,7 @@ function menuStyles(position) {
|
|
|
614
614
|
} else {
|
|
615
615
|
marginProperty = 'margin-right';
|
|
616
616
|
}
|
|
617
|
-
return styledComponents.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm,
|
|
617
|
+
return styledComponents.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
|
|
618
618
|
}
|
|
619
619
|
|
|
620
620
|
const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
|
|
@@ -660,7 +660,8 @@ exports.SELECTOR_FOCUS_VISIBLE = SELECTOR_FOCUS_VISIBLE;
|
|
|
660
660
|
exports.ThemeProvider = ThemeProvider;
|
|
661
661
|
exports.arrowStyles = arrowStyles;
|
|
662
662
|
exports.focusStyles = focusStyles;
|
|
663
|
-
exports.getColor =
|
|
663
|
+
exports.getColor = getColorV8;
|
|
664
|
+
exports.getColorV8 = getColorV8;
|
|
664
665
|
exports.getDocument = getDocument;
|
|
665
666
|
exports.getFocusBoxShadow = getFocusBoxShadow;
|
|
666
667
|
exports.getLineHeight = getLineHeight;
|
package/dist/index.esm.js
CHANGED
|
@@ -361,7 +361,7 @@ const adjust = (color, expected, actual) => {
|
|
|
361
361
|
}
|
|
362
362
|
return color;
|
|
363
363
|
};
|
|
364
|
-
const
|
|
364
|
+
const getColorV8 = memoize(function (hue) {
|
|
365
365
|
let shade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SHADE;
|
|
366
366
|
let theme = arguments.length > 2 ? arguments[2] : undefined;
|
|
367
367
|
let transparency = arguments.length > 3 ? arguments[3] : undefined;
|
|
@@ -415,12 +415,12 @@ const getFocusBoxShadow = _ref => {
|
|
|
415
415
|
spacerWidth = 'xs',
|
|
416
416
|
theme = DEFAULT_THEME
|
|
417
417
|
} = _ref;
|
|
418
|
-
const color =
|
|
418
|
+
const color = getColorV8(hue, shade, theme);
|
|
419
419
|
const shadow = theme.shadows[shadowWidth](color);
|
|
420
420
|
if (spacerWidth === null) {
|
|
421
421
|
return `${inset ? 'inset' : ''} ${shadow}`;
|
|
422
422
|
}
|
|
423
|
-
const spacerColor =
|
|
423
|
+
const spacerColor = getColorV8(spacerHue, spacerShade, theme);
|
|
424
424
|
const retVal = `
|
|
425
425
|
${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor)},
|
|
426
426
|
${inset ? 'inset' : ''} ${shadow}`;
|
|
@@ -607,7 +607,7 @@ function menuStyles(position) {
|
|
|
607
607
|
} else {
|
|
608
608
|
marginProperty = 'margin-right';
|
|
609
609
|
}
|
|
610
|
-
return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm,
|
|
610
|
+
return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", " ", ";border-radius:", ";box-shadow:", ";background-color:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, options.childSelector || '> *', theme.borders.sm, getColorV8('neutralHue', 300, theme), theme.borderRadii.md, theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, getColorV8('chromeHue', 600, theme, 0.15)), getColorV8('background', 600 , theme), theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
|
|
611
611
|
}
|
|
612
612
|
|
|
613
613
|
const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]';
|
|
@@ -645,4 +645,4 @@ const focusStyles = _ref => {
|
|
|
645
645
|
const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
|
|
646
646
|
const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
|
|
647
647
|
|
|
648
|
-
export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getColor, getDocument, getFocusBoxShadow, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow, withTheme };
|
|
648
|
+
export { ARROW_POSITION as ARRAY_ARROW_POSITION, MENU_POSITION as ARRAY_MENU_POSITION, DEFAULT_THEME, PALETTE, SELECTOR_FOCUS_VISIBLE, ThemeProvider, arrowStyles, focusStyles, getColorV8 as getColor, getColorV8, getDocument, getFocusBoxShadow, getLineHeight, isRtl, mediaQuery, menuStyles, retrieveComponentStyles, retrieveComponentStyles as retrieveTheme, useDocument, useText, useWindow, withTheme };
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export { default as retrieveComponentStyles,
|
|
|
13
13
|
default as retrieveTheme } from './utils/retrieveComponentStyles';
|
|
14
14
|
export { default as withTheme } from './utils/withTheme';
|
|
15
15
|
export { default as getDocument } from './utils/getDocument';
|
|
16
|
-
export { getColor } from './utils/
|
|
16
|
+
export { getColorV8 as getColor, getColorV8 } from './utils/getColorV8';
|
|
17
17
|
export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
|
|
18
18
|
export { default as getLineHeight } from './utils/getLineHeight';
|
|
19
19
|
export { default as mediaQuery } from './utils/mediaQuery';
|
|
@@ -22,4 +22,4 @@ export declare const DEFAULT_SHADE = 600;
|
|
|
22
22
|
* @param {Object} theme Context `theme` object.
|
|
23
23
|
* @param {Number} [transparency] An alpha-channel value between 0 and 1.
|
|
24
24
|
*/
|
|
25
|
-
export declare const
|
|
25
|
+
export declare const getColorV8: ((hue: Hue, shade?: number, theme?: DefaultTheme, transparency?: number) => string | undefined) & import("lodash").MemoizedFunction;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-theming",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.75.0",
|
|
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>",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "56a54793a611efc223b8e36262d428365613c853"
|
|
49
49
|
}
|