@decisiv/ui-components 2.0.1-alpha.181 → 2.0.1-alpha.182

package/lib/components/Avatar/AvatarContainer.d.ts

@@ -1,16 +1,4 @@
-import { SimpleInterpolation as CSS } from 'styled-components';
-declare const kindModifiers: {
-    readonly primary: () => CSS;
-    readonly secondary: () => CSS;
-};
-declare const sizeModifiers: {
-    readonly medium: () => CSS;
-    readonly large: () => CSS;
-};
-interface AvatarContainerProps {
-    kind?: keyof typeof kindModifiers;
-    size?: keyof typeof sizeModifiers;
-}
+import { AvatarContainerProps } from './types';
 declare const AvatarContainer: import("styled-components").StyledComponent<"div", any, AvatarContainerProps, never>;
 export default AvatarContainer;
 //# sourceMappingURL=AvatarContainer.d.ts.map

package/lib/components/Avatar/AvatarContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContainer.ts"],"names":[],"mappings":"AAEA,OAAe,EAAO,mBAAmB,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQ5E,QAAA,MAAM,aAAa;;;CAOT,CAAC;AAgBX,QAAA,MAAM,aAAa;;;CAGT,CAAC;AAEX,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;CACnC;AAED,QAAA,MAAM,eAAe,sFAgBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AvatarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContainer.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAoC/C,QAAA,MAAM,eAAe,sFAkBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Avatar/AvatarContainer.js

@@ -17,25 +17,18 @@ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"))
 
 var _typography = _interopRequireDefault(require("@decisiv/design-tokens/lib/typography"));
 
+var _palette = require("../../modifiers/palette");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var status = _color.default.status,
-    visualInterest = _color.default.visualInterest;
-var kindModifiers = {
-  primary: function primary() {
-    return (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(status.information.medium));
-  },
-  secondary: function secondary() {
-    return (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(visualInterest.licoriceMousse.medium));
-  }
-};
+var status = _color.default.status;
 
 var makeSizeModifiers = function makeSizeModifiers(_ref) {
   var size = _ref.size,
       typeScale = _ref.typeScale;
-  return (0, _styledComponents.css)(["font-size:", ";height:", ";min-height:", ";width:", ";min-width:", ";"], (0, _rem.default)(_typography.default.size.scale[typeScale]), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size));
+  return (0, _styledComponents.css)(["font-weight:", ";font-size:", ";height:", ";min-height:", ";width:", ";min-width:", ";"], _typography.default.weight.alias.regular, (0, _rem.default)(_typography.default.size.scale[typeScale]), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size));
 };
 
 var sizeModifiers = {
@@ -48,15 +41,21 @@ var sizeModifiers = {
   large: function large() {
     return makeSizeModifiers({
       size: 60,
-      typeScale: 4
+      typeScale: 3
     });
   }
 };
 
+var withGravatarModifiers = function withGravatarModifiers(props) {
+  var shouldUseGravatar = props.shouldUseGravatar;
+  if (!shouldUseGravatar) return null;
+  return (0, _styledComponents.css)(["color:transparent;background-color:transparent;border:none;"]);
+};
+
 var AvatarContainer = _styledComponents.default.div.withConfig({
   displayName: "AvatarContainer",
   componentId: "sc-16avffw-0"
-})(["position:relative;align-items:center;background-color:", ";border-radius:50%;display:inline-flex;height:", ";justify-content:center;width:", ";> span[role='img']{line-height:0;}", ";", ";"], (0, _toColorString.default)(status.information.medium), (0, _rem.default)(36), (0, _rem.default)(36), (0, _styledComponentsModifiers.applyStyleModifiers)(kindModifiers, 'kind'), (0, _styledComponentsModifiers.applyStyleModifiers)(sizeModifiers, 'size'));
+})(["position:relative;align-items:center;background-color:", ";border-radius:50%;display:inline-flex;height:", ";justify-content:center;width:", ";> span[role='img']{line-height:0;}", ";", ";", ""], (0, _toColorString.default)(status.information.medium), (0, _rem.default)(36), (0, _rem.default)(36), (0, _styledComponentsModifiers.applyStyleModifiers)(sizeModifiers, 'size'), _palette.withBorderedPalette, withGravatarModifiers);
 
 var _default = AvatarContainer;
 exports.default = _default;

package/lib/components/Avatar/AvatarContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AvatarProps } from './types';
-declare function AvatarContent(props: AvatarProps): JSX.Element;
+import { AvatarContentProps } from './types';
+declare function AvatarContent(props: AvatarContentProps): JSX.Element;
 export default AvatarContent;
 //# sourceMappingURL=AvatarContent.d.ts.map

package/lib/components/Avatar/AvatarContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContent.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContent.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiBtC,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAatD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AvatarContent.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContent.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8B7C,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkB7D;AAED,eAAe,aAAa,CAAC"}

package/lib/components/Avatar/AvatarContent.js

@@ -5,61 +5,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _designTokens = require("@decisiv/design-tokens");
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
 var _Typography = require("../Typography");
 
 var _useAvatarIcon = _interopRequireDefault(require("./hooks/useAvatarIcon"));
 
-var _useGravatar3 = _interopRequireDefault(require("./hooks/useGravatar"));
-
 var _useInitials = _interopRequireDefault(require("./hooks/useInitials"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _palette = require("../../modifiers/palette");
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var GravatarImg = _styledComponents.default.img.withConfig({
   displayName: "AvatarContent__GravatarImg",
   componentId: "sc-1jejgqy-0"
 })(["border-radius:50%;width:100%;"]);
 
+var borderColor = _objectSpread({}, _color.default.base.charcoal, {
+  alpha: _palette.BORDER_OPACITY.pastel
+});
+
+var GravatarShadow = _styledComponents.default.div.withConfig({
+  displayName: "AvatarContent__GravatarShadow",
+  componentId: "sc-1jejgqy-1"
+})(["position:absolute;width:100%;height:100%;box-shadow:inset 0 0 0 1px ", ";border-radius:50%;top:0;left:0;"], (0, _toColorString.default)(borderColor));
+
 var Initials = (0, _styledComponents.default)(_Typography.P).attrs({
   as: 'span'
 }).withConfig({
   displayName: "AvatarContent__Initials",
-  componentId: "sc-1jejgqy-1"
-})(["color:", ";font-size:inherit;text-transform:uppercase;"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+  componentId: "sc-1jejgqy-2"
+})(["font-size:inherit;text-transform:uppercase;font-weight:inherit;"]);
 
 var AvatarIcon = _styledComponents.default.div.withConfig({
   displayName: "AvatarContent__AvatarIcon",
-  componentId: "sc-1jejgqy-2"
-})(["color:", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+  componentId: "sc-1jejgqy-3"
+})([""]);
 
 function AvatarContent(props) {
-  var _useGravatar = (0, _useGravatar3.default)(props),
-      _useGravatar2 = _slicedToArray(_useGravatar, 2),
-      gravatarProps = _useGravatar2[0],
-      shouldUseGravatar = _useGravatar2[1];
-
+  var gravatarProps = props.gravatarProps,
+      shouldUseGravatar = props.shouldUseGravatar;
   var initials = (0, _useInitials.default)(props);
   var avatarIconProps = (0, _useAvatarIcon.default)(props);
 
   switch (true) {
     case shouldUseGravatar:
-      return _react.default.createElement(GravatarImg, gravatarProps);
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(GravatarImg, gravatarProps), _react.default.createElement(GravatarShadow, null));
 
     case !!initials.length:
       return _react.default.createElement(Initials, null, initials);

package/lib/components/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AASvE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAkClC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAavB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKjD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AA6DlC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAcvB,eAAe,aAAa,CAAC"}

package/lib/components/Avatar/index.js

@@ -19,6 +19,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
 var _AvatarContainer = _interopRequireDefault(require("./AvatarContainer"));
@@ -35,29 +37,60 @@ var _types = require("./types");
 
 var _schema = _interopRequireDefault(require("./schema"));
 
+var _useGravatar3 = _interopRequireDefault(require("./hooks/useGravatar"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
+function _extends() { _extends = Object.assign || 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function Avatar(props, ref) {
   var ariaLabel = props['aria-label'],
       email = props.email,
       entityType = props.entityType,
+      color = props.color,
       kind = props.kind,
       name = props.name,
+      palette = props.palette,
       size = props.size,
       indicatorColor = props.indicatorColor;
   var translate = (0, _useTranslations.default)();
+
+  var _useGravatar = (0, _useGravatar3.default)(props),
+      _useGravatar2 = _slicedToArray(_useGravatar, 2),
+      gravatarProps = _useGravatar2[0],
+      shouldUseGravatar = _useGravatar2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!(0, _isEmpty.default)(kind)) window.console && // eslint-disable-next-line no-console
+    console.warn('[KeyDesignSystems] The `kind` prop for the `Avatar` component has been deprecated. Use `color` + `palette` instead.'); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // This is done to not break the now deprecated `secondary` kind variant. Should be removed in the future.
+
+  var componentColor = kind === 'secondary' ? 'licoriceMousse' : color;
   return _react.default.createElement(_AvatarContainer.default, {
     ref: ref,
-    kind: kind,
-    size: size
+    size: size,
+    palette: palette,
+    color: componentColor,
+    shouldUseGravatar: shouldUseGravatar
   }, _react.default.createElement("span", {
     "aria-label": translate(ariaLabel, 'avatar.aria.label', {
       descriptor: name || email || entityType
     }),
     role: "img"
-  }, _react.default.createElement(_AvatarContent.default, props)), indicatorColor && indicatorColor in _commonUIColors.commonUIColors && _react.default.createElement(_AvatarIndicator.default, {
+  }, _react.default.createElement(_AvatarContent.default, _extends({
+    gravatarProps: gravatarProps,
+    shouldUseGravatar: shouldUseGravatar
+  }, props))), indicatorColor && indicatorColor in _commonUIColors.commonUIColors && _react.default.createElement(_AvatarIndicator.default, {
     size: size,
     color: indicatorColor
   }));
@@ -68,10 +101,11 @@ AvatarWithRef.propTypes = _schema.default.propTypes;
 AvatarWithRef.defaultProps = {
   email: undefined,
   entityType: _constants.entityTypes.person,
-  kind: _constants.kinds.primary,
   name: undefined,
   size: _constants.sizes.medium,
-  indicatorColor: undefined
+  indicatorColor: undefined,
+  color: 'information',
+  palette: 'bright'
 };
 var _default = AvatarWithRef;
 exports.default = _default;

package/lib/components/Avatar/index.test.js

@@ -10,6 +10,8 @@ var _constants = require("./constants");
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
+var _palette = require("../../modifiers/palette");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -25,6 +27,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var modifierMap = {
   kind: Object.values(_constants.kinds),
   size: Object.values(_constants.sizes),
+  palette: Object.keys(_palette.PALETTE_MAPPER),
+  color: Object.keys(_commonUIColors.commonUIColors),
   indicatorColor: Object.keys(_commonUIColors.commonUIColors)
 };
 describe('Avatar', function () {

package/lib/components/Avatar/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA4BnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAwCnD,eAAe,MAAM,CAAC"}

package/lib/components/Avatar/schema.js

@@ -15,8 +15,10 @@ var schema = (0, _reactDesc.describe)({
 });
 schema.propTypes = {
   email: _reactDesc.PropTypes.string.description("The entity's email address. Used in Gravatar image lookup."),
+  color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   entityType: _reactDesc.PropTypes.oneOf(Object.values(_constants.entityTypes)).description('Selects the entity type represented.').defaultValue('person'),
-  kind: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.kinds))]).description('Selects the kind of Avatar.').defaultValue('primary'),
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel', 'dark']).description('What color variant to render').defaultValue('bright'),
+  kind: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.kinds))]).description('***DEPRECATED*** Use color + palette instead. Selects the kind of Avatar.').defaultValue('primary').format('***DEPRECATED*** string').deprecated('Use color + palette instead'),
   name: _reactDesc.PropTypes.string.description("The entity's name. First letter of first and last words used to generate initials."),
   size: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.sizes))]).description('Selects the size desired.'),
   indicatorColor: _reactDesc.PropTypes.string.description('(See note) Sets the indicator color')

package/lib/components/Avatar/types.d.ts

@@ -1,14 +1,27 @@
-import { Ref } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { entityTypes, kinds, sizes } from './constants';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
+import { GravatarProps, ShouldUseGravatar } from './hooks/useGravatar';
 export declare type AvatarRef = HTMLDivElement;
-export interface AvatarProps extends React.HTMLAttributes<HTMLElement> {
+export interface AvatarProps extends HTMLAttributes<HTMLElement> {
+    color?: CommonUIColorKeys;
     email?: string;
     entityType?: keyof typeof entityTypes;
     indicatorColor?: CommonUIColorKeys;
     kind?: keyof typeof kinds;
     name?: string;
+    palette?: 'pastel' | 'bright' | 'dark';
     ref?: Ref<AvatarRef>;
     size?: keyof typeof sizes;
 }
+export interface AvatarContentProps extends AvatarProps {
+    gravatarProps: GravatarProps;
+    shouldUseGravatar: ShouldUseGravatar;
+}
+export interface AvatarContainerProps {
+    color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
+    size?: keyof typeof sizes;
+    shouldUseGravatar: ShouldUseGravatar;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Avatar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,SAAS,GAAG,cAAc,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACtC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEvE,oBAAY,SAAS,GAAG,cAAc,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACtC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,iBAAiB,EAAE,iBAAiB,CAAC;CACtC"}

package/lib/components/Tag/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAa,QAAQ,EAAoB,MAAM,SAAS,CAAC;AAahE,UAAU,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,aAAK,cAAc,GAAG,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,CAAC;AAoChF,eAAO,MAAM,OAAO,8EAkCnB,CAAC;AAmIF,eAAO,MAAM,SAAS,gFAqDrB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":"AAeA,OAAO,EAAa,QAAQ,EAAoB,MAAM,SAAS,CAAC;AAahE,UAAU,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,aAAK,cAAc,GAAG,QAAQ,GAAG;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAA;CAAE,CAAC;AAkBhF,eAAO,MAAM,OAAO,8EAkCnB,CAAC;AAqHF,eAAO,MAAM,SAAS,gFAqDrB,CAAC"}

package/lib/components/Tag/styles.js

@@ -17,6 +17,8 @@ var _commonUIColors = require("../../utils/commonUIColors");
 
 var _color = _interopRequireDefault(require("../../modifiers/color"));
 
+var _palette = require("../../modifiers/palette");
+
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
 var _styleModifiers = require("../../utils/styleModifiers");
@@ -38,23 +40,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var _designTokens$color = _designTokens.default.color,
     interactionColors = _designTokens$color.interaction,
     statusColors = _designTokens$color.status;
-var PALETTE_MAPPER = {
-  pastel: 'light',
-  bright: 'medium',
-  dark: 'dark'
-};
-var FG_COLOR = {
-  pastel: _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: 0.8
-  }),
-  bright: _designTokens.color.base.snowWhite,
-  dark: _designTokens.color.base.snowWhite
-};
-var BORDER_OPACITY = {
-  pastel: 0.1,
-  bright: 0.15,
-  dark: 0.3
-};
 
 var getContentMaxWidth = function getContentMaxWidth(props) {
   var isSingleChild = props.isSingleChild,
@@ -78,7 +63,7 @@ var Content = _styledComponents.default.div.withConfig({
   var _ref$palette = _ref.palette,
       palette = _ref$palette === void 0 ? 'bright' : _ref$palette;
   return (0, _toColorString.default)(_objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
+    alpha: _palette.BORDER_OPACITY[palette]
   }));
 }, function (_ref2) {
   var isSingleChild = _ref2.isSingleChild;
@@ -98,34 +83,13 @@ var contentSVGColor = function contentSVGColor(_ref3) {
   return null;
 };
 
-var getColorByProps = function getColorByProps(_ref4) {
-  var variant = _ref4.variant,
-      colorProp = _ref4.color,
-      _ref4$palette = _ref4.palette,
-      palette = _ref4$palette === void 0 ? 'bright' : _ref4$palette;
-  if (variant === 'outline') return _objectSpread({}, _designTokens.color.base.snowWhite, {
-    fg: _designTokens.color.base.alaskanHusky
-  });
-
-  if (colorProp && colorProp in _commonUIColors.commonUIThreeShadeColors) {
-    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
-    var fgColor = FG_COLOR[palette];
-    var bgColor = baseColor[PALETTE_MAPPER[palette]];
-    return palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
-      fg: fgColor
-    });
-  }
-
-  return _commonUIColors.commonUIColors.licoriceMousse;
-};
-
 var actionColors = {
   normal: (0, _toColorString.default)(interactionColors.indianOcean),
   danger: (0, _toColorString.default)(statusColors.danger.medium)
 };
 
