@zendeskgarden/react-theming 9.1.0 → 9.1.2

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 (6) hide show
  1. package/dist/esm/utils/getColor.js +22 -13
  2. package/dist/esm/utils/getColorV8.js +15 -9
  3. package/dist/esm/utils/menuStyles.js +1 -1
  4. package/dist/index.cjs.js +38 -23
  5. package/dist/typings/utils/focusStyles.d.ts +2 -2
  6. package/package.json +2 -2
package/dist/esm/utils/getColor.js CHANGED
@@ -115,7 +115,7 @@ const generateColorScale = memoize(color => {
115
115
  const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
116
116
  let retVal;
117
117
  let _hue = colors[hue] || hue;
118
- if (Object.hasOwn(palette, _hue)) {
118
+ if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
119
119
  _hue = palette[_hue];
120
120
  }
121
121
  if (typeof _hue === 'object') {
@@ -202,20 +202,29 @@ const toKey = _ref => {
202
202
  transparency,
203
203
  variable
204
204
  } = _ref;
205
- let themeColorsKey = CACHE.get(theme.colors);
206
- if (themeColorsKey === undefined) {
207
- themeColorsKey = ++KEYS.colors;
208
- CACHE.set(theme.colors, themeColorsKey);
205
+ let themeColorsKey;
206
+ if (theme.colors) {
207
+ themeColorsKey = CACHE.get(theme.colors);
208
+ if (themeColorsKey === undefined) {
209
+ themeColorsKey = ++KEYS.colors;
210
+ CACHE.set(theme.colors, themeColorsKey);
211
+ }
209
212
  }
210
- let themeOpacityKey = CACHE.get(theme.opacity);
211
- if (themeOpacityKey === undefined) {
212
- themeOpacityKey = ++KEYS.opacity;
213
- CACHE.set(theme.opacity, themeOpacityKey);
213
+ let themeOpacityKey;
214
+ if (theme.opacity) {
215
+ themeOpacityKey = CACHE.get(theme.opacity);
216
+ if (themeOpacityKey === undefined) {
217
+ themeOpacityKey = ++KEYS.opacity;
218
+ CACHE.set(theme.opacity, themeOpacityKey);
219
+ }
214
220
  }
215
- let themePaletteKey = CACHE.get(theme.palette);
216
- if (themePaletteKey === undefined) {
217
- themePaletteKey = ++KEYS.palette;
218
- CACHE.set(theme.palette, themePaletteKey);
221
+ let themePaletteKey;
222
+ if (theme.palette) {
223
+ themePaletteKey = CACHE.get(theme.palette);
224
+ if (themePaletteKey === undefined) {
225
+ themePaletteKey = ++KEYS.palette;
226
+ CACHE.set(theme.palette, themePaletteKey);
227
+ }
219
228
  }
220
229
  let retVal = `{${themeColorsKey},${themePaletteKey},${themeOpacityKey}}`;
221
230
  if (variable !== undefined) {
package/dist/esm/utils/getColorV8.js CHANGED
@@ -31,20 +31,26 @@ const toKey = _ref => {
31
31
  theme,
32
32
  transparency
33
33
  } = _ref;
34
- let retVal = `${hue}`;
34
+ let retVal = `${typeof hue === 'object' ? JSON.stringify(hue) : hue}`;
35
35
  if (shade !== undefined) {
36
36
  retVal += `,${shade}`;
37
37
  }
38
38
  if (theme !== undefined) {
39
- let themeColorsKey = CACHE.get(theme.colors);
40
- if (themeColorsKey === undefined) {
41
- themeColorsKey = ++KEYS.colors;
42
- CACHE.set(theme.colors, themeColorsKey);
39
+ let themeColorsKey;
40
+ if (theme.colors) {
41
+ themeColorsKey = CACHE.get(theme.colors);
42
+ if (themeColorsKey === undefined) {
43
+ themeColorsKey = ++KEYS.colors;
44
+ CACHE.set(theme.colors, themeColorsKey);
45
+ }
43
46
  }
44
- let themePaletteKey = CACHE.get(theme.palette);
45
- if (themePaletteKey === undefined) {
46
- themePaletteKey = ++KEYS.palette;
47
- CACHE.set(theme.palette, themePaletteKey);
47
+ let themePaletteKey;
48
+ if (theme.palette) {
49
+ themePaletteKey = CACHE.get(theme.palette);
50
+ if (themePaletteKey === undefined) {
51
+ themePaletteKey = ++KEYS.palette;
52
+ CACHE.set(theme.palette, themePaletteKey);
53
+ }
48
54
  }
49
55
  retVal += `,{${themeColorsKey},${themePaletteKey}}`;
50
56
  }
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
@@ -656,7 +656,7 @@ const generateColorScale = memoize__default.default(color => {
656
656
  const toColor = (colors, palette, opacity, scheme, hue, shade, offset, transparency) => {
657
657
  let retVal;
658
658
  let _hue = colors[hue] || hue;
659
- if (Object.hasOwn(palette, _hue)) {
659
+ if (Object.prototype.hasOwnProperty.call(palette, _hue)) {
660
660
  _hue = palette[_hue];
661
661
  }
662
662
  if (typeof _hue === 'object') {
@@ -743,20 +743,29 @@ const toKey$1 = _ref => {
743
743
  transparency,
744
744
  variable
745
745
  } = _ref;
746
- let themeColorsKey = CACHE$1.get(theme.colors);
747
- if (themeColorsKey === undefined) {
748
- themeColorsKey = ++KEYS$1.colors;
749
- CACHE$1.set(theme.colors, themeColorsKey);
746
+ let themeColorsKey;
747
+ if (theme.colors) {
748
+ themeColorsKey = CACHE$1.get(theme.colors);
749
+ if (themeColorsKey === undefined) {
750
+ themeColorsKey = ++KEYS$1.colors;
751
+ CACHE$1.set(theme.colors, themeColorsKey);
752
+ }
750
753
  }
751
- let themeOpacityKey = CACHE$1.get(theme.opacity);
752
- if (themeOpacityKey === undefined) {
753
- themeOpacityKey = ++KEYS$1.opacity;
754
- CACHE$1.set(theme.opacity, themeOpacityKey);
754
+ let themeOpacityKey;
755
+ if (theme.opacity) {
756
+ themeOpacityKey = CACHE$1.get(theme.opacity);
757
+ if (themeOpacityKey === undefined) {
758
+ themeOpacityKey = ++KEYS$1.opacity;
759
+ CACHE$1.set(theme.opacity, themeOpacityKey);
760
+ }
755
761
  }
756
- let themePaletteKey = CACHE$1.get(theme.palette);
757
- if (themePaletteKey === undefined) {
758
- themePaletteKey = ++KEYS$1.palette;
759
- CACHE$1.set(theme.palette, themePaletteKey);
762
+ let themePaletteKey;
763
+ if (theme.palette) {
764
+ themePaletteKey = CACHE$1.get(theme.palette);
765
+ if (themePaletteKey === undefined) {
766
+ themePaletteKey = ++KEYS$1.palette;
767
+ CACHE$1.set(theme.palette, themePaletteKey);
768
+ }
760
769
  }
761
770
  let retVal = `{${themeColorsKey},${themePaletteKey},${themeOpacityKey}}`;
762
771
  if (variable !== undefined) {
@@ -1039,20 +1048,26 @@ const toKey = _ref => {
1039
1048
  theme,
1040
1049
  transparency
1041
1050
  } = _ref;
1042
- let retVal = `${hue}`;
1051
+ let retVal = `${typeof hue === 'object' ? JSON.stringify(hue) : hue}`;
1043
1052
  if (shade !== undefined) {
1044
1053
  retVal += `,${shade}`;
1045
1054
  }
1046
1055
  if (theme !== undefined) {
1047
- let themeColorsKey = CACHE.get(theme.colors);
1048
- if (themeColorsKey === undefined) {
1049
- themeColorsKey = ++KEYS.colors;
1050
- CACHE.set(theme.colors, themeColorsKey);
1056
+ let themeColorsKey;
1057
+ if (theme.colors) {
1058
+ themeColorsKey = CACHE.get(theme.colors);
1059
+ if (themeColorsKey === undefined) {
1060
+ themeColorsKey = ++KEYS.colors;
1061
+ CACHE.set(theme.colors, themeColorsKey);
1062
+ }
1051
1063
  }
1052
- let themePaletteKey = CACHE.get(theme.palette);
1053
- if (themePaletteKey === undefined) {
1054
- themePaletteKey = ++KEYS.palette;
1055
- CACHE.set(theme.palette, themePaletteKey);
1064
+ let themePaletteKey;
1065
+ if (theme.palette) {
1066
+ themePaletteKey = CACHE.get(theme.palette);
1067
+ if (themePaletteKey === undefined) {
1068
+ themePaletteKey = ++KEYS.palette;
1069
+ CACHE.set(theme.palette, themePaletteKey);
1070
+ }
1056
1071
  }
1057
1072
  retVal += `,{${themeColorsKey},${themePaletteKey}}`;
1058
1073
  }
@@ -1403,7 +1418,7 @@ function menuStyles(position) {
1403
1418
  } else {
1404
1419
  marginProperty = 'margin-right';
1405
1420
  }
1406
- 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));
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));
1407
1422
  }
1408
1423
 
1409
1424
  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.0",
3
+ "version": "9.1.2",
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": "a2842d18615ad057d75988fde4df5a0c79d2714e"
50
+ "gitHead": "dd7b2e7fb6747ef39a028b4e7b9924c2098deea0"
51
51
  }