@zendeskgarden/react-theming 9.12.6 → 9.14.0

package/dist/esm/index.js

@@ -16,6 +16,7 @@ export { getColor } from './utils/getColor.js';
 export { getColorV8 } from './utils/getColorV8.js';
 export { getFloatingPlacements } from './utils/getFloatingPlacements.js';
 export { getFocusBoxShadow } from './utils/getFocusBoxShadow.js';
+export { getHueColor } from './utils/getHueColor.js';
 export { default as getLineHeight } from './utils/getLineHeight.js';
 export { getMenuPosition } from './utils/getMenuPosition.js';
 export { default as mediaQuery } from './utils/mediaQuery.js';

package/dist/esm/utils/getColor.js

@@ -149,17 +149,26 @@ const toProperty = (object, path) => {
 };
 const fromRgba = value => {
   let retVal;
-  const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
-  const _rgba = regex.exec(value);
-  if (_rgba && _rgba.groups) {
-    const property = _rgba.groups.property;
-    const transparency = parseFloat(_rgba.groups.alpha);
+  try {
+    const [red, green, blue, transparency] = parseToRgba(value);
+    const property = toHex$1(`rgb(${red}, ${green}, ${blue})`);
     retVal = {
       property,
       transparency
     };
-  } else {
-    throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+  } catch {
+    const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
+    const _rgba = regex.exec(value);
+    if (_rgba && _rgba.groups) {
+      const property = _rgba.groups.property;
+      const transparency = parseFloat(_rgba.groups.alpha);
+      retVal = {
+        property,
+        transparency
+      };
+    } else {
+      throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+    }
   }
   return retVal;
 };

package/dist/esm/utils/getHueColor.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { getColor } from './getColor.js';
+
+const getHueColor = ({
+  theme,
+  value
+}) => {
+  const pattern = /^[a-z]+\.[a-z]+$/giu;
+  const options = pattern.test(value) ? {
+    variable: value,
+    theme
+  } : {
+    hue: value,
+    theme
+  };
+  return getColor(options);
+};
+
+export { getHueColor };

package/dist/index.cjs.js

@@ -769,17 +769,26 @@ const toProperty = (object, path) => {
 };
 const fromRgba = value => {
   let retVal;
-  const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
-  const _rgba = regex.exec(value);
-  if (_rgba && _rgba.groups) {
-    const property = _rgba.groups.property;
-    const transparency = parseFloat(_rgba.groups.alpha);
+  try {
+    const [red, green, blue, transparency] = color2k.parseToRgba(value);
+    const property = color2k.toHex(`rgb(${red}, ${green}, ${blue})`);
     retVal = {
       property,
       transparency
     };
-  } else {
-    throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+  } catch {
+    const regex = /rgba\s*\(\s*(?<property>[#\w.]+)\s*,\s*(?<alpha>[\w.]+)\s*\)/gu;
+    const _rgba = regex.exec(value);
+    if (_rgba && _rgba.groups) {
+      const property = _rgba.groups.property;
+      const transparency = parseFloat(_rgba.groups.alpha);
+      retVal = {
+        property,
+        transparency
+      };
+    } else {
+      throw new Error(`Error: invalid \`rgba\` value "${value}"`);
+    }
   }
   return retVal;
 };
@@ -1280,6 +1289,21 @@ const getFocusBoxShadow = ({
   return boxShadow ? `${retVal}, ${boxShadow}` : retVal;
 };
 
+const getHueColor = ({
+  theme,
+  value
+}) => {
+  const pattern = /^[a-z]+\.[a-z]+$/giu;
+  const options = pattern.test(value) ? {
+    variable: value,
+    theme
+  } : {
+    hue: value,
+    theme
+  };
+  return getColor(options);
+};
+
 function getLineHeight(height, fontSize) {
   const [heightValue, heightUnit] = polished.getValueAndUnit(height.toString());
   const [fontSizeValue, fontSizeUnit] = polished.getValueAndUnit(fontSize.toString());
@@ -1557,6 +1581,7 @@ exports.getColor = getColor;
 exports.getColorV8 = getColorV8;
 exports.getFloatingPlacements = getFloatingPlacements;
 exports.getFocusBoxShadow = getFocusBoxShadow;
+exports.getHueColor = getHueColor;
 exports.getLineHeight = getLineHeight;
 exports.getMenuPosition = getMenuPosition;
 exports.mediaQuery = mediaQuery;

package/dist/typings/index.d.ts

@@ -16,6 +16,7 @@ export { getColor } from './utils/getColor';
 export { getColorV8 } from './utils/getColorV8';
 export { getFloatingPlacements } from './utils/getFloatingPlacements';
 export { getFocusBoxShadow } from './utils/getFocusBoxShadow';
+export { getHueColor } from './utils/getHueColor';
 export { default as getLineHeight } from './utils/getLineHeight';
 export { getMenuPosition } from './utils/getMenuPosition';
 export { default as mediaQuery } from './utils/mediaQuery';
@@ -27,4 +28,4 @@ export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
 export { StyledBaseIcon } from './utils/StyledBaseIcon';
-export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IColorSchemeContext, type IColorSchemeProviderProps, type IGardenTheme, type IStyledBaseIconProps, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type ColorScheme, type FocusBoxShadowParameters, type FocusStylesParameters, type MenuPosition, type Placement } from './types';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT, type IColorSchemeContext, type IColorSchemeProviderProps, type IGardenTheme, type IStyledBaseIconProps, type IThemeProviderProps, type ArrowPosition, type CheckeredBackgroundParameters, type ColorParameters, type ColorScheme, type FocusBoxShadowParameters, type FocusStylesParameters, type HueColorParameters, type MenuPosition, type Placement } from './types';

package/dist/typings/types/index.d.ts

@@ -54,6 +54,10 @@ export type FocusBoxShadowParameters = {
     theme: IGardenTheme;
 };
 export type Hue = Record<number | string, string> | string;
+export type HueColorParameters = {
+    theme: IGardenTheme;
+    value: string;
+};
 export interface IGardenTheme {
     rtl: boolean;
     document?: any;

package/dist/typings/utils/getHueColor.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { HueColorParameters } from '../types';
+/**
+ * Get a hue color from the theme
+ *
+ * @param {Object} options.theme Provides values used to resolve the desired color
+ * @param {string} options.value A color variable key (i.e. 'foreground.subtle'), key hue value (i.e. 'primaryHue'), or valid CSS color
+ */
+export declare const getHueColor: ({ theme, value }: HueColorParameters) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.12.6",
+  "version": "9.14.0",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d7c8d8c74f98a86af16fb6a1143ef6eaf89e888b"
+  "gitHead": "75fd88fc9ea5e6dd48a188d6a15c93a98356b0b7"
 }