-var actionColor = function actionColor(_ref5) {
-  var actionIntent = _ref5.actionIntent;
+var actionColor = function actionColor(_ref4) {
+  var actionIntent = _ref4.actionIntent;
   return actionColors[actionIntent !== 'danger' ? 'normal' : 'danger'];
 };
 
@@ -134,10 +98,12 @@ var colorModifiers = function colorModifiers(props) {
       palette = _props$palette === void 0 ? 'bright' : _props$palette;
 
   var borderColor = _objectSpread({}, _designTokens.color.base.charcoal, {
-    alpha: BORDER_OPACITY[palette]
+    alpha: _palette.BORDER_OPACITY[palette]
   });
 
-  return (0, _styledComponents.css)(["", ";border:1px solid ", ";", ""], (0, _color.default)(getColorByProps(props)), (0, _toColorString.default)(borderColor), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
+  return (0, _styledComponents.css)(["", " ", " ", ""], (0, _palette.withBorderedPalette)(props), (0, _styleModifiers.when)('variant', 'outline', (0, _styledComponents.css)(["", ""], (0, _color.default)(_objectSpread({}, _designTokens.color.base.snowWhite, {
+    fg: _designTokens.color.base.alaskanHusky
+  })))), (0, _styleModifiers.when)('isSingleChild', false, (0, _styledComponents.css)(["&:hover{box-shadow:inset 0 0 0 ", " ", ";", "{border-color:transparent;}}"], (0, _rem.default)(100), (0, _toColorString.default)(borderColor), Content)));
 };
 
 var variantModifiers = function variantModifiers(props) {

package/lib/modifiers/palette.d.ts

@@ -0,0 +1,36 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { CommonUIColorKeys } from '../utils/commonUIColors';
+export interface PaletteProps {
+    color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
+}
+export declare const PALETTE_MAPPER: {
+    readonly pastel: "light";
+    readonly bright: "medium";
+    readonly dark: "dark";
+};
+export declare const FG_COLOR: {
+    pastel: {
+        readonly alpha: 0.8;
+        readonly red: number;
+        readonly green: number;
+        readonly blue: number;
+        readonly fg: import("polished/lib/types/color").RgbColor | import("polished/lib/types/color").RgbaColor;
+    } | {
+        readonly alpha: 0.8;
+        readonly red: number;
+        readonly green: number;
+        readonly blue: number;
+        readonly fg: import("polished/lib/types/color").RgbColor | import("polished/lib/types/color").RgbaColor;
+    };
+    readonly bright: import("@decisiv/design-tokens/lib/color").Color;
+    readonly dark: import("@decisiv/design-tokens/lib/color").Color;
+};
+export declare const BORDER_OPACITY: {
+    readonly pastel: 0.1;
+    readonly bright: 0.15;
+    readonly dark: 0.3;
+};
+export declare function withPalette(props: PaletteProps): FlattenSimpleInterpolation;
+export declare function withBorderedPalette(props: PaletteProps): FlattenSimpleInterpolation;
+//# sourceMappingURL=palette.d.ts.map

package/lib/modifiers/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/modifiers/palette.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,0BAA0B,EAE3B,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EAGL,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACxC;AAED,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;CAIX,CAAC;AAEX,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AA2BX,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,0BAA0B,CAI3E;AAKD,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,YAAY,GAClB,0BAA0B,CAa5B"}

package/lib/modifiers/palette.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withPalette = withPalette;
+exports.withBorderedPalette = withBorderedPalette;
+exports.BORDER_OPACITY = exports.FG_COLOR = exports.PALETTE_MAPPER = void 0;
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _styledComponents = require("styled-components");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _color2 = _interopRequireDefault(require("./color"));
+
+var _commonUIColors = require("../utils/commonUIColors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium',
+  dark: 'dark'
+};
+exports.PALETTE_MAPPER = PALETTE_MAPPER;
+var FG_COLOR = {
+  pastel: _objectSpread({}, _color.default.base.charcoal, {
+    alpha: 0.8
+  }),
+  bright: _color.default.base.snowWhite,
+  dark: _color.default.base.snowWhite
+};
+exports.FG_COLOR = FG_COLOR;
+var BORDER_OPACITY = {
+  pastel: 0.1,
+  bright: 0.15,
+  dark: 0.3
+};
+exports.BORDER_OPACITY = BORDER_OPACITY;
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      colorProp = props.color;
+
+  if (colorProp && colorProp in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[colorProp];
+    var fgColor = FG_COLOR[palette];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color2.default)(colorPalette));
+  }
+
+  return (0, _styledComponents.css)(["", ""], (0, _color2.default)(_commonUIColors.commonUIColors.licoriceMousse));
+};
+/**
+ * Helper to apply the palette color Interpolation
+ */
+
+
+function withPalette(props) {
+  return (0, _styledComponents.css)(["", ""], colorModifiers(props));
+}
+/**
+ * Helper to apply the palette color Interpolation with borders
+ */
+
+
+function withBorderedPalette(props) {
+  var _props$palette2 = props.palette,
+      palette = _props$palette2 === void 0 ? 'bright' : _props$palette2;
+
+  var borderColor = _objectSpread({}, _color.default.base.charcoal, {
+    alpha: BORDER_OPACITY[palette]
+  });
+
+  return (0, _styledComponents.css)(["", " border:1px solid ", ";"], colorModifiers(props), (0, _toColorString.default)(borderColor));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.181+9c0cbbf",
+  "version": "2.0.1-alpha.182+bbde1e2",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "9c0cbbf6479772593131f6e10b0f93bee935e5a9"
+  "gitHead": "bbde1e2883ce206cad4795fb09e444750b2cc535"
 }