@zendeskgarden/react-loaders 9.0.0-next.26 → 9.0.0-next.27

package/dist/esm/elements/Progress.js

@@ -31,7 +31,7 @@ const Progress = React.forwardRef((_ref, ref) => {
   return (
     React.createElement(StyledProgressBackground, Object.assign({
       "data-garden-id": COMPONENT_ID,
-      "data-garden-version": '9.0.0-next.26',
+      "data-garden-version": '9.0.0-next.27',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/esm/styled/StyledInline.js

@@ -4,14 +4,28 @@
 * 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 styled, { keyframes } from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import styled, { css, keyframes } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'loaders.inline';
-const retrieveAnimation = _ref => {
+const colorStyles = _ref => {
   let {
-    theme
+    theme,
+    color
   } = _ref;
+  const options = color.includes('.') ? {
+    variable: color,
+    theme
+  } : {
+    hue: color,
+    theme
+  };
+  return css(["color:", ";"], getColor(options));
+};
+const retrieveAnimation = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
 };
 const StyledCircle = styled.circle.attrs({
@@ -24,13 +38,13 @@ const StyledCircle = styled.circle.attrs({
 })([""]);
 const StyledInline = styled.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"
-})(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], props => props.color, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledCircle, StyledInline };

package/dist/esm/styled/StyledLoadingPlaceholder.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",

package/dist/esm/styled/StyledProgress.js

@@ -35,15 +35,27 @@ const colorStyles = _ref => {
       shade: 500
     }
   });
-  const foregroundColor = color || getColor({
-    theme,
-    variable: 'border.successEmphasis'
-  });
+  let options;
+  if (color) {
+    options = color.includes('.') ? {
+      variable: color,
+      theme
+    } : {
+      hue: color,
+      theme
+    };
+  } else {
+    options = {
+      variable: 'border.successEmphasis',
+      theme
+    };
+  }
+  const foregroundColor = getColor(options);
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledProgressBackground = styled.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
@@ -52,7 +64,7 @@ const StyledProgressBackground = styled.div.attrs(props => ({
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({

package/dist/esm/styled/StyledSVG.js

@@ -4,11 +4,25 @@
 * 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 styled from 'styled-components';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
+const colorStyles = _ref => {
+  let {
+    theme,
+    color = 'inherit'
+  } = _ref;
+  const options = color.includes('.') ? {
+    variable: color,
+    theme
+  } : {
+    hue: color,
+    theme
+  };
+  return css(["color:", ";"], getColor(options));
+};
 const StyledSVG = styled.svg.attrs(props => ({
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -18,6 +32,6 @@ const StyledSVG = styled.svg.attrs(props => ({
 })).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["width:", ";height:", ";color:", ";font-size:", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.color || 'inherit', props => props.fontSize || 'inherit', props => retrieveComponentStyles(props.dataGardenId, props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.fontSize || 'inherit', colorStyles, props => retrieveComponentStyles(props.dataGardenId, props));
 
 export { StyledSVG };

package/dist/esm/styled/StyledSkeleton.js

@@ -52,7 +52,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"

package/dist/index.cjs.js

@@ -54,7 +54,7 @@ const StyledDotsCircleThree = styled__default.default(StyledDotsCircle).attrs(()
 const COMPONENT_ID$5 = 'loaders.loading_placeholder';
 const StyledLoadingPlaceholder = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   role: 'progressbar'
 }).withConfig({
   displayName: "StyledLoadingPlaceholder",
@@ -73,7 +73,7 @@ const sizeToHeight = (size, theme) => {
 };
 const sizeToBorderRadius = (size, theme) => sizeToHeight(size, theme) / 2;
 const PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
-const colorStyles = _ref => {
+const colorStyles$2 = _ref => {
   let {
     theme,
     color
@@ -89,24 +89,36 @@ const colorStyles = _ref => {
       shade: 500
     }
   });
-  const foregroundColor = color || reactTheming.getColor({
-    theme,
-    variable: 'border.successEmphasis'
-  });
+  let options;
+  if (color) {
+    options = color.includes('.') ? {
+      variable: color,
+      theme
+    } : {
+      hue: color,
+      theme
+    };
+  } else {
+    options = {
+      variable: 'border.successEmphasis',
+      theme
+    };
+  }
+  const foregroundColor = reactTheming.getColor(options);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledProgressBackground = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
   displayName: "StyledProgress__StyledProgressBackground",
   componentId: "sc-2g8w4s-0"
-})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles, props => reactTheming.retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
+})(["margin:", "px 0;border-radius:", "px;", ";", ""], props => props.theme.space.base * 2, props => props.borderRadius, colorStyles$2, props => reactTheming.retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props));
 const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
 const StyledProgressIndicator = styled__default.default.div.attrs(props => ({
   'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   height: props.height || sizeToHeight(props.size, props.theme),
   borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
 })).withConfig({
@@ -159,7 +171,7 @@ const gradientStyles = props => {
 };
 const StyledSkeleton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.26'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledSkeleton",
   componentId: "sc-1raozze-0"
@@ -180,8 +192,22 @@ const StyledSpinnerCircle = styled__default.default.circle.attrs(props => ({
   componentId: "sc-o4kd70-0"
 })([""]);
 
+const colorStyles$1 = _ref => {
+  let {
+    theme,
+    color = 'inherit'
+  } = _ref;
+  const options = color.includes('.') ? {
+    variable: color,
+    theme
+  } : {
+    hue: color,
+    theme
+  };
+  return styled.css(["color:", ";"], reactTheming.getColor(options));
+};
 const StyledSVG = styled__default.default.svg.attrs(props => ({
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   xmlns: 'http://www.w3.org/2000/svg',
   width: props.width,
   height: props.height,
@@ -191,13 +217,27 @@ const StyledSVG = styled__default.default.svg.attrs(props => ({
 })).withConfig({
   displayName: "StyledSVG",
   componentId: "sc-1xtc3kx-0"
-})(["width:", ";height:", ";color:", ";font-size:", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.color || 'inherit', props => props.fontSize || 'inherit', props => reactTheming.retrieveComponentStyles(props.dataGardenId, props));
+})(["width:", ";height:", ";font-size:", ";", ";", ";"], props => props.containerWidth || '1em', props => props.containerHeight || '0.9em', props => props.fontSize || 'inherit', colorStyles$1, props => reactTheming.retrieveComponentStyles(props.dataGardenId, props));
 
 const COMPONENT_ID$3 = 'loaders.inline';
-const retrieveAnimation = _ref => {
+const colorStyles = _ref => {
   let {
-    theme
+    theme,
+    color
   } = _ref;
+  const options = color.includes('.') ? {
+    variable: color,
+    theme
+  } : {
+    hue: color,
+    theme
+  };
+  return styled.css(["color:", ";"], reactTheming.getColor(options));
+};
+const retrieveAnimation = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return styled.keyframes(["0%,100%{opacity:", ";}50%{opacity:", ";}"], theme.opacity[200], theme.opacity[600]);
 };
 const StyledCircle = styled__default.default.circle.attrs({
@@ -210,14 +250,14 @@ const StyledCircle = styled__default.default.circle.attrs({
 })([""]);
 const StyledInline = styled__default.default.svg.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.26',
+  'data-garden-version': '9.0.0-next.27',
   viewBox: '0 0 16 4',
   width: props.size,
   height: props.size * 0.25
 })).withConfig({
   displayName: "StyledInline",
   componentId: "sc-fxsb9l-1"
-})(["color:", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], props => props.color, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["", ";", "{opacity:0.2;&:nth-child(1){animation:", " 1s infinite;animation-delay:", ";}&:nth-child(2){animation:", " 1s infinite;animation-delay:0.2s;}&:nth-child(3){animation:", " 1s infinite;animation-delay:", ";}}", ""], colorStyles, StyledCircle, retrieveAnimation, props => props.theme.rtl ? 'unset' : '0.4s', retrieveAnimation, retrieveAnimation, props => props.theme.rtl ? '0.4s' : 'unset', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 
 const COMPONENT_ID$2 = 'loaders.dots';
 const Dots = React.forwardRef((_ref, ref) => {
@@ -309,7 +349,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
   return (
     React__default.default.createElement(StyledProgressBackground, Object.assign({
       "data-garden-id": COMPONENT_ID$1,
-      "data-garden-version": '9.0.0-next.26',
+      "data-garden-version": '9.0.0-next.27',
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       "aria-valuenow": percentage,

package/dist/typings/styled/StyledInline.d.ts

@@ -5,14 +5,14 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
+interface IStyledInlineProps {
+    size: number;
+    color: string;
+}
 export declare const StyledCircle: import("styled-components").StyledComponent<"circle", DefaultTheme, {
     fill: "currentColor";
     cy: 2;
     r: 2;
 }, "cy" | "fill" | "r">;
-interface IStyledInlineProps {
-    size: number;
-    color: string;
-}
 export declare const StyledInline: import("styled-components").StyledComponent<"svg", DefaultTheme, IStyledInlineProps, never>;
 export {};

package/dist/typings/styled/StyledSVG.d.ts

@@ -4,6 +4,7 @@
  * 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 { DefaultTheme } from 'styled-components';
 interface IStyledSVGProps {
     dataGardenId: string;
     color?: string;
@@ -13,5 +14,5 @@ interface IStyledSVGProps {
     containerWidth?: string;
     containerHeight?: string;
 }
-export declare const StyledSVG: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledSVGProps, never>;
+export declare const StyledSVG: import("styled-components").StyledComponent<"svg", DefaultTheme, IStyledSVGProps, never>;
 export {};

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

@@ -10,7 +10,12 @@ export type Size = (typeof SIZE)[number];
 export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the height and width in pixels. Inherits the parent's font size by default. */
     size?: string | number;
-    /** Sets the fill color. Inherits the parent's `color` by default. */
+    /**
+     * Sets the fill color. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e. `foreground.primary`)
+     * to render based on light/dark mode, or any hex value. Inherits the parent's
+     * `color` by default.
+     */
     color?: string;
     /** Sets the length of the animation cycle in milliseconds **/
     duration?: number;
@@ -20,15 +25,23 @@ export interface IDotsProps extends SVGAttributes<SVGSVGElement> {
 export interface IInlineProps extends SVGAttributes<SVGSVGElement> {
     /** Sets the width in pixels and scales the loader proportionally */
     size?: number;
-    /** Sets the fill color. Inherits the parent's `color` by default. */
+    /**
+     * Sets the fill color. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e. `foreground.primary`)
+     * to render based on light/dark mode, or any hex value. Inherits the parent's
+     * `color` by default.
+     */
     color?: string;
 }
 export interface IProgressProps extends HTMLAttributes<HTMLDivElement> {
     /** Sets the progress as a value between 0 and 100 */
     value?: number;
     /**
-     * Sets the foreground bar's fill color.
-     * Defaults to the `successHue` [theme](/components/theme-object#colors) value.
+     * Sets the foreground bar's fill color. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e.
+     * `border.primaryEmphasis`) to render based on light/dark mode, or any hex
+     * value.  Defaults to the `border.successEmphasis`
+     * [theme](/components/theme-object#variables) value.
      */
     color?: string;
     /** Adjusts the height */
@@ -52,8 +65,11 @@ export interface ISpinnerProps extends SVGAttributes<SVGSVGElement> {
      **/
     duration?: number;
     /**
-     * Sets the fill color. Inherits the parent's `color` by default.
-     **/
+     * Sets the fill color. Accepts a [color
+     * variable](/components/theme-object#colors) key (i.e. `foreground.primary`)
+     * to render based on light/dark mode, or any hex value. Inherits the parent's
+     * `color` by default.
+     */
     color?: string;
     /**
      * Delays displaying the loader to prevent a render flash during normal loading times

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-loaders",
-  "version": "9.0.0-next.26",
+  "version": "9.0.0-next.27",
   "description": "Components relating to loaders in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.26"
+    "@zendeskgarden/react-theming": "^9.0.0-next.27"
   },
   "keywords": [
     "components",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
+  "gitHead": "1e33779f9a7a284af3eda1405fa624c00e739a6a"
 }