@zendeskgarden/react-tags 9.0.0-next.9 → 9.1.0

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledAvatar.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tags.avatar';
 const StyledAvatar = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
 })(["flex-shrink:0;font-size:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledAvatar.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledAvatar };

package/dist/esm/styled/StyledClose.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tags.close';
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledClose.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledClose };

package/dist/esm/styled/StyledTag.js

@@ -6,33 +6,134 @@
 */
 import styled, { css } from 'styled-components';
 import { readableColor, math } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledAvatar } from './StyledAvatar.js';
 import { StyledClose } from './StyledClose.js';
 
 const COMPONENT_ID = 'tags.tag_view';
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
   let backgroundColor;
   let foregroundColor;
-  let closeColor;
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 400 : 600;
-    backgroundColor = getColorV8(props.hue, shade, props.theme);
-    if (props.hue === 'yellow' || props.hue === 'lemon') {
-      foregroundColor = getColorV8('yellow', 800, props.theme);
-    } else {
-      foregroundColor = readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
+  if (hue) {
+    foregroundColor = getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    switch (hue) {
+      case 'grey':
+      case 'neutralHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.emphasis',
+          dark: {
+            offset: -300
+          }
+        });
+        break;
+      case 'blue':
+      case 'primaryHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.primaryEmphasis'
+        });
+        break;
+      case 'red':
+      case 'dangerHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.dangerEmphasis'
+        });
+        break;
+      case 'green':
+      case 'successHue':
+        backgroundColor = getColor({
+          theme,
+          variable: 'background.successEmphasis'
+        });
+        break;
+      case 'yellow':
+      case 'warningHue':
+        backgroundColor = getColor({
+          theme,
+          hue: 'warningHue',
+          shade: 400
+        });
+        if (theme.colors.base === 'light') {
+          foregroundColor = getColor({
+            theme,
+            variable: 'foreground.warningEmphasis'
+          });
+        }
+        break;
+      case 'kale':
+      case 'chromeHue':
+        backgroundColor = getColor({
+          theme,
+          hue: 'chromeHue',
+          dark: {
+            shade: 500
+          },
+          light: {
+            shade: 800
+          }
+        });
+        break;
+      default:
+        {
+          const lightTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'light'
+            }
+          };
+          const darkTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'dark'
+            }
+          };
+          const variable = 'foreground.onEmphasis';
+          backgroundColor = getColor({
+            theme,
+            hue
+          });
+          foregroundColor = readableColor(backgroundColor, getColor({
+            theme: darkTheme,
+            variable
+          }), getColor({
+            theme: lightTheme,
+            variable
+          }), false );
+          break;
+        }
     }
   } else {
-    backgroundColor = getColorV8('neutralHue', 200, props.theme);
-    foregroundColor = getColorV8('neutralHue', 700, props.theme);
-    closeColor = getColorV8('neutralHue', 600, props.theme);
+    backgroundColor = getColor({
+      theme,
+      hue: 'neutralHue',
+      dark: {
+        shade: 800
+      },
+      light: {
+        shade: 200
+      }
+    });
+    foregroundColor = getColor({
+      theme,
+      variable: 'foreground.default'
+    });
   }
