@zendeskgarden/react-theming 9.1.1 → 9.2.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.
Files changed (5) hide show
  1. package/dist/esm/utils/getColor.js +8 -7
  2. package/dist/esm/utils/menuStyles.js +1 -1
  3. package/dist/index.cjs.js +9 -8
  4. package/dist/typings/utils/focusStyles.d.ts +2 -2
  5. package/package.json +2 -2
package/dist/esm/utils/getColor.js CHANGED
@@ -17,10 +17,11 @@ const adjust = (color, expected, actual) => {
17
17
  }
18
18
  return color;
19
19
  };
20
- const toShade = (shade, offset, scheme) => {
20
+ const toShade = (shade, offset, transparency, scheme) => {
21
21
  let _shade;
22
22
  if (shade === undefined) {
23
- _shade = scheme === 'dark' ? 500 : 700;
23
+ const darkShade = transparency === undefined ? 600 : 500;
24
+ _shade = scheme === 'dark' ? darkShade : 700;
24
25
  } else {
25
26
  _shade = parseInt(shade.toString(), 10);
26
27
  if (isNaN(_shade)) {
@@ -29,8 +30,8 @@ const toShade = (shade, offset, scheme) => {
29
30
  }
30
31
  return _shade + (offset || 0);
31
32
  };
32
- const toHex = (hue, shade, offset, scheme) => {
33
- const _shade = toShade(shade, offset, scheme);
33
+ const toHex = (hue, shade, offset, transparency, scheme) => {
34
+ const _shade = toShade(shade, offset, transparency, scheme);
34
35
  let retVal = hue[_shade];
35
36
  if (!retVal) {
36
37
  const closestShade = Object.keys(hue).map(hueShade => parseInt(hueShade, 10)).reduce((previous, current) => {
@@ -115,17 +116,17 @@ const generateColorScale = memoize(color => {
115
116
  const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
116
117
  let retVal;
117
118
  let _hue = colors[hue] || hue;
118
- if (Object.hasOwn(palette, _hue)) {
119
+ if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
119
120
  _hue = palette[_hue];
120
121
  }
121
122
  if (typeof _hue === 'object') {
122
- retVal = toHex(_hue, shade, offset, scheme);
123
+ retVal = toHex(_hue, shade, offset, transparency, scheme);
123
124
  } else if (isValidColor(_hue)) {
124
125
  if (shade === undefined) {
125
126
  retVal = _hue;
126
127
  } else {
127
128
  _hue = generateColorScale(_hue);
128
- retVal = toHex(_hue, shade, offset, scheme);
129
+ retVal = toHex(_hue, shade, offset, transparency, scheme);
129
130
  }
130
131
  }
131
132
  if (retVal && transparency) {
package/dist/esm/utils/menuStyles.js CHANGED
@@ -64,7 +64,7 @@ function menuStyles(position) {
64
64
  } else {
65
65
  marginProperty = 'margin-right';
66
66
  }
67
- return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
67
+ return css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";&:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
68
68
  }
69
69
 
70
70
  export { menuStyles as default };
package/dist/index.cjs.js CHANGED
@@ -558,10 +558,11 @@ const adjust$1 = (color, expected, actual) => {
558
558
  }
559
559
  return color;
560
560
  };
561
- const toShade = (shade, offset, scheme) => {
561
+ const toShade = (shade, offset, transparency, scheme) => {
562
562
  let _shade;
563
563
  if (shade === undefined) {
564
- _shade = scheme === 'dark' ? 500 : 700;
564
+ const darkShade = transparency === undefined ? 600 : 500;
565
+ _shade = scheme === 'dark' ? darkShade : 700;
565
566
  } else {
566
567
  _shade = parseInt(shade.toString(), 10);
567
568
  if (isNaN(_shade)) {
@@ -570,8 +571,8 @@ const toShade = (shade, offset, scheme) => {
570
571
  }
571
572
  return _shade + (offset || 0);
572
573
  };
573
- const toHex = (hue, shade, offset, scheme) => {
574
- const _shade = toShade(shade, offset, scheme);
574
+ const toHex = (hue, shade, offset, transparency, scheme) => {
575
+ const _shade = toShade(shade, offset, transparency, scheme);
575
576
  let retVal = hue[_shade];
576
577
  if (!retVal) {
577
578
  const closestShade = Object.keys(hue).map(hueShade => parseInt(hueShade, 10)).reduce((previous, current) => {
@@ -656,17 +657,17 @@ const generateColorScale = memoize__default.default(color => {
656
657
  const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
657
658
  let retVal;
658
659
  let _hue = colors[hue] || hue;
659
- if (Object.hasOwn(palette, _hue)) {
660
+ if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
660
661
  _hue = palette[_hue];
661
662
  }
662
663
  if (typeof _hue === 'object') {
663
- retVal = toHex(_hue, shade, offset, scheme);
664
+ retVal = toHex(_hue, shade, offset, transparency, scheme);
664
665
  } else if (isValidColor(_hue)) {
665
666
  if (shade === undefined) {
666
667
  retVal = _hue;
667
668
  } else {
668
669
  _hue = generateColorScale(_hue);
669
- retVal = toHex(_hue, shade, offset, scheme);
670
+ retVal = toHex(_hue, shade, offset, transparency, scheme);
670
671
  }
671
672
  }
672
673
  if (retVal && transparency) {
@@ -1418,7 +1419,7 @@ function menuStyles(position) {
1418
1419
  } else {
1419
1420
  marginProperty = 'margin-right';
1420
1421
  }
1421
- return styled.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
1422
+ return styled.css(["position:absolute;z-index:", ";", ":", ";line-height:0;font-size:0.01px;color-scheme:only ", ";& ", "{display:inline-block;position:relative;margin:0;box-sizing:border-box;border:", ";border-radius:", ";cursor:default;padding:0;text-align:", ";white-space:normal;font-size:", ";font-weight:", ";direction:", ";", ";&:focus{outline:none;}}", ";", ";"], options.zIndex || 0, marginProperty, options.margin, p => p.theme.colors.base, options.childSelector || '> *', theme.borders.sm, theme.borderRadii.md, theme.rtl ? 'right' : 'left', theme.fontSizes.md, theme.fontWeights.regular, theme.rtl && 'rtl', colorStyles(theme), options.animationModifier && animationStyles(position, options), options.hidden && hiddenStyles(options));
1422
1423
  }
1423
1424
 
1424
1425
  const SELECTOR_FOCUS_VISIBLE = '&:focus-visible';
package/dist/typings/utils/focusStyles.d.ts CHANGED
@@ -23,11 +23,11 @@ export declare const SELECTOR_FOCUS_VISIBLE = "&:focus-visible";
23
23
  *
24
24
  * @returns CSS structured as follows, with `{values}` determined by the options provided:
25
25
  * ```css
26
- * :focus {
26
+ * &:focus {
27
27
  * outline: none;
28
28
  * }
29
29
  *
30
- * :focus-visible {
30
+ * &:focus-visible {
31
31
  * box-shadow: 0 0 0 {1px} #fff,
32
32
  * 0 0 0 {3px} {blue};
33
33
  * outline: {2px} solid transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-theming",
3
- "version": "9.1.1",
3
+ "version": "9.2.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>",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
50
+ "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
51
51
  }