-  return css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, focusStyles({
-    theme: props.theme,
+  return css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, focusStyles({
+    theme,
     shadowWidth: 'sm',
     selector: '&:focus'
-  }), StyledClose, closeColor);
+  }));
 };
 const sizeStyles = props => {
   let borderRadius;
@@ -84,7 +185,7 @@ const sizeStyles = props => {
 };
 const StyledTag = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"

package/dist/index.cjs.js

@@ -41,50 +41,145 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$2 = 'tags.avatar';
 const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-3kdmgt-0"
 })(["flex-shrink:0;font-size:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledAvatar.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$1 = 'tags.close';
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-d6lrpn-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledClose.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 
 const COMPONENT_ID = 'tags.tag_view';
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    hue
+  } = _ref;
   let backgroundColor;
   let foregroundColor;
-  let closeColor;
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 400 : 600;
-    backgroundColor = reactTheming.getColorV8(props.hue, shade, props.theme);
-    if (props.hue === 'yellow' || props.hue === 'lemon') {
-      foregroundColor = reactTheming.getColorV8('yellow', 800, props.theme);
-    } else {
-      foregroundColor = polished.readableColor(backgroundColor, props.theme.palette.grey[800], props.theme.palette.white);
+  if (hue) {
+    foregroundColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    switch (hue) {
+      case 'grey':
+      case 'neutralHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.emphasis',
+          dark: {
+            offset: -300
+          }
+        });
+        break;
+      case 'blue':
+      case 'primaryHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.primaryEmphasis'
+        });
+        break;
+      case 'red':
+      case 'dangerHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.dangerEmphasis'
+        });
+        break;
+      case 'green':
+      case 'successHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          variable: 'background.successEmphasis'
+        });
+        break;
+      case 'yellow':
+      case 'warningHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          hue: 'warningHue',
+          shade: 400
+        });
+        if (theme.colors.base === 'light') {
+          foregroundColor = reactTheming.getColor({
+            theme,
+            variable: 'foreground.warningEmphasis'
+          });
+        }
+        break;
+      case 'kale':
+      case 'chromeHue':
+        backgroundColor = reactTheming.getColor({
+          theme,
+          hue: 'chromeHue',
+          dark: {
+            shade: 500
+          },
+          light: {
+            shade: 800
+          }
+        });
+        break;
+      default:
+        {
+          const lightTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'light'
+            }
+          };
+          const darkTheme = {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              base: 'dark'
+            }
+          };
+          const variable = 'foreground.onEmphasis';
+          backgroundColor = reactTheming.getColor({
+            theme,
+            hue
+          });
+          foregroundColor = polished.readableColor(backgroundColor, reactTheming.getColor({
+            theme: darkTheme,
+            variable
+          }), reactTheming.getColor({
+            theme: lightTheme,
+            variable
+          }), false );
+          break;
+        }
     }
   } else {
-    backgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
-    foregroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
-    closeColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
+    backgroundColor = reactTheming.getColor({
+      theme,
+      hue: 'neutralHue',
+      dark: {
+        shade: 800
+      },
+      light: {
+        shade: 200
+      }
+    });
+    foregroundColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.default'
+    });
   }
-  return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
-    theme: props.theme,
+  return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", ""], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
+    theme,
     shadowWidth: 'sm',
     selector: '&:focus'
-  }), StyledClose, closeColor);
+  }));
 };
 const sizeStyles = props => {
   let borderRadius;
@@ -136,7 +231,7 @@ const sizeStyles = props => {
 };
 const StyledTag = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1jvbe03-0"
@@ -147,7 +242,7 @@ StyledTag.defaultProps = {
 };
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/typings/elements/Tag.d.ts

@@ -8,10 +8,12 @@ import React from 'react';
 import { ITagProps } from '../types';
 import { Close } from './Close';
 import { Avatar } from './Avatar';
+declare const TagComponent: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Tag: React.ForwardRefExoticComponent<ITagProps & React.RefAttributes<HTMLDivElement>> & {
+export declare const Tag: typeof TagComponent & {
     Avatar: typeof Avatar;
     Close: typeof Close;
 };
+export {};

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

@@ -4,8 +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.
  */
-/// <reference types="react" />
-export declare const StyledAvatar: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
+export declare const StyledAvatar: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 }, "data-garden-id" | "data-garden-version">;

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

@@ -10,9 +10,13 @@ export interface ITagProps extends HTMLAttributes<HTMLDivElement> {
     /** Adjusts font size and padding */
     size?: (typeof SIZE)[number];
     /**
-     * Sets the color of the tag. Refer to
-     * [PALETTE](/components/palette#palette)
-     * for available colors. Accepts any hex value.
+     * Sets the color of the tag. Refer to theming
+     * [colors](/components/theme-object#colors) or
+     * [PALETTE](/components/palette#palette) for available colors. Use [primary
+     * hues](/design/color#primary-colors) – `blue`, `green`, `grey`, `kale`,
+     * `red`, `yellow` or `primaryHue`, `successHue`, `neutralHue`, `chromeHue`,
+     * `dangerHue`, `warningHue`  – to apply color based on light/dark mode.
+     * Accepts any hex value.
      */
     hue?: string;
     /** Applies pill styling */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tags",
-  "version": "9.0.0-next.9",
+  "version": "9.1.0",
   "description": "Components relating to tags in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -22,18 +22,18 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.9",
-    "@zendeskgarden/svg-icons": "7.0.0"
+    "@zendeskgarden/react-theming": "^9.1.0",
+    "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }